/* callboard styles. This was the <style> block at the top of index.html;
   it moved out on 2026-09-02 so the page is markup and code, and a stylesheet
   is a stylesheet. Hosting serves everything no-cache, so no version bump is
   needed when this changes. Load order matters: the tokens at the top drive
   every colour below, and the theme attribute is set by the tiny inline script
   in index.html before this sheet is parsed. */
:root{
  color-scheme:dark;
  /* ink-faint was #6b7484: ~3.1-3.8:1, under the 4.5:1 body-text bar and used
     ~120 times at small sizes. Lifted so secondary text is actually readable. */
  --bg:#14161c; --surface:#1b1f28; --surface2:#232834; --line:#2f3644;
  --ink:#e9e7e3; --ink-dim:#a7b0bf; --ink-faint:#8b95a6;
  --teal:#2ec4b6; --coral:#f2607f; --amber:#ffb703; --violet:#9b5de5; --club:#4cc9f0;
  --accent:var(--teal); --glow:0 0 0 3px rgba(46,196,182,.18); --bulb:#ffd166;
  --radius:16px; --radius-sm:10px;
  --font-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-body:'Inter',ui-rounded,"SF Pro Rounded",-apple-system,Segoe UI,Roboto,sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.18), 0 10px 30px rgba(0,0,0,.28);
  --shadow-lg:0 24px 64px rgba(0,0,0,.5);
}
:root[data-theme="house"]{color-scheme:light;
  /* The light theme is for a lit room, and its ink-faint (#8a91a0) failed even
     the 3:1 large-text bar on cream. Darker faint, and darker teal/amber so the
     accents survive as text. */
  --bg:#efe9dd; --surface:#fbf7ef; --surface2:#f2ebdd; --line:#ddd2bd;
  --ink:#20242c; --ink-dim:#4c5361; --ink-faint:#6b7280;
  --teal:#0b6f66; --coral:#b0143f; --amber:#8f5a08; --violet:#5d31a6; --club:#0b6a8f;
  --bulb:#c98a00; --glow:0 0 0 3px rgba(15,139,128,.16);
}
:root[data-theme="tech"]{
  /* Deliberately dim for a dark house, but the old faint (#5c4a22) sat at ~2.3:1
     and the body then multiplied everything down again with a brightness filter.
     Palette does the dimming; the double-dim filter is gone, and dim/faint are
     lifted so secondary text is legible without blinding anyone. */
  --bg:#0a0708; --surface:#130d0e; --surface2:#1a1112; --line:#2a1a1b;
  --ink:#d8b43c; --ink-dim:#bd9730; --ink-faint:#9c7e2c;
  --teal:#c96b2e; --coral:#c0392b; --amber:#d0872e; --violet:#a5563c; --club:#b0793a;
  --accent:#d0872e; --bulb:#7a5a1a; --glow:0 0 0 3px rgba(201,130,42,.15);
}
*{box-sizing:border-box}
/* A class with an explicit `display` beats the `hidden` attribute, so anything
   hidden while also being a grid or flex box stays on screen. The rail already
   needed its own override for this; do it once, properly. */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Identity headings in Fraunces for a warm, playbill character; body and the
   smaller incidental h3s stay in Inter so the serif never turns up at a size it
   reads oddly. opsz lets the serif hold up from a 17px card title to a 27px page
   title. */
h1,h2,.showcard h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;font-optical-sizing:auto}
header{padding:18px 24px 0;position:relative;z-index:60}
.marquee{display:flex;align-items:center;gap:16px;border:2px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:12px 18px;position:relative;flex-wrap:wrap}
/* bulbs clip themselves so the marquee can let the show menu overflow */
.bulbs{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.bulbs i{position:absolute;top:5px;width:5px;height:5px;border-radius:50%;background:var(--bulb);animation:chase 2.4s infinite}
@keyframes chase{0%,100%{opacity:.2}50%{opacity:.95}}
.wordmark{font-family:var(--font-display);font-size:25px;font-weight:600;letter-spacing:-.3px;line-height:1.05}
.wordmark b{color:var(--accent)}
.tagline{color:var(--ink-faint);font-size:12px}
.showpick{position:relative;z-index:70}
.showpick>button{font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:var(--surface2);
  color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 14px;display:flex;gap:9px;align-items:center}
.showpick .track{font-size:11.5px;font-weight:800;letter-spacing:.07em;padding:2px 6px;border-radius:5px;
  background:var(--accent);color:var(--bg)}
.showpick .track:empty{display:none}
/* A guest judge's show is a label: no caret, no menu. */
.showpick.plain>button{cursor:default}
.showpick.plain .caret{display:none}
.menu{position:absolute;top:calc(100% + 6px);left:0;z-index:80;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:6px;min-width:290px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.menu.on{display:block}
.menu button{width:100%;text-align:left;font:inherit;font-size:13px;cursor:pointer;background:transparent;
  border:none;color:var(--ink);padding:9px 11px;border-radius:9px;display:flex;justify-content:space-between;gap:10px}
.menu button:hover,.menu button[aria-current="true"]{background:var(--surface2)}
.menu small{color:var(--ink-faint);font-size:12px}
.menu .hd{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--ink-faint);padding:8px 11px 4px}
/* These were three 13px glyphs in --ink-dim on --surface2: technically present,
   practically invisible, and nothing said what they did. Words, real contrast,
   and a label, because "Tech" is a lighting state a person chooses on purpose
   rather than a decoration. */
.themes{display:flex;gap:4px;margin-left:auto;align-items:center}
.themelbl{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-right:4px}
.themes button{font:inherit;font-size:12px;font-weight:700;cursor:pointer;background:var(--surface2);
  color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
/* The rail's fly-out wrapper is Box office's alone. To every other look it does
   not exist: its children lay out as if it were not there. */
.fly{display:contents}
/* Two switches side by side: Look, then Screen. Only the first pushes right. */
.themes.looks + .themes{margin-left:10px}
.themes button:hover{border-color:var(--accent);color:var(--ink)}
.themes button[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:transparent}
nav .tag{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--coral);margin-left:6px;vertical-align:2px}
/* two-level shell: season chrome on top, show rail on the left */
.crumb{display:flex;align-items:center;gap:10px;min-width:0}
.crumb .home{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.3px;cursor:pointer;
  background:none;border:none;color:var(--ink);padding:0;line-height:1}
.crumb .home b{color:var(--accent);font-weight:700}
.crumb .sep{color:var(--ink-faint);font-size:20px}
.crumb .season{color:var(--ink-faint);font-size:12.5px}
.topnav{display:flex;gap:4px;margin-left:auto}
.topnav button{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:transparent;
  color:var(--ink-faint);border:1px solid transparent;border-radius:9px;padding:7px 12px}
.topnav button[aria-current="true"]{background:var(--surface2);color:var(--ink);border-color:var(--line)}
.themes button{padding:6px 9px;font-size:12px}
.themelbl{display:none}
/* Look and Screen live behind one gear in every look (10/6). In the bar they
   wrapped the header to two rows, about 140px, at 1280 and 1440 wide; Box
   office already folded them away. A click opens it, not :focus-within,
   because Safari never focuses a clicked button and the panel stayed shut. */
.prefs{position:relative;flex:none}
.topnav + .prefs{margin-left:6px}
.prefsbtn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid transparent;
  background:transparent;cursor:pointer;border-radius:50%}
.prefsbtn::before{content:"";width:21px;height:21px;background:var(--ink-faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E") center/contain no-repeat}
.prefsbtn:hover,.prefs.on .prefsbtn{background:var(--surface2);border-color:var(--line)}
.prefsbtn:hover::before,.prefs.on .prefsbtn::before{background:var(--accent)}
.prefspanel{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:90;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  padding:16px;min-width:260px}
.prefs.on .prefspanel{display:flex}
.prefspanel .themes,.prefspanel .themes.looks + .themes{margin:0;flex-wrap:wrap}
.prefspanel .themelbl{display:block;flex:0 0 100%;margin:0 0 4px}
.shell{display:flex;align-items:flex-start}
aside#rail{width:214px;flex:0 0 214px;padding:18px 8px 40px 24px}
/* The rail keeps its own place. Every screen change scrolls the page to the
   top, and a rail that scrolled with the page lost the section you were
   working in every time: click one Tech item, land at the top, scroll back
   down to find Tech again. So on a wide screen it pins to the viewport and
   scrolls by itself, the way any app's sidebar does. */
@media(min-width:821px){
  aside#rail{position:sticky;top:0;max-height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
.railhead{padding:0 10px 12px}
.railhead span{display:block;font-weight:800;font-size:14.5px;letter-spacing:-.2px}
.railhead small{color:var(--ink-faint);font-size:12px}
/* Small header over bigger items is the right way round; the problem was that
   the header was the LOUDEST thing in the group. It was weight 800 while the
   items you actually click were weight 600 in a dimmer colour, so the furniture
   read as the content. The label is now quiet chrome with a hairline doing the
   grouping, and the items carry the weight. */
.railgroup{margin-bottom:6px;padding-top:10px;border-top:1px solid var(--line)}
.railgroup:first-of-type{border-top:none;padding-top:0}
.grouphd{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);padding:0 10px 4px;display:flex;align-items:center;gap:6px}
.grouphd .soon{background:var(--coral);color:var(--bg);border-radius:999px;padding:1px 6px;
  font-size:11px;letter-spacing:.04em}
aside#rail button{display:flex;align-items:center;width:100%;text-align:left;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;background:transparent;color:var(--ink);border:1px solid transparent;
  border-radius:9px;padding:7px 10px;margin-bottom:1px;letter-spacing:-.1px}
aside#rail button:hover{color:var(--ink);background:var(--surface2)}
aside#rail button[aria-current="true"]{background:var(--surface);color:var(--ink);border-color:var(--line)}
aside#rail button em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--ink-faint)}
aside#rail button em.bad{color:var(--bg);background:var(--coral);border-radius:999px;padding:1px 7px}
aside#rail button i.dot{width:7px;height:7px;border-radius:50%;background:var(--dot);flex:0 0 7px;margin-right:8px}
/* A department sits UNDER Departments, so it reads as a child rather than a
   peer: indented, a shade quieter, and a touch smaller. */
aside#rail button:has(i.dot){padding-left:20px;font-size:13px;font-weight:500;color:var(--ink-dim)}
aside#rail button:has(i.dot):hover{color:var(--ink)}
/* A department head's own department is a full row of its own, first in Tech,
   not a child of anything: it is what they opened callboard for. */
aside#rail button.own:has(i.dot){padding-left:10px;font-size:14px;font-weight:600;color:var(--ink)}
aside#rail button em.late{color:var(--coral);font-weight:800}
aside#rail .tag{margin-left:auto}
.chip.pick{cursor:pointer}
.chip.pick:hover{border-color:var(--accent);color:var(--ink)}
.addwrap{margin-top:2px}
.addbox{margin-top:10px;padding:12px;border:1px dashed var(--line);border-radius:11px;background:var(--surface2)}
/* An audition slot. Taken ones dim rather than disappear, because the sheet is
   also how you find out who has WHICH time, not just which times are left. */
.slotbtn{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--surface2);
  cursor:pointer;text-align:left;font:inherit;color:var(--ink);width:100%}
.slotbtn:hover{border-color:var(--accent)}
.slotbtn.taken{opacity:.62}
.slotbtn.here{opacity:1;border-color:var(--teal);box-shadow:var(--glow)}
/* The row the panel is currently scoring, in the room table and the report list. */
#roomTbl tr.on td,#rpList tr.on td{background:var(--surface2)}
#coTbl tr.no td{opacity:.5}
/* month calendar */
.calhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.calhead h2{margin:0}
.calnav{display:flex;gap:5px;margin-left:auto}
.calnav button,.calview button{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:var(--surface2);
  color:var(--ink-dim);border:1px solid var(--line);border-radius:9px;padding:6px 11px}
.calview button.on{background:var(--accent);color:var(--bg);border-color:transparent}
.calview{display:flex;gap:5px;margin-right:6px}
/* The Schedule at a month's zoom: the season calendar's grid, holding the same
   calls the week holds. A chip opens the call, an empty day makes one. */
.cgrid.wkmonth .cell{min-height:112px;cursor:cell}
.cgrid.wkmonth .cell.out{opacity:.3}
.cgrid .mev{display:block;width:100%;text-align:left;font:inherit;font-size:11px;line-height:1.35;cursor:pointer;
  background:var(--surface2);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--kind);
  border-radius:5px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgrid .mev:hover{border-color:var(--accent)}
.cgrid .mev .t{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.cgrid .mev.x{opacity:.55;border-style:dashed;text-decoration:line-through}
.cgrid .mev i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:3px;vertical-align:middle}
.cgrid .mev i.stop{background:var(--coral)}
.cgrid .mev i.warn{background:var(--amber)}
/* A draft (nobody has published it): a dashed edge AND the word, the way the
   week chip says it. Students are never sent one. */
