/* 03b Flight plan: procedures. The flight-plan console as a NASA procedure book, in two themes.
   Paper checklist (native, light, and the no-JavaScript fallback) and the dark console (dark).
   The theme lives on <html data-theme="light|dark"> (kit/shared/theme-init.js). Every colour below is a
   token, so setting the attribute alone switches the whole page. Print is always light.
   Contrast for every text token is checked against --bg, --panel, --panel-2 and --panel-3 (see NOTES.md). */

:root {
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --wrap: 88rem;
  --gut: clamp(1rem, 3vw, 2rem);
  --r: 4px;
  --rc: 10px;
}

/* Paper checklist: a laminated card and procedure sheets on a gridded desk. */
:root:not([data-theme]), :root[data-theme="light"] {
  color-scheme: light;
  --bg: #e8e6dc;
  --grid: rgba(60, 70, 50, 0.07);
  --grid-2: rgba(40, 60, 45, 0.09);
  --panel: #fcfbf6;
  --panel-2: #f3f2ea;
  --panel-3: #e8e8de;
  --line: #d3d2c5;
  --line-2: #a7a897;
  --ink: #15191a;
  --ink-2: #2f3836;
  --muted: #4d5c53;
  --amber: #8a4b00;
  --amber-line: #c2873a;
  --phos: #11683a;
  --phos-text: #0e5630;
  --vtag-wash: transparent;
  --focus: #0a55c9;
  --on-c: #ffffff;
  --bar-bg: rgba(252, 251, 246, 0.95);
  --foot-bg: #f3f2ea;
  --amber-wash: rgba(138, 75, 0, 0.06);
  --amber-wash-2: rgba(138, 75, 0, 0.09);
  --phos-wash: rgba(17, 104, 58, 0.1);
  --sky-wash: rgba(11, 98, 135, 0.06);
  --sel-glow: 0 2px 8px rgba(18, 26, 22, 0.25);
  --fig-glow: none;
  --now-glow: none;
  --lamp-glow: 0 0 0;
  --bar-dim: 0.88;
  --shadow: 0 1px 0 rgba(18, 26, 22, 0.05), 0 1px 3px rgba(18, 26, 22, 0.06);
  --card-ring: #ffffff;
  --card-shadow: 0 1px 2px rgba(18, 26, 22, 0.08), 0 14px 34px rgba(18, 26, 22, 0.12);
  --card-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 38%);

  /* Lane and accent inks, deepened so white bar labels and coloured text pass 4.5:1. */
  --c-cobalt: #2f52c2;
  --c-amber: #8a5200;
  --c-crimson: #b3263a;
  --c-orange: #a3410a;
  --c-sky: #0b6287;
  --c-magenta: #9c2a7b;
  --c-violet: #6440c4;
  --c-teal: #0a675b;
  --c-green: #2a6827;
}

/* Dark console: night shift in the firing room. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f0d;
  --grid: rgba(160, 210, 180, 0.04);
  --grid-2: rgba(160, 210, 180, 0.07);
  --panel: #0f1714;
  --panel-2: #142019;
  --panel-3: #1b2a22;
  --line: #24352d;
  --line-2: #36503f;
  --ink: #e9f1ec;
  --ink-2: #c3d1c8;
  --muted: #98ad9f;
  --amber: #ffb84d;
  --amber-line: #b98432;
  --phos: #7fe3a9;
  --phos-text: #7fe3a9;
  --vtag-wash: rgba(127, 227, 169, 0.14);
  --focus: #ffd56e;
  --on-c: #07100b;
  --bar-bg: rgba(8, 12, 10, 0.94);
  --foot-bg: rgba(8, 12, 10, 0.9);
  --amber-wash: rgba(255, 184, 77, 0.06);
  --amber-wash-2: rgba(255, 184, 77, 0.09);
  --phos-wash: rgba(127, 227, 169, 0.14);
  --sky-wash: rgba(111, 211, 242, 0.06);
  --sel-glow: 0 0 16px rgba(233, 241, 236, 0.35);
  --fig-glow: 0 0 14px rgba(255, 184, 77, 0.22);
  --now-glow: 0 0 10px rgba(255, 184, 77, 0.6);
  --lamp-glow: 0 0 8px;
  --bar-dim: 0.8;
  --shadow: none;
  --card-ring: #1b2a22;
  --card-shadow: 0 0 0 1px rgba(127, 227, 169, 0.08), 0 18px 40px rgba(0, 0, 0, 0.5);
  --card-sheen: none;

  /* Lane and accent hues, tuned for a dark ground. Text on them uses --on-c. */
  --c-cobalt: #88aaff;
  --c-amber: #f4bd57;
  --c-crimson: #ff8f95;
  --c-orange: #ffa366;
  --c-sky: #6fd3f2;
  --c-magenta: #f196da;
  --c-violet: #bca5ff;
  --c-teal: #57d7c5;
  --c-green: #97e391;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
}
a { color: var(--ink); text-decoration-color: var(--amber-line); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--amber); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
.k { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.d { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 0.75rem; top: -4rem; z-index: 50; background: var(--amber); color: var(--on-c); padding: 0.5rem 0.9rem; font-weight: 600; border-radius: var(--r); }
.skip:focus { top: 0.75rem; }
main:focus { outline: none; }

/* ---------- indicator lamps ----------
   lamp--on is decoration. lamp--pub and lamp--self show the evidence status of the item they sit on:
   lit for a linked public artifact, hollow for my own records. The word beside each one says which. */
.lamp { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-2); flex: none; vertical-align: 0.05em; }
.lamp--on { background: var(--phos); box-shadow: 0 0 0 2px color-mix(in srgb, var(--phos) 15%, transparent), var(--lamp-glow) color-mix(in srgb, var(--phos) 55%, transparent); }
.lamp--pub { background: var(--phos); box-shadow: 0 0 0 2px color-mix(in srgb, var(--phos) 18%, transparent), var(--lamp-glow) color-mix(in srgb, var(--phos) 55%, transparent); }
.lamp--self { background: transparent; border: 1.5px solid var(--muted); }

/* ---------- tags ---------- */
.tagc { display: inline-block; font: 400 0.75rem/1.35 var(--mono); letter-spacing: 0.02em; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 2px; padding: 0.1rem 0.4rem; white-space: nowrap; }
.tagc--now { color: var(--phos); border-color: color-mix(in srgb, var(--phos) 45%, transparent); }
/* Verification words from the data. */
.vtag { display: inline-flex; align-items: center; gap: 0.4rem; font: 600 0.75rem/1.35 var(--mono); letter-spacing: 0.02em; padding: 0.12rem 0.45rem; border: 1px solid var(--line-2); border-radius: 2px; color: var(--ink-2); white-space: nowrap; }
.vtag--public_artifact { color: var(--phos-text); border-color: color-mix(in srgb, var(--phos) 50%, transparent); background: var(--vtag-wash); }
.vtag--self_reported { border-style: dashed; }

/* ---------- console bar ---------- */
.cbar { position: sticky; top: 0; z-index: 20; background: var(--bar-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.cbar__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 1.25rem; min-height: 3.25rem; }
.cbar__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font: 600 0.875rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.cbar__mono { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--amber); color: var(--amber); font: 600 0.8125rem/1 var(--mono); letter-spacing: 0; border-radius: 2px; }
.cbar__sub { color: var(--muted); margin-left: 0.3rem; }
.cbar__nav { flex: 1; min-width: 0; }
.cbar__nav ul { list-style: none; display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; }
.cbar__nav ul::-webkit-scrollbar { display: none; }
.cbar__nav a { display: block; padding: 0.5rem 0.55rem; font: 400 0.8125rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-radius: 2px; white-space: nowrap; }
.cbar__nav a:hover { color: var(--amber); background: var(--panel-2); }
.cbar__rev { font: 400 0.75rem/1 var(--mono); color: var(--muted); white-space: nowrap; }
.cbar__rev .k { margin-right: 0.35rem; }

/* Theme switch: a console toggle. The label stays "Dark theme"; aria-pressed carries the state. */
.tgl {
  flex: none; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2rem; padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  background: var(--panel); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 2px; cursor: pointer;
  font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.tgl:hover { color: var(--amber); border-color: var(--amber); }
.tgl:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tgl__sw { position: relative; flex: none; width: 1.95rem; height: 1.05rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel-3); }
.tgl__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.05rem - 6px); height: calc(1.05rem - 6px); border-radius: 50%; background: var(--muted); }
:root[data-theme="dark"] .tgl__sw { border-color: color-mix(in srgb, var(--phos) 55%, var(--line-2)); }
:root[data-theme="dark"] .tgl__sw::after { transform: translateX(0.9rem); background: var(--phos); box-shadow: var(--lamp-glow) color-mix(in srgb, var(--phos) 60%, transparent); }
html:not([data-theme]) [data-theme-toggle] { display: none; }
@media (prefers-reduced-motion: no-preference) { .tgl__sw::after { transition: transform 0.15s ease-out, background-color 0.15s; } }

/* ---------- phone procedure index (sticky; phones only, see the 40rem block) ---------- */
.jump { display: none; }

main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut) 3rem; display: grid; gap: 1.5rem; }

/* ---------- flight card ----------
   A laminated reference card: identity and contact, the key facts, the roles held at the same time,
   and the nine strongest points as a systems board. A readout tray hangs under it. */
.card {
  position: relative; margin-top: 1.75rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--rc);
  box-shadow: 0 0 0 4px var(--card-ring), 0 0 0 5px var(--line-2), var(--card-shadow);
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--card-sheen); pointer-events: none; }
.card > * { position: relative; }
.card__strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.3rem 1rem; padding: 0.55rem 1.6rem; border-bottom: 1px solid var(--line); background: var(--amber-wash); border-radius: var(--rc) var(--rc) 0 0; }
.card__kicker { display: flex; align-items: center; gap: 0.5rem; font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.card__rev { font: 400 0.75rem/1.4 var(--mono); color: var(--muted); }
.card__rev .k { margin-right: 0.3rem; }
.card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); grid-template-rows: auto 1fr auto; grid-template-areas: "id facts" "contact facts" "sys sys"; gap: 1.25rem 2.25rem; padding: 1.4rem 1.6rem 1.5rem; }
.card__id { grid-area: id; min-width: 0; }
.card__positioning, .card__research { margin-top: 0.7rem; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.card__facts { grid-area: facts; min-width: 0; display: flex; flex-direction: column; }
.card__sys { grid-area: sys; min-width: 0; padding-top: 1.25rem; border-top: 1px dashed var(--line-2); }
.card h1 { font: 700 clamp(2.3rem, 4vw, 3.4rem)/1 var(--sans); letter-spacing: -0.025em; }
.card__aka { font: 400 0.8125rem/1.4 var(--mono); color: var(--muted); margin-top: 0.45rem; letter-spacing: 0.02em; }
.card__headline { font-size: 1.25rem; line-height: 1.35; color: var(--ink-2); margin-top: 0.7rem; font-weight: 600; max-width: 28ch; }
.card__contact { grid-area: contact; margin: 0; display: grid; gap: 0.3rem; align-content: start; padding-top: 0.9rem; border-top: 1px dashed var(--line-2); }
.card__contact div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.card__contact dt { font: 600 0.75rem/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card__contact dd { margin: 0; font: 400 0.875rem/1.5 var(--mono); overflow-wrap: anywhere; }

.minihead { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); margin-bottom: 0.9rem; }
.minihead__sub { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--muted); margin-left: auto; }

/* Key facts (kit.facts_strip): a console manifest. Mono keys in a column, plain sans values. */
.facts { margin: 0; display: grid; }
.facts__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.55rem 0; border-top: 1px dashed var(--line-2); }
.facts__row:first-child { border-top: 0; padding-top: 0.1rem; }
.facts__k { display: flex; align-items: center; gap: 0.5rem; align-self: start; padding-top: 0.2rem; font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts__k::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--line-2); }
.facts__row:first-child .facts__k { color: var(--phos); }
.facts__row:first-child .facts__k::before { background: var(--phos); box-shadow: var(--lamp-glow) color-mix(in srgb, var(--phos) 55%, transparent); }
.facts__row:nth-child(2) .facts__k::before { background: var(--amber-line); }
.facts__v { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.facts__strong { color: var(--ink); font-weight: 600; }
.facts__v a { white-space: nowrap; font: 400 0.875rem/1.5 var(--mono); }

/* Roles held at the same time as the current one (the Disney role is in the facts above). */
.card__also { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.card__also-h { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card__also-h::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--phos); }
.nowlist { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.nowlist a { display: grid; gap: 0.05rem; height: 100%; align-content: start; padding: 0.45rem 0.65rem 0.5rem 0.75rem; border-left: 3px solid var(--c); background: var(--panel-2); text-decoration: none; border-radius: 0 var(--r) var(--r) 0; }
.nowlist a:hover { background: var(--panel-3); color: var(--ink); }
.nowlist__title { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; margin-bottom: 0.15rem; }
.nowlist a:hover .nowlist__title { color: var(--amber); }
.nowlist__org { font-size: 0.875rem; color: var(--ink-2); }
.nowlist__meta { font: 400 0.75rem/1.5 var(--mono); color: var(--muted); }
.nowlist__meta > span { white-space: nowrap; }

/* Systems board: nine cells, each a link to its strength readout. */
.sys-board { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sys-board li { display: flex; background: var(--panel); }
.sys-cell {
  position: relative; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 0.85rem; row-gap: 0.3rem;
  padding: 0.8rem 1rem 0.9rem; text-decoration: none; color: var(--ink); min-height: 8.25rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, transparent), transparent 60%);
}
.sys-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); opacity: 0.85; }
.sys-cell__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font: 600 0.75rem/1.2 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.sys-cell__st { display: inline-flex; align-items: center; gap: 0.4rem; letter-spacing: 0.02em; color: var(--ink-2); text-transform: none; }
.sys-cell__ico { grid-row: 2 / span 2; align-self: start; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: var(--r); color: var(--c); margin-top: 0.2rem; }
.ico { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sys-cell__label { font: 600 1.0625rem/1.3 var(--sans); align-self: end; margin-top: 0.15rem; }
.sys-cell__fig { font: 600 1.0625rem/1.35 var(--mono); color: var(--amber); letter-spacing: -0.01em; text-shadow: var(--fig-glow); }
.sys-cell__span { grid-column: 2; font: 400 0.75rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); align-self: end; padding-top: 0.3rem; }
.sys-cell:hover { background: var(--panel-3); color: var(--ink); }
.sys-cell:hover .sys-cell__label { color: var(--amber); }
.sys-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: -7px; border-radius: 0; }
.sys-cell[aria-current="true"] { background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--amber); }
.sys-cell[aria-current="true"] .sys-cell__code { color: var(--amber); }
.card__legend { margin-top: 0.8rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); max-width: 100ch; }
.card__legend .lamp { margin-right: 0.1rem; }

