/* LunoLake site styles.
   The visual world is "The engineering drawing" in the Drafting Cobalt palette.
   Every named rule this file obeys is written down in DESIGN.md; read that before
   changing a colour, a size step, or anything about the two grounds. */
:root {
  --blue: #0F2F6E;        /* blueprint sheet */
  --blue-edge: #0B2458;   /* sheet edge / darker zone */
  --cobalt: #1747C8;      /* interactive, ink on paper */
  --ink: #0B1B3F;         /* deep ink band */
  --ice: #C0E9FD;         /* brand ice — wordmark, accents */
  --paper: #F8FAFC;       /* white drawing sheet */
  --paper-line: #C6D3E4;  /* rules on paper */
  --tint: #A9C3E8;        /* secondary text on blue, tinted from hue */
  --ink-soft: #40507A;    /* secondary text on paper, tinted */
  --fault: #B3261E;       /* fault on paper grounds */
  --fault-light: #FF8A7A; /* the same fault read on ink and blue grounds */
  --line: rgba(255,255,255,.85);
  --line-soft: rgba(255,255,255,.30);
  --line-faint: rgba(255,255,255,.14);
  --sans: "Saira", "Segoe UI", system-ui, sans-serif;
  --mono: "Spline Sans Mono", Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font: 400 16px/1.6 var(--sans);
  background: var(--blue);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
/* No overflow guard belongs on body: its overflow propagates to the viewport,
   so clipping one axis here kills vertical page scrolling. Any element that
   scales on entrance must hug its own content instead. */
::selection { background: var(--ice); color: var(--ink); }
.sheet-paper ::selection, .sheet-paper::selection { background: var(--cobalt); color: #fff; }
html { scrollbar-color: var(--cobalt) var(--ink); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--cobalt); border: 2px solid var(--ink); }
input, textarea { caret-color: var(--cobalt); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.sheet-paper :focus-visible { outline-color: var(--cobalt); }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ice); color: var(--ink); padding: 10px 18px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
/* The wordmark is the way home, so it is an anchor. Block, or the inline box adds
   line-height air under the drawing; and the focus ring wants room around a mark. */
a.wm { display: block; text-decoration: none; }
a.wm:focus-visible { outline-offset: 6px; }
.wm svg g { fill: currentColor; }
.wm svg { display: block; width: 100%; height: auto; }

/* ---------- drafting lettering ---------- */
.anno {
  font: 500 11.5px/1.5 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
}
.mono { font-family: var(--mono); }

/* ---------- nav ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line-soft);
  background: var(--blue);
}
main section[id] { scroll-margin-top: 84px; }
header.site .wrap {
  display: flex; align-items: center; gap: 28px;
  padding-top: 20px; padding-bottom: 20px;
}
header.site .wm { width: 152px; color: var(--ice); flex: none; }
header.site nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
header.site nav a.plain { text-decoration: none; color: #fff; font-weight: 500; }
header.site nav a.plain:hover { text-decoration: underline; text-decoration-color: var(--ice); }

.btn {
  display: inline-block; border: 0; cursor: pointer;
  font: 600 15px/1 var(--sans); letter-spacing: .02em;
  padding: 14px 26px; text-decoration: none;
  background: var(--ice); color: var(--ink);
  transition: background .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
}
.btn:hover { background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.28); }
.btn.on-paper { background: var(--cobalt); color: #fff; }
.btn.on-paper:hover { background: var(--blue); box-shadow: 0 2px 14px rgba(15,47,110,.25); }

/* ---------- sheets ---------- */
section.sheet { position: relative; padding: 88px 0 96px; }
section.sheet-blue { background: var(--blue); color: #fff; }
/* kept as a guard: if two sheets ever share a ground again, they share one measure
   of space instead of stacking two sheets worth of padding */
section.sheet-blue:has(+ section.sheet-blue),
section.sheet-paper:has(+ section.sheet-paper) { padding-bottom: 40px; }
section.sheet-blue + section.sheet-blue,
section.sheet-paper + section.sheet-paper { padding-top: 52px; }
section.sheet-paper { background: var(--paper); color: #14181D; }

h1, h2 { font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1.06; max-width: 40ch; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.12; max-width: 26ch; }
.sub { font-size: 18px; line-height: 1.65; max-width: 64ch; color: var(--tint); margin-top: 14px; }
.sheet-paper .sub { color: var(--ink-soft); }

/* ---------- hero ---------- */
section.hero { padding-top: 48px; }
.hero .wrap { display: flex; flex-direction: column; gap: 32px; }
.hero-drawing { position: relative; }
.hero-drawing svg { width: 100%; height: auto; }
.hero-drawing svg.drawing-desktop { display: block; }
.hero-drawing svg.drawing-mobile { display: none; }

/* line-draw: the page's one authored motion moment */
@media (prefers-reduced-motion: no-preference) {
  .draw path.wire {
    stroke-dasharray: 900; stroke-dashoffset: 900;
    animation: draw 1.4s cubic-bezier(.16,1,.3,1) forwards;
  }
  .draw path.wire.w2 { animation-delay: .25s; }
  .draw path.wire.w3 { animation-delay: .5s; }
  .draw path.wire.w4 { animation-delay: .9s; }
  .draw .head { opacity: 0; animation: appear .3s ease-out forwards; animation-delay: 1.5s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes appear { to { opacity: 1; } }
}

/* scroll-triggered drafting motion: wires draw, stamps press, rows rise.
   Gated on html.js so a no-JS visit shows everything; reduced motion shows everything. */
@media (prefers-reduced-motion: no-preference) {
  html.js .in .press { animation: press .32s cubic-bezier(.2,1.2,.4,1) both; }
  html.js .in .press.d1 { animation-delay: .12s; }
  html.js .in .press.d2 { animation-delay: .24s; }
  html.js .in .press.d3 { animation-delay: .36s; }
  html.js .in .press.d4 { animation-delay: .48s; }
  @keyframes press { from { transform: scale(1.18); } to { transform: scale(1); } }
  html.js .cell.done .tick path { animation: tickdraw .24s cubic-bezier(.16,1,.3,1) forwards; }
  @keyframes tickdraw { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
  html.js .signoff-progress .bar i { transition: transform .3s cubic-bezier(.16,1,.3,1); }
  html.js .form-ok.show .received { animation: press .32s cubic-bezier(.2,1.2,.4,1) both; }
  html.js .in .rise { animation: risein .55s cubic-bezier(.16,1,.3,1) both; }
  @keyframes risein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  html.js .in .rise.d1 { animation-delay: .12s; }
  html.js .in .rise.d2 { animation-delay: .24s; }
  html.js .in .rise.d3 { animation-delay: .36s; }
  html.js .in .rise.d4 { animation-delay: .48s; }
  html.js .in .rise.d5 { animation-delay: .6s; }
}
.hp { position: absolute; left: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* ---------- title block ---------- */
.titleblock {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid var(--line);
  background: rgba(11,27,63,.35);
}
.titleblock > div {
  padding: 18px 22px;
  border-left: 1px solid var(--line-soft);
  display: flex; align-items: center;
}
.titleblock > div:first-child { border-left: 0; }
.titleblock .val { font: 500 15px/1.4 var(--sans); }
.titleblock .val.mono { font: 500 14px/1.4 var(--mono); }


/* revision table */

/* ---------- detail plates ---------- */
/* four operations as one drawn run on the paper sheet: stations on a line,
   each segment reaching the next balloon and stopping at the last */
.ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 58px; }
.op { position: relative; padding-top: 54px; }
.op::before {
  content: ""; position: absolute; top: 17px; left: 42px; right: -24px;
  border-top: 1px solid var(--paper-line);
}
.op:last-child::before { content: none; }
.op .no {
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--cobalt); background: var(--paper);
  display: grid; place-items: center;
  font: 600 14px/1 var(--mono); color: var(--cobalt);
}
.op h3 { font: 600 19px/1.3 var(--sans); letter-spacing: .01em; margin-bottom: 10px; color: #14181D; }
.op p { color: var(--ink-soft); font-size: 15.5px; }
.op p b { color: #14181D; font-weight: 600; }
.op p a { color: var(--cobalt); font-weight: 500; }
/* ---------- Detail A: the translation bench ---------- */
.bx-bench {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 60px; row-gap: 16px; margin-top: 48px; align-items: start;
}
.bx-wire { grid-column: 1; grid-row: 1; }
.bx-rec { grid-column: 2; grid-row: 1; }
.bx-verdict { grid-column: 2; grid-row: 2; }
/* A grid item defaults to min-width:auto, so a track grows to its content's
   min-content width and the panels overflow instead of the wire scrolling. */
.bx-wire, .bx-rec, .bx-verdict { min-width: 0; }
.bx-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bx-panel-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 500 11.5px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.bx-panel-h .hint { letter-spacing: .04em; text-transform: none; color: var(--tint); font-size: 12.5px; }

/* wire side */
.bx-wire { border: 1px solid var(--line-soft); background: var(--ink); padding: 22px 24px 24px; }
.bx-wire .bx-panel-h { color: var(--ice); }
.bx-seg {
  font: 400 13px/1.9 var(--mono); color: var(--ice);
  padding: 2px 8px; margin: 0 -8px; border: 1px solid transparent; white-space: nowrap;
}
.bx-wire-scroll { overflow-x: auto; padding: 0 8px 4px; margin: 0 -8px; }
.bx-seg .c { color: var(--tint); }
.bx-seg.lit { border-color: var(--line-soft); background: rgba(23,71,200,.22); }
.bx-seg.bad { border-color: var(--fault-light); background: rgba(179,38,30,.28); }
html.js .bx-seg[data-target] { cursor: default; }
.bx-v {
  color: #fff; font-weight: 500;
  border-bottom: 1px dashed var(--tint); padding: 0 1px;
  min-width: 1ch; display: inline-block;
}
.bx-v:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.bx-v[aria-invalid="true"] { border-bottom-color: var(--fault-light); }
html.js .bx-v { cursor: text; }
.bx-v:hover { border-bottom-color: var(--ice); }
.bx-v:focus { background: var(--cobalt); border-bottom-color: #fff; color: #fff; }
.bx-seg.bad .bx-v { border-bottom-color: var(--fault-light); }
.bx-wire-foot { margin-top: 18px; font: 500 11px/1.7 var(--mono); letter-spacing: .08em; color: var(--tint); }
/* Segments never wrap, so a narrow panel cuts the wire. Shown only when the
   scroller is actually cut, which only measurement can tell. */
.cut-note { display: none; }
.bx-wire.is-cut .cut-note { display: inline; color: var(--ice); }

/* record side */
.bx-rec { border: 1px solid var(--paper-line); background: var(--paper); padding: 22px 24px 24px; align-self: start; }
.bx-rec .bx-panel-h { color: #14181D; border-bottom-color: var(--paper-line); }
.bx-rec .bx-panel-h .hint { color: var(--ink-soft); }
.bx-f { padding: 9px 0; border-bottom: 1px solid var(--paper-line); }
.bx-f-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bx-f .lbl { font: 500 11px/1.6 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.bx-f .src { font: 500 11px/1.6 var(--mono); letter-spacing: .06em; color: #5A6B8F; }
.bx-f .val { font: 500 16px/1.5 var(--sans); color: #14181D; font-variant-numeric: tabular-nums; }
.bx-rec .bx-f:last-of-type { border-bottom: 0; padding-bottom: 0; }
.bx-f.lit { background: rgba(23,71,200,.07); box-shadow: inset 0 0 0 1px var(--cobalt); padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; }
.bx-f.bad .val { color: var(--fault); }
.bx-f .why { display: none; font: 500 12px/1.5 var(--sans); color: var(--fault); margin-top: 3px; }
.bx-f.bad .why { display: block; }
.bx-lines { width: 100%; border-collapse: collapse; margin-top: 4px; }
.bx-lines th {
  text-align: left; font: 500 11px/1.6 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); padding: 8px 10px 6px 0; border-bottom: 1px solid #14181D;
}
.bx-lines td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--paper-line); font-size: 14.5px; color: #14181D; }
.bx-lines td.n, .bx-lines td.q { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.bx-lines tr.lit td { background: rgba(23,71,200,.07); }
.bx-lines tr.bad td.q { color: var(--fault); font-weight: 600; }
.bx-verdict {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--paper-line);
  padding: 14px 18px;
}
.bx-stamp {
  border: 2px solid currentColor; padding: 5px 14px 4px;
  font: 600 13px/1.4 var(--mono); letter-spacing: .16em;
  transform: rotate(-2.5deg);
}
.bx-stamp.ok { color: var(--cobalt); }
.bx-stamp.no { color: var(--fault); }
.bx-verdict .code { font: 500 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--ink-soft); }
.bx-cap { margin-top: 26px; font: 500 11px/1.7 var(--mono); letter-spacing: .08em; color: var(--tint); }
@media (prefers-reduced-motion: no-preference) {
  .bx-f .val, .bx-lines td.q { transition: color .2s ease-out; }
  .bx-stamp { transition: color .2s ease-out; }
  .bx-leaders path.ld { animation: ldraw .18s cubic-bezier(.16,1,.3,1) both; }
  @keyframes ldraw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
}
@media (max-width: 1000px) {
  .bx-bench { grid-template-columns: 1fr; row-gap: 22px; }
  .bx-wire, .bx-rec, .bx-verdict { grid-column: 1; grid-row: auto; }
  .bx-leaders { display: none; }
}
@media (max-width: 760px) {
    /* The hand-off gives up its rules before its words. */
    .onward { flex-direction: column; gap: 20px; margin-top: 56px; }
    .onward-line { width: 100%; flex: none; }
    .onward-copy { max-width: none; }
    .point { grid-template-columns: 34px 1fr; gap: 16px; }
  .bx-wire, .bx-rec { padding: 18px 16px 20px; }
  .bx-seg { font-size: 12px; }
}

/* ---------- parts list ---------- */
.bom { margin-top: 52px; border: 1px solid var(--paper-line); background: #fff; overflow-x: auto; }
.bom table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.bom th {
  text-align: left; padding: 14px 20px;
  border-bottom: 1px solid #14181D; color: #14181D;
  font: 500 11.5px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase;
}
.bom td { padding: 16px 20px; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.bom tr:last-child td { border-bottom: 0; }
.bom td.num { font: 500 14px/1.6 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bom td.doc { font: 600 15px/1.6 var(--mono); color: var(--cobalt); white-space: nowrap; }
.bom td.dir { white-space: nowrap; color: var(--ink-soft); }
.bom td.rem { color: #14181D; }
.bom tr.spare td { border-top: 1px dashed var(--paper-line); color: var(--ink-soft); }
.bom tr.spare td.doc { color: var(--ink-soft); letter-spacing: .04em; }

/* section closing notes. These lost their rules when the figures section was cut;
   restored here with more room above, since they now follow dense tables. */
.figs-note { margin-top: 42px; max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.figs-note b { color: var(--cobalt); font-weight: 600; }
.figs-note a { color: var(--cobalt); font-weight: 500; }
.sheet-blue .figs-note { color: var(--tint); }
.sheet-blue .figs-note b { color: #fff; }
.sheet-blue .figs-note a { color: var(--ice); }

/* ---------- schedules ---------- */
.schedules { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 46px; }
/* Lets the track shrink past the table's min-content so .bom scrolls instead. */
.schedule { min-width: 0; }
.schedule h3 {
  font: 600 12.5px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 12px;
}
.schedule .bom { margin-top: 0; }
.stamp {
  display: inline-block; border: 1.5px solid currentColor; padding: 3px 9px 2px;
  font: 600 11px/1.5 var(--mono); letter-spacing: .1em; white-space: nowrap;
}
.stamp.svc { color: var(--cobalt); }
.stamp.open { color: var(--ink-soft); border-style: dashed; }

.bom a { color: var(--cobalt); text-decoration-thickness: 1px; }
.bom a:hover { text-decoration-thickness: 2px; }

/* ---------- supervision: tracker detail + general notes ---------- */
.tracker-wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; margin-top: 52px; align-items: start; }
.tracker-panel { border: 1px solid var(--line-soft); background: rgba(11,27,63,.35); padding: 24px 26px 22px; }
.tp-head {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.tp-title { font: 600 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tp-pill { border: 1.5px solid var(--ice); color: var(--ice); font: 600 11px/1.5 var(--mono); padding: 4px 12px 3px; letter-spacing: .12em; }
.tp-step { border: 1px solid var(--line-faint); margin-top: 16px; padding: 14px 18px 16px; }
.tp-step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tp-step-name { font: 500 12.5px/1.5 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.tp-state { font: 600 11px/1.6 var(--mono); letter-spacing: .1em; padding: 2px 9px 1px; }
.tp-state.done { background: var(--ice); color: var(--ink); }
.tp-state.prog { border: 1px solid var(--tint); color: var(--tint); }
.tp-row {
  display: flex; justify-content: space-between; gap: 12px;
  font: 400 12px/1.7 var(--mono); color: var(--tint); margin-top: 9px;
}
.tp-row .val { color: var(--ice); }
.tp-row.child { margin-left: 20px; padding-left: 14px; border-left: 1px solid var(--line-faint); margin-top: 6px; }
.tp-cap { margin-top: 18px; font: 500 11px/1.7 var(--mono); letter-spacing: .08em; color: var(--tint); }
.gnotes h3 {
  font: 600 12.5px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: #fff; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}
.gnotes ul { list-style: none; }
.gnotes li {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line-faint);
  font-size: 14.5px; line-height: 1.6; color: var(--tint);
}
.gnotes li b { font: 600 11.5px/1.9 var(--mono); color: var(--ice); font-weight: 600; }
.gnotes li strong { color: #fff; font-weight: 500; }

/* ---------- spec plate (pricing) ---------- */
.spec {
  margin-top: 56px; border: 1px solid #14181D;
  display: grid; grid-template-columns: 1fr 1.3fr;
}
.spec .rated {
  padding: 38px 38px 34px; border-right: 1px solid var(--paper-line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
}
/* inline-block so the box hugs the figure: a block box would be the column's
   full width, and the press scale would then throw it outside the sheet. */
.spec .amount { display: inline-block; font: 600 clamp(2.6rem, 4.4vw, 3.8rem)/1 var(--sans); letter-spacing: -.02em; }
.spec .per { color: var(--ink-soft); font-size: 16px; margin-top: 12px; max-width: 24ch; }
.spec .terms { color: var(--ink-soft); font-size: 15px; margin-top: 14px; max-width: 32ch; }
.spec dl { display: grid; grid-template-columns: 190px 1fr; align-content: start; }
.spec dt {
  padding: 18px 24px 18px 30px; border-bottom: 1px solid var(--paper-line);
  color: var(--ink-soft);
}
.spec dd {
  padding: 18px 30px 18px 0; border-bottom: 1px solid var(--paper-line);
  font-weight: 500;
}
.spec dt:last-of-type, .spec dd:last-of-type { border-bottom: 0; }
.spec dd .mono { font-size: 14.5px; }

/* ---------- sign-off form ---------- */
.signoff-progress {
  display: flex; align-items: center; gap: 16px; margin-top: 52px;
}
.signoff-progress .bar {
  position: relative; flex: 1; height: 9px;
  border-left: 1px solid var(--paper-line); border-right: 1px solid var(--paper-line);
}
.signoff-progress .bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px;
  border-top: 1px solid var(--paper-line);
}
.signoff-progress .bar i {
  position: absolute; left: 0; right: 0; top: 4px;
  border-top: 1px solid var(--cobalt);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}
.signoff-progress .count {
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.signoff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #14181D; background: #fff; margin-top: 14px; }
.cell { border-top: 1px solid var(--paper-line); padding: 16px 20px 14px; position: relative; }
.cell:nth-child(-n+2) { border-top: 0; }
.cell:nth-child(2n) { border-left: 1px solid var(--paper-line); }
.cell.full { grid-column: 1 / -1; border-left: 0; }
.cell label { display: block; color: var(--ink-soft); margin-bottom: 6px; }
.cell input, .cell textarea {
  width: 100%; border: 0; background: transparent;
  font: 500 17px/1.5 var(--sans); color: #14181D;
  padding: 2px 0 4px;
}
.cell textarea { min-height: 120px; resize: vertical; }
.cell input::placeholder, .cell textarea::placeholder { color: #4E5F82; }
.cell .tick {
  position: absolute; top: 14px; right: 16px; width: 18px; height: 18px;
  fill: none; stroke: var(--cobalt); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0;
}
.cell .tick path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.cell.done .tick { opacity: 1; }
.cell.done .tick path { stroke-dashoffset: 0; }
.cell .err { display: none; color: var(--fault); font-size: 13px; margin-top: 4px; }
.cell.bad { box-shadow: inset 0 0 0 2px var(--fault); }
.cell.bad .err { display: block; }
.signoff-actions { margin-top: 26px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.signoff-actions .alt { color: var(--ink-soft); }
.signoff-actions .alt a { color: var(--cobalt); font-weight: 500; }
.form-note { margin-top: 18px; color: var(--ink-soft); font-size: 14px; }
.form-ok {
  display: none; margin-top: 30px; color: var(--ink-soft); max-width: 62ch;
  align-items: center; gap: 16px;
}
.form-ok.show { display: flex; }
.form-ok .received {
  flex: none; border: 2px solid var(--cobalt); color: var(--cobalt);
  font: 600 13px/1.4 var(--mono); letter-spacing: .16em;
  padding: 5px 14px 4px; transform: rotate(-2.5deg);
}
/* The refusal is the same plate with the fault ink, so a message that did not
   leave is reported as plainly as one that did. */
.form-err {
  display: none; margin-top: 30px; color: var(--fault); max-width: 62ch;
  align-items: center; gap: 16px;
}
.form-err.show { display: flex; }
.form-err .refused {
  flex: none; border: 2px solid currentColor;
  font: 600 13px/1.4 var(--mono); letter-spacing: .16em;
  padding: 5px 14px 4px; transform: rotate(-2.5deg);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.outcome-back { margin-top: 34px; }
.outcome-back a { color: var(--ice); text-underline-offset: 4px; }

/* ---------- reach us: the form is the object, the events are its note ---------- */
/* Scoped to the wrap: the footer has its own .reach block, and an unscoped
   rule here turns that one into a two column grid. */
.wrap.reach { display: grid; grid-template-columns: 1.55fr 1fr; column-gap: 64px; row-gap: 44px; align-items: start; }
.reach-meet { border-left: 1px solid var(--line-faint); padding-left: 40px; scroll-margin-top: 84px; }
.reach-meet h3 {
  font: 500 11.5px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tint); padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.meets { list-style: none; }
.meets li { padding: 18px 0; border-bottom: 1px solid var(--line-faint); display: grid; gap: 5px; }
.meets a { font: 600 14px/1.4 var(--mono); letter-spacing: .04em; color: var(--ice); }
.meets .when { font: 600 15px/1.4 var(--sans); color: #fff; font-variant-numeric: tabular-nums; }
.meets .where { font-size: 14.5px; color: var(--tint); }
.meets .stamp { justify-self: start; margin-top: 5px; }
.reach-meet .note { margin-top: 20px; font-size: 14.5px; line-height: 1.6; color: var(--tint); }

/* the sign-off plate now sits on the blue sheet, so its furniture takes the blue palette */
.sheet-blue .signoff-grid { border-color: var(--paper-line); }
.sheet-blue .signoff-progress .bar,
.sheet-blue .signoff-progress .bar::before { border-color: var(--line-soft); }
.sheet-blue .signoff-progress .bar i { border-top-color: var(--ice); }
.sheet-blue .signoff-progress .count { color: var(--tint); }
.sheet-blue .signoff-actions .alt { color: var(--tint); }
.sheet-blue .signoff-actions .alt a { color: var(--ice); }
.sheet-blue .form-ok { color: var(--tint); }
.sheet-blue .form-ok .received { border-color: var(--ice); color: var(--ice); }
/* fault reads light on a dark ground: cobalt's counterpart is coral, not red */
.sheet-blue .form-err { color: var(--fault-light); }
.sheet-blue .stamp.svc { color: var(--ice); }

/* ---------- footer ---------- */
footer.site { background: var(--ink); color: #fff; padding: 64px 0 56px; }
footer.site .wrap { display: grid; grid-template-columns: 1fr auto; gap: 34px 48px; align-items: start; }
footer.site .wm { width: 136px; color: var(--ice); }
footer.site p { color: var(--tint); font-size: 14.5px; max-width: 44ch; margin-top: 16px; }
footer.site a { color: #fff; }
footer.site .reach { text-align: right; }
footer.site .reach .anno { display: block; color: var(--tint); margin-bottom: 8px; }
footer.site .reach a { font-size: 17px; font-weight: 500; text-underline-offset: 5px; }
footer.site .legal {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 22px;
  border-top: 1px solid var(--line-faint);
  display: flex; gap: 26px; flex-wrap: wrap;
  font: 400 12px/1.6 var(--mono); color: var(--tint);
}

/* ---------- nav: which page you are on ---------- */
header.site nav a.plain.here { text-decoration: underline; text-decoration-color: var(--ice);
  text-decoration-thickness: 2px; }

/* ---------- the hand-off between pages ---------- */
/* One device for every page-to-page link, which is what makes three pages read
   as one document. It is the dimension line the drawings are captioned with. */
.onward { display: flex; align-items: center; gap: 26px; margin-top: 76px;
  text-decoration: none; color: inherit; }
.onward-line { flex: 1; display: flex; align-items: center; min-width: 0; }
.onward-line .rule { flex: 1; height: 1px; background: var(--line-soft); }
.onward-line .tick { width: 1px; height: 13px; background: var(--line-soft); flex: none; }
.onward-copy { flex: none; text-align: center; max-width: 46ch; }
.onward-copy .anno { display: block; color: var(--tint); }
.onward-label { display: block; margin-top: 8px; font: 600 26px/1.2 var(--sans);
  letter-spacing: -.01em; color: #fff; text-underline-offset: 6px; }
.onward:hover .onward-label { text-decoration: underline; text-decoration-color: var(--ice); }
.onward-why { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--tint); }
.sheet-paper .onward-line .rule, .sheet-paper .onward-line .tick { background: var(--paper-line); }
.sheet-paper .onward-copy .anno, .sheet-paper .onward-why { color: var(--ink-soft); }
.sheet-paper .onward-label { color: #14181D; }
.sheet-paper .onward:hover .onward-label { text-decoration-color: var(--cobalt); }

/* ---------- plain-language pages ---------- */
/* A wider measure than .sub, because these pages explain rather than assert. */
.lede { font-size: 20px; line-height: 1.6; max-width: 62ch; margin-top: 16px; color: var(--tint); }
.sheet-paper .lede { color: var(--ink-soft); }

/* Numbered points that are prose, not stations on a run: the ops component is a
   drawn line and would lie about these being sequential machine steps. */
.points { margin-top: 46px; display: grid; gap: 30px; max-width: 78ch; }
.point { display: grid; grid-template-columns: 44px 1fr; gap: 22px; align-items: start; }
.point .n { font: 500 14px/1.6 var(--mono); letter-spacing: .06em; color: var(--cobalt);
  padding-top: 3px; }
.sheet-blue .point .n { color: var(--ice); }
.point h3 { font: 600 19px/1.35 var(--sans); letter-spacing: .01em; margin-bottom: 8px; }
.point p { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.sheet-blue .point p { color: var(--tint); }
.point p b, .point p strong { color: #14181D; font-weight: 600; }
.sheet-blue .point p b, .sheet-blue .point p strong { color: #fff; }

/* Two drawn states side by side, for the page that has to show a before. */
.compare { margin-top: 50px; display: grid; grid-template-columns: 1fr; gap: 44px; }
.compare figure { margin: 0; }
.compare svg { display: block; width: 100%; height: auto; }
.compare figcaption { margin-top: 18px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.sheet-blue .compare figcaption { color: var(--tint); }
.compare .anno { display: block; margin-bottom: 14px; color: var(--ink-soft); }
.sheet-blue .compare .anno { color: var(--tint); }

/* The glossary is a parts list of words, so it is the .bom shell with a wider
   term column and prose in the definition. */
.bom td.term { font: 600 15px/1.6 var(--mono); color: var(--cobalt); white-space: nowrap; }
.bom td.said { color: var(--ink-soft); }

/* The parts list shell, swapped for a blue ground per the Ink Swap Rule, so a
   table can close a blue sheet without a white slab landing on it. */
.sheet-blue .bom { background: transparent; border-color: var(--line-soft); }
.sheet-blue .bom th { color: #fff; border-bottom-color: var(--line); }
.sheet-blue .bom td { border-bottom-color: var(--line-faint); color: #fff; }
.sheet-blue .bom td.term { color: var(--ice); }
.sheet-blue .bom td.said { color: var(--tint); }
.sheet-blue .bom tr:last-child td { border-bottom: 0; }

/* The operations run, held vertical at every width. Five stations with real
   paragraphs will not survive five columns of 227px, and the drawn line is the
   point of the component, so this reuses the same geometry the narrow width
   already switches to rather than inventing a second graphic. */
.ops { list-style: none; }
.ops.stacked { grid-template-columns: 1fr; gap: 0; }
.ops.stacked .op { padding-top: 0; padding-left: 54px; padding-bottom: 34px; }
.ops.stacked .op:last-child { padding-bottom: 0; }
.ops.stacked .op::before {
  top: 42px; bottom: -8px; left: 17px; right: auto;
  border-top: 0; border-left: 1px solid var(--paper-line);
}
.ops.stacked .op p { max-width: 76ch; }

/* The way in for a reader the rest of the page would lose. Placed in the hero
   because that is where someone who does not know the vocabulary gives up. */
.door { margin-top: 22px; font-size: 16px; line-height: 1.6; color: var(--tint); max-width: 60ch; }
.door a { color: var(--ice); font-weight: 500; }

/* Two authored drawings, not one scaled. The wide one is a 1060 unit viewBox: at
   375px it renders 335px across and its 13.5px lettering comes out at 4.3px, which
   is unreadable. Swapped at 1000px, the same threshold and the same reason as the
   hero pair. */
.compare svg.dwg-narrow { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .compare svg.dwg-wide { display: none; }
    .compare svg.dwg-narrow { display: block; max-width: 400px; margin: 0 auto; }
  .ops { grid-template-columns: 1fr; gap: 0; }
  .op { padding-top: 0; padding-left: 54px; padding-bottom: 34px; }
  .op:last-child { padding-bottom: 0; }
  .op::before { top: 42px; bottom: -8px; left: 17px; right: auto; border-top: 0; border-left: 1px solid var(--paper-line); }
  .schedules { grid-template-columns: 1fr; }
  .tracker-wrap { grid-template-columns: 1fr; }
  .titleblock > div { border-top: 1px solid var(--line-soft); }
  .titleblock > div:nth-child(-n+2) { border-top: 0; }
  .titleblock > div:nth-child(2n+1) { border-left: 0; }
  .hero-drawing svg.drawing-desktop { display: none; }
  .hero-drawing svg.drawing-mobile { display: block; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  section.sheet { padding: 64px 0 72px; }
  header.site .wm { width: 128px; }
  header.site .wrap { gap: 16px; }
  header.site nav { gap: 16px; margin-left: auto; }
  .btn { padding: 12px 18px; }
  .spec { grid-template-columns: 1fr; }
  .spec .rated { border-right: 0; border-bottom: 1px solid var(--paper-line); padding: 26px 24px; }
  .spec dl { grid-template-columns: 1fr; }
  .spec dt { padding: 14px 24px 0; border-bottom: 0; }
  .spec dd { padding: 4px 24px 14px; border-bottom: 0; }
  .bom td, .bom th { padding-right: 12px; }
  .wrap.reach { grid-template-columns: 1fr; }
  .reach-meet { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-faint); padding-top: 30px; }
  .signoff-grid { grid-template-columns: 1fr; }
  .cell:nth-child(2n) { border-left: 0; }
  .cell:nth-child(2) { border-top: 1px solid var(--paper-line); }
}
@media (max-width: 560px) {
  header.site nav a.plain { display: none; }
  /* A parts list spends its width on padding: buy the fourth column back
     from the gutters rather than making the reader scroll for it. */
  .bom th, .bom td { padding-left: 8px; padding-right: 8px; }
  .bom th:first-child, .bom td:first-child { padding-left: 14px; }
  .bom th:last-child, .bom td:last-child { padding-right: 14px; }
  /* Below this width the UNB envelope, and only it, outruns the panel. Let a
     segment break at its own <wbr> separators and hang the continuation under
     the segment start, the way a printed EDI listing sets it. The first line
     stays put: padding-left 30 minus text-indent 22 is the original 8. */
  /* The interchange envelope needs an 8px face to fit 301px of panel, a third
     under the functional floor, so on a phone it steps aside instead: what is
     left is UNH to UNT, a complete message with every line on one line. */
  .bx-seg.env { display: none; }
  /* The rest still get permission to wrap, because an edited value is one
     unbreakable token and can outrun the panel at any size. */
  .bx-seg { white-space: normal; padding-left: 30px; text-indent: -22px; }
  /* text-indent is inherited, and .bx-v is an inline-block, so each editable
     value would apply the hanging indent again inside itself and land 22px left,
     drawn over the constant text before it. Reset it where it lands. */
  .bx-seg .bx-v { text-indent: 0; }
}