/* The Background Noises web player: the simple player in the browser (bgnoises simple-player aec6059
   legacy/5x-mobile/SIMPLE-PLAYER.md 1.2 to 1.13 and section 8). eleMusic's dark palette, value for value (1.13:
   eleMusic mobile/src/ui/theme.ts and web/play.html): ground, panels, text, the gold accent with dark text on it,
   hairlines for structure and a stronger edge for things you tap or type in. Tap targets 48 px, radii 14 for
   cards, 10 for art, 20 for large art. Motion is a fade and pressed opacity, nothing that loops but the video.
   No inline styles anywhere (the page's policy is style-src 'self'). */

:root {
  --bg: #0b0d12;
  --panel: #121620;
  --panel2: #0d1017;
  --fg: #f3f1ea;
  --muted: #9aa3ad;
  --accent: #e8c36b;
  --on-accent: #151515;
  --line: #2a3446;
  --edge: #55647f;
  --ok: #5fd39a;
  --err: #f08a7a;
  --warn: #e8c36b;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --tap: 48px;
  --tap-small: 44px;
  --r-card: 14px;
  --r-art: 10px;
  --r-field: 12px;
  --gutter: 16px;
  --now-h: 0px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
body.has-now { padding-bottom: calc(var(--now-h) + 12px); }
body:has(dialog.stage[open]) { overflow: hidden; }
img { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.muted { color: var(--muted); }
.small-text { font-size: 13px; line-height: 18px; }
.err-text { color: var(--err); }
.ok-text { color: var(--ok); }

/* --- header ------------------------------------------------------------------------------------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)) 8px calc(var(--gutter) + env(safe-area-inset-left, 0px));
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 13, 18, 0.94);
}
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -0.2px; min-height: var(--tap); min-width: 0; }
.mark:hover { color: var(--fg); }
.mark-icon { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; }
.wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.iconbtn:hover { background: rgba(255, 255, 255, 0.08); }
.iconbtn:active { opacity: 0.85; }
.iconbtn.small { width: var(--tap-small); height: var(--tap-small); }
#gear[aria-expanded="true"] { color: var(--accent); }

/* --- page ----------------------------------------------------------------------------------------- */
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 4px calc(var(--gutter) + env(safe-area-inset-right, 0px)) 28px calc(var(--gutter) + env(safe-area-inset-left, 0px)); }
.msg { max-width: 1080px; width: 100%; margin: 0 auto; padding: 0 var(--gutter); min-height: 0; font-size: 14px; }
.msg:not(:empty) { padding-top: 10px; padding-bottom: 4px; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--ok); }
.offline-note { color: var(--warn); font-size: 13px; margin-bottom: 12px; }

