/* ============================================================
   tools.css - the shared instrument kit for every /tools/ page.

   The five calculators were five private stylesheets that agreed
   on almost everything and disagreed on the details: two slider
   treatments, three table treatments, two verdict vocabularies
   (pp- and cp-) that rendered the same panel in two hues. This
   file is the one kit they all consume, so the set reads as one
   instrument family rather than five siblings.

   What lives here: the tool shell, the input kit (fields, ranges,
   number inputs, selects, switches, checkboxes, chips), the
   verdict panel, the .ct table, the assumptions disclosure, and
   the prose column. What stays page-scoped: layout that belongs
   to exactly one tool.

   Accent: every page inherits --tool-acc (terra-cotta). The Codex
   picker overrides it to Antigravity blue in its own <style>, and
   the whole kit follows, which is how the two pickers read as one
   instrument in two liveries.

   Rules this file enforces, from DESIGN.md and the component
   contract: hairlines are the structure, elevation is one
   background step, every numeric cell is mono + tabular +
   right-aligned, one color event per component, transitions are
   <= 180ms mechanical ease-out with a reduced-motion guard, and
   every interactive element has a visible focus ring.
   ============================================================ */

:root{
  /* Per-tool accent. Rationed to exactly one event per component:
     the verdict price, the winner row edge, the active chip. */
  --tool-acc:var(--claude);
  /* Hover ring on a control thumb. Neutral by design - the thumb
     is a value, not a state, so it glows by brightness not hue. */
  --tool-ring:rgba(255,255,255,.14);
  --tool-lift:rgba(255,255,255,.03);
}

/* ---------- shared utilities ---------- */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ul{color:var(--fg);border-bottom:1px solid var(--hair3)}
.ul:hover{border-bottom-color:var(--fg3)}
.ul:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

/* Values settle like hardware: a 120ms lift into place, no
   count-up, no bounce. Applied to the parts a recompute actually
   recreates; text that is merely rewritten in place does not
   flash, which is the point. */
@keyframes tool-settle{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.tool-settle,
.tool-verdict .tv-label,
.tool-verdict .tv-name,
.tool-verdict .tv-why,
.tool-verdict .ct,
.tool-aside>*{animation:tool-settle .12s var(--settle) both}

/* ============================================================
   1 - SHELLS
   Two shapes. .tool-shell is the two-zone instrument (inputs
   left, verdict right) used by the three rankers. .tool-panel is
   the stacked instrument used by the two live calculators, where
   the answer is inline with the controls rather than beside them.
   ============================================================ */

.tool-shell{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(18px,2.6vw,30px);align-items:start;
  background:var(--s1);border:1px solid var(--hair);border-radius:10px;
  padding:clamp(16px,2.2vw,22px);
}
.tool-inputs{min-width:0;padding:2px clamp(0px,1vw,8px) 2px 2px}
.tool-inputs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.tool-inputs-h{font-size:15px;font-weight:650;color:var(--fg);letter-spacing:-.2px;margin-bottom:18px}
.tool-inputs-head .tool-inputs-h{margin-bottom:0}
.tool-inputs-count{font-family:var(--f-mono);font-size:11.5px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}

.tool-panel{
  margin-top:30px;background:var(--s1);border:1px solid var(--hair);
  border-radius:10px;overflow:hidden;
}
.tool-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:13px clamp(16px,2.4vw,24px);border-bottom:1px solid var(--hair2);
}
.tool-panel-sec{padding:16px clamp(16px,2.4vw,24px);border-bottom:1px solid var(--hair2)}
.tool-panel-sec:last-child{border-bottom:0}
.tool-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px clamp(16px,2.4vw,24px);border-top:1px solid var(--hair2);background:var(--bg);
}
.tool-foot .btn:disabled{opacity:.4;pointer-events:none}
.tool-hint{color:var(--fg4);margin-left:auto}

/* Export / secondary actions. A mono glyph prefix marks the button
   as a machine action rather than a navigation. */
.btn-ghost .glyph{width:13px;height:13px;flex:none}
.btn-ghost .glyph-mono{
  font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--fg4);
  letter-spacing:.04em;flex:none;
}
.btn-ghost:hover .glyph-mono{color:var(--fg3)}

