/* quality-lab — the station.
   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: sector designations, hull bands, bearings with endpoints.

   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/05-theme.sh). */

:root {
  --ground:  #fbfbf9;
  --ink:     #0a0a0a;
  --dim:     #6b6b6b;
  --rule:    #0a0a0a;
  --hairline:#cfcfc9;
  --accent:  #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: 62ch;
  --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;
    --accent:  #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  { 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) var(--pad) 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(--accent); }

.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(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ground); background: var(--accent); 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(--accent); }

.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(--accent); }

/* 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(--accent); }
.row .mark { flex: none; color: var(--accent); }
.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(--accent); }
.chart .node:focus { outline: none; }
.chart .node:focus .halo { fill: none; stroke: var(--accent); stroke-width: 1; }

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

.chart .reach { fill: var(--accent); fill-opacity: 0.1; stroke: var(--accent); 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(--accent); }
.chart.plotted .node.lit.solid .dot { fill: var(--accent); }
.chart.plotted .edge.lit { stroke: var(--accent); stroke-opacity: 1; stroke-width: 1.75; }
.chart.plotted .node.destination .dot { fill: var(--accent); stroke: var(--accent); }

/* ---- 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(--accent);
  border: 1px solid var(--hairline); padding: 0.25rem 0.6rem; cursor: pointer;
}
.course .clear:hover { background: var(--accent); 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(--accent); 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;
}