/* =========================================================================
   // FABLE L3 RENDERER v0.1
   12 Matcha · Daily Scheduler (L3) styles.
   Visual canon: the OLD Rotational Scheduler (matcha_scheduler/styles.css)
   per the Phase-3 V2 audit — tokens, table.grid, and the cell-state
   vocabulary are carried verbatim so Diana's muscle memory transfers.
   One deliberate addition: MOD-bridge yellow (#FFF2CC) from her templates.
   ========================================================================= */

:root{
  --bg:              #EEEDE7;
  --bg-alt:          #E5E3DC;
  --surface:         #F6F5F0;
  --surface-raised:  #FFFFFF;
  --border:          #D9D7CE;
  --border-strong:   #BFBDB0;
  --text:            #161613;
  --text-2:          #56544D;
  --muted:           #87857B;

  --matcha:          #00C900;
  --matcha-dark:     #008E00;
  --matcha-darker:   #006100;
  --matcha-soft:     #D4F4D4;
  --matcha-tint:     #E6F9E6;
  --clay:            #CC7B5C;
  --clay-dark:       #B0613E;
  --clay-soft:       #F1D9CC;

  --ok:              var(--matcha);
  --warn:            #B64F2C;
  --warn-soft:       #F5DDD2;
  --danger:          #B81F2C;
  --danger-soft:     #F7D7DA;
  --break:           #8C6A3C;
  --break-soft:      #E8D9B8;
  --mod:             #FFF2CC;   /* Diana's MOD yellow (templates) */
  --mod-text:        #7a6420;
  --training:        #E4E6F5;   /* trainee overlay — periwinkle: NOT solver output */
  --training-text:   #4A5394;

  --font-sans:       "ABC Diatype", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --radius:          6px;
  --radius-lg:       10px;
  --shadow-1:        0 1px 2px rgba(28,26,23,.04), 0 1px 1px rgba(28,26,23,.03);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}

/* ---------- Top bar (old skeleton) ---------- */
#topbar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.topbar-inner{display:flex;align-items:center;gap:18px;padding:14px 28px 10px;max-width:1680px;margin:0 auto;width:100%}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.brand-mark{flex-shrink:0;height:52px;width:auto;display:block}
.brand-divider{width:1px;height:32px;background:var(--border-strong);margin:0 14px}
.brand-product{font-size:13px;color:var(--text-2);letter-spacing:.2px;font-weight:500}
.topbar-spacer{flex:1}
.topbar-actions{display:flex;gap:8px;align-items:center}
#primary-nav{display:flex;flex-wrap:wrap;gap:4px;padding:0 28px 2px;max-width:1680px;margin:0 auto;width:100%}
#primary-nav a{padding:10px 14px 11px;color:var(--text-2);text-decoration:none;font-weight:500;font-size:13px;border-bottom:2px solid transparent;cursor:pointer;transition:color .12s,border-color .12s}
#primary-nav a:hover{color:var(--text)}
#primary-nav a.active{color:var(--text);border-bottom-color:var(--matcha)}

main#view{flex:1;padding:28px 28px 64px;max-width:1680px;margin:0 auto;width:100%}
h1.page-title{font-weight:600;font-size:28px;line-height:1.15;margin:6px 0 6px;letter-spacing:-0.02em}
h2.section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:22px 0 10px}
p.hint{color:var(--text-2);font-size:13px;max-width:72ch;margin:0 0 16px}
#footer{display:flex;justify-content:space-between;gap:12px;padding:12px 28px;border-top:1px solid var(--border);background:var(--bg);color:var(--muted);font-size:12px}
.muted{color:var(--muted)} .small{font-size:12px}

/* ---------- Toolbar (old .date-controls) ---------- */
.date-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 16px;margin:10px 0 14px}
.chip{border:1px solid var(--border-strong);background:var(--surface-raised);border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;color:var(--text-2);user-select:none}
.chip b{color:var(--text)}
.chip .bm{font-size:11px;color:var(--muted);margin-left:4px}
.chip.active{background:var(--matcha-tint);border-color:var(--matcha-dark)}
.chip.disabled{opacity:.45;cursor:not-allowed;background:var(--bg-alt)}
.mode-toggle{display:flex;border:1px solid var(--border-strong);border-radius:6px;overflow:hidden;font-size:12px;margin-left:auto}
.mode-toggle span{padding:6px 12px;cursor:pointer;color:var(--text-2);user-select:none}
.mode-toggle .on{background:var(--matcha-tint);color:var(--text);font-weight:600}
.now-chip{font-size:12px;background:var(--matcha-tint);border:1px solid var(--matcha-dark);border-radius:99px;padding:4px 10px;font-weight:600}