/* ============================================================
   2 - INPUT KIT
   ============================================================ */

.ti-field{margin-bottom:20px;border:0;padding:0;min-width:0}
.ti-field:last-child{margin-bottom:0}
.ti-label{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13px;font-weight:600;color:var(--fg);margin-bottom:9px;padding:0;
}
/* The current value is data, so it is bright and monospaced. It is
   NOT colored: the accent belongs to the verdict. */
.ti-value{font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.ti-sub{
  display:block;font-family:var(--f-mono);font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);margin:11px 0 5px;
}
.ti-hint{font-size:11.5px;line-height:1.55;color:var(--fg3);margin-top:8px}
.ti-hint strong{color:var(--fg2)}

/* A row of sibling fields that should share one baseline grid. */
.ti-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ti-grid .ti-field{margin-bottom:0}
.ti-field>.ti-sub:first-child{margin-top:0}
@media (max-width:640px){.ti-grid{grid-template-columns:1fr}}

/* Grouped field set (the model-mix panels). One step down from the
   shell so it reads as a well, not a card. */
.ti-group{border:1px solid var(--hair2);border-radius:8px;padding:14px 14px 12px;background:var(--bg)}
.ti-group legend{padding:0 6px;margin-left:-6px}
.ti-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--f-mono);font-size:11px;color:var(--fg3);margin-bottom:6px;font-variant-numeric:tabular-nums}
.ti-legend b{color:var(--fg);font-weight:600;margin-left:4px}
.ti-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px}

/* ---- range: hairline track, filled portion, hover-ring thumb ----
   The filled portion comes from --p, which each tool's script sets
   from the control's own value. Firefox paints it natively through
   ::-moz-range-progress and ignores --p entirely. */
.ti-range{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;
  background:transparent;cursor:pointer;display:block;--p:0%;
}
.ti-range::-webkit-slider-runnable-track{
  height:3px;border-radius:999px;
  background:linear-gradient(to right,var(--fg2) 0,var(--fg2) var(--p),var(--hair2) var(--p),var(--hair2) 100%);
  box-shadow:inset 0 0 0 1px var(--hair2);
}
.ti-range::-moz-range-track{height:3px;border-radius:999px;background:var(--hair2);box-shadow:inset 0 0 0 1px var(--hair2)}
.ti-range::-moz-range-progress{height:3px;border-radius:999px;background:var(--fg2)}
.ti-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--fg);border:0;margin-top:-5.5px;
  box-shadow:0 0 0 0 transparent;transition:box-shadow .12s var(--settle);
}
.ti-range::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--fg);border:0;
  box-shadow:0 0 0 0 transparent;transition:box-shadow .12s var(--settle);
}
.ti-range:hover::-webkit-slider-thumb,
.ti-range:active::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--tool-ring)}
.ti-range:hover::-moz-range-thumb,
.ti-range:active::-moz-range-thumb{box-shadow:0 0 0 5px var(--tool-ring)}
.ti-range:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
.ti-range.is-off{opacity:.38;pointer-events:none}

/* ---- number + text inputs: mono, tabular, right-aligned ----
   Spinners are removed because they land on top of right-aligned
   digits; arrow keys still step by the control's own step value. */
