/* RDA sample-size calculator — 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; }
.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: 720px; margin-bottom: 28px; }
.lede h1 {
  font-size: clamp(34px, 5vw, 52px); line-height: 1.05; font-weight: 600;
  letter-spacing: -0.02em; margin: 0 0 16px;
}
.lede .deck { font-size: var(--fs-lead, 22px); color: var(--ink-muted); margin: 0; }

/* ---- tabs ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); padding-bottom: 0; }
.tab {
  appearance: none; border: 1px solid transparent; border-bottom: none; background: transparent;
  font-family: inherit; cursor: pointer; padding: 12px 18px; border-radius: 10px 10px 0 0;
  color: var(--ink-muted); display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start;
  position: relative; top: 1px; transition: background .18s, color .18s;
}
.tab:hover { color: var(--ink); background: var(--surface-panel); }
.tab.on { color: var(--ink); background: var(--surface); border-color: var(--rule); }
.tab.on::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rda-red); border-radius: 3px 3px 0 0; }
.tab-label { font-size: var(--fs-body, 16px); font-weight: 600; letter-spacing: -0.01em; }
.tab-tag { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.tab.locked .tab-tag, .tab.accent .tab-tag { color: var(--rda-red); font-weight: 600; }

/* ---- grid ---- */
.grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

.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; }

/* ---- inputs ---- */
.inputs { position: sticky; top: 16px; }
.solvefor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.solve-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin-right: 4px; width: 100%; }
.seg {
  appearance: none; font-family: inherit; cursor: pointer; font-size: 13px; font-weight: 500;
  padding: 7px 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); }
.seg.on { background: var(--rda-navy); border-color: var(--rda-navy); color: #fff; }

.field { margin-bottom: 16px; }
.field-label { display: block; font-size: var(--fs-sm, 15px); font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; }
.field-input { display: block; }
.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); transition: border-color .15s; -moz-appearance: textfield;
}
select.input { cursor: pointer; }
.input:focus { outline: none; border-color: var(--rda-red); }

/* brand-skinned range slider */
.slider { width: 100%; margin: 10px 0 2px; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px;
  background: var(--surface-blue); 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; }
.note { font-size: 13px; color: var(--ink-faint); margin: 6px 0 0; }

/* ---- results ---- */
.results { display: grid; gap: 18px; }
.headline { background: linear-gradient(180deg, var(--surface), var(--surface-panel)); }
.bignum {
  font-family: var(--font-mono); font-size: clamp(40px, 7vw, 64px); font-weight: 600;
  color: var(--ink); line-height: 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 12px;
}
.bignum-unit { font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.headline .sub { margin: 12px 0 0; font-size: var(--fs-sm, 15px); color: var(--ink-muted); }
.err { color: var(--rda-red); margin: 0; }

/* ---- chart ---- */
.curve { width: 100%; height: auto; display: block; }
.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-blue); stroke-width: 2.5; stroke-linejoin: round; }
.ch-line2 { fill: none; stroke: var(--ink-muted); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linejoin: round; }
.ch-line3 { fill: none; stroke: #1c7c4a; stroke-width: 2; stroke-linejoin: round; }
.ch-true { fill: none; stroke: var(--rda-red); stroke-width: 2.5; stroke-linejoin: round; }
.ch-ref { stroke: var(--rule-blue); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-guide { stroke: var(--rda-red); stroke-width: 1; stroke-dasharray: 4 3; opacity: .8; }
.ch-point { fill: var(--rda-red); stroke: #fff; stroke-width: 2; }
.ch-legend { fill: var(--ink-muted); font-size: 11px; font-family: var(--font-sans); }

/* ---- reproduce code + methods text ---- */
.methodstext, .repro { padding: 0; }   /* zero the card default so summaries align with Assumptions */
.methodstext > summary, .repro > summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: var(--fs-sm, 15px);
  color: var(--ink-soft); list-style: none;
}
.methodstext > summary::-webkit-details-marker, .repro > summary::-webkit-details-marker { display: none; }
.methodstext > summary::before, .repro > summary::before { content: "+ "; color: var(--rda-red); font-weight: 700; }
.methodstext[open] > summary::before, .repro[open] > summary::before { content: "– "; }
.mt-body { padding: 0 22px 20px; }
.mt-body p { font-size: var(--fs-sm, 15px); color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; }
.repro-body { padding: 0 22px 20px; }
.repro-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.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; }
.action.ghost.mt-copy, .action.ghost.repro-copy { font-size: 12px; padding: 7px 14px; }

/* ---- merlin showcase ---- */
.merlin-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--rda-red); background: var(--accent-tint);
  border: 1px solid var(--rule-blue); border-radius: var(--radius-pill, 999px); padding: 6px 14px;
}
.baseline-spark { width: 100%; max-width: 320px; height: auto; display: block; margin: 8px 0 2px; }
.scenario-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.scenario-seg .seg { flex: 1; min-width: 120px; text-align: center; }

