/* The library's pages (library.js): Home, Search, Your Library, the lists in full, albums, and the speaker, topic and
   talk pages, in the client's light look: a cream page, white cards (radius 16, soft shadows), navy text, gray
   secondary text, blue accents and round blue play buttons. Talks show their landscape (.art, tapes.js cover()).
   The header, the bottom navigation, the mini player and the full player are the Shell's (shell.css, loaded last):
   the older rules for them below stay until shell.css takes over, as do the Parking Lot's (lot.css). Only the theme
   tokens from style.css (--clay is the blue, --clay-dark blue for text, --help the red). */

#lib-screen { max-width: 1080px; padding: 0 16px calc(var(--dock-h) + 96px); }
.view { padding-top: 2px; }
.view h2.section { margin: 0 0 12px; font: 700 26px/1.15 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.view h2.section small { margin-left: 6px; font: 500 13px var(--mono); letter-spacing: 0.06em; color: var(--ink-2); }

/* ---------- The header (the Shell's: shell.css settles its look) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top);
  background: var(--bar); color: var(--bar-ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 6px 20px rgba(28, 37, 43, 0.12);
}
.topbar-in { display: flex; align-items: center; gap: 8px; max-width: 1080px; height: 64px; margin: 0 auto; padding: 0 16px; }
.bar-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; margin-left: -6px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--bar-ink);
}
.bar-icon + .bar-icon { margin-left: -4px; }
.bar-icon:active { background: rgba(243, 236, 224, 0.1); }
.topbar .brand { margin-right: auto; }
.topbar-title {
  flex: 1; min-width: 0; margin: 0 2px;
  font: 700 21px/1.15 var(--display); letter-spacing: -0.01em; color: var(--bar-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 200ms;
}
.topbar.titled .topbar-title { opacity: 1; }
.topbar.root .topbar-title { display: none; }
.topbar:not(.root) .brand { display: none; }
.badge {
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 2px;
  border-radius: 11px; background: var(--clay); color: #fff; font: 700 12px/1 var(--sans);
}
/* Narrower: a smaller mark. */
@media (max-width: 640px) {
  .topbar-in { gap: 6px; padding: 0 12px 0 14px; }
  .topbar .brand { gap: 8px; }
  .topbar .brand .logo { width: 30px; height: 30px; border-radius: 9px; }
  .topbar .brand-name { font-size: 21px; }
}
/* A phone, on an inner page: Back takes the menu's place (the menu is on every tab), so the name has room. */
@media (max-width: 430px) {
  .topbar:not(.root) [data-menu] { display: none; }
}
@media (max-width: 390px) {
  .topbar-in { gap: 5px; }
  .topbar .brand { gap: 7px; }
  .topbar .brand .logo { width: 28px; height: 28px; border-radius: 8px; }
  .topbar .brand-name { font-size: 18.5px; }
}
@media (max-width: 340px) { .topbar .brand-name { display: none; } }

/* ---------- The dock: mini player and tabs ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; }
.dock > * { pointer-events: auto; }
.tabs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 4px max(4px, calc((100% - 640px) / 2)) calc(env(safe-area-inset-bottom) + 4px);
  background: var(--bar);
  box-shadow: 0 -10px 30px rgba(28, 37, 43, 0.16);
}
.tabs a, .tabs button {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 0; padding: 10px 0 9px;
  border: 0; background: none;
  color: rgba(243, 236, 224, 0.72); text-decoration: none;
  font: 500 11px/1.1 var(--sans); letter-spacing: 0.01em; white-space: nowrap;
}
.tabs i { display: block; height: 24px; color: rgba(243, 236, 224, 0.55); }
.tabs i svg { display: block; }
.tabs a.on, .tabs a.on i { color: var(--blue); }
@media (max-width: 420px) { .tabs a, .tabs button { font-size: 10.5px; letter-spacing: 0; } }
@media (max-width: 340px) { .tabs a, .tabs button { font-size: 9.5px; } }

.mini {
  position: relative; display: flex; align-items: center; gap: 2px;
  max-width: 640px; margin: 0 auto 8px; padding: 7px 6px 7px 7px;
  border-radius: 18px; overflow: hidden;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(28, 37, 43, 0.2);
}
.dock > .mini { margin: 0 10px 8px; }
@media (min-width: 660px) { .dock > .mini { margin: 0 auto 8px; } }
/* How far along, a thin line along the bottom. */
.mini::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%);
  background: var(--clay); transition: width 250ms linear;
}
.mini-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
  padding: 0; border: 0; background: none; color: inherit; text-align: left;
}
.mini-text { min-width: 0; display: grid; }
.mini-text b, .mini-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-text b { font: 600 15px/1.25 var(--sans); color: var(--ink); }
.mini-text small { font-size: 13px; color: var(--ink-2); }
.mini-btn {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--ink);
}
#mini-play { background: var(--peach); }
/* In a conversation it sits just above the box you type in, and steps aside for the keyboard. */
#chat .mini { position: relative; z-index: 6; margin: 0 12px 8px; }
#chat.keyboard .mini { display: none; }

/* ---------- A talk's picture: a landscape, square, with rounded corners ---------- */
.art {
  position: relative; display: block; flex: 0 0 auto; width: 100%; aspect-ratio: 1;
  border-radius: 14px; overflow: hidden; background: var(--paper-2);
}
.art img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.art.xs { width: 44px; border-radius: 9px; }
.art.sm { width: 54px; border-radius: 10px; }
.art.md { width: 112px; border-radius: 12px; }
.art.lg { width: min(66vw, 300px); margin: 0 auto; border-radius: 20px; box-shadow: 0 18px 40px rgba(11, 31, 59, 0.22); }

/* A speaker: initials in a circle, in their own color. */
.avatar {
  --c: #2f5d62;
  display: grid; place-items: center; flex: 0 0 auto; width: 100%; aspect-ratio: 1;
  container-type: inline-size; border-radius: 50%;
  background-color: var(--c);
  background-image:
    radial-gradient(circle at 35% 25%, rgba(255, 240, 220, 0.28), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
  box-shadow: 0 8px 20px rgba(27, 31, 34, 0.16), inset 0 0 0 1px rgba(255, 245, 230, 0.18);
}
.avatar > span { font: 700 36cqw/1 var(--display); color: var(--cream); letter-spacing: 0.01em; }
.avatar.xs { width: 28px; box-shadow: none; }
.avatar.md { width: 112px; }
.avatar.xl { width: 148px; margin: 0 auto 14px; }
/* A speaker's photo, once the catalog has one, in the same circle. */
.avatar.photo { overflow: hidden; }
.avatar.photo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

/* ---------- A page's own heading (the header shows no page names) ---------- */
.view .page-title { margin: 20px 0 16px; }
.view .page-title .display { font: 700 30px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.view .page-title .page-lede { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 720px) { .view .page-title .display { font-size: 36px; } }
.home-head { margin-bottom: 8px; }

/* ---------- Sections: a heading, and See all › ---------- */
.sec { margin: 26px 0 6px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 0 8px; }
.sec-head h2 { margin: 0; min-width: 0; font: 700 21px/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.sec-head h2 small { margin-left: 6px; font: 500 15px var(--sans); color: var(--ink-2); }
.see-all {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 0 0 10px;
  border: 0; background: none; color: var(--clay-dark); font: 600 15.5px var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sec-note { margin: 12px 2px 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.sec-note .link-btn { display: inline; margin: 0; padding: 0; font-size: inherit; }

/* ---------- Pills: each its own, scrolling sideways; the chosen one solid blue ---------- */
.pills {
  position: relative; display: flex; gap: 8px; margin: 0 -16px 18px; padding: 2px 16px 4px;
  overflow-x: auto; scrollbar-width: none; scroll-padding: 0 16px;
}
.pills::-webkit-scrollbar { display: none; }
.pill-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 31, 59, 0.05);
}
.pill-tab.on { border-color: var(--clay); background: var(--clay); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--clay) 30%, transparent); }
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; padding: 0 16px 0 12px;
  border: 0; border-radius: 999px; background: color-mix(in srgb, var(--clay) 14%, var(--paper)); color: var(--clay-dark);
  font: 600 15px var(--sans); white-space: nowrap;
}

