/* drawing.css: the HULL/20 drawing set, built to DRAWING-STYLE (public/drawing-style.html).
   Sheets with an ISO 5457 zone frame, an ISO 7200 / ASME Y14.1 title block, an ASME Y14.35
   revision block, notes, parts lists, and view slots that take SVG from CAD.
   Units: 1 mm = 3.8 CSS px (true 96 px/in is 3.78; snapped so the 5 mm title-block module is
   exactly 19 px and every rule lands on a device pixel at 2x).
   Lines: ISO 128 pens 0.13 0.18 0.25 0.35 0.5 0.7 mm. Lettering: osifont (ISO 3098 type B,
   stroke = h/10), sized by cap height: font-size = h / 0.7373.
   No inline styles anywhere, so it runs under style-src 'self'. */

@font-face { font-family: "osifont"; src: url("/fonts/osifont-lgpl3fe.woff") format("woff"); font-display: swap; }
@font-face { font-family: "B612"; src: url("/fonts/B612-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "B612"; src: url("/fonts/B612-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "B612"; src: url("/fonts/B612-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("/fonts/B612Mono-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Michroma"; src: url("/fonts/Michroma-Regular.ttf") format("truetype"); font-display: swap; }

/* ---- tokens ------------------------------------------------------------------------------ */
:root {
  --mm: 3.8px;

  /* ISO 128 pen widths, true at 1 mm = 3.8 px (SVG strokes use these) */
  --w13: .494px; --w18: .684px; --w25: .95px; --w35: 1.33px; --w50: 1.9px; --w70: 2.66px;
  /* the same pens snapped for CSS borders (whole device pixels at 2x) */
  --b13: .5px; --b18: .5px; --b25: 1px; --b35: 1.5px; --b50: 2px; --b70: 2.5px;

  /* lettering by cap height h (mm): font-size = h * 3.8 / 0.7373 */
  --h18: 9.28px; --h25: 12.88px; --h35: 18.04px; --h50: 25.77px; --h70: 36.08px;

  /* vellum: graphite on drafting film. Contrast on the paper: ink 13.0, ink-2 6.6,
     ink-3 3.3 (non-text only), red 5.2. */
  --table: #D3D8D1;
  --paper: #E8EBE5;
  --paper-2: #DDE1DA;
  --ink: #1F2427;
  --ink-2: #4A5258;
  --ink-3: #767E81;
  --red: #B0322A;
  --raster-filter: grayscale(1) contrast(1.15);
  --raster-blend: multiply;
  color-scheme: light;

  --let: "osifont", "B612", "Arial Narrow", sans-serif;   /* lettering, ISO 3098 */
  --txt: "B612", "Verdana", sans-serif;                   /* reading text */
  --mono: "B612 Mono", "Menlo", monospace;

  --band: calc(6 * var(--mm));     /* zone band, ISO 5457 margin */
  --gut: calc(8 * var(--mm));      /* drawing space inset from the frame */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-paper="vellum"]) {
    /* blueprint: white line on Prussian blue. ink 9.8, ink-2 6.8, ink-3 3.6, red 5.6 */
    --table: #0F3459; --paper: #163F6A; --paper-2: #1B4877;
    --ink: #EEF5FB; --ink-2: #B9D0E5; --ink-3: #7499BF; --red: #FFA38F;
    --raster-filter: grayscale(1) invert(1) contrast(1.25) brightness(1.08);
    --raster-blend: screen;
    color-scheme: dark;
  }
}
:root[data-paper="blueprint"] {
  --table: #0F3459; --paper: #163F6A; --paper-2: #1B4877;
  --ink: #EEF5FB; --ink-2: #B9D0E5; --ink-3: #7499BF; --red: #FFA38F;
  --raster-filter: grayscale(1) invert(1) contrast(1.25) brightness(1.08);
  --raster-blend: screen;
  color-scheme: dark;
}

/* ---- base -------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--table) url("/drawing-grain.svg");
  background-size: 360px 360px; background-blend-mode: soft-light;
  font: 400 15px/1.62 var(--txt); font-kerning: normal;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: var(--b25); text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
a:hover { color: var(--red); text-decoration-color: currentColor; }
:focus-visible { outline: var(--b50) solid var(--red); outline-offset: 2px; }
strong, b { font-weight: 700; }
p { margin: 0 0 1em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 60; padding: 8px 12px; background: var(--paper); border: var(--b50) solid var(--ink); font: var(--h35) var(--let); }
.skip:focus { top: 8px; }

/* lettering roles (ISO 3098 type B, upright, one weight) */
.lt, .tb, .rb, .nb, .pl, .ht, .zones, .vl { font-family: var(--let); font-weight: 400; text-transform: uppercase; letter-spacing: 0; font-kerning: normal; }

/* ---- binder strip ---------------------------------------------------------------------- */
.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  max-width: 1380px; margin: 0 auto; padding: 18px 12px 12px;
  border-bottom: var(--b25) solid var(--ink);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.brand b { font: 400 12px/1 "Michroma", var(--let); letter-spacing: .06em; text-transform: uppercase; }
.brand i { font-style: normal; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font: var(--h25)/1.2 var(--let); text-transform: uppercase; }
.nav a { text-decoration: none; padding: 4px 0; border-bottom: var(--b25) solid transparent; }
.nav a[aria-current] { border-bottom-color: var(--ink); }
.nav a:hover { border-bottom-color: var(--red); }
.paper { display: inline-flex; margin-left: auto; border: var(--b25) solid var(--ink); }
.paper[hidden] { display: none; }
.paper button {
  appearance: none; border: 0; margin: 0; padding: 6px 12px 5px; cursor: pointer; background: transparent; color: var(--ink);
  font: var(--h25)/1 var(--let); text-transform: uppercase;
}
.paper button + button { border-left: var(--b25) solid var(--ink); }
.paper button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---- the sheet (ISO 5457 frame) ------------------------------------------------------- */
.sheet {
  position: relative; max-width: 1380px; margin: 28px auto;
  background: var(--paper);
  border: var(--b25) solid var(--ink);                                      /* trimmed edge */
  padding: calc(var(--band) + var(--gut)) calc(var(--band) + var(--gut)) calc(var(--band) + 6 * var(--mm));
}
.sheet::before {                                                            /* drawing frame, 0.7 */
  content: ""; position: absolute; inset: var(--band); border: var(--b70) solid var(--ink); pointer-events: none;
}
.sheet::after {                                                             /* paper tooth, over the line work */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/drawing-grain.svg"); background-size: 360px 360px; mix-blend-mode: soft-light; opacity: .9;
}
.zones ol { position: absolute; margin: 0; padding: 0; list-style: none; display: grid; font-size: var(--h25); line-height: 1; }
.zones li { display: grid; place-items: center; position: relative; }
.zones .z-t, .zones .z-b { left: var(--band); right: var(--band); height: var(--band); grid-template-columns: repeat(8, 1fr); }
.zones .z-t { top: 0; } .zones .z-b { bottom: 0; }
.zones .z-l, .zones .z-r { top: var(--band); bottom: var(--band); width: var(--band); grid-template-rows: repeat(6, 1fr); }
.zones .z-l { left: 0; } .zones .z-r { right: 0; }
.zones .z-t li + li::before, .zones .z-b li + li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: var(--b35) solid var(--ink); }
.zones .z-l li + li::before, .zones .z-r li + li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: var(--b35) solid var(--ink); }
/* centring marks: 0.7, from the trimmed edge to 5 mm inside the frame */
.zones .z-t::after, .zones .z-b::after { content: ""; position: absolute; left: 50%; margin-left: calc(var(--b70) / -2); height: calc(var(--band) + 5 * var(--mm)); border-left: var(--b70) solid var(--ink); }
.zones .z-t::after { top: 0; } .zones .z-b::after { bottom: 0; }
.zones .z-l::after, .zones .z-r::after { content: ""; position: absolute; top: 50%; margin-top: calc(var(--b70) / -2); width: calc(var(--band) + 5 * var(--mm)); border-top: var(--b70) solid var(--ink); }
.zones .z-l::after { left: 0; } .zones .z-r::after { right: 0; }

