/* ============================================================
   Pipezoom - tools.css
   The interactive lookups and calculators: the stage picker, the
   deal router, the objection finder, the business type lookup, the
   Instant Approval check, the week planner, the payout calculator
   and the dialer.

   Split out of pages.css under the size limit. pages.css keeps the
   per-page element rules; this file styles the widgets those pages
   mount.

   COLOR RULE: no literal color values. Tokens only.
   ============================================================ */

/* Stage picker
   7 stages are below this on the page. Because a rep with a stuck deal
   needs exactly 1 of them, this shows 1 and hides 6. */
/* The 7 stages read as a track: numbered nodes on a connecting line,
   the sequence visible before any text is read. */
.stg{margin-top:18px;}
/* Deal router
   1 question at a time. Answering collapses the question to the chosen
   answer, the trail of decisions stays readable, and tapping that
   answer again reopens it. */
.dr{margin-top:14px;}
.dr-step{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 15px;
  margin-bottom:8px;
  background:var(--surface-raised);
}
/* An answered question keeps every option on screen, and 1 tap changes
   the choice. It loses emphasis and keeps its content. */
.dr-answered{background:transparent;}
.dr-ask{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.98rem;line-height:1.4;}
.dr-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;flex-shrink:0;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  color:var(--ink-faint);
  font-size:.73rem;font-weight:700;
}
.dr-answered .dr-num{background:var(--accent-strong);color:var(--ink-inverse);}
.dr-note{color:var(--ink-soft);font-size:.83rem;line-height:1.5;margin:4px 0 0 31px;}

.dr-opts{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:11px;}
.dr-opt{
  display:flex;align-items:center;gap:11px;
  text-align:left;
  background:var(--surface-high);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  color:var(--ink);
  transition:border-color .12s,background .12s;
}
.dr-opt:hover{border-color:var(--line-strong);background:var(--surface-hover);}

/* The answer a rep picked is filled with the accent and wears white
   text. The hover state repeats the fill a shade up. */
.dr-on,
.dr-on:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.dr-on:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.dr-opt-ic{font-size:1rem;width:20px;flex-shrink:0;text-align:center;color:var(--ink-faint);}
.dr-on .dr-opt-ic{color:var(--ink-inverse);}
.dr-opt-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.dr-opt-label{font-weight:600;font-size:.9rem;line-height:1.35;}
.dr-opt-hint{color:var(--ink-faint);font-size:.78rem;line-height:1.35;}
.dr-on .dr-opt-hint,
.dr-on .dr-opt-redo{color:var(--on-accent-soft);}
.dr-opt-redo{margin-left:auto;font-size:.78rem;color:var(--ink-faint);flex-shrink:0;}

.dr-out{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-raised);
  padding:16px 17px;
  margin-top:12px;
}
.dr-out-head{
  display:flex;align-items:center;gap:10px;
  font-size:1.06rem;font-weight:700;line-height:1.35;
  color:var(--ink);
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  margin-bottom:13px;
}
/* Because the pitch is what gets said on the call, it comes first, in 1
   sentence. */
.dr-pitch{
  font-size:1rem;line-height:1.6;
  color:var(--ink);
  max-width:88ch;
  margin:0 0 14px;
}

/* The owner and the payout, side by side. Because a rep decides on the
   figure, it is pulled out. */
.dr-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}
.dr-card{
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:13px 15px;
}
.dr-card-l{
  color:var(--ink-faint);font-size:.68rem;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;
}
.dr-card-v{font-size:.92rem;line-height:1.5;color:var(--ink);margin-top:6px;}
.dr-card-fig{
  font-size:1.5rem;font-weight:700;letter-spacing:-.5px;
  color:var(--accent);
  line-height:1.15;
  margin-top:4px;
}
.dr-card-of{font-size:.79rem;color:var(--ink-faint);margin-top:2px;}
.dr-card-note{font-size:.83rem;line-height:1.5;color:var(--ink-soft);margin-top:8px;}

