/* RDA partitioned-survival explorer — app styles. Tokens come from assets/tokens/*; chart-class
   vocabulary (ch-*) is shared with the survival-DGM tool and the sample-size calculator. */

* { 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: 780px; 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: 380px 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; }

/* ---- template picker (shares the model-picker look) ---- */
.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; }

/* ---- state diagram ---- */
.diagram { width: 100%; height: auto; display: block; margin-bottom: 6px; }
.dg-box { fill: var(--surface-panel); stroke: var(--rule-blue); stroke-width: 1.5; }
.dg-box.absorbing { fill: var(--accent-tint, #fdecec); stroke: var(--rda-red); }
.dg-label { fill: var(--ink); font-size: 11px; font-weight: 600; font-family: var(--font-sans); text-anchor: middle; }
.dg-arc { fill: none; stroke: var(--rda-navy); stroke-width: 1.6; }
.dg-arrow { fill: var(--rda-navy); }

/* ---- timescale (Markov / semi-Markov) ---- */
.timescale { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.ts-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.ts-seg { display: inline-flex; gap: 4px; }
.ts-btn { appearance: none; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 11px; border: 1px solid var(--rule-blue); background: var(--surface); color: var(--ink-soft); border-radius: var(--radius-sm, 4px); }
.ts-btn.on { background: var(--rda-navy); border-color: var(--rda-navy); color: #fff; }
.ts-note { font-size: 12px; color: var(--ink-faint); margin: 2px 0 0; line-height: 1.45; flex-basis: 100%; }

/* ---- transition editors ---- */
.trans { border: 1px solid var(--rule); border-radius: var(--radius-sm, 4px); padding: 12px 13px; margin-bottom: 12px; background: var(--surface); }
.trans-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.trans-name { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.trans-name .swatch { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 7px; }
.fam-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); }
.fam-select:focus { outline: none; border-color: var(--rda-red); }

.field { margin-bottom: 11px; } .field:last-child { margin-bottom: 2px; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.field-label .sub { font-size: 11.5px; color: var(--ink-faint); font-weight: 400; margin-left: 6px; }
.field-num { width: 84px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); text-align: right; padding: 5px 7px; 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: 8px 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: 15px; height: 15px; border-radius: 50%; background: var(--rda-red); cursor: pointer; border: 2px solid #fff; box-shadow: var(--shadow-xs); }
.slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--rda-red); cursor: pointer; border: 2px solid #fff; }

/* ---- treatment effect + HTA controls ---- */
.card-head.spread { display: flex; align-items: center; justify-content: space-between; }
.switch { font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.switch input { accent-color: var(--rda-red); }
.eff-controls, .hta-controls { display: grid; gap: 9px; }
.eff-row, .hta-row { display: grid; grid-template-columns: 1fr 84px; align-items: center; gap: 10px; }
.eff-row .lab, .hta-row .lab { font-size: 13px; color: var(--ink-soft); }
.eff-row .lab .swatch { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 7px; }
.hta-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin: 6px 0 1px; }
.hta-grid { display: grid; grid-template-columns: 1fr 84px 84px; align-items: center; gap: 8px 10px; }
.hta-grid .h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); text-align: right; }
.hta-grid .h:first-child { text-align: left; }
.hta-grid .lab, .hta-foot .lab { font-size: 13px; color: var(--ink-soft); }
.hta-foot { display: grid; grid-template-columns: 1fr 84px; align-items: center; gap: 10px; margin-top: 4px; }

.horizon { display: flex; align-items: center; gap: 18px; }
.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: 70px; 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:disabled { opacity: .5; }
.mini:focus { outline: none; border-color: var(--rda-red); }

/* ---- results ---- */
.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.on { background: var(--rda-navy); border-color: var(--rda-navy); color: #fff; }
.curve { width: 100%; height: auto; display: block; }
.plotcap { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }

/* chart classes (shared 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-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.4; stroke-linejoin: round; }
.ch-line4 { fill: none; stroke: #4A8FE6;         stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 6 3; }
.ch-line5 { fill: none; stroke: #5A6A82;         stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 2 3; }
.ch-legend { fill: var(--ink-muted); font-size: 11px; font-family: var(--font-sans); }
.ch-dash { stroke-dasharray: 5 4; }

/* ---- cost-effectiveness card ---- */
.ce-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 18px; margin-bottom: 16px; }
.ce-stat { display: flex; flex-direction: column; gap: 3px; }
.ce-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.ce-val { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.ce-val.icer { color: var(--rda-red); }
.ce-verdict { font-size: 13.5px; color: var(--ink-soft); background: var(--surface-panel); border-left: 3px solid var(--rda-navy); padding: 9px 12px; border-radius: 4px; line-height: 1.5; margin: 0 0 14px; }
.ce-verdict.good { border-left-color: var(--rda-blue); }
.ce-verdict.bad { border-left-color: var(--rda-red); }
.ceplane { width: 100%; height: auto; display: block; }
.cp-axis { stroke: var(--ink-faint); stroke-width: 1; }
.cp-grid { stroke: var(--rule); stroke-width: 1; }
.cp-wtp { stroke: var(--rda-navy); stroke-width: 1.4; stroke-dasharray: 5 4; }
.cp-pt { fill: var(--rda-red); stroke: #fff; stroke-width: 1.5; }
.cp-cloud { fill: var(--rda-blue); }
.cp-lab { fill: var(--ink-faint); font-size: 10.5px; font-family: var(--font-mono); }
.cp-axlab { fill: var(--ink-muted); font-size: 11px; font-family: var(--font-sans); text-anchor: middle; }

/* PSA sub-panel */
.psa { border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 14px; }
.psa-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.psa-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rda-red); font-weight: 600; margin-right: auto; }
.psa-summary { font-size: 13.5px; color: var(--ink-soft); margin: 2px 0 8px; line-height: 1.5; }
.psa-summary b { color: var(--rda-red); font-size: 16px; }
.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(--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: .6; cursor: default; transform: none; }

/* stacked-area occupancy bands + legend */
.area-band { stroke: #fff; stroke-width: 1; }
.area-sep { stroke: #fff; stroke-width: 1; fill: none; }
.lgnd { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; }
.lgnd-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.lgnd-sw { width: 14px; height: 10px; border-radius: 2px; flex: none; }

/* ---- 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 th .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 8px; }
.qtable tbody td { text-align: right; font-family: var(--font-mono); font-weight: 600; color: var(--ink); padding: 7px 0 7px 16px; }
.qtable tbody tr + tr th, .qtable tbody tr + tr td { border-top: 1px solid var(--rule); }
.qtable tfoot th { text-align: left; font-weight: 600; color: var(--ink); padding: 9px 16px 0 0; border-top: 2px solid var(--rule-blue); }
.qtable tfoot td { text-align: right; font-family: var(--font-mono); font-weight: 700; color: var(--rda-red); padding: 9px 0 0 16px; border-top: 2px solid var(--rule-blue); }
.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: 12.5px; line-height: 1.55; }
.repro-pre code { font-family: inherit; white-space: pre; }

/* ---- 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 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 .seealso, body.embed .disclaimer { display: none; }
body.embed .wrap { padding-top: 18px; }
body.embed .inputs { position: static; }

/* ---- partitioned-survival additions ---- */
.ep-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--rda-red); background: var(--accent-tint, #fdecec); border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }

.coherence { margin: 6px 0 2px; display: grid; gap: 8px; }
.coh-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); background: var(--accent-tint, #fdecec); border: 1px solid var(--rda-red); border-radius: var(--radius-sm, 4px); padding: 9px 11px; }
.coh-ico { color: var(--rda-red); font-size: 14px; line-height: 1; flex: none; }
.coh-seg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coh-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.coh-region { fill: var(--rda-red); fill-opacity: 0.07; }
.coh-region-lab { fill: var(--rda-red); font-size: 10.5px; font-family: var(--font-mono); opacity: 0.8; }

/* per-state probability lines (occupancy 'prob' view) */
.ps-pf, .ps-pd, .ps-dead { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.ps-pf { stroke: #6F97D8; } .ps-pd { stroke: #2C4360; } .ps-dead { stroke: #FA0036; }

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