.ti-input{
  width:100%;background:var(--bg);border:1px solid var(--hair);border-radius:6px;color:var(--fg);
  font-family:var(--f-mono);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;
  text-align:right;padding:8px 10px;appearance:textfield;-moz-appearance:textfield;
  transition:border-color .12s,background .12s;
}
.ti-input::-webkit-outer-spin-button,
.ti-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ti-input:hover{border-color:var(--hair3)}
.ti-input:focus{outline:none;border-color:var(--hair3);background:#08080B}
.ti-input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

.ti-select{
  width:100%;min-width:0;background:var(--bg);border:1px solid var(--hair);border-radius:6px;color:var(--fg);
  font-family:var(--f-ui);font-size:13px;font-weight:600;padding:8px 26px 8px 9px;cursor:pointer;
  appearance:none;-webkit-appearance:none;transition:border-color .12s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='1.3'%3E%3Cpath d='M1 1.5L5 4.5 9 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
}
.ti-select:hover{border-color:var(--hair3)}
.ti-select:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.ti-select optgroup{background:var(--s3);color:var(--fg3)}
.ti-select option{background:var(--modal);color:var(--fg)}

/* ---- switch: 34x20 visual, 44px hit target ----
   The hit area is a pseudo-element so the row stays compact on a
   pointer device while a thumb still gets its 44px on touch. */
.ti-switch{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;font-size:13px;color:var(--fg2);min-height:22px;
}
.ti-switch::before{content:"";position:absolute;inset:-12px -6px;border-radius:8px}
.ti-switch input{position:absolute;opacity:0;width:0;height:0}
.ti-switch-box{
  position:relative;flex:none;width:34px;height:20px;border-radius:10px;
  background:var(--track);border:1px solid var(--hair);
  transition:background .12s var(--settle),border-color .12s var(--settle);
}
.ti-switch-box::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--fg3);transition:transform .12s var(--settle),background .12s var(--settle);
}
/* An on switch is a semantic state, so it takes the state green
   from DESIGN.md rather than a second accent event. */
.ti-switch input:checked+.ti-switch-box{background:color-mix(in srgb,var(--live) 26%,transparent);border-color:color-mix(in srgb,var(--live) 45%,transparent)}
.ti-switch input:checked+.ti-switch-box::after{transform:translateX(14px);background:#fff}
.ti-switch input:focus-visible+.ti-switch-box{outline:2px solid var(--focus);outline-offset:3px}
.ti-switch:hover .ti-switch-l{color:var(--fg)}
.ti-switch-l{transition:color .12s}

/* ---- checkbox with an explanatory body ---- */
.ti-check{position:relative;display:flex;align-items:flex-start;gap:10px;cursor:pointer;min-height:22px}
.ti-check::before{content:"";position:absolute;top:-11px;left:-6px;width:44px;height:44px;border-radius:8px}
.ti-check input{position:absolute;opacity:0;width:0;height:0}
.ti-check-box{
  position:relative;flex:none;width:18px;height:18px;margin-top:1px;border-radius:5px;
  border:1px solid var(--hair3);background:var(--bg);
  transition:background .12s var(--settle),border-color .12s var(--settle);
}
.ti-check-box::after{
  content:"";position:absolute;inset:0;margin:auto;width:5px;height:9px;
  border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);
  opacity:0;transition:opacity .12s;
}
.ti-check input:checked+.ti-check-box{background:var(--fg);border-color:var(--fg)}
.ti-check input:checked+.ti-check-box::after{opacity:1}
.ti-check input:focus-visible+.ti-check-box{outline:2px solid var(--focus);outline-offset:3px}
.ti-check-text strong{display:block;font-size:13px;font-weight:600;color:var(--fg);margin-bottom:3px}
.ti-check-text span{display:block;font-size:11.5px;line-height:1.55;color:var(--fg3)}

/* ---- chips ---- */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:var(--fg3);
  background:transparent;border:1px solid var(--hair);border-radius:6px;padding:6px 10px;cursor:pointer;
  transition:color .12s,border-color .12s,background .12s;
}
.chip:hover{color:var(--fg2);border-color:var(--hair3);background:var(--hover)}
.chip.is-on{color:var(--fg);border-color:color-mix(in srgb,var(--tool-acc) 50%,transparent);background:color-mix(in srgb,var(--tool-acc) 10%,transparent)}
.chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- inline readouts (per-model number stacks) ---- */
.cn{display:flex;flex-direction:column;gap:2px}
.cn-l{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg4)}
.cn-v{font-family:var(--f-mono);font-size:14px;font-weight:600;color:var(--fg2);font-variant-numeric:tabular-nums}
.cn.lead-num .cn-v{font-family:var(--f-disp);font-size:22px;font-weight:680;color:var(--fg);letter-spacing:-.02em}
.cn.lead-num .cn-l{color:var(--fg3)}