.dr-list-title{
  color:var(--ink-faint);font-size:.7rem;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;margin-bottom:8px;
}
/* This deal's steps, in the order they happen. */
.dr-steps{
  counter-reset:dr;
  list-style:none;
  margin:0 0 16px;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.dr-steps li{
  counter-increment:dr;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  align-items:start;
  gap:11px;
  font-size:.89rem;line-height:1.55;
  color:var(--ink-soft);
}
.dr-steps li::before{
  content:counter(dr);
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  color:var(--ink);
  font-size:.78rem;font-weight:700;
}

/* The rules that hold whatever the answer was, kept apart from the
   ones that came out of the questions. */
.dr-always{
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:13px 15px;
  margin-bottom:16px;
}
.dr-always-head{
  display:flex;align-items:center;gap:9px;
  font-size:.83rem;font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
}
.dr-always-head i{color:var(--danger);font-size:.85rem;}
.dr-always ul{margin:0;padding-left:18px;}
.dr-always li{font-size:.88rem;line-height:1.55;color:var(--ink-soft);}
.dr-always li + li{margin-top:5px;}
.dr-warn{margin-bottom:16px;}

.dr-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid var(--line);
}
@media (max-width:640px){
  .dr-cards{grid-template-columns:1fr;}
}

.dr-links{display:flex;flex-wrap:wrap;gap:7px;}
.dr-link{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  padding:7px 13px;
  font-size:.83rem;font-weight:600;
  color:var(--ink);
}
.dr-link:hover{background:var(--surface-high);text-decoration:none;}
.dr-link i{font-size:.72rem;color:var(--ink-faint);}

/* Takes its look from .btn; this only positions it. */
.dr-reset{margin-left:auto;}

/* The launchpad is right under the single action and takes a smaller
   break than a full section change. */
.launch-title{margin-top:34px;}


/* Card titles in "The 5 rules that save deals". */
.home-rule-title{margin-top:0;}

/* Weekly rhythm is in a single card held to a reading width. */
.home-cadence-card{max-width:640px;}
.home-cadence-list{margin:4px 0 0 18px;}


/* The objection lookup
   Because recall fails on the call, a rep looks the line up here. It
   shares the call triage layout: the rep knows the objection and not
   the page it is on. */
.said{margin-top:14px;}
.said-search{position:relative;}
.said-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:.9rem;pointer-events:none;
}
#saidInput{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:11px 13px 11px 36px;
  font-size:.94rem;
  outline:none;
}
#saidInput::placeholder{color:var(--ink-faint);}
#saidInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

/* The whole list is in a drawer, closed until the reader searches or
   asks for it. */
.said-drawer{
  margin-top:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.said-summary{
  display:flex;align-items:center;gap:10px;
  padding:12px 15px;
  cursor:pointer;
  list-style:none;
  border-radius:var(--radius);
}
.said-summary::-webkit-details-marker{display:none;}
.said-summary:hover{background:var(--surface-high);}
.said-summary-chev{
  font-size:.72rem;
  color:var(--ink-faint);
  transition:transform .18s ease;
}
.said-drawer[open] > .said-summary .said-summary-chev{transform:rotate(90deg);}
.said-drawer[open] > .said-summary{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;}
.said-summary-text{font-weight:600;font-size:.92rem;color:var(--ink);}
.said-summary-n{
  margin-left:auto;
  font-size:.78rem;
  color:var(--ink-faint);
  white-space:nowrap;
}

.said-list{display:flex;flex-direction:column;gap:8px;padding:14px 15px 16px;}
.said-item{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
/* The quote is the whole hit target: a rep scans for the line just
   heard, then opens the answer. */
.said-head{
  display:flex;align-items:flex-start;gap:12px;
  width:100%;
  padding:13px 16px;
  text-align:left;
}
.said-head:hover{background:var(--surface-high);}
.said-open .said-head{background:var(--surface-high);}
.said-chev{
  margin-left:auto;flex-shrink:0;
  font-size:.75rem;line-height:1.7;
  color:var(--ink-faint);
  transition:transform .18s ease;
}
.said-open .said-chev{transform:rotate(180deg);}
.said-body{padding:14px 16px 16px;border-top:1px solid var(--line);}
.said-body[hidden]{display:none;}
.said-quote{font-size:1rem;font-weight:700;line-height:1.4;color:var(--ink);min-width:0;}
.said-reply{color:var(--ink-soft);font-size:.9rem;line-height:1.6;max-width:96ch;}
.said-then{
  display:flex;gap:9px;align-items:flex-start;
  color:var(--ink-soft);
  font-size:.86rem;
  line-height:1.55;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid var(--line);
}
.said-then i{font-size:.8rem;line-height:1.7;flex-shrink:0;}

/* Business type lookup
   Because 60 rows on arrival form a wall of text, nothing renders until
   the reader asks for something. */
.mcc{margin-top:14px;}
.mcc-search{position:relative;}
.mcc-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:.9rem;pointer-events:none;
}
#mccInput{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:12px 13px 12px 36px;
  font-size:1rem;
  outline:none;
}
#mccInput::placeholder{color:var(--ink-faint);}
#mccInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

