/* ===========================================================================
   Lunn Dynamics — HUD design system
   ---------------------------------------------------------------------------
   A Stark/Jarvis-flavoured interface built out from the brand navy sampled
   from the logo (#0e2e4f) rather than pasted on top of it: the navy becomes
   the deep background, and the HUD cyan is a lit version of the same hue, so
   the logo sits in the palette instead of fighting it. Amber is the single
   warm accent, reserved for live/alert states so it stays meaningful.

   Committed to dark. A heads-up display in light mode is a contradiction, so
   there is no light theme -- but every colour is painted explicitly and
   `color-scheme: dark` is set, so nothing inherits a host background.

   Legibility rule: chrome can be theatrical, DATA CANNOT. Panels, headers and
   hero elements carry the HUD treatment; tables of numbers get calm, high
   contrast styling. A component selector that is hard to read has failed at
   the one job it has.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* Brand, sampled from the logo */
  --brand-navy:   #0e2e4f;
  --brand-slate:  #2a4858;   /* Lunn Robotics mark */

  /* Ground */
  --bg-0: #04080f;           /* page */
  --bg-1: #071120;           /* panel */
  --bg-2: #0b1b2e;           /* raised */
  --bg-3: #10263d;           /* hover */

  /* HUD accents */
  --cy:      #4fd8ff;
  --cy-dim:  #2a93b8;
  --cy-glow: rgba(79, 216, 255, 0.35);
  --cy-line: rgba(79, 216, 255, 0.16);
  --amber:   #ffa53d;
  --amber-glow: rgba(255, 165, 61, 0.30);

  /* Ink */
  --ink:   #dce9f5;
  --ink-2: #8fa9c0;
  --ink-3: #5d7b96;

  /* Status */
  --ok:   #46e08a;
  --warn: #ffc247;
  --bad:  #ff6b6b;

  --line:   rgba(79, 216, 255, 0.14);
  --line-2: rgba(143, 169, 192, 0.16);

  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Rajdhani", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r: 3px;                  /* HUD corners are sharp, not rounded */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Faint engineering grid + a vignette, so the page reads as a display
     surface rather than a document. Fixed so it does not scroll away. */
  background-image:
    linear-gradient(var(--cy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cy-line) 1px, transparent 1px),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(14, 46, 79, 0.75), transparent 70%);
  background-size: 64px 64px, 64px 64px, 100% 100%;
  background-attachment: fixed;
}

a { color: var(--cy); text-decoration: none; }
a:hover { text-decoration: underline; text-shadow: 0 0 12px var(--cy-glow); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.wrap.narrow { max-width: 900px; }

/* --- Typographic HUD voice ------------------------------------------------ */

h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: .01em; margin: 0; }
h1 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.1; }
h2 { font-size: clamp(19px, 2.4vw, 25px); margin: 34px 0 12px; }
h3 { font-size: 17px; }

/* Micro-label: the small uppercase readout that makes a panel feel instrumented */
.lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cy-dim);
}
.lbl.amber { color: var(--amber); }

.lede { color: var(--ink-2); font-size: 16px; max-width: 62ch; }
.note { color: var(--ink-3); font-size: 13px; }

/* --- Site chrome ---------------------------------------------------------- */

header.hud {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 8, 15, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.hud .wrap { display: flex; align-items: center; gap: 22px; padding-top: 11px; padding-bottom: 11px; }

.brandmark { display: flex; align-items: center; gap: 11px; }
.brandmark img { height: 30px; width: auto; display: block; opacity: .95; }
.brandmark .txt { font-family: var(--sans); font-weight: 600; font-size: 15.5px; letter-spacing: .04em; color: var(--ink); }
.brandmark .txt span { color: var(--cy-dim); font-weight: 400; }

nav.hud { margin-left: auto; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
nav.hud a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-2);
}
nav.hud a:hover, nav.hud a[aria-current="page"] { color: var(--cy); text-decoration: none; }
nav.hud a[aria-current="page"] { text-shadow: 0 0 14px var(--cy-glow); }

