/* Hear & Now / Clarity design system, V11.
   UI-only overrides after existing styles; server and privacy stay untouched. */
:root {
  --hn-coral:#ff7669;
  --hn-amber:#e8b985;
  --hn-round:18px;
  --hn-soft-border:rgba(255,255,255,.085);
  --hn-shadow:0 22px 65px rgba(0,0,0,.21);
}
html,body {max-width:100%;}
body {overflow-x:clip;}
body :where(button,a,input,textarea,select,summary) {touch-action:manipulation;}
:where(.panel,.hero,.info,.item,.entry,.stack,.cols,.drawer,.modal,.ql-card,.station,.current-panel) {min-width:0;}
:where(h1,h2,h3,.t,.creator,.detail) {overflow-wrap:break-word;}
button, a, input, select, textarea {transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
:is(a,button,summary):focus-visible {outline:2px solid var(--hn-amber);outline-offset:3px;}
[hidden] {display:none!important;}

/* ---------- Unified visual grammar ---------- */
.public-site,body.admin {background:radial-gradient(ellipse 65% 22% at 92% 6%,rgba(131,58,65,.08),transparent 85%),var(--bg);}
.public-site .wrap {max-width:1390px;}
.public-site .public-bar {min-height:72px;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:12px 0;}
.public-site .brand-name {letter-spacing:-.055em;}
.public-site .top-links {gap:7px;}
.public-site .top-links a {border-radius:999px;padding:9px 13px;text-decoration:none;font-weight:640;}
.public-site .top-links a:hover {background:rgba(255,255,255,.06);color:var(--hn-coral);}
.public-site .theme-btn {border-radius:999px;}
.public-site .station {margin:12px 0 0;gap:10px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.018);min-height:57px;box-shadow:none;}
.public-site .station-avatar {width:34px;height:34px;font-size:.85rem;}
.public-site .station-text {gap:0;flex:1 1 130px;}
.public-site .station-name {font-size:.95rem;}
.public-site .station-kicker {letter-spacing:.13em;font-size:.56rem;}
.public-site .station-tagline {font-size:.73rem;}
.public-site .station-toggle {margin-left:auto;flex:none;box-shadow:none;}
.public-site .station-links {padding:6px 0 2px 44px;}

