/* ── Chirp · Conservatory ───────────────────────────────────────────────────────────────────────────────────
   One deep-forest room where listening happens; everything you keep (your session, the birds, settings) lives on
   warm cream pages below it. A condensed serif speaks at display size, a text serif does the rest. Lime green is
   only ever an action — the Listen button, links, the "live" dot. Flat: no shadows, no gradients; separation comes
   from the cream → oat surface step and 8px corners. */
:root {
  --linen: #f7f5f2;   /* page */
  --oat: #eae6df;     /* cards */
  --drift: #d7d2cc;   /* hairlines */
  --mauve: #645757;   /* secondary text */
  --hush: #504344;
  --plum: #2a1a1d;    /* text */
  --forest: #1d3023;  /* the room */
  --lime: #26d862;    /* action */
  --teal: #0e634f;    /* numbers */
  --on-forest: #f7f5f2; --on-forest-2: rgba(247,245,242,.74); --on-forest-3: rgba(247,245,242,.5); --forest-line: rgba(247,245,242,.2);
  --display: 'Instrument Serif', 'DM Serif Display', Georgia, serif;
  --text: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --r-sm: 4px; --r: 8px;
  --gutter: clamp(16px, 4vw, 56px); --max: 1200px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--linen); }
body {
  background: var(--linen); color: var(--plum);
  font: 400 16px/1.5 var(--text); letter-spacing: -.01em; -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto; overscroll-behavior-y: none;
}
button, select, input, a { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: var(--r-sm); }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.kicker { font-size: 12px; line-height: 1.18; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); }
.inline { color: inherit; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.inline:hover { color: var(--teal); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex-shrink: 0; animation: live 1.8s ease-in-out infinite; }

/* ── Buttons ── */
.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--plum); border-radius: var(--r); font-size: 15px; color: var(--plum); transition: background .15s, color .15s;
}
.ghost:hover { background: var(--oat); }
.ghost.on-dark { border-color: var(--forest-line); color: var(--on-forest); }
.ghost.on-dark:hover { background: rgba(247,245,242,.08); border-color: var(--on-forest-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: var(--r); font-size: 16px; text-decoration: none; white-space: nowrap; transition: background .15s; }
.btn.primary { background: var(--lime); color: var(--plum); }
.btn.primary:hover { background: #3be373; }
.btn.ghost { border: 1px solid var(--plum); }
.btn.small { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.row .btn { flex: 1 1 auto; }

/* ── Top bar: sits in the room on the page grid — the light logo, where Chirp is listening, settings ── */
.bar {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: calc(64px + var(--safe-t)); padding: var(--safe-t) var(--gutter) 0;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar-logo { display: flex; align-items: center; border-radius: var(--r-sm); }
.bar-logo img { height: 26px; width: auto; }
.bar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-logo { flex-shrink: 0; }
.round { flex-shrink: 0; }
.place, .round {
  height: 40px; border: 1px solid var(--forest-line); color: var(--on-forest);
  background: rgba(29,48,35,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s, background .2s;
}
.place { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; border-radius: 20px; font-size: 15px; min-width: 0; }
.place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place .i { width: 16px; height: 16px; color: var(--on-forest-2); }
.place small { color: var(--on-forest-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.round { width: 40px; border-radius: 50%; display: grid; place-items: center; }
.round .i { width: 18px; height: 18px; }
.place:hover, .round:hover { border-color: var(--on-forest-2); background: rgba(247,245,242,.08); }
.badge { display: none; }

/* ── The room ── */
.app { display: block; }
.field, .room {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  background: var(--forest); color: var(--on-forest);
}
.room::after, .splash::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); background-size: 180px 180px; opacity: .1; mix-blend-mode: overlay;
}
#viz { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; z-index: 0; }
#viz.grabbing { cursor: grabbing; }

.room-head {
  position: absolute; z-index: 2; left: 0; right: 0; top: calc(76px + var(--safe-t));
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.room-head .kicker { color: var(--on-forest-3); margin-bottom: 20px; }
.display {
  font: 400 clamp(84px, 24vw, 180px)/.85 var(--display); letter-spacing: -.03em; color: var(--on-forest);
  margin-left: -.03em; padding-bottom: .14em;
}
.display em { font-style: italic; color: var(--oat); }
.lede { margin-top: 16px; max-width: 420px; font-size: 18px; line-height: 1.5; color: var(--on-forest-2); }
body[data-mode="listening"] .room-head, body[data-mode="analyzing"] .room-head, body.has-bird .room-head { opacity: 0; transform: translateY(-14px); }

/* ── Singing now: a specimen card on the dark room ── */
.now-wrap {
  position: absolute; z-index: 3; left: 0; right: 0; top: calc(72px + var(--safe-t));
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none;
}
.now-wrap > * { pointer-events: auto; }
.now {
  width: min(520px, 100%); display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: stretch; text-align: left;
  background: var(--linen); color: var(--plum); border-radius: var(--r); padding: 8px 16px 8px 8px;
  animation: rise .45s cubic-bezier(.2,.8,.2,1); position: relative;
}
.now-photo { width: 96px; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--oat); }
.now-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.now-photo img.loaded { opacity: 1; }
.now-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 4px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); }
.now-name { font: 400 clamp(30px, 8vw, 44px)/.95 var(--display); letter-spacing: -.02em; color: var(--plum); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.now-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--mauve); }
.now-meta #now-conf { font: 400 22px/1 var(--display); color: var(--teal); }
.now-meta i { font-size: 14px; }
.now-more { position: absolute; right: 14px; bottom: 10px; font-size: 13px; color: var(--plum); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.now:hover .now-more { color: var(--teal); }
.also, .maybe { font-size: 15px; color: var(--on-forest-2); max-width: 520px; }
.also b, .maybe b { color: var(--on-forest); font-weight: 500; }
.maybe small { color: var(--on-forest-3); font-size: 13px; }
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--plum); background: var(--oat); padding: 6px 12px; border-radius: var(--r-sm); }
.tag small { color: var(--mauve); }

.readout {
  position: absolute; z-index: 2; right: var(--gutter); top: calc(72px + var(--safe-t));
  display: grid; gap: 4px; font-size: 13px; color: var(--on-forest-3); min-width: 220px;
  border-top: 1px solid var(--forest-line); padding-top: 8px; font-variant-numeric: tabular-nums;
}
.readout div { display: flex; justify-content: space-between; gap: 16px; }
.readout dd { color: var(--on-forest); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Dock: the caption, the one lime action, and a quiet alternative ── */
.dock {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) calc(22px + var(--safe-b));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.caption { min-height: 44px; max-width: 440px; align-self: flex-start; text-align: left; text-wrap: balance; font-size: 16px; color: var(--on-forest-2); }
.caption b { color: var(--on-forest); font-weight: 500; }
.caption .link { color: var(--on-forest); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; padding: 0 2px; }
.dock .ghost.on-dark { width: min(360px, 100%); }

.listen {
  --lvl: 0; --p: 0;
  position: relative; overflow: hidden; width: min(360px, 100%); height: 60px; border-radius: var(--r);
  background: var(--lime); color: var(--plum); font-size: 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s, color .2s;
}
.listen:hover { background: #3be373; }
.listen:active { transform: scale(.985); }
.listen .i { width: 20px; height: 20px; position: relative; }
.listen > span:not(.listen-level) { position: relative; }
.listen .i-stop, .w-stop, .w-wait { display: none; }
/* the live level fills the button from the left, like a meter */
.listen-level { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--lvl)); background: rgba(38,216,98,.22); opacity: 0; transition: transform .08s linear, opacity .3s; }
.listen-progress { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 3px; display: none; }
.listen-progress line { stroke: var(--lime); stroke-width: 4; stroke-dasharray: var(--p) 100; transition: stroke-dasharray .3s; }
.listen[data-state="loading"] { background: transparent; color: var(--on-forest-2); border: 1px solid var(--forest-line); }
.listen[data-state="loading"] .listen-progress, .listen[data-state="loading"] .w-wait { display: block; }
.listen[data-state="loading"] .w-go, .listen[data-state="loading"] .i-mic { display: none; }
/* listening: the button steps back to an outline — stopping is secondary to hearing */
.listen[data-state="listening"], .listen[data-state="analyzing"] { background: transparent; color: var(--on-forest); border: 1px solid var(--on-forest-2); }
.listen[data-state="listening"] .listen-level, .listen[data-state="analyzing"] .listen-level { opacity: 1; }
.listen[data-state="listening"] .i-mic, .listen[data-state="analyzing"] .i-mic, .listen[data-state="listening"] .w-go, .listen[data-state="analyzing"] .w-go { display: none; }
.listen[data-state="listening"] .i-stop, .listen[data-state="analyzing"] .i-stop, .listen[data-state="listening"] .w-stop, .listen[data-state="analyzing"] .w-stop { display: block; }
.listen[data-state="blocked"] { background: transparent; color: var(--on-forest); border: 1px solid var(--forest-line); }

/* ── Your list: the cream column beside the room (docked under it on phones) ── */
.list { background: var(--linen); color: var(--plum); display: flex; flex-direction: column; min-height: 0; }
.list-head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; text-align: left;
  padding: 14px var(--gutter) 12px; border-bottom: 1px solid var(--drift); flex-shrink: 0;
}
.list-grip { display: none; }
.list-title { font: 400 32px/1 var(--display); letter-spacing: -.02em; color: var(--plum); }
.list-title .count { font: 400 32px/1 var(--display); color: var(--teal); margin-left: 4px; }
.list-sum { grid-column: 1 / -1; font-size: 14px; color: var(--mauve); }
.list-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gutter) calc(16px + var(--safe-b)); }