.cgrid .mev.draft{border-style:dashed}
.cgrid .mev .dr{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.cgrid .mnote{font-size:10.5px;font-weight:700;color:var(--ink-faint);line-height:1.3}
.cgrid .mnote.no{color:var(--coral)}
.cgrid .mnote.cf{color:var(--amber)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal .dow{background:var(--surface2);color:var(--ink-faint);font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:7px 8px;text-align:center}
.cal .day{background:var(--surface);min-height:96px;padding:6px 7px;position:relative}
.cal .day.out{opacity:.35}
.cal .day.off{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 6px,var(--surface2) 6px,var(--surface2) 12px)}
.cal .dn{font-size:12px;font-weight:700;color:var(--ink-faint);margin-bottom:4px}
.cal .day.today .dn{background:var(--accent);color:var(--bg);border-radius:6px;padding:1px 5px;display:inline-block}
.cal .ev{display:block;width:100%;text-align:left;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  border:none;border-radius:5px;padding:2px 5px;margin-bottom:2px;color:var(--bg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ev.dim{background:var(--surface2);color:var(--ink-faint);font-weight:600}
.cal .note{font-size:11px;color:var(--ink-faint);font-weight:700}
.vlayers{display:flex;flex-wrap:wrap;gap:6px 15px;margin:0 0 12px;font-size:12px;color:var(--ink-dim)}
.vlayers label{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.vlayers input{accent-color:var(--accent);cursor:pointer;margin:0}
.vlayers .grp{font-size:11.5px;font-weight:800;letter-spacing:.09em;color:var(--ink-faint);align-self:center}
/* FMX bookings sit UNDER our own entries and read quieter on purpose: they are
   context about the room, not the plan. */
.cal .fx{font-size:11px;line-height:1.35;color:var(--ink-dim);padding:1px 0 1px 5px;
  border-left:2.5px solid var(--ink-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .fx b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-faint)}
.cal .day{cursor:cell}
.cal .day.picked{outline:2px solid var(--accent);outline-offset:-2px}
.mkpanel{display:none;margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);padding:14px 16px}
.mkpanel.on{display:block}
.mkpanel h3{margin:0 0 2px;font-size:15px}
.mkpanel .when{font-size:12px;color:var(--ink-faint);margin-bottom:12px}
.mkrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.mkrow > div{display:flex;flex-direction:column;gap:4px}
.mkrow label{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--ink-faint)}
.mkrow input,.mkrow select{font:inherit;font-size:13px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.mkrow input[type=text]{min-width:190px}
.mkcheck{margin-top:12px;font-size:12.5px;border-left:3px solid var(--ink-faint);padding:2px 0 2px 10px;color:var(--ink-dim)}
.mkcheck b{color:var(--ink)}
.callegend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12px;color:var(--ink-faint)}
.callegend span{display:flex;align-items:center;gap:6px}
.callegend i{width:10px;height:10px;border-radius:3px;display:inline-block}
main{padding:16px 24px 70px;max-width:1500px;flex:1;min-width:0}
/* The student rail: five items, no headings, and on a phone a tab bar along
   the bottom where a thumb can reach it. */
aside#rail.student .railhead{margin-bottom:6px}
@media(max-width:820px){
  aside#rail.student{position:fixed;left:0;right:0;bottom:0;z-index:150;margin:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--surface);
    border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.25);overflow:visible}
  aside#rail.student .railhead{display:none}
  aside#rail.student #railStudent{display:flex;width:100%;gap:4px}
  aside#rail.student #railStudent button{flex:1;justify-content:center;text-align:center;
    font-size:12px;padding:9px 4px;white-space:normal;line-height:1.15}
  body.student main{padding-bottom:96px}
}
@media(max-width:820px){
  .shell{display:block}
  aside#rail{width:auto;flex:none;padding:12px 20px 0;display:flex;gap:6px;overflow-x:auto;align-items:center}
  .railgroup{margin:0;display:flex;gap:4px;align-items:center}
  /* Keep the group label as an inline divider, not hidden: a horizontal strip of
     25 unlabeled buttons is exactly where the Cast/Tech/Company grouping matters
     most. */
  .grouphd{display:inline-block;margin:0 2px 0 6px;white-space:nowrap;border:0;padding:0}
  .railhead{display:none}
  aside#rail button{width:auto;white-space:nowrap}
  /* The Tech group's buttons are drawn into a div; let them join the strip. */
  #railShopBoard{display:contents}
}
/* season home */
.grid3{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.grid,.grid3{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h2{margin:0 0 3px;font-size:18px;letter-spacing:-.01em}
.card p.sub{margin:0 0 14px;color:var(--ink-faint);font-size:12.5px}
.view{display:none}.view.on{display:block}
label{display:block;font-size:12px;font-weight:700;color:var(--ink-dim);margin:11px 0 5px}
input,select,textarea{width:100%;background:var(--surface2);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;font:inherit}
textarea{resize:vertical;min-height:58px}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* inline-flex, not flex. A flex box is block-level, so a chip used outside a
   .chips wrapper stretched to the full width of its cell: "has to work" in the
   breakdown rendered as a full-width outlined bar instead of a pill. */
.chip{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-dim);background:var(--surface2);display:inline-flex;align-items:center;gap:7px;
  vertical-align:middle}
.chip.warn{color:var(--coral);border-color:var(--coral)}
.chip.hold{color:var(--amber);border-color:var(--amber)}
.chip.ok{color:var(--teal);border-color:var(--teal)}
.chip x,.chip .x,button.x.jobkill{cursor:pointer;opacity:.6;font-style:normal;background:none;border:0;padding:0 2px;font:inherit;color:inherit;line-height:1}
.chip .x:hover,button.x.jobkill:hover{opacity:1}
.chip .x:focus-visible,button.x.jobkill:focus-visible{opacity:1;outline:2px solid var(--accent);border-radius:4px}
.days{display:flex;gap:5px;margin-top:5px}
.days button{font:inherit;font-size:12px;font-weight:700;width:38px;padding:7px 0;cursor:pointer;
  border-radius:9px;border:1px solid var(--line);background:var(--surface2);color:var(--ink-faint)}
.days button.on{background:var(--accent);color:var(--bg);border-color:transparent}
.seg{display:flex;gap:5px;margin-top:6px}
.seg button{flex:1;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:8px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface2);color:var(--ink-faint)}
.seg button.on{background:var(--accent);color:var(--bg);border-color:transparent}
.impact{margin-top:12px;padding:11px 13px;border-radius:10px;border:1px dashed var(--line);
  background:var(--surface2);font-size:13px;color:var(--ink-dim)}
.impact b{color:var(--ink)} .impact.bad b{color:var(--coral)}
button.primary{font:inherit;font-weight:700;cursor:pointer;padding:11px 17px;border-radius:var(--radius-sm);border:none;
  background:var(--accent);color:var(--bg);box-shadow:0 2px 10px -2px var(--accent);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease}
button.primary:hover{filter:brightness(1.06);box-shadow:0 4px 16px -3px var(--accent)}
button.primary:active{transform:translateY(1px)}
/* A disabled button has to LOOK disabled. There was no rule for it anywhere, so
   "Pick one of the four above", which is disabled precisely so nobody saves a
   conflict they have not decided about, looked exactly as pressable as Approve. */
button:disabled{opacity:.42;cursor:not-allowed}
button.primary:disabled:hover{filter:none;box-shadow:none}
button:disabled:active{transform:none}
button.ghost{font:inherit;font-weight:600;cursor:pointer;padding:10px 15px;border-radius:var(--radius-sm);background:transparent;
  color:var(--ink-dim);border:1px solid var(--line);transition:border-color .12s ease, color .12s ease}
button.ghost:hover{border-color:var(--accent);color:var(--ink)}
/* A button with no class got the browser's own: a grey bevelled slab that
   ignored the theme, and in Tech the brightest thing on the screen. Most of the
   call card was one. :where() keeps this at the weight of a bare `button`, so
   every rule that names a container (.days button, .calnav button) or an id
   still wins over it. */
:where(main) button:where(:not([class])),:where(.drawer) button:where(:not([class])){font:inherit;font-weight:600;
  cursor:pointer;padding:9px 14px;border-radius:var(--radius-sm);background:var(--surface2);color:var(--ink);
  border:1px solid var(--line);transition:border-color .12s ease}
:where(main) button:where(:not([class]):not(:disabled):hover),
:where(.drawer) button:where(:not([class]):not(:disabled):hover){border-color:var(--accent)}
/* The one that cannot be taken back: Close this show, Cancel it, Delete.
   Coral outline, never filled, so it is never the loudest thing next to the
   primary button it sits beside. */
button.danger{font:inherit;font-weight:700;cursor:pointer;padding:9px 14px;border-radius:var(--radius-sm);
  background:transparent;color:var(--coral);border:1px solid var(--coral);transition:background .12s ease}
button.danger:not(:disabled):hover{background:rgba(239,71,111,.1)}
/* goBtn(): the button at the end of a sentence that names a screen. Small
   enough to sit inside an alert or a mini line, and it wraps under the words
   on a phone rather than pushing them off the side. */
button.ghost.gobtn{padding:5px 11px;font-size:12.5px;margin:6px 6px 0 0;vertical-align:middle;white-space:nowrap;
  color:var(--ink);border-color:var(--accent)}
button.ghost.gobtn::after{content:" \203A";color:var(--accent)}
.row{display:flex;gap:10px;margin-top:14px}
.alert{margin-top:9px;padding:10px 12px;border-radius:10px;font-size:13px;
  border:1px solid var(--coral);color:var(--coral);background:rgba(239,71,111,.07)}
.alert.info{border-color:var(--line);color:var(--ink-dim);background:var(--surface2)}
.alert.ok{border-color:var(--teal);color:var(--teal);background:rgba(46,196,182,.07)}
.alert.warn{border-color:var(--amber);color:var(--amber);background:rgba(255,183,3,.07)}
/* A button that reads as a link: for downloads that used to be <a href> to a
   server that no longer exists. */
button.linkish{background:none;border:0;padding:0 2px;color:var(--accent);text-decoration:underline;
  cursor:pointer;font:inherit;box-shadow:none;border-radius:0}
button.linkish:hover{color:var(--ink)}
.alert .mini-btn{font-size:12px;padding:2px 9px;margin-left:8px;vertical-align:middle}
/* say(), act(), undoable() and sure() in js/00-shell.js: the sentence that
   used to be an alert(), said right under the button that caused it. */
.sayline{margin-top:7px;font-size:13px;line-height:1.45;color:var(--coral);flex-basis:100%}
.sayline.ok{color:var(--teal)}
.sayline.info{color:var(--ink-dim)}
.sayline button.sayundo{margin-left:10px;padding:3px 11px;font-size:12.5px;vertical-align:baseline}
#sayDock{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:400;
  width:max-content;max-width:calc(100vw - 32px)}
#sayDock .sayline{margin:0;padding:10px 14px;border-radius:var(--radius-sm);background:var(--surface);
  border:1px solid currentColor;box-shadow:var(--shadow-lg)}
.row.sure{flex-basis:100%;align-items:center;flex-wrap:wrap;margin-top:8px;padding:9px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--coral);background:rgba(239,71,111,.07)}
.row.sure>span{flex:1 1 220px;color:var(--coral);font-size:13.5px}
.stars button.pip{font:inherit;padding:0;box-shadow:none}
.stars button.pip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Card marks say what they mean instead of being four coloured dots. */
.tcard .marks span{width:auto;height:auto;font-size:9px;font-weight:800;letter-spacing:.04em;
  padding:1px 4px;border-radius:4px;color:var(--bg);line-height:1.3}
