/* medlab — the station's casebook.
   A console at 3am: a large dark thing you are inside of, mostly empty, with a
   few lit readouts in it. Brutalist bones (one rule weight, huge type) with
   station furniture. Light theme is the same station as a printed schematic —
   ink on paper, the starfield becomes a drafting grid. Both are deliberate;
   neither is a fallback. Every colour token lives on bare :root and the dark
   block only overrides (test/04-theme.sh).

   The token names are a SHARED vocabulary across the sibling sites:
   --ground / --ink / --signal mean the same thing in every stylesheet that
   uses this system, so a rule copied between them still resolves. What is
   meant to differ is the colour — here, teal, inherited from the site this
   one replaced. Prose is sans because a case is read for ten minutes; mono is
   for machine text — dates, ids, chips, the control line. */

:root {
  --ground:  #fbfbf9;
  --ink:     #0a0a0a;
  --dim:     #6b6b6b;
  --rule:    #0a0a0a;
  --hairline:#cfcfc9;
  --signal:   #006b5d;
  --glow:    transparent;

  /* the drafting grid: this station, drawn flat on paper */
  --field:
    repeating-linear-gradient(0deg,  transparent 0 47px, #e6e6e0 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, #e6e6e0 47px 48px);
  --field-size: 48px 48px;

  --measure: 80ch;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #05070a;
    --ink:     #e6ecf2;
    --dim:     #79879a;
    --rule:    #dbe3ec;
    --hairline:#1e2732;
    --signal:   #35e0c8;
    --glow:    rgba(53, 224, 200, 0.5);

    /* the field outside: a handful of stars, not a texture. Anything denser
       reads as noise on a page you are meant to read for ten minutes. */
    --field:
      radial-gradient(1px 1px at 12% 18%,  rgba(230,236,242,.55), transparent 100%),
      radial-gradient(1px 1px at 74% 9%,   rgba(230,236,242,.40), transparent 100%),
      radial-gradient(1px 1px at 33% 62%,  rgba(230,236,242,.30), transparent 100%),
      radial-gradient(1px 1px at 88% 47%,  rgba(230,236,242,.45), transparent 100%),
      radial-gradient(1px 1px at 57% 88%,  rgba(230,236,242,.28), transparent 100%),
      radial-gradient(1px 1px at 21% 91%,  rgba(230,236,242,.38), transparent 100%),
      radial-gradient(1px 1px at 95% 76%,  rgba(230,236,242,.25), transparent 100%),
      radial-gradient(1px 1px at 46% 34%,  rgba(230,236,242,.22), transparent 100%);
    --field-size: 900px 700px;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground) var(--field) fixed;
  background-size: var(--field-size);
  color: var(--ink);
  font: 400 1.0625rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI",
        Helvetica, Arial, sans-serif;
  font-synthesis: none;
}

.wrap  { max-width: 92ch; margin: 0 auto; padding: 0 var(--pad); }
.prose { max-width: var(--measure); }

/* ---- hull band: where one part of the station meets the next ---- */

.band {
  height: 10px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--hairline);
  background: repeating-linear-gradient(
    -45deg, transparent 0 5px, var(--hairline) 5px 6px);
}

/* ---- masthead ---- */

.masthead { padding: calc(var(--pad) * 1.4) 0 var(--pad); }

.wordmark {
  display: block;
  font-size: clamp(1.75rem, 8vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  text-shadow: 0 0 28px var(--glow);
}
.wordmark:hover { background: none; color: var(--ink); }

.readout {
  margin: 1.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
.readout .lit { color: var(--signal); }

.tagline {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--dim);
  max-width: 40ch;
}

.masthead.sub { padding: calc(var(--pad) * 0.7) var(--pad); }
.masthead.sub .wordmark { font-size: clamp(0.9375rem, 3vw, 1.25rem); letter-spacing: 0.3em; }

/* ---- headings ---- */

h1 {
  font-size: clamp(1.875rem, 6.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: calc(var(--pad) * 0.8) 0 1rem;
  max-width: 20ch;
  text-shadow: 0 0 32px var(--glow);
}

h2 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 3.5rem 0 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  max-width: var(--measure);
}
h2.bare { border-top: 0; padding-top: 0; margin-top: 3.5rem; }

/* ---- text ---- */

p, ul, ol, table, blockquote { max-width: var(--measure); }
p { margin: 0 0 1.2rem; }

a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ground); background: var(--signal); text-decoration: none; }

.lede { font-size: 1.1875rem; line-height: 1.5; }

.claim-block {
  margin: 1.75rem 0 2.25rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  max-width: 42ch;
}

/* ---- sectors ---- */

.sector { padding: calc(var(--pad) * 0.9) 0 calc(var(--pad) * 1.1); border-top: 1px solid var(--hairline); }
.sector:first-of-type { border-top: 0; }

.sector-tag {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; max-width: 54ch;
  font-family: var(--mono);
  font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dim);
}
.sector-tag .state { color: var(--signal); }

.sector-name {
  display: block;
  margin: 0.5rem 0 0;
  font-size: clamp(1.375rem, 4.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--ink);
  text-decoration: none;
  text-shadow: 0 0 26px var(--glow);
}
a.sector-name:hover { background: none; color: var(--signal); }

/* the bearing: two endpoints and the run between them */
.bearing { max-width: 54ch; margin: 1.4rem 0 0; }
.bearing .rail {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--hairline); font-family: var(--mono); font-size: 0.75rem;
}
.bearing .rail .line { flex: 1 1 auto; height: 1px; background: var(--hairline); }
.bearing .rail .end { color: var(--dim); }
.bearing .poles {
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin-top: 0.5rem;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.4;
  color: var(--dim);
}
.bearing .poles span { max-width: 20ch; }
.bearing .poles .good { text-align: right; color: var(--ink); }

.locate {
  margin: 1.4rem 0 0; max-width: 54ch;
  font-size: 0.9375rem; color: var(--dim);
}
.locate b {
  display: block; font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 0.3rem;
}

/* ---- control rows: console lines ---- */

ul.rows { list-style: none; padding: 0; margin: 1.75rem 0 0; max-width: 54ch; }
ul.rows li { border-top: 1px solid var(--hairline); }
ul.rows li:last-child { border-bottom: 1px solid var(--hairline); }

.row {
  display: flex; align-items: baseline; gap: 0.85rem;
  padding: 0.8rem 0; text-decoration: none; color: var(--ink);
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em;
}
.row:hover { background: none; }
.row:hover .row-title { color: var(--signal); }
.row .mark { flex: none; color: var(--signal); }
.row-title { flex: 1 1 auto; text-transform: uppercase; letter-spacing: 0.08em; }
.row-meta {
  flex: none; color: var(--dim); font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

/* ---- metadata ---- */

.meta, .crumb {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dim);
}
.meta { margin: 0 0 1.75rem; }
.crumb { margin: 0 0 0.75rem; }
.meta .sep, .readout .sep, .crumb .sep { padding: 0 0.5rem; color: var(--hairline); }
.meta .unmeasured { color: var(--ink); }

.requires {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1rem 0; margin: 0 0 2.25rem; max-width: var(--measure);
  font-size: 0.9375rem;
}
.requires b {
  display: block; font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 0.35rem; font-weight: 700;
}

section { max-width: var(--measure); }
section.notes { color: var(--dim); }
section.notes ul { padding-left: 1.15rem; }
section.notes li { margin-bottom: 1rem; }
section.notes p { margin-bottom: 0.5rem; }

ul.ev { list-style: none; padding: 0; }
ul.ev li { border-top: 1px solid var(--hairline); padding: 0.9rem 0; }
.shows { display: block; color: var(--dim); font-size: 0.9375rem; margin-top: 0.25rem; }

blockquote.verbatim {
  margin: 0.5rem 0 1rem; padding-left: 1rem;
  border-left: 1px solid var(--hairline); color: var(--dim);
}

table { border-collapse: collapse; width: 100%; max-width: var(--measure); }
td, th { border-top: 1px solid var(--hairline); padding: 0.7rem 0.75rem 0.7rem 0; text-align: left; vertical-align: top; }
.tier-cell {
  white-space: nowrap; font-family: var(--mono); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0.12em;
}

.fine, .reviewed {
  color: var(--dim); font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; max-width: var(--measure);
}

/* ---- dark sectors: the floors that are not on the maps ---- */

.dark-sectors { margin-top: 1.25rem; max-width: 54ch; }
.dark-sectors li {
  display: flex; gap: 1rem; padding: 0.55rem 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim);
}
.dark-sectors { list-style: none; padding: 0; }
.dark-sectors .num { flex: none; }

footer {
  border-top: 1px solid var(--hairline);
  margin-top: 5rem; padding: 1.75rem var(--pad) 5rem;
}
footer p {
  margin: 0.45rem 0; font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
footer p.fine { text-transform: none; letter-spacing: 0.02em; }
footer a { color: var(--dim); }

main { padding-bottom: 2rem; }

@media (max-width: 32rem) {
  .bearing .poles { flex-direction: column; gap: 0.35rem; }
  .bearing .poles .good { text-align: left; }
  .row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
  /* nothing moves. A console that animates is a toy; this one is a chart. */
}

/* ---- the chart: the station seen from above ---- */

.chart-wrap {
  margin: 2rem 0 1.5rem;
  margin-left: calc(var(--pad) * -0.5);
  margin-right: calc(var(--pad) * -0.5);
  overflow-x: auto;
}
svg.chart { display: block; width: 100%; max-width: 780px; height: auto; margin: 0 auto; }

.chart .spoke { stroke: var(--hairline); stroke-width: 1; }
.chart .ring  { fill: none; stroke: var(--hairline); stroke-width: 1; }

.chart .sector-label {
  fill: var(--dim); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em;
}
.chart .sector-label.dark { fill: var(--hairline); }

.chart .edge { stroke: var(--hairline); stroke-width: 1.25; }
.chart .node .dot { fill: var(--ground); stroke: var(--dim); stroke-width: 1.75; }
.chart .node.solid .dot { fill: var(--dim); }
.chart .node .halo { fill: transparent; }
.chart .node { cursor: pointer; }
.chart .node:hover .dot, .chart .node:focus .dot { stroke: var(--signal); }
.chart .node:focus { outline: none; }
.chart .node:focus .halo { fill: none; stroke: var(--signal); stroke-width: 1; }

.chart .you { fill: var(--signal); }
.chart .you-label {
  fill: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
}

.chart .reach { fill: var(--signal); fill-opacity: 0.1; stroke: var(--signal); stroke-width: 1; stroke-opacity: 0.55; }

/* once a course is plotted, everything not on it recedes */
.chart.plotted .node .dot { stroke: var(--hairline); }
.chart.plotted .node.solid .dot { fill: var(--hairline); }
.chart.plotted .edge { stroke: var(--hairline); stroke-opacity: 0.4; }
.chart.plotted .node.lit .dot { stroke: var(--signal); }
.chart.plotted .node.lit.solid .dot { fill: var(--signal); }
.chart.plotted .edge.lit { stroke: var(--signal); stroke-opacity: 1; stroke-width: 1.75; }
.chart.plotted .node.destination .dot { fill: var(--signal); stroke: var(--signal); }

/* ---- the course readout ---- */

.course { max-width: 54ch; border-top: 1px solid var(--rule); padding-top: 1rem; }
.course-head { font-size: 0.9375rem; color: var(--dim); }
.course-head b { color: var(--ink); font-weight: 600; }
.course .clear {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; background: none; color: var(--signal);
  border: 1px solid var(--hairline); padding: 0.25rem 0.6rem; cursor: pointer;
}
.course .clear:hover { background: var(--signal); color: var(--ground); }

ol.steps { list-style: none; padding: 0; margin: 1.25rem 0 0; }
ol.steps li {
  display: flex; align-items: baseline; gap: 0.85rem;
  padding: 0.65rem 0; border-top: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 0.8125rem;
}
ol.steps li:last-child { border-bottom: 1px solid var(--hairline); }
ol.steps .n { flex: none; color: var(--signal); font-variant-numeric: tabular-nums; }
ol.steps a { flex: 1 1 auto; }
ol.steps .m {
  flex: none; color: var(--dim); text-transform: uppercase; letter-spacing: 0.14em;
}

/* adr-004: self-reported outcomes, marked where they are cited rather than
   only in a paragraph further down the page. */
.selfreport {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--signal); white-space: nowrap;
}


/* ---- medlab: cases ---- */

.lede { max-width: var(--measure); margin: 0 0 3rem; }
.lede p { margin: 0 0 1rem; }
.lede-turn { color: var(--signal); font-family: var(--mono); letter-spacing: 0.06em; }

.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 0 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule);
  font: 400 0.72rem/1.4 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim);
}
.section-head .count { letter-spacing: 0.1em; }

.case-list, .fam-list { list-style: none; margin: 0 0 3rem; padding: 0; }
.case { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--hairline); border-left: 3px solid transparent; }
.case:hover, .case:focus-within { border-left-color: var(--signal); }
.case-head { display: block; padding-left: 0.75rem; text-decoration: none; color: inherit; }
.case-head:hover { background: none; }
.case-head .date, .case-page .meta, .chips {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--dim);
}
.case-head .case-title, .case-page .case-title, .fam-title { text-transform: none; letter-spacing: 0; max-width: none; }
.case-head .case-title { display: block; font-weight: 700; font-size: 1.1rem; line-height: 1.35; margin-top: 0.15rem; color: var(--ink); }
.case-head:hover .case-title { color: var(--signal); }
.control { margin: 0.5rem 0 0; padding-left: 0.75rem; color: var(--ink); font-size: 0.9rem; }
.control .label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); margin-right: 0.6ch; white-space: nowrap; }
.fixed-no .control .label { color: var(--dim); }
.fixed-no .control .label::after { content: " (not yet)"; letter-spacing: 0; text-transform: none; }
.fixed-partial .control .label::after { content: " (partly)"; letter-spacing: 0; text-transform: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; padding-left: 0.75rem; }
.chip { display: inline-block; padding: 0.05rem 0.5rem; border: 1px solid var(--hairline); border-radius: 2px; text-decoration: none; color: var(--dim); }
.chip.family { border-color: var(--signal); color: var(--signal); }
.chip.sensor::before { content: "sensor: "; opacity: 0.7; }
.chip.sensor.none { border-style: dashed; }
a.chip:hover { background: var(--signal); color: var(--ground); border-color: var(--signal); }

.fam-list li { display: flex; justify-content: space-between; padding: 0.35rem 0.75rem; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 0.85rem; }
.fam-list .n { color: var(--dim); }

.case-page { max-width: none; }
.case-page .case-title { font-size: clamp(1.4rem, 4vw, 2.1rem); line-height: 1.2; margin: 0.3rem 0 0.8rem; }
.case-page .control { margin: 1rem 0 2rem; padding: 0.6rem 0.75rem; border-left: 3px solid var(--signal); }
.fam-title { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0.3rem 0 0.6rem; }
.crumb { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--dim); margin: 0 0 0.5rem; }

.prose h2 { font: 700 0.8rem/1.4 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); margin: 2.2rem 0 0.6rem; border: 0; padding: 0; }
.prose p, .prose ul, .prose blockquote { margin: 0 0 1rem; }
.prose blockquote { border-left: 2px solid var(--hairline); padding-left: 1rem; color: var(--dim); }
.prose pre { font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; padding: 0.8rem 1rem; border: 1px solid var(--hairline); overflow-x: auto; background: var(--ground); }
.prose code { font-family: var(--mono); font-size: 0.9em; }

footer { margin: 4rem 0 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--dim); font-size: 0.85rem; text-transform: none; letter-spacing: 0; }
footer p { margin: 0 0 0.4rem; }
footer .built { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; }