/* ==========================================================================
   cowell-tools.css: the tools page instrument layer (2026-09-03).
   The shared profile, the live numbers strip, sliders, the show-the-math
   ledgers, the four SVG visuals, scenario compare, and the constants panel.
   Loaded after cowell-co.css on tools.html only. Uses the shared tokens so
   it renders correctly under either the template look or the signature
   skin (cowell-signature.css) without a second set of rules.
   ========================================================================== */

/* ---- Shared profile ----------------------------------------------------- */
#profile { padding-block: var(--sp-lg) var(--sp-md); }
#profile .section-head { margin-bottom: var(--sp-md); }
.profile__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-md);
  align-items: start;
}
.profile__group {
  margin: 0;
  padding: var(--sp-md);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: var(--r-md);
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-sm) var(--sp-md);
  min-width: 0;
}
.profile__group legend {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0 var(--sp-2xs);
  margin-left: calc(var(--sp-2xs) * -1);
}
.profile__group--wide { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile__group .field--slider { grid-column: 1 / -1; }
.field__row { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: var(--sp-sm); align-items: center; }
.field__hint { font-size: var(--fs-micro); color: var(--graphite); line-height: 1.5; }
.field__readout { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: var(--orange-deep); text-transform: none; letter-spacing: 0; margin-left: var(--sp-2xs); }
.field--check { flex-direction: row; align-items: flex-start; gap: var(--sp-2xs); }
.field--check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--orange); flex: none; }
.field--check label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.4; }
.field__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.field__pair .field:nth-child(3), .field__pair .field:nth-child(4) { grid-column: 1 / -1; }

/* A native select clips its chosen option with no ellipsis and no scrollbar,
   so a label that does not fit reads as a different, shorter label: the
   profile form shipped "Sole proprietor o" and "General and Operations
   Managers (owner-opera" at every desktop width. These three carry the longest
   options on the page, and Spanish runs about a third longer again, so they
   take two tracks instead of one. scripts/cowell-fit-check.mjs measures the
   text against the box in both languages at four widths and is what found
   them, including one that only clips in Spanish. */
.field[data-long-select] { grid-column: span 2; min-width: 0; }
@media (max-width: 900px) { .field[data-long-select] { grid-column: 1 / -1; } }

/* Sliders: a thin rule with a square orange thumb; the same control under
   both skins. */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 0;
  cursor: pointer;
  min-width: 0;
}
.slider::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--orange) 0 var(--fill, 0%), var(--line) var(--fill, 0%) 100%); border-radius: 2px; }
.slider::-moz-range-track { height: 4px; background: var(--line); border-radius: 2px; }
.slider::-moz-range-progress { height: 4px; background: var(--orange); border-radius: 2px; }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  margin-top: -8px;
  background: var(--white);
  border: 3px solid var(--orange);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: transform 0.15s var(--ease);
}
.slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--white); border: 3px solid var(--orange); border-radius: var(--r-sm); }
.slider:hover::-webkit-slider-thumb, .slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.slider:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.slider--pct { margin-top: var(--sp-3xs); }

/* Action row */
.profile__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-xs);
  align-items: center;
}
.pbtn {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 0.55rem 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  text-decoration: none;
  line-height: 1.2;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  min-height: 44px;
}
.pbtn:hover { background: var(--ink); color: var(--white); }
.pbtn:disabled { opacity: 0.45; cursor: default; }
.pbtn:disabled:hover { background: var(--white); color: var(--ink); }
.pbtn--primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pbtn--primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.pbtn--accent { background: var(--orange); border-color: var(--orange); color: var(--white); }
.pbtn--accent:hover { background: var(--ink); border-color: var(--ink); }
.pbtn .icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.pbtn.is-active { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--white); }
.profile__status { flex-basis: 100%; font-size: var(--fs-small); color: var(--ink-soft); min-height: 1.4em; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--orange-deep); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }

.field--span { grid-column: 1 / -1; }

