/* World Oil & Gas, on the template's house system (ART.md; Template/HOUSE.md).

   The screen is a plate and its caption: the world runs edge to edge, and under it a band of plain
   type holds the Ledger (the world's output as shares, the one bold thing), the scale, how to read the
   picture, and whose data it is. One face, gray chrome, no accent color, no glass, no shadows, no
   gradient in the chrome but the legend's data scale and the selection tracer. The light theme is the
   negative, the dark theme the print. The plate's own colors live in app.js's THEMES, pasted from
   tools/art/palette.py; 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: #e8eef0;            /* header, caption band, player, the sheet's slot */
  --sheet: #f6f9fa;           /* key plates, the card, 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 (ART.md section 2): the Ledger's ink, the details chart's two lines, the sea */
  --ledger: #1b150e;
  --chart-oil: #b2580b;
  --chart-gas: #066d90;
  --sea: #d5e2e8;
  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;
    --ledger: #f4f0e7;
    --chart-oil: #eb9259;
    --chart-gas: #49abd6;
    --sea: #111b20;
    color-scheme: dark;
  }
}

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

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;
}
/* one column: the header, the plate, the caption band, the sheet's slot, the player */
body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(220px, 1fr) auto auto auto;
  grid-template-areas: "head" "plate" "caption" "sheet" "player";
  height: 100vh;
  height: 100dvh;
}
.head { grid-area: head; }
.plate { grid-area: plate; }
.caption { grid-area: caption; }
.sheet { grid-area: sheet; }
.player { grid-area: player; }

button, input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.switcher :focus-visible { outline-offset: -2px; }
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; }

/* ── header: the name, Find and the units key, the stamp, the row of words ── */

.head {
  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; margin: 0; font-size: 15px; font-weight: 650; line-height: 22px; white-space: nowrap; }
.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);
}
.stamp .stale { color: var(--ink); }
/* 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 it heads the caption: its hit runs down over the caption's words, never up into the plate */
.caption > .stamp::before { inset: -6px 0 -22px 0; }
.hkeys { grid-area: 1 / 2 / 3 / 3; align-self: center; display: flex; gap: 8px; }
.wordkey {
  position: relative;
  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 -4px; }   /* 44 px tall, the gap between the two shared */

.switcher { 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; }
.switcher::-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 {
  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); } }

/* ── the plate ── */

.plate {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--sea);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.plate canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#map:focus-visible { outline-offset: -2px; }

/* the key column: three 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; }
/* a key that is on carries a plate of ink behind its mark */
.keyplate button::before { content: ''; position: absolute; inset: 8px; border-radius: 4px; }
.keyplate button[aria-expanded="true"] { color: var(--ink); }
.keyplate button[aria-expanded="true"]::before { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.keyplate button:active::before { background: color-mix(in srgb, currentColor 22%, transparent); }
.tkey:active > svg, .textkey:active { background: color-mix(in srgb, currentColor 12%, transparent); border-radius: 4px; }
/* a plate too short for the column (a phone on its side, a sheet open): the keys run as a row along the 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 color of the plate */
.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) {
  .ghost .halo { stroke: rgba(10, 16, 19, .45); }
  .ghost .halo circle { fill: rgba(10, 16, 19, .45); }
  .ghost .mark { stroke: #f2f4f1; }
  .ghost .mark .fill { fill: #f2f4f1; }
}
@keyframes ghost-in { from { opacity: 0; } }

/* the card: the tapped country or field */
.card {
  position: absolute;
  left: calc(8px + env(safe-area-inset-left));
  top: 8px;
  z-index: 3;
  width: max-content;
  min-width: 200px;
  max-width: min(280px, calc(100% - 76px));
  padding: 4px 4px 10px 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); } }
/* it moves to the bottom corner when it would cover what was tapped (app.js placeCard) */
.card.low { top: auto; bottom: 8px; }
.focus .card:not(.low) { top: calc(8px + env(safe-area-inset-top)); }
.card-where { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.card-close { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin: -6px 0 -10px; color: var(--ink-2); }
/* a field's long name wraps, at most three lines */
.card-name { font-size: 13.5px; font-weight: 650; padding-right: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.card-main { padding-right: 8px; }
.card-value { font-size: 21px; font-weight: 600; line-height: 1.2; }
.card-unit { font-size: 13.5px; color: var(--ink-2); }
.card-sub, .card-note { font-size: 12.5px; color: var(--ink-2); padding-right: 8px; }
.card-note { margin: 4px 0 0; line-height: 1.35; }
.card-rows {
  margin: 6px 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 14px;
  font-size: 12.5px;
  line-height: 1.35;
}
.card-rows:empty { display: none; }
.card-rows dt { color: var(--ink-2); }
.card-rows dd { margin: 0; text-align: right; font-weight: 560; overflow-wrap: anywhere; }
.card-act { margin: 4px 0 -10px -8px; }

/* a problem with the data is a sentence on the plate, never a blank map */
.error {
  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;
}
.error div + div { margin-top: 6px; }

/* ── the caption band: the Ledger, the legend, the bar's caption and its key ── */

.caption {
  padding: 6px calc(16px + env(safe-area-inset-right)) 4px calc(16px + env(safe-area-inset-left));
  background: var(--page);
  font-size: 11px;
  line-height: 15px;
  color: var(--ink-2);
}
.caption > .stamp { margin-bottom: 2px; z-index: 1; }
/* the Ledger's row keeps its height whatever it draws, so the plate never resizes with the data */
.ledger { height: 30px; margin-bottom: 4px; }
.ledger canvas { display: block; width: 100%; height: 30px; cursor: pointer; }
.legend { display: flex; align-items: flex-start; gap: 12px; min-height: 30px; }
.focus .legend { min-height: 0; }
.legend-title { flex: 0 1 auto; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--ink); padding-top: 1px; white-space: nowrap; }
.legend-scale { flex: 1 1 150px; min-width: 150px; padding-top: 5px; }
.legend-bar { height: 6px; outline: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent); }
.legend-ticks { position: relative; height: 15px; font-size: 10.5px; }
.legend-ticks span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; line-height: 12px; }
.legend-ticks span::before { content: ''; position: absolute; left: 50%; top: -3px; width: 1px; height: 3px; background: var(--line-strong); }
.legend-ticks span.first { transform: none; }
.legend-ticks span.first::before { left: 0; }
.legend-ticks span.last { transform: translateX(-100%); }
.legend-ticks span.last::before { left: auto; right: 0; }
/* below 640 px the title has its own line, so the bar runs the full width */
@media (max-width: 639px) { .legend { flex-wrap: wrap; row-gap: 0; } .legend-scale { flex-basis: 100%; padding-top: 2px; } }
/* The caption line has a fixed height, whatever it says: its words change with the year, and a line
   that grew and shrank would resize the plate on every year of play. Two lines below 640 px; one from 640.
   The key follows the words on their line when it fits there, else on the next (HOUSE 4.15). */
.readline { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 12px; height: 30px; overflow: hidden; }
@media (min-width: 640px) { .readline { height: 15px; } }
.key { display: flex; gap: 2px 12px; font-size: 11.5px; line-height: 15px; color: var(--ink-2); white-space: nowrap; }
.key .sw { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
/* the bar's hatched end, 1 px lines 3 px apart at 45 degrees; plain land as the map paints it, edged as a border */
.sw-hatch { background: repeating-linear-gradient(135deg, var(--ledger) 0 1px, transparent 1px 3px); }
.sw-plain { background: var(--s-land); border: 1px solid var(--line-strong); }

/* ── the sheet's slot: details or the map's layers, on the page, under a hairline ── */

.sheet {
  display: flex;
  flex-direction: column;
  max-height: 46vh;
  max-height: 46dvh;
  min-height: 0;
  background: var(--page);
  border-top: 1px solid var(--line);
}
.sheet-head, .panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 calc(8px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
}
.sheet-head h2 { margin: 0; min-width: 0; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left)); font-size: 12.5px; }
.sheet-body h3 { margin: 12px 0 4px; font-size: 13.5px; font-weight: 650; }
.sheet-body dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; line-height: 1.35; }
.sheet-body dt { color: var(--ink-2); }
.sheet-body dd { margin: 0; text-align: right; font-weight: 560; overflow-wrap: anywhere; }
.sheet-note { margin: 8px 0 0; color: var(--ink-2); line-height: 1.4; max-width: 62ch; }
.textkey { min-width: 44px; height: 44px; padding: 0 8px; font-size: 12.5px; color: var(--ink); }

/* the details chart and its key */
.chart { display: block; width: 100%; height: 104px; margin-top: 4px; }
.chart-key { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 2px; color: var(--ink-2); }
.chart-key i { display: inline-block; width: 14px; height: 1.5px; margin: 0 6px 3px 0; vertical-align: middle; }
.chart-key .oil i { background: var(--chart-oil); }
.chart-key .gas i { background: var(--chart-gas); }
/* the tracker's units under a country, each a 44 px row */
.tlist { list-style: none; margin: 4px 0 0; padding: 0; }
.tlist li + li { border-top: 1px solid var(--line); }
.tlist button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 12px 0; text-align: left; font-size: 12.5px; }
.tlist .v { color: var(--ink-2); white-space: nowrap; }

/* the layers: one row a layer with a drawn box, the word groups, and the plate's own samples */
.lrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; font-size: 13.5px; }
.lrow .box { flex: 0 0 auto; color: var(--ink-2); }
.lrow .box .tick { display: none; }
.lrow[aria-pressed="true"] .box { color: var(--ink); }
.lrow[aria-pressed="true"] .box .tick { display: inline; }
.lrow .what { flex: 1 1 auto; min-width: 0; }
.lgroup { display: flex; align-items: center; flex-wrap: wrap; column-gap: 4px; }
.llabel { flex: 0 0 auto; min-width: 86px; color: var(--ink-2); font-size: 12.5px; }
.lgroup .words { flex-wrap: wrap; margin-left: -8px; }
.fkey { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 4px; font-size: 11px; color: var(--ink-2); }
.fkey > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fkey svg { overflow: visible; }
.fkey .sizes { gap: 4px; }
.fkey .sizes span { margin-right: 6px; }

/* ── the player: the year, the transport and the track ── */

