@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 600;
  font-display:block;
  src:url("/static/fonts/archivo-400-600.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:"Barlow";
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url("/static/fonts/barlow-400.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:"Barlow";
  font-style:normal;
  font-weight:500;
  font-display:block;
  src:url("/static/fonts/barlow-500.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:"Barlow";
  font-style:normal;
  font-weight:600;
  font-display:block;
  src:url("/static/fonts/barlow-600.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:"Cinzel";
  font-style:normal;
  font-weight:700;
  font-display:block;
  src:url("/static/fonts/cinzel-700.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:block;
  src:url("/static/fonts/ibm-plex-mono-400.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:500;
  font-display:block;
  src:url("/static/fonts/ibm-plex-mono-500.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;
}
:root{
  /* Person text contrast on --paper (WCAG): 1: 4.60:1, 2: 5.73:1, 3: 4.75:1, 4: 5.53:1, 5: 5.97:1, 6: 4.58:1, 7: 5.40:1, 8: 4.61:1, 9: 6.76:1, 10: 6.06:1, 11: 5.16:1, 12: 6.48:1.
     Orange, blue, green, crimson, purple, cyan, magenta, gold, indigo,
     brown, pink, slate. Task 12.3b's distinct, elegant palette; every token
     clears 4.5:1, and the slot order already spreads the hues. */
  --person-1:#BE3F0A;
  --person-2:#1D4ED8;
  --person-3:#14783A;
  --person-4:#B91C1C;
  --person-5:#7E22CE;
  --person-6:#0E7490;
  --person-7:#A21CAF;
  --person-8:#856600;
  --person-9:#4338CA;
  --person-10:#92400E;
  --person-11:#BE185D;
  --person-12:#475569;

  --paper:#F0EDE5; --key:#F7F5EF; --rail:#E5E1D6;
  --ink:#1B1A17; --dim:#8A8A87; --dim-2:#6E675C;
  --rule:#D9D5CC; --rule-2:#C6C1B4; --rule-3:#A9A399;
  --go:var(--green);
  --red:#C13520; --red-2:#8E2418; --gold:#B8862B; --gold-dim:#8C7A55; --green:#3E6B4C;
  --key-2:#FBF9F4; --gold-pale:#E8DFC8; --ink-2:#2A2925;
  --frame:#1B1A17; --frame-2:#2B2822; --frame-3:#38342B; --frame-h:#221F1A;
  /* TEST CHANNEL warning (2026-09-16). Hot magenta: 4.77:1 against --ink, so
     the black uppercase words clear AA, and nothing else on the light theme is
     anywhere near this hue. */
  --test-hot:#FF00A0;
  --ui:"Archivo",system-ui,"Helvetica Neue",sans-serif;
  --num:"Barlow","Archivo",system-ui,sans-serif;
  --display:"Cinzel",serif;
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
.in{font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.2;}
a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(193,53,32,.4);}
a:hover{color:var(--red-2);border-bottom-color:var(--red-2);}

/* section header: sentence-case label, ink rule */
.sh{display:flex;align-items:center;gap:12px;height:16px;}
.sh .t{font-size:13px;font-weight:600;color:var(--ink);line-height:1;white-space:nowrap;}
.sh .ln{flex:1;height:1px;background:var(--rule-3);}
.sh .r{font-size:12px;color:var(--dim-2);line-height:1;white-space:nowrap;}
.lab{font-size:12px;color:var(--dim);line-height:1;margin-bottom:8px;}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1;font-weight:500;}
.nm{font-size:14px;font-weight:500;line-height:1.2;}
.tele{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:12px;color:var(--dim-2);line-height:1;}
.k{font-family:var(--ui);font-size:13px;font-weight:500;color:var(--ink);background:var(--key);border:1px solid var(--ink);border-radius:2px;height:32px;padding:0 12px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;transition:background-color 120ms ease-out,color 120ms ease-out;}
.k.big{height:44px;font-size:14px;font-weight:600;padding:0 20px;}
.k.ink{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.k.red{background:var(--red);border-color:var(--red);color:var(--key);}
.k.off{border-color:var(--rule-2);color:#A8A399;background:transparent;}
.k.q{border-color:var(--rule-2);color:var(--dim-2);}
/* key states (Task 10.1): every `.k` — button or anchor — is a live control, so
   it points, fills on hover, presses on active and shows a ring on keyboard
   focus. An off or disabled key is not a control: it keeps its face. */
.k:hover{background:var(--ink);color:var(--paper);}
.k:active{transform:translateY(1px);}
.k:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.k.ink:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--paper);}
.k.red:hover{background:var(--red-2);border-color:var(--red-2);color:var(--key);}
.k.off:hover{background:transparent;color:#A8A399;}
.k.off:active,.k[disabled]:active{transform:none;}
.k[disabled]:hover{background:var(--key);color:var(--ink);}
.k.ink[disabled]:hover{background:var(--ink);color:var(--paper);}
.k.red[disabled]:hover{background:var(--red);color:var(--key);}
.txt{font-size:13px;color:var(--dim-2);border-bottom:1px solid var(--rule-2);line-height:1.1;padding-bottom:1px;white-space:nowrap;}
button.txt{background:none;border-width:0 0 1px;padding:0 0 1px;margin:0;font:inherit;font-size:13px;cursor:pointer;}
button.k{cursor:pointer;}
.seg{display:flex;border:1px solid var(--rule-2);border-radius:2px;height:24px;overflow:hidden;}
.seg span,.seg button{display:flex;align-items:center;padding:0 10px;font-size:13px;font-weight:500;color:var(--dim-2);}
.seg button{background:none;border:0;margin:0;height:100%;font:inherit;font-size:13px;cursor:pointer;}
.seg span.on,.seg button.on{background:var(--ink);color:var(--paper);}
.lamp{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block;}
.lamp.on{background:var(--red);}
.lamp.ok{background:var(--green);}
.lamp.st{background:var(--gold);}
.state{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1;}
.state.on{color:var(--red);font-weight:600;}
.state.st{color:var(--gold);font-weight:600;}
.state.ok{color:var(--green);}
.frame{background:var(--frame);position:relative;overflow:hidden;flex:0 0 auto;}
.rail-i{width:60px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--dim);position:relative;}
.rail-i.on{color:var(--ink);background:var(--paper);}
.vr{width:1px;align-self:stretch;background:var(--rule);}
.row{display:flex;align-items:center;gap:16px;height:62px;border-bottom:1px solid var(--rule);padding-left:12px;}
.row.air{border-left:3px solid var(--red);padding-left:9px;}
.row.up{border-left:3px solid var(--gold);padding-left:9px;}
.row .pic{width:104px;height:58px;flex:0 0 104px;}
.row .pic svg{width:104px;height:58px;display:block;}
.row .c1{width:216px;flex:0 0 216px;}
.row .c2{width:200px;flex:0 0 200px;}
.row .c3{margin-left:auto;display:flex;align-items:center;gap:16px;}
.row .c3 .k{width:120px;}
.mark{display:flex;align-items:center;gap:8px;height:12px;}
.mark .sq{width:9px;height:9px;border:1px solid var(--ink);background:var(--paper);flex:0 0 9px;}
.mark .w{font-size:14px;font-weight:500;line-height:1;}
.cap{font-size:12px;color:var(--dim-2);margin-top:8px;line-height:1;white-space:nowrap;}
.meter{height:4px;background:var(--rule);position:relative;width:96px;}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--green);}
.meter b{position:absolute;top:-3px;width:1px;height:10px;background:var(--ink);}
.chat{font-size:12px;line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;}
.chat b{font-weight:600;color:var(--dim-2);margin-right:4px;}
.show{display:flex;align-items:center;gap:16px;height:56px;border-bottom:1px solid var(--rule);}
.show .d{width:64px;flex:0 0 64px;}
.show .d b{display:block;font-family:var(--num);font-size:16px;font-weight:600;line-height:1;}
.show .d span{display:block;font-size:12px;color:var(--dim-2);margin-top:5px;line-height:1;}
.show .n{flex:1;min-width:0;}
.show .n b{display:block;font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.show .n span{display:block;font-size:12px;color:var(--dim-2);margin-top:5px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.show .t{font-family:var(--num);font-size:14px;font-weight:500;white-space:nowrap;}
.wk{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:0;grid-template-rows:auto 1fr;align-content:start;}
.wk .dh{height:40px;border-bottom:1px solid var(--rule-3);display:flex;flex-direction:column;justify-content:center;padding-left:8px;}
.wk .dh b{font-size:13px;font-weight:600;line-height:1;}
.wk .dh span{font-family:var(--num);font-size:12px;color:var(--dim-2);margin-top:5px;line-height:1;}
.wk .dh.today b{color:var(--red);}
.wk .col{border-left:1px solid var(--rule);padding:8px 8px 0 8px;display:flex;flex-direction:column;gap:8px;min-height:0;justify-content:flex-start;align-self:stretch;}
.wk .col.first{border-left:0;}
.blk{border:1px solid var(--rule-2);border-radius:2px;padding:8px;background:var(--key);position:relative;}
.blk.me{border-color:var(--gold);border-left-width:3px;}
.blk.gap{border-style:dashed;border-color:var(--red);background:transparent;}
.blk .tm{font-family:var(--num);font-size:12px;font-weight:600;line-height:1;}
.blk .nm{font-size:13px;font-weight:500;line-height:1.2;margin-top:5px;}
.blk .who{font-size:11px;color:var(--dim-2);line-height:1.2;margin-top:5px;}
.blk.gap .who{color:var(--red);}
.att{display:flex;align-items:center;gap:12px;height:36px;border-bottom:1px solid var(--rule);font-size:14px;}
.att .w{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.big{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:32px;font-weight:500;line-height:1;}
.blk.sel{outline:2px solid var(--ink);outline-offset:1px;background:var(--key-2);}
.blk .ch{position:absolute;right:8px;top:8px;font-size:11px;line-height:1;}
.blk .ch.ok{color:var(--green);}
.blk .ch.no{color:var(--dim);}
.blk .ch.warn{color:var(--gold);font-weight:600;}
.blk .ch.gap{color:var(--red);font-weight:600;}
.pp{display:flex;align-items:center;gap:12px;height:44px;border-bottom:1px solid var(--rule);}
.pp .av{width:28px;height:28px;border:1px solid var(--ink);border-radius:2px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 28px;}
.pp .nm{flex:1;min-width:0;font-size:14px;font-weight:500;}
.pp .rl{font-size:12px;color:var(--dim-2);}
.mrow{display:flex;align-items:center;gap:12px;height:40px;border-bottom:1px solid var(--rule);font-size:14px;}
.mrow .w{flex:1;}
.sc{display:flex;align-items:center;gap:12px;height:50px;border-bottom:1px solid var(--rule);padding-left:12px;}
.sc.sel{border-left:3px solid var(--gold);padding-left:9px;}
.sc img{width:80px;height:45px;display:block;object-fit:cover;background:var(--ink);flex:0 0 80px;}
.sc .n{font-size:14px;font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ly{display:flex;align-items:center;gap:16px;height:44px;border-bottom:1px solid var(--rule);}
.ly .n{width:200px;flex:0 0 200px;font-size:14px;font-weight:500;}
.ly .f{flex:1;min-width:0;font-family:var(--num);font-size:12px;color:var(--dim-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ly .a{display:flex;align-items:center;gap:16px;}
.ly .k{width:104px;}
.hole{position:absolute;border:1px solid var(--red);background:rgba(193,53,32,.06);}
.hole span{position:absolute;left:6px;top:4px;font-family:var(--num);font-size:11px;font-weight:600;color:var(--red);white-space:nowrap;}
.set{display:flex;justify-content:space-between;align-items:center;height:28px;border-bottom:1px solid var(--rule);font-size:14px;}
.set .v{font-family:var(--num);font-weight:500;}
.ly .i.bx{width:18px;height:18px;flex:0 0 18px;border:1px solid var(--ink);border-radius:2px;display:inline-flex;align-items:center;justify-content:center;}
.ly .i.bx.on::after{content:"";width:10px;height:10px;background:var(--ink);}
.sc .m.state{font-size:12px;}
.tabs{display:flex;align-items:flex-end;gap:32px;height:40px;border-bottom:1px solid var(--rule-3);}
.tab{font-size:14px;font-weight:500;color:var(--dim-2);padding-bottom:12px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--gold);}
.tab.off{color:var(--dim);}
.tab .c{font-family:var(--num);font-size:12px;color:var(--dim);margin-left:6px;font-weight:500;}
/* Tabs are real buttons (keyboard-operable), so they need the same reset the
   segmented controls got: a UA button border/background would box every tab. */
button.tab{background:none;border-width:0 0 2px;border-style:solid;border-color:transparent;padding:0 0 12px;margin:0 0 -1px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;}
button.tab.on{border-bottom-color:var(--gold);}
button.tab[disabled]{cursor:default;opacity:.55;}
.as{display:flex;align-items:center;gap:12px;height:52px;border-bottom:1px solid var(--rule);padding-left:12px;}
.as.sel{border-left:3px solid var(--gold);padding-left:9px;}
.as img,.as .ph{width:64px;height:36px;flex:0 0 64px;display:block;object-fit:cover;background:var(--ink);}
.as .ph{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:7px;letter-spacing:.12em;color:var(--gold-dim);}
.as .n{font-size:14px;font-weight:500;line-height:1.2;}
.as .s{font-size:12px;line-height:1;margin-top:5px;}
.fld{display:flex;flex-direction:column;gap:6px;}
.fld .l{font-size:12px;color:var(--dim);line-height:1;}
.fld .v{font-size:14px;line-height:1.2;border-bottom:1px solid var(--rule-2);padding-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fld .v.ed{border-bottom-color:var(--gold);}
.sw{display:flex;flex-direction:column;align-items:center;gap:6px;}
.sw img{width:52px;height:29px;display:block;object-fit:cover;background:var(--ink);border:2px solid transparent;}
.sw.on img{border-color:var(--gold);}
.sw span{font-size:11px;color:var(--dim-2);line-height:1;}
.sw.on span{color:var(--ink);font-weight:600;}
/* toggle (Task 10.1): ONE rule set for both markup shapes — a `label.tog` whose
   switch is a real checkbox, and a `button.tog` whose `i` carries `class="off"`.
   36x20 track, 14x14 knob sliding on a 120ms `left`. ON = ink track, paper knob
   right. OFF = key-face track, 1px ink border, ink knob left. Never grey-on-grey,
   and nothing else in this sheet may restate these declarations. */
.tog{display:inline-flex;align-items:center;gap:8px;font-size:13px;}
.tog i{width:36px;height:20px;flex:0 0 36px;border:1px solid var(--ink);border-radius:2px;position:relative;display:inline-block;background:var(--ink);}
.tog i::after{content:"";position:absolute;top:2px;left:18px;width:14px;height:14px;background:var(--paper);transition:left 120ms ease-out;}
.tog i.off{background:var(--key);border-color:var(--ink);}
.tog i.off::after{background:transparent;border:1px solid var(--ink);box-sizing:border-box;left:2px;}
label.tog{cursor:pointer;position:relative;}
.tog input[type="checkbox"]{position:absolute;z-index:1;left:0;top:50%;transform:translateY(-50%);width:36px;height:20px;opacity:0;margin:0;cursor:pointer;}
.tog input:checked+i{background:var(--ink);border-color:var(--ink);}
.tog input:checked+i::after{background:var(--paper);left:18px;}
.tog input:not(:checked)+i{background:var(--key);border-color:var(--ink);}
.tog input:not(:checked)+i::after{background:transparent;border:1px solid var(--ink);box-sizing:border-box;left:2px;}
.tog input:focus-visible+i{outline:2px solid var(--ink);outline-offset:2px;}
button.tog{background:none;border:0;padding:0;margin:0;font:inherit;font-size:13px;color:inherit;cursor:pointer;}
button.tog:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.hist{display:flex;align-items:center;gap:12px;height:26px;font-size:12px;}
.hist .tm{font-family:var(--num);color:var(--dim-2);width:40px;flex:0 0 40px;}
.hist .w{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hist .who{color:var(--dim-2);}
.lay{display:flex;flex-direction:column;align-items:center;gap:6px;}
.lay svg{display:block;}
.lay span{font-size:11px;color:var(--dim-2);line-height:1;}
.lay.on span{color:var(--ink);font-weight:600;}
.mod{display:flex;flex-direction:column;}
.mod .hd{display:flex;align-items:center;gap:12px;height:16px;}
.mod .hd .t{font-size:13px;font-weight:600;line-height:1;white-space:nowrap;}
.mod .hd .ln{flex:1;height:1px;background:var(--rule-3);}
.fld .v.q{color:var(--dim-2);}
.acts{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:12px;}
.acts .k{height:36px;}
.plate-tag{position:absolute;border:1px solid var(--gold-pale);color:var(--gold-pale);font-family:var(--num);font-size:10px;font-weight:600;letter-spacing:.04em;padding:3px 5px;line-height:1;background:rgba(27,26,23,.35);}
.plate-tag.dim{border-style:dashed;border-color:var(--dim-2);color:var(--dim);background:transparent;}
.mx{display:grid;grid-template-columns:260px repeat(5, minmax(0, 1fr));align-items:center;}
.mx > div{height:34px;display:flex;align-items:center;border-bottom:1px solid var(--rule);}
.mx .h{height:32px;font-size:12px;color:var(--dim-2);border-bottom:1px solid var(--rule-3);justify-content:center;}
.mx .h.first{justify-content:flex-start;}
.mx .a{font-size:14px;font-weight:500;padding-left:12px;}
.mx .a small{font-size:12px;color:var(--dim);font-weight:400;margin-left:8px;}
.mx .g{font-size:12px;color:var(--dim);height:26px;padding-left:12px;border-bottom:1px solid var(--rule);grid-column:1 / -1;}
.cell{justify-content:center;}
.bx{width:18px;height:18px;border:1px solid var(--ink);border-radius:2px;display:inline-flex;align-items:center;justify-content:center;}
.bx.on::after{content:"";width:10px;height:10px;background:var(--ink);}
.bx.na{border-color:var(--rule);}
.bx.na::after{content:"";width:8px;height:1px;background:var(--rule-2);}
.tr{display:grid;grid-template-columns:96px 1fr 1fr 80px 120px 120px 32px;align-items:center;height:48px;border-bottom:1px solid var(--rule);font-size:14px;}
.tr.h{height:32px;font-size:12px;color:var(--dim-2);border-bottom:1px solid var(--rule-3);}
.tr.sel{outline:2px solid var(--ink);outline-offset:-2px;background:var(--key-2);}
.tr > *{padding-right:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tr .d{font-family:var(--num);font-weight:500;}
.tr .n{font-weight:500;font-size:14px;}
.tr .sub{font-size:12px;color:var(--dim-2);margin-top:4px;}
.bar{height:6px;background:var(--rule);position:relative;}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);}
.bar b{position:absolute;top:-4px;width:1px;height:14px;background:var(--red);}
.rt{display:grid;grid-template-columns:1fr 72px 96px 96px 96px;align-items:center;height:44px;border-bottom:1px solid var(--rule);font-size:14px;}
.rt.h{height:32px;font-size:12px;color:var(--dim-2);border-bottom:1px solid var(--rule-3);}
.rt .v{font-family:var(--num);text-align:right;padding-right:8px;}
.rt .e{border-bottom:1px solid var(--rule-2);}
.ur{display:grid;grid-template-columns:1fr 1fr 96px 1fr 96px;align-items:center;height:48px;border-bottom:1px solid var(--rule);font-size:14px;}
.ur.h{height:32px;font-size:12px;color:var(--dim-2);border-bottom:1px solid var(--rule-3);}
.ur.sel{outline:2px solid var(--ink);outline-offset:-2px;background:var(--key-2);}
.ur .n{font-weight:500;font-size:14px;}
.src{display:flex;align-items:center;gap:12px;height:44px;border-bottom:1px solid var(--rule);padding-left:12px;}
.src.sel{border-left:3px solid var(--gold);padding-left:9px;background:var(--key-2);}
.src .n{flex:1;min-width:0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.src .t{font-family:var(--num);font-size:12px;color:var(--dim-2);}
.ll{display:flex;gap:16px;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ll .ts{color:var(--dim-2);flex:0 0 150px;}
.ll .lv{flex:0 0 56px;font-weight:600;}
.ll .lv.i{color:var(--dim-2);}
.ll .lv.w{color:var(--gold);}
.ll .lv.e{color:var(--red);}
.ll .m{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.ll.hl{background:#FBF3E3;}
.iv{display:grid;grid-template-columns:96px 1fr 160px 72px 88px 96px;align-items:center;height:44px;border-bottom:1px solid var(--rule);font-size:14px;gap:12px;}
.iv.h{height:32px;font-size:12px;color:var(--dim-2);border-bottom:1px solid var(--rule-3);}
.iv > *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mo{display:grid;grid-template-columns:1fr auto 80px;align-items:center;gap:12px;height:44px;border-bottom:1px solid var(--rule);font-size:14px;}
.mo .n{font-weight:500;font-size:14px;}
.mo .num{text-align:right;}
.mo.sel{outline:2px solid var(--ink);outline-offset:-2px;background:var(--key-2);padding:0 8px;}

/* shell (Task 0.3 / 10.1): the rail keeps a 60px slot in the layout and the nav
   itself is absolutely positioned inside it, so expanding OVERLAYS the page
   instead of reflowing it — nothing on the page moves when the rail opens. */
#rail-slot{width:60px;flex:0 0 60px;position:relative;}
#rail{position:absolute;left:0;top:0;bottom:0;width:60px;z-index:40;overflow:hidden;transition:width 160ms ease-out;}
/* Open, the rail is a panel lying ON the page: the same 1px edge plus a soft
   shadow — the ONE shadow in the sheet, and the reason the §2.5 ban carries an
   explicit exception (Task 10.2 §6). Depth here is information, not decoration. */
#rail.open{width:200px;box-shadow:8px 0 24px rgba(0,0,0,.08);}
.rail-brand{width:60px;height:56px;flex:0 0 56px;position:relative;}
.rail-brand img{position:absolute;display:block;width:auto;transition:opacity 160ms ease-out;}
.rail-logo-a{height:30px;top:13px;left:30px;transform:translateX(-50%);opacity:1;}
.rail-wordmark{height:24px;top:16px;left:100px;transform:translateX(-50%);opacity:0;}
#rail.open .rail-brand{width:200px;}
#rail.open .rail-logo-a{opacity:0;}
#rail.open .rail-wordmark{opacity:1;}
.rail-rule{height:1px;flex:0 0 1px;background:var(--rule);}
.rail-key-row{height:44px;flex:0 0 44px;}
#rail-toggle{position:relative;width:60px;height:44px;flex:0 0 44px;}
#rail.open #rail-toggle{width:200px;justify-content:flex-start;padding-left:20px!important;}
#rail-toggle path{transform-origin:10px 10px;transition:transform 160ms ease-out,opacity 160ms ease-out;}
#rail.open .rail-bar-top{transform:rotate(45deg) translateY(4px);}
#rail.open .rail-bar-middle{opacity:0;}
#rail.open .rail-bar-bottom{transform:rotate(-45deg) translateY(-4px);}
.rail-links{padding-top:8px;min-height:0;overflow:hidden;flex:0 1 auto;}
.rail-footer,.rail-footer:hover{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:45px;flex:0 0 45px;margin-top:auto;border-top:1px solid var(--rule);border-bottom:0;color:var(--dim);}
.rail-footer img{display:block;width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1px solid var(--rule);}
.rail-footer .rail-l{font-size:12px;font-weight:400;color:var(--dim);}
#rail.open .rail-footer{width:200px;justify-content:flex-start;padding-left:20px;}
/* The scrim behind it: a fixed tint under the rail and over the page, fading
   with the rail and inert (and click-through) while the rail is shut. */
#rail-scrim{position:fixed;left:0;top:0;right:0;bottom:0;z-index:39;background:rgba(30,27,22,.18);opacity:0;pointer-events:none;transition:opacity 160ms ease-out;}
#rail.open ~ #rail-scrim{opacity:1;pointer-events:auto;cursor:pointer;}
a.rail-i,a.rail-i:hover{border-bottom:0;}
.rail-i:hover{color:var(--ink);}
.rail-i.on,.rail-i.on:hover{color:var(--ink);background:var(--paper);}
.rail-i.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);}
/* the label is out of flow so the collapsed rail centres its icon exactly as
   before; it fades rather than popping, and never goes display:none. */
.rail-l{position:absolute;left:50px;font-size:13px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 80ms ease-out 60ms;}
/* Item icons keep their position while the absolute menu key travels up. */
#rail.open .rail-i:not(#rail-toggle){width:200px;justify-content:flex-start;padding-left:20px;}
#rail.open .rail-l{opacity:1;}
/* Section bands (Task 10.2 §4): one height in both states — the header shows
   when the rail is open, the divider when it is collapsed. */
.rail-g{height:28px;position:relative;flex:0 0 28px;}
.rail-h{position:absolute;left:20px;top:12px;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dim-2);white-space:nowrap;opacity:0;transition:opacity 80ms ease-out 60ms;}
.rail-r{position:absolute;left:14px;right:14px;top:13px;height:1px;background:var(--rule);opacity:1;transition:opacity 80ms ease-out;}
#rail.open .rail-h{opacity:1;}
#rail.open .rail-r{opacity:0;}
.acct-menu{display:flex;flex-direction:column;gap:12px;}

/* login (Task 5.3): the board's fields and toggle as real controls */
#login .fld .v{font-size:15px;padding-bottom:8px;}
#login input.v{font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-2);width:100%;padding:0 0 8px;margin:0;-webkit-appearance:none;appearance:none;}
#login input.v:focus{outline:none;border-bottom-color:var(--ink);}
#login button.k{cursor:pointer;font-family:var(--ui);}
#login button.k[disabled]{cursor:default;opacity:.55;}
button.k[disabled],button.txt[disabled]{cursor:default;opacity:.55;}

/* account menu (Task 5.2): "Edit my details" turns the three facts into the
   same fields inline (spec §3.2) — the login page's field treatment, at the
   menu's 13px. */
.acct-menu .fld .l{font-size:12px;}
.acct-menu input.v{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-2);width:100%;padding:0 0 6px;margin:0;-webkit-appearance:none;appearance:none;}
.acct-menu input.v:focus{outline:none;border-bottom-color:var(--ink);}
.acct-menu button.k{cursor:pointer;font-family:var(--ui);}

/* logs (Task 7.4): the board's toggle and filter as real controls; the tail
   scrolls inside its own pane, never the page. */
#logs input.v{font:inherit;font-size:13px;color:var(--dim-2);background:transparent;border:0;border-bottom:1px solid var(--rule-2);width:100%;padding:0 0 4px;margin:0;-webkit-appearance:none;appearance:none;}
#logs input.v::placeholder{color:var(--dim-2);opacity:1;}
#logs input.v:focus{outline:none;color:var(--ink);border-bottom-color:var(--ink);}
#logs input.v::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
#logs .src{cursor:pointer;}
#logs .src:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
#log-lines{overscroll-behavior:contain;}

/* Components rendered as links (Invoices' Mine | Everyone and its month rows).
   The base `a` rule paints red text and a red underline; a control that happens
   to be an anchor has to look like the control, not like a link. Kept beside the
   components rather than under a page id because any page may render either as a
   link — .k needs no such rule, its own `border` and `color` already win. */
.seg a{display:flex;align-items:center;padding:0 10px;font-size:13px;font-weight:500;color:var(--dim-2);border-bottom:0;}
.seg a.on,.seg a.on:hover{background:var(--ink);color:var(--paper);}
.seg a:hover{color:var(--ink);}
a.mo,a.mo:hover{color:var(--ink);border-bottom:1px solid var(--rule);}
/* keys rendered as links: the base `a` rule paints red text and a red underline,
   so the key face has to be restated at anchor specificity — including on hover,
   where `.k:hover` fills but `a:hover` would still recolour the border. */
a.k{color:var(--ink);border-color:var(--ink);border-bottom-width:1px;}
a.k:hover{color:var(--paper);background:var(--ink);border-color:var(--ink);}
a.k.ink{color:var(--paper);}
a.k.ink:hover{color:var(--paper);background:var(--ink-2);border-color:var(--ink-2);}
a.k.red{color:var(--key);}
a.k.red:hover{color:var(--key);background:var(--red-2);border-color:var(--red-2);}
a.k.off,a.k.off:hover{color:#A8A399;background:transparent;border-color:var(--rule-2);}

/* invoices (Task 7.1): a held line is money waiting on a confirmation — the
   held/error tint. A needs-review line that is NOT money carries no tint. */
.iv.held{background:#FBF3E3;}
/* schedule (Task 6.1): the board's week blocks, "more" rows and panel fields as
   real controls — a UA button/input would box or recolour every one of them. */
button.blk{font:inherit;color:inherit;text-align:left;width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:64px;padding-top:8px;flex-shrink:0;cursor:pointer;}
button.blk > *{flex-shrink:0;}
.blk .tm,.blk .nm,.blk .who{display:block;}
button.mrow{background:none;border-width:0 0 1px;border-style:solid;border-color:var(--rule);font:inherit;font-size:14px;color:inherit;padding:0;margin:0;text-align:left;cursor:pointer;}
input.v,textarea.v,select.v{font:inherit;font-size:14px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-2);width:100%;padding:0 0 6px;margin:0;-webkit-appearance:none;appearance:none;}
input.v:focus,textarea.v:focus,select.v:focus{outline:none;border-bottom-color:var(--ink);}
textarea.v{white-space:pre-wrap;resize:vertical;line-height:1.35;}
.fld > .l{font-size:12px;color:var(--dim);line-height:1;}
#panel .seg{height:20px;}
#panel .seg button{padding:0 8px;font-size:11px;}

/* budget (Task 7.2): the projection and extra-pay rows the board draws with
   inline grids, and the rates table's editable cells. A rate cell is a real
   input, so it needs the number face and the right alignment `.rt .v` gives a
   printed value — and a gold underline while it is edited (spec §2.3). */
.pr{display:grid;grid-template-columns:120px 1fr 200px;align-items:center;gap:16px;height:36px;border-bottom:1px solid var(--rule);font-size:14px;}
.pr > *{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xp{display:grid;grid-template-columns:96px 1fr 1fr 96px;align-items:center;gap:12px;height:40px;border-bottom:1px solid var(--rule);font-size:14px;}
.xp > *{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rt .v.e{display:flex;align-items:baseline;justify-content:flex-end;padding:0 8px 2px 0;border-bottom:1px solid var(--rule-2);overflow:visible;font-family:var(--num);font-variant-numeric:tabular-nums;}
.rt .v.e.ed{border-bottom-color:var(--gold);}
.rt .v.e.season::after{content:" / season";color:var(--dim-2);white-space:pre;}
.rt .v.e.season:has(input:placeholder-shown)::after{content:"";}
.rt .v.e input{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:0;padding:0;margin:0;width:100%;text-align:right;-webkit-appearance:none;appearance:none;}
.rt .v.e.season input{width:48px;}
.rt .v.e input:focus{outline:none;}
.rt .v.e:focus-within{border-bottom-color:var(--ink);}
.rt .v.e input::placeholder{color:var(--dim-2);opacity:1;}
#goal-form input.v{font-family:var(--num);font-variant-numeric:tabular-nums;padding-bottom:2px;}

/* admin (Task 7.3): the board's people rows as real controls — a UA button
   would shrink to its content and lose the row grid. The header row is a div,
   so the cell clipping is shared by both. */
button.ur{font:inherit;font-size:14px;color:inherit;text-align:left;width:100%;background:none;border-width:0 0 1px;border-style:solid;border-color:var(--rule);padding:0;margin:0;cursor:pointer;}
button.ur:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
.ur > *{min-width:0;padding-right:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* show history (Task 6.2): the table rows are the page's one control — they open
   the side panel — so they take a pointer and a keyboard focus ring. `.tr.sel`
   already draws the inset ink outline, and the same offset keeps the two from
   fighting over the row's edge. */
.tr[role="button"]{cursor:pointer;}
.tr[role="button"]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}

/* Schedule: reserve panel controls and let the instrument strip reflow. */
#strip[data-page="schedule"]{height:auto!important;flex:0 0 auto!important;min-height:64px;flex-wrap:wrap;gap:16px 24px;}
#strip[data-page="schedule"]>div{width:auto!important;flex:0 1 auto!important;max-width:100%;}
#strip[data-page="schedule"]>.vr{display:none;}
#strip[data-page="schedule"]>div:last-child{margin-left:auto;flex-wrap:wrap;}
#panel{container-type:inline-size;}
/* Let every nested flex row shrink within the panel. Only text yields space;
   the action keys and role selector keep their full, usable width. */
#panel *{min-width:0;}
#panel .sh .t:not(#panel-title),#panel .sh .r,#panel .mrow .w,#panel .tele,#panel .pp .nm,#panel .pp .rl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#panel .sh button,#panel .pp .seg,#panel .pp button,#panel .mrow>svg{flex:none;}
#panel button,#panel input,#panel textarea,#panel select{max-width:100%;}
#panel-person-picker button{display:block;overflow:hidden;text-overflow:ellipsis;}
#panel .panel-heading{height:auto;min-height:32px;flex:none;gap:8px;align-items:center;}
#panel-title{min-width:0;flex:1;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2;max-height:2.4em;overflow-wrap:anywhere;}
#panel .panel-heading .tog,#panel .panel-heading button{flex:none;white-space:nowrap;}
#panel-special{font-size:12px;gap:6px;}
.panel-when{margin-top:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.panel-when-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:1.4;}
#panel-change-time{margin-left:auto;flex:none;}
.panel-footer{display:flex;flex:none;align-items:center;gap:12px 16px;padding:12px 0;flex-wrap:wrap;}
.panel-footer button{flex:none;}
#panel-status{white-space:nowrap;flex:none;max-width:100%;}
#panel-status:empty{display:none;}
.verification-keys{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0;}
#week .dh.compact span{display:none;}
#season-list button.show{width:100%;padding:0;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);font:inherit;color:inherit;cursor:pointer;}
#season-list button.show:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
#ss-template-note{line-height:1.4;white-space:normal;}
@container (max-width:359px){
  #panel-change-time{margin-left:auto;}
  .panel-when-line{flex-basis:100%;}
  #panel-status{flex-basis:100%;margin-left:0!important;}
}
#panel-status.error{white-space:normal;overflow-wrap:anywhere;}

/* Shared confirmation and schedule time scale. */
.crew-confirm{padding:24px;width:min(420px,calc(var(--viewport-width,100vw) - 48px));color:var(--ink);background:var(--paper);border:1px solid var(--rule-3);font:inherit;}
.crew-confirm::backdrop{background:rgba(30,27,22,.18);}
.crew-confirm h2{font-size:18px;font-weight:500;margin:0 0 16px;}
.crew-confirm p{font-size:14px;line-height:1.5;margin:0 0 24px;white-space:pre-wrap;}
.confirm-keys{display:flex;justify-content:flex-end;gap:12px;}
.crew-confirm .danger{color:var(--red);border-color:var(--red);}
.crew-confirm .danger:hover{color:var(--paper);background:var(--red);}
.vod-field{margin:24px 0;}
.season-week-status{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:32px;padding-top:6px;min-width:228px;}
.vod-keys{display:flex;align-items:center;gap:12px;margin-top:12px;}
html:has(#week),body:has(#week){height:100%;overflow:hidden;}
body > .in:has(#week){height:var(--viewport-height);}
#week{overflow-y:hidden;overflow-anchor:none;}
#week.timed{grid-template-rows:40px auto;overflow-x:hidden;overflow-y:hidden;}
#week.timed.axis-overflow{overflow-y:auto;}
.wk.timed .col{position:relative;display:block;padding:0 8px;height:var(--axis-height);overflow:visible;}
.wk.timed .blk{position:absolute;left:1px;right:1px;width:calc(100% - 2px);overflow:visible;}
.wk .time-axis{grid-column:1;grid-row:2;position:relative;height:var(--axis-height);}
.time-axis .tick{position:absolute;left:0;right:0;border-top:1px solid var(--rule);padding-top:3px;font-size:11px;line-height:14px;}
.time-axis .tick.end{transform:translateY(-100%);border-top:0;border-bottom:1px solid var(--rule);padding-top:0;padding-bottom:3px;}
.wk .axis-head{grid-column:1;grid-row:1;align-self:end;padding-bottom:8px;}
.blk .tm{line-height:1.35;}
.blk .ch{position:static;display:block;margin-top:5px;}
#season-list .show .t{width:auto;white-space:normal;}

/* Content kinds: colour is a border/swatch; labels retain readable ink on paper. */
/* Three tidy Show rows; the People section only contains the lineup. */
.kind-controls { display:flex; flex-direction:column; gap:10px; padding:12px 0; }
.kind-control-row { display:flex; align-items:center; gap:8px; width:100%; }
.kind-control-row .fld { flex:1; min-width:0; flex-direction:row; align-items:center; gap:8px; }
.kind-control-row .l { flex:none; }
.kind-control-row .txt { flex:none; font-size:11px; white-space:nowrap; }
.kind-control-row .v { min-width:0; padding-bottom:3px; }
.kind-swatch { display:inline-block; width:18px; height:18px; border:1px solid var(--ink); flex:0 0 18px; }
.kind-legend { display:flex; flex-wrap:wrap; gap:12px; padding:8px 0; }
.kind-legend > span { padding-left:6px; }
body:has(#week) #panel { width:400px!important; flex-basis:400px!important; max-width:min(400px,calc(var(--viewport-width) * .36))!important; }
#panel-body, #ss-body { scrollbar-gutter:stable; padding-right:12px; }

#panel-body:focus-visible, #ss-body:focus-visible { outline:1px solid var(--rule-2); outline-offset:-1px; }
#panel .panel-when-line { width:100%; white-space:normal; overflow:visible; }
body:has(#week) #panel-date { font-size:18px; margin-bottom:4px; }
#panel-local { margin-top:4px; white-space:normal!important; overflow-wrap:anywhere; }
.panel-show { margin-top:24px; }
.prep-control { display:flex; flex-direction:column; gap:2px; align-items:end; flex:0 0 72px; }
.prep-control .fld { display:flex; flex-direction:row; align-items:baseline; gap:4px; width:72px; }
.prep-control input.v { width:42px; font-size:12px; padding-bottom:2px; }
.prep-control .txt { font-size:10px; line-height:1.2; }
body:has(#week) #panel-people .pp { flex-wrap:nowrap; height:auto; min-height:40px; padding:8px 0; gap:6px; }
body:has(#week) #panel-people .pp .av { display:none; }
body:has(#week) #panel-people .pp .nm { flex:1; }
body:has(#week) #panel-people .pp [data-drop] { font-size:16px; }
#panel .pp .seg button { padding:0 5px; }
.people-line { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35; }
.people-summary { display:block; margin:8px 0; }
#panel .people-summary .people-line { white-space:normal; overflow-wrap:anywhere; }
.missing-producer { color:var(--red); }
.wk.timed .blk .who { display:block; -webkit-line-clamp:unset; line-height:1.35; }
.blk .tm, #season-list .show .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#week-word { display:inline-block; flex:1; min-width:0; text-align:center; font-size:26px!important; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
#season-setup { width:620px!important; flex-basis:620px!important; max-width:calc(var(--viewport-width) * .6); min-width:0; }
#season-setup * { min-width:0; }
.kind-editor { display:grid; grid-template-columns:18px minmax(75px,1fr) 72px 42px 48px 48px 46px; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--rule); }
.kind-editor input.v { font-size:12px; padding-bottom:3px; }
.kind-editor input[type=checkbox] { display:block; margin:auto; }
.kind-editor .k { padding:0 6px; height:26px; font-size:13px; }
.kind-table-head { font-size:10px; }
#season-list .show { height:auto; min-height:64px; gap:12px; }
#season-list .show .n { min-width:0; }
/* Preserve the shared two-line people formatter on dashboard rows and blocks. */
.blk .who, .show .who, .show .n > span { white-space:pre-line; }

/* Task 12.1: scroll affordances, including the explicitly requested 12px fade. */
html, .scroll, [style*="overflow-y:auto"], #week, #panel-body, #ss-body { scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--rule-2); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--dim-2); }
::-webkit-scrollbar-button { display:none; width:0; height:0; }
html, body { max-width:100%; overflow-x:clip; }
#panel-editors, #season-setup { position:relative; }
#panel-body, #ss-body { padding-bottom:calc(var(--panel-footer-height, 80px) + 12px); }
.scroll-fade { flex:0 0 12px; max-height:12px; position:sticky; bottom:0; height:12px; min-height:12px; margin-top:-12px; pointer-events:none; background:linear-gradient(to top, var(--paper), transparent); opacity:0; }
.scroll-fade.more-below { opacity:1; }
.panel-section { margin-top:24px; min-width:0; }
.section-heading .txt.t { display:flex; align-items:center; gap:8px; border:0; text-align:left; flex-shrink:0; }
.section-heading .txt[aria-expanded="true"] svg { transform:rotate(90deg); }
.section-body { padding-top:12px; min-width:0; }
.section-body[hidden] { display:none; }
#more-pay > .tele { margin:4px 0 12px; }
#panel-pay-lines { margin:12px 0; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.pay-cancelled { text-decoration:line-through; color:var(--dim); }
.no-rate { color:var(--red); }
.when-actions { display:flex; gap:8px; flex-wrap:wrap; }
#more-prep { padding-top:12px; }
.prep-explanation { margin-bottom:12px;line-height:1.5; }
#panel-prep .prep-row { display:grid; grid-template-columns:minmax(0, 1fr) 88px max-content 16px; align-items:center; gap:8px; margin-bottom:12px; }
#panel-prep .prep-row > .person { overflow-wrap:anywhere; }
#panel-prep .prep-control { display:contents; }
#panel-prep .prep-control .fld { width:88px; }
#panel-prep .prep-control input.v { width:72px; }
#panel-prep .prep-control .txt { font-size:11px; white-space:nowrap; }
#panel-prep-choices { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
#panel-people .pp { flex-wrap:wrap; }
#panel-people .pp .nm { min-width:70px; }
#panel-host-rates .v, .kind-controls .v { max-width:100%; min-width:0; }
.dashboard-body { display:flex; flex:1; flex-direction:column; padding-top:12px; gap:0; min-width:0; min-height:0; }
.dashboard-body > * { flex-shrink:0; }
body > .in:has(.dashboard-body) { height:var(--viewport-height); }
.dashboard-body .wk { flex:1; min-height:40px; grid-template-rows:40px minmax(0, 1fr); }
.dashboard-body .wk .col { overflow:visible; gap:6px; padding:6px 6px 0; }
.dashboard-body .wk[data-fit="scroll"] .col { overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent; }
.dashboard-body .wk[data-fit] .blk { padding:4px 6px; }
.dashboard-body .wk[data-fit] .col { gap:4px; }
/* Compacted rows keep the whole time — including the viewer's own clock — and
   let the title take the next line (ellipsised) rather than losing it to the
   clip. In a column too narrow even for the time, the time wraps in two. */
.dashboard-body .wk:is([data-fit="title"],[data-fit="type"],[data-fit="scroll"]) .dashboard-slot { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 4px; white-space:nowrap; overflow:hidden; }
.dashboard-body .dashboard-slot .tm { flex-shrink:0; max-width:100%; }
.dashboard-body .wk:is([data-fit="title"],[data-fit="type"],[data-fit="scroll"]) .dashboard-slot .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-body .wk:is([data-fit="type"],[data-fit="scroll"]) :is(.dashboard-slot,.dashboard-slot .nm,.blk .who) { font-size:12px; }
.dashboard-body .blk { flex:none; min-width:0; padding:5px 7px; }
.dashboard-slot { white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; font-size:13px; line-height:1.25; }
.dashboard-slot .tm,.dashboard-slot .nm { display:inline; margin:0; }
.dashboard-slot .tm { white-space:normal; }
.dashboard-slot .nm { display:inline-block; max-width:100%; }
.dashboard-body .blk .who { white-space:normal; overflow:visible; text-overflow:clip; margin-top:3px; font-size:13px; line-height:1.25; }
.dashboard-body .blk .people-line { display:block; white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; }
.dashboard-attention { margin-bottom:12px; }
.dashboard-attention:has([data-empty]) { display:flex; align-items:center; gap:12px; }
.dashboard-attention:has([data-empty]) .sh { flex:1; }
.dashboard-bottom { display:flex; gap:20px; margin-top:12px; }
.dashboard-pay { flex:1; min-width:0; }
.dashboard-season { flex:1; min-width:0; }
.dashboard-bottom > .vr { height:auto; align-self:stretch; }
.dashboard-bottom .sh { gap:8px; min-height:20px; }
.dashboard-bottom .sh .ln { min-width:12px; }
#pay-figures { display:flex; gap:16px; margin:4px 0; }
.dashboard-bottom .lab { margin-bottom:0; }
.dashboard-pay-period { flex:1; display:flex; align-items:baseline; gap:4px 6px; flex-wrap:wrap; }
.dashboard-pay-period .tele { flex-basis:100%; white-space:normal; }
.dashboard-pay-period > .num { font-size:16px; font-weight:600; }
.dashboard-pay-actions { display:flex; align-items:center; gap:16px; }
.dashboard-season-progress { display:flex; align-items:center; gap:12px; margin:8px 0; }
.dashboard-progress { flex:1; height:4px; background:var(--rule); }
.dashboard-progress > div { height:100%; background:var(--ink); border-right:1px solid var(--red); }
.dashboard-season-counts { display:flex; align-items:baseline; gap:16px; margin-top:6px; font-size:13px; color:var(--dim-2); }
.dashboard-season-counts .num { font-size:16px; font-weight:600; color:var(--ink); }
.dashboard-unstaffed { color:var(--red); }
.person { font-weight:500; }
.person[data-person-colour="1"] { color:var(--person-1); }
.person[data-person-colour="2"] { color:var(--person-2); }
.person[data-person-colour="3"] { color:var(--person-3); }
.person[data-person-colour="4"] { color:var(--person-4); }
.person[data-person-colour="5"] { color:var(--person-5); }
.person[data-person-colour="6"] { color:var(--person-6); }
.person[data-person-colour="7"] { color:var(--person-7); }
.person[data-person-colour="8"] { color:var(--person-8); }
.person[data-person-colour="9"] { color:var(--person-9); }
.person[data-person-colour="10"] { color:var(--person-10); }
.person[data-person-colour="11"] { color:var(--person-11); }
.person[data-person-colour="12"] { color:var(--person-12); }

@media(max-width:1000px) {
  .dashboard-bottom { flex-direction:column; }
  .dashboard-bottom > .vr { display:none; }
  #strip[data-page="dashboard"], #strip[data-page="schedule"] { height:auto !important; flex-basis:auto !important; flex-wrap:wrap; row-gap:16px; }
  #strip[data-page="dashboard"] .k.big { min-width:0 !important; }
  #strip[data-page="schedule"] > div { max-width:100%; }
  #strip .vr { display:none; }
}

#panel .section-body > .tele, #panel-external-word, #panel-cancel-word { white-space:normal; overflow:visible; line-height:1.4; }
#panel .section-body .vod-field { margin:0; }
#panel .when-actions { width:100%; }
#panel-change-time { margin-left:0; }
.new-kind { display:flex; align-items:center; gap:6px; margin-top:12px; }
.new-kind[hidden] { display:none; }
.new-kind > input:first-child { flex:1; width:0; }
.new-kind input[type="color"] { width:24px; height:24px; padding:0; flex:none; }
.new-kind input[aria-label="New kind hex"] { width:70px; font-family:var(--num); padding:2px; }
.new-kind .k { padding:0 8px; }
.new-kind .no-rate { white-space:normal; }
#panel-pay-word { flex-shrink:0; }
#strip[data-page="dashboard"] [data-field="stream"] .lamp { flex-shrink:0; }

.invoice-roster-row { grid-template-columns:1fr 160px 96px 96px; }
.invoice-right { text-align:right; }

#more-when .panel-when { margin-top:0; }

.k.ink .person, .k.red .person, .k:hover .person, .seg .on .person, .sel .person, [data-dark] .person { color:inherit; }
.prep-add-row { display:flex; align-items:center; gap:8px; }
.prep-add-row input { flex:1; width:0; }
@media(max-width:1000px) { .dashboard-pay { flex-basis:auto; width:100%; } }

.person-colour-row { display:flex; flex:1 0 100%; align-items:center; gap:8px; }
.person-colour-row .lab { margin:0; }
.person-swatches { display:flex; gap:4px; flex-wrap:wrap; flex:1; min-width:0; }
.person-swatch { width:20px; height:20px; padding:0; border:2px solid transparent; cursor:pointer; }
.person-swatch[aria-checked="true"] { outline:2px solid var(--ink); outline-offset:1px; }
.person-swatch[data-person-colour="1"] { background:var(--person-1); }
.person-swatch[data-person-colour="2"] { background:var(--person-2); }
.person-swatch[data-person-colour="3"] { background:var(--person-3); }
.person-swatch[data-person-colour="4"] { background:var(--person-4); }
.person-swatch[data-person-colour="5"] { background:var(--person-5); }
.person-swatch[data-person-colour="6"] { background:var(--person-6); }
.person-swatch[data-person-colour="7"] { background:var(--person-7); }
.person-swatch[data-person-colour="8"] { background:var(--person-8); }
.person-swatch[data-person-colour="9"] { background:var(--person-9); }
.person-swatch[data-person-colour="10"] { background:var(--person-10); }
.person-swatch[data-person-colour="11"] { background:var(--person-11); }
.person-swatch[data-person-colour="12"] { background:var(--person-12); }

/* Weekly template uses the week axis and the same show panel. */
/* Archivo 600 at 14px: "Save the template" is 114.6px, plus 40px
   padding and 2px border. Both primary keys reserve the wider label. */
#strip[data-page="schedule"] :is(#add-show,#ss-template-save){min-width:157px;}
.schedule-view-second-line{display:flex;align-items:center;padding-top:6px;}
#week.template-grid{grid-template-rows:64px auto;}
#week.template-grid .dh{gap:6px;}
.template-copy{font-size:11px;text-align:left;line-height:1.2;}
.blk.template-slot{border:1px dashed var(--rule-2);background:var(--key);touch-action:auto;cursor:default;padding-bottom:14px;}
#week.template-editing .template-slot{touch-action:none;cursor:grab;}
#week:not(.template-editing) .template-resize{display:none;}
#week.template-editing .template-slot.dragging{cursor:grabbing;outline:1px solid var(--ink);z-index:2;}
.template-resize{position:absolute;bottom:0;left:0;right:0;height:12px;cursor:ns-resize;border-bottom:2px solid var(--rule-2);}
.template-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:13px;}
.template-note{margin:0;line-height:1.4;}
.template-copy-days{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0;}
body:has(#week) #panel[data-mode="template"] #panel-people .pp{flex-wrap:wrap;}

/* Schedule: one coordinate system for blocks, ticks and compressed gaps. */
#week.timed{position:relative;}
#week-view>.sh{flex-shrink:0;}
.schedule-week-nav{display:grid;grid-template-columns:36px 260px 36px auto;align-items:center;column-gap:12px;height:36px;width:max-content;}
.schedule-week-nav #week-today{margin-left:4px;}
.schedule-week-nav :is(#week-prev,#week-next){width:36px!important;height:36px;padding:0;}
#week-word{overflow:visible;line-height:1.25;}
body:has(#week.template-grid) #week-word{overflow:hidden;text-overflow:ellipsis;}
.schedule-week-nav>a{flex-shrink:0;}
#strip[data-page="schedule"] .schedule-heading-slot{flex:0 0 auto!important;width:max-content!important;min-width:0;}
#strip[data-page="schedule"] .schedule-season-control{width:228px!important;flex:0 0 228px!important;min-width:0;overflow:hidden;}
#strip[data-page="schedule"] .schedule-strip-spacer{display:none;}
#strip[data-page="schedule"]{column-gap:16px;min-height:74px;}
#strip[data-page="schedule"]>.vr{margin:0!important;}
#strip[data-page="schedule"] .schedule-actions{margin-left:auto;flex-shrink:0;gap:12px!important;}
.schedule-view-control{position:relative;flex:0 0 auto;width:max-content;}
.schedule-view-control .schedule-view-second-line{position:absolute;top:100%;left:0;white-space:nowrap;}
/* The toggle uses the existing space below the heading row. */
.schedule-strip-rule{height:2px;margin-top:32px;background:var(--gold);position:relative;flex-shrink:0;}
.schedule-strip-gap{height:4px;flex-shrink:0;}
#view-seg{height:44px;}
#view-seg button{font-size:15px;padding:0 20px;}
.axis-gap{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.axis-gap::before{content:"";position:absolute;left:0;right:0;border-top:1px dotted var(--rule-2);}
.axis-gap>span{position:relative;padding:0 8px;background:var(--paper);}
.wk.timed .blk{box-sizing:border-box;min-height:22px;border-width:1px;border-block-width:0;padding:5px 8px;line-height:1.3;}
/* Paint the horizontal border inside the padding so it adds no row height. */
.wk.timed .blk::before{content:"";position:absolute;inset:0;border:inherit;border-width:1px 0;border-radius:2px;pointer-events:none;}
.wk.timed .blk :is(.nm,.tm,.who,.people-line){display:block;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip;-webkit-line-clamp:unset;}
.wk.timed .blk .who{display:block;margin-top:0;}
.wk.timed .blk .people-line{font-size:13px;font-weight:500;line-height:1.3;}
#template-empty{flex-shrink:0;padding-top:8px;}
.template-copy-choices{display:flex;flex-direction:column;gap:12px;margin:16px 0;}
.template-copy-mode{display:flex;align-items:center;gap:8px;}
.template-copy-mode input{appearance:auto;position:static;opacity:1;width:16px;height:16px;accent-color:var(--ink);}
#panel[data-mode="template"] #panel-time-edit{flex-wrap:wrap;}
#week.template-grid .dh{height:64px;}

/* Invoices: a month statement with its sign-off alongside. */
.invoice-strip { display:flex; align-items:center; gap:20px; min-height:76px; flex-shrink:0; }
.invoice-month-cell { flex:0 0 184px; }
.invoice-picker { width:100%; font:500 20px var(--num); color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--rule-2); padding:5px 0; border-radius:2px; }
.invoice-status-cell { flex:0 1 208px; min-width:150px; border-left:1px solid var(--rule-3); padding-left:20px; }
.invoice-status-cell .state { font-size:13px; line-height:1.5; margin-top:6px; }
.invoice-headline-cell { flex:1; min-width:160px; border-left:1px solid var(--rule-3); padding-left:20px; }
#invoice-total { font-size:28px; line-height:1.2; }
#invoice-counts { font-size:11px; margin-top:3px; }
.invoice-strip #scope { flex-shrink:0; height:40px; }
.invoice-strip #scope a { padding:0 12px; }
.invoice-strip #download-pdf { flex-shrink:0; white-space:nowrap; }
#invoice-download { flex:0 0 172px; }
#invoice-pdf-note { margin-top:6px; line-height:1.4; }
#invoice-confirm-copy { font-size:14px; color:var(--ink); line-height:1.6; margin:0 0 16px; }
#signoff-card > .sh { align-items:baseline; height:auto; }
#signoff-heading { white-space:normal; line-height:1.5; }
#line-view { flex-shrink:0; }
#line-view button { font-size:13px; padding:5px 10px; }
.invoice-rule { height:2px; flex-shrink:0; background:var(--gold); margin:12px 0 24px; }
.invoice-rule::before { content:""; display:block; width:48px; height:2px; background:var(--red-2); }
.invoice-body { display:flex; align-items:flex-start; gap:28px; min-width:0; }
.invoice-main { flex:1; min-width:0; max-width:1040px; max-height:calc(var(--viewport-height) - 206px); display:flex; flex-direction:column; }
.invoice-main > .sh { flex-shrink:0; height:auto; min-height:24px; }
.invoice-footer { position:sticky; bottom:0; flex-shrink:0; background:var(--paper); }
#invoice-table-scroll { min-height:0; overflow:auto; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--rule-2) var(--paper); padding-right:var(--invoice-gutter, 8px); }
.invoice-footer { padding-right:calc(2 * var(--invoice-gutter, 8px)); }
.invoice-block h2 { font:500 15px var(--ui); margin:20px 0 6px; }
.invoice-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; }
.invoice-table th, .invoice-table td { text-align:left; padding:12px 8px; border-bottom:1px solid var(--rule); overflow-wrap:anywhere; }
.invoice-table th:first-child, .invoice-table td:first-child { padding-left:0; }
.invoice-table th:last-child, .invoice-table td:last-child { text-align:right; padding-right:0; width:90px; }
.invoice-table thead th { font-weight:400; font-size:12px; color:var(--dim-2); border-bottom-color:var(--rule-3); }
.invoice-table tfoot th, .invoice-table tfoot td { font-weight:500; border-bottom-color:var(--rule-3); }
.invoice-shows th:first-child, .invoice-prep th:first-child { width:104px; }
.invoice-shows th:nth-child(3) { width:90px; }

.invoice-prep th:nth-child(3) { width:66px; }
.invoice-extras th:first-child { width:auto; }
.invoice-roster th:first-child { width:auto; }
.invoice-roster th:not(:first-child) { width:90px; }
.invoice-roster th:nth-child(5) { width:220px; }
.invoice-condensed th:first-child { width:auto; }
.invoice-condensed th:nth-child(2) { width:90px; }
.invoice-condensed th:nth-child(3) { width:54px; }

.invoice-condensed th:last-child { width:90px; }
.invoice-roster tbody tr { cursor:pointer; }
.invoice-roster tbody tr:hover { background:var(--key); }
.invoice-sum { display:flex; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--rule-3); font-size:16px; font-weight:600; }
.invoice-sum .num { font-size:20px; }
.invoice-side { width:340px; flex:0 0 340px; border-left:1px solid var(--rule-3); padding-left:24px; }
.invoice-side .tele, #invoice-held-sentence { line-height:1.6; }
.invoice-side .sh { margin-bottom:16px; }
.invoice-side .txt { background:none; border:0; border-bottom:1px solid var(--rule-2); padding:0; color:var(--dim-2); font:inherit; font-size:13px; cursor:pointer; }
#admin-verification, #invoice-waiting { margin-top:28px; }
#admin-check-card { margin-bottom:28px; }
#admin-check-state { margin:0; line-height:1.6; align-items:baseline; }
#admin-check-state.dim { color:var(--dim); }
#admin-check-lamp.dim { background:var(--dim); }
.invoice-held-row { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--rule); font-size:14px; }
.invoice-held-row > :first-child { grid-column:1 / -1; }
@media (max-width:1300px) {
  .invoice-strip { gap:12px; }
  .invoice-status-cell, .invoice-headline-cell { padding-left:12px; }
  .invoice-month-cell { flex-basis:172px; }
  .invoice-body { gap:20px; }
  .invoice-shows th:nth-child(3) { width:78px; }
}

/* Dashboard: one strip row, with the next date and countdown legible at 1440. */
#strip[data-page="dashboard"] { display:flex; align-items:flex-end; gap:12px; min-height:64px; flex:0 0 auto; }
/* Matching rows keep labels and primary-value baselines level despite details. */
.dashboard-strip-cell { display:flex; flex-direction:column; }
.dashboard-strip-cell > .lab { white-space:nowrap; }
.dashboard-value { display:flex; align-items:baseline; height:32px; flex-shrink:0; }
.dashboard-value::before { content:""; height:24px; width:0; flex-shrink:0; }
.dashboard-detail { min-height:18px; flex-shrink:0; }
.dashboard-next { flex:1; min-width:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:20px; }
.dashboard-next-info { min-width:0; padding-top:14px; }
.dashboard-next-title { overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
.dashboard-body a:is(.dh,.blk) { color:inherit; text-decoration:none; }
.dashboard-body a.dh:is(:hover,:focus-visible) b,
.dashboard-body a.blk:is(:hover,:focus-visible) .nm { text-decoration:underline; text-decoration-color:var(--rule-2); text-underline-offset:3px; }
.dashboard-next-date { font-size:24px; white-space:nowrap; }
.dashboard-next-title { font-size:15px; font-weight:500; line-height:18px; }
.dashboard-date-line { white-space:nowrap; }
#next-when { color:var(--ink); margin-left:8px; }
#next-when::before { content:"· "; }
#strip[data-page="dashboard"] > .vr { height:44px; flex-shrink:0; }
.dashboard-stream { flex:0 0 102px; }
.dashboard-stream [data-field="stream"] { gap:6px; }
.dashboard-stream [data-field="stream-word"] { font-size:14px; font-weight:500; white-space:nowrap; }
#strip[data-page="dashboard"] #clocks { display:flex; gap:12px; align-items:flex-end; flex:0 1 168px; min-width:140px; }
#strip[data-page="dashboard"] #clocks .num { font-size:20px; }
.dashboard-local-clock { min-width:0; }
.dashboard-local-clock [data-field="clock-zone"] { display:block; max-width:110px; overflow:hidden; text-overflow:ellipsis; margin-top:4px; }
.dashboard-keys { display:flex; gap:8px; flex-shrink:0; align-self:flex-start; margin-top:14px; }
.dashboard-keys .k.big { padding:0 8px; min-width:0; font-size:13px; }
@media(max-width:1000px) {
  .dashboard-next { flex-basis:100%; min-width:0; }
  .dashboard-next-date { white-space:normal; }
  .dashboard-keys { flex-wrap:wrap; }
}

/* Task 12.9: whole-site scale, including the bare/login shell. */
html{--site-zoom:1;--viewport-height:calc(100vh / var(--site-zoom));--viewport-width:calc(100vw / var(--site-zoom));}
@media(min-width:1600px){html{--site-zoom:1.125;zoom:1.125;}}
@media(min-width:1800px){html{--site-zoom:1.25;zoom:1.25;}}
body>.in,body>.in>div[style*="min-height"]{min-height:var(--viewport-height)!important;}
/* Fullscreen fixed surfaces use inset, which already follows effective zoom. */
body:has(#week) .blk .tm{font-size:12px;font-weight:500;line-height:1.3;}
body:has(#week) .blk .nm{font-size:14px;font-weight:600;line-height:1.3;margin-top:0;}
body:has(#week) .blk .who{font-size:12px;line-height:1.3;margin-top:0;}
body:has(#week) .blk :is(.ch,.tele){font-size:12px;line-height:1.3;margin-top:0;}
#season-list .show .t{font-size:13px;font-weight:500;line-height:1.25;}
#season-list .show .n>b{font-size:15px;line-height:1.25;}
#season-list .show .people-line{font-size:13px;font-weight:500;line-height:1.25;}
[aria-invalid="true"]{border-bottom-color:var(--red)!important;}
.field-reason{display:block;color:var(--red);white-space:normal;overflow-wrap:anywhere;line-height:1.4;margin-top:4px;flex:1 0 100%;}
#panel-status,#ss-status,#template-status{white-space:normal;overflow-wrap:anywhere;line-height:1.4;}

#season-list .show{padding:8px 10px;}
#season-list .show .ch{font-size:12px;line-height:1.25;}

.new-kind,.fld:has(>.field-reason){flex-wrap:wrap;}

/* Season setup: rates share the narrow roster panel. */
.ss-tier-row { display:grid; grid-template-columns:minmax(0,1fr) 66px 76px 20px; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid var(--rule); }
.ss-tier-row .v { width:100%; min-width:0; }
.ss-weekend { display:flex; align-items:center; gap:3px; min-width:0; }
.ss-weekend .v { min-width:0; }
.ss-person-rate { flex:1 0 100%; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:8px; align-items:center; }
.ss-person-rate .v { min-width:0; width:100%; }
.ss-rate-overrides { grid-column:1 / -1; display:flex; gap:12px; }
.ss-rate-overrides .fld { flex:1; min-width:0; }
.rates-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }

.rate-setup-link, #ss-copy-rates { white-space:normal; line-height:1.4; }
#ss-rates > p.tele { line-height:1.4; }

/* Show History: fixed minimums keep the three readings intact. */
#strip[data-page="show-history"]{display:flex;align-items:center;gap:16px;flex:0 0 auto;min-height:88px;flex-wrap:wrap;}
.history-recording { display:flex;flex-direction:column;align-items:flex-start; }
.history-season{position:relative;flex:1 1 190px;min-width:170px;max-width:260px;}
.history-season-name{display:flex;align-items:center;gap:12px;white-space:nowrap;}
.history-season-name .num,.history-stat .num{font-size:24px;}
.history-season-name .num { line-height:1.3; }
#season-range{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#season-picker{position:absolute;top:100%;left:0;z-index:5;background:var(--key);border:1px solid var(--ink);padding:12px;display:flex;flex-direction:column;gap:12px;min-width:180px;}
.history-people{flex:none;}
.history-filter{flex:0 1 118px;min-width:95px;}
.history-filter .lab{display:block;}
.history-filter select,.history-sort select{font:inherit;color:var(--ink);background:var(--key);border:1px solid var(--rule-2);height:28px;max-width:100%;}
.history-filter select{width:100%;}
.history-sort{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;}
.history-stats{display:flex;gap:16px;flex:none;}
.history-stat{min-width:70px;white-space:nowrap;}
.history-stat:nth-child(2){min-width:112px;}
.history-stat:nth-child(3){min-width:148px;}
.history-stat .tele{display:inline;}
.history-actions{display:flex;gap:12px;margin-left:auto;flex:none;}
#strip[data-page="show-history"] #total-review{flex:none;white-space:nowrap;}
.history-rule{height:2px;flex-shrink:0;margin-top:12px;}
.history-rule>div{width:48px;height:2px;}
.history-strip-status{height:24px;flex:0 0 24px;}
.history-layout{flex:1 1 0;height:0;min-height:0;display:flex;gap:24px;}
.history-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.history-scroll{margin-top:4px;flex:1;min-height:0;overflow:auto;}
#unmatched-segments{flex:0 1 auto;max-height:35vh;overflow:auto;padding:8px 0;}
#unmatched-segments summary{cursor:pointer;}
.history-segment{padding:8px 0;border-top:1px solid var(--rule);overflow-wrap:anywhere;}
.history-segment select{max-width:100%;}
.history-main .tr{grid-template-columns:104px minmax(150px,1.2fr) minmax(172px,1.3fr) 78px 90px 70px 114px 104px;min-width:882px;}
.history-main .tr .history-date-dim,.history-main .tr .history-date-dim .sub{color:var(--dim);}
.history-main .tr>:first-child{padding-left:8px;}
.history-main .tr .n,.history-main .tr .tele{display:block;overflow:hidden;text-overflow:ellipsis;}
.history-main .tr .people-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-main .tr .history-on-air{white-space:normal;overflow:visible;text-overflow:clip;}
#panel-on-air.aired-anyway{font-size:14px;white-space:normal;}
.history-summary{margin-top:28px;padding-bottom:12px;min-width:570px;}
.history-summary-row{display:grid;grid-template-columns:minmax(150px,1fr) repeat(3,90px) 110px;gap:12px;align-items:center;min-height:36px;border-bottom:1px solid var(--rule);font-size:14px;}
.history-summary-row.h{color:var(--dim-2);font-size:12px;}
.history-summary-row>:not(:first-child){text-align:right;}
.history-numbers{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.history-numbers .num{font-size:20px;white-space:nowrap;}
#panel-sparkline{margin-top:16px;color:var(--dim);}
.history-evidence{font-size:14px;line-height:1.5;margin-top:12px;}
.history-notes{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5;}
@media(min-width:1366px){
  #strip[data-page="show-history"]{flex-wrap:nowrap;gap:12px;}
  .history-season{flex-basis:170px;max-width:200px;}
  .history-actions{flex-direction:column;gap:6px;}
  .history-actions .k{height:28px;padding:0 12px;}
  .history-stats{gap:12px;}
}

/* Row cards grow with their content; all seven days share each row's height. */
.wk.timed .blk{height:auto;justify-content:flex-start;}
.wk.timed .blk .card-heading{font-size:12px;line-height:1.2;}
.wk.timed .blk .card-heading :is(.tm,.nm){display:inline;}
body:has(#week) .blk .card-heading .nm{line-height:1.1;}
/* The time reads "HH:MM UTC · HH:MM local": the two halves may fall on
   separate lines in a narrow column, but neither breaks inside itself. A title
   that no longer fits beside the time drops WHOLE to the next line rather than
   leaving its first word stranded up there. */
.wk.timed .blk .card-heading .tm{white-space:normal;}
.blk .tm :is(.utc,.local){white-space:nowrap;}
.wk.timed .blk .card-heading .nm{display:inline-block;max-width:100%;}
.wk.timed .blk .ch{display:inline;}
.wk.timed .blk .people-line .tele{vertical-align:top;}
.wk.timed .blk .ch.no{color:var(--red);}
.wk.timed .blk .people-line .person{white-space:normal;}
.season-week-grid{position:relative;grid-template-columns:56px repeat(7,minmax(0,1fr));grid-template-rows:40px auto;flex:none;margin-bottom:24px;}
#season-view{min-height:0;}
#season-view>.sh{height:28px;flex:none;}
#season-view #season-picker{position:static;display:block;width:auto;min-width:180px;padding:0 0 6px;background:transparent;border:0;border-bottom:1px solid var(--rule-2);}
#season-list{overflow-y:scroll!important;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--dim-2) var(--rail);position:relative;}
#season-list::-webkit-scrollbar{display:block;width:10px;}
#season-list::-webkit-scrollbar-track{background:var(--rail);}
#season-list::-webkit-scrollbar-thumb{background:var(--dim-2);}
.season-week-section{padding-bottom:24px;}
.season-week-section:last-of-type{min-height:100%;box-sizing:border-box;}
.season-week-header{position:sticky;top:0;z-index:5;margin:0;padding:10px 0;border-bottom:1px solid var(--rule-3);background:var(--paper);font-size:14px;font-weight:600;line-height:1.4;}
.season-week-section .season-week-grid{margin-bottom:0;}
.season-navigation #week-word{font-size:15px!important;}
.schedule-week-nav a[aria-disabled="true"]{opacity:.35;cursor:default;}
.template-insertion{position:absolute;left:0;right:0;border-top:1px solid var(--rule-2);pointer-events:none;z-index:3;}

/* Your own shows read at a glance (user 2026-09-10): gold frame, wider gold edge, faint gold tint. */
.wk:not(.timed) .blk.me{border:2px solid var(--gold);border-left-width:4px;background:color-mix(in srgb, var(--gold) 12%, var(--key));}

/* Reserve dynamic regions from the first CSS layout; modules reveal atomically. */
[data-layout="pending"]{visibility:hidden;}
/* Schedule/history already fill a fixed viewport region. Invoices reserve the
   full statement height so condensed rows cannot pull the pinned total upward. */
.invoice-main{height:calc(var(--viewport-height) - 206px);min-height:160px;}
#invoice-table-scroll{flex:1;}
/* Larger type can wrap the season note; reserve both lines in every view. */
@media(min-width:1600px){.season-week-status{height:40px;min-height:40px;}}

/* Full lineups determine card/attention height; the board uses available room. */
.dashboard-next-people .people-line,.attention-people .people-line{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:13px;}
.dashboard-next-people{margin-top:6px;}
#strip[data-page="dashboard"]{align-items:flex-start;}
.dashboard-body .att{height:28px;min-height:0;padding:4px 0;}
.dashboard-body .att[data-empty]{height:20px;border:0;font-family:var(--num);font-size:12px;}
.dashboard-body .att .w{white-space:nowrap;overflow:visible;text-overflow:clip;line-height:1.35;}
.dashboard-body .att .lamp{flex-shrink:0;}
.attention-people{display:inline;margin-left:8px;}
.dashboard-next-people .people-line,.attention-people .people-line{display:inline;}
.dashboard-next-people .people-line + .people-line::before,.attention-people .people-line + .people-line::before{content:" · ";}

/* A single badge contract for server rendering and dynamic roster rows. */
.person[data-person-colour="1"]{--person-chip-colour:var(--person-1);}
.person[data-person-colour="2"]{--person-chip-colour:var(--person-2);}
.person[data-person-colour="3"]{--person-chip-colour:var(--person-3);}
.person[data-person-colour="4"]{--person-chip-colour:var(--person-4);}
.person[data-person-colour="5"]{--person-chip-colour:var(--person-5);}
.person[data-person-colour="6"]{--person-chip-colour:var(--person-6);}
.person[data-person-colour="7"]{--person-chip-colour:var(--person-7);}
.person[data-person-colour="8"]{--person-chip-colour:var(--person-8);}
.person[data-person-colour="9"]{--person-chip-colour:var(--person-9);}
.person[data-person-colour="10"]{--person-chip-colour:var(--person-10);}
.person[data-person-colour="11"]{--person-chip-colour:var(--person-11);}
.person[data-person-colour="12"]{--person-chip-colour:var(--person-12);}
.person.person-chip[data-person-name]{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border:1px solid var(--person-chip-colour);border-radius:2px;background:var(--paper);color:var(--person-chip-colour);font-size:13px;font-weight:600;line-height:1;}
.person.person-chip:is(.sel,.on,[aria-selected="true"],[aria-pressed="true"]),:is(.sel,.on,[aria-selected="true"],[aria-pressed="true"]) .person.person-chip{background:var(--person-chip-colour);color:var(--paper);}
#account-control .person-chip{width:24px;height:24px;flex-basis:24px;}
#account-menu .person-chip{width:32px;height:32px;flex-basis:32px;}
.admin-person{display:flex;align-items:center;gap:8px;}

/* Labels and 44px value rows align; secondary details hang below the row. */
#strip[data-page="schedule"] :is(.schedule-heading-slot,.schedule-season-control,.schedule-view-control){position:relative;overflow:visible;height:64px;}
#strip[data-page="schedule"] .schedule-season-control>.lab{display:block;margin:0 0 8px;}
#strip[data-page="schedule"] .schedule-season-control select{height:36px;margin:0;padding:0;}
.schedule-primary{display:flex;align-items:baseline;height:44px;}
.schedule-primary::before{content:"";width:0;height:30px;flex:none;}
.schedule-primary .schedule-week-nav{align-items:baseline;}
.schedule-season-control .season-week-status{position:absolute;top:100%;left:0;min-width:0;width:100%;align-content:flex-start;}
.schedule-view-second-line{padding-top:6px;}
/* Keep complete larger people lines within the seven-column week. */
.wk.timed .blk{padding:2px 5px;}
.wk.timed .blk .people-line{line-height:1.15;}

@media(min-width:1600px){.schedule-strip-rule{margin-top:44px;}}
#panel>.sh:has(#panel-title){height:auto;min-height:32px;flex:none;}

.invoice-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; padding-top:8px; }
.invoice-main.invoice-calendar-view { height:auto; max-height:none; }
.invoice-calendar-view #invoice-table-scroll { flex:none; overflow:visible; scrollbar-gutter:auto; }
.invoice-calendar-view .invoice-footer { position:static; }
.invoice-calendar-heading { padding:6px; border-bottom:1px solid var(--rule-3); }
.invoice-calendar > :nth-child(7n+6), .invoice-calendar > :nth-child(7n) { background:var(--key); }
.invoice-day { min-width:0; min-height:56px; padding:6px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.invoice-day.dim { color:var(--dim); }
.invoice-day-heading { display:flex; justify-content:space-between; align-items:baseline; gap:4px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--rule); }
.invoice-day-heading .tele { color:var(--ink); line-height:1.3; white-space:nowrap; }
.invoice-day-heading > :first-child { font-size:13px; font-weight:600; }
.invoice-day.dim .tele { color:var(--dim); }
.invoice-calendar-card { display:grid; gap:2px; border-left:3px solid var(--rule-2); border-bottom:0; padding:2px 3px; font-size:14px; line-height:1.3; color:var(--ink); text-decoration:none; }
.invoice-calendar-card + .invoice-calendar-card { margin-top:6px; }
.invoice-calendar-card:hover { background:var(--rail); border-bottom:0; color:var(--ink); }
.invoice-card-heading { display:flex; align-items:baseline; gap:6px; min-width:0; }
#panel-cancelled-badge { color:var(--red); flex-shrink:0; }
#panel-restore { margin:0 0 12px; }
#panel-restore .tele { display:block; margin-top:6px; color:var(--red); }
.season-week-grid .dh.dim { color:var(--dim); }
.season-week-grid .dh .tele { display:block; font-size:12px; white-space:nowrap; }

.wk .blk.cancelled { background:var(--key); color:var(--dim); }
.wk .blk.cancelled .ch.no { color:var(--red); }

.invoice-card-time,.invoice-card-amount { flex-shrink:0; white-space:nowrap; line-height:1.3; color:var(--ink); }
.invoice-card-title { min-width:0; white-space:normal; overflow-wrap:anywhere; }

.season-week-grid:has(.dh.dim) { grid-template-rows:56px auto; }

.invoice-card-amount { grid-column:1 / -1; justify-self:end; }
.season-week-grid:has(.dh.dim) .dh { height:56px; }

#panel .detected-people { white-space:normal; overflow:visible; line-height:1.4; margin-top:8px; }

/* Schedule ownership stays visible through selection, hover and dimming. */
:is(#week,#season-list) .blk.me{border-color:var(--gold);border-left:6px solid var(--gold);background:color-mix(in srgb, var(--gold) 22%, var(--key));}
:is(#week,#season-list) .blk.me .card-heading{padding-right:32px;}
:is(#week,#season-list) .me-tag{position:absolute;top:3px;right:4px;padding:1px 4px;border-radius:2px;background:var(--gold);color:var(--ink);line-height:1.2;}
:is(#week,#season-list) .people-line strong .person{font-weight:700;}
:is(#week-view,#season-view).mine .blk:not(.me):is([data-show],[data-season-show]){opacity:.45;}
.schedule-view-second-line{display:flex;align-items:center;gap:12px;}
#week-mine{white-space:nowrap;}

/* Shared crew instrument rhythm. */
.crew-strip-spacer{height:24px!important;flex:0 0 24px;}
#strip:is([data-page="dashboard"],[data-page="schedule"],[data-page="invoices"],[data-page="show-history"]){align-items:flex-start;}
#strip:is([data-page="dashboard"],[data-page="schedule"],[data-page="invoices"],[data-page="show-history"]) .lab{display:block;margin-bottom:12px;}
#strip[data-page="schedule"] .schedule-season-control>.lab{margin-bottom:12px;}
#strip:is([data-page="dashboard"],[data-page="schedule"],[data-page="invoices"],[data-page="show-history"])>.vr{height:44px;align-self:flex-start;flex-shrink:0;}
.invoice-status-cell .state{margin-top:0;}
.season-week-section.season-week-empty{padding:0;}
.season-week-empty .season-week-header{height:48px;min-height:48px;display:flex;align-items:center;gap:16px;margin:0;}
.history-detection>.tele{display:block;}
.history-on-air{white-space:nowrap;}

#strip[data-page="schedule"]~.schedule-strip-rule{margin-top:24px;}
@media(min-width:1600px){#strip[data-page="schedule"]~.schedule-strip-rule{margin-top:36px;}}

#strip[data-page="schedule"]{align-items:flex-start!important;}
#strip[data-page="schedule"] .schedule-actions{margin-top:24px;}
.invoice-status-cell,.invoice-headline-cell{position:relative;border-left-color:transparent;}
.invoice-status-cell::before,.invoice-headline-cell::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:44px;background:var(--rule);}

/* Numeric invoice columns keep a full $999.99; Show takes the remaining space. */
.invoice-table :is(th,td).invoice-number { width:82px; white-space:nowrap; overflow-wrap:normal; }

/* Owner pages share the crew strip and keep wide workspaces inside their panes. */
#strip.admin-strip{height:64px;min-height:64px;flex:0 0 64px;align-items:flex-start;gap:12px;}
#strip.admin-strip .lab{display:block;margin-bottom:12px;}
#strip.admin-strip>.vr{height:44px;align-self:flex-start;flex-shrink:0;margin:0 4px!important;}
#strip.admin-strip>div:not(.vr){min-width:0;flex-shrink:1!important;}
#strip.admin-strip>div:last-child{flex-shrink:0!important;margin-left:auto;gap:12px!important;align-self:flex-end;}
#strip.admin-strip .k{font-size:13px;white-space:nowrap;}
#strip.admin-strip .k.big{padding:0 12px;}
.admin-ready-body{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;}
body:has(.admin-strip) :is(.hole span,.sw span,.lay span,.plate-tag,.as .ph){font-size:12px;}
body:has(.admin-strip) #panel .seg button,#season-setup :is(.k,.txt),#season-setup .kind-control-row .txt{font-size:13px;}
#season-setup .kind-table-head{font-size:12px;}
body:has(.admin-strip) :is([style*="overflow-y:auto"],[style*="overflow-y: auto"],[style*="overflow:auto"]),#ss-body{scrollbar-gutter:stable;scrollbar-width:thin;overflow-x:auto;}
body:has(.admin-strip) :is(#sm-body,#logs,#people,#rates,#extra,#decisions){min-width:0;}
body:has(.admin-strip) :is(#people,#rates){overflow:auto;scrollbar-gutter:stable;}
body:has(.admin-strip) :is(.ur,.rt){min-width:680px;}
body:has(.admin-strip) .person-chip{vertical-align:middle;margin-right:6px;}
#season-setup .fld{margin:12px 0;}
#season-setup .fld>.l{margin-bottom:12px;}
#login .login-strip{height:64px!important;align-items:flex-start!important;padding-top:24px!important;}

body:has(#strip[data-page="console"]) #history{max-height:128px;overflow:auto;scrollbar-gutter:stable;scrollbar-width:thin;}
body:has(#strip[data-page="console"]) .hist{min-height:32px;}

#strip[data-page="stream-manager"]>div:has([data-field="viewers"]){min-width:88px;}
body:has(.admin-strip) .person.person-chip[data-person-name]{min-width:28px;width:auto;flex-basis:auto;padding:0 3px;}

/* Console editors, scoped so shared field and ticker classes stay page-local. */

:where(body:has(#strip[data-page="console"])) .fld input.v, :where(body:has(#strip[data-page="console"])) .fld select.v, :where(body:has(#strip[data-page="console"])) .tick input.t {
    font-family:var(--ui); font-size:14px; color:var(--ink); background:transparent;
    border:0; border-bottom:1px solid var(--rule-2); border-radius:2px; padding:0 0 6px;
    width:100%; min-width:0; line-height:1.2;
  }
:where(body:has(#strip[data-page="console"])) .fld input.v:focus, :where(body:has(#strip[data-page="console"])) .tick input.t:focus { outline:none; border-bottom-color:var(--ink); }
:where(body:has(#strip[data-page="console"])) .fld.ed input.v, :where(body:has(#strip[data-page="console"])) .fld.ed select.v { border-bottom-color:var(--gold); }
:where(body:has(#strip[data-page="console"])) .fld.aim, :where(body:has(#strip[data-page="console"])) .tick.aim, :where(body:has(#strip[data-page="console"])) .lay.aim, :where(body:has(#strip[data-page="console"])) .sw.aim { outline:2px solid var(--gold); outline-offset:-2px; }
:where(body:has(#strip[data-page="console"])) .tick { display:flex; align-items:center; gap:12px; height:40px; border-bottom:1px solid var(--rule); }
:where(body:has(#strip[data-page="console"])) .tick .i { font-family:var(--num); font-size:12px; color:var(--dim-2); width:16px; flex:0 0 16px; }
:where(body:has(#strip[data-page="console"])) .tick .t { flex:1; min-width:0; }
:where(body:has(#strip[data-page="console"])) .flt { display:flex; align-items:center; gap:12px; min-height:40px; padding:6px 0;
         border-bottom:1px solid var(--rule); font-size:13px; flex-wrap:wrap; }
:where(body:has(#strip[data-page="console"])) .flt .id { font-family:var(--num); font-size:12px; color:var(--dim); flex:0 0 auto; }
:where(body:has(#strip[data-page="console"])) .flt .n { flex:1; min-width:120px; font-size:14px; font-weight:500;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(body:has(#strip[data-page="console"])) .hot { position:absolute; border:1px dashed transparent; background:transparent;
         padding:0; margin:0; cursor:pointer; }
:where(body:has(#strip[data-page="console"])) .hot:hover, :where(body:has(#strip[data-page="console"])) .hot:focus-visible, :where(body:has(#strip[data-page="console"])) #hotspots.picking .hot { border-color:rgba(232,223,200,.45); }
:where(body:has(#strip[data-page="console"])) .hot:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }
:where(body:has(#strip[data-page="console"])) .hot.aim, :where(body:has(#strip[data-page="console"])) #hotspots.picking .hot.aim { border:2px solid var(--gold); background:rgba(184,134,43,.12); }
:where(body:has(#strip[data-page="console"])) .ovl { position:absolute; padding:3px 5px; background:rgba(27,26,23,.7); color:var(--gold-pale);
         font-size:12px; line-height:1; white-space:nowrap; max-width:280px;
         overflow:hidden; text-overflow:ellipsis; }
:where(body:has(#strip[data-page="console"])) .ovl.name { display:none; }
:where(body:has(#strip[data-page="console"])) #overlays.picking .ovl.name { display:block; }
:where(body:has(#strip[data-page="console"])) .ovl.draft { border-left:2px solid var(--gold); }
:where(body:has(#strip[data-page="console"])) .ovl.gold { background:var(--gold); color:var(--ink); font-weight:600; font-size:12px; padding:4px 6px; }
:where(body:has(#strip[data-page="console"])) .ord { display:flex; align-items:center; gap:12px; height:32px;
         border-bottom:1px solid var(--rule); font-size:12px; }
:where(body:has(#strip[data-page="console"])) .ord .w { flex:1; min-width:0; font-size:13px; }
:where(body:has(#strip[data-page="console"])) .ord.sel { outline:2px solid var(--ink); outline-offset:-2px; background:var(--key-2); }
:where(body:has(#strip[data-page="console"])) button.bx, :where(body:has(#strip[data-page="console"])) button.tog { background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer; }
:where(body:has(#strip[data-page="console"])) button.bx { border:1px solid var(--ink); }
:where(body:has(#strip[data-page="console"])) button.bx[disabled] { opacity:.35; cursor:default; }
:where(body:has(#strip[data-page="console"])) button.lay, :where(body:has(#strip[data-page="console"])) button.sw { background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer; }
/* A show link's arrival is independent of panel selection and ownership. */
#week .blk.arrived{outline:2px solid var(--ink);outline-offset:-2px;}
#week .blk.arrival-wash::after{content:"";position:absolute;inset:0;background:var(--gold);opacity:0;pointer-events:none;animation:show-arrival 1.5s ease-out;}
@keyframes show-arrival{
  from{opacity:.25;}
  to{opacity:0;}
}
.arrival-description{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.dashboard-next-title[href],#attention .w>a{color:inherit;border:0;}
.dashboard-next-title[href]:hover,#attention .w>a:hover{text-decoration:underline;}
@media (prefers-reduced-motion:reduce){#week .blk.arrival-wash::after{animation:none;}}

/* Full-canvas Stream Art preview; supporting panes scroll within the workspace. */
body > .in:has(.art-workspace){height:var(--viewport-height,100vh);}
.art-workspace{display:flex;flex:1;min-height:0;gap:24px;}
.art-scenes{flex:0 0 570px;min-width:0;display:flex;flex-direction:column;gap:8px;min-height:0;}
.art-scenes #scenes{flex:1;}
.art-preview{display:flex;gap:20px;margin-top:8px;flex:none;min-width:0;}
#scene-frame{display:block;width:600px;zoom:calc(1 / var(--site-zoom));flex:none;aspect-ratio:16 / 9;}
#scene-frame>.scene-live-preview{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;pointer-events:none;visibility:hidden;}
#scene-frame>.scene-live-preview.selected{visibility:visible;}
#scene-frame>img,#scene-frame>.art-placeholder{position:relative;z-index:1;opacity:1;}
#scene-frame.preview-ready>img,#scene-frame.preview-ready>.art-placeholder{opacity:0;transition:opacity 150ms ease;}
#scene-frame>img{display:block;width:100%;height:100%;object-fit:contain;}
.art-placeholder{width:100%;height:100%;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;}
#browser-settings{flex:1;min-width:0;}
#browser-settings .set{height:auto;min-height:26px;gap:8px;}
.art-layers{display:flex;flex-direction:column;min-height:96px;flex:0 1 auto;min-width:0;margin-top:12px;}
.art-layers #layers{flex:1;}
.art-layers .sh{flex:none;flex-wrap:wrap;gap:6px;}
.art-layers .ly{flex-wrap:wrap;gap:8px;min-height:40px;height:auto;padding:6px 0;}
.art-layers .ly .f{white-space:normal;overflow-wrap:anywhere;}
@media(min-width:1366px){
  .art-layers .ly{min-height:32px;padding:0;}
  .art-layers .ly .n{width:220px;flex-basis:220px;}
  .art-layers .ly .k{width:80px;}
}

/* Manifest rows keep their reading order, including nested and archived groups. */
.art-scenes #scenes{min-height:0;overflow:auto;}
.art-section-title{margin:8px 0 10px;}
.art-group{margin-bottom:10px;}
.art-group .art-group{margin-left:12px;}
.art-group .sh{margin:0 0 4px;}
.art-scene-row{display:flex;flex-wrap:wrap;gap:4px;}
.art-scene-row .sc{flex:1 0 auto;min-width:0;max-width:100%;height:auto;min-height:42px;padding:3px;gap:5px;cursor:pointer;}
.art-scene-row .sc img,.art-thumb{width:64px;height:36px;flex:0 0 64px;}
.art-thumb{display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ink);color:var(--gold-dim);}
.art-thumb span{font-family:var(--display);font-size:12px;}
.art-scene-row .sc:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.art-empty{color:var(--dim);font-size:13px;padding:2px 4px 6px;}
#art-archive summary{cursor:pointer;}
.checker{position:relative;background:var(--paper)!important;}
.checker::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--rule);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E");mask-size:20px 20px;}
.art-thumb.checker::before{mask-size:6px 6px;}
.art-thumb span{position:relative;}
.art-scene-row .sc:hover{background:var(--gold-pale);}
.art-scene-row .sc.sel{background:var(--gold-pale);}

/* Stream Art disclosure headings and page actions. */
#art-header{display:flex;justify-content:flex-end;gap:16px;margin-bottom:16px;}
.art-group > summary.sh{display:flex;align-items:center;cursor:pointer;list-style:none;}
.art-group > summary::-webkit-details-marker{display:none;}
.art-group > summary::before{content:"▸";margin-right:6px;color:var(--dim);}
.art-group[open] > summary::before{content:"▾";}
.art-group > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.art-import-steps{padding-left:22px;line-height:1.5;}
.art-import-steps li{margin-bottom:8px;}

.crew-confirm:has(.art-import-steps){font:14px var(--ui);width:min(520px,calc(var(--viewport-width,100vw) - 48px));}

.art-scene-row .sc .n{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}
#scene-notes{flex:0 0 auto;min-height:0;overflow:auto;margin-top:12px;font-size:13px;}
#scene-notes p{margin:3px 0;line-height:1.4;}
#scene-notes table{width:auto;font-size:12px;}
#scene-notes th,#scene-notes td{padding:2px 12px 2px 0;text-align:left;}
#scene-hole-sizes{display:flex;flex-wrap:wrap;column-gap:18px;}
#scene-hole-sizes tr{display:flex;}
#scene-hole-sizes th,#scene-hole-sizes td{white-space:nowrap;}
/* Match the native 20px checker tile after the 1920px scene is scaled to 600px. */
#scene-frame.checker::before{mask-size:6.25px 6.25px;}

/* Stream Manager: compact instruments, real pictures, independently remembered groups. */
#strip[data-page="stream-manager"]{gap:20px;align-items:center;}
#strip[data-page="stream-manager"]>.vr{display:none;}
#strip[data-page="stream-manager"]>div{width:auto!important;flex:0 1 auto!important;min-width:0;}
#strip[data-page="stream-manager"]>div:has([data-field="live-source"]){flex:0 1 220px!important;}
#strip[data-page="stream-manager"] [data-field="live-source"]{white-space:normal;height:auto!important;overflow-wrap:anywhere;}
#strip[data-page="stream-manager"]>div:has(.sm-category){flex:1 1 220px!important;}
.sm-category{display:flex;gap:8px;align-items:center;}
.sm-category input{min-width:0;width:100%;font:inherit;border:0;border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);}
#sm-body{gap:24px!important;}
#on-air-frame{width:100%!important;height:auto!important;aspect-ratio:16/9;flex-shrink:0;position:relative;}
.sm-program-note{display:flex;gap:8px;align-items:center;font:12px/1.3 var(--ui);color:var(--dim);padding:5px 0;}
.sm-program-note .txt{flex:0 0 96px;font-size:12px;}
.sm-picture-note{position:absolute;inset:0;display:grid;place-content:center;color:var(--dim);font:12px var(--ui);text-align:center;}
#sm-body .frame{position:relative;overflow:hidden;}
.sm-screen-page{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:top left;pointer-events:none;}
#sm-body .nm,#sm-body .person:not(.person-chip),#sm-body [data-field$="name"]{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}
#sources{flex:1 1 auto;scrollbar-gutter:stable;}
#sources-note{display:none;}
.sm-group-heading{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--rule);}
.sm-group-heading [aria-pressed="true"]{color:var(--gold);}
#on-air-caption{height:auto!important;min-height:32px;flex-wrap:wrap;padding:5px 10px!important;gap:5px 10px!important;}
#on-air-health{height:auto!important;min-height:32px;flex-wrap:wrap;white-space:normal!important;overflow:visible!important;gap:8px!important;}
#strip[data-page="stream-manager"] .sm-category{max-width:440px;}
#sm-body :is(.state,.state>span){white-space:normal;text-overflow:clip;}
/* Long source names stay complete; overflow belongs to the pane, never the document. */

/* Console scene groups follow the manifest and scroll within the asset column. */
body:has(#strip[data-page="console"]) #assets { overflow-y: auto; min-height: 0; }
.console-group { margin-bottom: 10px; }
.console-group > summary { cursor: pointer; list-style: none; text-transform: none; }
.console-group > summary::-webkit-details-marker { display: none; }
.console-group > summary::before { content: "▸"; margin-right: 6px; color: var(--dim); }
.console-group[open] > summary::before { content: "▾"; }
.console-group > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.console-group > summary .t { text-transform: none; }
.console-group .as .n { white-space: normal; overflow-wrap: anywhere; }
#placeholder-transform { flex: 0 0 auto; max-height: 56px; overflow-y: auto; margin: 8px 0; }

/* A family occupies one list entry; its variants share that entry's thumbnail. */
.art-group > summary .t{text-transform:none;}
.art-scene-row[data-family],.console-family{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;}
.art-scene-row[data-family] .sc,.console-family .as{flex:1 1 0;min-width:0;}
.scene-variants{display:flex;flex:0 0 auto;align-items:center;border:1px solid var(--rule);border-radius:2px;overflow:hidden;}
.scene-variants button{border:0;border-right:1px solid var(--rule);background:transparent;color:var(--dim);font:inherit;font-size:12px;padding:5px 4px;cursor:pointer;}
.scene-variants button:last-child{border-right:0;}
.scene-variants button[aria-pressed="true"]{background:var(--gold-pale);color:var(--ink);}
.scene-variants button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.console-family .as img{width:64px;height:36px;flex:0 0 64px;}

.console-family .as{padding-left:4px;padding-right:4px;gap:8px;}
.console-family .as{height:auto;min-height:64px;padding-top:6px;padding-bottom:6px}
#drafts-frame{max-width:100%}
#hotspots,#overlays{position:absolute;inset:0;pointer-events:none}
#hotspots .hot{pointer-events:auto}
@media(max-width:1450px){
  #console-view{display:grid!important;grid-template-columns:280px minmax(0,1fr);grid-template-rows:max-content max-content;gap:24px!important;overflow-y:auto;align-content:start}
  #console-view>.console-assets{grid-column:1;grid-row:1 / span 2;width:auto!important;min-width:0}
  #console-view>.console-editor{grid-column:2;width:auto!important;display:block!important}
  #console-view>.console-pictures{grid-column:2;min-width:0}
  #console-view #editors{overflow:visible!important;flex:none!important}
  #console-view #editor-actions{margin-top:24px;flex-wrap:wrap}
  #console-view #backgrounds{flex-wrap:wrap}
}
.console-family .as > span{min-width:0;}

/* Stream Manager default and per-producer delay controls. */
.sm-delay-choices { display:flex; gap:2px; margin:3px 0; }
.sm-delay-choices .k { padding:0 6px; min-width:0; height:24px; }
.sm-delay-choices [aria-pressed="true"] { background:var(--ink); color:var(--paper); }
#delay-picker { background:var(--paper); color:var(--ink); border:1px solid var(--rule); padding:24px; }
#delay-picker::backdrop { background:color-mix(in srgb, var(--ink) 40%, transparent); }
#delay-exact { display:block; margin-top:12px; }
#delay-exact[hidden] { display:none; }

/* Save Clip: the dialog (name + how far back + the window it will save) and the
   status line under the on-air health row, which stays up until the cut lands. */
.sm-clip-form { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.sm-clip-form .sm-clip-name { font-size:13px; }
.sm-clip-form input { width:100%; box-sizing:border-box; font:inherit; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule-2); padding:0 0 6px; }
.sm-clip-form p { margin:0; white-space:normal; }
.sm-clip-form .sm-delay-choices { flex-wrap:wrap; }
.sm-clip-status { min-height:20px; padding:0 0 4px; font-size:12px; white-space:nowrap; overflow:hidden; }
.sm-clip-status[hidden] { display:none; }

#strip .sm-delay-choices { margin:2px 0; }
#strip [data-field="live-source"] { flex-wrap:wrap; gap:4px!important; }
#strip [data-field="live-source"]>.tele { flex-basis:100%; }


/* Stream Manager title drafts and source priority. */
.k.go{background:var(--go);color:var(--key);border-color:var(--go);}
#strip[data-page="stream-manager"]>div:has([data-field="stream-key"]){margin-left:auto;flex-shrink:0!important;}
.sm-composer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0;}
.sm-composer label{display:flex;align-items:center;gap:8px;font-size:13px;}
.sm-composer select{max-width:260px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);font:inherit;padding:5px;}
#title-hosts,#title-servers{display:flex;flex-wrap:wrap;gap:4px;}
.sm-composer [aria-pressed="true"]{background:var(--ink);color:var(--key);}
.sm-category{padding:5px 0;flex-shrink:0;}
#category-editor{display:flex;gap:8px;align-items:center;}
#category-input{width:200px;}
.sm-console-link{font-size:12px;}
#chat-box{display:flex;flex-direction:column;min-height:0;flex:1;gap:8px;overflow:auto;}
#chat-recent{max-height:110px;min-height:36px;flex-shrink:0;overflow:auto;font-size:12px;overflow-wrap:anywhere;}
#twitch-chat{width:100%;min-height:150px;flex:1;border:0;}
.sm-title-manager{font:14px var(--ui);width:min(960px,calc(100vw - 48px));max-height:80vh;overflow:auto;}
.sm-template-row{display:flex;gap:8px;margin:8px 0;}
.sm-template-row input{min-width:0;flex:1;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:6px;}
.sm-template-row input:last-of-type{flex:2;}

#strip[data-page="stream-manager"].admin-strip{height:auto;min-height:74px;flex-basis:auto;}

/* Console editing affordance stays in the row at every viewport. */
#assets .asset-edit { margin-left:auto; padding-right:6px; white-space:nowrap; }
#assets .edit-word { opacity:0; }
#assets .as:hover .edit-word, #assets .as:focus-visible .edit-word, #assets .as.sel .edit-word { opacity:1; }
#assets .as.sel { border-left:3px solid var(--gold) !important; }
#assets .as:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
#ticker-scenes { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* Stream Manager: controls unfold only while editing. */
#strip[data-page="stream-manager"]>div:has([data-field="live-source"]){flex:0 1 180px!important;}
.sm-editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:16px;}
.sm-title-summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 0 6px;flex-shrink:0;}
.sm-title-summary>div{min-width:0;}
#current-title{font-size:22px;font-weight:500;line-height:1.35;overflow-wrap:anywhere;}
#edit-title{flex-shrink:0;}
#title-editor{flex-shrink:0;border:1px solid var(--rule-2);background:var(--paper);padding:10px 16px;margin:0 0 8px;}
#title-editor .sm-composer{padding:0 0 8px;}
#title-editor #sm-title-input-row{border-bottom:0!important;}
#title-editor #title-input{background:var(--paper)!important;border:1px solid var(--rule)!important;padding:6px 8px!important;}
#sm-body .sm-program-note{justify-content:space-between;}
#sm-body .sm-program-note .txt{flex-basis:auto;white-space:nowrap;}
#ticker-scenes button[aria-pressed="true"] { border-color:var(--gold); color:var(--ink); }
#ticker-scenes button[aria-pressed="false"] { color:var(--dim); }
body:has(#sm-body) .sm-category{padding:3px 0;}


/* Producer console: compact history and explicit list controls. */
.console-last-change { height:32px;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px; }
.crew-confirm.console-list-modal{width:560px;max-width:calc(100vw - 48px);box-sizing:border-box;font:14px var(--ui)}
.console-list-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.console-list-columns h3{margin:0 0 12px}
.console-managed-list{list-style:none;padding:0;margin:0 0 12px;max-height:300px;overflow:auto}
.console-managed-list li{display:flex;gap:4px;align-items:center;margin-bottom:8px}
.console-managed-list li>span{flex:1;min-width:0;overflow-wrap:anywhere}
.console-managed-list .k{padding:4px;font-size:12px}
.console-list-add{display:flex;gap:8px}.console-list-add input{min-width:0;width:100%}
.console-camera-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px}
body:has(#drafts-preview) #editor-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto}
.console-auto{width:100%;display:flex;flex-direction:column;gap:4px;font-size:14px}
body:has(#drafts-preview) #push{order:4;margin-left:auto}
body:has(#drafts-preview) #push.pending{background:var(--green);border-color:var(--green);color:var(--paper)}

.schedule-control select, #editors select, #cam-fields input[list] { cursor:pointer;border:1px solid var(--rule-2);padding:6px; }
#editors select:hover, #cam-fields input[list]:hover { border-color:var(--gold); }
#editors select:focus-visible, #cam-fields input[list]:focus-visible { outline:2px solid var(--gold); }
[data-schedule-range] { display:flex;gap:12px; }
#live-differs { margin-bottom:12px; }

.console-combo { display:flex;min-width:0; }
.console-combo input.v { flex:1;min-width:0; }
#editors .console-pick { width:32px;flex:0 0 32px;font-size:0;color:var(--ink); }
#editors .console-pick option { color:var(--ink);font-size:13px; }
#editors .console-pick:focus-visible { outline:2px solid var(--gold); }

/* Stream Manager workspace: sources left, broadcast and chat right. */
#sm-body{display:grid!important;grid-template-columns:minmax(0,1fr) 380px;gap:28px!important;overflow:hidden;}
#sm-body .sm-source-pane{grid-column:1;grid-row:1;min-width:0;overflow:hidden;}
#sm-body .sm-output{grid-column:2;grid-row:1;width:auto!important;min-width:0;overflow:auto;}
#sm-body .sh{flex-shrink:0;}
#sm-body #sources{flex:1 1 0;min-height:0;overflow:auto;scrollbar-gutter:stable;padding-right:8px;}
#sources .row{height:auto;width:auto;min-width:0;padding:12px;gap:8px 16px;border:1px solid var(--rule);background:var(--paper);}
#sources .row.air{border-left:3px solid var(--red);}
#sources .row :is(.c1,.c2,.c3){width:auto;min-width:0;padding:0;}
#sources .row .nm{font-size:16px;line-height:1.4;}
#sources .row .state{margin-top:4px!important;}
#sources .row .c2{white-space:normal;font-size:12px;line-height:1.5;}
#sources .row .c3{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;}
#sources .row .k{width:auto;height:32px;min-width:0;padding:0 10px;white-space:nowrap;}
#sources-producers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 0 20px;}
#sources-producers .row{display:grid;grid-template-columns:256px minmax(0,1fr);grid-template-rows:auto auto 1fr;}
#sources-producers .row .pic{grid-column:1;grid-row:1/4;width:256px;height:144px;}
#sources-producers .c1{grid-column:2;align-self:end;}
#sources-producers .c2{grid-column:2;}
#sources-producers .c3{grid-column:2;align-self:end;}
#sources .row .sm-delay-split{display:flex;gap:0;}
#sources .row .sm-delay-split .k{height:32px;padding:0 8px;}
#sources-general{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 0;}
#sources-general .row{display:grid;grid-template-columns:80px minmax(0,1fr);gap:6px 10px;}
#sources-general .row .pic{width:80px;height:45px;grid-row:1/3;}
#sources-general .row .nm{font-size:14px;}
#sources-general .row .c2{display:none;}
#sources-general .row .c3{grid-column:2;}
.sm-source-group[data-group="general"] [data-action="show-offline"]{display:none;}
.sm-title-date{display:flex;gap:20px;align-items:center;padding-top:8px;font-size:13px;}
.sm-title-date label{white-space:nowrap;}
#title-preview{overflow-wrap:anywhere;}
.sm-switch-preview .frame{position:relative;overflow:hidden;width:256px;height:144px;}
.sm-switch-preview .tele{line-height:1.5;}
#sm-body .sm-program-note{justify-content:flex-end;}
#sm-body .sm-program-note .txt{flex-basis:auto;white-space:nowrap;}
#sm-body #chat-box{min-height:0;}
@media(min-width:1800px){#sm-body{grid-template-columns:minmax(0,1fr) 440px;}}

html:has(#strip[data-page="stream-manager"]){--site-zoom:1;zoom:1;}

@media(max-width:1400px){#sources-producers{grid-template-columns:1fr;}}

/* Task 12.62: shared workspace rhythm and bounded supporting panes. */
:is(#strip[data-page="console"],#strip[data-page="stream-manager"],#art-header).admin-strip{align-items:center;min-height:56px;gap:12px;}
.sm-stream-actions{margin-left:auto;}
#art-header{margin-bottom:12px;gap:16px;}
.art-strip-value{margin-right:auto;}
.art-collection-name{height:32px;display:flex;align-items:center;font-size:18px;font-weight:500;}
:is(#console-view,#sm-body,.art-workspace) .sh{min-height:24px;flex-shrink:0;}
.sm-group-heading{display:flex;align-items:center;gap:12px;min-height:32px;}
.sm-group-heading>button:first-child{font-weight:600;border:0;color:var(--ink);font-size:13px;}
.sm-group-heading #sources-mode{margin-left:auto;}
#sources-producers:has(#producers-empty:not([hidden])){display:block;padding:8px 0 16px;}
#sources-general .row{grid-template-columns:48px minmax(0,1fr) auto;padding:6px 8px;gap:8px;align-items:center;}
#sources-general .row .pic{width:48px;height:27px;grid-row:1;}
#sources-general .row .c1{display:flex;align-items:center;gap:8px;}
#sources-general .row .nm{font-size:13px;line-height:1.2;}
#sources-general .row .state{margin:0!important;font-size:12px;white-space:nowrap;}
#sources-general .row .c3{grid-column:3;flex-wrap:nowrap;gap:4px;}
#sources-general .row .k{height:27px;padding:0 6px;font-size:12px;}
#bot-details{margin-top:auto;border-top:1px solid var(--rule);font-size:13px;}
#bot-details summary{list-style:none;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
#bot-details summary::-webkit-details-marker{display:none;}
#title-hosts{display:flex;flex-wrap:wrap;gap:6px;min-width:0;}
#title-hosts .k{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.console-status-legend{margin:4px 0 8px;line-height:1.4;}
#editors section>div:has(>.fld):not(#cam-fields):not(.console-scene-controls){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;align-items:start;}
#editors .fld{min-width:0;}
#editors .fld .v{width:100%;box-sizing:border-box;min-width:0;}
.console-scene-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start;margin-top:16px;}
.console-scene-controls>.tog{align-self:center;min-height:40px;}
.console-scene-controls>[data-fld="bugText.line1"]{grid-column:1;}
.console-scene-controls>[data-fld="server"]{grid-column:1;}
.console-scene-controls>[data-fld="plates-hidden"]{grid-column:1;}
.console-scene-controls>[data-fld="camBgArt"]{grid-column:1 / -1;}
.console-scene-controls .tele{margin:4px 0 0;line-height:1.4;}
.console-shared-note{grid-column:1 / -1;}
.console-names-row{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap;}
.console-names-row #names-note{margin:0;flex:1;min-width:0;}
#editors :is(#names-note,#video-warning):empty{display:none;}
.console-pictures{min-height:0;overflow:auto;}
#editors{padding-right:8px;scrollbar-gutter:stable;}
#backgrounds{flex-wrap:wrap;}
#ticker-scenes{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;overflow:visible!important;}
.ticker-scene-group{display:flex;flex-wrap:wrap;align-content:start;gap:4px;}
.ticker-scene-group .lab{width:100%;margin:4px 0;}
#ticker-scenes .k{font-size:12px;height:26px;padding:0 6px;}
#editors [data-editor="event-ticker"]>div:has(.ticker-speed-control){flex-wrap:wrap;gap:12px!important;margin-top:12px!important;}
.ticker-speed-control{display:flex;align-items:center;flex-wrap:wrap;gap:6px!important;}
.ticker-speed-number{width:64px!important;min-width:0;}
#ticker-lines .tick{width:100%;box-sizing:border-box;gap:8px;}
#ticker-lines .tick .txt{flex:0 0 auto;}
#ticker-lines .tick input.t{width:0;}
.console-list-columns>section{display:flex;flex-direction:column;min-width:0;}
.console-managed-list{flex:1;min-height:40px;}
.console-managed-list li{display:grid;grid-template-columns:minmax(0,1fr) 24px 24px 56px;gap:4px;min-height:32px;}
.console-managed-list li.console-list-empty{display:block;}
.console-managed-list .k{width:100%;box-sizing:border-box;}
.console-list-modal .confirm-keys{justify-content:flex-end;}
.art-panel-details{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable;}
.art-panel-details .art-layers{flex:none;min-height:0;}
.art-panel-details #layers{overflow:visible!important;}
.art-layers .ly{display:flex;flex-wrap:nowrap;height:32px;min-height:32px;gap:8px;padding:0;}
.art-layers .ly .n{font-size:13px;flex:0 1 40%;width:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.art-layers .ly .f{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.art-layers .ly .a{margin-left:auto;flex:none;}
.art-layers .ly .k{height:26px;font-size:12px;}
#browser-settings .set{font-size:12px;white-space:nowrap;gap:6px;}
#browser-settings .set>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;}
#browser-settings .set .v{flex:none;}
#scene-panel>.sh .t{white-space:nowrap;}
.art-poster{display:flex;align-items:center;justify-content:center;position:relative;width:64px;height:36px;flex:0 0 64px;overflow:hidden;}
.art-poster.checker::before{mask-size:8px 8px;}
.art-scene-row .sc .art-poster img{position:relative;width:100%;height:100%;object-fit:contain;background:transparent;}
#art-header.admin-strip{gap:16px;}
.console-scene-controls>[data-fld="plates-hidden"]{align-self:start;}
#strip[data-page="console"] #on-screen{align-items:center!important;}
#strip[data-page="console"] #on-screen [data-field="words"]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* TazzikAOBot — approved Task 13.1 board. */
.giveaways-strip { min-height:64px; display:flex; align-items:flex-end; gap:24px; }
.giveaways-strip > div + div { border-left:1px solid var(--rule); padding-left:24px; }
.giveaways-add { margin-left:auto; flex-shrink:0; display:flex; align-items:center; gap:12px; }
.giveaways-strip > .giveaways-add { border-left:0; padding-left:0; }
.giveaways-readout { display:flex; align-items:center; gap:12px; min-height:32px; flex-wrap:wrap; }
.giveaways-number { font-size:24px; }
.giveaways-rule { height:2px; background:var(--gold); margin-top:12px; }
.giveaways-rule::before { content:""; display:block; width:48px; height:2px; background:var(--red-2); }
.giveaways-page { margin-top:24px; }
.giveaways-page h1, .giveaways-page h2 { margin:0; }
.giveaways-heading { flex-wrap:wrap; height:auto; min-height:24px; }
.giveaways-table-scroll { overflow-x:auto; padding-left:12px; margin-top:4px; }
.giveaways-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; }
.giveaways-table th { height:32px; text-align:left; font-size:12px; font-weight:400; color:var(--dim-2); border-bottom:1px solid var(--rule-3); }
.giveaways-table th:nth-child(1), .giveaways-table th:nth-child(2) { width:150px; }
.giveaways-table th:nth-child(3) { width:200px; }
.giveaways-table th:nth-child(5) { width:220px; }
.giveaways-table td { height:52px; padding:8px 16px 8px 0; border-bottom:1px solid var(--rule); overflow-wrap:anywhere; }
.giveaways-wait td:first-child { border-left:3px solid var(--gold); padding-left:9px; }
.giveaways-date { font-family:var(--num); font-variant-numeric:tabular-nums; font-weight:500; font-size:14px; }
.giveaways-sub { font-family:var(--num); font-size:12px; color:var(--dim-2); margin-top:4px; font-weight:400; }
.giveaways-show { font-family:var(--ui); }
.giveaways-name { font-weight:500; font-size:14px; color:var(--ink); }
.giveaways-note { width:100%; font:inherit; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--rule-2); padding:4px 0; }
.giveaways-note::placeholder { color:var(--dim); }
.giveaways-note:focus { outline:none; border-color:var(--ink); }
.giveaways-note.giveaways-dirty { border-color:var(--gold); }
.giveaways-check { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:500; cursor:pointer; }
.giveaways-check input { width:14px; height:14px; accent-color:var(--ink); margin:0; }
.giveaways-by { font-family:var(--num); font-size:12px; color:var(--dim-2); font-weight:400; }
.giveaways-footer { min-height:36px; display:flex; align-items:center; gap:16px; border-top:1px solid var(--rule); margin-left:12px; font-size:12px; color:var(--dim-2); flex-wrap:wrap; }
.giveaways-footer > span:first-child { font-family:var(--num); }
.giveaways-footer > span:last-child { margin-left:auto; }
.giveaways-footer button { background:none; border:0; border-bottom:1px solid var(--rule-2); cursor:pointer; }
.giveaways-footer button:disabled { color:var(--dim); cursor:default; }
.giveaways-later { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:32px; }
.giveaways-later p { font-size:13px; line-height:1.5; color:var(--dim-2); margin:12px 0 16px; }
.giveaways-page [hidden] { display:none !important; }
@media (max-width:1250px) { .giveaways-strip { flex-wrap:wrap; } .giveaways-table { min-width:950px; } }
@media (max-width:900px) { .giveaways-later { grid-template-columns:1fr; gap:24px; } }
.giveaways-strip .lamp:not(.ok):not(.st) { border:1px solid var(--dim); background:transparent; }
/* One relay-owned tally spans the producer card. */
#sources-producers .row.has-live-band .pic{grid-row:2/5;}
#sources-producers .sm-live-band{grid-column:1/-1;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;margin:-12px -12px 4px;background:var(--go);color:var(--paper);}
#sources-producers .sm-live-band[data-pending="true"]{background:var(--gold);color:var(--ink);}
.sm-live-band strong{flex:1 0 100%;font-size:14px;}
.sm-live-band progress{flex:1;min-width:80px;height:8px;accent-color:var(--ink);}
#strip[data-page="stream-manager"]>div.sm-live-source{flex:1 1 280px!important;min-width:0;font-size:13px;}

/* Task 12.64c: reserve conditional space before state arrives. */
#editors { padding:6px 8px; box-sizing:border-box; overflow-anchor:none; }
#editors section[data-editor] { min-height:640px; }
#editors :is(#scene-blockers,#ticker-blockers,#backdrop-note,#shared-settings-note,#names-note,#video-warning,[data-schedule-error]) { display:block; min-height:20px; line-height:20px; }
#scene-blockers { height:auto; min-height:20px; max-height:140px; overflow:auto; }
#editors #ticker-blockers { min-height:40px; }
#editors :is(#scene-blockers,#ticker-blockers,#backdrop-note,#shared-settings-note,[data-schedule-range])[hidden] { display:block!important; visibility:hidden; }
#editors :is([data-fld="camBgArt"],[data-fld="frameColour"])[hidden] { display:flex!important; visibility:hidden; }
#editors [data-schedule-range] { min-height:112px; }
#editors .flt-edit[hidden] { display:grid!important; visibility:hidden; }
#editors .flt { display:grid;grid-template-columns:40px minmax(0,1fr) 60px 60px;gap:8px; }
#editors .flt .n { min-width:0; }
#editors .flt [data-field="state"] { grid-column:1/-1;height:20px; }
#editors .flt-edit { grid-column:1/-1; }
#editors .flt>.tele:last-child { grid-column:1/-1;overflow-wrap:anywhere; }
#assets .as { height:56px;min-height:56px;box-sizing:border-box; }
#assets .as .n { display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:18px;max-height:36px; }
#assets .as .s { display:block!important;min-height:18px;line-height:18px; }
#assets .as .s[hidden] { display:none!important; }
.art-scene-row[data-family] { flex-wrap:wrap; }
.art-scene-row[data-family] .sc { flex-basis:100%; }
#assets .console-family .edit-word { display:none; }
#drafts-frame { aspect-ratio:16/9;flex-shrink:0; }
#live-differs[hidden] { display:block!important;visibility:hidden; }
#hotspots .hot { box-sizing:border-box;outline-offset:-2px; }
:is(#strip[data-page="console"],#strip[data-page="stream-manager"],#art-header).admin-strip { flex-wrap:wrap;height:auto;flex-basis:auto;row-gap:12px; }
:is(#strip[data-page="console"],#strip[data-page="stream-manager"],#art-header)>div:not(.vr) { flex-shrink:0!important; }
#strip #last-change { max-width:100%; }
:is(#on-screen [data-field="count"],#title-count,#drafts-count,.sm-live-band .num) { display:inline-block;min-width:4ch;font-variant-numeric:tabular-nums; }
#title-editor-shell { display:grid;grid-template-rows:0fr;transition:grid-template-rows 140ms ease;flex-shrink:0; }
#title-editor-shell:has(#title-editor:not([hidden])) { grid-template-rows:1fr; }
.sm-title-clip { min-height:0;overflow:hidden; }
#title-editor[hidden] { display:block!important;visibility:hidden; }
@media(prefers-reduced-motion:reduce) { #title-editor-shell { transition:none; } }
#title-servers { min-height:32px; }
#title-servers[hidden] { display:flex!important;visibility:hidden; }
#title-state { min-width:100px; }
#title-count { width:7ch;min-width:7ch;flex-shrink:0; }
.sm-live-band strong { font-variant-numeric:tabular-nums; }
#title-hosts { min-height:32px; }
#sources-producers .row { position:relative; padding-top:104px;min-height:316px;box-sizing:border-box;overflow:hidden; }
#sources-producers .row.has-live-band .pic { grid-row:1/4; }
#sources-producers .sm-live-band { position:absolute;left:0;right:0;top:0;height:92px;box-sizing:border-box;margin:0; }
@media(max-width:1399px) {
  #editors section>div:has(>.fld):not(.console-scene-controls),#editors .console-scene-controls,#editors .flt-edit { grid-template-columns:minmax(0,1fr)!important; }
}
#editor-actions #push { width:180px;flex-shrink:0; }
#editor-actions #discard { width:104px;flex-shrink:0;text-align:left; }
#scenes .art-scene-row .sc { height:76px;min-height:76px;box-sizing:border-box; }
#scenes .art-scene-row .sc .n { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:18px;max-height:36px; }

#editors .flt>.txt { grid-column:span 2;justify-self:start;white-space:nowrap; }
#editors .flt>.k { width:60px; }
/* The state line is appended before the keys, so pin the row-1 cells explicitly. */
#editors .flt>.id { grid-row:1;grid-column:1; }
#editors .flt>.n { grid-row:1;grid-column:2; }
#editors .flt>button.k:nth-of-type(1) { grid-row:1;grid-column:3; }
#editors .flt>button.k:nth-of-type(2) { grid-row:1;grid-column:4; }
#editors .flt>[data-field="state"] { grid-row:2; }
.console-pictures>div { flex-shrink:0; }
#draft-words { white-space:nowrap; }
#drafts-state { display:inline-flex;min-width:156px; }
#drafts-state[hidden] { display:inline-flex!important;visibility:hidden; }
#editors .floats { min-height:480px; }
#ticker-lines { min-height:160px; }
#editors :is(#names-note,#video-warning):empty { display:block; }
#auto-push-state { min-height:40px;line-height:20px; }
#sources-general .row { height:76px; }
#sources-general .row .c1 { display:block; }
#sources .row .nm { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:18px;max-height:36px; }
#sources .row .state { display:block;min-height:18px;line-height:18px; }

#editors [data-fld].aim { outline:2px solid var(--gold);outline-offset:-2px; }
#ticker-lines { height:160px;overflow:auto;scrollbar-gutter:stable; }
#editors .floats { height:480px;overflow:auto;scrollbar-gutter:stable; }
/* Every asset keeps the same editor box; short viewports reserve room for Push and Discard. */
#console-view #editors { height:640px;min-height:0;flex:0 1 640px!important;overflow:auto!important; }
#sources-producers .sm-live-band { grid-area:auto;z-index:1; }
#sources-producers .sm-hold-band{position:relative;z-index:2;grid-column:1/-1;grid-row:1;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;background:var(--gold);color:var(--ink);}
#sources-producers .sm-hold-band[data-on-air="true"]{background:var(--red);color:var(--paper);}
#sources-producers .sm-hold-band strong{flex:1 0 100%;font-size:14px;font-variant-numeric:tabular-nums;}
#sources-producers .row.has-hold-band .pic{grid-row:2/5;}
#sources-producers .row.has-hold-band .c1{grid-row:2;}
#sources-producers .row.has-hold-band .c2{grid-row:3;}
#sources-producers .row.has-hold-band .c3{grid-row:4;}
#sources-producers .row.has-hold-band:not(.has-live-band){padding-top:12px;}

.giveaways-season { margin-top:16px; }
.giveaways-season > summary { cursor:pointer; list-style:none; height:auto; min-height:32px; flex-wrap:wrap; gap:8px; }
.giveaways-season > summary::-webkit-details-marker { display:none; }
.giveaways-season > summary::before { content:"›"; color:var(--dim-2); display:inline-block; transition:transform .15s; }
.giveaways-season[open] > summary::before { transform:rotate(90deg); }
.giveaways-season > summary:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }

/* ── Producer workspace (spec 2026-09-13) ─────────────────────────────── */
.producer-panels{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;}
.producer-seg{align-self:flex-start;}
.producer-seg a .lamp{margin-right:6px;padding:0;}
.producer-seg a .lamp.on{background:var(--red);}
.producer-seg a .lamp.st{background:var(--gold);}
.producer-seg a .lamp.ok{background:var(--green);}
.producer-seg a .lamp:not(.on):not(.st):not(.ok){background:transparent;border:1px solid var(--rule-2);}
.producer-panel{flex:1;min-height:0;display:flex;flex-direction:column;}
.producer-panel iframe{flex:1;width:100%;border:0;background:var(--paper);}
.producer-panel-error{margin:8px 0 0;font-size:13px;color:var(--dim-2);}
body[data-embed] .in{min-height:0;}

.producer-panel[hidden]{display:none;}
/* Keep the host viewport fixed; only each view's existing scrollers move. */
html:has(body[data-producer-shell]){--site-zoom:1;zoom:1;}
body[data-producer-shell]{overflow:hidden;}
body[data-producer-shell]>.in{height:100vh;overflow:hidden;}
body[data-producer-shell]>.in>div{height:100%;min-height:0!important;overflow:hidden;}
.producer-panel iframe{min-height:0;display:block;}

/* Producer workspace: panels run edge to edge under the header so frames get the full width. */
.producer-panels{margin:0 -24px;}
.producer-seg{margin-left:24px;}
/* Inside the workspace the console frame is ~60px narrower than the page. Between 1151 and 1450px keep the
   three columns by scaling the document (the site's own zoom mechanism); below 1151px it stacks as usual. */
@media(min-width:1151px) and (max-width:1450px){
  html:has(body[data-embed] #console-view){--site-zoom:.9;zoom:.9;}
  body[data-embed] #console-view{display:flex!important;gap:32px!important;overflow-y:visible;align-content:normal;}
  body[data-embed] #console-view>.console-assets{width:336px!important;flex:0 0 336px;}
  body[data-embed] #console-view>.console-editor{width:420px!important;display:flex!important;}
  body[data-embed] #console-view #editor-actions{margin-top:0;}
}
@media(min-width:1151px) and (max-width:1300px){html:has(body[data-embed] #console-view){--site-zoom:.85;zoom:.85;}}
/* Twitch giveaway controls, checks and admin pools. */
.giveaways-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0;}
.giveaways-form label,.giveaways-pool label,.giveaways-winner-check label{display:flex;flex-direction:column;gap:6px;font-size:13px;}
.giveaways-form input:not([type=radio]),.giveaways-form select,.giveaways-form textarea,.giveaways-pool textarea,.giveaways-winner-check input{font:inherit;color:var(--ink);background:var(--key);border:1px solid var(--rule-2);border-radius:2px;padding:7px;min-width:0;max-width:100%;}
.giveaways-form [hidden]{display:none;}
.giveaways-segments{border:0;padding:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.giveaways-segments legend{font-size:13px;margin-bottom:6px;}
.giveaways-segments label{flex-direction:row;align-items:center;border:1px solid var(--rule-2);padding:6px;}
.giveaways-segments label:has(input:checked){border-color:var(--ink);background:var(--rail);}
.giveaways-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;}
.giveaways-status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--dim-2);}
.giveaways-status .lamp{background:currentColor;}
.giveaways-status-drawn,.giveaways-status-announced{color:var(--gold);}
.giveaways-status-verified,.giveaways-status-code_sent{color:var(--green);}
.giveaways-status-whisper_failed{color:var(--red);}
.giveaways-winner-check{min-width:210px;margin-top:8px;}
.giveaways-winner-check summary,.giveaways-pool summary{cursor:pointer;font-weight:500;}
.giveaways-winner-check .k{margin:8px 4px 0 0;}
.giveaways-chat{max-height:240px;overflow:auto;white-space:normal;overflow-wrap:anywhere;}
.giveaways-chat p{font-size:12px;line-height:1.4;margin:6px 0;}
.giveaways-pool{padding:16px 0;border-top:1px solid var(--rule);}
.giveaways-pool textarea{min-height:80px;width:100%;box-sizing:border-box;}
.giveaways-pool form{margin:12px 0;}

.giveaways-live{grid-template-columns:1fr;}
.giveaways-page:has(.giveaways-live) .giveaways-season .giveaways-table{min-width:1120px;}
.giveaways-page:has(.giveaways-live) .giveaways-season th:last-child{width:230px;}

/* Phone shell and shared controls. Desktop markup and sizing stay intact. */
@media (max-width:760px) {
  #rail-slot { display:none; }
  #rail { position:fixed; inset:0 auto 0 0; width:240px; height:100dvh; transform:translateX(-100%); visibility:hidden; }
  #rail.open { width:240px; transform:none; visibility:visible; }
  #rail.open .rail-i:not(#rail-toggle), #rail.open .rail-footer { width:240px; }
  #rail .rail-links { overflow-y:auto; }
  #menu-key[hidden] { display:inline-flex!important; }
  .crew-fascia { padding:12px!important; }
  .crew-header { height:auto!important; flex-basis:44px!important; }
  .crew-header > div { gap:10px!important; }
  .crew-header img { height:28px!important; }
  #account-control > span:not(.person-chip), #account-control > svg { display:none; }
  #account-control { min-width:44px; min-height:44px; justify-content:center; }
  @media (max-width:420px) { #crumb { display:none; } }
  .two,.grid { grid-template-columns:minmax(0,1fr)!important; }
  #strip { height:auto!important; flex-basis:auto!important; flex-wrap:wrap; gap:12px!important; }
  #strip > [style*="width:"] { width:auto!important; flex:1 1 auto!important; min-width:0!important; }
  #strip > .vr { display:none; }
  .tw { overflow-x:auto; min-width:0; max-width:100%; }
  table { min-width:100%; }
  input,select,textarea { font-size:16px!important; max-width:100%; }
  .k,button,summary,.seg a { min-height:44px; }
  .seg { height:auto; flex-wrap:wrap; }
  .seg button,.seg a { display:inline-flex; align-items:center; justify-content:center; }
  #producer-seg { width:calc(100% - 24px); margin:0 12px; display:flex; flex:none; }
  #producer-seg a { flex:1; font-size:0; padding:0 4px; }
  #producer-seg a::after { content:attr(data-short); font-size:14px; }
  .producer-panels { margin:0 -12px; }
}

@media (max-width:760px) {
  body > .in:has(.dashboard-body) { height:auto; min-height:100dvh; }
  #strip[data-page="dashboard"] { display:flex; flex-direction:column; align-items:stretch; }
  .dashboard-next { display:flex; flex-direction:column; gap:8px; flex:auto; }
  .dashboard-next-info { padding-top:0; }
  .dashboard-date-line { height:auto; flex-wrap:wrap; gap:8px; white-space:normal; }
  #next-when { flex-basis:100%; margin:0; white-space:normal; }
  #next-when::before { content:none; }
  .dashboard-stream { flex:auto; }
  #strip[data-page="dashboard"] #clocks { flex:auto; gap:32px; }
  .dashboard-keys { margin:0; align-self:stretch; flex-wrap:wrap; }
  .dashboard-body { flex:auto; height:auto; overflow:visible; }
  .dashboard-body .wk { display:none; }
  .dashboard-body .sh { height:auto; min-height:40px; flex-wrap:wrap; gap:8px; }
  .dashboard-body .sh .r { white-space:normal; line-height:1.4; }
  .dashboard-body .att { height:auto; min-height:40px; flex-wrap:wrap; gap:8px; padding:8px 0; }
  .dashboard-body .att .w { white-space:normal; flex:1 1 75%; }
  .dashboard-attention:has([data-empty]) { display:block; }
  .dashboard-day { border-bottom:1px solid var(--rule); padding-bottom:8px; }
  .dashboard-day summary { cursor:pointer; padding:14px 0; font-weight:500; }
  .dashboard-day .blk { display:block; padding:12px; margin-bottom:8px; }
  .dashboard-bottom { flex-direction:column; gap:20px; }
  .dashboard-season-counts,.dashboard-season-progress,.dashboard-pay-actions { flex-wrap:wrap; gap:12px; }
  .dashboard-pay-actions { margin-top:12px; }
  .dashboard-body a.txt { display:inline-flex; align-items:center; min-height:40px; }
}

@media (max-width:760px) {
  body > .in:has(.schedule-body) { height:auto; min-height:100dvh; }
  .schedule-body { height:auto!important; flex:auto!important; display:block!important; }
  #strip[data-page="schedule"] { flex-direction:column; align-items:stretch; }
  #strip[data-page="schedule"] > * { width:100%!important; flex:auto!important; }
  .schedule-week-nav { width:100%; gap:8px; flex-wrap:wrap; }
  #week-word { font-size:19px!important; flex:1; text-align:center; white-space:normal; }
  #week-prev,#week-next { width:40px!important; flex:none; }
  #week-today { flex-basis:100%; min-height:40px; display:flex; align-items:center; justify-content:center; }
  .schedule-primary { height:auto; }
  .schedule-day-pills { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:8px; }
  .schedule-day-pills button { flex-direction:column; gap:6px; padding:8px 0; font-size:12px; }
  .schedule-day-pills .today { border-bottom:3px solid var(--gold); }
  #strip-season-picker { width:100%; min-height:44px; }
  .schedule-view-control,.schedule-strip-spacer,#open-season-setup,#week,#season-view,#kind-legend,[data-week-legend] { display:none!important; }
  .schedule-actions #add-show { width:100%; }
  .schedule-phone-note { line-height:1.5; margin:16px 0; }
  #week-view > .sh { height:auto; flex-wrap:wrap; gap:8px; }
  #week-view > .sh .r { white-space:normal; line-height:1.4; }
  #week-mine { min-height:40px; display:flex; align-items:center; }
  .schedule-day-list { margin-top:12px; }
  .schedule-show { display:flex; flex-direction:column; width:100%; gap:8px; padding:14px; margin-bottom:12px; text-align:left; }
  .schedule-show .nm,.schedule-show .tele,.schedule-show .people-line { white-space:normal; line-height:1.4; overflow-wrap:anywhere; }
  .schedule-show .people-line { display:block; }
  .crew-panel,body:has(#week) #panel { position:fixed!important; inset:0!important; z-index:50; width:100%!important; max-width:none!important; height:100dvh!important; flex-basis:auto!important; padding:12px!important; border:0!important; overflow:auto!important; background:var(--paper); }
  .crew-confirm { position:fixed; inset:0; width:100%!important; max-width:none!important; height:100dvh; max-height:none; margin:0; border:0; padding:16px; overflow:auto; }
  .crew-confirm[open] { display:flex; flex-direction:column; }
  .confirm-keys { position:sticky; bottom:0; margin-top:auto; background:var(--paper); padding:12px 0; flex-wrap:wrap; }
  .panel-footer { position:sticky; bottom:0; background:var(--paper); padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  #panel .seg { height:auto; }
  #panel :is(input,select,textarea) { min-height:40px; }
}
@media (max-width:760px) {
  #strip[data-page="schedule"] :is(.schedule-heading-slot,.schedule-season-control) { width:100%!important; height:auto; flex:auto!important; }
  .schedule-primary::before { content:none; }
  .schedule-week-nav { display:flex; height:auto; }
  .schedule-season-control .season-week-status { position:static; margin-top:8px; }
}

@media (max-width:760px) {
  body:not([data-producer-shell]) > .in { height:auto!important; min-height:100dvh; }
  .admin-ready-body { flex:auto; overflow:visible; }
  .sh { height:auto; min-height:40px; flex-wrap:wrap; gap:8px; }
  .sh .t,.sh .r { white-space:normal; line-height:1.4; overflow-wrap:anywhere; }
  .tele { line-height:1.4; }
  .txt { display:inline-flex; align-items:center; min-height:40px; }
  input:not([type="checkbox"]):not([type="radio"]),select,textarea { min-height:40px; }
  .crew-fascia [style*="display:flex"]:not([style*="flex-direction:column"]):has(> [style*="width:"]) { flex-wrap:wrap; }
  #strip > div { min-width:0; }
  #strip > div > [style*="height:32px"] { height:auto!important; min-height:32px; flex-wrap:wrap; }
  #strip[data-page="stream-manager"] { flex-direction:column; align-items:stretch; }
  #strip[data-page="stream-manager"] > div { width:100%!important; flex:auto!important; }
  #sm-body { grid-template-columns:minmax(0,1fr); overflow:visible; flex:auto!important; }
  #sm-body .sm-source-pane { grid-column:1; grid-row:1; overflow:visible; }
  #sm-body .sm-output { grid-column:1; grid-row:2; overflow:visible; }
  #sm-body #sources { overflow:visible; flex:auto; padding-right:0; }
  #sources-producers { grid-template-columns:minmax(0,1fr); }
  #sources-producers .row { display:flex; flex-direction:column; width:100%; padding:12px; min-height:0; gap:8px; }
  #sources-producers .row .pic { width:100%; height:auto; aspect-ratio:16/9; }
  #sources-producers :is(.c1,.c2,.c3) { width:100%; min-width:0; }
  #sources-producers .c3 .k { width:100%; min-height:44px; }
  #sources-producers .sm-live-band { position:static; height:auto; width:100%; order:-2; }
  #sources-producers .sm-hold-band { position:static; height:auto; width:100%; order:-1; }
  .sm-title-date,.sm-title-head,.sm-title-actions { flex-wrap:wrap; }
  #sm-body #chat-box { min-height:360px; }
  #sm-body .sm-program-note { flex-wrap:wrap; }
  .giveaways-strip { flex-direction:column; align-items:stretch; gap:16px; }
  .giveaways-strip > div + div { border:0; padding-left:0; }
  .giveaways-add { margin-left:0; flex-wrap:wrap; }
  .giveaways-page,.giveaways-later,.giveaways-later > section,.giveaways-season { min-width:0; max-width:100%; }
  .giveaways-form { grid-template-columns:minmax(0,1fr); }
  .giveaways-table-scroll { max-width:100%; padding-left:0; }
  .giveaways-segments label,.giveaways-check { min-height:40px; }
  .giveaways-readout .state { white-space:normal; line-height:1.4; }
  #console-view { display:flex!important; flex-direction:column; overflow:visible; gap:24px!important; }
  #console-view > :is(.console-assets,.console-editor,.console-pictures) { width:100%!important; flex:auto!important; min-width:0; }
  #console-view #assets,#console-view #editors { height:auto; max-height:none; overflow:visible!important; flex:auto!important; }
  .console-phone-note[hidden] { display:block!important; white-space:normal; line-height:1.5; }
  #editors [style*="display:grid"] { grid-template-columns:minmax(0,1fr)!important; }
  #console-view #editor-actions { margin-top:16px; }
  .console-family { flex-wrap:wrap; }
  .console-family .scene-variants { flex-wrap:wrap; }
  .art-workspace,.budget-body,#logs { flex-direction:column; flex:auto!important; overflow:visible; gap:24px!important; }
  .art-scenes,.budget-body > div,#logs > div { width:100%!important; flex:auto!important; min-width:0; }
  .art-scenes #scenes { max-height:400px; }
  #scene-panel { flex:auto!important; }
  #scene-panel .mrow { flex-wrap:wrap; height:auto; min-height:40px; }
  #scene-panel .mrow .v { white-space:normal; overflow-wrap:anywhere; }
  #logs > div > [style*="display:flex"] { height:auto!important; flex-basis:auto!important; flex-wrap:wrap; padding:8px 0; }
  #logs #sources { max-height:320px; }
  #logs .src { min-height:44px; }
  #tail { min-height:320px; }
  .budget-body .sh { flex-wrap:wrap; }
}
@media (max-width:760px) {
  .art-preview { flex-direction:column; }
  #scene-frame { width:100%; max-width:100%; }
  #browser-settings .set { white-space:normal; min-height:40px; }
  #browser-settings .set > span:first-child { white-space:normal; overflow:visible; }
}
@media (max-width:760px) {
  #strip[data-page="stream-manager"] > div.sm-live-source { flex:0 0 auto!important; }
  #sources-producers .row :is(.c1,.c2,.c3) { width:100%; flex:0 0 auto; align-self:stretch; }
  #sources-producers .row .pic { flex:none; }
  #sources .row .nm { display:block; max-height:none; overflow:visible; -webkit-line-clamp:unset; }
  #sources-producers .row .sm-delay-split { width:100%; }
  #sources-producers .row .sm-delay-split .k { width:auto; flex:1; }
  #sources-producers .row .sm-delay-split .k.q { flex:0 0 44px; }
  #sources-general { grid-template-columns:minmax(0,1fr); }
  #sources-general .row { height:auto; min-height:80px; display:flex; flex-wrap:wrap; }
  #sources-general .row .c1 { display:block; flex:1; }
  #sources-general .row .c3 { width:100%; }
  #sources-general .row .c3 > .k { flex:1; }
  .giveaways-season > summary,#console-view .console-group > summary { min-height:44px; }
  /* The asset list supplies the same actions as the tiny scaled preview regions. */
  #hotspots { display:none; }
}
@media (max-width:760px) {
  .console-family { flex-direction:column; align-items:stretch; gap:6px; }
  .console-family .as { width:100%; flex:auto; }
  .console-family .scene-variants { width:100%; height:auto; min-height:44px; }
  .console-family .scene-variants button { flex:1; min-width:0; }
  #console-view #editors [hidden],#console-view #live-differs[hidden],#console-view #drafts-state[hidden] { display:none!important; }
}
@media (max-width:760px) {
  summary.sh { min-height:44px!important; }
  .ly { min-height:48px; height:auto; }
}

/* Phones: the schedule page scrolls as a whole (desktop pins it so the week grid scrolls inside). */
@media (max-width:760px){html:has(#week),body:has(#week){height:auto;overflow:auto;}}

/* ── TEST CHANNEL banner (spec: the 2026-09-16 wrong-channel incident) ───────
   Sticky above everything (the open rail is 40, the phone panel 50), full
   width, no dismiss key: while the stream key points at tazziktestx this bar
   is the first thing on every crew page, embedded panes included. The hazard
   edges are inline SVG so the stylesheet keeps its no-gradient rule. */
#test-channel-banner{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  min-height:36px;padding:6px 0 6px 0;background:var(--test-hot);color:var(--ink);
  font-family:var(--ui);border-bottom:2px solid var(--ink);}
/* In a producer-workspace pane the host shell's bar sits right above this
   frame; the pane keeps the element (its page module reads it) but not the
   second bar. Set by shell.js, and only when actually inside a frame. */
#test-channel-banner[data-framed]{display:none;}
#test-channel-banner .tcb-edge{flex:0 0 64px;align-self:stretch;width:64px;min-height:24px;display:block;}
#test-channel-banner .tcb-s1{fill:var(--test-hot);}
#test-channel-banner .tcb-s2{fill:var(--ink);}
#test-channel-banner .tcb-words{flex:1 1 auto;min-width:0;text-align:center;
  font-size:15px;font-weight:600;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;}
#test-channel-banner .tcb-note{flex:0 0 auto;font-size:12px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;padding-right:12px;}
/* Admin: the "key in use" truth beside the test-mode switch. It can push the
   strip past one row on a narrow screen, so this strip wraps rather than
   letting its cells collide (the console and Stream Manager strips already do). */
#strip[data-page="admin"].admin-strip{flex-wrap:wrap;height:auto;flex-basis:auto;row-gap:12px;}
/* This cell sizes to its words (they change: "matches switch" / "MISMATCH" plus
   a Fix now key) rather than shrinking under them into the People cell. */
#strip.admin-strip>.admin-test-cell{flex:0 0 auto!important;width:auto;white-space:nowrap;}
#test-mode-key{white-space:nowrap;}
#test-mode-key[data-mismatch]{color:var(--test-hot);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}

/* Stream Manager: the channel the Go Live key actually reaches. */
.sm-target-channel{white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;}
.sm-target-channel[data-test]{color:var(--test-hot);font-weight:600;}

@media (max-width:760px){
  #test-channel-banner{flex-wrap:wrap;padding:6px 12px;gap:8px;}
  #test-channel-banner .tcb-edge{flex:1 1 100%;width:auto;height:10px;min-height:10px;}
  #test-channel-banner .tcb-words{font-size:13px;letter-spacing:.04em;flex:1 1 100%;}
  #test-channel-banner .tcb-note{flex:1 1 100%;text-align:center;padding-right:0;}
}