/* ==========================================================================
   TOKENS
   Three plot styles, one ink each. Sizes are drafting text heights and ISO
   128 pen widths, expressed in sheet units (--u = 1% of the sheet's width).
   ========================================================================== */

@font-face { font-family: "Barlow Condensed"; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "B612"; font-weight: 400; font-display: swap; src: url("/assets/fonts/b612-400.woff2") format("woff2"); }
@font-face { font-family: "B612"; font-weight: 700; font-display: swap; src: url("/assets/fonts/b612-700.woff2") format("woff2"); }
@font-face { font-family: "B612"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/b612-400i.woff2") format("woff2"); }
@font-face { font-family: "B612"; font-weight: 700; font-style: italic; font-display: swap; src: url("/assets/fonts/b612-700i.woff2") format("woff2"); }
@font-face { font-family: "B612 Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/b612-mono-400.woff2") format("woff2"); }
@font-face { font-family: "B612 Mono"; font-weight: 700; font-display: swap; src: url("/assets/fonts/b612-mono-700.woff2") format("woff2"); }

/* Derived sizes are declared wherever the sheet unit changes (the root, every
   sheet, the viewer), so they resolve against that unit and lettering scales
   with the sheet the way a plotted drawing does. --tu is the lettering unit:
   7/8 of a sheet unit in sheet mode, so a 1440 px screen letters at 12 px. */
:root, .paper, .viewer__stage {
  --tu: calc(var(--u) * var(--tu-k, 1));
  /* Standard drafting text heights: 3/32", 1/8", 3/16", 1/4", 1/2", 1". */
  --t0: calc(var(--tu) * 1);
  --t1: calc(var(--tu) * 1.3333);
  --t2: calc(var(--tu) * 2);
  --t3: calc(var(--tu) * 2.6667);
  --t4: calc(var(--tu) * 5.3333);
  --t5: calc(var(--tu) * 10.6667);
  /* ISO 128 pens (the root-2 series), scaled for the screen. */
  --pen-13: calc(var(--tu) * 0.045);
  --pen-18: calc(var(--tu) * 0.062);
  --pen-25: calc(var(--tu) * 0.085);
  --pen-35: calc(var(--tu) * 0.12);
  --pen-50: calc(var(--tu) * 0.17);
  --pen-70: calc(var(--tu) * 0.24);
  --pen-100: calc(var(--tu) * 0.34);
  --pen-140: calc(var(--tu) * 0.48);
}

:root {
  /* Lettering. Titles descend from highway signage; notes from a cockpit. */
  --f-title: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-letter: "B612", "Segoe UI", sans-serif;
  --f-data: "B612 Mono", ui-monospace, monospace;

  --bar-h: 2.5rem;
  --gutter: clamp(0.75rem, 2.4vw, 2.25rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Outside a sheet, one unit is a fixed 12px. */
  --u: 0.75rem;
}

/* BLUEPRINT: ferro-gallic cyanotype, white line on Prussian blue (1842). */
:root,
:root[data-plot="blueprint"] {
  color-scheme: dark;
  --desk: #08182d;
  --paper: #123f78;
  --paper-edge: #0e3365;
  --ink: #edf4fd;
  --ink-2: color-mix(in srgb, var(--ink) 68%, var(--paper));
  --ink-3: color-mix(in srgb, var(--ink) 26%, var(--paper));
  --ink-4: color-mix(in srgb, var(--ink) 11%, var(--paper));
  --mark: #ffd35c;
  --mark-ink: #1b1400;
  --link: var(--ink);
  --focus: #ffd35c;
  --chrome: #06111f;
  --chrome-ink: #cfe0f6;
  --chrome-ink-2: #7f9cc2;
  --chrome-line: #1d3a62;
  --c-water: var(--ink); --c-sewer: var(--ink); --c-gas: var(--ink);
  --c-power: var(--ink); --c-comms: var(--ink); --c-storm: var(--ink);
  --l-text: var(--ink); --l-dim: var(--ink-2); --l-center: var(--ink-2);
  --l-hidden: var(--ink-2); --l-hatch: var(--ink-3); --l-topo: var(--ink-2);
  --l-grid: var(--ink-4);
}

/* BOND: a modern monochrome plot. Black ink, red pencil for markups. */
:root[data-plot="bond"] {
  color-scheme: light;
  --desk: #cfd4d8;
  --paper: #fdfdfb;
  --paper-edge: #e8eaea;
  --ink: #000000;
  --ink-2: #737373;
  --ink-3: #b4b4b4;
  --ink-4: #e6e6e6;
  --mark: #d4201b;
  --mark-ink: #ffffff;
  --link: #000000;
  --focus: #d4201b;
  --chrome: #f2f3f4;
  --chrome-ink: #1d1f22;
  --chrome-ink-2: #5f656c;
  --chrome-line: #c3c8cd;
  --c-water: var(--ink); --c-sewer: var(--ink); --c-gas: var(--ink);
  --c-power: var(--ink); --c-comms: var(--ink); --c-storm: var(--ink);
  --l-text: var(--ink); --l-dim: var(--ink-2); --l-center: var(--ink-2);
  --l-hidden: var(--ink-2); --l-hatch: var(--ink-3); --l-topo: var(--ink-2);
  --l-grid: var(--ink-4);
}

/* MODEL: CAD model space. Layers keep their AutoCAD Color Index colors and
   buried utilities wear the APWA marking colors a locator paints on the street. */
:root[data-plot="model"] {
  color-scheme: dark;
  --desk: #161b21;
  --paper: #212830;
  --paper-edge: #2b333d;
  --ink: #ffffff;
  --ink-2: #a9b1ba;
  --ink-3: #5d6772;
  --ink-4: #323b46;
  --mark: #ff3b30;
  --mark-ink: #ffffff;
  --link: #3ff4ff;
  --focus: #ffff00;
  --chrome: #2a313a;
  --chrome-ink: #e6e9ec;
  --chrome-ink-2: #98a2ad;
  --chrome-line: #3b4550;
  --c-water: #2f8cff; --c-sewer: #24d65a; --c-gas: #ffe000;
  --c-power: #ff3b30; --c-comms: #ff9a1f; --c-storm: #3ff4ff;
  --l-text: #ffffff; --l-dim: #3ff4ff; --l-center: #ff3b30;
  --l-hidden: #ff4dff; --l-hatch: #6b7682; --l-topo: #c4a46b;
  --l-grid: #313a44;
}

/* ==========================================================================
   BASE: reset, the desk the sheets lie on, links, focus.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ol, ul, dl, dd, figure, table, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

html { background: var(--desk); }
body {
  min-height: 100vh;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--f-letter);
  font-size: 1rem;
  line-height: 1.4;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}

a { color: var(--link); text-decoration-thickness: max(1px, var(--pen-18)); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: max(1.5px, var(--pen-35)); }

:focus-visible {
  outline: max(2px, var(--pen-50)) solid var(--focus);
  outline-offset: 2px;
}

::selection { background: var(--mark); color: var(--mark-ink); }

.skip {
  position: fixed; left: 0.75rem; top: 0.75rem; z-index: 100;
  padding: 0.5rem 0.75rem;
  background: var(--chrome); color: var(--chrome-ink);
  font: 700 0.875rem/1 var(--f-letter);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The set: sheets laid on the desk, one after another. */
.set {
  display: grid;
  justify-items: center;
  gap: calc(var(--gutter) * 1.5);
  padding: var(--gutter);
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

/* ==========================================================================
   SHEET: paper, trim, zones, border, field, viewports, drawing titles.
   Sheet mode (wide screens) is a true 3:2 ARCH sheet sized by its width;
   reflow mode (phones, tablets) keeps the vocabulary and stacks the views.
   ========================================================================== */

.sheet { width: 100%; max-width: 1600px; scroll-margin-top: var(--gutter); }

.paper {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--paper-edge);
  --u: 0.75rem;
}

.frame { position: relative; display: grid; border: var(--pen-70) solid var(--ink); }
.field { position: relative; display: grid; gap: var(--u); padding: var(--u); min-width: 0; }

/* Viewports: one drawing, its title beneath. */
.vp { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vp__body { position: relative; flex: 1 1 auto; min-height: 0; }
.vp__body > svg { width: 100%; height: auto; overflow: visible; }
.vp--text .vp__body { overflow: hidden; }
.vp--frame { border: var(--pen-25) solid var(--ink); padding: calc(var(--u) * 0.8); }

/* Drawing title: bubble (detail over sheet), underlined name, scale. */
.dt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: calc(var(--u) * 0.6);
  margin-top: calc(var(--u) * 0.6);
}
.dt__b {
  display: grid;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  width: calc(var(--u) * 3.2);
  aspect-ratio: 1;
  border: var(--pen-50) solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(var(--ink), var(--ink)) center / 100% var(--pen-35) no-repeat;
  font: 700 var(--t0) / 1 var(--f-letter);
}
.dt__b > :first-child { align-self: end; padding-bottom: 0.18em; font-size: 1.15em; }
.dt__b > :last-child { align-self: start; padding-top: 0.25em; font-size: 0.82em; }
.dt__t { display: grid; justify-items: start; }
.dt__name {
  font: 700 var(--t1) / 1.1 var(--f-letter);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 0.2em;
  padding-right: 2.5em;
  border-bottom: var(--pen-70) solid var(--ink);
}
.dt__scale { margin-top: 0.55em; font: 400 var(--t0) / 1 var(--f-letter); text-transform: uppercase; color: var(--ink-2); }

/* -------------------------------------------------------------- reflow -- */
@media (max-width: 1199.98px) {
  .frame { margin: 0.5rem; grid-template-columns: 1fr; }
  .field { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; padding: 0.75rem; gap: 1.5rem; }
  .field > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .tb { border-top: var(--pen-70) solid var(--ink); }
  .vp__body { flex: none; }
}

/* ----------------------------------------------------------- sheet mode -- */
@media (min-width: 1200px) {
  .paper { aspect-ratio: 3 / 2; container-type: inline-size; --u: 1cqw; --tu-k: 0.875; }
  .trim { position: absolute; inset: calc(var(--u) * 0.6); border: var(--pen-25) solid var(--ink); pointer-events: none; }
  .frame {
    position: absolute;
    top: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6);
    bottom: calc(var(--u) * 1.6); left: calc(var(--u) * 2.6);
    grid-template-columns: minmax(0, 1fr) calc(var(--u) * 12);
    grid-template-rows: minmax(0, 1fr);
  }
  .field {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: repeat(16, minmax(0, 1fr));
    padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2);
    gap: calc(var(--u) * 0.9) calc(var(--u) * 1.1);
  }
  .field > * { grid-column: var(--c, auto); grid-row: var(--r, auto); }
  .vp__body > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .vp__body > svg.flow { position: static; height: auto; }
}