.player {
  padding: 2px 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);
}
.time-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 4px 0; }
.valid { font-size: 21px; line-height: 1; font-weight: 600; white-space: nowrap; }
.lead { min-width: 0; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controls { display: flex; align-items: flex-start; }
.tkey { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.tkey[aria-disabled="true"] { opacity: .4; }
.tkey.play { color: var(--page); }
.shutter { width: 32px; height: 32px; border-radius: 8px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.shutter svg { fill: currentColor; stroke: none; }
.track { position: relative; flex: 1 1 auto; min-width: 0; height: 58px; margin-left: 4px; cursor: pointer; touch-action: none; }
.track canvas { display: block; width: 100%; height: 58px; }
.track:focus-visible { outline-offset: -2px; }
/* no transition, ever, on what carries a year */
.valid, .lead, .track, .track canvas { transition: none; animation: none; }

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

.panel { position: fixed; inset: 0; z-index: 20; }
.panel-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%); } }
.panel-head { padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.about-body {
  flex: 1 1 auto;
  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 h4 { margin: 10px 0 4px; font-size: 13.5px; font-weight: 600; }
.about-body p, .about-body li { margin: 0 0 8px; line-height: 1.5; }
.about-body ul { margin: 0; padding-left: 18px; }
.about-body code { font: inherit; }
.about-body dl { margin: 0 0 8px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; line-height: 1.45; }
.about-body dt { color: var(--ink-2); }
.about-body dd { margin: 0; overflow-wrap: anywhere; }
.about-body .src { margin: 0 0 10px; line-height: 1.45; overflow-wrap: anywhere; }
.about-body .src span { display: block; }
.about-body .src .src-name { font-weight: 560; }
.about-body .src .src-term { color: var(--ink-2); }
.about-foot { margin-top: 8px; }

.find-field { position: relative; flex: 0 0 auto; margin: 12px calc(16px + env(safe-area-inset-right)) 4px calc(16px + env(safe-area-inset-left)); }
/* 16 px: iOS zooms into any field set smaller (a stated departure from the scale, ART.md section 4) */
.find-field input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  padding: 0 44px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 16px;
  color: var(--ink);
}
.find-field input::placeholder { color: var(--ink-3); opacity: 1; }
/* the browser's own clear button is drawn in the browser's accent; the house draws its own */
.find-field input::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
.find-clear { position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.find-list { flex: 1 1 auto; 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)); }
.find-list h3 { margin: 12px 0 2px; font-size: 13.5px; font-weight: 650; }
.find-list ul { list-style: none; margin: 0; padding: 0; }
.find-list li + li { border-top: 1px solid var(--line); }
.find-list button { display: block; width: 100%; min-height: 44px; padding: 8px 0; text-align: left; }
.find-list .name { display: block; font-size: 13.5px; }
.find-list .sub { display: block; font-size: 12.5px; color: var(--ink-2); }
.find-list .none { padding: 12px 0; margin: 0; color: var(--ink-2); }

/* ── focus mode: everything but the plate, the player, the stamp and the caption's words leaves ── */

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

@media (hover: hover) {
  .keyplate button:hover svg { background: color-mix(in srgb, currentColor 7%, transparent); border-radius: 4px; }
  .words button:hover, .wordkey:hover, .stamp:hover, .textkey:hover, .tkey:hover, .lrow:hover, .find-list button:hover, .tlist button:hover { color: var(--ink); }
  .ghost:hover { opacity: 1; }
}
@media (min-width: 700px) {
  .head, .caption { padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); }
}
/* a wide screen: the sheet is a column at the plate's right, never over it */
@media (min-width: 820px) and (min-height: 480px) {
  body.side { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(220px, 1fr) auto auto; grid-template-areas: "head head" "plate sheet" "caption sheet" "player player"; }
  body.side .sheet { max-height: none; border-top: 0; border-left: 1px solid var(--line); }
}

/* ── a phone on its side: the header, the caption and the player each give the plate their second row ── */

@media (orientation: landscape) and (max-height: 500px) {
  body.side { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "head head" "plate sheet" "caption caption" "player player"; }
  body.side .sheet { max-height: none; border-top: 0; border-left: 1px solid var(--line); }
  .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; }
  .switcher { grid-area: 1 / 2 / 3 / 3; margin: 0; }
  .hkeys { grid-area: 1 / 3 / 3 / 4; }
  /* the Ledger and the legend share a row, then the caption line and its key, one line */
  .caption { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding-top: 4px; padding-bottom: 2px; }
  .caption > .stamp { grid-column: 1 / -1; }
  .ledger { grid-column: 1; margin-bottom: 0; }
  .legend { grid-column: 2; }
  .readline { grid-column: 1 / -1; height: 15px; }
  /* the year, the transport and the track on one row */
  .player { display: flex; align-items: center; gap: 8px; padding-top: 0; }
  .time-row { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 4px; max-width: 40%; }
  .controls { flex: 1 1 auto; min-width: 0; align-items: center; }
}
/* a short screen upright, a sheet open: the plate gives it room down to 150 px, the legend's bar leaves */
@media (orientation: portrait) and (max-height: 760px) {
  body.side { grid-template-rows: auto minmax(150px, 1fr) auto auto auto; }
  body.side .legend-scale { display: none; }
  body.side .legend { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}