/* ---------- The search box: big and white ---------- */
.search-box {
  display: flex; align-items: center; gap: 10px; height: 58px; margin: 0 0 14px; padding: 0 6px 0 16px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper); color: var(--ink-2); box-shadow: var(--shadow);
}
.search-box:focus-within { border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 25%, transparent); }
.search-box > svg { flex: 0 0 auto; color: var(--ink-2); }
.search-box input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
  border: 0; background: none; color: var(--ink); font: 17px var(--sans);
  -webkit-appearance: none; appearance: none;
}
.search-box input:focus { box-shadow: none; outline: none; }
.search-box input::placeholder { color: var(--faint); }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.q-clear { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); }
#results { transition: opacity 150ms; }
#results.busy { opacity: 0.6; }
#results > .chips { margin-bottom: 4px; }
/* Filter, on All talks */
.search-filter {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px;
  border: 0; border-radius: 12px; background: none; color: var(--ink); font: 600 15px var(--sans);
}
.search-filter.on { color: var(--clay-dark); }
.search-filter.on::after { content: ''; position: absolute; top: 9px; left: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }

/* ---------- A.A. or Al-Anon: Search's switch (three equal parts, the chosen one navy), and the marks ---------- */
.fellowship-switch {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 14px; padding: 4px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 1px 2px rgba(11, 31, 59, 0.05);
}
.fellowship-switch button {
  min-height: 46px; padding: 0 6px; border: 0; border-radius: 12px; background: none; color: var(--ink);
  font: 600 16px/1.2 var(--sans); white-space: nowrap;
}
.fellowship-switch button.on { background: var(--ink); color: var(--bg); }
.fellowship-note { margin-bottom: 10px; }
/* An Al-Anon talk (or one for both), quietly: a small outlined chip. */
.fellowship-chip {
  display: inline-block; width: fit-content; padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--ink-2); font: 600 12.5px/1.35 var(--sans); white-space: nowrap;
}
.track-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; }
.track-marks:not(:has(.free-pill, .fellowship-chip)) { display: none; }

