/* ===========================================================================
   Borneo · блок .radio (docs/spec/radio.md §4, docs/radio-preview.html)

   Подключён отдельным <link> в root.html.heex, не через @import в app.css —
   109-wire, проводка по tasks/reports/109-patches.md §4. app.css обязан
   побайтово совпадать с .claude/skills/borneo/assets/borneo.css (theme_test
   §5.8), а этот файл в borneo.css не копируется.

   Ни одного нового цвета: всё из переменных почерка (--accent, --w-2, --w-3) и
   из стекла, которое уже описано в borneo.css. Радио — не отдельный дизайн, а
   ещё один экран того же места.

   Движение здесь одно и тихое: точка в эфире пульсирует ровно как .pulse-dot у
   счётчика присутствия, тем же ритмом. Ничего не мигает, ничего не бежит —
   музыку слушают ушами, и экран в этот момент лежит в кармане.
   =========================================================================== */

.radio{display:flex;flex-direction:column;gap:14px;margin-top:8px}

.radio-now{display:flex;flex-direction:column;gap:3px;
  border-radius:22px;padding:16px 18px;
  border:1px solid var(--glass-line,rgba(255,255,255,.18));
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.05))}

.radio-now .lab{font-size:11px;letter-spacing:.16em;text-transform:lowercase;
  color:var(--w-3,rgba(255,255,255,.55))}
.radio-now .t{font-family:var(--font-h,Onest,system-ui,sans-serif);
  font-weight:var(--title-weight,300);letter-spacing:var(--title-tracking,-.025em);
  font-size:19px;line-height:1.2;color:#fff}
.radio-now .s{font-size:13px;color:var(--w-2,rgba(255,255,255,.78))}

/* Эфир идёт — точка у метки, тем же пульсом, что у «здесь и открыты». */
.radio-now:not(.quiet) .lab::before{content:"";display:inline-block;
  width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:middle;
  background:var(--accent,#FFC36B);animation:radio-pulse 2.4s ease-in-out infinite}

.radio-now.quiet .t{color:var(--w-2,rgba(255,255,255,.78))}
.radio-now.announce{border-color:var(--accent,#FFC36B)}

.radio-note{font-size:12px;color:var(--w-3,rgba(255,255,255,.55));margin:0}

/* Панель: то же стекло, но без обращения и без украшений — числа и кнопки. */
.radio-panel{display:flex;flex-direction:column;gap:10px}
.radio-state{display:flex;flex-direction:column;gap:2px}
.radio-state .lab{font-size:11px;letter-spacing:.16em;text-transform:lowercase;
  color:var(--w-3,rgba(255,255,255,.55))}
.radio-state .t{font-size:16px;color:#fff}

@keyframes radio-pulse{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%    {opacity:1;  transform:scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .radio-now:not(.quiet) .lab::before{animation:none;opacity:.9}
}

/* ТЗ 140: панель «Радио» была голым HTML (input/button по умолчанию) — эти
   правила одевают её в тот же язык, что и остальная панель. Не `.btnrow` —
   этот класс в borneo.css уже занят вертикальными строками-ссылками кабинета
   (экран 26); здесь ряд кнопок горизонтальный, поэтому свой класс. `.btn` нигде
   в проекте раньше не встречался — можно вводить без коллизии. */
.radio-actions{display:flex;gap:7px;flex-wrap:wrap}

.btn{appearance:none;-webkit-appearance:none;font:inherit;
  font-family:var(--font-h,Onest,system-ui,sans-serif);font-size:11px;font-weight:600;
  padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);color:#fff;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.22)}
.btn:active{transform:scale(.98)}
.btn.on{background:rgba(255,255,255,.9);color:#15181F;border-color:transparent}

/* Загрузка — стилизованный `<label for>` вместо голого `<input type=file>»`
   (сам input прячется классом `.hidden`, доступность не страдает: label
   остаётся кликабельным и читается скринридером). */
.hidden{display:none}