/* Running Dashboard, under the template's house system (ART.md; Template/HOUSE.md) and its pane-app
   register (HOUSE 11): sections on plates on the gray page, one face, gray chrome, no shadows, no glass.
   The data's hues (the zones, the sports, the shoes, Garmin's statuses, the route's ramp) are fitted to a
   lightness band per theme by tools/art/palette.py. The register's four meaning colors (HOUSE 11.3):
   --done a run done (the Block's runs, the week's bar), --up on track, --watch watch, --down act now and
   stop, on the tone word alone. */

@font-face {
  font-family: 'Ysabeau Office';
  src: url(fonts/ysabeau-office-gw.woff2) format('woff2');
  font-weight: 400 650;
  font-display: block;
}
/* the supplement: the subscript two of VO₂ and SpO₂, cut by the same recipe (tools/art/font_extra.py) */
@font-face { font-family: 'Ysabeau Office'; src: url(fonts/ysabeau-office-running-dashboard-extra.woff2) format('woff2'); font-weight: 400 650; font-display: block; unicode-range: U+2082; }

:root {
  --page: #e8eef0;
  --sheet: #f6f9fa;
  --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;
  color-scheme: light;
  /* data tokens: python3 running-dashboard/tools/art/palette.py --json (from Template/) */
  --zone-0: #81898e; --zone-1: #5f676b; --zone-2: #0061af; --zone-3: #115702; --zone-4: #965a01; --zone-5: #d7352f;
  --series-1: #0541c8; --series-2: #ca430e; --series-3: #007651; --series-4: #b47b06; --series-5: #a33c6a; --series-6: #785bce; --series-7: #0b8d9e; --series-8: #6a3a02;
  --amount: #4a6588;
  /* the register's meaning colors (HOUSE 11.2, taken as measured there) */
  --done: #1f5f99; --up: #17723e; --watch: #8a5a00; --down: #b42318;
  --thumb: radial-gradient(circle, var(--ink) 3.6px, var(--page) 4px 6.6px, transparent 7px), linear-gradient(var(--ink), var(--ink)) center / 1.5px 18px no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #141d21;
    --sheet: #1c272c;
    --ink: #e6edee;
    --ink-2: #a3b1b6;
    --ink-3: #8b9a9f;
    --line: #2a373c;
    --line-strong: #64757b;
    color-scheme: dark;
    --zone-0: #6e767a; --zone-1: #9ca5a9; --zone-2: #66affe; --zone-3: #8dec7e; --zone-4: #dc8602; --zone-5: #e5443b;
    --series-1: #9cbeff; --series-2: #e1592c; --series-3: #36c18c; --series-4: #9b6901; --series-5: #e678a5; --series-6: #9377ed; --series-7: #0092a4; --series-8: #fdc493;
    --amount: #93aeca;
    --done: #8cbcf0; --up: #6fd39a; --watch: #e0a340; --down: #ff9a8f;
  }
}

* { 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;
}
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
button, select, input, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tabs :focus-visible, .words :focus-visible { outline-offset: -2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }

/* ── the header: the name, the stamp, the panes as tabs ── */
/* the header's sides follow the pane's 760 px column, so on a wide screen the name starts where the plates do */
.head { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); padding: calc(6px + env(safe-area-inset-top)) calc(max(16px, 50% - 364px) + env(safe-area-inset-right)) 0 calc(max(16px, 50% - 364px) + env(safe-area-inset-left)); }
.head h1 { font-size: 15px; font-weight: 650; line-height: 22px; }
.stamp-home { 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 hit runs up over the name (not a control) and down into the gap: 22 + 16 + 6 = 44 px */
.stamp::before { content: ''; position: absolute; inset: -22px 0 -6px; }

.tabs, .words { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 16px; margin: 0 -8px; }
.tabs::-webkit-scrollbar, .words::-webkit-scrollbar { display: none; }
.wordrow { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -8px; }
.wordrow .words { margin: 0; }
.tabs button, .words button, .wordrow > 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: 620 in ink, a tracer under it drawn from its tail to its head (HOUSE 4.3) */
/* aria-pressed is only ever a word (.words, .wordrow) */
.tabs [aria-selected="true"], [aria-pressed="true"] { color: var(--ink); font-weight: 620; }
.tabs [aria-selected="true"]::after, [aria-pressed="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 pane: it scrolls inside the frame, so the header stays put; with no band under it, it pads the home
   indicator itself (HOUSE 4.14, 11.1 rule 1) ── */
.pane { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.filters, .panebody { max-width: 760px; margin: 0 auto; padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); }
/* the filters stay under the tabs and the pane scrolls beneath them; in the flow, so at rest they cover
   nothing; tucked() in app.js lifts the sport and equipment row out with a scroll down, and it stays out
   until the pane is back at its top (the owner, 2026-10-03 and 2026-10-08) */
.filters { position: sticky; top: 0; z-index: 4; background: var(--page); }
.panebody { padding-top: 4px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.frow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.winlabel { font-size: 12.5px; }

/* two native range inputs on one track, in the house's slider language: a baseline, the window in 2 px
   of ink, a tracer head at each end of it. The inputs are the 44 × 44 hits and the accessible sliders,
   drawn at opacity 0, so a phone paints nothing of its own behind a thumb (the owner saw a plate,
   2026-10-03); the heads are the fill's ::before and ::after, 10 px while their thumb is pressed */
.dual { position: relative; height: 32px; }   /* 32 px with the track 10 px down: the heads sit close under the window words and the block is 12 px shorter (the owner, 2026-10-03); the inputs keep their 44 px hits and overhang the content's inert first line */
.dual-track { position: absolute; left: 22px; right: 22px; top: 9.5px; height: 1px; background: var(--line-strong); pointer-events: none; }
.dual-fill { position: absolute; top: -0.5px; height: 2px; background: var(--ink); }
.dual-fill::before, .dual-fill::after { content: ''; position: absolute; top: -8px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--thumb); }
.dual-fill::after { left: auto; right: -9px; }
.dual { --ring: var(--page); }
.sec .dual { --ring: var(--sheet); }
.dual:has(input:nth-of-type(1):active) .dual-fill::before, .dual:has(input:nth-of-type(2):active) .dual-fill::after { background: radial-gradient(circle, var(--ink) 4.6px, var(--ring) 5px 7.6px, transparent 8px), linear-gradient(var(--ink), var(--ink)) center / 1.5px 18px no-repeat; }
.dual:has(input:nth-of-type(1):focus-visible) .dual-fill::before, .dual:has(input:nth-of-type(2):focus-visible) .dual-fill::after { outline: 2px solid var(--ink); outline-offset: 2px; }
.dual input { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; opacity: 0; pointer-events: none; appearance: none; -webkit-appearance: none; }
.dual input::-webkit-slider-runnable-track { height: 44px; }
.dual input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 44px; height: 44px; cursor: pointer; }
.dual input::-moz-range-thumb { pointer-events: auto; width: 44px; height: 44px; border: 0; cursor: pointer; }
.picks { display: flex; gap: 8px; padding-top: 4px; }
.pick { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 12.5px; font-weight: 560; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; }

/* ── sections on plates (HOUSE 11.1 rule 4): a --sheet fill, a 1 px --line edge, 12 px apart; a slider's head
   on a plate rings in --sheet ── */
.sec { position: relative; margin-top: 12px; padding: 12px 12px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet);
  --thumb: radial-gradient(circle, var(--ink) 3.6px, var(--sheet) 4px 6.6px, transparent 7px), linear-gradient(var(--ink), var(--ink)) center / 1.5px 18px no-repeat; }
.sec > h2, .sec > h3 { font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.group { font-size: 15px; font-weight: 650; padding: 28px 0 0; }
.cap { margin-top: 6px; max-width: 62ch; font-size: 11px; line-height: 15px; color: var(--ink-2); }
.sec p:not(.cap):not(.empty), .section { line-height: 1.5; max-width: 62ch; }
.sec p + p, .section > * + * { margin-top: 8px; }
.section { padding: 2px 0 12px; }
.section h3 { font-size: 13.5px; font-weight: 600; margin-top: 12px; }
.section ul { padding-left: 18px; }
.empty { padding: 12px 0; font-size: 12.5px; color: var(--ink-2); }
.verdict { padding: 12px 0 4px; line-height: 1.5; max-width: 62ch; }
.verdict b { font-weight: 620; }
/* the key number (HOUSE 11.1 rule 2): the label above, the figure at 34 px, the plan or lead under it */
.headline { padding: 14px 12px 12px; }
.hl { display: grid; gap: 2px; }
.hl-what { font-size: 12.5px; font-weight: inherit; color: var(--ink-2); }
.hl-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.hl-fig { font-size: 34px; font-weight: 650; line-height: 1.05; }
.hl-lead { font-size: 13.5px; color: var(--ink-2); }
.sec .hl + .facts { margin-top: 6px; }
/* the week against its plan: the outline holds a 14 % fill (HOUSE 11.1 rule 7), the run inside it in --done */
.pbar { position: relative; height: 10px; margin-top: 8px; border: 1.5px solid var(--ink-2); border-radius: 3px; background: color-mix(in srgb, var(--ink-2) 14%, var(--sheet)); overflow: hidden; }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--done); }
.pkey { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 5px; font-size: 11.5px; line-height: 15px; color: var(--ink-2); }
.pkey span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.k-done::before { background: var(--done); }
.k-plan::before { box-sizing: border-box; border: 1.5px solid var(--ink-2); background: color-mix(in srgb, var(--ink-2) 14%, var(--sheet)); }
/* the tone: its word in its meaning color, never the only carrier (the word says it) */
.tone { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; }
.tone b { font-weight: 650; }
.tone.tone-good b, .tone-good .tw { color: var(--up); }
.tone.tone-warning b, .tone-warning .tw { color: var(--watch); }
.tone.tone-serious b, .tone.tone-critical b, .tone-serious .tw, .tone-critical .tw { color: var(--down); }
.tone-text { margin-top: 2px; line-height: 1.45; max-width: 62ch; }
/* Now's facts as tiles (HOUSE 11.1 rule 3): two columns, a label, a 19 px value, a note */
dl.tiles { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
dl.tiles .fact { display: block; padding: 8px 0 7px; border-top: 1px solid var(--line); font-size: 13.5px; }
dl.tiles .fact:nth-child(-n+2) { border-top: 0; padding-top: 2px; }
dl.tiles dt { font-size: 11.5px; color: var(--ink-2); }
dl.tiles dd { margin: 0; text-align: left; }
dl.tiles dd b { display: block; font-size: 19px; font-weight: 650; line-height: 1.25; }
dl.tiles dd span { display: block; font-size: 11.5px; line-height: 15px; color: var(--ink-2); }
dl.tiles dd span::before { content: none; }
/* the key at the end of every pane (HOUSE 11.1 rule 1) */
.aboutlink { display: block; margin: 14px 0 0; min-height: 44px; font-size: 12.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.aboutlink:active { color: var(--ink); }

/* text keys: a 28 px frame on a 44 px hit; disclosures with a drawn chevron that turns at once */
.keys { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; margin-top: 2px; }
.keys:empty { display: none; }
.textkey { position: relative; height: 44px; padding: 0 10px; font-size: 12.5px; }
.textkey::before { content: ''; position: absolute; inset: 8px 0; border: 1px solid var(--line-strong); border-radius: 6px; }
.textkey:active::before { background: color-mix(in srgb, currentColor 22%, transparent); }
.sx > .textkey { margin-top: 4px; }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; }
summary::-webkit-details-marker { display: none; }
.howto > summary, .fold > summary { width: max-content; max-width: 100%; }
.howto > summary { font-size: 12.5px; color: var(--ink-2); }
.howto[open] { flex: 1 0 100%; }
.howto > p { padding-bottom: 8px; color: var(--ink-2); }
.fold { border-top: 1px solid var(--line); }
.fold > summary { font-weight: 600; }
.howto > summary::after, .fold > summary::after { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.howto[open] > summary::after, .fold[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

/* facts: rows of a label at the left and the value at the right, the note after it */
.facts { padding-top: 8px; }
.fact { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.facts .fact:first-child { border-top: 0; }
.fact dt { color: var(--ink-2); }
.fact dd { margin-left: auto; text-align: right; }
.fact b { font-weight: 560; }
.fact dd span { color: var(--ink-2); }
.fact dd span::before { content: ', '; }
.fact dd .per::before { content: ' '; }
@media (min-width: 560px) { .facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .facts .fact:nth-child(2) { border-top: 0; } }
/* a long fact, a label over its prose, on its own plate after the Block */
.long .fact:first-child { border-top: 0; }
.long dd { margin: 0; text-align: left; text-wrap: pretty; }
.long .fact { display: block; }
.long dd { margin-top: 2px; line-height: 1.5; max-width: 62ch; }

/* ── charts: square bars, ink only where it is read against ── */
.chartwrap { position: relative; margin-top: 4px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chartwrap svg { display: block; overflow: visible; touch-action: pan-y; }
.chartwrap text { font-size: 10.5px; fill: var(--ink-2); }
.chartwrap .mk { fill: var(--ink-3); }
.halo { paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; stroke-linejoin: round; }
.grid { stroke: var(--line); }
.base { stroke: var(--line-strong); }
.rule { stroke: var(--ink-2); stroke-dasharray: 3 3; }
.mark { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.mark.race, .racerule, .lowtick { stroke: var(--ink); stroke-dasharray: none; }
.notch { stroke: var(--ink-2); }
.casing { fill: none; stroke: var(--sheet); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.cdot { fill: var(--ink); stroke: var(--sheet); stroke-width: 2; }
.dot { stroke: var(--sheet); stroke-width: 2; }
.ink { fill: var(--ink); }
/* the Block (HOUSE 11.3): a run done in --done, a planned week an --ink-2 outline with its 14 % fill */
.blocksec .ink:not(.tint) { fill: var(--done); }
.blocksec .tint { fill: var(--ink-2); fill-opacity: 0.14; }
.blocksec .outline { stroke: var(--ink-2); }
.outline { fill: none; stroke: var(--ink); stroke-width: 1.5; }
/* the plan, wherever it is drawn: its outline holds a 20 % tint of its own color (palette.py check 8) */
.tint { fill-opacity: 0.2; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 10.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { flex: 0 0 auto; width: 8px; height: 8px; background: var(--c); }
.legend i.line { width: 16px; height: 2px; }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 9px); }
.legend i.plan, .zbar.plan span { background: color-mix(in srgb, var(--c) 20%, transparent); border: 1.5px solid var(--c); }

/* the readout card (HOUSE 4.7): the one card on the screen */
.readout { position: absolute; z-index: 3; width: max-content; min-width: 176px; max-width: min(280px, calc(100% - 16px)); padding: 4px 4px 10px 10px; 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); } }
.readout-where { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.readout-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); }
.readout-close svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.readout-main { padding-right: 8px; }
.readout-value { font-size: 21px; font-weight: 600; line-height: 1.2; }
.readout-unit { font-size: 13.5px; color: var(--ink-2); }
.readout-all { display: grid; grid-template-columns: auto 1fr; gap: 1px 14px; margin: 4px 6px 0 0; font-size: 12.5px; }
.readout-all:empty { display: none; }
.readout-all dt { color: var(--ink-2); }
.readout-all dd { text-align: right; font-weight: 560; }

table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 4px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { font-size: 11.5px; font-weight: 600; color: var(--ink-2); border-bottom-color: var(--line-strong); }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
.tableview { overflow-x: auto; margin-top: 4px; }
.racetable { margin-top: 4px; }
.racetable .agent b { display: block; font-weight: 560; }
.racetable small { display: block; font-size: 11px; color: var(--ink-2); }

/* ── Sessions: the list, the week rows, the route ── */
.sesslist { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; margin-top: 4px; border-top: 1px solid var(--line); }
.sess { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 6px; text-align: left; border-bottom: 1px solid var(--line); }
.sess[aria-current="true"] { background: color-mix(in srgb, var(--ink) 12%, var(--sheet)); }
.sess small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.s-date { font-size: 12.5px; color: var(--ink-2); }
.s-main b { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.s-side { text-align: right; font-size: 12.5px; font-weight: 560; }
.dot, .sess .dot { flex: 0 0 8px; width: 8px; height: 8px; background: var(--c); }
.sessions { margin-top: 8px; }
.srow { border-top: 1px solid var(--line); }
.srow > summary { align-items: flex-start; gap: 10px; padding: 7px 0; }
.sday { flex: 0 0 52px; font-size: 12.5px; color: var(--ink-2); padding-top: 1px; }
.sbody { flex: 1; min-width: 0; }
.swhat { font-weight: 600; }
.skind { font-size: 11px; font-weight: 400; color: var(--ink-2); }
.skind.ink { color: var(--ink); }
.sstats { font-size: 12.5px; color: var(--ink-2); }
.sx { padding: 0 0 10px 62px; }
.sx > p { margin-top: 6px; line-height: 1.5; max-width: 62ch; }
.zbar { display: flex; gap: 1px; height: 8px; margin-top: 6px; }
.zbar.mini { height: 5px; max-width: 160px; }
.zbar span { background: var(--c); }
.zbar.empty { background: var(--line); }
.spark { margin-top: 8px; }
.mapwrap { border-radius: 8px; background: var(--sheet); margin-top: 8px; }
/* OpenStreetMap's credit at the map's foot, only when its data drew the map (HOUSE 4.15 exception 1) */
.mapcredit { margin-top: 4px; font-size: 10.5px; color: var(--ink-2); }
.mapwrap .tiles { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.mapwrap .tiles img { position: absolute; display: block; pointer-events: none; user-select: none; }
.mapwrap .tiles.dark { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92); }
.mapwrap > svg { position: absolute; inset: 0; }
.route-out { fill: none; stroke: var(--ink-3); stroke-width: 2.5; opacity: .45; stroke-linejoin: round; stroke-linecap: round; }
.route-casing { fill: none; stroke: var(--sheet); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.start { fill: var(--ink); stroke: var(--sheet); stroke-width: 2; }
.finish { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.maprange { margin-top: 8px; }
.range-label { font-size: 12.5px; }
.profile { position: relative; padding: 0 22px; margin-top: 4px; }
.profile svg { display: block; width: 100%; height: 64px; touch-action: pan-y; }
.profile .ymax, .profile .ymin { position: absolute; right: 24px; font-size: 10.5px; color: var(--ink-2); pointer-events: none; }
.profile .ymax { top: 0; }
.profile .ymin { bottom: 2px; }
.pdot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 2px solid var(--sheet); transform: translate(-50%, -50%); pointer-events: none; }
.ramp { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 10.5px; color: var(--ink-2); }
.ramp i { flex: 1 1 auto; height: 6px; outline: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent); }

/* a problem with the data is a sentence on a plate, never a blank pane */
.notice { position: absolute; left: 50%; top: 40%; 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); line-height: 1.4; text-align: center; }
.notice.kept { position: fixed; }
.notice-lines { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }

/* ── About: a full-height sheet ── */
.about { position: fixed; inset: 0; z-index: 20; }
.about-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%); } }
.about-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); }
.about-head h2 { font-size: 15px; font-weight: 650; }
.about .textkey::before { border: 0; }
.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-bottom: 6px; font-size: 13.5px; font-weight: 650; }
.about-body p { line-height: 1.5; }
.about-body 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-body dd { overflow-wrap: anywhere; }
.about-foot { margin-top: 8px; }

@media (hover: hover) {
  .tabs button:hover, .words button:hover, .wordrow > button:hover, .stamp:hover, .howto > summary:hover, .readout-close:hover, .aboutlink:hover { color: var(--ink); }
  .textkey:hover::before, .sess:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
}
/* a phone on its side: the header is one row */
@media (orientation: landscape) and (max-height: 500px) {
  .head { grid-template-columns: max-content minmax(0, 1fr); 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; }
  .tabs { grid-area: 1 / 2 / 3 / 3; align-self: center; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}