/* Shelf Atlas, on the template's house system (ART.md; Template/HOUSE.md).

   The screen is a plate and its caption: the North Sea runs edge to edge, and under it a band of plain
   type says what the circles and rings are, how to read them, and whose data they are. 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 (dark discs on a pale sea), the dark theme
   the print (bright discs on a dark sea). 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 Peaks' ink, the history chart's two series, the sea */
  --ring: #0c131b;
  --chart-liq: #2f8247;
  --chart-gas: #934f9e;
  --sea: #dce7ed;
  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;
    --ring: #edf3fa;
    --chart-liq: #63b376;
    --chart-gas: #c77fd2;
    --sea: #182228;
    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; } /* 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; }

/* ── 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; }
.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-pressed="true"], .keyplate button[aria-expanded="true"] { color: var(--ink); }
.keyplate button[aria-pressed="true"]::before, .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); }
.keyplate button[aria-disabled="true"] { opacity: .45; }
.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 field, platform, pipeline or boundary */
.card {
  position: absolute;
  left: calc(8px + env(safe-area-inset-left));
  top: 8px;
  z-index: 3;
  width: max-content;
  min-width: 190px;
  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); }
.card-name { font-size: 13.5px; font-weight: 650; padding-right: 8px; }
.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 { font-size: 12.5px; color: var(--ink-2); padding-right: 8px; }
.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 legend, the notes and the key that read the picture ── */

.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; }
.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; }
.readline { margin: 0; }
/* The caption line has a fixed height, whatever it says: its words change with the month, the mode and
   the countries, and a line that grew and shrank would resize the plate on every month of play.
   Two lines hold its longest form on any phone held upright; one line from 640 px. */
.readline { height: 30px; overflow: hidden; }
@media (min-width: 640px) { .readline { height: 15px; } }
/* the key: the map's own marks drawn small, each with its word (HOUSE 4.15), after the notes */
.readline .k { margin-right: 9px; color: var(--ink-2); }
.readline .nb { white-space: nowrap; }
.readline .sw { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }
.sw-rate { background: var(--k-rate); }
.sw-best { border: 1px solid var(--k-best); }
.sw-shut { background: var(--k-shut); }

/* ── the sheet's slot: a field's 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 history chart and its key */
.chart { display: block; width: 100%; height: 104px; margin-top: 4px; touch-action: none; }
.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 .liq i { background: var(--chart-liq); }
.chart-key .gas i { background: var(--chart-gas); }
/* the members of a cross-border unit */
.members { width: 100%; border-collapse: collapse; margin-top: 4px; }
.members td { padding: 4px 0; border-top: 1px solid var(--line); }
.members td + td { text-align: right; padding-left: 12px; white-space: nowrap; }
.members tr.sum td { font-weight: 560; }

/* the layers: one row a layer, a drawn box, and the map'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; }
.lrow .key { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 11px; color: var(--ink-2); }
.lrow .key span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lrow .key svg { stroke: none; }

/* ── the player: the month, 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 month */
.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 p { margin: 0 0 8px; line-height: 1.5; }
.about-body p:last-child { margin-bottom: 0; }
.about-body code { font: inherit; }
.about-body dl { margin: 0; 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; list-style: none; margin: 0; 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 li + li { border-top: 1px solid var(--line); }
.find-list button { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 44px; padding: 12px 0; text-align: left; }
.find-list .name { font-size: 13.5px; }
.find-list .cc { font-size: 12.5px; color: var(--ink-2); }
.find-list .status { margin-left: auto; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.find-list .none { padding: 12px 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 { 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) {
  /* the sheet is a column beside the plate only; the caption keeps the full width, so the plate keeps its rows */
  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 legend, and the caption line under it, one line */
  .caption { padding-top: 4px; padding-bottom: 2px; }
  .readline { height: 15px; }
  /* the month, 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; }
  .controls { flex: 1 1 auto; min-width: 0; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}