/* RDA km-reconstruct — app styles. Tokens from assets/tokens/*; ch-* shared chart 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: 820px; margin-bottom: 24px; }
.lede h1 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.07; 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); }

/* stepper */
.stepper { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule-blue); border-radius: var(--radius-sm, 4px); background: var(--surface); color: var(--ink-soft); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.step .n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-blue, #dbe3f0); color: var(--ink-soft); font-size: 12px; }
.step.on { background: var(--rda-navy); border-color: var(--rda-navy); color: #fff; }
.step.on .n { background: var(--rda-red); color: #fff; }
.step.done .n { background: #1c7c4a; color: #fff; }
.step.disabled { opacity: .5; cursor: default; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 980px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg, 10px); padding: 22px; box-shadow: var(--shadow-xs); }
.card-head { margin-bottom: 12px; } .card-head .eyebrow { margin: 0; }

/* workbench / canvas */
.wb-canvaswrap { position: relative; }
.wb-canvas { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: var(--radius-sm, 4px); background: var(--surface-panel); cursor: crosshair; }
.wb-hint { font-size: 12.5px; color: var(--ink-faint); margin: 8px 0 0; line-height: 1.45; }
#stage-controls { margin-top: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.action { appearance: none; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-sm, 4px); border: 1px solid var(--rda-red); background: var(--rda-red); color: #fff; transition: .15s; }
.action:hover { background: var(--rda-red-dark); transform: translateY(-1px); }
.action.ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--rule-blue); }
.action.ghost:hover { color: var(--rda-red); border-color: var(--rda-red); }
.action:disabled { opacity: .5; cursor: default; transform: none; }
.filelabel { display: inline-block; }
.filelabel input { display: none; }

/* calibration panel */
.calib-grid { display: grid; gap: 8px; }
.calib-row { display: grid; grid-template-columns: 120px 1fr 96px; align-items: center; gap: 10px; }
.calib-row .lab { font-size: 13px; color: var(--ink-soft); }
.pickbtn { appearance: none; font-family: inherit; font-size: 12.5px; cursor: pointer; padding: 6px 10px; border: 1px solid var(--rule-blue); border-radius: var(--radius-sm, 4px); background: var(--surface); color: var(--ink-soft); }
.pickbtn.armed { background: var(--rda-navy); border-color: var(--rda-navy); color: #fff; }
.pickbtn.set { border-color: #1c7c4a; color: #1c7c4a; }
.num { width: 90px; font-family: var(--font-mono); font-size: 13px; text-align: right; padding: 6px 8px; border: 1px solid var(--rule-blue); border-radius: var(--radius-sm, 4px); background: var(--surface); }
.num:focus { outline: none; border-color: var(--rda-red); }
.opt { font-size: 13px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.opt input { accent-color: var(--rda-red); }

/* at-risk table */
.atrisk { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.atrisk th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; padding: 0 8px 6px 0; }
.atrisk td { padding: 2px 8px 2px 0; }
.atrisk input { width: 80px; font-family: var(--font-mono); font-size: 12.5px; text-align: right; padding: 5px 7px; border: 1px solid var(--rule-blue); border-radius: var(--radius-sm, 4px); background: var(--surface); }
.atrisk .del { border: none; background: none; color: var(--ink-faint); cursor: pointer; font-size: 16px; }
.atrisk .del:hover { color: var(--rda-red); }

/* QC chips */
.qc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { font-size: 12px; padding: 5px 10px; border-radius: 20px; background: var(--surface-panel); color: var(--ink-soft); border: 1px solid var(--rule); }
.chip.good { background: #eaf5ee; color: #1c7c4a; border-color: #bfe0cb; }
.chip.warn { background: var(--accent-tint, #fdecec); color: var(--rda-red); border-color: #f4c4c8; }
.note-flag { font-size: 12.5px; color: var(--ink-soft); background: var(--accent-tint, #fdecec); border-left: 3px solid var(--rda-red); padding: 8px 10px; border-radius: 4px; margin-top: 10px; line-height: 1.45; }

/* results */
.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.results > * { min-width: 0; }
.placeholder { color: var(--ink-muted); font-size: var(--fs-sm, 15px); }
.placeholder p { margin: 0; }
.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-val { font-family: var(--font-mono); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; }
.headline .hl-sub { font-size: var(--fs-sm, 15px); color: var(--ink-on-dark-soft, #c7d2e0); line-height: 1.5; margin: 8px 0 0; }
.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 13px; 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; }
.curve { width: 100%; height: auto; display: block; }
.plotcap { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }

/* chart vocabulary */
.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-km { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linejoin: round; }
.ch-line  { fill: none; stroke: var(--rda-red);  stroke-width: 2.2; stroke-linejoin: round; }
.ch-line2 { fill: none; stroke: var(--rda-navy); stroke-width: 2.2; stroke-linejoin: round; }
.ch-line3 { fill: none; stroke: var(--rda-blue); stroke-width: 2; stroke-linejoin: round; }
.ch-line4 { fill: none; stroke: #1c7c4a; stroke-width: 2; stroke-linejoin: round; }
.ch-line5 { fill: none; stroke: #b8860b; stroke-width: 2; stroke-linejoin: round; }
.ch-dash { stroke-dasharray: 5 4; }
.ch-bandline { fill: none; stroke: var(--rda-red); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .5; }
.ch-ref { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; stroke-dasharray: 5 4; }
.ch-legend { fill: var(--ink-muted); font-size: 11px; font-family: var(--font-sans); }

/* selection table */
.seltable { width: 100%; border-collapse: collapse; font-size: 13px; }
.seltable th { text-align: right; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 600; padding: 0 0 8px 14px; }
.seltable th:first-child { text-align: left; padding-left: 0; }
.seltable td { text-align: right; font-family: var(--font-mono); padding: 6px 0 6px 14px; color: var(--ink); }
.seltable td:first-child { text-align: left; font-family: var(--font-sans); color: var(--ink-soft); }
.seltable tr.best td { background: var(--surface-blue, #eef2f9); }
.seltable tr.best td:first-child { font-weight: 600; color: var(--rda-red); }
.seltable .sw { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 8px; }
.seltable tbody tr { cursor: pointer; }
.qnote { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0; line-height: 1.5; }

/* export */
.export { padding: 0; }
.export > summary { cursor: pointer; padding: 20px 22px; font-weight: 600; font-size: var(--fs-sm, 15px); color: var(--ink-soft); list-style: none; }
.export > summary::-webkit-details-marker { display: none; }
.export > summary::before { content: "+ "; color: var(--rda-red); font-weight: 700; }
.export[open] > summary::before { content: "– "; }
.export-body { padding: 0 22px 20px; }
.repro-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.repro-tabs { display: inline-flex; gap: 4px; }
.rtab { appearance: none; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 14px; border: 1px solid var(--rule-blue); background: var(--surface); color: var(--ink-soft); border-radius: var(--radius-sm, 4px); }
.rtab.on { background: var(--rda-navy); border-color: var(--rda-navy); color: #fff; }
.repro-pre { margin: 0; background: var(--surface-dark); color: #e7ecf3; border-radius: var(--radius-md, 8px); padding: 16px 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; }
.repro-pre code { font-family: inherit; white-space: pre; }
.cardactions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* CTA + footer */
.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: 860px; }

/* ---- 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; } }