/* Programming and Staffing Build — Live Industry Lab look: black ground, off-white type, brand red. Phone first (320 px works), then 640, then 960 (step list becomes a left column).
   Shared classes (no area file restyles them): .btn .btn.primary .btn.sm .btn.ghost .seg .chips .chip .f .row .card .tbl .money .num .muted .hint .flag .pill .meter .bar .kv .two
   Area prefixes: pg- PROG, st- STAFF, dc- DOCS, ex- EXAMPLES, op- CONTENT, in- INSTRUCTOR, fp- the venue file panel. */
:root{
  --bg:#0a0a0a; --panel:#131313; --panel-2:#1b1b1b; --panel-3:#262626;
  --line:rgba(244,241,236,.14); --line-2:rgba(244,241,236,.26); --edge:rgba(244,241,236,.55);
  --ink:#f4f1ec; --muted:#a8a8a8; --faint:#8c8c8c;
  --red:#e80000; --red-text:#ff5252; --red-dark:#b80000; --red-wash:rgba(232,0,0,.13);
  --ok:#3ecf74; --warn:#f2b33d; --bad:#ff5252; --blue:#5aa8ff; --paper:#f7f2e3;
  --fix:var(--bad); --note:var(--blue);
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --label:"Bebas Neue","Oswald","Arial Narrow",sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --hdr:57px; --bar:54px; --hudh:70px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr) + var(--bar) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;padding-bottom:env(safe-area-inset-bottom,0px);overflow-wrap:anywhere}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0 0 10px}
a{color:var(--ink);text-underline-offset:3px}
button{font:inherit;color:inherit}
input,textarea,select{font:inherit;font-size:16px;color:var(--ink);background:var(--panel-2);border:1px solid var(--edge);border-radius:4px;padding:9px 10px;width:100%;min-height:44px}
textarea{min-height:92px;resize:vertical}
input::placeholder,textarea::placeholder{color:#a8a8a8;opacity:1}          /* AUD-A11Y-14: 4.5:1 on the field, borders 3:1 */
input:focus,textarea:focus,select:focus{outline:2px solid var(--ink);outline-offset:1px}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--bad);outline:2px solid var(--bad)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}
[hidden]{display:none !important}
.muted{color:var(--muted)} .hint{color:var(--muted);font-size:13.5px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#000;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

/* header */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 8px;background:#000;border-bottom:3px solid var(--red);min-width:0;min-height:var(--hdr)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand__t{font-family:var(--display);text-transform:uppercase;font-size:21px;letter-spacing:.02em;white-space:nowrap}
.top__v{font-family:var(--label);letter-spacing:.12em;font-size:19px;color:var(--muted);flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcode{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:36px;padding:2px 10px;background:#fff;color:#000;border:0;border-radius:4px;cursor:pointer;font-family:var(--display);letter-spacing:.12em;font-size:17px;line-height:1}
.vcode__l{font-family:var(--label);font-size:12px;letter-spacing:.14em;color:#555}
.vcode b{font-weight:400}
.vinvite{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-height:36px;padding:2px 10px;background:transparent;color:var(--ink);border:1px solid var(--line-2);border-radius:4px;cursor:pointer;font-family:var(--label);letter-spacing:.1em;font-size:15px}
.top__r{display:flex;align-items:center;gap:10px;font-size:12.5px;margin-left:auto;flex:0 1 auto;min-width:0;text-align:right}
#herecount{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hdot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--faint)} .hdot.on{background:var(--ok)}
.here__n{display:none;font-family:var(--label);letter-spacing:.06em;font-size:15px}
#savestate{min-width:0;line-height:1.2;overflow-wrap:anywhere}
main{max-width:1500px;margin:0 auto;padding:0 16px 40px}
.code{font-family:var(--display);letter-spacing:.12em;background:#fff;color:#000;padding:1px 8px;border-radius:3px}

/* buttons and forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border:2px solid var(--ink);border-radius:4px;background:transparent;font-family:var(--label);letter-spacing:.14em;font-size:19px;cursor:pointer;text-decoration:none;overflow-wrap:normal}
.btn:hover{background:var(--panel-3)} .btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff} .btn.primary:hover{background:var(--red-dark)}
.btn.sm{min-height:36px;padding:4px 12px;font-size:16px;letter-spacing:.1em} .btn.ghost{border-color:var(--line-2);color:var(--muted)}
.btn.arming,.arming{background:var(--red);border-color:var(--red);color:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0;font-size:inherit}
label.f,.f{display:block;font-size:13px;color:var(--muted);margin:12px 0 0}
label.f input,label.f textarea,label.f select{margin-top:4px;color:var(--ink)}
.two{display:grid;grid-template-columns:1fr;gap:0 14px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:44px;padding:4px 14px;background:var(--panel-2);border:1px solid var(--edge);border-radius:4px;cursor:pointer;font-size:15px;text-align:left}
.seg button[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.seg button small{display:block;font-size:12px;opacity:.8} .seg button[aria-pressed=true] small{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:4px 14px;background:var(--panel-2);border:1px solid var(--edge);border-radius:22px;cursor:pointer;font-size:15px}
.chip[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
span.chip,div.chip{min-height:0;padding:2px 10px;font-size:13px;cursor:default}
.chip.ok{border-color:var(--ok);color:var(--ok)} .chip.warn{border-color:var(--warn);color:var(--warn)} .chip.bad{border-color:var(--bad);color:var(--bad)}
.pill{display:inline-block;padding:1px 9px;border-radius:11px;border:1px solid var(--line-2);font-family:var(--label);letter-spacing:.1em;font-size:14px;color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin:12px 0}
/* R2B (QA-P1100-03): body has overflow-wrap:anywhere, which let a narrow table cell break "$20,490" after any digit. A money or number cell never wraps; a longer sentence that merely carries a figure (a definition list's value) still wraps at its spaces, never inside a figure. */
.money,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;overflow-wrap:normal;word-break:normal}
td.money,th.money,td.num,th.num,.money.nw,.num.nw,.money b,.num b,td.money small,td.num small{white-space:nowrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0} .kv dt{color:var(--muted)} .kv dd{margin:0}
.meter{height:10px;border-radius:5px;background:var(--panel-3);border:1px solid var(--line);overflow:hidden}
.meter>i{display:block;height:100%;background:var(--ok)} .meter.mid>i{background:var(--warn)} .meter.low>i{background:var(--bad)}
.bar{display:flex;align-items:center;gap:8px;margin:4px 0} .bar>i{display:block;height:14px;background:var(--red);border-radius:3px;min-width:2px}

/* tables: a real table on a laptop, stacked cards on a phone */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{overflow-wrap:normal;word-break:normal;font-family:var(--label);letter-spacing:.08em;font-weight:400;font-size:15px;text-align:left;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line-2)}
.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td.r,.tbl th.r{text-align:right}
/* R3 (QA-V-REGRESS-04): body has overflow-wrap:anywhere, which let the scenario table's narrow Match and Break-even columns break a word ("matc / h", "peopl / e", "reacha / ble"). In a real table (not the phone's stacked cards) these two columns wrap at spaces only, so each keeps room for its longest word; the table's own scroll box (.pg-tablewrap) takes any excess. The phone keeps the shared rule. Those columns now need about 35 px more than the 866 px a table has beside the step list, so the PROG tables give back 6 px of cell padding per column (11 columns) and still fit at 1,100 seats. */
@media (min-width:641px){
  .tbl td[data-label="Match"],.tbl td[data-label="Break-even"],.tbl .pill,.tbl .chip{overflow-wrap:normal;word-break:normal}
  .tbl.pg-tbl th,.tbl.pg-tbl td{padding-left:5px;padding-right:5px}
}
.tbl--scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:639px){
  .tbl:not(.tbl--keep) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl:not(.tbl--keep),.tbl:not(.tbl--keep) tbody,.tbl:not(.tbl--keep) tr,.tbl:not(.tbl--keep) td{display:block;width:100%}
  .tbl:not(.tbl--keep) tr{border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin:0 0 10px;background:var(--panel)}
  .tbl:not(.tbl--keep) td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:12px}
  .tbl:not(.tbl--keep) td::before{content:attr(data-label);color:var(--muted);font-size:13px;flex:0 0 40%}
  .tbl:not(.tbl--keep) td.r{text-align:right}
}

/* join / story */
.hero{text-align:center;padding:24px 0 20px}
.hero__logo{display:block;width:min(340px,70vw);margin:0 auto 8px}
.hero__logo img{display:block;width:100%;height:auto}
.kicker{font-family:var(--label);letter-spacing:.2em;color:var(--red-text);font-size:17px;margin:4px 0}
.hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,11vw,86px);line-height:.95;margin:0 0 14px}
.story{max-width:40em;margin:0 auto;text-align:left}
.story__t{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,6vw,34px);line-height:1.05;margin:0 0 10px;text-align:center}
.story p{color:#dcd8d1}
.purpose{max-width:36em;margin:14px auto 0;color:var(--muted);font-size:14.5px}
.disclaimer{max-width:40em;margin:18px auto 0}
.jumpjoin{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin:0 0 10px;font-size:14px}.jumpjoin a{color:var(--muted)}.jumpjoin a.btn{color:#fff}
.joinbox{max-width:480px;margin:22px auto 0;text-align:left;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--red);border-radius:6px;padding:16px 18px 18px}
.joinbox__lead{font-size:14.5px;color:#d7d3cc}
.label-h{font-family:var(--label);letter-spacing:.16em;font-size:20px;margin:8px 0 2px}

/* the numbers strip */
.hud{display:flex;gap:8px;overflow-x:auto;padding:10px 0 8px;scrollbar-width:thin}
.hud__i{flex:1 0 148px;min-width:148px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 10px;display:flex;flex-direction:column}
.hud__l{font-family:var(--label);letter-spacing:.1em;font-size:14px;color:var(--muted);line-height:1.1}
.hud__v{font-family:var(--display);font-size:22px;font-weight:400;line-height:1.15;font-variant-numeric:tabular-nums}
.hud__n{font-size:11.5px;color:var(--faint);line-height:1.2}
/* AUD-STUDENT-17: on a phone only the first two tiles show; a soft fade on the right edge says there are more, and goes when the strip is scrolled to its end (app.js sets data-more and data-end) */
.hud[data-more="1"]:not([data-end="1"])::after{content:"";position:sticky;right:0;flex:0 0 30px;margin-left:-38px;align-self:stretch;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,10,0),var(--bg) 80%)}
@media (min-width:960px){.hud::after{display:none!important}}
@media (max-width:959px){.hud__v{font-size:18px}.hud__i[data-hud="mix"]{flex-basis:200px;min-width:200px}}   /* phone: the strip scrolls sideways, so the long talent-mix words get a wider tile instead of four lines */
.hud__i[data-hud="net"]{flex:2.4 0 250px}   /* the venue-net tile carries a whole plain sentence (“this is not profit”), so it is wider than the rest */

