/* The ground every room stands on: reset, type, and the few primitives
   every room uses (icons, icon buttons, rows, the frost). Numbers come from
   tokens.css; the rules behind them are DESIGN.md §3-§8. */

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color-scheme: dark; font-optical-sizing: auto; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 var(--t-md)/var(--lh-ui) var(--sans);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; }
/* the home-screen app: iOS hands a page a viewport a status bar short until its root scrolls, then the
   whole screen; a document at least the large viewport tall lets app.js's nudge get it (DESIGN.md §5) */
html.app, html.app body { min-height: 100lvh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea, select { font: inherit; color: var(--ink); }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-wash); }
.serif { font-family: var(--serif); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.offscreen { position: fixed; opacity: 0; pointer-events: none; }   /* lib/copy.js's textarea */

/* an icon from the sprite: icon(name) in lib/icon.js, <svg class="i"><use href="…/icons.svg#name"></use></svg> */
svg.i { width: var(--icon-md); height: var(--icon-md); display: block; flex: none; fill: currentColor; }
svg.i.sm { width: var(--icon-sm); height: var(--icon-sm); }

/* an icon button: a 44px target and, on hover, a plate in the icon's own
   shape: a tight rounded rect centred in the target, never a circle. It
   darkens on press and never stays lit after a click; only a real
   selection does (aria-pressed, aria-current). */
.ib { position: relative; flex: none; width: var(--hit); height: var(--hit); display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); transition: color var(--d-fast); }
.ib::before { content: ""; position: absolute; inset: calc((var(--hit) - var(--plate)) / 2); border-radius: var(--r-ctl);
  background: var(--fill); opacity: 0; transition: opacity var(--d-fast); }
.ib > * { position: relative; }
@media (hover: hover) { .ib:hover { color: var(--ink); } .ib:hover::before { opacity: 1; } }
.ib:active::before, .ib[aria-pressed="true"]::before { opacity: 1; background: var(--fill-2); }
.ib[aria-pressed="true"] { color: var(--ink); }

/* a row in a card: plates at --r-ctl, so they sit concentric in a card
   padded by --card-pad; its icon sits in the same column as a plate's */
.row { display: flex; align-items: center; gap: var(--s-3); min-height: 36px; padding: 0 4px 0 calc((var(--plate) - var(--icon-md)) / 2);
  border-radius: var(--r-ctl); color: var(--ink-2); transition: background var(--d-fast), color var(--d-fast); }
@media (hover: hover) { .row:hover { background: var(--fill); color: var(--ink); } }
.row:active { background: var(--fill-2); }
.row[aria-current="page"] { background: var(--fill-2); color: var(--ink); }

/* the search grammar's worked examples (lib/grammar.js): in home's popover and on the search page.
   Each example is a plate concentric with the popover's corners (24 = 10 + 14), so it sits flush with its padding. */
.grammar { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-3); align-items: baseline; }
.grammar dt { display: flex; }
.grammar dd { font-size: var(--t-sm); color: var(--ink-2); }
.exq { font: 450 var(--t-sm)/1.5 var(--mono); color: var(--ink); border-radius: var(--r-ctl); padding: 5px var(--s-2); }
@media (hover: hover) { .exq:hover { background: var(--fill); } }

/* a segmented control: plates concentric inside their track (Covers/List, Speed's presets) */
.seg { --seg-pad: 3px; display: inline-flex; gap: 2px; padding: var(--seg-pad); border-radius: var(--r-ctl); background: var(--fill); }
.seg button { height: 30px; padding: 0 var(--s-3); text-align: center; border-radius: calc(var(--r-ctl) - var(--seg-pad)); font: 500 var(--t-sm) var(--sans); color: var(--ink-2);
  font-variant-numeric: tabular-nums; transition: background var(--d-fast), color var(--d-fast); }
@media (hover: hover) { .seg button:hover { color: var(--ink); } }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--fill-2); color: var(--ink); }

/* the play pill: Play, Play all, Resume — 3 · 4:12. Ink, like the composer's send */
.playpill { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; max-width: 100%; padding: 0 var(--s-4) 0 var(--s-3); border-radius: var(--r-ctl);
  background: var(--ink); color: var(--bg); font: 500 var(--t-md) var(--sans); transition: opacity var(--d-fast); }
.playpill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .playpill:hover { opacity: .88; } }
.playpill:active { opacity: .76; }

/* the one frost: blur, saturation, a flat tint and a hairline, nothing else */
.frost { background: var(--frost); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter);
  box-shadow: var(--frost-edge), var(--shadow-float); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}