/* RDA non-PH estimand explorer — app styles. Tokens from assets/tokens/*; ch-* shared vocabulary. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-sans); color: var(--ink); background: var(--surface); font-size: var(--fs-body-lg, 19px); line-height: var(--lh-relaxed, 1.6); -webkit-font-smoothing: antialiased; }

/* ---- Link floor ----
   Every link colour in this sheet is scoped to a component (.seealso a, and
   friends). Nothing sets a colour on a bare `a`, so a link that no component
   happens to name falls through to the browser's own stylesheet: #0000EE, and
   #551A8B once it has been clicked. Nothing in the shipped markup lands there
   today — but this app writes anchors from JS, and the identical gap on the
   main site was rendering browser-blue links on 59 of its pages, the visited
   ones flipping hue hard enough to lose your place in a list.

   A floor, not a component style: at 0-0-1 it is the weakest selector that can
   exist, so every rule below still wins. `color` only — adding text-decoration
   here would reach past the fall-through links into components that leave
   decoration to the UA sheet. And an author `color` on `a` is itself what
   disables the UA :visited purple, so there is no :visited rule to write. Do
   not add a blanket `a:visited`: at 0-1-1 it would outrank the component rules
   and repaint links the moment a reader clicked them.

   .cta and .headline are the dark surfaces; the light floor measures 2.25:1 on
   #152D49, so unclaimed links there take white (13.97:1) instead. :not([class])
   keeps both floors off any link a component has already claimed.

   This block is byte-identical in all six tools — keep it that way. */
a { color: var(--rda-red-dark); }
.cta a:not([class]),
.headline a:not([class]) { color: var(--ink-on-dark, #fff); }
em { font-style: normal; font-weight: 500; color: var(--rda-red); }
.eyebrow { font-size: var(--fs-eyebrow, 13px); font-weight: 600; letter-spacing: var(--ls-eyebrow, 0.12em); text-transform: uppercase; color: var(--rda-red); margin: 0 0 8px; }

.appbar { border-bottom: 1px solid var(--rule); background: var(--surface); }
.appbar-inner { max-width: 1180px; margin: 0 auto; padding: 18px var(--gutter, 32px); display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; } .brand img { display: block; }
.appbar-tag { font-size: var(--fs-sm, 15px); color: var(--ink-muted); border-left: 1px solid var(--rule-blue); padding-left: 16px; margin-left: 4px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter, 32px) 80px; }
.lede { max-width: 800px; margin-bottom: 28px; }
.lede h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.06; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px; }
.lede .deck { font-size: var(--fs-lead, 20px); color: var(--ink-muted); margin: 0; }
.lede .deck em { color: var(--ink); }

.grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.grid > * { min-width: 0; }
@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } .inputs { position: static; max-height: none; overflow: visible; } }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg, 10px); padding: 22px 22px 24px; box-shadow: var(--shadow-xs); }
.card-head { margin-bottom: 12px; } .card-head .eyebrow { margin: 0; } .params-head { margin-top: 22px; }
.inputs { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }

.modelpicker { display: grid; gap: 4px; }
.mp-item { display: flex; align-items: baseline; gap: 8px; padding: 9px 11px; border-radius: var(--radius-sm, 4px); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.mp-item:hover { background: var(--surface-panel); }
.mp-item.on { background: var(--surface-blue, #eef2f9); border-color: var(--rule-blue); }
.mp-item.on .mp-name { color: var(--rda-red); }
.mp-name { font-size: var(--fs-sm, 15px); font-weight: 600; color: var(--ink); }
.blurb { font-size: 13px; color: var(--ink-muted); margin: 12px 0 0; line-height: 1.5; }

.field { margin-bottom: 13px; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.field-label { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.field-label .sub { font-size: 12px; color: var(--ink-faint); font-weight: 400; margin-left: 6px; }
.field-num, .mini { width: 86px; font-family: var(--font-mono); font-size: 13px; color: var(--ink); text-align: right; padding: 6px 8px; border: 1px solid var(--rule-blue); border-radius: var(--radius-sm, 4px); background: var(--surface); -moz-appearance: textfield; }
.field-num:focus, .mini:focus { outline: none; border-color: var(--rda-red); }
.slider { width: 100%; margin: 9px 0 0; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: var(--surface-blue, #dbe3f0); outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--rda-red); cursor: pointer; border: 2px solid #fff; box-shadow: var(--shadow-xs); }
.slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--rda-red); cursor: pointer; border: 2px solid #fff; }
.taurow { display: flex; align-items: center; gap: 12px; } .taurow .slider { margin-top: 0; }

.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.results > * { min-width: 0; }

/* headline card */
.headline { background: var(--surface-dark); color: #fff; }
.headline .hl-lab { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); }
.headline .hl-hr { font-family: var(--font-mono); font-size: 46px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; }
.headline .hl-hr .unit { font-size: 17px; font-weight: 500; color: rgba(255,255,255,0.6); margin-left: 8px; font-family: var(--font-sans); }
.headline .hl-ci { font-family: var(--font-mono); font-size: 15px; color: rgba(255,255,255,0.72); margin: 0 0 2px; letter-spacing: 0.01em; }
.headline .hl-verdict { font-size: var(--fs-sm, 15px); color: var(--ink-on-dark-soft, #c7d2e0); line-height: 1.5; margin: 10px 0 0; }
.headline .hl-verdict b { color: #fff; }
.headline em { color: #fff; }

.plotbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.fntabs { display: inline-flex; gap: 4px; }
.fntab { appearance: none; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 7px 14px; border: 1px solid var(--rule-blue); background: var(--surface); color: var(--ink-soft); border-radius: var(--radius-sm, 4px); }
.fntab.on { background: var(--rda-navy); border-color: var(--rda-navy); color: #fff; }
.plotopts { display: inline-flex; align-items: center; gap: 12px; }
.opt { font-size: 13px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.opt input[type=checkbox] { accent-color: var(--rda-red); }
.opt select { font-family: inherit; font-size: 12.5px; color: var(--ink-soft); padding: 4px 6px; border: 1px solid var(--rule-blue); border-radius: var(--radius-sm, 4px); background: var(--surface); }
.curve { width: 100%; height: auto; display: block; }
.plotcap { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }
.action { appearance: none; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 7px 14px; border-radius: var(--radius-sm, 4px); border: 1px solid var(--rule-blue); background: var(--surface); color: var(--ink-soft); }
.action:hover { color: var(--rda-red); border-color: var(--rda-red); }

.ch-frame { fill: none; stroke: var(--rule); }
.ch-grid { stroke: var(--rule); stroke-width: 1; }
.ch-tick { fill: var(--ink-faint); font-size: 11px; font-family: var(--font-mono); }
.ch-tick-y { text-anchor: end; } .ch-tick-x { text-anchor: middle; }
.ch-axis { fill: var(--ink-muted); font-size: 12px; text-anchor: middle; font-family: var(--font-sans); }
.ch-line  { fill: none; stroke: var(--rda-red);  stroke-width: 2.6; stroke-linejoin: round; }
.ch-line2 { fill: none; stroke: var(--rda-navy); stroke-width: 2.4; stroke-linejoin: round; }
.ch-line3 { fill: none; stroke: var(--rda-blue); stroke-width: 2.2; stroke-linejoin: round; }
.ch-line4 { fill: none; stroke: var(--rda-navy); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 6 4; }
.ch-km { fill: none; stroke: var(--rda-navy); stroke-width: 1.3; stroke-linejoin: round; opacity: 0.75; }
.ch-km2 { fill: none; stroke: var(--rda-red); stroke-width: 1.3; stroke-linejoin: round; opacity: 0.75; }
.ch-ref { stroke: var(--rule-blue); stroke-width: 1; stroke-dasharray: 4 3; }
.ch-legend { fill: var(--ink-muted); font-size: 11px; font-family: var(--font-sans); }
.ch-target { fill: #fff; stroke: var(--rda-red); stroke-width: 2; }

/* quantities */
.qtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qtable thead th { text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; padding: 0 0 8px 16px; }
.qtable thead th:first-child { text-align: left; padding-left: 0; }
.qtable tbody th { text-align: left; font-weight: 500; color: var(--ink-soft); padding: 7px 16px 7px 0; white-space: nowrap; }
.qtable tbody td { text-align: right; font-family: var(--font-mono); font-weight: 600; color: var(--ink); padding: 7px 0 7px 16px; }
.qtable tbody td:nth-child(2) { color: var(--rda-navy); } .qtable tbody td:nth-child(3) { color: var(--rda-red); }
.qtable tbody td:last-child { color: var(--ink); }
.qtable tbody tr + tr th, .qtable tbody tr + tr td { border-top: 1px solid var(--rule); }
.qnote { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0; line-height: 1.5; }

.cta { margin-top: 32px; background: var(--surface-dark); color: #fff; border-radius: var(--radius-xl, 14px); padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta .eyebrow { color: #fff; opacity: .7; } .cta h2 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.cta p { margin: 0; color: var(--ink-on-dark-soft); font-size: var(--fs-sm, 15px); max-width: 640px; } .cta em { color: #fff; }
.btn { display: inline-block; background: var(--rda-red); color: #fff; text-decoration: none; font-weight: 600; font-size: var(--fs-sm, 15px); padding: 13px 24px; border-radius: var(--radius-sm, 4px); white-space: nowrap; transition: .15s; }
.btn:hover { background: var(--rda-red-dark); transform: translateY(-1px); }
.seealso { margin-top: 22px; font-size: var(--fs-sm, 15px); color: var(--ink-muted); }
.seealso a { color: var(--rda-red); text-decoration: none; font-weight: 500; } .seealso a:hover { text-decoration: underline; }
.seealso-sep { color: var(--rule-blue); margin: 0 6px; }
.disclaimer { margin-top: 20px; font-size: 12.5px; color: var(--ink-faint); max-width: 820px; }
body.embed .appbar, body.embed .lede, body.embed .cta, body.embed .seealso, body.embed .disclaimer { display: none; }
body.embed .wrap { padding-top: 18px; } body.embed .inputs { position: static; }

/* ---- Skip link. Every generated page on reddooranalytics.se has one; these six standalone
   apps did not, so a keyboard user had to tab the whole control panel to reach the content.
   Same geometry and tokens as the site's own rule so it behaves identically. ---- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -120px;
  z-index: 200;
  background: var(--rda-navy, #152D49);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 16px; outline: 2px solid var(--rda-red, #FA0036); outline-offset: 2px; }

/* ⚠ THE PAGE MARGIN ON A PHONE (2026-09-23). --gutter comes from the design tokens at 60px, a
   desktop measure, and nothing here narrowed it: on a 390px phone the page kept 60px either side,
   the cards were left 224px inside, and the tables, tab rows and selects inside them ran off the
   screen. These are the steps reddooranalytics.se itself uses, so a tool opened from the site
   keeps its margins. The tool's name beside the wordmark goes too — at that width it wrapped one
   word to a line, and the page's heading names the tool anyway. */
@media (max-width: 900px) { :root { --gutter: 40px; } }
@media (max-width: 600px) { :root { --gutter: 22px; } .appbar-tag { display: none; } }
/* the numbers table's row labels were held on one line, with 16px before every figure: 14px too
   wide for a 390px phone even with the narrower margin. On a phone the labels wrap instead. */
@media (max-width: 600px) {
  .qtable tbody th { white-space: normal; padding-right: 10px; }
  .qtable thead th, .qtable tbody td { padding-left: 10px; }
}