/* ============================================================
   GP Team Hub - 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,
   the dialer and the link directory.

   Split out of pages.css to keep every stylesheet under the size
   limit. pages.css keeps the per-page element rules; this file holds
   the widgets those pages mount.

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

/* ---- Stage picker ----
   Seven stages sit below this on the page. A rep with a stuck deal
   needs exactly one of them, so this returns one and hides six rather
   than asking them to read all seven to find theirs. */
/* The seven stages read as a track, not a list of chips. The numbered
   nodes sit on a connecting line so the sequence is visible before any
   text is read, which is the whole point of showing a pipeline. */
.stg{margin-top:18px;}
/* ---- Deal router ----
   One question at a time. Answering collapses the question to the
   chosen answer so 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 so the choice can
   be changed in one tap. It only loses emphasis, never 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, not tinted. A wash one step off
   the unpicked options left the router looking like six cards of the
   same weight, so the pick carries the accent and wears white on top of
   it. The hover state repeats the fill a shade up rather than falling
   back to the grey the unpicked options use. */
.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;
}
/* The pitch first, in one sentence, because it is what gets said at
   the door. */
.dr-pitch{
  font-size:1rem;line-height:1.6;
  color:var(--ink);
  max-width:88ch;
  margin:0 0 14px;
}

/* Who owns it and what it pays, side by side and seen rather than
   read. The figure is pulled out because it is the number a rep is
   deciding on. */
.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 sits right under the one action, so it takes a smaller
   break than a full section change would. */
.launch-title{margin-top:34px;}


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

/* Weekly rhythm sits in a single card held to a reading width rather
   than running the full 1080px page. */
.home-cadence-card{max-width:640px;}
.home-cadence-list{margin:4px 0 0 18px;}


/* ---- What they said ----
   Recall fails at the door, so this is lookup instead. Same shape as
   the call triage because it is the same kind of moment: you know what
   you are facing, not which page it lives 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 lives in a drawer, closed until the reader either
   searches or asks for it, so the section under this one starts on
   screen rather than fourteen rows down. */
.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 is scanning for the line
   they just heard, and only then wants 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 ----
   Replaces three cards of bullet points. Nothing renders until the
   reader asks for something, because sixty rows on arrival is the wall
   this exists to remove. */
.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, so sixty rows read as six 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; the words stay in
   ink, because colored type on a tinted panel is unreadable in one
   theme or the other however carefully the pair is picked. */
.mcc-catch i{font-size:.78rem;line-height:1.6;flex-shrink:0;color:var(--danger);}

/* ---- Can it close today ----
   Six taps instead of a criteria table, answered at the table rather
   than a week later when underwriting says no. */
.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, which needs 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 this explains how to think about a territory. This
   answers where to point the car, which is the version of that question
   a rep actually has on a Monday morning. */
.pln{margin-top:14px;}
/* ---- What one more deal is worth ----
   The tables below answer eligibility. This answers the gap, which is
   the only version of the question 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 is the one program with a date on it, so its question is
   asked with its own line rather than above the whole calculator. */
.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);}
.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. Attainment points and
   MIDs do not convert into each other, so they are listed rather than
   ranked against one another. */
/* ---- The questions under the sliders ----
   A slider cannot ask whether the month was in by the 15th, or how many
   Como rooftops closed and which kind they were. Those sit in cards
   directly under the sliders, two across on a desktop and stacked on a
   phone, each card holding everything that one 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 sits at the right-hand end of the card it belongs to and
   gives up its width first when the card gets narrow. */
.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;}

.pay-lines{
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-top:10px;
  overflow:hidden;
}
.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 rather than body copy. */
.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; typing narrows rather than reveals. The
   number is the largest thing in each row because the number is the
   reason anyone opens this page. */
.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{
  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{color:var(--ink-faint);}
#dialInput:focus, #linkInput: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, same as the deal track and the stage chips, so a pointer
   previews the selection instead of graying the chip out. */
.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, not a caption. It was set at .7rem
   uppercase, which read as an afterthought above the thing it names. */
.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 name of whoever owns the line carries the color, so a grid of
   cards has something for the eye to land on per entry. */
.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 point of the card, so it is the widest and
   heaviest thing in it and sits 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;}

/* ============================================================
   LINKS (links.php)
   ============================================================ */

/* ---- Link rows ----
   One line each. The old grid gave every link a card the size of a
   paragraph, which turned two hundred links into a scroll nobody could
   find anything in. */
.lnk-rows{display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));}
.lnk{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  color:var(--ink);
}
.lnk:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.lnk-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
/* One line each. A name that wrapped made its row taller than the rest
   of the grid and left the domain floating in the middle of the gap. */
.lnk-name{
  font-size:.9rem;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lnk-desc{
  color:var(--ink-soft);font-size:.78rem;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lnk-dom{
  color:var(--ink-faint);font-size:.72rem;
  white-space:nowrap;flex-shrink:1;min-width:0;
  max-width:38%;
  overflow:hidden;text-overflow:ellipsis;
  text-align:right;
}
.lnk-ic{font-size:.72rem;color:var(--ink-faint);flex-shrink:0;}
.lnk:hover .lnk-ic{color:var(--ink);}

@media (max-width:520px){
  .lnk-dom{display:none;}
}

/* Category jump chips sit under the filter box, not under a heading,
   so they carry their own lead-in. */
.links-chipnav{margin-top:18px;}

/* Category sections are anchor targets and must clear both sticky bars. */
.links-section{scroll-margin-top:calc(var(--topbar-h) + 52px);}

/* Closing callout under the last category. */
.links-note{margin-top:34px;}


/* ---- Saving a check ----
   The verdict is useful for ten seconds; the record is useful for
   months. A merchant who missed on volume in March is worth another
   look in September, and nobody remembers that unaided. */
.chk-save{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.chk-save-name{
  flex:1;min-width:170px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:8px 11px;
  font-size:.9rem;
  outline:none;
}
.chk-save-name:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.chk-save-name::placeholder{color:var(--ink-faint);}
.chk-save-msg{font-size:.8rem;color:var(--ink-soft);}

.chk-saved{margin-top:16px;}
.chk-saved-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:9px;
}
.chk-saved-title{font-size:.86rem;font-weight:600;}
.chk-saved-title i{color:var(--ink-faint);font-size:.82rem;}
.chk-saved-tally{font-size:.78rem;color:var(--ink-faint);}
.chk-rows{display:flex;flex-direction:column;gap:5px;}
.chk-saved-row{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 11px;
}
.chk-saved-ic{font-size:.9rem;flex-shrink:0;color:var(--ink-faint);}
.chk-saved-main{display:flex;flex-direction:column;min-width:0;gap:1px;}
.chk-saved-name{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chk-saved-note{font-size:.78rem;color:var(--ink-soft);line-height:1.4;}
.chk-saved-when{margin-left:auto;flex-shrink:0;font-size:.76rem;color:var(--ink-faint);white-space:nowrap;}
.chk-saved-x{
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
  font-size:.82rem;
}
.chk-saved-x:hover{background:var(--surface-high);color:var(--ink);}
.chk-saved-x:disabled{opacity:.4;}
.chk-saved-empty{
  font-size:.82rem;color:var(--ink-soft);line-height:1.55;
  max-width:96ch;
}
.chk-saved-empty[hidden]{display:none;}