/* TankRatio shared styles — static, no external fonts or scripts.
   Palette is brand-fixed (teal #0B6E78, aqua #3FC7D1, white) plus one accent:
   "tape" yellow, used only for measurements (the tape-measure motif). */
@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { max-inline-size: 100%; }
}

@layer base {
  :root {
    color-scheme: light;   /* light only by decision (24 Sep 2026); light-dark() tokens resolve to light */
    /* Tier 1 — literal */
    --teal: #0B6E78;
    --teal-deep: #084E55;
    --aqua: #3FC7D1;
    --ink-900: #0A2E33;
    --ink-600: #45636A;
    --glass-50: #F2FAFB;
    --glass-100: #E3F4F6;
    --line-200: #CFE2E5;
    --tape: #F2B705;
    --tape-ink: #2E2400;
    --sand: #D8C497;
    --night-900: #07191C;
    --night-800: #0E2A2F;
    --night-700: #16393F;

    /* Tier 2 — semantic */
    --bg: light-dark(var(--glass-50), var(--night-900));   /* page tint (24 Sep 2026) */
    --card: light-dark(#FFFFFF, var(--night-800));
    --surface: light-dark(var(--glass-100), var(--night-800));
    --surface-2: light-dark(#D3ECEF, var(--night-700));
    --text: light-dark(var(--ink-900), #E4F1F2);
    --muted: light-dark(var(--ink-600), #9CB8BC);
    --line: light-dark(var(--line-200), #24474D);
    --accent: light-dark(var(--teal), var(--aqua));
    --accent-strong: light-dark(var(--teal-deep), #7FDDE4);
    --warn-bg: light-dark(#FFF4D6, #33290A);
    --warn-text: light-dark(#7A5200, #F5D27A);

    --font-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-data: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

    --r-sm: 0.5rem;
    --r: 0.875rem;
    --r-lg: 1.25rem;
    --gutter: 1rem;
    --measure: 44rem;
    --wide: 72rem;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font: 1rem/1.6 var(--font-body);
  }
  a { color: var(--accent); text-underline-offset: 0.15em; }
  a:hover { color: var(--accent-strong); }
  :focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
  h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; }
  h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; margin: 0.3em 0 0.35em; }
  h2 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); font-weight: 800; letter-spacing: -0.01em; margin: 2.4em 0 0.5em; }
  h3 { font-size: 1.1rem; font-weight: 700; margin: 1.6em 0 0.35em; }
  p, li { text-wrap: pretty; }
  table { border-collapse: collapse; inline-size: 100%; font-size: 0.93rem; }
  th, td { border-block-end: 1px solid var(--line); padding: 0.5rem 0.6rem; text-align: start; vertical-align: top; }
  th { background: var(--surface); font-weight: 700; }
  td.num, th.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }

  @media (forced-colors: active) {
    :root { --accent: LinkText; --line: CanvasText; }
  }
}

@layer components {
  .wrap { max-inline-size: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
  .prose { max-inline-size: var(--measure); }

  .draft { background: var(--warn-bg); color: var(--warn-text); text-align: center; font-size: 0.8rem; padding: 0.3rem 0.5rem; }

  /* Header */
  .site-head { background: var(--teal); color: #fff; }
  .site-head .wrap { display: flex; align-items: center; gap: 0.6rem; min-block-size: 3.5rem; }
  .site-head a { color: #fff; text-decoration: none; }
  .brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
  .site-head nav { margin-inline-start: auto; display: flex; gap: 1rem; font-size: 0.92rem; }
  .site-head nav a { opacity: 0.92; white-space: nowrap; }
  @media (max-width: 26rem) { .site-head nav { gap: 0.75rem; font-size: 0.85rem; } }

  .crumbs { font-size: 0.85rem; color: var(--muted); margin: 1rem 0 0; }
  .crumbs a { color: inherit; }

  /* Answer-first paragraph (what search and AI answers quote) */
  .answer { font-size: 1.08rem; max-inline-size: var(--measure); margin: 0 0 1.25rem; }
  .answer strong { font-family: var(--font-data); font-weight: 700; font-size: 0.98em; }

  /* Measurement pill: the tape-measure accent. Used ONLY for dimensions. */
  .tape {
    display: inline-block; background: var(--tape); color: var(--tape-ink);
    font: 700 0.85em/1.3 var(--font-data); padding: 0.05em 0.45em; border-radius: 0.3em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }

  /* ---------- Tool layout ---------- */
  .tool {
    display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 1rem;
  }
  @media (min-width: 60rem) {
    .tool { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 1.5rem; gap: 1.5rem; }
    .tool-stage { position: sticky; inset-block-start: 1rem; align-self: start; }
  }

  .stage {
    position: relative; border-radius: var(--r); overflow: hidden;
    background:
      radial-gradient(120% 80% at 50% 0%, light-dark(#FFFFFF, #123237) 0%, transparent 70%),
      linear-gradient(light-dark(var(--glass-100), #0B2226), light-dark(#D6EDF0, #081B1E));
    border: 1px solid var(--line);
    touch-action: pan-y;
    cursor: grab;
  }
  .stage:active { cursor: grabbing; }
  .stage svg { display: block; inline-size: 100%; block-size: auto; }
  .stage-hint { position: absolute; inset-block-end: 0.5rem; inset-inline-end: 0.75rem; font-size: 0.75rem; color: var(--muted); pointer-events: none; }
  .stage-caption { font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0 0; }

  fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  legend { font-weight: 700; font-size: 0.9rem; padding: 0; margin-block-end: 0.45rem; }

  .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .chip {
    display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 2.5rem;
    padding: 0.35rem 0.8rem; border-radius: 999px; border: 1.5px solid var(--line);
    background: var(--card); color: var(--text); font: 600 0.85rem/1.2 var(--font-body); cursor: pointer;
  }
  .chip small { font-family: var(--font-data); font-weight: 500; color: var(--muted); }
  .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); color: var(--accent-strong); }

  .seg { display: inline-flex; border: 1.5px solid var(--accent); border-radius: 999px; overflow: hidden; background: var(--card); }
  .seg label { position: relative; padding: 0.35rem 1rem; font-weight: 700; font-size: 0.88rem; color: var(--accent); cursor: pointer; min-block-size: 2.25rem; display: grid; place-items: center; }
  .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .seg label:has(input:checked) { background: var(--accent); color: var(--card); }
  .seg label:has(input:focus-visible) { outline: 3px solid var(--aqua); outline-offset: -3px; }

  .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

  .fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field label { display: block; font-size: 0.82rem; font-weight: 700; margin-block-end: 0.2rem; }
  .field .hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
  .box {
    display: flex; align-items: center; background: var(--card); border: 1.5px solid light-dark(#9DB9BE, #3A6168);
    border-radius: var(--r-sm); padding-inline: 0.6rem;
  }
  .box:focus-within { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--aqua) 45%, transparent); }
  .box input {
    flex: 1; min-inline-size: 0; border: 0; outline: 0; background: transparent; color: var(--text);
    font: 600 1.05rem/1 var(--font-data); padding-block: 0.65rem; font-variant-numeric: tabular-nums;
  }
  .box .u { color: var(--muted); font-size: 0.8rem; margin-inline-start: 0.3rem; }
  .box input:user-invalid { color: #B3261E; }

  details.more { border-block-start: 1px dashed var(--line); padding-block-start: 0.6rem; }
  details.more > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--accent); }
  details.more[open] > summary { margin-block-end: 0.6rem; }

  .msg { font-size: 0.85rem; color: var(--warn-text); background: var(--warn-bg); border-radius: var(--r-sm); padding: 0.5rem 0.7rem; }
  .msg:empty { display: none; }

  /* Results */
  .results { background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--r); padding: 1rem; }
  .hero-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
  .hero-num b { font: 800 clamp(2.4rem, 2rem + 2vw, 3.2rem)/1 var(--font-display); color: var(--accent-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
  .hero-num span { font-weight: 700; }
  .hero-sub { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.88rem; }
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; }
  .stats > div { background: var(--surface); border-radius: var(--r-sm); padding: 0.5rem 0.65rem; }
  .stats dt { font-size: 0.75rem; color: var(--muted); }
  .stats dd { margin: 0; font: 700 1.1rem/1.3 var(--font-data); font-variant-numeric: tabular-nums; }
  .stats dd small { font: 500 0.75rem var(--font-body); color: var(--muted); }
  .tag {
    display: inline-block; font: 700 0.62rem/1.5 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase;
    background: var(--surface-2); color: var(--accent-strong); border-radius: 0.25rem; padding: 0 0.35rem; vertical-align: 0.15em;
  }

  .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.9rem; }
  .btn {
    display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.5rem; padding: 0.4rem 0.95rem;
    border-radius: 999px; border: 1.5px solid var(--accent); background: var(--accent); color: var(--card);
    font: 700 0.88rem/1 var(--font-body); cursor: pointer; text-decoration: none;
  }
  .btn.ghost { background: transparent; color: var(--accent); }
  .btn:hover { filter: brightness(1.08); }

  /* Recommendation + placeholder slots */
  .next { border-inline-start: 4px solid var(--aqua); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; padding: 0.9rem 1.1rem; margin-block-start: 1.5rem; }
  .next h2 { margin: 0 0 0.3rem; font-size: 1.15rem; }
  .next ul { margin: 0.3rem 0; padding-inline-start: 1.2rem; }
  .slot { margin-block-start: 0.7rem; border: 2px dashed #C9A13B; background: var(--warn-bg); color: var(--warn-text); border-radius: var(--r-sm); padding: 0.6rem 0.8rem; font-size: 0.85rem; }

  /* Content blocks */
  .formula {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.7rem 0.9rem;
    font: 0.88rem/1.55 var(--font-data); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  }
  .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
  .table-scroll table th:first-child, .table-scroll table td:first-child { padding-inline-start: 0.8rem; }
  .note { font-size: 0.85rem; color: var(--muted); }

  .faq details { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.65rem 0.9rem; margin-block: 0.5rem; background: var(--card); }
  .faq summary { font-weight: 700; cursor: pointer; }
  .faq details p { margin: 0.5rem 0 0; }

  .embed textarea {
    inline-size: 100%; min-block-size: 5.5rem; font: 0.8rem/1.4 var(--font-data); padding: 0.6rem;
    border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text); resize: vertical;
  }

  .signup { background: var(--teal); color: #fff; border-radius: var(--r-lg); padding: 1.25rem; margin-block-start: 2.5rem; }
  .signup h2 { margin: 0 0 0.3rem; color: #fff; }
  .signup p { margin: 0 0 0.8rem; opacity: 0.92; }
  .signup form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .signup label { flex-basis: 100%; font-weight: 700; font-size: 0.85rem; }
  .signup input[type="email"] {
    flex: 1 1 14rem; min-block-size: 2.75rem; border-radius: 999px; border: 0; padding-inline: 1rem;
    font: 1rem var(--font-body); color: var(--ink-900); background: #fff;
  }
  .signup .btn { background: var(--tape); border-color: var(--tape); color: var(--tape-ink); min-block-size: 2.75rem; }
  .signup .fine { font-size: 0.78rem; opacity: 0.85; margin: 0.6rem 0 0; flex-basis: 100%; }

  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; list-style: none; padding: 0; }
  .cards a {
    display: block; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.65rem 0.8rem;
    text-decoration: none; font-weight: 700; background: var(--card); color: var(--text);
  }
  .cards a span { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted); }
  .cards a:hover { border-color: var(--accent); }

  .sources { font-size: 0.85rem; color: var(--muted); }
  .sources li { margin-block: 0.25rem; }

  /* Mega-footer */
  .site-foot { margin-block-start: 3.5rem; background: var(--surface); border-block-start: 1px solid var(--line); font-size: 0.87rem; color: var(--muted); padding-block: 1.75rem 2rem; }
  .hubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem; }
  .hubs h2 { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--text); }
  .hubs ul { list-style: none; margin: 0; padding: 0; }
  .hubs li { margin-block: 0.2rem; }
  .site-foot .legal { border-block-start: 1px solid var(--line); margin-block-start: 1.5rem; padding-block-start: 1rem; }
  .site-foot .legal p { margin: 0.35rem 0; }

  /* Two-column reading layout with sticky rail on wide screens */
  .content-grid { display: block; }
  .rail { display: none; }
  @media (min-width: 68rem) {
    .content-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(16rem, 19rem); justify-content: space-between; gap: 3rem; align-items: start; }
    .rail { display: flex; flex-direction: column; gap: 1rem; position: sticky; inset-block-start: 1rem; margin-block-start: 1.5rem; max-block-size: calc(100dvh - 2rem); overflow-y: auto; }
  }
  .rail-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem; }
  .rail-kicker { margin: 0 0 0.4rem; font: 700 0.72rem/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .rail-stage { border-radius: var(--r-sm); background: linear-gradient(light-dark(var(--glass-100), #0B2226), light-dark(#D6EDF0, #081B1E)); }
  .rail-stage svg { display: block; inline-size: 100%; block-size: auto; max-block-size: 8.5rem; margin-inline: auto; }
  .rail-dims { margin: 0.5rem 0 0.4rem; text-align: center; }
  .rail-dims { font: 700 0.85rem/1.3 var(--font-data); }
  .rail-stats { display: grid; gap: 0.25rem; margin: 0; }
  .rail-stats > div { display: flex; justify-content: space-between; gap: 0.5rem; border-block-end: 1px dashed var(--line); padding-block: 0.3rem; }
  .rail-stats dt { font-size: 0.82rem; color: var(--muted); }
  .rail-stats dd { margin: 0; font: 700 0.9rem var(--font-data); font-variant-numeric: tabular-nums; }
  .rail-btn { margin-block-start: 0.75rem; inline-size: 100%; justify-content: center; }
  .toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--line); }
  .toc a { display: block; padding: 0.3rem 0.75rem; margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 0.88rem; }
  .toc a:hover { color: var(--accent); }
  .toc a[aria-current] { color: var(--accent-strong); border-inline-start-color: var(--accent); font-weight: 700; }
  .rail-links { list-style: none; margin: 0; padding: 0; }
  .rail-links a { display: block; padding: 0.3rem 0; border-block-end: 1px dashed var(--line); text-decoration: none; font-size: 0.9rem; }
  .rail-links li:last-child a { border: 0; }
  .soon { cursor: help; text-decoration: underline dotted color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em; }
  .rail-ad { min-block-size: 8rem; display: grid; place-items: center; text-align: center; margin: 0; }

  /* Former inline styles (moved here so the CSP can forbid inline styles) */
  .row-units { margin-block: 1rem 0.6rem; }
  .lbl { font-size: 0.9rem; }
  .mt-6 { margin-block-start: 0.6rem; }
  .mt-8 { margin-block-start: 0.8rem; }
  .mt-9 { margin-block-start: 0.9rem; }

  /* Homepage */
  .home-hero { display: grid; gap: 1.5rem; align-items: center; margin-block: 1.5rem 1rem; }
  @media (min-width: 60rem) { .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
  .home-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem); margin-block: 0.2em 0.3em; }
  .quick { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; margin-block-start: 1rem; }
  .quick-out { margin: 0.8rem 0; font-size: 1rem; }
  .quick-out b { font: 800 1.8rem/1 var(--font-display); color: var(--accent-strong); }
  .card-soon { display: block; border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 0.65rem 0.8rem; font-weight: 700; color: var(--muted); }
  .card-soon span { display: block; font-weight: 400; font-size: 0.8rem; }
  .cards.tools { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

  /* Embed pages */
  .embed-page { padding-block: 0.75rem; }
  .embed-credit { font-size: 0.85rem; color: var(--muted); margin: 0.6rem 0 0; text-align: end; }
}

@layer utilities {
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mt-0 { margin-block-start: 0; }
}