.heard-list { list-style: none; }
.heard-list > li { border-bottom: 1px solid var(--drift); }
.entry { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px 0; }
.row-btn { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; text-align: left; min-width: 0; }
.thumb { width: 56px; height: 56px; border-radius: var(--r); overflow: hidden; background: var(--oat); display: grid; place-items: center; font: 400 26px/1 var(--display); color: var(--mauve); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-name { font: 400 24px/1.02 var(--display); letter-spacing: -.015em; color: var(--plum); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row-btn:hover .row-name { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.row-meta { font-size: 13px; color: var(--mauve); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row-pct { color: var(--teal); font-variant-numeric: tabular-nums; }
.pill-live { display: inline-flex; align-items: center; gap: 6px; color: var(--plum); }
.pill-live .live-dot { width: 7px; height: 7px; }
/* verdict: two small square buttons per bird */
.verdict { display: flex; gap: 6px; }
.vbtn { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--drift); display: grid; place-items: center; color: var(--mauve); transition: background .15s, border-color .15s, color .15s; }
.vbtn .i { width: 17px; height: 17px; stroke-width: 1.8; }
.vbtn:hover { border-color: var(--plum); color: var(--plum); }
.vbtn.yes[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--plum); }
.vbtn.no[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: var(--linen); }
.entry.is-yes .row-meta .tick { color: var(--teal); }
.entry.is-no .row-btn { opacity: .45; }
.entry.is-no .row-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.entry.other .row-name { font-size: 19px; color: var(--hush); }
.list-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); padding: 20px 0 6px; }
.empty { color: var(--mauve); font-size: 15px; padding: 16px 0; max-width: 46ch; }
.empty b { color: var(--plum); font-weight: 500; }
.heard-foot { display: flex; gap: 8px; padding-top: 16px; }
.ghost.small { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.scrim { display: none !important; }

/* ── One screen: room + list ── */
html, body { height: 100%; overflow: hidden; }
.app { height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
.field, .room { height: auto; min-height: 0; }
/* phones: the list is docked under the room — a strip while empty, a third of the screen once birds arrive,
   most of it when opened */
.list { max-height: 16dvh; transition: max-height .4s cubic-bezier(.2,.8,.2,1); border-radius: var(--r) var(--r) 0 0; margin-top: -8px; position: relative; z-index: 4; }
.list[data-size="peek"] { max-height: calc(78px + var(--safe-b)); }
.list[data-size="peek"] .list-body { overflow: hidden; }
.list[data-size="half"] { max-height: 40dvh; }
.list[data-size="full"] { max-height: 82dvh; }
.list-grip { display: block; grid-column: 1 / -1; justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--drift); margin: -4px 0 6px; }
.list-head { cursor: pointer; }
.list[data-size="peek"] .list-head { border-bottom-color: transparent; }
body.has-list .lede { display: none; }
body.has-list .display { font-size: clamp(64px, 17vw, 120px); }
@media (min-width: 1024px) {
  .app { grid-template-rows: none; grid-template-columns: 1fr 420px; }
  .list, .list[data-size] { max-height: none; height: 100dvh; margin: 0; border-radius: 0; border-left: 1px solid var(--drift); }
  .list[data-size="peek"] .list-body { overflow-y: auto; }
  .list-grip { display: none; }
  .list-head { cursor: default; padding: 22px 28px 14px; min-height: 0; }
  .list-body { padding: 4px 28px 24px; }
  .bar { right: 420px; }
  body.has-list .lede { display: block; }
  body.has-list .display { font-size: clamp(120px, 11vw, 180px); }
  .toast { left: calc((100% - 420px) / 2); }
}

/* ── Dialogs: cream pages over the room ── */
.modal {
  border: 0; padding: 28px; margin: auto; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  border-radius: var(--r); background: var(--linen); color: var(--plum); overflow-y: auto; overscroll-behavior: contain;
}
.modal[open] { animation: rise .35s cubic-bezier(.2,.8,.2,1); }
.modal::backdrop { background: rgba(29,48,35,.72); }
.modal h1 { font: 400 clamp(40px, 9vw, 56px)/.95 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.modal h2 { font: 400 48px/.95 var(--display); letter-spacing: -.025em; }
.steps { margin: 20px 0 16px; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: baseline; background: var(--oat); border-radius: var(--r); padding: 14px 16px; color: var(--hush); }
.steps li::before { content: counter(s); font: 400 26px/1 var(--display); color: var(--teal); }
.steps b { color: var(--plum); font-weight: 500; }
.fine { font-size: 14px; color: var(--mauve); margin-bottom: 20px; }
.help-mic p { color: var(--hush); margin-top: 10px; }
.close, .sheet-head .icon-btn { width: 40px; height: 40px; border: 1px solid var(--plum); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--plum); }
.close:hover, .sheet-head .icon-btn:hover { background: var(--oat); }
@media (max-width: 719px) {
  .modal.sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r) var(--r) 0 0; max-height: 92dvh; padding-bottom: calc(24px + var(--safe-b)); }
  .modal.sheet[open] { animation: slide-up .4s cubic-bezier(.2,.8,.2,1); }
}

/* Bird details */
.bird { padding: 8px; }
.bird .close { position: absolute; top: 18px; right: 18px; z-index: 1; background: var(--linen); }
.bird-photo { aspect-ratio: 4/3; background: var(--oat); overflow: hidden; border-radius: var(--r); }
.bird-photo img { width: 100%; height: 100%; object-fit: cover; }
.bird-body { padding: 20px 16px 16px; }
.bird-body h2 { font-size: clamp(40px, 10vw, 56px); }
.sci { font-style: italic; color: var(--mauve); margin: 6px 0 18px; }
.meter { height: 6px; border-radius: 3px; background: var(--oat); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--teal); border-radius: inherit; }
.bird-conf { margin: 10px 0 18px; color: var(--hush); font-size: 15px; }
.bird-conf b { color: var(--plum); font-weight: 500; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.facts div { background: var(--oat); border-radius: var(--r); padding: 14px 16px; }
.facts dt { font-size: 13px; color: var(--mauve); }
.facts dd { font: 400 26px/1.05 var(--display); color: var(--teal); font-variant-numeric: tabular-nums; }

/* Settings */
.settings { padding: 0; }
.sheet-head { position: sticky; top: 0; z-index: 1; background: var(--linen); display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--drift); }
.set { padding: 22px 24px; border-bottom: 1px solid var(--drift); display: grid; gap: 12px; }
.set:last-child { border-bottom: 0; }
.set h3 { font: 400 26px/1.05 var(--display); letter-spacing: -.02em; }
.help { font-size: 14px; color: var(--mauve); }
.help a { color: var(--plum); text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.field-label { font-size: 14px; color: var(--hush); }
select {
  height: 46px; border-radius: var(--r); border: 1px solid var(--drift); padding: 0 36px 0 14px; width: 100%; font-size: 16px;
  background: var(--linen) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232a1a1d' stroke-width='1.3'/></svg>") no-repeat right 14px center;
  -webkit-appearance: none; appearance: none; color: var(--plum);
}
select:focus { border-color: var(--forest); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: var(--oat); border: 1px solid transparent; cursor: pointer; transition: border-color .15s, background .15s; }
.seg small { font-size: 13px; color: var(--mauve); }
.seg-5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.seg-5 span { align-items: center; padding: 10px 4px; }
.seg input:checked + span { background: var(--linen); border-color: var(--forest); color: var(--plum); }
.seg input:checked + span::before { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.seg-5 input:checked + span::before { top: 6px; right: 6px; }
.seg input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.set .btn.small { justify-self: start; }
.slider-row { display: flex; align-items: center; gap: 14px; }
.slider-row output { font: 400 26px/1 var(--display); color: var(--teal); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--drift); cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--forest); border: 3px solid var(--linen); box-shadow: 0 0 0 1px var(--forest); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--forest); border: 3px solid var(--linen); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 4px 0; }
.switch span { order: -1; }
.switch input { -webkit-appearance: none; appearance: none; width: 46px; height: 28px; border-radius: 14px; background: var(--drift); position: relative; flex-shrink: 0; cursor: pointer; transition: background .2s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--linen); transition: transform .25s cubic-bezier(.3,1.3,.5,1); }
.switch input:checked { background: var(--lime); }
.switch input:checked::after { transform: translateX(18px); }

/* Toast */
.toast {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(150px + var(--safe-b)); width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 16px;
  background: var(--linen); color: var(--plum); padding: 12px 12px 12px 16px; border-radius: var(--r); font-size: 15px;
  animation: rise .3s cubic-bezier(.2,.8,.2,1);
}
.toast button { color: var(--plum); padding: 6px 10px; border-radius: var(--r-sm); background: var(--lime); white-space: nowrap; }