/* ---------- Issues / notices (old .violations) ---------- */
.violations{background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--radius);padding:10px 14px;font-size:13px;margin:0 0 12px;color:#6b3015}
.violations ul{margin:6px 0 0;padding-left:18px}
.violations li{margin:2px 0}
.notice-info{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);padding:8px 12px;font-size:12.5px;color:var(--text-2);margin:0 0 12px}
.notice-info a{color:var(--matcha-darker)}

/* ---------- The grid (old table.grid, verbatim) ---------- */
.gridwrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
table.grid{border-collapse:separate;border-spacing:0;background:var(--surface);width:max-content;min-width:100%}
table.grid th,table.grid td{font-size:13px;text-align:center;padding:7px 10px;white-space:nowrap;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
table.grid th:not(.row-head),table.grid td:not(.row-head){min-width:84px}
table.grid th{background:var(--bg-alt);font-weight:600;color:var(--text);position:sticky;top:0;z-index:2}
table.grid th.row-head,table.grid td.row-head{background:var(--bg-alt);font-weight:500;text-align:right;padding:7px 14px;position:sticky;left:0;z-index:1;color:var(--text-2);font-variant-numeric:tabular-nums}
table.grid th.row-head{z-index:3}
table.grid tr:last-child td{border-bottom:none}
table.grid td:last-child,table.grid th:last-child{border-right:none}

/* cell states — old vocabulary.
   FIDELITY NOTE (do not "fix"): the base rule `table.grid td` sets
   `background: var(--surface)` and OUTSPECIFIES the single-class state rules
   below — exactly as in the old Rotational Scheduler's CSS. The old app's
   EFFECTIVE rendering was therefore: continuation cells WHITE (background
   declarations on .assigned/.empty-cell/.inactive-cell are inert), with only
   the dark-green text/weight applying — which is precisely Alan's approved
   spec ("white/no fill = continuation") and the approved-mockup pixels.
   The double-class .assigned.switch (and :hover) DO win — the green pop.
   Inert declarations are kept verbatim for source-parity with the old app.
   td.mod is OURS (no old-app precedent) and must actually render — hence the
   high-specificity table.grid rule. */
td.assigned{background:var(--matcha-tint);color:var(--matcha-darker);font-weight:500}
td.assigned:hover{background:var(--matcha-soft)}
td.assigned.switch{background:var(--matcha-soft);box-shadow:inset 3px 0 0 var(--matcha-dark);font-weight:600;color:var(--matcha-darker)}
td.assigned.switch::before{content:"\25B8\0020";color:var(--matcha-dark);margin-right:2px;font-weight:700}
td.assigned.nominal{font-style:italic}
td.empty-cell{background:#FAF5EA;color:var(--muted);background-image:linear-gradient(135deg,transparent 48%,rgba(139,133,120,.15) 50%,transparent 52%);background-size:8px 8px}
td.gap-cell{color:var(--danger);font-weight:600}
td.inactive-cell{background:repeating-linear-gradient(45deg,#ECE5D4,#ECE5D4 6px,#E4DFD5 6px,#E4DFD5 10px);color:transparent}
td.violation{background:var(--warn);color:#FFFDF9;font-weight:600}
table.grid td.mod{background:var(--mod);color:var(--mod-text);font-weight:600;font-style:italic}
/* inline Break columns (v5 Excel format) — same palette as the retired
   panel's chips; table.grid specificity REQUIRED to actually paint (see
   the FIDELITY NOTE above: single-class rules are inert here) */
table.grid td.brk{background:var(--break-soft);color:var(--break);font-weight:500;font-style:italic;cursor:pointer}
table.grid td.brk:hover{outline:2px solid var(--break);outline-offset:-2px}
/* bold dividers between the column groups: stations | breaks | training.
   Door = 12th column, Break #3 = 15th (Start·End + 10 stations + 3 breaks)
   — update these indexes if COLS changes */
table.grid th:nth-child(12),table.grid td:nth-child(12),
table.grid th:nth-child(15),table.grid td:nth-child(15){border-right:2px solid var(--border-strong)}
/* training overlay cells (operator-entered shadowing — never solver data);
   periwinkle distinguishes from rotation green / break tan / MOD yellow.
   table.grid specificity required (FIDELITY NOTE). */
table.grid td.trn{background:var(--training);color:var(--training-text);font-weight:500;cursor:pointer;line-height:1.15;padding-top:4px;padding-bottom:4px}
table.grid td.trn:hover{outline:2px solid var(--training-text);outline-offset:-2px}
.trn-name{font-weight:600}
.trn-shadow{font-size:10.5px;opacity:.8}
tr.now td{border-top:2px solid var(--matcha-dark);border-bottom:2px solid var(--matcha-dark)}
tr.now td.row-head{box-shadow:inset 4px 0 0 var(--matcha);background:var(--matcha-tint);color:var(--text)}

/* ---------- Breaks panel (collapsible, default collapsed) ---------- */
.breaks-panel{margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.breaks-head{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;user-select:none}
.breaks-head h2{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--break);margin:0}
.breaks-head .count{font-size:11px;color:var(--muted)}
.breaks-head .caret{margin-left:auto;color:var(--muted);font-size:11px}
.breaks-body{padding:2px 16px 12px}
.break-row{display:flex;gap:10px;align-items:center;font-size:13px;margin:3px 0}
.break-time{width:130px;text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums}
.break-name{background:var(--break-soft);color:var(--break);border-radius:999px;padding:3px 11px;font-style:italic;font-weight:500}

/* ---------- Legend ---------- */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--text-2)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.sw{width:14px;height:14px;border:1px solid var(--border);display:inline-block;border-radius:2px}

/* ---------- Panels / forms (Import, Settings, Debug) ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin:0 0 16px;max-width:980px}
.panel .panel-title{font-size:13px;font-weight:600;margin:0 0 8px}
textarea.paste{width:100%;min-height:220px;font-family:var(--font-mono);font-size:12px;border:1px solid var(--border-strong);border-radius:var(--radius);padding:10px;background:var(--surface-raised);color:var(--text);resize:vertical}
input.cfg{border:1px solid var(--border-strong);border-radius:var(--radius);padding:7px 10px;font-size:13px;background:var(--surface-raised);color:var(--text);font-family:var(--font-sans)}
label.cfg-label{display:block;font-size:12px;color:var(--text-2);margin:10px 0 4px}
.btn{display:inline-block;border:1px solid var(--border-strong);background:var(--surface-raised);border-radius:var(--radius);padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text);font-family:var(--font-sans)}
.btn:hover{border-color:var(--matcha-dark)}
.btn.primary{background:var(--matcha-tint);border-color:var(--matcha-dark)}
.err-list{background:var(--danger-soft);border:1px solid var(--danger);border-radius:var(--radius);padding:10px 14px;font-size:13px;color:#7a1520;margin-top:12px}
.err-list ul{margin:6px 0 0;padding-left:18px}
table.tbl{border-collapse:collapse;width:100%;font-size:13px;margin-top:10px}
table.tbl th,table.tbl td{border-bottom:1px solid var(--border);padding:7px 10px;text-align:left}
table.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.ok-text{color:var(--matcha-darker);font-weight:600}
.warn-text{color:var(--warn);font-weight:600}
pre.debug{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-size:11.5px;overflow:auto;max-height:480px}
.empty-state{border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:38px;text-align:center;color:var(--text-2)}
.empty-state a{color:var(--matcha-darker);font-weight:600}

/* ---------- Settings accordion + Role Constraints panel ---------- */
.panel.acc{padding:0;overflow:hidden}
.acc-head{display:flex;align-items:center;gap:8px;padding:13px 18px;cursor:pointer;user-select:none}
.acc-head:hover{background:var(--bg-alt)}
.acc-caret{color:var(--muted);font-size:11px;width:12px}
.acc-sub{margin-left:auto;font-size:11.5px;color:var(--muted)}
.acc-body{padding:4px 18px 16px}
.rc-wrap{overflow-x:auto}
table.rc{border-collapse:collapse;font-size:13px}
table.rc th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);text-align:left;padding:6px 14px 6px 0;border-bottom:1px solid var(--border)}
table.rc td{padding:5px 14px 5px 0;border-bottom:1px solid var(--border);white-space:nowrap}
table.rc tr:last-child td{border-bottom:none}
td.rc-role{font-weight:600;padding-right:18px}
.rc-lock{cursor:help;font-size:12px}
input.rc-in{width:58px;border:1px solid var(--border-strong);border-radius:var(--radius);padding:5px 7px;font-size:13px;background:var(--surface-raised);color:var(--text);font-family:var(--font-sans);text-align:center}
.rc-tag{font-size:10px;color:var(--muted);margin-left:6px;text-transform:uppercase;letter-spacing:.5px}
.rc-tag.hard{color:var(--clay-dark);font-weight:600}
.rc-off{display:inline-block;width:58px;text-align:center;color:var(--muted)}
.rc-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--clay);margin-left:6px;visibility:hidden;vertical-align:middle}
.rc-dot.on{visibility:visible}
.rc-reset{padding:4px 9px;font-size:12px}
.rc-warns{background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius);padding:9px 13px;font-size:12.5px;color:var(--text-2);margin-top:6px}
.rc-warns-title{font-weight:600;font-size:12px}
.rc-warns ul{margin:6px 0 0;padding-left:18px}
.rc-warns li{margin:3px 0;color:#6b3015}

/* ---------- Session 2: editing, override badges, lint, dialog ---------- */
td.editable{cursor:pointer}
td.editable:hover{outline:2px solid var(--matcha-dark);outline-offset:-2px}
/* override badge (audit §C): dashed warn border + ✋ — Diana owns it but sees it */
table.grid td.ov{box-shadow:inset 0 0 0 2px var(--warn);border-style:dashed}
.ov-glyph{font-size:10px;margin-right:3px}
.chip-ov{font-size:10px;margin-left:4px}
/* lint badge: red ! — the oracle's exact message rides the tooltip */
table.grid td.lintbad{box-shadow:inset 0 0 0 2px var(--danger)}
td.ov.lintbad{box-shadow:inset 0 0 0 2px var(--danger);border-style:dashed}
.lint-glyph{color:var(--danger);font-weight:700;margin-left:4px}
.sw-ov{background:var(--surface-raised);border:1.5px dashed var(--warn);font-size:9px;line-height:14px;text-align:center}
.sw-lint{background:var(--danger-soft);color:var(--danger);font-weight:700;font-size:11px;line-height:14px;text-align:center}
.btn-dl{font-size:12px;padding:6px 11px}
.btn-danger{color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger)}
/* picker dialog */
.dlg-backdrop{position:fixed;inset:0;background:rgba(22,22,19,.35);z-index:80;display:flex;align-items:center;justify-content:center}
.dlg{background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:0 12px 40px rgba(28,26,23,.18);padding:16px 18px;min-width:380px;max-width:480px;max-height:80vh;overflow:auto}
.dlg-title{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dlg-x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:13px;padding:2px 6px}
.dlg-x:hover{color:var(--text)}
.dlg-now{font-size:12.5px;color:var(--text-2);margin-bottom:10px}
.dlg-ov{color:var(--warn)}
.dlg-list{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;max-height:300px;overflow:auto}
.dlg-opt{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--radius);cursor:pointer;font-size:13px;border:1px solid transparent}
.dlg-opt:hover{background:var(--surface)}
.dlg-opt.on{background:var(--matcha-tint);border-color:var(--matcha-dark)}
.dlg-radio{width:13px;height:13px;border:1.5px solid var(--border-strong);border-radius:50%;flex-shrink:0;background:var(--surface-raised)}
.dlg-opt.on .dlg-radio{border-color:var(--matcha-dark);background:radial-gradient(circle at center,var(--matcha-dark) 0 4px,var(--surface-raised) 5px)}
.dlg-ann{font-size:11.5px;color:var(--muted);margin-left:auto;text-align:right}
.dlg-ann.warn{color:var(--warn)}
.dlg-note{width:100%;margin-bottom:12px;font-size:12.5px}
.dlg-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dlg-actions .btn[disabled]{opacity:.45;cursor:not-allowed}
.dlg-cancel{margin-left:auto;font-size:11.5px;color:var(--muted);cursor:pointer}
/* station preferences (Settings) */
.pref-grid{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.pref-row{display:inline-flex;align-items:center;gap:7px;font-size:13px}
select.pref-sel{padding:4px 6px;font-size:12.5px}

/* ---------- Session 3: detail panel, keyboard focus, drag, layout ---------- */
/* full-width strip between the notices and the grid; rows flow into
   columns so the strip stays ~2 rows tall */
.detail-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 16px 14px;font-size:12.5px;margin:0 0 12px;column-width:330px;column-gap:30px}
.detail-panel h2{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:0 0 6px;column-span:all}
.detail-panel .dp-head{column-span:all}
.dp-row,.dp-term,.dp-lint,.dp-mut,.dp-name{break-inside:avoid}
.dp-head{font-weight:600;font-size:13px;margin-bottom:6px}
.dp-name{font-weight:700;font-size:15px;color:var(--matcha-darker);margin:2px 0 6px}
.dp-row{color:var(--text-2);margin:4px 0}
.dp-ov{color:var(--warn)}
.dp-mut{color:var(--muted);font-size:11.5px}
.dp-hint{color:var(--muted);font-size:12px;margin:0}
.dp-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:10px 0 4px}
.dp-term{display:flex;justify-content:space-between;gap:10px;margin:2px 0;color:var(--text-2)}
.dp-term b.neg{color:var(--warn)} .dp-term b.pos{color:var(--matcha-darker)}
.dp-total{border-top:1px solid var(--border);padding-top:4px;margin-top:6px;color:var(--text)}
.dp-lint{color:var(--danger);margin:5px 0;font-size:12px}
table.grid td.sel{outline:2px solid var(--matcha-darker);outline-offset:-2px}
table.grid td.dropon{outline:2px dashed var(--matcha-dark);outline-offset:-2px;background:var(--matcha-tint)}
td.editable[draggable="true"]{cursor:grab}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#161613;color:#FFFDF9;border-radius:var(--radius);padding:10px 18px;font-size:13px;z-index:99;transition:opacity .2s}
.toast.hidden{opacity:0;pointer-events:none}