/* ---- table ---- */
.sstable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sstable th, .sstable td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--rule); }
.sstable thead th { color: var(--ink-faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.sstable tbody th { text-align: left; color: var(--ink-soft); font-weight: 600; font-family: var(--font-mono); }
.sstable td { font-family: var(--font-mono); color: var(--ink); }
.sstable tbody tr:hover td, .sstable tbody tr:hover th { background: var(--surface-panel); }
.table-unit { font-size: 12px; color: var(--ink-faint); margin: 8px 0 0; }

/* ---- assumptions ---- */
.assumptions { padding: 0; }
.assumptions > summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: var(--fs-sm, 15px); color: var(--ink-soft);
  list-style: none;
}
.assumptions > summary::-webkit-details-marker { display: none; }
.assumptions > summary::before { content: "+ "; color: var(--rda-red); font-weight: 700; }
.assumptions[open] > summary::before { content: "– "; }
.assumptions #assumptions { padding: 0 22px 20px; }
.assumptions ul { margin: 0 0 12px; padding-left: 18px; }
.assumptions li { font-size: 14px; color: var(--ink-soft); margin-bottom: 4px; }
.assumptions .formula { font-size: 13px; color: var(--ink-muted); background: var(--surface-panel); border-left: 3px solid var(--rule-blue); padding: 10px 12px; border-radius: 4px; margin: 0 0 10px; }
.assumptions .ref { font-size: 12px; color: var(--ink-faint); margin: 0; }
.locked-blurb { font-size: var(--fs-sm, 15px); color: var(--ink-soft); line-height: 1.55; }

/* ---- 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: 620px; }
.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: background .15s, transform .15s;
}
.btn:hover { background: var(--rda-red-dark); transform: translateY(-1px); }

/* The see-also row shipped as markup with no rules behind it: the calculator carries
   class="seealso" and class="seealso-sep" like the other five tools, but calc.css never
   gained the block, so the row rendered as 19px --ink body copy with underlined links
   while everywhere else it is a 15px --ink-muted line of red, unlaid links. Copied
   verbatim from km.css so all six read the same. */
.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: 28px; font-size: 12.5px; color: var(--ink-faint); max-width: 760px; }

/* ---- results action bar ---- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.action {
  appearance: none; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: var(--radius-sm, 4px); border: 1px solid var(--rda-red);
  background: var(--rda-red); color: #fff; transition: background .15s, transform .15s, border-color .15s, color .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); }

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

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

/* ---- print / PDF report ---- */
#print-report { display: none; }
@media print {
  body > *:not(#print-report), .modal-overlay { display: none !important; }
  #print-report { display: block; color: #111; font-family: var(--font-sans); padding: 0; }
  .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: #555; }
  .pr-title { font-size: 26px; font-weight: 600; margin: 20px 0 4px; letter-spacing: -0.01em; }
  .pr-sub { font-size: 13px; color: #555; margin: 0 0 18px; text-transform: uppercase; letter-spacing: 0.08em; }
  .pr-result { background: #f4f7fb; border-left: 4px solid var(--rda-red); padding: 16px 18px; border-radius: 6px; margin-bottom: 20px; }
  .pr-big { font-family: var(--font-mono); font-size: 38px; font-weight: 600; }
  .pr-big span { font-family: var(--font-sans); font-size: 15px; color: #555; }
  .pr-resub { font-size: 13px; color: #444; margin-top: 6px; }
  .pr-h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rda-red); margin: 18px 0 8px; }
  .pr-list { margin: 0; padding-left: 18px; }
  .pr-list li { font-size: 13px; margin-bottom: 4px; }
  .pr-formula { font-size: 12.5px; background: #f4f7fb; padding: 10px 12px; border-radius: 4px; margin: 0 0 8px; }
  .pr-ref { font-size: 12px; color: #555; margin: 0; }
  .pr-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
  .pr-table th, .pr-table td { border-bottom: 1px solid #ddd; padding: 6px 8px; text-align: right; }
  .pr-table thead th { color: #555; }
  .pr-table tbody th { text-align: left; font-family: var(--font-mono); }
  .pr-table td { font-family: var(--font-mono); }
  .pr-cap { font-size: 11px; color: #777; margin: 6px 0 0; }
  .pr-foot { margin-top: 26px; padding-top: 12px; border-top: 1px solid #ddd; font-size: 11px; color: #777; }
}

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