/* Zones: numbered columns along the top and bottom, lettered rows along the sides. */
.zones { position: absolute; display: grid; pointer-events: none; font: 400 var(--t0) / 1 var(--f-letter); color: var(--ink); }
.zones > span { display: grid; place-items: center; border-inline-start: var(--pen-25) solid var(--ink); }
.zones > span:first-child { border-inline-start: 0; }
.zones--top, .zones--bottom { left: calc(var(--u) * 2.6); right: calc(var(--u) * 1.6); grid-template-columns: repeat(8, 1fr); height: calc(var(--u) * 1); }
.zones--top { top: calc(var(--u) * 0.6); }
.zones--bottom { bottom: calc(var(--u) * 0.6); }
.zones--left, .zones--right { top: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); grid-template-rows: repeat(6, 1fr); }
.zones--left { left: calc(var(--u) * 0.6); width: calc(var(--u) * 2); }
.zones--right { right: calc(var(--u) * 0.6); width: calc(var(--u) * 1); }
.zones--left > span, .zones--right > span { border-inline-start: 0; border-block-start: var(--pen-25) solid var(--ink); }
.zones--left > span:first-child, .zones--right > span:first-child { border-block-start: 0; }

@media (max-width: 1199.98px) {
  .trim, .zones { display: none; }
  .vp__body:has(> .dwg--wide) { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .vp__body > .dwg--wide { min-width: 760px; }
}

/* ==========================================================================
   TITLE BLOCK: the vertical strip at the right edge of every sheet.
   Firm, seal, revisions, key plan, project, sheet title, data, sheet number.
   ========================================================================== */

.tb { display: grid; align-content: stretch; font: 400 var(--t0) / 1.25 var(--f-letter); min-width: 0; }
.tb > * { padding: calc(var(--u) * 0.45) calc(var(--u) * 0.7); border-block-start: var(--pen-25) solid var(--ink); min-width: 0; }
.tb > :first-child { border-block-start: 0; }

.tb__lbl {
  display: block;
  margin-bottom: 0.5em;
  font: 400 calc(var(--t0) * 0.82) / 1 var(--f-letter);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.tb__firm { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--u) * 0.7); text-decoration: none; color: inherit; }
.tb__firm > span { display: grid; min-width: 0; }
.tb__firm svg { width: calc(var(--u) * 3); height: auto; }
.tb__firm-name { font: 700 var(--t2) / 0.95 var(--f-title); letter-spacing: 0.02em; text-transform: uppercase; }
.tb__firm-sub { margin-top: 0.35em; font-size: calc(var(--t0) * 0.9); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-2); }

.tb__seal { display: grid; place-items: center; }
.tb__seal svg { width: calc(var(--u) * 5.6); height: auto; }

.tb__rev table { width: 100%; table-layout: fixed; font-size: calc(var(--t0) * 0.74); line-height: 1.15; text-transform: uppercase; }
.tb__rev caption { caption-side: top; text-align: start; margin-bottom: 0.5em; font: 400 calc(var(--t0) * 0.82) / 1 var(--f-letter); letter-spacing: 0.05em; color: var(--ink-2); }
.tb__rev th, .tb__rev td { padding: 0.32em 0.3em; border-block-end: var(--pen-18) solid var(--ink-3); text-align: start; vertical-align: top; }
.tb__rev th { font-weight: 700; border-block-end-color: var(--ink); }
.tb__rev th:nth-child(1) { width: 2.4em; }
.tb__rev th:nth-child(2) { width: 5.4em; }
.tb__rev td:nth-child(3) { overflow-wrap: break-word; hyphens: auto; }
.tb__rev .delta { display: inline-grid; place-items: center; width: 1.7em; aspect-ratio: 1.1; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--ink); color: var(--paper); font-size: 0.8em; padding-top: 0.35em; font-weight: 700; }