/* ── Wider screens ── */
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .heard-list { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; }
}
@media (min-width: 1024px) {
  .heard-list { grid-template-columns: repeat(4, 1fr); }
  .room-head { top: calc(96px + var(--safe-t)); }
  .now-wrap { top: calc(96px + var(--safe-t)); }
}
@media (max-width: 440px) {
  .place small { display: none; }
}
@media (max-height: 660px) {
  .display { font-size: clamp(64px, 18vw, 120px); }
  .lede { display: none; }
  .caption { min-height: 0; }
}

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.minibar { animation-name: rise-x; }
@keyframes rise-x { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes slide-up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes live { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Animated logo (splash + first-visit guide) ───────────────────────────────────────────────────────
   Bird + location pin: the pin drops onto its spot under gravity, lands with a small squash and settles on
   a damped spring; the beak extends and the pupil springs into the eye ring; the wordmark rises out of a
   mask line letter by letter; the eye glances toward the word and blinks. Spring curves are real damped
   harmonic motion baked into CSS linear() easing (computed once, ζ/ω noted beside each). */
:root {
  --sp-settle: cubic-bezier(.3, 1.45, .5, 1);
  --sp-pop:    cubic-bezier(.3, 1.35, .5, 1);
  --sp-rise:   cubic-bezier(.25, 1.15, .45, 1);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --sp-settle: linear(0.0, 0.0503, 0.1794, 0.3558, 0.551, 0.7417, 0.9105, 1.0468, 1.1452, 1.2057, 1.2317, 1.229, 1.2051, 1.1672, 1.1226, 1.0771, 1.0353, 1.0003, 0.9739, 0.9564, 0.9473, 0.9456, 0.9495, 0.9572, 0.9672, 0.9779, 0.9881, 0.997, 1.004, 1.0089, 1.0117, 1.0127, 1.0123, 1.0108, 1.0086, 1.0061, 1.0037, 1.0015, 0.9996, 0.9983, 0.9975, 0.9971, 0.9971, 0.9973, 0.9978, 0.9983, 0.9989, 0.9995, 1);  /* ζ .42, ω 16 */
    --sp-pop:    linear(0.0, 0.0381, 0.1352, 0.2681, 0.4175, 0.5679, 0.7083, 0.8313, 0.9326, 1.0111, 1.0672, 1.103, 1.1216, 1.1263, 1.1205, 1.1077, 1.0906, 1.0716, 1.0527, 1.0351, 1.0199, 1.0074, 0.9977, 0.9909, 0.9867, 0.9845, 0.9841, 0.9849, 0.9866, 0.9888, 0.9912, 0.9936, 0.9958, 0.9977, 0.9992, 1.0004, 1.0012, 1.0017, 1.002, 1.002, 1.0019, 1.0017, 1.0014, 1.0011, 1.0008, 1.0005, 1.0003, 1.0001, 1);  /* ζ .55, ω 20 */
    --sp-rise:   linear(0.0, 0.0303, 0.1064, 0.2095, 0.3253, 0.4431, 0.5556, 0.6581, 0.7478, 0.8236, 0.8857, 0.9347, 0.972, 0.9992, 1.0179, 1.0296, 1.036, 1.0383, 1.0377, 1.0352, 1.0314, 1.027, 1.0225, 1.0181, 1.0141, 1.0105, 1.0074, 1.0049, 1.0029, 1.0014, 1.0003, 0.9995, 0.999, 0.9987, 0.9985, 0.9985, 0.9986, 0.9988, 0.9989, 0.9991, 0.9993, 0.9994, 0.9996, 0.9997, 0.9998, 0.9999, 0.9999, 1.0, 1);  /* ζ .72, ω 14 */
  }
}
.mlogo { --ink: #FFDADE; --beak: #D89C3A; --glint: #FFDADE; --spd: 1; width: 100%; height: auto; overflow: visible; display: block; }
.mlogo.on-light { --ink: #123B28; --beak: #D89B3A; --glint: #E8EDEB; }
.mlogo path, .mlogo ellipse, .mlogo circle { transform-box: fill-box; fill: var(--ink); }
.mlogo .ml-beak { fill: var(--beak); }
.mlogo .ml-glint { fill: var(--glint); }
.ml-eye { transform-box: fill-box; transform-origin: 50% 50%; }
.ml-mark { transform-origin: 50% 100%; }
.ml-pin, .ml-pinbody { transform-box: fill-box; }
.ml-pin { transform-origin: 50% 100%; }
.ml-pinbody { transform-origin: 50% 100%; }
.ml-beak { transform-origin: 0% 50%; }
.ml-pupil { transform-origin: 50% 50%; }
.ml-l { transform-origin: 50% 100%; }
.ml-shadow { fill: #000 !important; opacity: 0; transform-origin: 50% 50%; }
.mlogo.on-light .ml-shadow { fill: #123B28 !important; }

/* intro — runs when .play is added */
.mlogo.play .ml-pin       { animation: ml-fall calc(.42s * var(--spd)) cubic-bezier(.5, 0, .9, .55) both; }
.mlogo.play .ml-pinbody   { animation: ml-lean calc(.42s * var(--spd)) linear, ml-impact calc(1s * var(--spd)) calc(.42s * var(--spd)) var(--sp-settle) forwards; }
.mlogo.play .ml-shadow    { animation: ml-shadow calc(1.6s * var(--spd)) linear both; }
.mlogo.play .ml-beak      { animation: ml-beak calc(.7s * var(--spd)) calc(.56s * var(--spd)) var(--sp-pop) both; }
.mlogo.play .ml-eye       { animation: ml-pupil-in calc(.7s * var(--spd)) calc(.64s * var(--spd)) var(--sp-pop) both,
                                       ml-glance calc(.9s * var(--spd)) calc(1.75s * var(--spd)) ease-in-out,
                                       ml-blink .2s calc(2.7s * var(--spd)) ease-in-out; }
/* the chirp: three sound marks spring out of the I once the word is set */
.mlogo.play .ml-mark      { animation: ml-mark-in calc(.8s * var(--spd)) calc((1.3s + var(--i) * .07s) * var(--spd)) var(--sp-pop) both; }
.mlogo.play .ml-l         { animation: ml-rise calc(.9s * var(--spd)) calc((.7s + var(--i) * .065s) * var(--spd)) var(--sp-rise) both; }

/* idle — while waiting: a slow look around, an occasional blink, a small head tilt */
.mlogo.idle .ml-eye     { animation: ml-look 6s ease-in-out infinite; }
.mlogo.idle .ml-mark    { animation: ml-mark-pulse 6s calc(var(--i) * .07s) infinite; }
.mlogo.idle .ml-pinbody { animation: ml-tilt 6s infinite; }

@keyframes ml-fall    { from { transform: translateY(-190%); opacity: 0; } 12% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes ml-lean    { from, to { transform: rotate(-9deg); } }
/* starts squashed and leaning (the moment of impact), the spring carries it upright and round */
@keyframes ml-impact  { from { transform: scale(1.1, .86) rotate(-9deg); } to { transform: none; } }
@keyframes ml-shadow  { 0% { opacity: 0; transform: scale(.25); } 26% { opacity: .32; transform: scale(1.12, 1); } 40% { opacity: .26; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ml-beak    { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ml-pupil-in{ from { transform: scale(0); } to { transform: none; } }
@keyframes ml-glance  { 0%, 100% { transform: none; } 30%, 62% { transform: translate(14%, 3%); } }
@keyframes ml-mark-in { from { transform: translateY(35%) scale(0); } to { transform: none; } }
@keyframes ml-mark-pulse { 0%, 50%, 100% { transform: none; animation-timing-function: ease-out; } 53% { transform: scale(1.3) translateY(-10%); animation-timing-function: var(--sp-pop); } 64% { transform: none; } }
@keyframes ml-blink   { 0%, 100% { transform: none; } 50% { transform: scaleY(.1); } }
@keyframes ml-rise    { from { transform: translateY(105%) rotate(5deg); } to { transform: none; } }
@keyframes ml-look    { 0%, 22%, 100% { transform: none; } 28%, 44% { transform: translate(13%, 2%); } 50%, 64% { transform: translate(-5%, -6%); } 70% { transform: none; }
                         86% { transform: none; } 88% { transform: scaleY(.1); } 90% { transform: none; } }
@keyframes ml-tilt    { 0%, 48%, 100% { transform: none; animation-timing-function: ease-in-out; } 52% { transform: rotate(-5deg); animation-timing-function: var(--sp-settle); } 66% { transform: none; } }

/* Splash */
.splash {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--forest); cursor: pointer; overflow: hidden; isolation: isolate;
  transition: opacity .5s ease, visibility .5s;
}
.splash .mlogo { width: min(340px, 72vw); position: relative; z-index: 2; }
.splash-note, .splash-sig { z-index: 2; }
.splash-note { color: var(--on-forest-2); font-size: 18px; min-height: 22px; opacity: 0; animation: fade-in .6s 1.5s ease both; }
.splash.quick .splash-note { animation-delay: 1.1s; }
/* Signature */
.signature { font-size: 14px; color: var(--mauve); }
.signature span { font: italic 400 18px var(--display); color: var(--plum); letter-spacing: 0; }
.splash-sig { position: absolute; left: 0; right: 0; bottom: calc(28px + var(--safe-b)); text-align: center; color: var(--on-forest-3);
  opacity: 0; animation: fade-in .7s 1.9s ease both; }
.splash-sig span { color: var(--on-forest); }
.splash.quick .splash-sig { animation-delay: 1.3s; }
.splash.out { opacity: 0; visibility: hidden; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.intro-logo { width: 190px; margin-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  .mlogo *, .splash-note, .splash-sig { animation: none !important; opacity: 1; }
}
/* while listening, the only control in the room is Stop */
body[data-mode="listening"] #file-btn, body[data-mode="analyzing"] #file-btn { display: none; }

/* Wide screens: one grid. Headline, paragraph and the Listen action share the left column of the 1200px page;
   the bird stands in the right half of the same page. */
@media (min-width: 900px) {
  .room-head, .now-wrap { top: calc(120px + var(--safe-t)); }
  .display { font-size: clamp(120px, 12.5vw, 180px); }
  .dock {
    left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); right: auto;
    bottom: clamp(48px, 9vh, 104px); padding: 0; width: 380px; align-items: stretch; gap: 12px;
  }
  .dock .caption { text-align: left; min-height: 0; align-self: flex-start; margin-bottom: 8px; }
  .listen, .dock .ghost.on-dark { width: 100%; }
}

/* bird details: verdict */
.btn.verdict-yes { background: var(--lime); color: var(--plum); }
.btn.verdict-yes:hover { background: #3be373; }
.btn.verdict-yes[aria-pressed="true"]::after { content: " ✓"; }
#bird-no[aria-pressed="true"] { background: var(--plum); color: var(--linen); }
.verdict-note { font-size: 14px; color: var(--mauve); margin: 10px 0 14px; min-height: 1em; }
.bird .row + .verdict-note + .row { margin-top: 4px; }

@media (max-width: 1023px) {
  /* toasts sit above the docked list */
  .toast { bottom: auto; top: calc(72px + var(--safe-t)); }
}

@media (max-width: 1023px) {
  /* list opened: the room keeps only its controls */
  body.list-full .room-head, body.list-full .caption, body.list-full .now-wrap { opacity: 0; pointer-events: none; }
}


/* ═══ Rhythm ═════════════════════════════════════════════════════════════════════════════════════════════════
   One type scale and one spacing scale, used everywhere.
   Type  — 12 label · 14 meta · 16 body · 20 lede · 26 row name · 32 panel title · display
   Space — 4 · 8 · 12 · 16 · 24 · 32 · 48
   The room is a column: bar → headline → open space (the bird, the sound) → controls. One left edge, one floor. */
:root {
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-26: 26px; --t-32: 32px;
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px;
  --bar-h: 64px;
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.bar { height: calc(var(--bar-h) + var(--safe-t)); padding-inline: var(--gutter); }

.room {
  display: flex; flex-direction: column;
  padding: calc(var(--bar-h) + var(--safe-t) + var(--s-24)) var(--edge) var(--s-32);
}
.room-head { position: relative; inset: auto; top: auto; max-width: 640px; margin: 0; padding: 0; flex: none; }
.display { font-size: clamp(76px, 21vw, 168px); line-height: .9; letter-spacing: -.03em; padding: 0 0 .06em; margin-left: -.035em; }
.lede { margin-top: var(--s-16); max-width: 34ch; font-size: var(--t-20); line-height: 1.4; color: var(--on-forest-2); }

.dock { position: relative; inset: auto; margin-top: auto; padding: 0; width: 100%; max-width: 400px; align-items: stretch; gap: var(--s-8); flex: none; }
.caption { min-height: 0; margin: 0 0 var(--s-8); align-self: flex-start; text-align: left; font-size: var(--t-14); line-height: 1.4; color: var(--on-forest-2); }
.caption:empty { display: none; }
.listen { width: 100%; height: 56px; font-size: var(--t-16); }
.dock .ghost.on-dark { width: 100%; min-height: 48px; font-size: var(--t-16); }

.now-wrap { top: calc(var(--bar-h) + var(--safe-t) + var(--s-16)); left: var(--edge); right: var(--edge); padding: 0; max-width: none; gap: var(--s-8); }
.now { gap: var(--s-16); padding: var(--s-8) var(--s-16) var(--s-8) var(--s-8); }
.now-text { gap: var(--s-4); }
.eyebrow { font-size: var(--t-12); }
.now-meta { font-size: var(--t-14); gap: var(--s-8); }
.now-more { font-size: var(--t-14); right: var(--s-16); bottom: var(--s-12); }
.also, .maybe { font-size: var(--t-14); }
.readout { top: calc(var(--bar-h) + var(--safe-t) + var(--s-16)); right: var(--edge); }

/* list */
.list-head { padding: var(--s-16) var(--s-24) var(--s-12); gap: var(--s-4) var(--s-12); }
.list-title, .list-title .count { font-size: var(--t-32); line-height: 1; }
.list-sum { font-size: var(--t-14); line-height: 1.4; }
.list-body { padding: 0 var(--s-24) calc(var(--s-24) + var(--safe-b)); }
.entry { padding: var(--s-16) 0; gap: var(--s-12); }
.row-btn { grid-template-columns: 56px 1fr; gap: var(--s-16); }
.row-text { gap: var(--s-4); }
.row-name { font-size: var(--t-26); line-height: 1; }
.row-meta { font-size: var(--t-14); line-height: 1.3; gap: var(--s-4); }
.verdict { gap: var(--s-8); }
.vbtn { width: 40px; height: 40px; }
.list-label { font-size: var(--t-12); padding: var(--s-24) 0 var(--s-8); }
.empty { font-size: var(--t-16); line-height: 1.5; padding: var(--s-16) 0; }
.heard-foot { gap: var(--s-8); padding-top: var(--s-24); }

/* phones: the docked list takes its share; the room tightens to fit */
@media (max-width: 1023px) {
  .room { padding-bottom: calc(var(--s-24) + 8px); }
  .list-grip { margin: calc(var(--s-8) * -1) 0 var(--s-8); }
  body.has-list .display { font-size: clamp(56px, 15vw, 96px); }
  body.has-list .lede { display: none; }
  body.has-list .dock .ghost.on-dark { min-height: 44px; }
}
@media (min-width: 1024px) {
  .room { padding-top: calc(var(--bar-h) + var(--s-48)); padding-bottom: var(--s-48); }
  .display, body.has-list .display { font-size: clamp(112px, 10.5vw, 168px); }
  body.has-list .lede { display: block; }
  .list-head { padding: 0 var(--s-32); min-height: 0; height: auto; padding-top: calc((var(--bar-h) - var(--t-32)) / 2); padding-bottom: var(--s-16); }
  .list-body { padding: 0 var(--s-32) var(--s-32); }
}
@media (max-height: 640px) {
  .lede { display: none; }
  .display { font-size: clamp(56px, 14vw, 96px); }
}
.lede { text-wrap: pretty; max-width: 30ch; }
@media (max-width: 1023px) {
  .list-head { padding-inline: var(--gutter); }
  .list-body { padding-inline: var(--gutter); }
}

/* The screen never scrolls: room + list fill it exactly (clip also stops focus/scrollIntoView from shifting it) */
html, body { overflow: clip; }
/* Stop: the live level is a thin lime line along the bottom edge, not a block inside the button */
.listen-level { inset: auto 0 0 0; height: 3px; background: var(--lime); }
.listen[data-state="listening"]:focus-visible, .listen[data-state="analyzing"]:focus-visible { outline-offset: 4px; outline-width: 1px; }

/* ═══ Headline: descenders get their room, headline and paragraph share one edge ═══ */
.display { margin-left: 0; padding-bottom: 0; line-height: .92; }
.lede { margin-top: .9em; max-width: 26ch; text-wrap: balance; }
.display em { display: inline-block; margin-left: -.02em; }   /* the italic's overhang lines up optically with the W */

/* ═══ Settings: a calm list ═══ */
.settings { width: min(460px, calc(100% - 32px)); }
.settings .sheet-head { padding: var(--s-16) var(--s-16) var(--s-12) var(--s-24); }
.settings .sheet-head h2 { font-size: var(--t-32); }
.group { padding: var(--s-16) var(--s-24) var(--s-8); border-bottom: 1px solid var(--drift); }
.group-title { font: 400 var(--t-12)/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); margin: 0 0 var(--s-4); }
.srow { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); min-height: 52px; padding: var(--s-8) 0; font-size: var(--t-16); color: var(--plum); }
.srow + .srow { border-top: 1px solid var(--oat); }
.srow.col { flex-direction: column; align-items: stretch; gap: var(--s-8); }
.srow-line { display: flex; justify-content: space-between; align-items: baseline; }
.srow select { width: auto; max-width: 60%; height: 36px; border: 0; padding: 0 22px 0 8px; text-align: right; text-align-last: right; background-color: transparent; background-position: right 2px center; color: var(--hush); }
.srow select:focus { outline: 2px solid var(--lime); }
.hint { font-size: var(--t-14); line-height: 1.4; color: var(--mauve); }
.srow.switch small { display: block; font-size: var(--t-14); color: var(--mauve); }
.srow output { font: 400 var(--t-26)/1 var(--display); color: var(--teal); }
.textlink { color: var(--plum); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; font-size: var(--t-14); padding: 2px 0; }
.textlink:hover { color: var(--teal); }
.textlink:disabled { opacity: .5; }
/* segmented control: one oat track, the chosen part lifts to cream with a forest edge */
.settings .seg { display: flex; gap: 2px; padding: 3px; background: var(--oat); border-radius: var(--r); }
.settings .seg label { flex: 1; }
.settings .seg span { display: grid; place-items: center; height: 36px; padding: 0 6px; border-radius: 6px; background: transparent; border: 1px solid transparent; font-size: var(--t-14); color: var(--hush); }
.settings .seg input:checked + span { background: var(--linen); border-color: var(--forest); color: var(--plum); }
.settings .seg input:checked + span::before { display: none; }
.more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font: 400 20px/1 var(--text); color: var(--plum); letter-spacing: 0; }
.more[open] summary::after { content: "–"; }
.links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-12); padding: var(--s-12) 0 var(--s-8); }
.credits { padding: var(--s-24); display: grid; gap: var(--s-8); font-size: var(--t-14); color: var(--mauve); }
.credits a { color: var(--plum); text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ═══ Singing now: you notice when a bird arrives ═══ */
.eyebrow { gap: var(--s-8); padding: 4px 10px 4px 8px; border-radius: 12px; background: var(--forest); color: var(--on-forest); align-self: flex-start; font-size: 11px; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--lime); transform-origin: 50% 100%; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.35s; } .eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
/* a new bird: the card arrives with a lime ring that fades */
.now.fresh { animation: arrive .9s cubic-bezier(.2,.8,.2,1); }
@keyframes arrive {
  0% { opacity: 0; transform: translateY(-8px) scale(.98); box-shadow: 0 0 0 0 rgba(38,216,98,.0); }
  30% { opacity: 1; transform: none; box-shadow: 0 0 0 4px rgba(38,216,98,.9); }
  100% { box-shadow: 0 0 0 14px rgba(38,216,98,0); }
}
/* the singing bird in your list */
.entry.singing { background: var(--oat); margin: 0 calc(var(--s-12) * -1); padding-inline: var(--s-12); border-radius: var(--r); border-bottom-color: transparent; }
.entry.singing .pill-live { font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .eq i { animation: none; transform: scaleY(.7); } }

/* ═══ Controls: Listen, then where + what else, as an equal pair ═══ */
.bar-right { gap: 0; }
.dock-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.dock-pair .ghost.on-dark, .dock .dock-pair .ghost.on-dark { width: auto; min-width: 0; min-height: 48px; height: 48px; padding: 0 var(--s-12); border-radius: var(--r); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: var(--t-14); gap: var(--s-8); }
.dock-pair .place { justify-content: center; }
.dock-pair .place small { display: none; }
.dock-pair .ghost .i { width: 16px; height: 16px; }
body[data-mode="listening"] .dock-pair, body[data-mode="analyzing"] .dock-pair { display: none; }
body.has-list .dock-pair .ghost.on-dark { min-height: 44px; height: 44px; }

/* ═══ Phone list: small and handy — a companion to the room, not a second page ═══ */
@media (max-width: 1023px) {
  .list-head { padding-top: var(--s-12); padding-bottom: var(--s-8); gap: 2px var(--s-8); }
  .list-grip { margin: calc(var(--s-4) * -1) 0 var(--s-4); }
  .list-title, .list-title .count { font-size: 22px; }
  .list-sum { font-size: var(--t-12); }
  .list[data-size="peek"] { max-height: calc(60px + var(--safe-b)); }
  .list[data-size="half"] { max-height: 34dvh; }
  .entry { padding: var(--s-8) 0; gap: var(--s-8); }
  .row-btn { grid-template-columns: 40px 1fr; gap: var(--s-12); }
  .thumb { width: 40px; height: 40px; border-radius: 6px; }
  .row-name { font-size: 18px; line-height: 1.05; -webkit-line-clamp: 1; }
  .row-meta { font-size: var(--t-12); }
  .vbtn { width: 34px; height: 34px; }
  .vbtn .i { width: 15px; height: 15px; }
  .verdict { gap: 6px; }
  .entry.singing { margin: 0 calc(var(--s-8) * -1); padding-inline: var(--s-8); }
  .empty { font-size: var(--t-14); padding: var(--s-8) 0; }
  .heard-foot { padding-top: var(--s-12); }
  .heard-foot .ghost.small { min-height: 34px; font-size: 13px; padding: 4px 12px; }
}


/* ═══ Two voices ═══════════════════════════════════════════════════════════════════════════════════════════
   Instrument Serif speaks only at moments: the headline, the bird's name, sheet titles.
   Instrument Sans does all the reading and tapping: intro, status, buttons, list rows, numbers, settings. */
body { letter-spacing: 0; }
.lede { font-size: 18px; line-height: 1.45; letter-spacing: -.005em; }
.caption, .listen, .ghost, .btn, .place, .toast, .hint, .srow, .textlink { letter-spacing: -.005em; }
.listen { font-weight: 500; }
.now-meta #now-conf { font: 500 15px/1 var(--text); color: var(--teal); }
.now-meta i { font-size: 13px; }
.now-more { font-weight: 500; }
.eyebrow { font-weight: 600; letter-spacing: .1em; }
.list-title .count { font: 500 15px/1 var(--text); color: var(--teal); background: rgba(14,99,79,.1); padding: 4px 8px; border-radius: 10px; vertical-align: 6px; margin-left: 6px; }
.row-name { font: 500 16px/1.25 var(--text); letter-spacing: -.01em; }
.row-meta { font-size: 13px; }
.row-pct { font-weight: 500; }
.thumb { font: 500 18px/1 var(--text); }
.facts dd { font: 500 20px/1.2 var(--text); }
.srow output, .slider-row output { font: 500 18px/1 var(--text); }
.group-title, .kicker { font-weight: 600; letter-spacing: .1em; }
.steps li::before { font: 600 18px/1 var(--text); }
.signature span { font-size: 20px; }
@media (max-width: 1023px) {
  .row-name { font-size: 15px; line-height: 1.2; }
  .list-title .count { font-size: 13px; padding: 3px 7px; vertical-align: 4px; }
}

/* Headline → intro gap is measured from the headline itself: the g's of "singing?" hang about a third of the
   type size below the line, so the intro starts 0.34× the headline size further down — clear at every width */
.room-head { --d: clamp(76px, 21vw, 168px); }
@media (min-width: 1024px) { .room-head { --d: clamp(112px, 10.5vw, 168px); } }
@media (max-width: 1023px) { body.has-list .room-head { --d: clamp(56px, 15vw, 96px); } }
@media (max-height: 640px) { .room-head { --d: clamp(56px, 14vw, 96px); } }
.room-head .display, body.has-list .room-head .display { font-size: var(--d); }
.room-head .lede { margin-top: calc(var(--d) * .34); }

/* ═══ Listening, before a bird is named ═══ */
.listen-head {
  position: absolute; z-index: 2; left: var(--edge); right: var(--edge);
  top: calc(var(--bar-h) + var(--safe-t) + var(--s-24));
  max-width: 640px; pointer-events: none;
  opacity: 0; transform: translateY(12px); transition: opacity .6s ease .15s, transform .6s ease .15s;
}
@media (min-width: 1024px) { .listen-head { top: calc(var(--bar-h) + var(--s-48)); } }
body[data-mode="listening"]:not(.has-bird) .listen-head, body[data-mode="analyzing"]:not(.has-bird) .listen-head { opacity: 1; transform: none; }
.listen-head .kicker { color: var(--on-forest-3); margin-bottom: var(--s-12); font-variant-numeric: tabular-nums; }
.listen-head .display { --d2: clamp(56px, 13vw, 112px); font-size: var(--d2); }
.listen-head .display em { color: var(--lime); }
.listen-head .lede { margin-top: calc(var(--d2) * .24); max-width: 30ch; }
.listen-head .maybe, .listen-head .tag { pointer-events: auto; margin-top: var(--s-24); max-width: 44ch; }
.listen-head .maybe { font-size: var(--t-16); color: var(--on-forest-2); background: none; padding: 0; border-radius: 0; text-align: left; }
.listen-head .maybe em { font: italic 400 28px/1 var(--display); color: var(--on-forest); }
.listen-head .maybe small { display: block; margin-top: var(--s-4); font-size: var(--t-14); color: var(--on-forest-3); }
.listen-head .tag { display: block; font-size: var(--t-16); color: var(--on-forest-2); background: rgba(247,245,242,.06); border: 1px solid var(--forest-line); border-radius: var(--r); padding: var(--s-12) var(--s-16); }
.listen-head .tag b { color: var(--on-forest); font-weight: 500; }
.listen-head .tag small { color: var(--on-forest-3); font-size: var(--t-14); }
/* the caption only speaks up when something needs attention */
body[data-mode="listening"] .caption:not(:empty) { color: var(--on-forest); }
/* sound details: quiet, and only when switched on */
.readout dt { color: var(--on-forest-3); }
@media (max-width: 1023px) {
  body.has-list .listen-head .display { --d2: clamp(44px, 12vw, 72px); }
  body.has-list .listen-head .lede { display: none; }
}

/* the "Singing now" photo frame takes the photo's shape (set from JS as --pr, 1 = square) */
.now { grid-template-columns: calc(96px * var(--pr, 1)) 1fr; }
.now-photo { width: calc(96px * var(--pr, 1)); height: 96px; aspect-ratio: auto; transition: width .3s ease; }

/* "Listening" + three dots that pulse in turn — set apart from the word, sitting on its baseline */
.listen-head .display { white-space: nowrap; }
.dots { display: inline-flex; gap: .09em; margin-left: .16em; vertical-align: baseline; }
.dots i { width: .085em; height: .085em; border-radius: 50%; background: var(--lime); animation: dot 1.4s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .18s; } .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 70%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-.06em); } }
/* the hint starts below the g's tail */
.listen-head .lede { margin-top: calc(var(--d2) * .36); }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .8; } }
/* the headline size lives on the block, so the hint's gap can be measured from it */
.listen-head { --d2: clamp(56px, 13vw, 112px); }
@media (max-width: 1023px) { body.has-list .listen-head { --d2: clamp(44px, 12vw, 72px); } }
.listen-head .display, body.has-list .listen-head .display { font-size: var(--d2); }