/* --- Panels: bracket corners are the signature ---------------------------- */

.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(11, 27, 46, 0.92), rgba(7, 17, 32, 0.92));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
}
/* Two elements, four corners: each draws an L in two adjacent corners. */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--cy); opacity: .9;
}
.panel::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.panel::after  { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

.panel.lit { border-color: rgba(79, 216, 255, 0.3); box-shadow: 0 0 40px -18px var(--cy-glow); }

/* Cards in a row have to look like siblings. Previously only the live one
   carried the lit treatment, so the two projects beside it read as
   unfinished rather than as different: status is the chip's job, not the
   panel's. */
.grid .panel { border-color: rgba(79, 216, 255, 0.3); }
.grid .panel::before, .grid .panel::after { opacity: 1; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  padding: 11px 20px; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--cy); color: var(--cy);
  background: linear-gradient(180deg, rgba(79, 216, 255, 0.14), rgba(79, 216, 255, 0.05));
  transition: box-shadow .18s, background .18s, color .18s;
}
.btn:hover { text-decoration: none; box-shadow: 0 0 26px -6px var(--cy-glow); background: rgba(79, 216, 255, 0.2); }
.btn.ghost { border-color: var(--line-2); color: var(--ink-2); background: transparent; }
.btn.ghost:hover { border-color: var(--cy); color: var(--cy); }
.btn.amber { border-color: var(--amber); color: var(--amber); background: linear-gradient(180deg, rgba(255,165,61,.14), rgba(255,165,61,.05)); }
.btn.amber:hover { box-shadow: 0 0 26px -6px var(--amber-glow); background: rgba(255,165,61,.2); }

/* --- Chips / status ------------------------------------------------------- */

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  background: rgba(79, 216, 255, 0.09); border: 1px solid var(--line); color: var(--ink-2);
  white-space: nowrap;
}
.chip.ok    { color: var(--ok);    border-color: rgba(70,224,138,.35);  background: rgba(70,224,138,.09); }
.chip.warn  { color: var(--warn);  border-color: rgba(255,194,71,.35);  background: rgba(255,194,71,.09); }
.chip.bad   { color: var(--bad);   border-color: rgba(255,107,107,.32); background: rgba(255,107,107,.09); }
.chip.amber { color: var(--amber); border-color: rgba(255,165,61,.35);  background: rgba(255,165,61,.09); }
.chip.est   { font-style: italic; }
/* A chip used as a status badge next to a heading has to opt out of the
   heading's font size and sit on its own baseline. */
h1 .chip, h2 .chip, h3 .chip {
  font-size: 10.5px; font-weight: 400; vertical-align: middle;
  margin-left: 10px; position: relative; top: -2px;
}

/* Live pulse dot */
.live { display: inline-flex; align-items: center; gap: 7px; }
.live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(70, 224, 138, .6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(70, 224, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 224, 138, 0); }
}

/* --- Stat readouts -------------------------------------------------------- */

.stats { display: flex; gap: 12px; flex-wrap: wrap; }
.stat {
  position: relative; flex: 1 1 130px; min-width: 130px;
  background: rgba(11, 27, 46, .7); border: 1px solid var(--line);
  border-left: 2px solid var(--cy); border-radius: var(--r); padding: 11px 14px;
}
.stat b { display: block; font-family: var(--mono); font-size: 23px; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.stat span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cy-dim); }
.stat.amber { border-left-color: var(--amber); }
.stat.amber span { color: var(--amber); }

/* --- Landing page ---------------------------------------------------------
   The chrome carries the HUD voice; the page structure stays quiet. Sections
   are separated by rhythm and a single hairline rule rather than by boxes, so
   the panels that do carry a border mean something when they appear.
   ------------------------------------------------------------------------- */