.tb__key { display: grid; align-content: start; }
.tb__keymap { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 0.3); }
.tb__keymap a {
  display: grid; place-items: center;
  aspect-ratio: 2.2 / 1;
  border: var(--pen-25) solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font: 700 calc(var(--t0) * 0.74) / 1 var(--f-letter);
  white-space: nowrap;
}
.tb__keymap a:hover { background: var(--ink-4); }
.tb__keymap a[aria-current="true"] { background: var(--ink); color: var(--paper); }

.tb__proj p { text-transform: uppercase; }
.tb__proj-name { font: 700 var(--t1) / 1.05 var(--f-title); letter-spacing: 0.03em; }

.tb__title-text { font: 700 calc(var(--t2) * 1.08 * var(--title-fit, 1)) / 0.98 var(--f-title); letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: normal; }

.tb__meta { display: grid; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.7) !important; }
.tb__meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6em; padding: 0.32em 0; border-block-start: var(--pen-18) solid var(--ink-3); min-width: 0; }
.tb__meta > div:first-child { border-block-start: 0; }
.tb__meta dt { font: 400 calc(var(--t0) * 0.78) / 1 var(--f-letter); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.tb__meta dd { font: 700 calc(var(--t0) * 0.86) / 1.1 var(--f-data); text-transform: uppercase; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.tb__no { display: grid; align-content: end; }
.tb__num { font: 700 var(--t4) / 0.86 var(--f-title); letter-spacing: -0.01em; white-space: nowrap; }
.tb__of { margin-top: 0.45em; font: 400 var(--t0) / 1 var(--f-letter); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }

@media (min-width: 1200px) {
  .tb { grid-template-rows: auto auto auto 1fr auto auto auto auto; border-inline-start: var(--pen-50) solid var(--ink); }
  .tb__num { font-size: calc(var(--t4) * var(--num-fit, 1)); }
}

@media (max-width: 1199.98px) {
  .tb { grid-template-columns: 1fr auto; }
  .tb > * { grid-column: 1 / -1; padding: 0.6rem 0.75rem; }
  .tb__seal, .tb__key, .tb__rev, .tb__proj { display: none; }
  .tb__firm { grid-column: 1; }
  .tb__no { grid-column: 2; grid-row: 1; border-block-start: 0; border-inline-start: var(--pen-25) solid var(--ink); align-content: center; text-align: end; }
  .tb__num { font-size: 2.6rem; }
  .tb__firm svg { width: 2.25rem; }
  .tb__firm-name { font-size: 1.35rem; }
  .tb__title-text { font-size: 1.6rem; }
  .tb__meta { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
  .tb__meta > div:nth-child(2) { border-block-start: 0; }
}

/* ==========================================================================
   DRAWING: SVG linework. Every drawing is built so 10 user units = 1 sheet
   unit, which keeps text heights and hatches identical across the set.
   Pens never scale with zoom; they are plotted widths.
   ========================================================================== */

.dwg { color: var(--ink); font-family: var(--f-letter); overflow: visible; }
.dwg text { fill: currentColor; stroke: none; }

/* Pens (ISO 128). */
.pen-13, .pen-18, .pen-25, .pen-35, .pen-50, .pen-70, .pen-100, .pen-140 {
  fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
}
.pen-13 { stroke-width: var(--pen-13); }
.pen-18 { stroke-width: var(--pen-18); }
.pen-25 { stroke-width: var(--pen-25); }
.pen-35 { stroke-width: var(--pen-35); }
.pen-50 { stroke-width: var(--pen-50); }
.pen-70 { stroke-width: var(--pen-70); }
.pen-100 { stroke-width: var(--pen-100); }
.pen-140 { stroke-width: var(--pen-140); }
.cap-butt { stroke-linecap: butt; }

/* Fills come after pens so a shape can carry both. */
.fill-ink { fill: currentColor; }
.fill-paper { fill: var(--paper); }
.fill-none { fill: none; }
.fill-tint { fill: var(--ink-4); }
.fill-tint-2 { fill: var(--ink-3); }

/* Linetypes. Dash lengths are in sheet units so they read the same everywhere. */
.lt-hidden { stroke-dasharray: calc(var(--u) * 0.55) calc(var(--u) * 0.32); }
.lt-center { stroke-dasharray: calc(var(--u) * 1.8) calc(var(--u) * 0.3) calc(var(--u) * 0.3) calc(var(--u) * 0.3); }
.lt-phantom { stroke-dasharray: calc(var(--u) * 1.8) calc(var(--u) * 0.3) calc(var(--u) * 0.3) calc(var(--u) * 0.3) calc(var(--u) * 0.3) calc(var(--u) * 0.3); }
.lt-dot { stroke-dasharray: 0 calc(var(--u) * 0.35); stroke-linecap: round; }
.lt-dash { stroke-dasharray: calc(var(--u) * 1.1) calc(var(--u) * 0.45); }

/* Layers, named after the US National CAD Standard. In MODEL each wears its
   own color index; on paper they share the one ink. */
.ly-text { color: var(--l-text); }
.ly-dim { color: var(--l-dim); }
.ly-center { color: var(--l-center); }
.ly-hidden { color: var(--l-hidden); }
.ly-hatch { color: var(--l-hatch); }
.ly-topo { color: var(--l-topo); }
.ly-grid { color: var(--l-grid); }
.ly-exist { color: var(--ink-2); }
.ly-mark { color: var(--mark); }
.ly-water { color: var(--c-water); }
.ly-sewer { color: var(--c-sewer); }
.ly-gas { color: var(--c-gas); }
.ly-power { color: var(--c-power); }
.ly-comms { color: var(--c-comms); }
.ly-storm { color: var(--c-storm); }

/* Lettering. Sizes are user units: t0 = 3/32", t1 = 1/8", t2 = 3/16", t3 = 1/4". */
.t0, .t-dim, .t-north { font-size: 10px; }
.t1, .t-lbl { font-size: 13.33px; }
.t2, .t-ttl { font-size: 20px; font-weight: 700; }
.t3 { font-size: 26.67px; font-weight: 700; }
.t4 { font-size: 53.33px; font-weight: 700; }
.t-title { font-family: var(--f-title); }
.t-data { font-family: var(--f-data); }
.t-bold { font-weight: 700; }
.t-ital { font-style: italic; }
.t-north { font-weight: 700; }
.t-bub1 { font-size: 12px; font-weight: 700; }
.t-bub2 { font-size: 9px; font-weight: 700; }
.t-ls { letter-spacing: 0.06em; }
.t-mid { text-anchor: middle; }
.t-end { text-anchor: end; }
.t-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.t-ink2 { fill: var(--ink-2) !important; }

.seal { color: var(--ink); }
.seal text { fill: currentColor; font-family: var(--f-letter); }
.seal__ring { font-size: 13.5px; font-weight: 700; letter-spacing: 0.12em; }
.seal__c1 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.seal__c2 { font-family: var(--f-title) !important; font-size: 30px; font-weight: 700; letter-spacing: 0.02em; }
.seal__c3 { font-size: 11px; letter-spacing: 0.1em; }

.bubble-link { cursor: pointer; }
.bubble-link:hover circle, .bubble-link:focus-visible circle { fill: var(--ink-4); }

/* Patterns live in one hidden sprite; their ink follows the hatch layer. */
.patterns { position: absolute; width: 0; height: 0; overflow: hidden; color: var(--l-hatch); }

/* Layer switches flipped from the status bar or the command line. */
html[data-redlines="off"] .ly-mark,
html[data-redlines="off"] .redline { display: none; }
html[data-lwt="off"] .dwg .pen-13, html[data-lwt="off"] .dwg .pen-18, html[data-lwt="off"] .dwg .pen-25,
html[data-lwt="off"] .dwg .pen-35, html[data-lwt="off"] .dwg .pen-50, html[data-lwt="off"] .dwg .pen-70,
html[data-lwt="off"] .dwg .pen-100, html[data-lwt="off"] .dwg .pen-140 { stroke-width: 1px; }
html[data-dims="off"] .ly-dim { display: none; }

/* ==========================================================================
   PARTS: notes, schedules, legends, stamps, redlines, buttons. The pieces a
   drafter reaches for on every sheet.
   ========================================================================== */

/* A note block: underlined heading, numbered notes with hanging indents. */
.notes { font: 400 var(--t1) / 1.38 var(--f-letter); min-width: 0; }
.notes__h, .sched__h, .block__h {
  display: inline-block;
  margin-bottom: 0.7em;
  padding-bottom: 0.18em;
  font: 700 var(--t1) / 1 var(--f-letter);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: var(--pen-50) solid var(--ink);
}
.notes ol { counter-reset: note; display: grid; gap: 0.5em; }
.notes li { counter-increment: note; display: grid; grid-template-columns: 2.1em 1fr; }
.notes li::before { content: counter(note) "."; font-weight: 700; }
.notes--caps li { text-transform: uppercase; letter-spacing: 0.015em; }
.notes p + p { margin-top: 0.6em; }
.notes--sm { font-size: var(--t0); }

/* Schedules: the tables at the edge of every sheet. */
.sched { min-width: 0; }
.sched table { width: 100%; font: 400 var(--t0) / 1.25 var(--f-letter); text-transform: uppercase; }
.sched th, .sched td { padding: 0.42em 0.55em; border: var(--pen-18) solid var(--ink); text-align: start; vertical-align: top; }
.sched thead th { font-weight: 700; border-bottom-width: var(--pen-50); }
.sched td.num, .sched th.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sched tfoot td { font-weight: 700; border-top-width: var(--pen-50); }
.sched a { color: inherit; }
.sched caption { caption-side: bottom; text-align: start; padding-top: 0.6em; font: italic 400 var(--t0) / 1.3 var(--f-letter); color: var(--ink-2); text-transform: none; }

/* Legend: a symbol drawn in a small cell, then what it means. */
.legend { display: grid; gap: 0.5em 1em; grid-template-columns: calc(var(--u) * 6) 1fr; align-items: center; font: 400 var(--t0) / 1.3 var(--f-letter); text-transform: uppercase; }
.legend svg { width: 100%; height: calc(var(--u) * 2.2); overflow: visible; }

/* Abbreviations: the two-meaning list. */
.abbr { display: grid; grid-template-columns: auto 1fr; gap: 0.22em 0.9em; font: 400 var(--t0) / 1.25 var(--f-letter); text-transform: uppercase; }
.abbr dt { font-weight: 700; font-family: var(--f-data); }
.abbr dd i { font-style: normal; color: var(--ink-2); }

/* Rubber stamp, struck at a slight angle. */
.stamp {
  display: inline-grid; justify-items: center; gap: 0.25em;
  padding: 0.55em 1em 0.6em;
  border: var(--pen-70) solid var(--mark);
  outline: var(--pen-25) solid var(--mark); outline-offset: calc(var(--u) * 0.25);
  color: var(--mark);
  font: 700 var(--t1) / 1 var(--f-letter);
  letter-spacing: 0.12em; text-transform: uppercase;
  transform: rotate(-4deg);
}
.stamp small { font: 400 var(--t0) / 1 var(--f-data); letter-spacing: 0.06em; }

/* A boxed caution, like the dig-safe box on every civil cover. */
.callbox { display: grid; grid-template-columns: auto 1fr; gap: 0.6em 0.9em; align-items: center; padding: 0.8em 1em; border: var(--pen-70) solid var(--ink); font: 400 var(--t0) / 1.3 var(--f-letter); text-transform: uppercase; }
.callbox strong { display: block; font: 700 var(--t2) / 0.95 var(--f-title); letter-spacing: 0.02em; }
.callbox .big { font: 700 var(--t3) / 1 var(--f-title); }

/* Redline: a reviewer's pencil note. Toggle it off from the status bar. */
.redline { color: var(--mark); font: italic 400 var(--t0) / 1.3 var(--f-letter); }
.redline em { font-style: italic; text-decoration: underline wavy var(--mark); text-decoration-thickness: max(1px, var(--pen-18)); text-underline-offset: 0.2em; }

/* Plain blocks of lettering inside the field. */
.block { min-width: 0; font: 400 var(--t1) / 1.38 var(--f-letter); }
.block p + p { margin-top: 0.6em; }
.block .lede { font-size: var(--t2); line-height: 1.15; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.3em 1em; font: 400 var(--t0) / 1.3 var(--f-letter); text-transform: uppercase; }
.kv dt { color: var(--ink-2); }
.kv dd { font-weight: 700; }

/* Buttons that live on a sheet, drawn like a boxed label. */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 0.85em;
  background: transparent; color: var(--ink);
  border: var(--pen-50) solid var(--ink); border-radius: 0;
  font: 700 var(--t0) / 1 var(--f-letter); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.btn:hover { background: var(--ink-4); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Links that read as references to other sheets: "SEE 2/C-501". */
.ref { font-weight: 700; white-space: nowrap; }

@media (max-width: 1199.98px) {
  .notes, .block { font-size: 0.9375rem; }
  .sched table, .legend, .abbr, .kv, .callbox, .redline { font-size: 0.8125rem; }
  .sched { overflow-x: auto; }
  .sched table { font-size: 0.75rem; }
  .sched td { hyphens: auto; overflow-wrap: break-word; }
  .stamp { font-size: 1rem; }
}

/* ==========================================================================
   SHEETS: layout that belongs to one sheet only. Shared parts live in
   parts.css; anything here is scoped by the sheet's field class.
   ========================================================================== */

/* G-001 cover ------------------------------------------------------------ */
.cover__head { display: grid; align-content: start; gap: calc(var(--u) * 0.9); }
.cover__kicker { font: 700 var(--t1) / 1 var(--f-letter); letter-spacing: 0.14em; text-transform: uppercase; }
.cover__name {
  margin: calc(var(--u) * 0.2) 0 0 -0.035em;
  font: 700 var(--t5) / 0.84 var(--f-title);
  letter-spacing: -0.008em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cover__tag { font: 600 var(--t3) / 1 var(--f-title); letter-spacing: 0.03em; text-transform: uppercase; }
.cover__roles { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.6) calc(var(--u) * 2.4); margin-top: calc(var(--u) * 0.8); }
.cover__roles dt { font: 400 calc(var(--t0) * 0.85) / 1 var(--f-letter); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.45em; }
.cover__roles dd { font: 700 calc(var(--t0) * 1.15) / 1.15 var(--f-letter); text-transform: uppercase; }
.cover__stamp { display: grid; place-items: center; }
.cover__stamp .stamp { white-space: nowrap; font-size: calc(var(--t1) * 0.9); }
.cover__index-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.4); align-items: start; }
.cover__index td:first-child { width: 4.6em; }
.cover__index table { font-size: calc(var(--t0) * 0.92); }
.cover__index th, .cover__index td { padding: 0.36em 0.5em; }
.cover__index td span { color: var(--ink-2); }
.cover__index td span::before { content: ": "; }
.cover__index a { color: inherit; text-decoration: none; }
.cover__index a:hover, .cover__index a:focus-visible { text-decoration: underline; }
.cover__index tr:hover td { background: var(--ink-4); }
.cover__data { display: grid; align-content: start; gap: calc(var(--u) * 1.4); min-width: 0; }
.cover__data .notes p { text-transform: none; }
.cover__dig { color: inherit; text-decoration: none; align-self: end; }
.cover__dig:hover { background: var(--ink-4); }
.cover__dig .big { font-size: var(--t4); line-height: 0.8; padding: 0 0.1em 0.08em; }

@media (max-width: 1199.98px) {
  .cover__name { font-size: clamp(3.25rem, 17vw, 8rem); white-space: normal; }
  .cover__tag { font-size: clamp(1.4rem, 6vw, 2.4rem); }
  .cover__roles dd { font-size: 0.9375rem; }
  .cover__stamp { place-items: start; }
  .cover__index-cols { grid-template-columns: 1fr; gap: 0; }
  .cover__index-cols table + table thead { display: none; }
  .cover__dig .big { font-size: 3rem; }
}

/* X-404: the sheet that is not in the set ----------------------------------- */
.void { display: grid; align-content: center; justify-items: start; gap: calc(var(--u) * 1.2); }
.void__no { font: 700 calc(var(--t5) * 2) / 0.8 var(--f-title); }
.void__h { font: 700 var(--t3) / 1 var(--f-title); text-transform: uppercase; }

/* A-301: section through the nave, the hanging chain, force polygon, plan. */

.sheet--a-301 .t-sm { font-size: 8px; }

/* The chain panel: drawing, then controls, then the quote, then the title. */
.chain { gap: 0; }
.chain__svg { overflow: hidden; touch-action: none; }
.chain__ctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 0.5);
  margin-top: calc(var(--u) * 0.5);
}
.chain__out {
  margin-left: auto;
  font: 400 calc(var(--t0) * 0.88) / 1.2 var(--f-data);
  color: var(--ink-2); white-space: pre;
}
.chain__note {
  margin-top: calc(var(--u) * 0.45);
  font: italic 700 var(--t0) / 1.3 var(--f-letter);
}
.chain__note span { font-weight: 400; color: var(--ink-2); }

