/* ==========================================================================
   EREKTOR Support — design system

   Carries the EREKTOR brand tokens (ground, red accent, Oswald caps
   headings, Inter body) so the portal reads as one family with erektor.systems,
   tuned
   for the job it actually does: technicians on tablets, in daylight, in
   gloves, reading serials back over a radio.
   ========================================================================== */

/* Brand type, self-hosted so the CSP (font-src 'self') holds: Oswald caps for
   headings, buttons and the wordmark; Inter for body. Variable, latin subset. */
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/oswald-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark light;

  --ground:       #1b1b1b;
  --surface:      #242424;
  --surface-2:    #2b2b2b;
  --line:         #3a3a3a;
  --line-strong:  #525252;
  --ink:          #ffffff;
  --ink-muted:    #afafaf;
  --ink-faint:    #7d7d7d;

  --accent:       #ff2828;
  --accent-deep:  #c70000;
  --accent-glow:  rgba(255, 40, 40, 0.16);
  --accent-ink:   #ffffff;

  --amber:        #f5a524;
  --amber-bg:     #33260c;
  --green:        #22c55e;
  --green-bg:     #14301f;
  --info:         #6aa9e0;
  --info-bg:      #12283d;

  --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 18px 40px -22px rgba(0,0,0,0.8);
  --radius: 6px;
  --radius-lg: 12px;
  --gap: 1rem;
  --measure: 68ch;

  --display: "Oswald", "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #f1f3f5; --surface: #ffffff; --surface-2: #f1f3f5;
    --line: #dfdfdf; --line-strong: #afafaf;
    --ink: #232323; --ink-muted: #676767; --ink-faint: #8f8f8f;
    --accent: #c70000; --accent-deep: #810000; --accent-glow: rgba(199,0,0,0.10);
    --amber: #976013; --amber-bg: #fdf3e0;
    --green: #137334; --green-bg: #e6f4ea;
    --info: #1f5f9e; --info-bg: #e6eef8;
    --shadow: 0 1px 0 rgba(255,255,255,0.6), 0 20px 40px -26px rgba(15,30,40,0.35);
  }
}
:root[data-theme="light"] {
  --ground: #f1f3f5; --surface: #ffffff; --surface-2: #f1f3f5;
  --line: #dfdfdf; --line-strong: #afafaf;
  --ink: #232323; --ink-muted: #676767; --ink-faint: #8f8f8f;
  --accent: #c70000; --accent-deep: #810000; --accent-glow: rgba(199,0,0,0.10);
  --amber: #976013; --amber-bg: #fdf3e0;
  --green: #137334; --green-bg: #e6f4ea;
  --info: #1f5f9e; --info-bg: #e6eef8;
  --shadow: 0 1px 0 rgba(255,255,255,0.6), 0 20px 40px -26px rgba(15,30,40,0.35);
}
:root[data-theme="dark"] {
  --ground: #1b1b1b; --surface: #242424; --surface-2: #2b2b2b;
  --line: #3a3a3a; --line-strong: #525252;
  --ink: #ffffff; --ink-muted: #afafaf; --ink-faint: #7d7d7d;
  --accent: #ff2828; --accent-deep: #c70000; --accent-glow: rgba(255,40,40,0.16);
  --amber: #f5a524; --amber-bg: #33260c;
  --green: #22c55e; --green-bg: #14301f;
  --info: #6aa9e0; --info-bg: #12283d;
  --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 18px 40px -22px rgba(0,0,0,0.8);
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: .75rem 1rem; font-weight: 700;
}
.skip:focus { left: 0; }

.wrap { width: min(1160px, 92vw); margin-inline: auto; }
.wrap--narrow { width: min(820px, 92vw); }
main { padding: 2.5rem 0 5rem; }
.prose { max-width: var(--measure); }
/* A full-width wrap whose text column is left-aligned rather than centred. */
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: var(--measure); }
.wrap.prose > .table-scroll,
.wrap.prose > figure,
.wrap.prose > .grid { max-width: none; }
[id] { scroll-margin-top: 150px; }

/* ------------------------------------------------------------------ header */
/* The masthead and the bar under it are the erektor-return.systems chrome,
   value for value: a dark band in either theme, the four-block mark and
   wordmark, the page named beside it, then the account. Only the mark
   differs: the two grey blocks are green here. */
.masthead, .subnav {
  --chrome: #2c2c2c;
  --chrome-raised: #3c3c3c;
  --chrome-hover: #474747;
  --chrome-line: #555555;
  --chrome-line-hover: #a0a0a0;
  --chrome-edge: #1c1c1c;
  --chrome-selected: #f5f5f5;
  --chrome-ink: #2c2c2c;
  --chrome-text: #ffffff;
  --chrome-text-body: #d0d0d0;
  --chrome-text-muted: #b0b0b0;
  --mark-red: #c0392b;
  --mark-green: #22c55e;
  letter-spacing: 0;
  line-height: 1.45;
}
/* Pinned while the page scrolls, as one block so the bar follows the
   masthead whatever height it wraps to. */
.site-head { position: sticky; top: 0; z-index: 40; }
.masthead {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 0 24px;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-edge);
  color: var(--chrome-text);
}
.brand {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  line-height: 1.15; white-space: nowrap; color: inherit; text-decoration: none;
}
.brand-mark { width: 28px; height: 28px; flex-shrink: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.brand-mark i { display: block; background: var(--mark-red); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: var(--mark-green); }
.brand-name { font-size: 13px; letter-spacing: .16em; }
.brand-name span { display: block; margin-top: 4px; color: var(--chrome-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.masthead-title {
  flex: 1; min-width: 0;
  padding-left: 24px; border-left: 1px solid var(--chrome-line);
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; line-height: 1.08;
  text-wrap: balance;
}
.nav { display: flex; gap: 20px; align-items: center; }
.nav a:not(.chrome-btn) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--chrome-text-body); font-size: 13px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; text-decoration: underline; text-underline-offset: 4px;
}
.nav a:not(.chrome-btn):hover, .nav a[aria-current="page"] { color: var(--chrome-text); }
.chrome-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--chrome-line); border-radius: 4px;
  background: transparent; color: var(--chrome-text); cursor: pointer;
  font-family: var(--display); font-size: 13px; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none; white-space: nowrap;
}
.chrome-btn:hover { border-color: var(--chrome-line-hover); background: var(--chrome-raised); }