.hero { padding: 68px 22px 44px; }
.hero h1 { max-width: 15ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* Section headings sit on a rule that stops where the text does, which reads
   as an instrument label rather than a document heading. */
.sechead {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin: 46px 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.sechead h2 { margin: 0; }
.sechead .note { margin-left: auto; }

/* Category shelves: a count is the honest headline for a catalogue, and it
   doubles as the link into that category. */
.shelves { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
.shelf {
  display: block; padding: 13px 15px; border-radius: var(--r);
  background: rgba(11, 27, 46, .55); border: 1px solid var(--line);
  border-top: 2px solid var(--cy-line);
  transition: border-color .18s, background .18s, transform .18s;
}
.shelf:hover {
  text-decoration: none; background: var(--bg-3);
  border-top-color: var(--cy); transform: translateY(-2px);
}
.shelf b {
  display: block; font-family: var(--mono); font-size: 20px;
  color: var(--ink); letter-spacing: -.02em; line-height: 1.25;
}
.shelf span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cy-dim);
}

/* Cards: label and status on one line, so status is scannable down a column */
.cardhead { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.cardhead .chip { margin-left: auto; }
.panel > h3 { margin: 0 0 8px; }
.cardfoot {
  margin: 14px 0 0; padding-top: 11px; border-top: 1px solid var(--line-2);
  color: var(--ink-3); line-height: 1.7;
}

/* Reason cards. The body was set in .note, which is 13 px of --ink-3 -- fine
   for a caption under a table, far too quiet for three paragraphs somebody is
   expected to read. Each card now leads with the claim in full contrast and
   follows with the argument at a readable size. */
.reason { padding: 22px 24px 24px; }
.reason .lbl { color: var(--amber); }
.reason h3 {
  margin: 12px 0 10px; font-size: 17px; line-height: 1.35; color: var(--ink);
  font-weight: 600;
}
.reason p {
  margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.68;
}
.reason p + p { margin-top: 11px; }
.reason strong { color: #fff; font-weight: 600; }

/* --- Tables: calm, legible, NOT theatrical -------------------------------- */

.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; background: rgba(7, 17, 32, .75); font-size: 13.5px; }
th, td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--line-2); }
th {
  background: rgba(11, 27, 46, .95); position: sticky; top: 0; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cy-dim); font-weight: 500; white-space: nowrap;
}
tbody tr:hover { background: rgba(16, 38, 61, .7); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
table th[scope="row"] { position: static; background: transparent; }

/* --- Radial HUD motif ----------------------------------------------------- */

.reactor { position: relative; display: grid; place-items: center; }
.reactor svg { width: min(400px, 78vw); height: auto; overflow: visible; }
/* A soft bloom behind the dial, so the instrument sits in the page rather than
   on it. Pure decoration, and cheap: one blurred radial, no filter on the SVG
   itself, which would cost a repaint on every animation frame. */
.reactor::before {
  content: ""; position: absolute; inset: 8%;
  background: radial-gradient(circle, rgba(79,216,255,.16), transparent 62%);
  filter: blur(26px); pointer-events: none;
}
.ring { fill: none; stroke: var(--cy); stroke-width: 1; opacity: .5; }
.ring.dim { opacity: .22; }
.ring.amber { stroke: var(--amber); opacity: .55; }
.spin-slow { transform-origin: 50% 50%; animation: spin 44s linear infinite; }
.spin-rev  { transform-origin: 50% 50%; animation: spin 30s linear infinite reverse; }
.sweep     { transform-origin: 50% 50%; animation: spin 7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* One marker per operating domain. Each carries its own period and phase as
   custom properties, so four orbits share one keyframe and still drift out of
   alignment instead of turning as a rigid body. */
.orbit {
  transform-origin: 50% 50%;
  animation: spin var(--period, 30s) linear infinite;
  animation-delay: calc(var(--period, 30s) * -0.37);
}
.node { fill: var(--cy); filter: drop-shadow(0 0 5px var(--cy-glow)); }
.orbit:nth-of-type(2) .node { fill: var(--amber); filter: drop-shadow(0 0 5px var(--amber-glow)); }
.pulse-ring { animation: corepulse 4.5s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes corepulse {
  0%, 100% { opacity: .8;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.06); }
}

/* --- Timeline / workflow -------------------------------------------------- */

.flow { list-style: none; margin: 0; padding: 0; }
.flow li { position: relative; padding: 0 0 22px 30px; border-left: 1px solid var(--line); }
.flow li:last-child { border-left-color: transparent; padding-bottom: 0; }
.flow li::before {
  content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px;
  background: var(--bg-0); border: 2px solid var(--cy-dim); border-radius: 50%;
}
.flow li.done::before { background: var(--ok); border-color: var(--ok); }
.flow li.active::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 12px var(--amber-glow); }
.flow h4 { margin: 0 0 3px; font-family: var(--sans); font-size: 15.5px; font-weight: 600; }
.flow p { margin: 0; color: var(--ink-2); font-size: 13.5px; }

/* --- Groundschool --------------------------------------------------------
   Long-form prose, which the rest of this design system has never had to
   carry. The HUD voice stays in the chrome; the article body gets a wider
   line height, a real measure, and nothing that competes with the words.
   ------------------------------------------------------------------------- */

.prose { font-size: 15.5px; line-height: 1.72; }
.prose h2 {
  font-size: 20px; margin: 38px 0 12px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 26px; }
.prose p { margin: 0 0 15px; color: var(--ink); max-width: 68ch; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; max-width: 68ch; }
.prose li { margin: 0 0 7px; }
.prose strong { color: #fff; font-weight: 600; }
.prose table { margin: 0 0 18px; max-width: 460px; }

/* A stated relationship, set apart from the prose so it reads as a result
   rather than as a sentence that happens to contain symbols. */
.formula {
  font-family: var(--mono); font-size: 14px; color: var(--cy);
  background: rgba(79,216,255,.06); border-left: 2px solid var(--cy);
  padding: 11px 15px; margin: 0 0 16px; max-width: 68ch;
  overflow-x: auto;
}

.toc { margin: 22px 0 8px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 26px; }
.toc li { margin: 0 0 5px; font-size: 13.5px; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

.rules { margin: 0; padding-left: 20px; }
.rules li { margin: 0 0 10px; color: var(--ink); font-size: 14.5px; line-height: 1.6; }
.rules li::marker { color: var(--amber); }

.gscard h3 { font-size: 18px; line-height: 1.3; }
.gsstrip {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin-top: 34px;
}
.gsstrip .btn { margin-left: auto; flex: none; }

.videoframe {
  position: relative; padding-top: 56.25%; margin: 0 0 18px;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.videoframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Bill of materials ----------------------------------------------------
   A tab on the right edge rather than a header item: it is a workspace the
   visitor builds up over a session, and it has to stay reachable from a
   component page as well as from the selector.
   ------------------------------------------------------------------------- */

.bomtab {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bg-0); background: var(--cy);
  border: 0; border-radius: 99px;
  box-shadow: 0 6px 24px -6px var(--cy-glow), 0 2px 8px rgba(0,0,0,.5);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.bomtab:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -6px var(--cy-glow); }
/* Empty, it recedes to an outline: there is nothing to go and look at yet. */
.bomtab.empty {
  background: rgba(11,27,46,.92); color: var(--ink-2);
  border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.bomtab .bomcount {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 99px;
  font-size: 11px; letter-spacing: 0; font-weight: 700;
  background: rgba(4,8,15,.22); color: inherit;
}
.bomtab.empty .bomcount { background: rgba(255,255,255,.07); }

.bomdrawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(400px, 92vw); display: flex; flex-direction: column;
  background: var(--bg-1); border-left: 1px solid var(--cy-line);
  box-shadow: -24px 0 60px -30px #000;
  transform: translateX(101%); transition: transform .22s ease;
  visibility: hidden;
}
.bomdrawer.open { transform: none; visibility: visible; }
.bomhead {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; border-bottom: 1px solid var(--line);
}
.bomhead .lbl { margin: 0; }
.bomclose {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); font-size: 22px; line-height: 1; padding: 0 4px;
}
.bomclose:hover { color: var(--cy); }

.bomlist { flex: 1; overflow-y: auto; }
.bomitem {
  display: grid; grid-template-columns: 1fr 52px auto 24px;
  align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-2);
}
.bomname { min-width: 0; }
.bomname a { display: block; font-size: 13.5px; line-height: 1.35; }
.bomname .note { display: block; font-size: 11px; }
.bomitem input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12px;
  text-align: center; padding: 4px; border-radius: 4px; color: inherit;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
}
.bomprice { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bomitem button {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0;
}
.bomitem button:hover { color: var(--bad); }

.bomfoot { border-top: 1px solid var(--line); padding: 14px 16px 18px; }
.bomtotal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
            font-size: 12.5px; color: var(--ink-2); }
.bomtotal b { margin-left: auto; font-family: var(--mono); font-size: 17px; color: var(--ink); }
.bomtotal .note { flex-basis: 100%; }
.bomexports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.bomexports button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  padding: 9px 4px; cursor: pointer; border-radius: var(--r);
  border: 1px solid var(--cy); color: var(--cy);
  background: linear-gradient(180deg, rgba(79,216,255,.14), rgba(79,216,255,.05));
}
.bomexports button:hover:not(:disabled) { background: rgba(79,216,255,.22); }
.bomexports button:disabled, .bomclear:disabled { opacity: .35; cursor: default; }
.bomnote { margin: 12px 0 14px; }
.bomclear {
  width: 100%; padding: 8px; cursor: pointer; border-radius: var(--r);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  background: transparent; border: 1px solid var(--line-2); color: var(--ink-3);
}
.bomclear:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }

/* The add control, on a grid row and on a component page */
.bomadd {
  flex: none; width: 22px; height: 22px; padding: 0; cursor: pointer;
  border-radius: 4px; border: 1px solid var(--line); color: var(--cy-dim);
  background: rgba(79,216,255,.07); font-family: var(--mono); font-size: 13px;
  line-height: 1; transition: border-color .15s, color .15s, background .15s;
}
.bomadd:hover { border-color: var(--cy); color: var(--cy); background: rgba(79,216,255,.18); }
.bomadd.added { border-color: var(--ok); color: var(--ok); background: rgba(70,224,138,.16); }
.bomadd.failed { border-color: var(--bad); color: var(--bad); }
.bomadd.wide {
  width: auto; height: auto; padding: 11px 20px; font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase; border-color: var(--cy); color: var(--cy);
}
td.name { display: flex; align-items: center; gap: 9px; }
td.name .nm { flex: 1; min-width: 0; }

