/* ============================================================================
   PI-RADS v2.1 Calculator
   Light palette on :root, dark overrides in both the media query and the
   [data-theme] attribute so the toggle wins in either direction.
   ========================================================================== */

:root {
  --bg:        #f4f6f8;
  --surface:   #ffffff;
  --surface-2: #f8fafb;
  --line:      #d9e0e6;
  --line-soft: #e8edf1;
  --text:      #16212b;
  --text-dim:  #5a6b79;
  --text-faint:#8494a1;
  --accent:    #1b6ec2;
  --accent-ink:#ffffff;
  --accent-soft:#e8f1fb;

  --low:  #1f8a54;
  --low-bg:  #e6f4ec;
  --mid:  #b1740a;
  --mid-bg:  #fdf2dd;
  --high: #c0392b;
  --high-bg: #fceceb;

  --pz: #2f7d9b;
  --tz: #7a5aa8;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16,32,45,.06), 0 6px 18px rgba(16,32,45,.05);
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0f151b;
    --surface:   #161e26;
    --surface-2: #1b242d;
    --line:      #2b3742;
    --line-soft: #232e38;
    --text:      #e6edf3;
    --text-dim:  #9fb0bd;
    --text-faint:#748694;
    --accent:    #4d9ee6;
    --accent-ink:#08131d;
    --accent-soft:#16283a;

    --low:  #4cc48a; --low-bg:  #12291f;
    --mid:  #e0a94a; --mid-bg:  #2c2313;
    --high: #f0776b; --high-bg: #2e1a19;

    --pz: #6bb6d3; --tz: #a98fd6;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  }
}

:root[data-theme="dark"] {
  --bg:        #0f151b;
  --surface:   #161e26;
  --surface-2: #1b242d;
  --line:      #2b3742;
  --line-soft: #232e38;
  --text:      #e6edf3;
  --text-dim:  #9fb0bd;
  --text-faint:#748694;
  --accent:    #4d9ee6;
  --accent-ink:#08131d;
  --accent-soft:#16283a;

  --low:  #4cc48a; --low-bg:  #12291f;
  --mid:  #e0a94a; --mid-bg:  #2c2313;
  --high: #f0776b; --high-bg: #2e1a19;

  --pz: #6bb6d3; --tz: #a98fd6;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
}

*, *::before, *::after { box-sizing: border-box; }

/* Any explicit display value beats the user-agent rule for [hidden], and most
   of the toggled elements here are flex or grid. Restore it once, centrally,
   rather than remembering to on each one. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -.01em; }
button, input, select { font: inherit; color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; z-index: 50; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- topbar -- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(14px, 3vw, 32px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.mark {
  flex: none;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 17px; letter-spacing: -.02em;
}
.brand-text h1 { font-size: 18px; line-height: 1.2; }
.brand-text p { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }

.topbar-actions { display: flex; align-items: center; gap: 12px; }
.privacy {
  font-size: 12px; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; white-space: nowrap;
}
@media (max-width: 720px) { .privacy { display: none; } }

/* --------------------------------------------------------------- buttons -- */
button.primary, button.ghost {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 13.5px; font-weight: 560;
  transition: background .12s, border-color .12s, color .12s;
}
button.primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
button.primary:hover { filter: brightness(1.08); }
button.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--line); }
button.ghost:hover { border-color: var(--text-faint); color: var(--text); }
button:focus-visible, input:focus-visible, select:focus-visible,
.report-out:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); text-decoration: underline; font-size: inherit;
}