/* ---------- Explore by topic: pictures two by two, the name in white ---------- */
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topic-tile {
  position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background: var(--paper-2); box-shadow: var(--shadow); text-decoration: none;
}
.topic-tile img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.topic-tile::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(11, 31, 59, 0) 35%, rgba(11, 31, 59, 0.8) 100%); }
.topic-tile span {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  font: 700 17px/1.2 var(--sans); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ---------- Lists of links: More ways to browse, speakers, Following ---------- */
.link-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.link-list li + li { border-top: 1px solid var(--line); }
.link-list a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 12px 10px 14px; color: var(--ink); text-decoration: none; font: 500 16.5px var(--sans); }
.link-list a > svg:first-child { flex: 0 0 auto; color: var(--clay-dark); }
.link-list a > svg:last-child { flex: 0 0 auto; margin-left: auto; color: var(--ink-2); }
.link-list a > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.link-list a > span b { font: 600 16.5px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-list a > span small { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A face at the row's start (the Speakers list) is a span too: it keeps its size, the text span takes the rest. */
.link-list a > .avatar { flex: 0 0 auto; display: grid; gap: 0; }
@media (hover: hover) { .link-list a:hover { background: var(--paper-2); } }
.az { margin-top: 18px; }
.az-letter { margin: 0 0 8px 4px; font: 700 15px var(--sans); color: var(--clay-dark); }
/* A card that's a link: Upcoming events, from Search */
.go-card {
  display: flex; align-items: center; gap: 14px; min-height: 72px; margin: 0 0 6px; padding: 14px 12px 14px 16px;
  border-radius: 16px; background: color-mix(in srgb, var(--clay) 12%, var(--paper)); color: var(--ink); text-decoration: none;
}
.go-card > svg:first-child { flex: 0 0 auto; color: var(--clay-dark); }
.go-card > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.go-card b { font: 700 16.5px/1.3 var(--sans); }
.go-card small { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.go-card > svg:last-child { flex: 0 0 auto; color: var(--ink-2); }

/* ---------- Continue listening: one big white card ---------- */
.going-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'art text play' 'art bar bar';
  align-items: center; column-gap: 14px; row-gap: 10px; padding: 14px;
  border-radius: 16px; background: var(--paper); box-shadow: var(--shadow);
}
.going-art { grid-area: art; display: block; }
.going-art .art.md { width: 88px; }
.going-text { grid-area: text; align-self: end; display: grid; gap: 3px; min-width: 0; color: inherit; text-decoration: none; }
.going-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 17px/1.28 var(--sans); color: var(--ink); }
.going-text small { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.going-card > .play-btn { grid-area: play; }
.going-bar { grid-area: bar; align-self: start; display: flex; align-items: center; gap: 10px; min-width: 0; }
.going-track { flex: 1; display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--clay) 18%, var(--line)); overflow: hidden; }
.going-track i { display: block; height: 100%; border-radius: inherit; background: var(--clay); }
.going-bar em { flex: 0 0 auto; font: 500 13.5px var(--sans); font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.going-card.is-current { box-shadow: inset 0 0 0 2px var(--clay), var(--shadow); }
@media (max-width: 360px) { .going-card { column-gap: 10px; padding: 12px; } .going-art .art.md { width: 72px; } }

/* ---------- Picture cards in a row you swipe: New from Speaker Guide, More from…, albums ---------- */
.img-row, .shelf-row {
  --card-w: 156px;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w); gap: 12px;
  margin: 0 -16px; padding: 2px 16px 14px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none;
}
.img-row::-webkit-scrollbar, .shelf-row::-webkit-scrollbar, .speaker-row::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .img-row, .shelf-row, .speaker-row { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
}
@media (min-width: 720px) { .img-row, .shelf-row { --card-w: 184px; gap: 16px; } }
.img-card { position: relative; min-width: 0; scroll-snap-align: start; }
.img-link {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
  background: var(--paper-2); color: #fff; text-decoration: none; box-shadow: var(--shadow);
}
.img-link > .art { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.img-fade { position: absolute; inset: 38% 0 0; background: linear-gradient(180deg, rgba(11, 31, 59, 0) 0%, rgba(11, 31, 59, 0.6) 45%, rgba(11, 31, 59, 0.94) 100%); }
.img-text { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 1px; }
.img-text b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px;
  font: 700 16px/1.25 var(--sans); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.img-text small { font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-heart {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(11, 31, 59, 0.42); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.img-heart[aria-pressed="true"] { color: #ff8a80; }
.img-card .free-slot { position: absolute; top: 12px; left: 12px; }
.img-card.is-current .img-link { box-shadow: 0 0 0 3px var(--clay), var(--shadow); }

/* ---------- Rows with a picture: Saved Talks, Free to listen, History, Downloads ---------- */
.row-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.talk-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px;
  min-height: 80px; padding: 10px 2px 10px 10px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow);
}
.row-art { display: block; }
.row-art .art.sm { width: 60px; border-radius: 12px; }
.row-text { display: grid; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.row-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 16px/1.3 var(--sans); color: var(--ink); }
.row-text small { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--ink-2); }
.row-more {
  display: grid; place-items: center; width: 40px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: none; color: var(--ink-2);
}
.talk-row.playing { box-shadow: inset 0 0 0 2px var(--clay), var(--shadow); }
.talk-row.playing .row-text b { color: var(--clay-dark); }
@media (max-width: 360px) { .talk-row { column-gap: 9px; } .row-art .art.sm { width: 50px; } }

/* ---------- Discussion, on a talk's page: the newest posts about it at the Parking Lot, and Start a discussion ---------- */
.talk-discussion-box { margin-top: 4px; }
.disc-list { list-style: none; margin: 0 0 12px; padding: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.disc-row + .disc-row { border-top: 1px solid var(--line); }
.disc-row a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 76px; padding: 12px 8px 12px 14px; color: inherit; text-decoration: none; }
@media (hover: hover) { .disc-row a:hover { background: var(--paper-2); } }
.disc-row .avatar.xs { width: 36px; }
.disc-face { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--paper-2); color: var(--ink-2); }
.disc-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.disc-face.anon { background: color-mix(in srgb, var(--clay) 13%, var(--paper)); color: var(--clay-dark); }
.disc-text { display: grid; gap: 2px; min-width: 0; }
.disc-text small { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.disc-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.disc-text em { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font: 500 13px var(--sans); font-style: normal; color: var(--clay-dark); }
.disc-go { display: grid; width: 32px; place-items: center; color: var(--ink-2); }
.disc-none { margin: 0 2px 12px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.btn.ghost.disc-start { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 48px; padding: 0 20px; }
.btn.ghost.disc-start svg { flex: 0 0 auto; }

/* ---------- Said in a talk: a line from a transcript, the words that matched in bold ---------- */
.said-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.said-row a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px;
  border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); color: inherit; text-decoration: none;
}
.said-text { display: grid; gap: 2px; min-width: 0; }
.said-text > b { font: 600 16px/1.3 var(--sans); color: var(--ink); }
.said-text > small { font-size: 14px; color: var(--ink-2); }
.said-text q { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.said-text q b { font-weight: 700; color: var(--clay-dark); }

/* ---------- Round play buttons: blue, a white triangle ---------- */
.play-btn {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink);
}
.play-btn .ico { display: grid; }
.play-btn.blue, .play-btn.big, .play-btn.on-cover, .play-btn.row {
  border-color: transparent; background: var(--clay); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--clay) 35%, transparent);
}
.play-btn.big { width: 56px; height: 56px; }
.is-current > .play-btn.on-cover { background: var(--clay-dark); }
.list-head { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; }
.list-head .link-btn { margin: 0 0 0 auto; }
.list-count { margin: 0; color: var(--ink-2); font: 500 14.5px var(--sans); }
.list-label { font: 600 15px var(--sans); color: var(--ink); }
.play-big {
  flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; padding: 0 0 0 2px;
  border: 0; border-radius: 50%; color: #fff; background: var(--clay);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--clay) 35%, transparent);
}
.sorts { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.show-more { max-width: 240px; margin: 16px auto 0; }
.list-note .hint { text-align: center; }

/* ---------- Track rows (albums, a speaker's or a topic's talks, results): number, play, title, heart, ⋯ ---------- */
ol.tracks { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
ol.tracks:empty { display: none; }
.track {
  display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px;
  min-height: 74px; padding: 10px 6px 10px 8px;
  border-bottom: 1px solid var(--line); transition: background-color 150ms;
}
.track:last-child { border-bottom: 0; }
@media (hover: hover) { .track:hover { background: var(--paper-2); } }
.track-num { font: 500 13.5px var(--sans); color: var(--faint); text-align: center; font-variant-numeric: tabular-nums; }
.track-play {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--clay) 15%, var(--paper)); color: var(--clay-dark);
}
.track-play svg { margin-left: 1px; }
.track-text { min-width: 0; display: grid; gap: 2px; color: inherit; text-decoration: none; }
.track-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 16.5px/1.28 var(--sans); color: var(--ink); }
.track-sub { font-size: 14px; line-height: 1.35; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-meta { font: 600 12.5px/1.3 var(--sans); color: var(--clay-dark); }
.track-meta.done { color: var(--mint-ink); }
.track-text .free-slot { justify-self: start; }
.track-time { font: 400 13px var(--sans); color: var(--ink-2); white-space: nowrap; }
.track-heart { display: grid; place-items: center; width: 40px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); }
.track-heart[aria-pressed="true"] { color: #e0524a; }
.track-more { display: grid; place-items: center; width: 34px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); }
.track.playing { background: color-mix(in srgb, var(--clay) 8%, var(--paper)); }
.track.playing .track-play { background: var(--clay); color: #fff; }
.track.playing .track-title { color: var(--clay-dark); }
.track.playing .track-num { color: var(--clay-dark); }
@media (max-width: 719px) { .track-time { display: none; } }
@media (max-width: 430px) {
  .track { grid-template-columns: 22px 42px minmax(0, 1fr) auto auto; gap: 8px; padding: 10px 2px 10px 6px; }
  .track-play { width: 42px; height: 42px; }
  .track-heart { width: 36px; }
  .track-more { width: 30px; }
  .track-title { font-size: 16px; }
  .track-sub { font-size: 13.5px; }
  .track-num { font-size: 12.5px; }
}
/* In search: an album standing in for its talks (a number, its name, ›: no play, heart or ⋯) */
.track.album-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
@media (max-width: 430px) { .track.album-row { grid-template-columns: 22px minmax(0, 1fr) auto; } }
.track.album-row .track-title { color: var(--clay-dark); }
.album-row-go { display: grid; place-items: center; width: 40px; color: var(--ink-2); }

/* ---------- Status pills (Speaker Guide+), the refined list, REFINE LIBRARY ---------- */
.status-pill {
  grid-area: pill; justify-self: end; margin-bottom: 6px; padding: 10px 16px;
  border: 1px solid #b9d6c4; border-radius: 999px; background: var(--mint); color: var(--mint-ink);
  font: 600 12.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
}
.status-pill.off { border-color: var(--line); background: var(--paper-2); color: var(--ink-2); }
.refined { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.refined:empty { display: none; }
.all-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 12px; }
.all-tools .search-filter { height: 40px; padding: 0 16px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.all-tools .search-filter.on::after { top: 6px; left: 26px; }
/* REFINE LIBRARY: a dark pill floating over the list, above the mini player and the tabs. */
.refine-pill {
  position: fixed; z-index: 25;
  right: max(16px, calc((100vw - 1080px) / 2 + 16px)); bottom: calc(var(--dock-h) + 16px);
  display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px 15px 20px;
  border: 1.5px solid rgba(243, 236, 224, 0.16); border-radius: 999px;
  background: var(--bar); color: var(--peach-on-dark);
  font: 600 14px/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(28, 37, 43, 0.35);
  transition: opacity 200ms, transform 200ms;
}
.refine-pill:active { transform: translateY(1px); }
/* It comes up once the list is on screen (the box's Filter does the same job above it). */
.refine-pill:not(.shown), .refine-pill.tucked { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* ---------- Speakers and tags ---------- */
.speaker-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 118px; gap: 16px;
  margin: 0 -16px; padding: 2px 16px 12px; list-style: none; overflow-x: auto; scrollbar-width: none;
}
.speaker-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 16px; }
.speaker-card a { display: block; text-align: center; color: inherit; text-decoration: none; }
.speaker-card b { display: block; margin-top: 9px; font: 600 15px/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speaker-card small { display: block; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.tag-tile {
  position: relative; isolation: isolate; display: block; min-height: 96px; padding: 14px 14px 12px; overflow: hidden;
  border-radius: 18px; color: #fff; text-decoration: none;
  background-color: var(--c);
  background-image: linear-gradient(135deg, rgba(255, 240, 220, 0.18), rgba(0, 0, 0, 0.18));
  box-shadow: 0 6px 16px rgba(27, 31, 34, 0.14);
}
.tag-tile b { display: block; max-width: 84%; font: 700 20px/1.1 var(--display); letter-spacing: -0.01em; }
.tag-tile small { display: block; margin-top: 6px; font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
/* Rings in the corner, like the hero's. */
.tile-ring {
  position: absolute; z-index: -1; right: -34px; bottom: -46px; width: 110px; height: 110px;
  border: 1.5px solid rgba(255, 255, 255, 0.32); border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.06);
}

.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font: 500 14px/1.2 var(--sans); text-decoration: none; white-space: nowrap;
}
.chip small { font: 400 11px var(--mono); color: var(--ink-2); }

/* ---------- Search results ---------- */
.results-grid { display: grid; gap: 4px 28px; }
.results-grid > section { margin-bottom: 18px; }
@media (min-width: 820px) { .results-grid { grid-template-columns: minmax(280px, 360px) 1fr; } }
.top-card-wrap { position: relative; }
.top-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px;
  border: 0; border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow); color: inherit; text-decoration: none;
}
.top-card > b { font: 700 22px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); padding-right: 64px; }
.top-card > small { font-size: 14px; color: var(--ink-2); }
.top-card .kind { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--clay) 13%, var(--paper)); color: var(--clay-dark); font: 600 12.5px var(--sans); }
.top-card-wrap > .play-btn { position: absolute; right: 18px; bottom: 18px; }
.tag-swatch { display: block; width: 112px; height: 72px; border-radius: 14px; background: var(--c); background-image: linear-gradient(135deg, rgba(255, 240, 220, 0.18), rgba(0, 0, 0, 0.18)); }

