/* Archideck shell.
   Geometry comes from /design.css (--ad-*), which is GENERATED from
   design/DESIGN.parti. Nothing in this file retypes a dimension: if a number
   appears here it is a colour, a weight, or a type size — never a layout value.
   Regenerate geometry: python !Archideck/design/design.py --write */

/* ── Fonts ── */
@font-face { font-family:'Cinzel'; font-weight:400; font-display:swap; src:url(/fonts/cinzel-400.woff2) format('woff2'); }
@font-face { font-family:'Cinzel'; font-weight:700; font-display:swap; src:url(/fonts/cinzel-700.woff2) format('woff2'); }
@font-face { font-family:'Cabinet Grotesk'; font-weight:400; font-display:swap; src:url(/fonts/cabinet-400.woff2) format('woff2'); }
@font-face { font-family:'Cabinet Grotesk'; font-weight:700; font-display:swap; src:url(/fonts/cabinet-700.woff2) format('woff2'); }
@font-face { font-family:'Adamina'; font-weight:400; font-display:swap; src:url(/fonts/adamina.woff2) format('woff2'); }
@font-face { font-family:'Quantico'; font-weight:400; font-display:swap; src:url(/fonts/quantico-400.woff2) format('woff2'); }
@font-face { font-family:'Quantico'; font-weight:700; font-display:swap; src:url(/fonts/quantico-700.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap; src:url(/fonts/plex-mono-400.woff2) format('woff2'); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height:100%; height:auto; overflow-x:hidden; overflow-y:auto; -webkit-text-size-adjust:100%; }
button, input, select { font: inherit; border: none; background: none; color: inherit; }
button { cursor: pointer; }

/* ── The Nine Plates ── */
:root {
  --p1-wash:#B8C9E4; --p1-base:#2B5FAB; --p1-deep:#17263F; --p1-glow:#5E9CFF;
  --p2-wash:#C2E0C6; --p2-base:#3E9A50; --p2-deep:#1E4028; --p2-glow:#39FF6A;
  --p3-wash:#E8BFB2; --p3-base:#B5341F; --p3-deep:#4A150C; --p3-glow:#FF5A3C;
  --p4-wash:#D5C2DE; --p4-base:#7E3F8C; --p4-deep:#351B3E; --p4-glow:#C07CFF;
  --p5-wash:#8A837A; --p5-base:#211D19; --p5-deep:#0D0B09; --p5-glow:#3B352E;
  --p6-wash:#E3CDB4; --p6-base:#9A6234; --p6-deep:#3F2A16; --p6-glow:#4FA39A;
  --p7-wash:#F5D5B0; --p7-base:#E07A1F; --p7-deep:#5F3108; --p7-glow:#FFA133;
  --p8-wash:#F9E6B4; --p8-base:#F2B32C; --p8-deep:#7A5A10; --p8-glow:#FFD94D;
  --p9-wash:#FFFFFF; --p9-base:#F5F0E6; --p9-deep:#CFC6B4; --p9-glow:#F2FFF2;

  --font-display:'Cinzel',serif; --font-hero:'Cabinet Grotesk',sans-serif;
  --font-body:'Adamina',Georgia,serif; --font-ui:'Quantico',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --copper: var(--p6-base);
  --ink: var(--p5-base);
  --ink-dim: var(--p5-wash);
  --field: var(--p9-wash);
  --line-soft: var(--p6-wash);
  --shadow: 0 var(--ad-shadow-y) var(--ad-shadow-blur) #00000040;
}

/* ── The ten decks. Nine shells differ in ONE variable; e-ink is its own language.
   Ground is the plate BASE (the pigment), not the glow — ruled 2026-08-11 from
   the architect's blue node, which fills the deck with plate-blue-base. Whatever
   is blue on that node takes the green value on a green deck; that is the whole
   contract, so nothing below may reference a plate directly. ── */
.deck[data-shell="white"]  { --shell-bg:#F5F0E6; --shell-wash:#FFFFFF; --shell-deep:#CFC6B4; --shell-glow:#F2FFF2; }
.deck[data-shell="yellow"] { --shell-bg:#F2B32C; --shell-wash:#F9E6B4; --shell-deep:#7A5A10; --shell-glow:#FFD94D; }
.deck[data-shell="orange"] { --shell-bg:#E07A1F; --shell-wash:#F5D5B0; --shell-deep:#5F3108; --shell-glow:#FFA133; }
.deck[data-shell="red"]    { --shell-bg:#B5341F; --shell-wash:#E8BFB2; --shell-deep:#4A150C; --shell-glow:#FF5A3C; }
.deck[data-shell="black"]  { --shell-bg:#211D19; --shell-wash:#8A837A; --shell-deep:#0D0B09; --shell-glow:#3B352E; }
.deck[data-shell="purple"] { --shell-bg:#7E3F8C; --shell-wash:#D5C2DE; --shell-deep:#351B3E; --shell-glow:#C07CFF; }
.deck[data-shell="blue"]   { --shell-bg:#2B5FAB; --shell-wash:#B8C9E4; --shell-deep:#17263F; --shell-glow:#5E9CFF; }
.deck[data-shell="green"]  { --shell-bg:#3E9A50; --shell-wash:#C2E0C6; --shell-deep:#1E4028; --shell-glow:#39FF6A; }
.deck[data-shell="copper"] { --shell-bg:#9A6234; --shell-wash:#E3CDB4; --shell-deep:#3F2A16; --shell-glow:#4FA39A; }

/* THE TENTH DECK IS NOT A CHOICE, IT IS AN ABSENCE. A zip with no colour has no
   shell to take, so it renders E-Ink: the two-plate greyscale, no shadow, no
   radius, emphasis by inversion. Reached by spinning the colour reel to '—'. */
.deck[data-shell="none"] {
  --shell-bg:#CFC6B4; --shell-wash:#F5F0E6; --shell-deep:#211D19;
  --copper:#211D19; --ink:#211D19; --ink-dim:#8A837A;
  --field:#FFFFFF; --line-soft:#F5F0E6;
  --shadow: none;
}
.deck[data-shell="none"] .win,
.deck[data-shell="none"] .terminal,
.deck[data-shell="none"] .colour-rail,
.deck[data-shell="none"] .ckey,
.deck[data-shell="none"] .cfield,
.deck[data-shell="none"] .card,
.deck[data-shell="none"] .drawer,
.deck[data-shell="none"] .library,
.deck[data-shell="none"] .utilities,
.deck[data-shell="none"] .almanac,
.deck[data-shell="none"] .archive,
.deck[data-shell="none"] .workout-detail,
.deck[data-shell="none"] .modal-sheet,
.deck[data-shell="none"] .zip-dial,
.deck[data-shell="none"] .zkey,
.deck[data-shell="none"] .penny,
.deck[data-shell="none"] .pill,
.deck[data-shell="none"] .hand-key,
.deck[data-shell="none"] .slider { border-radius:0; box-shadow:none; }
.deck[data-shell="none"] .penny { border-color:#211D19; }
.deck[data-shell="none"] .zip-dial { background:#211D19; }
.deck[data-shell="none"] .reel .bar { background:#211D19; }
/* The reel washes and the rail chips are set as inline plate colours, so they
   are desaturated rather than overridden — an e-ink panel cannot show them, and
   greyscale is what the hardware would actually do to them. */
.deck[data-shell="none"] .zip-dial,
.deck[data-shell="none"] .colour-rail { filter: grayscale(1); }

/* Phosphor pass — the CRT half of the two-pass scheme */
:root[data-theme="phosphor"] {
  --ink: var(--p2-glow); --ink-dim: var(--p2-base);
  --copper: var(--p6-glow); --field: var(--p1-deep);
  --line-soft: var(--p2-deep);
  color-scheme: dark;
}
:root[data-theme="phosphor"] .deck:not([data-shell="none"]) { --shell-bg: var(--shell-glow); }
:root[data-theme="phosphor"] .revelator,
:root[data-theme="phosphor"] .card-head { background: var(--p5-deep); }

/* ══ Stage & deck — the drawing is 600×1400, the viewport scales it ══ */
body { background:#1a1815; font-family: var(--font-ui); }
.stage { min-height:100%; height:auto; display:flex; align-items:flex-start; justify-content:center; }
.deck {
  width: var(--ad-frame-w);
  height: var(--ad-frame-h);
  flex: none;
  transform: scale(var(--scale, 1));
  transform-origin: top center;
  background: var(--shell-bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--ad-third-gap);
  padding: var(--ad-pad-top) var(--ad-pad-side) var(--ad-pad-bottom);
  overflow: hidden;
}
.third { display: flex; flex: none; }

/* ── Shared window chrome ── */
.win {
  background: var(--line-soft);
  border: var(--ad-window) solid var(--copper);
  border-radius: var(--ad-radius);
  box-shadow: var(--shadow);
}

/* ══ UPPER THIRD ══ */
.upper {
  flex-direction: column;
  height: var(--ad-upper-h);
  padding: 0 var(--ad-upper-inset);
  gap: var(--ad-upper-gap);
}
.revelator {
  height: var(--ad-revelator-h);
  flex: none;
  display:grid; grid-template-columns:max-content minmax(0,1fr) max-content max-content;
  align-items:center; gap:8px; overflow:hidden;
  padding: 0 10px;
  background: var(--ink);
  border-radius: var(--ad-radius);
  box-shadow: var(--shadow);
}
.rev-zip   { min-width:0; font-family:var(--font-ui); font-size:12px; color:var(--shell-wash); white-space:nowrap; }
.rev-tail  { min-width:0; font-family:var(--font-mono); color:var(--shell-wash); opacity:.92; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rev-env   { font-family:var(--font-ui); font-size:11px; color:var(--shell-wash); opacity:.75; white-space:nowrap; }
.rev-clock { font-family:var(--font-mono); font-size:11px; color:var(--shell-wash); white-space:nowrap; }

.case { flex:1; display:flex; flex-direction:column; gap: var(--ad-case-gap); }
.term-row { height: var(--ad-term-row-h); flex:none; display:flex; gap: var(--ad-case-gap); }

.terminal {
  flex:1; min-width:0; overflow:hidden;
  background: var(--line-soft);
  border: var(--ad-window) solid var(--copper);
  border-radius: var(--ad-radius);
  box-shadow: var(--shadow);
  padding: 10px; display:flex; flex-direction:column; gap:5px;
}
.tline { display:flex; gap:0; font-family:var(--font-mono); font-size:11px; }
.tline .k { width:130px; flex:none; }
.tline .v { flex:1; min-width:0; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tline.on .k { color: var(--ink); }
.tline .k { color: var(--ink-dim); }

.colour-rail {
  width: var(--ad-rail-w); flex:none;
  background: var(--line-soft);
  border: var(--ad-window) solid var(--copper);
  border-radius: var(--ad-radius);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding:8px 3px;
}
.chip {
  width: var(--ad-rail-chip); height: var(--ad-rail-chip);
  border-radius:50%; border:1px solid var(--p5-base);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9px; color:#000;
  cursor:default;
}
.chip.on { outline:2px solid var(--ink); outline-offset:1px; }

.console-row { height: var(--ad-console-row-h); flex:none; display:flex; gap: var(--ad-console-gap); }
.ckey {
  width: var(--ad-console-key-w); flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--field); border:1px solid var(--copper);
  border-radius:2px; box-shadow: var(--shadow); font-size:13px; color:var(--ink);
}
.cfield {
  display:flex; align-items:center; padding:0 7px;
  background: var(--field); border:1px solid var(--copper);
  border-radius:2px; box-shadow: var(--shadow);
  font-family:var(--font-mono); font-size:11px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cfield.grow { flex:1; min-width:0; }
.cfield.input::placeholder { color: var(--ink-dim); }

/* ══ MIDDLE THIRD ══ */
.middle { height: var(--ad-middle-h); gap:0; }
.middle { position:relative; }
.gut { flex:none; }
.gut-a     { width: var(--ad-gutter-a); }
.gut-b     { width: var(--ad-gutter-b); }
.split-gut { width: var(--ad-split-gutter); display:none; }

/* The two handedness keys cap the slider and line up with Pono / Logos. */
.parallel-tools {
  width:var(--ad-slider-w); flex:none;
  min-height:0; padding:5px 0;
  display:flex; flex-direction:column;
}
.hand-key {
  width:var(--ad-pill-w); height:var(--ad-pill-h); flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--shell-wash); border:1px solid var(--p6-wash);
  border-radius:10px; box-shadow:var(--shadow);
  color:var(--shell-deep); font-family:var(--font-ui); font-size:11px;
}
.hand-key.on { color:var(--p9-base); background:var(--shell-deep); }

/* The slider wears the shell's own wash — on a green deck it is green. */
.slider {
  width:100%; flex:1; min-height:0;
  position:relative; display:block;
  background: var(--shell-wash); border:1px solid var(--copper);
  border-radius:8px; box-shadow: var(--shadow);
}
.slider .track {
  position:absolute; top:8px; bottom:8px; left:50%; width:2px;
  transform:translateX(-50%); background:var(--shell-deep);
}
.slider .knob  {
  position:absolute; top:var(--slider-position,50%); left:50%;
  width:11px; height:11px; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--shell-bg); border:1.5px solid var(--shell-deep);
  transition:top .18s ease, width .12s ease, height .12s ease;
}
.slider.has-active .knob { width:14px; height:14px; box-shadow:0 0 0 2px var(--shell-wash),0 0 0 3px var(--shell-deep); }
.slider.detail-open .knob { background:var(--shell-deep); }

/* Visual mirroring only: source order and every control's semantics stay put. */
.middle > .parallel-tools { order:0; }
.middle > .gut-a { order:1; }
.middle > :is(.card,.utilities,.library,.almanac,.archive,.split-gut,.drawer) { order:2; }
.middle > .gut-b { order:3; }
.middle > .op-rail { order:4; }
.deck[data-rail-swap="true"] .middle > .op-rail { order:0; }
.deck[data-rail-swap="true"] .middle > .gut-b { order:1; }
.deck[data-rail-swap="true"] .middle > .gut-a { order:3; }
.deck[data-rail-swap="true"] .middle > .parallel-tools { order:4; }

.card, .drawer {
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  gap: var(--ad-card-gap); padding: var(--ad-card-pad);
  background: var(--ink-dim);
  border: var(--ad-case-perimeter) solid var(--p5-base);
  border-radius: var(--ad-radius);
  box-shadow: var(--shadow);
}
.card { position:relative; }
.drawer { display:none; }
.middle.split .split-gut { display:block; }
.middle.split .drawer    { display:flex; }

.card-head {
  height: var(--ad-card-header-h); flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px; background: var(--p5-base); border-radius:2px;
}
.ch-zip   { font-family:var(--font-mono); font-size:15px; color:var(--p9-base); }
.ch-type  { font-family:var(--font-display); font-size:14px; letter-spacing:2px; color:var(--p9-base); }
.ch-order { font-family:var(--font-ui); font-size:10px; letter-spacing:1px; color:var(--p6-wash); }

.stack { flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; }
.slot {
  flex:1; min-height:0; display:flex; align-items:center; gap:8px; padding:0 8px;
  background: var(--p9-base); overflow:hidden;
}
.slot:nth-child(even) { background: var(--p6-wash); }
.slot.past { opacity:.6; }
.empty-card-create { width:100%; color:var(--p5-base); text-align:left; cursor:pointer; border:0; }
.empty-card-create:hover, .empty-card-create:focus-visible { background:var(--shell-wash); outline:2px solid var(--shell-deep); outline-offset:-2px; }
.slot .blk {
  width: var(--ad-slot-block-nar); height: var(--ad-slot-block-nar); flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--shell-bg); border:1px solid var(--copper);
  border-radius:3px; font-size:13px;
}
.slot .col { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.slot .nm  { font-family:var(--font-body); font-size:12px; color:var(--p5-base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot .sub { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.slot .fam { font-family:var(--font-ui); font-size:8px; letter-spacing:1px; color:var(--p5-wash); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot .not { font-family:var(--font-mono); font-size:10px; color:var(--p5-base); white-space:nowrap; flex:none; }

.card-foot {
  height: var(--ad-card-footer-h); flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px; background: var(--p6-wash); border-radius:2px;
}
.stat { display:flex; flex-direction:column; align-items:center; gap:1px; }
.stat .l { font-family:var(--font-ui); font-size:8px; letter-spacing:1px; color:var(--p5-wash); }
.stat .v { font-family:var(--font-mono); font-size:11px; color:var(--p5-base); }

/* ── Utilitas — eight System Icon app doors and focused utility pages ── */
.utilities {
  display:none; flex:1; min-width:0; min-height:0; overflow:hidden;
  flex-direction:column; background:var(--p9-base);
  border:var(--ad-case-perimeter) solid var(--p5-base);
  border-radius:var(--ad-radius); box-shadow:var(--shadow);
}
.middle[data-view="utilities"] .card,
.middle[data-view="utilities"] .library,
.middle[data-view="utilities"] .almanac,
.middle[data-view="utilities"] .archive,
.middle[data-view="utilities"] .drawer,
.middle[data-view="utilities"] .split-gut { display:none; }
.middle[data-view="utilities"] .utilities { display:flex; }
.util-head {
  min-height:56px; flex:none; display:flex; align-items:center; gap:8px;
  padding:7px 9px; color:var(--p9-base); background:var(--p5-base);
}
.util-head > div { flex:1; min-width:0; }
.util-head small { display:block; font-family:var(--font-ui); font-size:8px; letter-spacing:1px; color:var(--p6-wash); }
.util-head h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-display); font-size:17px; letter-spacing:1px; }
.util-head > b { flex:none; padding:4px 6px; font-family:var(--font-mono); font-size:8px; color:var(--p6-wash); border:1px solid var(--p6-base); }
.util-back {
  width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--p9-base); border:1px solid var(--p6-wash); border-radius:50%;
}
.util-scroll { flex:1; min-height:0; overflow-y:auto; padding:8px; overscroll-behavior:contain; }
.util-status { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-bottom:7px; }
.util-status > div, .util-metric-row > div {
  min-width:0; padding:6px; background:var(--p6-wash); border-top:2px solid var(--shell-deep);
}
.util-status small, .util-metric-row small, .util-callout small, .util-tier > span {
  display:block; font-family:var(--font-ui); font-size:7px; letter-spacing:.7px; color:var(--p5-wash);
}
.util-status b, .util-metric-row b {
  display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-mono); font-size:8px; color:var(--p5-base);
}
.util-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.util-app {
  min-height:109px; position:relative; padding:8px 7px; display:grid;
  grid-template-columns:42px 1fr; grid-template-rows:auto auto 1fr auto;
  gap:2px 6px; text-align:left; background:var(--p6-wash);
  border:1px solid var(--line-soft); border-radius:3px;
}
.util-app:hover, .util-app:focus-visible { background:var(--shell-wash); border-color:var(--copper); }
.util-app > span {
  grid-row:1/4; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:var(--shell-bg); border:1px solid var(--copper); border-radius:13px;
}
.util-app > b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:9px; color:var(--p5-base); }
.util-app > small { font-family:var(--font-body); font-size:8px; line-height:1.3; color:var(--p5-wash); }
.util-app > i { grid-column:1/3; font-style:normal; font-family:var(--font-ui); font-size:7px; color:var(--copper); }
.util-app > em { position:absolute; right:6px; bottom:6px; font-style:normal; font-family:var(--font-ui); font-size:6px; color:var(--p5-wash); }
.util-callout { margin-bottom:8px; padding:10px; background:var(--shell-wash); border-left:4px solid var(--shell-deep); }
.util-callout > b { display:block; margin:3px 0; font-family:var(--font-mono); font-size:11px; color:var(--p5-base); }
.util-callout p, .util-tier p { font-family:var(--font-body); font-size:9px; line-height:1.4; color:var(--p5-wash); }
.util-primary, .util-secondary, .util-danger {
  width:100%; min-height:38px; margin-top:7px; padding:7px 9px;
  font-family:var(--font-ui); font-size:9px; letter-spacing:.6px; border:1px solid var(--copper);
}
.util-primary { color:var(--p9-base); background:var(--shell-deep); }
.util-secondary { color:var(--p5-base); background:var(--p6-wash); }
.util-danger { color:var(--p9-base); background:var(--p3-base); }
.util-choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:7px; }
.util-choice-grid > button {
  min-height:125px; padding:8px; display:flex; flex-direction:column; align-items:flex-start;
  gap:4px; text-align:left; background:var(--p6-wash); border:1px solid var(--line-soft);
}
.util-choice-grid > button:hover { background:var(--shell-wash); border-color:var(--copper); }
.util-choice-grid span { font-size:25px; }
.util-choice-grid b { font-family:var(--font-mono); font-size:8px; color:var(--p5-base); }
.util-choice-grid small { font-family:var(--font-body); font-size:8px; line-height:1.4; color:var(--p5-wash); }
.util-form { display:grid; grid-template-columns:1fr; gap:6px; margin:8px 0; }
.util-form.two { grid-template-columns:1fr 1fr; }
.util-field { min-width:0; display:flex; flex-direction:column; gap:3px; }
.util-field > span { font-family:var(--font-ui); font-size:8px; letter-spacing:.5px; color:var(--p5-wash); }
.util-field input, .util-field select {
  width:100%; min-height:34px; padding:5px 7px; font-family:var(--font-body); font-size:10px;
  color:var(--p5-base); background:var(--p9-wash); border:1px solid var(--copper); border-radius:2px;
}
.util-toggle-list { display:flex; flex-direction:column; gap:4px; margin:8px 0; }
.util-toggle {
  width:100%; min-height:48px; padding:6px 8px; display:flex; align-items:center; gap:8px;
  text-align:left; background:var(--p6-wash); border:1px solid var(--line-soft);
}
.util-toggle > span { flex:1; min-width:0; }
.util-toggle b { display:block; font-family:var(--font-body); font-size:10px; color:var(--p5-base); }
.util-toggle small { display:block; margin-top:1px; font-family:var(--font-body); font-size:8px; line-height:1.3; color:var(--p5-wash); }
.util-toggle i { min-width:34px; padding:3px; text-align:center; font-style:normal; font-family:var(--font-mono); font-size:8px; color:var(--p5-wash); border:1px solid var(--line-soft); }
.util-toggle.on { background:var(--shell-wash); border-color:var(--copper); box-shadow:inset 3px 0 var(--shell-deep); }
.util-toggle.on i { color:var(--p9-base); background:var(--shell-deep); }
.util-toggle.locked { opacity:.65; cursor:not-allowed; }
.util-metric-row { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:8px; }
.util-tier { margin:8px 0; padding:10px; display:grid; grid-template-columns:45px 1fr; background:var(--p6-wash); }
.util-tier > span { grid-column:1; align-self:center; }
.util-tier > b { grid-column:1; font-family:var(--font-display); font-size:30px; color:var(--shell-deep); }
.util-tier > p { grid-column:2; grid-row:1/3; align-self:center; }
.util-equipment-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.util-equipment { min-height:43px; padding:5px 7px; display:flex; align-items:center; gap:7px; text-align:left; background:var(--p6-wash); border:1px solid var(--line-soft); }
.util-equipment span { color:var(--p5-wash); }
.util-equipment b { font-family:var(--font-body); font-size:9px; color:var(--p5-base); }
.util-equipment.on { background:var(--shell-wash); border-color:var(--copper); }
.util-equipment.on span { color:var(--shell-deep); }
.util-mode { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:8px; }
.util-mode button { min-height:40px; padding:6px; font-family:var(--font-ui); font-size:8px; background:var(--p6-wash); border:1px solid var(--line-soft); }
.util-mode button.on { color:var(--p9-base); background:var(--shell-deep); border-color:var(--copper); }
.util-clock-preview { min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--shell-wash); border:1px solid var(--copper); }
.util-clock-preview span { font-family:var(--font-mono); font-size:19px; color:var(--p5-base); }
.util-clock-preview small { margin-top:4px; font-family:var(--font-ui); font-size:8px; color:var(--p5-wash); }
.util-account-list { display:flex; flex-direction:column; gap:4px; margin:8px 0; }
.util-account { min-height:50px; padding:6px 8px; display:grid; grid-template-columns:22px 1fr; text-align:left; background:var(--p6-wash); border:1px solid var(--line-soft); }
.util-account > span { grid-row:1/3; align-self:center; color:var(--p5-wash); }
.util-account > b { font-family:var(--font-body); font-size:10px; color:var(--p5-base); }
.util-account > small { font-family:var(--font-mono); font-size:8px; color:var(--p5-wash); }
.util-account.on { background:var(--shell-wash); border-color:var(--copper); }
.util-account.on > span { color:var(--shell-deep); }
.util-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; }

/* ── Library view — the exercise index behind Utilitas 🪡 Pull ── */
.library { display:none; flex:1; min-width:0; flex-direction:column; position:relative; }
.middle[data-view="library"] .utilities { display:none; }
.middle[data-view="library"] .card { display:none; }
.middle[data-view="library"] .library { display:flex; }
.middle[data-view="library"] .drawer { display:none; }
.middle[data-view="library"].split .drawer { display:flex; }

/* ── Venustas — Hero's Almanac and RPG creator ── */
.almanac {
  display:none; flex:1; min-width:0; min-height:0; overflow:hidden;
  flex-direction:column; background:var(--p9-base);
  border:var(--ad-case-perimeter) solid var(--p5-base);
  border-radius:var(--ad-radius); box-shadow:var(--shadow);
}
.middle[data-view="almanac"] .card,
.middle[data-view="almanac"] .library,
.middle[data-view="almanac"] .utilities,
.middle[data-view="almanac"] .drawer,
.middle[data-view="almanac"] .split-gut { display:none; }
.middle[data-view="almanac"] .almanac { display:flex; }

/* Temporitas keeps every authored card findable by its full or partial ZIP. */
.archive {
  display:none; flex:1; min-width:0; min-height:0; overflow:hidden;
  flex-direction:column; background:var(--p9-base);
  border:var(--ad-case-perimeter) solid var(--p5-base);
  border-radius:var(--ad-radius); box-shadow:var(--shadow);
}
.middle[data-view="archive"] .card,
.middle[data-view="archive"] .library,
.middle[data-view="archive"] .utilities,
.middle[data-view="archive"] .almanac,
.middle[data-view="archive"] .drawer,
.middle[data-view="archive"] .split-gut { display:none; }
.middle[data-view="archive"] .archive { display:flex; }
.archive-head {
  height:54px; flex:none; padding:7px 10px; display:flex; align-items:center;
  justify-content:space-between; color:var(--p9-base); background:var(--p5-base);
}
.archive-head small { display:block; font-family:var(--font-ui); font-size:7px; letter-spacing:1px; color:var(--p6-wash); }
.archive-head h2 { font-family:var(--font-display); font-size:17px; letter-spacing:1px; }
.archive-head > b { min-width:30px; text-align:center; font-family:var(--font-mono); font-size:13px; }
.archive-list { flex:1; min-height:0; overflow-y:auto; padding:7px; display:flex; flex-direction:column; gap:5px; }
.archive-card { display:flex; min-height:56px; background:var(--p6-wash); border:1px solid var(--line-soft); }
.archive-card.partial { border-left:4px solid var(--p3-base); }
.archive-card > button:first-child { flex:1; min-width:0; padding:6px 8px; text-align:left; display:flex; flex-direction:column; gap:2px; }
.archive-card span { font-family:var(--font-ui); font-size:7px; letter-spacing:1px; color:var(--copper); }
.archive-card b { font-family:var(--font-mono); font-size:11px; color:var(--p5-base); }
.archive-card small { font-family:var(--font-body); font-size:8px; color:var(--p5-wash); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.archive-trash { width:34px; flex:none; color:var(--p3-base); border-left:1px solid var(--line-soft); }
.archive-foot { height:28px; flex:none; padding:0 8px; display:flex; align-items:center; justify-content:space-between; background:var(--p6-wash); }
.archive-foot span { font-family:var(--font-ui); font-size:6px; letter-spacing:.7px; color:var(--p5-wash); }

/* ── Temporitas · Global Almanac calendar, board, and workout stamps ── */
.ga-head > b {
  max-width:190px; font-size:var(--ad-type-small); line-height:1.2;
  overflow-wrap:anywhere;
}
.ga-tabs {
  min-height:36px; flex:none; display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--p6-wash); border-bottom:1px solid var(--line-soft);
}
.ga-tabs button {
  min-width:0; padding:5px 3px; font-family:var(--font-ui);
  font-size:var(--ad-type-micro); border-right:1px solid var(--line-soft);
}
.ga-tabs button:last-child { border-right:0; }
.ga-tabs button.on { color:var(--p9-base); background:var(--shell-deep); }
.ga-scroll {
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:7px; background:var(--p9-base);
}
.ga-monthbar {
  min-height:36px; display:grid; grid-template-columns:34px 1fr auto 34px;
  align-items:center; gap:4px; margin-bottom:4px;
}
.ga-monthbar button {
  height:32px; padding:0 7px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:var(--ad-type-small);
  background:var(--shell-wash); border:1px solid var(--copper);
}
.ga-monthbar b {
  min-width:0; font-family:var(--font-display); font-size:var(--ad-type-body);
  overflow-wrap:anywhere;
}
.ga-weekdays, .ga-month { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.ga-weekdays { background:var(--p5-base); }
.ga-weekdays div {
  min-width:0; padding:4px 1px; text-align:center; font-family:var(--font-ui);
  font-size:var(--ad-type-micro); color:var(--p6-wash);
}
.ga-weekdays .weekend { color:var(--p8-wash); }
.ga-month { border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft); }
.ga-day {
  min-width:0; min-height:46px; padding:4px; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:space-between; text-align:left;
  background:var(--p9-base); border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.ga-day:nth-child(7n+6), .ga-day:nth-child(7n) { background:color-mix(in srgb,var(--p6-wash) 55%,var(--p9-base)); }
.ga-day b { font-family:var(--font-mono); font-size:var(--ad-type-small); }
.ga-day > span { min-height:11px; display:flex; flex-wrap:wrap; gap:2px; }
.ga-day i {
  min-width:10px; height:10px; padding:0 2px; display:flex; align-items:center;
  justify-content:center; border-radius:5px; font-style:normal; font-family:var(--font-mono);
  font-size:7px; color:var(--p9-base); background:var(--p1-base);
}
.ga-day i.todo { background:var(--p7-base); }
.ga-day i.log { background:var(--p2-base); }
.ga-day.outside { opacity:.35; }
.ga-day.today { box-shadow:inset 0 0 0 2px var(--copper); }
.ga-day.selected { color:var(--p9-base); background:var(--shell-deep); }
.ga-day.selected i { outline:1px solid var(--p9-base); }
.ga-agenda { margin-top:8px; border-top:3px solid var(--shell-deep); }
.ga-agenda > header, .ga-section > header {
  min-height:42px; padding:6px 8px; display:flex; align-items:center;
  justify-content:space-between; gap:8px; background:var(--p6-wash);
}
.ga-agenda header small, .ga-section header small, .ga-log-list > small {
  display:block; font-family:var(--font-ui); font-size:var(--ad-type-micro);
  letter-spacing:.7px; color:var(--p5-wash);
}
.ga-agenda h3, .ga-section h3 {
  font-family:var(--font-display); font-size:var(--ad-type-body); line-height:1.25;
}
.ga-agenda header > b { font-family:var(--font-mono); font-size:var(--ad-type-small); }
.ga-agenda-list { display:flex; flex-direction:column; }
.ga-agenda-row {
  min-height:48px; padding:6px; display:grid;
  grid-template-columns:24px minmax(0,1fr) repeat(2,28px); gap:5px; align-items:center;
  border-bottom:1px solid var(--line-soft); background:var(--p9-base);
}
.ga-agenda-row > span, .ga-agenda-row > button {
  display:flex; align-items:center; justify-content:center; font-size:var(--ad-type-small);
}
.ga-agenda-row > button { height:28px; border:1px solid var(--line-soft); }
.ga-agenda-row > div { min-width:0; display:flex; flex-direction:column; gap:1px; }
.ga-agenda-row small { font-family:var(--font-ui); font-size:var(--ad-type-micro); color:var(--p5-wash); }
.ga-agenda-row b { font-family:var(--font-body); font-size:var(--ad-type-small); overflow-wrap:anywhere; }
.ga-agenda-row em { font-family:var(--font-mono); font-size:var(--ad-type-micro); color:var(--copper); overflow-wrap:anywhere; }
.ga-agenda-row.logged { border-left:4px solid var(--p2-base); }
.ga-agenda-row.planned { border-left:4px solid var(--p1-base); }
.ga-agenda-row.todo { grid-template-columns:28px minmax(0,1fr); }
.ga-agenda-row.done, .ga-todo.done { opacity:.5; text-decoration:line-through; }
.ga-quick-form {
  display:grid; grid-template-columns:76px minmax(0,1fr) minmax(0,1fr) 34px;
  gap:4px; padding:6px; background:var(--p6-wash);
}
.ga-quick-form :is(input,button), .ga-board-form :is(input,textarea,button) {
  min-width:0; min-height:34px; padding:5px 7px; font-family:var(--font-ui);
  font-size:var(--ad-type-small); background:var(--field); border:1px solid var(--copper);
}
.ga-quick-form button, .ga-board-form button { color:var(--p9-base); background:var(--shell-deep); }
.ga-section { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.ga-board-form { display:grid; grid-template-columns:1.4fr 1fr 130px auto; gap:5px; }
.ga-board-form.note { grid-template-columns:1fr 180px auto; }
.ga-board-form textarea { min-height:58px; resize:vertical; font-family:var(--font-body); }
.ga-todos { display:flex; flex-direction:column; gap:4px; }
.ga-todo {
  min-height:44px; padding:5px; display:grid; grid-template-columns:32px 1fr 28px;
  gap:6px; align-items:center; background:var(--p6-wash); border-left:3px solid var(--shell-deep);
}
.ga-todo > div { min-width:0; display:flex; flex-direction:column; }
.ga-todo b { font-family:var(--font-body); font-size:var(--ad-type-small); overflow-wrap:anywhere; }
.ga-todo small { font-family:var(--font-mono); font-size:var(--ad-type-micro); color:var(--p5-wash); overflow-wrap:anywhere; }
.ga-note-board { display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:start; }
.ga-note {
  position:relative; min-width:0; min-height:84px; padding:9px;
  background:var(--p8-wash); border:1px solid var(--copper); transform:rotate(-.4deg);
}
.ga-note:nth-child(even) { background:var(--p2-wash); transform:rotate(.4deg); }
.ga-note > button { position:absolute; top:3px; right:3px; width:24px; height:24px; }
.ga-note small { display:block; padding-right:20px; font-family:var(--font-mono); font-size:var(--ad-type-micro); color:var(--copper); overflow-wrap:anywhere; }
.ga-note p { margin-top:5px; font-family:var(--font-body); font-size:var(--ad-type-small); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.ga-week-status { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
.ga-week-status > div { min-width:0; padding:9px; background:var(--p6-wash); border-top:3px solid var(--shell-deep); }
.ga-week-status small, .ga-workout-stamp small { display:block; font-family:var(--font-ui); font-size:var(--ad-type-micro); color:var(--p5-wash); }
.ga-week-status b { display:block; margin:2px 0; font-family:var(--font-mono); font-size:var(--ad-type-heading); }
.ga-week-status span { font-family:var(--font-body); font-size:var(--ad-type-small); line-height:1.35; }
.ga-stampboard { display:grid; grid-template-columns:1fr 1fr; gap:7px; align-items:start; }
.ga-workout-stamp {
  min-width:0; min-height:132px; padding:9px; display:flex; flex-direction:column;
  gap:3px; background:var(--shell-wash); border:2px dashed var(--copper); border-radius:4px;
}
.ga-workout-stamp > span { align-self:flex-end; font-family:var(--font-mono); font-size:var(--ad-type-body); }
.ga-workout-stamp > b { font-family:var(--font-mono); font-size:var(--ad-type-small); overflow-wrap:anywhere; }
.ga-workout-stamp > em { font-family:var(--font-body); font-size:var(--ad-type-micro); color:var(--p5-wash); }
.ga-workout-stamp > div { margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.ga-workout-stamp button {
  min-height:30px; padding:4px; font-family:var(--font-ui); font-size:var(--ad-type-micro);
  background:var(--p6-wash); border:1px solid var(--copper);
}
.ga-workout-stamp button:last-child { color:var(--p9-base); background:var(--shell-deep); }
.ga-workout-stamp.empty { background:var(--p9-base); }
.ga-complete { padding:24px; grid-column:1/-1; text-align:center; font-family:var(--font-body); font-size:var(--ad-type-body); }
.ga-log-list { margin-top:10px; padding-top:7px; border-top:1px solid var(--line-soft); }
.ga-log-list > button { width:100%; padding:6px; display:flex; justify-content:space-between; text-align:left; background:var(--p6-wash); border-bottom:1px solid var(--line-soft); }
.ga-log-list b { font-family:var(--font-mono); font-size:var(--ad-type-small); }
.ga-log-list span { font-family:var(--font-body); font-size:var(--ad-type-micro); }
.ga-card-list { padding:0; overflow:visible; }
.ga-empty { padding:12px; font-family:var(--font-body); font-size:var(--ad-type-small); color:var(--p5-wash); }
.ga-foot { gap:8px; }
.ga-foot span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.deck[data-ui-mode="mobile"] .ga-day { min-height:52px; }
.deck[data-ui-mode="mobile"] .ga-quick-form { grid-template-columns:90px 1fr; }
.deck[data-ui-mode="mobile"] .ga-quick-form button { min-height:40px; }
.deck[data-ui-mode="mobile"] .ga-board-form,
.deck[data-ui-mode="mobile"] .ga-board-form.note { grid-template-columns:1fr; }
.deck[data-ui-mode="mobile"] .ga-note-board,
.deck[data-ui-mode="mobile"] .ga-stampboard { grid-template-columns:1fr; }
.deck[data-ui-mode="mobile"] .ga-workout-stamp { min-height:150px; }
.deck[data-ui-mode="mobile"] .ga-tabs button { min-height:40px; }
.ha-head {
  min-height:54px; flex:none; padding:7px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  color:var(--p9-base); background:var(--p5-base);
}
.ha-head > div { min-width:0; }
.ha-head h2 {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-display); font-size:17px; letter-spacing:1px;
}
.ha-eyebrow {
  display:block; margin-bottom:1px; font-family:var(--font-ui); font-size:7px;
  letter-spacing:1.2px; color:var(--p6-wash);
}
.ha-store {
  flex:none; padding:3px 5px; border:1px solid var(--p6-base); border-radius:2px;
  font-family:var(--font-mono); font-size:7px; color:var(--p6-wash);
}
.ha-scroll {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:8px; scrollbar-width:thin; scrollbar-color:var(--copper) var(--line-soft);
}
.ha-intro, .ha-welcome {
  padding:14px; margin-bottom:8px; border:1px solid var(--copper);
  background:linear-gradient(135deg,var(--shell-wash),var(--p9-base));
}
.ha-intro p, .ha-welcome h3 {
  font-family:var(--font-display); font-size:17px; color:var(--p5-base);
}
.ha-intro span, .ha-welcome p, .ha-prompt, .ha-room-purpose {
  display:block; margin-top:5px; font-family:var(--font-body); font-size:10px;
  line-height:1.45; color:var(--p5-base);
}
.ha-primary, .ha-secondary {
  width:100%; min-height:30px; padding:6px 10px; border:1px solid var(--copper);
  border-radius:2px; font-family:var(--font-ui); font-size:9px; letter-spacing:1px;
}
.ha-primary { color:var(--p9-base); background:var(--p5-base); }
.ha-primary:disabled { opacity:.35; cursor:not-allowed; }
.ha-secondary { color:var(--p5-base); background:var(--p6-wash); }
.ha-section-label {
  margin:10px 0 5px; font-family:var(--font-ui); font-size:8px;
  letter-spacing:1px; color:var(--p5-wash);
}
.ha-list, .ha-entries { display:flex; flex-direction:column; gap:4px; }
.ha-hero-row {
  width:100%; padding:6px; display:flex; align-items:center; gap:8px;
  text-align:left; background:var(--p6-wash); border:1px solid var(--line-soft);
}
.ha-hero-row > span:nth-child(2) { flex:1; min-width:0; }
.ha-hero-row strong, .ha-entries b { display:block; font-family:var(--font-body); font-size:11px; color:var(--p5-base); }
.ha-hero-row small, .ha-entries span { display:block; font-family:var(--font-mono); font-size:8px; color:var(--p5-wash); }
.ha-sigil {
  width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--p5-base); border-radius:50%;
}
.ha-empty { padding:12px; font-family:var(--font-body); font-size:10px; color:var(--p5-wash); text-align:center; }
.ha-welcome { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.ha-big-glyph { font-size:52px; margin-bottom:8px; filter:drop-shadow(0 4px 5px #0003); }
.ha-form, .ha-profile-edit { display:flex; flex-direction:column; gap:7px; margin-bottom:9px; }
.ha-form label, .ha-profile-edit label, .ha-block {
  display:flex; flex-direction:column; gap:3px; font-family:var(--font-ui);
  font-size:8px; letter-spacing:.5px; color:var(--p5-wash);
}
.ha-form input, .ha-form select, .ha-profile-edit input, .ha-add-form input,
.ha-block textarea, .ha-question select {
  width:100%; min-height:28px; padding:5px 7px; outline:none;
  font-family:var(--font-body); font-size:10px; color:var(--p5-base);
  background:var(--p9-base); border:1px solid var(--copper); border-radius:2px;
}
.ha-form input:focus, .ha-form select:focus, .ha-profile-edit input:focus,
.ha-add-form input:focus, .ha-block textarea:focus { box-shadow:0 0 0 2px var(--shell-wash); }
.ha-two { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ha-color-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:8px 0; }
.ha-color {
  min-height:62px; padding:6px 4px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; text-align:center;
  color:var(--p5-base); background:var(--wash); border:2px solid transparent; border-radius:2px;
}
.ha-color::before { content:''; width:15px; height:15px; border-radius:50%; background:var(--tile); border:1px solid var(--p5-base); }
.ha-color b { font-family:var(--font-ui); font-size:8px; text-transform:uppercase; }
.ha-color span { font-family:var(--font-body); font-size:7px; line-height:1.2; }
.ha-color.chosen { border-color:var(--p5-base); box-shadow:inset 0 0 0 2px var(--p9-base); }
.ha-toggles { display:flex; flex-direction:column; gap:6px; margin:9px 0; }
.ha-toggle {
  padding:10px; display:flex; justify-content:space-between; align-items:center;
  background:var(--p6-wash); border:1px solid var(--copper);
  font-family:var(--font-body); font-size:10px;
}
.ha-toggle b { font-family:var(--font-ui); font-size:8px; }
.ha-toggle.on { background:var(--shell-wash); box-shadow:inset 3px 0 var(--shell-deep); }
.ha-rhythm { min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.ha-rhythm span { font-family:var(--font-display); font-size:54px; line-height:1; color:var(--p5-base); }
.ha-rhythm b { font-family:var(--font-ui); font-size:8px; letter-spacing:2px; color:var(--p5-wash); }
.ha-rhythm input { width:80%; accent-color:var(--shell-deep); }
.ha-back {
  margin-bottom:5px; font-family:var(--font-ui); font-size:8px; letter-spacing:.7px;
  color:var(--copper); background:none;
}
.ha-profile-card {
  display:grid; grid-template-columns:48px 1fr; gap:8px; padding:8px;
  background:var(--hero-wash); border:1px solid var(--hero-color);
}
.ha-avatar {
  grid-row:span 2; width:48px; height:58px; display:flex; align-items:center;
  justify-content:center; font-size:25px; background:var(--hero-color);
  border:1px solid var(--p5-base); clip-path:polygon(50% 0,100% 18%,92% 82%,50% 100%,8% 82%,0 18%);
}
.ha-profile-card h3 { font-family:var(--font-display); font-size:16px; color:var(--p5-base); }
.ha-profile-card p { font-family:var(--font-body); font-size:9px; color:var(--p5-base); }
.ha-profile-card small { font-family:var(--font-body); font-size:8px; color:var(--p5-wash); }
.ha-profile-card dl { display:flex; gap:12px; }
.ha-profile-card dl div { display:flex; flex-direction:column; }
.ha-profile-card dt { font-family:var(--font-ui); font-size:6px; color:var(--p5-wash); }
.ha-profile-card dd { font-family:var(--font-mono); font-size:10px; color:var(--p5-base); }
.ha-profile-edit { margin-top:6px; }
.ha-room-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.ha-room {
  min-height:52px; padding:4px 2px; display:grid; grid-template-columns:20px 1fr;
  grid-template-rows:1fr 1fr; text-align:left; align-items:center;
  background:var(--p6-wash); border:1px solid var(--line-soft);
}
.ha-room:hover { background:var(--shell-wash); border-color:var(--copper); }
.ha-room > span { grid-row:span 2; text-align:center; font-size:14px; }
.ha-room b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-ui); font-size:7px; color:var(--p5-base); }
.ha-room small { font-family:var(--font-mono); font-size:6px; color:var(--p5-wash); }
.ha-add-form { display:flex; gap:4px; margin:8px 0; }
.ha-add-form input { flex:1; min-width:0; }
.ha-add-form button { flex:none; padding:0 8px; color:var(--p9-base); background:var(--p5-base); font-family:var(--font-ui); font-size:7px; }
.ha-entries article { padding:7px; background:var(--p6-wash); border-left:3px solid var(--shell-deep); }
.ha-block-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.ha-block { padding:5px; background:var(--p6-wash); border:1px solid var(--line-soft); }
.ha-block > span { display:flex; align-items:center; gap:3px; color:var(--p5-base); }
.ha-block > span b { font-size:8px; }
.ha-block > span i { margin-left:auto; font-style:normal; font-size:6px; color:var(--p5-wash); }
.ha-block small { min-height:19px; font-family:var(--font-body); font-size:7px; line-height:1.25; color:var(--p5-wash); }
.ha-block textarea { min-height:56px; resize:vertical; font-size:8px; line-height:1.35; }
.ha-block.auto { opacity:.7; }
.ha-dares { display:flex; flex-direction:column; gap:4px; margin-top:7px; }
.ha-dares details { background:var(--p6-wash); border:1px solid var(--line-soft); }
.ha-dares summary { padding:6px; display:grid; grid-template-columns:22px 1fr; cursor:pointer; }
.ha-dares summary span { grid-row:span 2; font-size:15px; }
.ha-dares summary b { font-family:var(--font-ui); font-size:8px; color:var(--p5-base); }
.ha-dares summary small { font-family:var(--font-body); font-size:7px; color:var(--p5-wash); }
.ha-question { padding:6px; display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--line-soft); font-family:var(--font-body); font-size:9px; color:var(--p5-base); }
.ha-question > div { display:grid; grid-template-columns:55px 1fr 16px 55px; gap:3px; align-items:center; }
.ha-question > div small { font-size:6px; line-height:1.1; color:var(--p5-wash); }
.ha-question > div small:last-child { text-align:right; }
.ha-question input { width:100%; accent-color:var(--shell-deep); }
.ha-question select { min-height:23px; font-size:7px; }
.ha-portrait { padding:20px; text-align:center; background:var(--hero-wash); border:2px solid var(--hero-color); }
.ha-portrait-mark { width:70px; height:84px; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:35px; color:var(--p9-base); background:var(--hero-color); clip-path:polygon(50% 0,100% 18%,92% 82%,50% 100%,8% 82%,0 18%); }
.ha-portrait h3 { font-family:var(--font-display); font-size:22px; color:var(--p5-base); }
.ha-portrait p, .ha-portrait blockquote { margin-top:3px; font-family:var(--font-body); font-size:10px; color:var(--p5-base); }
.ha-portrait small { display:block; margin-top:8px; font-family:var(--font-mono); font-size:7px; color:var(--p5-wash); }
.ha-block-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.ha-block-tags span { padding:3px 5px; background:var(--p6-wash); font-family:var(--font-ui); font-size:7px; }
.ha-vector { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.ha-vector div { position:relative; min-height:23px; padding:4px 6px; overflow:hidden; display:flex; justify-content:space-between; background:var(--p6-wash); }
.ha-vector span, .ha-vector b { z-index:1; font-family:var(--font-mono); font-size:7px; color:var(--p5-base); }
.ha-vector i { position:absolute; left:0; bottom:0; height:3px; background:var(--shell-deep); }
.ha-rule, .ha-vault, .ha-export { margin-top:10px; padding:12px; background:var(--p6-wash); border:1px solid var(--copper); }
.ha-rule { display:grid; grid-template-columns:1fr auto; gap:4px; }
.ha-rule b, .ha-rule span { font-family:var(--font-mono); font-size:9px; color:var(--p5-base); }
.ha-rule small { grid-column:1/-1; font-family:var(--font-body); font-size:8px; color:var(--p5-wash); }
.ha-vault { text-align:center; }
.ha-vault > span { font-size:35px; }
.ha-vault h3 { font-family:var(--font-display); font-size:16px; }
.ha-vault p, .ha-export p { margin:5px 0; font-family:var(--font-body); font-size:9px; line-height:1.4; }
.ha-vault dl { display:flex; justify-content:center; gap:16px; margin-top:8px; }
.ha-vault dt { font-family:var(--font-ui); font-size:6px; color:var(--p5-wash); }
.ha-vault dd { font-family:var(--font-mono); font-size:7px; }
.ha-export { display:flex; flex-direction:column; gap:6px; }

.lib-head {
  height: var(--ad-card-header-h); flex:none;
  display:flex; align-items:center; gap:8px;
  padding:0 8px; background: var(--p5-base); border-radius:2px;
}
.lib-home { width:32px; height:32px; font-size:14px; }
.lib-search {
  flex:1; min-width:0; height:28px;
  padding:0 8px; background: var(--field); border:1px solid var(--copper);
  border-radius:2px; font-family:var(--font-ui); font-size:11px; color:var(--ink);
}
.lib-search::placeholder { color: var(--ink-dim); }
.lib-count {
  flex:none; font-family:var(--font-mono); font-size:11px; color:var(--p6-wash);
  letter-spacing:1px;
}

.lib-filters {
  height:24px; flex:none; display:flex; align-items:center; gap:4px;
  padding:0 4px; overflow-x:auto; scrollbar-width:none;
}
.lib-filters::-webkit-scrollbar { display:none; }
.lib-tag {
  flex:none; padding:2px 6px; border-radius:2px;
  font-family:var(--font-ui); font-size:9px; letter-spacing:0.5px;
  background:var(--p9-base); color:var(--ink); border:1px solid var(--copper);
  cursor:pointer; white-space:nowrap;
}
.lib-tag.on { background:var(--shell-deep); color:var(--p9-base); }

.lib-list {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color: var(--copper) var(--line-soft);
}

/* Exercise rows */
.ex-row {
  flex:none; display:flex; align-items:center; gap:6px;
  padding:4px 8px; min-height:42px; cursor:pointer;
  background: var(--p9-base); border-bottom:1px solid var(--line-soft);
  transition: background 0.1s;
}
.ex-row:nth-child(even) { background: var(--p6-wash); }
.ex-row:hover { background: var(--shell-wash); }
.ex-row .ex-fam {
  width:26px; height:26px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--shell-bg); border:1px solid var(--copper);
  border-radius:3px; font-family:var(--font-mono); font-size:9px; color:var(--ink);
}
.ex-row .ex-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ex-row .ex-name {
  font-family:var(--font-body); font-size:11px; color:var(--p5-base);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ex-row .ex-sub {
  display:flex; justify-content:space-between; align-items:center; gap:4px;
}
.ex-row .ex-meta {
  font-family:var(--font-ui); font-size:8px; letter-spacing:0.5px; color:var(--p5-wash);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ex-row .ex-badge {
  flex:none; font-family:var(--font-mono); font-size:9px; color:var(--copper);
}
.ex-row .ex-gold { color: var(--p8-base); font-size:10px; }
.ex-row .ex-add {
  width:22px; height:22px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--copper); border-radius:2px;
  font-size:12px; color:var(--copper); background:transparent;
  opacity:0; transition:opacity 0.1s;
}
.ex-row:hover .ex-add { opacity:1; }

/* Library footer */
.lib-foot {
  height: var(--ad-card-footer-h); flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px; background: var(--p6-wash); border-radius:2px;
}

/* Detail card — single exercise expanded (covers the list) */
.lib-detail {
  display:none; position:absolute; inset:0;
  flex-direction:column; background:var(--p9-base);
  overflow-y:auto; z-index:2;
}
.lib-detail.open { display:flex; }
.lib-detail .detail-head {
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; background:var(--p5-base); border-radius:2px;
}
.lib-detail .detail-head .ch-zip { font-family:var(--font-mono); font-size:14px; color:var(--p9-base); }
.lib-detail .detail-head .ch-type { font-family:var(--font-display); font-size:13px; letter-spacing:2px; color:var(--p9-base); }
.lib-detail .detail-close {
  font-size:14px; color:var(--p6-wash); background:none; border:none; cursor:pointer;
}
.lib-detail .detail-body { flex:1; padding:10px; display:flex; flex-direction:column; gap:10px; }
.lib-detail .detail-section { display:flex; flex-direction:column; gap:4px; }
.lib-detail .detail-label {
  font-family:var(--font-ui); font-size:9px; letter-spacing:1px; color:var(--p5-wash);
  text-transform:uppercase;
}
.lib-detail .detail-text {
  font-family:var(--font-body); font-size:11px; color:var(--p5-base); line-height:1.5;
}
.lib-detail .detail-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.lib-detail .detail-cell {
  padding:6px; background:var(--p6-wash); border-radius:2px;
  display:flex; flex-direction:column; gap:2px;
}
.lib-detail .detail-cell .detail-label { font-size:8px; }
.lib-detail .detail-cell .detail-text { font-size:10px; }

.op-rail {
  width: var(--ad-pill-w); flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--ad-pill-gap);
}
.pill {
  width: var(--ad-pill-w); height: var(--ad-pill-h); flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--shell-wash); border:1px solid var(--p6-wash);
  border-radius:10px; box-shadow: var(--shadow); font-size:11px;
}
.pill.on { background: var(--shell-deep); }

/* ══ LOWER THIRD ══ */
.lower {
  flex-direction:column; height: var(--ad-lower-h);
  padding: 0 var(--ad-lower-inset); gap: var(--ad-lower-gap);
}
.axis-row { height: var(--ad-axis-row-h); flex:none; display:flex; align-items:center; justify-content:space-between; }
.penny {
  width: var(--ad-penny-w); height: var(--ad-penny-h); flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--copper); border:2px solid var(--p6-glow);
  border-radius:50%; box-shadow: var(--shadow);
  font-size:17px; color: var(--p6-deep);
}
.penny.on { border-color: var(--ink); }

.instruments { height: var(--ad-instr-h); flex:none; display:flex; align-items:center; justify-content:space-between; }
.deck[data-instrument-swap="true"] .instruments { flex-direction:row-reverse; }
.zpad {
  width: var(--ad-zpad-w); height: var(--ad-zpad-w); flex:none;
  display:grid; grid-template-columns:repeat(3,var(--ad-zpad-key));
  grid-template-rows:repeat(3,var(--ad-zpad-key));
  gap: var(--ad-zpad-gap); align-content:center; justify-content:center;
}
.zkey {
  display:flex; align-items:center; justify-content:center;
  background: var(--p5-base); border:3px solid var(--p6-deep);
  border-radius:4px; box-shadow: var(--shadow);
  font-size:17px; color: var(--p9-base);
}
.zkey.mod { background: var(--p3-base); }
.zkey.on  { outline:2px solid var(--ink); outline-offset:2px; }

/* Each reel carries its own wash so the four positions are tellable apart at a
   glance — architect's tokens, 2026-08-12. Housing moved deep → base. */
.zip-dial {
  width: var(--ad-dial-w); height: var(--ad-instr-h); flex:none;
  display:flex; gap: var(--ad-dial-gap); padding: var(--ad-dial-pad);
  background: var(--p6-base); border-radius: var(--ad-radius); box-shadow: var(--shadow);
}
.reel {
  flex:1; min-width:0; position:relative; overflow:hidden;
  background: var(--p6-wash); border:4px solid var(--copper);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
}
.reel-operator { background: var(--p1-wash); }
.reel-axis     { background: var(--p2-wash); }
.reel-order    { background: var(--p3-wash); }
.reel-color    { background: var(--p4-wash); }
.reel .face {
  flex:1; display:flex; align-items:center; justify-content:center;
  width:100%; font-size:15px;
}
.reel .face.minor { font-size:11px; opacity:.45; }
/* The colour reel spells the colour instead of showing a glyph — a swatch and a
   word say more than a coloured circle, which on a coloured shell says nothing. */
.reel .face.word {
  width:calc(100% - 8px); margin:0 4px;
  clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%);
  font-family:var(--font-ui); font-size:9px; letter-spacing:.5px; text-transform:uppercase;
}
.reel .face.word.minor { font-size:7px; }
.reel .face.swatch { color:#fff; }
.reel .face.swatch.light { color:#211D19; }
.reel .bar { height:10px; width:100%; flex:none; background: var(--p6-glow);
  display:flex; align-items:center; justify-content:space-between; padding:0 3px; }
.reel .bar i { width:5px; height:5px; border-radius:50%; background: var(--ink); }
.reel.unlocked { border-color: var(--p3-base); }

.dial-lock {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--p6-deep); border:2px solid var(--copper);
  box-shadow: var(--shadow); font-size:12px; z-index:1;
}
.dial-lock.locked { background: var(--p5-base); }
.dial-lock.pending {
  background: var(--p3-base); border-color: var(--p3-deep); color:#FFF;
  animation: pending-pulse 1.2s ease-in-out infinite;
}
@keyframes pending-pulse {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 4px var(--p3-wash); }
}
.zip-dial { position:relative; }

/* ── Partial zip — the revelator previews the pending address ── */
.rev-zip.partial { color: var(--p3-base); }
.zip-input-active {
  font-family:var(--font-mono) !important; font-weight:700;
  outline:3px solid var(--p2-base) !important; outline-offset:-3px;
  background:var(--p2-wash) !important;
}
.deck[data-zip-input="true"] .zip-dial { box-shadow:0 0 0 4px var(--p2-base), var(--shadow); }
.dial-lock.inputting { color:var(--p9-base); background:var(--p2-base); }

/* ── The draft — editable slots on the Firmitas card ── */
.slot.draft .not {
  cursor:pointer; border-bottom:1px dotted var(--p5-wash);
  min-width:24px; text-align:right;
}
.slot.draft {
  flex:none; min-height:50px; position:relative; padding:4px 5px;
  cursor:grab; transition:opacity .12s ease, box-shadow .12s ease;
}
.slot.draft:has(.slot-members) { min-height:66px; }
.slot.draft.active { box-shadow:inset 3px 0 0 var(--shell-deep); background:var(--shell-wash); }
.slot.draft.locked { cursor:default; box-shadow:inset 3px 0 0 var(--copper); }
.slot.draft.dragging { opacity:.35; }
.slot.draft .block-spin { cursor:pointer; }
.slot.draft .block-spin:hover { background:var(--shell-wash); box-shadow:0 0 0 1px var(--shell-deep); }
.slot.draft.locked .block-spin { cursor:not-allowed; filter:grayscale(.6); }
.slot.draft .col { gap:1px; }
.slot.draft .sub { min-width:0; }
.slot.draft .not { overflow:hidden; text-overflow:ellipsis; }
.slot-members { display:flex; gap:3px; min-width:0; overflow:hidden; }
.slot-member {
  min-width:0; max-width:130px; padding:2px 4px; overflow:hidden;
  border:1px dashed var(--copper); border-radius:2px;
  font-family:var(--font-mono); font-size:7px; color:var(--p5-wash);
  text-overflow:ellipsis; white-space:nowrap; background:var(--p6-wash);
}
.slot-member.filled { color:var(--p5-base); border-style:solid; }
.slot-lock {
  width:19px; height:19px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-soft); border-radius:50%; font-size:9px;
  color:var(--p5-base); background:var(--p6-wash);
}
.slot-lock:hover { border-color:var(--copper); }
.slot .rm {
  flex:none; width:18px; height:18px; margin-left:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color: var(--p5-wash);
  background:none; border:1px solid var(--p6-glow); border-radius:50%;
}
.slot .rm:hover { color: var(--p3-base); border-color: var(--p3-base); }
.slot .rm:disabled { opacity:.25; cursor:not-allowed; }
.stat.reset { cursor:pointer; }
.stat.reset:hover .v { color: var(--p3-base); }

/* The slider opens a workout slot into a compact twelve-operator read. */
.workout-detail {
  display:none; position:absolute; inset:var(--ad-card-pad); z-index:8;
  min-width:0; min-height:0; flex-direction:column; overflow:hidden;
  background:var(--p9-base); border:1px solid var(--copper); border-radius:2px;
}
.workout-detail.open { display:flex; }
.workout-detail .detail-head {
  min-height:38px; flex:none; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:8px; padding:0 7px; background:var(--p5-base);
}
.workout-detail .detail-head .ch-zip { font-size:10px; }
.workout-detail .detail-head .ch-type { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.workout-detail .detail-close { width:23px; height:23px; color:var(--p9-base); border:1px solid var(--p6-wash); }
.workout-detail-body { flex:1; min-height:0; overflow-y:auto; padding:7px; }
.workout-detail-notation {
  margin-bottom:6px; padding:7px; font-family:var(--font-mono); font-size:9px;
  line-height:1.4; color:var(--p5-base); background:var(--shell-wash); border-left:3px solid var(--shell-deep);
}
.twelve-read { display:flex; flex-direction:column; gap:2px; }
.twelve-row {
  min-height:25px; display:grid; grid-template-columns:22px 48px 1fr;
  align-items:center; gap:4px; padding:2px 4px; background:var(--p6-wash);
}
.twelve-row .g { text-align:center; font-size:11px; }
.twelve-row .o { font-family:var(--font-ui); font-size:7px; color:var(--copper); }
.twelve-row .v { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:7px; color:var(--p5-base); }

/* Shared programmer prompt and compatible-exercise pool. */
.creator-modal {
  display:none; position:absolute; inset:0; z-index:30; align-items:center; justify-content:center;
  padding:18px 42px; background:color-mix(in srgb,var(--p5-base) 72%,transparent);
}
.creator-modal.open { display:flex; }
.modal-sheet {
  width:100%; max-height:100%; display:flex; flex-direction:column; gap:7px;
  padding:10px; overflow:hidden; color:var(--p5-base); background:var(--p9-base);
  border:2px solid var(--copper); box-shadow:0 8px 24px rgba(0,0,0,.32);
}
.modal-sheet header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.modal-sheet header > div { min-width:0; }
.modal-sheet header small { font-family:var(--font-ui); font-size:7px; letter-spacing:1px; color:var(--copper); }
.modal-sheet header h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-display); font-size:15px; }
.modal-sheet header button { width:24px; height:24px; flex:none; border:1px solid var(--line-soft); }
.modal-sheet p { font-family:var(--font-body); font-size:9px; line-height:1.45; color:var(--p5-wash); }
.program-sheet > button { min-height:34px; padding:5px; font-family:var(--font-ui); font-size:8px; letter-spacing:.7px; border:1px solid var(--copper); }
.creator-sheet > button { min-height:34px; padding:5px; font-family:var(--font-ui); font-size:8px; letter-spacing:.7px; border:1px solid var(--copper); }
.creator-type-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.creator-type-grid button { min-width:0; min-height:58px; padding:5px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1px solid var(--copper); background:var(--p6-wash); }
.creator-type-grid button:hover, .creator-type-grid button:focus-visible { color:var(--p9-base); background:var(--shell-deep); }
.creator-type-grid span { font-size:var(--ad-type-icon); }
.creator-type-grid b { font-family:var(--font-ui); font-size:var(--ad-type-micro); overflow-wrap:anywhere; }
.creator-sheet .prebuilt { color:var(--p9-base); background:var(--p2-base); }
.modal-primary { color:var(--p9-base); background:var(--shell-deep); }
.modal-danger { color:var(--p9-base); background:var(--p3-base); }
.modal-cancel { color:var(--p5-wash); background:var(--p6-wash); }
.pool-list { min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.pool-list button { min-height:36px; padding:5px 7px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:var(--p6-wash); border-left:3px solid var(--shell-deep); }
.pool-list button:hover { background:var(--shell-wash); }
.pool-list b { font-family:var(--font-body); font-size:10px; color:var(--p5-base); }
.pool-list span { font-family:var(--font-mono); font-size:7px; color:var(--p5-wash); }

/* ── Compact operator cards — one shell, twelve fills (CREATOR-CONTRACT) ── */
.ex-card {
  flex:none; display:flex; align-items:stretch; gap:6px;
  padding:6px 8px; cursor:pointer;
  background: var(--p9-base); border-bottom:1px solid var(--line-soft);
}
.ex-card:nth-child(even) { background: var(--p6-wash); }
.ex-card:hover { background: var(--shell-wash); }
.ex-card .ex-side {
  width:34px; flex:none; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  background: var(--shell-bg); border:1px solid var(--copper); border-radius:3px;
  padding:3px 0;
}
.ex-card .ex-side-g { font-size:14px; line-height:1; }
.ex-card .ex-side-b {
  font-family:var(--font-mono); font-size:8px; color:var(--copper);
  max-width:32px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ex-card .ex-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ex-card .ex-name {
  font-family:var(--font-body); font-size:11px; color:var(--p5-base);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ex-card .ex-line { display:flex; align-items:baseline; gap:6px; min-width:0; }
.ex-card .ex-line .k {
  flex:none; width:64px; font-family:var(--font-ui); font-size:7px;
  letter-spacing:0.5px; color:var(--p5-wash); text-transform:uppercase;
}
.ex-card .ex-line .v {
  flex:1; min-width:0; font-family:var(--font-mono); font-size:9px;
  color:var(--p5-base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ex-card .ex-line.vac .v { color:var(--p5-wash); font-style:italic; }
.ex-card .ex-add {
  width:22px; flex:none; align-self:center;
  display:flex; align-items:center; justify-content:center; height:22px;
  border:1px solid var(--copper); border-radius:2px;
  font-size:12px; color:var(--copper); background:transparent;
  opacity:0; transition:opacity 0.1s;
}
.ex-card:hover .ex-add { opacity:1; }
.ex-card .ex-gold { color: var(--p8-base); font-size:10px; }

/* ── The 22-block stamp in the detail card ── */
.stamp-grammar {
  font-family:var(--font-mono); font-size:8px; color:var(--p5-wash);
  padding:4px 6px; background:var(--p6-wash); border-radius:2px;
  white-space:nowrap; overflow-x:auto;
}
.stamp-row {
  display:flex; align-items:baseline; gap:8px; min-width:0;
  padding:2px 0; border-bottom:1px dotted var(--line-soft);
}
.stamp-row .stamp-b {
  flex:none; width:88px; font-family:var(--font-ui); font-size:9px; color:var(--p5-base);
}
.stamp-row .stamp-not {
  flex:1; min-width:0; font-family:var(--font-mono); font-size:9px; color:var(--copper);
  white-space:nowrap; overflow-x:hidden; text-overflow:ellipsis;
}
.stamp-strip { display:flex; align-items:baseline; gap:8px; padding-top:4px; }
.stamp-strip .stamp-k {
  flex:none; width:88px; font-family:var(--font-ui); font-size:8px;
  letter-spacing:0.5px; color:var(--p5-wash);
}
.stamp-strip .stamp-v {
  flex:1; font-family:var(--font-body); font-size:9px; color:var(--p5-base); line-height:1.6;
}
.stamp-strip.x .stamp-v { color:var(--p5-wash); text-decoration:line-through; }

/* ── Exercise selection and full-card operator components ── */
.ex-row.selected, .ex-card.selected {
  background:var(--shell-wash);
  box-shadow:inset 3px 0 0 var(--copper);
}
.ex-row:focus-visible, .ex-card:focus-visible {
  outline:2px solid var(--copper); outline-offset:-2px;
}
.ex-row .ex-add, .ex-card .ex-add { opacity:.45; }
.ex-row:hover .ex-add, .ex-card:hover .ex-add,
.ex-row:focus-within .ex-add, .ex-card:focus-within .ex-add { opacity:1; }
.middle.detail-mode .drawer, .middle.detail-mode .split-gut { display:none; }
.exercise-title { padding:2px 0 4px; border-bottom:1px solid var(--line-soft); }
.exercise-title-name {
  font-family:var(--font-hero); font-size:18px; font-weight:700; color:var(--p5-base);
}
.exercise-title-job {
  margin-top:2px; font-family:var(--font-ui); font-size:9px;
  letter-spacing:1px; text-transform:uppercase; color:var(--copper);
}
.detail-items { display:flex; flex-direction:column; gap:2px; }
.detail-action { position:sticky; bottom:0; padding-top:6px; background:var(--p9-base); }
.detail-action .lib-tag { width:100%; padding:8px; text-align:center; }
.exercise-note {
  width:100%; min-height:96px; resize:vertical; padding:8px;
  font-family:var(--font-body); font-size:11px; line-height:1.5;
  color:var(--p5-base); background:var(--p6-wash);
  border:1px solid var(--copper); border-radius:2px; outline:none;
}
.exercise-note:focus { box-shadow:0 0 0 2px var(--p6-wash), 0 0 0 3px var(--copper); }

/* Facio: every exercise shows the same 22-cell canon; compatibility changes. */
.block-stamps { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.block-stamp {
  min-width:0; padding:5px 2px; display:flex; flex-direction:column;
  align-items:center; gap:2px; border:1px solid var(--line-soft); border-radius:2px;
  background:var(--p6-wash);
}
.block-stamp .g { font-size:14px; }
.block-stamp .n {
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-ui); font-size:7px; color:var(--p5-base);
}
.block-stamp.legal { border-color:var(--copper); background:var(--shell-wash); }
.block-stamp.excluded { opacity:.3; filter:grayscale(1); }

/* Specio: articulated Vitruvian mannequin + procedural equipment objects. */
.specio-stage {
  height:230px; position:relative; overflow:hidden; isolation:isolate;
  background:
    linear-gradient(90deg,transparent 49.8%,color-mix(in srgb,var(--copper) 20%,transparent) 50%,transparent 50.2%),
    linear-gradient(180deg,var(--p6-wash),var(--p9-base));
  border:1px solid var(--line-soft); border-radius:2px;
}
.specio-stage::after {
  content:''; position:absolute; left:8%; right:8%; bottom:24px; z-index:0;
  height:1px; background:var(--copper); opacity:.7;
}
.specio-vitruvian { position:absolute; inset:23px 50% auto auto; width:168px; height:168px; translate:50% 0; opacity:.34; z-index:0; }
.specio-circle,.specio-square { position:absolute; display:block; border:1px solid var(--copper); }
.specio-circle { inset:0; border-radius:50%; }
.specio-square { inset:18px 15px 6px; transform:rotate(1deg); }
.specio-vitruvian::before,.specio-vitruvian::after {
  content:''; position:absolute; background:var(--copper); opacity:.4;
}
.specio-vitruvian::before { width:1px; top:0; bottom:0; left:50%; }
.specio-vitruvian::after { height:1px; left:0; right:0; top:52%; }

.specio-rig { width:94px; height:158px; position:absolute; left:50%; top:33px; z-index:4; transform:translateX(-50%); transform-origin:47px 129px; }
.specio-body { position:absolute; inset:0; z-index:3; }
.specio-head { position:absolute; left:36px; top:0; width:23px; height:25px; border-radius:48% 48% 45% 45%; background:var(--shell-bg); border:2px solid var(--p5-base); transform-origin:50% 100%; }
.specio-head::before { content:''; position:absolute; left:4px; right:4px; top:11px; border-top:1px solid var(--p5-base); opacity:.45; }
.specio-neck { position:absolute; left:44px; top:23px; width:7px; height:9px; border-radius:3px; background:var(--p5-base); }
.specio-torso { position:absolute; left:29px; top:30px; width:37px; height:53px; border:2px solid var(--p5-base); border-radius:38% 38% 24% 24%; background:color-mix(in srgb,var(--shell-wash) 78%,transparent); transform-origin:50% 88%; }
.specio-torso::before { content:''; position:absolute; left:50%; top:5px; bottom:6px; border-left:2px solid var(--copper); opacity:.65; }
.specio-torso::after { content:''; position:absolute; left:5px; right:5px; top:17px; border-top:1px solid var(--p5-base); opacity:.4; }
.specio-pelvis { position:absolute; left:34px; top:78px; width:27px; height:16px; border:2px solid var(--p5-base); border-radius:45% 45% 30% 30%; background:var(--shell-bg); }

.specio-limb { position:absolute; width:9px; transform-origin:50% 5px; z-index:2; }
.specio-arm { top:32px; height:66px; }
.specio-arm.left { left:27px; transform:rotate(18deg); }
.specio-arm.right { left:59px; transform:rotate(-18deg); }
.specio-leg { top:87px; height:70px; }
.specio-leg.left { left:37px; transform:rotate(7deg); }
.specio-leg.right { left:50px; transform:rotate(-7deg); }
.specio-bone { position:absolute; left:2px; top:3px; width:6px; border-radius:4px; background:var(--shell-bg); border:1px solid var(--p5-base); }
.specio-arm .proximal { height:31px; }
.specio-leg .proximal { height:35px; }
.specio-joint { position:absolute; left:0; width:10px; height:10px; border:2px solid var(--p5-base); border-radius:50%; background:var(--copper); }
.specio-joint.origin { top:0; }
.specio-distal { position:absolute; left:0; transform-origin:5px 5px; }
.specio-arm .specio-distal { top:29px; height:36px; }
.specio-leg .specio-distal { top:33px; height:40px; }
.specio-distal-bone { top:4px; }
.specio-arm .distal-bone { height:30px; }
.specio-leg .distal-bone { height:34px; }
.specio-joint.middle { top:0; }
.specio-end { position:absolute; display:block; background:var(--p5-base); }
.specio-hand { left:1px; top:31px; width:8px; height:10px; border-radius:50%; }
.specio-foot { left:0; top:35px; width:16px; height:7px; border-radius:5px 8px 3px 3px; }
.specio-limb.right .specio-foot { left:-7px; }
.specio-stage.unilateral .specio-limb.right { opacity:.58; }

.specio-prop { position:absolute; left:50%; top:91px; z-index:6; width:102px; height:18px; transform:translate(-50%,0); pointer-events:none; }
.specio-prop[data-held="none"],.specio-prop[data-held="bodyweight"] { display:none; }
.specio-prop::before,.specio-prop::after,.specio-prop i { content:''; position:absolute; display:block; }
.specio-prop[data-held="barbell"] { top:91px; height:16px; border-top:4px solid var(--p5-base); }
.specio-prop[data-held="barbell"]::before,.specio-prop[data-held="barbell"]::after { width:9px; height:24px; top:-14px; border:3px double var(--p5-base); background:var(--copper); }
.specio-prop[data-held="barbell"]::before { left:5px; }.specio-prop[data-held="barbell"]::after { right:5px; }
.specio-prop[data-held="dumbbells"]::before,.specio-prop[data-held="dumbbells"]::after { width:25px; height:7px; top:6px; border:4px double var(--p5-base); background:var(--copper); }
.specio-prop[data-held="dumbbells"]::before { left:5px; }.specio-prop[data-held="dumbbells"]::after { right:5px; }
.specio-prop[data-held="kettlebell"]::before { left:40px; top:2px; width:22px; height:20px; border:3px solid var(--p5-base); border-radius:50% 50% 45% 45%; background:var(--copper); }
.specio-prop[data-held="kettlebell"]::after { left:44px; top:-7px; width:14px; height:12px; border:3px solid var(--p5-base); border-bottom:0; border-radius:8px 8px 0 0; }
.specio-prop[data-held="ball"]::before,.specio-prop[data-held="load"]::before { left:37px; top:-8px; width:29px; height:29px; border:3px solid var(--p5-base); border-radius:50%; background:var(--copper); }
.specio-prop[data-held="load"]::before { width:37px; left:33px; border-radius:45% 55% 50% 43%; }
.specio-prop[data-held="band"] { top:72px; width:86px; height:68px; border:3px solid var(--p3-base); border-top:0; border-radius:0 0 45% 45%; }
.specio-prop[data-held="cable"] { top:88px; width:80px; border-top:2px dashed var(--p5-base); }
.specio-prop[data-held="rope"] { top:84px; width:94px; height:23px; border-top:5px double var(--p6-base); border-radius:50%; }

.specio-station { position:absolute; inset:0; z-index:1; pointer-events:none; }
.specio-station[data-station="none"] { display:none; }
.specio-station::before,.specio-station::after,.specio-station i { content:''; position:absolute; display:block; }
.specio-station[data-station="bench"]::before { width:116px; height:10px; left:50%; bottom:64px; translate:-50% 0; border:2px solid var(--p5-base); border-radius:3px; background:var(--copper); }
.specio-station[data-station="bench"]::after { width:74px; height:36px; left:50%; bottom:29px; translate:-50% 0; border-left:5px solid var(--p5-base); border-right:5px solid var(--p5-base); }
.specio-station[data-station="box"]::before { width:74px; height:54px; left:50%; bottom:24px; translate:-50% 0; border:3px solid var(--p5-base); background:color-mix(in srgb,var(--copper) 36%,transparent); }
.specio-station[data-station="bar"]::before,.specio-station[data-station="rack"]::before { left:18%; right:18%; top:31px; border-top:5px solid var(--p5-base); }
.specio-station[data-station="bar"]::after,.specio-station[data-station="rack"]::after { left:22%; right:22%; top:31px; bottom:24px; border-left:4px solid var(--p5-base); border-right:4px solid var(--p5-base); }
.specio-station[data-station="machine"]::before,.specio-station[data-station="cable"]::before { width:46px; top:28px; bottom:24px; right:12%; border:4px double var(--p5-base); background:color-mix(in srgb,var(--p6-wash) 52%,transparent); }
.specio-station[data-station="machine"]::after,.specio-station[data-station="cable"]::after { right:calc(12% + 20px); top:39px; bottom:39px; border-left:2px dashed var(--copper); }
.specio-station[data-station="sled"]::before { width:90px; height:27px; left:50%; bottom:24px; translate:-50% 0; border:4px solid var(--p5-base); border-top:0; transform:skewX(-14deg); }
.specio-station[data-station="bike"]::before { width:54px; height:54px; left:50%; bottom:25px; translate:-50% 0; border:5px double var(--p5-base); border-radius:50%; }
.specio-station[data-station="bike"]::after { width:45px; height:42px; left:50%; bottom:51px; border-left:5px solid var(--p5-base); border-top:4px solid var(--p5-base); transform:skewX(-20deg); }
.specio-station[data-station="rower"]::before { width:138px; left:50%; bottom:31px; translate:-50% 0; border-top:6px double var(--p5-base); }
.specio-station[data-station="rower"]::after { width:37px; height:24px; left:31%; bottom:37px; border:3px solid var(--p5-base); transform:skewX(-17deg); }
.specio-station[data-station="bars"]::before { width:88px; height:66px; left:50%; top:64px; translate:-50% 0; border-left:5px solid var(--p5-base); border-right:5px solid var(--p5-base); }
.specio-station[data-station="rings"]::before,.specio-station[data-station="rings"]::after { width:20px; height:25px; top:63px; border:3px solid var(--p5-base); border-radius:50%; }
.specio-station[data-station="rings"]::before { left:34%; }.specio-station[data-station="rings"]::after { right:34%; }

.specio-hud { position:absolute; left:7px; right:7px; top:6px; z-index:8; display:flex; justify-content:space-between; gap:8px; pointer-events:none; }
.specio-hud span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:var(--ad-type-micro); color:var(--p5-wash); }
.specio-equipment { text-align:right; }
.specio-toggle { position:absolute; right:7px; bottom:31px; z-index:9; width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--copper); background:var(--p9-base); font-family:var(--font-ui); font-size:var(--ad-type-small); }
.specio-phase { position:absolute; left:8%; right:8%; bottom:12px; z-index:8; height:3px; background:var(--line-soft); overflow:hidden; }
.specio-phase i { display:block; width:100%; height:100%; transform-origin:left; background:var(--shell-deep); }
.specio-stage.paused .specio-phase i { opacity:.35; }

/* An isolated Specio operator card gives the demonstration the visual weight
   of a video player while retaining the Archideck's native diagram language. */
.lib-detail.specio-detail .motion-detail-section { gap:6px; }
.lib-detail.specio-detail .motion-detail-section .specio-stage { height:330px; flex:none; }
.lib-detail.specio-detail .motion-detail-section .specio-rig { top:58px; scale:1.34; transform-origin:top center; }
.lib-detail.specio-detail .motion-detail-section .specio-vitruvian { width:224px; height:224px; top:42px; }

/* With no active exercise, Specio becomes a direct-manipulation fidget rig. */
.lib-detail.specio-playground { overflow:hidden; }
.specio-playground-body { min-height:0; overflow:hidden; }
.specio-playground-body > .specio-stage { min-height:300px; height:auto; flex:1; }
.specio-stage.playground .specio-rig { top:62px; scale:1.48; transform-origin:top center; }
.specio-stage.playground .specio-vitruvian { width:248px; height:248px; top:43px; opacity:.4; }
.specio-stage.playground [data-specio-control] { cursor:grab; touch-action:none; user-select:none; }
.specio-stage.playground [data-specio-control]:focus-visible { outline:2px solid var(--copper); outline-offset:3px; }
.specio-stage.playground .specio-joint { z-index:10; box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 28%,transparent); }
.specio-stage.playground .specio-joint::after,
.specio-stage.playground .specio-end::after {
  content:''; position:absolute; inset:-9px; border-radius:50%;
}
.specio-stage.playground .specio-head,
.specio-stage.playground .specio-torso,
.specio-stage.playground .specio-pelvis { box-shadow:0 0 0 1px color-mix(in srgb,var(--copper) 55%,transparent); }
.specio-stage.playground .active-anchor { cursor:grabbing; background:var(--p3-base); box-shadow:0 0 0 5px color-mix(in srgb,var(--p3-base) 28%,transparent); }
.specio-stage.playground.dragging { cursor:grabbing; }
.specio-playground-guide {
  position:absolute; left:8%; right:8%; bottom:13px; z-index:8;
  font-family:var(--font-mono); font-size:var(--ad-type-micro); color:var(--p5-wash);
  text-align:center; letter-spacing:.4px;
}
.specio-playground-copy {
  flex:none; font-family:var(--font-body); font-size:var(--ad-type-small);
  line-height:var(--ad-leading-copy); color:var(--p5-base);
}

.specio-stage.compact { width:68px; height:76px; border:0; border-radius:0; background:transparent; overflow:visible; }
.specio-stage.compact::after { left:4px; right:4px; bottom:5px; }
.specio-stage.compact .specio-vitruvian { width:64px; height:64px; top:4px; opacity:.28; }
.specio-stage.compact .specio-rig { top:5px; scale:.36; transform-origin:top center; }
.specio-stage.compact .specio-prop { top:26px; scale:.36; transform-origin:center; }
.specio-stage.compact .specio-station { scale:.34; transform-origin:center; inset:-83px; }
.ex-card.specio-card { min-height:88px; }
.ex-card.specio-card .specio-side { width:72px; padding:0; border:0; background:transparent; }

@media (prefers-reduced-motion:reduce) {
  .dial-lock.pending { animation:none !important; }
}

/* ══ RESPONSIVE READABILITY ══
   There is one measured 600×1400 shell. ◑ changes the type treatment, not the
   instrument geometry. Reader type is boosted before the complete shell scales
   to a phone width, so it stays legible and wraps downward like a document. */
.deck {
  --ad-type-adjust:0px;
  --ad-type-micro:calc(11px + var(--ad-type-adjust));
  --ad-type-small:calc(13px + var(--ad-type-adjust));
  --ad-type-body:calc(16px + var(--ad-type-adjust));
  --ad-type-control:calc(17px + var(--ad-type-adjust));
  --ad-type-heading:calc(21px + var(--ad-type-adjust));
  --ad-type-icon:calc(22px + var(--ad-type-adjust));
  --ad-leading-tight:1.2;
  --ad-leading-copy:1.5;
}
.deck[data-ui-mode="mobile"] {
  --ad-type-micro:calc(15px + var(--ad-type-adjust));
  --ad-type-small:calc(17px + var(--ad-type-adjust));
  --ad-type-body:calc(20px + var(--ad-type-adjust));
  --ad-type-control:calc(21px + var(--ad-type-adjust));
  --ad-type-heading:calc(25px + var(--ad-type-adjust));
  --ad-type-icon:calc(27px + var(--ad-type-adjust));
}

/* Shared type ladder: metadata → secondary → reading → control → heading. */
.rev-env, .rev-clock, .rev-tail,
.slot .fam, .stat .l,
.archive-head small, .archive-card span, .archive-foot span,
.ha-eyebrow, .ha-store small, .ha-section-label,
.lib-tag, .ex-row .ex-meta,
.lib-detail .detail-label,
.workout-detail .detail-head .ch-zip,
.twelve-row .o, .twelve-row .v,
.modal-sheet header small, .pool-list span,
.ex-card .ex-side-b, .ex-card .ex-line .k,
.stamp-grammar, .stamp-strip .stamp-k,
.exercise-title-job, .block-stamp .n {
  font-size:var(--ad-type-micro);
  line-height:var(--ad-leading-tight);
}
.tline, .chip, .ch-order,
.slot .not, .stat .v,
.archive-card b, .archive-card small,
.ha-prompt, .ha-room-purpose,
.lib-count, .ex-row .ex-fam, .ex-row .ex-badge,
.lib-detail .detail-cell .detail-label,
.lib-detail .detail-cell .detail-text,
.workout-detail-notation,
.modal-sheet p, .pool-list b,
.ex-card .ex-side-b, .ex-card .ex-line .v,
.stamp-row .stamp-b, .stamp-row .stamp-not,
.stamp-strip .stamp-v, .block-stamp .n {
  font-size:var(--ad-type-small);
  line-height:1.35;
}
.cfield,
.ch-zip, .slot .nm,
.archive-head > b,
.lib-search, .ex-row .ex-name,
.lib-detail .detail-text,
.workout-detail .detail-head .ch-type,
.modal-sheet header h3,
.ex-card .ex-name,
.exercise-note {
  font-size:var(--ad-type-body);
  line-height:var(--ad-leading-copy);
}
.ch-type, .archive-head h2,
.ha-head h2, .exercise-title-name {
  font-size:var(--ad-type-heading);
  line-height:var(--ad-leading-tight);
}
.ckey, .slot .blk, .pill,
.penny, .zkey, .reel .face,
.dial-lock, .ex-row .ex-add, .ex-card .ex-add,
.block-stamp .g, .twelve-row .g {
  font-size:var(--ad-type-icon);
  line-height:1;
}

/* The Almanac is prose-heavy, so normalize its inherited microtype as a unit. */
.deck .almanac :is(small, dt, .ha-eyebrow, .ha-room small, .ha-block small, .ha-question small, .ha-block-tags span) {
  font-size:var(--ad-type-micro) !important;
  line-height:1.3;
}
.deck .almanac :is(p, dd, label, input, select, textarea, blockquote, .ha-prompt, .ha-room-purpose, .ha-question, .ha-room b, .ha-block b) {
  font-size:var(--ad-type-small) !important;
  line-height:var(--ad-leading-copy);
}
.deck .almanac :is(button, .ha-primary, .ha-secondary, .ha-hero-row strong, .ha-entries b) {
  font-size:var(--ad-type-body) !important;
  line-height:1.25;
}
.deck .almanac :is(h2, h3) {
  font-size:var(--ad-type-heading) !important;
  line-height:1.2;
}

/* Utilitas carries prose and settings, so it uses the same readable ladder on
   desktop instead of falling back to the original 6–9px instrument labels. */
.deck .utilities :is(
  .util-head small,.util-status small,.util-metric-row small,.util-callout small,
  .util-tier > span,.util-field > span,.util-app > i,.util-app > em
) { font-size:var(--ad-type-micro); line-height:var(--ad-leading-tight); }
.deck .utilities :is(
  .util-app > b,.util-app > small,.util-callout p,.util-tier p,
  .util-choice-grid small,.util-toggle small,.util-account > small
) { font-size:var(--ad-type-small); line-height:var(--ad-leading-copy); }
.deck .utilities :is(
  .util-status b,.util-metric-row b,.util-callout > b,.util-choice-grid b,
  .util-toggle b,.util-equipment b,.util-account > b,input,select
) { font-size:var(--ad-type-body); line-height:1.3; }
.deck .utilities .util-head h2 { font-size:var(--ad-type-heading); line-height:1.2; }
.deck .utilities :is(.util-primary,.util-secondary,.util-danger,.util-mode button) {
  font-size:var(--ad-type-control); line-height:1.25;
}
.deck .hand-key { font-size:14px; }

/* Reader mode keeps the exact shell and gives only the side navigation a
   modest target increase. Everything else reflows inside the measured bands. */
.deck[data-ui-mode="mobile"] {
  width:var(--ad-frame-w);
  height:var(--ad-frame-h);
  min-height:var(--ad-frame-h);
  transform:scale(var(--scale,1));
  overflow:hidden;
  gap:var(--ad-third-gap);
  padding:var(--ad-pad-top) var(--ad-pad-side) var(--ad-pad-bottom);

  --ad-slider-w:32px;
  --ad-pill-w:32px;
  --ad-pill-h:36px;
  --ad-pill-gap:16px;
  --ad-console-row-h:32px;
  --ad-console-key-w:32px;
}
.deck[data-ui-mode="mobile"] .upper,
.deck[data-ui-mode="mobile"] .middle,
.deck[data-ui-mode="mobile"] .lower { width:100%; }
.deck[data-ui-mode="mobile"] .terminal {
  padding:10px 8px; gap:6px; overflow-y:auto; overscroll-behavior:contain;
}
.deck[data-ui-mode="mobile"] .tline {
  min-height:22px; display:grid; grid-template-columns:130px minmax(0,1fr);
  align-items:start;
}
.deck[data-ui-mode="mobile"] .tline .k { width:auto; }
.deck[data-ui-mode="mobile"] .revelator { gap:8px; padding:0 9px; }
.deck[data-ui-mode="mobile"] .rev-env { display:none; }
.deck[data-ui-mode="mobile"] .console-row { align-items:stretch; }
.deck[data-ui-mode="mobile"] .ckey { min-width:32px; min-height:32px; }
.deck[data-ui-mode="mobile"] .cfield { padding:0 10px; }
.deck[data-ui-mode="mobile"] .chip { font-size:var(--ad-type-micro); }

.deck[data-ui-mode="mobile"] .parallel-tools { padding:3px 0; }
.deck[data-ui-mode="mobile"] .hand-key { border-radius:12px; font-size:var(--ad-type-icon); }
.deck[data-ui-mode="mobile"] .slider { min-height:0; border-radius:14px; }
.deck[data-ui-mode="mobile"] .slider .track { top:14px; bottom:14px; width:3px; }
.deck[data-ui-mode="mobile"] .slider .knob { width:20px; height:20px; }
.deck[data-ui-mode="mobile"] .slider.has-active .knob { width:24px; height:24px; }
.deck[data-ui-mode="mobile"] .card,
.deck[data-ui-mode="mobile"] .drawer,
.deck[data-ui-mode="mobile"] .library,
.deck[data-ui-mode="mobile"] .utilities,
.deck[data-ui-mode="mobile"] .almanac,
.deck[data-ui-mode="mobile"] .archive { min-height:0; }
.deck[data-ui-mode="mobile"] .card-head {
  height:auto; min-height:var(--ad-card-header-h); gap:4px 10px; padding:5px 9px;
  flex-wrap:wrap; align-content:center;
}
.deck[data-ui-mode="mobile"] .ch-zip,
.deck[data-ui-mode="mobile"] .ch-type,
.deck[data-ui-mode="mobile"] .ch-order { min-width:0; }
.deck[data-ui-mode="mobile"] .ch-type { flex:1 1 55%; text-align:center; letter-spacing:1px; }
.deck[data-ui-mode="mobile"] .stack { overscroll-behavior:contain; }
.deck[data-ui-mode="mobile"] .slot { flex:none; min-height:64px; gap:7px; padding:7px; }
.deck[data-ui-mode="mobile"] .slot.draft { min-height:76px; }
.deck[data-ui-mode="mobile"] .slot.draft:has(.slot-members) { min-height:94px; }
.deck[data-ui-mode="mobile"] .slot .blk { width:44px; height:44px; }
.deck[data-ui-mode="mobile"] .slot .sub {
  min-width:0; flex-direction:column; align-items:flex-start; gap:2px;
}
.deck[data-ui-mode="mobile"] .slot .fam,
.deck[data-ui-mode="mobile"] .slot .not { min-width:0; max-width:none; width:100%; text-align:left; }
.deck[data-ui-mode="mobile"] .slot-lock,
.deck[data-ui-mode="mobile"] .slot .rm { width:44px; height:44px; margin-left:1px; font-size:16px; }
.deck[data-ui-mode="mobile"] .slot-members { flex-wrap:wrap; overflow:visible; }
.deck[data-ui-mode="mobile"] .slot-member { min-height:28px; max-width:100%; padding:4px 6px; font-size:var(--ad-type-micro); }
.deck[data-ui-mode="mobile"] .card-foot { padding:0 9px; }

/* Split drawers become a readable overlay instead of two phone-width slivers. */
.deck[data-ui-mode="mobile"] .middle.split .split-gut { display:none; }
.deck[data-ui-mode="mobile"] .middle.split .drawer {
  position:absolute; top:0; bottom:0; left:calc(var(--ad-slider-w) + var(--ad-gutter-a));
  right:calc(var(--ad-pill-w) + var(--ad-gutter-b)); z-index:12;
  width:auto; background:var(--ink-dim);
}
.deck[data-ui-mode="mobile"] .pill { border-radius:14px; }

.deck[data-ui-mode="mobile"] .lib-search { height:40px; padding:0 10px; }
.deck[data-ui-mode="mobile"] .lib-home { width:44px; height:44px; font-size:20px; }
.deck[data-ui-mode="mobile"] .lib-filters { height:44px; gap:6px; padding:2px 5px; }
.deck[data-ui-mode="mobile"] .lib-tag { min-height:34px; padding:6px 9px; }
.deck[data-ui-mode="mobile"] .ex-row { min-height:64px; gap:8px; padding:7px 8px; }
.deck[data-ui-mode="mobile"] .ex-row .ex-fam { width:40px; height:40px; }
.deck[data-ui-mode="mobile"] .ex-row .ex-add,
.deck[data-ui-mode="mobile"] .ex-card .ex-add { width:44px; height:44px; opacity:1; }
.deck[data-ui-mode="mobile"] .ex-card { min-height:82px; padding:8px; }
.deck[data-ui-mode="mobile"] .ex-card .ex-side { width:44px; }
.deck[data-ui-mode="mobile"] .ex-card.specio-card { min-height:100px; }
.deck[data-ui-mode="mobile"] .ex-card.specio-card .specio-side { width:76px; }
.deck[data-ui-mode="mobile"] .specio-stage:not(.compact) { height:260px; }
.deck[data-ui-mode="mobile"] .specio-toggle { width:44px; height:44px; }
.deck[data-ui-mode="mobile"] .lib-detail .detail-head { min-height:52px; }
.deck[data-ui-mode="mobile"] .lib-detail .detail-close,
.deck[data-ui-mode="mobile"] .workout-detail .detail-close { width:44px; height:44px; font-size:18px; }
.deck[data-ui-mode="mobile"] .lib-detail .detail-grid { grid-template-columns:1fr; }
.deck[data-ui-mode="mobile"] .block-stamps { grid-template-columns:repeat(3,1fr); }
.deck[data-ui-mode="mobile"] .detail-action .lib-tag { min-height:44px; }

.deck[data-ui-mode="mobile"] .archive-head,
.deck[data-ui-mode="mobile"] .ha-head { min-height:58px; height:auto; }
.deck[data-ui-mode="mobile"] .archive-card { min-height:76px; }
.deck[data-ui-mode="mobile"] .archive-card > button:first-child { padding:9px 10px; }
.deck[data-ui-mode="mobile"] .archive-trash { width:48px; }
.deck[data-ui-mode="mobile"] .archive-foot { height:44px; }

.deck[data-ui-mode="mobile"] .ha-scroll { padding:10px; }
.deck[data-ui-mode="mobile"] .ha-primary,
.deck[data-ui-mode="mobile"] .ha-secondary,
.deck[data-ui-mode="mobile"] .ha-back,
.deck[data-ui-mode="mobile"] .ha-add-form button { min-height:44px; padding:9px 12px; }
.deck[data-ui-mode="mobile"] .ha-form input,
.deck[data-ui-mode="mobile"] .ha-form select,
.deck[data-ui-mode="mobile"] .ha-profile-edit input,
.deck[data-ui-mode="mobile"] .ha-add-form input,
.deck[data-ui-mode="mobile"] .ha-question select { min-height:44px; padding:8px 10px; }
.deck[data-ui-mode="mobile"] .ha-two,
.deck[data-ui-mode="mobile"] .ha-block-grid { grid-template-columns:1fr; }
.deck[data-ui-mode="mobile"] .ha-color-grid { grid-template-columns:repeat(2,1fr); }
.deck[data-ui-mode="mobile"] .ha-color,
.deck[data-ui-mode="mobile"] .ha-toggle { min-height:52px; }
.deck[data-ui-mode="mobile"] .ha-room-grid { grid-template-columns:repeat(2,1fr); gap:7px; }
.deck[data-ui-mode="mobile"] .ha-room { min-height:70px; padding:7px; }
.deck[data-ui-mode="mobile"] .ha-block textarea { min-height:96px; padding:9px; }

.deck[data-ui-mode="mobile"] .util-head { min-height:60px; padding:8px; }
.deck[data-ui-mode="mobile"] .util-head small,
.deck[data-ui-mode="mobile"] .util-status small,
.deck[data-ui-mode="mobile"] .util-metric-row small,
.deck[data-ui-mode="mobile"] .util-callout small,
.deck[data-ui-mode="mobile"] .util-tier > span,
.deck[data-ui-mode="mobile"] .util-field > span { font-size:var(--ad-type-micro); }
.deck[data-ui-mode="mobile"] .util-head h2 { font-size:var(--ad-type-heading); }
.deck[data-ui-mode="mobile"] .util-back { width:44px; height:44px; font-size:20px; }
.deck[data-ui-mode="mobile"] .util-scroll { padding:8px 7px; }
.deck[data-ui-mode="mobile"] .util-status { grid-template-columns:1fr; }
.deck[data-ui-mode="mobile"] .util-status > div { min-height:46px; padding:7px; }
.deck[data-ui-mode="mobile"] .util-status b,
.deck[data-ui-mode="mobile"] .util-metric-row b { font-size:var(--ad-type-small); }
.deck[data-ui-mode="mobile"] .util-grid { gap:7px; }
.deck[data-ui-mode="mobile"] .util-app { min-height:130px; padding:9px 8px; grid-template-columns:48px 1fr; gap:3px 7px; }
.deck[data-ui-mode="mobile"] .util-app > span { width:48px; height:48px; font-size:var(--ad-type-icon); }
.deck[data-ui-mode="mobile"] .util-app > b { font-size:var(--ad-type-small); }
.deck[data-ui-mode="mobile"] .util-app > small { font-size:var(--ad-type-small); line-height:1.35; }
.deck[data-ui-mode="mobile"] .util-app > i,
.deck[data-ui-mode="mobile"] .util-app > em { font-size:10px; }
.deck[data-ui-mode="mobile"] .util-callout > b { font-size:var(--ad-type-body); }
.deck[data-ui-mode="mobile"] .util-callout p,
.deck[data-ui-mode="mobile"] .util-tier p,
.deck[data-ui-mode="mobile"] .util-choice-grid small,
.deck[data-ui-mode="mobile"] .util-toggle small { font-size:var(--ad-type-micro); }
.deck[data-ui-mode="mobile"] .util-primary,
.deck[data-ui-mode="mobile"] .util-secondary,
.deck[data-ui-mode="mobile"] .util-danger,
.deck[data-ui-mode="mobile"] .util-mode button { min-height:44px; font-size:var(--ad-type-control); }
.deck[data-ui-mode="mobile"] .util-choice-grid { grid-template-columns:1fr; }
.deck[data-ui-mode="mobile"] .util-choice-grid > button { min-height:92px; }
.deck[data-ui-mode="mobile"] .util-choice-grid b { font-size:var(--ad-type-small); }
.deck[data-ui-mode="mobile"] .util-form.two { grid-template-columns:1fr; }
.deck[data-ui-mode="mobile"] .util-field input,
.deck[data-ui-mode="mobile"] .util-field select { min-height:44px; font-size:var(--ad-type-small); }
.deck[data-ui-mode="mobile"] .util-toggle { min-height:62px; }
.deck[data-ui-mode="mobile"] .util-toggle b,
.deck[data-ui-mode="mobile"] .util-equipment b,
.deck[data-ui-mode="mobile"] .util-account > b { font-size:var(--ad-type-small); }
.deck[data-ui-mode="mobile"] .util-toggle i { min-width:44px; padding:6px; font-size:var(--ad-type-micro); }
.deck[data-ui-mode="mobile"] .util-equipment { min-height:52px; }
.deck[data-ui-mode="mobile"] .util-account { min-height:62px; }
.deck[data-ui-mode="mobile"] .util-account > small { font-size:var(--ad-type-micro); }

.deck[data-ui-mode="mobile"] .creator-modal { padding:12px 38px; }
.deck[data-ui-mode="mobile"] .modal-sheet { padding:12px; gap:10px; }
.deck[data-ui-mode="mobile"] .modal-sheet header button,
.deck[data-ui-mode="mobile"] .program-sheet > button,
.deck[data-ui-mode="mobile"] .creator-sheet > button { min-height:44px; }
.deck[data-ui-mode="mobile"] .creator-type-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.deck[data-ui-mode="mobile"] .creator-type-grid button { min-height:72px; }
.deck[data-ui-mode="mobile"] .pool-list button { min-height:54px; padding:8px 9px; }
.deck[data-ui-mode="mobile"] .workout-detail .detail-head { min-height:52px; }
.deck[data-ui-mode="mobile"] .twelve-row { min-height:40px; grid-template-columns:28px 58px 1fr; padding:5px 6px; }

.deck[data-ui-mode="mobile"] .axis-row { gap:0; }
.deck[data-ui-mode="mobile"] .penny { width:var(--ad-penny-w); min-width:0; height:var(--ad-penny-h); flex:none; }
.deck[data-ui-mode="mobile"] .instruments { gap:0; }
.deck[data-ui-mode="mobile"] .zpad {
  width:var(--ad-zpad-w); height:var(--ad-zpad-w);
  grid-template-columns:repeat(3,var(--ad-zpad-key));
  grid-template-rows:repeat(3,var(--ad-zpad-key)); gap:var(--ad-zpad-gap);
}
.deck[data-ui-mode="mobile"] .zkey { min-width:0; min-height:0; }
.deck[data-ui-mode="mobile"] .zip-dial { width:var(--ad-dial-w); height:var(--ad-instr-h); }
.deck[data-ui-mode="mobile"] .reel { border-width:4px; }
.deck[data-ui-mode="mobile"] .reel .face { font-size:var(--ad-type-icon); }
.deck[data-ui-mode="mobile"] .reel .face.minor { font-size:var(--ad-type-small); }
.deck[data-ui-mode="mobile"] .reel .face.word { margin:0 2px; font-size:var(--ad-type-micro); letter-spacing:0; }
.deck[data-ui-mode="mobile"] .reel .face.word.minor { font-size:10px; }
.deck[data-ui-mode="mobile"] .dial-lock { width:34px; height:34px; font-size:var(--ad-type-small); }

/* Document-like reader flow: meaningful text gains lines instead of being
   pushed offscreen or replaced with ellipses. Hardware faces stay concise. */
.deck :is(
  .tline .k,.tline .v,
  .ch-zip,.ch-type,.ch-order,
  .slot .nm,.slot .fam,.slot .not,.slot-member,
  .util-head h2,.util-status b,.util-metric-row b,.util-app > b,
  .archive-card b,.archive-card small,
  .ha-room b,.ha-room small,
  .ex-row .ex-name,.ex-row .ex-meta,
  .ex-card .ex-name,.ex-card .ex-line .v,
  .twelve-row .v,.modal-sheet header h3
) {
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:normal;
}
.deck .card-head {
  height:auto; min-height:var(--ad-card-header-h); flex-wrap:wrap;
  align-content:center; padding-block:4px;
}
.deck .slot { min-height:56px; overflow:visible; }
.deck .slot .sub { flex-wrap:wrap; align-items:flex-start; }
.deck .slot .fam { flex:1 1 180px; }
.deck .slot .not { flex:1 1 auto; text-align:right; }
.deck .slot-members { flex-wrap:wrap; }
.deck[data-ui-mode="mobile"] .revelator {
  height:calc(var(--ad-revelator-h) + 8px); min-height:var(--ad-revelator-h);
  grid-template-columns:max-content minmax(0,1fr) max-content;
  align-content:center; padding-block:4px;
}
.deck[data-ui-mode="mobile"] .rev-zip,
.deck[data-ui-mode="mobile"] .rev-tail,
.deck[data-ui-mode="mobile"] .rev-clock { font-size:var(--ad-type-micro); line-height:1; }
.deck[data-ui-mode="mobile"] .terminal { overflow-y:auto; }
.deck[data-ui-mode="mobile"] .slot { overflow:visible; }
.deck[data-ui-mode="mobile"] .ex-row { height:auto; align-items:flex-start; }
.deck[data-ui-mode="mobile"] .ex-row .ex-sub { flex-wrap:wrap; align-items:flex-start; }
.deck[data-ui-mode="mobile"] .util-app { height:auto; }
.deck[data-ui-mode="mobile"] .ha-room { height:auto; align-items:start; }
.deck[data-ui-mode="mobile"] .twelve-row { height:auto; align-items:start; }

@media (max-width:380px) {
  .deck[data-ui-mode="mobile"] .rev-env { display:none; }
  .deck[data-ui-mode="mobile"] .ch-order { max-width:72px; }
  .deck[data-ui-mode="mobile"] .creator-modal { padding:10px 34px; }
}
@media (pointer:coarse) {
  .deck button, .deck input, .deck select, .deck textarea { -webkit-tap-highlight-color:transparent; }
  .deck button { touch-action:manipulation; }
}

/* Persisted accessibility settings apply in either display mode. */
.deck[data-text-scale="large"] {
  --ad-type-adjust:1px;
}
.deck[data-text-scale="xlarge"] {
  --ad-type-adjust:2px;
}
.deck[data-contrast="high"] :is(.card,.drawer,.library,.utilities,.almanac,.archive,.terminal,.zip-dial,.cfield,.ckey) {
  border-color:var(--ink); border-width:3px;
}
.deck[data-contrast="high"] :is(button,input,select,textarea):focus-visible { outline:3px solid var(--p8-base); outline-offset:2px; }
.deck[data-reduce-motion="true"] *,
.deck[data-reduce-motion="true"] *::before,
.deck[data-reduce-motion="true"] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
.deck[data-target-size="standard"][data-ui-mode="mobile"] :is(.ckey,.util-back,.lib-home,.ex-add,.slot-lock,.slot .rm) { width:40px; height:40px; min-width:40px; min-height:40px; }