/* sheet head: sheet reference, then the heading of the record */
.sh-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px calc(5 * var(--mm)); margin: 0 0 calc(7 * var(--mm)); padding-bottom: calc(2 * var(--mm)); border-bottom: var(--b25) solid var(--ink); }
.sh-tag { margin: 0; display: flex; align-items: baseline; gap: calc(3 * var(--mm)); font-family: var(--let); text-transform: uppercase; }
.sh-rn { font-size: var(--h50); line-height: 1; }
.sh-sub { font-size: var(--h25); }
.sh-head h3, .cv-head h1 { font-family: var(--let); font-weight: 400; margin: 0; text-transform: uppercase; }
.sh-head h3 { font-size: var(--h50); line-height: 1.15; }

/* sheet body: reading column left, views right, wide things across */
.sh-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 calc(14 * var(--mm)); grid-auto-flow: row dense; }
.txt { max-width: 66ch; }

/* ---- title block: ISO 7200 fields on a 5 mm module, 180 x 51 mm ------------------------------
   cols: 36 x 5 mm. rows: approvals 3 x 7, type 8, title 10, number 12 (mm). */
.tb {
  display: grid; grid-template-columns: repeat(36, calc(5 * var(--mm)));
  grid-template-rows: repeat(3, calc(7 * var(--mm))) calc(8 * var(--mm)) calc(10 * var(--mm)) calc(12 * var(--mm));
  width: max-content; background: var(--paper); border: var(--b50) solid var(--ink);
  /* ISO 7200: bottom right of the drawing space, its outer lines on the frame */
  margin: calc(10 * var(--mm)) calc(-1 * var(--gut)) calc(-6 * var(--mm)) auto;
}
.tb > div { position: relative; margin: 0; padding: calc(.9 * var(--mm)) calc(1.2 * var(--mm)) calc(1.3 * var(--mm)); min-width: 0;
  border-right: var(--b25) solid var(--ink); border-bottom: var(--b25) solid var(--ink);
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.tb dt { font-size: var(--h18); line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.tb dd { margin: 0; font-size: var(--h25); line-height: 1; white-space: nowrap; }
.tb .tol   { grid-column: 1 / 13;  grid-row: 1 / 4; justify-content: flex-start; gap: calc(1.1 * var(--mm)); }
.tb .tol dd { font-size: var(--h18); line-height: 1.42; white-space: normal; }
.tb .ap    { grid-row: span 1; flex-direction: row; align-items: center; justify-content: flex-start; padding-top: 0; padding-bottom: 0; }
.tb .ap dt { width: calc(17 * var(--mm)); flex: none; }
.tb .ap dd { width: calc(27 * var(--mm)); flex: none; }
.tb .ap dd + dd { width: auto; }
.tb .ap1 { grid-column: 13 / 27; grid-row: 1; }
.tb .ap2 { grid-column: 13 / 27; grid-row: 2; }
.tb .ap3 { grid-column: 13 / 27; grid-row: 3; }
.tb .own   { grid-column: 27 / 37; grid-row: 1 / 4; border-right: 0; justify-content: center; }
.tb .own dd { display: flex; align-items: center; gap: calc(2.5 * var(--mm)); font: calc(2.2 * var(--mm))/1.2 "Michroma", var(--let); letter-spacing: .05em; }
.tb .own svg { width: calc(11 * var(--mm)); height: calc(11 * var(--mm)); flex: none; filter: grayscale(1) contrast(1.1); }
.tb .own i { font-style: normal; }
.tb .typ   { grid-column: 1 / 13;  grid-row: 4; }
.tb .sta   { grid-column: 13 / 20; grid-row: 4; }
.tb .uni   { grid-column: 20 / 27; grid-row: 4; }
.tb .prj   { grid-column: 27 / 37; grid-row: 4; border-right: 0; flex-direction: row; align-items: center; gap: calc(2 * var(--mm)); }
.tb .prj svg { width: calc(14 * var(--mm)); height: calc(6 * var(--mm)); flex: none; overflow: visible; }
.tb .prj svg * { fill: none; stroke: var(--ink); stroke-width: var(--w25); vector-effect: non-scaling-stroke; }
.tb .prj svg .c { stroke-width: var(--w13); stroke-dasharray: calc(3 * var(--mm)) calc(.6 * var(--mm)) calc(.6 * var(--mm)) calc(.6 * var(--mm)); }
.tb .prj dd { font-size: var(--h18); line-height: 1.3; white-space: normal; }
.tb .ttl   { grid-column: 1 / 37;  grid-row: 5; border-right: 0; }
.tb .ttl dd { font-size: var(--h35); }
.tb .siz   { grid-column: 1 / 4;   grid-row: 6; border-bottom: 0; }
.tb .scl   { grid-column: 4 / 9;   grid-row: 6; border-bottom: 0; }
.tb .sht   { grid-column: 9 / 15;  grid-row: 6; border-bottom: 0; }
.tb .sht b { font-weight: 400; }
.tb .dwn   { grid-column: 15 / 32; grid-row: 6; border-bottom: 0; }
.tb .dwn dd { font-size: var(--h50); line-height: 1; margin-bottom: calc(-.6 * var(--mm)); }
.tb .rev   { grid-column: 32 / 37; grid-row: 6; border-bottom: 0; border-right: 0; }
.tb .rev dd { font-size: var(--h50); line-height: 1; margin-bottom: calc(-.6 * var(--mm)); color: var(--red); }

/* ---- revision block: ASME Y14.35, top right of the first sheet ---------------------------- */
.rb { border-collapse: collapse; width: calc(180 * var(--mm)); max-width: 100%; border: var(--b50) solid var(--ink); font-size: var(--h25); line-height: 1.3; table-layout: auto; background: var(--paper); }
.rb .rb-h { text-align: center; font-size: var(--h35); line-height: 1; padding: calc(1.6 * var(--mm)) 0 calc(1.4 * var(--mm)); }
.rb th, .rb td { border: var(--b25) solid var(--ink); padding: calc(1.2 * var(--mm)) calc(1.4 * var(--mm)) calc(1 * var(--mm)); text-align: left; vertical-align: top; font-weight: 400; }
.rb th { font-size: var(--h18); line-height: 1; padding-top: calc(1.4 * var(--mm)); padding-bottom: calc(1.2 * var(--mm)); }
.rb .c-zone { width: calc(15 * var(--mm)); text-align: center; }
.rb .c-rev  { width: calc(12 * var(--mm)); text-align: center; }
.rb .c-date { width: calc(26 * var(--mm)); }
.rb .c-appd { width: calc(25 * var(--mm)); }
.rb tr.now td.c-rev { color: var(--red); }

/* ---- notes block ---------------------------------------------------------------------- */
.nb { max-width: calc(180 * var(--mm)); font-size: var(--h25); line-height: 1.5; margin: 0 0 calc(8 * var(--mm)); }
.nb h2, .nb h4 { font: var(--h35)/1 var(--let); margin: 0 0 calc(2.5 * var(--mm)); }
.nb .uos { margin: 0 0 calc(2 * var(--mm)); }
.nb ol { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.nb li { position: relative; padding-left: calc(9 * var(--mm)); margin: 0 0 calc(1.6 * var(--mm)); counter-increment: n; }
.nb li::before { content: counter(n) "."; position: absolute; left: 0; width: calc(5 * var(--mm)); text-align: right; }
/* flag note: the number inside a triangle, the same flag that sits on the field */
.nb li.flag::before { content: counter(n); left: calc(.4 * var(--mm)); top: calc(-.6 * var(--mm)); width: calc(5.6 * var(--mm)); height: calc(5 * var(--mm)); text-align: center; line-height: calc(6.4 * var(--mm)); font-size: var(--h18); }
.nb li.flag::after { content: ""; position: absolute; left: calc(.4 * var(--mm)); top: calc(-.6 * var(--mm)); width: calc(5.6 * var(--mm)); height: calc(5 * var(--mm));
  background: var(--ink); -webkit-mask: url("/drawing-flag.svg") center / 100% 100% no-repeat; mask: url("/drawing-flag.svg") center / 100% 100% no-repeat; }
.nb p { margin: 0 0 calc(2 * var(--mm)); }
/* the older prose notes on the record sheets keep the same look */
.notes { max-width: calc(180 * var(--mm)); margin: 0 0 calc(8 * var(--mm)); font-family: var(--let); text-transform: uppercase; font-size: var(--h25); line-height: 1.5; }
.notes h2, .notes h4 { font: var(--h35)/1 var(--let); margin: 0 0 calc(2.5 * var(--mm)); }
.notes ol { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.notes li { position: relative; padding-left: calc(9 * var(--mm)); margin: 0 0 calc(1.6 * var(--mm)); counter-increment: n; }
.notes li::before { content: counter(n) "."; position: absolute; left: 0; width: calc(5 * var(--mm)); text-align: right; }
.notes p { margin: 0 0 calc(2 * var(--mm)); }

/* revision flag, inline (redline) */
.rv { display: inline-block; width: calc(5.6 * var(--mm)); height: calc(5 * var(--mm)); vertical-align: calc(-1 * var(--mm)); margin-left: 4px; overflow: visible; }
.rv path { fill: none; stroke: var(--red); stroke-width: var(--w25); stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.rv text { fill: var(--red); font-family: var(--let); text-anchor: middle; }

/* ---- parts list: ASME Y14.34 columns ------------------------------------------------------ */
.tbl { overflow-x: auto; margin: 0 0 calc(8 * var(--mm)); }
.pl, .revs, .index { border-collapse: collapse; width: 100%; border: var(--b50) solid var(--ink); background: var(--paper); }
.pl { font-size: var(--h25); line-height: 1.3; min-width: calc(180 * var(--mm)); }
.pl caption, .revs caption, .index caption { caption-side: top; text-align: left; padding: 0 0 calc(1.5 * var(--mm)); font: var(--h35)/1 var(--let); text-transform: uppercase; }
.pl th, .revs th, .index th { text-align: left; font: 400 var(--h18)/1.1 var(--let); text-transform: uppercase; padding: calc(1.4 * var(--mm)) calc(1.4 * var(--mm)) calc(1.2 * var(--mm)); border: var(--b25) solid var(--ink); vertical-align: bottom; }
.pl td { text-align: left; vertical-align: top; padding: calc(1.3 * var(--mm)) calc(1.4 * var(--mm)) calc(1 * var(--mm)); border: var(--b25) solid var(--ink); }
.pl td.it, .pl td.q { text-align: center; white-space: nowrap; }
.pl td.it { width: calc(12 * var(--mm)); }
.pl tr.hi td { background: var(--paper-2); }
.pl tr.hi td.it { color: var(--red); }
.bn { display: inline-block; min-width: 1.6em; }
/* record-sheet tables (cut list, show, lines) and the cover's index and revisions */
.revs, .index { font-family: var(--let); text-transform: uppercase; font-size: var(--h25); line-height: 1.3; }
.revs td, .index td { padding: calc(1.3 * var(--mm)) calc(1.4 * var(--mm)) calc(1 * var(--mm)); border: var(--b25) solid var(--ink); vertical-align: top; }
.revs td:first-child, .index td:first-child, .index td:nth-child(2) { text-align: center; white-space: nowrap; }
.revs td:first-child { width: calc(12 * var(--mm)); }
.revs td:nth-child(2) { width: calc(26 * var(--mm)); white-space: nowrap; }
.index td:first-child, .index td:nth-child(2) { width: calc(14 * var(--mm)); }
.index tr.grp td { border-top: var(--b50) solid var(--ink); }
.index a { text-decoration: none; }
.index a:hover { text-decoration: underline; }
.revs tr.now td:first-child { color: var(--red); }

/* ---- figures and view slots ---------------------------------------------------------- */
figure { margin: 0 0 calc(8 * var(--mm)); }
figcaption { margin-top: calc(2 * var(--mm)); font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 70ch; }
.fig-no { font: var(--h25)/1 var(--let); text-transform: uppercase; color: var(--ink); margin-right: 6px; }
/* a view: any SVG, drawn at 1 unit = 1 px, never stretched */
.view, .dwg { }
.view .pan, .dwg .pan { overflow-x: auto; }
.view .pan > svg, .dwg .pan > svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.vl { display: block; text-align: center; font-size: var(--h35); line-height: 1.3; margin-top: calc(2 * var(--mm)); }
.vl small { display: block; font-size: var(--h25); }
.photo img { display: block; width: 100%; height: auto; border: var(--b25) solid var(--ink); }
.photo a { display: block; }
.raster .zoom { display: block; }
.raster img.ink { display: block; width: 100%; height: auto; filter: var(--raster-filter); mix-blend-mode: var(--raster-blend); }
.side > figure:last-child { margin-bottom: 0; }

/* ---- SVG line work (dwglib classes, CAD views after import_view.py) --------------------- */
.dwg-svg { overflow: visible; font-family: var(--let); }
.dwg-svg * { vector-effect: non-scaling-stroke; }
/* zero specificity, so every class below (and a fill= attribute such as a hatch pattern) wins */
:where(.dwg-svg) :where(path, line, circle, rect, polyline, polygon, ellipse):where(:not([fill])) { fill: none; }
.dwg-svg :is(path, line, circle, rect, polyline, polygon, ellipse) { stroke: var(--ink); stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; }
/* weights: ISO 128 pens */
.dwg-svg .lw13, .dwg-svg .hl { stroke-width: var(--w13); }
.dwg-svg .lw18, .dwg-svg .t, .dwg-svg .c, .dwg-svg .p, .dwg-svg .brk, .dwg-svg .fold { stroke-width: var(--w18); }
.dwg-svg .lw25, .dwg-svg .h { stroke-width: var(--w25); }
.dwg-svg .lw35, .dwg-svg .k, .dwg-svg .m, .dwg-svg .cut { stroke-width: var(--w35); }
.dwg-svg .lw50, .dwg-svg .cp { stroke-width: var(--w50); }
.dwg-svg .lw70 { stroke-width: var(--w70); }
/* line types: dashes in mm (ASME Y14.2 proportions) */
.dwg-svg .h, .dwg-svg .ln-hidden { stroke-dasharray: 11.4 3.8; }                              /* 3 / 1 */
.dwg-svg .c, .dwg-svg .ln-centre { stroke-dasharray: 45.6 5.7 9.5 5.7; }                      /* 12 / 1.5 / 2.5 / 1.5 */
.dwg-svg .p, .dwg-svg .ln-phantom { stroke-dasharray: 45.6 5.7 7.6 5.7 7.6 5.7; }             /* 12 / 1.5 / 2 / 1.5 / 2 / 1.5 */
.dwg-svg .fold { stroke-dasharray: 3.8 7.6; }
.dwg-svg .mask { fill: var(--paper); }
.dwg-svg .cut { fill-opacity: 1; }
.dwg-svg .solid { fill: none; stroke-width: var(--w18); }
.dwg-svg .rub { fill: none; stroke-width: var(--w18); }
.dwg-svg .ar, .dwg-svg .dot { fill: var(--ink); stroke: none; }
.dwg-svg text { fill: var(--ink); stroke: none; font-family: var(--let); }
.dwg-svg .tx, .dwg-svg .bal-t { font-size: var(--h25); }
.dwg-svg .ts { font-size: var(--h18); }
.dwg-svg .tl { font-size: var(--h35); }
.dwg-svg .sec { font-size: var(--h50); }
.dwg-svg .bal { fill: var(--paper); stroke-width: var(--w18); }
.dwg-svg .bal-t.sm { font-size: var(--h18); }
.dwg-svg .flag path { stroke-width: var(--w25); }
.dwg-svg .balloon.hi .bal { stroke: var(--red); stroke-width: var(--w35); }
.dwg-svg .balloon.hi .bal-t { fill: var(--red); }
.dwg-svg .balloon.hi .ld { stroke: var(--red); }
.dwg-svg .balloon.hi .dot { fill: var(--red); }

/* ---- CAD views (import_view.py): user units are paper mm, so weights are in mm ------------ */
.cad { display: block; overflow: visible; max-width: 100%; height: auto; font-family: var(--let); }
.cad :is(path, line, circle, rect, polyline, polygon, ellipse) { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.cad .visible *, .cad .section * { stroke-width: .35; }
.cad .hidden * { stroke-width: .25; stroke-dasharray: 3 1; stroke-linecap: butt; }
.cad .center *, .cad .cutplane * { stroke-width: .18; stroke-dasharray: 12 1.5 2.5 1.5; stroke-linecap: butt; }
.cad .hatch * { stroke-width: .13; }
.cad .dims * { stroke-width: .18; }
.cad .cutend * { stroke-width: .5; stroke-linecap: butt; }
.cad .w13 { stroke-width: .13; } .cad .w18 { stroke-width: .18; } .cad .w25 { stroke-width: .25; }
.cad .w35 { stroke-width: .35; } .cad .w50 { stroke-width: .5; } .cad .w70 { stroke-width: .7; }
.cad .solidfill *, .cad .ar { fill: var(--ink); stroke: none; }
.cad text { fill: var(--ink); stroke: none; font-family: var(--let); font-weight: 400; font-size: 3.39px; text-transform: uppercase; }   /* cap 2.5 mm */
.cad text.small { font-size: 2.44px; }                                                                       /* cap 1.8 mm */
.cad text.title { font-size: 4.75px; }                                                                       /* cap 3.5 mm */

/* hole table (from the CAD hole list) */
.ht { border-collapse: collapse; border: var(--b50) solid var(--ink); font-size: var(--h25); line-height: 1.3; background: var(--paper); }
.ht caption { caption-side: top; text-align: left; font: var(--h35)/1 var(--let); padding: 0 0 calc(1.5 * var(--mm)); }
.ht th, .ht td { border: var(--b25) solid var(--ink); padding: calc(1.2 * var(--mm)) calc(2 * var(--mm)) calc(1 * var(--mm)); font-weight: 400; white-space: nowrap; }
.ht th { font-size: var(--h18); text-align: center; }
.ht td { text-align: right; font-variant-numeric: tabular-nums; }
.ht td:first-child, .ht td:last-child { text-align: left; }

/* ---- links that leave the sheet, edition switch -------------------------------------- */
pre { margin: 6px 0 20px; padding: calc(3 * var(--mm)) calc(4 * var(--mm)); overflow-x: auto; border: var(--b25) solid var(--ink); font: 12.5px/1.6 var(--mono); background: transparent; }
code { font-family: var(--mono); }
.go { margin-top: 1.4em; }
.ref { font: var(--h25)/1.3 var(--let); text-transform: uppercase; }
.edswitch { font: var(--h25)/1.4 var(--let); text-transform: uppercase; margin-top: 1.4em; }
.bigline { font: 400 var(--h70)/1.05 var(--let); text-transform: uppercase; margin: 22px 0; }

/* ---- the cover sheet ----------------------------------------------------------------- */
.cv-head h1 { font-size: var(--h70); line-height: 1.1; margin: calc(2 * var(--mm)) 0 calc(6 * var(--mm)); max-width: 16ch; }
.cv-kicker { font: var(--h25)/1.2 var(--let); text-transform: uppercase; margin: 0; }
.cv-head .lede { font-size: 16px; line-height: 1.6; max-width: 58ch; }
.cv-photo img { max-height: 760px; object-fit: cover; }
.cv-revs, .cv-index { margin-bottom: calc(8 * var(--mm)); }

/* ---- web text between drawings (outside any sheet) ------------------------------------ */
.intro { max-width: 1380px; margin: 56px auto 0; padding: 0 12px; }
.intro h2 { font: 400 var(--h50)/1.1 var(--let); text-transform: uppercase; margin: 0 0 18px; }
.intro p { max-width: 72ch; }

/* ---- footer ---------------------------------------------------------------------------- */
.foot { max-width: 1380px; margin: 0 auto; padding: 22px 12px 48px; border-top: var(--b25) solid var(--ink); font-size: 13px; color: var(--ink-2); }
.foot-in { display: grid; gap: 12px; max-width: 80ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font: var(--h25) var(--let); text-transform: uppercase; color: var(--ink); }
.foot p { margin: 0; }
.foot .honest { color: var(--ink); }

/* ---- wide screens ----------------------------------------------------------------------- */
@media (min-width: 1080px) {
  .sh-body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .sh-body > * { grid-column: 1 / -1; }
  .sh-body > .txt, .sh-body > .dwg.half, .sh-body > pre { grid-column: 1; }
  .sh-body > .dwg.right { grid-column: 2; align-self: start; }
  .sh-body > .side, .sh-body > .photo.tall, .sh-body > .photo.narrow, .sh-body > .side-photo { grid-column: 2; }
  .sh-body > .side { align-self: start; }
  .sh-body > .photo.tall img { max-height: 820px; width: auto; max-width: 100%; }
  .sh-body > .photo.narrow img { max-width: 440px; }
  .sh-body > .photo.pcb { max-width: 860px; }
  .duo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 calc(14 * var(--mm)); align-items: start; }
  .duo > .photo.tall img { max-height: 820px; width: auto; max-width: 100%; }
  .cover .sh-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .cover .cv-head { grid-column: 1; grid-row: 1; }
  .cover .cv-photo { grid-column: 2; grid-row: 1 / span 2; }
  .cover .cv-revs { grid-column: 1; grid-row: 2; align-self: end; }
  .cover .cv-index { grid-column: 1; grid-row: 3; }
  .cover .cv-notes { grid-column: 2; grid-row: 3; }
}

/* ---- production sheets (drawing number HULL-20-UFO-027 and anything from CAD) ----------
   .prod: no prose; a field of views, the revision block top right, notes, parts list,
   title block bottom right. */
.prod .field { display: grid; grid-template-columns: minmax(0, 1fr) calc(150 * var(--mm)); gap: calc(8 * var(--mm)) calc(10 * var(--mm)); align-items: start; }
.prod .views { display: flex; flex-wrap: wrap; gap: calc(8 * var(--mm)) calc(10 * var(--mm)); align-items: flex-start; }
/* flex and grid items default to min-width: auto, so a wide CAD view would size its figure to the SVG and spill
   out of the sheet on a phone; held to the field's width, the view's .pan scrolls sideways instead */
.prod .views > *, .prod .stack > * { min-width: 0; max-width: 100%; }
.prod .rail { display: grid; gap: calc(8 * var(--mm)); }
.prod .wide { grid-column: 1 / -1; }
.prod .pl { min-width: 0; }
@media (max-width: 700px) { .prod .pl { min-width: calc(150 * var(--mm)); } }
/* ASME Y14.35: the revision block in the upper right corner, on the frame */
.tb, .prod .rb { position: relative; z-index: 1; }
.prod .rail > .rb:first-child { margin: calc(-1 * var(--gut)) calc(-1 * var(--gut)) 0 0; width: calc(100% + var(--gut)); max-width: none; }
@media (max-width: 1500px) { .prod .field { grid-template-columns: minmax(0, 1fr); } }

/* ---- phones ---------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root { --band: calc(3.5 * var(--mm)); --gut: calc(3.5 * var(--mm)); }
  .bar { padding: 12px 10px 10px; gap: 10px 16px; }
  .nav { gap: 2px 14px; }
  .paper { margin-left: 0; }
  /* the frame is the screen (after Heron AI's phone layout): a narrow zone band close to the glass, and the drawings
     run frame line to frame line, so a portrait phone gives the paper to the line work, not to margins */
  :root { --band: calc(2.6 * var(--mm)); }
  .sheet { margin: 8px 3px; padding: calc(var(--band) + 14px) calc(var(--band) + 10px) calc(var(--band) + 12px); }
  .zones ol { font-size: var(--h18); }
  .sh-head h3 { font-size: var(--h35); }
  .cv-head h1 { font-size: var(--h50); }
  /* portrait phones: each view fits the sheet's width so the whole drawing reads at a glance; pinch to zoom for
     the lettering (the viewport allows it). Sideways panning inside a narrow window showed mostly blank paper. */
  .view .pan > svg, .dwg .pan > svg { max-width: 100%; height: auto; }
  .view .pan, .dwg .pan { margin: 0 -9px; }
  /* tap a drawing to open it on its own, full screen; turn the phone or pinch for the lettering */
  .pan[data-enlarge] { cursor: zoom-in; }
  /* title block reflows to three columns on a phone; same fields, same order */
  .tb { width: auto; margin: 30px -12px -14px 0; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; }
  .tb, .prod .rb { position: relative; z-index: 1; }
.prod .rail > .rb:first-child { margin: 0; width: 100%; }
  .tb > div { grid-column: span 2 !important; grid-row: auto !important; min-height: calc(9 * var(--mm)); gap: 4px; }
  .tb .tol, .tb .own, .tb .ttl, .tb .dwn { grid-column: 1 / -1 !important; }
  .tb .ap { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: calc(.8 * var(--mm)) calc(1.2 * var(--mm)); }
  .tb .ap dt, .tb .ap dd { width: auto; }
  .tb dd { white-space: normal; }
  .rb .c-appd, .rb .c-zone { display: none; }
}

/* ---- one sheet alone: ?sheet=<id> -------------------------------------------------- */
body[data-solo] .sheet:not(.solo), body[data-solo] .foot, body[data-solo] .intro { display: none; }

/* ---- print: vellum on white, one sheet per page ----------------------------------------- */
@media print {
  :root, :root[data-paper] {
    --table: #fff; --paper: #fff; --paper-2: #eef0ee; --ink: #000; --ink-2: #333; --ink-3: #777; --red: #b0322a;
    --raster-filter: grayscale(1) contrast(1.15); --raster-blend: multiply; --band: calc(5 * var(--mm)); --gut: calc(5 * var(--mm));
    color-scheme: light;
  }
  body { font-size: 10.5pt; background: #fff; }
  .sheet::after, .bar, .skip, .paper { display: none !important; }
  .sheet { max-width: none; margin: 0; break-before: page; }
  .sheet:first-of-type, body[data-solo] .sheet.solo { break-before: auto; }
  .tb, figure, tr, .nb li { break-inside: avoid; }
  .dwg .pan, .view .pan { overflow: visible; }
  .dwg-svg { max-height: 4.4in; }
  .photo img { max-height: 4.4in; width: auto; max-width: 100%; }
  a { text-decoration: none; }
  .foot { break-before: avoid; }
}

/* production sheets: a stack of views and tables beside a larger view */
.prod .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(8 * var(--mm)); align-content: start; }
.prod .view { margin: 0; }
.u { text-transform: none; }

/* assembly sheets: the exploded isometric is the hero, the parts list beside it, white space kept */
.prod .asm { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: calc(10 * var(--mm)) calc(16 * var(--mm)); align-items: start; }
.prod .asm .hero { margin: 0; }
@media (max-width: 1300px) { .prod .asm { grid-template-columns: minmax(0, 1fr); } }
/* only side by side where there is room: below 1300 px it stacks like every .asm (this rule used to win on phones
   and squeezed the assembly view to a strip beside the revisions table) */
@media (min-width: 1301px) { .prod .asm.list-wide { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); } }

/* ---- one drawing, full screen (phones: tap a view; drawing.js) -------------------------- */
.enlarge { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: auto; background: var(--paper); color: var(--ink); }
.enlarge::backdrop { background: var(--paper); }
.enlarge .en-bar { position: sticky; top: 0; left: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: var(--paper); border-bottom: var(--b35) solid var(--ink); font-family: var(--let); text-transform: uppercase; font-size: 13px; }
.enlarge .en-bar button { font: inherit; color: inherit; background: none; border: var(--b35) solid var(--ink); padding: 8px 12px; min-height: 44px; }
.enlarge .en-view { flex: 1 0 auto; display: grid; place-items: center; padding: 12px max(8px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); box-sizing: border-box; }
.enlarge .en-view > svg { display: block; width: 100%; max-width: none; height: auto; }
.enlarge .en-hint { display: none; margin: 0; padding: 0 16px max(20px, env(safe-area-inset-bottom)); text-align: center; font-family: var(--let); text-transform: uppercase; font-size: 13px; color: var(--ink-2); }
@media (orientation: portrait) { .enlarge .en-hint { display: block; } }
.enlarge[open] { display: flex; flex-direction: column; }
.enlarge .en-bar, .enlarge .en-hint { flex: none; }
.enlarge .en-name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }