/* RDA survival DGM explorer — app styles. Tokens come from assets/tokens/*. */

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

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

/* ---- layout ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter, 32px) 80px; }
.lede { max-width: 760px; 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 h1 em { font-style: normal; }
.lede .deck { font-size: var(--fs-lead, 20px); color: var(--ink-muted); margin: 0; }
.lede .deck em { color: var(--ink); }

/* minmax(0,1fr) + min-width:0 stop a wide child (e.g. the export <pre>) from blowing
   out the flexible track — without it the column grows to fit the longest code line */
.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); }
  /* single column: let the inputs flow naturally instead of sticky + inner scroll */
  .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.spread { display: flex; align-items: center; justify-content: space-between; }
.card-head .eyebrow { margin: 0; }
.params-head { margin-top: 22px; }

/* ---- inputs column ---- */
.inputs { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }

/* model picker */
.modelpicker { display: grid; gap: 4px; }
.mp-group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin: 10px 0 2px; }
.mp-group:first-child { margin-top: 0; }
.mp-item {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; 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-item.soon { cursor: default; opacity: 0.65; }
.mp-item.soon:hover { background: transparent; }
.mp-name { font-size: var(--fs-sm, 15px); font-weight: 600; color: var(--ink); }
.mp-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-left: auto; }
.mp-item.soon .mp-tag { color: var(--rda-red); opacity: .8; }

.blurb { font-size: 13px; color: var(--ink-muted); margin: 12px 0 0; line-height: 1.5; }

/* parameter controls */
.field { margin-bottom: 14px; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.field-label { font-size: var(--fs-sm, 15px); 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 {
  width: 88px; 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 { 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; }

.notes { margin-top: 6px; display: grid; gap: 8px; }

/* ---- treatment effect ---- */
.eff-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm, 15px); color: var(--ink-soft); cursor: pointer; }
.eff-toggle input { accent-color: var(--rda-red); }
.eff-controls { margin-top: 12px; }
.eff-controls .note { margin-top: 4px; }
.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; line-height: 1.45;
}
.soon-panel { font-size: var(--fs-sm,15px); color: var(--ink-soft); line-height: 1.55; }

/* ---- Royston–Parmar panel ---- */
.rp-block { margin-bottom: 16px; }
.rp-lab { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 7px; }
.rp-lab .rp-sub { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ink-ghost, var(--ink-faint)); margin-left: 6px; }
.scaleseg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.scaleseg .seg { padding: 6px 11px; }
.scaleseg .seg.on { background: var(--rda-navy); border-color: var(--rda-navy); color: #fff; }
.rp-strip { width: 100%; height: 34px; display: block; touch-action: none; margin-bottom: 6px; }
.rp-axis { stroke: var(--rule-blue); stroke-width: 2; }
.rp-knot { stroke: #fff; stroke-width: 1.5; }
.rp-bound { fill: var(--ink-muted); }
.rp-int { fill: var(--rda-red); cursor: ew-resize; }
.rp-range { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint); }
.rp-range label { display: inline-flex; align-items: center; gap: 6px; }
#rp-gammas .field { margin-bottom: 10px; }
.rp-shape { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 6px; }
.rp-shape > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--rda-red); list-style: none; margin-bottom: 8px; }
.rp-shape > summary::-webkit-details-marker { display: none; }
.rp-shape > summary::before { content: "+ "; font-weight: 700; }
.rp-shape[open] > summary::before { content: "– "; }
.tgt-row { display: grid; grid-template-columns: 58px 1fr 34px; align-items: center; gap: 8px; margin-bottom: 6px; }
.tgt-t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.tgt-s { margin: 0; }
.tgt-v { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); text-align: right; }
.rp-shapebtns { display: flex; gap: 8px; margin: 10px 0 2px; }
.ch-target { fill: #fff; stroke: var(--rda-red); stroke-width: 2; }

/* ---- results column ---- */
/* explicit minmax(0,1fr) column + min-width:0 cards so a wide child (export <pre>)
   scrolls internally instead of stretching the column past its track */
.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.results > * { min-width: 0; }

.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 .ft-sub { font-weight: 400; font-size: 11px; color: var(--ink-faint); margin-left: 5px; }
.fntab.on { background: var(--rda-navy); border-color: var(--rda-navy); color: #fff; }
.fntab.on .ft-sub { color: rgba(255,255,255,.7); }
.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); }
.mini { width: 64px; font-family: var(--font-mono); font-size: 13px; text-align: right;
  padding: 5px 7px; border: 1px solid var(--rule-blue); border-radius: var(--radius-sm,4px); background: var(--surface); -moz-appearance: textfield; }
