@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;
  --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; }
.dashboard-body .wk:is([data-fit="title"],[data-fit="type"],[data-fit="scroll"]) .dashboard-slot { display:flex; align-items:baseline; gap:4px; white-space:nowrap; overflow:hidden; }
.dashboard-body .dashboard-slot .tm { flex-shrink:0; }
.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-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;}
.wk.timed .blk .card-heading .tm{white-space:nowrap;}
.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; }

#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;}
#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:40px; line-height:20px; }
#scene-blockers { height:140px; overflow:auto; }
#editors :is(#scene-blockers,#ticker-blockers,#backdrop-note,#shared-settings-note,[data-fld="camBgArt"],[data-schedule-range])[hidden] { display:block!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; }
.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;}}