/* Bell Radio — Direction A (BCompliant dashboard), implemented for the real app.
   Two columns: scrollable station list (left) + persistent player (right).
   Light/dark theme + a density system carried over from the design tokens. */

/* ── BCompliant design tokens (the subset the UI references) ───────────── */
:root {
    --bc-brand:       #005BA9;
    --bc-primary:     #0288d1;
    --bc-primary-50:  #e6f4fb;
    --bc-ink:         #2a3142;
    --bc-text:        #313131;
    --bc-muted:       #898989;
    --bc-border:      #e8ebf2;
    --bc-surface-alt: #f6f7fb;
    --bc-warning:     #ff9f40;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }

:root {
    --bg: var(--bc-surface-alt); --panel: #ffffff; --panel2: #ffffff;
    --ink: var(--bc-ink); --text: var(--bc-text); --muted: var(--bc-muted);
    --border: var(--bc-border); --row-hover: #f2f5fa; --active-tint: #eef4fb;
    --accent: #005BA9; --accent2: var(--bc-primary); --chip: #f1f3f7;
    --logo-horn: #005BA9;    /* megaphone (rupor) mark */
    --shadow: 0 1px 0 rgba(8,21,66,.04), 0 0 22px rgba(8,21,66,.05);
    --font-display: 'Sora', 'Nunito', sans-serif;
    --font-sans: 'Sora', 'Nunito', sans-serif;
    /* density-driven sizes (regular default) */
    --row-pad: 9px 12px; --badge: 46px; --badge-r: 11px; --rname: 15px;
    --art: 160px; --art-r: 24px; --art-f: 62px; --pname: 26px;
    --side-btn: 70px; --play-btn: 92px;
}
[data-theme="dark"] {
    --bg: #0c111b; --panel: #161d2b; --panel2: #1b2433;
    --ink: #eef2f8; --text: #cdd5e1; --muted: #8a93a3;
    --border: #28323f; --row-hover: #1d2636; --active-tint: #14263a;
    --chip: #222c3b; --logo-horn: #4aa3e8;
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35);
}
[data-density="compact"] {
    --row-pad: 6px 12px; --badge: 40px; --badge-r: 10px; --rname: 14px;
    --art: 128px; --art-r: 20px; --art-f: 50px; --pname: 23px;
    --side-btn: 60px; --play-btn: 78px;
}
[data-density="comfy"] {
    --row-pad: 13px 14px; --badge: 54px; --badge-r: 13px; --rname: 16px;
    --art: 184px; --art-r: 28px; --art-f: 72px; --pname: 29px;
    --side-btn: 82px; --play-btn: 108px;
}

body {
    font-family: var(--font-sans); background: var(--bg); color: var(--text);
    height: 100vh; width: 100vw; overflow: hidden;
}
.app { display: flex; flex-direction: column; height: 100%; }

