:root {
  color-scheme: light;
  --ink: #1a1a1a;
  --muted: #555555;
  --line: #d4d4d4;
  --head: #f2f2f2;
  --link: #1a4fb4;
  /* Dose classes are neutral categories: blue and orange (CVD-checked), never the green/red of pass/fail. */
  --buffered: #2a78d6;
  --sensitive: #eb6834;
  --other: #9a9a9a;
  --cell: #7a7a7a;
  --grid: #ececec;
  --pass: #2e7d32;
  --caution: #9a6100;
  --fail: #b3261e;
}

* { box-sizing: border-box; }
body { margin: 0; background: #ffffff; color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.page, .side { max-width: 960px; margin: 0 auto; padding: 0 20px; }
h1 { font-size: 24px; font-weight: 600; margin: 24px 0 4px; }
h2 { font-size: 22px; font-weight: 600; margin: 20px 0 2px; }
h3 { font-size: 16px; font-weight: 600; margin: 18px 0 6px; }
h4 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; }
p { margin: 0 0 8px; }
a { color: var(--link); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.lead { color: var(--muted); max-width: 760px; }
.search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.search label { font-weight: 600; }
.search input { font: inherit; width: 280px; padding: 5px 8px; border: 1px solid #8c8c8c; border-radius: 2px; text-transform: uppercase; }
.search input::placeholder { text-transform: none; color: #8a8a8a; }
.search button, .controls button { padding: 4px 12px; border: 1px solid #8c8c8c; border-radius: 2px; background: #f4f4f4; }
.search button:hover, .controls button:hover { background: #e8e8e8; }
.controls button[aria-pressed="true"] { background: #dcdcdc; font-weight: 600; }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.error { color: var(--fail); min-height: 1.2em; margin: 0; }
.error a { margin-left: 6px; }
.examples { color: var(--muted); font-size: 14px; }

#result:empty { display: none; }
#result { border-top: 1px solid var(--line); margin-top: 14px; padding-bottom: 8px; }
.meta { color: var(--muted); font-size: 14px; }
.summary { font-size: 16px; max-width: 820px; }
.note { color: var(--muted); font-size: 13px; }

table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 8px 0 10px; }
th, td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
thead th { background: var(--head); font-weight: 600; }
table.facts { max-width: 820px; }
table.facts th { background: var(--head); font-weight: 600; width: 32%; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pass { color: var(--pass); font-weight: 600; white-space: nowrap; }
.caution { color: var(--caution); font-weight: 600; white-space: nowrap; }
.fail { color: var(--fail); font-weight: 600; white-space: nowrap; }
.na { color: var(--muted); white-space: nowrap; }
.class-name { font-weight: 600; }
.class-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.class-dot.buffered { background: var(--buffered); }
.class-dot.sensitive { background: var(--sensitive); }
.class-dot.other { background: var(--other); }
.links { font-size: 14px; color: var(--muted); }
.links a { margin-right: 10px; }
th[title] { cursor: help; text-decoration: underline dotted #9a9a9a; text-underline-offset: 3px; }
.conf-high { color: var(--pass); font-weight: 600; }
.conf-moderate { color: var(--caution); font-weight: 600; }
.conf-low { color: var(--fail); font-weight: 600; }

.plot { max-width: 720px; }
.caption { color: var(--muted); font-size: 13px; }
.controls { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.controls label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

details { border-top: 1px solid var(--line); padding: 8px 0; }
details > summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
details[open] > summary { margin-bottom: 6px; }
.more { margin-top: 18px; }
.more > details:last-child { border-bottom: 1px solid var(--line); }
.terms dt { font-weight: 600; margin-top: 8px; }
.terms dd { margin: 0 0 4px 0; max-width: 820px; }
footer { color: var(--muted); font-size: 13px; padding-top: 16px !important; padding-bottom: 32px !important; }

.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .tick { fill: #6b6b6b; font-size: 11px; font-family: inherit; }
.chart .axis-title { fill: #444444; font-size: 12px; font-family: inherit; }
.chart .axis-hint { fill: #6b6b6b; font-size: 11px; font-family: inherit; }
.chart .boundary { stroke: #9a9a9a; stroke-width: 1; stroke-dasharray: 1 4; }
.dose-chart .cell { fill: var(--cell); fill-opacity: 0.3; }
.dose-chart .curve { fill: none; stroke: var(--series); stroke-width: 2.5; stroke-linecap: round; }
.dose-chart .fold-curve { fill: none; stroke: var(--series); stroke-width: 1.3; stroke-dasharray: 5 4; opacity: 0.6; }
.dose-chart .bin { fill: var(--series); stroke: #ffffff; stroke-width: 1.5; }
.dose-chart .ed50 { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dose-chart .ed50-label { fill: var(--ink); font-size: 12px; font-family: inherit; }

.network { border: 1px solid var(--line); max-width: 640px; aspect-ratio: 1 / 1; touch-action: none; background: #ffffff; }
.network-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.network-svg .edge { stroke: #9a9a9a; stroke-opacity: 0.35; }
.network-svg .node { stroke: #ffffff; stroke-width: 2; cursor: pointer; }
.network-svg .node:hover { stroke: var(--ink); }
.network-svg.has-selection .node:not(.selected):not(.neighbour) { opacity: 0.3; }
.network-svg.has-selection .edge:not(.active) { stroke-opacity: 0.07; }
.network-svg .edge.active { stroke: var(--ink); stroke-opacity: 0.8; }
.network-svg .node.selected { stroke: var(--ink); stroke-width: 4; }
.network-svg .module-label { fill: #6b6b6b; font-size: 22px; font-family: inherit; pointer-events: none; }
.network-svg.has-selection .module-label { opacity: 0.35; }
.network-svg .module-label.hidden { display: none; }
.network-svg .node-label { fill: var(--ink); font-family: inherit; paint-order: stroke; stroke: #ffffff; cursor: pointer; }
.network-svg .node-label:hover { fill: var(--link); text-decoration: underline; }
.network-svg .node-label.main { font-weight: 700; }
.legend .key { font-size: 15px; }
.key.buffered { color: var(--buffered); }
.key.sensitive { color: var(--sensitive); }
.key.other { color: var(--other); }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

/* Wide screens: results on the left; the network stays in view on the right, separated by a thin rule.
   Only the page scrolls: the panel is exactly one screen tall and the network shrinks to fit it. */
@media (min-width: 1100px) {
  /* The one-screen-tall panel spans all rows; the last row (1fr) absorbs its extra height so that no gap opens
     between the search and the result on tall screens or short results. */
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(460px, 34vw, 640px);
    grid-template-rows: auto auto auto 1fr; align-items: start;
    max-width: 1600px; margin: 0 auto; padding: 0 0 0 24px; }
  .layout > .page { grid-column: 1; max-width: 920px; margin: 0; padding: 0 32px 0 0; }
  .layout > .side { grid-column: 2; grid-row: 1 / span 4; align-self: start; position: sticky; top: 0;
    height: 100vh; overflow-y: auto; margin: 0; padding: 20px 24px 12px; border-left: 1px solid var(--line); }
  .side > details { border-top: 0; padding-top: 0; }
  .side .network { max-width: none; width: 100%; max-height: calc(100vh - 270px); }
  .side .controls button { padding: 3px 9px; }
}

/* Printing or saving a result as PDF: the result and its sections only, on one column. */
@media print {
  .search, .examples, #search-error, .side, .controls, footer .no-print { display: none !important; }
  .layout { display: block; padding: 0; }
  .page { max-width: none; padding: 0; }
  .plot { max-width: 150mm; }
  a { color: inherit; text-decoration: none; }
}

@media (max-width: 560px) {
  .page { padding: 0 14px; }
  .search input { width: 100%; }
  table { font-size: 13px; }
  th, td { padding: 4px 6px; }
  .chart .tick, .chart .axis-hint { font-size: 17px; }
  .chart .axis-title, .dose-chart .ed50-label { font-size: 18px; }
}