/* ---------------------------------------------------------------- layout -- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: start;
  padding: 18px clamp(14px, 3vw, 32px) 32px;
  max-width: 1440px; margin: 0 auto;
}
.col-main, .col-side { display: grid; gap: 18px; min-width: 0; }
.col-side { position: sticky; top: 18px; }
@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .col-side { position: static; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 18px;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.panel-head h2 { font-size: 15px; }
.panel-head-actions { display: flex; align-items: center; gap: 8px; }
.hint { font-size: 12.5px; color: var(--text-faint); }

/* ---------------------------------------------------------------- fields -- */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
@media (max-width: 640px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.field { display: grid; gap: 5px; min-width: 0; }
.field > span:first-child { font-size: 12.5px; color: var(--text-dim); font-weight: 560; }
.field em { font-style: normal; color: var(--text-faint); font-weight: 400; }

.input-wrap { position: relative; display: block; }
.input-wrap input {
  width: 100%; padding: 8px 40px 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.input-wrap i {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 12px; color: var(--text-faint); pointer-events: none;
}
select {
  width: 100%; padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* -------------------------------------------------------------- readouts -- */
.readouts {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px; margin-top: 14px;
}
@media (max-width: 640px) { .readouts { grid-template-columns: 1fr; } }
.readout {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: grid; gap: 2px; align-content: start;
}
.readout-label { font-size: 12px; color: var(--text-dim); font-weight: 560; }
.readout-value { font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.readout-sub { font-size: 11.5px; color: var(--text-faint); }
.field-inline { align-self: end; }

.readout[data-band="low"]  { background: var(--low-bg);  border-color: color-mix(in srgb, var(--low) 30%, transparent); }
.readout[data-band="low"]  .readout-value { color: var(--low); }
.readout[data-band="mid"]  { background: var(--mid-bg);  border-color: color-mix(in srgb, var(--mid) 30%, transparent); }
.readout[data-band="mid"]  .readout-value { color: var(--mid); }
.readout[data-band="high"] { background: var(--high-bg); border-color: color-mix(in srgb, var(--high) 30%, transparent); }
.readout[data-band="high"] .readout-value { color: var(--high); }

.note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-dim); }
.note:empty { display: none; }

/* ------------------------------------------------------------------ tabs -- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; color: var(--text-dim);
}
.tab[aria-selected="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 580;
}
.tab .chip {
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; display: grid; place-items: center;
  background: var(--line); color: var(--text-dim);
}
.tab .chip[data-level="low"]  { background: var(--low);  color: #fff; }
.tab .chip[data-level="mid"]  { background: var(--mid);  color: #fff; }
.tab .chip[data-level="high"] { background: var(--high); color: #fff; }
.tab .x {
  border: 0; background: none; cursor: pointer;
  color: var(--text-faint); font-size: 15px; line-height: 1;
  padding: 0 2px; border-radius: 4px;
}
.tab .x:hover { color: var(--high); }

/* --------------------------------------------------------------- lesion -- */
.q { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.q:first-child { border-top: 0; padding-top: 0; }
.q-label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.q-label b { font-size: 13.5px; font-weight: 600; }
.q-label .tagline { font-size: 12px; color: var(--text-faint); }
.q-help { margin: 0 0 9px; font-size: 12.5px; color: var(--text-dim); }

.opts { display: grid; gap: 7px; }
.opts.row { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 560px) { .opts.row { grid-auto-flow: row; } }

.opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start;
  gap: 10px;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.opt:hover { border-color: var(--text-faint); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .key {
  font: 600 11px/16px var(--mono);
  min-width: 16px; height: 16px; text-align: center;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--text-faint); background: var(--surface);
  margin-top: 1px;
}
.opt .body { min-width: 0; }
.opt .body b { display: block; font-size: 13.5px; font-weight: 560; }
.opt .body small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.opt .score {
  font: 700 12px/1 var(--mono); color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px;
}
.opt:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.opt:has(input:checked) .key,
.opt:has(input:checked) .score { border-color: var(--accent); color: var(--accent); }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.zone-pick .opt:has(input:checked)[data-zone="pz"] { border-color: var(--pz); background: color-mix(in srgb, var(--pz) 12%, transparent); }
.zone-pick .opt:has(input:checked)[data-zone="tz"] { border-color: var(--tz); background: color-mix(in srgb, var(--tz) 12%, transparent); }

.q-row { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 14px; align-items: end; }
@media (max-width: 560px) { .q-row { grid-template-columns: 1fr; } }

.check {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer; font-size: 13.5px;
}
.check:has(input:checked) { border-color: var(--high); background: var(--high-bg); }
.check input { accent-color: var(--high); width: 15px; height: 15px; }

.sector-summary {
  margin-top: 10px; font-size: 12.5px; color: var(--text-dim);
}
.sector-summary b { color: var(--text); font-weight: 560; }

/* ------------------------------------------------------------ sector map -- */
/* The map keeps its paper-white ground in every theme. Radiologists read these
   sections on white, the zone colours are only legible against it, and it means
   the PNG and PDF look identical to what is on screen. */

.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.segmented button {
  cursor: pointer;
  border: 0; background: transparent; color: var(--text-dim);
  padding: 6px 12px; font-size: 13px; font-weight: 560;
}
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }

.map-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.lang-pick {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lang-pick a {
  padding: 5px 10px;
  font-size: 13px; font-weight: 560;
  color: var(--text-dim); text-decoration: none;
}
.lang-pick a + a { border-left: 1px solid var(--line); }
.lang-pick a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }

.map-tools-right { display: flex; gap: 8px; }
.map-tools button:disabled { opacity: .4; cursor: not-allowed; }
.panel-head-actions button:disabled { opacity: .4; cursor: not-allowed; }

/* Shape picker. Only on screen while the reader is in draw mode, so it sits
   above the map rather than in the crowded panel head. */
.shape-tools { display: inline-flex; margin-bottom: 10px; }

.mapwrap {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px;
  overflow: hidden;
}
.sectormap { display: block; width: 100%; height: auto; }
.sectormap [data-sector] { cursor: pointer; transition: fill-opacity .1s; }
.sectormap [data-sector]:hover { fill-opacity: .62; }
.sectormap[data-mode="draw"] { cursor: crosshair; }
.sectormap[data-mode="draw"] [data-sector] { cursor: crosshair; }
.sectormap [data-sector]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.zone-key {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 10px; font-size: 12px; color: var(--text-dim);
}
.zone-key-item { display: inline-flex; align-items: center; gap: 6px; }
.zone-key-item i {
  width: 13px; height: 11px; border-radius: 2px;
  border: 1px solid #9aa2a8; display: inline-block;
}

.export-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.export-row .hint { flex: 1 1 220px; }

.orientation { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.sector-key {
  margin: 10px 0 0; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 12.5px;
}
.sector-key dt { font: 600 12px/1.4 var(--mono); color: var(--text); }
.sector-key dd { margin: 0; color: var(--text-dim); }

/* ---------------------------------------------------------------- result -- */
.result-panel { border-left: 4px solid var(--line); }
.result-panel[data-level="low"]  { border-left-color: var(--low); }
.result-panel[data-level="mid"]  { border-left-color: var(--mid); }
.result-panel[data-level="high"] { border-left-color: var(--high); }

.empty { margin: 0; font-size: 13.5px; color: var(--text-faint); }

.score-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.score-badge {
  flex: none;
  width: 62px; height: 62px; border-radius: 14px;
  display: grid; place-items: center; align-content: center;
  font-weight: 700; letter-spacing: -.03em;
  background: var(--line-soft); color: var(--text);
}
.score-badge .n { font-size: 30px; line-height: 1; }
.score-badge .l { font-size: 9.5px; font-weight: 640; text-transform: uppercase; letter-spacing: .07em; opacity: .8; }
.score-badge[data-level="low"]  { background: var(--low-bg);  color: var(--low); }
.score-badge[data-level="mid"]  { background: var(--mid-bg);  color: var(--mid); }
.score-badge[data-level="high"] { background: var(--high-bg); color: var(--high); }
.score-copy h3 { font-size: 15px; }
.score-copy p { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); }

.seq-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.seq {
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 8px 10px; text-align: center;
}
.seq span { display: block; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.seq strong { display: block; font-size: 17px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.seq[data-dominant="true"] { border-color: var(--accent); background: var(--accent-soft); }
.seq[data-dominant="true"] span { color: var(--accent); }

.rule {
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.reco { margin: 0 0 12px; font-size: 13.5px; }
.reco strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 3px; }

.detect { font-size: 12.5px; color: var(--text-dim); margin: 0 0 12px; }
.detect b { color: var(--text); font-variant-numeric: tabular-nums; }

.why { margin: 0; padding-left: 17px; display: grid; gap: 5px; }
.why li { font-size: 12.5px; color: var(--text-dim); }

/* ---------------------------------------------------------------- report -- */
.report-out {
  margin: 0;
  padding: 12px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: 12.5px/1.55 var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 46vh; overflow: auto;
  color: var(--text-dim);
}

/* ----------------------------------------------------------------- shelf -- */
/* ----------------------------------------------------------------- prose --
   The explanatory section below the calculator. Measured in ch rather than px:
   this is the only part of the page meant to be read continuously rather than
   scanned, and 68ch is about where a line stops being comfortable. */
.prose {
  border-top: 1px solid var(--line);
  padding: 30px clamp(14px, 3vw, 32px) 8px;
}
.prose-inner { max-width: 68ch; margin: 0 auto; }
.prose h2 {
  font-size: 19px; font-weight: 620; letter-spacing: -0.01em;
  margin: 30px 0 10px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  margin: 20px 0 6px;
}
.prose p { margin: 0 0 12px; color: var(--text-dim); line-height: 1.62; }

/* Narrow numeric tables. The wrapper scrolls rather than the page, so a phone
   never ends up scrolling horizontally to read a paragraph. */
.table-wrap { overflow-x: auto; margin: 10px 0 12px; }
.tbl {
  border-collapse: collapse; font-size: 13.5px;
  min-width: 320px;
}
.tbl th, .tbl td {
  padding: 6px 16px 6px 0; text-align: left;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.tbl th {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint);
  border-bottom-color: var(--line);
}
.tbl td { color: var(--text-dim); }
.tbl td b { color: var(--accent); font-weight: 700; }

/* Citations: untranslated on purpose — a reference is the same in every
   language, and translating a journal title would make it unfindable. */
.cite {
  font-size: 12.5px; color: var(--text-faint); line-height: 1.55;
  margin: 14px 0 0;
}
.cite a { color: var(--text-dim); }

.faq { margin: 12px 0 0; }
.faq dt {
  font-weight: 600; font-size: 14.5px; color: var(--text);
  margin-top: 18px;
}
.faq dd {
  margin: 6px 0 0; color: var(--text-dim); line-height: 1.62;
}

.byline {
  margin-top: 32px; padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.byline-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint);
}
.byline-who { margin: 5px 0 0; color: var(--text); font-size: 14px; }
.byline-who a { color: var(--accent); }
.byline-affil { display: block; color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.byline-date { margin: 6px 0 0; font-size: 12.5px; color: var(--text-faint); }

.shelf {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 26px clamp(14px, 3vw, 32px);
}
.shelf-inner { max-width: 1440px; margin: 0 auto; }
.shelf h2 { font-size: 15px; }
.disclosure {
  margin: 6px 0 16px; font-size: 12px; color: var(--text-faint); max-width: 68ch;
}
.shelf-items { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 820px) { .shelf-items { grid-template-columns: 1fr; } }
.shelf-item {
  display: block; text-decoration: none; color: inherit;
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .12s, transform .12s;
}
.shelf-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.shelf-item b { display: block; font-size: 13.5px; font-weight: 600; }
.shelf-item small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-dim); }
.shelf-item .go { display: block; margin-top: 8px; font-size: 12px; color: var(--accent); font-weight: 560; }

/* ------------------------------------------------------------------ foot -- */
.site-foot {
  padding: 22px clamp(14px, 3vw, 32px) 40px;
  max-width: 1440px; margin: 0 auto;
  display: grid; gap: 9px;
}
.disclaimer {
  margin: 0; padding: 12px 14px;
  background: var(--mid-bg);
  border: 1px solid color-mix(in srgb, var(--mid) 32%, transparent);
  border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text);
}
.site-foot .meta { margin: 0; font-size: 12px; color: var(--text-faint); max-width: 84ch; }

@media print {
  .topbar-actions, .tabs, .shelf, .maps, .extra-sectors, button { display: none !important; }
  .layout { grid-template-columns: 1fr; }
  .panel { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}