/* ---- Plan: narrative, next steps, thresholds ----------------------------- */
#plan { padding-block: var(--sp-lg); background: var(--cream); border-bottom: 1px solid var(--line); }
.plan__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-lg) var(--sp-xl); align-items: start; }
.plan__story { grid-column: 1 / -1; max-width: 78ch; }
.plan__story h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-sm); }
.plan__narrative { font-family: var(--font-serif); font-size: clamp(1.1rem, 0.5vw + 1rem, 1.3rem); line-height: 1.6; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.plan__note { font-size: var(--fs-micro); color: var(--graphite); margin-top: var(--sp-xs); }
.plan__h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-sm); }
.steps-list { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--sp-xs); }
.steps-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-xs); padding: var(--sp-sm); background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--r-sm); counter-increment: step; }
.steps-list li::before { content: counter(step); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: var(--orange-deep); line-height: 1; }
.step__when { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-deep); }
.step__what { font-weight: 600; color: var(--ink); line-height: 1.35; margin-top: 2px; }
.step__note { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; margin-top: 4px; }
.step__rule { font-size: var(--fs-micro); color: var(--graphite); margin-top: 2px; }
.cliffs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2xs); }
.cliff { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-sm); padding: var(--sp-xs) var(--sp-sm); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); align-items: center; }
.cliff--near { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); }
.cliff__label { font-weight: 600; color: var(--ink); font-size: var(--fs-small); line-height: 1.3; }
.cliff__gap { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.cliff__gap--over { color: var(--orange-deep); }
.cliff__track { grid-column: 1 / -1; height: 6px; position: relative; background: var(--line); border-radius: 3px; overflow: visible; margin: 4px 0 2px; }
.cliff__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--orange); border-radius: 3px; transition: width 0.4s var(--ease); }
.cliff__line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); left: 80%; }
.cliff__note { grid-column: 1 / -1; font-size: var(--fs-micro); color: var(--ink-soft); line-height: 1.45; }
.cliff__rule { color: var(--graphite); }
.cliff__figures { grid-column: 1 / -1; font-size: var(--fs-micro); color: var(--graphite); display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

/* ---- Live numbers strip ------------------------------------------------- */
.numbers-strip {
  position: sticky;
  top: var(--strip-top, 72px);
  z-index: 60;
  background: var(--noir, #1c1714);
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 3px solid var(--orange);
}
.numbers-strip__inner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-sm);
  padding-block: var(--sp-xs);
}
.numbers-strip__item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.numbers-strip__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.numbers-strip__value {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s var(--ease);
}
.numbers-strip__value.flash { color: var(--yellow); }
.numbers-strip__value--neg { color: var(--orange-bright); }