.mcc-groups{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.mcc-group{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  padding:7px 14px;
  font-size:.83rem;
  font-weight:600;
  color:var(--ink-soft);
  background:var(--surface-raised);
}
.mcc-group:hover{color:var(--ink);border-color:var(--line-strong);background:var(--surface-high);}
.mcc-group-on{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}

.mcc-out{margin-top:14px;}
.mcc-idle{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface-raised);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  padding:16px 18px;
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.6;
}
.mcc-idle i{font-size:1.1rem;line-height:1.5;color:var(--ink-faint);flex-shrink:0;}
.mcc-none{border-style:solid;}

.mcc-count{
  color:var(--ink-faint);font-size:.68rem;font-weight:700;
  letter-spacing:.9px;text-transform:uppercase;margin-bottom:12px;
}

/* A band per group: 60 rows read as 6 short lists. */
.mcc-band{
  font-size:1.02rem;font-weight:700;letter-spacing:-.1px;
  color:var(--ink);
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  margin:28px 0 11px;
}
.mcc-band:first-of-type{margin-top:0;}

.mcc-list{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));}

.mcc-item{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 13px;
}
.mcc-head{display:flex;align-items:baseline;gap:9px;}
.mcc-name{font-size:.92rem;font-weight:600;line-height:1.3;flex:1;min-width:0;}
.mcc-code{
  font-size:.75rem;font-weight:700;
  color:var(--ink-soft);
  white-space:nowrap;
}
.mcc-track{
  font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  margin-top:4px;
}
.mcc-a .mcc-track{color:var(--ink);}
.mcc-b .mcc-track{color:var(--ink-faint);}
.mcc-x .mcc-track{color:var(--ink-faint);}


.mcc-catch{
  display:flex;gap:8px;align-items:flex-start;
  background:var(--danger-wash);
  border-radius:var(--radius-sm);
  padding:7px 10px;
  margin-top:8px;
  font-size:.79rem;
  line-height:1.45;
  color:var(--ink);
}
/* The tint plus a colored icon carries the warning. Because colored type
   on a tinted panel fails in some theme, the words stay in ink. */
.mcc-catch i{font-size:.78rem;line-height:1.6;flex-shrink:0;color:var(--danger);}

/* Same-day close check
   6 taps, answered at the merchant's table in the minutes a rep has there. */
.chk{margin-top:14px;}
.chk-list{display:flex;flex-direction:column;gap:6px;}
.chk-row{
  display:flex;align-items:flex-start;gap:12px;
  width:100%;text-align:left;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  color:var(--ink);
}
.chk-row:hover{border-color:var(--line-strong);}
.chk-row[data-on="true"]{background:var(--accent-wash);border-color:var(--line-strong);}
.chk-box{font-size:1.1rem;line-height:1.35;width:19px;flex-shrink:0;color:var(--ink-faint);}
.chk-row[data-on="true"] .chk-box{color:var(--ink);}
.chk-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.chk-label{font-weight:600;font-size:.92rem;line-height:1.4;}
.chk-hint{color:var(--ink-soft);font-size:.82rem;line-height:1.5;}

.chk-out{
  display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-high);
  padding:13px 15px;
  margin-top:11px;
  font-size:.9rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.chk-out i{font-size:1rem;line-height:1.55;flex-shrink:0;color:var(--ink-faint);}
