/* ==========================================================================
   tool.css: The Nursing Directory shared tool components (TND tool kit v1)
   Load order: _fonts-canonical.html inline fonts, then /tools/tokens.css,
   then this file. Colour, radius, shadow and font tokens come from
   tokens.css; this file only adds the --t-* tool tokens and components.
   Nav and footer stay in their canonical partials and are not styled here.

   Naming: .t-block, .t-block-part, .t-block--modifier. State lives in ARIA
   attributes or [data-state], never in extra classes.
   Live reference of every component in every state: /tool-kit
   ========================================================================== */

:root {
  /* control edge: needs 3:1 against --bg-input, which --rule does not reach */
  --t-control-edge: var(--ink-mute);
  --t-control-edge-hover: var(--ink-soft);
  /* motion: color, border and shadow only; the one transform is a 1px press */
  --t-dur: 150ms;
  --t-ring: 0 0 0 3px var(--teal-wash);
  /* layout */
  --t-measure: 68ch;
  --t-page-max: 1180px;
}

/* Night theme for clinical tools. Set on the page root or .t-page. */
[data-theme="night"] {
  --bg: #1f2a2a;  --bg-card: rgba(245,241,234,.05);  --bg-input: rgba(245,241,234,.07);  --bg-soft: rgba(245,241,234,.06);
  --ink: #f5f1ea;  --ink-soft: rgba(245,241,234,.78);  --ink-mute: #8a9292;
  --rule: rgba(245,241,234,.12);  --rule-soft: rgba(245,241,234,.1);
  --t-control-edge: rgba(245,241,234,.42);  --t-control-edge-hover: #f5f1ea;
  --teal-deep: #d7ece6;           /* accent text on dark */
  --teal-tint: rgba(31,138,122,.22);  --teal-wash: rgba(31,138,122,.35);
  --t-ring: 0 0 0 3px rgba(31,138,122,.45);
  --shadow-md: none;
  color-scheme: dark;
}