.chain__handle { cursor: grab; outline: none; }
.chain__handle:active { cursor: grabbing; }
.chain__hit { fill: transparent; stroke: none; }
.chain__handle:hover circle:nth-child(2), .chain__handle:focus-visible circle:nth-child(2) { fill: var(--ink-4); }
.chain__handle:focus-visible .chain__hit { stroke: var(--focus); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.chain__stones path { vector-effect: non-scaling-stroke; }
.chain[data-mode="arch"] .chain__links { display: none; }
.chain[data-mode="arch"] .chain__line { stroke-width: var(--pen-25); }

.a301__notes em { font-style: italic; }
.a301__notes a { white-space: nowrap; }

@media (max-width: 1199.98px) {
  .chain__svg { width: 100%; height: auto; aspect-ratio: var(--chain-ar, 1.9); }
  .chain__out { margin-left: 0; white-space: normal; }
  .chain__note { font-size: 0.8125rem; }
}

/* AV-101 instrument approach: the briefing strip, minimums, flight panel. */

.av-strip { display: grid; grid-template-rows: auto 1fr; border: var(--pen-70) solid var(--ink); min-width: 0; }
.av-strip__top {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 0.7);
  border-bottom: var(--pen-35) solid var(--ink);
  font: 400 var(--t0) / 1 var(--f-letter); letter-spacing: 0.04em; text-transform: uppercase;
}
.av-strip__apt { font: 700 var(--t1) / 1 var(--f-letter); letter-spacing: 0.1em; }
.av-strip__nfn {
  padding: 0.3em 0.7em; border: var(--pen-35) solid var(--mark); color: var(--mark);
  font-weight: 700; letter-spacing: 0.12em;
}
.av-strip__proc { font: 700 var(--t2) / 1 var(--f-title); letter-spacing: 0.03em; }
.av-strip__cells { display: grid; grid-template-columns: repeat(5, auto) minmax(0, 1fr) auto; }
.av-strip__cells > div { padding: calc(var(--u) * 0.35) calc(var(--u) * 0.75); border-inline-end: var(--pen-25) solid var(--ink); min-width: 0; }
.av-strip__cells > div:last-child { border-inline-end: 0; }
.av-strip__cells dt { margin-bottom: 0.4em; font: 400 calc(var(--t0) * 0.8) / 1 var(--f-letter); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.av-strip__cells dd { font: 700 var(--t1) / 1.05 var(--f-letter); text-transform: uppercase; white-space: nowrap; }
.av-strip__ma dd { font-size: var(--t0); font-weight: 400; line-height: 1.25; white-space: normal; }

.av-mins table { table-layout: fixed; }
.av-mins th[scope="row"] { white-space: nowrap; }
.av-mins thead th:not(:first-child) { text-align: center; }
.av-mins th[scope="row"] { width: 6.6em; }
.av-mins td { text-align: center; line-height: 1.2; }
.av-mins td b { white-space: nowrap; }
.av-mins td span { color: var(--ink-2); }

.av-panel { display: flex; align-items: center; gap: calc(var(--u) * 1.1); min-width: 0; }
.av-panel .btn { white-space: nowrap; }
.av-hint { font: italic 400 var(--t0) / 1.3 var(--f-letter); color: var(--ink-2); }
.av-notes ol { gap: 0.35em; }

.ac { pointer-events: none; }

@media (max-width: 1199.98px) {
  .av-strip__top { grid-template-columns: 1fr auto; row-gap: 0.5rem; }
  .av-strip__proc { font-size: 1.35rem; }
  .av-strip__cells { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
  .av-strip__cells > div { border-block-end: var(--pen-25) solid var(--ink); }
  .av-strip__ma, .av-strip__cells > div:last-child { grid-column: 1 / -1; }
  .av-strip__cells > div:last-child { border-block-end: 0; }
  .av-strip__cells dd { font-size: 0.9375rem; white-space: normal; }
  .av-mins table { table-layout: auto; font-size: 0.75rem; }
  .av-panel { flex-wrap: wrap; }
}

/* C-101 career plan & profile --------------------------------------------- */
.c1__parcels td:nth-child(1), .c1__parcels th:nth-child(1) { width: 4.2em; }
.c1__parcels td:last-child { white-space: nowrap; }
.c1__curves table { font-size: calc(var(--t0) * 0.92); }
.c1__notes ol { gap: 0.4em; }
.c1__readout { display: block; margin-top: 0.6em; font: 700 calc(var(--t0) * 0.92) / 1.25 var(--f-data); text-transform: uppercase; color: var(--mark); }
.c1__cursor { stroke: var(--mark); stroke-width: max(1px, var(--pen-35)); vector-effect: non-scaling-stroke; pointer-events: none; }
.c1__hit { cursor: crosshair; }
#c1-profile .dwg:focus-visible, #c1-plan .dwg:focus-visible { outline: max(2px, var(--pen-50)) solid var(--focus); outline-offset: 4px; }

/* C-501 details ---------------------------------------------------------- */
.field--c-501 .c5-note {
  margin-top: calc(var(--u) * 0.55);
  font: 400 var(--t0) / 1.3 var(--f-letter);
  max-width: 34em;
}
.field--c-501 .c5-note a { font-weight: 700; white-space: nowrap; }

/* Three lines for every note keeps the detail titles on one line across the row. */
@media (min-width: 1200px) {
  .field--c-501 .c5-note { height: calc(var(--t0) * 1.3 * 3); overflow: hidden; }
}

@media (max-width: 1199.98px) {
  .field--c-501 .c5-note { font-size: 0.875rem; }
  .field--c-501 .c5-detail .vp__body svg { max-height: 22rem; }
}

/* CU-101 utility plan ----------------------------------------------------- */
.field--cu-101 .cu-sched td.num { white-space: nowrap; }
.field--cu-101 .cu-sched th:nth-child(1) { width: 5.6em; }
.field--cu-101 .cu-sched th:nth-child(2) { width: 7.4em; }
.field--cu-101 .cu-sched tr[data-str] { cursor: default; }
.field--cu-101 .cu-sched tr[data-str]:focus-visible { outline: max(2px, var(--pen-50)) solid var(--focus); outline-offset: -2px; }
.field--cu-101 tr.is-hot td { background: var(--ink-4); }
.field--cu-101 tr.is-hot td.num { color: var(--mark); }

/* Hovering a schedule row lights its symbol on the plan, and the other way round. */
.field--cu-101 .str { cursor: default; }
.field--cu-101 .str.is-hot,
.field--cu-101 .str.is-hot .ly-text { color: var(--mark); }
.field--cu-101 .str.is-hot .pen-25,
.field--cu-101 .str.is-hot .pen-35,
.field--cu-101 .str.is-hot .pen-50 { stroke-width: var(--pen-100); }

.field--cu-101 .cu-legend { min-width: 0; }
.field--cu-101 .cu-legend__grid { grid-template-columns: calc(var(--u) * 4.6) 1fr calc(var(--u) * 4.6) 1fr; gap: 0.45em 0.7em; }
.field--cu-101 .cu-legend__grid i { font-style: normal; color: var(--ink-2); }

@media (max-width: 1199.98px) {
  .field--cu-101 .cu-legend__grid { grid-template-columns: 3.5rem 1fr; }
  .field--cu-101 .legend svg { height: 1.4rem; }
}

/* G-002 general notes, legend, abbreviations ------------------------------ */
.g2__notes ol { gap: 0.75em; }
.g2__red { margin-top: calc(var(--u) * 1.6); max-width: 30em; }
.g2__legend-grid { grid-template-columns: calc(var(--u) * 5.2) 1fr calc(var(--u) * 5.2) 1fr; gap: calc(var(--u) * 0.55) calc(var(--u) * 0.8); }
.g2__legend-grid svg { height: calc(var(--u) * 2.1); }
.g2__mark-note { margin-top: calc(var(--u) * 1.1); }
.g2__abbr-cols { display: block; columns: 2; column-gap: calc(var(--u) * 1.6); }
.g2__abbr-cols > div { display: grid; grid-template-columns: 3.6em 1fr; gap: 0 0.7em; break-inside: avoid; margin-bottom: 0.38em; }
.g2__data .kv, .g2__how .kv { grid-template-columns: 6.5em 1fr; }
.g2__conv li { text-transform: none; }
.g2__keys kbd {
  display: inline-block; min-width: 1.8em; padding: 0.12em 0.4em;
  border: var(--pen-25) solid var(--ink); font: 700 1em/1 var(--f-data); text-align: center;
}
.g2__keys dd { font-weight: 400; text-transform: none; }
@media (max-width: 1199.98px) {
  .g2__legend-grid { grid-template-columns: 4.5rem 1fr; }
  .g2__abbr-cols { columns: 1; }
}

/* S-301 sections ---------------------------------------------------------- */
.field--s-301 .s3-notes li { text-transform: none; }
.field--s-301 .s3-notes a { font-weight: 700; overflow-wrap: anywhere; }
.field--s-301 .sched td:nth-child(1) { width: 3.4em; }
.field--s-301 .sched td:nth-child(4) { width: 3.2em; }

/* SP-301 mission profile: the mission clock, the replay readout, event rows. */

.sp-met { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; gap: calc(var(--u) * 0.7); min-width: 0; }
.sp-met .block__h { margin-bottom: 0; }
.sp-met__clock { font: 700 calc(var(--t3) * 1.35) / 0.9 var(--f-title); letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-met__note { font: italic 400 var(--t0) / 1.3 var(--f-letter); color: var(--ink-2); }
.sp-read { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.4) calc(var(--u) * 1.6); }
.sp-read dt { margin-bottom: 0.3em; font: 400 calc(var(--t0) * 0.8) / 1 var(--f-letter); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.sp-read dd { font: 700 var(--t1) / 1 var(--f-letter); text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }

.sp-events tr[data-passed="true"] td { background: var(--ink-4); }
.sp-events tr[data-current="true"] td { background: var(--ink); color: var(--paper); }
.sp-dv caption { caption-side: bottom; }
.sv { pointer-events: none; }
[data-ev-dot][data-passed="true"] { fill: currentColor; }

@media (max-width: 1199.98px) {
  .sp-met__clock { font-size: 2.6rem; }
  .sp-read dd { font-size: 0.875rem; }
}

/* V-101: topographic survey of Riprap Hollow, its profile, the riprap detail. */

.sheet--v-101 .t-xs { font-size: 7px; }
.sheet--v-101 .t-halo { stroke-width: 3px; }

/* Skyline Drive is a cased road: a heavy ink line with a paper core. */
.trail__road-core { stroke: var(--paper); }

.trail { gap: 0; }
.trail__hit { cursor: crosshair; }
.trail__ctl {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: calc(var(--u) * 0.8);
  margin-top: calc(var(--u) * 0.45);
  font: 700 var(--t0) / 1 var(--f-letter); letter-spacing: 0.04em; text-transform: uppercase;
}
.trail__range { width: 100%; accent-color: var(--mark); }
.trail__out { font: 400 calc(var(--t0) * 0.9) / 1 var(--f-data); color: var(--ink-2); white-space: pre; }

.v101__def .block__h span { font-weight: 400; font-style: italic; text-transform: none; color: var(--ink-2); }
.v101__senses { counter-reset: sense; display: grid; gap: 0.45em; font-size: var(--t1); }
.v101__senses li { counter-increment: sense; display: grid; grid-template-columns: 1.6em 1fr; }
.v101__senses li::before { content: counter(sense) "."; font-weight: 700; }
.v101__senses li:last-child { font-weight: 700; }
.v101__csi { margin-top: 0.9em; font: italic 400 var(--t0) / 1.35 var(--f-letter); color: var(--ink-2); }

.v101__rec tbody th { font-weight: 700; white-space: nowrap; }
.v101__notes a { white-space: nowrap; }

@media (max-width: 1199.98px) {
  .trail__ctl { grid-template-columns: 1fr; gap: 0.4rem; }
  .trail__out { white-space: normal; }
  .v101__senses { font-size: 1rem; }
}

/* Z-001 request for information --------------------------------------------- */
.z1__rfi { display: grid; align-content: start; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); border: var(--pen-70) solid var(--ink); }
.z1__title { font: 700 var(--t3) / 1 var(--f-title); letter-spacing: 0.03em; text-transform: uppercase; }
.z1__head { width: 100%; font: 400 var(--t0) / 1.3 var(--f-letter); text-transform: uppercase; }
.z1__head th, .z1__head td { padding: 0.45em 0.6em; border: var(--pen-18) solid var(--ink); text-align: start; }
.z1__head th { width: 7em; font-weight: 400; color: var(--ink-2); }
.z1__head td { font-weight: 700; }
.z1__fields { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1) calc(var(--u) * 1.6); }
.z1__wide { grid-column: 1 / -1; }
.z1__field { display: grid; gap: 0.35em; margin: 0; padding: 0; border: 0; min-width: 0; }
.z1__field > span, .z1__field > legend { font: 400 calc(var(--t0) * 0.9) / 1 var(--f-letter); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding: 0; }
.z1__field input, .z1__field select, .z1__field textarea {
  width: 100%; padding: 0.35em 0.1em; border: 0; border-bottom: var(--pen-35) solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 var(--t1) / 1.35 var(--f-letter);
}
.z1__field textarea { resize: vertical; min-height: 7.5em; border: var(--pen-25) solid var(--ink); padding: 0.5em 0.6em; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.z1__field select option { background: var(--paper); color: var(--ink); }
.z1__field input::placeholder, .z1__field textarea::placeholder { color: var(--ink-2); opacity: 0.8; }
.z1__field :focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 2px 0 var(--focus); }
.z1__impact { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; align-items: center; font: 400 var(--t0) / 1.2 var(--f-letter); text-transform: uppercase; }
.z1__impact legend { width: 100%; margin-bottom: 0.35em; }
.z1__impact input { accent-color: var(--mark); width: auto; }
.z1__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 0.8) calc(var(--u) * 1.4); }
.z1__actions .btn { font-size: var(--t1); padding: 0.6em 1.1em; }
.z1__status { flex: 1; min-width: 14em; font: italic 400 var(--t0) / 1.35 var(--f-letter); color: var(--ink-2); }
.z1__status[data-sent] { color: var(--mark); font-style: normal; font-weight: 700; }
.z1__line { margin: 0.6em 0; font: 400 var(--t0) / 1.6 var(--f-letter); text-transform: uppercase; }
.z1__box { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin: 0 0.25em 0 0.6em; vertical-align: -0.25em; border: var(--pen-35) solid var(--ink); font: 700 0.9em/1 var(--f-letter); }
.z1__line .z1__box:first-child { margin-left: 0.3em; }
.z1__trans td a { overflow-wrap: anywhere; text-transform: none; }
.z1__stamp { padding: calc(var(--u) * 0.9) calc(var(--u) * 1.1); border: var(--pen-70) double var(--ink); border-width: calc(var(--pen-70) * 3); font: 400 var(--t0) / 1.4 var(--f-letter); text-transform: uppercase; }
.z1__stamp ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35em 1em; margin-bottom: 0.6em; }
.z1__stamp li .z1__box { margin-left: 0; margin-right: 0.5em; }
.z1__stamp p { font-size: 0.86em; color: var(--ink-2); }
.z1__by { margin-top: 0.4em; color: var(--ink) !important; font-weight: 700; }
.z1__stamp[data-state="stamped"] { border-color: var(--mark); color: var(--mark); }
.z1__stamp[data-state="stamped"] .z1__box, .z1__stamp[data-state="stamped"] .z1__by { border-color: var(--mark); color: var(--mark) !important; }
@media (prefers-reduced-motion: no-preference) {
  .z1__stamp[data-state="stamped"] { animation: z1-thump 0.42s cubic-bezier(0.5, 0, 0.6, 1); }
}
@keyframes z1-thump { 0% { transform: scale(1.12) rotate(-2deg); opacity: 0.4; } 70% { transform: scale(0.98) rotate(0deg); opacity: 1; } 100% { transform: none; } }
.z1__end { display: grid; align-content: end; gap: calc(var(--u) * 0.6); }
.z1__end-h { font: 700 var(--t4) / 0.85 var(--f-title); letter-spacing: 0.01em; text-transform: uppercase; }
.z1__verse { font: italic 400 var(--t1) / 1.4 var(--f-letter); max-width: 30em; }
.z1__verse span { font-style: normal; font-weight: 700; white-space: nowrap; }
@media (max-width: 1199.98px) {
  .z1__fields { grid-template-columns: 1fr; }
  .z1__field input, .z1__field select, .z1__field textarea { font-size: 1rem; }
  .z1__end-h { font-size: 3.5rem; }
}
.z1__response { display: grid; gap: 0.5em; margin-top: calc(var(--u) * 0.6); padding-top: calc(var(--u) * 0.9); border-top: var(--pen-50) solid var(--ink); }
.z1__label { font: 400 calc(var(--t0) * 0.9) / 1 var(--f-letter); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.z1__ruled { height: calc(var(--u) * 6.2); background: repeating-linear-gradient(transparent 0 calc(var(--u) * 1.95), var(--ink-3) calc(var(--u) * 1.95) calc(var(--u) * 2.05)); }
.z1__response p { font: italic 400 var(--t0) / 1.4 var(--f-letter); color: var(--ink-2); }
.z1__response b { font-style: normal; color: var(--ink); margin-left: 0.6em; text-transform: uppercase; }

/* ==========================================================================
   CHROME: the CAD status bar, the command line, the sheet list, the viewer,
   the crosshair. Everything outside the paper.
   ========================================================================== */

.bar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; align-items: stretch;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--chrome); color: var(--chrome-ink);
  border-top: 1px solid var(--chrome-line);
  font: 400 0.75rem/1 var(--f-letter);
  letter-spacing: 0.03em;
}
.bar > * { display: flex; align-items: center; border-inline-end: 1px solid var(--chrome-line); padding: 0 0.7rem; min-width: 0; }
.bar > :last-child { border-inline-end: 0; }
.bar button {
  height: 1.75rem; padding: 0 0.55rem;
  background: transparent; color: var(--chrome-ink-2);
  border: 1px solid transparent; border-radius: 2px;
  font: 700 0.6875rem/1 var(--f-letter); letter-spacing: 0.06em; text-transform: uppercase;
}
.bar button:hover { color: var(--chrome-ink); border-color: var(--chrome-line); }
.bar button[aria-pressed="true"] { color: var(--chrome-ink); background: color-mix(in srgb, var(--chrome-ink) 12%, transparent); }