.printhead{display:none}
@media print{.printhead{display:block;font-family:var(--font-display);font-size:16pt;font-weight:700;color:#000;margin:0 0 8pt}}
/* A select inside a table used to shrink to two letters. */
table select{min-width:120px}
/* The drawer is off-screen when closed, but it was still in the tab order. */
.drawer:not(.on){visibility:hidden;transition:transform .18s ease,visibility 0s linear .18s}
#saveErr{cursor:pointer}
.ghostlight{margin-top:15px;font-size:12px;color:var(--ink-faint);display:flex;align-items:center;gap:8px}
.ghostlight .b{width:8px;height:8px;border-radius:50%;background:var(--bulb);box-shadow:0 0 10px 2px var(--bulb);animation:chase 3.4s infinite}
.mini{font-size:12px;color:var(--ink-faint);margin-top:6px}
/* today */
.hero{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.hero .d{font-size:26px;font-weight:800;letter-spacing:-.5px}
.hero .c{font-size:12.5px;color:var(--ink-faint)}
.count{font-size:12px;font-weight:800;color:var(--bg);background:var(--amber);padding:4px 10px;border-radius:999px}
.tl{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.tl:last-child{border:none}
.tl .t{font-weight:800;font-size:13px;min-width:92px;color:var(--accent)}
.tl .b{flex:1}
.tl .n{font-weight:700;font-size:14px}
.tl .m{font-size:12px;color:var(--ink-faint)}
/* A row or a tile that opens what it names (callRow, Overview's tiles, the
   season page's rows). A button, so the keyboard reaches it; dressed as the
   row it was. It bleeds 8px either side so the hover tint has room and the
   words still line up with the plain rows around it. */
button.rowgo{text-align:left;font:inherit;color:inherit;background:none;border:0;border-radius:0;
  cursor:pointer;padding-left:8px;padding-right:8px;margin:0 -8px;width:calc(100% + 16px);
  -webkit-tap-highlight-color:transparent}
button.tl.rowgo{border-bottom:1px solid var(--line);padding-top:11px;padding-bottom:11px}
button.tl.rowgo:last-child{border-bottom:none}
button.rowgo:hover,button.rowgo:focus-visible{background:var(--surface2);box-shadow:inset 3px 0 0 var(--accent);outline:none}
button.stat.statgo{font:inherit;text-align:left;color:var(--ink);cursor:pointer;width:100%;display:block}
/* An outline, not a border colour: Box office draws its tiles with no border. */
button.stat.statgo:hover,button.stat.statgo:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* A row that opens something (Overview's today rows open the door sheet). */
.tl.golink{cursor:pointer;border-radius:8px}
.tl.golink:hover .n,.tl.golink:focus-visible .n{color:var(--accent);text-decoration:underline}
.tl.golink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* A student's Today (#ovMine, 41-kids.js drawMine). The rest of the Overview
   is staff's (tiles, StudentSquare posts, Show day), so a student sees this
   card and nothing else, bar the box that says the screen did not load. */
body.student #v-overview > :not(#ovMine):not(.viewerr){display:none !important}
#ovMine{max-width:760px}
#ovMine h2{margin:18px 0 2px}
#ovMine .row{flex-wrap:wrap}
.omwho{margin:4px 0 0;font-size:14px;color:var(--ink-dim)}
.omnext{margin:6px 0 0;font-size:16px;font-weight:700;color:var(--ink)}
/* One call a row: the day in its own column, so a thumb reads down the days. */
.mcall{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.mcall:last-child{border-bottom:0}
.mcall .mcd b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.mcall .mcd span{font-size:12.5px;color:var(--ink-faint)}
.mcall.now{border-left:3px solid var(--accent);padding-left:10px}
.mcall.now .mcd b{color:var(--ink)}
.mcall .mcn{font-weight:700;font-size:15px;overflow-wrap:anywhere}
.mcall .mct{font-size:13px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.mcall .mcas{font-size:13.5px;color:var(--ink);margin-top:3px}
.mcall .mcm{font-size:12px;color:var(--ink-faint);margin-top:2px;overflow-wrap:anywhere}
.mcall .mcno{font-size:12.5px;font-weight:700;color:var(--coral);margin-top:3px}
.mcall.x .mcn,.mcall.x .mct{text-decoration:line-through;opacity:.65}
.mcall .mctag{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--coral)}
@media(max-width:700px){ .mcall{grid-template-columns:64px minmax(0,1fr);gap:10px} .omnext{font-size:15px} }
.stat{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.stat .k{font-size:12px;font-weight:800;letter-spacing:.07em;color:var(--ink-faint);text-transform:uppercase}
.stat .v{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-top:3px}
.stat .s{font-size:12px;color:var(--ink-faint)}
.bar{height:5px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
/* Column counts as classes, not inline styles: an inline grid-template beats the
   mobile media query, so a phone got 5-7 tiles jammed across 375px. */
.stats.c4{grid-template-columns:repeat(4,1fr)}
.stats.c5{grid-template-columns:repeat(5,1fr)}
.stats.c7{grid-template-columns:repeat(7,1fr)}
@media(max-width:820px){.stats,.stats.c4,.stats.c5,.stats.c7{grid-template-columns:repeat(2,1fr)}}
/* Mobile: the dense multi-column grids and wide tables were fixed-column at any
   width, so on a phone the week, the shop board and every table ran off the
   side of the screen. Stack the grids and let tables scroll inside themselves. */
@media(max-width:700px){
  /* An id and a class on purpose. The full-size .wk, .cgrid and .board rules
     sit further down this file with the same one-class weight, so a bare
     one-class rule here lost to them: on a phone the week stayed seven 42px
     columns, the Calendar seven more, and the board five (10/6, the second
     time after the month's 556157a). server/test.js fails if a later rule
     could win again. */
  #wkGrid.wk,#calGrid.cgrid,#bdaBoard.board{grid-template-columns:1fr;background:transparent}
  .wk .dh{display:none}
  /* With the day headers gone, each day names itself, "Thu Oct 8", and an
     empty day folds away. Today stays, marked, even with nothing on it. */
  .wk .dc::before{content:attr(data-l);display:block;font-size:12px;font-weight:700;color:var(--ink-faint);margin-bottom:4px}
  #wkGrid.wk .dc{min-height:0}
  #wkGrid.wk .dc.bare{display:none}
  #wkGrid.wk .dc.today::before{background:var(--accent);color:var(--bg);border-radius:5px;padding:0 5px;align-self:flex-start}
  #wkGrid.wk .dc.today:empty::after{content:'Nothing called today.';font-size:12.5px;color:var(--ink-faint)}
  /* The season Calendar stacks the way the Schedule's month does: the days
     that have something on them, each naming itself. */
  #calGrid.cgrid .dow,#calGrid.cgrid .cell.out,#calGrid.cgrid .cell.bare{display:none}
  #calGrid.cgrid .cell{min-height:0}
  #calGrid.cgrid .dn{display:none}
  #calGrid.cgrid .cell::before{content:attr(data-l);font-size:12px;font-weight:700;color:var(--ink-faint);margin-bottom:2px}
  #calGrid.cgrid .cell.today::before{background:var(--accent);color:var(--bg);border-radius:5px;padding:0 5px;align-self:flex-start}
  /* A stacked month is 42 rows, most of them nothing. On a phone the month
     view keeps the days that have something on them. */
  .cgrid.wkmonth .dow,.cgrid.wkmonth .cell.out,.cgrid.wkmonth .cell.bare{display:none}
  /* Two classes on purpose: the .cgrid base rule is declared after this block
     and wins the one-column rule above, so a bare .cgrid never stacks. */
  .cgrid.wkmonth{grid-template-columns:1fr}
  .cgrid.wkmonth .cell{min-height:0}
  /* With the day-name row gone, each day names itself, the way the week does. */
  .cgrid.wkmonth .dn{display:none}
  .cgrid.wkmonth .cell::before{content:attr(data-l);font-size:12px;font-weight:700;color:var(--ink-faint);margin-bottom:2px}
  .cgrid.wkmonth .cell.today::before{background:var(--accent);color:var(--bg);border-radius:5px;padding:0 5px;align-self:flex-start}
  .nrow,.crow{grid-template-columns:1fr}
  .ltbl{min-width:0}
  #coTbl,#cfTbl,#tkTbl,#roomTbl,#compareTbl,#accTbl,#ssTbl,.maptbl{display:block;overflow-x:auto;white-space:nowrap}
}
/* table */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  padding:0 8px 8px;font-weight:800}
td{padding:9px 8px;border-top:1px solid var(--line)}
.pill{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap}
/* A pill you can press (signed, paid, Remove) still has to look like a pill,
   not a pill inside the browser's button frame. */
button.pill{font:inherit;font-size:12px;font-weight:800;border:0;cursor:pointer;line-height:inherit}
button.pill:not(:disabled):hover{filter:brightness(1.15)}
.pill.y{background:rgba(46,196,182,.14);color:var(--teal)}
.pill.n{background:rgba(239,71,111,.13);color:var(--coral)}
.pill.p{background:rgba(255,183,3,.13);color:var(--amber)}
/* a mocked screen must never be mistaken for this show's real data */
.demo{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:11px 13px;border-radius:11px;
  border:1px dashed var(--amber);background:rgba(255,183,3,.06);color:var(--amber);font-size:12.5px}
.demo b{display:block;font-size:13px}
.demo span{color:var(--ink-dim)}
.demo i{font-style:normal;font-size:15px;line-height:1.2}
aside#rail button .tag.mock{color:var(--ink-faint)}

/* buy options: several candidates, one picked */
.opts{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.opt{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface2);font-size:12.5px}
.opt.win{border-color:var(--teal);background:rgba(46,196,182,.07)}
.opt .pickbtn{flex:0 0 auto;margin-top:1px;width:17px;height:17px;border-radius:50%;cursor:pointer;
  border:2px solid var(--line);background:transparent;padding:0}
.opt.win .pickbtn{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px var(--surface2)}
.opt .body{min-width:0;flex:1}
.opt a{color:var(--ink);font-weight:700;text-decoration:none;word-break:break-all}
.opt a:hover{color:var(--accent)}
.opt .sub2{color:var(--ink-faint);font-size:12px;margin-top:2px}
.opt .cost{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.opt .cost.none{color:var(--ink-faint);font-weight:600}
.opt .rm{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.opt .rm:hover{color:var(--coral)}
.addlink{margin-top:8px;padding:10px;border:1px dashed var(--line);border-radius:10px;background:var(--surface2)}
.addlink .three{display:grid;grid-template-columns:1fr 78px 96px;gap:7px;margin-top:7px}
.addlink input{font-size:12.5px;padding:8px 9px}
.pricenote{font-size:12px;color:var(--ink-faint);margin-top:7px}
.tcard .opts-n{color:var(--amber);font-weight:800}
.dupe{margin-top:8px;padding:10px 11px;border-radius:10px;border:1px solid var(--violet);
  background:rgba(155,93,229,.07);font-size:12.5px}
.dupe b{color:var(--violet)}
.dupe .pair{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.dupe .pair span{flex:1;min-width:150px;color:var(--ink-dim)}
.dupe .pair button{font:inherit;font-size:12px;font-weight:700;cursor:pointer;border-radius:8px;
  padding:5px 10px;border:1px solid var(--line);background:var(--surface2);color:var(--ink-dim)}
.dupe .pair button.go{border-color:var(--violet);color:var(--ink)}
.dupe .pair button:hover{color:var(--ink)}
/* casting findings: one per decision, not a paragraph hiding six of them */
.findings{margin-top:4px}
.finding{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.finding:first-child{border-top:none}
.finding i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--line);margin-top:6px}
.finding.decide i{background:var(--amber)}
.finding .txt{flex:1;min-width:0;font-size:13px;line-height:1.5}
/* Was .ev, which is also the calendar's clickable event pill: its border,
   padding and pointer cursor were landing on a script quote and making a
   read-only citation look like a field you could type in. */
.finding .quo{display:block;color:var(--ink-faint);font-size:12px;font-style:italic;margin-top:3px}
/* A finding that has been answered. The answer is the point: "22 need a
   decision" with nowhere to put the decision is a number that can only ever
   say 22, forever. */
.settled{margin-top:5px;font-size:12px;color:var(--teal);line-height:1.45}
.settled b{color:var(--teal)}
.linky{background:none;border:none;padding:0 0 0 6px;font:inherit;font-size:12px;
  color:var(--ink-faint);cursor:pointer;text-decoration:underline}
.linky:hover{color:var(--accent)}
.finding .pg2{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--ink-faint);margin-top:3px}
.findhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.findhead .lbl{font-weight:700;font-size:13.5px}
.findhead .grow{flex:1}
/* ---- numbers: songs, dances, scenes ---- */
#v-numbers>.card+.card{margin-top:16px}
.nrow{display:grid;grid-template-columns:52px 1fr 190px 150px 116px;gap:12px;align-items:start;
  padding:12px 4px;border-top:1px solid var(--line)}
.nrow:hover{background:var(--surface2)}
.nrow .no{font-size:12px;font-weight:800;color:var(--ink-faint);padding-top:2px}
.nrow .no b{display:block;font-size:15px;color:var(--ink)}
.nrow .ttl{font-weight:700;font-size:13.5px;cursor:pointer}
.nrow .ttl:hover{color:var(--accent)}
.nrow .meta2{color:var(--ink-faint);font-size:12px;margin-top:3px}
.nrow .who{font-size:12px;color:var(--ink-dim);line-height:1.5}
.nrow .who .none{color:var(--ink-faint);font-style:italic}
.nrow .vid a{display:block;font-size:12px;color:var(--ink-dim);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow .vid a:hover{color:var(--accent)}
.nrow .vid .none{color:var(--ink-faint);font-size:12px;font-style:italic}
.kindpill{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;background:var(--surface2);color:var(--ink-faint)}
.kindpill.song{background:rgba(155,93,229,.16);color:var(--violet)}
.kindpill.dance{background:rgba(255,183,3,.16);color:var(--amber)}
.stpill{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.st-not-taught{background:var(--surface2);color:var(--ink-faint)}
.st-taught{background:rgba(255,183,3,.14);color:var(--amber)}
.st-cleaning{background:rgba(76,201,240,.14);color:var(--club)}
.st-frozen{background:rgba(46,196,182,.14);color:var(--teal)}
.castrow{display:flex;gap:7px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.castrow:first-child{border-top:none}
.castrow .nm{flex:1;font-weight:700}
.castrow select{width:auto;padding:4px 7px;font-size:12px}
.castrow .rm{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:15px;padding:0 3px}
.castrow .rm:hover{color:var(--coral)}
.vidrow{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface2);font-size:12.5px;margin-bottom:6px}
.vidrow .body{flex:1;min-width:0}
.vidrow a{color:var(--ink);font-weight:700;text-decoration:none;word-break:break-all}
.vidrow a:hover{color:var(--accent)}
.vidrow .sub2{color:var(--ink-faint);font-size:12px;margin-top:2px}
.vidrow .rm{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:15px;padding:0 2px}
.vidrow .rm:hover{color:var(--coral)}
.playicon{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--coral);
  color:var(--bg);font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
/* list view on the board */
.listwrap{margin-top:12px;overflow-x:auto}
.ltbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:900px}
.ltbl th{position:sticky;top:0;background:var(--surface);z-index:2;white-space:nowrap;cursor:pointer}
.ltbl th:hover{color:var(--ink)}
.ltbl td{vertical-align:top;padding:8px}
.ltbl tr:hover td{background:var(--surface2)}
.ltbl .clk{cursor:pointer;font-weight:700}
.ltbl .clk:hover{color:var(--accent)}
.exportbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.exportbar a{font:inherit;font-size:12px;font-weight:700;text-decoration:none;background:var(--surface2);
  color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.exportbar a:hover{border-color:var(--accent);color:var(--ink)}
.exportbar span{font-size:12px;color:var(--ink-faint)}
/* ---- audition intake (LIVE) ---- */
/* the audition runway: what to do next, in order, on every audition screen */
.runway{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;margin:0 0 16px;max-width:860px}
.runway h3{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.runway ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.runway li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:9px;border:1px solid transparent}
.runway li .num{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;
  border:1px solid var(--line);color:var(--ink-faint)}
.runway li .what{flex:1 1 auto;min-width:0}
.runway li .what b{display:block;font-size:13.5px}
.runway li .what span{display:block;font-size:12px;color:var(--ink-faint);line-height:1.5;margin-top:1px}
.runway li button{flex:0 0 auto;white-space:nowrap}
.runway li.done .num{background:var(--accent);border-color:transparent;color:var(--bg)}
.runway li.done .what b{color:var(--ink-dim);font-weight:600}
.runway li.next{border-color:var(--accent);background:var(--surface2)}
.runway li.next .num{border-color:var(--accent);color:var(--accent)}
.runway li.todo{opacity:.62}
/* A link step (print the sign-up sheet): never ticked, because printing is not
   recorded, so its number sits in a dashed ring instead of waiting for a tick. */
.runway li.link .num{border-style:dashed}
.runway li.here .what b::after{content:'  · on this screen';font-weight:600;font-size:11.5px;color:var(--ink-faint)}
@media (max-width:560px){.runway li{flex-wrap:wrap}.runway li button{margin-left:32px}}
.wsteps{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap;flex-direction:row}
.wsteps b{font:inherit;font-size:12px;font-weight:800;letter-spacing:.03em;padding:6px 12px;border-radius:999px;
  background:var(--surface2);color:var(--ink-faint);border:1px solid var(--line)}
.wsteps b.on{background:var(--accent);color:var(--bg);border-color:transparent}
.wsteps b.did{color:var(--teal);border-color:var(--teal)}
.paste{width:100%;min-height:130px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:11px;resize:vertical}
.maptbl{width:100%;border-collapse:collapse;font-size:12.5px}
.maptbl th{text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  padding:0 10px 7px;font-weight:800}
.maptbl td{padding:7px 10px;border-top:1px solid var(--line);vertical-align:top}
.maptbl select{width:100%;font:inherit;font-size:12.5px;padding:6px 8px;background:var(--surface2);
  color:var(--ink);border:1px solid var(--line);border-radius:8px}
.maptbl .peek{color:var(--ink-faint);font-size:12px;line-height:1.45;word-break:break-word}
.maptbl tr.warn td{background:rgba(255,183,3,.07)}
.shift{border-left:3px solid var(--amber);background:rgba(255,183,3,.08);border-radius:0 10px 10px 0;
  padding:10px 12px;margin-bottom:8px;font-size:12.5px}
.shift b{color:var(--amber)}
.crow{border-top:1px solid var(--line);padding:11px 0;display:grid;grid-template-columns:200px 1fr;gap:14px}
.crow:first-child{border-top:none}
.crow .who{font-weight:800;font-size:13px}
.crow .said{color:var(--ink-faint);font-size:12px;margin-top:3px;font-style:italic;word-break:break-word}
.cf{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;padding:5px 0;font-size:12.5px}
.cf .k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;
  border-radius:5px;background:var(--surface2);color:var(--ink-dim);border:1px solid var(--line)}
.cf .k.recurring{color:var(--teal);border-color:var(--teal)}
.cf .k.range,.cf .k.single{color:var(--club);border-color:var(--club)}
.cf .k.unusable{color:var(--amber);border-color:var(--amber)}
.cf .when{font-weight:700;font-variant-numeric:tabular-nums}
.cf .sev{font-size:12px;color:var(--ink-faint)}
.cf .ask{font-size:12px;color:var(--amber);flex-basis:100%;padding-left:2px}
.cf .none{color:var(--ink-faint);font-size:12px}
.pill2{font-size:11.5px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:999px;
  background:var(--surface2);color:var(--ink-faint);border:1px solid var(--line)}
.pill2.new{color:var(--teal);border-color:var(--teal)}
.pill2.upd{color:var(--amber);border-color:var(--amber)}
/* ---- post generator ---- */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media(max-width:900px){.posts{grid-template-columns:1fr}}
.pcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface2)}
.pcard header{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line)}
.pcard header b{font-size:12px;font-weight:800;letter-spacing:.04em}
.pcard header .ch{font-size:11px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:5px;
  background:var(--club);color:var(--bg)}
.pcard header .ch.fam{background:var(--violet)}
.pcard header button{margin-left:auto;font-size:12px;padding:5px 11px}
.psub{padding:9px 12px;border-bottom:1px solid var(--line);font-weight:700;font-size:13px}
.pbody{padding:11px 12px;white-space:pre-wrap;font-size:12.5px;line-height:1.55;color:var(--ink-dim);
  max-height:340px;overflow:auto}
.sendnow{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:9px;font-size:12.5px;
  margin-top:12px;background:var(--surface2);border-left:3px solid var(--line);color:var(--ink-dim)}
.sendnow.yes{background:rgba(239,71,111,.1);border-left-color:var(--coral);color:var(--ink)}
.pnote{font-size:12px;color:var(--ink-faint);margin-top:10px}
/* ---- season calendar (real: our calls, FMX bookings, school dates) ---- */
.calwrap{margin-top:14px}
.callayers{display:flex;flex-wrap:wrap;gap:7px 14px;margin-bottom:12px;font-size:12px;color:var(--ink-dim)}
.callayers label{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.callayers input{accent-color:var(--accent);margin:0}
.callayers .sw{width:9px;height:9px;border-radius:3px;background:var(--c)}
.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cgrid .dow{background:var(--surface2);color:var(--ink-faint);font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:7px;text-align:center}
.cgrid .cell{background:var(--surface);min-height:104px;padding:5px 6px;display:flex;flex-direction:column;gap:2px}
.cgrid .cell.out{opacity:.32}
.cgrid .cell.shut{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 6px,var(--surface2) 6px,var(--surface2) 12px)}
.cgrid .dn{font-size:12px;font-weight:700;color:var(--ink-faint)}
.cgrid .cell.today .dn{background:var(--accent);color:var(--bg);border-radius:5px;padding:0 5px;align-self:flex-start}
.cgrid .chip{font-size:11px;line-height:1.3;border-radius:4px;padding:1px 4px;border-left:2px solid var(--c);
  background:var(--surface2);color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.cgrid .chip.ours{background:rgba(46,196,182,.14);color:var(--ink)}
.cgrid .chip.school{background:transparent;font-weight:700}
.cgrid .more{font-size:11px;color:var(--ink-faint)}
.daypanel{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--surface2)}
.daypanel h3{margin:0 0 3px;font-size:14.5px}
.dayrow{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.dayrow:first-of-type{border-top:none}
.dayrow .tm{font-variant-numeric:tabular-nums;color:var(--ink-faint);min-width:96px}
.dayrow .sp{margin-left:auto;font-size:12px;color:var(--ink-faint)}
/* ---- season home: the demo's layout, over real data ---- */
.hometop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.hometop h1{margin:6px 0 2px;font-size:27px;letter-spacing:-.01em}
.hometop > #homeAdd{flex:none;margin-top:6px;white-space:nowrap}
@media(max-width:700px){.hometop{flex-wrap:wrap}.hometop > #homeAdd{margin-top:0}}
.showcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;margin-top:16px}
/* The closed shows, folded into one row at the end of the season cards. */
.closedfold{grid-column:1/-1}
.closedfold > summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-dim);padding:10px 14px;
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface)}
.closedfold > summary:hover{color:var(--ink);border-color:var(--accent)}
.closedfold .showcards{margin-top:12px}
.showcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px;
  cursor:pointer;text-align:left;font:inherit;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease}
.showcard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.showcard .tt{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.showcard h3{margin:0;font-size:17px;letter-spacing:-.01em}
.showcard .when{color:var(--ink-faint);font-size:12px}
.showcard .bars{display:flex;gap:5px;margin-top:11px}
.showcard .bars i{height:4px;border-radius:2px;background:var(--line);flex:1}
.showcard .bars i.on{background:var(--accent)}
.showcard .stat{display:flex;gap:12px;flex-wrap:wrap;white-space:nowrap;font-size:12px;color:var(--ink-faint);margin-top:9px}
.showcard .stat b{color:var(--ink)}
.showcard .stat .warn{color:var(--coral)}
.showcard.cold{opacity:.7}
.showcard.cold:hover{opacity:1}
/* The card is a group of two buttons since 10/6: the show (opens it) and its
   next step (opens the screen that step is done on). A button cannot hold a
   button, so the card's padding moved onto them. */
.showcard{padding:0;display:flex;flex-direction:column;cursor:default}
.showcard .scopen{display:block;width:100%;flex:1;text-align:left;font:inherit;color:inherit;background:none;border:0;
  cursor:pointer;padding:17px 17px 10px;border-radius:var(--radius) var(--radius) 0 0}
.showcard .scopen:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.showcard .scnext{display:block;width:calc(100% - 34px);margin:0 17px 15px;text-align:left;font:inherit;font-size:12.5px;
  font-weight:700;line-height:1.35;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface2);color:var(--ink);cursor:pointer}
.showcard .scnext::after{content:" \203A";color:var(--accent)}
.showcard .scnext:hover,.showcard .scnext:focus-visible{border-color:var(--accent);outline:none}
.showcard .scnext.quiet{cursor:default;color:var(--ink-faint);font-weight:600;background:none;border-style:dashed}
.showcard .scnext.quiet::after{content:none}
/* A student's card has no next step under it, so the show button keeps the
   card's full bottom padding. */
.showcard .scopen:last-child{padding-bottom:17px;border-radius:var(--radius)}
/* Whose call it is, on the season page and the Calendar (shortShow). */
.shtag{font-size:10.5px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:1px 6px;
  border:1px solid var(--line);color:var(--ink-dim);white-space:nowrap;flex:none}
.cgrid .chip .shtag{font-size:9.5px;letter-spacing:.03em;border:0;padding:0;margin-right:4px;color:var(--ink-faint)}
/* Rows that open things keep the line between them (button.rowgo has no border). */
button.duerow.rowgo,button.striprow.rowgo{border-bottom:1px solid var(--line)}
button.duerow.rowgo:last-child,button.striprow.rowgo:last-child{border-bottom:none}
button.dayrow.rowgo{border-top:1px solid var(--line);align-items:baseline}
.daypanel h3 + button.dayrow.rowgo{border-top:none}
.daypanel button.rowgo:hover,.daypanel button.rowgo:focus-visible{background:var(--surface)}
/* Back to <show>: on the season screens, the way back to where you were. */
.backchip{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:var(--surface2);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap;max-width:220px;
  overflow:hidden;text-overflow:ellipsis;flex:none}
.backchip::before{content:"\2039\00a0";color:var(--accent);font-weight:800}
.backchip:hover,.backchip:focus-visible{border-color:var(--accent)}
@media(max-width:820px){
  body.hasback .crumb .season{display:none}
  .backchip{max-width:150px;padding:6px 10px;flex:0 1 auto;min-width:0}
}
.duerow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.duerow:last-child{border:0}
.duerow .d{font-size:12px;color:var(--ink-faint);width:76px;flex:0 0 76px;white-space:nowrap}
.duerow .sh{font-size:11.5px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:2px 7px;
  border:1px solid var(--line);color:var(--ink-faint);white-space:nowrap}
.duerow.late .d{color:var(--coral);font-weight:700}
.striprow{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13px;border-bottom:1px solid var(--line)}
.striprow:last-child{border:0}
.striprow .dt{width:66px;flex:0 0 66px;font-size:12px;color:var(--ink-faint)}
.striprow .pip{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.striprow .sp{margin-left:auto;font-size:12px;color:var(--ink-faint)}
.striprow.clash{background:rgba(239,71,111,.08);border-radius:7px;padding-left:8px;padding-right:8px}
.grid{display:grid;gap:16px;grid-template-columns:1.05fr .95fr}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
/* The not-cast list rides along beside the 56-row casting list. It shares the
   first grid row with the roles card, so sticking it to the top of its own
   area keeps it in view for exactly as long as the roles scroll past. On one
   column there is nothing beside it, so it just sits in the flow. */
#uncastCard,#coUnplacedCard,#tkUnplacedCard{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:auto;z-index:1}
@media(max-width:900px){#uncastCard,#coUnplacedCard,#tkUnplacedCard{position:static;max-height:none}}
.ghostlight{margin-top:15px;font-size:12px;color:var(--ink-faint);display:flex;align-items:center;gap:8px}
.ghostlight .b{width:8px;height:8px;border-radius:50%;background:var(--bulb);
  box-shadow:0 0 10px 2px var(--bulb);animation:chase 3.4s infinite;flex:0 0 8px}
/* ---- dashboard ---- */
.dgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:16px;align-items:start}
@media(max-width:940px){.dgrid{grid-template-columns:1fr}}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px}
.dcard h3{margin:0 0 3px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.dcard .lead{font-size:19px;font-weight:800;letter-spacing:-.3px;margin:2px 0 10px}
.drow{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.drow:first-of-type{border-top:none}
.drow .tm{font-variant-numeric:tabular-nums;color:var(--ink-faint);min-width:92px;font-size:12px}
.drow .sp{margin-left:auto;font-size:12px;color:var(--ink-faint);white-space:nowrap}
.drow.warn .tm{color:var(--amber)}
.dempty{color:var(--ink-faint);font-size:13px;padding:6px 0}
.showrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.showrow:first-of-type{border-top:none}
.showrow:hover .nm{color:var(--accent)}
.showrow .dt{font-variant-numeric:tabular-nums;color:var(--ink-faint);font-size:12px;min-width:64px}
.showrow .nm{font-weight:700;font-size:13.5px}
.showrow .bl{font-size:12px;color:var(--ink-faint)}
.showrow .state{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.05em;padding:3px 9px;
  border-radius:999px;white-space:nowrap;border:1px solid var(--line);color:var(--ink-faint)}
.showrow .state.on{color:var(--teal);border-color:var(--teal)}
.showrow .state.soon{color:var(--amber);border-color:var(--amber)}
.showrow .cnt{font-size:12px;color:var(--ink-faint);white-space:nowrap}
.chase{display:flex;gap:9px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.chase:first-of-type{border-top:none}
.chase .tag{font-size:11px;font-weight:800;letter-spacing:.05em;padding:1px 6px;border-radius:4px}
.chase .tag.late{background:var(--coral);color:var(--bg)}
.chase .tag.pick{background:var(--amber);color:var(--bg)}
.chase .sh{margin-left:auto;font-size:12px;color:var(--ink-faint)}
/* ---- schedule (LIVE) ---- */
/* The global `input{width:100%}` stretches checkboxes into blocks and breaks
   every flex row that contains one. Exempt the ones that are not text fields. */
input[type=checkbox],input[type=radio]{width:auto;flex:0 0 auto}
.frow{display:grid;gap:10px;margin-top:12px;align-items:end}
.frow>div{min-width:0}
@media(max-width:860px){.frow{grid-template-columns:1fr !important}}
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px}
.wk .dh{background:var(--surface2);padding:7px 9px;text-align:center}
.wk .dh b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.wk .dh span{font-size:15px;font-weight:800}
.wk .dh.today span{color:var(--accent)}
.wk .dc{background:var(--surface);min-height:150px;padding:7px;display:flex;flex-direction:column;gap:6px}
.wk .dc.shut{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 7px,var(--surface2) 7px,var(--surface2) 14px)}
.wk .wkcal{font-size:11px;font-weight:700;color:var(--ink-faint);line-height:1.3}
.wk .wkcal.no{color:var(--coral)}
.wk .wkcal.cf{color:var(--amber)}
.ev{text-align:left;font:inherit;cursor:pointer;border:1px solid var(--line);border-left:3px solid var(--kind);
  background:var(--surface2);border-radius:8px;padding:6px 8px;width:100%}
.ev:hover{border-color:var(--accent)}
.ev b{display:block;font-size:12px;line-height:1.25}
.ev.x{opacity:.55;border-style:dashed}
.ev.x b,.ev.x .t{text-decoration:line-through}
.csrow.x .cst,.csrow.x .csw{text-decoration:line-through;opacity:.6}
.tl.x .n{text-decoration:line-through;opacity:.7}
.ev .t{font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.ev .n{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.ev .flag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;padding:1px 5px;
  border-radius:4px;margin-top:3px}
.ev .flag.stop{background:var(--coral);color:var(--bg)}
.ev .flag.warn{background:var(--amber);color:var(--bg)}
/* A draft: dashed all round, the kind's colour still down the left, and the
   word on it. Cancelled keeps its own dashes plus the strike and the fade. */
.ev.draft{border-style:dashed}
.ev .flag.draft{background:transparent;color:var(--ink-dim);border:1px dashed var(--ink-faint)}
.ev .flag + .flag{margin-left:4px}
.callegend i.lgdraft{background:transparent;border:1.5px dashed var(--ink-dim)}
#wkDrafts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
#wkDrafts button.ghost{padding:5px 11px;font-size:12.5px}
#wkDrafts .mini{margin:0}
.prob{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:9px;font-size:12.5px;margin-bottom:6px}
.prob.stop{background:rgba(239,71,111,.1);border-left:3px solid var(--coral)}
.prob.warn{background:rgba(255,183,3,.09);border-left:3px solid var(--amber)}
.prob.note{background:var(--surface2);border-left:3px solid var(--line);color:var(--ink-dim)}
/* The hallway editor's canvas is deliberately NOT themed: it shows the board's
   own fixed dark palette, because the preview's one job is to be the TV. */
/* The TV, 16:9, holding the canvas at the safe area mods.SAFE sets (inline,
   from 23-display-editor.js) and the striped band the Vivi label covers. */
#dspTV{position:relative;aspect-ratio:16/9;width:100%;max-width:960px;margin-top:10px;
  border-radius:10px;overflow:hidden;background:#050806;
  --dbg:#0a100d; --dsurface:#121b15; --dline:#22332a; --dink:#f2f6f3;
  --ddim:#9fada6; --dteal:#3fca6b; --damber:#c9d4ce;
  --dfont-disp:'Fraunces',Georgia,serif; --dfont-body:'Inter',system-ui,sans-serif;}
.dspvivi{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--dfont-body);color:var(--dink);
  background:repeating-linear-gradient(135deg,#0d1410 0,#0d1410 8px,#141d17 8px,#141d17 16px);
  font-size:11px;text-align:center;padding:0 8px}
.dspvivi > span{color:#6f7d76}
/* Our header, where the TV draws it: bottom left of the band (mods.BRAND_W). */
.dspbrand{position:absolute;left:2.5%;width:31.5%;top:11%;height:78%;cursor:pointer;border-radius:6px}
.dspbrand .dm{width:100%;height:100%}
.dspbrand.sel{outline:2px solid var(--dteal)}
#dspCanvas{position:absolute;overflow:hidden;
  background:var(--dbg);color:var(--dink);font-family:var(--dfont-body);
  background-image:repeating-linear-gradient(0deg,transparent 0,transparent calc(100%/14 - 1px),#182219 0,#182219 calc(100%/14)),
                   repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/24 - 1px),#182219 0,#182219 calc(100%/24))}
.dtile{position:absolute;background:var(--dsurface);border:1px solid var(--dline);
  border-radius:calc(var(--u) * .18);padding:calc(var(--u) * .22);cursor:grab;
  touch-action:none;user-select:none}
.dtile.bare{background:rgba(20,25,34,.4)}
.dtile.sel{outline:2px solid var(--dteal);z-index:5}
.dtile .rz{position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;
  cursor:nwse-resize;border-right:3px solid var(--dteal);border-bottom:3px solid var(--dteal);
  border-radius:0 0 4px 0;opacity:0}
.dtile.sel .rz{opacity:1}
.dtile *{pointer-events:none}
.dtile .rz{pointer-events:auto}
.dtile .dx{position:absolute;top:-10px;right:-10px;width:22px;height:22px;display:none;
  place-content:center;background:var(--coral);color:#fff;border-radius:50%;
  font-size:15px;line-height:1;cursor:pointer;pointer-events:auto;z-index:6}
.dtile.sel .dx{display:grid}
#dspPalette button b{font-weight:700}
/* Nine Add a tile buttons in one unwrapped row ran off the side of a phone. */
#dspPalette{flex-wrap:wrap;gap:6px}
/* The hallway editor on a phone. The SM fixing the board at 2:50 is why
   leaders have this screen, and on a phone the board was a 300px drag canvas
   whose tiles ate the scroll (touch-action:none): a thumb scrolling past one
   moved it, the layout saved itself and the TV took the move live. Under 700px
   the card reorders so the announcement and Refresh the wall's calls come first, the
   tiles become a list, and the board is a preview nothing on it takes a touch. */
.dspphone{display:none}
.dsprow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:48px;margin:0 0 6px;
  padding:10px 12px;text-align:left;font:inherit;cursor:pointer;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
.dsprow b{font-size:14px}
.dsprow span{font-size:12.5px;color:var(--ink-faint);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsprow[aria-pressed="true"]{border-color:var(--accent);box-shadow:var(--glow)}
#dspQuick textarea{min-height:84px}
@media(max-width:700px){
  #v-display > .card{display:flex;flex-direction:column}
  #v-display .dspphone{display:block}
  #v-display .dspwide{display:none}
  #dspQuick{order:2}
  #dspPubRow{order:3}
  #dspRows{order:4;margin-top:16px}
  #dspSettings{order:5}
  #dspPhoneNote{order:6;margin:16px 0 0}
  #dspTV{order:7}
  #dspPalette{order:8}
  #dspFoot{order:9}
  #dspCanvas .dtile{pointer-events:none;touch-action:auto;cursor:default}
  #dspCanvas .dtile .rz,#dspCanvas .dtile .dx{display:none !important}
}
.altrow{display:flex;gap:10px;align-items:baseline;padding:7px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.altrow:hover{background:var(--surface2)}
.altrow b{font-size:13px}
.dowpick{display:flex;gap:4px}
.dowpick button{width:36px;padding:6px 0;text-align:center;font-weight:600}
.dowpick button.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.callgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.callbox{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:var(--surface2)}
.callbox h4{margin:0 0 8px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.callrow{font-size:12.5px;padding:4px 0;border-top:1px solid var(--line);display:flex;gap:8px;align-items:baseline}
.callrow:first-of-type{border-top:none}
.callrow .nm{font-weight:700}
.callrow .vi{color:var(--ink-faint);font-size:12px;margin-left:auto;white-space:nowrap}
.callrow.out .nm{color:var(--coral);text-decoration:line-through}
.callrow.soft .nm{color:var(--amber)}
/* ---- attendance: the door checklist and the grid ----
   Every colour is a var, because the tech theme is near-black amber and red and
   a hardcoded teal reads as a bug at 11pm in the house. */
:root{--at-present:var(--teal);--at-late:var(--amber);--at-excused:var(--club);
      --at-school:var(--ink-faint);--at-unexcused:var(--coral)}
/* Tech mode is red and amber everywhere, which turned present, late and excused
   into three oranges. Keep the palette warm but make the three tell apart. */
:root[data-theme="tech"]{--at-present:#e0a000;--at-late:#ff6b35;--at-excused:#c49bff}
:root[data-theme="tech"] .paper{filter:brightness(.72)}
@media print{.paper{filter:none !important}}
/* ---- crew schedule ---- */
.csweek{margin-bottom:16px}
.cswh{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:800;padding:0 0 5px 2px}
.csrow{display:grid;grid-template-columns:118px 104px 1fr auto;gap:12px;align-items:baseline;
  padding:9px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:5px;
  background:var(--surface)}
.csrow.shared{border-left:3px solid var(--accent)}
.csrow[data-open]{cursor:pointer}
.csrow[data-open]:hover{background:var(--surface2)}
.csrow .csd{font-weight:700}
.csrow .cst{color:var(--ink-dim);font-size:12.5px;font-variant-numeric:tabular-nums}
.csrow .csw{color:var(--ink)}
.csrow .csw small{display:block;color:var(--ink-faint);font-size:12px;margin-top:2px}
.csrow .csn{font-size:12px;color:var(--ink-faint);white-space:nowrap}
.cstag{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin-left:7px}
.csprob{font-size:12px;color:var(--coral);margin-top:3px}
/* Cast days / Crew days (61-crewsched.js drawCsSide). */
#csSide{max-width:320px;margin:0 0 12px}
@media (max-width:700px){ .csrow{grid-template-columns:1fr;gap:3px} }
@media print {
  #v-crewsched, #v-crewsched *{color:#000 !important}
  #v-crewsched .csrow{border:none;border-bottom:1px solid #ccc;border-radius:0;background:none;
    padding:5pt 0;break-inside:avoid}
  #v-crewsched .cswh{color:#000;border-bottom:1px solid #000;margin-top:10pt}
  #v-crewsched .csrow.shared{border-left:none;font-weight:bold}
}
/* ---- the walkthrough ----
   A hole punched in a full-screen scrim, done with one enormous box-shadow so
   there is no mask element to keep in sync with the target. */
#walkHole{position:fixed;z-index:9000;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.66), 0 0 0 2px var(--accent) inset;
  transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease}
#walkHole.nospot{box-shadow:0 0 0 9999px rgba(0,0,0,.72)}
#walkPop{position:fixed;z-index:9001;width:min(390px, calc(100vw - 28px));
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:15px 17px 13px;box-shadow:0 18px 44px rgba(0,0,0,.5);
  transition:top .25s ease, left .25s ease}
#walkPop h3{margin:0 0 3px;font-size:16px}
#walkPop .wchap{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:800;margin-bottom:5px}
#walkPop p{margin:0 0 9px;font-size:13.5px;line-height:1.5;color:var(--ink-dim)}
#walkPop .wmore{font-size:12.5px;line-height:1.5;color:var(--ink-faint);
  border-left:2px solid var(--line);padding-left:9px;margin:0 0 9px}
#walkPop .wmore b{color:var(--ink-dim)}
#walkPop .wnum{font-size:12px;color:var(--ink-faint)}
#walkPop .wbar{display:flex;gap:7px;align-items:center;margin-top:11px}
#walkPop .wbar .sp{margin-left:auto}
#walkPop .wlive{display:inline-block;font-size:12px;color:var(--accent);
  background:rgba(127,127,127,.12);border-radius:6px;padding:2px 7px;margin-bottom:8px}
#walkPop .linky{font-size:12px}
#walkPop .wmenu{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}
#walkPop .wjump{display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;text-align:left;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  background:var(--surface2);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
#walkPop .wjump:hover{border-color:var(--accent)}
#walkPop .wjump span{font-size:11.5px;font-weight:600;color:var(--ink-faint)}
@media (max-width:620px){ #walkPop{left:14px !important;right:14px;width:auto} }
/* ---- company attendance: cast and crew as two lists ---- */
.atsec{margin-bottom:14px}
.atsec:last-child{margin-bottom:0}
.atsech{display:flex;gap:10px;align-items:baseline;padding:7px 11px;background:var(--surface2);
  border:1px solid var(--line);border-radius:9px 9px 0 0;border-bottom:none}
.atsech > span:first-child{font-weight:800;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.atsech .atcount{margin-left:auto;font-size:12px}
.atsech button{font:inherit;font-size:12px;font-weight:700;cursor:pointer;background:var(--accent);
  color:var(--bg);border:none;border-radius:7px;padding:4px 10px}
/* ---- paperwork ---- */
.pwdoc{position:relative}
/* The app's own table rule (td{border-top}) was bleeding into the printed
   documents: a full-width line between every row of the sign-up sheets, on
   top of the write-on line each cell draws for itself. Paper draws its own.
   .pwpage too: the audition sheet prints a page per night through those. */
.pwdoc td,.pwpage td{border-top:0}
.pwblk{position:relative;border:1px dashed transparent;border-radius:8px;padding:2px 4px;margin:-2px -4px}
.pwblk:hover{border-color:var(--line)}
.pwblk .bctl{position:absolute;top:-11px;right:4px;display:none;gap:3px;background:var(--surface);
  border:1px solid var(--line);border-radius:7px;padding:2px 4px;z-index:3}
.pwblk:hover .bctl{display:flex}
.pwblk .bctl button{font:inherit;font-size:12px;line-height:1;cursor:pointer;background:none;
  border:none;color:var(--ink-dim);padding:3px 4px;border-radius:4px}
.pwblk .bctl button:hover{background:var(--surface2);color:var(--ink)}
.pwblk[data-locked] .bctl{display:none}
.pwblk [contenteditable]{outline:none}
.pwblk [contenteditable]:focus{background:rgba(127,127,127,.09);border-radius:4px}
.pwadd{margin:14px 0 0;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.pwadd button{font:inherit;font-size:12px;cursor:pointer;background:var(--surface2);
  color:var(--ink-dim);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.pwlocked{border-left:3px solid var(--line);padding-left:10px}
.pwletters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.pwletters select{max-width:230px}
.pwpage{page-break-after:always}
.pwpage:last-child{page-break-after:auto}
.pwtabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}
.pwtabs button{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:var(--surface2);
  color:var(--ink-dim);border:1px solid var(--line);border-radius:9px;padding:7px 13px}
.pwtabs button[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.pwgrid{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
@media (max-width:1000px){.pwgrid{grid-template-columns:1fr}}
.pwside label{margin-top:10px}
.pwside .mini{margin-top:3px}
/* The public-link status: one line under the buttons, with what you do to it. */
.pwpub{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--ink-dim)}
.pwpub i{font-style:normal;font-weight:800;color:var(--teal);margin-right:6px}
.pwpub .acts{display:inline-flex;gap:12px;white-space:nowrap;margin-left:10px}
.pwpub .acts .linkish{font-size:12.5px}
/* The page up at the public link is behind this one: amber, said first. */
.pwpub.behind{color:var(--amber);font-weight:600}
.pwpub.behind i{color:var(--amber)}
.pwpub .pwwhen{color:var(--ink-faint);font-weight:400}
/* The words the paperwork uses, on Show settings: a two-column form. */
.words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.words label{margin-top:10px}
.words .mini{margin-top:3px}
@media(max-width:700px){.words{grid-template-columns:1fr}}
.pwstep{display:flex;gap:8px;align-items:baseline;font-size:12px;padding:4px 0;border-top:1px solid var(--line)}
.pwstep:first-of-type{border-top:none}
.pwstep i{font-style:normal;font-weight:800;flex:0 0 14px}
.pwstep.y i{color:var(--teal)} .pwstep.n i{color:var(--coral)}
.pwstep small{display:block;color:var(--ink-faint);font-size:12px}
.pwlink{display:flex;gap:8px;align-items:center;font-size:12px;padding:5px 0}
.pwlink b{flex:0 0 74px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.pwlink input{font-size:12px}
/* the QR poster */
/* The poster fills a letter sheet: art and title up top, one line about the
   meeting, three big codes spread across the width so they scan from a
   hallway. Nothing else on it. */
.qrposter{display:flex;flex-direction:column;justify-content:space-evenly;min-height:9.6in}
.qrposter .qrnote{text-align:center;font-size:15pt;font-weight:700;color:#111;margin:8pt 0 0}
.qrposter .qrtitle{font-size:30pt;margin:0;text-align:center}
/* Every word on the poster edits in place. An empty line shows its prompt on
   screen and prints as nothing. */
.qred{outline:none;border-radius:4px;cursor:text}
.qred:hover{background:rgba(127,127,127,.08)}
.qred:focus{background:rgba(127,127,127,.14)}
.qred:empty::before{content:attr(data-ph);color:#aaa;font-weight:500;letter-spacing:0;text-transform:none}
@media print{.qred:empty{display:none}}
/* Whose poster it is, above the title: small caps, spaced out, unmissable. */
.qrposter .qrkick{text-align:center;font-size:13pt;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#111;margin:0 0 4pt}
/* Three rows, the code and its name swapping sides each row. */
.qrrow{display:flex;align-items:center;gap:.45in;margin:4pt 0}
.qrrow.flip{flex-direction:row-reverse}
.qrrow.flip .qrlbl{text-align:right}
/* 2.1in codes: three of them plus the head is one letter page inside 14mm
   margins, with a fifth of an inch to spare. 2.2in was a tenth over. */
.qrone{flex:0 0 2.1in;max-width:2.1in}
.qrone svg{width:100%;height:auto;display:block;background:#fff;padding:8px;border-radius:6px}
.qrlbl{flex:1;min-width:0;color:#111}
.qrlbl b{display:block;font-size:30pt;font-weight:800;line-height:1.1}
.qrlbl span{display:block;font-size:14pt;color:#444;margin-top:8pt;line-height:1.3}
.qrmissing{border:2px dashed #bbb;border-radius:6px;aspect-ratio:1;display:flex;align-items:center;
  justify-content:center;color:#999;font-size:12px;padding:14px;text-align:center}
/* ---- report a bug ---- */
#bugBtn{position:fixed;right:16px;bottom:16px;z-index:390;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.03em;cursor:pointer;background:var(--surface);color:var(--ink-dim);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
#bugBtn:hover{color:var(--ink);border-color:var(--coral)}
#bugBtn span{color:var(--coral);margin-right:3px}
#bugBtn.hot{border-color:var(--coral);color:var(--ink)}
#bugBtn.hot span::after{content:attr(data-n);font-size:11px;font-weight:800;background:var(--coral);
  color:var(--bg);border-radius:999px;padding:1px 5px;margin-left:5px;vertical-align:1px}
@media print{#bugBtn{display:none!important}}
/* The button sat ON TOP of the drawer it opens (z 390 over 200), covering the
   bottom corner of every drawer: the report form, the audition slot panel,
   the fee editor. While any drawer is open it steps out of the way. */
body:has(.drawer.on) #bugBtn{display:none}
.ctxbox{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font-size:12px;line-height:1.5;color:var(--ink-faint);max-height:190px;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.ctxbox b{color:var(--coral);font-weight:700}
/* ---- the tour ---- */
.tourhero{padding:4px 0 18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tourhero h1{font-size:26px;letter-spacing:-.4px;margin:0 0 6px}
.tourhero p{color:var(--ink-dim);font-size:14px;max-width:62ch;line-height:1.55;margin:0 0 4px}
.chap{margin-bottom:30px}
.chaphd{display:flex;gap:10px;align-items:baseline;margin-bottom:3px}
.chaphd b{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.chaphd span{font-size:12px;color:var(--ink-faint)}
.chap > p{color:var(--ink-dim);font-size:13px;max-width:64ch;margin:0 0 14px;line-height:1.55}
.stop{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--surface2)}
.stophd{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.stophd h3{margin:0;font-size:15.5px;letter-spacing:-.2px}
.stophd .go{font:inherit;font-size:12px;font-weight:800;letter-spacing:.04em;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--ink-faint);
  padding:3px 10px;margin-left:auto}
.stophd .go:hover{color:var(--bg);background:var(--accent);border-color:var(--accent)}
.stop .live{font-size:12px;font-weight:700;color:var(--accent);background:rgba(46,196,182,.1);
  border-radius:999px;padding:2px 9px}
/* An EXAMPLE has to be unmistakable from a real count. Same shape so it reads as
   the same kind of thing, hollow and grey so it never passes for her data. */
.stop .live.eg{color:var(--ink-faint);background:transparent;border:1px dashed var(--line);font-weight:600}
.stop > p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink);max-width:70ch}
.stop ul{margin:0 0 8px;padding-left:0;list-style:none}
.stop li{position:relative;padding-left:19px;font-size:12.5px;line-height:1.55;color:var(--ink-dim);
  margin-bottom:5px;max-width:70ch}
.stop li::before{content:'';position:absolute;left:4px;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--accent)}
.stop .conn{font-size:12px;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:8px;
  margin:8px 0 0;max-width:70ch}
.stop .conn b{color:var(--ink-dim);font-weight:700}
/* ask */
.askbox{border:1px solid var(--accent);border-radius:12px;padding:16px 18px;background:var(--surface2)}
.askbox h2{margin:0 0 4px}
.asked{border-left:3px solid var(--accent);background:var(--bg);border-radius:9px;padding:12px 14px;
  margin-top:12px;font-size:13.5px;line-height:1.6}
.asked.unsure{border-left-color:var(--amber)}
.asked .q{display:block;font-size:12px;color:var(--ink-faint);margin-bottom:6px;font-style:italic}
.asked .flag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--amber);
  margin-top:8px}
/* asking the script. The citations are the reason to trust the answer, so they
   get real weight on the page rather than being tucked under a "sources" fold:
   an unchecked "never" is the failure this whole feature is built around. */
.qacites{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.qacite{border-left:2px solid var(--line);padding:2px 0 2px 10px;font-size:12.5px;line-height:1.55}
.qacite.against{border-left-color:var(--amber)}
.qacite .qapg{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint);margin-right:7px}
.qacite q{color:var(--ink);font-style:italic}
.qacite em{display:block;font-style:normal;color:var(--ink-faint);font-size:12px;margin-top:3px}
.qacite em.flag{color:var(--amber);font-weight:800;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase}
.qarow{border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.qarow:first-child{border-top:none;margin-top:0}
.qarow.stale{opacity:.6}
.fbrow{display:flex;gap:9px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px}
.fbrow:first-of-type{border-top:none}
.fbrow.done{opacity:.5}
.fbrow .k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--ink-faint);white-space:nowrap}
.fbrow .k.request{color:var(--violet);border-color:var(--violet)}
.fbrow .k.wrong,.fbrow .k.bug{color:var(--coral);border-color:var(--coral)}
.fbrow{align-items:flex-start}
.fbrow .t{flex:1}
.fbrow .t small{display:block;color:var(--ink-faint);font-size:12px;margin-top:3px}
.atbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 8px}
.atbar .sp{margin-left:auto}
.atcount{font-size:12px;color:var(--ink-faint)}
.atcount b{color:var(--ink)}
.atlist{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface2)}
.atrow{display:flex;gap:10px;align-items:center;padding:7px 11px;border-top:1px solid var(--line);
  font-size:13px;flex-wrap:wrap}
.atrow:first-child{border-top:none}
.atrow.unmarked{background:rgba(255,183,3,.05)}
.atrow .nm{font-weight:700;min-width:150px}
.atrow .vi{font-size:12px;color:var(--ink-faint)}
.atrow .auto{font-size:12px;color:var(--at-excused)}
.atrow .why{flex-basis:100%;font-size:12px;color:var(--ink-faint);font-style:italic;padding-left:2px}
.atrow .sp{margin-left:auto;display:flex;gap:4px;align-items:center}
.atset{display:flex;gap:3px}
.atset button{font:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:4px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink-faint)}
.atset button:hover{color:var(--ink);border-color:var(--ink-faint)}
.atset button[aria-pressed="true"]{color:var(--bg);border-color:transparent}
.atset button[data-st="present"][aria-pressed="true"]{background:var(--at-present)}
.atset button[data-st="late"][aria-pressed="true"]{background:var(--at-late)}
.atset button[data-st="excused"][aria-pressed="true"]{background:var(--at-excused)}
.atset button[data-st="school"][aria-pressed="true"]{background:var(--at-school)}
.atset button[data-st="unexcused"][aria-pressed="true"]{background:var(--at-unexcused)}
.atnote{font:inherit;font-size:12px;background:transparent;border:none;border-bottom:1px dashed var(--line);
  color:var(--ink-dim);padding:2px 0;min-width:150px;flex:1}
.atnote:focus{outline:none;border-bottom-color:var(--accent);color:var(--ink)}
/* At the door on a phone: the five buttons get the full width and a thumb-sized
   height. "+ note" and "Note for staff" ride up on the name's line, and a note
   box, when a row has one, drops underneath the buttons, so a row is two
   lines, not the four that made thirty kids 4,000px (10/6). */
@media(max-width:700px){
  main{padding-left:16px;padding-right:16px}
  .calnav{flex-wrap:wrap}
  .atrow{padding:10px 11px;gap:6px 8px}
  .atrow .nm{min-width:0}
  .atrow .sp{display:contents}
  .atplus,.atkeep{order:1;min-height:32px}
  .atplus{margin-left:auto}
  .atrow:not(:has(.atplus)) .atkeep{margin-left:auto}
  .atset{order:2;flex-basis:100%;gap:4px}
  .atset button{flex:1;min-width:0;min-height:44px;padding:4px 2px;font-size:11.5px;line-height:1.1;white-space:normal;border-radius:10px}
  .atnote{order:3;min-width:0;flex:1 1 100%;font-size:16px}
  .atrow .why{order:4}
  /* The kids board's one button per row: on the right, thumb-sized. */
  #kdList .atrow .sp > button{margin-left:auto;min-height:44px;padding:8px 16px}
}
.atkeep{font:inherit;font-size:11.5px;font-weight:800;letter-spacing:.04em;cursor:pointer;background:transparent;
  border:1px solid var(--line);border-radius:7px;color:var(--ink-faint);padding:3px 7px}
.atkeep:hover{color:var(--ink);border-color:var(--ink-faint)}
.atkeep.has{color:var(--violet);border-color:var(--violet)}
/* The door sheet's own frame. It moves between the call card and the Today
   card on Attendance (loadAttendance), so it styles itself rather than
   leaning on either host. */
.atsheet{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
#atTodaySheet .atsheet{border-top:0;margin-top:4px;padding-top:0}
.athead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.athead h4{margin:0;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.atdock{display:none}
.atauto{margin:0 0 8px}
.atauto:empty{display:none}
/* "+ note": the box only comes out for a row that needs a word. */
.atplus{font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;background:transparent;
  border:1px dashed var(--line);border-radius:7px;color:var(--ink-faint);padding:3px 8px;white-space:nowrap}
.atplus:hover{color:var(--ink);border-color:var(--ink-faint)}
.atpick{flex-wrap:wrap;margin:0 0 6px}
/* A call card's read line: day, time, room, who is called. */
.evread{margin-top:10px;font-size:14px}
.evread .mini{margin-top:3px}
.evread .evdraft{color:var(--amber);font-weight:700}
/* Rehearsal reports: today's call, with the button to start its report. */
/* Show day: the night in the order it happens, one button each, the one
   that is now lit. */
.sdnight{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.sdnight button{font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:var(--surface2);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:9px 13px;min-height:44px}
.sdnight button b{font-variant-numeric:tabular-nums}
.sdnight button.primary{background:var(--accent);color:var(--bg);border-color:transparent}
.sdnight button.quiet{color:var(--ink-faint)}
.sdnight button.warnish{border-color:var(--coral);color:var(--coral)}
.sdnight button:disabled{opacity:.55;cursor:default}
@media(max-width:700px){.sdnight button{flex:1 1 calc(50% - 8px)}}
/* Kids sign-out: the pickup list as buttons a thumb can find in a hurry. */
.sidepanel .kdpick{min-height:52px;font-size:16px}
.rplead{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 6px}
/* Send, New, Delete and the save light: on a phone the light drops to its own line. */
.rpsend{flex-wrap:wrap;align-items:center}
@media(max-width:700px){
  /* At the door on a phone the "N of 30 marked" line and "Everyone else is
     here" are the last thing in the sheet and stick to the bottom of the
     screen, so the SM is never thirty rows away from them. */
  .atsheet{display:flex;flex-direction:column}
  .atsheet > .atlist{order:1}
  .atsheet > .atbar{order:2;position:sticky;bottom:0;z-index:5;margin:0;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .atsheet > .atadd,.atsheet > .atfine{order:3}
  .athead .atcount{display:none}
  .atdock{display:inline}
  .atbar #atRest{flex:1 1 auto;min-height:44px}
  /* The floating Report a bug pill would sit on the bar's right end. */
  body:has(.view.on .atsheet:not([hidden])) #bugBtn{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* the grid */
.atgrid{overflow-x:auto;border:1px solid var(--line);border-radius:11px}
.atgrid table{font-size:12px;min-width:100%}
.atgrid th{padding:7px 5px;white-space:nowrap}
.atgrid td{padding:5px 5px;border-top:1px solid var(--line)}
.atgrid .nmcol{position:sticky;left:0;background:var(--surface);font-weight:700;min-width:150px;z-index:1}
.atgrid .nmcol .linky{font-size:12.5px;font-weight:700;color:var(--ink);padding:0;text-decoration:none}
.atgrid .nmcol .linky:hover{color:var(--accent);text-decoration:underline}
.atgrid .nmcol .q{font-style:normal}
.atgrid thead th.nmcol{background:var(--surface);z-index:2}
.atgrid .dcol{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.02em;
  color:var(--ink-faint);height:64px;padding:4px 2px}
/* Colour AND a letter, not colour alone. The tech theme deliberately collapses
   teal, coral, amber and blue into four shades of the same dark brown so it
   does not wreck anybody's night vision, which left all five statuses looking
   identical on this grid. The letter also survives a colour-blind reader and a
   black-and-white printout, so it is the right answer in all three themes
   rather than a patch for one. */
.atcell{display:flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;
  background:var(--surface2);margin:0 auto;font-size:11px;font-weight:800;font-style:normal;
  color:var(--bg);letter-spacing:0}
.atcell::after{content:attr(data-l)}
.atcell.present{background:var(--at-present)}
.atcell.pending{background:transparent;border:1px dashed var(--line)}
.atgrid .dcol.pending{opacity:.55}
.atcell.late{background:var(--at-late)}
.atcell.excused{background:var(--at-excused)}
/* Outlined, not filled. A grey fill sat one shade away from an UNMARKED cell,
   and those two mean opposite things: one is "we know they were out of school",
   the other is "nobody took attendance". Confusing them is the whole failure
   this feature exists to prevent, so they cannot be two greys. */
.atcell.school{background:transparent;box-shadow:inset 0 0 0 2px var(--at-school);color:var(--ink-dim)}
.atcell.unexcused{background:var(--at-unexcused)}
.atkey{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-faint);margin-top:10px}
.atkey span{display:flex;gap:6px;align-items:center}
/* The season grid: boxes a thumb can hit and a narrower pinned name, so a
   phone shows more than five dates. After the grid's own rules on purpose:
   .atgrid .nmcol above has the same weight and would win from later. */
@media(max-width:700px){
  .atgrid .atcell{width:32px;height:32px;border-radius:7px;font-size:13px}
  .atgrid .nmcol{min-width:110px;max-width:110px;white-space:normal}
}
.atkey i{flex:0 0 auto}
/* notes about a person */
.note{border:1px solid var(--line);border-left-width:3px;border-radius:9px;padding:8px 11px;margin-bottom:7px;
  background:var(--surface2);font-size:12.5px}
.note.good{border-left-color:var(--teal)}
.note.note{border-left-color:var(--line)}
.note.concern{border-left-color:var(--coral)}
.note .who{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:5px}
.notewarn{font-size:12px;color:var(--ink-dim);background:var(--surface2);border-left:3px solid var(--violet);
  padding:8px 11px;border-radius:9px;margin:8px 0}
.scenepick{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--bg)}
.scenepick label{display:flex;gap:8px;align-items:baseline;padding:5px 7px;border-radius:7px;font-size:12.5px;cursor:pointer}
.scenepick label:hover{background:var(--surface2)}
.scenepick input{accent-color:var(--accent);margin:0}
.scenepick .o{color:var(--ink-faint);font-size:12px;font-variant-numeric:tabular-nums;min-width:26px}
.scenepick .pg{margin-left:auto;color:var(--ink-faint);font-size:12px}
/* ---- shop board (LIVE) ---- */
:root{--d-props:var(--teal);--d-costumes:var(--violet);--d-set:var(--amber);--d-sound:var(--club);
  --d-lighting:var(--coral);--d-projection:#7dd3fc;--d-hairMakeup:#f472b6;--d-effects:#fb923c;--d-choreography:#a78bfa;--d-admin:#8b93a3}
#v-board>.card+.card{margin-top:16px}
.bfilters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:10px 0 4px}
.bfilters .sep{width:1px;height:20px;background:var(--line);margin:0 3px}
.bfilters select{width:auto;padding:6px 9px;font-size:12px}
.dchip{font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--ink-faint);display:flex;align-items:center;gap:6px}
.dchip i{width:8px;height:8px;border-radius:50%;background:var(--dot);flex:0 0 8px}
.dchip[aria-pressed="true"]{color:var(--ink);border-color:var(--dot);background:var(--surface2)}
.dchip u{text-decoration:none;color:var(--ink-faint);font-size:11.5px}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px;align-items:start}
.col{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:9px;min-height:110px}
.col.drop{border-color:var(--accent);box-shadow:var(--glow)}
.col h3{margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;justify-content:space-between;gap:6px}
.col h3 u{text-decoration:none;color:var(--ink-faint)}
.tcard{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--dot);
  border-radius:9px;padding:9px 10px;margin-bottom:7px;cursor:grab;font-size:12.5px}
.tcard:hover{border-color:var(--ink-faint)}
.tcard.dragging{opacity:.4}
.tcard b{display:block;font-size:13px;font-weight:700;line-height:1.35;margin-bottom:4px}
.tcard .meta{display:flex;flex-wrap:wrap;gap:5px 9px;color:var(--ink-faint);font-size:12px;align-items:center}
.tcard .who{color:var(--ink-dim);font-weight:700}
.tcard .due.late{color:var(--coral);font-weight:800}
.tcard .due.soon{color:var(--amber);font-weight:800}
.tcard .marks{display:flex;gap:4px;margin-left:auto}
.tcard .donebtn{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;margin-left:6px;
  background:var(--surface2);border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;white-space:nowrap}
.tcard .donebtn:hover{background:var(--teal);color:var(--bg);border-color:transparent}
.tcard .donebtn.back{background:transparent;color:var(--ink-faint)}
@media(max-width:820px){.tcard .donebtn{padding:6px 12px;font-size:12.5px}}
.tcard .marks span{width:6px;height:6px;border-radius:50%}
.colnote{color:var(--ink-faint);font-size:12px;text-align:center;padding:12px 4px}
/* drawer */
.drawer{position:fixed;top:0;right:0;width:min(460px,94vw);height:100vh;z-index:200;overflow:auto;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.5);
  padding:20px 22px 60px;transform:translateX(100%);transition:transform .18s ease}
.drawer.on{transform:none}
.scrim{position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.45);display:none}
/* A screen still showing the last show's rows while this one's load: dimmed,
   and not clickable, so nothing acts on the wrong show's ids (loadInto). */
.view.loading > *{opacity:.35;pointer-events:none;transition:opacity .15s}
.view.loading::before{content:"Loading this show\2026";display:block;font-size:12.5px;font-weight:700;color:var(--ink-faint);margin:0 0 8px}
.scrim.on{display:block}
/* The save light: what has not reached the server yet. */
#saveLight{position:fixed;left:14px;bottom:14px;z-index:410;max-width:min(520px,calc(100vw - 28px));padding:12px 15px;
  border-radius:10px;font-size:13.5px;font-weight:700;line-height:1.45;box-shadow:var(--shadow-lg)}
#saveLight.warn{background:var(--surface2);color:var(--ink);border:2px solid var(--amber)}
#saveLight.bad{background:#b3261e;color:#fff;border:2px solid #fff;cursor:pointer}
#saveErr:not([hidden]) ~ #saveLight,#saveLight:not([hidden]) ~ #saveErr{bottom:84px}
[data-savestate]{font-size:12.5px;font-weight:700}
[data-savestate][data-level="ok"]{color:var(--teal)}
[data-savestate][data-level="warn"]{color:var(--amber)}
[data-savestate][data-level="bad"]{color:#fff;background:#b3261e;padding:4px 9px;border-radius:6px}
/* The runway as one line: the next step and its button. */
.runway details > summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.runway details > summary::-webkit-details-marker{display:none}
.runway .rwlbl{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.runway .rwnext{flex:1 1 260px;min-width:0}
.runway .rwnext b{font-size:14px;margin-right:8px}
.runway .rwnext span{font-size:12.5px;color:var(--ink-faint)}
.runway .rwall{font-size:12px;color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.runway details[open] > summary{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.runway details[open] .rwall::after{content:" (hide)"}
/* Which runway this is, when it is not the audition one (lib/runways.js). */
.runway .rwname{color:var(--accent)}
@media print{.runway{display:none !important}}
/* The Overview's first card: where the show is (lib/phase.js), that phase's
   runway, and what is waiting on somebody else (40-overview.js drawPhase). */
#ovPhase{margin:0 0 16px}
#ovPhase .phhd h2{margin:0}
#ovPhase .phhd h2 b{color:var(--accent)}
#ovPhase .phwhy{margin:3px 0 0;color:var(--ink-dim);font-size:14px}
#ovPhase .runway{margin:14px 0 0;max-width:none;box-shadow:none}
#ovPhase .phlead{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
#ovPhase .phlead span{font-size:14px;color:var(--ink-dim)}
#ovPhase .phwait{margin:16px 0 0}
#ovPhase .phwait h3{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
#ovPhase .phwait ul{list-style:none;margin:0;padding:0}
#ovPhase .phwait li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
#ovPhase .phwait li span{flex:1 1 220px;min-width:0}
#ovPhase .phwait li .gobtn{margin:0}
/* reveal(): a brief edge so the eye lands on what just opened. */
@keyframes flashedge{0%{outline-color:var(--accent)}100%{outline-color:transparent}}
.flash{outline:3px solid transparent;outline-offset:3px;animation:flashedge 1.4s ease-out}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}
.sidepanel h2{margin:0 0 2px}
.sidepanel .sidesub{color:var(--ink-faint);font-size:13px;margin:0 0 16px}
.sidepanel .sidebtns{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.sidepanel .sidebtns button{width:100%;text-align:center}
.drawer .x{position:absolute;top:14px;right:16px;font:inherit;font-size:20px;line-height:1;cursor:pointer;
  background:none;border:none;color:var(--ink-faint)}
.drawer h2{margin:0 0 3px;font-size:17px;letter-spacing:-.2px;padding-right:26px}
.drawer .src{color:var(--ink-faint);font-size:12px;margin-bottom:12px}
.drawer .quote{border-left:2px solid var(--line);padding:2px 0 2px 10px;color:var(--ink-dim);
  font-size:12.5px;font-style:italic;margin:10px 0}
.drawer label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin:12px 0 4px}
.drawer .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quickdue{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.quickdue button{font:inherit;font-size:12px;font-weight:700;cursor:pointer;background:var(--surface2);
  color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.quickdue button:hover{border-color:var(--accent);color:var(--ink)}
.notes{margin-top:6px}
.notes .note{border:0;border-top:1px solid var(--line);border-radius:0;margin:0;padding:8px 0;font-size:12.5px}
.notes .note em{display:block;font-style:normal;color:var(--ink-faint);font-size:12px;margin-bottom:2px}
.deptbars{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.deptbar{background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:10px 11px}
.deptbar .k{font-size:12px;font-weight:800;letter-spacing:.05em;display:flex;align-items:center;gap:6px}
.deptbar .k i{width:8px;height:8px;border-radius:50%;background:var(--dot)}
.deptbar .n{font-size:12px;color:var(--ink-faint);margin:3px 0 6px}
.deptbar .bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.deptbar .bar i{display:block;height:100%;background:var(--dot)}
/* ---- script upload + breakdown review (this view is LIVE, not mocked) ---- */
#v-script>.card+.card{margin-top:16px}
.drop{border:2px dashed var(--line);border-radius:12px;padding:26px 20px;text-align:center;
  background:var(--surface2);cursor:pointer;transition:border-color .15s,background .15s}
.drop.over{border-color:var(--accent);background:rgba(46,196,182,.06)}
.drop b{display:block;font-size:15px;margin-bottom:3px}
.drop small{color:var(--ink-faint);font-size:12px}
.fields{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:10px;margin-top:12px}
.steps{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.step{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-dim)}
.step i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:0 0 9px}
.step.running i{background:var(--amber);animation:chase 1.1s infinite}
.step.done i{background:var(--teal)}
.step.error i{background:var(--coral)}
.step em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink-faint)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:2px 0 14px}
.tabs button{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:transparent;
  color:var(--ink-faint);border:1px solid transparent;border-radius:9px;padding:7px 12px}
.tabs button[aria-current="true"]{background:var(--surface2);color:var(--ink);border-color:var(--line)}
.tabs button u{text-decoration:none;font-size:12px;color:var(--ink-faint);margin-left:5px}
.bd{width:100%;border-collapse:collapse;font-size:13px}
.bd th{position:sticky;top:0;background:var(--surface);z-index:2}
.bd td{vertical-align:top}
.bd tr.no td{opacity:.42}
/* Just my scenes (10-script.js, 30-numbers.js): a student's switch, and on a
   phone their Scenes and Songs & dances as one card per row. Read-only, so
   there is no tick or x column to lose, and the headings go because a card
   does not need them. Ids and body.student, so a staff table never stacks. */
#bdMineRow{align-items:center;gap:10px;margin:0 0 10px}
@media(max-width:700px){
  body.student #bdTable,body.student #bdTable tbody,body.student #bdTable tr,body.student #bdTable td{display:block;width:auto}
  body.student #bdTable thead{display:none}
  body.student #bdTable tr{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface2);
    padding:10px 12px;margin:0 0 8px}
  body.student #bdTable td{padding:2px 0;border:0}
  body.student #nList .nrow{grid-template-columns:1fr;gap:6px;border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--surface2);padding:10px 12px;margin:0 0 8px}
}
/* Three bulk buttons and what they did: on a phone they wrap rather than
   squeeze each label into a column of single words. */
#bdBulkRow{flex-wrap:wrap;row-gap:8px}
/* Every one of these fields was editable already and nothing said so: no
   cursor, no underline, styling identical to plain text, and the only hint was
   a grey line under a 52-row table. An affordance nobody can see is not one. */
.bd .ed{outline:none;border-radius:5px;padding:1px 3px;margin:-1px -3px;cursor:text;
  border-bottom:1px dashed var(--line)}
.bd .ed:hover{border-bottom-color:var(--accent);background:var(--surface2)}
.bd .ed:focus{background:var(--surface2);box-shadow:var(--glow);border-bottom-color:transparent}
.bd .ed:empty::before{content:'-';color:var(--ink-faint)}
/* The department picker on a breakdown row. A cane can be props or costumes,
   and this is where you notice, not three screens later on the shop board. */
.bd select.dept{font-size:12px;padding:3px 6px;width:auto;background:var(--surface2);
  border:1px solid var(--line);border-radius:6px;color:var(--ink-dim)}
.bd select.dept:hover{border-color:var(--accent);color:var(--ink)}
/* What the tab actually does, said before the table rather than under it. */
.bdwhat{background:var(--surface2);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-dim)}
.bdwhat b{color:var(--ink)}
.seasonlogo{margin:0 0 14px}
.logoprev{background:var(--surface2);border:1px solid var(--line);border-radius:11px;
  padding:14px;margin-bottom:10px;display:flex;justify-content:center}
.logoprev img{max-height:90px;max-width:100%;object-fit:contain}
.seasonlogo img{max-height:64px;max-width:240px;object-fit:contain;display:block}
.pnoterow{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-dim)}
.pnoterow > div:first-child{flex:1;color:var(--ink)}
.pnoterow select{width:auto;font-size:12px;padding:4px 7px}
/* ---- the printed list ----------------------------------------------------
   Two shapes of the same data. "post" is for the callboard wall: read from a
   few feet away, so the type is large and there is room around it. "hand" is a
   normal document you give somebody or attach to an email. */
.paper{background:#fff;color:#111;border-radius:14px;padding:44px 52px;margin-top:16px;
  max-width:860px;box-shadow:0 1px 0 var(--line)}
.paper .logo{display:block;max-width:260px;max-height:130px;margin:0 auto 18px;object-fit:contain}
.paper h1{margin:0 0 4px;text-align:center;font-size:40px;letter-spacing:-.4px;color:#111;line-height:1.1}
.paper .showname{text-align:center;color:#222;font-size:22px;margin:0 0 20px;font-weight:700}
.paper .pnote{text-align:center;font-weight:700;font-size:1.2em;line-height:1.35;color:#111;padding:4px 10px;margin:0 0 4px}
.paper .pnote + .line, .paper .pnote + h2, .paper .pnote + .grp{margin-top:20px}
/* The notes at the top are the announcement ("First scene shop Monday"),
   read from across a hallway: centered, bold, bigger than the list, no box. */
.paper h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#666;
  margin:22px 0 8px;border-bottom:1px solid #ddd;padding-bottom:5px}
.paper .grp{font-weight:800;margin:14px 0 4px;color:#111}
.paper .line{display:flex;gap:10px;align-items:baseline;padding:3px 0}
.paper .line .r{color:#444;flex:0 0 44%}
.paper .line .n{font-weight:700;color:#111}
.paper .line.us .r{padding-left:16px;font-style:italic;color:#666}
.paper .line.us .n{font-weight:600;color:#333}
.paper .line.crew .r{font-weight:700;color:#111}
.paper .line.crew .n{font-weight:400;color:#222}
.paper .foot{margin-top:26px;padding-top:10px;border-top:1px solid #ddd;
  font-size:12px;color:#888;text-align:center}
.paper.post{font-size:19px}
.paper.post h1{font-size:60px}
/* The printed list is paper, not the app: an app-wide heading rule elsewhere
   was shrinking CREW LIST to 22px. The id outranks it. */
#plPaper h1{font-size:40px;font-family:inherit;text-transform:none;letter-spacing:-.4px;
  font-weight:800;color:#111;line-height:1.1;margin:0 0 4px}
#plPaper.post h1{font-size:60px}
#plPaper h2{font-family:inherit;color:#666}
.paper.post .line{padding:5px 0}
.paper.post .showname{font-size:30px}
.paper.hand{font-size:13.5px}
/* The boosters' list: a sideways table, small enough that an email address
   fits on one line. */
.paper.boosters{font-size:12px;padding:32px 30px;overflow-x:auto;max-width:none}
#plPaper.boosters h1{font-size:30px}
.paper.boosters .showname{font-size:18px;margin-bottom:14px}
.paper .btab{width:100%;border-collapse:collapse}
.paper .btab th{text-align:left;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#282828;padding:5px 6px}
.paper .btab td{padding:4px 6px;border-bottom:1px solid #e3e3e3;color:#111;vertical-align:top}
.paper .btab tr:nth-child(even) td{background:#f4f4f4}
.paper .btab .c-name{font-weight:700;white-space:nowrap}
.paper .btab .c-grade{text-align:center}
.paper .btab .c-email,.paper .btab .c-parentEmail{overflow-wrap:anywhere;min-width:150px}
.paper .btab .c-cell,.paper .btab .c-parentPhone{white-space:nowrap}
.paper.hand .line{padding:2px 0}

@media print {
  /* Only the list prints. Everything else is chrome for making it. */
  body > *:not(.shell), header, aside#rail, .noprint, #gate, #saveErr, #drawer, #scrim { display:none !important; }
  .shell, main, .view { display:block !important; margin:0; padding:0; }
  .view:not(.on) { display:none !important; }
  .paper { box-shadow:none; border-radius:0; margin:0; padding:0; max-width:none; }
  #pwCard { box-shadow:none; border:0; border-radius:0; padding:0; margin:0; background:#fff; }
  #pwCard .pwgrid { display:block; }
  .paper h1 { page-break-after:avoid; }
  .paper h2, .paper .grp { page-break-after:avoid; }
  .paper .line { page-break-inside:avoid; }
  .pwdoc .pwwaiver { page-break-before:always; break-before:page; }
  @page { margin:14mm; }
  /* A month calendar: sideways, one month per page. */
  @page land { size: letter landscape; margin: 9mm; }
  .pwland { page: land; }
  .paper.boosters { page: land; padding:0; font-size:9pt; overflow:visible }
  .paper .btab tr { page-break-inside:avoid; }
  .paper .btab thead { display:table-header-group; }
  .pwcal { page-break-after: always; break-after: page; }
  /* The last month ends the document. In the editor every month sits in its
     own .pwblk wrapper, so "last child" was true of all of them and no month
     broke; the last month is the one with no month in a wrapper after it. */
  .pwblk:not(:has(~ .pwblk .pwcal)) .pwcal { page-break-after: auto; break-after: auto; }
}
.pwcal{margin:0 0 18px}
.pwcal table{font-size:inherit}
.pwcal td,.pwcal th{padding:0}
/* On screen, say where the printed page turns. */
.pwdoc .pwwaiver{position:relative;margin-top:28pt !important;padding-top:14pt;border-top:2px dashed #bbb}
.pwdoc .pwwaiver::before{content:'next page';position:absolute;top:-9px;right:0;font:700 10px/1 system-ui,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:#999;background:#fff;padding:0 6px}
@media print { .pwdoc .pwwaiver{margin-top:0 !important;padding-top:0;border-top:0} .pwdoc .pwwaiver::before{content:none} }

/* The handoff off the Script screen: what is left, and the way to it. */
.togo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;
  background:var(--surface2);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;font-size:13.5px;color:var(--ink-dim);line-height:1.5}
.togo b{color:var(--ink)}
.togo button{white-space:nowrap}
/* Dropping a position from a show. Only shows on an EMPTY one: taking a job away
   from somebody doing it is never what anybody meant. */
.roleRow .jobkill{cursor:pointer;opacity:.45;font-style:normal;margin-left:7px;font-weight:400}
.roleRow .jobkill:hover{opacity:1;color:var(--coral)}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-dim);cursor:pointer}
.chk input{width:auto;margin:0;accent-color:var(--teal);cursor:pointer}
.bdwhat .k{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}
/* .q kept getting used outside .bd and outside tables (casting findings, the
   cost-of-casting line) and ran inline unstyled. It is a global default now, so
   it works wherever it lands; the .bd/table copies are redundant but harmless. */
.q{display:block;color:var(--ink-faint);font-size:12px;font-style:italic;margin-top:2px}
.bd .q{margin-top:3px}
table .q{margin-top:2px}
.bd .pg{font-size:12px;font-weight:800;color:var(--ink-faint);white-space:nowrap}
.bd .kill{cursor:pointer;color:var(--ink-faint);font-size:15px;line-height:1;background:none;border:none;padding:2px 4px}
.bd .kill:hover{color:var(--coral)}
.bd input[type=checkbox]{width:auto;margin:0;accent-color:var(--teal);cursor:pointer}
.scroller{max-height:64vh;overflow:auto;margin-top:2px}
/* evaluation */
/* The strip at the top of My sheet: Back, "#12, 3:40pm", Next, the jump list.
   One row on a laptop; on a phone the jump list takes its own full line under
   the three, so every target stays a thumb wide. Tokens only, so the three
   looks and three brightnesses carry it. */
.evstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.evstrip button.ghost{padding:8px 14px}
.evstrip .evwhere{flex:1 1 auto;min-width:96px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.evstrip select{flex:1 1 220px;width:auto;min-width:0}
@media(max-width:560px){.evstrip select{flex-basis:100%}}
/* Who is up for the panel. Quiet while this sheet follows; marked when it has
   stepped off, so a judge looking at somebody else knows the room moved on. */
.evfollow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;font-size:12.5px;color:var(--ink-faint)}
.evfollow.off{color:var(--ink);background:var(--surface2);border-left:3px solid var(--amber);
  padding:6px 10px;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.evfollow button.primary,.evfollow button.ghost{padding:7px 12px;font-size:12.5px}
#roomTbl tr.up td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.candidate{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.avatar{width:44px;height:44px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;
  font-weight:800;color:var(--accent);border:1px solid var(--line)}
.num{margin-left:auto;font-size:12px;color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.crit{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin:9px 0}
.crit .lbl{font-size:13px}.crit .lbl small{display:block;color:var(--ink-faint);font-size:12px}
.stars{display:flex;gap:4px}
/* A number you can read and a target a thumb can hit. They were 22px blanks. */
.pip{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);cursor:pointer;
  display:grid;place-items:center;font-size:14px !important;font-weight:700 !important;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.pip:hover{border-color:var(--accent);color:var(--ink)}
.pip.on{background:var(--accent);border-color:transparent;color:var(--bg)}
.pip.on:not(.is){opacity:.55}
.scalekey{margin:0 0 4px;font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.scalekey b{color:var(--ink)}
@media (max-width:520px){.pip{width:32px;height:32px}.crit{grid-template-columns:1fr;gap:5px}}
.group-h{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:14px 0 0}
.roleRow{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface2);margin-bottom:7px}
.roleRow .rn{font-weight:700;font-size:13.5px;min-width:112px}
/* .q is only styled inside .bd, so out here the size band ran straight into the
   character's name: "Kayalead · 43 scenes". */
.roleRow .rn .q{display:block;font-weight:600;font-size:12px;color:var(--ink-faint);margin-top:2px}
.roleRow select{width:auto;flex:1;font-size:13px;padding:7px 9px}
.sched .day{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.sched .day:last-child{border:none}
.sched .dt{min-width:86px;font-weight:800;font-size:13px}
.sched .dt small{display:block;font-weight:600;color:var(--ink-faint);font-size:12px}
.sched .ev{flex:1}
.sched .ev .e{font-size:13.5px}
.sched .ev .e span{color:var(--ink-faint);font-size:12px}

/* The ask box on Evaluate: the conflicts the import could not pin down, put in
   front of the panel while the kid is standing there. */
.askbox{margin-top:10px;border:1px solid var(--amber);border-radius:10px;padding:10px 12px;background:rgba(255,183,3,.07)}
.askbox .askhd{font-size:13px;color:var(--amber)}
.askrow{border-top:1px solid var(--line);padding:10px 0 4px;margin-top:8px}
.askrow .askq{font-weight:700;font-size:13px;color:var(--ink)}
.askrow .askq b{color:var(--amber)}
.askrow .q{margin:3px 0 0}
.askrow .seg{margin-top:8px}
.askrow .seg button{padding:7px 4px;font-size:12px}
.askrow input{width:100%;box-sizing:border-box}
.askrow .row{margin-top:10px;align-items:center;flex-wrap:wrap}
.askrow .state{font-size:12px;color:var(--ink-faint)}
.askrow .state.bad{color:var(--coral)}

/* ---- program ads ------------------------------------------------------------ */
.adsales{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 14px}
.adsales input[type=date]{font:inherit;margin-left:6px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.adlink{display:flex;gap:14px;align-items:center}
.adqr{flex:none;width:120px;height:120px;background:#fff;border-radius:8px;padding:6px}
.adqr svg{width:100%;height:100%}
.adurl{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adurl code{font-size:12.5px;word-break:break-all}
a.btnlink{text-decoration:none;display:inline-block;color:inherit}
button.sm,a.btnlink{padding:6px 10px;font-size:12.5px}
.adwarn{margin-top:6px;color:var(--coral);font-weight:700;font-size:13px}
.adrow{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.adthumb{width:90px;height:auto;background:#fff;border:1px solid var(--line);border-radius:4px}
.adtop{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.adtext{margin:6px 0;font-style:italic;color:var(--ink-dim)}
.adcredit{margin-top:8px;font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.adcredit select{font:inherit;font-size:12.5px;padding:4px 6px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink);max-width:220px}
.adact{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:140px}
.adtick{font-size:13px;display:flex;gap:6px;align-items:center;cursor:pointer}
.adadd{border:1px dashed var(--line);border-radius:12px;padding:14px;margin:10px 0 14px}
.adadd h3{margin:0 0 4px}
.adaddgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.adaddgrid label{display:block;margin:8px 0}
.adaddgrid input:not([type=checkbox]),.adaddgrid select,.adaddgrid textarea{display:block;width:100%;font:inherit;margin-top:3px;padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.adprev{width:100%;max-width:320px;height:auto;background:#fff;border:1px solid var(--line)}
@media(max-width:700px){
  .adrow{grid-template-columns:70px minmax(0,1fr)}
  .adthumb{width:70px}
  .adact{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;min-width:0}
  .adaddgrid{grid-template-columns:1fr}
  .adlink{align-items:flex-start}
}
/* Editable flag chips on Scenes & songs (Edit mode). */
.chip .flagx{background:none;border:none;color:inherit;font:inherit;padding:0 0 0 2px;cursor:pointer;opacity:.7}
.chip .flagx:hover{opacity:1}
select.addflag{min-width:0;width:auto;font-size:12px;padding:2px 6px;height:auto}
/* Download bars: one "Props  CSV  PDF" group per list. */
.exportbar .xpair{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface2);font-size:12px;color:var(--ink-dim)}
.exportbar .xpair b{font-weight:700;color:var(--ink);margin-right:2px}
.exportbar .xpair .linkish{font-size:12px;font-weight:700}
/* ---- SM checklists: thumb-sized rows on a phone, a plain list on paper ---- */
.ckpick{align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
#ckKinds{display:flex;gap:4px;flex-wrap:wrap;margin:0}
#ckKinds button{flex:none;white-space:nowrap;padding:9px 14px}
#ckKinds button[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.ckbar{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden}
.ckbar i{display:block;height:100%;background:var(--accent);transition:width .2s}
.ckcount{font-size:13px;color:var(--ink-dim);margin-top:6px}
.ckcount .ok{color:var(--accent)}
.cknote{font-size:13px;color:var(--ink-dim);background:var(--surface2);border-radius:9px;padding:10px 12px;margin:12px 0}
.cksec{margin-top:16px}
.cksec h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px;font-weight:800}
.ckrow{display:flex;gap:8px;align-items:center;padding:4px 6px 4px 10px;border:1px solid var(--line);border-radius:10px;
  margin-bottom:6px;background:var(--surface);min-height:52px}
.ckhit{flex:1;display:flex;gap:12px;align-items:flex-start;padding:8px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ckna{flex:none;font:inherit;font-size:12px;font-weight:800;letter-spacing:.04em;padding:8px 10px;min-width:48px;min-height:40px;
  border-radius:8px;border:1px solid var(--line);background:none;color:var(--ink-faint);cursor:pointer}
.ckna[aria-pressed="true"]{background:var(--surface2);color:var(--ink);border-color:var(--ink-faint)}
.ckrow.na .ckbox{border-style:dashed;opacity:.6}
.ckrow.na .cktext{color:var(--ink-faint)}
.ckrow.na .cktext .t{font-style:italic}
.ckrow input{position:absolute;opacity:0;pointer-events:none}
.ckbox{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--ink-faint);margin-top:1px;position:relative}
.ckrow.on .ckbox{background:var(--accent);border-color:var(--accent)}
.ckrow.on .ckbox::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;border:solid var(--bg);
  border-width:0 3px 3px 0;transform:rotate(45deg)}
.ckrow.on .cktext{color:var(--ink-faint)}
.ckrow.on .cktext .t{text-decoration:line-through;text-decoration-color:var(--ink-faint)}
.cktext{flex:1;font-size:15px;line-height:1.35}
.cktext small{display:block;font-size:11.5px;color:var(--ink-faint);text-decoration:none;margin-top:2px}
.ckhist{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:10px 12px;margin-bottom:5px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:13.5px}
.ckhist span{color:var(--ink-faint);font-size:12.5px}
@media(max-width:820px){ .ckcard{padding:16px 12px} .cktext{font-size:16px} }
@media print {
  #v-checklists .card{box-shadow:none;border:0;padding:0;background:#fff}
  #v-checklists, #v-checklists *{color:#000 !important}
  #v-checklists .ckbar{display:none}
  #v-checklists .ckrow{border:0;border-bottom:1px solid #ccc;border-radius:0;padding:5pt 0;margin:0;min-height:0;
    background:none;break-inside:avoid}
  #v-checklists .ckbox{width:12pt;height:12pt;border:1.5pt solid #000;border-radius:2pt}
  #v-checklists .ckrow.on .ckbox{background:none}
  #v-checklists .ckrow.on .ckbox::after{border-color:#000;left:3pt;top:0;width:3pt;height:7pt;border-width:0 1.5pt 1.5pt 0}
  #v-checklists .ckrow.on .cktext .t{text-decoration:none}
  #v-checklists .ckhit{padding:0}
  #v-checklists .ckna{display:none}
  #v-checklists .ckna[aria-pressed="true"]{display:inline;border:0;background:none;padding:0;min-height:0;font-size:10pt}
  #v-checklists .cktext{font-size:11pt}
  #v-checklists .cksec h3{font-size:10pt;border-bottom:1.5pt solid #000;padding-bottom:2pt;margin-top:10pt;break-after:avoid}
  #v-checklists .cknote{background:none;padding:0;font-weight:700}
}
/* ---- phones: a one-line header and a Menu, not four rows and a sideways strip ---- */
.mnav,.railtop,.railnav,.railfoot{display:none}
@media(max-width:820px){
  header{padding:10px 12px 0}
  .marquee{gap:8px;padding:8px 10px;flex-wrap:nowrap}
  .crumb{flex:1;min-width:0;gap:6px}
  .crumb .home{font-size:20px;flex:none}
  .crumb .sep{display:none}
  .showpick{min-width:0;flex:1}
  .showpick>button{max-width:100%;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
  #shName{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .showpick .track{display:none}
  .crumb .season{white-space:nowrap}
  header .topnav,header .prefs{display:none !important}
  .mnav{display:inline-flex;flex:none;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;
    padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
  /* The rail is not a strip any more: hidden until Menu, then the whole screen. */
  aside#rail:not(.student){display:none !important}
  body.navopen aside#rail{display:block !important;position:fixed;inset:0;z-index:300;margin:0;width:auto;
    padding:0 16px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;background:var(--bg);box-shadow:none;border:0}
  body.navopen{overflow:hidden}
  body.navopen .railtop{display:block;position:sticky;top:0;z-index:2;background:var(--bg);padding:12px 0 6px;margin:0 -2px}
  .rtbar{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 10px}
  .rtbar b{font-size:18px}
  /* The show you are in, by name, first: inside a show the Menu never said
     which one. Switch show opens the list below it. */
  .rtshow{display:flex;align-items:center;gap:10px;padding:2px 2px 10px;font-size:14px;line-height:1.35}
  .rtshow span{flex:1;min-width:0}
  .rtshow b{font-weight:800}
  .rtshow button,.rfwho button{font:inherit;font-size:13px;font-weight:700;padding:9px 12px;border-radius:9px;
    border:1px solid var(--line);background:var(--surface2);color:var(--ink);cursor:pointer;flex:none}
  /* Not sticky: a season's worth of shows in a sticky top hid everything
     under it. Only the bar and the show line stay put. */
  body.navopen .railnav{display:block}
  .rtshows{padding:2px 0 10px;border-bottom:1px solid var(--line);margin-bottom:10px}
  .rtshows .hd{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--ink-faint);padding:8px 2px 4px}
  .rtshows button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:48px;
    text-align:left;font:inherit;font-size:15px;font-weight:600;padding:10px 12px;margin:0 0 2px;border-radius:10px;
    border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer}
  .rtshows button small{color:var(--ink-faint);font-size:12.5px;font-weight:500;white-space:nowrap}
  .rtshows button[aria-current="true"]{background:var(--surface);border-color:var(--line)}
  /* On a season page there is no show, so there is no show rail either:
     Attendance or Show day from here opened whichever show the app had last
     loaded, under "2026-27 season". The [hidden] rule loses to the Menu's own
     display:block, so the groups are put away here instead. */
  body.navopen aside#rail[hidden] .railgroup,body.navopen aside#rail[hidden] .railhead{display:none !important}
  /* The bottom of the Menu: what the header hides on a phone. */
  body.navopen .railfoot{display:block;margin:18px 0 0;padding:14px 2px 0;border-top:1px solid var(--line)}
  .rfrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
  .rflbl{flex:0 0 100%;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
  .rfrow button{font:inherit;font-size:13.5px;font-weight:700;min-height:44px;padding:9px 14px;border-radius:999px;
    border:1px solid var(--line);background:var(--surface2);color:var(--ink);cursor:pointer}
  .rfrow button[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:transparent}
  .rfwho{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px;font-size:13.5px;
    color:var(--ink-dim);word-break:break-word}
  .rfwho b{color:var(--ink)}
  .rfbug{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;font:inherit;font-size:15px;font-weight:700;
    padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
  .rfbug::before{content:"\26A0";color:var(--coral)}
  .rfbug .n{margin-left:auto;font-size:12px;font-weight:800;background:var(--coral);color:var(--bg);border-radius:999px;padding:1px 7px}
  /* The floating Report a bug sat ON the students' tab bar, over To make, so a
     tap on To make opened the bug form. On a phone it lives at the bottom of
     the Menu; the Menu button carries the red dot the pill used to. */
  #bugBtn{display:none !important}
  .mnav.hot{border-color:var(--coral)}
  .mnav.hot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral)}
  /* The save light and the red box sit above a student's tab bar, not on it. */
  body.student #saveLight{bottom:calc(84px + env(safe-area-inset-bottom))}
  body.student #saveErr{bottom:calc(84px + env(safe-area-inset-bottom)) !important}   /* over its inline bottom */
  body.student #saveErr:not([hidden]) ~ #saveLight{bottom:calc(154px + env(safe-area-inset-bottom))}
  .rtclose{font:inherit;font-size:28px;line-height:1;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
    background:var(--surface2);color:var(--ink);cursor:pointer}
  .rtlinks{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .rtlinks button{font:inherit;font-size:13px;font-weight:700;padding:9px 12px;border-radius:9px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink);cursor:pointer}
  body.navopen aside#rail .railgroup{display:block;margin:14px 0 0}
  body.navopen aside#rail .railgroup[hidden]{display:none}
  body.navopen aside#rail .grouphd{display:block;margin:0 0 6px;padding:0 2px;font-size:11.5px}
  body.navopen aside#rail .railgroup button[data-v]{display:flex;width:100%;white-space:normal;text-align:left;
    font-size:16px;padding:12px;min-height:48px;margin:0 0 2px;border-radius:10px}
  body.navopen aside#rail .railgroup button[data-v][hidden]{display:none}
  body.navopen #railShopBoard{display:block}
  /* A student keeps the bottom bar; Menu still opens their five screens plus the top links. */
  body.navopen aside#rail.student{top:0;bottom:0}
  body.navopen aside#rail.student #railStudent{display:block}
}
/* Attendance: All / Cast / Crew, and each person's part on the row. */
.atfilter{margin:8px 0 4px;max-width:420px}
.atfilter .q{opacity:.7;font-weight:600}
.atpart{font-weight:600;color:var(--ink-dim);margin-right:6px}
/* Attendance grid: a box a leader can click, and the little status menu. */
.atgrid button.atcell{border:0;padding:0;cursor:pointer;font:inherit}
.atgrid button.atcell:hover{outline:2px solid var(--accent);outline-offset:1px}
.atgpick{position:fixed;z-index:400;background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow);padding:8px;min-width:190px;display:flex;flex-direction:column;gap:3px}
.atgpick .h{padding:2px 6px 6px;font-size:12.5px}
.atgpick .h span{display:block;color:var(--ink-faint);font-size:11.5px}
.atgpick button{display:flex;align-items:center;gap:9px;text-align:left;font:inherit;font-size:13px;padding:7px 8px;
  border-radius:8px;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer}
.atgpick button:hover{background:var(--surface2)}
.atgpick button.on{border-color:var(--accent)}
.atgpick button.clr{color:var(--ink-faint);margin-top:3px;border-top:1px solid var(--line);border-radius:0 0 8px 8px}
/* callboard was updated (99-boot.js watchVersion): one quiet line at the top. */
#newVer{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:420;display:flex;align-items:center;gap:10px;
  max-width:calc(100vw - 24px);padding:8px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--accent);
  box-shadow:0 6px 20px rgba(0,0,0,.35);font-size:13px;color:var(--ink)}
@media print{#newVer{display:none!important}}