/* sound details are a wide-screen tool; on a phone there's no room beside the headline */
@media (max-width: 719px) { .readout { display: none !important; } }

/* kicker → headline: the gap scales with the headline, like the gap below it */
.listen-head .live-kicker { display: inline-flex; align-items: center; gap: var(--s-8); margin-bottom: max(var(--s-24), calc(var(--d2) * .4)); }
.listen-head .live-kicker .live-dot { width: 7px; height: 7px; }
/* a count badge only exists when there is a count */
.list-title .count:empty { display: none; }
/* "About this bird" sits in the flow under the details — never pinned over them */
.now { grid-template-rows: auto auto; row-gap: var(--s-4); }
.now-photo { grid-row: 1 / span 2; align-self: stretch; height: auto; min-height: 96px; }
.now-more { position: static; grid-column: 2; justify-self: start; align-self: end; margin: 0 0 var(--s-4); }
.now-meta { padding-right: 0; }

/* ═══ Round of 13 fixes ═══ */
/* 12 · contrast: secondary text on forest stays readable in sunlight */
:root { --on-forest-2: rgba(247,245,242,.82); --on-forest-3: rgba(247,245,242,.64); }

/* 3 + 4 · why the confidence, and the runner-up, inside the card */
.now-why { font-size: 13px; color: var(--mauve); }
.now-alt { font-size: 13px; color: var(--hush); }
.now-alt b { font-weight: 500; color: var(--plum); }