/* Readout tray under the card. */
.card__tray { padding: 0 1.6rem 1.6rem; }
.card__tray .readout { border-color: var(--line-2); }

/* Print option: outside the card, never printed. */
.printopt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: -0.35rem; font: 400 0.875rem/1.4 var(--sans); color: var(--ink-2); }
.printopt label { cursor: pointer; padding-block: 0.3rem; }
.printopt__box { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--amber); cursor: pointer; }
.printopt__btn { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.8rem; cursor: pointer; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); background: var(--panel); border: 1px solid var(--line-2); border-radius: 2px; }
.printopt__btn:hover { color: var(--amber); border-color: var(--amber); }
.printopt__note { font: 400 0.75rem/1.4 var(--mono); color: var(--muted); }
html:not([data-theme]) .printopt__btn { display: none; }

/* ---------- sections on the procedure-book pattern ---------- */
.sec { min-width: 0; }
.sec__head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.4rem 0 0.65rem; border-bottom: 2px solid var(--ink); margin-bottom: 1rem; }
.sec__id { font: 600 0.8125rem/1 var(--mono); color: var(--on-c); background: var(--amber); padding: 0.3rem 0.45rem; border-radius: 2px; }
.sec__head h2 { font: 700 1.5rem/1.2 var(--sans); letter-spacing: -0.012em; }
.sec__tag { margin-left: auto; font: 400 0.8125rem/1.4 var(--mono); color: var(--muted); }

/* ---------- readout panels ---------- */
.readout { display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); min-width: 0; align-self: start; }
.readout__d > summary { list-style: none; cursor: pointer; }
.readout__d > summary::-webkit-details-marker { display: none; }
.readout__d > summary:hover .readout__sub { color: var(--amber); }
.readout__d:not([open]) > summary { border-bottom: 0; }
.readout__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line-2); font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--phos); }
.readout__sub { color: var(--muted); margin-left: auto; letter-spacing: 0.04em; }
.readout__body { padding: 1rem 1.1rem 1.2rem; }
.readout__body:focus { outline: none; }
.readout__body:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.readout__foot { padding: 0.6rem 0.9rem; border-top: 1px solid var(--line-2); font-size: 0.875rem; color: var(--ink-2); }
.readout__back, .readout__foot--phone { display: none; }
@media (max-width: 40rem) {
  .readout__foot--phone { display: block; }
  .readout__back { display: inline-flex; align-items: center; min-height: 1.5rem; margin-top: 0.35rem; font: 400 0.8125rem/1.3 var(--mono); }
  .readout__back::before { content: "▴ "; white-space: pre; color: var(--amber); }
  .readout__foot .readout__back { display: flex; width: fit-content; }
}

/* ---------- fragment content inside readouts ---------- */
.fragment { display: grid; gap: 0.6rem; }
.frag__meta { font: 400 0.8125rem/1.45 var(--mono); color: var(--amber); letter-spacing: 0.02em; }
.frag__title { font: 600 1.3rem/1.25 var(--sans); letter-spacing: -0.01em; }
.frag__title:focus { outline: none; }
.frag__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.frag__org { color: var(--ink-2); font-size: 0.9375rem; }
.frag__note { font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); }
.frag__lede { font-size: 1rem; color: var(--ink); }
.frag__points, .proc__points { list-style: none; display: grid; gap: 0.45rem; }
.frag__points li, .proc__points li { position: relative; padding-left: 1.1rem; }
.frag__points li::before, .proc__points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0; height: 0; border-left: 6px solid var(--amber); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.frag__where, .frag__check, .frag__status, .frag__url { font-size: 0.9375rem; color: var(--ink-2); }
.frag__k { display: block; font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.1rem; }
.frag__check a, .frag__url a, .frag__ref a { color: var(--ink); overflow-wrap: anywhere; }
.frag__facts { margin: 0; display: grid; gap: 0.5rem; }
.frag__facts dt { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.frag__facts dd { margin: 0; }
.frag__rec { border-top: 1px solid var(--line-2); padding-top: 0.7rem; display: grid; gap: 0.3rem; align-content: start; }
.frag__rec h4 { font: 600 1rem/1.3 var(--sans); }
.frag__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.frag__gallery figure { margin: 0; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 0.5rem; display: grid; gap: 0.5rem; align-content: start; }
.frag__gallery img { display: block; width: 100%; height: 16rem; object-fit: cover; border-radius: 2px; background: #000; }
.frag__gallery figcaption { font: 400 0.8125rem/1.45 var(--mono); color: var(--ink-2); padding: 0 0.15rem 0.2rem; }
.load-error { color: var(--amber); }

/* Wide readouts (the card tray, and the mission log under its chart) run in two text columns. */
@media (min-width: 56.01rem) {
  .readout--sys .fragment, .fp__grid > .readout--log .fragment { display: block; columns: 2; column-gap: 2.75rem; column-rule: 1px solid var(--line); max-width: none; }
  .readout--sys .fragment > *, .readout--log .fragment > * { margin-bottom: 0.65rem; }
  .readout--sys .fragment > :last-child, .readout--log .fragment > :last-child { margin-bottom: 0; }
  .readout--sys .frag__meta, .readout--sys .frag__title, .readout--log .frag__meta, .readout--log .frag__title { column-span: all; }
  .readout--sys .frag__points, .readout--log .frag__points { display: block; }
  .readout--sys .frag__points li, .readout--log .frag__points li { break-inside: avoid; margin-bottom: 0.45rem; }
  .readout--sys .frag__where, .readout--sys .frag__check { break-inside: avoid; }
}
@media (max-width: 56rem) {
  .readout__body .fragment > * { max-width: 72ch; }
}

/* ---------- 01 mission log (the Gantt) ---------- */
.fp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.fp__chart { margin: 0; min-width: 0; --lab: 9.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem 1.1rem; box-shadow: var(--shadow); }
.fp__axis { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); gap: 0.75rem; height: 1.6rem; align-items: end; }
.fp__axis-k { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.4rem; }
.fp__ticks { position: relative; height: 100%; }
.fp__ticks span { position: absolute; left: calc(var(--x) * 1%); bottom: 0; padding: 0 0 0.4rem 0.3rem; border-left: 1px solid var(--line-2); font: 400 0.75rem/1 var(--mono); color: var(--ink-2); height: 100%; display: flex; align-items: flex-end; }
.fp__lanes { position: relative; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.fp-lane { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); gap: 0.75rem; border-top: 1px solid var(--line); }
.fp-lane:first-child { border-top: 0; }
.fp-lane__label { font: 600 0.75rem/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); padding: 0.4rem 0 0.4rem 0.6rem; border-left: 3px solid var(--c); align-self: stretch; display: flex; align-items: center; }
.fp-lane__track { list-style: none; display: grid; gap: 0.25rem; padding: 0.4rem 0; position: relative; }
/* Year grid (every year, stronger every five) drawn on a layer behind the bars, so labels sit on the panel. */
.fp-lane__track::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: var(--yr5) 100%, var(--yr) 100%;
}
.fp-row { position: relative; height: 1.25rem; }
.fp-bar {
  position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%); min-width: 6px;
  background: var(--c); color: var(--on-c); border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; font: 400 0.75rem/1 var(--mono);
}
/* Bars whose label sits outside: the fill is a layer of its own, so the label reads against the panel. */
.fp-bar--right, .fp-bar--left { background: none; }
.fp-bar--right::before, .fp-bar--left::before { content: ""; position: absolute; inset: -1px; background: var(--c); border-radius: 2px; }
.fp-bar__text { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; height: 100%; overflow: hidden; padding: 0 0.45rem; }
.fp-bar__label { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2rem; font-weight: 600; }
.fp-bar__dates { flex: none; white-space: nowrap; line-height: 1.2rem; opacity: var(--bar-dim); }
.fp-bar--right .fp-bar__text, .fp-bar--left .fp-bar__text {
  position: absolute; top: 0; color: var(--ink); padding: 0;
  max-width: calc(100% * (100 - var(--l) - var(--w)) / var(--w) - 0.85rem);
  width: max-content;
}
.fp-bar--right .fp-bar__text { left: calc(100% + 0.75rem); }
.fp-bar--left .fp-bar__text { right: calc(100% + 0.75rem); max-width: calc(100% * var(--l) / var(--w) - 0.85rem); flex-direction: row-reverse; }
.fp-bar--right .fp-bar__dates, .fp-bar--left .fp-bar__dates { color: var(--muted); opacity: 1; }
.fp-bar:hover { filter: brightness(1.12); color: var(--on-c); }
.fp-bar:hover .fp-bar__label { text-decoration: underline; text-underline-offset: 2px; }
.fp-bar--right:hover .fp-bar__label, .fp-bar--left:hover .fp-bar__label { color: var(--amber); }
.fp-bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.fp-bar:focus-visible .fp-bar__label { color: var(--focus); }
.fp-bar--inside:focus-visible .fp-bar__label { color: inherit; }
.fp-bar[aria-current="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink), var(--sel-glow); }
.fp-bar--right[aria-current="true"] .fp-bar__label, .fp-bar--left[aria-current="true"] .fp-bar__label { color: var(--amber); }
.fp__now { position: absolute; top: -1.6rem; bottom: -1.9rem; right: 0; width: 2px; background: var(--amber); box-shadow: var(--now-glow); pointer-events: none; }
.fp__now span { position: absolute; bottom: 0; right: 0; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-c); background: var(--amber); padding: 0.2rem 0.35rem; border-radius: 2px; }
.fp__cap { font-size: 0.875rem; color: var(--muted); margin-top: 0.7rem; max-width: 72ch; padding-right: 4rem; }

/* mini track used in the procedure sheets and the phone list */
.mtrack { display: block; position: relative; height: 6px; background: var(--line); border-radius: 3px; margin-top: 0.7rem; }
.mtrack__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: max(5px, calc(var(--w) * 1%)); background: var(--c); border-radius: 3px; }
.mtrack::after { content: "1995"; position: absolute; left: 0; top: 0.55rem; font: 400 0.75rem/1 var(--mono); color: var(--muted); }
.mtrack::before { content: "Now"; position: absolute; right: 0; top: 0.55rem; font: 400 0.75rem/1 var(--mono); color: var(--muted); }

/* ---------- 02 summary (plain) ---------- */
.brief__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; }
.brief__text { font-size: 1.125rem; line-height: 1.65; max-width: 70ch; }
.brief__side { border-left: 1px solid var(--line-2); padding-left: 1.5rem; display: grid; gap: 0.9rem; align-content: start; }
.brief__clear { font-size: 0.9375rem; color: var(--ink-2); }
.brief__clear + .brief__clear { padding-top: 0.9rem; border-top: 1px dashed var(--line-2); }
.brief__clear .k { display: block; margin-bottom: 0.15rem; }
.brief__focus { list-style: none; display: grid; gap: 0.2rem; margin-top: 0.3rem; }
.brief__focus li { padding-left: 1rem; position: relative; color: var(--ink); }
.brief__focus li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.45rem; height: 2px; background: var(--amber); }

/* ---------- 03 projects ---------- */
.prjs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.prj { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r); padding: 1.1rem 1.2rem 1.2rem; display: grid; gap: 0.85rem; align-content: start; box-shadow: var(--shadow); }
.prj--lead { grid-column: 1 / -1; }
.prj__kicker { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; font: 400 0.8125rem/1.4 var(--mono); color: var(--muted); }
.prj__kicker .tagc { color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.prj__kicker .vtag { margin-left: auto; }
.prj h3 { font: 600 1.375rem/1.25 var(--sans); letter-spacing: -0.01em; margin-top: 0.35rem; }
.prj--lead h3 { font-size: 1.6rem; }
.prj__rel { font-size: 0.9375rem; color: var(--ink-2); margin-top: 0.25rem; }
.prj__status { border: 1px solid var(--amber-line); border-left: 4px solid var(--amber); background: var(--amber-wash); padding: 0.65rem 0.85rem; border-radius: 2px; }
.prj__status .k { display: block; color: var(--amber); margin-bottom: 0.15rem; }
.prj__status-t { font-size: 1rem; }
.prj__facts { margin: 0; display: grid; gap: 0.7rem; }
.prj__facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.prj__facts dt { font: 600 0.75rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.prj__facts dd { margin: 0; max-width: 72ch; }
.prj--lead .prj__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.prj--lead .prj__facts div:last-child { grid-column: 1 / -1; }
.prj__ev { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.prj__ev .k { display: inline-flex; align-items: center; gap: 0.5rem; }
.evlist { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.evlist a, .evinline a { display: inline-block; font: 400 0.8125rem/1.3 var(--mono); padding: 0.2rem 0.5rem; border: 1px solid var(--line-2); border-radius: 2px; text-decoration: none; color: var(--ink); background: var(--panel); }
.evlist a::before { content: "↗ "; color: var(--phos); }
.evinline a::before { content: "↗"; color: var(--phos); }
.evlist a:hover, .evinline a:hover { border-color: var(--amber); color: var(--amber); }
.prj__noev { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- 04 procedures: one numbered sheet per record ---------- */
.procs__intro { display: grid; gap: 0.4rem; max-width: 80ch; color: var(--ink-2); margin-bottom: 1.1rem; }
.procs__list { list-style: none; display: grid; gap: 1rem; }
.proc { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); padding: 0; box-shadow: var(--shadow); display: grid; gap: 0.9rem; overflow: hidden; }
.proc__head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(16rem, 20rem); gap: 0.6rem 1.5rem; align-items: start; padding: 1rem 1.25rem 1rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-left: 5px solid var(--c); }
.proc__num { display: grid; justify-items: center; gap: 0.15rem; min-width: 3.4rem; padding: 0.35rem 0.4rem 0.4rem; border: 1px solid var(--line-2); border-radius: 2px; background: var(--panel); }
.proc__k { font: 600 0.75rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.proc__n { font: 700 1.5rem/1 var(--mono); color: var(--amber); letter-spacing: -0.02em; }
.proc__title { min-width: 0; display: grid; gap: 0.3rem; }
.proc h3 { font: 600 1.3rem/1.3 var(--sans); letter-spacing: -0.005em; }
.proc__org { font-weight: 600; color: var(--ink); }
.proc__client { color: var(--ink-2); font-weight: 400; }
.proc__note { font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); }
.proc__block { margin: 0; display: grid; gap: 0.2rem; font-size: 0.875rem; align-content: start; }
.proc__block div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.5rem; padding: 0.15rem 0; border-top: 1px dashed var(--line); }
.proc__block div:first-child { border-top: 0; }
.proc__block dt { font: 600 0.75rem/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.proc__block dd { margin: 0; color: var(--ink-2); }
.proc__dates { font: 600 0.9375rem/1.5 var(--mono); color: var(--amber) !important; }
.proc__dates .tagc { margin-left: 0.3rem; vertical-align: 0.1em; }
.proc__head .mtrack { grid-column: 3; margin-top: 0.2rem; margin-bottom: 1rem; }
.proc__group { margin: 0 1.25rem; font-size: 0.9375rem; color: var(--ink-2); border-left: 2px solid var(--amber-line); padding-left: 0.7rem; max-width: 86ch; }
.proc__group .k { margin-right: 0.35rem; color: var(--amber); }
.proc__scope { margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); color: var(--ink-2); max-width: 78ch; font-size: 0.9375rem; }
.proc__scope .proc__k { display: block; margin-bottom: 0.1rem; }

/* Steps: a numbered list with a verification column. The head row is decoration; each step's status
   carries its own hidden "Verification:" label. */
.steps { margin: 0 1.25rem; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.steps__head { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 12rem; gap: 0 1rem; padding: 0.4rem 0.85rem; background: var(--panel-3); font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.steps__list { list-style: none; display: grid; }
.step { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 12rem; gap: 0.3rem 1rem; padding: 0.65rem 0.85rem; border-top: 1px solid var(--line); align-items: start; }
.step__n { font: 600 0.875rem/1.55 var(--mono); color: var(--amber); }
.step__t { color: var(--ink); max-width: 80ch; }
.step__v { display: flex; flex-wrap: wrap; gap: 0.35rem; align-content: start; justify-self: start; }
.evinline { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; vertical-align: 0.05em; }
.evinline a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 1.5rem; font-size: 0.75rem; padding: 0.1rem 0.45rem; }
.steps__more > summary { display: none; }
.steps__more[open] > summary { display: none; }
.proc__more { margin: 0 1.25rem; }
.proc__more summary { cursor: pointer; font: 400 0.8125rem/1.5 var(--mono); color: var(--ink-2); letter-spacing: 0.04em; text-transform: uppercase; width: fit-content; padding-block: 0.25rem; }
.proc__more summary:hover { color: var(--amber); }
.proc__more[open] summary { margin-bottom: 0.45rem; }
.proc__photos { margin: 0 1.25rem; }
.proc__photos a { font: 400 0.875rem/1.4 var(--mono); }
.proc > :last-child { margin-bottom: 1.2rem; }
.proc > .proc__head:last-child { margin-bottom: 0; }

/* ---------- 05 mission archive ---------- */
.arch__view:focus { outline: none; }
.arch__closed {
  display: grid; gap: 0.9rem; justify-items: start; padding: 2rem 1.5rem; border: 1px dashed var(--line-2); border-radius: var(--r); max-width: 100%;
  background:
    linear-gradient(135deg, var(--sky-wash), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 46px, var(--grid-2) 46px 47px);
}
.arch__closed p { max-width: 64ch; color: var(--ink-2); }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--amber); color: var(--on-c); font: 600 0.875rem/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; border-radius: 2px; }
.btn::after { content: "▸"; }
.btn:hover { background: var(--focus); color: var(--on-c); }

/* ---------- 06 skills ---------- */
.skills__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sgroup { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r); padding: 0.9rem 1.1rem 1rem; min-width: 0; box-shadow: var(--shadow); }
.sgroup__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.sgroup h3 { font: 600 1.125rem/1.3 var(--sans); }
.sgroup__load { font: 400 0.75rem/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.6rem; border: 1px solid var(--line-2); border-radius: 2px; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.sgroup__load::after { content: " ▸"; color: var(--amber); }
.sgroup__load:hover { border-color: var(--amber); color: var(--amber); }
.sgroup__load[aria-current="true"] { border-color: var(--amber); color: var(--amber); background: var(--amber-wash-2); }
.sgroup__fold > summary { display: none; }
.sgroup__items { list-style: none; display: grid; }
.sgroup__items li { display: grid; gap: 0.3rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.sgroup__items li:last-child { border-bottom: 0; padding-bottom: 0; }
.sgroup__term { font-size: 0.9375rem; }
.sgroup__uses { display: flex; flex-wrap: wrap; gap: 0 0.75rem; align-items: baseline; font-size: 0.8125rem; }
.sgroup__uses a { color: var(--ink-2); padding-block: 0.2rem; }
.sgroup__uses a:hover { color: var(--amber); }
.sgroup__uses .d { font-size: 0.75rem; }
.readout--skills { grid-column: 1 / -1; }
.readout--skills .fragment { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); column-gap: 1.25rem; }
.readout--skills .frag__meta, .readout--skills .frag__title { grid-column: 1 / -1; }

/* ---------- 07 credentials ---------- */
.creds__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.9fr); gap: 1rem; align-items: start; }
.cbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1.1rem 1rem; min-width: 0; box-shadow: var(--shadow); }
.cbox-stack { display: grid; gap: 1rem; }
.cbox__h { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.6rem; margin-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.edu { list-style: none; display: grid; gap: 0.9rem; }
.edu li { display: grid; gap: 0.25rem; }
.edu__inst { font-weight: 600; }
.edu__prog { color: var(--ink-2); font-size: 0.9375rem; }
.edu__meta { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.edu__courses { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.edu__courses li { font-size: 0.8125rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 2px; padding: 0.1rem 0.45rem; }
.ctable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ctable th, .ctable td { text-align: left; vertical-align: top; padding: 0.45rem 0.5rem 0.45rem 0; border-bottom: 1px solid var(--line); }
.ctable thead th { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ctable tbody th { font-weight: 400; }
.ctable td { color: var(--ink-2); }
.ctable td .d { display: block; margin-top: 0.15rem; }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }
.clr { display: grid; gap: 0.4rem; justify-items: start; }
.clr__name { font-weight: 600; }
.mem { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mem li { font: 400 0.875rem/1.3 var(--mono); border: 1px solid var(--line-2); border-radius: 2px; padding: 0.25rem 0.55rem; }
.awd { list-style: none; display: grid; gap: 0.7rem; }
.awd li { display: grid; gap: 0.1rem; }
.awd__name { font-weight: 600; }
.awd__note { font-size: 0.875rem; color: var(--ink-2); }

/* ---------- 08 community ---------- */
.comm__primary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ccard { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r); padding: 0.95rem 1.1rem 1.05rem; display: grid; gap: 0.45rem; align-content: start; min-width: 0; box-shadow: var(--shadow); }
.ccard--lead { grid-column: span 2; grid-row: span 2; }
.ccard__meta { font: 400 0.8125rem/1.45 var(--mono); color: var(--amber); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ccard h3 { font: 600 1.125rem/1.3 var(--sans); }
.ccard__org { font-weight: 600; }
.ccard__note { font-size: 0.9375rem; color: var(--ink-2); }
.ccard__ev, .comm2__ev { font-size: 0.875rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; }
.ccard__ev a, .comm2__ev a { display: inline-flex; align-items: center; min-height: 1.5rem; }
.comm__sub { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 1.3rem 0 0.4rem; }
.comm__secondary { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.comm__secondary > li { border-top: 1px solid var(--line-2); padding-top: 0.6rem; font-size: 0.9375rem; color: var(--ink-2); display: grid; gap: 0.35rem; align-content: start; }
.comm2__role { color: var(--ink); font-weight: 600; }
.comm2__pts { list-style: none; display: grid; gap: 0.3rem; font-size: 0.875rem; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--foot-bg); }
.foot__in { max-width: var(--wrap); margin: 0 auto; padding: 1.75rem var(--gut) 2.5rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; }
.foot__h { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.6rem; }
.data-links { list-style: none; display: grid; gap: 0.35rem; font-size: 0.9375rem; color: var(--ink-2); }
.data-links a { font-family: var(--mono); color: var(--ink); }
.foot__meta { display: grid; gap: 0.35rem; align-content: start; font-size: 0.875rem; color: var(--ink-2); }
.foot__meta .k { margin-right: 0.4rem; }

/* ---------- motion ----------
   No text fades or slides in. The only motion is smooth in-page scrolling and the theme switch thumb,
   both only when the reader allows motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- responsive ---------- */
@media (max-width: 82rem) {
  .card__headline { max-width: none; }
  .comm__primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard--lead { grid-row: auto; }
}
@media (max-width: 96rem) {
  .cbar__rev { display: none; }
}
@media (min-width: 56.01rem) and (max-width: 75rem) {
  .prj:not(.prj--lead) .prj__facts div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}
@media (max-width: 75rem) {
  /* Console bar in two rows: brand and theme switch, then every section on its own line. */
  html { scroll-padding-top: 6.5rem; }
  .cbar__in { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; padding-top: 0.45rem; }
  .tgl { margin-left: auto; }
  .cbar__nav { order: 3; flex-basis: 100%; margin-inline: -0.45rem; }
  .cbar__nav ul { flex-wrap: wrap; overflow: visible; padding-bottom: 0.3rem; }
  .cbar__nav a { padding-inline: 0.45rem; }
  .creds__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cbox--certs { grid-column: 2; grid-row: 1 / span 2; }
  .cbox-stack { grid-column: 1; }
  .proc__head { grid-template-columns: auto minmax(0, 1fr); }
  .proc__block { grid-column: 2; }
  .proc__head .mtrack { grid-column: 2; max-width: 24rem; }
}
@media (max-width: 60rem) {
  /* One column on the card: identity, key facts, the board. */
  .card__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "id" "facts" "contact" "sys"; }
  .card__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .nowlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nowlist a { grid-template-columns: minmax(0, 1fr); }
  .sys-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .minihead__sub { margin-left: 0; flex-basis: 100%; }
  .brief__grid { grid-template-columns: minmax(0, 1fr); }
  .brief__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
  .prjs__grid, .skills__grid { grid-template-columns: minmax(0, 1fr); }
  .prj--lead .prj__facts { grid-template-columns: minmax(0, 1fr); }
  .creds__grid { grid-template-columns: minmax(0, 1fr); }
  .cbox--certs, .cbox-stack { grid-column: auto; grid-row: auto; }
  .comm__secondary { grid-template-columns: minmax(0, 1fr); }
  .sec__tag { margin-left: 0; flex-basis: 100%; }
  .steps__head, .step { grid-template-columns: 3.25rem minmax(0, 1fr) 10rem; }
  /* Gantt on tablets and landscape phones: lane names sit above their tracks, so the years get the full width. */
  .fp__chart { --lab: 0px; }
  .fp__axis { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fp__axis-k { display: none; }
  .fp-lane { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fp-lane__label { align-self: start; justify-self: start; padding: 0.15rem 0.5rem 0.1rem; margin-top: 0.45rem; }
  .fp__ticks span:last-child { visibility: hidden; } /* the Now marker stands at the right edge */
}

/* Phones: the console bar is static and the procedure index sticks; the Gantt becomes a list with a
   small position track per engagement; steps after the first fold (script.js closes them on load). */
@media (max-width: 40rem) {
  .cbar { position: static; }
  .cbar__nav { display: none; }
  .cbar__in { row-gap: 0.55rem; padding-top: 0.55rem; padding-bottom: 0.65rem; }
  .cbar__nav { margin: 0; }
  .cbar__nav ul { gap: 0.3rem; padding: 0; }
  .cbar__nav a { padding: 0.45rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--line); background: var(--panel); }
  html { scroll-padding-top: 3.5rem; }
  .jump { display: block; position: sticky; top: 0; z-index: 30; background: var(--bar-bg); border-bottom: 1px solid var(--line-2); backdrop-filter: blur(6px); }
  .jump__d { position: relative; }
  .jump__s { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.4rem var(--gut); cursor: pointer; list-style: none; font: 600 0.8125rem/1.3 var(--mono); }
  .jump__s::-webkit-details-marker { display: none; }
  .jump__k { color: var(--amber); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; white-space: nowrap; }
  .jump__k::after { content: " ▾"; }
  .jump__d[open] .jump__k::after { content: " ▴"; }
  .jump__cur { color: var(--ink-2); margin-left: auto; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jump__list { list-style: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 3.5rem); overflow: auto; background: var(--panel); border-bottom: 1px solid var(--line-2); box-shadow: var(--card-shadow); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jump__list a { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem var(--gut); text-decoration: none; border-top: 1px solid var(--line); font-size: 0.875rem; }
  .jump__list li:nth-child(odd) a { border-right: 1px solid var(--line); }
  .jump__list a[aria-current="true"] { color: var(--amber); background: var(--amber-wash-2); }
  .jump__code { flex: none; min-width: 2.2rem; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
  .jump__list a[aria-current="true"] .jump__code { color: var(--amber); }
  main { gap: 1.1rem; }
  .card { margin-top: 1rem; box-shadow: 0 0 0 3px var(--card-ring), 0 0 0 4px var(--line-2), var(--card-shadow); }
  .card__strip { padding: 0.5rem 1rem; }
  .card__body { padding: 1rem; gap: 1.1rem; }
  .card__tray { padding: 0 0.75rem 0.9rem; }
  .card__contact { grid-template-columns: minmax(0, 1fr); }
  .card__contact div { grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0.4rem; }
  .nowlist { grid-template-columns: minmax(0, 1fr); }
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.5rem 0; }
  .facts__k { padding-top: 0; }
  .card__facts .minihead { padding-bottom: 0.55rem; margin-bottom: 0.6rem; }
  .sys-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-cell { min-height: 0; padding: 0.6rem 0.7rem 0.65rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; row-gap: 0.2rem; }
  .sys-cell__ico { display: none; }
  .sys-cell__label { font-size: 0.9375rem; align-self: start; }
  .sys-cell__fig { font-size: 0.9375rem; }
  .sys-cell__span { grid-column: 1; padding-top: 0.15rem; }
  .sys-cell__top { flex-wrap: wrap; gap: 0.2rem 0.5rem; }
  .sgroup__fold > summary { display: block; cursor: pointer; padding: 0.6rem 0; font: 600 0.75rem/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); list-style: none; }
  .sgroup__fold > summary::-webkit-details-marker { display: none; }
  .sgroup__fold > summary::before { content: "▸ "; color: var(--amber); }
  .sgroup__fold[open] > summary::before { content: "▾ "; }
  .proc__head .mtrack { display: none; }
  .brief__text { font-size: 1.0625rem; }
  .fp__chart { padding: 0.8rem; }
  .fp__axis, .fp__now { display: none; }
  .fp__lanes { border: 0; }
  .fp-lane { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; border-top: 1px solid var(--line); padding: 0.6rem 0 0.4rem; }
  .fp-lane:first-child { border-top: 0; padding-top: 0; }
  .fp-lane__label { padding: 0.15rem 0 0.15rem 0.55rem; }
  .fp-lane__track { padding: 0; gap: 0.15rem; }
  .fp-lane__track::before { display: none; }
  .fp-row { height: auto; }
  .fp-bar { position: relative; left: auto; width: auto; display: block; background: none; color: var(--ink); border: 0; padding: 0.45rem 0 1.1rem; font: 400 0.9375rem/1.35 var(--sans); }
  .fp-bar::before, .fp-bar--right::before, .fp-bar--left::before { content: ""; position: absolute; top: auto; left: 0; right: 0; bottom: 0.45rem; height: 4px; background: var(--line); border-radius: 2px; }
  .fp-bar::after { content: ""; position: absolute; bottom: 0.45rem; height: 4px; left: calc(var(--l) * 1%); width: max(4px, calc(var(--w) * 1%)); background: var(--c); border-radius: 2px; }
  .fp-bar .fp-bar__text, .fp-bar--right .fp-bar__text, .fp-bar--left .fp-bar__text { position: static; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.1rem 0.75rem; height: auto; max-width: none; width: auto; padding: 0; overflow: visible; color: var(--ink); flex-direction: row; }
  .fp-bar__label { white-space: normal; overflow: visible; font-weight: 600; line-height: 1.35; }
  .fp-bar__dates { font: 400 0.8125rem/1.35 var(--mono); color: var(--muted); opacity: 1; }
  .fp-bar:hover { filter: none; }
  .fp-bar:hover .fp-bar__label { color: var(--amber); }
  .fp-bar[aria-current="true"] { box-shadow: none; }
  .fp-bar[aria-current="true"] .fp-bar__label { color: var(--amber); }
  .fp-bar[aria-current="true"] .fp-bar__label::before { content: "▸ "; }
  .fp__cap { padding-right: 0; }
  .readout__body { padding: 0.9rem; }
  .prj { padding: 0.95rem; }
  .prj__facts div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .prj--lead h3 { font-size: 1.35rem; }
  .prj__kicker .vtag { margin-left: 0; }
  /* Procedure sheets: header block in one column; steps stack number, action, then verification. */
  .proc__head { grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 0.9rem; padding: 0.85rem 0.9rem; }
  .proc__num { min-width: 3rem; }
  .proc__block { grid-column: 1 / -1; }
  .proc__block div { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .proc__head .mtrack { grid-column: 1 / -1; max-width: none; }
  .proc__group, .steps, .proc__more, .proc__photos { margin-inline: 0.9rem; }
  .steps__head { display: none; }
  .step { grid-template-columns: 2.9rem minmax(0, 1fr); grid-template-areas: "n t" "n v"; padding: 0.6rem 0.7rem; gap: 0.35rem 0.6rem; }
  .step__n { grid-area: n; }
  .step__t { grid-area: t; }
  .step__v { grid-area: v; }
  .steps__more > summary, .steps__more[open] > summary { display: block; cursor: pointer; padding: 0.55rem 0.7rem; border-top: 1px solid var(--line); background: var(--panel-2); font: 600 0.75rem/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); list-style: none; }
  .steps__more > summary::-webkit-details-marker { display: none; }
  .steps__more > summary::before { content: "▸ "; color: var(--amber); }
  .steps__more[open] > summary::before { content: "▾ "; }
  .steps__more > summary:hover { color: var(--amber); }
  .comm__primary { grid-template-columns: minmax(0, 1fr); }
  .ccard--lead { grid-column: auto; grid-row: auto; }
  .ctable thead { display: none; }
  .ctable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.6rem; border-bottom: 1px solid var(--line); padding: 0.45rem 0; }
  .ctable th, .ctable td { border: 0; padding: 0; }
  .ctable tbody th { grid-column: 1 / -1; }
  .ctable td:nth-child(2) { font-size: 0.875rem; }
  .ctable td .d { display: inline; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .arch__closed { padding: 1.25rem 1rem; }
}

@media (max-width: 24rem) {
  /* Narrow phones: the brand keeps its monogram and an accessible name; the switch keeps its label. */
  .cbar__brand > span:not(.cbar__mono) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 25rem) {
  .card__contact div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .card__contact div + div { margin-top: 0.2rem; }
  .card__kicker { letter-spacing: 0.05em; }
  .jump__list { grid-template-columns: minmax(0, 1fr); }
  .jump__list li:nth-child(odd) a { border-right: 0; }
}
/* Folded phones (280 px): tighter gutters so text keeps a usable measure. */
@media (max-width: 20rem) {
  :root { --gut: 0.75rem; }
  .sys-board { grid-template-columns: minmax(0, 1fr); }
  .card__body, .card__strip { padding-inline: 0.75rem; }
  .card__tray { padding-inline: 0.5rem; }
  .readout__body { padding: 0.75rem; }
  .readout__bar { flex-wrap: wrap; }
  .proc__head { padding-inline: 0.7rem; }
  .proc__group, .steps, .proc__more, .proc__photos { margin-inline: 0.7rem; }
  .step { grid-template-columns: 2.6rem minmax(0, 1fr); padding-inline: 0.5rem; }
  .prj, .sgroup, .cbox, .ccard { padding-inline: 0.75rem; }
  .sec__head h2 { font-size: 1.3rem; }
}

/* Landscape phones: the console bar gives way, so the whole short screen is for reading. */
@media (max-height: 500px) {
  .cbar { position: static; }
  html { scroll-padding-top: 1rem; }
}

@media (forced-colors: active) {
  .fp-bar { border: 1px solid CanvasText; }
  .fp-bar[aria-current="true"], .sys-cell[aria-current="true"] { outline: 3px solid Highlight; }
  .lamp, .fp__now { forced-color-adjust: none; }
  .lamp--self { border-color: CanvasText; }
}

/* ---------- print ----------
   Default: the whole document as a clean light procedure book. With the "flight card only" box ticked
   (body.print-card from script.js, or the :has() rule without JavaScript) only the card prints, on one page. */
@media print {
  :root:not([data-theme]), :root[data-theme] {
    color-scheme: light;
    --bg: #fff; --panel: #fff; --panel-2: #fff; --panel-3: #f2f2f2; --line: #bbb; --line-2: #888;
    --ink: #000; --ink-2: #222; --muted: #444; --amber: #000; --amber-line: #666; --phos: #000; --phos-text: #000; --vtag-wash: transparent; --focus: #000; --on-c: #fff;
    --grid: transparent; --grid-2: transparent; --bar-bg: #fff; --foot-bg: #fff;
    --amber-wash: transparent; --amber-wash-2: transparent; --phos-wash: transparent; --sky-wash: transparent;
    --sel-glow: none; --fig-glow: none; --now-glow: none; --lamp-glow: 0 0 0; --shadow: none; --card-shadow: none; --card-sheen: none; --card-ring: #fff;
    --c-cobalt: #2f52c2; --c-amber: #8a5200; --c-crimson: #b3263a; --c-orange: #a3410a; --c-sky: #0b6287;
    --c-magenta: #9c2a7b; --c-violet: #6440c4; --c-teal: #0a675b; --c-green: #2a6827;
  }
  @page { margin: 14mm 12mm; }
  body { background: #fff; background-image: none; color: #000; font-size: 10pt; line-height: 1.45; }
  .skip, .cbar, .jump, .tgl, .printopt, .fp__chart, .card__tray, .readout, .arch, .sgroup__load, .sys-cell__ico, .mtrack, .proc__photos, .readout__back, .foot__meta p:last-child { display: none !important; }
  main { display: block; max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  .lamp { box-shadow: none !important; border: 1px solid #000; }
  .lamp--pub, .lamp--on { background: #000; }
  .lamp--self { background: #fff; }
  .vtag, .tagc, .evlist a, .evinline a, .mem li, .edu__courses li { border-color: #888; background: none; color: #000; white-space: normal; }
  .evlist a::before, .evinline a::before { content: ""; }
  .evlist a::after { content: " (" attr(href) ")"; font-size: 8pt; overflow-wrap: anywhere; }
  /* The flight card: a compact first page. */
  .card { margin: 0; border: 1.5px solid #000; border-radius: 4px; box-shadow: none; break-inside: avoid; }
  .card::before { display: none; }
  .card__strip { padding: 0.3em 0.9em; border-bottom: 1px solid #000; border-radius: 0; }
  .card__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); grid-template-rows: auto 1fr auto; grid-template-areas: "id facts" "contact facts" "sys sys"; gap: 0.9em 1.6em; padding: 0.9em 1em 1em; }
  .card h1 { font-size: 24pt; }
  .card__headline { font-size: 12pt; margin-top: 0.3em; }
  .card__contact { grid-template-columns: minmax(0, 1fr); margin-top: 0.6em; padding-top: 0.5em; gap: 0.1em; }
  .card__contact div { grid-template-columns: 5.5em minmax(0, 1fr); }
  .card__contact dd, .facts__v, .nowlist__org { font-size: 9.5pt; }
  .facts__row { grid-template-columns: 8em minmax(0, 1fr); padding: 0.3em 0; break-inside: avoid; }
  .facts__k::before, .card__also-h::before { display: none; }
  .facts__k, .facts__row:first-child .facts__k { color: #444; }
  .card__also { padding-top: 0.5em; }
  .nowlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; }
  .nowlist a { background: none; border-left-width: 2px; padding: 0.1em 0.5em; }
  .card__sys { padding-top: 0.7em; }
  .sys-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: none; border: 1px solid #888; }
  .sys-board li { background: none; border: 0.5px solid #bbb; }
  .sys-cell { min-height: 0; padding: 0.4em 0.6em 0.5em; background: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0.1em; }
  .sys-cell::before { width: 2px; }
  .sys-cell__ico { display: none; }
  .sys-cell__top { font-size: 7.5pt; }
  .sys-cell__label { font-size: 10pt; margin-top: 0.2em; }
  .sys-cell__fig { font-size: 10pt; text-shadow: none; }
  .sys-cell__span { grid-column: 1; font-size: 7.5pt; padding-top: 0.1em; }
  .sys-cell[aria-current="true"] { box-shadow: none; background: none; }
  .card__legend { font-size: 8.5pt; margin-top: 0.5em; }
  /* Sections. */
  .sec { margin-top: 1.1em; }
  .sec__head { border-bottom: 1.5px solid #000; padding: 0 0 0.25em; margin-bottom: 0.6em; }
  .sec__id { background: none; color: #000; padding: 0; border: 1px solid #000; padding: 0.1em 0.3em; }
  .sec__tag { display: none; }
  .brief__grid { display: block; }
  .brief__side { border: 0; padding: 0.6em 0 0; }
  .prjs__grid, .skills__grid, .creds__grid, .procs__list, .comm__primary, .comm__secondary { display: block; }
  .prj, .proc, .ccard, .cbox, .sgroup { padding: 0.5em 0 0.7em; break-inside: avoid; border: 0 !important; border-top: 1px solid #999 !important; box-shadow: none; margin-bottom: 0.4em; }
  .prj__status { background: none; border: 1px solid #000; }
  .proc { display: block; overflow: visible; }
  .proc__head { display: grid; grid-template-columns: auto minmax(0, 1fr) 16em; gap: 0.3em 1em; padding: 0.3em 0 0.5em; background: none; border-left: 0; border-bottom: 1px solid #bbb; }
  .proc__num { border-color: #000; background: none; padding: 0.2em 0.4em; }
  .proc__n { font-size: 14pt; }
  .proc__block div { border-top: 0; padding: 0; grid-template-columns: 6em minmax(0, 1fr); }
  .proc__group, .steps, .proc__more { margin: 0.5em 0 0; }
  .proc__scope { margin-top: 0.3em; padding-top: 0.3em; }
  .steps { border: 1px solid #999; }
  .steps__head { background: #f2f2f2; border-bottom: 1px solid #999; }
  .steps__head, .step { grid-template-columns: 3em minmax(0, 1fr) 11em; }
  .step { padding: 0.35em 0.6em; break-inside: avoid; }
  .steps__more > summary, .steps__more[open] > summary, details > summary { display: none; }
  details::details-content { content-visibility: visible; display: block; }
  .proc > :last-child { margin-bottom: 0.4em; }
  .comm__secondary > li { margin-top: 0.5em; }
  .foot { background: none; border-top: 1px solid #000; }
  .foot__in { display: block; padding: 1em 0 0; }

  /* Flight card only: everything else leaves the print. Sized to fit one Letter page. */
  body.print-card > :not(main), body.print-card main > :not(.card), body.print-card .card__tray { display: none !important; }
  body.print-card { font-size: 9.5pt; }
  body.print-card .card { border-width: 1px; }
  body.print-card .card__body { padding: 0.7em 1em 0.8em; gap: 0.7em 1.4em; }
  body.print-card .card h1 { font-size: 22pt; }
  body.print-card .minihead__sub { display: none; }
  body.print-card .sys-cell { padding: 0.3em 0.5em 0.4em; }
  body.print-card .sys-cell__label, body.print-card .sys-cell__fig { font-size: 9.5pt; }
  body.print-card .nowlist__title { font-size: 9.5pt; }
  body.print-card .card__legend { font-size: 8pt; }
  @supports selector(:has(a)) {
    body:has(#print-card:checked) > :not(main), body:has(#print-card:checked) main > :not(.card), body:has(#print-card:checked) .card__tray { display: none !important; }
    body:has(#print-card:checked) { font-size: 9.5pt; }
    body:has(#print-card:checked) .card { border-width: 1px; }
    body:has(#print-card:checked) .card__body { padding: 0.7em 1em 0.8em; gap: 0.7em 1.4em; }
    body:has(#print-card:checked) .card h1 { font-size: 22pt; }
    body:has(#print-card:checked) .minihead__sub { display: none; }
    body:has(#print-card:checked) .sys-cell { padding: 0.3em 0.5em 0.4em; }
    body:has(#print-card:checked) .sys-cell__label, body:has(#print-card:checked) .sys-cell__fig { font-size: 9.5pt; }
    body:has(#print-card:checked) .nowlist__title { font-size: 9.5pt; }
    body:has(#print-card:checked) .card__legend { font-size: 8pt; }
  }
}