/*
 * The two things the design system still leans on this global sheet for: the body
 * scroll-lock behind an open overlay + the shared AudioBar, and the standalone
 * server-rendered unsubscribe page (.acct*). Everything the SPA draws itself now lives
 * in per-component vanilla-extract modules (app/javascript/ealta/components/*.css.ts);
 * the old server-rendered nav pills, collage web view (.gcollage/.collage-tip) and
 * stats/atlas page were removed from here once the SPA superseded them. Keep this file
 * to these two concerns — component styles belong in that component's .css.ts.
 */

/* Scroll-lock while the species-detail overlay is open. The overlay itself — shell,
   head, lore, recordings, call playback — is styled by the design system; see
   components/species.css.ts. Only the shared AudioBar keeps its .audiobar rules below. */
body.modal-open { overflow: hidden; }

/* Call playback — a borderless inline bar, not the native pill: a bare play/pause
   mark, the label, a thin seek line, a running clock, and a mute toggle. */
.audiobar { display: flex; align-items: center; gap: var(--sp-3); }
.audiobar-btn {
  flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); line-height: 0;
}
.audiobar-btn svg { width: var(--icon); height: var(--icon); display: block; }
.audiobar-btn:hover { color: var(--accent-2); }
.audiobar-btn:focus-visible, .audiobar-mute:focus-visible, .audiobar-seek:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.audiobar-seek {
  flex: 1 1 auto; position: relative; height: var(--sp-4); cursor: pointer;
  display: flex; align-items: center;
}
/* A hairline track with a thin filled lead — the panel's one thread of motion. */
.audiobar-track { position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); }
.audiobar-fill { position: absolute; left: 0; height: 1px; background: var(--ink-2); }
.audiobar-head {
  position: absolute; top: 50%; width: var(--dot); height: var(--dot); border-radius: var(--radius-pill);
  background: var(--ink); transform: translate(-50%, -50%);
}
.audiobar-time {
  flex: 0 0 auto; font: var(--ms-sm) var(--mono);
  color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-label);
}
.audiobar-mute {
  flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-soft); line-height: 0;
}
.audiobar-mute svg { width: var(--icon); height: var(--icon); display: block; }
.audiobar-mute:hover { color: var(--ink); }

/* ── Account / alerts page (server-rendered /account, and the standalone unsubscribe) ── */
/* A full-height scrolling document, but it shares the application layout with panel.css's
   fixed wall shell (body overflow:hidden). Undo that — scoped to the page — so it scrolls.
   It also carries the language switch, so its .lang-* spans need the same show/hide the
   SPA gets from editorial.css. */
body:has(.acct) { overflow-y: auto; overflow-x: hidden; height: auto; min-height: 100%; position: static; }
[data-lang="en"] .acct .lang-ga { display: none; }
[data-lang="ga"] .acct .lang-en { display: none; }
.acct {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: var(--sp-7) var(--page-gutter) var(--sp-9);
  color: var(--ink);
}
.acct-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.acct-home {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-decoration: none;
}
.acct-h1 { font-size: var(--fs-xl); margin: var(--sp-4) 0 var(--sp-1); }
.acct-lead { color: var(--ink-2); margin: 0 0 var(--sp-2); }
/* The Account drawer + Admin workspace are on the design system now; see
   components/account.css.ts, sidepanel.css.ts, admin.css.ts. Only the standalone
   unsubscribe page's .acct / .acct-top / .acct-home / .acct-h1 / .acct-lead remain above. */