/* ==========================================================================
   Seite „Einstellungen“ · Modul-Code SET · id „settings“ · Route #einstellungen
   Skript: public/js/pages/settings.js

   Ein Rack aus Einschüben wie A's Modul-Rack: jeder Einschub ist ein Paneel
   mit Kürzel (KAN, BOT, OVL, OBS, SES) und Zustand im Kopf; links die
   Erklärung mit Eckdaten (A's .facts), rechts die Bedienung. Kanäle wie
   A's Kanalliste (LED · Name · Zustand), das Bot-Konto als Quellenwahl wie
   A's Kreuzschiene (Wahlring, die aktive Quelle in Programmblau), Overlay mit
   Baukasten und einem Schema des Bildes auf Transparenz-Raster (A's .alpha).
   Nur Tokens.
   ========================================================================== */

.page-settings .set-rack { display: grid; gap: 16px; }

/* ---------- Einschub ------------------------------------------------------------ */

.page-settings .set-unit .pnl__code { font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-2); }
.page-settings .set-unit .pnl__actions { min-width: 0; }
.page-settings .set-unit__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: 20px 40px;
  padding: 6px 2px 4px;
}
.page-settings .set-unit__about { display: grid; gap: 14px; align-content: start; min-width: 0; }
.page-settings .set-unit__about .text { font: var(--t-body-l); color: var(--ink-2); }
.page-settings .set-unit__ctl { display: grid; gap: 14px; align-content: start; min-width: 0; }

.page-settings .set-note { font: var(--t-small); color: var(--ink-3); max-width: 60ch; }
.page-settings .set-empty { padding: 12px 0; color: var(--ink-3); }
.page-settings .set-switch { display: grid; gap: 4px; padding-top: 2px; }
.page-settings .set-switch .field__hint { padding-left: 40px; }

/* Eckdaten: ui.facts (A's .facts, Regeln in ui.css) – hier nur Breite und die etwas dichtere Zeile im Rack */
.page-settings .set-facts { max-width: 48ch; }
.page-settings .set-facts .facts__row { padding-block: 8px; font-size: 12px; }

/* Listen (Kanäle, Bot-Zustand) als gerahmte Wanne */
.page-settings .set-unit .kv,
.page-settings .set-chans { border: 1px solid var(--line); border-radius: var(--r1); }
.page-settings .set-unit .kv__row { padding-inline: 12px; }

/* ---------- Kanäle (A's .chanlist) ----------------------------------------------------- */

.page-settings .set-chans { list-style: none; margin: 0; padding: 0; }
.page-settings .set-chans__row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 4px 4px 4px 12px;
  border-bottom: 1px solid var(--line);
}
.page-settings .set-chans__row:last-child { border-bottom: 0; }
.page-settings .set-chans__name { font: 500 13px/1.3 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.page-settings .set-chans__row.is-off .set-chans__name { color: var(--ink-2); }
.page-settings .set-chans__st {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 11.5px/1.3 var(--f-mono);
  color: var(--ink-3);
  text-align: right;
}
.page-settings .set-chans__st.is-err { color: var(--red); }

/* ---------- Bot-Konto: Wahl der Quelle (A's Kreuzschiene) ------------------------------------- */

/* Sprungziel von „Bot einrichten“: unter der Brückenleiste landen, kein Fokusrahmen um das ganze Paneel */
.page-settings .set-unit { scroll-margin-top: calc(var(--bridge-h) + 16px); }
.page-settings .set-unit:focus { outline: none; }

.page-settings .set-mod { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.page-settings .set-mod .btn { margin-block: -4px; }

.page-settings .set-srcs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r1); }
.page-settings .set-src {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 14px;
  padding: 14px 14px 15px 12px;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-2) var(--ease);
}
.page-settings .set-src:last-child { border-bottom: 0; }

/* Wahlring wie ein Radio: leer = bereit, Programmblau mit Punkt = auf Sendung */
.page-settings .set-src__sel {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-3);
}
.page-settings .set-src.is-active { background: var(--pgm-soft); box-shadow: inset 2px 0 0 var(--pgm); }
.page-settings .set-src.is-active .set-src__sel {
  background: radial-gradient(circle, var(--pgm) 0 3px, transparent 3.5px);
  box-shadow: inset 0 0 0 1.5px var(--pgm);
}
.page-settings .set-src.is-off .set-src__sel { box-shadow: inset 0 0 0 1.5px var(--line-2); }
/* Aktive Quelle mit Fehler: rot statt Programmblau – sie ist gewählt, sendet aber nicht */
.page-settings .set-src.is-err { background: var(--danger-wash); box-shadow: inset 2px 0 0 var(--red); }
.page-settings .set-src.is-err .set-src__sel {
  background: radial-gradient(circle, var(--red) 0 3px, transparent 3.5px);
  box-shadow: inset 0 0 0 1.5px var(--red);
}