.bar__brand { gap: 0.5rem; font-weight: 700; text-transform: uppercase; color: var(--chrome-ink); text-decoration: none; }
.bar__brand svg { width: 1.1rem; height: 1.1rem; }

.cmd { flex: 1 1 22rem; gap: 0.4rem; }
.cmd label { color: var(--chrome-ink-2); white-space: nowrap; }
.cmd input {
  flex: 1; min-width: 4rem; height: 1.75rem;
  background: transparent; border: 0; outline: 0;
  font: 400 0.8125rem/1 var(--f-data); color: var(--chrome-ink);
  text-transform: uppercase; caret-color: var(--focus);
}
.cmd input::placeholder { color: var(--chrome-ink-2); opacity: 0.7; text-transform: none; }
.cmd:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }

.xy { font: 400 0.75rem/1 var(--f-data); color: var(--chrome-ink-2); white-space: nowrap; min-width: 11.5rem; }
.xy b { color: var(--chrome-ink); font-weight: 400; }

.toggles, .plot { gap: 0.15rem; }
.plot__lbl { color: var(--chrome-ink-2); margin-inline-end: 0.35rem; white-space: nowrap; }

.nav { gap: 0.25rem; }
.nav__cur {
  min-width: 7.5rem; justify-content: center;
  color: var(--chrome-ink) !important; font-family: var(--f-data) !important;
}
.nav__cur span:not(.vh) { color: var(--chrome-ink-2); font-weight: 400; margin-inline-start: 0.35rem; }