/* ---------- F2: Week-of picker (in the .date-controls toolbar) ---------- */
.week-of{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2)}
input.week-pick{border:1px solid var(--border-strong);border-radius:var(--radius);padding:5px 8px;font-size:12.5px;background:var(--surface-raised);color:var(--text);font-family:var(--font-sans)}

/* ---------- F1: Day Roster editor (accordion mirrors Settings .acc) ---------- */
select.cfg{border:1px solid var(--border-strong);border-radius:var(--radius);padding:6px 9px;font-size:13px;background:var(--surface-raised);color:var(--text);font-family:var(--font-sans)}
.day-roster{max-width:780px}
.roster-rows{display:flex;flex-direction:column;gap:6px;margin:6px 0 2px}
.roster-row{display:flex;align-items:center;gap:8px}
input.roster-name{flex:1;min-width:140px}
input.roster-name.sub{font-style:italic;text-decoration:underline dotted;text-underline-offset:3px;color:var(--clay-dark)}
select.roster-shift{flex:1.5;min-width:230px}
.roster-sub-tag{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--clay-dark);font-weight:700}
.roster-x{padding:5px 10px;font-size:12px;color:var(--muted);line-height:1}
.roster-x:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}
.roster-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.roster-spacer{flex:1}
.roster-add{font-size:12.5px}
.roster-reset{font-size:12px;color:var(--text-2)}
.roster-solve{font-weight:600}
.roster-note{font-size:11.5px;color:var(--muted);margin:9px 0 0;max-width:66ch;line-height:1.45}

