/* 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.

   Reworked 2026-09-07 for the calculator audit: the result sits above the
   form and stays on screen while the reader edits, the tiles are a fixed
   two-column grid under one full-width headline, the examples stack rather
   than scroll, and nothing on any page is wider than a 375px viewport. */

.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);
  min-width: 0;
}

/* ---- 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: the result first, then the fields ---- */
.cost-tool {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}
.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;
}

/* The headline: one display-size figure and one sentence naming every
   assumption behind it. Both are written from the same template the
   builder rendered, so what a reader with no JavaScript sees is what the
   calculator would have said. */
.cost-headline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.cost-headline-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--sp-2);
  margin: 0;
  min-width: 0;
}
.cost-headline-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--t1);
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
  min-width: 0;
}
.cost-headline-unit {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--t3);
}
.cost-headline-say {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-ui);
  line-height: var(--leading-ui);
  color: var(--t1);
  max-width: 60ch;
}
.cost-basis-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--t3);
}
/* Desktop has no result bar: the headline sits above the form and stays
   in view on its own. */
.cost-sticky-bar { display: none; }
.cost-error {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-ui);
  line-height: var(--leading-ui);
  color: var(--t1);
}

/* Secondary tiles in a fixed two-column grid. When the count is odd the
   last one spans both columns, so a row never ends in an orphan. */
.cost-outputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.cost-outputs > .cost-tile:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.cost-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cost-tile .tl-stat-value {
  overflow-wrap: anywhere;
}
.cost-output-unit {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--t3);
}
/* A field docked inside the tile it moves: Minutes down sits in This
   outage, the only figure on the page it can change. */
.cost-tile .tl-field-group {
  margin-top: var(--sp-3);
}
.cost-tile .tl-field-label {
  font-size: 12px;
}

/* The one collapsed block, for the inputs almost nobody changes. */
.cost-advanced {
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-4);
}
.cost-advanced > summary {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  list-style: none;
}
.cost-advanced > summary::-webkit-details-marker { display: none; }
.cost-advanced > summary::before {
  content: '+ ';
  font-family: var(--font-mono);
  color: var(--t3);
}
.cost-advanced[open] > summary::before { content: '- '; }
.cost-advanced > summary:hover { color: var(--t1); }
.cost-advanced > .cost-fields { margin-top: var(--sp-4); }

/* ---- worked examples ---- */
.cost-examples {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.cost-examples-intro {
  font-family: var(--font-sans);
  font-size: var(--text-body-ui);
  line-height: var(--leading-ui);
  color: var(--t2);
  margin: 0;
}
/* Scenario, two figures, Try it. Four columns fit inside the card at any
   width this site is read at, so there is no scroll wrapper to hide the
   Try it button off the right edge, and under 640px the rows stack. */
.cost-example-table {
  width: 100%;
  table-layout: auto;
}
.cost-example-try { white-space: nowrap; }
.cost-try-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.cost-try-chip { white-space: normal; }

/* Kept from 2026-09-06 as belt and braces under theme.css's own rule: the
   constants table still uses the wrapper, and .sr-only inside a header
   cell needs a positioned ancestor or it sizes the document. */
.tl-cost-table-wrap {
  position: relative;
}
/* theme.css sets white-space: nowrap on every table cell so a numeral
   never breaks across lines. The constants table's third column is a
   source name, not a numeral, and one of them ("OPM, Computing Hourly
   Rates of Pay Using the 2,087-Hour Divisor") is 457px wide on a 375px
   phone. Prose cells wrap; the value column keeps the nowrap. */
.cost-constants .tl-cost-table td:not(.tl-num),
.cost-example-table th[scope='row'] {
  white-space: normal;
}

/* ---- 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);
  min-width: 0;
}
.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;
  overflow-wrap: anywhere;
}
.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);
  min-width: 0;
}
.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;
}
/* Geist, not Fraunces italic (2026-09-07): the serif display face belongs
   to the essays. The hub is the front door of a rack of tools and reads in
   the same sans every calculator page uses. */
.cost-index-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);
}
/* One deck, not two: the assumption line says what every calculator below
   starts from and carries the figure to prove it. */
