/* ============================================================
   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;}
.stg-pick{
  display:flex;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
}
.stg-pick::-webkit-scrollbar{display:none;}

.stg-chip{
  position:relative;
  flex:1 0 108px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:14px 6px 12px;
  font-size:.78rem;
  font-weight:600;
  line-height:1.3;
  text-align:center;
  color:var(--ink-faint);
}

/* The connecting track runs behind the nodes, stopping at each end. */
.stg-chip::before{
  content:"";
  position:absolute;
  top:calc(14px + 17px);
  left:0;right:0;
  height:2px;
  background:var(--line);
  z-index:0;
}
.stg-chip:first-child::before{left:50%;}
.stg-chip:last-child::before{right:50%;}

.stg-n{
  position:relative;
  z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  border:2px solid var(--line);
  color:var(--ink-soft);
  font-size:.88rem;font-weight:700;
  transition:background .14s,border-color .14s,color .14s;
}
.stg-chip:hover{color:var(--ink);}
.stg-chip:hover .stg-n{border-color:var(--line-strong);background:var(--surface-hover);}

.stg-on{color:var(--ink);}
.stg-on .stg-n{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}

.stg-name{display:block;}

.stg-out{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-raised);
  padding:16px 17px;
  margin-top:12px;
}
.stg-out-head{
  display:flex;align-items:center;gap:10px;
  font-size:1.06rem;font-weight:700;line-height:1.35;
  color:var(--ink);
}
.stg-when{color:var(--ink-faint);font-size:.8rem;margin-top:4px;}
.stg-block{margin-top:14px;}
.stg-label{
  color:var(--ink-faint);font-size:.68rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;margin-bottom:5px;
}
.stg-text{font-size:.91rem;line-height:1.6;color:var(--ink-soft);max-width:66ch;}
.stg-advance{display:flex;gap:9px;align-items:flex-start;color:var(--ink);}
.stg-advance i{color:var(--ink-faint);font-size:.88rem;line-height:1.7;flex-shrink:0;}
.stg-kills,.stg-note{margin-top:14px;}

.stg-acts{display:flex;flex-wrap:wrap;gap:7px;}
.stg-act{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.88rem;
  padding:9px 14px;
  border-radius:var(--radius-sm);
}
.stg-act:hover{background:var(--accent-hover);text-decoration:none;}
.stg-more{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-strong);
  color:var(--ink);
  font-size:.85rem;font-weight:600;
  padding:9px 14px;
  border-radius:var(--radius-sm);
}
.stg-more:hover{background:var(--surface-high);text-decoration:none;}
.stg-more i{font-size:.75rem;color:var(--ink-faint);}

/* ---- 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);}
.dr-on{background:var(--accent-wash);border-color:var(--line-strong);}
.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);}
.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-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;
}
.dr-facts{display:grid;grid-template-columns:1fr;gap:2px;margin:0 0 15px;}
.dr-facts dt{
  color:var(--ink-faint);font-size:.7rem;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;margin-top:9px;
}
.dr-facts dt:first-child{margin-top:0;}
.dr-facts dd{margin:2px 0 0;font-size:.91rem;line-height:1.55;color:var(--ink);}
.dr-list-title{
  color:var(--ink-faint);font-size:.7rem;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;margin-bottom:6px;
}
.dr-list{margin:0 0 15px 17px;}
.dr-list li{font-size:.89rem;line-height:1.55;margin-bottom:6px;color:var(--ink-soft);}
.dr-list li::marker{color:var(--ink-faint);}
.dr-always li{color:var(--ink);}
.dr-warn{margin-bottom:15px;}

.dr-links{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
.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-top:2px;}

/* 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);}

.said-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.said-item{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
}
.said-quote{font-size:1rem;font-weight:700;line-height:1.4;color:var(--ink);}
.said-reply{color:var(--ink-soft);font-size:.9rem;line-height:1.6;margin-top:7px;max-width:68ch;}
.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(--danger-ink);
}
.mcc-catch i{font-size:.78rem;line-height:1.6;flex-shrink:0;}

/* ---- 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,.chk-no b{color:var(--danger-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;}
.pln-pick{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.pln-opt{
  display:flex;align-items:center;gap:12px;
  text-align:left;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 15px;
  color:var(--ink);
}
.pln-opt:hover{border-color:var(--line-strong);background:var(--surface-high);}
.pln-on{background:var(--accent-wash);border-color:var(--line-strong);}
.pln-opt-ic{font-size:1.05rem;width:21px;flex-shrink:0;text-align:center;color:var(--ink-faint);}
.pln-on .pln-opt-ic{color:var(--ink);}
.pln-opt-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pln-opt-label{font-weight:600;font-size:.93rem;line-height:1.35;}
.pln-opt-hint{color:var(--ink-faint);font-size:.79rem;line-height:1.35;}

.pln-out{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-raised);
  padding:16px 17px;
  margin-top:12px;
}
.pln-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);
}
.pln-facts{margin:0;}
.pln-facts dt{
  display:flex;align-items:center;gap:8px;
  color:var(--ink-faint);font-size:.68rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;margin-top:13px;
}
.pln-facts dd{margin:3px 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-soft);max-width:68ch;}
.pln-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}

/* ============================================================
   INCENTIVES (incentives.php)
   ============================================================ */

/* ---- 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{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
}
.pay-ctl{margin-bottom:14px;}
.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);
}
.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;
  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);}

.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{
  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{color:var(--ink-faint);}
#dialInput: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);
}
.dial-group:hover{color:var(--ink);border-color:var(--line-strong);background:var(--surface-high);}
.dial-group-on{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}

.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(322px,1fr));}
.dial-item{
  display:flex;
  flex-direction:column;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
}
.dial-item:hover{border-color:var(--line-strong);}

/* The name of whoever owns the line carries the colour, 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-top:3px;}

/* 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:10px;
  margin-top:auto;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:1.14rem;
  letter-spacing:.2px;
  padding:12px 14px;
  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(330px,1fr));}
.lnk{
  display:flex;align-items:center;gap:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 13px;
  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;}
.lnk-name{font-size:.9rem;font-weight:600;line-height:1.3;}
.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:0;
}
.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) + var(--secbar-h) + 12px);}

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