/* 1 + 2 · listening buttons in bird details */
#bird-clip .i, #bird-ref .i { width: 16px; height: 16px; }
#bird-audio-note { margin: var(--s-8) 0 var(--s-16); }
#bird-audio-note:empty { display: none; }

/* 6 · microphone explainer */
.mic-intro h2 { font-size: clamp(32px, 8vw, 44px); margin-bottom: var(--s-16); }
.promise { list-style: none; display: grid; gap: var(--s-8); margin-bottom: var(--s-16); }
.promise li { background: var(--oat); border-radius: var(--r); padding: var(--s-12) var(--s-16); font-size: var(--t-16); color: var(--hush); line-height: 1.45; }
.promise b { color: var(--plum); font-weight: 500; }

/* 5 · ruled-out birds in settings */
.ruled .srow { min-height: 44px; }
#ruled-empty:empty { display: none; }

/* 8 · list grouped by day and place */
.day-label { border-bottom: 0 !important; }
.day-label button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-16) 0 var(--s-8); font-size: var(--t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); text-align: left; }
.day-label button small { font-size: var(--t-12); color: var(--mauve); letter-spacing: 0; }
.day-label button:not([disabled])::after { content: "+"; font-size: 16px; margin-left: var(--s-8); color: var(--plum); }
.day-label button[aria-expanded="true"]:not([disabled])::after { content: "–"; }
.day-label button[disabled] { cursor: default; }

/* 10 · faces of the last birds in the list header (phones: the list is collapsed most of the time) */
.list-faces { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; }
.list-faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--linen); background: var(--oat); }
.list-faces img + img { margin-left: -9px; }
.list-faces:empty { display: none; }
@media (min-width: 1024px) { .list-faces { display: none; } }

/* 9 · comfortable verdict buttons on phones */
@media (max-width: 1023px) {
  .vbtn { width: 44px; height: 44px; }
  .vbtn .i { width: 17px; height: 17px; }
  .entry { padding: 6px 0; }
}

/* 13 · recording timeline */
.timeline { display: grid; gap: var(--s-8); margin-bottom: var(--s-8); }
.tl-head { display: flex; align-items: center; gap: var(--s-8); font-size: var(--t-14); color: var(--on-forest); }
.tl-head #tl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tl-head #tl-dur { color: var(--on-forest-3); font-variant-numeric: tabular-nums; }
.tl-close { width: 32px; height: 32px; display: grid; place-items: center; color: var(--on-forest-2); border-radius: var(--r-sm); }
.tl-close .i { width: 16px; height: 16px; }
.tl-track { position: relative; height: 32px; border-radius: var(--r-sm); background: rgba(247,245,242,.06); border: 1px solid var(--forest-line); overflow: visible; }
.tl-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(38,216,98,.14); border-radius: var(--r-sm); transition: width .3s ease; }
.tl-mark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--lime); border: 2px solid var(--forest); cursor: pointer; }
.tl-mark.other { background: var(--oat); }
.tl-mark:hover, .tl-mark:focus-visible { transform: scale(1.3); }
.tl-hint { font-size: var(--t-14); color: var(--on-forest-2); }

/* faces sit beside the title and summary, not on the drag handle */
.list-faces { grid-row: 2 / span 2; }
/* bird details: listening buttons and the verdict are two separate groups */
.bird-body .row:has(#bird-yes) { margin-top: var(--s-16); }

#locate-btn { justify-self: start; }

/* ═══ Short phones (iPhone SE and similar): keep what matters, let the rest live in "About this bird" ═══ */
@media (max-width: 1023px) and (max-height: 700px) {
  .list[data-size="half"] { max-height: 30dvh; }
  .now { grid-template-columns: calc(72px * var(--pr, 1)) 1fr; padding: 6px 12px 6px 6px; }
  .now-photo { width: calc(72px * var(--pr, 1)); min-height: 72px; }
  .now-name { font-size: 26px; -webkit-line-clamp: 1; }
  .now-meta i, .now-why { display: none; }
  .now-alt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eyebrow { padding: 3px 8px 3px 6px; }
  .listen-head .lede, #listen-hint { display: none; }
  .listen-head .live-kicker { margin-bottom: var(--s-12); }
  .listen-head .maybe, .listen-head .tag { margin-top: var(--s-12); }
  .listen-head .maybe small { display: none; }
}
/* list details stay on one line */
@media (max-width: 1023px) {
  .row-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row-meta .pill-live { display: inline-flex; }
}


/* ═══ Less on the phone; the rest one tap away ═══ */
.now-more .short { display: none; }
@media (max-width: 719px) {
  .now-meta i, .now-why, .now-alt { display: none !important; }
  .now-more .long { display: none; }
  .now-more .short { display: inline; }
  .now-name { -webkit-line-clamp: 2; }
}
/* bird details: secondary information folds under "More details" */
.more-details { margin-top: var(--s-16); border-top: 1px solid var(--drift); }
.more-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-size: var(--t-14); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); }
.more-details summary::-webkit-details-marker { display: none; }
.more-details summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--plum); letter-spacing: 0; }
.more-details[open] summary::after { content: "–"; }
.more-details .facts { margin: var(--s-8) 0 var(--s-16); }
.bird-why { font-size: var(--t-14); color: var(--hush); margin: var(--s-4) 0 var(--s-8); line-height: 1.45; }
.more-details .links { padding: 0 0 var(--s-8); }
/* one tick is enough: the icon already says it, the note confirms it */
.btn.verdict-yes[aria-pressed="true"]::after { content: none; }
.btn.verdict-yes[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--forest); }