/* ---------- A segmented switch (the player's language choice uses it) ---------- */
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 16px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2);
}
.seg a { padding: 10px 4px; border-radius: 999px; color: var(--ink-2); text-align: center; text-decoration: none; font: 500 14.5px var(--sans); white-space: nowrap; }
.seg a.on { background: var(--bar); color: var(--bar-ink); font-weight: 600; }

/* ---------- Chips: popular searches, topics, narrowing results ---------- */
.chips { display: flex; gap: 8px; margin: 0 -16px 14px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
.chips:empty { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.chips .chip { min-height: 44px; padding: 0 16px; font-size: 15px; }
.chip.on { border-color: var(--clay); background: var(--clay); color: #fff; }
.chip.on small { color: rgba(255, 255, 255, 0.8); }
.speaker-row { margin: 0 -16px; }
.avatar.sm { width: 48px; box-shadow: none; }
.avatar.sm > span { font-size: 38cqw; }

/* ---------- Speaker, topic and talk pages ---------- */
.page-head { position: relative; isolation: isolate; padding: 22px 0 6px; text-align: center; }
.page-head::before {
  content: ''; position: absolute; z-index: -1; inset: -40px -16px 0;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, var(--c), transparent 70%); opacity: 0.12;
}
.kicker { margin: 0; font: 600 13.5px/1.4 var(--sans); color: var(--clay-dark); }
.kicker:empty { display: none; }
.page-head h1 { margin: 6px 0 6px; font: 700 32px/1.12 var(--display); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.page-facts { margin: 0 0 8px; color: var(--ink-2); font-size: 15.5px; }
.bio { margin: 16px 0 0; text-align: left; white-space: pre-line; font-size: 16px; line-height: 1.55; }
.tag-head { margin: 0 -16px; padding: 30px 16px 16px; text-align: left; }
.tag-head::before { inset: 0; background: linear-gradient(180deg, var(--c), transparent 95%); opacity: 0.16; }
.save-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  min-width: 50px; height: 50px; padding: 0 13px;
  border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--clay) 13%, var(--paper)); color: var(--clay-dark); font: 600 15px var(--sans);
}
.save-btn[data-save][aria-pressed="true"] { color: #e0524a; }
/* Follow (a speaker): outlined blue; Following: solid */
.save-btn.wide { min-height: 46px; height: auto; padding: 0 20px 0 14px; border: 1.5px solid var(--clay); background: var(--paper); color: var(--clay-dark); }
.save-btn.wide[aria-pressed="true"] { background: var(--clay); color: #fff; }

.talk-page { padding-top: 8px; }
.talk-hero { padding: 12px 0 20px; }
.talk-info #talk-kicker:not(:has(.free-pill, .fellowship-chip)) { display: none; }
.talk-info #talk-kicker { display: flex; flex-wrap: wrap; gap: 6px; }
.talk-info .kicker { margin-bottom: 8px; }
.talk-info h1 { margin: 0 0 12px; font: 700 28px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.talk-speakers { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 4px; }
.talk-speaker { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; }
.talk-speaker .avatar > span { font-size: 40cqw; }
.talk-speaker small { font-weight: 400; color: var(--ink-2); font-size: 15px; }
.talk-info .page-facts { margin-bottom: 4px; }
.talk-progress { height: 5px; margin: 12px 0 0; border-radius: 3px; background: color-mix(in srgb, var(--clay) 18%, var(--line)); overflow: hidden; }
.talk-progress i { display: block; height: 100%; background: var(--clay); }
.talk-actions { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; }
.talk-tools { display: flex; align-items: center; gap: 10px; }
/* A phone: Play gets its own line, the round buttons the next. */
@media (max-width: 520px) {
  .talk-actions { flex-wrap: wrap; }
  .talk-actions .btn.play-wide { flex: 1 0 100%; }
}
.btn.play-wide {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 0; height: 52px; margin: 0;
  border-color: var(--clay); border-radius: 999px; background: var(--clay); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--clay) 35%, transparent);
}
.btn.play-wide .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-desc { margin: 16px 0 0; white-space: pre-line; font-size: 16px; line-height: 1.6; }
.talk-info .chips.wrap { margin: 16px 0 0; }
@media (max-width: 380px) { .talk-actions { gap: 8px; } .talk-actions .save-btn { min-width: 46px; height: 46px; padding: 0 11px; } }
@media (min-width: 820px) {
  .talk-page { display: grid; grid-template-columns: 300px 1fr; gap: 8px 36px; align-items: start; }
  .talk-hero .art.lg { width: 300px; }
  .talk-info { padding-top: 22px; }
  .talk-more, .talk-discussion-box { grid-column: 1 / -1; }
}
/* On a talk's page: Part 2 of 5 · its album */
.talk-album {
  display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 4px 0 10px; padding: 10px 12px;
  border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-size: 15px;
}
.talk-album > span { flex: 1; min-width: 0; }
.talk-album b { font-weight: 600; }
.talk-album svg:first-child { flex: 0 0 auto; color: var(--clay-dark); }
.talk-album svg:last-child { flex: 0 0 auto; color: var(--ink-2); }
/* A speaker's heading, when another speaker has the same name: "Bob D. · Akron, OH" */
.page-head h1 .h1-home, .sp-hero h1 .h1-home { display: block; margin-top: 2px; font: 500 17px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-2); }
@media (min-width: 520px) { .page-head h1 .h1-home, .sp-hero h1 .h1-home { display: inline; margin: 0; font-size: 19px; } }

