/* The chapters bar: search · playlists · neighborhoods, and the drill-in list.
   Design cleanups baked in vs v1:
   - ONE section-label style (.seclabel) — v1 had .region-label + .pl-seclabel + h4
   - ONE pill scale (.chip) — v1 had .pl-chip / .region-pill / .type-chip at 3 sizes
   - flat hairline rows everywhere — v1 boxed neighborhoods in a lone tinted card
   - list header shows the count ONCE — v1 printed it in .pl-head AND .srh-count
   - consistent vertical rhythm from the --sN spacing scale                         */

/* ── SEARCH ─────────────────────────────────────────────────────────────── */
#search-wrap { position: relative; margin-bottom: var(--s4); }
#search-wrap svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: var(--muted); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
#search-input {
  width: 100%; padding: 9px 30px 9px 32px;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--hover-tint); border: 1px solid var(--faint);
  border-radius: 8px; transition: border-color 0.15s, background 0.15s;
}
#search-input::placeholder { color: var(--muted); }
#search-input:focus { outline: none; border-color: var(--amber); background: rgba(0, 0, 0, 0.02); }
/* mobile: ≥16px stops iOS Safari from zooming the page in when the field is focused */
@media (max-width: 768px) { #search-input { font-size: 16px; } }
#search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 16px;
  color: var(--muted); display: none; padding: 2px 4px;
}
#search-clear.show { display: block; }
#search-clear:hover { color: var(--ink); }

/* ── SHARED PRIMITIVES ──────────────────────────────────────────────────── */
.seclabel {
  font-family: var(--sans); font-size: var(--label-size); font-weight: var(--label-weight);
  letter-spacing: var(--label-track); color: var(--muted); text-transform: uppercase;
  margin: 0 0 var(--s3);
}
/* full-bleed section divider in the sidebar (spans past the sidebar padding) */
.sb-rule { height: 0; border: 0; border-top: 1px solid var(--faint); margin: var(--s4) calc(-1 * var(--sidebar-pad)); }
.sb-rule.top { margin-top: var(--s3); }

/* home grouping tabs — light segmented control (Playlists / Threads) */
.home-tabs { display: flex; gap: var(--s4); margin: 0 0 var(--s3); border-bottom: 1px solid var(--faint); }
.home-tab {
  font-family: var(--sans); font-size: var(--label-size); font-weight: var(--label-weight);
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 0 0 6px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.home-tab.active { color: var(--ink); border-bottom-color: var(--amber); }
.home-tab:hover { color: var(--ink); }
.seclabel + .chips { margin-top: calc(-1 * var(--s1)); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  padding: 6px 12px; font-family: var(--sans);
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted);
  background: none; border: 1px solid var(--faint); border-radius: 999px;
  cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap;
}
.chip:hover { border-color: var(--amber); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.new { border-style: dashed; }
.chip .chip-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); margin-left: 6px; vertical-align: middle; }
.chip .chip-count { color: var(--muted); font-size: 10px; margin-left: 5px; letter-spacing: 0; }

/* groups within the home view share one rhythm */
.home-group { margin-top: var(--s6); }
.home-group:first-child { margin-top: 0; }

/* ── NEIGHBORHOOD ROWS (flat, hairline) ─────────────────────────────────── */
.hood-row {
  display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  padding: 9px 0; border-bottom: 1px solid var(--faint);
}
.hood-row:hover { background: var(--hover-tint); }
.hood-name { flex: 1; font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); }
.hood-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* borough overview row — a tappable "{Borough}: {Title}" that plays the summary */
.bsum-row {
  display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  padding: 9px 0; border-bottom: 1px solid var(--faint);
  color: var(--amber);
}
.bsum-row:hover { background: var(--hover-tint); }
.bsum-row > svg { flex-shrink: 0; }
.bsum-text { flex: 1; font-family: var(--serif); font-size: 15px; color: var(--ink); }
.bsum-name { font-weight: 600; color: var(--ink); }

/* ── DRILL-IN LIST VIEW ─────────────────────────────────────────────────── */
/* full-bleed to the sidebar edges so the opaque bg covers the now-playing card's
   8px negative-margin overhang as rows scroll up underneath. */