.chk-out b{color:var(--ink);}
.chk-yes{background:var(--accent-wash);border-color:var(--line-strong);color:var(--ink);}
.chk-yes i{color:var(--ink);}
.chk-no{background:var(--danger-wash);border-color:var(--line-strong);color:var(--ink);}
.chk-no i{color:var(--danger);}
.chk-no b{color:var(--ink);}
.chk-warn{margin-top:11px;}

/* Card titles across the track and checklist sections. */
.quick-card-title{margin-top:0;}

/* First label inside a yes/no card, with no lead-in gap. */
.quick-lbl-first{margin-top:0;}

/* Final callout on the page. */
.quick-closing-note{margin-top:30px;}


/* Week planner
   The page below explains territory thinking. This widget picks the
   area to drive to, the question a rep has on a Monday morning. */
.pln{margin-top:14px;}
/* The worth of 1 more deal
   The tables below answer eligibility. This widget answers the gap to
   the next payout, the figure that changes behavior in the last week of
   a month. */
.pay{margin-top:14px;}
.pay-controls{
  display:grid;
  grid-template-columns:1fr;
  gap:6px 22px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 17px;
}
@media (min-width:760px){
  .pay-controls{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.pay-ctl{margin-bottom:6px;}
.pay-label{
  display:block;
  color:var(--ink-faint);font-size:.68rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;margin-bottom:7px;
}
.pay-row{display:flex;align-items:center;gap:14px;}
.pay-range{
  flex:1;
  min-width:0;
  accent-color:var(--accent);
  height:26px;
  cursor:grab;
  touch-action:none;
}
.pay-range:active{cursor:grabbing;}
.pay-range::-webkit-slider-thumb{cursor:grab;}
.pay-range:active::-webkit-slider-thumb{cursor:grabbing;}
.pay-range::-moz-range-thumb{cursor:grab;}
.pay-value{
  font-size:1.15rem;font-weight:700;
  min-width:58px;text-align:right;
  color:var(--ink);
}
/* Fast Cash, the only program with a date on it, asks its question on
   its own line. */
/* The volume box in the programs table header, kept off the header's
   small uppercase and wide tracking. Because activity.css loads after
   this file, the selector names both classes; a bare .prog-vol loses to
   .act-num on width and size. */
.act-num.prog-vol{
  /* Sized to the digits it holds. The script sets the width in ch on
     every keystroke, and this is the floor for an empty box. */
  width:auto;
  min-width:4.5ch;
  font-size:.85rem;
  text-transform:none;
  letter-spacing:0;
  margin:0 2px;
}
.act-num.prog-vol:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-ring-soft);}

/* A column of question cards inside 1 cell of the asks grid, a related
   pair stacked 1 above the other. */
.pay-stack{display:grid;gap:7px;align-content:start;}
.pay-stack .pay-toggle{margin-top:0;height:100%;}

.pay-toggle{
  display:flex;align-items:center;gap:10px;
  width:100%;text-align:left;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-high);
  padding:11px 13px;
  margin-top:10px;
  color:var(--ink);
  font-size:.88rem;
  font-weight:600;
}
.pay-toggle[data-on="true"]{background:var(--accent-wash);border-color:var(--line-strong);}

/* Because the share beside it belongs in the same box, the partner
   switch is inside its own card. The card carries the border and the on
   state, and the button drops both. */
.pay-toggle-flat,
.pay-stack .pay-toggle-flat,
.pay-asks .pay-toggle-flat{
  width:auto;
  height:auto;
  gap:9px;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
}
.pay-toggle-flat[data-on="true"]{background:transparent;}
.pay-split:has(.pay-toggle-flat[data-on="true"]){
  background:var(--accent-wash);
  border-color:var(--line-strong);
}
.pay-toggle i{font-size:1.05rem;color:var(--ink-faint);flex-shrink:0;}
.pay-toggle[data-on="true"] i{color:var(--ink);}

/* Each program's next threshold in its own unit. Because attainment
   points and MIDs do not convert into each other, both are listed. */
/* The questions under the sliders
   A slider cannot ask whether the month was in by the 15th, or the
   count and kind of Como rooftops closed. Those questions are in cards
   directly under the sliders, 2 across on a desktop and stacked on a
   phone, each card holding everything 1 program needs. */
