body{font-size:14.5px}
.bar{border-bottom:1px solid var(--line);background:#100F0C;position:sticky;top:0;z-index:40}
.bar .wrap{display:flex;align-items:center;gap:8px 18px;min-height:52px;flex-wrap:wrap;padding-block:6px}
.bar .mark{font-weight:900;font-size:15px;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.bar .mark em{font-style:normal;color:var(--blaze)}
.bar nav{display:flex;gap:0 18px;flex-wrap:wrap}
.bar nav a{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  padding:12px 0;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.bar nav a:hover{color:var(--text)}
.bar nav a.on{color:var(--text);border-bottom-color:var(--blaze)}
.bar .who{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bar .who a{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);
  padding-block:10px;min-height:44px;display:inline-flex;align-items:center}
.dot{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.dot::before{content:"";width:7px;height:7px;background:var(--dim)}
.dot.live::before{background:#5FD68A} .dot.live{color:#5FD68A}
.dot.off::before{background:var(--brass)} .dot.off{color:var(--brass)}

.crumb{display:flex;gap:9px;align-items:baseline;padding-top:18px;flex-wrap:wrap}
.crumb a{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.crumb a:hover{color:var(--text)}
.crumb span{font-size:10.5px;color:var(--line2)}

h1.page{margin:10px 0 6px;font-weight:900;font-size:clamp(25px,4.2vw,44px);line-height:1.02;
  letter-spacing:-.034em;text-transform:uppercase}
.sub{margin:0 0 4px;color:var(--mid);max-width:70ch}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;padding-block:12px 18px}

.notice{border:1px solid var(--brass);border-left-width:3px;padding:14px 16px;margin-block:18px}
.notice h4{margin:0 0 4px;font-size:13px;font-weight:800;color:var(--brass)}
.notice p{margin:0;font-size:13.5px;color:var(--mid);max-width:74ch}
.notice code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--text)}

.sec{padding-block:clamp(20px,3vw,32px)}
.sec>h2{margin:0 0 4px;font-weight:800;font-size:clamp(16px,2vw,20px);text-transform:uppercase;letter-spacing:-.012em}
.sec>.hint{margin:0 0 16px;font-size:13px;color:var(--dim);max-width:70ch}

/* Episodes are tiles: one clickable box each, laid out in a grid that fills
   whatever width there is. No background on the grid itself - an auto-fill
   grid makes tracks whether or not there are items to put in them, and a
   background on the container paints the empty ones as a slab. */
.eplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
  gap:16px;align-items:stretch}
.eptile{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line2);padding:15px 17px 13px;
  transition:border-color .12s ease,background .12s ease}
.eptile:hover{border-color:var(--blaze);background:#211E18}
.eptile:focus-visible{outline:2px solid var(--blaze);outline-offset:2px}
.eptile .top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:9px}
.eptile .no{font-weight:900;font-size:30px;line-height:.82;letter-spacing:-.04em;
  color:var(--brass)}
.eptile h3{margin:0 0 6px;font-weight:800;font-size:17px;line-height:1.2;
  letter-spacing:-.015em}
.eptile:hover h3{color:var(--blaze)}
.eptile .topic{margin:0 0 13px;font-size:12.5px;color:var(--dim);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eptile .foot{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.eptile .chairs4{margin-bottom:11px}
.eptile .warn{font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blaze);text-align:right}
.eptile .warn.good{color:#5FD68A}
.eptile .warn.idle{color:var(--dim);font-weight:700}

/* the chairs, stacked inside the tile - one row each, always every seat,
   so an open chair is as loud as a filled one */
.chairs4{display:grid}
.ch{display:flex;align-items:center;gap:9px;min-width:0;padding:5px 0;
  border-top:1px solid var(--line)}
.ch .s{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);min-width:58px;flex:0 0 auto}
.ch .who{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ch.open .who{color:var(--dim);font-weight:400;font-style:italic}
.ch .pp{margin-left:auto;display:flex;gap:3px;flex:0 0 auto;padding-left:8px}
.pip{width:6px;height:6px;background:var(--blaze);display:block}
.pip.ok{background:#5FD68A}

/* Status, never an action. A border made these read as buttons, so the state
   is carried by a leading dot and the colour instead. Real buttons on these
   pages are solid, which keeps the two impossible to confuse. */
.chip{display:inline-flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 0;color:var(--dim);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.chip.bad{color:var(--blaze)}
.chip.good{color:#5FD68A}
.chip.warn{color:var(--brass)}
/* The one chip that is a label rather than a state, so it keeps a filled
   shape and drops the dot. */
.chip.solid{background:var(--brass);color:var(--bg);padding:3px 7px}
.chip.solid::before{display:none}

.rows{border-top:1px solid var(--line)}
.rw{display:flex;align-items:baseline;gap:12px;padding-block:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rw .seatname{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);min-width:60px}
.rw .nm{font-weight:700;font-size:16px}
.rw .nm a:hover{color:var(--blaze)}
.rw .right{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rw.empty-seat .nm{color:var(--dim);font-weight:400;font-style:italic}

.qa{border-top:1px solid var(--line);padding-block:16px}
.qa h4{margin:0 0 3px;font-weight:800;font-size:15px}
.qa .who{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brass);
  display:block;margin-bottom:9px}
.qa dl{margin:0;display:grid;grid-template-columns:150px minmax(0,1fr);gap:9px 18px}
@media(max-width:620px){.qa dl{grid-template-columns:1fr;gap:3px 0}}
.qa dt{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.qa dd{margin:0;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.qa dd.none{color:var(--dim);font-style:italic}

.block{border-top:1px solid var(--line);padding-block:15px}
.block .bh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.block .bn{font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:-.012em}
.block .bt{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim)}
.block ul{margin:0;padding-left:18px}
.block li{color:var(--mid);margin-bottom:6px}
.block li.spare{color:var(--dim);font-style:italic}
.block .note{margin:0 0 8px;font-size:13px;color:var(--dim)}

.panel{border:1px solid var(--line);padding:16px;margin-bottom:20px}
.panel h3{margin:0 0 4px;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-.01em}
.panel .hint{margin:0 0 14px;font-size:12.5px;color:var(--dim)}

.two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:980px){.two{grid-template-columns:1fr}}

.mini{font-family:var(--f);font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:9px 12px;min-height:38px;border:1px solid var(--field);background:transparent;color:var(--text);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mini:hover{border-color:var(--text)}
.mini.ghost{border-color:var(--line);color:var(--dim)}
.mini.ghost:hover{color:var(--text);border-color:var(--field)}

.codeout{border:1px solid var(--blaze);padding:14px;margin-top:14px}
.codeout .k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:700;
  letter-spacing:.14em;color:var(--blaze);overflow-wrap:anywhere}
.codeout .l{font-size:12px;color:var(--mid);overflow-wrap:anywhere;margin:8px 0 12px}
.mini.pri{background:var(--blaze);border-color:var(--blaze);color:#160800}
.mini.pri:hover{background:#FF6038;border-color:#FF6038}

.empty{padding:26px 0;color:var(--dim);font-size:13.5px;max-width:64ch}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-block:18px 6px}
@media(max-width:780px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--bg);padding:15px 16px;border:0;text-align:left;cursor:pointer;
  font-family:var(--f);color:var(--text);display:block;width:100%;min-height:76px}
.tile:hover{background:#1A1813}
.tile b{display:block;font-weight:900;font-size:clamp(20px,3vw,30px);line-height:1;
  letter-spacing:-.03em;margin-bottom:7px}
.tile .tag{display:block}
.tile.hot b{color:var(--blaze)} .tile.warn b{color:var(--brass)}
.tilehint{margin:0 0 6px;font-size:12px;color:var(--dim)}

/* ---------------- dashboard ---------------- */
.hero{border:1px solid var(--line2);padding:clamp(16px,2.4vw,24px);margin-block:18px}
.hero .eyebrow{display:block;margin-bottom:10px}
.hero h2{margin:0 0 6px;font-weight:900;font-size:clamp(21px,3.2vw,34px);line-height:1.04;
  letter-spacing:-.03em;text-transform:uppercase}
.hero h2 a:hover{color:var(--blaze)}
.hero .when{margin:0 0 16px;color:var(--mid);font-size:14px}
.chairs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:16px}
@media(max-width:780px){.chairs{grid-template-columns:repeat(2,1fr)}}
.chair{background:var(--bg);padding:12px 13px;min-height:92px}
.chair .role{display:block;margin-bottom:6px}
.chair .who{display:block;font-weight:700;font-size:14.5px;line-height:1.2;margin-bottom:8px}
.chair .who a:hover{color:var(--blaze)}
.chair.open .who{color:var(--dim);font-weight:400;font-style:italic}
.chair .st{display:flex;gap:4px;flex-wrap:wrap}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-block:18px}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.stat{background:var(--bg);padding:17px 18px;display:block;min-height:128px}
.stat:hover{background:#1A1813}
.stat b{display:block;font-weight:900;font-size:clamp(26px,3.6vw,38px);line-height:1;
  letter-spacing:-.03em;margin-bottom:8px}
.stat.hot b{color:var(--blaze)} .stat.warn b{color:var(--brass)} .stat.calm b{color:var(--mid)}
.stat .lbl2{display:block;font-weight:800;font-size:14px;margin-bottom:5px}
.stat .sm{display:block;font-size:12.5px;color:var(--dim)}
.stat .go{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brass)}
.stat:hover .go{color:var(--blaze)}

/* ---------------- tables, built for a lot of rows ---------------- */
.search{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.search input{flex:1 1 240px;background:transparent;border:0;border-bottom:1px solid var(--field);
  color:var(--text);font-family:var(--f);font-size:16px;padding:11px 0;outline:0;min-height:44px}
.search input:focus{border-bottom-color:var(--blaze)}
.search input::placeholder{color:#8B8170}
.search .n{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}

table.tbl{width:100%;border-collapse:collapse;margin-top:4px}
table.tbl th{text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);padding:12px 12px 12px 0;border-bottom:1px solid var(--line2)}
table.tbl td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl tr:hover td{background:#1A1813}
table.tbl .who{font-weight:700;font-size:15.5px}
table.tbl .who a:hover{color:var(--blaze)}
table.tbl .sm{display:block;font-size:12.5px;color:var(--dim);margin-top:3px}
table.tbl td.right{text-align:right;padding-right:0}
@media(max-width:720px){
  table.tbl thead{position:absolute;left:-9999px}
  table.tbl td{display:block;border-bottom:0;padding:3px 0}
  table.tbl tr{display:block;border-bottom:1px solid var(--line);padding-block:14px}
  table.tbl td.right{text-align:left}
}

/* ---------------- submissions inbox ---------------- */
.filters{display:flex;flex-wrap:wrap;gap:0 4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.filters button{background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;
  font-family:var(--f);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);padding:12px 10px;min-height:44px}
.filters button:hover{color:var(--text)}
.filters button[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--blaze)}

.item{border-bottom:1px solid var(--line);padding-block:16px}
.item .head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.item .nm{font-weight:800;font-size:16px;letter-spacing:-.012em}
.item .kind{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bg);background:var(--brass);padding:3px 7px}
.item .when{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.item blockquote{margin:0 0 12px;padding-left:14px;border-left:2px solid var(--line2);
  color:var(--mid);white-space:pre-wrap;overflow-wrap:anywhere}
.item .row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.item .row .lbl{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin-right:2px}
.mailto{font-size:12.5px;color:var(--brass);overflow-wrap:anywhere}

.pill{font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:3px 7px;
  border:1px solid var(--field);color:var(--mid);white-space:nowrap}
.pill.new{border-color:var(--blaze);color:var(--blaze)}
.pill.shortlist{border-color:var(--brass);color:var(--brass)}
.pill.used{border-color:#3E6B4E;color:#5FD68A}

/* ---------------- waiting on paperwork ---------------- */
.owe{padding-block:14px;border-top:1px solid var(--line)}
.owe:first-of-type{border-top:0;padding-top:0}
.owe .top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.owe .nm{font-weight:700;font-size:15px}
.owe .ep{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.owe .need{margin:6px 0 0;font-size:13.5px;color:var(--blaze)}

.formerr{margin-bottom:14px}

/* the sticky bar is in flow, but margins on the first child collapse through
   main and slide underneath it. one pixel of padding stops that. */
main#main{padding-top:1px}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--text);color:var(--bg);
  font-size:12.5px;font-weight:700;padding:11px 18px;z-index:80;max-width:90vw}

/* ---------------------------------------------------------- go live button */
.epstate{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);padding:14px 18px;margin-top:18px}
.epstate strong{display:block;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.epstate .hint{margin-top:3px}
.staterow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.staterow input[type=url]{min-width:220px;flex:1}
.staterow select,.staterow input{min-height:44px;background:var(--panel);color:var(--text);
  border:1px solid var(--line2);padding:8px 10px;font:inherit;font-size:13px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.golive{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line2);background:var(--panel);padding:16px 18px;margin:18px 0 4px}
.golive strong{display:block;font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.golive .hint{margin-top:3px}
.btn.go{background:var(--blaze);color:#fff;border-color:var(--blaze);font-weight:900;
  padding:13px 22px;min-height:48px;font-size:12.5px}
.btn.go:hover{filter:brightness(1.08)}
.btn.go[aria-disabled=true]{background:transparent;color:var(--dim);border-color:var(--line2);
  cursor:not-allowed;filter:none}

/* ------------------------------------------------------------ run console
   Read at arm's length in a dim room while talking to four people. Every
   number and control here is bigger than it looks like it needs to be. */
.runbody{background:#0D0C0A;min-height:100vh}
main.run{max-width:1100px;margin:0 auto;padding:14px 16px 20px}

.runtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:10px}
.rtl{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;min-width:0}
.rtep{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.rtpos{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rtr{display:flex;gap:9px;align-items:baseline}
.clock{font-size:clamp(22px,3.6vw,34px);font-weight:900;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.clocklbl{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}

.runerr{border:1px solid var(--alert);color:var(--alert);background:rgba(255,138,106,.07);
  padding:11px 14px;margin-top:12px;font-size:13px;font-weight:700}

.now{padding-top:14px}
.nowhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.now h1{margin:0;font-weight:900;font-size:clamp(30px,6vw,60px);line-height:1;
  letter-spacing:-.035em;text-transform:uppercase}
/* A long block name wraps to two lines and pushes a five-question block off
   the screen. Scrolling mid-episode is the thing this console exists to
   avoid, so a long title gives up some size rather than the questions. */
.now h1.long{font-size:clamp(26px,3.9vw,40px)}
.btime{display:flex;gap:9px;align-items:baseline;white-space:nowrap}
.bclock{font-size:clamp(30px,6vw,60px);font-weight:900;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.bclock.amber{color:var(--brass)}
.bclock.over{color:var(--alert)}
.btarget{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* The cue is what he says. The warn is what he must not forget. They have to
   be tellable apart at a glance, so they get different edges and colours. */
.cue{margin:18px 0 0;border-left:4px solid var(--blaze);padding:10px 0 10px 18px;
  font-size:clamp(19px,2.9vw,27px);font-weight:700;line-height:1.28;color:var(--text)}
/* Named rwarn, not warn. A bare .warn collides with .chip.warn and with the
   episode tile's own .warn, and this rule's border-left and 14px leaked onto
   every status chip in the portal. Both stylesheets load on the same page. */
/* The trap in this block. Filled, not just a rule, so it never reads as the
   same kind of thing as the cue. */
.rwarn{margin:14px 0 0;border-left:4px solid var(--alert);
  background:rgba(255,138,106,.09);padding:12px 16px 12px 18px;
  font-size:clamp(15px,1.9vw,19px);font-weight:800;line-height:1.35;color:var(--alert)}
.bnote{margin:14px 0 0;font-size:clamp(16px,2.1vw,21px);line-height:1.45;color:var(--text)}

.script{margin-top:18px;border:1px solid var(--brass);background:rgba(195,154,94,.06);padding:16px 18px}
.script h2{margin:0 0 10px;font-size:10.5px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass)}
.script p{margin:0 0 12px;font-size:clamp(18px,2.7vw,25px);line-height:1.45;color:var(--text)}
.script p:last-child{margin-bottom:0}

.qs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.qnone{color:var(--dim);font-size:15px;font-style:italic;padding-block:6px}
.q{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line2);color:var(--text);
  padding:16px 18px;min-height:64px;font:inherit}
.q:hover{border-color:var(--field)}
.qn{font-size:13px;font-weight:900;color:var(--dim);font-variant-numeric:tabular-nums;flex:none;min-width:16px}
.qt{font-size:clamp(17px,2.4vw,23px);font-weight:700;line-height:1.28;flex:1}
.qsub{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blaze);flex:none}
.qspare{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);flex:none}
.q.spare{border-style:dashed}
/* Six or more questions in one block. */
.qs.many{gap:6px}
.qs.many .q{min-height:52px;padding:10px 16px}
.qs.many .qt{font-size:clamp(16px,2vw,20px)}
/* Tapped: struck through and dimmed, so what is left reads at a glance. */
.q.done{background:transparent;border-color:var(--line);color:var(--dim)}
.q.done .qt{text-decoration:line-through;font-weight:400}
.q.done .qsub{color:var(--dim)}

/* Coming up. Daniel asked for this to be obvious at a glance instead of a
   line of small text at the bottom, so it gets a panel of its own. */
.next{margin-top:24px;border:1px solid var(--line2);background:var(--panel);
  padding:14px 18px;display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap}
.next h2{margin:0;font-size:11px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blaze);flex:none}
.next p{margin:0;font-size:clamp(20px,3vw,30px);font-weight:900;line-height:1.1;
  letter-spacing:-.02em;color:var(--text);flex:1;min-width:0}
.nextlen{font-size:clamp(17px,2.2vw,24px);font-weight:900;color:var(--mid);
  font-variant-numeric:tabular-nums;flex:none}

/* Hit mid-sentence, so nothing here is small. */
.runbar{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.rb{flex:1;min-width:140px;min-height:68px;cursor:pointer;font:inherit;
  font-size:15px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  background:var(--panel);border:1px solid var(--line2);color:var(--text)}
.rb:hover{border-color:var(--field)}
.rb:disabled{opacity:.35;cursor:not-allowed}
.rbplay{flex:2;background:var(--blaze);border-color:var(--blaze);color:#fff}
.rbplay.on{background:var(--brass);border-color:var(--brass);color:#14130F}
.rbnext{flex:2}
.rbprev{flex:1;min-width:110px}
/* Visible once the clock has run, because after a dry run the question is
   always "how do I put this back to zero". Deliberately the least inviting
   button in the bar. */
.rbreset{flex:0 1 auto;min-width:120px;background:transparent;border-color:var(--line);
  color:var(--dim);font-size:12.5px}
.rbreset:hover{border-color:var(--alert);color:var(--alert)}

/* One compact strip. These are references, not things he reads mid-sentence,
   so they must not push the rundown off the screen. */
.runfoot{margin:16px 0 0;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;
  font-size:11.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px}
.runfoot a{color:var(--dim);text-decoration:underline}
.runfoot a:hover{color:var(--text)}
/* Quiet until you want it. Removing somebody is rare and not the point of
   the row, so it must not compete with the paperwork chips. */
/* The one action on a crew row that actually needs doing, so it reads as a
   thing to click rather than a status. */
/* Fixed columns, so the episode and the button land at the same x on every
   row of the table. A grid inside each row only aligns within that row, and
   the chip text varies in width between people, which is what looked sloppy.
   The chip column is wide enough for "Form and Release owed". */
.owerow{display:grid;grid-template-columns:minmax(0,1fr) 42px 78px;
  align-items:center;gap:10px;margin-bottom:6px}
.owerow:last-child{margin-bottom:0}
.oweep{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
/* The chip wraps rather than running into the episode. A fixed column width
   only held until the wording changed, which it did twice. */
.owerow .chip{white-space:normal;min-width:0}
.owerow .sendpaper{margin-left:0;width:100%;text-align:center;padding:6px 4px}
@media (max-width:820px){
  .owerow{grid-template-columns:1fr auto auto}
}

/* Set apart, because it is the one irreversible thing in the portal. */
.danger{border-top:1px solid var(--alert)}
.danger h2{color:var(--alert)}
.btn.warnbtn{border-color:var(--alert);color:var(--alert)}
.btn.warnbtn:hover{background:var(--alert);color:var(--bg)}

.sendpaper{background:none;border:1px solid var(--line2);color:var(--brass);font:inherit;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;min-height:32px;cursor:pointer;margin-left:6px}
.sendpaper:hover{border-color:var(--brass);color:var(--text)}
.sendpaper:disabled{opacity:.5;cursor:default}

.unbook{background:none;border:1px solid transparent;color:var(--dim);font:inherit;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 8px;min-height:32px;cursor:pointer;margin-left:4px}
.unbook:hover{border-color:var(--alert);color:var(--alert)}

.outwho{margin:2px 0 10px;font-size:16px;font-weight:800;color:var(--text)}

.glink{font-size:11px;color:var(--mid);background:var(--panel);padding:3px 7px;
  border:1px solid var(--line);word-break:break-all}
.linky{background:none;border:0;color:var(--dim);font:inherit;font-size:11.5px;
  text-decoration:underline;cursor:pointer;padding:8px 0 8px 14px;min-height:44px}
.linky:hover{color:var(--alert)}

/* A laptop is about 780px tall once the browser chrome is gone, and the
   anchor block plus a sponsor script overflow that. Give back some size
   rather than make him scroll mid-episode. */
@media (max-height:820px) and (min-width:641px){
  main.run{padding-top:10px}
  .now{padding-top:10px}
  .now h1{font-size:clamp(26px,4.4vw,44px)}
  .now h1.long{font-size:clamp(23px,3.2vw,32px)}
  .bclock{font-size:clamp(26px,4.4vw,44px)}
  .cue{font-size:clamp(17px,2.2vw,22px);padding-block:8px}
  .rwarn{font-size:clamp(14px,1.7vw,17px);padding-block:10px}
  .bnote{font-size:clamp(15px,1.8vw,18px)}
  .qs{margin-top:14px;gap:6px}
  .q{min-height:54px;padding:11px 16px}
  .qt{font-size:clamp(16px,2vw,20px)}
  .qs.many .q{min-height:46px;padding:8px 14px}
  .qs.many .qt{font-size:clamp(15px,1.8vw,18px)}
  .script{margin-top:12px;padding:12px 16px}
  .script p{font-size:clamp(16px,2.2vw,21px);margin-bottom:8px}
  .next{margin-top:14px;padding:10px 16px}
  .next p{font-size:clamp(18px,2.4vw,25px)}
  .runbar{margin-top:14px}
  .rb{min-height:58px}
  .runfoot{margin-top:10px;padding-top:9px}
}

@media (max-width:640px){
  .rb{min-height:64px;min-width:100%}
  .rbprev,.rbnext,.rbplay{flex:1 1 100%}
  /* On a phone the sub and the spare tag drop under the question instead of
     fighting it for the row. Without this the question text is squeezed into
     a narrow column and the sub runs off the screen. */
  .q{flex-wrap:wrap}
  .qt{flex:1 1 100%;min-width:0}
  .qsub,.qspare{flex:0 0 auto;margin-left:26px}
}