/* cost.css - Cost calculator family (docs/pseo/DESIGN.md 2.2).
   Defines only what theme.css lacks for public/cost/<slug>/index.html and
   public/cost/index.html. Tokens only: no hex, no rgb()/hsl()/oklch()
   outside comments. Loaded after tokens.css and theme.css. */

.cost-main {
  padding-top: var(--h-header);
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
}
.cost-wrap {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
}

/* ---- masthead + header ---- */
.cost-masthead {
  padding: 40px 0 0;
}
.cost-pub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--t2);
  text-decoration: none;
}
.cost-pub:hover { color: var(--t1); }
.cost-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.cost-title {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h1-product);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(--t1);
}
.cost-deck {
  font-family: var(--font-sans);
  font-size: var(--text-body-ui);
  line-height: var(--leading-ui);
  color: var(--t2);
  max-width: 60ch;
}

/* ---- the tool ---- */
.cost-tool {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.cost-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.tl-input-group .tl-input-suffix {
  color: var(--t3);
  font-family: var(--font-mono);
  font-size: 16px;
  white-space: nowrap;
}
.cost-outputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.cost-output--primary {
  grid-column: 1 / -1;
}
.cost-output-unit {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--t3);
}

/* ---- worked examples ---- */
.cost-examples {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.cost-examples-intro {
  font-family: var(--font-sans);
  font-size: var(--text-body-ui);
  line-height: var(--leading-ui);
  color: var(--t2);
  margin: 0;
}
/* Redundant since 2026-09-06 and kept only as belt and braces: theme.css's
   own .tl-cost-table-wrap now sets position: relative, which is where this
   fix belongs. It was written here first, when the wrapper's missing
   containing block let the sr-only span in the last <th> escape the
   overflow clip and size the whole document, and the fix was scoped to the
   cost family because the home page uses the same markup without loading
   cost.css. The home page had the identical defect, so the rule moved to
   the shared class. Delete this block whenever the cost pages are touched
   next; do not fix anything here that theme.css should own. */
.tl-cost-table-wrap {
  position: relative;
}

/* ---- explanation body: the essay dialect, under the .cost-body prefix
   (copied from the essay template's inline style, build-essays.mjs) ---- */
.cost-body p {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: var(--text-body-article);
  line-height: var(--leading-body);
  color: var(--t1);
  max-width: var(--measure);
}
.cost-body p:last-child { margin-bottom: 0; }
.cost-body .money {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}
.cost-body h2 {
  margin: 40px 0 20px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--t1);
  max-width: var(--measure);
}
.cost-body h2:first-child { margin-top: 0; }
.cost-body .essay-steps {
  margin: 0 0 28px;
  padding: 0 0 0 2.25em;
  font-family: var(--font-sans);
  font-size: var(--text-body-article);
  line-height: var(--leading-body);
  color: var(--t1);
  max-width: var(--measure);
}
.cost-body .essay-steps li {
  margin: 0 0 14px;
  padding-left: var(--sp-2);
}
.cost-body .essay-steps li:last-child { margin-bottom: 0; }
.cost-body .essay-steps li::marker {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  color: var(--t2);
}

/* ---- constants + sources ---- */
.cost-constants, .cost-sources {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.cost-constants h2, .cost-sources h2, .cost-faq h2, .cost-related h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h3);
  color: var(--t1);
  margin: 0;
}
.cost-sources ul {
  margin: 0;
  padding: 0 0 0 1.25em;
  font-family: var(--font-sans);
  font-size: var(--text-body-ui);
  line-height: var(--leading-ui);
  color: var(--t2);
}
.cost-sources li { margin: 0 0 8px; }
.cost-sources a, .cost-constants a {
  color: var(--t2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cost-sources a:hover, .cost-constants a:hover { color: var(--t1); }

/* ---- FAQ ---- */
.cost-faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cost-faq-item {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.cost-faq-item:first-of-type { padding-top: 0; border-top: none; }
.cost-faq-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--t1);
}
.cost-faq-item p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-ui);
  line-height: var(--leading-ui);
  color: var(--t2);
  max-width: var(--measure);
}
.cost-faq-item .money {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

/* ---- related calculators ---- */
.cost-related {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.cost-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--t1);
}
.cost-card-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--t1);
}
.cost-card-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: var(--leading-ui);
  color: var(--t2);
}
.cost-card-read {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--t3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cost-card:hover .cost-card-read { color: var(--t1); }
.cost-related-home {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin: var(--sp-2) 0 0;
}
.cost-back {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--t2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cost-back:hover { color: var(--t1); }

/* ---- family index (public/cost/index.html) ---- */
.cost-index-header {
  padding-top: 40px;
}
.cost-index-title {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--t1);
}
.cost-index-note {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: var(--leading-ui);
  color: var(--t2);
}

/* The hub as a rack of tools (2026-09-06), not a stack of articles. Two
   columns from 700px up, one below, so a card is never narrower than its
   sample figure needs. align-items: stretch (the grid default) makes the
   cards in a row the same height whatever the description runs to, and
   the read link is pushed to the bottom of each so the row reads level. */
.cost-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.cost-tool-card {
  gap: var(--sp-2);
  height: 100%;
}
/* Two lines reserved for the name so the figures in a row sit on the same
   line whether the name runs to one line or two. Five names, the longest
   at two lines: the reserved line costs one card of white space and buys
   a grid you can read across. */
.cost-tool-card .cost-card-title {
  line-height: 1.25;
  min-height: 2.5em;
}
.cost-tool-card .cost-card-read {
  margin-top: auto;
  padding-top: var(--sp-2);
}
/* The sample figure: the number this calculator opens with, in Geist Mono
   with the money treatment the meter uses, and its own unit beside it.
   baseline alignment keeps the unit sitting on the figure's baseline at
   every figure width, and the wrap is there for a long unit on a narrow
   card ("per employee, per clock hour"). */
.cost-tool-sample {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px var(--sp-2);
  margin: var(--sp-1) 0;
}
.cost-tool-figure {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  /* --t1, the same ink the calculator's own output tiles use, not the lime
     accent: accent discipline keeps lime for the running ticker, the CTA,
     and focus rings, and a page of five lime figures would spend it. */
  color: var(--t1);
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}
.cost-tool-unit {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--t3);
}

@media (max-width: 700px) {
  .cost-index-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .cost-main {
    padding-top: var(--h-header-mobile);
    padding-left: 16px;
    padding-right: 16px;
  }
  .cost-masthead { padding-top: 28px; }
  .tl-stepper-row .tl-input, .tl-stepper-row .tl-input-group { height: var(--h-control-mobile); }
  .cost-tool .tl-stat-value { font-size: 20px; }
  .cost-body p, .cost-body .essay-steps { font-size: 18px; }
  .cost-body h2 { font-size: 22px; }
}

@media (max-width: 480px) {
  .cost-outputs {
    grid-template-columns: 1fr;
  }
}