/* ---- stat tiles ---- */
.stat-row{display:flex;align-items:flex-end;gap:clamp(18px,4vw,52px);flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:4px;min-width:0}
.stat .n{
  font-family:var(--f-mono);font-size:15px;font-weight:600;color:var(--fg2);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.stat .l{display:block}
.stat .d{font-family:var(--f-mono);font-size:11px;color:var(--fg4);font-variant-numeric:tabular-nums}
.stat.lead .n{
  font-family:var(--f-disp);font-size:clamp(28px,4.4vw,42px);font-weight:680;color:var(--fg);
  letter-spacing:-.03em;line-height:1;
}
.stat.accent .n{color:var(--tool-acc)}

/* ============================================================
   3 - VERDICT
   One raised surface, one glowing number. Everything that is not
   the answer stays grey.
   ============================================================ */

.tool-verdict{
  min-width:0;background:var(--s2);border:1px solid var(--hair2);border-radius:10px;
  padding:clamp(16px,2vw,20px);
}
.tv-head{border-bottom:1px solid var(--hair);padding-bottom:15px;margin-bottom:13px}
.tv-label{display:block;margin-bottom:9px}
.tv-name{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tv-name strong{
  font-family:var(--f-disp);font-size:clamp(20px,2.6vw,26px);font-weight:650;
  color:var(--fg);letter-spacing:-.02em;
}
.tv-price{
  font-family:var(--f-mono);font-size:17px;font-weight:600;color:var(--tool-acc);
  font-variant-numeric:tabular-nums;
}
.tv-why{font-size:13.5px;line-height:1.65;color:var(--fg2);margin-top:10px;max-width:62ch}
.tv-profile{font-family:var(--f-mono);font-size:11px;line-height:1.6;color:var(--fg4);margin-bottom:13px;font-variant-numeric:tabular-nums}

/* A verdict sentence rendered inline rather than as a panel (the
   pricing calculator's footer line). Same rules: one number glows. */
.tv-line{
  margin:0;padding:14px clamp(16px,2.4vw,24px);border-top:1px solid var(--hair2);
  font-size:14px;line-height:1.6;color:var(--fg2);background:var(--bg);
}
.tv-line strong{color:var(--fg);font-weight:650}
.tv-line .save,.tv-line .ok{color:var(--live);font-weight:650;font-variant-numeric:tabular-nums}
.tv-line .excl{color:var(--warn)}
.tv-line .over{color:var(--err);font-weight:650}
.tv-line:empty{display:none}

/* State badges. Passing is the norm, so it is quiet: only a
   degraded or broken plan is allowed to spend ink. */
.tool-badge{
  display:inline-block;flex:none;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--hair);
  color:var(--fg3);white-space:nowrap;
}
.tool-badge.ok{color:var(--live);border-color:var(--hair)}
.tool-badge.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 42%,transparent)}
.tool-badge.no{color:var(--err);border-color:color-mix(in srgb,var(--err) 42%,transparent)}

/* A machine-voice well: derived arithmetic, printed as the machine
   would print it. */
.tool-note{
  margin-top:15px;padding:12px 14px;background:var(--bg);border:1px solid var(--hair2);border-radius:7px;
  font-family:var(--f-mono);font-size:11.5px;line-height:1.65;color:var(--fg2);
  font-variant-numeric:tabular-nums;
}
.tool-note:empty{display:none}

/* The thing a ranked row cannot carry: what the answer costs
   operationally. Marked with the accent as a left rule, never a
   background wash. */
.tool-aside{
  margin-top:12px;padding:12px 14px;border-radius:7px;background:var(--bg);
  border:1px solid var(--hair2);border-left:2px solid var(--tool-acc);
  font-size:12.5px;line-height:1.65;color:var(--fg3);max-width:78ch;
}
.tool-aside:empty{display:none}
.tool-aside .etch{display:block;margin-bottom:7px}
.tool-aside p{font-size:12.5px;line-height:1.65;color:var(--fg3);max-width:70ch}
.tool-aside strong{color:var(--fg2)}
.tool-aside a{color:var(--fg2);border-bottom:1px solid var(--hair3)}
.tool-aside a:hover{color:var(--tool-acc);border-bottom-color:var(--tool-acc)}
.tool-aside a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}