/* ── Header ───────────────────────────────────────────────────────────── */
.hdr {
    height: 62px; flex: 0 0 62px; display: flex; align-items: center; gap: 16px;
    padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand .mark { width: 38px; height: 34px; display: grid; place-items: center; }
.brand .name { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); letter-spacing: .2px; white-space: nowrap; }
.brand .name b { color: var(--bc-brand); }
[data-theme="dark"] .brand .name b { color: #4aa3e8; }
.search {
    flex: 1; max-width: 340px; display: flex; align-items: center; gap: 9px; height: 38px;
    background: var(--chip); border-radius: 999px; padding: 0 15px; color: var(--muted);
}
.search input { border: 0; background: transparent; outline: 0; flex: 1; font: inherit; font-size: 14px; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.spacer { flex: 1; }
.hbtn {
    height: 38px; border: 1px solid var(--border); background: var(--panel); border-radius: 999px;
    display: flex; align-items: center; gap: 8px; padding: 0 15px; cursor: pointer;
    color: var(--text); font: inherit; font-weight: 600; font-size: 13px;
}
.hbtn:hover { background: var(--row-hover); }
.hbtn.icon-only { padding: 0; width: 38px; justify-content: center; }
.hbtn-ico { display: grid; place-items: center; }
.hdr-actions { display: flex; align-items: center; gap: 10px; position: relative; }
.sp-backdrop { position: fixed; inset: 0; z-index: 40; }
.settings-pop {
    position: absolute; top: 46px; right: 0; width: 286px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(8,21,66,.18); padding: 14px; z-index: 50;
}
.sp-title { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin: 0 2px 8px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; }
.sp-row .l { font-weight: 700; font-size: 14px; color: var(--ink); }
.sp-seg { display: flex; background: var(--chip); border-radius: 999px; padding: 3px; }
.sp-seg button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 12px; color: var(--muted); padding: 5px 13px; border-radius: 999px; cursor: pointer; }
.sp-seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
[data-theme="dark"] .sp-seg button.on { background: #2c3a4e; color: #fff; }
.sw { width: 44px; height: 25px; border-radius: 999px; border: 0; background: var(--border); cursor: pointer; position: relative; transition: background .15s; flex: 0 0 auto; }
.sw.on { background: var(--accent); }
.sw::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sw.on::after { left: 21.5px; }
.sp-reset { width: 100%; margin-top: 10px; border: 1px solid var(--border); background: transparent; color: #e5484d; font: inherit; font-weight: 700; font-size: 13px; padding: 10px; border-radius: 10px; cursor: pointer; }
.sp-reset:hover { background: var(--row-hover); }

/* ── Body ─────────────────────────────────────────────────────────────── */
.body { flex: 1; display: flex; min-height: 0; }
.list-col { flex: 1.25; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--panel); }
.list-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; }
.list-head h2 { font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 0; }
.seg { display: flex; background: var(--chip); border-radius: 999px; padding: 3px; margin-left: auto; }
.seg button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 12px; color: var(--muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.seg button.sel { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
[data-theme="dark"] .seg button.sel { background: #2c3a4e; color: #fff; }
.count { font-size: 12px; color: var(--muted); padding: 0 18px 8px; }
.rows { flex: 1; overflow-y: auto; padding: 0 10px 14px; }
.rows::-webkit-scrollbar { width: 9px; }
.rows::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; }

.row { display: flex; align-items: center; gap: 13px; padding: var(--row-pad); border-radius: 10px; cursor: pointer; position: relative; user-select: none; }
.row:hover { background: var(--row-hover); }
.row.active { background: var(--active-tint); }
.row.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 0 3px 3px 0; background: var(--accent); }
.row.active .rname { color: var(--accent); }
.row.drag-over { box-shadow: inset 0 2px 0 var(--accent); }
.row.dragging { opacity: .4; }
.badge { width: var(--badge); height: var(--badge); flex: 0 0 var(--badge); border-radius: var(--badge-r); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: .5px; overflow: hidden; }
/* contain (not cover) so wide wordmark logos show whole instead of cropping;
   for the square emblems/app-icons it's identical to cover. */
img.logo-img { object-fit: contain; background: #fff; }
.p-art-img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--art-r); }
.rinfo { min-width: 0; flex: 1; }
.rname { font-weight: 700; font-size: var(--rname); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmeta { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.freq { font-size: 12px; color: var(--muted); font-weight: 600; }
.pill { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--bc-primary); background: var(--bc-primary-50); border-radius: 999px; padding: 2px 8px; }
[data-theme="dark"] .pill { background: #16314a; color: #7cc1f0; }
.pill.net { color: var(--muted); background: var(--chip); }
.ract { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.iconbtn { width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.iconbtn:hover { background: var(--chip); color: var(--ink); }
.iconbtn.fav.on { color: var(--bc-warning); }
.grip { width: 22px; flex: 0 0 22px; display: grid; place-items: center; color: var(--muted); cursor: grab; opacity: 0; transition: opacity .12s; }
.row:hover .grip { opacity: .7; }
.grip:active { cursor: grabbing; }

/* ── Equalizer ────────────────────────────────────────────────────────── */
.np-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; width: 24px; }
.np-eq i { flex: 1; background: var(--accent); border-radius: 2px; height: 30%; animation: eq .9s ease-in-out infinite; }
.np-eq i:nth-child(2) { animation-delay: .15s; }
.np-eq i:nth-child(3) { animation-delay: .3s; }
.np-eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.paused .np-eq i { animation-play-state: paused !important; }

/* ── Player ───────────────────────────────────────────────────────────── */
.player { flex: 1; min-width: 380px; max-width: 470px; display: flex; flex-direction: column; background: var(--panel2); padding: 22px; }
.p-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.p-gear { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--border); background: var(--panel); border-radius: 10px; color: var(--muted); cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.p-gear:hover { background: var(--row-hover); color: var(--ink); }
.p-gear:active { transform: scale(.96); }
/* Live engine readout under the card (engine · buffer · reconnects). */
.p-debug { margin-top: 12px; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-card { position: relative; margin-top: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.p-art { width: var(--art); height: var(--art); border-radius: var(--art-r); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: var(--art-f); position: relative; box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.p-art .ring { position: absolute; inset: -7px; border-radius: 30px; border: 2px solid var(--accent); opacity: 0; }
.playing .p-art .ring { animation: ring 2.4s ease-out infinite; }
@keyframes ring { 0% { opacity: .5; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.08); } }
.p-name { font-family: var(--font-display); font-weight: 800; font-size: var(--pname); color: var(--ink); margin-top: 18px; }
.p-sub { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
/* Now-playing track line (artist — song). Single line, ellipsised, accented so it
   reads as the live track without competing with the station name above it. */
.p-track { margin-top: 9px; max-width: 94%; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--accent); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .p-track { color: #4aa3e8; }
.p-status { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-weight: 700; font-size: 14px; color: var(--muted); min-height: 24px; }
.p-status.on-air { color: var(--accent); }
.p-status.error { color: #e5484d; }

/* ── "Not working" flag (thumbs-down) ─────────────────────────────────────
   The corner button on the player card flags the currently-selected bitrate;
   it goes red when that tier is flagged. The "не работает" pill (player sub-line
   + station rows) spells the flag out. */
.p-report { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; display: grid; place-items: center; touch-action: manipulation; transition: background .12s, color .12s, border-color .12s; }
.p-report:hover { background: var(--row-hover); color: var(--ink); }
.p-report:active { transform: scale(.94); }
.p-report.on { background: #fdeced; border-color: #f4b5b7; color: #e5484d; }
[data-theme="dark"] .p-report.on { background: #3a1d1f; border-color: #6b2c2f; color: #ff6b6f; }
.p-broken, .rbroken { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: #e5484d; background: #fdeced; border-radius: 999px; padding: 2px 8px; }
[data-theme="dark"] .p-broken, [data-theme="dark"] .rbroken { background: #3a1d1f; color: #ff7a7d; }
.rbroken { font-size: 10px; padding: 1px 6px; }

/* Greyed-out broken rows: the WHOLE row reads as disabled — grey background,
   desaturated logo, muted title + meta — and it STAYS greyed even when it's the
   active/playing station (the active blue background, left bar, and title accent
   are all neutralised to grey). The red "не работает" tag stays bright as the
   reason. Still clickable (to retest, or un-flag from the player). */
.row.broken,
.row.broken:hover,
.row.broken.active { background: var(--chip); }
.row.broken .badge, .row.broken img.logo-img { filter: grayscale(1); opacity: .55; }
.row.broken .rname,
.row.broken.active .rname { color: var(--muted); font-weight: 600; }
.row.broken .freq, .row.broken .pill { color: var(--muted); opacity: .7; }
.row.broken.active::before { background: var(--muted); opacity: .35; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: buf 1s infinite; }
.buf { display: flex; gap: 5px; }
.buf .dot:nth-child(2) { animation-delay: .2s; }
.buf .dot:nth-child(3) { animation-delay: .4s; }
@keyframes buf { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

.p-qual { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 15px; }
.p-qual-l { font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.qchips { display: flex; gap: 6px; }
.qchip { border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-weight: 700; font-size: 12px; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background .12s, border-color .12s; }
.qchip:hover { background: var(--row-hover); }
.qchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.cbtn { border: 1px solid var(--border); background: var(--panel); color: var(--ink); border-radius: 50%; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cbtn:hover { background: var(--row-hover); }
.cbtn:active { transform: scale(.96); }
.cbtn.side { width: var(--side-btn); height: var(--side-btn); }
.cbtn.play { width: var(--play-btn); height: var(--play-btn); background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 40%, transparent); }
.cbtn.play:hover { filter: brightness(1.05); }
.cbtn svg { pointer-events: none; }
.clabels { display: flex; justify-content: space-between; padding: 8px 6px 0; font-size: 12px; font-weight: 700; color: var(--muted); width: 100%; }
.p-hint { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.p-hint b { color: var(--accent2); }

.empty { padding: 40px; text-align: center; color: var(--muted); }

/* ── Playback-engine settings overlay ─────────────────────────────────────
   A centered modal (big touch targets for the car) holding the three
   independent, combinable engine options. Toggled by the player's gear. */
.ov-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(8,21,66,.46); display: grid; place-items: center; padding: 20px; }
/* The class sets display:grid, which would otherwise beat the UA [hidden] rule
   on specificity and keep the (invisible) backdrop intercepting taps. */
.ov-backdrop[hidden] { display: none; }
[data-theme="dark"] .ov-backdrop { background: rgba(0,0,0,.62); }
.ov-card { width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px rgba(8,21,66,.32); padding: 20px; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ov-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ink); }
.ov-x { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--border); background: var(--panel); border-radius: 10px; color: var(--muted); cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.ov-x:hover { background: var(--row-hover); color: var(--ink); }
.ov-sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; }

/* One option block. The whole row is a tap target (label wraps the checkbox). */
.ov-opt { display: flex; align-items: flex-start; gap: 13px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; margin-bottom: 12px; background: var(--panel); }
.ov-opt.col { flex-direction: column; gap: 12px; cursor: default; }
.ov-opt:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ov-row { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; width: 100%; }
.ov-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ov-t { font-weight: 800; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-d { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ov-ab { font-family: var(--font-display); font-weight: 800; font-size: 11px; color: var(--accent2); background: var(--bc-primary-50); border-radius: 6px; padding: 1px 7px; letter-spacing: .5px; }
[data-theme="dark"] .ov-ab { background: #16314a; color: #7cc1f0; }
.ov-tag { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--bc-warning); background: color-mix(in srgb, var(--bc-warning) 16%, transparent); border-radius: 999px; padding: 2px 8px; }

/* Custom checkbox (the native input is hidden; .ov-box is the visual). */
.ov-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.ov-box { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px; border: 2px solid var(--border); border-radius: 7px; background: var(--panel); position: relative; transition: background .12s, border-color .12s; }
.ov-cb:checked + .ov-box { background: var(--accent); border-color: var(--accent); }
.ov-cb:checked + .ov-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ov-cb:focus-visible + .ov-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

/* The 1/3/5s sub-selector — dimmed/disabled until its checkbox is on. */
.ov-secs { display: flex; gap: 7px; padding-left: 37px; }
.ov-secs button { flex: 1; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-weight: 700; font-size: 13px; padding: 9px 0; border-radius: 10px; cursor: pointer; touch-action: manipulation; }
.ov-secs button:hover { background: var(--row-hover); }
.ov-secs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ov-secs.disabled { opacity: .4; pointer-events: none; }

.ov-debug { margin-top: 4px; padding: 11px 13px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

/* The persistent audio element is driven programmatically — keep it out of view. */
#audio { display: none; }

/* ── Narrow-screen fallback (phone preview): stack the player under the list.
   The deployment target is the Model 3/Y landscape screen, so this is just a
   graceful degrade, not a separate mobile design. ───────────────────────── */
@media (max-width: 820px) {
    body { overflow: auto; }
    .app { height: auto; min-height: 100vh; }
    .body { flex-direction: column; }
    .list-col { border-right: 0; border-bottom: 1px solid var(--border); }
    .player { max-width: none; min-width: 0; }
    .rows { max-height: 55vh; }
}