/* Multipost studio — dark-first console. Every colour is a token so the light
   theme swaps the same names and nothing is defined only inside a theme block. */

:root {
  --bg:#080B10; --surface:#0C1218; --surface-2:#111922; --surface-3:#17212B;
  --line:#222F3C; --line-soft:#151F29;
  --text:#E9EFF5; --text-2:#9BACBE; --text-3:#61738A;
  --accent:#FFB020; --accent-fill:#FFB020; --on-accent:#0A0E13;
  --accent-soft:rgba(255,176,32,.13); --accent-line:rgba(255,176,32,.36);
  --ok:#3DDC97; --ok-soft:rgba(61,220,151,.13);
  --live:#4CA6FF; --live-soft:rgba(76,166,255,.13);
  --fail:#FF4D6D; --fail-soft:rgba(255,77,109,.13);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 20px 44px -28px rgba(0,0,0,.95);
  --r-sm:6px; --r:10px; --r-lg:14px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#EDF0F4; --surface:#FFFFFF; --surface-2:#F5F8FB; --surface-3:#E9EEF4;
    --line:#D7DFE8; --line-soft:#E6EBF1;
    --text:#0C161F; --text-2:#4B5D6E; --text-3:#78889A;
    --accent:#A56100; --accent-fill:#F5A208; --on-accent:#1B1204;
    --accent-soft:rgba(165,97,0,.11); --accent-line:rgba(165,97,0,.30);
    --ok:#0A8D62; --ok-soft:rgba(10,141,98,.11);
    --live:#1566CC; --live-soft:rgba(21,102,204,.11);
    --fail:#C61E42; --fail-soft:rgba(198,30,66,.10);
    --shadow:0 1px 2px rgba(16,32,48,.05), 0 16px 34px -24px rgba(16,32,48,.4);
  }
}
:root[data-theme="light"] {
  --bg:#EDF0F4; --surface:#FFFFFF; --surface-2:#F5F8FB; --surface-3:#E9EEF4;
  --line:#D7DFE8; --line-soft:#E6EBF1;
  --text:#0C161F; --text-2:#4B5D6E; --text-3:#78889A;
  --accent:#A56100; --accent-fill:#F5A208; --on-accent:#1B1204;
  --accent-soft:rgba(165,97,0,.11); --accent-line:rgba(165,97,0,.30);
  --ok:#0A8D62; --ok-soft:rgba(10,141,98,.11);
  --live:#1566CC; --live-soft:rgba(21,102,204,.11);
  --fail:#C61E42; --fail-soft:rgba(198,30,66,.10);
  --shadow:0 1px 2px rgba(16,32,48,.05), 0 16px 34px -24px rgba(16,32,48,.4);
}

* { box-sizing: border-box; }

/* Set by an inline head script on the signed-in pages and cleared once
   /api/auth/me has answered — see the comment there. Never set without JS, so
   a scriptless browser still sees the page. */
html.booting body > *:not(.topbar) { visibility:hidden; }

body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono { font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
:focus-visible { outline:none; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); border-radius:var(--r-sm); }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }

/* ---------- shell ---------- */
/* The bar carries a brand, a source chip, four links, two chips, a theme
   toggle and a sign-out button. That is roughly 600px of content, so on a
   phone it used to shrink every item until the text wrapped inside 50px-tall
   pills and the bar still overflowed — widening the whole document to 780px
   and leaving every page below it half-used with a sideways scrollbar.
   Nothing shrinks now; below --bar-break the secondary items move into a
   dropdown instead. */
.topbar {
  display:flex; align-items:center; gap:14px; padding:0 16px; height:54px; min-width:0;
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
}
.topbar > * { flex:none; }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; min-height:34px; }
.brand b { font-family:Archivo,sans-serif; font-weight:800; font-size:16px; letter-spacing:-.02em; white-space:nowrap; }
.topbar > .grow { flex:1 1 auto; }
.grow { flex:1 1 auto; min-width:0; }
/* display:contents keeps the desktop bar a single flex line; the mobile block
   below turns this same element into the dropdown panel. */