/* A neutral variant for advisory copy that is not the product
   pitch: same well, semantic rule instead of the accent. */
.tool-aside.warn{border-left-color:var(--warn)}
.tool-aside.ok{border-left-color:var(--live)}
.tool-aside.warn,.tool-aside.ok,
.tool-aside.warn p,.tool-aside.ok p{color:var(--fg2)}

/* ---- the /tools directory index ----
   The card set the index is built from. It lives here rather than on the
   index page because the directory grows every time a tool ships, and a
   grid of hand-styled anchors drifts the moment two people add one. */
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:960px;margin:0 auto}
.tool-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tool-card{
  display:block;border:1px solid var(--hair2);border-radius:12px;padding:24px 22px;
  text-decoration:none;transition:border-color .12s,background .12s;
}
.tool-card:hover{border-color:var(--hair3);background:var(--tool-lift)}
.tool-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tool-card h2{margin:10px 0 8px;font-size:1.15rem;font-weight:650;color:var(--fg);letter-spacing:-.01em}
.tool-card h3{margin:0 0 6px;font-size:1rem;font-weight:650;color:var(--fg);letter-spacing:-.01em}
.tool-card .lead{font-size:.95rem;margin:0}
.tool-card.sm{padding:19px 21px}
.tool-card.sm .lead{font-size:.9rem}
.tool-card-go{display:block;margin-top:14px;color:var(--fg4);transition:color .12s}
.tool-card:hover .tool-card-go{color:var(--fg3)}
@media (max-width:760px){.tool-grid,.tool-grid.three{grid-template-columns:1fr}}

/* ============================================================
   4 - ASSUMPTIONS DISCLOSURE
   Every derived number lives in here. A calculator that hides its
   constants is a slot machine.
   ============================================================ */

.tool-assume{margin-top:16px;border-top:1px solid var(--hair2);padding-top:14px}
.tool-assume summary{
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg3);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  transition:color .12s;
}
.tool-assume summary::-webkit-details-marker{display:none}
.tool-assume summary::before{content:"+";font-size:13px;color:var(--fg4)}
.tool-assume[open] summary::before{content:"\2212"}
.tool-assume summary:hover{color:var(--fg2)}
.tool-assume summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.tool-assume-body{
  margin-top:12px;padding-left:14px;border-left:1px solid var(--hair2);
  font-size:12.5px;line-height:1.7;color:var(--fg3);max-width:74ch;
}
.tool-assume-body p{margin-bottom:10px}
.tool-assume-body ul{list-style:none;margin:0 0 10px}
.tool-assume-body li{padding:7px 0 7px 14px;border-top:1px solid var(--hair2);position:relative}
.tool-assume-body li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:1px;background:var(--fg4)}
.tool-assume-body strong{color:var(--fg2)}
.tool-assume-body .mono{color:var(--fg2)}
.tool-assume-body a{color:var(--fg2);border-bottom:1px solid var(--hair3)}
.tool-assume-body a:hover{color:var(--fg)}
.tool-assume-body a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.tool-assume-foot{font-family:var(--f-mono);font-size:10.5px;color:var(--fg4);margin-bottom:0}

/* ============================================================
   5 - .ct, the Continuum table
   Text left, numbers right, hairlines carry the rhythm, no zebra
   stripes, one winner row.
   ============================================================ */

.ct-caption{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:11px;font-size:13px;line-height:1.55;color:var(--fg2);
}
.ct-stamp{
  flex:none;font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg3);border:1px solid var(--hair);border-radius:999px;
  padding:3px 10px;white-space:nowrap;
}

/* The right-edge fade is a scroll cue, not decoration: the local
   layer pins to the content so it disappears once you reach the
   end, and the scroll layer stays put while there is more table. */