.pl-sticky {
  position: sticky; top: calc(-1 * var(--s6)); z-index: 5;
  background: var(--paper); padding-top: var(--s6);
  margin: 0 calc(-1 * var(--sidebar-pad)); padding-left: var(--sidebar-pad); padding-right: var(--sidebar-pad);
}
.pl-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s1); }
.pl-back {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s3);
  background: none; border: none; cursor: pointer; color: var(--ink);
  text-align: left; padding: 12px 8px 12px 2px; margin: -8px 0;
}
.pl-back:hover { opacity: 0.7; }
.pl-back-ch { font-size: 20px; line-height: 1; flex-shrink: 0; }
.pl-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.pl-search-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px 4px; display: flex; align-items: center; }
.pl-search-btn:hover { color: var(--ink); }
/* one count, one place: the actions bar. (v1 duplicated it in the head.) */
.list-actions {
  display: flex; align-items: center; gap: var(--s3);
  padding: 6px 0 var(--s2); border-bottom: 1px solid var(--faint); margin-bottom: var(--s1);
}
.list-actions .la-count {
  font-size: var(--label-size); font-weight: 600; letter-spacing: 1.5px;
  color: var(--muted); text-transform: uppercase; margin-right: auto;
}
.list-actions .la-action {
  font-family: var(--sans);
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 2px 0; transition: color 0.15s;
}
.list-actions .la-action:hover { color: var(--amber); }