/* ---------- A speaker's page: a banner, the face and name over its edge, Play All and Follow, then
   Recordings · About · Events ---------- */
.speaker-page { padding-top: 0; }
.sp-top { --c: #2f5d62; position: relative; margin: 0 -16px 18px; padding: 0 16px; }
/* The banner: the cover of their newest talk, darkened toward the bottom; or a wash of their colour. */
.sp-banner { position: relative; height: 168px; margin: 0 -16px; overflow: hidden; background: color-mix(in srgb, var(--c) 72%, var(--navy)); }
.sp-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; -webkit-user-drag: none; }
.sp-banner-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 31, 59, 0.1) 0%, rgba(11, 31, 59, 0.3) 50%, rgba(11, 31, 59, 0.86) 100%); }
.sp-banner.plain .sp-banner-fade { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(11, 31, 59, 0.55)); }
.sp-dots {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(11, 31, 59, 0.38); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* The face over the banner's bottom edge, the name beside it (on the dark part of the banner). */
.sp-id { position: relative; display: flex; align-items: flex-end; gap: 14px; margin-top: -58px; }
.sp-id .avatar.xl {
  width: 104px; margin: 0; flex: 0 0 auto;
  box-shadow: 0 0 0 4px var(--gold), 0 10px 24px rgba(11, 31, 59, 0.3);
}
.sp-id-text { flex: 1; min-width: 0; padding-bottom: 2px; }
.sp-id h1 { margin: 0; font: 700 26px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.sp-id h1 .h1-home { display: block; margin-top: 1px; font: 500 15.5px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.sp-home { margin: 2px 0 0; font-size: 15.5px; line-height: 1.35; color: var(--ink-2); }
.sp-count { margin: 1px 0 0; font: 500 14.5px/1.35 var(--sans); color: var(--ink-2); }
/* Up on the banner, the name reads in white; the lines under the banner's edge in ink. On a phone the name sits
   over the dark fade, so it's white; wide screens the same. */
.sp-id-text { color: #fff; }
.sp-id h1, .sp-id h1 .h1-home, .sp-id .sp-home, .sp-id .sp-count { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.sp-id .sp-home, .sp-id .sp-count, .sp-id h1 .h1-home { color: rgba(255, 255, 255, 0.9); }
.sp-actions { display: flex; gap: 10px; margin: 16px 0 0; }
.sp-actions .btn, .sp-actions .save-btn.wide { flex: 1 1 0; min-width: 0; }
.btn.sp-playall {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 50px; padding: 0 16px;
  border-color: var(--clay); background: var(--clay); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--clay) 35%, transparent);
}
.sp-actions .save-btn.wide { min-height: 50px; height: auto; padding: 0 14px; justify-content: center; }
/* Recordings · About · Events: three equal pills across the page. */
.sp-pills { margin-bottom: 8px; }
.sp-pills .pill-tab { flex: 1 1 0; justify-content: center; min-height: 48px; padding: 0 12px; }
.sp-body { min-height: 220px; }
.sp-body .sec { margin-top: 10px; }
.sp-body .sec-head h2 { font-size: 19px; }
.sp-popular + .sp-all { margin-top: 24px; }
/* The order chips alone (Play All sits up top). */
.list-head.chips-only { margin: 0 0 10px; }
.list-head.chips-only .list-label { flex: 0 0 auto; font: 600 14px var(--sans); color: var(--ink-2); }
/* A recording as a row: the cover (tap to play), title, event, place · year, the length. */
.rec-list .rec {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  min-height: 78px; padding: 10px 4px 10px 10px; border-bottom: 1px solid var(--line);
}
.rec-list .rec:last-child { border-bottom: 0; }
.rec-art { position: relative; display: block; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 12px; background: var(--paper-2); overflow: hidden; }
.rec-art .art.sm { width: 60px; height: 60px; border-radius: 12px; }
.rec-face {
  position: absolute; inset: auto 0 0 0; display: grid; place-items: center; height: 24px;
  background: rgba(11, 31, 59, 0.55); color: #fff;
}
.rec-art.locked .rec-face { background: rgba(11, 31, 59, 0.7); }
.rec-text { min-width: 0; display: grid; gap: 1px; color: inherit; text-decoration: none; }
.rec-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 16px/1.28 var(--sans); color: var(--ink); }
.rec-text small { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-text .track-marks:empty { display: none; }
.rec-time { font: 500 13px var(--sans); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec.playing { background: color-mix(in srgb, var(--clay) 8%, var(--paper)); }
.rec.playing .rec-face { background: var(--clay); }
.rec.playing .rec-text b { color: var(--clay-dark); }
@media (max-width: 380px) { .rec-list .rec { gap: 10px; padding-left: 8px; } .rec-time { font-size: 12.5px; } }
/* About: the bio, then the facts as rows. */
.sp-about { margin-top: 8px; }
.sp-about .bio { margin: 0 0 14px; padding: 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); white-space: pre-line; }
.sp-nobio { margin: 0 0 14px; padding: 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink-2); }
.sp-facts { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.sp-facts li { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; }
.sp-facts li + li { border-top: 1px solid var(--line); }
.sp-facts li > svg { flex: 0 0 auto; color: var(--clay-dark); }
.sp-facts li > span { display: grid; gap: 1px; min-width: 0; }
.sp-facts small { font-size: 13px; color: var(--ink-2); }
.sp-facts b { font: 600 16px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.sp-events a > svg:first-child { color: var(--clay-dark); }
@media (min-width: 720px) {
  .sp-banner { height: 220px; border-radius: 0 0 24px 24px; }
  .sp-id .avatar.xl { width: 128px; }
  .sp-id h1 { font-size: 32px; }
  .sp-actions { max-width: 420px; }
}

/* ---------- Speakers: the search box, All · A–Z · Following · Location, the list in groups with headings that
   stay put ---------- */
.speakers-page .page-title { margin-bottom: 4px; }
.sp-list-count { margin: 0 0 14px; }
.sp-list-count:empty { display: none; }
.sp-search { margin-bottom: 12px; }
.speakers-page .pills { margin-bottom: 12px; }
.speakers-page .pill-tab { flex: 1 1 0; justify-content: center; min-height: 48px; padding: 0 12px; }
.sp-letters { margin: 0 -16px 10px; padding: 2px 16px; }
.sp-letters .chip.sp-letter { min-width: 44px; min-height: 44px; padding: 0 10px; justify-content: center; font: 600 15px var(--sans); }
.sp-letters .chip:disabled { opacity: 0.35; }
.speakers-page .az { margin-top: 14px; }
.speakers-page .az:first-child { margin-top: 0; }
.speakers-page .az-letter {
  position: sticky; top: calc(64px + env(safe-area-inset-top)); z-index: 3;
  margin: 0; padding: 8px 4px 6px; background: var(--bg); font: 700 15px var(--sans); color: var(--clay-dark);
}
.speakers-page .people a { min-height: 64px; }
.sp-star { flex: 0 0 auto; display: grid; color: var(--gold); margin-left: auto; }
.sp-star + svg { margin-left: 0 !important; }
.speakers-page .people .avatar.sm { width: 46px; }

/* ---------- When there's nothing, or it's on its way ---------- */
.empty { padding: 34px 12px; text-align: center; color: var(--ink-2); }
.empty-ico {
  display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--clay) 13%, var(--paper)); color: var(--clay-dark);
}
.empty h3 { margin: 0 0 6px; font: 700 22px/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.empty p { margin: 0 auto 16px; max-width: 380px; font-size: 15.5px; line-height: 1.5; }
.empty p svg { vertical-align: -4px; }
.empty .btn { display: inline-block; width: auto; min-height: 48px; padding: 13px 24px; }
/* A page whose parts swap with a sideways swipe (Your Library, Search, Events): the page itself pans up and down only,
   so the swipe is ours; the rows inside that scroll sideways (pills, shelves, chips) keep their own. */
.lib-swipe { touch-action: pan-y pinch-zoom; }
.loading { display: flex; justify-content: center; gap: 7px; padding: 30px 0; }
.loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); animation: blink 1.2s infinite; }
.loading span:nth-child(2) { animation-delay: 0.2s; }
.loading span:nth-child(3) { animation-delay: 0.4s; }

/* ---------- Albums: conventions and series (their own cover image, or their landscape) ---------- */
.album-art {
  position: relative; display: block; aspect-ratio: 1; width: 100%; border-radius: 16px; overflow: hidden;
  background: var(--paper-2); box-shadow: var(--shadow);
}
.album-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-art.lg { width: min(70vw, 300px); margin: 0 auto; border-radius: 20px; box-shadow: 0 18px 40px rgba(11, 31, 59, 0.22); }
.album-card { position: relative; min-width: 0; list-style: none; scroll-snap-align: start; }
.album-card > a { display: block; color: inherit; text-decoration: none; }
.album-card > a > b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 9px; font: 600 15.5px/1.3 var(--sans); color: var(--ink);
}
.album-card > a > small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2); }
.img-row.albums, .shelf-row.albums { --card-w: 156px; }
@media (min-width: 720px) { .img-row.albums, .shelf-row.albums { --card-w: 176px; } }
.album-card .play-btn { position: absolute; right: 8px; top: calc(var(--card-w, 156px) - 52px); }
.album-grid { --card-w: calc((min(100vw, 1080px) - 32px - 14px) / 2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.album-grid .album-card .play-btn { top: auto; bottom: calc(100% - var(--card-w) + 8px); }
@media (min-width: 640px) { .album-grid { --card-w: 180px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.album-grid > li.empty, .album-grid > li:has(.empty) { grid-column: 1 / -1; }
.more-row { display: flex; justify-content: center; margin: 22px 0 0; }
.more-row:empty { display: none; }
.more-row .btn { width: auto; padding: 11px 24px; }

.album-page { padding-top: 8px; }
.album-head { display: grid; gap: 22px; padding: 16px 0 6px; }
.album-info h1 { margin: 6px 0 10px; font: 700 28px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.album-info .talk-actions { margin-top: 14px; }
.album-tracks { margin-top: 18px; }
@media (min-width: 760px) {
  .album-head { grid-template-columns: 280px 1fr; align-items: end; gap: 32px; }
  .album-art.lg { width: 280px; margin: 0; }
}

/* ---------- The store (round 14): an album's offer, You own this album, codes from the table, My albums ---------- */
/* Two big choices under the cover and title: Own this album · $49.99 (outlined blue) and Everything with Speaker Guide+ ·
   $9.99 a month, then Have a code? */
.offer { display: grid; gap: 10px; margin: 18px 0 2px; }
.offer-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; margin: 0; padding: 14px 16px;
  border: 1.5px solid var(--clay); border-radius: 18px; background: var(--paper); color: var(--ink); text-align: left;
  box-shadow: var(--shadow); cursor: pointer;
}
.offer-choice.plus { border-color: var(--line-strong); }
.offer-choice:active { transform: translateY(1px); }
.offer-choice:disabled, .offer-choice.busy { opacity: 0.6; pointer-events: none; }
.offer-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.offer-text b { font: 700 17px/1.25 var(--sans); color: var(--ink); }
.offer-text small { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.offer-price { flex: 0 0 auto; display: grid; justify-items: end; font: 700 22px/1.1 var(--display); letter-spacing: -0.02em; color: var(--clay-dark); white-space: nowrap; }
.offer-price small { font: 500 12.5px/1.2 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.offer-code { margin: 2px auto 0; min-height: 44px; font-size: 16px; }
/* Card purchases not open yet: a plain note in the first choice's place. */
.offer-note {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--gold) 28%, var(--paper)); color: var(--ink); font-size: 15px; line-height: 1.45;
}
.offer-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--ink); }
/* Owned: a green line, Download all, and how many of its talks are on this phone. */
.owned { margin: 16px 0 2px; }
.owned-line {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px 9px 12px;
  border-radius: 999px; background: var(--mint); color: var(--mint-ink); font: 600 15px/1.2 var(--sans);
}
.owned-line svg { flex: 0 0 auto; }
.owned-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.owned-tools .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 48px; margin: 0; padding: 0 20px; }
.owned-tools .btn + .btn { margin-top: 0; }
.owned-tools .btn svg { flex: 0 0 auto; }
.owned-note { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* My albums: the tiles say since when; the Saved Talks part's row to them. */
.owned-card > a > small.owned-since { color: var(--mint-ink); font-weight: 600; }
.owned-hint { margin: 18px 2px 0; line-height: 1.45; }
.lib-mine-row { margin: 18px 0 0; }
.empty .link-btn { display: inline-block; margin: 14px 0 0; min-height: 44px; line-height: 36px; }
/* A code from the table: XXXX-XXXX, big and monospace. */
.redeem-page .page-title { margin-bottom: 18px; }
.redeem-card { padding: 20px 18px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); }
.redeem-lede { margin: 2px 0 14px; line-height: 1.45; }
.code-form { display: grid; gap: 10px; }
.redeem-album { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.redeem-album .album-art.xs { width: 48px; border-radius: 10px; box-shadow: none; }
.redeem-album > span { min-width: 0; display: grid; gap: 1px; }
.redeem-album small { font-size: 13px; color: var(--ink-2); }
.redeem-album b { font: 600 16px/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-label { font: 600 15px var(--sans); color: var(--ink); }
input.code-box {
  margin: 0; padding: 14px 12px; min-height: 60px;
  font: 700 26px/1.2 var(--mono); letter-spacing: 0.14em; text-align: center; text-transform: uppercase;
}
.code-error { margin: 0; }
.code-form .btn.code-go { display: block; min-height: 50px; margin: 2px 0 0; border-color: var(--clay); background: var(--clay); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--clay) 35%, transparent); }
.code-form .btn.busy { opacity: 0.7; pointer-events: none; }
.code-hint { margin: 0; line-height: 1.45; }
.redeem-sheet .sheet-head form { display: block; }
/* In the Speaker Guide+ sheet, under a locked talk: the album it's in, to own on its own (member.js draws it). */
.mem-own-album {
  display: flex; align-items: center; gap: 12px; min-height: 60px; margin: -8px 0 16px; padding: 10px 12px 10px 14px;
  border: 1.5px solid var(--clay); border-radius: 16px; background: var(--paper); color: var(--ink); text-decoration: none;
}
.mem-own-album > svg:first-child { flex: 0 0 auto; color: var(--clay-dark); }
.mem-own-album > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mem-own-album small { font-size: 13.5px; color: var(--clay-dark); font-weight: 600; }
.mem-own-album b { font: 600 16px/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-own-album > svg:last-child { flex: 0 0 auto; color: var(--ink-2); }
/* Ask the speaker (a verified member): under Play on the talk page; a line in the speaker page's hero. */
#talk-ask:empty { display: none; }
.btn.ghost.ask-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 48px; margin: 10px 0 0; padding: 0 20px; text-decoration: none; }
.btn.ghost.ask-btn svg { flex: 0 0 auto; color: var(--clay-dark); }
.sp-id a.sp-ask { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin: -10px 0 -8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.55); }