.barnav { display:contents; }
.topbar > .menubtn { display:none; }
.mlabel { display:none; }
.topbar > .srcchip { flex:0 1 auto; }
.srcchip {
  display:flex; align-items:center; gap:8px; padding:4px 10px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface-2); font-size:11.5px; color:var(--text-2);
  min-width:0; overflow:hidden; white-space:nowrap;
}
.srcchip b { color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.iconbtn {
  width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-2); color:var(--text-2); cursor:pointer; flex:none;
}
.iconbtn:hover { color:var(--text); border-color:var(--text-3); }

main { padding:18px; max-width:1560px; margin:0 auto; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); }
.card > header { display:flex; align-items:center; gap:9px; padding:10px 13px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.card > header h2 { margin:0; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); font-weight:600; }
.card .pad { padding:13px; }

h1 { margin:0 0 4px; font-family:Archivo,sans-serif; font-weight:700; font-size:21px; letter-spacing:-.025em; }
.sub { margin:0 0 16px; color:var(--text-3); font-size:12.5px; }

/* ---------- dropzone ---------- */
.drop {
  /* A <label> is inline by default, and an inline box wrapping block children
     (the heading and the hint) does not contain them — the padding, background
     and dashed border fragment into a narrow strip beside the icon while the
     text spans the full width. This is the whole fix. */
  display:block;
  border:1.5px dashed var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:52px 24px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color:var(--accent-line); background:var(--accent-soft); }
.drop h3 { margin:12px 0 4px; font-family:Archivo,sans-serif; font-size:17px; font-weight:700; letter-spacing:-.02em; }
.drop p { margin:0; color:var(--text-3); font-size:12.5px; }
.drop input { display:none; }

/* ---------- studio layout ---------- */
.studio { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; align-items:start; }
/* Both columns must be allowed to be narrower than their content. Without
   min-width:0 the sidebar's widest row sets the floor for the whole grid, and
   on a phone that quietly stretched the page to 542px inside a 366px main. */
.studio > * { min-width:0; }
/* minmax(0,1fr), not the default auto: an auto track is floored at its items'
   min-content width, so one wide card header used to stretch the whole column
   to 542px inside a 366px page. */
.left, .right { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; min-width:0; }

.toolbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 13px; }
.tlabel { font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); font-weight:600; }
.seg { display:flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.seg button { border:0; background:var(--surface-2); color:var(--text-2); font:inherit; font-size:12px;
  padding:0 11px; min-height:32px; cursor:pointer; white-space:nowrap; }
.seg button + button { border-left:1px solid var(--line); }
.seg button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); font-weight:600; }

.sw { --w:32px; --h:19px; --knob:13px; position:relative; width:var(--w); height:var(--h); flex:none; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-3); cursor:pointer; padding:0; transition:background .16s,border-color .16s; }
/* The pill is small on purpose. This invisible cushion gives it a finger-sized
   hit area without making the control look like a toy. */
.sw::before { content:""; position:absolute; inset:-9px -6px; border-radius:999px; }
.sw::after { content:""; position:absolute; top:2px; left:2px; width:var(--knob); height:var(--knob);
  border-radius:999px; background:var(--text-3); transition:transform .16s,background .16s; }
.sw[aria-checked="true"] { background:var(--accent-fill); border-color:var(--accent-fill); }
.sw[aria-checked="true"]::after { transform:translateX(calc(var(--w) - var(--knob) - 6px)); background:var(--on-accent); }
.swlabel { display:flex; align-items:center; gap:8px; min-height:34px; font-size:12.5px; color:var(--text-2); cursor:pointer; }

