/* pocketOverlay Editor - "Kontrollraum"
   Dunkles Regiepult: Rail (Overlays) | Programm-Monitor | Inspector.
   Rot ist ausschliesslich der Live-/Veroeffentlichen-Zustand (Tally). */

@font-face { font-family:Archivo; font-style:normal; font-weight:400 700; font-stretch:75% 125%; font-display:swap;
  src:url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:Archivo; font-style:normal; font-weight:400 700; font-stretch:75% 125%; font-display:swap;
  src:url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/plex-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/plex-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme:dark;
  --ground:#0b0d0f; --panel:#121518; --raised:#181c20; --sunk:#0e1113; --hover:#20262b;
  --line:#21262b; --line-2:#2c333a; --line-3:#3b444d;
  --ink:#e7ebee; --dim:#98a3ab; --faint:#69737b;
  --tally:#e8402a; --tally-ink:#ff6b56; --tally-sunk:#2a120e; --tally-line:#6a2318;
  --ok:#3fae7a; --ok-sunk:#0f2b20; --ok-line:#2c5e48;
  --warn:#d8a33a; --warn-sunk:#241d0d; --warn-line:#5b4a1c;
  --r:6px;
  --ui:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--ui); font-size:13.5px; line-height:1.45;
  -webkit-font-smoothing:antialiased; }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid #6ea8ff; outline-offset:2px; border-radius:3px; }
.app { height:100%; }
.loading { height:100%; display:grid; place-content:center; color:var(--dim); font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; }

/* ---------- Geruest ---------- */
.shell { height:100%; display:grid; grid-template-columns:238px minmax(0,1fr) 352px;
  grid-template-rows:minmax(0,1fr) auto; grid-template-areas:"rail monitor insp" "rail foot insp"; }
.shell.is-wide { grid-template-columns:238px minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  grid-template-areas:"rail monitor"; }
.rail { grid-area:rail; }
.monitor { grid-area:monitor; }
.insp { grid-area:insp; }
.editor-actions { grid-area:foot; }
.pane { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.pane-scroll { overflow-y:auto; overscroll-behavior:contain; }

/* ---------- Rail ---------- */
.rail { background:var(--panel); border-right:1px solid var(--line); }
.rail-head { padding:18px 16px 14px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:8px; }
.wordmark { font-stretch:112%; font-weight:700; letter-spacing:-.018em; font-size:16px; }
.wordmark em { font-style:normal; color:var(--dim); }
.rail-kicker { font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--faint); text-transform:uppercase; }
.rail-body { flex:1; padding:14px 10px; }
.rail-label { display:flex; align-items:center; gap:8px; padding:10px 8px 6px; }
.rail-label > span:not(.rail-count), .rail-tab { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.rail-tab { border:0; background:transparent; padding:0; }
.rail-tab:hover { color:var(--dim); }
.rail-tab.is-on { color:var(--ink); }
.rail-tab.is-on::after { content:""; display:block; height:1px; margin-top:3px; background:var(--tally); }
.rail-count { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint); }
.rail-add { width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:5px;
  background:transparent; color:var(--dim); font-size:14px; line-height:1; padding:0; }
.rail-add:hover { background:var(--raised); color:var(--ink); border-color:var(--line-3); }
.rail-item { width:100%; display:grid; grid-template-columns:7px minmax(0,1fr); align-items:center; gap:10px;
  padding:9px 10px; border:0; border-radius:var(--r); background:transparent; text-align:left; color:var(--dim); }