.mini:focus { outline: none; border-color: var(--rda-red); }
.seg {
  appearance: none; font-family: inherit; cursor: pointer; font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--radius-sm, 4px); border: 1px solid var(--rule-blue);
  background: var(--surface); color: var(--ink-soft); transition: .15s;
}
.seg:hover { border-color: var(--rda-red); color: var(--rda-red); }

.curve { width: 100%; height: auto; display: block; }
.ch-hguide { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-tip { position: fixed; z-index: 60; background: var(--rda-navy); color: #fff; font-family: var(--font-mono);
  font-size: 12px; line-height: 1.55; padding: 7px 10px; border-radius: 6px; pointer-events: none;
  box-shadow: 0 4px 16px rgba(21, 45, 73, 0.28); }
.chart-tip b { font-family: var(--font-sans); }
.chart-tip .tip-k { font-family: var(--font-sans); font-weight: 600; }
.plotcap { font-size: 12.5px; color: var(--ink-faint); margin: 8px 0 0; }
.cardactions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cardactions .action { font-size: 13px; padding: 8px 14px; }

/* ---- quantities readout ---- */
.quants { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 18px; }
.quant { display: flex; flex-direction: column; gap: 3px; }
.q-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.q-val { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.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; }
.qtable thead th:first-child { text-align: left; }
.qtable tbody th { text-align: left; font-weight: 500; color: var(--ink-soft); padding: 6px 16px 6px 0; white-space: nowrap; }
.qtable tbody td { text-align: right; font-family: var(--font-mono); font-weight: 600; color: var(--ink); padding: 6px 0; }
.qtable tbody td:nth-child(2) { color: var(--rda-navy); }   /* control */
.qtable tbody td:last-child { color: var(--rda-red); }       /* treatment */
.qtable tbody tr + tr th, .qtable tbody tr + tr td { border-top: 1px solid var(--rule); }
.quants.two-arm { display: block; }
.qsummary { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }

/* chart classes (shared vocabulary with the calculator) */
.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;   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; stroke-dasharray: 6 3; }
.ch-line5 { fill: none; stroke: #b8860b;         stroke-width: 2;   stroke-linejoin: round; stroke-dasharray: 2 3; }
.ch-km { fill: none; stroke: var(--rda-navy); stroke-width: 1.4; stroke-linejoin: round; opacity: 0.8; }
.ch-km2 { fill: none; stroke: var(--rda-red); stroke-width: 1.4; stroke-linejoin: round; opacity: 0.8; }
.ch-bar { fill: var(--rda-navy); opacity: 0.26; stroke: #fff; stroke-width: 0.5; }
.ch-bar2 { fill: var(--rda-red); opacity: 0.22; stroke: #fff; stroke-width: 0.5; }
.ch-ref { stroke: var(--rule-blue); stroke-width: 1; stroke-dasharray: 4 3; }
.ch-plateau { 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); }

/* ---- compare / overlays ---- */
.overlays { display: grid; gap: 8px; }
.overlay-empty { font-size: 13px; color: var(--ink-faint); }
.ov {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 4px); background: var(--surface-panel);
}
.ov-swatch { width: 22px; height: 3px; border-radius: 2px; flex: none; }
.ov-text { font-size: 13px; color: var(--ink-soft); }
.ov-text b { color: var(--ink); font-weight: 600; }
.ov-mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.ov-x { margin-left: auto; border: none; background: none; color: var(--ink-faint); cursor: pointer; font-size: 18px; line-height: 1; }
.ov-x:hover { color: var(--rda-red); }

/* ---- export ---- */
.export { padding: 0; }
.export > summary { cursor: pointer; padding: 18px 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: 12.5px; line-height: 1.55; }
.repro-pre code { font-family: inherit; white-space: pre; }
.note { font-size: 13px; color: var(--ink-faint); margin: 10px 0 0; }
.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 { background: var(--surface-panel); color: var(--rda-red); border-color: var(--rda-red); }

/* ---- CTA ---- */
.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 em { color: inherit; }
.seealso-sep { color: var(--rule-blue); margin: 0 6px; }

.disclaimer { margin-top: 20px; font-size: 12.5px; color: var(--ink-faint); max-width: 820px; }

/* ---- embed mode (?embed=1) ---- */
body.embed .appbar, body.embed .lede, body.embed .cta, body.embed .disclaimer { display: none; }
body.embed .wrap { padding-top: 18px; }
body.embed .inputs { position: static; }

/* ---- email-capture modal ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(21,45,73,0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: var(--surface); border-radius: var(--radius-xl, 14px); padding: 32px 32px 26px; max-width: 480px; width: 100%; position: relative; box-shadow: var(--shadow-lg, 0 12px 40px rgba(21,45,73,0.18)); }
.modal-x { position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 26px; line-height: 1; color: var(--ink-faint); cursor: pointer; }
.modal-x:hover { color: var(--ink); }
.modal-h { margin: 4px 0 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.modal-p { margin: 0 0 18px; font-size: var(--fs-sm, 15px); color: var(--ink-muted); }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-form .input { width: 100%; font-family: inherit; font-size: var(--fs-sm,15px); color: var(--ink); padding: 10px 12px; border: 1px solid var(--rule-blue); border-radius: var(--radius-sm,4px); background: var(--surface); }
.modal-form .input:focus { outline: none; border-color: var(--rda-red); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); line-height: 1.4; cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--rda-red); }
.modal-msg { font-size: 13px; color: var(--ink-muted); }
.modal-msg.err { color: var(--rda-red); }
.modal-msg.ok { color: #1c7c4a; }
.modal-form .btn { border: none; cursor: pointer; align-self: flex-start; }
.modal-fine { font-size: 12px; color: var(--ink-faint); margin: 14px 0 0; }

/* ---- print / save-as-PDF report (hidden on screen, shown when printing) ---- */
#print-report { display: none; }
@media print {
  body > *:not(#print-report), .modal-overlay { display: none !important; }
  #print-report { display: block; color: #16233a; font-family: var(--font-sans); }
  .pr-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--rda-red); padding-bottom: 12px; }
  .pr-date { font-size: 12px; color: #667; }
  .pr-title { font-size: 26px; font-weight: 600; margin: 20px 0 4px; letter-spacing: -0.01em; }
  .pr-sub { font-size: 13px; color: #556; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.06em; }
  .pr-blurb { font-size: 13px; color: #445; margin: 0 0 16px; max-width: 70ch; }
  .pr-cols { display: flex; gap: 32px; align-items: flex-start; }
  .pr-cols > div { flex: 1; }
  .pr-h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rda-red); margin: 16px 0 8px; }
  .pr-ptable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .pr-ptable th { text-align: left; color: #556; font-weight: 500; padding: 4px 10px 4px 0; vertical-align: top; white-space: nowrap; }
  .pr-ptable td { font-family: var(--font-mono); color: #16233a; padding: 4px 0; }
  .pr-eq { font-family: var(--font-mono); font-size: 12.5px; color: #16233a; padding: 3px 0; }
  .pr-note { font-size: 11.5px; color: #667; margin: 6px 0 0; }
  .pr-curves { display: flex; gap: 20px; break-inside: avoid; }
  .pr-curve { width: 50%; height: auto; }
  .pr-code { display: flex; gap: 16px; break-inside: avoid; }
  .pr-codecol { flex: 1; min-width: 0; }
  .pr-codetag { font-size: 11px; font-weight: 600; color: var(--rda-red); margin-bottom: 4px; }
  .pr-code pre { background: #f4f7fb; border: 1px solid #dbe3f0; border-radius: 6px; padding: 10px 12px; font-family: var(--font-mono); font-size: 9.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin: 0; }
  .pr-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid #dbe3f0; font-size: 11px; color: #778; }
  /* report chart colours (print) */
  .pr-curve .ch-frame { fill: none; stroke: #c8d2e3; }
  .pr-curve .ch-grid { stroke: #e7ecf3; }
  .pr-curve .ch-tick { fill: #889; font-size: 11px; font-family: var(--font-mono); }
  .pr-curve .ch-tick-y { text-anchor: end; } .pr-curve .ch-tick-x { text-anchor: middle; }
  .pr-curve .ch-axis { fill: #667; font-size: 12px; text-anchor: middle; }
  .pr-curve .ch-line { fill: none; stroke: var(--rda-red); stroke-width: 2.4; }
  .pr-curve .ch-line2 { fill: none; stroke: var(--rda-navy); stroke-width: 2.4; }
  .pr-curve .ch-line3 { fill: none; stroke: var(--rda-blue); stroke-width: 2.4; }
  .pr-curve .ch-legend { fill: #667; font-size: 11px; font-family: var(--font-sans); }
  .pr-ctable { width: auto; border-collapse: collapse; font-size: 12.5px; margin-top: 2px; }
  .pr-ctable thead th { text-align: right; font-size: 11px; color: #667; padding: 0 0 6px 24px; }
  .pr-ctable thead th:first-child { text-align: left; padding-left: 0; }
  .pr-ctable tbody th { text-align: left; color: #445; font-weight: 500; padding: 4px 24px 4px 0; }
  .pr-ctable tbody td { text-align: right; font-family: var(--font-mono); padding: 4px 0 4px 24px; }
}

/* ---- 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 four function tabs are one row of ~410px, which no phone has: they wrap to two rows there,
   keeping the words under each symbol rather than dropping them to fit */
@media (max-width: 600px) { .fntabs { flex-wrap: wrap; max-width: 100%; } .plotbar .opt { white-space: nowrap; } }