/* ---------- viewer ---------- */
.viewer { display:flex; align-items:stretch; overflow-x:auto; }
.pane { position:relative; flex:none; }
.pane.src { height:clamp(220px,29vw,340px); aspect-ratio:16/9; }
.pane.out { height:clamp(220px,29vw,340px); }
.pane .frame { position:absolute; inset:0; overflow:hidden; background:#05070B; }
.pane video { position:absolute; display:block; }
.panebar {
  position:absolute; left:0; right:0; top:0; z-index:6; display:flex; align-items:center; gap:7px;
  padding:6px 8px; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:#C9D6E3; background:linear-gradient(180deg,rgba(4,7,11,.86),rgba(4,7,11,0)); pointer-events:none;
}
.panebar .res { margin-left:auto; font-family:"IBM Plex Mono",monospace; letter-spacing:.04em; text-transform:none; color:#9FB1C4; }
.vsep { width:1px; background:var(--line); flex:none; }

.cropbox {
  position:absolute; top:0; bottom:0; z-index:5; cursor:grab;
  border:1.5px solid var(--accent-fill); box-shadow:0 0 0 9999px rgba(4,7,11,.58);
  border-radius:2px; touch-action:none;
}
.cropbox:active { cursor:grabbing; }
.cropbox .hnd { position:absolute; top:50%; width:5px; height:34px; margin-top:-17px; border-radius:3px; background:var(--accent-fill); }
.cropbox .hnd.l { left:-3px; } .cropbox .hnd.r { right:-3px; }
.cropbox .tagline {
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; background:var(--accent-fill); color:#14100A;
  font-weight:600; padding:1px 6px; border-radius:3px; white-space:nowrap;
}
.safe {
  position:absolute; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,77,109,.20) 0 5px,rgba(255,77,109,.05) 5px 10px);
  border:1px dashed rgba(255,77,109,.5);
}
.safe span { position:absolute; bottom:3px; left:4px; font-family:"IBM Plex Mono",monospace; font-size:8.5px; color:#FFC3CD; }

.transport { display:flex; align-items:center; gap:10px; padding:10px 13px; border-top:1px solid var(--line-soft); }
.transport input[type=range] { flex:1; accent-color:var(--accent-fill); }

.contains { display:flex; flex-wrap:wrap; gap:5px; padding:11px 13px; border-top:1px solid var(--line-soft); }
.poi { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-3); white-space:nowrap; }
.poi::before { content:""; width:5px; height:5px; border-radius:99px; background:currentColor; flex:none; }
.poi.in { color:var(--ok); border-color:color-mix(in srgb,var(--ok) 38%,transparent); background:var(--ok-soft); }
.poi.clipped { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.poi.out { color:var(--fail); border-color:color-mix(in srgb,var(--fail) 38%,transparent); background:var(--fail-soft); }

/* ---------- ratio rail ---------- */
.ratios { display:flex; flex-direction:column; }
.ratio {
  display:grid; grid-template-columns:46px minmax(0,1fr); gap:10px; align-items:center;
  padding:10px 13px; border-bottom:1px solid var(--line-soft); cursor:pointer; background:none;
  border-left:2px solid transparent; width:100%; text-align:left; color:inherit; font:inherit;
}
.ratio:hover { background:var(--surface-2); }
.ratio[aria-selected="true"] { background:var(--accent-soft); border-left-color:var(--accent-fill); }
.ratio:last-child { border-bottom:0; }
.thumb { position:relative; overflow:hidden; border-radius:3px; background:#05070B; border:1px solid var(--line); justify-self:center; }
.thumb video { position:absolute; display:block; }
.ratio .info { min-width:0; }
.ratio .info b { font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ratio .info .res { font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--text-3); font-weight:400; }
.ratio .info .sub2 { display:block; font-size:11px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.flag { font-size:9.5px; padding:0 5px; border-radius:3px; font-weight:600; }
.flag.ok { color:var(--ok); background:var(--ok-soft); }
.flag.warn { color:var(--accent); background:var(--accent-soft); }
.flag.bad { color:var(--fail); background:var(--fail-soft); }

/* ---------- hud editor ---------- */
.select{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);
  font:inherit;font-size:12.5px;padding:5px 8px;flex:1;min-width:0}
.select:focus{border-color:var(--accent-line);outline:none}

.hudbox{position:absolute;z-index:8;border:1.5px solid var(--hue,#3DDC97);border-radius:3px;
  background:color-mix(in srgb,var(--hue,#3DDC97) 12%,transparent);touch-action:none}
.hudbox.editing{cursor:move}
.hudbox[aria-selected="true"]{border-width:2px;box-shadow:0 0 0 2px color-mix(in srgb,var(--hue,#3DDC97) 35%,transparent)}
.hudbox b{position:absolute;top:-9px;left:4px;font-family:"IBM Plex Mono",monospace;font-size:8.5px;
  font-weight:600;background:var(--hue,#3DDC97);color:#06120C;padding:0 5px;border-radius:3px;white-space:nowrap;
  line-height:1.5}
.hudbox .g{position:absolute;right:-5px;bottom:-5px;width:10px;height:10px;border-radius:2px;
  background:var(--hue,#3DDC97);cursor:nwse-resize}
.hudbox:not(.editing) .g{display:none}

.hudrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:4px 0;border-bottom:1px solid var(--line-soft)}
.hudrow:last-child{border-bottom:0}
.hudrow .swatch{width:8px;height:8px;border-radius:2px;flex:none;background:var(--hue)}
.hudrow input.hudname{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:4px;
  color:var(--text);font:inherit;font-size:12.5px;padding:2px 5px}
.hudrow input.hudname:hover{border-color:var(--line)}
.hudrow input.hudname:focus{background:var(--surface-2);border-color:var(--accent-line);outline:none}
.mini{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--surface-2);
  color:var(--text-3);border-radius:4px;font:inherit;font-size:10px;padding:0 7px;min-height:24px;
  cursor:pointer;white-space:nowrap}
.mini:hover{color:var(--text)}
.mini[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.mini.danger:hover{color:var(--fail);border-color:color-mix(in srgb,var(--fail) 45%,transparent)}

/* ---------- facecam ---------- */
.camsel{position:absolute;z-index:7;border:1.5px solid var(--live);background:rgba(76,166,255,.16);
  border-radius:3px;cursor:move;touch-action:none}
.camsel span{position:absolute;top:4px;left:5px;font-family:"IBM Plex Mono",monospace;font-size:9px;
  background:var(--live);color:#04101E;font-weight:600;padding:1px 5px;border-radius:3px;white-space:nowrap}
.camsel .h{position:absolute;width:9px;height:9px;background:var(--live);border-radius:2px}
.camsel .h.br{right:-5px;bottom:-5px;cursor:nwse-resize}
#srcFrame.picking{cursor:crosshair}
#srcFrame.picking .cropbox{pointer-events:none;opacity:.45}

.campreview{position:absolute;z-index:6;overflow:hidden;pointer-events:none;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.8)}
.campreview video{position:absolute;display:block}
.campreview.circle{border-radius:50%}
.camrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.camrow .tlabel{min-width:52px}
.camrow .seg{flex:1}
.camrow .seg button{flex:1}
#camSourceSeg button{flex:1}

/* ---------- destinations ---------- */
.group { padding:9px 13px 2px; }
.group h3 { margin:0 0 5px; font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3);
  font-weight:600; display:flex; align-items:center; gap:7px; }
.group h3::after { content:""; flex:1; height:1px; background:var(--line-soft); }
.row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.row:last-child { border-bottom:0; }
.row.off .meta, .row.off .tile { opacity:.45; }
.tile { width:28px; height:28px; border-radius:7px; display:grid; place-items:center; font-family:Archivo,sans-serif;
  font-weight:700; font-size:10.5px; background:var(--brand); color:var(--brand-ink); border:1px solid rgba(255,255,255,.10); }
.meta { min-width:0; }
.meta b { display:block; font-size:12.5px; font-weight:600; }
.meta .sub2 { display:block; font-size:11px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blocked { font-size:11px; color:var(--text-3); }

.stat { display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:104px; }
.stat .lbl { font-size:11px; color:var(--text-3); font-family:"IBM Plex Mono",monospace; }
.progress { width:96px; height:3px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.progress i { display:block; height:100%; width:0%; background:var(--live); transition:width .35s linear; }
.row.done .progress i { background:var(--ok); }
.row.failed .progress i { background:var(--fail); }
.retry { border:1px solid color-mix(in srgb,var(--fail) 45%,transparent); background:var(--fail-soft); color:var(--fail);
  border-radius:var(--r-sm); font:inherit; font-size:11px; font-weight:600; padding:3px 9px; cursor:pointer; }
.postlink { font-size:11px; color:var(--ok); text-decoration:none; }
.errline { grid-column:2/-1; margin-top:2px; font-size:11.5px; color:var(--fail); }

/* A single-column grid's implicit track is `auto`, which is floored at its
   items' min-content width — so one unshrinkable child silently stretches the
   whole column past its card. Every stack in this UI wants minmax(0,1fr). */
.stack { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.stack[hidden] { display:none; }

/* ---------- misc ---------- */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; line-height:1.6; padding:1px 7px; border-radius:999px;
  border:1px solid var(--line); color:var(--text-3); background:var(--surface-2); white-space:nowrap; }
.chip.ok { color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent); background:var(--ok-soft); }
.chip.warn { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.chip.bad { color:var(--fail); border-color:color-mix(in srgb,var(--fail) 40%,transparent); background:var(--fail-soft); }

.caption { width:100%; min-height:92px; resize:vertical; background:var(--surface-2); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; font:inherit; font-size:13.5px; line-height:1.55; }
.caption:focus { border-color:var(--accent-line); }

.ghost { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-2); border-radius:var(--r-sm);
  font:inherit; font-size:12px; padding:0 12px; min-height:32px; cursor:pointer; }
.ghost:hover { color:var(--text); border-color:var(--text-3); }
.fire { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:var(--r-sm);
  cursor:pointer; background:var(--accent-fill); color:var(--on-accent); font-family:Archivo,sans-serif;
  font-weight:700; font-size:13px; padding:0 18px; min-height:40px; }
.fire:hover { filter:brightness(1.06); }
.fire:disabled { opacity:.5; cursor:not-allowed; filter:none; }
.linkbtn { display:inline-flex; align-items:center; background:none; border:0; color:var(--accent);
  font:inherit; font-size:11.5px; cursor:pointer; padding:0 4px; min-height:32px; margin:-6px 0; }
.linkbtn:hover { text-decoration:underline; }

pre.cmd { margin:0; padding:11px 13px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; line-height:1.6; color:var(--text-2);
  overflow-x:auto; white-space:pre; }

.note { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:var(--r); padding:10px 12px; margin-bottom:14px; }
.note p { margin:0; font-size:12.5px; color:var(--text-2); line-height:1.55; }
.note b { color:var(--text); font-weight:600; }

.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12.5px; min-width:720px; }
th { text-align:left; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  font-weight:600; padding:9px 13px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:10px 13px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
tr:last-child td { border-bottom:0; }

/* ---------- collapsible cards ---------- */
/* Every card is open on a desktop. On a phone the studio is one long column,
   so the sections a person is not editing right now start folded — the chevron
   in the card header opens them. */
.cardtoggle { display:none; }
.card.collapsed > *:not(header) { display:none !important; }

@media (max-width:1180px) {
  .studio { grid-template-columns:minmax(0,1fr); }
  .ratios { flex-direction:row; overflow-x:auto; }
  .ratio { border-bottom:0; border-right:1px solid var(--line-soft); border-left:0; border-top:2px solid transparent; min-width:210px; }
  .ratio[aria-selected="true"] { border-left-color:transparent; border-top-color:var(--accent-fill); }
}

/* ---------- phones and small tablets ---------- */
@media (max-width:900px) {
  .topbar { gap:10px; padding:0 12px; height:52px; }
  .topbar > .menubtn { display:grid; }

  .barnav {
    display:none; position:absolute; top:calc(100% + 6px); right:8px; left:8px;
    flex-direction:column; align-items:stretch; gap:6px; padding:8px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:0 20px 44px -18px rgba(0,0,0,.75);
  }
  .barnav.open { display:flex; }
  .barnav .grow { display:none; }
  .barnav .ghost, .barnav .iconbtn {
    width:auto; height:auto; min-height:42px; justify-content:flex-start;
    display:flex; align-items:center; gap:10px; padding:0 12px; font-size:14px;
    border-color:transparent; background:var(--surface-2); color:var(--text);
  }
  .barnav .chip { align-self:flex-start; margin:2px 4px; }
  .barnav .mlabel { display:inline; }

  .cardtoggle {
    display:grid; place-items:center; width:34px; height:34px; margin:-7px -6px -7px auto;
    border:0; background:none; color:var(--text-3); cursor:pointer; flex:none;
  }
  .cardtoggle svg { transition:transform .16s; }
  .card.collapsed .cardtoggle svg { transform:rotate(-90deg); }
  .card[data-collapsible] > header { cursor:pointer; }

  h1 { font-size:19px; }
  /* The toolbar is a label, a four-way segment, a switch and a button. Side by
     side that squeezes "Off" to 27px, so each group takes its own row. */
  .toolbar { gap:10px; }
  .toolbar > * { width:100%; }
  .toolbar .grow { display:none; }
  .toolbar .seg { flex:1; }
  .toolbar .seg button { flex:1; padding:0 4px; min-height:36px; }
  .toolbar .ghost { width:100%; min-height:38px; }
  .sw { --w:44px; --h:26px; --knob:20px; }
  .card > header { padding:10px 12px; }
  .card .pad { padding:12px; }
  .mini { min-height:28px; font-size:11px; }
}

@media (max-width:760px) {
  main { padding:12px; }
  .viewer { flex-direction:column; }
  .vsep { width:auto; height:1px; }
  .pane.src { width:100%; height:auto; aspect-ratio:16/9; }
  /* Height-driven panes blow past a phone's width: at 50vh a 16:9 pane is
     750px wide on a 390px screen. Drive off width and let the inline
     aspect-ratio pick the height — a max-height here would fight that ratio
     and distort the preview, so there deliberately isn't one. */
  .pane.out { width:100%; height:auto; align-self:stretch; }
  .drop { padding:34px 16px; }
  .transport, .contains, .toolbar { padding:10px 12px; }
  .ratio { min-width:180px; }
  .stat { min-width:0; }
  .progress { width:64px; }
}

/* ---- subtitles ------------------------------------------------------- */
/* The word list is the editable transcript. It scrolls rather than growing,
   because a 30-second clip is ~90 words and the card sits in a sidebar. */
.subwords{display:flex;flex-wrap:wrap;gap:4px;max-height:190px;overflow-y:auto;
  padding:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.subword{font:600 11.5px/1.35 "IBM Plex Mono",monospace;padding:2px 5px;border-radius:4px;
  background:var(--surface-3);color:var(--text-2);border:1px solid transparent;cursor:text;white-space:nowrap}
.subword:hover{border-color:var(--accent-line);color:var(--text)}
/* Amber, not red: low confidence is "read this", not "this is wrong". */
.subword.low{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.subword.edited{border-color:var(--ok);color:var(--ok)}
.subword[contenteditable="true"]{outline:1px solid var(--accent-fill);background:var(--surface)}
.subwords:empty::after{content:"No transcript yet.";font-size:11.5px;color:var(--text-3)}

/* ---- widgets --------------------------------------------------------- */
.widgetrow{display:grid;gap:7px;padding:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.widgetrow.off{opacity:.5}
.widgetrow .top{display:flex;align-items:center;gap:7px}
.widgetrow .dot{width:9px;height:9px;border-radius:50%;flex:none}
.widgetrow .nm{font-size:12px;font-weight:600;color:var(--text);flex:1}
.widgetrow .seg button{padding:3px 6px;font-size:10px}