/* ---- Cards: what changed ------------------------------------------------- */
.calc__using { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; padding: var(--sp-2xs) var(--sp-xs); background: var(--cream); border-left: 3px solid var(--orange); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.calc__using strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__breakdown li[data-line], .calc__positions li[data-line], .calc__entity-row[data-line] { cursor: help; transition: background-color 0.2s var(--ease); border-radius: var(--r-xs); }
.calc__breakdown li.is-lit, .calc__positions li.is-lit, .calc__entity-row.is-lit { background: rgba(251,191,36,0.14); }
.calc__breakdown li.is-lit span:last-child, .calc__entity-row.is-lit .calc__entity-total { color: var(--yellow); }

/* ---- Visuals ------------------------------------------------------------- */
.calc__fig { margin: 0; min-width: 0; }
.calc__fig svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.calc__fig figcaption { font-size: var(--fs-micro); color: var(--graphite); margin-top: var(--sp-3xs); line-height: 1.5; }
.fig-axis { stroke: var(--line); stroke-width: 1; }
.fig-zero { stroke: var(--graphite); stroke-width: 1; stroke-dasharray: 3 3; }
.fig-label { font-size: 10px; fill: var(--graphite); }
.fig-label--strong { fill: var(--ink); font-weight: 700; }
.fig-label--white { fill: var(--white); font-weight: 700; }
.fig-amt { font-size: 10.5px; fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.fig-seg--inc { fill: var(--ink); }
.fig-seg--se { fill: var(--orange); }
.fig-seg--corp { fill: var(--yellow); }
.fig-seg--div { fill: var(--orange-deep); }
.fig-seg--comp { fill: var(--sand); }
.fig-bar-best { fill: none; stroke: var(--orange); stroke-width: 1.5; }
.fig-curve { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.fig-area { fill: var(--orange); fill-opacity: 0.18; }
.fig-area--neg { fill: var(--sand); fill-opacity: 0.25; }
.fig-marker { fill: var(--orange); stroke: var(--white); stroke-width: 2; }
.fig-marker--bad { fill: #c2410c; }
.fig-marker--mid { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; }
.fig-marker--paid { fill: var(--orange); }
.fig-marker--open { fill: var(--white); stroke: var(--sand); stroke-width: 2; }
.fig-marker--current { stroke: var(--ink); stroke-width: 2.5; }
.fig-marker--best { fill: var(--white); stroke: var(--orange-deep); stroke-width: 2; }
.fig-drop { stroke: var(--orange); stroke-width: 1; stroke-dasharray: 2 3; }
.fig-leader { stroke: var(--ink); stroke-width: 0.8; opacity: 0.7; }
.fig-band { stroke: var(--orange); stroke-width: 10; stroke-linecap: butt; opacity: 0.9; }
.fig-rail { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.fig-tick { stroke: var(--graphite); stroke-width: 1; }
.fig-check { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fig-legend text { font-size: 9.5px; fill: var(--ink-soft); }
.fig-anim { transition: all 0.45s var(--ease); }

/* ---- Show the math ledger ---------------------------------------------- */
.ledger { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ledger > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--orange-deep);
  padding: var(--sp-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 44px;
}
.ledger > summary::-webkit-details-marker { display: none; }
.ledger > summary::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(1px);
  transition: transform 0.2s var(--ease);
  flex: none;
}
.ledger[open] > summary::before { transform: rotate(45deg) translateY(-2px); }
.ledger > summary:hover { color: var(--ink); }
.ledger__body { padding-bottom: var(--sp-sm); }
.ledger__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
.ledger__table caption { text-align: left; font-family: var(--font-serif); font-size: var(--fs-small); font-weight: 600; padding-bottom: var(--sp-2xs); color: var(--ink); }
.ledger__table th, .ledger__table td { text-align: left; vertical-align: top; padding: 6px 6px 6px 0; border-top: 1px solid var(--line); }
.ledger__table thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); padding-top: 0; }
.ledger__table th[scope="row"] { font-weight: 600; }
.ledger__note { display: block; font-weight: 400; color: var(--graphite); line-height: 1.45; margin-top: 2px; }
.ledger__rule { color: var(--ink-soft); white-space: nowrap; font-size: 0.68rem; padding-right: 8px; }
.ledger__amt { text-align: right; white-space: nowrap; font-weight: 600; padding-right: 0; }
.ledger__amt--neg { color: var(--orange-deep); }
.ledger__row--total th, .ledger__row--total td { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 700; }
.ledger__row--group th { background: var(--cream); font-family: var(--font-serif); font-size: var(--fs-small); border-top: 2px solid var(--ink); padding-top: 8px; }
.ledger__table tr.is-lit th, .ledger__table tr.is-lit td { background: rgba(251,191,36,0.22); }
.ledger__table tbody tr:hover th, .ledger__table tbody tr:hover td { background: var(--cream); }

/* ---- Scenario compare --------------------------------------------------- */
#compare { padding-block: var(--sp-md); background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-sm); }
.compare__head h2 { font-size: var(--fs-h3); }
.compare__quick { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare__table { width: 100%; border-collapse: collapse; background: var(--white); font-variant-numeric: tabular-nums lining-nums; font-size: var(--fs-small); border: 1px solid var(--line); }
.compare__table th, .compare__table td { padding: 8px 12px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.compare__table th:first-child, .compare__table td:first-child { text-align: left; }
.compare__table thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }
.compare__delta--up { color: #1f6b3a; font-weight: 700; }
.compare__delta--down { color: var(--orange-deep); font-weight: 700; }
.compare__delta--flat { color: var(--graphite); }
.compare__note { font-size: var(--fs-micro); color: var(--graphite); margin-top: var(--sp-2xs); }

/* ---- Constants panel ---------------------------------------------------- */
.built-on { margin-top: var(--sp-md); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 78ch; margin-inline: auto; }
.built-on > summary { list-style: none; cursor: pointer; font-size: var(--fs-small); font-weight: 700; color: var(--ink); padding: var(--sp-sm) 0; min-height: 44px; display: flex; align-items: center; gap: var(--sp-2xs); }
.built-on > summary::-webkit-details-marker { display: none; }
.built-on > summary::before { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg) translateY(1px); flex: none; transition: transform 0.2s var(--ease); }
.built-on[open] > summary::before { transform: rotate(45deg) translateY(-2px); }
.built-on__body { padding-bottom: var(--sp-md); }
.built-on__lead { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; margin-bottom: var(--sp-sm); }
.built-on__table { width: 100%; border-collapse: collapse; font-size: var(--fs-micro); }
.built-on__table th, .built-on__table td { text-align: left; vertical-align: top; padding: 6px 8px 6px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.built-on__table thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }
.built-on__table td:nth-child(2) { white-space: nowrap; font-weight: 600; }
/* "How these numbers are checked": the answer to the one thing a reader is
   entitled to be suspicious about, which is whether a calculator on a firm's
   website was ever tested. Reads as a filing note, not a badge. */
.built-on__checked { margin-top: var(--sp-md); padding-top: var(--sp-sm); border-top: 2px solid var(--ink); }

/* The workpaper button sits inside a calculator card, under the sentence it
   produces, so it reads as the output of that card rather than a page action. */
.pbtn--card { margin-top: var(--sp-xs); align-self: start; width: 100%; justify-content: center; }
.built-on__h3 { font-size: var(--fs-small); font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.built-on__checked-lead { font-size: var(--fs-micro); color: var(--ink-soft); line-height: 1.6; margin: 0 0 var(--sp-xs); }
.built-on__checked-lead b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.built-on__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.built-on__checks li { font-size: var(--fs-micro); color: var(--ink-soft); line-height: 1.5; padding-left: 14px; position: relative; }
.built-on__checks li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 6px; height: 6px; border-right: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); transform: rotate(-45deg); }
.built-on__checks code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; color: var(--ink); background: rgba(0, 0, 0, 0.045); padding: 1px 4px; border-radius: 2px; }
@media (prefers-contrast: more) { .built-on__checks code { background: transparent; outline: 1px solid ButtonText; } }


/* ---- Handoff panel on contact.html ------------------------------------- */
.handoff { padding-block: var(--sp-lg); }
.handoff__card { border: 1px solid var(--line); border-top: 3px solid var(--orange); background: var(--white); padding: var(--sp-md); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-lg); border-radius: var(--r-md); }
.handoff__card h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-2xs); }
.handoff__lead { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.6; margin-bottom: var(--sp-sm); }
.handoff__narrative { font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.55; color: var(--ink); margin-bottom: var(--sp-sm); padding: var(--sp-sm); background: var(--cream); border-radius: var(--r-sm); }
.handoff__list { list-style: none; padding: 0; margin: 0; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.handoff__list li { display: flex; justify-content: space-between; gap: var(--sp-sm); padding: 6px 0; border-top: 1px solid var(--line); }
.handoff__list li:first-child { border-top: 0; }
.handoff__list li span:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.handoff__list li.handoff__group { display: block; font-family: var(--font-serif); font-weight: 600; color: var(--ink); border-top: 2px solid var(--ink); padding-top: 10px; margin-top: 6px; }
.handoff__form { display: grid; gap: var(--sp-sm); align-content: start; }
.handoff__form textarea { min-height: 9rem; resize: vertical; font-family: var(--font-sans); font-size: var(--fs-small); padding: 0.7rem 0.9rem; border: 2px solid var(--line); border-radius: var(--r-sm); width: 100%; line-height: 1.5; color: var(--ink); }
.handoff__form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(234,88,12,0.14); }
.handoff__demo { font-size: var(--fs-micro); color: var(--graphite); }
.handoff__done { font-size: var(--fs-body); color: var(--ink); line-height: 1.6; padding: var(--sp-sm); background: var(--cream); border-left: 3px solid var(--orange); }
.handoff__back { font-size: var(--fs-small); }

