/* Anatomy under the template's house system (ART.md; Template/HOUSE.md).

   The screen is a plate and its caption. The plate is the body in the colors data/anatomy.json gives
   it, the same in both themes, on the theme's own ground (white in light, HOUSE.md section 12); at its
   left edge stands the Levels, this body's vertebrae drawn as a rule. Under it the caption band holds
   the line that reads the Levels (the credits are in About), and the dissection band holds the keys
   that take the body apart. One face, no accent color, no glass, no shadows, no gradient but the
   selection tracer. Nothing here is fetched, and there is no external address in this file. */

@font-face {
  font-family: 'Ysabeau Office';
  src: url(fonts/ysabeau-office-gw.woff2) format('woff2');
  font-weight: 400 650;
  font-display: block;
}

:root {
  --page: #ffffff;            /* header, caption band, dissection band, the plate itself */
  --sheet: #f6f9fa;           /* key plates, the card, the status plate, About, Find, notices */
  --ink: #0f1c23;
  --ink-2: #45555d;
  --ink-3: #5b6a72;
  --line: #c9d4d8;
  --line-strong: #74858c;
  --draw: cubic-bezier(0.2, 0, 0, 1);
  --sheet-in: cubic-bezier(0.32, 0.72, 0, 1);
  --face: 'Ysabeau Office', system-ui, -apple-system, sans-serif;
  /* this app's own, pasted from tools/art/palette.py --json (ART.md section 2) */
  --plate: #ffffff;
  --level: #15121c;
  --level-halo: rgba(255, 255, 255, 0.85);
  --select-halo: rgba(255, 255, 255, 0.90);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #141d21;
    --sheet: #1c272c;
    --ink: #e6edee;
    --ink-2: #a3b1b6;
    --ink-3: #8b9a9f;
    --line: #2a373c;
    --line-strong: #64757b;
    --plate: #141d21;
    --level: #f4f2fb;
    --level-halo: rgba(20, 29, 33, 0.85);
    --select-halo: rgba(20, 29, 33, 0.90);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-synthesis: none; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  font: 400 13.5px/1.35 var(--face);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
/* the column: header, plate, caption band, the Layers sheet when it is open, the dissection band */
body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(200px, 1fr) auto minmax(0, max-content) auto;
  height: 100vh;
  height: 100dvh;
}
body.has-layers { grid-template-rows: auto minmax(260px, 1fr) auto minmax(0, max-content) auto; }