@media (max-width: 620px) {
  .bomtab { right: 12px; bottom: 12px; }
}

footer.hud { border-top: 1px solid var(--line); margin-top: 54px; padding: 22px 0 34px; color: var(--ink-3); font-size: 12.5px; }
footer.hud a { color: var(--ink-2); }

code { font-family: var(--mono); background: rgba(79,216,255,.09); border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--r); font-size: 12.5px; }

/* Anyone who has asked for less motion gets none of the decorative kind. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   Thrust curves
   Chrome can be theatrical, DATA CANNOT. The curve is drawn in the instrument
   cyan because it *is* an instrument reading: one polyline, one dot per
   measured point, no smoothing and no fill, so nothing on screen implies a
   measurement that was not taken.
   --------------------------------------------------------------------------- */
.curve { margin: 14px 0 0; }
.curve svg { width: 100%; height: auto; display: block; }
.curve .grid line { stroke: var(--line); stroke-width: 1; }
.curve polyline { fill: none; stroke: var(--cy); stroke-width: 2;
                  stroke-linejoin: round; stroke-linecap: round; }
.curve .dots circle { fill: var(--cy); opacity: .75; }
.curve text { fill: var(--ink-3); font: 11px/1 var(--mono, ui-monospace, monospace); }
.curve figcaption { margin-top: 8px; }