.ct-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border:1px solid var(--hair);border-radius:8px;
  background:
    linear-gradient(to right,transparent,var(--s1) 62%) right center / 34px 100% no-repeat local,
    linear-gradient(to right,transparent,rgba(0,0,0,.34)) right center / 34px 100% no-repeat scroll,
    var(--s1);
}
.ct-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.ct{width:100%;border-collapse:collapse;font-size:13.5px}
.ct thead th{
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg3);background:var(--s2);border-bottom:1px solid var(--hair);
  padding:10px 14px;text-align:left;white-space:nowrap;vertical-align:bottom;
}
.ct thead th.num{text-align:right}
.ct tbody th,.ct tbody td{
  padding:10px 14px;text-align:left;border-top:1px solid var(--hair2);
  color:var(--fg2);line-height:1.5;vertical-align:top;
}
.ct tbody tr:first-child>*{border-top:0}
.ct tbody th[scope=row],.ct td.key{font-weight:600;color:var(--fg)}
.ct tbody th[scope=row]{white-space:nowrap}
/* An identity cell that needs a qualifier under the name: "two accounts, two
   independent windows" belongs with the row it qualifies, not stretched
   across the name column. */
.ct .ct-name{display:block}
.ct .ct-sublabel{
  display:block;margin-top:3px;font-family:var(--f-mono);font-size:10px;font-weight:400;
  line-height:1.45;color:var(--fg4);white-space:normal;
}
.ct td.num,.ct th.num{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--fg);
}
/* Headers never wrap; body cells may. A numeric column in a reference table
   often holds a qualified figure ("140 to 280, then metered"), and pinning
   those to one line hands the column width to the quantity and starves the
   prose columns beside it. */
.ct th.num{white-space:nowrap}
.ct tbody tr:hover>*{background:var(--tool-lift)}

/* Exactly one winner per table: a 2px accent edge and bright
   numerals. No fill wash, no bold, no badge duplication. */
.ct tr.win>*{background:var(--tool-lift)}
.ct tr.win>:first-child{box-shadow:inset 2px 0 0 var(--tool-acc)}
.ct tr.win td.num,.ct tr.win th[scope=row]{color:var(--fg)}
.ct tr.out>*{color:var(--fg3)}
.ct tr.out td.num{color:var(--fg2)}

/* A continuation row: the explanation under the row it belongs to,
   with no seam between the two. */
.ct tr.sub>td{
  border-top:0;padding-top:0;padding-bottom:12px;
  font-size:12.5px;line-height:1.6;color:var(--fg3);
}
.ct tr.sub:hover>*{background:transparent}

/* Provider group header inside a long reference table. */
.ct tr.grp th{
  background:var(--s2);font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  white-space:nowrap;
}
.ct tr.grp:hover th{background:var(--s2)}
.ct tr.grp .pdot{display:inline-block;margin-right:8px;vertical-align:1px}
.ct .grp-src{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--fg4);margin-left:10px;
  text-transform:none;border-bottom:1px solid var(--hair2);
}
.ct .grp-src:hover{color:var(--fg2)}
.ct .grp-src:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

/* A footnote row inside the table body. No background wash: the
   hairline above it is what separates it. */
.ct tr.note td{font-size:12px;line-height:1.62;color:var(--fg3);border-top:1px solid var(--hair)}
.ct tr.note:hover>*{background:transparent}
.ct tr.note a{color:var(--fg2);border-bottom:1px solid var(--hair3)}
.ct .via{
  font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg4);margin-left:7px;
}

.ct-foot{
  max-width:78ch;margin-top:13px;font-family:var(--f-mono);font-size:10.5px;line-height:1.65;color:var(--fg4);
}
.ct-foot a{color:var(--fg3);border-bottom:1px solid var(--hair2)}
/* Blanket ring for any link inside a table body: footnote rows and source
   chips both carry them, and a link a keyboard cannot see is not a link. */
.ct a:focus-visible,.ct-foot a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

/* Sticky header, opt-in per table. Worth it on a 35-row reference card and
   noise on a ten-row comparison. It sticks under the 60px fixed nav, not at
   the viewport top, or the header parks behind the nav and reads as gone. */
.ct-wrap.sticky .ct thead th{position:sticky;top:60px;z-index:1}

/* Flush variant: a .ct sitting inside a panel that already has its
   own border. Drops the wrapper chrome and tightens the gutters so
   the columns still line up with the panel's own text. */
