/* Coupes & Axonométries
 * Layout: a plan chest of drawing sheets. The index is a grid of sheets, each
 * with its own title block; a sheet view pairs one large plate with a
 * drafting-table panel of instruments (view, projection, cut, rotation).
 * Light theme = drafting vellum with blue-black technical pen and a red
 * pencil for section marks. Dark theme = cyanotype blueprint.
 */
:root {
  /* page */
  --bg: #e3e6e0;          /* drafting table: cool grey-green */
  --sheet: #f8f8f4;       /* vellum */
  --ink: #1b2130;         /* technical pen, blue-black */
  --ink-2: #545c6b;       /* secondary text */
  --rule: #c2c7bf;        /* sheet borders, hairlines */
  --rule-2: #d6dad3;
  --accent: #c42a35;      /* red pencil: section marks, active state */
  --accent-ink: #ffffff;
  --focus: #2d5bd1;

  /* type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* drawing: line work */
  --d-line: #1b2130;
  --d-cut-line: #1b2130;
  --d-glass-line: #3d6f88;
  --poche: #1b2130;
  --w-edge: 0.75px;
  --w-thin: 0.45px;
  --w-cut: 1.5px;

  /* drawing: material tones t0 (top) / t1 (left) / t2 (right) */
  --ground-0: #e4e7da; --ground-1: #ccd0c0; --ground-2: #b6bba9;
  --slab-0: #fdfdfa;   --slab-1: #e3e5df;   --slab-2: #c9ccc5;
  --stone-0: #f5f1e5;  --stone-1: #e3ddcb;  --stone-2: #cdc5b0;
  --wall-0: #ffffff;   --wall-1: #e7e8e3;   --wall-2: #cfd1cb;
  --concrete-0: #eaeae4; --concrete-1: #d4d5ce; --concrete-2: #bcbeb6;
  --brick-0: #e5cbb9;  --brick-1: #d0af9a;  --brick-2: #b9937d;
  --wood-0: #ecdec6;   --wood-1: #d9c5a4;   --wood-2: #c2aa85;
  --steel-0: #5f6571;  --steel-1: #474d58;  --steel-2: #333842;
  --roof-0: #f7f7f2;   --roof-1: #dfe1db;   --roof-2: #c7cac2;
  --water-0: #d2e5ea;  --water-1: #b4d2da;  --water-2: #9cbfc9;
  --tree-0: #d7dfcc;   --tree-1: #c0cbb3;   --tree-2: #aab899;
  --red-0: #cf5a49;    --red-1: #b84a3c;    --red-2: #9c3d31;
  --blue-0: #4e78ad;   --blue-1: #3f6697;   --blue-2: #32557f;
  --yellow-0: #e0b048; --yellow-1: #c99a35; --yellow-2: #ad8228;
  --glass: #8fbfcf;
  --glass-op: 0.3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #081629; --sheet: #0e2545; --ink: #e4edf8; --ink-2: #9cb0ca;
    --rule: #284265; --rule-2: #1d3556; --accent: #ff9b8c; --accent-ink: #081629; --focus: #9cc8ff;
    --d-line: #d9e6f6; --d-cut-line: #d9e6f6; --d-glass-line: #9cc8f0; --poche: #d9e6f6;
    --ground-0: #15314f; --ground-1: #122b47; --ground-2: #0f253f;
    --slab-0: #1d3d66;   --slab-1: #17345a;   --slab-2: #122c4e;
    --stone-0: #20406a;  --stone-1: #1a375d;  --stone-2: #152f51;
    --wall-0: #1f416c;   --wall-1: #18375e;   --wall-2: #132e51;
    --concrete-0: #1b3a62; --concrete-1: #163257; --concrete-2: #112a4b;
    --brick-0: #2a3e63;  --brick-1: #243659;  --brick-2: #1e2f4e;
    --wood-0: #243f63;   --wood-1: #1f3759;   --wood-2: #1a304e;
    --steel-0: #0a1a31;  --steel-1: #09172c;  --steel-2: #071326;
    --roof-0: #1e3f69;   --roof-1: #18365c;   --roof-2: #132e50;
    --water-0: #1d4b78;  --water-1: #19426b;  --water-2: #153a5f;
    --tree-0: #1a405b;   --tree-1: #163851;   --tree-2: #123047;
    --red-0: #47406d;    --red-1: #3e3862;    --red-2: #353056;
    --blue-0: #24578f;   --blue-1: #1f4c7f;   --blue-2: #1a426f;
    --yellow-0: #3f5873; --yellow-1: #374e68; --yellow-2: #2f445c;
    --glass: #8fc3f2;    --glass-op: 0.16;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #081629; --sheet: #0e2545; --ink: #e4edf8; --ink-2: #9cb0ca;
  --rule: #284265; --rule-2: #1d3556; --accent: #ff9b8c; --accent-ink: #081629; --focus: #9cc8ff;
  --d-line: #d9e6f6; --d-cut-line: #d9e6f6; --d-glass-line: #9cc8f0; --poche: #d9e6f6;
  --ground-0: #15314f; --ground-1: #122b47; --ground-2: #0f253f;
  --slab-0: #1d3d66;   --slab-1: #17345a;   --slab-2: #122c4e;
  --stone-0: #20406a;  --stone-1: #1a375d;  --stone-2: #152f51;
  --wall-0: #1f416c;   --wall-1: #18375e;   --wall-2: #132e51;
  --concrete-0: #1b3a62; --concrete-1: #163257; --concrete-2: #112a4b;
  --brick-0: #2a3e63;  --brick-1: #243659;  --brick-2: #1e2f4e;
  --wood-0: #243f63;   --wood-1: #1f3759;   --wood-2: #1a304e;
  --steel-0: #0a1a31;  --steel-1: #09172c;  --steel-2: #071326;
  --roof-0: #1e3f69;   --roof-1: #18365c;   --roof-2: #132e50;
  --water-0: #1d4b78;  --water-1: #19426b;  --water-2: #153a5f;
  --tree-0: #1a405b;   --tree-1: #163851;   --tree-2: #123047;
  --red-0: #47406d;    --red-1: #3e3862;    --red-2: #353056;
  --blue-0: #24578f;   --blue-1: #1f4c7f;   --blue-2: #1a426f;
  --yellow-0: #3f5873; --yellow-1: #374e68; --yellow-2: #2f445c;
  --glass: #8fc3f2;    --glass-op: 0.16;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 48px;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input { font: inherit; color: inherit; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { max-width: 1320px; margin: 0 auto; }

.mono, .label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.label { color: var(--ink-2); }

/* ------------------------------------------------------------- masthead */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 32px;
  align-items: end;
  padding-block: 36px 22px;
  border-bottom: 1.5px solid var(--ink);
}
.masthead h1 {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(1.9rem, 5.4vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
.masthead h1 a { text-decoration: none; }
.masthead h1 .amp { font-weight: 300; }
.masthead .sub {
  margin: 10px 0 0;
  font-stretch: 100%;
  color: var(--ink-2);
  max-width: 60ch;
}
.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: flex-end;
}
.masthead nav a { text-decoration: none; padding-block: 4px; border-bottom: 1.5px solid transparent; }
.masthead nav a:hover { border-bottom-color: var(--ink); }
.masthead nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.masthead nav .soon { color: var(--ink-2); }
@media (max-width: 760px) {
  .masthead { grid-template-columns: minmax(0, 1fr); padding-block: 24px 16px; }
  .masthead nav { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- index */
.series-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 28px 16px;
}
.series-head h2 {
  margin: 0;
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.series-head h2 .code { font-family: var(--font-mono); font-weight: 500; font-size: 0.8em; color: var(--accent); margin-right: 10px; letter-spacing: 0.04em; }
.series-head p { margin: 0; color: var(--ink-2); max-width: 62ch; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 18px;
}

.card {
  display: grid;
  grid-template-rows: auto auto;
  background: var(--sheet);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--ink); }
.card .art {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 10px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.card .art .plate {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  transition: opacity 0.35s ease;
  --w-edge: 0.6px; --w-thin: 0.4px; --w-cut: 1px;
}
.card .art .plate.alt { opacity: 0; }
.card:hover .art .plate.alt, .card:focus-visible .art .plate.alt { opacity: 1; }
.card:hover .art .plate.main, .card:focus-visible .art .plate.main { opacity: 0; }
.card .art .flag {
  position: absolute;
  top: 8px; right: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.card .art .flag .s { display: none; }
.card:hover .art .flag .a, .card:focus-visible .art .flag .a { display: none; }
.card:hover .art .flag .s, .card:focus-visible .art .flag .s { display: inline; }
.card .err { position: absolute; inset: 10px; display: grid; place-items: center; text-align: center; color: var(--accent); font-family: var(--font-mono); font-size: 12px; }

/* title block, shared by cards and the sheet view */
.tb {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  font-size: 13px;
}
.tb > div { padding: 8px 10px; min-width: 0; }
.tb > div + div { border-left: 1px solid var(--rule); }
.tb .no { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; color: var(--accent); display: grid; place-items: center; }
.tb .nm { font-weight: 650; font-stretch: 108%; line-height: 1.25; }
.tb .ar { color: var(--ink-2); line-height: 1.3; }
.tb .yr { font-family: var(--font-mono); font-size: 12px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }

.soon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0;
  border: 1px dashed var(--rule);
}
.soon-list > div { padding: 14px 16px; border-right: 1px dashed var(--rule-2); color: var(--ink-2); }
.soon-list b { display: block; color: var(--ink); font-weight: 600; font-stretch: 108%; }

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px;
  padding-block: 8px 0;
}
.about h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; font-stretch: 108%; }
.about p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.legend { display: grid; gap: 8px; margin-top: 10px; }
.legend div { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.legend i { flex: none; width: 34px; height: 14px; border: 1px solid var(--ink); }
.legend .poche { background: var(--poche); }
.legend .tone { background: linear-gradient(90deg, var(--wall-0) 33%, var(--wall-1) 33% 66%, var(--wall-2) 66%); }
.legend .glass { background: color-mix(in srgb, var(--glass) 40%, var(--sheet)); border-color: var(--d-glass-line); }
.legend .dash { border: 0; border-top: 1.5px dashed var(--ink); height: 0; }
.legend .mark { border: 0; border-top: 2px dashed var(--accent); height: 0; }

/* ---------------------------------------------------------------- sheet */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 18px 12px;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.sheet-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px) {
  .sheet-view { grid-template-columns: minmax(0, 1fr); }
}

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule-2), 0 14px 30px -18px rgba(10, 20, 40, 0.35);
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
}
.sheet .stage {
  position: relative;
  padding: 14px;
  min-height: 300px;
  display: grid;
  place-items: center;
  touch-action: none; /* drags turn, tilt and pan the drawing; scroll beside it */
  cursor: default;
  overflow: hidden;
}
.sheet .stage.zoomed { cursor: grab; }
.sheet .stage.can-turn { cursor: grab; }
.sheet .stage.turning { cursor: grabbing; }
.sheet .stage > .art { width: 100%; display: grid; place-items: center; }
.sheet .stage .plate {
  width: 100%;
  height: auto;
  max-height: min(72vh, 820px);
  display: block;
  user-select: none;
  -webkit-user-select: none;
}
/* zoom buttons, top right of the drawing */
.zoombar {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  border: 1px solid var(--rule);
  background: var(--sheet);
  z-index: 2;
}
.zoombar button {
  appearance: none; border: 0; background: transparent;
  min-width: 32px; height: 30px; padding: 0 8px;
  font-family: var(--font-mono); font-size: 13px; cursor: pointer;
}
.zoombar button + button { border-left: 1px solid var(--rule); }
.zoombar button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* parts: clickable groups in the drawing, chips and a description card */
.stage .plate g.pick { cursor: pointer; }
.stage .plate g.pick:hover polygon:not(.cut) { fill-opacity: .78; }
.plate.has-sel > g:not(.sel):not(.ov):not(.ghosts) { opacity: .22; }
.plate g.sel polygon:not(.ns), .plate g.sel path.edge { stroke: var(--accent); stroke-width: 1.4px; }
.parts { display: grid; gap: 10px; }
.parts h2 { margin: 0; font-size: 0.95rem; font-weight: 700; font-stretch: 110%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.parts h2 .label { font-size: 10px; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--sheet);
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 999px;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.part-card { border-left: 2px solid var(--accent); padding: 2px 0 2px 12px; }
.part-card h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; font-stretch: 108%; }
.part-card p { margin: 0; max-width: 62ch; }