/* --- the grid (1.2): groups of square stills with the name on a band ------------------------------- */
.group { margin-top: 18px; }
.group > h2 { font-size: 20px; line-height: 26px; font-weight: 700; margin: 0 0 10px; }
.tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .tiles.g-tones { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-card);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.tile:active { opacity: 0.85; }
.tile.pending { opacity: 0.55; }
.tile[aria-current="true"] { border-color: var(--accent); }
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the name on a 60 percent band: about 5:1 over the whitest still (the completeness check's CC-22) */
.tile-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bars { position: absolute; top: 10px; right: 10px; display: none; align-items: flex-end; gap: 3px; height: 16px; padding: 4px 5px; box-sizing: content-box; border-radius: 6px; background: rgba(0, 0, 0, 0.6); }
.bars i { display: block; width: 3px; border-radius: 1.5px; background: var(--accent); }
.bars i:nth-child(1) { height: 9px; }
.bars i:nth-child(2) { height: 16px; }
.bars i:nth-child(3) { height: 12px; }
.tile[aria-current="true"] .bars { display: inline-flex; }
.empty { padding: 32px 0; display: grid; gap: 12px; justify-items: start; }

/* --- buttons and fields --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { opacity: 0.85; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--edge); }
.btn.ghost:hover { border-color: var(--fg); }
.btn.danger { background: #b3261e; color: #fff; }
.btn.small { min-height: var(--tap-small); padding: 0 14px; font-size: 14px; font-weight: 600; }
.btn.block { width: 100%; }
.btn.busy { opacity: 0.6; pointer-events: none; }
.linkbtn { background: none; border: 0; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: var(--tap-small); padding: 0 4px; }
.linkbtn:hover { color: var(--fg); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.center { justify-content: center; }
.stack > * + * { margin-top: 12px; }
label.field { display: block; font-size: 14px; color: var(--muted); max-width: 520px; }
label.field + label.field { margin-top: 12px; }
label.field > span { display: block; margin-bottom: 6px; }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  border-radius: var(--r-field);
  border: 1px solid var(--edge);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
input:focus-visible { border-color: var(--accent); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg); line-height: 1.45; }
.check input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent); }
.panel > .check { margin-bottom: 14px; }
input[type="range"] { width: 100%; accent-color: var(--accent); min-height: var(--tap-small); }

/* --- Settings (1.8, 1.9) -------------------------------------------------------------------------- */
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 8px; }
.view-head h1 { font-size: 28px; line-height: 34px; letter-spacing: -0.3px; }
.view-head h1:focus { outline: none; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; margin-bottom: 12px; scroll-margin-top: 72px; }
.panel h2 { margin: 0 0 10px; font-size: 18px; line-height: 24px; }
.panel p + p { margin-top: 8px; }
.panel > .row { margin-top: 10px; }
.panel details summary { display: list-item; padding: 11px 0; cursor: pointer; font-weight: 600; }
.panel details summary::marker { color: var(--muted); }
.panel details[open] summary { margin-bottom: 10px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.panel-head .v { font-weight: 700; font-size: 17px; }
.row-kv { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; min-height: 32px; font-size: 15px; }
.row-kv .k { color: var(--muted); }
.row-kv .v { font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.offer { margin-top: 14px; padding: 16px; border: 1px solid var(--edge); border-radius: var(--r-card); background: var(--panel2); scroll-margin-top: 72px; }
.offer h3 { font-size: 18px; line-height: 24px; }
.options { border: 0; display: grid; gap: 8px; margin: 14px 0 12px; }
.option { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-field); cursor: pointer; }
.option:has(input:checked) { border-color: var(--accent); }
.option input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.option-name { flex: 1 1 auto; font-weight: 600; }
/* the billed amount reads at least as large as the button's words (CC-12) */
.option-price { font-size: 17px; font-weight: 700; }
.offer-terms { font-size: 16px; line-height: 22px; color: var(--fg); margin-bottom: 12px; }
.offer .btn.block + p { margin-top: 10px; }
.danger-zone { border-color: #6b1d18; }
/* Help: how each group of sounds is made (PLAY-08) */
.made { display: grid; gap: 8px; margin: 12px 0; }
.made dt { font-weight: 600; color: var(--fg); }
.made dd { color: var(--muted); }
/* the Terms panel (needs_terms): part of the page above the views, never a modal (auth.js syncTermsGate); the
   margin keeps it clear of the sticky header when a held attempt scrolls to it */
.gate { border-color: var(--accent); margin-top: 8px; scroll-margin-top: 72px; }
.gate h2 { font-size: 20px; line-height: 26px; }
.gate p { max-width: 70ch; }
.gate > .check { margin-top: 12px; }
.gate > .row { margin-top: 12px; }
.gate:focus { outline: none; }
.gate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- the now bar (1.3) ---------------------------------------------------------------------------- */
.now {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 8px calc(12px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
  background: var(--panel);
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .now { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; } }
.now-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 4px; border: 0; border-radius: var(--r-art); background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.now-open:active { opacity: 0.85; }
.now-art { width: 48px; height: 48px; border-radius: var(--r-art); object-fit: cover; background: var(--panel2); flex: 0 0 auto; }
.now-text { min-width: 0; display: flex; flex-direction: column; }
.now-title { font-weight: 700; font-size: 16px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; font-variant-numeric: tabular-nums; }

/* round play and pause, drawn from borders (no glyph font, no image) */
.round, .bigplay {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
.bigplay { width: 72px; height: 72px; }
.round:active, .bigplay:active { opacity: 0.85; }
.round::before, .bigplay::before { content: ""; position: absolute; inset: 0; margin: auto; }
[data-state="play"]::before { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; transform: translateX(2px); }
.bigplay[data-state="play"]::before { border-width: 13px 0 13px 21px; transform: translateX(3px); }
[data-state="pause"]::before { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.bigplay[data-state="pause"]::before { width: 20px; height: 24px; border-left-width: 7px; border-right-width: 7px; }
[data-state="loading"]::before { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.9s linear infinite; }
.bigplay[data-state="loading"]::before { width: 28px; height: 28px; border-width: 3px; }
.bigplay[data-state="retry"]::before { width: 26px; height: 26px; border-radius: 50%; border: 3px solid currentColor; border-top-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- the full-screen player (1.4; Josh's layout of 2026-10-20, the plan's PLAY-03) ------------------------
   The same for every sound at every size. The video or its still fills the screen (object-fit cover) and nothing
   dims it as a whole. The close control sits on a disc over a light fade at the top. The name, the quiet line, the
   transport, Flag this track, the end card, the timer and volume row and Powered by eleMusic are one block over a
   dark fade at the bottom: transparent at the block's top edge, --fade-text black where its first line starts
   (--lead lower) and --fade-end at the bottom. Every word in the block is light (--fg, #f3f1ea): over a pure white
   frame 62 percent black gives it about 5.5:1, more than the 4.5:1 WCAG 2.2 asks of small text, and the 28 px name
   needs about 42 percent for 3:1; tests/fade-check.cjs measures the page over every still and any frames given. The
   gold fills only the play button (about 3.4:1 against that fade over white, 3:1 being the bar for a control). Icons
   sit on discs of 60 percent black. A short landscape window puts the block in a right-hand column, the fade
   coming in from its left edge. */
.stage {
  --lead: clamp(88px, 16vh, 140px);
  --lead-x: 64px;
  --fade-text: 0.62;
  --fade-end: 0.8;
  --disc: rgba(0, 0, 0, 0.6);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  color: var(--fg);
  overflow: hidden;
}
.stage[open] { display: block; }
.stage::backdrop { background: #000; }
.stage-media { position: absolute; inset: 0; }
.stage-still, .stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-video { opacity: 0; transition: opacity 0.6s ease; }
.stage-video.ready { opacity: 1; }
.stage-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)) 40px calc(var(--gutter) + env(safe-area-inset-left, 0px));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.stage-top > * { pointer-events: auto; }
.stage .iconbtn { color: #fff; background: var(--disc); }
.stage .iconbtn:hover { background: rgba(0, 0, 0, 0.75); }
.stage-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--lead) calc(var(--gutter) + env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) calc(var(--gutter) + env(safe-area-inset-left, 0px));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, var(--fade-text)) var(--lead), rgba(0, 0, 0, var(--fade-end)) 100%);
  background-attachment: local;
  text-align: center;
}
.stage-main, .stage-rest { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stage-rest { max-width: 720px; gap: 0; }
.stage-title { max-width: 100%; font-size: 28px; line-height: 34px; font-weight: 700; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.stage-quiet { min-height: 22px; max-width: 100%; font-size: 16px; line-height: 22px; color: var(--fg); overflow-wrap: anywhere; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.stage-quiet .stage-status:empty, .stage-quiet .stage-line:empty { display: none; }
/* the transport (PLAY-04): Rewind and Skip at 56 px on discs around the 72 px play and pause */
.transport { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 6px 0 2px; }
.skipbtn { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--disc); color: #fff; cursor: pointer; }
.skipbtn:active { opacity: 0.85; }
.skipbtn[aria-disabled="true"], .stage-flag .linkbtn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.stage-flag { min-height: var(--tap-small); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--fg); }
.stage-flag:has(> .linkbtn[hidden]):has(> [role="status"]:empty) { display: none; }
.stage .linkbtn { color: var(--fg); }
/* the timer and the volume; one of them alone is centered (no timer on a sample, no volume where it is not scriptable) */
.stage-controls { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stage-controls:has(> [hidden]) { justify-content: center; }
.stage-controls:not(:has(> :not([hidden]))) { display: none; }
.timerbtn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); min-width: var(--tap); padding: 0 14px; border: 0; border-radius: 999px; background: var(--disc); color: #fff; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.timerbtn:active { opacity: 0.85; }
.volume { flex: 0 1 260px; display: flex; align-items: center; }
.stage .volume { min-height: var(--tap); padding: 0 14px; border-radius: 999px; background: var(--disc); }
.powered { text-align: center; font-size: 13px; }
.powered a { display: inline-flex; align-items: center; min-height: var(--tap-small); color: var(--muted); text-decoration: none; }
.powered a:hover { color: var(--fg); text-decoration: underline; }
.stage-powered a, .stage-powered a:hover { color: var(--fg); }
/* the end card (1.5): in the block, in place of the name, the quiet line and the transport */
.endcard { width: 100%; max-width: 360px; display: grid; gap: 12px; padding: 2px 0 8px; text-align: center; color: var(--fg); }
.endcard h3 { font-size: 20px; line-height: 26px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
/* a short landscape window: the block is a right-hand column, the video shows on the left */
@media (orientation: landscape) and (max-height: 520px) {
  .stage { --column: min(440px, 56%); }
  .stage-top { right: var(--column); } /* its light fade stays over the video, never over the column's words */
  .stage-panel {
    top: 0;
    left: auto;
    width: var(--column);
    max-height: none;
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) var(--lead-x);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, var(--fade-text)) var(--lead-x), rgba(0, 0, 0, var(--fade-end)) 100%);
  }
  /* centered in the column, and scrolled from the top when it is taller than the window */
  .stage-panel::before, .stage-panel::after { content: ""; flex: 1 1 0; }
}

/* --- dialogs and sheets --------------------------------------------------------------------------- */
.dlg {
  margin: auto;
  width: min(520px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--edge);
  background: var(--panel);
  color: var(--fg);
  box-shadow: var(--shadow);
}
.dlg::backdrop { background: rgba(0, 0, 0, 0.6); }
.dlg h2 { font-size: 22px; line-height: 28px; margin-bottom: 8px; padding-right: 72px; }
.dlg p { color: var(--muted); }
.dlg p + p { margin-top: 8px; }
.dlg form > * + * { margin-top: 14px; }
.dlg .close { position: absolute; top: 10px; right: 10px; }
.dlg .choices { display: grid; gap: 8px; }
.dlg .row { margin-top: 14px; }
.sheet { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; width: min(560px, 100vw); padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 600px) { .sheet { margin-bottom: auto; border-radius: 18px; } }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.chip { min-height: var(--tap); border: 1px solid var(--edge); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.chip:active { opacity: 0.85; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.provider { width: 100%; }

/* --- footer --------------------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
.foot nav { max-width: 1080px; margin: 0 auto; padding: 0 calc(var(--gutter) + env(safe-area-inset-right, 0px)) 0 calc(var(--gutter) + env(safe-area-inset-left, 0px)); display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; font-size: 13px; }
.foot nav a { color: var(--muted); display: inline-flex; align-items: center; min-height: var(--tap-small); }
.foot nav a:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}