/* ---------- On the Air: the single centerpiece ---------- */
.public-site .now-section {padding-top:clamp(22px,3vw,38px);}
.public-site .now-heading {padding-bottom:17px;gap:20px;align-items:end;}
.public-site .now-heading .section-no {font-size:.66rem;letter-spacing:.19em;margin:0 0 9px;}
.public-site .now-heading h1 {font-size:clamp(3rem,6.5vw,6rem);gap:11px;line-height:.96;}
.public-site .now-heading p {max-width:61ch;margin-top:9px;font-size:.92rem;line-height:1.5;}
.public-site .now-heading .section-context {font-size:.58rem;white-space:nowrap;}
.public-site .hero {
  position:relative;isolation:isolate;overflow:visible;
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:clamp(24px,4vw,62px);min-height:0;
  padding:clamp(25px,3.5vw,45px);
  border-radius:25px;
  background:linear-gradient(115deg,rgba(255,132,119,.12),rgba(255,255,255,.025) 45%,rgba(24,19,31,.9)),#141218;
  box-shadow:0 34px 80px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.09);
  border:1px solid rgba(240,165,152,.23);
}
.public-site .hero:after {opacity:.38;z-index:-1;}
.public-site .hero .art {width:100%;max-width:480px;aspect-ratio:1.32;margin:auto;max-height:none;}
.public-site .hero .cover {max-width:100%;max-height:100%;}
.public-site .hero .info {gap:clamp(8px,1vw,13px);align-content:center;}
.public-site .hero .status {letter-spacing:.14em;font-size:.67rem;font-weight:800;}
.public-site .hero h1 {font-size:clamp(2.25rem,4.55vw,4.9rem);line-height:1.03;letter-spacing:-.067em;max-width:17ch;}
.public-site .hero .creator {font-size:clamp(1rem,1.65vw,1.3rem);font-weight:660;}
.public-site .hero .detail {font-size:.86rem;}
.public-site .hero .hero-tags {gap:7px;}
.public-site .hero .on-chip {flex-wrap:wrap;gap:6px;}
.public-site .hero .on-label {font-size:.73rem;letter-spacing:0;}
.public-site .hero .ctx-chip {font-size:.7rem;padding:5px 9px;}
.public-site .hero .genres .gchip {padding:5px 8px;font-size:.68rem;}
.public-site .hero .rating {width:fit-content;max-width:100%;padding:7px 12px;border-radius:13px;flex-wrap:wrap;column-gap:6px;}
.public-site .hero .rating b {font-size:clamp(1.65rem,2.6vw,2.2rem);font-weight:800;}
.public-site .hero .rating .phrase {font-size:.76rem;font-weight:690;}
.public-site .hero .rating .rating-emoji {font-size:1.3rem;}
.public-site .hero .rating .bars {align-self:center;}
.public-site .hero .review {font-size:.87rem;line-height:1.5;max-width:54ch;max-height:4.7em;overflow:hidden;}
.public-site .hero .row {gap:8px;}
.public-site .hero-action-wrap {display:grid;gap:7px;margin-top:4px;align-items:start;justify-items:start;min-width:0;}
.public-site .hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:9px;}
.public-site .hero-actions .btn {border-radius:12px;min-height:43px;text-align:center;}
.public-site .hero-actions .play-btn {background:linear-gradient(115deg,#ff8a73,#ff625b);color:#190e14;font-size:.91rem;padding:11px 18px;font-weight:820;box-shadow:0 12px 26px rgba(255,91,85,.2);}
.public-site .hero-actions .play-btn:hover {transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,91,85,.3);}
.public-site .hero-actions .listen-btn:not(.primary) {background:rgba(255,255,255,.04)!important;min-height:43px!important;border-color:rgba(255,255,255,.18)!important;padding:11px 16px!important;font-size:.85rem!important;}
.public-site .hero-more {font-size:.78rem;min-width:0;max-width:100%;}
.public-site .hero-more > summary {list-style:none;width:fit-content;padding:6px 3px;color:var(--muted);font-weight:690;cursor:pointer;}
.public-site .hero-more > summary::-webkit-details-marker {display:none;}
.public-site .hero-more > summary:after {content:'  +';color:var(--hn-amber);}
.public-site .hero-more[open] > summary:after {content:'  −';}
.public-site .hero-more > summary:hover {color:var(--hn-amber);}
.public-site .hero-secondary {display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:8px 0;}
.public-site .hero-secondary .btn {min-height:39px;max-width:100%;border-radius:11px;font-size:.78rem;padding:9px 12px;box-shadow:none;}
.public-site .hero-secondary .icon-btn {height:39px;min-width:39px;width:39px;border-radius:11px!important;}
.public-site .hero .modenote {font-size:.68rem;}
.public-site .quick-react {max-width:100%;margin-top:4px;}
.public-site .qr-row {gap:5px;}
.public-site .qr-btn {height:37px;width:37px;font-size:1rem;}
.public-site .bubbles {top:10px;right:10px;}
.public-site .hero .hero-drawer {grid-column:1/-1;width:100%;overflow:hidden;}
.public-site .hero .hero-drawer:empty {display:none;}
.public-site .hero.has-video .art {aspect-ratio:16/10;max-width:100%;}
.public-site .hero.has-video .art .hero-video {height:100%;aspect-ratio:16/9;}

/* ---------- Intro, archive and invitations ---------- */
.public-site .about-strip {margin-top:20px;padding:14px 1px 18px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;}
.public-site .about-strip-copy p {font-size:.89rem;line-height:1.55;margin-top:5px;}
.public-site .about-strip-hint {font-size:.79rem;line-height:1.55;max-width:none;}
.public-site .archive-intro {padding:clamp(36px,4vw,54px) 0 17px;gap:20px;}
.public-site .archive-intro h2 {font-size:clamp(1.65rem,3.4vw,2.9rem);}
.public-site .archive-intro > p {font-size:.82rem;line-height:1.55;max-width:350px;}
.public-site .cols {grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:16px;}
.public-site .stack {gap:16px;}
.public-site .panel {border-radius:18px;padding:clamp(17px,2.5vw,27px);background:linear-gradient(145deg,rgba(255,255,255,.02),transparent 55%),var(--panel);}
.public-site .panel-heading {margin-bottom:12px;}
.public-site .panel-heading h2 {font-size:clamp(1.5rem,2.4vw,2rem);}
.public-site .item {padding:13px 0;}
.public-site .item .t {line-height:1.27;}
.public-site .item .r {max-width:100%;}
.public-site .item .r .btn {max-width:100%;}
.public-site .suggestion-panel .recommend-mark {width:43px;height:43px;font-size:1.6rem;margin:3px 0 10px;}
.public-site .suggestion-panel p {font-size:.84rem;line-height:1.6;max-width:40ch;}
.public-site .suggestion-panel .btn.primary {border-radius:12px;}
.public-site .panel-note {font-size:.73rem;line-height:1.4;}
.public-site .archive-link {width:fit-content;max-width:100%;font-weight:750;border-radius:12px;background:rgba(255,255,255,.04);}
.public-site .foot {gap:14px;margin-top:45px;padding:27px 0 36px;}
.public-site .footer-wordmark {font-size:2rem;}
.public-site .footer-row {letter-spacing:0;}
.archive-page .archive-full {margin-top:29px;}
.archive-page .archive-tools {grid-template-columns:minmax(0,1.5fr) minmax(145px,.65fr) minmax(170px,.8fr);}
.archive-page .archive-search {grid-column:auto;}
.archive-page .archive-tools :is(input,select) {font-size:.85rem;min-height:44px;}
.archive-page .genre-filters {max-height:185px;overflow:auto;}
.archive-page .pager .btn {border-radius:12px;}

/* ---------- Admin: actionable first, form secondary ---------- */
body.admin .wrap {max-width:1380px;}
.admin .bar {margin-bottom:8px;}
.admin .logo {font-family:var(--body);font-weight:820;letter-spacing:-.05em;font-size:clamp(1.2rem,1.8vw,1.65rem);}
.admin .nav {max-width:540px;border-radius:15px;}
.admin .nav button {font-family:var(--body);font-weight:760;}
.admin .pane[data-pane='log'].on {gap:17px;}
.admin .share-panel {padding:12px 17px;border-radius:14px;min-height:68px;box-shadow:none;}
.admin .share-panel .btn {border-radius:11px;}
.admin .current-panel, .admin .ql-card {padding:clamp(18px,2.3vw,27px);border-radius:20px;}
.admin .current-panel {background:radial-gradient(ellipse at 100% 0,rgba(252,123,106,.13),transparent 45%),var(--panel);border-color:rgba(243,163,155,.21);}
.admin .current-panel h2 {font-family:var(--body);font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.045em;font-weight:790;}
.admin .current-panel .now {gap:13px;align-items:center;}
.admin .current-panel .now .thumb {border-radius:11px;}
.admin .current-panel .t {font-weight:760;line-height:1.23;overflow-wrap:anywhere;}
.admin .current-panel .meta {min-width:0;}
.admin .current-panel .actions {margin-top:12px;}
.admin .current-panel .actions .btn {border-radius:10px;}
.admin .ql-card-header {margin-bottom:13px;padding-bottom:12px;}
.admin .ql-card-header h2 {font-family:var(--body);font-size:clamp(1.45rem,2.8vw,2rem);line-height:1.14;letter-spacing:-.052em;font-weight:820;}
.admin .ql-card-header p {font-size:.8rem;line-height:1.5;}
.admin .ql-form {gap:14px;}
.admin .ql-form-lead {display:none;}
.admin .chips {gap:6px;}
.admin .ql-form .chips .pill {font-size:.75rem;padding:8px 11px;}
.admin .ql-search-line {gap:8px;}
.admin .ql-search-line input {min-width:0;}
.admin .ql-search-btn {white-space:nowrap;font-family:var(--body);font-weight:740;letter-spacing:0;}
.admin .ql-selected {min-width:0;}
.admin .ql-manual {font-family:var(--body);font-weight:630;letter-spacing:0;text-align:left;}
.admin .ql-main-fields {min-width:0;}
.admin .ql-main-fields .f > span {font-size:.83rem;}
.admin .ql-advanced {border-radius:12px;}
.admin .ql-advanced > summary {padding:12px 15px;font-size:.85rem;font-weight:720;}
.admin .ql-submit {font-family:var(--body);font-size:.91rem;letter-spacing:0;font-weight:830;border-radius:12px;min-height:46px;box-shadow:0 10px 25px rgba(248,86,87,.15);}
.admin .ql-submit:hover {box-shadow:0 13px 28px rgba(248,86,87,.24);}
.admin .ql-card input:focus-visible,.admin .ql-card select:focus-visible {box-shadow:0 0 0 3px rgba(255,119,108,.16);}
.admin .ctx-pill {font-family:var(--body);font-size:.76rem;}
.admin .history-controls {min-width:0;}
.admin .history-query-row > * {min-width:0;}
.admin .aitem {border-radius:15px;}
.admin .pane[data-pane='settings'] > .panel {min-width:0;align-self:start;}
.admin .pane[data-pane='settings'] .setup-panel {grid-column:1/-1;}
.admin .setup-card {background:rgba(255,255,255,.02);}

/* ---------- Rating: one scale, optional presets, decimal precision ---------- */
.score-picker {display:grid;gap:10px;min-width:0;max-width:100%;}
.score-picker .sp-read {display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;padding:0;border:0;background:none;}
.score-picker .sp-emoji-big {font-size:1.5rem;line-height:1.1;width:auto;height:auto;}
.score-picker .sp-num {font-family:var(--body);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.2;font-weight:830;letter-spacing:-.04em;}
.score-picker .sp-words {font-size:.84rem;color:var(--muted);font-weight:630;flex:1 1 90px;}
.score-picker .sp-clear {margin-left:auto;font-size:.73rem;}
.score-picker .sp-fine {display:grid;grid-template-columns:minmax(0,1fr) 73px;gap:12px;align-items:center;min-width:0;}
.score-picker .sp-slider {width:100%;min-width:0;margin:0;min-height:24px;cursor:pointer;}
.score-picker .sp-slider::-webkit-slider-thumb {width:19px;height:19px;box-shadow:0 0 0 3px rgba(0,0,0,.25);}
.score-picker .sp-fine-label {display:grid;gap:4px;color:var(--muted);font-size:.68rem;font-weight:740;letter-spacing:.04em;}
.score-picker .sp-exact {width:100%;min-width:0;border:1px solid var(--line);background:var(--panel-2);border-radius:9px;padding:7px 8px;min-height:38px;text-align:center;font-size:.88rem;font-weight:760;color:var(--ink);}
.score-picker .sp-presets {border-top:1px solid var(--line);padding-top:9px;}
.score-picker .sp-presets > summary {font-size:.74rem;color:var(--muted);font-weight:720;cursor:pointer;list-style:none;padding:4px 0;}
.score-picker .sp-presets > summary::before {content:'＋ ';color:var(--hn-coral);}
.score-picker .sp-presets[open] > summary::before {content:'− ';}
.score-picker .sp-presets > summary::-webkit-details-marker {display:none;}
.score-picker .sp-row {margin-top:10px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;max-width:100%;}
.score-picker .sp-face {min-width:0;width:100%;padding:7px 2px;}
.score-picker .sp-face span {font-size:1.12rem;}
.score-picker .sp-face small {font-size:.65rem;}
.admin .quick-score {min-width:0;max-width:100%;padding:12px 13px;}
.admin .ql-ratings .score-picker {padding:12px 13px;}

/* ---------- Player: quiet, legible and above device safe areas ---------- */
.hn-player {width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);}
.hn-player .hp-bar {border-radius:18px;padding:9px 12px;background:rgba(20,18,25,.93);border:1px solid rgba(255,255,255,.18);}
.hn-player .hp-art {border-radius:10px;}
.hn-player .hp-title {font-size:.87rem;}
.hn-player .hp-stage {max-height:60dvh;overflow:auto;}
.hn-player .hp-stage iframe {max-height:52dvh;}
.hn-player .hp-btn {min-width:36px;min-height:36px;}
.hn-player .hp-stage-btn {flex:none;}
.hn-player .hp-service {max-width:115px;}