.acct {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding-left: 20px; border-left: 1px solid var(--chrome-line);
}
.acct__avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chrome-selected); color: var(--chrome-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.acct__who { display: grid; line-height: 1.2; min-width: 0; }
.acct__who strong { font-size: 14px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.acct__who span { font-size: 12px; color: var(--chrome-text-body); line-height: 1.25; }

.themebtn {
  border: 1px solid var(--chrome-line); background: transparent; color: var(--chrome-text-body);
  width: 44px; height: 44px; border-radius: 4px; cursor: pointer;
  display: grid; place-items: center; flex: none;
}
.themebtn:hover { color: var(--chrome-text); border-color: var(--chrome-line-hover); background: var(--chrome-raised); }

.subnav {
  display: flex; gap: 4px; padding: 8px 24px;
  background: var(--chrome-raised);
  overflow-x: auto; scrollbar-width: none;
}
.subnav[hidden] { display: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px; border-radius: 6px; white-space: nowrap;
  color: var(--chrome-text-body); font-size: 14px; line-height: 1.2; text-decoration: none;
}
.subnav a::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: currentColor; opacity: .85;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.subnav a:hover { background: var(--chrome-hover); color: var(--chrome-text); }
.subnav a[aria-current="page"] { background: var(--chrome-selected); color: var(--chrome-ink); font-weight: 700; }
.subnav a[aria-current="page"]::before { opacity: 1; }
.subnav a.nav--urgent { color: #ff6b5e; font-weight: 700; }
.subnav a.nav--urgent[aria-current="page"] { color: #c70000; }
.subnav a[href$="account/index.html"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.subnav a[href$="account/emergency.html"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.subnav a[href$="account/maintenance.html"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.subnav a[href$="docs/"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E"); }
.subnav a[href$="docs/faults.html"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); }
.subnav a[href$="firmware/index.html"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='.5'/%3E%3Cpath d='M9.5 2v4M14.5 2v4M9.5 18v4M14.5 18v4M2 9.5h4M2 14.5h4M18 9.5h4M18 14.5h4'/%3E%3C/svg%3E"); }

/* The name gives way before the controls do: the avatar stays. */
@media (max-width: 1280px) {
  .acct__who { display: none; }
}
@media (max-width: 980px) {
  .masthead { gap: 16px; padding: 0 18px; }
  .brand-name { display: none; }
  .masthead-title { padding-left: 16px; }
  .subnav { padding: 8px 18px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
}
/* On a phone everything stays on one row: the title takes what is left
   and wraps within it, rather than the controls dropping to a row of
   their own. */
@media (max-width: 650px) {
  .masthead { gap: 10px; min-height: 60px; padding: 8px 16px; }
  .brand-mark { width: 22px; height: 22px; }
  .masthead-title { padding: 0; border: 0; font-size: 18px; }
  .acct { gap: 8px; padding-left: 0; border-left: 0; }
  .acct__avatar { width: 32px; height: 32px; font-size: 11px; }
  .masthead .chrome-btn { padding: 0 12px; }
  .subnav { padding: 8px 16px; }
  .subnav a { min-height: 40px; padding: 0 12px; font-size: 13px; }
}
/* Narrowest phones: a long title needs the avatar's room. */
@media (max-width: 360px) {
  .acct__avatar { display: none; }
}

/* -------------------------------------------------------------- typography */
h1, h2, h3, h4 {
  margin: 0 0 .5em; line-height: 1.05; font-weight: 700;
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: -0.005em; text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.7rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); margin-top: 2.4em; }
h3 { font-size: 1.2rem; margin-top: 1.9em; font-weight: 600; }
h2:first-child, h3:first-child { margin-top: 0; }
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: .15em; }
p, ul, ol { margin: 0 0 1em; }
li { margin-bottom: .35em; }
a { color: var(--accent); }
a:hover { color: var(--accent-deep); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .7; }
.eyebrow--plain::before { display: none; }

.lede { color: var(--ink-muted); font-size: clamp(1rem, .95rem + .4vw, 1.14rem); max-width: 65ch; }
.muted { color: var(--ink-muted); }
.small { font-size: .88rem; }
.mono { font-family: var(--mono); font-size: .8125rem; }

code, kbd, samp { font-family: var(--mono); font-size: .875em; }
code {
  background: var(--surface-2); border: 1px solid var(--line);
  padding: .1em .38em; border-radius: 4px;
}
pre {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; overflow-x: auto;
  font-family: var(--mono); font-size: .82rem; line-height: 1.55;
}
pre code { background: none; border: 0; padding: 0; }

.hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
.sec-head { max-width: 62ch; margin-bottom: 2.4rem; }
.sec-head p { color: var(--ink-muted); margin-top: .9rem; }

/* --------------------------------------------------------------- console

   The landing page is a console, not a brochure: a status bar, one input
   that routes a fault code, three route tiles carrying live counts, and
   panels that read the same data/*.json the deeper pages read. Nothing here
   is a hand-typed number.
   -------------------------------------------------------------------- */
.dash-head {
  display: grid; gap: 1.6rem; align-items: end;
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--line);
}
.dash-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem); margin-bottom: .45rem; }
.dash-head .lede { font-size: 1rem; margin: 0; }
@media (min-width: 900px) {
  .dash-head { grid-template-columns: minmax(0, 1fr) auto; }
}

.statbar {
  display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 1px; margin: 0; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.statbar > div { background: var(--surface); padding: .6rem .85rem; }
.statbar dt {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700;
}
.statbar dd {
  margin: .2rem 0 0; font-size: .85rem; font-weight: 600;
  display: flex; align-items: center; gap: .45rem; white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 2px; background: var(--ink-faint); flex: none; }
.dot--ok { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }

.console { margin-top: 2rem; }
.console__title {
  margin: 0 0 .6rem; font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 700;
}
.console__bar {
  display: flex; align-items: center; gap: .65rem; max-width: 560px;
  padding-inline: .9rem; background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
/* The field's own outline is suppressed because the bar is the control, so
   the bar has to carry the site's focus ring itself. */
.console__bar:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.console__prompt { color: var(--accent); font-weight: 700; flex: none; }
/* Outsells the base input rule, which is element+attribute specific: inside
   the bar the field is the bar, and the bar carries the border and the ring. */
.console__bar input.console__input {
  min-height: 52px; padding-inline: 0; font-size: 1.02rem;
  border: 0; background: transparent; border-radius: 0;
}
.console__bar input:focus-visible { outline: none; }
.console__hint { margin: .55rem 0 0; font-size: .85rem; color: var(--ink-muted); max-width: var(--measure); }

.dash-secline {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem 1.2rem; margin-bottom: 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.dash-secline h2 {
  margin: 0; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
}
.dash-secline p { margin: 0; font-size: .82rem; color: var(--ink-muted); }

/* ------------------------------------------------------------ route tiles */
.routes { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.routetile {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 1.05rem 1.15rem 1rem; text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.routetile:hover { border-color: var(--line-strong); transform: translateY(-1px); color: inherit; }
.routetile--self     { border-top-color: var(--green); }
.routetile--flag     { border-top-color: var(--amber); }
.routetile--dispatch { border-top-color: var(--accent); }
.routetile__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .75rem;
}
.routetile__k {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700; line-height: 1.35;
}
.routetile__n { display: flex; align-items: baseline; gap: .3rem; }
.routetile__n b {
  font-size: 1.65rem; font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.routetile__n small {
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700;
}
.routetile h3 { margin: 0 0 .4rem; font-size: 1.08rem; }
.routetile p { margin: 0 0 1.1rem; color: var(--ink-muted); font-size: .92rem; }
.routetile__cta { margin-top: auto; font-size: .8rem; font-weight: 700; color: var(--accent); }

/* ---------------------------------------------------------------- panels */
.panels { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel--wide { grid-column: 1 / -1; }
@media (max-width: 980px) { .panels { grid-template-columns: minmax(0, 1fr); } }

/* Panel bodies fill from data/*.json after first paint, so without a reserve
   the whole row grows ~180px when the fetch lands and everything below it
   jumps. These are layout reserves sized to the multi-column layout, not
   product facts: if the fault table or the manifest grows a row the panel
   simply grows too, which is the shift we have today, not a regression.
   Below 980px the panels are stacked and their heights vary too much with
   wrapping for a single reserve to be worth the dead space. */
@media (min-width: 981px) {
  .panel__body { min-height: 17rem; }
  .panel--wide .panel__body { min-height: 26.5rem; }
}

.panel {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .8rem 1.05rem; border-bottom: 1px solid var(--line);
}
.panel__head h2 {
  margin: 0; font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 700;
}
.panel__meta { font-size: .72rem; color: var(--ink-muted); white-space: nowrap; }
.panel__body { padding: .95rem 1.05rem; flex: 1; }
.panel__body[data-filled] { animation: panel-in .16s ease-out; }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
.panel__body > :last-child { margin-bottom: 0; }
.panel__foot {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  padding: .7rem 1.05rem; border-top: 1px solid var(--line); font-size: .75rem;
}
/* Standalone links, not links inside a sentence: give them a target a gloved
   finger can hit rather than the 20px a 13px line box would be. */
.panel__foot a {
  display: inline-flex; align-items: center; min-height: 32px;
  text-decoration: none; font-weight: 700;
}
.panel__foot a:hover { text-decoration: underline; }

/* Rows inside a panel: a label, a monospace value, and optional detail. */
.drows { display: grid; }
.drow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .1rem .8rem; align-items: baseline;
  padding: .55rem 0; border-top: 1px dashed var(--line);
}
.drow:first-child { border-top: 0; padding-top: 0; }
.drow:last-child { padding-bottom: 0; }
.drow__k { font-size: .88rem; font-weight: 600; }
.drow__v {
  font-family: var(--mono); font-size: .78rem;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.drow__sub {
  grid-column: 1 / -1; font-family: var(--mono); font-size: .75rem;
  color: var(--ink-muted); line-height: 1.5;
}

/* One subsystem per row: how many codes it carries, and how they split
   across the three routes. Bar length is the load relative to the busiest
   subsystem; the segments inside it are the route mix. */
.chart { display: grid; }
.chartrow {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 2.2fr) 5rem;
  align-items: center; column-gap: 1.4rem;
  padding: .55rem 0; border-top: 1px dashed var(--line);
}
.chartrow:first-child { border-top: 0; padding-top: 0; }
.chartrow:last-child { padding-bottom: 0; }
.chartrow__k { grid-column: 1; grid-row: 1; font-size: .88rem; font-weight: 600; }
.chartrow__sub {
  grid-column: 1; grid-row: 2;
  font-family: var(--mono); font-size: .75rem; color: var(--ink-muted);
}
.chartrow__track {
  grid-column: 2; grid-row: 1 / -1;
  height: 7px; border-radius: 4px; background: var(--surface-2);
}
.chartrow__v {
  grid-column: 3; grid-row: 1 / -1; text-align: right;
  font-family: var(--mono); font-size: .78rem; font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .chartrow { grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; }
  .chartrow__v { grid-column: 2; grid-row: 1; }
  /* The breakdown is the accessible copy of the bar, so give it the full
     width rather than let it wrap in the label column. */
  .chartrow__sub { grid-column: 1 / -1; }
  .chartrow__track { grid-column: 1 / -1; grid-row: 3; margin-top: .45rem; }
}

.mixbar {
  display: flex; height: 100%;
  border-radius: 4px; overflow: hidden; background: var(--surface-2);
}
.mixbar span { display: block; min-width: 2px; }
.m-self     { background: var(--green); }
.m-flag     { background: var(--amber); }
.m-dispatch { background: var(--accent); }

.legend {
  display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}
.swatch { width: 9px; height: 9px; border-radius: 2px; margin-right: .45rem; display: inline-block; }
.swatch--self     { background: var(--green); }
.swatch--flag     { background: var(--amber); }
.swatch--dispatch { background: var(--accent); }

/* ------------------------------------------------------------------- cards */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.35rem 1.25rem; box-shadow: none;
  display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
}
.card h3 { margin-top: 0; }
.card p { color: var(--ink-muted); font-size: .95rem; }
.card p:last-child { margin-bottom: 0; }
a.card { text-decoration: none; color: inherit; }
a.card:hover {
  border-left-color: var(--accent); transform: translateY(-1px);
  color: inherit;
}
.card--urgent { border-left-color: var(--accent); }
.card--plan, .card--docs, .card--fw { border-left-color: var(--line-strong); }
.card__meta {
  margin-top: auto; padding-top: 1rem; font-size: .74rem;
  color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .68em 1.25em;
  font: inherit; font-family: var(--display); font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink); cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.btn:hover { border-color: var(--accent-deep); color: var(--ink); transform: translateY(-1px); }
.btn--primary { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }
.btn--primary:hover { background: var(--accent-deep); color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------- forms */
.form { display: grid; gap: 1.3rem; max-width: 640px; }
fieldset {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.25rem; margin: 0; background: var(--surface);
}
legend { font-weight: 700; padding: 0 .45rem; font-size: .95rem; }
.field { display: grid; gap: .4rem; }
.field + .field { margin-top: 1.1rem; }
.field > label { font-weight: 600; font-size: .95rem; }
.field__hint { font-size: .85rem; color: var(--ink-muted); }
.field__err { font-size: .85rem; color: var(--accent); font-weight: 600; }
.required::after { content: " *"; color: var(--accent); }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date],
input[type=time], input[type=search], input[type=number], input[type=datetime-local],
select, textarea {
  font: inherit; width: 100%; min-height: 48px; padding: .6rem .75rem;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
textarea { min-height: 7rem; resize: vertical; }
/* Placeholders here carry the example serial or fault code, so they are
   instruction rather than decoration; the UA default grey is 3.1:1 in dark. */
::placeholder { color: var(--ink-muted); opacity: 1; }
input.mono, select.mono { font-family: var(--mono); letter-spacing: .02em; text-transform: uppercase; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.choice { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem 0; }
.choice + .choice { border-top: 1px dashed var(--line); }
.choice input { width: 22px; height: 22px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }
.choice label { font-weight: 500; }
.choice label b { display: block; font-weight: 700; }
.choice label span { display: block; color: var(--ink-muted); font-size: .88rem; }

/* ----------------------------------------------------------------- notices */
.note {
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--radius); padding: 1rem 1.15rem; margin: 1.4rem 0;
  background: var(--surface);
}
.note > :last-child { margin-bottom: 0; }
.note__title { font-weight: 700; margin: 0 0 .35rem; }
.note--crit  { border-left-color: var(--accent); background: var(--accent-glow); }
.note--warn  { border-left-color: var(--amber);  background: var(--amber-bg); }
.note--ok    { border-left-color: var(--green);  background: var(--green-bg); }
.note--info  { border-left-color: var(--info);   background: var(--info-bg); }

/* ------------------------------------------------------------------- pills */
.pill {
  display: inline-block; font-family: var(--mono); font-size: .7rem;
  font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  padding: .2em .55em; border-radius: 4px; border: 1px solid currentColor;
}
.pill--crit { color: var(--accent); background: var(--accent-glow); }
.pill--warn { color: var(--amber);  background: var(--amber-bg); }
.pill--ok   { color: var(--green);  background: var(--green-bg); }
.pill--info { color: var(--info);   background: var(--info-bg); }
.pill--flat { color: var(--ink-faint); background: var(--surface-2); }

/* ------------------------------------------------------------------ tables */
.table-scroll { overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
caption { text-align: left; color: var(--ink-muted); font-size: .88rem; padding: 0 0 .6rem; }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
thead th {
  background: var(--surface-2); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
  border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
tbody tr:hover { background: var(--surface-2); }
td.mono, th.mono { font-family: var(--mono); white-space: nowrap; }

/* --------------------------------------------------------- spec key/values */
.spec-list { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .55rem; }
.spec-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .8rem; line-height: 1.4;
  border-bottom: 1px dashed var(--line); padding-bottom: .5rem;
}
.spec-list li span:first-child {
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.spec-list li span:last-child { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- pipeline */
.pipe {
  display: grid; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface); margin: 1.4rem 0;
}
.pipe-row {
  display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .8rem;
}
.pipe-row:last-child { border-bottom: 0; }
.pipe-row .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.pipe-row.exit .dot { background: var(--green); }
.pipe-row .t { color: var(--ink); }
.pipe-row .m { margin-left: auto; color: var(--ink-faint); font-size: .7rem; letter-spacing: .06em; text-align: right; }

/* -------------------------------------------------------------- procedures */
.steps { counter-reset: step; list-style: none; padding: 0; max-width: var(--measure); }
.steps > li { counter-increment: step; position: relative; padding: 0 0 1.2rem 3.1rem; margin: 0; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -1px;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: .78rem;
}
.steps > li > b:first-child { display: block; }

.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; padding: .35rem 0; }
.checklist input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--green); }

/* ----------------------------------------------------------------- figures */
figure { margin: 1.9rem 0; }
.diagram {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.2rem; overflow-x: auto;
}
.diagram svg { display: block; width: 100%; height: auto; min-width: 0; }
figcaption { font-size: .88rem; color: var(--ink-muted); padding-top: .7rem; max-width: var(--measure); }

@media (max-width: 560px) {
  .diagram { padding: .75rem; overflow-x: hidden; }
  .diagram svg { width: 100%; min-width: 0; }
}

/* Diagram ink follows the theme */
.d-stroke { stroke: var(--ink); fill: none; }
.d-thin   { stroke: var(--line-strong); fill: none; }
.d-accent { stroke: var(--accent); fill: none; }
.d-accent-f { fill: var(--accent); }
.d-fill   { fill: var(--surface-2); stroke: var(--line-strong); }
.d-ink    { fill: var(--ink); }
.d-label  { fill: var(--ink); font-family: var(--sans); font-size: 12px; font-weight: 600; }
.d-note   { fill: var(--ink-muted); font-family: var(--mono); font-size: 10.5px; }
.d-key    { fill: var(--accent); font-family: var(--mono); font-size: 10.5px; font-weight: 700; }

/* ----------------------------------------------------------------- details */
details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin: .6rem 0;
}
summary { cursor: pointer; padding: .85rem 1.05rem; font-weight: 600; }
details[open] summary { border-bottom: 1px solid var(--line); }
.details__body { padding: 1.05rem; }
.details__body > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- breadcrumb */
.crumbs { font-size: .82rem; color: var(--ink-faint); margin-bottom: 1.2rem; letter-spacing: .02em; }
/* Docs pages set the trail above their first section; align it with .wrap. */
main > .crumbs { width: min(1160px, 92vw); margin-inline: auto; }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { padding: 0 .45rem; opacity: .5; }

/* ------------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--line); padding: 2.5rem 0; margin-top: 4rem; background: var(--surface); }
.foot-cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-faint); margin-bottom: .7rem; font-weight: 700;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .35rem; }
.foot a { color: var(--ink-muted); text-decoration: none; font-size: .9rem; }
.foot a:hover { color: var(--ink); }
.foot-base {
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .72rem; color: var(--ink-faint); letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600;
}
.foot-base .compliance { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* -------------------------------------------------------------- utilities */
.stack > * + * { margin-top: var(--gap); }
.mt-0 { margin-top: .8rem; }
.mt-1 { margin-top: 1.4rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 2.5rem; }
.mt-4 { margin-top: 3rem; }
.mt-5 { margin-top: 3.5rem; }
.pt-1 { padding-top: 1.5rem; }
.band-gap { margin: 2.5rem 0 3rem; }
.limit { max-width: var(--measure); }
.limit-input { max-width: 420px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
[hidden] { display: none !important; }

@media print {
  .masthead, .subnav, .foot, .btn, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .note, .diagram, .steps > li, .panel { break-inside: avoid; }
  .panel__body, .panel--wide .panel__body { min-height: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Registry — the gated section at /internal/

   Reuses the portal's vocabulary rather than introducing a second one: pills,
   panels, notes and the three route colours all keep their public meanings, so
   an operator moving between the two halves of the site does not have to learn
   the palette twice. Red is still the critical route, amber still the flag.
   ========================================================================== */

.regbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem;
  padding: .6rem .95rem; margin-bottom: 1.6rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--surface);
}
.regbar__id {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-right: .3rem;
}
.regbar a {
  font-size: .85rem; font-weight: 600; color: var(--ink-muted); text-decoration: none;
  border-bottom: 1px solid transparent; padding: .2rem 0;
}
.regbar a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.regbar a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.regbar__end { margin-left: auto; display: flex; align-items: center; gap: .8rem; }

.btn--sm { min-height: 34px; padding: .3em .8em; font-size: .82rem; font-weight: 600; }

/* -------------------------------------------------------------- filters */
.filters {
  display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-end;
  padding: .95rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.filters .field { margin: 0; flex: 0 0 auto; }
.filters .field--grow { flex: 1 1 240px; }
.filters label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.filters input[type="search"], .filters select { min-height: 42px; }
.filters .toggles { display: flex; gap: 1rem; flex-wrap: wrap; padding-bottom: .55rem; }
.filters .toggles label {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 42px;
  text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600;
}

/* ---------------------------------------------------------------- tables */
/* Registry tables carry a serial in the row header and a secondary line under
   several cells — the state under its stage, the serial under its staleness.
   Reading a leg back over a radio is easier from a monospaced column. */
.tbl th[scope="row"] { font-weight: 700; }
.tbl__sub {
  display: block; margin-top: .15rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink-faint);
}
.tbl__row--flagged th[scope="row"] { box-shadow: inset 3px 0 0 var(--amber); }
.tbl tbody tr:hover { background: var(--surface-2); }

/* ----------------------------------------------------------- interval meter */
/* How far through its service interval a leg is, in one glance. Green while
   there is room, amber approaching, red at or past it — the same three colours
   the fault table uses, meaning the same three things. */
.meter { display: inline-flex; align-items: center; gap: .55rem; min-width: 120px; }
.meter__track {
  flex: 1 1 auto; height: 7px; min-width: 56px;
  border-radius: 4px; background: var(--surface-2); overflow: hidden;
}
.meter__fill { display: block; height: 100%; min-width: 2px; border-radius: 4px; }
.meter__fill--self { background: var(--green); }
.meter__fill--flag { background: var(--amber); }
.meter__fill--dispatch { background: var(--accent); }
.meter b { font-size: .8rem; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- timeline */
/* leg_events is append-only, so this list is the leg's actual history rather
   than a summary of it. Newest first: the question is almost always "what
   happened to this leg last". */
.tl { list-style: none; margin: 0; padding: 0; }
.tl > li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: .2rem 1rem; align-items: baseline;
  padding: .7rem 0; border-top: 1px dashed var(--line);
}
.tl > li:first-child { border-top: 0; padding-top: 0; }
.tl__when { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; }
.tl__what { font-size: .9rem; }
.tl__who { white-space: nowrap; }
.tl__sub {
  display: block; margin-top: .2rem; font-size: .8rem; color: var(--ink-muted);
  max-width: var(--measure);
}
.tl--tight > li { padding: .45rem 0; grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
@media (max-width: 620px) {
  .tl > li { grid-template-columns: minmax(0, 1fr) auto; }
  .tl__when { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- identity */
/* The two serials, side by side, with what each one governs. The registry is
   keyed on the mechanical serial and the console should keep saying so. */
.ident {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ident > div { background: var(--surface); padding: .8rem .95rem; }
.ident dt {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700;
}
.ident dd { margin: .25rem 0 0; font-size: 1.05rem; }
.ident .small { display: block; margin-top: .35rem; color: var(--ink-faint); }
.ident--key { box-shadow: inset 3px 0 0 var(--accent); }

[aria-busy="true"] { opacity: .5; transition: opacity .15s ease; }

/* ==========================================================================
   Manufacturing — /internal/batches, materials, timesheets, metrics

   Built from the registry's parts. The five metric tiles each take one of the
   portal's colours by the question they answer; the colour is a label, never
   a verdict — whether a number is good is said in words under it.
   ========================================================================== */
.panel--span2 { grid-column: span 2; }
@media (max-width: 980px) { .panel--span2 { grid-column: auto; } }

/* The account dashboard: numbers rather than labels in the stat bar. */
.statbar--kpi dd { font-size: 1.6rem; font-weight: 700; }
/* A tile that leads somewhere links to its panel, and turns the accent
   colour once there is something there to act on. */
.statbar--kpi a { color: inherit; text-decoration: none; min-width: 24px; }
.statbar--kpi a:hover { text-decoration: underline; }
.statbar--kpi a.is-hot { color: var(--accent); }
/* Row action that sends a truck: outlined in the accent so one red row
   action reads as urgent instead of every link being red. */
.btn--urgent { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn--urgent:hover { background: var(--accent-glow); color: var(--accent); }

/* Below phone width a wide table becomes a stack of cards: the first cell is
   the card heading, every other cell is labelled from its column header
   (data-label, set by account.js), and the actions get their own row. */
@media (max-width: 640px) {
  .tbl--cards thead { display: none; }
  .tbl--cards, .tbl--cards tbody, .tbl--cards tr, .tbl--cards td { display: block; width: 100%; }
  .tbl--cards tr { padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
  .tbl--cards td {
    display: flex; justify-content: space-between; align-items: center; gap: .8rem;
    padding: .25rem 0; border: 0;
  }
  .tbl--cards td[data-label]::before {
    content: attr(data-label); flex: none;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
  }
  .tbl--cards td:first-child { padding-bottom: .4rem; }
  .tbl--cards td:first-child::before, .tbl--cards td.act::before { content: none; }
  .tbl--cards td.act { padding-top: .6rem; }
  .tbl--cards td.act .btn-row { justify-content: flex-start; }
}
.tbl__serial { white-space: nowrap; }
.tbl td.act { white-space: nowrap; }
.tbl td.act .btn-row { justify-content: flex-end; flex-wrap: nowrap; gap: .5rem; }
.panel .table-scroll { margin: 0; border: 0; border-radius: 0; }
.panel .table-scroll + * { border-top: 1px solid var(--line); }
.grid--tight { gap: .8rem; }
.grid--tight .field + .field { margin-top: 0; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; align-items: center; }
.qa-inputs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.qa-inputs label { display: inline-flex; gap: .35rem; align-items: center; font-size: .75rem; color: var(--ink-muted); }
.qa-inputs input { width: 4.2rem; min-height: 34px; padding: 0 .4rem; }

.field--line { grid-template-columns: minmax(0, 1fr) 6rem; align-items: center; }
.field--line + .field--line { margin-top: .5rem; }
.field--line > label { font-size: .88rem; font-weight: 500; }

.weeknav { align-items: center; }
.clock { font-size: 1rem; margin: 0 0 1rem; }

.barrow {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) 4.5rem;
  gap: .8rem; align-items: center; padding: .45rem 0;
}
.barrow b { text-align: right; font-size: .8rem; }

.kpis { display: grid; gap: var(--gap); grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kpis { grid-template-columns: 1fr; } }
.kpi {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1rem 1.05rem; background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--radius-lg);
}
.kpi h2 { margin: 0; font-size: .95rem; letter-spacing: 0; }
.kpi__k {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.kpi__v { font-size: 2rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi__how { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-muted); }
.kpi--reliability { border-top-color: var(--accent); }
.kpi--speed       { border-top-color: var(--info); }
.kpi--cost        { border-top-color: var(--amber); }
.kpi--supply      { border-top-color: var(--green); }

.m-info       { background: var(--info); }
.swatch--info { background: var(--info); }
.mixbar--tall { height: 22px; border-radius: var(--radius); }
.stagelist { display: grid; gap: .5rem; margin: 1rem 0 0; }
.stagelist > div { display: flex; justify-content: space-between; font-size: .88rem; }
.stagelist dt { color: var(--ink-muted); }
.stagelist dd { margin: 0; }

/* ------------------------------------------------------------- public home */
/* The signed-out introduction (index.html): the two consoles, one record. */
.hm-mark { width: 22px; height: 22px; flex: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.hm-mark i { background: #c0392b; }
.hm-mark i:nth-child(2), .hm-mark i:nth-child(3) { background: #8a8a8a; }
.hm-mark--esc i:nth-child(2), .hm-mark--esc i:nth-child(3) { background: #22c55e; }

.hm-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-top: 1rem;
}
.hm-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); }
.hm-hero__text > * { animation: hm-rise .6s var(--hm-ease, cubic-bezier(.2,.7,.2,1)) both; }
.hm-hero__text > :nth-child(2) { animation-delay: .06s; }
.hm-hero__text > :nth-child(3) { animation-delay: .12s; }
.hm-hero__text > :nth-child(n+4) { animation-delay: .18s; }

.hm-flow {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.4rem; box-shadow: var(--shadow);
  animation: hm-rise .7s cubic-bezier(.2,.7,.2,1) .2s both;
}
.hm-node {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ground);
}
.hm-node strong { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.02rem; }
.hm-node span:not(.hm-mark) { display: block; color: var(--ink-muted); font-size: .84rem; line-height: 1.35; }
.hm-node--record { border-color: var(--accent); background: var(--accent-glow); }
.hm-node__key.mono {
  flex: none; padding: .25rem .45rem; border: 1px solid var(--accent); border-radius: 4px;
  color: var(--accent); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
}
/* The links carry a slow dash toward the record: both consoles feed it. */
.hm-link {
  width: 2px; height: 34px; margin-left: calc(1rem + 10px);
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 5px, transparent 5px 10px);
  background-size: 2px 20px; animation: hm-flow 1.2s linear infinite;
}
.hm-link:last-of-type { animation-direction: reverse; }

.hm-compare th[scope="row"] { width: 22%; color: var(--ink); font-weight: 600; }
.hm-compare thead th { color: var(--ink); font-size: .78rem; }
.hm-colhead { display: inline-flex; align-items: center; gap: .6rem; }
.hm-compare .hm-mark { width: 16px; height: 16px; }

.hm-life {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 3fr) minmax(150px, .7fr);
  gap: 1rem; align-items: stretch;
}
.hm-life__end {
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
  padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.hm-life__end b { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; }
.hm-life__end span { color: var(--ink-muted); font-size: .86rem; line-height: 1.4; }
.hm-life__loop {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  padding: 1.1rem 1.1rem 2.3rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
}
.hm-life__half { display: flex; flex-direction: column; gap: .7rem; }
.hm-life__who {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); text-transform: uppercase; font-size: .9rem; letter-spacing: .03em;
}
.hm-life__who .hm-mark { width: 14px; height: 14px; gap: 1.5px; }
.hm-life__half ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.hm-life__half li {
  padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: .82rem; white-space: nowrap;
}
.hm-life__repeat { position: absolute; left: 1.1rem; bottom: .75rem; }
.hm-life__repeat::before { content: "\21BB"; margin-right: .4rem; color: var(--accent); }

.hm-insight__fig {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.7rem; line-height: 1; color: var(--accent); margin-bottom: .8rem;
}
.hm-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-insight { border-left-color: var(--accent); }
.hm-insight:hover { transform: translateY(-2px); }

.hm-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 2rem; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius-lg);
}
.hm-cta h2 { margin-bottom: .3rem; }
.hm-cta p { margin: 0; max-width: 60ch; }

@keyframes hm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hm-flow { to { background-position: 0 20px; } }
@media (prefers-reduced-motion: reduce) {
  .hm-hero__text > *, .hm-flow, .hm-link { animation: none; }
}
@media (max-width: 980px) {
  .hm-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hm-hero { grid-template-columns: 1fr; }
  .hm-life { grid-template-columns: 1fr; }
  .hm-life__loop { grid-template-columns: 1fr; }
  .hm-cta { flex-direction: column; align-items: flex-start; }
}
/* On a phone the two columns cannot sit side by side, so each row stacks
   and every answer is labelled with the console it belongs to. */
@media (max-width: 650px) {
  .hm-insights { grid-template-columns: 1fr; }
  .hm-compare thead { display: none; }
  .hm-compare tr, .hm-compare th[scope="row"], .hm-compare td { display: block; width: auto; }
  .hm-compare tr { border-bottom: 1px solid var(--line); padding: .4rem 0; }
  .hm-compare tbody tr:last-child { border-bottom: 0; }
  .hm-compare th[scope="row"], .hm-compare td { border: 0; padding: .35rem .85rem; }
  .hm-compare td::before {
    display: block; margin-bottom: .1rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  }
  .hm-compare td:nth-child(2)::before { content: "Return System"; }
  .hm-compare td:nth-child(3)::before { content: "Service Console"; }
}