button, input { font: inherit; color: inherit; }
button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.row :focus-visible { outline-offset: -2px; } /* the ring inside a row that scrolls sideways; family-wide, 2026-10-02 */
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg .fill { fill: currentColor; stroke: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
code { font: inherit; }

/* a word key, in the units key's form: a frame, 28 px tall, a 44 px hit */
.wordkey {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.wordkey::before { content: ''; position: absolute; inset: -9px -1px; }
.wordkey:active { background: color-mix(in srgb, currentColor 22%, transparent); }
.wordkey:disabled { border-color: transparent; padding: 0; font-weight: 400; color: var(--ink-3); }
.wordkey[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 12%, transparent); }
/* a text key: words, a 44 px hit, no frame */
.textkey { min-width: 44px; height: 44px; padding: 0 8px; font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.textkey:active { background: color-mix(in srgb, currentColor 22%, transparent); border-radius: 4px; }
/* a text key that is on: the house's 28 px on-plate of ink at 12 % behind its word */
.textkey[aria-pressed] { position: relative; isolation: isolate; }
.textkey[aria-pressed="true"]::before { content: ''; position: absolute; inset: 8px 2px; z-index: -1; border-radius: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); }

/* ── header: the name and the word keys, the stamp while loading, the row of words ── */

.head {
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 44px;
  column-gap: 12px;
  padding: calc(6px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  background: var(--page);
}
.head h1 { grid-area: 1 / 1; font-size: 15px; font-weight: 650; line-height: 22px; }
.head:has(#stamp-home[hidden]) h1 { grid-row: 1 / 3; align-self: center; }
/* the line hidden: the keys keep a 44 px hit in a 39 px band, up into the top pad, never down into the row */
.head:has(#stamp-home[hidden]) .hkeys { margin: 5px 0 6px; }
.head:has(#stamp-home[hidden]) .hkeys .wordkey::before { inset: -13px -1px -7px; }
.stamp-home { grid-area: 2 / 1; min-width: 0; padding-bottom: 6px; }
.stamp { position: relative; display: block; max-width: 100%; text-align: left; font-size: 11.5px; line-height: 16px; color: var(--ink-2); }
/* the stamp opens About: its hit runs up over the name and down into the gap, 44 px in all */
.stamp::before { content: ''; position: absolute; inset: -22px 0 -6px 0; }
/* in focus mode they head the caption: the hits run down over the caption, never up into the plate */
.caption > .stamp-home { position: relative; z-index: 1; padding-bottom: 2px; }
.caption > .stamp-home .stamp::before { inset: -6px 0 -22px 0; }
.caption > .wordkey { display: block; margin: 2px 0 8px; }
.hkeys { grid-area: 1 / 2 / 3 / 3; align-self: center; display: flex; gap: 8px; }

.row {
  grid-area: 3 / 1 / 4 / 3;
  display: flex;
  align-items: stretch;
  min-width: 0;
  margin: 0 -8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding: 0 16px;
  -webkit-overflow-scrolling: touch;
}
.row::-webkit-scrollbar { display: none; }
.words { display: flex; flex: 0 0 auto; }
.divider { flex: 0 0 1px; align-self: center; height: 14px; margin: 0 4px; background: var(--line); }
.words button {
  position: relative;
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
/* the chosen word: weight 620 and a tracer under it, drawn from its tail to its head */
.words button[aria-checked="true"] { color: var(--ink); font-weight: 620; }
.words button[aria-checked="true"]::after, .tree .selected .p-name::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 9px;
  height: 4px;
  background:
    radial-gradient(circle at calc(100% - 2px) 50%, var(--ink) 1.9px, transparent 2.1px),
    linear-gradient(90deg, transparent, var(--ink) calc(100% - 3px), transparent calc(100% - 3px)) 0 1px / 100% 2px no-repeat;
  animation: tracer-in 160ms var(--draw);
}
@keyframes tracer-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.words button:active { color: var(--ink); }

/* ── the plate ── */

.plate {
  grid-row: 2;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--plate);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#view { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
/* the Levels' own canvas: the plate's left 52 px, inside the left safe area, taking no touch */
#levels { position: absolute; top: 0; bottom: 0; left: env(safe-area-inset-left); width: 52px; height: 100%; pointer-events: none; z-index: 1; }

/* the key column: plates, no shadow; each key a full 44 px hit, the plate 36 px wide */
.keys {
  position: absolute;
  top: 8px;
  right: calc(8px + env(safe-area-inset-right));
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.keyplate { width: 38px; border: 1px solid var(--line); border-radius: 6px; background: var(--sheet); }
.keyplate button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 -4px;
  color: var(--ink-2);
}
.keyplate button + button::after { content: ''; position: absolute; left: 4px; right: 4px; top: 0; height: 1px; background: var(--line); }
.keyplate button svg { position: relative; }
.keyplate button::before { content: ''; position: absolute; inset: 8px; border-radius: 4px; }
.keyplate button:active::before { background: color-mix(in srgb, currentColor 22%, transparent); }
/* a plate too short for the column (a phone on its side): the keys run as a row along its top */
.keys-row .keys { flex-direction: row; }
.keys-row .keyplate { display: flex; width: auto; height: 38px; }
.keys-row .keyplate button { margin: -4px 0; }
.keys-row .keyplate button + button::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }

/* the ghost key: no plate, a halo under the mark so it reads over any part of the body */
.ghost {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: 4;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .72;
  animation: ghost-in 200ms var(--draw);
}
.ghost:focus-visible, .ghost:active { opacity: 1; }
.ghost .halo { stroke: rgba(246, 249, 250, .6); stroke-width: 3.4; }
.ghost .halo circle { fill: rgba(246, 249, 250, .6); }
.ghost .mark { stroke: #0f1c23; stroke-width: 1.4; }
.ghost .mark .fill { fill: #0f1c23; }
@media (prefers-color-scheme: dark) {
  /* 0.70 where the house has 0.45: the body's white highlights need it (ART.md section 2) */
  .ghost .halo { stroke: rgba(10, 16, 19, .7); }
  .ghost .halo circle { fill: rgba(10, 16, 19, .7); }
  .ghost .mark { stroke: #f2f4f1; }
  .ghost .mark .fill { fill: #f2f4f1; }
}
@keyframes ghost-in { from { opacity: 0; } }

/* the selection's card. app.js (placeCard) sets its left beside the Levels, its width and its top:
   top-left on the plate, or bottom-left when it would cover the selection */
.card {
  position: absolute;
  left: calc(58px + env(safe-area-inset-left));
  top: 8px;
  z-index: 3;
  width: 280px;
  display: flex;
  flex-direction: column;
  padding: 4px 4px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--sheet);
  animation: card-in 120ms var(--draw);
}
@keyframes card-in { from { opacity: 0; transform: translateY(4px); } }
.card-where { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.where { min-width: 0; padding-top: 8px; line-height: 1.35; }
.where button { position: relative; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; text-align: left; }
.where button::before { content: ''; position: absolute; inset: -14px -2px; }
.card-close { position: relative; z-index: 1; flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: -10px; color: var(--ink-2); }
.card-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
.card-name { font-size: 21px; font-weight: 600; line-height: 1.2; }
.card-latin { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.card-rows { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; }
.card-rows div { display: flex; justify-content: space-between; gap: 14px; }
.card-rows dt { color: var(--ink-2); }
.card-rows dd { font-weight: 560; text-align: right; }
.card-desc, .card-note { margin-top: 6px; font-size: 12.5px; line-height: 1.45; }
.card-note { color: var(--ink-2); }
.card-body.more { border-bottom: 1px solid var(--line-strong); }
.card-actions { display: flex; flex-wrap: wrap; margin: 0 0 0 -8px; }
/* the compact form, on a plate under 420 px: the name smaller, the Levels row right under it, the four
   actions on one row (Zoom to it says Zoom), the description scrolling under them */
.card.compact .card-name { font-size: 15px; }
.card.compact .card-latin, .card.compact #r-layer, .card.compact .long { display: none; }

/* hidden or isolated structures: a state, said in words, at the plate's foot beside the Levels */
.status {
  position: absolute;
  left: calc(58px + env(safe-area-inset-left));
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 66px - env(safe-area-inset-left));
  padding: 0 0 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--sheet);
  font-size: 12.5px;
}
#status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a problem with the data is a sentence on the plate, never a blank plate */
.notice {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: max-content;
  max-width: min(300px, calc(100% - 32px));
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--sheet);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

/* padded by the safe-area insets and never seen: app.js reads its padding for the camera's fit */
.safe-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── the caption band: the line that reads the Levels ── */

.caption {
  grid-row: 3;
  padding: 6px calc(16px + env(safe-area-inset-right)) 6px calc(16px + env(safe-area-inset-left));
  background: var(--page);
  font-size: 11px;
  line-height: 15px;
  color: var(--ink-2);
}
/* The caption line has a fixed height, whatever it says: two lines below 640 px, one from 640 px, so
   the plate above it never resizes when its words change. tools/shoot.mjs measures every sentence. */
.capline { height: 30px; overflow: hidden; }
@media (min-width: 640px) { .capline { height: 15px; } }

/* ── the Layers sheet: one row per layer, its three modes as words ── */

.layers {
  grid-row: 4;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 calc(16px + env(safe-area-inset-right)) 6px calc(16px + env(safe-area-inset-left));
  background: var(--page);
  border-top: 1px solid var(--line);
}
.layers-head { display: flex; align-items: center; justify-content: space-between; margin-right: -8px; }
.layers-head h2 { font-size: 13.5px; font-weight: 650; }
.layers-note { font-size: 12.5px; color: var(--ink-2); max-width: 62ch; padding-bottom: 4px; }
.lrow { display: flex; align-items: center; gap: 8px; min-height: 44px; border-top: 1px solid var(--line); }
.swatch { flex: 0 0 10px; width: 10px; height: 10px; background: var(--c); outline: 1px solid var(--line-strong); }
.lname { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.25; }
.lcount { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-2); }
.lrow .words { margin-right: -8px; }
#layers-all { margin-left: -8px; }

/* ── the dissection band: the step keys, then Explode, its track and its three ways ── */

.dissect {
  grid-row: 5;
  padding: 0 calc(12px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(12px + env(safe-area-inset-left));
  background: var(--page);
  border-top: 1px solid var(--line);
}
.drow { display: flex; align-items: center; gap: 10px; height: 44px; }
.drow .words { margin: 0 -6px 0 -4px; }
.drow .words button { padding: 0 6px; }
/* the explode track, drawn by CSS alone in the house's slider language: a 1 px baseline, the value
   so far 2 px of ink, an 8 px ink thumb in a 3 px ring of the page */
.hslider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  flex: 1 1 100px;
  min-width: 60px;
  height: 48px;
  margin: -2px 0;
  background: none;
  cursor: pointer;
  touch-action: pan-y;
  --fill: 0%;
}
.hslider::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--fill) 2px no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) 0 0.5px / 100% 1px no-repeat;
}
.hslider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--ink); border: 3px solid var(--page); }
.hslider::-moz-range-track { height: 1px; background: var(--line-strong); }
.hslider::-moz-range-progress { height: 2px; background: var(--ink); }
.hslider::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); border: 3px solid var(--page); }

/* ── Find and About: full-height sheets ── */

.dialog { position: fixed; inset: 0; z-index: 20; }
.dialog-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  animation: sheet-in 220ms var(--sheet-in);
}
@keyframes sheet-in { from { transform: translateY(100%); } }
.dialog-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
}
.dialog-head h2 { font-size: 15px; font-weight: 650; }
.dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.about-body section { max-width: 62ch; padding: 12px 0; border-bottom: 1px solid var(--line); }
.about-body h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 650; }
.about-body p + h3, .about-body div + p, .about-body p + p { margin-top: 8px; }
.about-body ul + p, .about-body p + h3 { margin-top: 12px; }
.about-body p, .about-body li { line-height: 1.5; }
.about-body ul { padding-left: 18px; }
.about-body li + li { margin-top: 4px; }
.about-body #ab-sources p + p { margin-top: 8px; }
.about-body dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; line-height: 1.45; }
.about-body dt { color: var(--ink-2); }
.about-foot { margin-top: 8px; margin-left: -8px; }

.find-field { position: relative; flex: 0 0 auto; padding: 8px calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
/* 16 px, off the scale on purpose: iOS zooms the page into any field set smaller (ART.md section 3) */
#search {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 44px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--sheet);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
#search::placeholder { color: var(--ink-3); opacity: 1; }
/* the engine's own clear button is drawn in its accent color; the house draws its own, the card's Close mark */
#search::-webkit-search-cancel-button, #search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.find-clear { position: absolute; top: 8px; right: calc(16px + env(safe-area-inset-right)); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.t-layer { border-bottom: 1px solid var(--line); }
.t-layer-head, .t-group-head { display: flex; align-items: center; min-height: 44px; }
.t-toggle { display: flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; text-align: left; }
.t-layer-head .t-toggle { flex: 1 1 auto; min-width: 0; }
.chev { flex: 0 0 auto; color: var(--ink-2); }
.t-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.t-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.t-count { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-2); padding-right: 4px; }
.t-group { padding-left: 18px; border-top: 1px solid var(--line); }
/* a group's chevron sits just before its name, which selects the group; its parts hang under the name */
.t-group-head .t-toggle { justify-content: flex-end; width: 44px; padding-right: 8px; }
.t-group-head .t-link { flex: 1 1 auto; min-width: 0; min-height: 44px; text-align: left; font-size: 13.5px; }
.t-part {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 12px 0;
  text-align: left;
  border-top: 1px solid var(--line);
}
.t-parts { padding-left: 44px; }
.results .t-part:first-child { border-top: 0; }
.p-name { position: relative; min-width: 0; font-size: 13.5px; color: var(--ink); }
.p-where { display: block; font-size: 12.5px; color: var(--ink-2); }
.p-latin { flex: 0 1 auto; font-size: 12.5px; color: var(--ink-2); text-align: right; }
.t-part.is-hidden .p-name { color: var(--ink-3); }
.tree .selected .p-name { font-weight: 620; }
.tree .selected .p-name::after { left: 0; right: auto; width: calc(100% + 4px); bottom: -6px; }
.empty { padding: 12px 0; line-height: 1.5; }
/* a visibility box: a drawn 16 x 16 box in a 44 x 44 hit, named for what it shows */
.vis { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-right: -14px; color: var(--ink); }
.vis .box { stroke: var(--ink-2); }
.vis .tick, .vis .bar { visibility: hidden; }
.vis[aria-checked="true"] .tick, .vis[aria-checked="mixed"] .bar { visibility: visible; }

/* ── focus mode: the header, the keys and the Layers sheet leave ── */

.leaving { opacity: 0; transition: opacity 160ms var(--draw); }

@media (hover: hover) {
  .keyplate button:hover::before { background: color-mix(in srgb, currentColor 7%, transparent); }
  .words button:hover, .stamp:hover, .textkey:hover, .wordkey:hover, .where button:hover { color: var(--ink); }
  .ghost:hover { opacity: 1; }
}
@media (min-width: 700px) {
  .head, .caption, .layers { padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); }
}

/* ── a wide screen: the Layers sheet becomes a column at the right ── */

@media (min-width: 820px) and (min-height: 480px) {
  body.has-layers { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .has-layers .head, .has-layers .plate, .has-layers .caption, .has-layers .dissect { grid-column: 1; }
  .has-layers .layers { grid-column: 2; grid-row: 1 / -1; border-top: 0; border-left: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
  .has-layers .dissect { grid-row: 4; }
}

/* ── a phone on its side: the header, the caption and the dissection band each give the plate a row ── */

@media (orientation: landscape) and (max-height: 500px) {
  body { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  body.has-layers { grid-template-columns: minmax(0, 1fr) min(340px, 45%); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .has-layers .head, .has-layers .plate, .has-layers .caption, .has-layers .dissect { grid-column: 1; }
  .layers { grid-column: 2; grid-row: 1 / -1; border-top: 0; border-left: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
  .dissect { grid-row: 4; }
  .head {
    grid-template-columns: max-content minmax(0, 1fr) auto;
    grid-template-rows: 22px 24px;
    column-gap: 16px;
    padding-top: env(safe-area-inset-top);
  }
  .stamp-home { grid-area: 2 / 1; padding-bottom: 0; }
  .stamp { white-space: nowrap; }
  .row { grid-area: 1 / 2 / 3 / 3; margin: 0; }
  .hkeys { grid-area: 1 / 3 / 3 / 4; }
  .head:has(#stamp-home[hidden]) .hkeys { margin: 0; }
  .head:has(#stamp-home[hidden]) .hkeys .wordkey::before { inset: -9px -1px; }
  /* the caption line on one line across the band */
  .caption { padding-top: 3px; padding-bottom: 3px; }
  .capline { height: 15px; }
  .dissect { display: flex; align-items: center; gap: 12px; }
  .drow { flex: 1 1 auto; min-width: 0; }
  .drow:first-child { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}