/* ---------- base ---------- */
.t-page { background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; }
.t-page a { color: var(--teal-deep); }
.t-page a:hover { color: var(--ink); }
.t-wrap { max-width: var(--t-page-max); margin: 0 auto; padding: 48px 24px 0; }
.t-page svg { display: inline-block; flex: none; }
.t-page [hidden] { display: none !important; }
.t-num, .t-unit, .t-prefix, .t-eyebrow { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.t-title { font: 400 clamp(40px, 6vw, 76px)/1.02 var(--font-serif); letter-spacing: -.02em; margin: 16px 0 20px; text-wrap: balance; }
.t-title em, .t-h em { font-style: italic; color: var(--teal-deep); }
.t-deck { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; }
.t-crumbs { display: flex; gap: 10px; font: 400 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- layout ---------- */
.t-calc { display: grid; grid-template-columns: minmax(0,1fr) 452px; gap: 40px; padding: 48px 0 88px; align-items: start; }
.t-calc--clinical { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
.t-calc-result { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .t-calc, .t-calc--clinical { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .t-calc-result { position: static; }
  .t-calc--pay .t-calc-result.t-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }  /* only when the page opts in to a sheet */
}

/* ---------- tool page header and guide band ---------- */
.t-crumbs { margin-bottom: 22px; flex-wrap: wrap; }
.t-crumbs a { color: var(--ink-soft); text-decoration: none; }
.t-crumbs a:hover { color: var(--teal-deep); }
.t-crumbs [aria-current] { color: var(--ink); }
/* common.css styles every bare <nav> as a dark sticky bar; the breadcrumb is a nav too */
nav.t-crumbs { position: static; z-index: auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; padding: 0; }
/* common.css and shared.js (with !important) paint .nav-logo white for the old dark nav; the canonical nav only forces
   ink once scrolled. Kit pages sit on cream, so keep the logo ink until a dark hero says otherwise. */
body:has(.t-page) nav#main-nav:not(.nav-over-dark) .nav-logo { color: #1f2a2a !important; }
body:has(.t-page) nav#main-nav:not(.nav-over-dark) .nav-logo em { color: #1f8a7a !important; }
/* shared.js also forces the logo into DM Sans 800 with !important; keep the canonical serif lockup */
body:has(.t-page) nav#main-nav .nav-logo { font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.4rem !important; font-weight: 400 !important; letter-spacing: -0.01em !important; }
@media (max-width: 820px) { body:has(.t-page) nav#main-nav .nav-logo { font-size: 1.25rem !important; } }
.t-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
.t-head .t-title { font-size: clamp(38px, 5.4vw, 64px); margin: 14px 0; }
.t-head .t-deck { font-size: 17px; max-width: 60ch; margin: 0; }
.t-head-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font: 400 11px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.t-head-meta p { margin: 0; }
.t-head-meta a { color: inherit; }
.t-head-meta .t-btn--ghost { margin-top: 8px; height: 36px; padding: 0 14px; border-color: var(--t-control-edge); font: 400 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 900px) {
  .t-head { flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 24px; }
  .t-head-meta { align-items: flex-start; text-align: left; }
}
.t-guide { background: var(--bg-card); border-top: 1px solid var(--rule); }
.t-guide .t-wrap { display: flex; justify-content: center; padding: 80px 24px; }
/* a flex item defaults to min-width:auto, so a wide table would push the page sideways */
.t-guide .t-prose { min-width: 0; width: 100%; }
.t-guide .t-prose > .t-eyebrow + h2 { margin-top: 14px; }
.t-guide .t-prose figure { margin: 44px 0; }
.t-guide .t-prose figure blockquote { margin: 0; }
.t-guide .t-prose figcaption { margin-top: 14px; }
.t-guide .t-faq, .t-guide .t-byline, .t-guide .t-disclaimer { font-size: 16px; }
.t-guide .t-byline { margin-top: 48px; background: var(--bg); }
.t-guide .t-disclaimer { margin-top: 28px; padding-inline: 0; }
@media (max-width: 600px) { .t-guide .t-wrap { padding: 56px 16px; } }

/* ---------- calculator columns ---------- */
.t-calc-inputs { display: flex; flex-direction: column; gap: 16px; }
.t-form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.t-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 4px; }
.t-calc-after { margin: 0; padding: 0 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 900px) {
  .t-calc--clinical .t-calc-result { order: -1; }
}

/* ---------- card ---------- */
.t-card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.t-card-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px dashed var(--rule); }
.t-card-num { font: 400 11px var(--font-mono); color: var(--teal-deep); background: var(--teal-tint); padding: 4px 8px; border-radius: 6px; }
.t-card-title { font: 400 26px/1.15 var(--font-serif); margin: 0; flex: 1; }

/* ---------- shared check line (under a field, segmented or stepper) ---------- */
.t-field { display: flex; flex-direction: column; gap: 8px; }
.t-field-label { font-size: 14px; font-weight: 500; color: var(--ink); }
.t-field-help { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.t-field-check { display: flex; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.t-field-check svg { color: var(--rose); margin-top: 1px; }
.t-field-check strong { font-weight: 600; }
.t-field[data-state="disabled"] .t-field-label { color: var(--ink-mute); }

/* ---------- 01 input with unit ---------- */
.t-input { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; background: var(--bg-input);
  border: 1px solid var(--t-control-edge); border-radius: var(--radius-md);
  transition: border-color var(--t-dur), box-shadow var(--t-dur); }
.t-input:hover { border-color: var(--t-control-edge-hover); }
.t-input:focus-within { border: 1.5px solid var(--teal-deep); box-shadow: var(--t-ring); }
.t-input input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink);
  font: 400 17px var(--font-mono); font-variant-numeric: tabular-nums; outline: none; }
.t-input .t-unit, .t-input .t-prefix { font-size: 13px; color: var(--ink-soft); }
.t-input--select { position: relative; padding-right: 40px; }
.t-input select { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink);
  font: 400 16px var(--font-sans); outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.t-input--select > svg { position: absolute; right: 16px; top: 50%; margin-top: -8px; color: var(--ink-soft); pointer-events: none; }
.t-input input[type="date"] { font-size: 16px; }
.t-field[data-state="error"] .t-input { border: 1.5px solid var(--rose); }
.t-field[data-state="error"] .t-input:focus-within { box-shadow: 0 0 0 3px var(--rose-tint); }
.t-field[data-state="disabled"] .t-input { background: var(--bg-soft); border: 1px dashed var(--rule); cursor: not-allowed; }
.t-field[data-state="disabled"] :is(input, .t-unit, .t-prefix) { color: var(--ink-mute); cursor: not-allowed; }

.t-input input[type="number"] { -moz-appearance: textfield; }
.t-input input[type="number"]::-webkit-inner-spin-button, .t-input input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.t-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px 18px; }
.t-fields > .t-field--full { grid-column: 1 / -1; }
@media (max-width: 560px) { .t-fields { grid-template-columns: minmax(0,1fr); } }
.t-card-note { font-size: 13px; color: var(--ink-soft); text-align: right; }
@media (max-width: 560px) { .t-card-note { display: none; } }
.t-subhead { margin: 28px 0 16px; padding-bottom: 8px; border-bottom: 1px dashed var(--rule); }

/* checkbox row: one yes/no that changes the math */
.t-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--teal-tint); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--t-dur); }
.t-check:hover { background: var(--teal-wash); }
.t-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t-check-box { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: var(--bg-input); border: 1.5px solid var(--teal-deep); display: grid; place-items: center; color: transparent; transition: background-color var(--t-dur), color var(--t-dur); }
.t-check input:checked + .t-check-box { background: var(--teal-deep); color: var(--bg); }
.t-check input:focus-visible + .t-check-box { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.t-check-text { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.t-check-text strong { display: block; color: var(--ink); font-weight: 600; }

/* ---------- 02 segmented ---------- */
.t-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px;
  background: var(--bg-soft); border: 1px solid var(--t-control-edge); border-radius: var(--radius-md); }
.t-seg button { height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft);
  font: 500 14px var(--font-sans); cursor: pointer; transition: background-color var(--t-dur), color var(--t-dur); }
.t-seg--mono button { font-family: var(--font-mono); }
.t-seg button:hover { background: var(--rule); color: var(--ink); }
.t-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 600; }
.t-seg button:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 1px; }
.t-seg[data-state="error"] { border: 1.5px solid var(--rose); }
.t-seg[data-state="error"] button { color: var(--ink); font-weight: 400; }
.t-seg[data-state="disabled"] { border: 1px dashed var(--rule); cursor: not-allowed; }
.t-seg[data-state="disabled"] button, .t-seg button:disabled { color: var(--ink-mute); font-weight: 400; background: transparent; cursor: not-allowed; }
.t-seg[data-state="disabled"] button[aria-pressed="true"] { background: var(--rule); color: var(--ink-mute); }
@media (max-width: 900px) { .t-seg button { height: 48px; font-size: 15px; } }
/* compact pill track for a period switch inside a result card */
.t-seg--pill { border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.t-seg--pill button { height: 34px; border-radius: var(--radius-pill); font-size: 13px; padding: 0 6px; }
@media (max-width: 900px) { .t-seg--pill button { height: 40px; font-size: 13px; } }

/* ---------- 03 stepper ---------- */
.t-stepper { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 4px; background: var(--bg-input);
  border: 1px solid var(--t-control-edge); border-radius: var(--radius-md);
  transition: border-color var(--t-dur), box-shadow var(--t-dur); }
.t-stepper button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background-color var(--t-dur), color var(--t-dur); }
.t-stepper button:hover { background: var(--teal-tint); color: var(--teal-deep); }
.t-stepper button:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 1px; }
.t-stepper button:disabled { color: var(--ink-mute); opacity: .6; cursor: not-allowed; background: transparent; }
.t-stepper output { flex: 1; text-align: center; font: 400 20px var(--font-mono); font-variant-numeric: tabular-nums; }
.t-stepper:focus-within { border: 1.5px solid var(--teal-deep); box-shadow: var(--t-ring); }
.t-field[data-state="error"] .t-stepper { border: 1.5px solid var(--rose); }
.t-field[data-state="disabled"] .t-stepper { background: var(--bg-soft); border: 1px dashed var(--rule); color: var(--ink-mute); cursor: not-allowed; }
.t-field[data-state="disabled"] .t-stepper button { color: var(--ink-mute); opacity: 1; }

/* ---------- 04 buttons ---------- */
.t-btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 22px; border: 0; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--bg); font: 600 15px var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-dur), color var(--t-dur); }
.t-btn-orb { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--teal); color: #f5f1ea;
  display: grid; place-items: center; transition: background-color var(--t-dur), color var(--t-dur); }
.t-btn:hover { background: var(--teal-deep); color: var(--bg); }
/* .t-page a sets link colour and would win over a button styled on an <a> */
.t-page a.t-btn, .t-page a.t-btn:hover { color: var(--bg); text-decoration: none; }
.t-page a.t-btn--ghost { color: var(--ink); text-decoration: none; }
.t-page a.t-btn--ghost:hover { color: var(--teal-deep); }
.t-btn:hover .t-btn-orb { background: #f5f1ea; color: #0f5f53; }
[data-theme="night"] .t-btn:hover { background: #d7ece6; color: #1f2a2a; }
[data-theme="night"] .t-btn-orb { background: #0f5f53; }
.t-btn:active, .t-btn--ghost:active, .t-seg button:active, .t-stepper button:active { transform: translateY(1px); }
.t-btn:focus-visible, .t-btn--ghost:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.t-btn:disabled { background: var(--rule); color: var(--ink-mute); cursor: not-allowed; transform: none; }
.t-btn:disabled .t-btn-orb { background: var(--bg-soft); color: var(--ink-mute); }
.t-btn--ghost { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius-pill); font: 500 15px var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-dur), color var(--t-dur), border-color var(--t-dur); }
.t-btn--ghost:hover { background: var(--teal-tint); border-color: var(--teal-deep); color: var(--teal-deep); }
.t-btn--ghost:disabled { border-style: dashed; border-color: var(--rule); color: var(--ink-mute); background: transparent; cursor: not-allowed; transform: none; }
/* small: actions inside a result state or callout */
.t-btn--sm { height: 44px; gap: 8px; padding: 0 18px; font-size: 14px; }
.t-callout .t-btn--ghost { align-self: flex-start; height: 40px; padding: 0 16px; font-size: 14px; background: var(--bg-card); color: var(--ink); border-color: var(--ink); }
.t-callout .t-btn--ghost:hover { background: var(--bg-input); color: var(--ink); border-color: var(--ink); }

/* ---------- 05 hero result ---------- */
.t-result { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.t-result-hero { display: flex; flex-direction: column; gap: 10px; padding: 28px 30px 26px; }
.t-result-num { display: flex; align-items: baseline; gap: 4px; margin: 0; font: 400 clamp(72px, 9vw, 112px)/.92 var(--font-serif); letter-spacing: -.03em; }
.t-result-num .t-cur { font-size: .5em; color: var(--amber-deep); transform: translateY(-.3em); }  /* $ on pay tools */
.t-result-num .t-unit { font-size: 24px; letter-spacing: 0; color: var(--ink); }                   /* mL/hr on clinical */
.t-result-num--text { font-size: clamp(44px, 5.6vw, 64px); line-height: 1; letter-spacing: -.02em; }
.t-result-sub { margin: 4px 0 0; font: italic 400 20px/1.35 var(--font-serif); color: var(--ink-soft); text-wrap: pretty; }
.t-result-sub .t-num { font-style: normal; font-size: 15px; color: var(--ink); }
.t-result-section { padding: 22px 30px 26px; border-top: 1px dashed var(--rule); }

/* ---------- 06 breakdown table ----------
   Rows are grids so the total row can bleed 12px past the column edge
   while its text stays aligned with the rows above. */
.t-table { display: block; width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 15px; }
.t-table tbody { display: block; }
.t-table tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--rule-soft); }
.t-table td { display: block; padding: 0; }
.t-table td:last-child { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-table .t-note { font: italic 400 15px var(--font-serif); color: var(--ink-soft); }
.t-table tr.t-row--sub { border-top: 1px solid var(--ink); border-bottom: 0; margin: 6px 0; padding-top: 12px; font-weight: 600; }
.t-table tr.t-row--total { margin: 10px -12px 0; padding: 14px 12px; border: 0; border-radius: var(--radius-sm); background: var(--teal-tint); font-weight: 600; }
.t-calc--pay .t-table tr.t-row--total, .t-table--pay tr.t-row--total { background: var(--amber-tint); }
[data-theme="night"] .t-table tr.t-row--total { background: rgba(31,138,122,.28); }

/* ---------- 07 show the math ---------- */
.t-math { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.t-result .t-math { background: transparent; border: 0; border-top: 1px dashed var(--rule); border-radius: 0; }
.t-math > summary { display: flex; align-items: center; gap: 10px; padding: 18px 22px; cursor: pointer; list-style: none;
  color: var(--teal-deep); font: 500 15px var(--font-sans); transition: background-color var(--t-dur); }
.t-math > summary::-webkit-details-marker { display: none; }
.t-math > summary:hover { background: var(--teal-tint); }
.t-math > summary:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: -2px; }
.t-math > summary > span { flex: 1; }
.t-math > summary > .t-eyebrow { flex: none; }
.t-math > summary svg, .t-faq summary svg { transition: transform var(--t-dur); }
.t-math[open] > summary svg { transform: rotate(180deg); }
.t-math-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 22px 22px; border-top: 1px dashed var(--rule); }
.t-math-step { display: flex; flex-direction: column; gap: 6px; }
.t-math code { display: block; font: 400 14px/1.6 var(--font-mono); background: var(--bg-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.t-math code strong { font-weight: 600; }
.t-math pre { margin: 0; }
.t-math pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.t-math p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.t-math:not([open]) .t-math-open, .t-math[open] .t-math-closed { display: none; }

/* ---------- 08 / 09 callouts: colour on border and icon, ink text ---------- */
.t-callout { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--radius-md); font-size: 15px; line-height: 1.55; color: var(--ink); }
.t-callout p { margin: 0; }
.t-callout-head { display: flex; align-items: center; gap: 8px; font: 600 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.t-callout-note { font-size: 14px; color: var(--ink-soft); }
.t-callout-lede { font: 400 24px/1.25 var(--font-serif); }
.t-callout--check { background: var(--rose-tint); border: 1px solid var(--rose); }
.t-callout--check .t-callout-head svg { color: var(--rose); }
.t-callout--money { background: var(--amber-tint); border: 1px solid var(--amber); }
.t-callout--money .t-callout-head { color: var(--amber-deep); }
.t-callout--money .t-num { color: var(--amber-deep); font-weight: 600; }
.t-callout--money .t-callout-lede .t-num { font-size: 19px; }
[data-theme="night"] .t-callout--check { background: rgba(192,91,91,.16); }
[data-theme="night"] .t-callout--check .t-callout-head { color: #f3d9d4; }

/* ---------- 10 sources ---------- */
.t-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.t-sources > .t-eyebrow:first-child { margin-right: 6px; }
.t-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--bg-card); color: var(--ink); font: 400 12px var(--font-mono); letter-spacing: .06em; text-decoration: none;
  transition: border-color var(--t-dur), color var(--t-dur); }
.t-page a.t-chip { color: var(--ink); }
.t-chip:hover, .t-page a.t-chip:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
.t-chip strong { font-weight: 600; }
.t-chip span { color: var(--ink-soft); }
.t-updated { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 400 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- 11 faq, byline, disclaimer ---------- */
.t-faq { border-top: 1px solid var(--ink); }
.t-faq details { border-bottom: 1px dashed var(--rule); }
.t-faq summary { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 18px 0; cursor: pointer; list-style: none;
  font: 500 17px var(--font-sans); color: var(--ink); transition: color var(--t-dur); }
.t-faq summary::-webkit-details-marker { display: none; }
.t-faq summary > span { flex: 1; }
.t-faq summary:hover { color: var(--teal-deep); }
.t-faq summary:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.t-faq details[open] summary svg { transform: rotate(180deg); }
.t-faq p { margin: 0 0 20px; max-width: 62ch; font-size: 16px; color: var(--ink-soft); line-height: 1.65; }
.t-byline { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.t-byline-avatar { flex: none; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--teal-tint); display: grid; place-items: center;
  font: 400 24px var(--font-serif); color: var(--teal-deep); }
.t-byline-body { display: flex; flex-direction: column; gap: 6px; }
.t-byline-name { font: 400 24px/1.1 var(--font-serif); }
.t-byline-name .t-num { font-size: 14px; }
.t-byline-bio { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.t-byline-reviewed { letter-spacing: .1em; }
.t-disclaimer { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-block: 1px dashed var(--rule); }
.t-disclaimer p { margin: 0; font: italic 400 18px/1.45 var(--font-serif); color: var(--ink-soft); }

/* ---------- 12 result states: empty, loading, error look different on purpose ---------- */
.t-result[data-state] { min-height: 280px; padding: 28px; display: flex; flex-direction: column; }
.t-result[data-state="empty"]   { justify-content: flex-end; gap: 10px; background: transparent; border: 1.5px dashed var(--ink-mute); box-shadow: none; }
.t-result[data-state="empty"] .t-result-num { font-size: 72px; line-height: .9; letter-spacing: 0; color: var(--ink-mute); }
.t-result[data-state="loading"] { gap: 14px; background: var(--bg-soft); box-shadow: none; }
.t-result[data-state="error"]   { gap: 12px; background: var(--rose-tint); border-color: var(--rose); box-shadow: none; }
.t-result[data-state="error"] .t-callout-head svg { color: var(--rose); }
.t-state-title { font: 400 26px/1.2 var(--font-serif); margin: 0; }
.t-state-body { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.t-result[data-state="error"] .t-state-body { color: var(--ink); }
.t-state-spacer { flex: 1; }
.t-state-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.t-skel { display: block; width: var(--w, 100%); height: 14px; border-radius: var(--radius-sm); background: var(--rule); }
.t-skel--hero { height: 64px; }
.t-skel--sm { height: 12px; }
.t-skel-row { display: flex; justify-content: space-between; }

/* ---------- prose (below the tool) ---------- */
.t-prose { max-width: var(--t-measure); font-size: 18px; line-height: 1.7; }
.t-prose h2 { font: 400 34px/1.15 var(--font-serif); margin: 48px 0 14px; }
.t-prose p { margin: 0 0 20px; text-wrap: pretty; }
.t-prose h3 { font: 400 26px/1.2 var(--font-serif); margin: 36px 0 12px; }
.t-prose ul, .t-prose ol { margin: 0 0 20px; padding-left: 1.3em; }
.t-prose li { margin: 0 0 10px; padding-left: 4px; }
.t-prose li::marker { color: var(--ink-soft); }
.t-prose strong { font-weight: 600; }
.t-prose blockquote { margin: 44px 0; padding-top: 28px; border-top: 2px solid var(--terracotta); font: italic 400 34px/1.25 var(--font-serif); color: var(--teal-deep); }
.t-prose table { width: 100%; border-collapse: collapse; margin: 28px 0 32px; font-size: 14px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden; }
.t-prose th { font: 400 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg-soft); text-align: left; padding: 12px 16px; }
.t-prose td { padding: 12px 16px; border-top: 1px dashed var(--rule); }
@media (max-width: 600px) { .t-prose { font-size: 17px; } .t-prose h2 { font-size: 28px; } .t-prose blockquote { font-size: 27px; } }

/* ---------- mobile result sheet ---------- */
.t-sheet { background: var(--bg-card); border-top: 1px solid var(--rule); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 -6px 20px -8px rgba(31,42,42,.18); padding: 10px 18px 26px; }
.t-sheet-grip { display: block; width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--ink-mute); margin: 0 auto 12px; }
.t-sheet[aria-expanded="true"] { top: 96px; overflow: auto; }

/* ---------- quiz ---------- */
.t-progress { display: grid; grid-template-columns: repeat(var(--t-steps, 12), 1fr); gap: 4px; }
.t-progress span { height: 6px; border-radius: var(--radius-pill); background: var(--rule); transition: background-color var(--t-dur); }
.t-progress span[data-state="done"] { background: var(--ink); }
.t-progress span[data-state="current"] { background: var(--teal-deep); }
.t-option { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 0 16px; border: 1px solid var(--t-control-edge); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--ink); font: 500 17px var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--t-dur), border-color var(--t-dur), color var(--t-dur); }
.t-option:hover { border-color: var(--teal-deep); }
.t-option[aria-checked="true"] { background: var(--ink); color: var(--bg); border: 1.5px solid var(--ink); font-weight: 600; }
.t-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.t-band > * { padding: 12px 14px; border-radius: 10px; background: var(--bg-soft); }
.t-band > [aria-current="true"] { background: var(--ink); color: var(--bg); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .t-page *, .t-page *::before, .t-page *::after { transition: none !important; animation: none !important; }
  .t-btn:active, .t-btn--ghost:active, .t-seg button:active, .t-stepper button:active { transform: none; }
}