/* the shell: step list + one panel */
.shell{display:block}
.stepbar{position:sticky;top:calc(var(--hdr) - 3px);z-index:20;display:flex;gap:6px;align-items:stretch;height:var(--bar);padding:5px 0;background:var(--bg);box-shadow:0 7px 7px -3px var(--bg)}
.stepbar button{min-height:44px;background:var(--panel);border:1px solid var(--line-2);border-radius:6px;cursor:pointer}
.stepbar button:disabled{opacity:.35;cursor:default}
.sb__n{flex:0 0 44px;font-size:26px;line-height:1}
.sb__m{flex:1 1 0;min-width:0;text-align:left;padding:2px 12px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb__c{color:var(--muted)} .sb__m b{font-weight:600}
.steps-nav{display:none}
body.drawer .steps-nav{display:block;position:fixed;left:0;right:0;top:calc(var(--hdr) + var(--bar) + 6px);bottom:0;overflow:auto;z-index:25;background:var(--bg);padding:8px 16px 40px}
.sl__g{font-family:var(--label);letter-spacing:.16em;font-size:16px;color:var(--red-text);margin:14px 0 4px}
.sl__i{display:grid;grid-template-columns:14px 24px 1fr auto;gap:0 8px;align-items:center;width:100%;min-height:46px;padding:6px 10px;margin:0 0 4px;background:var(--panel);border:1px solid var(--line);border-radius:6px;text-align:left;cursor:pointer}
.sl__i.on{border-color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
.sl__i.soon{opacity:.7}
.sl__n{font-family:var(--label);font-size:17px;color:var(--faint)}
.sl__t{font-size:15px;line-height:1.25}
.sl__s{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sl__f{font-family:var(--label);letter-spacing:.06em;font-size:13px;padding:0 7px;border-radius:9px;border:1px solid}
.sl__f.fix{color:var(--bad);border-color:var(--bad)} .sl__f.warn{color:var(--warn);border-color:var(--warn)}
.sl__p{margin:12px 2px 0}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--faint);display:inline-block}
.dot.doing{border-color:var(--warn);background:linear-gradient(90deg,var(--warn) 50%,transparent 50%)} .dot.done{border-color:var(--ok);background:var(--ok);position:relative}
.dot.done::after{content:"";position:absolute;left:2px;top:-1px;width:3px;height:6px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}          /* AUD-A11Y-17: a half dot for Started and a check for Complete, not hue alone */
@media (max-height:500px){ .stepbar{position:static;box-shadow:none} }          /* AUD-A11Y-13: on a landscape phone the step bar scrolls away instead of taking a third of the screen */

/* the frame around every panel */
.panel{min-width:0;max-width:900px}
.frame__h{margin:14px 0 6px}
.frame__part{font-family:var(--label);letter-spacing:.18em;color:var(--red-text);font-size:16px;margin:0}
.frame__t{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,7vw,44px);line-height:1}
.frame__t:focus{outline:none}
.frame__intro{font-size:16.5px;color:#dcd8d1;margin:10px 0}
.why{margin:10px 0;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 14px}
.why summary{cursor:pointer;font-family:var(--label);letter-spacing:.14em;font-size:18px;min-height:32px}
.why__b{color:#cfcbc4;padding:4px 0 6px}
.panel__body{margin:14px 0 10px}
.panel__err,.notready{padding:14px 16px;border:1px solid var(--warn);border-left:6px solid var(--warn);border-radius:6px;background:var(--panel);margin:12px 0}
.coach{margin:18px 0 10px}
.coach__h{font-family:var(--label);letter-spacing:.14em;font-size:20px;margin:0 0 6px}
.coach__c{font-family:var(--body);letter-spacing:0;font-size:13px;color:var(--muted);margin-left:8px}
.flags{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.flag{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--note);border-radius:6px;padding:9px 12px}
.flag.fix{border-left-color:var(--fix)} .flag.warn{border-left-color:var(--warn)} .flag.ok{border-left-color:var(--ok)}
.flag__lv{flex:0 0 auto;font-family:var(--label);letter-spacing:.1em;font-size:14px;padding:0 8px;border-radius:3px;background:var(--panel-3);margin-top:2px}
.flag.fix .flag__lv{background:var(--fix);color:#000} .flag.warn .flag__lv{background:var(--warn);color:#000} .flag.ok .flag__lv{background:var(--ok);color:#000} .flag.note .flag__lv{background:var(--note);color:#000}
.flag__b{min-width:0;flex:1 1 0}
.flag__t{margin:0}
.flag__more{margin-top:4px;font-size:14px;color:#cfcbc4} .flag__more summary{cursor:pointer;color:var(--muted);min-height:28px}
.model{margin:14px 0;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 14px}
.model>summary{cursor:pointer;font-family:var(--label);letter-spacing:.14em;font-size:18px;min-height:32px}
.refs{margin:14px 0}
.refs__h{font-family:var(--label);letter-spacing:.14em;font-size:18px;margin:0 0 4px}
.refs__l{margin:0;padding-left:20px;font-size:14.5px} .refs__l li{margin:0 0 6px}
.refs__n,.refs__mla{display:block;color:var(--muted);font-size:12.5px}
.refs__first{margin:2px 0 4px} .refs__l--first{margin-bottom:8px}
.refs__more>summary{cursor:pointer;color:var(--muted);min-height:32px;font-size:14.5px}
.refs__avoid{font-size:13.5px;color:var(--muted);margin:8px 0 0}
.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:22px 0 10px}
.codeline{margin:18px 0 0}

/* the venue file panel (FOUNDATION): fp- */
.fp-group{font-family:var(--label);letter-spacing:.16em;font-size:20px;color:var(--red-text);margin:22px 0 4px}
.fp-q{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin:10px 0}
.fp-q__ask{font-size:17px;font-weight:600;margin:0 0 2px}
.fp-q__why{color:var(--muted);font-size:13.5px;margin:0 0 8px}
.fp-q__blank{font-size:13px;color:var(--warn);margin:6px 0 0}
.fp-q__needs{font-size:12.5px;color:var(--faint);margin:6px 0 0}
.fp-opts{display:grid;gap:6px}
.fp-sq{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2)}
.fp-helper{font-size:14px;color:#dcd8d1;background:var(--panel-2);border-radius:6px;padding:8px 12px;margin-top:8px}
.fp-comp{display:grid;gap:8px;grid-template-columns:1fr;margin:6px 0;padding:8px;background:var(--panel-2);border-radius:6px}
.fp-tell{margin:22px 0 6px;padding:14px 16px;border:1px solid var(--line-2);border-left:6px solid var(--red);border-radius:6px;background:var(--panel)}
.fp-tell h3{font-family:var(--label);letter-spacing:.14em;font-size:20px;margin:0 0 6px}
.fp-tell p{margin:0 0 8px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);max-width:min(92vw,560px);background:#fff;color:#000;padding:10px 16px;border-radius:6px;font-size:15px;box-shadow:0 6px 24px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* wider screens */
@media (min-width:640px){
  .two{grid-template-columns:1fr 1fr}
  .fp-opts.cols{grid-template-columns:1fr 1fr}
  .here__n{display:none}
}
@media (min-width:960px){
  html{scroll-padding-top:calc(var(--hdr) + var(--hudh) + 8px)}
  .hud{position:sticky;top:calc(var(--hdr) - 3px);z-index:19;background:var(--bg);padding:8px 0;height:var(--hudh);overflow:hidden}
  :root{--hudh:118px}
  .hud__i{flex:1 1 0;min-width:0;padding:4px 10px}
  .hud__i[data-hud="net"]{flex:2.4 1 0}
  .hud__i[data-hud="mix"]{flex:1.7 1 0}   /* the course's own words ("70% local, 30% regional/national") need a wider tile or they wrap to four lines on a 960 to 1200 px laptop */
  .hud__v{font-size:20px}
  .shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
  .stepbar{display:none}
  .steps-nav,body.drawer .steps-nav{display:block;position:sticky;top:calc(var(--hdr) + var(--hudh) + 4px);left:auto;right:auto;bottom:auto;max-height:calc(100vh - var(--hdr) - var(--hudh) - 16px);overflow:auto;z-index:1;padding:0 4px 0 0;background:transparent}
}
@media (max-width:639px){
  .top{gap:8px;padding-left:10px;padding-right:10px}
  .brand__t,.vinvite__t,.vcode__l,.here__t{display:none}
  .here__n{display:inline}
  .top__r{flex-direction:column;align-items:flex-end;gap:0;line-height:1.15}
  #savestate{font-size:11px;max-width:84px}
  .top__v{font-size:17px}
}
@media (max-width:420px){ .brand__t{display:none} .vinvite__t{display:none} }
/* tap targets on a phone: 44px tall or wide enough (wave 3; PROG's audit at 390 x 844 found the disclosure rows, the small buttons and the text links under 44px) */
@media (max-width:639px){
  main summary,.why summary,.model>summary,.flag__more summary{min-height:44px;box-sizing:border-box;padding-top:10px;padding-bottom:10px}
  .btn.sm{min-height:44px}
  .linkbtn{padding:12px 4px;margin:-12px -4px}
}

/* Round 2A: the follow-up questions in the venue file (R-038, R-039) and the two mission pick-lists */
.fp-fuhost:empty{display:none}
.fp-fu{margin:10px 0 2px;padding:10px 12px;background:var(--panel-2);border:1px solid var(--warn);border-left:5px solid var(--warn);border-radius:6px}
.fp-fu__q{margin:0 0 6px;font-size:15.5px}
.fp-fu .row{margin:6px 0 0}
.fp-fu--done{border-color:var(--line-2);border-left-color:var(--ok);background:var(--panel)}
.fp-fu--done p{margin:0;font-size:13.5px;color:var(--muted)}

/* Round 2A (AUD-REQ-2-08, -09): the header at tablet widths and its tap targets. Between 640 and 899 px the brand words, the invite words and "Just you in this venue" are
   dropped (the logo, the venue name, the code, the invite button and the count stay), so nothing pushes the page wider than the window at 768 or 700. Every header control is
   at least 44 x 44 on a phone or a tablet. */
@media (max-width:899px){
  .brand__t,.vinvite__t,.here__t{display:none}
  .here__n{display:inline}
}
@media (max-width:959px){
  .brand{min-width:44px;min-height:44px;justify-content:center}
  .vcode,.vinvite{min-height:44px}
  .vinvite{min-width:44px}
  .skip{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
}

/* Round 2A (AUD-A11Y-01, -02, -03): the phone step list, the toast and the refusal note under a box */
.sl__close{display:none}
@media (max-width:959px){
  body.drawer .steps-nav{top:var(--drawertop,calc(var(--hdr) + var(--bar) + 6px))}
  body.drawer .sl__close{display:block;margin:0 0 6px}
}
.toast{left:16px;right:16px;margin:0 auto;width:max-content;max-width:min(calc(100vw - 32px),560px);transform:translateY(20px)}
.toast.show{transform:none}
.fielderr{margin:6px 0 0;padding:6px 10px;border-left:4px solid var(--bad);background:var(--panel-2);color:#ffd6d6;font-size:14px}

/* Round 2A (AUD-A11Y-08, -09, -11, -12): text floors, the unsent-state warning, tap sizes, names that wrap */
#savestate.savewarn{color:var(--warn);font-weight:700;max-width:none}
#savestate.savewarn::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--warn);margin-right:6px;vertical-align:baseline}
#savestate{font-size:12px}
.hud__n{font-size:12px}
.hint,.fp-q__why{font-size:14px}
label.f,.f{font-size:14px}
.seg button{min-width:44px}
.fp-more{margin:0 0 8px;font-size:14px;color:var(--muted)}
.fp-more>summary{cursor:pointer;color:var(--ink);min-height:32px;padding:4px 0}
.fp-more p{margin:4px 0 0}
@media (pointer:coarse){
  main summary,.why summary,.model>summary,.flag__more summary{min-height:44px;box-sizing:border-box;padding-top:10px;padding-bottom:10px}
  .btn.sm{min-height:44px}
  .linkbtn{padding:12px 4px;margin:-12px -4px}
}
@media (max-width:639px){
  .top__v{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.1;font-size:15px}
  .sb__m{white-space:normal;line-height:1.15;padding-top:2px;padding-bottom:2px}
  #savestate{font-size:12px}
  #savestate.savewarn{max-width:124px}   /* wraps to three short lines so the venue name keeps its room in the header */
}