/* ---------- All talks: the count and Filter over the list ---------- */
.all-tools .search-filter { height: 44px; padding: 0 16px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.refine-pill { background: var(--clay); border-color: transparent; color: #fff; font: 700 14px/1 var(--sans); letter-spacing: 0.02em; text-transform: none; box-shadow: 0 10px 26px color-mix(in srgb, var(--clay) 40%, transparent); }

/* ---------- The full player: the talk on top, its transcript (or Up next) filling the middle, the controls below ---------- */
.player {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--bg); color: var(--ink);
}
.player-in {
  --c: #b85a43;
  display: flex; flex-direction: column; height: 100%; overflow: hidden; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top) + 10px) 18px calc(env(safe-area-inset-bottom) + 12px);
  background:
    radial-gradient(ellipse 120% 40% at 50% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 75%),
    radial-gradient(ellipse 80% 40% at 100% 100%, var(--glow-warm), transparent 70%),
    var(--bg);
  transition: transform 120ms;
}
.player-body { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 620px; margin: 0 auto; }
.player-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.player-from { flex: 1; min-width: 0; margin: 0; text-align: center; line-height: 1.3; }
.player-from small { display: block; font: 500 10.5px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.player-from b { display: block; font: 600 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.player-top { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin: 14px 0 0; }
.player-cover { flex: 0 0 auto; }
.player-meta { flex: 1; min-width: 0; }
.player-meta h2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font: 700 24px/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink);
}
.player-meta a { color: var(--clay-dark); font-weight: 600; text-decoration: none; }
.player-meta p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-meta .link-btn { display: inline; margin: 0; padding: 0; font-size: 13.5px; }