.pay-asks{
  display:grid;
  gap:10px;
  grid-template-columns:minmax(0,1fr);
  margin-top:10px;
}
@media (min-width:760px){
  .pay-asks{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.pay-asks .pay-toggle{margin-top:0;height:100%;}
.pay-ask{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-raised);
  padding:11px 14px;
}
.pay-ask-k{font-size:.88rem;font-weight:700;color:var(--ink);}
.pay-ask-n{flex-shrink:0;width:58px;}
/* The picker is at the right-hand end of its card and gives up its
   width first when the card narrows. */
.pay-pick{flex:1;min-width:120px;margin-left:auto;}

.pay-next{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 15px;
  margin-top:10px;
}
.pay-next-head{
  color:var(--ink-faint);font-size:.68rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px;
}
.pay-next-row{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:7px 0;
  border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.pay-next-row:last-child{border-bottom:none;padding-bottom:0;}
.pay-next-need{font-weight:700;flex:1;min-width:200px;}
.pay-next-name{color:var(--ink-soft);font-size:.82rem;}
.pay-next-pays{font-weight:700;margin-left:auto;white-space:nowrap;}

.pay-total{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  background:var(--accent-wash);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 17px;
  margin-top:10px;
}
.pay-total-label{
  color:var(--ink);font-size:.68rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;flex:1;
}
.pay-total-num{font-size:2rem;font-weight:700;line-height:1;letter-spacing:-.5px;}

/* 3 figures on 1 row: the deal's monthly pay in each year, and the
   24-month total. */
.pay-tots{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.pay-tots .pay-total{display:block;margin-top:0;}
.pay-tots .pay-total-label{display:block;margin-bottom:7px;}
.pay-tots .pay-total-num{display:block;font-size:1.7rem;}
.pay-tot-sub{
  display:block;margin-top:6px;
  color:var(--ink-soft);font-size:.78rem;line-height:1.45;
}
@media (max-width:700px){
  .pay-tots{gap:7px;}
  .pay-tots .pay-total{padding:11px 12px;}
  .pay-tots .pay-total-num{font-size:1.25rem;}
  .pay-tot-sub{font-size:.72rem;}
}

.pay-lines{
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-top:10px;
  overflow:hidden;
}
/* 4 figures, 2 across, read as 1 block. Because the pay widget prints a
   ranked list into .pay-lines at 1 per row, this layout has its own
   class. */
.pay-lines-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.pay-lines-2 .pay-line:nth-child(odd){border-right:1px solid var(--line);}
.pay-lines-2 .pay-line:nth-last-child(-n+2){border-bottom:none;}
@media (max-width:620px){
  .pay-lines-2{grid-template-columns:minmax(0,1fr);}
  .pay-lines-2 .pay-line:nth-child(odd){border-right:none;}
  .pay-lines-2 .pay-line:nth-last-child(2){border-bottom:1px solid var(--line);}
  .pay-lines-2 .pay-line:last-child{border-bottom:none;}
}

.pay-line{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:12px 15px;
  border-bottom:1px solid var(--line);
  background:var(--surface-raised);
  font-size:.89rem;
}
.pay-line:last-child{border-bottom:none;}
.pay-line i{font-size:.9rem;color:var(--ink-faint);flex-shrink:0;}
.pay-line[data-hit="true"] i{color:var(--ink);}
.pay-line-name{font-weight:700;min-width:112px;}
.pay-line-at{color:var(--ink-soft);flex:1;min-width:150px;font-size:.85rem;}
.pay-line-pays{font-weight:700;margin-left:auto;}
.pay-line[data-hit="false"] .pay-line-pays{color:var(--ink-faint);}

.pay-gap{
  display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--line);
  background:var(--accent-wash);
  border-radius:var(--radius);
  padding:13px 15px;
  margin-top:10px;
  font-size:.9rem;
  line-height:1.6;
  color:var(--ink);
}
.pay-gap i{font-size:1rem;line-height:1.5;color:var(--ink);flex-shrink:0;}
.pay-gap-max{border-color:var(--line);background:var(--surface-high);}
.pay-gap-max i{color:var(--ink-faint);}
.pay-note{margin-top:10px;}

/* Section headings that follow a card block. */
.inc-section-title{margin-top:26px;}

/* Card titles in the payout explainer pair. */
.inc-card-title{margin-top:0;}

/* Closing callout. */
.inc-note{margin-top:26px;}


/* The dialer. Every line stays on screen and typing narrows the list.
   Because the number is the reason a rep opens this page, it is the
   largest thing in each row. */
.dial{margin-top:6px;}
.dial-search{position:relative;}
.dial-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:.9rem;pointer-events:none;
}
#dialInput, #linkInput, #inboxFind{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:12px 13px 12px 36px;
  font-size:1rem;
  outline:none;
}
#dialInput::placeholder, #linkInput::placeholder, #inboxFind::placeholder{color:var(--ink-faint);}
#dialInput:focus, #linkInput:focus, #inboxFind:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