/* Command history: the three lines above the command line, like AutoCAD. */
.log {
  position: fixed; z-index: 39; left: 0.75rem; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 0.5rem);
  max-width: min(46rem, calc(100vw - 1.5rem));
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--chrome) 94%, transparent);
  color: var(--chrome-ink); border: 1px solid var(--chrome-line);
  font: 400 0.8125rem/1.45 var(--f-data);
  white-space: pre-wrap;
  max-height: min(60vh, 34rem); overflow-y: auto; overscroll-behavior: contain;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.log[data-idle="true"] { opacity: 0; transform: translateY(0.4rem); pointer-events: none; }
.log p { margin: 0; }
.log .q { color: var(--chrome-ink-2); }
.log .err { color: var(--mark); }

/* Sheet list popover. */
.index {
  inset: auto 0.75rem calc(var(--bar-h) + env(safe-area-inset-bottom) + 0.5rem) auto;
  width: min(26rem, calc(100vw - 1.5rem)); max-height: min(36rem, 70vh); overflow: auto;
  margin: 0; padding: 0.6rem 0;
  background: var(--chrome); color: var(--chrome-ink);
  border: 1px solid var(--chrome-line);
  font: 400 0.8125rem/1.3 var(--f-letter);
}
.index h2 { padding: 0.2rem 1rem 0.6rem; font: 700 0.6875rem/1 var(--f-letter); letter-spacing: 0.08em; text-transform: uppercase; color: var(--chrome-ink-2); }
.index a { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; padding: 0.5rem 1rem; color: inherit; text-decoration: none; }
.index a:hover, .index a:focus-visible { background: color-mix(in srgb, var(--chrome-ink) 9%, transparent); }
.index a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--focus); }
.index b { font-family: var(--f-data); }
.index small { display: block; margin-top: 0.2rem; color: var(--chrome-ink-2); font-size: 0.75rem; }