/* ---------- F3: print to PDF — one day, A4 landscape ---------- */
.print-only{display:none}
@media print{
  @page{size:A4 landscape;margin:0.6in}
  html,body{background:#fff !important}
  #topbar,#footer,#primary-nav,#toast,.date-controls,h1.page-title,p.hint,
  .notice-info,.violations,.detail-panel,.day-roster,.legend{display:none !important}
  .print-only{display:block}
  main#view{padding:0;margin:0}
  .print-header{display:flex;align-items:center;gap:14px;margin:0 0 10px;page-break-after:avoid}
  .print-logo{height:32px;width:auto}
  .print-h1{font-size:15px;font-weight:700;letter-spacing:-0.01em;color:#000}
  .print-h2{font-size:12.5px;font-weight:600;color:#000}
  .print-h3{font-size:10.5px;color:#333}
  .gridwrap{overflow:visible !important}
  /* width:100% + min-width:0 !important beats the base `:not(.row-head)`
     min-width:84px (higher specificity) so 20 columns fit the A4 page width */
  table.grid{width:100% !important;min-width:0 !important;table-layout:fixed}
  table.grid th,table.grid td{position:static !important;font-size:8.3px;padding:2px 2px;min-width:0 !important;width:auto;overflow:hidden;text-overflow:ellipsis;border-color:#bbb;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table.grid th.row-head,table.grid td.row-head{width:7%}
  table.grid th{background:#ededed !important}
  table.grid td.row-head,table.grid th.row-head{font-size:8px;padding:2px 5px}
  /* keep the Door|Break and Break|Training group dividers legible on paper */
  table.grid th:nth-child(12),table.grid td:nth-child(12),
  table.grid th:nth-child(15),table.grid td:nth-child(15){border-right:1.4px solid #555 !important}
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
}