/* ═══ Search & explore ═══ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search { padding: 0; height: min(92dvh, 760px); flex-direction: column; }
.search[open] { display: flex; }
.search-head { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-16) var(--s-16) var(--s-12); border-bottom: 1px solid var(--drift); position: sticky; top: 0; background: var(--linen); z-index: 1; }
.search-field { flex: 1; display: flex; align-items: center; gap: var(--s-8); height: 48px; padding: 0 var(--s-12); border-radius: var(--r); background: var(--oat); border: 1px solid transparent; }
.search-field:focus-within { border-color: var(--forest); background: var(--linen); }
.search-field .i { color: var(--mauve); }
.search-field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: var(--plum); }
.search-field input::placeholder { color: var(--mauve); }
.search-label { padding: var(--s-16) var(--s-16) var(--s-4); font-size: var(--t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); }
.search-label:empty { display: none; }
.search-results { list-style: none; overflow-y: auto; flex: 1; padding: 0 var(--s-16) var(--s-24); }
.search-results li + li { border-top: 1px solid var(--drift); }
.search-row { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--s-12); padding: var(--s-12) 0; text-align: left; }
.search-row .thumb { width: 44px; height: 44px; }
.search-row .row-name { font-size: 16px; }
.search-row .row-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row:hover .row-name { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.here { font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.here.common { background: rgba(14,99,79,.12); color: var(--teal); }
.here.uncommon { background: var(--oat); color: var(--hush); }
.here.rare { background: var(--oat); color: var(--mauve); }
.here.no { background: transparent; color: var(--mauve); border: 1px solid var(--drift); }
.search-empty { padding: var(--s-24) var(--s-16); }
@media (max-width: 719px) { .search { height: 92dvh; } }

/* a bird's page */
.sp-here { font-size: var(--t-14); font-weight: 500; color: var(--teal); margin: 0 0 var(--s-12); }
.sp-here.no, .sp-here.rare { color: var(--hush); }
.sp-here:empty { display: none; }
.sp-about { font-size: var(--t-16); line-height: 1.55; color: var(--hush); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--s-8); }
#sp-wiki { display: inline-block; margin-bottom: var(--s-16); }
#sp-audio-note:empty { display: none; }
.sp-actions { margin-bottom: var(--s-8); }
.sp-mine { width: 100%; margin-top: var(--s-8); }
.sp-mine:disabled { background: var(--oat); color: var(--teal); opacity: 1; }
.sp-mine-note { margin-top: var(--s-8); text-align: center; }

/* top bar: the two round buttons keep their gap */
.bar-right { gap: var(--s-8); }
/* search: names wrap instead of being cut */
.search-row .row-name { white-space: normal; -webkit-line-clamp: 2; }
/* the bird page's main action stays in reach while you read */
.species .sp-mine { position: sticky; bottom: calc(var(--s-12) + var(--safe-b)); z-index: 1; box-shadow: 0 0 0 8px var(--linen); }


/* ═══ Phone: a compact room, a bigger list ═══ */
@media (max-width: 719px) {
  .list[data-size="half"] { max-height: 56dvh; }
  .list[data-size="full"] { max-height: 88dvh; }
  .list-head { padding-top: var(--s-12); padding-bottom: var(--s-12); min-height: 64px; }
  body.has-list .room-head { --d: clamp(44px, 12.5vw, 60px); }
  body.has-list .listen-head { --d2: clamp(36px, 10vw, 48px); }
  body.has-list .listen-head .live-kicker { margin-bottom: var(--s-12); }
  body.has-list[data-mode="idle"] .caption { display: none; }      /* "Listen again…" says nothing the button doesn't */
  .room { padding-top: calc(var(--bar-h) + var(--safe-t) + var(--s-16)); padding-bottom: var(--s-24); }
  .listen { height: 52px; }
  .dock-pair .ghost.on-dark, .dock .dock-pair .ghost.on-dark, body.has-list .dock-pair .ghost.on-dark { height: 44px; min-height: 44px; }
  .dock { gap: var(--s-8); }
  .now { grid-template-columns: calc(64px * var(--pr, 1)) 1fr; padding: 6px 12px 6px 6px; gap: var(--s-12); }
  .now-photo { width: calc(64px * var(--pr, 1)); min-height: 64px; }
  .now-name { font-size: 26px; }
}
/* short phones (SE-size): the list still leads, but the room keeps enough for its controls */
@media (max-width: 719px) and (max-height: 700px) {
  .list[data-size="half"] { max-height: 46dvh; }
  .listen-head .maybe:not([hidden]) ~ .tag { display: none; }   /* one live line at a time */
  .listen-head .maybe, .listen-head .tag { margin-top: var(--s-8); }
  .listen-head .tag { padding: var(--s-8) var(--s-12); font-size: var(--t-14); }
  .listen-head .tag small { display: none; }
  body.has-list .room-head { --d: clamp(40px, 12vw, 52px); }
  .room { padding-top: calc(var(--bar-h) + var(--safe-t) + var(--s-8)); padding-bottom: var(--s-16); }
}

/* short labels on narrow phones, so the two pills never wrap */
.lbl-short { display: none; }
.dock-pair .ghost { white-space: nowrap; }
@media (max-width: 400px) {
  .dock-pair .lbl-long { display: none; }
  .dock-pair .lbl-short { display: inline; }
}
/* tablets held upright: list-first like phones */
@media (min-width: 720px) and (max-width: 1023px) {
  .list[data-size="half"] { max-height: 50dvh; }
}

/* ═══ Phones held sideways: room on the left, list as a full-height column on the right ═══ */
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  :root { --side-l: max(300px, 42%); }
  .app { grid-template-rows: none; grid-template-columns: 1fr var(--side-l); }
  .list, .list[data-size] { max-height: none; height: 100dvh; margin: 0; border-radius: 0; border-left: 1px solid var(--drift); }
  .list[data-size="peek"] .list-body { overflow-y: auto; }
  .list-grip { display: none; }
  .list-head { cursor: default; padding-top: var(--s-12); }
  .bar { right: var(--side-l); height: calc(52px + var(--safe-t)); }
  .room { padding: calc(52px + var(--safe-t) + var(--s-8)) var(--gutter) var(--s-12); }
  .room-head, body.has-list .room-head { --d: clamp(36px, 7vw, 52px); }
  .room-head .lede, .listen-head .lede, #listen-hint, .caption { display: none !important; }
  .listen-head { top: calc(52px + var(--safe-t) + var(--s-8)); }
  .listen-head, body.has-list .listen-head { --d2: clamp(32px, 6vw, 44px); }
  .listen-head .live-kicker { margin-bottom: var(--s-8); }
  .listen-head .maybe:not([hidden]) ~ .tag { display: none; }
  .listen-head .maybe, .listen-head .tag { margin-top: var(--s-8); }
  .listen-head .maybe small, .listen-head .tag small { display: none; }
  .now-wrap { top: calc(52px + var(--safe-t) + var(--s-8)); }
  .now { grid-template-columns: calc(56px * var(--pr, 1)) 1fr; padding: 6px 12px 6px 6px; }
  .now-photo { width: calc(56px * var(--pr, 1)); min-height: 56px; }
  .now-name { font-size: 22px; -webkit-line-clamp: 1; }
  .now-meta i, .now-why, .now-alt { display: none !important; }
  .dock { gap: var(--s-8); max-width: none; }
  .listen { height: 44px; }
  .dock-pair .ghost.on-dark, .dock .dock-pair .ghost.on-dark { height: 38px; min-height: 38px; }
  .toast { left: calc((100% - var(--side-l)) / 2); bottom: var(--s-16); top: auto; }
}
/* phones: one live line at a time while listening — the near-miss if there is one, otherwise the non-bird note */
@media (max-width: 719px) {
  .listen-head .maybe:not([hidden]) ~ .tag { display: none; }
  .listen-head .maybe, .listen-head .tag { margin-top: var(--s-12); }
}

/* ═══ Feel: instant, quiet feedback on every press ═══ */
html { -webkit-tap-highlight-color: transparent; }
button, a, summary, label.srow, .seg label { touch-action: manipulation; }
.ghost, .btn, .round, .vbtn, .mini-stop, .tl-close, .close, .sheet-head .icon-btn { transition: transform .12s ease, background .15s, border-color .15s, color .15s; }
.ghost:active, .btn:active, .round:active, .vbtn:active, .close:active, .sheet-head .icon-btn:active { transform: scale(.96); }
.row-btn:active .thumb, .search-row:active .thumb { transform: scale(.94); }
.thumb { transition: transform .12s ease; }
.search-row:active, .day-label button:active { background: rgba(42,26,29,.04); }
.textlink:active, .now-more:active { opacity: .6; }
.now:active { transform: scale(.99); }
.seg span:active { transform: scale(.97); }
@media (hover: hover) { .vbtn:hover { background: var(--oat); } }
@media (prefers-reduced-motion: reduce) { .ghost:active, .btn:active, .round:active, .vbtn:active, .now:active { transform: none; } }