.page-settings .set-src__main { display: grid; gap: 6px; min-width: 0; }
.page-settings .set-src__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.page-settings .set-src__t { margin: 0; font: var(--t-heading); color: var(--ink); }
.page-settings .set-src.is-off .set-src__t { color: var(--ink-2); }
.page-settings .set-src__kind { font-size: 10px; }
.page-settings .set-src__st { margin-left: auto; min-width: 0; }
.page-settings .set-src__st .st { white-space: normal; font-size: 11.5px; }
.page-settings .set-src.is-active .set-src__st .st { color: var(--ink); }
.page-settings .set-src__x { margin: 0; color: var(--ink-2); max-width: 64ch; }
.page-settings .set-src__x .mono { color: var(--ink); }
.page-settings .set-src.is-off .set-src__x { color: var(--ink-3); }
.page-settings .set-src__err { margin: 0; font: var(--t-small); color: var(--red); }
.page-settings .set-src__act { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; align-self: center; }

/* Schmale Spalte (Rack zweispaltig auf mittleren Breiten, Telefon): Bedienung unter die Erklärung */
.page-settings .set-srcs { container-type: inline-size; }
@container (max-width: 540px) {
  .page-settings .set-src { grid-template-columns: 14px minmax(0, 1fr); }
  .page-settings .set-src__act { grid-column: 2; justify-content: flex-start; padding-top: 4px; }
}
@container (max-width: 380px) {
  .page-settings .set-src__st { flex-basis: 100%; margin-left: 0; }
}

/* ---------- Overlay: Baukasten und Schema ------------------------------------------------- */

.page-settings .set-ovl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 16px 24px;
  align-items: start;
}
.page-settings .set-ovl__opts { display: grid; gap: 12px; align-content: start; }
.page-settings .set-ovl__opts .seg { justify-self: start; }

/* Bild 16:9 auf Transparenz-Raster; Platten nicht maßstäblich, nur die Anordnung zählt */
.page-settings .set-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: conic-gradient(var(--panel) 25%, var(--raised) 0 50%, var(--panel) 0 75%, var(--raised) 0) 0 0 / 16px 16px;
}
.page-settings .set-stage.is-top { justify-content: flex-start; }
.page-settings .set-stage__res {
  position: absolute;
  left: 10px;
  top: 8px;
  font: 400 10px/1 var(--f-mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.page-settings .set-stage.is-top .set-stage__res { top: auto; bottom: 8px; }
.page-settings .set-stage__stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 5px; }
.page-settings .set-stage.is-top .set-stage__stack { flex-direction: column; }
.page-settings .set-stage__plate {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--line-3);
  border-radius: var(--r1);
  background: var(--float);
}
.page-settings .set-stage__plate .lbl { font-size: 9.5px; color: var(--ink-2); }
.page-settings .set-stage__plate--mood { width: 52%; }
.page-settings .set-stage__plate--mood i { position: relative; flex: 1; height: 3px; border-radius: 1px; background: var(--chart-track); }
.page-settings .set-stage__plate--mood i::after { content: ''; position: absolute; inset: 0 34% 0 0; border-radius: 1px; background: var(--pgm); }
.page-settings .set-stage__plate--snd .icon { width: 12px; height: 12px; color: var(--pgm-ink); }

/* ---------- Schmal ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .page-settings .set-unit__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .page-settings .set-facts { max-width: none; }
}

@media (max-width: 720px) {
  .page-settings .set-ovl { grid-template-columns: minmax(0, 1fr); }
  .page-settings .set-stage { max-width: 420px; }
}

@media (max-width: 440px) {
  .page-settings .set-chans__row { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .page-settings .set-chans__st { grid-column: 2 / 3; grid-row: 2; text-align: left; max-width: none; margin-top: -6px; }
  .page-settings .set-chans__row .btn { grid-column: 3; grid-row: 1 / span 2; }
}