/* Termfit dashboard (first built for the source planner app).
   Palette: Termfit brand sheet (brand/brand-sheet.html).  The token NAMES are
   the original ones so every rule below keeps working; only the values moved
   to the brand.  navy = Midnight, blue = Cobalt, red = Conflict, amber =
   Warning, green = Placed.  Light only, no dark mode.
   Built to look right at 1400px and stay usable at 1100px. */

/* Bundled fonts (SIL OFL 1.1, licences in src/fonts/), so the tool looks the
   same offline and on a machine that has neither face installed. */
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Archivo Expanded";src:url("../fonts/archivo-expanded.woff2") format("woff2");font-weight:600 800;font-display:swap}

:root{
  --red:#C62F3B;
  --red-dk:#9E1F2A;
  --navy:#0B1433;
  --blue:#2340C8;
  --blue-lt:#DCE2F7;
  --blue-pale:#EEF1FC;
  --amber:#9C5A00;
  --amber-lt:#FFF4E0;
  --green:#1B7A4E;
  --green-lt:#E3F4EC;
  --purple:#6A48C9;
  --citron:#C9D63F;
  --grey:#56607A;
  --ink:#0B1433;
  --line:#DCE1EC;
  --line-soft:#EAEEF6;
  --paper:#FFFFFF;
  --bg:#F6F8FC;
  --row-h:19px;
  --gutter:58px;
  --nav-w:196px;
  --insp-w:344px;
  --shadow:0 1px 2px rgba(17,20,24,.07), 0 4px 14px rgba(17,20,24,.06);
  font-synthesis-weight:none;
}

/* Any class rule with a display beats the browser's own [hidden] rule, because
   an author sheet outranks the user agent sheet at equal specificity.  Several
   elements here are toggled with el.hidden (the unsaved badge, the toast), so
   without this they set the attribute and stay on screen.  Keep it near the
   top and keep the !important. */
[hidden]{display:none !important;}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.45 "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  overflow:hidden;
}

h1,h2,h3,h4{color:var(--navy);margin:0 0 .4em;font-weight:650;letter-spacing:-.01em}
h1,h2{font-family:"Archivo Expanded", "Inter", "Segoe UI", sans-serif;font-weight:800;letter-spacing:-.02em}
h1{font-size:20px}
h2{font-size:16px}
h3{font-size:14px}
h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--grey)}
p{margin:0 0 .7em}
a{color:var(--blue)}
.muted{color:var(--grey)}
.small{font-size:12px}
code,.mono{font-family:"Cascadia Mono", Consolas, "Courier New", monospace;font-size:12px}

/* ---------------------------------------------------------------- topbar */