/* Crosshair: full-sheet cursor lines with a pickbox, fine pointers only. */
.xhair { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; display: none; }
.xhair::before, .xhair::after { content: ""; position: absolute; background: var(--ink); opacity: 0.55; }
.xhair::before { left: 0; right: 0; top: var(--y); height: 1px; }
.xhair::after { top: 0; bottom: 0; left: var(--x); width: 1px; }
.xhair i { position: absolute; left: var(--x); top: var(--y); width: 0.7rem; height: 0.7rem; margin: -0.35rem 0 0 -0.35rem; border: 1px solid var(--ink); }
@media (hover: hover) and (pointer: fine) {
  html[data-xhair="on"] .paper:hover .xhair { display: block; }
  html[data-xhair="on"] .paper:hover { cursor: none; }
  html[data-xhair="on"] .paper:hover a, html[data-xhair="on"] .paper:hover button { cursor: pointer; }
}

/* GRID: CAD drafting grid over the paper, off unless asked for. */
html[data-grid="on"] .paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background-image:
    linear-gradient(var(--l-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--l-grid) 1px, transparent 1px);
  background-size: calc(100% / 36) calc(100% / 24);
  mix-blend-mode: normal; opacity: 0.9;
}

@media (max-width: 1199.98px) {
  .bar__brand span:not(.vh), .cmd, .xy, .toggles, .plot__lbl { display: none; }
  .bar > .plot { margin-inline-start: auto; }
  .nav { order: -1; }
}
@media (max-width: 1199.98px) and (min-width: 700px) { .cmd { display: flex; } }