.dial-groups{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.dial-group{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  padding:7px 14px;
  font-size:.83rem;font-weight:600;
  color:var(--ink-soft);
  background:var(--surface-raised);
}
/* Hover fills, as on the deal track and the stage chips: a pointer
   previews the selection. */
.dial-group:hover,
.dial-group-on{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.dial-group-on:hover{background:var(--accent-hover);border-color:var(--accent-hover);}

.dial-list{margin-top:18px;}
/* A band is a real heading at heading size. */
.dial-band{
  display:flex;align-items:center;gap:10px;
  font-size:1.02rem;font-weight:700;letter-spacing:-.1px;
  color:var(--ink);
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  margin:32px 0 12px;
}
.dial-band i{color:var(--ink-faint);font-size:.9rem;}
.dial-band:first-of-type{margin-top:0;}
.dial-band-n{
  margin-left:auto;
  background:var(--surface-high);
  color:var(--ink-faint);
  border-radius:var(--radius-pill);
  padding:3px 10px;
  font-size:.72rem;
  font-weight:700;
}

.dial-rows{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(min(322px,100%),1fr));}
.dial-rows-more{margin-top:9px;}

/* The lines this role does not call, folded until asked for. */
.dial-more{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:10px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-sunken);
  color:var(--ink-soft);
  font-size:.83rem;font-weight:600;
}
.dial-more:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);}
.dial-more i{font-size:.72rem;}
.dial-item{
  display:flex;
  flex-direction:column;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:11px 13px;
}
.dial-item:hover{border-color:var(--line-strong);}

/* The line owner's name carries the color, 1 point per card for the eye. */
.dial-who{font-size:.98rem;font-weight:700;line-height:1.3;color:var(--ink);}
.dial-for{color:var(--ink-soft);font-size:.83rem;line-height:1.5;margin:3px 0 10px;}

/* The number is the widest and heaviest thing in the card, at the same
   height in every card. */
.dial-call{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:auto;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:1.05rem;
  letter-spacing:.2px;
  padding:9px 13px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.dial-call:hover{background:var(--accent-hover);text-decoration:none;}
.dial-call i{font-size:.88rem;}

.dial-nonum{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:auto;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  color:var(--ink-faint);
  font-size:.86rem;font-weight:600;
}

.dial-sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;}
.dial-sub:empty{display:none;}
.dial-opt{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--ink);font-weight:700;font-size:.79rem;
  background:var(--surface-high);
  border-radius:var(--radius-sm);
  padding:7px 11px;
  white-space:nowrap;
}
.dial-opt i{font-size:.68rem;color:var(--ink-faint);}
.dial-copy,.dial-mail{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:7px 11px;
  font-size:.79rem;font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
}
.dial-copy:hover,.dial-mail:hover{color:var(--ink);background:var(--surface-high);text-decoration:none;}
.dial-copy.copied{color:var(--ink);border-color:var(--line-strong);}

.dial-flag{
  display:flex;gap:8px;align-items:flex-start;
  background:var(--danger-wash);
  border-radius:var(--radius-sm);
  padding:8px 11px;
  margin-top:9px;
  color:var(--ink-soft);font-size:.78rem;line-height:1.45;
}
.dial-flag i{font-size:.75rem;line-height:1.6;flex-shrink:0;}

/* Closing callout under the directory. */
.num-note{margin-top:26px;}