.ct.flush{font-size:13px}
/* Give the identity column every pixel the other two do not need: a badge and
   a price are fixed-width facts, and a plan name that wraps to four words on a
   phone is the column sizer taking width from the only cell that needs it. */
.ct.flush tbody th[scope=row]{white-space:normal;min-width:11ch}
.ct.flush tbody td,.ct.flush thead th.num,.ct.flush thead th:nth-child(2){width:1px;white-space:nowrap}
.ct.flush tr.sub>td{width:auto;white-space:normal}
.ct.flush tbody th,.ct.flush tbody td{padding:11px 0}
.ct.flush tbody th:first-child,.ct.flush tbody td:first-child{padding-left:12px}
.ct.flush thead th{background:transparent;padding:0 0 8px;border-bottom-color:var(--hair2)}
.ct.flush thead th:first-child{padding-left:12px}
.ct.flush tr.win>:first-child{box-shadow:inset 2px 0 0 var(--tool-acc)}
.ct.flush tr.sub>td{padding-top:0;padding-bottom:14px}
.ct.flush tr:hover>*{background:transparent}
.ct.flush tr.win>*{background:transparent}

/* ============================================================
   6 - PROSE
   The reading column under every tool. Identical on all five, so
   it belongs here rather than in five <style> blocks.
   ============================================================ */

.prose{max-width:74ch}
.prose h3{
  font-family:var(--f-ui);font-size:15.5px;font-weight:650;color:var(--fg);
  letter-spacing:-.01em;margin:30px 0 10px;
}
.prose h3:first-child{margin-top:0}
.prose p{font-size:14.5px;line-height:1.74;color:var(--fg2);margin-bottom:13px}
.prose p strong,.prose strong{color:var(--fg);font-weight:600}
.prose a{color:var(--fg);border-bottom:1px solid var(--hair3)}
.prose a:hover{border-bottom-color:var(--fg3)}
.prose a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.prose .mono{color:var(--fg);font-size:13px}

/* ============================================================
   7 - RESPONSIVE
   Nothing scrolls the page sideways; tables scroll inside .ct-wrap.
   ============================================================ */

@media (max-width:900px){
  .tool-shell{grid-template-columns:1fr;gap:22px}
}
@media (max-width:560px){
  .tool-shell{padding:14px 12px}
  .tool-verdict{padding:14px 12px}
  .ct.flush{font-size:12.5px}
  .ct.flush tbody th,.ct.flush tbody td{padding:10px 0}
  /* A long verdict string ("allowance out day 4") is nowrap, so it sizes the
     whole column and squeezes the plan name to two words per line. On a phone
     the badge wraps and softens from a pill to a tag rather than winning a
     width argument against the row's identity. */
  .ct.flush .tool-badge{white-space:normal;border-radius:6px;max-width:10ch;text-align:center}
}

/* Touch: a 14px thumb is under the 44px target, so the whole rail
   grows rather than shipping a slider nobody can grab. Width is in the query
   too because a browser that reports no pointer type still needs the bigger
   target at phone size. */
@media (pointer:coarse),(max-width:560px){
  /* A 24px chip is a comfortable click and a poor tap, so the label keeps its
     size and grows an invisible 44px hit box around itself. */
  .chip{position:relative}
  .chip::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
  .ti-range{height:44px}
  .ti-range::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8.5px}
  .ti-range::-moz-range-thumb{width:20px;height:20px}
  .ti-input,.ti-select{font-size:16px;padding-top:10px;padding-bottom:10px}
}

@media (prefers-reduced-motion:reduce){
  .tool-settle,
  .tool-verdict .tv-label,
  .tool-verdict .tv-name,
  .tool-verdict .tv-why,
  .tool-verdict .ct,
  .tool-aside>*{animation:none}
  .ti-range::-webkit-slider-thumb,
  .ti-range::-moz-range-thumb,
  .ti-switch-box,
  .ti-switch-box::after,
  .ti-check-box,
  .ti-check-box::after,
  .chip,.ti-input,.ti-select{transition:none}
}