/* ---------- Small screens: content first, no clipped actions ---------- */
@media(max-width:1050px) {
 .public-site .hero {grid-template-columns:minmax(0,41%) minmax(0,1fr);gap:24px;}
 .public-site .hero h1 {font-size:clamp(2.2rem,4.7vw,4rem);}
 .public-site .cols {grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);}
}
@media(max-width:899px) {
 .public-site .top-links {display:flex;gap:0;}
 .public-site .top-links a {padding:8px 10px;font-size:.75rem;}
 .public-site .hero {grid-template-columns:minmax(0,1fr);gap:20px;}
 .public-site .hero .art {max-width:320px;margin:0 auto;}
 .public-site .hero h1 {max-width:none;}
 .public-site .cols {grid-template-columns:1fr;}
 .public-site .about-strip {grid-template-columns:1fr;gap:8px;}
 .public-site .archive-intro {display:flex;align-items:start;}
 .public-site .tabs {display:flex;}
 .admin .pane[data-pane='log'] > .panel.current-panel {order:2!important;}
 .admin .pane[data-pane='log'] > .panel.ql-card {order:3!important;}
 .admin .pane[data-pane='log'] > .share-panel {order:1!important;}
 .admin .pane[data-pane='log'] > .note {order:4!important;}
}
@media(max-width:700px) {
 .public-site .public-bar {gap:8px;}
 .public-site .station {margin-top:8px;}
 .public-site .now-section {padding-top:20px;}
 .public-site .now-heading h1 {font-size:clamp(2.75rem,9vw,4.7rem);}
 .public-site .now-heading p {font-size:.83rem;}
 .public-site .hero {padding:19px;border-radius:20px;gap:13px;}
 .public-site .hero .art {width:min(100%,260px);max-width:260px;aspect-ratio:1.34;}
 .public-site .hero .info {gap:8px;}
 .public-site .hero h1 {font-size:clamp(2.08rem,7.7vw,3.15rem);}
 .public-site .hero .review {font-size:.82rem;}
 .public-site .hero .hero-tags {gap:5px;}
 .public-site .hero-action-wrap {width:100%;}
 .public-site .hero-actions {width:100%;}
 .public-site .hero-actions > .btn {flex:1 1 140px;}
 .public-site .hero .rating .bars {display:none;}
 .public-site .hero .rating {max-width:100%;}
 .public-site .hero .modenote {font-size:.66rem;}
 .public-site .about-strip {margin-top:9px;padding-block:12px;}
 .public-site .archive-intro {display:block;padding-top:33px;}
 .public-site .archive-intro > p {margin-top:8px;}
 .public-site .panel {padding:16px;}
 .archive-page .archive-tools {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
 .archive-page .archive-search {grid-column:1/-1;}
 .archive-page .archive-context {grid-column:1/-1;}
 .archive-page .rating-filter {width:100%;}
 .admin .wrap {padding:0 12px calc(105px + env(safe-area-inset-bottom));}
 .admin .bar {margin-bottom:8px;}
 .admin .nav {max-width:none;}
 .admin .share-panel {min-height:0;padding:12px;}
 .admin .current-panel,.admin .ql-card {padding:15px;border-radius:16px;}
 .admin .current-panel .now {display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;}
 .admin .current-panel .now .thumb {height:66px;width:66px;}
 .admin .quick-score {padding:11px;}
 .admin .current-panel .actions {margin-bottom:0;}
 .admin .ql-card-header {margin-bottom:10px;}
 .admin .ql-form .chips {display:flex;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:thin;}
 .admin .ql-form .chips .pill {flex:none;white-space:nowrap;}
 .admin .ql-search-line {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;}
 .admin .ql-search-btn {padding:10px 13px;font-size:.78rem;}
 .admin .history-query-row {grid-template-columns:1fr 1fr;}
 .admin .history-query-row input {grid-column:1/-1;}
 .hn-player {bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100vw - 24px);}
 .hn-player .hp-bar {border-radius:17px;}
 .hn-player .hp-fab {width:58px;height:58px;}
}
@media(max-width:420px) {
 .public-site .public-bar {flex-wrap:wrap;}
 .public-site .brand {flex:1 1 auto;}
 .public-site .top-links {order:3;width:100%;justify-content:space-between;border-top:1px solid var(--line);padding-top:5px;}
 .public-site .top-links a {font-size:.75rem;}
 .public-site .station-tagline {display:none;}
 .public-site .station-avatar {width:29px;height:29px;}
 .public-site .station-links {padding-left:0;}
 .public-site .now-heading h1 {font-size:clamp(2.5rem,11.5vw,3.3rem);}
 .public-site .hero .art {width:min(100%,220px);max-width:220px;}
 .public-site .hero h1 {font-size:clamp(1.95rem,8.2vw,2.7rem);}
 .public-site .hero-actions .btn {flex:1 1 128px;padding:10px 11px!important;font-size:.81rem!important;}
 .public-site .hero .rating .phrase {margin-left:3px;}
 .public-site .panel .item {grid-template-columns:50px minmax(0,1fr);}
 .admin .current-panel .meta {gap:5px!important;}
 .admin .current-panel .now .t {font-size:1rem;}
 .admin .nav button {font-size:.68rem;}
 .admin .ql-submit {width:100%;}
 .score-picker .sp-words {font-size:.75rem;}
 .score-picker .sp-fine {grid-template-columns:minmax(0,1fr) 62px;}
 .score-picker .sp-exact {font-size:.78rem;}
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* Safety card from boot.js: shown only if a page's script could not start. */
.hn-recover {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9999;
  width: min(92vw, 420px);
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--bg, #000);
  color: var(--ink, #fff);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.2));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 8px;
}
.hn-recover p { margin: 0; color: var(--muted, #aaa); font-size: 0.92rem; line-height: 1.4; }
.hn-recover button {
  justify-self: start;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--red, #ff2b45);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* The decorative glow ring behind the player card pokes past the right edge. On phones that made the whole
   page wider than the screen (sideways scrolling, tiny text, fixed buttons off-screen). Keep it inside. */
html { overflow-x: hidden; }
.public-site .now-section { overflow-x: clip; }


/* ================================================================
   V14 / Steady Signal — isolated movement, calmer responsive UI.
   All rules are visual: auth, player selection and ingest JS untouched.
   ================================================================ */

/* The old EQ animated the *height* of grid descendants on every frame.
   Keep its layout box fixed and move pixels only, so the hero's centered
   typography cannot bounce to the beat. The vinyl spins in its own layer. */
.public-site .hero .art { isolation:isolate; }
.public-site .hero .vinyl { transform-origin:center center; backface-visibility:hidden; will-change:transform; }
.public-site .hero .info { min-width:0; transform:none; }
.public-site .hero .status { min-height:20px; line-height:20px; align-items:center; flex-wrap:nowrap; }
.public-site .hero .status .dot { flex:0 0 7px; }
.public-site .hero .meter {
  height:18px; min-height:18px; flex:0 0 auto; align-items:stretch;
  overflow:hidden; contain:layout paint;
}
.public-site .hero .meter i {
  display:block; height:18px; min-height:18px; flex:none;
  transform-origin:center bottom; animation:hn-v14-eq 1.15s ease-in-out infinite;
  will-change:transform;
}
.public-site .hero .meter i:nth-child(2) { animation-delay:-.18s; }
.public-site .hero .meter i:nth-child(3) { animation-delay:-.39s; }
.public-site .hero .meter i:nth-child(4) { animation-delay:-.1s; }
.public-site .hero .meter i:nth-child(5) { animation-delay:-.5s; }
@keyframes hn-v14-eq { 0%,100% { transform:scaleY(.26); } 50% { transform:scaleY(.90); } }

/* Treat status, song name, rating, and primary action as steady type. */
.public-site .hero .info > :is(h1,.creator,.detail,.hero-tags,.row,.hero-action-wrap,.modenote,.review) {min-width:0;}
.public-site .hero h1 {text-wrap:pretty;overflow-wrap:break-word;}
.public-site .hero .rating {row-gap:4px;}
.public-site .hero .hero-actions .btn {white-space:normal;overflow-wrap:normal;}
.public-site .hero .hero-actions .play-btn:focus-visible {box-shadow:0 0 0 3px rgba(255,122,99,.27),0 12px 25px rgba(255,91,85,.2);}
.public-site .hero .hero-more > summary {min-height:40px;display:flex;align-items:center;}
.public-site .hero .hero-secondary {gap:8px;}

/* Clearer focus and affordances in admin without adding controls. */
.admin :is(.panel,.ql-card,.current-panel) {transition:border-color .15s ease, box-shadow .15s ease;}
.admin :is(input,select,textarea):focus-visible {outline:2px solid var(--hn-amber);outline-offset:2px;}
.admin .nav button {min-height:48px;}
.admin .score-picker .sp-fine {min-width:0;}
.admin .score-picker .sp-presets summary {min-height:36px;display:flex;align-items:center;}
.admin .quick-score .sp-read, .admin .ql-ratings .sp-read {align-items:center;}
.admin .ql-card :is(input,select,textarea) {max-width:100%;}
.admin .modal .panel {overscroll-behavior:contain;}

@media(max-width:899px) {
  /* Let the admin's first glance show the song currently playing. */
  .admin .pane[data-pane='log'].on {align-content:start;}
  .admin .current-panel .now {min-width:0;}
  .admin .current-panel .actions {display:flex;flex-wrap:wrap;gap:8px;}
  .admin .current-panel .actions .btn {min-height:40px;}
}
@media(max-width:540px) {
  .public-site .hero .status {font-size:.65rem;gap:8px;}
  .public-site .hero .info {align-content:start;}
  .public-site .hero .hero-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
  .public-site .hero .hero-actions > .btn {width:100%;min-width:0;padding:11px 8px!important;font-size:.8rem!important;}
  .public-site .hero .hero-secondary .btn {font-size:.77rem;}
  .public-site .hero .hero-more > summary {padding-block:9px;}
  .public-site .about-strip {line-height:1.55;}
  .public-site .station {padding:10px 12px;}
  .admin .wrap {padding-bottom:calc(160px + env(safe-area-inset-bottom));}
  .admin .nav {bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 14px 48px rgba(0,0,0,.7);}
  .admin .nav button {padding:13px 2px;min-height:52px;}
  .admin .current-panel .now .t {overflow-wrap:anywhere;}
  .admin .current-panel,.admin .ql-card {padding:15px;}
  .admin .quick-score,.admin .ql-ratings .score-picker {padding:12px;gap:10px;}
  .admin .score-picker .sp-fine {gap:9px;}
  .admin .score-picker .sp-emoji-big {min-width:0;}
  .admin .score-picker .sp-read {gap:9px;}
  .admin .modal {padding:8px 8px calc(8px + env(safe-area-inset-bottom));}
  .admin .modal .panel {max-height:calc(100dvh - 22px - env(safe-area-inset-bottom));}
}
@media(max-width:350px) {
 .public-site .hero .hero-actions {grid-template-columns:1fr;}
 .public-site .public-bar .top-links a {padding-inline:7px;font-size:.69rem;}
 .admin .nav button {font-size:.65rem;}
}
@media(prefers-reduced-motion:reduce) {
 .public-site .hero .meter i,.public-site .hero.live .vinyl {animation:none!important;will-change:auto;}
 .public-site .hero .meter i {transform:scaleY(.5);}
}