.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; margin: 12px 0 4px; }
.player-views, .player-lang .seg {
  display: inline-flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.player-views button, .player-lang .seg button {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-2); font: 600 13.5px var(--sans); white-space: nowrap;
}
.player-views button[aria-selected="true"], .player-lang .seg button[aria-pressed="true"] {
  background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(27, 31, 34, 0.14);
}
#next-count:not(:empty) { font: 600 11.5px var(--mono); color: var(--clay-dark); }
.player-acts { display: inline-flex; gap: 4px; }
.player-acts .save-btn { min-width: 40px; width: 40px; height: 40px; padding: 0; }

/* The middle: as tall as the screen allows, faded at its edges. */
.player-stage {
  position: relative; flex: 1; min-height: 140px; margin: 0 -18px; padding: 10px 18px 30px;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 30px), transparent 100%);
}

/* The transcript: the sentence now in ink, the word now lit; what's been said fades back. */
.transcript { --tx-size: 21px; }
.transcript[data-size="s"] { --tx-size: 17px; }
.transcript[data-size="l"] { --tx-size: 25px; }
.transcript[data-size="xl"] { --tx-size: 30px; }
.tx { font: 600 var(--tx-size)/1.48 var(--sans); letter-spacing: -0.005em; color: var(--ink); overflow-wrap: break-word; }
.tx-p { margin: 0 0 0.9em; }
.tx-s { color: color-mix(in srgb, var(--ink) 52%, transparent); cursor: pointer; transition: color 250ms; }
.tx-s.done { color: color-mix(in srgb, var(--ink) 34%, transparent); }
.tx-s.now { color: var(--ink); }
.tx-w { border-radius: 6px; transition: background-color 120ms, color 120ms; }
.tx-s.now .tx-w.on { background: color-mix(in srgb, var(--clay) 24%, transparent); color: var(--clay-dark); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clay) 24%, transparent); }
@media (hover: hover) { .tx-s:hover { color: var(--ink); } }
.tx-credit { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.transcript.tx-none { display: grid; justify-items: center; align-content: center; min-height: 100%; text-align: center; }
.tx-art { padding: 8px 0 18px; }
.tx-note { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.tx-note .link-btn { margin: 0; padding: 0; font-size: 14.5px; }
.tx-dots { display: inline-flex; gap: 6px; padding: 6px 0; }
.tx-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); animation: blink 1.2s infinite; }
.tx-dots span:nth-child(2) { animation-delay: 0.2s; }
.tx-dots span:nth-child(3) { animation-delay: 0.4s; }
.tx-now {
  position: relative; z-index: 2; align-self: center; display: inline-flex; align-items: center; gap: 4px;
  margin: -48px 0 12px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--bar); color: var(--bar-ink); font: 600 13px var(--sans); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

/* Original or translated, and the translated voice */
.player-lang { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; margin: 4px 0 0; }
.player-lang .seg button { height: 30px; padding: 0 12px; font-size: 13px; }
.voice-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1.5px solid var(--line-strong);
  border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 13px var(--sans); white-space: nowrap;
}
.voice-btn.on { border-color: var(--clay); background: var(--clay); color: var(--cream); }
.tx-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 800ms linear infinite; }