/* ═══ Search on a phone: a full-screen panel that fits above the keyboard ═══ */
@media (max-width: 719px) {
  .modal.sheet.search {
    position: fixed; inset: auto; top: var(--vvt, 0px); left: 0; margin: 0;
    width: 100%; max-width: 100%; height: var(--vvh, 100dvh); max-height: none;
    border-radius: 0; padding-bottom: 0;
  }
  .modal.sheet.search[open] { animation: fade .2s ease; }
  .search-head { padding-top: calc(var(--s-12) + var(--safe-t)); }
  .search-results { padding-bottom: var(--s-16); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
#homescreen-tip { margin-top: var(--s-8); }

/* a closed panel never shows, whatever a later rule says (a closed search panel was rendering at the page end on iOS) */
dialog:not([open]) { display: none !important; }

/* ═══ Other sounds: quiet, folded, below the birds ═══ */
.others-label { padding: var(--s-16) 0 var(--s-4) !important; }
.others-label button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; text-align: left;
  font-size: var(--t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); padding: var(--s-8) 0; }
.others-label button small { font-weight: 500; letter-spacing: 0; margin-left: auto; margin-right: var(--s-8); }
.others-label button::after { content: "+"; font-size: 16px; font-weight: 400; color: var(--plum); }
.others-label button[aria-expanded="true"]::after { content: "–"; }
.entry.other { opacity: .72; padding: var(--s-4) 0; border-bottom-color: transparent; }
.entry.other .row-btn { grid-template-columns: 28px 1fr; gap: var(--s-12); }
.entry.other .thumb { width: 28px; height: 28px; border-radius: 6px; font-size: 14px; background: var(--oat); }
.entry.other .row-name, .entry.other .row-name { font: 400 13px/1.3 var(--text); color: var(--hush); letter-spacing: 0; }
.entry.other .row-meta { font-size: 12px; }


/* ═══ Your list v2: progress, filters, confidence rings, quiet verdicts ═══ */
.list-tools { display: grid; gap: var(--s-12); padding: var(--s-12) 0 var(--s-4); }
.list-progress { position: relative; height: 4px; border-radius: 2px; background: var(--drift); overflow: hidden; }
.list-progress i { position: absolute; top: 0; bottom: 0; transition: width .4s cubic-bezier(.2,.8,.2,1), left .4s cubic-bezier(.2,.8,.2,1); }
.list-progress .p-yes { left: 0; width: var(--yes, 0%); background: var(--lime); }
.list-progress .p-no { left: var(--yes, 0%); width: var(--no, 0%); background: var(--hush); opacity: .55; }
.list-filter { display: flex; gap: var(--s-8); overflow-x: auto; scrollbar-width: none; }
.list-filter::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--drift); font-size: 13px; font-weight: 500; color: var(--hush); background: transparent; transition: background .15s, color .15s, border-color .15s; }
.chip small { font-size: 12px; font-weight: 500; color: var(--mauve); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: var(--linen); }
.chip[aria-pressed="true"] small { color: rgba(247,245,242,.7); }
.chip:disabled { opacity: .4; cursor: default; }
@media (hover: hover) { .chip:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--plum); color: var(--plum); } }

/* round photo inside a ring that fills to the match % — lime once you've confirmed it */
.entry:not(.other) .thumb { position: relative; overflow: visible; border-radius: 50%; padding: 3px; background: conic-gradient(var(--teal) calc(var(--p, 0) * 1%), var(--drift) 0); }
.entry:not(.other) .thumb { display: block; }
.entry:not(.other) .thumb img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid var(--linen); background: var(--oat); }
.entry.is-yes .thumb, .entry:has(.thumb-badge) .thumb { background: var(--lime); }
.entry.is-no .thumb { background: var(--drift); }
.thumb-badge { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); border: 2px solid var(--linen); display: grid; place-items: center; color: var(--plum); }
.thumb-badge .i { width: 11px; height: 11px; stroke-width: 2.6; }
.entry.singing .thumb-badge { border-color: var(--oat); }
.row-pct { color: var(--teal); }
.entry .tick { color: var(--teal); font-weight: 500; }

/* verdict: one joined pill while it's open; once decided only your choice stays (tap it to undo) */
.verdict { gap: 0; border: 1px solid var(--drift); border-radius: 22px; overflow: hidden; }
.verdict .vbtn { border: 0; border-radius: 0; width: 44px; height: 40px; color: var(--hush); }
.verdict .vbtn + .vbtn { border-left: 1px solid var(--drift); }
.entry.is-yes .verdict, .entry.is-no .verdict { border-color: transparent; }
.entry.is-yes .vbtn.no, .entry.is-no .vbtn.yes { display: none; }
.entry.is-yes .vbtn.yes, .entry.is-no .vbtn.no { border-radius: 50%; width: 40px; height: 40px; }
.entry.is-yes .vbtn.yes { background: rgba(38,216,98,.16); color: var(--teal); }
/* the chips say how many are checked once the list is open; the summary is for the folded list */
.list:not([data-size="peek"]):has(.list-tools:not([hidden])) .list-sum { display: none; }
.entry.is-no .vbtn.no { background: transparent; color: var(--hush); border: 1px solid var(--drift); }
.entry.is-no .row-btn { opacity: .5; }

/* empty filter */
.filter-empty { padding: var(--s-24) 0; font-size: var(--t-14); color: var(--mauve); text-align: center; }

@media (max-width: 719px) {
  .list-tools { padding-top: var(--s-8); gap: var(--s-8); }
  .entry:not(.other) .thumb { width: 44px; height: 44px; padding: 2px; }
  .row-btn { grid-template-columns: 44px 1fr; }
  .thumb-badge { width: 18px; height: 18px; right: -4px; bottom: -4px; }
  .chip { height: 30px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .list-progress i { transition: none; } }

/* ═══ Live spectrogram strip (phones and tablets; the desktop has the sound cloud) ═══ */
.spectro { display: none; position: relative; height: 56px; margin-bottom: var(--s-4); border-radius: var(--r); background: #17261c; border: 1px solid var(--forest-line); overflow: hidden; }
.spectro canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
.spectro::after { content: ""; position: absolute; top: 6px; bottom: 6px; right: 0; width: 2px; border-radius: 1px; background: var(--lime); opacity: .8; }
.spectro-k { position: absolute; inset: 0; pointer-events: none; }
.spectro-k b { position: absolute; left: 8px; transform: translateY(-50%); font-size: 9px; font-weight: 500; line-height: 1; letter-spacing: .04em; color: var(--on-forest-3); font-variant-numeric: tabular-nums; }
.spectro-k b::after { content: ""; position: absolute; left: calc(100% + 6px); top: 50%; width: 10px; height: 1px; background: var(--forest-line); }
@media (max-width: 1023px), (max-height: 520px) {
  body[data-mode="listening"] .spectro { display: block; }
}
@media (max-width: 1023px) and (max-height: 700px) { .spectro { height: 44px; } }
body[data-mode="listening"] .spectro.tight { display: none; }

/* spectrogram strip: padded plot with a label column, guides at 5 and 10 kHz (the plot spans 0–11 kHz) */
.spectro { --pad: 10px; --gut: 52px; height: 64px; border-radius: 12px; }
.spectro canvas { inset: var(--pad) var(--pad) var(--pad) var(--gut); width: calc(100% - var(--gut) - var(--pad)); height: calc(100% - var(--pad) * 2); border-radius: 4px; }
.spectro::after { top: var(--pad); bottom: var(--pad); right: var(--pad); }
.spectro-k b { left: 0; width: calc(var(--gut) - 10px); text-align: right; font-size: 10px; letter-spacing: .02em; }
.spectro-k b::after { left: calc(100% + 10px); width: calc(100vw); height: 0; border-top: 1px dashed rgba(247,245,242,.1); background: none; }
.spectro-k .k10 { top: calc(var(--pad) + (100% - var(--pad) * 2) * .0909); }
.spectro-k .k5 { top: calc(var(--pad) + (100% - var(--pad) * 2) * .5455); }
@media (max-width: 1023px) and (max-height: 700px) { .spectro { --pad: 8px; height: 52px; } }
.spectro-k { clip-path: inset(0 var(--pad) 0 0); }
.srow span small { margin-left: 4px; font-size: 13px; color: var(--mauve); white-space: nowrap; }

/* ═══ Toast → bottom snackbar on phones/tablets: over the list's lower edge, never over the listening room ═══ */
@media (max-width: 1023px) {
  .toast { top: auto; bottom: calc(var(--s-16) + var(--safe-b)); left: var(--s-16); right: var(--s-16); width: auto; max-width: 480px; margin-inline: auto; transform: none;
    background: var(--plum); color: var(--linen); box-shadow: 0 8px 24px rgba(42,26,29,.28); padding: 10px 10px 10px 16px; font-size: 14px; line-height: 1.35; gap: var(--s-12); }
  .toast button { min-height: 36px; padding: 0 14px; font-weight: 500; }
}
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .toast { left: auto; right: var(--s-16); max-width: min(420px, calc(var(--side-l) - 32px)); }
}

/* toast in the listening room (placed by placeToast): a light card on the forest, its button shaped like the room's */
.toast.in-room { background: var(--linen); color: var(--plum); padding: 8px 8px 8px 20px; gap: var(--s-16); border-radius: var(--r); font-size: var(--t-16); box-shadow: 0 10px 30px rgba(0,0,0,.25); width: max-content; margin: 0; }
.toast.in-room button { min-height: 40px; padding: 0 16px; border-radius: var(--r-sm); font-weight: 500; }

/* ═══ Merlin-style browsing: scope chips + sort, family headings ═══ */
.search-tools { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-12) var(--s-16) 0; }
.search-tools .list-filter { flex: 1; min-width: 0; }
.list-tools-row { display: flex; align-items: center; gap: var(--s-8); }
.list-tools-row .list-filter { flex: 1; min-width: 0; }
.sort-pill { position: relative; flex: none; display: inline-flex; align-items: center; }
.sort-pill select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 28px 0 12px; border-radius: 16px; border: 1px solid var(--drift); background: transparent; font: 500 13px/1 var(--text); color: var(--plum); cursor: pointer; }
.sort-pill::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid var(--hush); border-bottom: 1.5px solid var(--hush); transform: rotate(45deg); pointer-events: none; }
@media (hover: hover) { .sort-pill select:hover { border-color: var(--plum); } }
.sort-pill select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.search-label { padding-top: var(--s-12); }
/* family headings stick while their birds scroll past */
.fam-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-8);
  padding: var(--s-12) 0 var(--s-8); background: var(--linen); border-bottom: 1px solid var(--drift);
  font-size: var(--t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); }
.fam-head small { font-size: var(--t-12); font-weight: 500; letter-spacing: 0; color: var(--mauve); }
.fam-label button { color: var(--plum); }
.search-results > li:not(.fam-head) + .fam-head { margin-top: var(--s-8); }
@media (max-width: 719px) {
  .search-tools { padding: var(--s-8) var(--s-16) 0; }
  .sort-pill select { height: 30px; font-size: 12px; padding-left: 10px; }
}
@media (max-width: 719px) {
  .list-tools-row .chip, .search-tools .chip { padding: 0 9px; gap: 5px; }
  .list-tools-row { gap: 6px; }
  .list-filter { gap: 6px; }
}
@media (max-width: 359px) { .list-tools-row { flex-wrap: wrap; } .list-tools-row .list-filter { flex-basis: 100%; } }

/* ═══ Two birds at once: "Also singing" under the card ═══ */
.also { margin-top: var(--s-8); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.also::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; opacity: .8; }
.also-bird { color: var(--on-forest); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(38,216,98,.6); text-decoration-thickness: 1.5px; text-underline-offset: 3px; padding: 4px 0; }
@media (hover: hover) { .also-bird:hover { text-decoration-color: var(--lime); } }

/* the list follows the finger while it's dragged by its head */
@media (max-width: 1023px) {
  .list-head { touch-action: none; user-select: none; -webkit-user-select: none; }
  .list.dragging { transition: none !important; }
}