.collection-head {
  display: grid;
  gap: 4px;
  padding-block: 30px 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.collection-head h3 { margin: 0; font-size: 1.1rem; font-weight: 700; font-stretch: 110%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.collection-head p { margin: 0; color: var(--ink-2); max-width: 70ch; }

/* wide sheets (long ships): drawing across the page, panel below in two columns */
.sheet-view.wide { grid-template-columns: minmax(0, 1fr); }
.sheet-view.wide .panel { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; column-gap: 28px; }
.sheet-view.wide .panel > header { grid-column: 1 / -1; }
.sheet-view.wide .stage .plate { max-height: min(62vh, 640px); }
@media (max-width: 860px) { .sheet-view.wide .panel { grid-template-columns: minmax(0, 1fr); } }

.sheet .hint {
  position: absolute;
  left: 14px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  pointer-events: none;
}
.sheet .tb-big {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
  border-top: 1.5px solid var(--ink);
  font-size: 13px;
}
.sheet .tb-big > div { padding: 8px 12px; min-width: 0; }
.sheet .tb-big > div + div { border-left: 1px solid var(--rule); }
.sheet .tb-big .label { display: block; font-size: 9.5px; margin-bottom: 2px; }
.sheet .tb-big .v { font-weight: 600; font-stretch: 106%; line-height: 1.25; overflow-wrap: anywhere; }
.sheet .tb-big .v.m { font-family: var(--font-mono); font-weight: 500; font-size: 12px; font-stretch: 100%; }
.sheet .tb-big .sub { display: block; color: var(--ink-2); font-size: 12.5px; font-weight: 400; font-stretch: 100%; margin-top: 2px; line-height: 1.3; }
.sheet .tb-big .no { color: var(--accent); font-family: var(--font-mono); font-weight: 600; display: grid; align-content: center; }
@media (max-width: 720px) {
  .sheet .tb-big { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sheet .tb-big > div + div { border-left: 0; }
  .sheet .tb-big > div { border-top: 1px solid var(--rule); }
  .sheet .tb-big > div:nth-child(even) { border-left: 1px solid var(--rule); }
  .sheet .tb-big > div:first-child, .sheet .tb-big > div:nth-child(2) { border-top: 0; }
}

/* instrument panel */
.panel { display: grid; gap: 18px; min-width: 0; }
.panel h1 {
  margin: 0;
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.panel .byline { margin: 6px 0 0; color: var(--ink-2); }
.panel .byline b { color: var(--ink); font-weight: 600; }

.instruments {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--sheet) 55%, var(--bg));
}
.group { display: grid; gap: 7px; min-width: 0; }
.group > .label { font-size: 10.5px; }
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--ink);
  width: fit-content;
  max-width: 100%;
}
.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
}
.seg button + button { border-left: 1px solid var(--ink); }
.seg button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.seg.views button { font-weight: 600; }
.seg button small { font-family: var(--font-mono); font-size: 10px; opacity: 0.75; margin-left: 4px; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.btn {
  appearance: none;
  border: 1px solid var(--ink);
  background: transparent;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
}
.btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }

.slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.slider input[type="range"] { width: 100%; accent-color: var(--accent); }
.slider output { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 8ch; text-align: right; }

.notes { display: grid; gap: 14px; }
.notes p { margin: 0; max-width: 62ch; }
.notes h2 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 700; font-stretch: 110%; }
.facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 1px solid var(--rule); }
.facts dt, .facts dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--rule-2); }
.facts dt { padding-right: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding-top: 9px; }
.facts dd { font-size: 14.5px; }
.sources { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sources a { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sources a:hover { color: var(--accent); }
.sources span { display: block; color: var(--ink-2); font-size: 14px; }
.accuracy { font-size: 13.5px; color: var(--ink-2); border-left: 2px solid var(--rule); padding-left: 10px; }

.pager { display: flex; justify-content: space-between; gap: 12px; padding-block: 22px 0; border-top: 1px solid var(--rule); margin-top: 26px; }
.pager a { text-decoration: none; display: grid; gap: 2px; max-width: 48%; }
.pager a:last-child { text-align: right; margin-left: auto; }
.pager a:hover b { text-decoration: underline; }
.pager b { font-weight: 650; font-stretch: 108%; }

/* One column (phones, tablets): the drawing and its controls on one screen.
 * The figure and the panel step aside (display: contents) so their parts can
 * be reordered: name, drawing, controls, parts, title block, notes. The
 * drawing then stays pinned to the top (sticky, fixed height so it doesn't
 * jump between views) while everything below scrolls under it, so each
 * change shows as it is made. Short screens (landscape phones) don't pin.
 * The scroll padding keeps a control scrolled into view (keyboard focus,
 * find in page) out from under the pinned drawing. */
@media (max-width: 980px) {
  .sheet-view, .sheet-view.wide { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .sheet-view > .sheet, .sheet-view > .panel { display: contents; }
  .sheet-view .panel > * { order: 7; } /* a new panel section goes last unless placed here */
  .sheet-view .panel > header { order: 1; }
  .sheet-view .sheet .stage { order: 2; background: var(--sheet); border: 1px solid var(--rule); }
  .sheet-view .panel > .instruments { order: 3; }
  .sheet-view .panel > .parts { order: 4; }
  .sheet-view .sheet .tb-big { order: 5; background: var(--sheet); border: 1px solid var(--rule); border-top: 1.5px solid var(--ink); }
  .sheet-view .panel > .notes { order: 6; }
}
@media (max-width: 980px) and (min-height: 561px) {
  :root { --stage-h: clamp(220px, 44vh, 560px); }
  @supports (height: 1svh) { :root { --stage-h: clamp(220px, 44svh, 560px); } }
  html:has(.sheet-view) { scroll-padding-top: calc(var(--stage-h) + env(safe-area-inset-top, 0px) + 12px); }
  .sheet-view .sheet .stage {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
    height: var(--stage-h);
    min-height: 0;
    box-shadow: 0 12px 20px -18px rgba(10, 20, 40, 0.55);
  }
  .sheet-view .sheet .stage .plate { max-height: calc(var(--stage-h) - 30px); }
}
/* Pop-out window (app.js, ?solo): the drawing and its controls alone,
 * filling the window; the ↗ button that opens it is for desktop only. */
@media (max-width: 980px), (pointer: coarse) { .zoombar [data-zoom="pop"] { display: none; } }
html.solo .zoombar [data-zoom="pop"],
html.solo .masthead, html.solo footer.colophon, html.solo .crumbs, html.solo .pager, html.solo .notes { display: none; }
html.solo .wrap { max-width: none; }
@media (min-width: 981px) {
  html.solo body { padding: 12px; }
  html.solo .sheet-view, html.solo .sheet-view.wide {
    grid-template-columns: minmax(0, 1fr) 320px;
    height: calc(100vh - 24px);
    align-items: stretch;
  }
  html.solo .sheet { grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  html.solo .sheet .stage { min-height: 0; }
  html.solo .sheet .stage .plate, html.solo .sheet-view.wide .stage .plate { max-height: calc(100vh - 150px); }
  html.solo .panel, html.solo .sheet-view.wide .panel {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }
  html.solo .panel h1 { font-size: 1.4rem; }
}

/* Phones: a slimmer masthead on sheets, so the controls show on the first screen. */
@media (max-width: 760px) {
  .wrap:has(.sheet-view) .masthead { padding-block: 14px 10px; gap: 6px 18px; }
  .wrap:has(.sheet-view) .masthead h1 { font-size: 1.5rem; }
  .wrap:has(.sheet-view) .masthead .sub { display: none; }
  .wrap:has(.sheet-view) .crumbs { padding-block: 12px 4px; }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--sheet);
  padding: 8px 14px;
  font-size: 13px;
  z-index: 20;
}
.copy-fallback textarea { width: 100%; height: 120px; font-family: var(--font-mono); font-size: 11px; }

footer.colophon {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--ink-2);
  font-size: 13.5px;
}
footer.colophon p { margin: 0; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}