/* ---- Card layout adjustments -------------------------------------------- */
/* The calculator grids pick their column count from the room they have, not
   from the site breakpoints: a card needs about 360 px to keep a headline
   value, a three-cell entity row, and a ledger legible. That gives one
   column on phones, two on tablets and narrow laptops, three from about
   1180 px. Beats the shared .grid--3 rules by specificity. */
#funnel .grid--3, #tools .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
/* Each card is a size container, so its result block adapts to the card's
   own width whatever the grid did. */
.calc { container-type: inline-size; container-name: calc; }
.calc__result-value { font-size: clamp(1.55rem, 9cqw, 2.3rem); overflow-wrap: normal; white-space: nowrap; }
.calc__result-top { flex-wrap: wrap; row-gap: 2px; }
@container calc (max-width: 390px) {
  .calc__result-top { flex-direction: column; align-items: flex-start; }
  .calc__result-value { font-size: clamp(1.7rem, 10cqw, 2.1rem); }
  .calc__breakdown li { grid-template-columns: minmax(0, 1fr) auto; }
  .calc__breakdown li > span:last-child { overflow-wrap: anywhere; }
}
@container calc (max-width: 330px) {
  .calc__breakdown li { grid-template-columns: 1fr; row-gap: 0; }
  .calc__breakdown li > span:last-child { text-align: left; }
  .calc__breakdown li.calc__entity-row { grid-template-columns: minmax(0, 1fr) auto; }
  .calc__positions li { flex-direction: column; align-items: flex-start; gap: 0; }
  .field__pair { grid-template-columns: 1fr; }
}
.calc__form:empty { display: none; }
/* Cards size to their content (ragged bottoms, no voids); the footnote
   sits last with a little air above it. */
#funnel .grid--3, #tools .grid--3 { align-items: start; }
.calc__note { margin-top: var(--sp-2xs); }
/* Breakdown rows: the label gets the wider column so "Full-year federal tax"
   stays on one line; a long value (a SOC title, an MSA name) still wraps
   inside its own column instead of under the label. */
.calc__breakdown li { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.calc__breakdown li > span:last-child { overflow-wrap: normal; }
/* Entity rows keep their three cells on one line: label, total, delta. */
.calc__breakdown li.calc__entity-row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--sp-xs); }
.calc__breakdown li.calc__entity-row > span:last-child { justify-self: end; }

/* ---- Tablet and phone ---------------------------------------------------- */
@media (max-width: 1100px) {
  .profile__group--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field__row { grid-template-columns: minmax(7.5rem, 10rem) 1fr; }
  .numbers-strip__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-2xs); }
  .numbers-strip__value { font-size: 1.1rem; }
}
@media (max-width: 900px) {
  .plan__grid { grid-template-columns: 1fr; }
  /* Two columns of groups, each holding two columns of fields, gives four
     narrow controls a row on a small laptop, which is where "Sole proprietor
     or single-member LLC" ran out of box. The groups stack here instead. */
  .profile__form { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .profile__form, .profile__group, .profile__group--wide { grid-template-columns: 1fr; }
  .field__row { grid-template-columns: 1fr; }
  .field__pair { grid-template-columns: 1fr; }
  .pbtn { flex: 1 1 auto; justify-content: center; }
  .handoff__card { grid-template-columns: 1fr; gap: var(--sp-md); }
  /* The strip becomes a sticky result bar at the bottom of the phone while
     the inputs scroll. */
  body.page-tools { padding-bottom: 92px; }
  .numbers-strip { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-top: 3px solid var(--orange); border-bottom: 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.18); }
  .numbers-strip__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px var(--sp-2xs); padding-block: 8px; }
  .numbers-strip__item:nth-child(1), .numbers-strip__item:nth-child(3) { display: none; }
  .numbers-strip__label { font-size: 0.75rem; }
  .numbers-strip__value { font-size: 1rem; }
  .ledger__table thead { display: none; }
  .ledger__table tr { display: grid; grid-template-columns: 1fr auto; }
  .ledger__table th[scope="row"] { grid-column: 1 / -1; padding-bottom: 0; }
  .ledger__table .ledger__rule { border-top: 0; padding-top: 0; white-space: normal; }
  .ledger__table .ledger__amt { border-top: 0; padding-top: 0; }
  .compare__head { flex-direction: column; align-items: stretch; }
}
/* Phones: nothing this layer sets falls under 12 px, whatever the shared
   micro token is (Lighthouse counts every character under 12 px). */