/* Enlarge button on each view. Quiet until the view is hovered or focused. */
.vp__open {
  position: absolute; bottom: calc(var(--u) * 4.4); right: 0; z-index: 3;
  padding: 0.35em 0.6em;
  background: var(--paper); color: var(--ink);
  border: var(--pen-25) solid var(--ink);
  font: 700 var(--t0) / 1 var(--f-letter); letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.15s var(--ease);
}
.vp:hover .vp__open, .vp__open:focus-visible { opacity: 1; }
@media (hover: none) { .vp__open { opacity: 1; } }

/* The viewer: one drawing on the plan table. */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--paper); color: var(--ink);
  display: none; grid-template-rows: auto 1fr;
}
.viewer[open] { display: grid; }
.viewer::backdrop { background: var(--desk); }
.viewer__head {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem;
  background: var(--chrome); color: var(--chrome-ink); border-bottom: 1px solid var(--chrome-line);
  font: 700 0.75rem/1 var(--f-letter); letter-spacing: 0.06em; text-transform: uppercase;
}
.viewer__ref { font-family: var(--f-data); color: var(--chrome-ink-2); }
.viewer__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__head button {
  min-width: 2.25rem; height: 2rem; padding: 0 0.6rem;
  background: transparent; color: var(--chrome-ink); border: 1px solid var(--chrome-line);
  font: 700 0.75rem/1 var(--f-letter); letter-spacing: 0.06em; text-transform: uppercase;
}
.viewer__pane { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.viewer__pane:focus-visible { outline-offset: -4px; }
.viewer__pane:active { cursor: grabbing; }
.viewer__stage { position: absolute; inset: 4vmin; transform-origin: 0 0; --u: 0.75rem; }
.viewer__stage > svg { width: 100%; height: 100%; }

/* DIST: the temporary dimension a measurement leaves behind. */
.dist { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; overflow: visible; }
.dist line { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 6 4; }
.dist circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.dist text { fill: currentColor; font: 700 13px var(--f-data); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }

/* Phones: the plot style switch shows short labels; the full name stays the accessible name. */
@media (max-width: 560px) {
  .bar > * { padding: 0 0.4rem; }
  .plot button { font-size: 0; padding: 0 0.45rem; }
  .plot button::after { content: attr(data-short); font-size: 0.6875rem; }
  .nav__cur { min-width: 6.25rem; }
}
@media (max-width: 1199.98px) {
  .vp__open { top: 0; bottom: auto; }
}

/* ==========================================================================
   PLOT: the set prints as a real drawing set. One ARCH B sheet (18 x 12 in)
   per page, black ink on white whatever the screen's plot style, no chrome.
   ========================================================================== */
@media print {
  @page { size: 18in 12in; margin: 0; }
  :root, :root[data-plot] {
    --desk: #ffffff; --paper: #ffffff; --paper-edge: #ffffff;
    --ink: #000000; --ink-2: #666666; --ink-3: #aaaaaa; --ink-4: #e8e8e8;
    --mark: #d4201b; --link: #000000;
    --c-water: #000; --c-sewer: #000; --c-gas: #000; --c-power: #000; --c-comms: #000; --c-storm: #000;
    --l-text: #000; --l-dim: #666; --l-center: #666; --l-hidden: #666; --l-hatch: #aaa; --l-topo: #666; --l-grid: #eee;
    color-scheme: light;
  }
  html, body { background: #fff !important; }
  body { padding: 0 !important; }
  .bar, .log, .index, .viewer, .skip, .vp__open, .xhair, .dist { display: none !important; }
  .set { display: block; padding: 0; }
  .sheet { width: 18in; max-width: none; margin: 0; break-after: page; break-inside: avoid; }
  .sheet:last-child { break-after: auto; }
  .paper { width: 18in; box-shadow: none; }
  a { text-decoration: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; transition: none !important; }
}