/* tucked-away list on phones/tablets: exactly its header (title, summary, faces) — never a fixed height that clips it */
@media (max-width: 1023px) and (min-height: 521px), (max-width: 1023px) and (orientation: portrait) {
  .list[data-size="peek"] { max-height: none !important; }
  .list[data-size="peek"] .list-body { display: none; }
  .list[data-size="peek"] .list-head { padding-bottom: calc(var(--s-12) + var(--safe-b)); }
}
/* the list's rounded top overlaps the room by 8px: keep a clear 16px between the room's buttons and the list */
@media (max-width: 1023px) and (min-height: 521px) { body.has-list .room { padding-bottom: var(--s-24); } }

/* location: progress and result under the button */
.locate-status { margin-top: var(--s-4); }
.locate-status.ok { color: var(--teal); }
.locate-status.bad { color: var(--plum); }
#locate-btn:disabled { opacity: .6; cursor: progress; }
#locate-btn { align-self: flex-start; justify-self: start; margin-inline: 0; text-align: left; }
.search-more { height: 1px; border: 0 !important; }

/* bird pack (Settings › Which birds) */
.pack { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); margin-top: var(--s-12); padding: var(--s-12) var(--s-16); border-radius: var(--r); background: var(--oat); }
.pack-text { display: grid; gap: 2px; min-width: 0; }
.pack-kicker { font-size: var(--t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); }
.pack-text b { font-size: var(--t-16); font-weight: 500; color: var(--plum); }
.pack-text small { font-size: 13px; color: var(--mauve); }
.pack #cache-btn { flex: none; white-space: nowrap; }
.pack.off { opacity: .6; }

/* ═══ First visit: say what to do, and let the Listen button invite the first tap ═══ */
.caption:empty { display: none !important; }
.caption b { color: var(--lime); font-weight: 600; }
/* first visit: a soft light sweeps across Listen (clipped inside it) and a small halo breathes — at most 6 px, so it
   never reaches the buttons around it (they sit 8 px away) */
@keyframes invite { 0%, 100% { box-shadow: 0 0 0 0 rgba(38,216,98,.0); } 50% { box-shadow: 0 0 0 5px rgba(38,216,98,.28); } }
@keyframes invite-sweep { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(320%) skewX(-18deg); } }
body.first-run[data-mode="idle"] .listen { animation: invite 2.4s ease-in-out infinite; }
body.first-run[data-mode="idle"] .listen::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); animation: invite-sweep 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.first-run[data-mode="idle"] .listen { animation: none; box-shadow: 0 0 0 3px rgba(38,216,98,.4); } }
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) { .list-tools-row { flex-wrap: wrap; } .list-tools-row .list-filter { flex-basis: 100%; } }

/* ═══ Official Nepal checklist: Nepali name and status badges ═══ */
.nep { margin-top: 2px; font-size: var(--t-16); line-height: 1.5; color: var(--hush); font-family: var(--text), "Kohinoor Devanagari", "Noto Sans Devanagari", "Mukta", sans-serif; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-8); }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 500; letter-spacing: .01em; }
.badge.law { background: var(--plum); color: var(--linen); }
.badge.glob { background: #f6dcd3; color: #8a2b14; }
.badge.nat { background: var(--oat); color: var(--hush); }
#now-sci[lang="ne"] { font-style: normal; }
.badges { margin-bottom: var(--s-12); } .nep + .badges { margin-top: var(--s-8); }

/* Nepali names while the Nepal bird pack is in use */
.now-nep { font-size: 15px; line-height: 1.3; color: var(--hush); font-family: var(--text), "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif; }
.row-nep { color: var(--hush); font-family: var(--text), "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif; }
.now-nep[hidden] { display: none; }
.now-meta .now-nep { line-height: 1.1; }
/* a bird on the card: the sound strip gets a little shorter so both fit on phones */
@media (max-width: 1023px) { body.has-bird .spectro { height: 44px; } }
@media (max-width: 1023px) { body.has-bird .spectro { --pad: 8px; } body.has-bird .spectro-k .k5 { display: none; } }

/* ═══ "Chirping now" card — one grid, an 8 px rhythm, three text rows ═══
   [ photo | label · name · nepali | › ]   label 11/16 · name 24/26 (32/34 wide) · nepali 15/20 (17/22 wide)
   Everything else (confidence words, scientific name, runner-up) lives on the bird's page. */
.now { --ph: 80px; --pad: 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) 28px; grid-template-rows: auto; align-items: center;
  column-gap: var(--s-12); padding: var(--pad); min-height: 0; border-radius: 12px; }
.now-photo { grid-column: 1; grid-row: 1; align-self: center; width: calc(var(--ph) * var(--pr, 1)); height: var(--ph);
  min-height: 0; aspect-ratio: auto; border-radius: 8px; }
.now-text { grid-column: 2; grid-row: 1; display: grid; row-gap: 0; padding: 0; align-content: center; }
.now .eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 0; background: none; border-radius: 0;
  font: 600 11px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mauve); }
.now .eyebrow .eq i { background: var(--lime); }
.now-pct { letter-spacing: .02em; color: var(--teal); font-variant-numeric: tabular-nums; }
.now-name { font: 400 24px/26px var(--display); letter-spacing: -.015em; -webkit-line-clamp: 2; margin: 0; }
.now-nep { display: block; margin: 4px 0 0; font-size: 15px; line-height: 20px; color: var(--mauve); }
.now-nep[hidden] { display: none; }
.now-meta, .now-why, .now-alt { display: none !important; }
.now-more { grid-column: 3; grid-row: 1; position: static; transform: none; align-self: center; justify-self: end;
  width: 28px; height: 28px; margin: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--oat); color: var(--plum); text-decoration: none; }
.now-more svg { width: 16px; height: 16px; }
.now:hover .now-more { background: var(--lime); }
@media (min-width: 1024px) {
  .now { --ph: 104px; --pad: 16px; column-gap: var(--s-16); grid-template-columns: auto minmax(0, 1fr) 32px; }
  .now-name { font-size: 32px; line-height: 34px; }
  .now-nep { font-size: 17px; line-height: 22px; }
  .now-more { width: 32px; height: 32px; }
}
@media (max-width: 1023px) and (max-height: 700px) { .now { --ph: 72px; } .now-name { font-size: 22px; line-height: 24px; } }
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) { .now { --ph: 56px; --pad: 8px; } .now .eyebrow { margin-bottom: 4px; } }
/* a bird on the card: the sound strip gets a little shorter so both fit on phones */
@media (max-width: 1023px) { body.has-bird .spectro { height: 44px; --pad: 8px; } body.has-bird .spectro-k .k5 { display: none; } }
.now-text { justify-items: start; text-align: left; } .now-text > * { justify-self: start; max-width: 100%; }
.now-text { justify-content: stretch; grid-template-columns: minmax(0, 1fr); } .now-name { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.now-pct::before { content: "·"; margin-right: 6px; color: var(--mauve); } .now-name .nw { white-space: nowrap; }
/* photo and text share top and bottom edges: the text column is exactly the photo's height, label at the top,
   Nepali name (or the name) at the bottom */
.now-text { align-self: stretch; align-content: space-between; height: var(--ph); }
.now.measuring .now-text { height: auto; align-self: start; }

/* ═══ Search: the logo's pink, so the main way into the bird guide stands out from the quiet settings button ═══ */
.round.search-cta { --blush: #FFDADE; --blush-2: #FFC8CF; background: var(--blush); border-color: var(--blush); color: #123B28; }
.round.search-cta .i { stroke-width: 2.2; }
.search-cta-label { display: none; }
@media (hover: hover) { .round.search-cta:hover { background: var(--blush-2); border-color: var(--blush-2); } }
.round.search-cta:active { background: var(--blush-2); }
.round.search-cta:focus-visible { outline: 2px solid var(--blush); outline-offset: 3px; }
@media (min-width: 720px) {
  .round.search-cta { width: auto; border-radius: 20px; padding: 0 16px 0 12px; display: inline-flex; align-items: center; gap: 8px; }
  .search-cta-label { display: inline; font: 500 14px/1 var(--text); letter-spacing: -.005em; }
}
@media (prefers-reduced-motion: reduce) { body.first-run[data-mode="idle"] .listen::after { animation: none; display: none; } }

/* list rows: [ photo · name ] [ play ] [ ✓ | ✕ ] */
.entry { grid-template-columns: minmax(0, 1fr) auto auto; }
.play-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--oat); color: var(--plum); flex: none; }
.play-btn .i { width: 14px; height: 14px; margin-left: 2px; }
.play-btn.playing { background: var(--lime); }
.play-btn.playing .i { animation: pulse-play 1s ease-in-out infinite; }
.play-btn.loading { opacity: .5; }
@keyframes pulse-play { 50% { transform: scale(.8); } }
@media (hover: hover) { .play-btn:hover { background: var(--drift); } .play-btn.playing:hover { background: var(--lime); } }
.play-btn:active { transform: scale(.94); }
.entry.other .play-btn { display: none; }
@media (prefers-reduced-motion: reduce) { .play-btn.playing .i { animation: none; } }
@media (max-width: 359px) { .entry { gap: 6px; } .play-btn { width: 32px; height: 32px; } }

/* Phones at rest: headline, line and buttons are one group resting on the list; the open space sits above
   (the idle rings live there). 32 px from the line to the button keeps the group tight. */
@media (max-width: 1023px) {
  body[data-mode="idle"] .room-head, body[data-mode="loading"] .room-head { margin-top: auto; }
  body[data-mode="idle"] .dock, body[data-mode="loading"] .dock { margin-top: var(--s-32); }
}

/* ═══ A night canopy (the user's photo, toned to the forest green), treeline along the bottom: behind listening and the
   bird card, and the splash; it fades out on the start screen so the monal has the room to itself. ═══ */
.room::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(art/bg-forest-sm.webp?v=1) 72% 100% / cover no-repeat; opacity: 0; transition: opacity .6s ease; }
/* everywhere in the room except the start screen, where the monal stands alone — at 30 % */
.room::before { opacity: .3; }
body[data-mode="idle"] .room::before, body[data-mode="loading"] .room::before { opacity: 0; }
@media (min-width: 1024px) { .room::before { background-image: url(art/bg-forest.webp?v=1); background-position: 50% 100%; } }
@media (prefers-reduced-motion: reduce) { .room::before { transition: none; } }
/* the splash: the logo over the same canopy */
.splash::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3;
  background: url(art/bg-forest-sm.webp?v=1) 72% 100% / cover no-repeat; }
@media (min-width: 1024px) { .splash::before { background-image: url(art/bg-forest.webp?v=1); background-position: 50% 100%; } }