/* The three static tool pages (the trade-up calculator, the reverse
   calculator, gen codes), release v2026.09.30.3, stream S4. Their files lost
   their own <style> (ops/rel93/strip-static-style.mjs) and are laid out on
   the desk's parts when served (server/src/seo/staticTools.ts toolBody):
   the shared head, the island, then the prose as closed folds and the FAQ
   as rows. This sheet is linked by those pages alone. Tokens come from
   public.css. */
@layer components {
  .s4-static { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
  .s4-static > .s-head { margin: 0; }
  /* Gen codes keeps its own head and spacing (gen-codes.css). */
  .s4-static.s4-flow { display: block; }

  /* What a crawler or a browser without JavaScript reads where the island
     mounts: one dashed plate, the desk's empty state. */
  .s4-static .nojs { margin: 0; max-width: 72ch; padding: 16px 18px; border: 1px dashed var(--pt-hairline-strong); border-radius: var(--radius-card); font-size: 14px; line-height: 1.6; color: var(--pt-soft); }

  /* The folds: closed by default (the owner's 2026-10-01 ask: the tool
     first, the reading behind a tap), one column until 1280, two from
     there; a section holding a table spans the row and drops the 72ch
     measure so the table is never squeezed. */
  .s4-tool-folds .folds { gap: 10px; }
  .s4-tool-folds .folds-grid { gap: 10px; }
  .s4-tool-folds .fold:has(table) { grid-column: 1 / -1; }
  .s4-tool-folds .fold:has(table) .fold-body { max-width: none; }
  .s4-tool-folds .fold-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
  .s4-tool-folds .fold-body a, .s4-static .hint a { color: var(--pt-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pt-ink) 35%, transparent); text-underline-offset: 3px; }
  .s4-tool-folds .fold-body a:hover, .s4-static .hint a:hover { color: var(--pt-copper-bright); }
  .s4-tool-folds .fold-body code { font-family: var(--font-mono); font-size: 12.5px; color: var(--pt-ink); overflow-wrap: anywhere; }

  /* The reference table on the desk's table anatomy: hairline rows, faint
     mono heads, numbers right and tabular. A phone keeps the rung, the
     contract, the cost and the recovery; the pool and the expected back stay
     in the HTML for a crawler and come back from 640. */
  .s4-tool-folds .scroller { overflow: visible; }
  .s4-tool-folds table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .s4-tool-folds th, .s4-tool-folds td { padding: 9px 10px; border-bottom: 1px solid var(--pt-hairline); text-align: left; vertical-align: top; color: var(--pt-soft); }
  .s4-tool-folds th { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-faint); }
  .s4-tool-folds td:first-child { color: var(--pt-ink); }
  .s4-tool-folds .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  @media (max-width: 639px) {
    .s4-tool-folds th:nth-child(4), .s4-tool-folds td:nth-child(4), .s4-tool-folds th:nth-child(5), .s4-tool-folds td:nth-child(5) { display: none; }
    .s4-tool-folds th, .s4-tool-folds td { padding: 8px 6px; }
  }

  /* The small lines: the table's note and the hourly lists at the foot. */
  .s4-static .hint { margin: 0; max-width: 72ch; font-size: 13px; line-height: 1.6; color: var(--pt-faint); text-wrap: pretty; }
  .s4-static > .hint strong { font-weight: 500; color: var(--pt-soft); }
}

/* A fold's Show is the only way into its text: 44px on touch, and while the
   fold is closed the whole plate (its heading too) is the summary's target
   (the same rule as s4-tools.css for the server-drawn pages). */
@layer components {
  .s4-static .fold { position: relative; }
  .s4-static .fold-d:not([open]) > .fold-s::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  @media (pointer: coarse) { .s4-static .fold-s { min-height: 44px; } }
}