.cost-index-lede {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-ui);
  line-height: var(--leading-ui);
  color: var(--t2);
  max-width: 60ch;
}
.cost-index-lede-figure {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--t1);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* The hub as a rack of tools, not a stack of articles. Two columns from
   700px up, one below. Three elements per card: the question, the figure
   the calculator opens with, and the basis that figure is on. */
.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%;
}
.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 six lime figures would spend it. */
  color: var(--t1);
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}
.cost-tool-unit {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--t3);
}
.cost-card-basis {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--t3);
}

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

/* Stacked tables (2026-09-07). Under 640px every table in the family
   becomes a list of labelled rows, so no page has anything to drag
   sideways at 375px: the examples table, the constants table, and the
   sources list all fold into the column. */
@media (max-width: 640px) {
  .cost-example-table,
  .cost-example-table tbody,
  .cost-example-table tr,
  .cost-example-table th,
  .cost-example-table td,
  .cost-constants .tl-cost-table,
  .cost-constants .tl-cost-table tbody,
  .cost-constants .tl-cost-table tr,
  .cost-constants .tl-cost-table th,
  .cost-constants .tl-cost-table td {
    display: block;
    width: auto;
    max-width: 100%;
    text-align: left;
  }
  .cost-example-table thead,
  .cost-constants .tl-cost-table thead { display: none; }
  .cost-example-table tr,
  .cost-constants .tl-cost-table tr {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--hairline);
  }
  .cost-example-table tbody tr:first-child,
  .cost-constants .tl-cost-table tbody tr:first-child { border-top: none; }
  .cost-example-table th[scope='row'],
  .cost-constants .tl-cost-table th[scope='row'] {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--t1);
    padding: 0 0 6px;
  }
  .cost-example-table td,
  .cost-constants .tl-cost-table td { padding: 0 0 4px; }
  /* Stacked, every cell is a line of its own and wraps. */
  .cost-example-table th,
  .cost-example-table td,
  .cost-constants .tl-cost-table th,
  .cost-constants .tl-cost-table td { white-space: normal; }
  .cost-example-table td[data-label]::before {
    content: attr(data-label) ': ';
    font-family: var(--font-sans);
    color: var(--t3);
  }
  .cost-example-table .cost-example-try { padding-top: var(--sp-2); }
  .tl-cost-table-wrap { overflow-x: visible; }
}

@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; }
  .cost-headline-value { font-size: clamp(2rem, 11vw, 3rem); }
  /* The result bar, the same idea as the meter's dock. Sticky to the
     BOTTOM, not the top: theme.css turns the site header from fixed to
     sticky at 600px and its height then depends on how the nav wraps, so
     no top offset is right on every phone. Pinned to the bottom of the
     viewport it never fights the header, it holds while the reader works
     down the fields inside the calculator card, and it leaves on its own
     once the card ends. */
  .cost-sticky-bar {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
    padding: var(--sp-3) var(--sp-5);
    background: var(--s0);
    border-top: 1px solid var(--hairline-strong);
  }
  .cost-sticky-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 22px;
    color: var(--t1);
    font-variant-numeric: tabular-nums slashed-zero;
    overflow-wrap: anywhere;
  }
  .cost-sticky-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: 480px) {
  .cost-outputs {
    grid-template-columns: 1fr;
  }
}

/* One line under the headline pointing at the neighbouring tool: this
   meeting right now, or this invite across a year (audit section 4). */
.cost-crosslink {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: var(--leading-ui);
  color: var(--t3);
}
.cost-crosslink a {
  color: var(--t2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cost-crosslink a:hover { color: var(--t1); }