/* ---- Newsletter signup block (.t-signup)
   Sits between the tool and the guide on every tool page. Ships with the
   hidden attribute; lead-popup.js reveals it once /api/subscribe says the
   sheet is connected and this browser has not joined the list yet. */
.t-signup-wrap { padding: 40px 24px 56px; }
.t-signup { position: relative; max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 30px 32px; }
.t-signup::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--amber), rgba(217,138,74,0)); }
.t-signup-title { font: 400 28px/1.12 var(--font-serif); margin: 10px 0 10px; color: var(--ink); }
.t-signup-title em { font-style: italic; color: var(--teal-deep); }
.t-signup p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.t-signup form { display: grid; gap: 10px; }
.t-signup-row { display: flex; gap: 10px; flex-wrap: wrap; }
.t-signup-row .t-input { flex: 1 1 220px; }
.t-signup-row .t-btn { flex: 0 0 auto; }
.t-signup .t-signup-fine { font-size: 12.5px; color: var(--ink-mute); }
.t-signup .t-signup-fine a { color: inherit; }
.t-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.t-signup-wrap[hidden], .t-signup[hidden] { display: none; }
@media (max-width: 900px) {
  .t-signup-wrap { padding: 28px 16px 40px; }
  .t-signup { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 18px; }
  .t-signup-title { font-size: 24px; }
  .t-signup-row .t-btn { width: 100%; justify-content: space-between; }
}
[data-theme="night"] .t-signup { background: var(--bg-card); border-color: var(--rule); }
.t-signup .tnd-news-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }