/* ============================================================
   NERD MODE - the technical drawing
   ------------------------------------------------------------
   Same skeleton, different language. Where the human pages use
   prose and soft light, this uses a construction grid, numbered
   sections and monospace for anything the machine knows about
   itself: model names, thresholds, budgets, protocol fields.

   One signal colour per page, taken from the project. No glow:
   a drawing is lit evenly or it stops reading as a drawing.
   ============================================================ */

body.nerd {
  --sig: var(--c1);
  --paper: #e9ebf0;
  --dim: #8b90a0;
  --faint: #5a5f6e;
  --hair: rgba(255, 255, 255, 0.11);
  --hair-soft: rgba(255, 255, 255, 0.06);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  background: #05060a;
  color: var(--paper);
}
body.nerd.theme-nina { --sig: #5e9bff; }
body.nerd.theme-iris { --sig: #22d3ee; }
body.nerd.theme-luna { --sig: #a78bfa; }
body.nerd.theme-aria { --sig: #e8a33d; }

/* The ambient glow is switched off: it washes out fine rules. What
   replaces it is a construction grid, which is the alignment reference
   the numbered sections are actually built on. */
body.nerd::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 1;
}
body.nerd::after { display: none; }

body.nerd .wrap { max-width: 1120px; }

/* ---------- Hero ---------- */
.nerd-hero {
  padding: calc(var(--nav-h) + 92px) 0 72px;
  border-bottom: 1px solid var(--hair);
}
.nerd-kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
}
.nerd-kicker b { color: var(--sig); font-weight: 500; }
.nerd-title {
  font-family: var(--mono);
  font-size: clamp(27px, 4.3vw, 52px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-top: 22px;
}
.nerd-title span { color: var(--sig); }
.nerd-expand {
  font-family: var(--mono);
  font-size: clamp(12px, 1.4vw, 15px);
  color: var(--dim);
  margin-top: 14px;
  letter-spacing: 0.02em;
}
.nerd-sub {
  margin-top: 26px;
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--dim);
}

/* ---------- Sections ---------- */
.nerd-sec { padding-block: 64px; border-bottom: 1px solid var(--hair-soft); }
.nerd-sec:last-of-type { border-bottom: 0; }
.nerd-h {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
}
.nerd-h i { font-style: normal; color: var(--sig); }
.nerd-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
  transform: translateY(-3px);
}
.nerd-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper);
  max-width: 70ch;
  margin-bottom: 30px;
}

/* ---------- Spec table: the machine talking about itself ---------- */
.spec { border-top: 1px solid var(--hair); }
.spec div {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  gap: 6px 28px;
  padding-block: 15px;
  border-bottom: 1px solid var(--hair-soft);
  align-items: baseline;
}
.spec dt,
.spec .k {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.spec dd,
.spec .v { font-size: 15.5px; color: var(--dim); }
.spec .v b { color: var(--paper); font-weight: 500; }
.spec .v code,
.mono {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--sig);
  word-break: break-word;
}

/* ---------- Numbered stage list ---------- */
.stages { counter-reset: st; border-top: 1px solid var(--hair); }
.stage {
  counter-increment: st;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0 24px;
  padding-block: 22px;
  border-bottom: 1px solid var(--hair-soft);
}
.stage::before {
  content: counter(st, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  padding-top: 4px;
}
.stage h3 {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.stage p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--dim); max-width: 74ch; }
.stage .params {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.7;
}
.stage .params b { color: var(--sig); font-weight: 400; }

/* ---------- Plate: for a diagram or a block of protocol ---------- */
.plate {
  border: 1px solid var(--hair);
  background: #07080d;
  padding: 20px 22px;
  overflow-x: auto;
}
.plate pre {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--dim);
  white-space: pre;
}
.plate pre b { color: var(--sig); font-weight: 400; }
.plate-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 12px;
}

/* ---------- Mode switch, in the nav ---------- */
.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--text-soft, #b9bcc6);
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mode-switch:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
body.nerd .mode-switch { border-color: var(--sig); color: var(--sig); }

/* ---------- Responsive ---------- */
/* In the top bar the pill is a control among controls. Inside the mobile
   sheet it is a menu row, because that is what everything else there is. */
.mode-item { display: none; }

@media (max-width: 860px) {
  .spec div { grid-template-columns: 1fr; gap: 4px; }
  .stage { grid-template-columns: 34px 1fr; gap: 0 14px; }
  .nerd-hero { padding-top: calc(var(--nav-h) + 56px); }
}

@media (max-width: 720px) {
  /* No room for the pill beside the logo, the app link and the language
     switch, so it moves into the sheet rather than vanishing. Without this
     the whole nerd mode was unreachable from a phone. */
  .nav-right > .mode-switch { display: none; }
  .mode-item { display: block; }
  /* A hairline above it: the mode is a different kind of thing from the
     four destinations, and grouping says so without a heading. */
  .mode-item {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mode-item .mode-switch {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    border-radius: 14px;
    padding: 14px 8px;
    font-size: 14px;
    letter-spacing: 0.12em;
    color: #cfd3dd;
  }
  body.nerd .mode-item .mode-switch { color: var(--sig); }
}