@media (max-width: 720px) {
  .field__hint, .ledger__table, .ledger__note, .ledger__rule, .calc__fig figcaption, .plan__note, .step__rule, .step__note, .cliff__note, .cliff__figures, .compare__note, .built-on__table, .built-on__lead, .handoff__demo, .calc__note, .calc__doc, .calc__breakdown li, .calc__positions li, .calc__entity-row, .calc__entity-row .calc__entity-delta, .profile__status { font-size: 0.78rem; }
  .ledger__table thead th, .compare__table thead th, .built-on__table thead th, .step__when, .numbers-strip__label, .calc__result-label { font-size: 0.75rem; letter-spacing: 0.04em; }
  .fig-label, .fig-legend text { font-size: 12px; }
  .fig-amt { font-size: 12px; }
}
@media (max-width: 400px) {
  .numbers-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers-strip__item:nth-child(4) { display: none; }
  body.page-tools { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .fig-anim, .slider::-webkit-slider-thumb, .pbtn, .ledger > summary::before, .cliff__fill { transition: none; }
}
@media (forced-colors: active) {
  .numbers-strip, .profile__group, .pbtn, .ledger, .compare__table, .built-on { border: 1px solid ButtonText; }
  .slider::-webkit-slider-thumb { border-color: ButtonText; }
}
@media print {
  .numbers-strip, .profile__actions, .compare__quick, .site-header, .cta-band, .site-footer, .mobile-nav { display: none !important; }
  .ledger[open] > summary { display: none; }
  .calc { break-inside: avoid; }
}

/* Phones: the sticky result bar is one row of three, never two rows (mobile QA 2026-09-03). */
@media (max-width: 640px) {
  .numbers-strip__item:nth-child(4) { display: none; }
  .numbers-strip__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   The tools page and the phone dock share one screen edge
                                                 added 2026-09-03

   Below 720px the live numbers strip stops being sticky under
   the header and pins itself to the bottom of the phone, so the
   answer stays on screen while the inputs scroll. The action
   dock added to every page pins to that same edge and, being
   the later layer at a higher z-index, was covering 57 of the
   strip's 65 pixels: the calculator still ran, and the reader
   could no longer see the number it produced.

   The dock keeps the bottom edge, because a thumb reaches the
   bottom of a phone and an action belongs there. The strip is a
   readout, so it rides directly above the dock and the page
   reserves the height of both.
   ============================================================ */

@media (max-width: 720px) {
  body.page-tools .numbers-strip { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px)); }
  body.page-tools { padding-bottom: calc(92px + var(--dock-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 400px) {
  body.page-tools { padding-bottom: calc(110px + var(--dock-h) + env(safe-area-inset-bottom, 0px)); }
}