/* ── STORY ROWS (search results + lists) ────────────────────────────────── */
.row {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: 10px 0; border-bottom: 1px solid var(--faint); cursor: pointer;
}
.row:hover { background: var(--hover-tint); }
.row-main { flex: 1; min-width: 0; }
.row-zone { font-size: 11px; letter-spacing: 0.5px; color: var(--muted); text-transform: uppercase; margin-bottom: 2px; }
.row-title { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.row-title .row-dur { font-family: var(--sans); font-size: 10px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.row-thesis { font-family: var(--serif); font-size: 12px; color: color-mix(in srgb, var(--ink) 74%, transparent); line-height: 1.45; }
.row-dur { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* now-playing: flat dark card, white text. The card IS the player — it grows a
   scrubber at its bottom edge (tap the card to play/pause, drag the bar to seek). */
.row.active {
  background: var(--ink);
  border-bottom-color: transparent;
  border-radius: 10px; flex-wrap: wrap;
  margin: 0 calc(-1 * var(--s2)); padding-left: var(--s2); padding-right: var(--s2); padding-bottom: 8px;
}
.row.active:hover { background: var(--ink); }
.row-scrub { flex: 0 0 100%; height: 3px; margin-top: 9px; background: rgba(255, 255, 255, 0.22); border-radius: 2px; cursor: pointer; }
.row-scrub-fill { height: 100%; width: 0%; background: var(--bright); border-radius: 2px; }
.row.active .row-zone { color: rgba(255, 255, 255, 0.5); }
.row.active .row-title { color: var(--bright); font-weight: 600; }
.row.active .row-title .row-dur { color: rgba(255, 255, 255, 0.4); }
.row.active .row-thesis { color: rgba(255, 255, 255, 0.85); }
.row.active .row-dur { color: rgba(255, 255, 255, 0.45); }
.row-actions {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 2px;
}
.row-actions .voice-mini { margin-left: 0; vertical-align: baseline; width: 24px; height: 24px; }
.row.active .row-share, .row.active .row-add { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.3); }
.row.active .row-share:hover, .row.active .row-add:hover { color: var(--bright); border-color: rgba(255, 255, 255, 0.6); }
.row-share, .row-add {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--faint); background: none; color: var(--muted);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.row-share svg, .row-add svg { width: 13px; height: 13px; display: block; }
.row-share:hover, .row-add:hover { border-color: var(--amber); color: var(--ink); }

/* ── expand / collapse ─────────────────────────────────────────────────── */
/* compact: show row-sub (short description), hide row-detail */
.row-sub {
  font-family: var(--serif); font-size: 12px; color: color-mix(in srgb, var(--ink) 74%, transparent); line-height: 1.45;
}
.row.active .row-sub { color: rgba(255, 255, 255, 0.85); }
.row-detail { display: none; }
.row.expanded .row-sub { display: none; }
.row.expanded .row-detail { display: block; }

/* chevron at the bottom of the active card */
.row-expand {
  flex: 0 0 100%; display: flex; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 2px 0 0;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.15s, transform 0.2s;
}
.row-expand:hover { color: rgba(255, 255, 255, 0.7); }
.row-expand.flipped { transform: rotate(180deg); }

/* sources slot inside the detail section */
.row-sources-slot {
  margin-top: var(--s2);
  font-family: var(--sans);
}
.src-label {
  font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.row.active .src-label { color: rgba(255, 255, 255, 0.4); }
.src-links { display: flex; flex-wrap: wrap; gap: 5px; }
.src-link {
  font-size: 10px; color: var(--muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 3px 8px; border-radius: 10px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.src-link:hover { color: var(--ink); background: rgba(0, 0, 0, 0.08); }
.row.active .src-link { color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); }
.row.active .src-link:hover { color: var(--bright); background: rgba(255, 255, 255, 0.15); }
.src-empty { font-size: 10px; color: var(--muted); }
.row.active .src-empty { color: rgba(255, 255, 255, 0.35); }

.row-drag { flex-shrink: 0; align-self: center; color: var(--faint); font-size: 16px; cursor: grab; touch-action: none; padding: 0 2px; user-select: none; }
.row.dragging { opacity: 0.6; background: rgba(200, 132, 42, 0.06); }

/* per-card membership tags (neighborhood / category / your playlists) */
.row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s2); }
.row-tags .row-dur { margin-top: 0; margin-left: auto; }
.tag {
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); line-height: 1.3;
  background: none; border: 1px solid var(--faint); border-radius: 999px;
  padding: 3px 8px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.tag:hover { border-color: var(--amber); color: var(--ink); }
.row.active .tag { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.28); }
.row.active .tag:hover { color: var(--bright); border-color: rgba(255, 255, 255, 0.55); }

/* thread (entity) rows in a category drill-in: name + blurb + chapter count */
.thread-row { align-items: center; }
.thread-count { flex-shrink: 0; align-self: center; margin-left: var(--s2); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.list-empty, .home-empty { padding: var(--s4) 0; font-size: 13px; color: var(--muted); font-style: italic; }
.list-loading { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
/* thread/entity blurb under the list header */
.list-blurb { font-family: var(--serif); font-style: italic; font-size: 13px; color: color-mix(in srgb, var(--ink) 70%, transparent); line-height: 1.45; padding: 0 0 var(--s2); }

/* brief flash when a map-clicked chapter is revealed in the list */
.row.peek { animation: rowpeek 1.4s ease; }
@keyframes rowpeek { 0%, 100% { background: transparent; } 25% { background: rgba(200, 132, 42, 0.18); } }
/* ...but never on the now-playing card — rowpeek animates `background`, which would
   wash the solid-black active card to transparent (white) then back. It's already
   distinct + scrolled into view, so it needs no peek. */
.row.active.peek { animation: none; }

/* ── SHEET / MENU / DIALOG (ported) ─────────────────────────────────────── */
#pl-scrim { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, 0.4); display: none; }
#pl-scrim.on { display: block; }
.pl-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-radius: 16px 16px 0 0; padding: 8px 0 22px; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2); max-width: 520px; margin: 0 auto; z-index: 121; max-height: 75vh; overflow-y: auto; }
.pl-sheet-label { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 14px 20px 4px; }
.pl-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--faint); margin: 8px auto 4px; }
.pl-sheet-title { font-size: 13px; font-weight: 600; padding: 10px 20px; border-bottom: 1px solid var(--faint); }
.pl-sheet-item { padding: 14px 20px; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.pl-sheet-item:hover { background: rgba(0, 0, 0, 0.03); }
.pl-sheet-item.add { color: var(--amber); font-weight: 500; }
.pl-sheet-item .pl-chk { margin-left: auto; color: var(--amber); }
.pl-menu { position: fixed; min-width: 190px; max-width: 280px; background: var(--paper); border: 1px solid var(--faint); border-radius: 10px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); z-index: 121; overflow: hidden; }
.pl-menu .pl-sheet-title { font-size: 12px; padding: 8px 14px; color: var(--muted); }
.pl-menu .pl-sheet-item { padding: 9px 14px; font-size: 14px; }
.pl-dialog { position: fixed; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); max-width: 420px; margin: 0 auto; background: var(--paper); border-radius: 14px; padding: 22px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25); z-index: 121; }
.pl-dialog h3 { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.pl-dialog input { width: 100%; border: 1px solid var(--faint); border-radius: 8px; padding: 11px; font-size: 16px; font-family: var(--sans); }
.pl-dialog input:focus { outline: none; border-color: var(--amber); }
.pl-dbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.pl-dbtn { border: none; background: none; font-size: 15px; padding: 8px 14px; cursor: pointer; color: var(--muted); }
.pl-dbtn.go { background: var(--ink); color: var(--paper); border-radius: 8px; }