.rail-item:hover { background:var(--raised); color:var(--ink); }
.scene-rail-link { text-decoration:none; margin-bottom:12px; border:1px solid var(--line-2); }
.rail-item.is-on { background:var(--raised); color:var(--ink); box-shadow:inset 2px 0 0 var(--tally); }
.rail-text { min-width:0; }
.rail-text strong { display:block; font-weight:500; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-text small { display:block; font-family:var(--mono); font-size:10.5px; color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-empty { padding:8px 10px 10px; color:var(--faint); font-size:12.5px; line-height:1.5; }
.rail-foot { padding:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.rail-account { flex:1; min-width:0; font-size:12px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.linkbtn { border:0; background:transparent; color:var(--dim); font-size:12px; padding:5px 8px; border-radius:5px; }
.linkbtn:hover { color:var(--ink); background:var(--raised); }

.dot { width:7px; height:7px; border-radius:50%; background:var(--ok); display:block;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent); }
.dot.is-off { background:#4b545c; box-shadow:none; }
.dot.is-none { background:transparent; border:1px solid var(--line-3); box-shadow:none; }

/* ---------- Monitor ---------- */
.mon-head { display:flex; align-items:center; gap:12px; padding:0 18px; height:52px; flex:0 0 auto;
  border-bottom:1px solid var(--line); background:var(--panel); }
.iconbtn { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; padding:0;
  border:1px solid var(--line-2); border-radius:var(--r); background:transparent; color:var(--dim); font-size:13px; }
.iconbtn:hover { background:var(--raised); color:var(--ink); border-color:var(--line-3); }
.crumb { display:flex; align-items:baseline; gap:8px; min-width:0; flex:1; }
.crumb > span { color:var(--faint); font-size:12.5px; flex:0 0 auto; }
.crumb b { font-weight:600; font-size:14px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.res { font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--faint); flex:0 0 auto; }

.chip { display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border-radius:999px; flex:0 0 auto;
  border:1px solid var(--line-2); font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap; }
.chip .dot { width:6px; height:6px; box-shadow:none; }
.chip.is-draft { border-color:var(--warn-line); background:var(--warn-sunk); color:var(--warn); }
.chip.is-draft .dot { background:var(--warn); }
.chip.is-none { color:var(--faint); }
.chip.is-none .dot { background:transparent; border:1px solid var(--line-3); }
.mon-state:empty { display:none; }

.mon-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; padding:22px 24px 0; }
.stage-wrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.stage { position:relative; width:100%; max-height:100%; aspect-ratio:16/9; overflow:hidden; overflow:clip;
  border:1px solid var(--line-2); border-radius:8px; background-color:#0f1214;
  background-image:linear-gradient(45deg,#141719 25%,transparent 25%),linear-gradient(-45deg,#141719 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#141719 75%),linear-gradient(-45deg,transparent 75%,#141719 75%);
  background-size:26px 26px; background-position:0 0,0 13px,13px -13px,-13px 0; }
.guide { position:absolute; inset:5%; border:1px dashed rgba(255,255,255,.085); border-radius:2px; pointer-events:none; }
.tick { position:absolute; width:13px; height:13px; border:1px solid rgba(255,255,255,.2); pointer-events:none; }
.tick.tl { top:10px; left:10px; border-right:0; border-bottom:0; }
.tick.tr { top:10px; right:10px; border-left:0; border-bottom:0; }
.tick.bl { bottom:10px; left:10px; border-right:0; border-top:0; }
.tick.br { bottom:10px; right:10px; border-left:0; border-top:0; }
.preview { position:absolute; inset:0; padding:30px; }
.stage-note { margin:0; padding-bottom:2px; min-height:16px; text-align:center;
  font-family:var(--mono); font-size:10.5px; line-height:1.5; color:var(--faint); }

.editor-actions { border-top:1px solid var(--line); background:var(--panel);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.linkfield { flex:1; min-width:210px; display:flex; align-items:stretch;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--sunk); overflow:hidden; }
.linkfield code { flex:1; min-width:0; padding:8px 11px; font-family:var(--mono); font-size:11.5px; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.linkfield button { border:0; border-left:1px solid var(--line-2); background:var(--raised); color:var(--dim);
  padding:8px 12px; font-size:11.5px; white-space:nowrap; }
.linkfield button:hover:not(:disabled) { color:var(--ink); background:var(--hover); }
.linkfield button:disabled { opacity:.45; cursor:not-allowed; }

.btn { border:1px solid var(--line-2); border-radius:var(--r); background:var(--raised); color:var(--ink);
  padding:8px 14px; font-size:12.5px; font-weight:500; white-space:nowrap; }
.btn:hover { background:var(--hover); border-color:var(--line-3); }
.btn.quiet { background:transparent; color:var(--dim); }
.btn.quiet:hover { color:var(--ink); background:var(--raised); }
.btn.go { background:var(--tally); border-color:var(--tally); color:#fff; font-weight:600;
  box-shadow:0 0 0 1px rgba(232,64,42,.25), 0 6px 18px -8px rgba(232,64,42,.7); }
.btn.go:hover { background:#f04a33; border-color:#f04a33; }
.btn.danger { color:var(--dim); border-color:var(--line-2); background:transparent; }
.btn.danger:hover { color:var(--tally-ink); border-color:#7d3a2e; background:#1d100d; }

/* ---------- Inspector ---------- */
.insp { background:var(--panel); border-left:1px solid var(--line); }
.insp-head { height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 16px; border-bottom:1px solid var(--line); }
.insp-head h2 { margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); font-weight:400; }
.rev { font-family:var(--mono); font-size:10px; color:var(--faint); }
.grp { border-bottom:1px solid var(--line); }
.grp > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:12px 16px;
  font-size:12px; font-weight:600; color:var(--ink); }
.grp > summary::-webkit-details-marker { display:none; }
.grp > summary:hover { background:var(--raised); }
.caret { margin-left:auto; width:6px; height:6px; flex:0 0 auto; border-right:1.5px solid var(--faint);
  border-bottom:1.5px solid var(--faint); transform:rotate(-45deg); transition:transform .16s ease; }
.grp[open] > summary .caret { transform:rotate(45deg); }
@media (prefers-reduced-motion:reduce) { .caret { transition:none; } }
.grp-body { padding:2px 16px 14px; }
.sub { margin:14px 0 6px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.hint { margin:10px 0 0; color:var(--faint); font-size:11px; line-height:1.5; }

.train-source { border-bottom:1px solid var(--line); padding:5px 0; }
.train-source:last-child { border-bottom:0; }
.train-tier-values { border-left:2px solid var(--line-2); margin:4px 0 3px 8px; padding-left:9px; }
.train-tier-values[hidden] { display:none; }
.row { display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:12px; min-height:32px; padding:2px 0; }
.row[hidden], .grp[hidden] { display:none; }
.range { display:flex; align-items:center; gap:8px; }
.range input { width:100%; min-width:0; margin:0; accent-color:var(--ok); }
.range output { min-width:50px; text-align:right; font-family:var(--mono); font-size:11px; color:var(--dim); white-space:nowrap; }
.row-label { color:var(--dim); font-size:12.5px; overflow-wrap:anywhere; }
.ctl { width:100%; min-width:0; height:28px; border:1px solid var(--line-2); border-radius:5px; background:var(--sunk);
  color:var(--ink); padding:0 8px; font-size:12px; }
.ctl:hover { border-color:var(--line-3); }
.ctl[type="datetime-local"] { font-family:var(--mono); font-size:11px; padding-inline:6px; }
select.ctl { appearance:none; padding-right:22px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 12px) 12px,calc(100% - 8px) 12px; background-size:4px 4px; background-repeat:no-repeat; }
.num { position:relative; display:flex; align-items:center; }
.num .ctl { font-family:var(--mono); font-variant-numeric:tabular-nums; padding-right:26px; }
.num em { position:absolute; right:8px; font-style:normal; font-family:var(--mono); font-size:10px; color:var(--faint);
  pointer-events:none; }
.col { display:flex; align-items:center; gap:8px; height:28px; border:1px solid var(--line-2); border-radius:5px;
  background:var(--sunk); padding:0 8px 0 4px; cursor:pointer; }
.col:hover { border-color:var(--line-3); }
.col input { appearance:none; width:20px; height:20px; flex:0 0 auto; padding:0; border:1px solid rgba(255,255,255,.18);
  border-radius:3px; background:none; cursor:pointer; }
.col input::-webkit-color-swatch-wrapper { padding:0; }
.col input::-webkit-color-swatch { border:0; border-radius:2px; }
.col input::-moz-color-swatch { border:0; border-radius:2px; }
.col code { font-family:var(--mono); font-size:11px; color:var(--dim); }
.sw { position:relative; display:inline-flex; align-items:center; justify-self:end; width:32px; height:18px; flex:0 0 auto;
  cursor:pointer; }
.sw input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.sw i { display:block; width:32px; height:18px; border-radius:999px; background:#3a424a; transition:background .16s ease; }
.sw i::after { content:""; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%;
  background:#c9d1d7; transition:transform .16s ease, background .16s ease; }
.sw input:checked + i { background:var(--ok); }
.sw input:checked + i::after { transform:translateX(14px); background:#fff; }
.sw input:focus-visible + i { outline:2px solid #6ea8ff; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .sw i, .sw i::after { transition:none; } }

.matrix { display:flex; flex-direction:column; }
.matrix-head, .matrix-row { display:grid; grid-template-columns:minmax(0,1fr) 52px 46px 46px; align-items:center; gap:8px; }
.matrix-head { padding:0 0 8px; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); }
.matrix-head span:not(:first-child) { text-align:center; }
.matrix-row { padding:3px 0; border-top:1px solid #1a1f23; }
.matrix-row > *:not(:first-child) { justify-self:center; }
.matrix-name { color:var(--dim); font-size:12px; overflow-wrap:anywhere; }
.ctl.mini { width:46px; height:26px; padding:0; text-align:center; font-family:var(--mono); font-size:11.5px;
  background-image:none; appearance:none; }
.chk { appearance:none; width:15px; height:15px; margin:0; border:1px solid var(--line-3); border-radius:3px;
  background:var(--sunk); cursor:pointer; position:relative; }
.chk:checked { background:var(--ok); border-color:var(--ok); }
.chk:checked::after { content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #07130e; border-width:0 2px 2px 0; transform:rotate(42deg); }

/* ---------- Vorschau-Inhalt ----------
   Unveraendert aus der bisherigen editor.css uebernommen, damit die Vorschau
   exakt so aussieht wie die Browser-Quelle in OBS. */
.irl-preview-overlay { position:absolute; display:flex; gap:var(--preview-gap,3px); font-family:var(--preview-font,Arial,sans-serif); font-size:var(--preview-size,23px); font-weight:var(--preview-weight,400); font-variant-numeric:tabular-nums; letter-spacing:var(--preview-tracking,0); text-transform:var(--preview-transform,none); color:var(--preview-text,#fff); line-height:var(--preview-line,1.4); }
.irl-preview-overlay[data-direction="column"] { flex-direction:column; }
.irl-preview-overlay[data-direction="row"] { flex-direction:row; flex-wrap:wrap; }
.irl-preview-overlay[data-anchor$="left"] { left:var(--preview-x,10px); align-items:flex-start; }
.irl-preview-overlay[data-anchor$="right"] { right:var(--preview-x,10px); align-items:flex-end; }
.irl-preview-overlay[data-anchor$="center"] { left:50%; align-items:center; transform:translateX(-50%); }
.irl-preview-overlay[data-anchor^="top"] { top:var(--preview-y,10px); }
.irl-preview-overlay[data-anchor^="bottom"] { bottom:var(--preview-y,10px); }
.irl-preview-overlay[data-anchor^="middle"] { top:50%; }
.irl-preview-overlay[data-anchor="middle-left"],.irl-preview-overlay[data-anchor="middle-right"] { transform:translateY(-50%); }
.irl-preview-overlay[data-anchor="middle-center"] { transform:translate(-50%,-50%); }
.irl-preview-bubble { display:inline-flex; align-items:center; gap:calc(var(--preview-inner-gap,6px) * 2); padding:var(--preview-pad-y,6px) var(--preview-pad-x,10px); border:var(--preview-border-width,0) solid var(--preview-border-color,transparent); border-radius:var(--preview-radius,10px); background:var(--preview-bg,rgba(60,60,60,.8)); box-shadow:0 2px 6px rgba(0,0,0,.2); text-shadow:var(--preview-shadow,none); white-space:nowrap; }
.irl-preview-group { display:inline-flex; align-items:center; gap:var(--preview-inner-gap,6px); }
.irl-preview-flag,.irl-preview-speed,.irl-preview-quality { width:.87em; height:.87em; flex:0 0 auto; }
.irl-preview-flag { object-fit:cover; border-radius:50%; }
.irl-preview-speed { opacity:.9; }
.irl-preview-overlay { --irl-icon-tracking: var(--preview-tracking, 0px); }
.irl-preview-quality { border-radius:50%; background:#f0c33c; color:#f0c33c; box-shadow:0 0 .3em currentColor; }
.goal-preview-host { position:absolute; left:50%; top:50%; width:max-content; height:max-content; align-items:center; justify-content:center; transform-origin:center; }
.goal-preview-host.palert-host { position:absolute; transform:translate(-50%,-50%); }

/* ---------- Uebersicht ---------- */
.ov { width:100%; max-width:1080px; margin:0 auto; padding:26px 28px calc(44px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:22px; }
.ov-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ov-head h1 { margin:0; font-size:24px; font-weight:700; letter-spacing:-.022em; font-stretch:104%; }
.ov-head p { margin:5px 0 0; color:var(--faint); font-size:12.5px; }

.irl-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px;
  padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.irl-card strong { display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; margin-bottom:4px; }
.irl-card > div:first-child span { color:var(--faint); font-size:12.5px; }
.irl-card-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

/* Link kopieren, ohne das Overlay zu oeffnen */
.copybtn { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--line-2);
  border-radius:var(--r); background:var(--sunk); color:var(--dim); font-size:11.5px; white-space:nowrap; }
.copybtn:hover { color:var(--ink); border-color:var(--line-3); background:var(--raised); }
.copybtn svg { width:13px; height:13px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }
.copybtn.is-done { border-color:var(--ok-line); background:var(--ok-sunk); color:#9cf1c6; }
.nolink { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.g-draft { color:var(--warn); }
.tbl { border:1px solid var(--line); border-radius:12px; overflow:hidden; overflow:clip; background:var(--panel); }
.tbl-row { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(130px,1fr) 150px;
  align-items:center; gap:14px; padding:12px 16px; border-top:1px solid var(--line); }
.tbl-row:first-child { border-top:0; }
.tbl-row > :nth-child(3) { display:none; }
.irl-card-actions > .copybtn, .irl-card-actions > .nolink { display:none; }
[hidden] { display:none !important; }
.tbl-head { padding-block:9px; background:var(--sunk); font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); }
.tbl-row.is-off .g-name { color:var(--dim); }
.tbl-row.is-off .meter i { filter:grayscale(1); opacity:.5; }
.g-open { min-width:0; display:block; padding:0; border:0; background:transparent; color:inherit; text-align:left; }
.g-name { display:block; font-weight:600; font-size:13.5px; letter-spacing:-.005em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-open:hover .g-name { color:var(--tally-ink); }
.g-sub { display:block; margin-top:2px; font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.meter { display:block; height:4px; border-radius:999px; background:#242a2f; overflow:hidden; overflow:clip; }
.meter i { display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg,#f053e4,#4fd1f5,#42e274); }
.meter-val { display:block; margin-top:6px; font-family:var(--mono); font-size:10.5px; color:var(--dim);
  font-variant-numeric:tabular-nums; }
.vis { display:flex; align-items:center; gap:9px; padding:6px 10px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--sunk); color:var(--dim); font-size:11.5px; }
.vis:hover { border-color:var(--line-3); color:var(--ink); }
.vis.is-on { border-color:var(--ok-line); background:var(--ok-sunk); color:#9cf1c6; }
.vis-switch { position:relative; width:32px; height:18px; flex:0 0 auto; border-radius:999px; background:#555b69;
  transition:background .18s ease; }
.vis-switch span { position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:#fff;
  transition:transform .18s ease; }
.vis.is-on .vis-switch { background:var(--ok); }
.vis.is-on .vis-switch span { transform:translateX(14px); }
.vis-text { min-width:74px; text-align:left; }
@media (prefers-reduced-motion:reduce) { .vis-switch, .vis-switch span { transition:none; } }
.empty { padding:30px 24px; border:1px dashed var(--line-2); border-radius:12px; background:var(--panel); text-align:center; }
.empty h2 { margin:0 0 6px; font-size:16px; font-weight:600; letter-spacing:-.012em; }
.empty p { margin:0 0 16px; color:var(--faint); font-size:13px; }

/* ---------- Meldung ---------- */
.notice { position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:60; max-width:min(420px, calc(100vw - 40px));
  padding:11px 15px; border:1px solid transparent; border-radius:9px; font-size:12.5px; line-height:1.5;
  box-shadow:0 16px 44px -18px rgba(0,0,0,.9); transition:opacity .18s ease, transform .18s ease; }
.notice.success { border-color:var(--ok-line); background:#11241c; color:#a9f2cb; }
.notice.warning { border-color:var(--warn-line); background:#3b3018; color:#ffe29a; }
.notice.error { border-color:#963b48; background:#48252a; color:#ffc0c4; }
.notice.leaving { opacity:0; transform:translateY(6px); }
@media (prefers-reduced-motion:reduce) { .notice { transition:none; } }

.btn.danger-solid { background:#b42335; border-color:#c93b4c; color:#fff; font-weight:600; }
.btn.danger-solid:hover { background:#c92a3e; border-color:#e04c5d; }
.btn.save { background:#16875b; border-color:#20a270; color:#fff; font-weight:600;
  box-shadow:0 0 0 1px rgba(32,162,112,.2), 0 6px 18px -8px rgba(32,162,112,.7); }
.btn.save:hover { background:#1b9c6b; border-color:#27b77f; }

/* ---------- Bestaetigung ---------- */
.modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(6,8,9,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.modal-box { width:min(420px,100%); border:1px solid var(--line-2); border-radius:12px; background:var(--panel);
  padding:22px 24px 20px; box-shadow:0 30px 70px -30px #000; }
.modal-box h2 { margin:0 0 8px; font-size:17px; font-weight:600; letter-spacing:-.016em; text-wrap:balance; }
.modal-box p { margin:0 0 20px; color:var(--dim); font-size:13px; line-height:1.55; text-wrap:pretty; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.unsaved-actions { display:grid; grid-template-columns:max-content max-content; justify-content:center; }
.unsaved-actions [data-unsaved="save"] { grid-column:1 / -1; justify-self:center; }

/* ---------- Login ---------- */
.login { height:100%; display:grid; place-items:center; padding:32px 20px; position:relative; overflow:hidden; }
.login::before { content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 0,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 0,transparent 78%); }
.login-box { position:relative; width:min(640px,100%); text-align:center; display:flex; flex-direction:column;
  align-items:center; }
.login-kicker { margin:0 0 18px; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); }
.login-box h1 { margin:0; font-size:clamp(34px,6vw,46px); font-weight:700; letter-spacing:-.035em; font-stretch:108%;
  text-wrap:balance; }
.login-lede { margin:14px 0 0; color:var(--dim); font-size:14px; line-height:1.6; max-width:38ch; text-wrap:pretty; }
/* Signalweg: drei Stationen, dazwischen Linien mit Punkten, die in Datenrichtung laufen.
   Die mittlere Station (pocketOverlay) ist hervorgehoben - hier steht man gerade. */
.login-chain { list-style:none; margin:34px 0 30px; padding:0; width:100%; display:flex; justify-content:center;
  align-items:stretch; }
.login-node { flex:0 1 170px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 12px 14px;
  border:1px solid var(--line-2); border-radius:10px; background:var(--panel); color:var(--dim); }
.login-node svg { width:22px; height:22px; margin-bottom:6px; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.login-node circle { fill:var(--panel); }
.login-node strong { font-weight:600; font-size:13.5px; letter-spacing:-.01em; color:var(--ink); }
.login-node small { font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--faint); }
.login-node.is-here { background:var(--raised); border-color:var(--line-3); color:var(--ink);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 5%,transparent); }
.login-node.is-here circle { fill:var(--raised); }
.login-node.is-here small { color:var(--dim); }
.login-link { --w:44px; flex:0 0 var(--w); align-self:center; position:relative; height:24px; }
.login-link::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line-3); }
.login-link i { position:absolute; top:50%; left:0; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:var(--ink); opacity:0; animation:login-flow 1.9s linear infinite; }
.login-link i:nth-child(2) { animation-delay:.63s; }
.login-link i:nth-child(3) { animation-delay:1.26s; }
@keyframes login-flow { 0% { transform:translateX(0); opacity:0; } 18% { opacity:1; } 82% { opacity:1; }
  100% { transform:translateX(var(--w)); opacity:0; } }
@keyframes login-flow-y { 0% { transform:translateY(0); opacity:0; } 18% { opacity:1; } 82% { opacity:1; }
  100% { transform:translateY(var(--w)); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .login-link i { animation:none; } }
.twitch { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:min(360px,100%); padding:13px 20px;
  border:0; border-radius:8px; background:#9146ff; color:#fff; font-size:14px; font-weight:600;
  box-shadow:0 10px 28px -12px rgba(145,70,255,.9); }
.twitch:hover { background:#a163ff; }
.twitch svg { width:17px; height:17px; fill:currentColor; }
.login-foot { margin:16px 0 0; font-size:12px; color:var(--faint); }

/* ---------- Schmale Fenster ---------- */
@media (max-width:1180px) {
  html, body { height:auto; }
  .app { height:auto; min-height:100vh; min-height:100dvh; }
  .shell, .shell.is-wide { display:flex; flex-direction:column; height:auto; min-height:100%; }
  .pane { overflow:visible; }
  /* Unterhalb dieser Breite scrollt die Seite als Ganzes. Die Panels duerfen dann
     keine Scroll-Container mehr sein: ein nicht scrollbarer Container mit
     overscroll-behavior:contain schluckt die Wischgeste, statt sie weiterzugeben. */
  .pane-scroll { overflow:visible; overscroll-behavior:auto; }
  .monitor { order:1; }
  .insp { order:2; }
  .editor-actions { order:3; }
  /* Beim Bearbeiten und in der App navigiert man nicht ueber die Rail: dort fuehrt
     der Zurueck-Knopf bzw. die App-Leiste. Sonst bleibt sie als Bereichswechsel
     stehen - die Overlays listet der Inhalt darunter ohnehin auf. */
  .shell.is-editing .rail, .shell.is-embedded .rail { display:none; }
  /* Den Bereichsnamen sagt hier schon die Reiterleiste darueber - in der App sogar
     deren eigene. Die Ueberschrift waere nur eine Wiederholung. */
  .ov-head h1 { display:none; }
  .rail { border-right:0; border-bottom:1px solid var(--line); }
  .rail-body { display:flex; flex-wrap:wrap; gap:7px; padding:12px; }
  .rail-body .rail-item, .rail-body .rail-empty, .rail-count, .rail-add { display:none; }
  .rail-label { padding:0; }
  .rail-tab { padding:8px 15px; border:1px solid var(--line-2); border-radius:999px; }
  .rail-tab.is-on { color:var(--ink); background:var(--raised); border-color:var(--line-3); }
  .rail-tab.is-on::after { display:none; }
  .insp { border-left:0; border-top:1px solid var(--line); }
  .mon-body { padding:18px 16px 0; }
  .stage { max-height:none; }
  .login { min-height:100vh; }
}
@media (max-width:640px) {
  .ov { padding:20px 16px 40px; }
  .preview { padding:16px; }
  .tbl-row { grid-template-columns:minmax(0,1fr); gap:10px; }
  .tbl-head { display:none; }
  .vis, .copybtn, .nolink { justify-self:start; }
  .irl-card { grid-template-columns:1fr; }
  .mon-head { height:auto; min-height:52px; padding:10px 14px; flex-wrap:wrap; }
  .res { display:none; }
  .linkfield { flex:1 1 100%; min-width:0; }
  .editor-actions { padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .notice { right:12px; left:12px; bottom:12px; max-width:none; }
  /* Drei Stationen nebeneinander brauchen rund 560px; darunter (WebView in pocketChat)
     stehen sie untereinander und die Punkte laufen nach unten. */
  .login-chain { flex-direction:column; align-items:center; margin:28px 0 26px; }
  .login-node { flex:0 0 auto; width:min(260px,100%); }
  .login-link { --w:30px; width:24px; height:var(--w); flex:0 0 var(--w); }
  .login-link::before { left:50%; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .login-link i { left:50%; top:0; animation-name:login-flow-y; }
}
@media (max-width:420px) {
  .unsaved-actions { grid-template-columns:1fr; }
  .unsaved-actions .btn { width:100%; }
  .unsaved-actions [data-unsaved="save"] { grid-column:auto; }
  .row { grid-template-columns:minmax(0,1fr) 112px; gap:8px; }
  .matrix-head, .matrix-row { grid-template-columns:minmax(0,1fr) 48px 40px 40px; gap:6px; }
}
.train-tests { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:10px 0; }.train-tests .btn { font-size:12px; }.goal-preview-host .pocket-train { max-width:100%; }
.train-bot { display:grid; gap:7px; padding:10px 0; }.train-bot label { display:grid; gap:6px; font-size:12px; }.train-bot p { color:var(--dim); font-size:12px; margin:0; }
.alert-tests { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; }
.alert-tests .btn { min-width:0; padding-inline:8px; }
.alert-platform { padding:10px 0; border-bottom:1px solid var(--line); }
.alert-platform:last-child { border-bottom:0; }
.alert-platform > strong { display:block; margin:0 0 6px; font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; }
.alert-connection { float:right; color:var(--faint); font-size:9px; letter-spacing:.06em; }
.alert-connection.is-connected { color:var(--ok); }