.topbar{
  height:50px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 14px;background:var(--navy);color:#fff;
  border-bottom:3px solid var(--citron);position:relative;z-index:40;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-logo{height:24px;width:auto;display:block;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;
  padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
.brand-text small{font-size:11.5px;color:#AEB9DA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:10px}

.scorechips{display:flex;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:11px;
  font-size:12px;font-weight:600;background:rgba(255,255,255,.13);color:#E7EEF8;white-space:nowrap;
}
.chip b{font-variant-numeric:tabular-nums}
.chip.bad{background:var(--red);color:#fff}
.chip.warn{background:var(--amber);color:#fff}
.chip.good{background:var(--green);color:#fff}

.scenario-chip{display:flex;align-items:center;gap:7px;padding:4px 10px;border-radius:6px;
  background:rgba(255,255,255,.10);font-size:13px}
/* Term picker.  Sits immediately left of the scenario name because the two
   together are the answer to "what am I looking at": a scenario name means
   nothing without its term.  Disabled and dimmed when only one term is
   ingested, rather than hidden, so the multi term feature is discoverable. */
.term-chip{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;
  background:rgba(255,255,255,.10);font-size:13px}
.term-pick-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.term-pick{font:inherit;font-size:13px;font-weight:650;color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.35);border-radius:5px;padding:2px 6px;max-width:210px}
.term-pick:disabled{opacity:.6;border-style:dashed}
.term-pick:focus{outline:2px solid #fff;outline-offset:1px}
/* The list itself is drawn by the OS, which uses the page colours, so the
   options need dark on white or they render white on white on Windows. */
.term-pick option{color:var(--ink);background:#fff}
.scenario-name{font-weight:650;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.badge-unsaved{background:var(--amber);color:#fff}
.badge-soft{background:var(--blue-lt);color:var(--navy)}
.badge-hard{background:var(--red);color:#fff}
.badge-lock{background:var(--navy);color:#fff}
.badge-ok{background:var(--green-lt);color:var(--green)}

/* ---------------------------------------------------------------- buttons */

.btn{
  font:inherit;font-size:13px;font-weight:600;line-height:1;
  padding:7px 13px;border-radius:5px;border:1px solid var(--line);
  background:var(--paper);color:var(--navy);cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--blue-pale);border-color:var(--blue)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* Primary actions are Cobalt.  Red is reserved for conflicts (brand sheet). */
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:#1A31A0;border-color:#1A31A0}
.btn-ghost{background:transparent;border-color:transparent;color:var(--blue)}
.btn-ghost:hover{background:var(--blue-pale);border-color:var(--blue-lt)}
.btn-danger{color:var(--red);border-color:#EFC3C7}
.btn-danger:hover{background:#FCEDEE;border-color:var(--red)}
.btn-sm{padding:4px 9px;font-size:12px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

input[type=text],input[type=number],input[type=search],select,textarea{
  font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);
  border-radius:5px;background:var(--paper);color:var(--ink);max-width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
label{font-size:12px;color:var(--grey);font-weight:600}
.field{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.field-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}

/* ---------------------------------------------------------------- shell */

.shell{
  display:grid;
  grid-template-columns:var(--nav-w) minmax(0,1fr) var(--insp-w);
  height:calc(100vh - 50px);
}
.shell.no-inspector{grid-template-columns:var(--nav-w) minmax(0,1fr) 0}

.sidenav{
  background:#0E2748;border-right:1px solid #0A1F3A;overflow-y:auto;padding:10px 0;
}
.nav-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 14px;border:0;background:transparent;color:#C6D5E8;
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border-left:3px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:rgba(35,64,200,.32);color:#fff;border-left-color:var(--citron)}
.nav-num{width:17px;height:17px;border-radius:4px;background:rgba(255,255,255,.15);
  font-size:10.5px;display:grid;place-items:center;flex:none;font-weight:700}
.nav-item.active .nav-num{background:var(--citron);color:var(--navy)}
.nav-count{margin-left:auto;font-size:11px;font-weight:700;padding:1px 6px;border-radius:8px;
  background:rgba(255,255,255,.14)}
.nav-count.bad{background:var(--red);color:#fff}
.nav-sep{height:1px;background:rgba(255,255,255,.10);margin:9px 12px}
.nav-foot{padding:8px 14px;color:#7F94B0;font-size:11px;line-height:1.4}
.nav-foot a{color:#C6D5E8}
.nav-foot a:hover{color:#fff}
.start-guide{margin:12px 0 8px}

.panel{overflow:auto;padding:16px 18px 40px;min-width:0}
.panel:focus{outline:none}

.view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:12px;flex-wrap:wrap}
.view-head p{margin:0;color:var(--grey);font-size:13px;max-width:78ch}

.card{background:var(--paper);border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);padding:14px;margin-bottom:14px}
.card > h2:first-child,.card > h3:first-child{margin-top:0}
.card-tight{padding:10px 12px}

.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.toolbar .spacer{flex:1}

.loading{padding:40px;text-align:center;color:var(--grey)}
.empty{padding:26px;text-align:center;color:var(--grey);border:1px dashed var(--line);
  border-radius:8px;background:var(--paper)}
.notice{border-left:4px solid var(--amber);background:var(--amber-lt);padding:10px 12px;
  border-radius:0 6px 6px 0;margin-bottom:12px;font-size:13px}
.notice.bad{border-left-color:var(--red);background:#FCEDEE}
.notice.info{border-left-color:var(--blue);background:var(--blue-pale)}
.notice h4{margin:0 0 4px;color:inherit}

/* ---------------------------------------------------------------- tiles */

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:14px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  box-shadow:var(--shadow);border-top:3px solid var(--blue)}
.tile.bad{border-top-color:var(--red)}
.tile.warn{border-top-color:var(--amber)}
.tile.good{border-top-color:var(--green)}
.tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);font-weight:700}
.tile .v{font-size:27px;font-weight:700;line-height:1.1;margin:3px 0 1px;color:var(--navy);
  font-variant-numeric:tabular-nums}
.tile.bad .v{color:var(--red)}
.tile.good .v{color:var(--green)}
.tile .s{font-size:12px;color:var(--grey)}

/* ---------------------------------------------------------------- tables */

table.grid-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--paper)}
table.grid-table th{
  text-align:left;font-weight:700;color:var(--navy);background:var(--blue-pale);
  border-bottom:2px solid var(--line);padding:7px 8px;position:sticky;top:0;z-index:2;white-space:nowrap;
}
table.grid-table td{border-bottom:1px solid var(--line-soft);padding:5px 8px;vertical-align:top}
table.grid-table tbody tr:hover{background:var(--blue-pale)}
table.grid-table tbody tr.selected{background:var(--blue-lt);box-shadow:inset 3px 0 0 var(--blue)}
table.grid-table tbody tr.has-hard{box-shadow:inset 3px 0 0 var(--red)}
table.grid-table td.num{text-align:right;font-variant-numeric:tabular-nums}
table.grid-table td input,table.grid-table td select{padding:3px 5px;font-size:12px;width:100%}
.table-wrap{max-height:none;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.cellwrap{max-width:340px;white-space:normal;word-break:break-word}
.nowrap{white-space:nowrap}
/* ---------------------------------------------------------------- week grid */

.weekgrid-wrap{background:var(--paper);border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);overflow:auto;margin-bottom:14px}
.weekgrid-title{display:flex;align-items:center;gap:9px;padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--blue-pale);position:sticky;left:0}
.weekgrid-title h3{margin:0}
.weekgrid-title .spacer{flex:1}

.wg-head{display:grid;grid-template-columns:var(--gutter) repeat(5,minmax(112px,1fr));
  position:sticky;top:0;z-index:6;background:var(--paper);border-bottom:1px solid var(--line)}
.wg-head div{padding:5px 6px;font-size:12px;font-weight:700;color:var(--navy);text-align:center}
.wg-head div:first-child{text-align:left;color:var(--grey);font-weight:600;font-size:11px}

.wg{
  display:grid;
  grid-template-columns:var(--gutter) repeat(5,minmax(112px,1fr));
  grid-template-rows:repeat(32,var(--row-h));
  position:relative;
  user-select:none;
  touch-action:none;
}
.wg-time{grid-column:1;font-size:10.5px;color:var(--grey);text-align:right;padding-right:6px;
  line-height:var(--row-h);border-top:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.wg-time.hour{color:var(--navy);font-weight:650;border-top-color:var(--line)}
.wg-cell{border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);background:var(--paper)}
.wg-cell.hour{border-top-color:var(--line)}
.wg-cell.shade-window{background:#F3F8FF}
.wg-cell.shade-closed{background:repeating-linear-gradient(45deg,#FBEFEF 0 5px,#F5DEDE 5px 10px)}
.wg-cell.shade-unavail{
  background:repeating-linear-gradient(135deg,#F0F2F5 0 5px,#E2E6EC 5px 10px);
}
.wg-cell.drop-target{background:var(--blue-lt);box-shadow:inset 0 0 0 1px var(--blue)}

.wg-block{
  position:relative;z-index:3;margin:1px;padding:2px 5px;border-radius:4px;overflow:hidden;
  font-size:11px;line-height:1.25;cursor:grab;border:1px solid transparent;
  width:calc((100% - 2px) / var(--n, 1));
  margin-left:calc((100% - 2px) * var(--i, 0) / var(--n, 1) + 1px);
  box-shadow:0 1px 1px rgba(17,20,24,.10);
}
.wg-block:hover{filter:brightness(.97)}
.wg-block .b1{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-block .b2,.wg-block .b3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.wg-block.short{padding-top:0;padding-bottom:0}
.wg-block.short .b2,.wg-block.short .b3{display:none}
.wg-block.dragging{opacity:.55;cursor:grabbing;z-index:9}
.wg-block.selected{outline:2px solid var(--navy);outline-offset:-2px}
.wg-block.locked::after{content:"L";position:absolute;top:1px;right:3px;font-size:9px;font-weight:800;opacity:.6}
.wg-block.conflict{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.wg-block.conflict-soft{border-color:var(--amber);border-style:dashed}
.wg-block.rz-edge{cursor:ns-resize}
.wg-block.rz-no{cursor:not-allowed}
.wg-block.resizing{z-index:9;cursor:ns-resize;outline:2px solid var(--navy);outline-offset:-2px}
.wg-rz-label{position:absolute;left:0;right:0;bottom:0;padding:1px 4px;font-size:10.5px;font-weight:700;
  line-height:1.3;background:var(--navy);color:#fff;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;pointer-events:none}

.bld-portable{background:#E9E4F6;color:#372A66;border-color:#CFC4EA}
.bld-other{background:#EDEFF2;color:#333B44;border-color:#DADFE6}
.bld-none{background:var(--green-lt);color:#17492F;border-color:#BEDCCA}
.bld-b1{background:var(--blue-lt);color:#0F2C50;border-color:#B9D2F0}
.bld-b2{background:var(--amber-lt);color:#6B3D05;border-color:#EBCFA6}
.bld-b3{background:#E3F1EF;color:#0B4A45;border-color:#B5D9D4}

.wg-ghost{position:absolute;z-index:12;pointer-events:none;border:2px dashed var(--navy);
  border-radius:4px;background:rgba(47,111,181,.14)}

.grid-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--grey);
  padding:7px 12px;border-top:1px solid var(--line);background:var(--blue-pale);position:sticky;left:0}
.grid-legend span{display:inline-flex;align-items:center;gap:5px}
.swatch{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.14);display:inline-block}

.sat-note{padding:7px 12px;font-size:12px;color:var(--grey);border-top:1px solid var(--line);
  background:#FCFDFE;position:sticky;left:0}
.sat-note b{color:var(--navy)}

.util{display:flex;align-items:center;gap:8px;font-size:12px}
.util-bar{flex:1;height:8px;border-radius:4px;background:var(--line-soft);overflow:hidden;min-width:70px}
.util-bar i{display:block;height:100%;background:var(--blue)}
.util-bar i.hot{background:var(--amber)}
.util-bar i.over{background:var(--red)}

/* ---------------------------------------------------------------- unplaced tray */

.tray{display:flex;gap:8px;flex-wrap:wrap;padding:9px;border:1px dashed var(--red);
  border-radius:8px;background:#FDF6F7;margin-bottom:14px}
.tray-item{border:1px solid var(--line);background:var(--paper);border-radius:5px;
  padding:4px 8px;font-size:12px;cursor:pointer}
.tray-item:hover{border-color:var(--blue);background:var(--blue-pale)}

/* ---------------------------------------------------------------- inspector */

.inspector{
  background:var(--paper);border-left:1px solid var(--line);overflow-y:auto;padding:14px;
}
.shell.no-inspector .inspector{display:none}
.inspector-empty{color:var(--grey);font-size:13px}
.insp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:9px}
.insp-title{font-size:15px;font-weight:700;color:var(--navy);line-height:1.25}
.insp-sub{font-size:12px;color:var(--grey)}
.insp-section{border-top:1px solid var(--line-soft);padding-top:10px;margin-top:10px}
.insp-section h4{margin-bottom:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12.5px;margin-bottom:8px}
.kv dt{color:var(--grey);font-weight:600}
.kv dd{margin:0;word-break:break-word}
.why{list-style:none;margin:0;padding:0;font-size:12.5px}
.why li{border-left:3px solid var(--amber);background:#FEFAF3;padding:6px 8px;margin-bottom:6px;border-radius:0 5px 5px 0}
.why li.hard{border-left-color:var(--red);background:#FCEDEE}
.why .rule{font-weight:700;font-size:11px;letter-spacing:.03em;color:var(--navy)}
.why .hint{color:var(--grey);margin-top:3px;display:block}
.opt-bad{color:var(--red)}
.checkline{display:flex;align-items:center;gap:7px;font-size:13px;margin:7px 0;color:var(--ink);font-weight:600}
.source{font-size:11.5px;background:#F7F9FC;border:1px solid var(--line-soft);border-radius:5px;
  padding:6px 7px;white-space:pre-wrap;word-break:break-word;color:var(--grey);max-height:150px;overflow:auto}

/* ---------------------------------------------------------------- rules, scenarios, export */

.slider-row{display:grid;grid-template-columns:1fr 118px 56px;gap:9px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line-soft)}
.slider-row:last-child{border-bottom:0}
.slider-row .rname{font-weight:650;font-size:13px;color:var(--navy)}
.slider-row .rdesc{font-size:11.5px;color:var(--grey)}
.slider-row input[type=range]{width:100%;accent-color:var(--blue)}
.slider-row .rval{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.slider-row.changed .rname::after{content:" *";color:var(--red)}

.pill-list{display:flex;flex-wrap:wrap;gap:6px}
.pill{border:1px solid var(--line);border-radius:13px;padding:3px 10px;font-size:12px;
  background:var(--paper);cursor:pointer;font-weight:600;color:var(--grey)}
.pill.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pill.rule-off{text-decoration:line-through;opacity:.6}

.rule-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;
  padding:8px 0;border-bottom:1px solid var(--line-soft)}
.rule-row:last-child{border-bottom:0}
.rule-row .rule-main{flex:1 1 320px;min-width:0}
.rule-row .rname{font-weight:650;font-size:13px;color:var(--navy);overflow-wrap:anywhere}
.rule-row .rdesc{font-size:11.5px;color:var(--grey);overflow-wrap:anywhere}
.rule-row.rule-off-row .rname{text-decoration:line-through;opacity:.7}
.rule-ov{margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hard-list{display:grid;gap:5px}
.hard-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hard-row .rdesc{font-size:11.5px;color:var(--grey)}

.scenario-list{display:grid;gap:9px}
.scenario-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:7px;
  padding:9px 11px;background:var(--paper)}
.scenario-row.current{border-color:var(--blue);background:var(--blue-pale)}
.scenario-row .sname{font-weight:700;color:var(--navy)}
.scenario-row .smeta{font-size:11.5px;color:var(--grey)}
.scenario-row .spacer{flex:1}

.preview-frame{width:100%;height:min(72vh,860px);border:1px solid var(--line);border-radius:7px;background:#fff}

.progress{height:7px;border-radius:4px;background:var(--line-soft);overflow:hidden;margin:8px 0}
.progress i{display:block;height:100%;background:var(--blue);transition:width .12s linear}

/* ---------------------------------------------------------------- toast + tooltip */

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;
  background:var(--navy);color:#fff;padding:9px 16px;border-radius:6px;font-size:13px;
  box-shadow:0 6px 22px rgba(17,20,24,.28);max-width:70ch}
.toast.error{background:var(--red)}
.toast.warn{background:var(--amber)}

.tooltip{position:fixed;z-index:95;background:#1B2430;color:#fff;padding:7px 9px;border-radius:5px;
  font-size:12px;line-height:1.35;max-width:38ch;box-shadow:0 5px 18px rgba(17,20,24,.32);pointer-events:none}
.tooltip b{color:#FFC9CD}
.tooltip ul{margin:4px 0 0;padding-left:15px}

/* ---------------------------------------------------------------- responsive */

/* Below 1300px the subtitle narrows instead of vanishing.  It starts with the term, so the
   ellipsis eats the campus (which she already knows) and "Winter 2027 (27W)" stays in view:
   about 103px of text, measured to fit beside the unsaved badge at 1280. */
@media (max-width:1300px){
  :root{--nav-w:172px;--insp-w:310px}
  .brand-text{max-width:135px}
}
@media (max-width:1140px){
  :root{--insp-w:288px;--row-h:17px}
  .chip{font-size:11px;padding:2px 7px}
  .panel{padding:12px 12px 34px}
}

/* Phone width.  The three-column shell needs nav + inspector (460px even at 1140px) before the
   panel gets a pixel, so below 760px it stacks: the top bar wraps, the views become a strip that
   scrolls sideways on its own, the panel takes the full width, and the inspector sits under it.
   The page scrolls as one column; only wide tables and grids scroll inside their own boxes. */
@media (max-width:760px){
  body{overflow:auto}
  .topbar{height:auto;min-height:50px;flex-wrap:wrap;padding:8px 12px;gap:8px}
  .brand{flex:1 1 auto}
  .topbar-right{flex-wrap:wrap;gap:6px;min-width:0;max-width:100%}
  .scorechips,.scenario-chip,.term-chip{flex-wrap:wrap;min-width:0;max-width:100%}
  .shell,.shell.no-inspector{display:block;height:auto}
  .sidenav{display:flex;overflow-x:auto;overflow-y:hidden;padding:4px 0;border-right:0;border-bottom:1px solid #0A1F3A}
  .nav-item{width:auto;flex:none;border-left:0;border-bottom:3px solid transparent;padding:8px 10px}
  .nav-item.active{border-bottom-color:var(--citron)}
  .nav-sep,.nav-foot{display:none}
  .panel{overflow:visible;padding:12px 16px 30px}
  .inspector{border-left:0;border-top:1px solid var(--line)}
  .view-head p{max-width:100%}
  /* A button whose label names its items (the import review's "Create all 2 missing cohorts
     (...)") wraps instead of pushing the page sideways. */
  .panel .btn{white-space:normal;max-width:100%;line-height:1.25}
}

/* Scenario list note: clamp to four lines so one long note cannot push the
   Load and Delete buttons off the card. */
.snote{
  margin-top:4px;
  white-space:pre-line;
  display:-webkit-box;
  -webkit-line-clamp:4;
  line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}