.scrub { flex: 0 0 auto; margin: 10px 0 0; }
.scrub input {
  --p: 0%;
  display: block; width: 100%; height: 24px; margin: 0; padding: 0; border: 0;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.scrub input:focus { box-shadow: none; }
.scrub input::-webkit-slider-runnable-track, .speed-range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--clay) var(--p), var(--line-strong) var(--p));
}
.scrub input::-webkit-slider-thumb, .speed-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border: 3px solid var(--paper); border-radius: 50%;
  background: var(--clay); box-shadow: 0 2px 6px rgba(27, 31, 34, 0.3);
}
.scrub input::-moz-range-track, .speed-range::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line-strong); }
.scrub input::-moz-range-progress, .speed-range::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--clay); }
.scrub input::-moz-range-thumb, .speed-range::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid var(--paper); border-radius: 50%; background: var(--clay); }
.times { display: flex; justify-content: space-between; font: 400 12px var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

.ctl { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); }
.ctl-text {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 54px; height: 38px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--ink); font: 600 13px var(--mono);
}
#speed { justify-self: start; }
#sleep { justify-self: end; }
.ctl-text.on { border-color: var(--clay); color: var(--clay-dark); }
.big-play {
  position: relative; display: grid; place-items: center; width: 76px; height: 76px; padding: 0;
  border: 0; border-radius: 50%; color: var(--cream);
  background: var(--clay);
  box-shadow: 0 12px 28px rgba(200, 100, 75, 0.4);
}
.big-play.busy::after, .mini-btn.busy::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--clay);
  animation: spin 900ms linear infinite;
}
.mini-btn.busy { position: relative; }
.mini-btn.busy::after { inset: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.up-next header { display: flex; align-items: baseline; justify-content: space-between; }
.up-next h3 { margin: 0; font: 700 26px var(--display); letter-spacing: -0.015em; color: var(--ink); }
.up-next .link-btn { margin: 0; }
.up-next ol { list-style: none; margin: 10px 0 0; padding: 0; }
.up-next li { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.q-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 9px 0; border: 0; background: none; color: inherit; text-align: left; }
.q-item > span:last-child { min-width: 0; display: grid; }
.q-item > span:last-child > b { font: 600 15px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-item > span:last-child > small { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-drop { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--ink-2); }
li.q-empty { display: block; padding: 12px 0; color: var(--ink-2); font-size: 15px; border: 0; }

/* A short screen (a phone on its side): the whole player scrolls instead. */
@media (max-height: 620px) {
  .player-in { overflow-y: auto; }
  .player-body { flex: 0 0 auto; min-height: 600px; }
}

/* Nothing has played yet: the Now playing tab opens on this. */
.player.empty :is(.player-from, .player-top, .player-bar, .player-stage, .tx-now, .player-lang, .scrub, .controls) { display: none !important; }
.player.empty .player-head { justify-content: space-between; }
.player-empty { padding: 14vh 8px 0; text-align: center; }
.player-empty-ico { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 20px; border-radius: 50%; background: var(--peach); color: var(--clay-dark); }
.player-empty h2 { margin: 8px 0 8px; font: 700 38px/1.05 var(--display); letter-spacing: -0.03em; }
.player-empty p:not(.mono-kicker) { margin: 0 auto 22px; max-width: 340px; color: var(--ink-2); }
.player-empty .btn { display: inline-block; width: auto; padding: 13px 26px; }

/* ---------- Playback speed ---------- */
.speed-now { margin: 14px 0 10px; text-align: center; font: 700 56px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.speed-range {
  --p: 20%;
  display: block; width: 100%; height: 28px; margin: 0; padding: 0; border: 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.speed-ends { position: relative; height: 16px; margin: 0 9px; font: 500 11.5px var(--mono); color: var(--ink-2); }
.speed-ends span { position: absolute; top: 0; transform: translateX(-50%); }
.speed-ends span:nth-child(1) { left: 0; }
.speed-ends span:nth-child(2) { left: 20%; }
.speed-ends span:nth-child(3) { left: 60%; }
.speed-ends span:nth-child(4) { left: 100%; }
.speed-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 6px; }
.speed-chips .chip { justify-content: center; height: 44px; font: 600 15px var(--mono); }
.speed-chips .chip[aria-pressed="true"] { border-color: var(--clay); background: var(--clay); color: var(--cream); }

/* ---------- Pick one, Refine, and the little notes ---------- */
#choices h3 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#choices form.choice-list { display: grid; gap: 0; margin-top: 8px; }
.choice-btn {
  display: flex; align-items: center; gap: 14px; padding: 15px 4px;
  border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--ink); font: 500 17px var(--sans); text-align: left;
}
.choice-btn span { flex: 1; }
.choice-btn svg { color: var(--clay); }
.choice-btn.on, .choice-btn.on svg { color: var(--clay-dark); }

.refine-body { flex: 1; overflow-y: auto; margin: 4px -18px 0; padding: 0 18px 12px; }
.refine-body h4 { margin: 18px 0 0; font: 600 12px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.refine-body .chips.wrap { margin: 10px 0 0; }
.refine-body .hint { margin: 18px 0 0; }
.refine-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.refine-foot .btn + .btn { margin: 0; }

.toast {
  position: fixed; inset: auto 0 calc(var(--dock-h) + 14px) 0; z-index: 40;
  width: fit-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 11px 20px;
  border: 0; border-radius: 999px;
  background: var(--bar); color: var(--bar-ink); font: 500 15px/1.3 var(--sans); text-align: center;
  box-shadow: 0 10px 28px rgba(28, 37, 43, 0.35);
  opacity: 0; transform: translateY(8px); transition: opacity 200ms, transform 200ms; pointer-events: none;
}
.toast.on { opacity: 1; transform: none; }

/* ---------- The player, as the client drew it: the speaker big, the title under, then the controls ---------- */
.player-in { padding-left: 22px; padding-right: 22px; }
.player-views { align-self: center; margin: 6px 0 4px; }
.player-art { display: grid; place-items: center; min-height: 100%; padding: 6px 0; }
.art-frame { position: relative; width: min(100%, 360px, 46dvh); }
.player-meta { flex: 0 0 auto; margin: 4px 0 0; }
.player-meta h2 { font-size: 26px; }
.player-meta a { color: var(--ink); }
.player-meta p { font-size: 14px; color: var(--ink-2); }
.scrub input::-webkit-slider-runnable-track, .speed-range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--blue) var(--p), var(--line-strong) var(--p)); }
.scrub input::-webkit-slider-thumb, .speed-range::-webkit-slider-thumb { background: var(--blue); border-color: var(--cream); }
.controls .ctl:first-of-type { justify-self: end; }
.controls .ctl:last-of-type { justify-self: start; }
.controls .ctl { color: var(--ink); }
.big-play { width: 84px; height: 84px; background: var(--cream); color: var(--navy); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.big-play.busy::after { border-top-color: var(--blue); }
.player-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; flex: 0 0 auto; margin: 6px -8px 0; }
.player-tools button {
  display: grid; justify-items: center; gap: 5px; padding: 8px 2px; border: 0; background: none; color: var(--ink);
  font: 500 11px var(--sans); white-space: nowrap;
}
.player-tools button b { display: grid; place-items: center; height: 26px; font: 700 16px var(--sans); }
.player-tools button i { display: grid; place-items: center; height: 26px; }
.player-tools button[aria-pressed="true"] i, .player-tools button[aria-pressed="true"] span { color: var(--blue); }
.player-tools button.busy i { animation: blink 1s infinite; }
.player-tools button:active { opacity: 0.6; }
.voice-btn.on { border-color: var(--blue); background: var(--blue); color: var(--navy); }
.speed-chips .chip[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: var(--navy); }
.player.empty :is(.player-views, .player-tools) { display: none !important; }

/* The speaker hero's Verified line: the check on the text's centre line, in gold. */
.sp-id .sp-verified { display: inline-flex; align-items: center; gap: 5px; }
.sp-id .sp-verified svg { flex: 0 0 auto; color: var(--gold); }

/* A verified speaker's mark after their name on the talk page's discussion rows */
.disc-text .vmark { display: inline-block; vertical-align: -2px; margin-left: 3px; color: var(--clay-dark); }