/*
 * css/base.css  ·  reset, type utilities, chips/pills/buttons, focus, skip links, sr-only
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--dusk-900); color: var(--cream);
  font: 400 15px/1.5 var(--f-ui); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  font-variant-numeric: lining-nums tabular-nums;
}
img, video, canvas { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
a { color: inherit; }
[hidden] { display: none !important; }
p, h1, h2, h3, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Focus is always visible on interactive elements, never removed */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ember-300); outline-offset: 3px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-links { position: fixed; z-index: var(--z-skip); left: 0; top: 0; }
.skip {
  position: fixed; left: calc(12px + var(--safe-l)); top: 12px; transform: translateY(-160%);
  padding: 12px 16px; border-radius: var(--r-card); background: var(--linen-50); color: var(--ink-900);
  font: 600 14px/1 var(--f-ui); text-decoration: none; box-shadow: var(--sh-panel);
}
.skip:focus, .skip:focus-visible { transform: none; outline-offset: 2px; }
#skip-library:focus { left: calc(200px + var(--safe-l)); }

/* Chips & pills: 44 px touch targets, opaque panels (no glass) */
.chip, .pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px;
  border-radius: var(--r-chip); background: rgba(26, 20, 16, .82); border: 1px solid var(--haze); color: var(--cream);
  font: 500 13px/1 var(--f-ui); letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  transition: border-color var(--t-breath) var(--ease-breath), background-color var(--t-breath) var(--ease-breath), transform var(--t-press) var(--ease-press);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover, .pill:hover { background: var(--dusk-700); border-color: rgba(242, 178, 108, .45); }
}
.chip:active, .pill:active { transform: scale(.97); }
.chip[aria-expanded="true"] { border-color: var(--ember-300); }

.noscript, .boot-error {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 32px; margin: 0; text-align: center;
  font: italic 400 22px/1.4 var(--f-text); color: var(--cream); background: var(--dusk-900); z-index: 200;
}