/* ============================================================== tokens ==
   Light is the base; dark is stated twice on purpose — once for the system
   preference and once for an explicit choice — because CSS has no way to
   share one declaration block between a media query and a selector. */
:root{
  --bg:#f6f5f2;          --sunk:#eceae4;      --panel:#fff;  --panel-2:#faf9f7;
  --fg:#191816;          --fg-2:#4b4842;      --muted:#7d7970;
  --line:#ded9cf;        --line-2:#cbc5b8;
  --accent:#4f3fd0;      --accent-2:#7b6bf5;  --accent-soft:#ece9fd;
  --accent-ink:#fff;
  --ok:#0f6b41;          --ok-soft:#e0f2e8;
  --warn:#8a5200;        --warn-soft:#fbeed4;
  --bad:#9e1f22;         --bad-soft:#fbe4e3;
  --free:#f3f1ed;        --gapfill:#fbe2dd;   --gapline:#cf8578;
  --cell-l:96%; --cell-s:60%; --edge-l:60%; --edge-s:50%;
  /* What a section is filled with.  One token, resolved where it is used,
     so pointing it at `--panel` follows both themes without a copy in each
     — and `transparent` here is still the whole flat look, one word away.
     Nested blocks use `--panel-2` instead: a note inside a panel has to be
     a shade off it or the two read as one surface. */
  --surface:var(--panel);
  --r1:8px; --r2:12px; --r3:18px;
  --sh1:0 1px 1px rgba(30,25,15,.035), 0 2px 5px rgba(30,25,15,.045);
  --sh2:0 2px 5px rgba(30,25,15,.05), 0 12px 30px rgba(30,25,15,.08);
  --sh3:0 8px 24px rgba(30,25,15,.09), 0 30px 70px rgba(30,25,15,.12);
  --rail:248px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#121118;          --sunk:#0d0c12;      --panel:#1b1a22; --panel-2:#211f2a;
  --fg:#f0eef5;          --fg-2:#cbc7d5;      --muted:#928da1;
  --line:#35323f;        --line-2:#474354;
  --accent:#a08fff;      --accent-2:#c0b3ff;  --accent-soft:#272040;
  --accent-ink:#17142a;
  --ok:#5fd49b;          --ok-soft:#132e1f;
  --warn:#e3b263;        --warn-soft:#312612;
  --bad:#ff958c;         --bad-soft:#391d1d;
  --free:#191821;        --gapfill:#3a2123;   --gapline:#8f4f49;
  --cell-l:18%; --cell-s:28%; --edge-l:56%; --edge-s:44%;
  --sh1:0 1px 1px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.25);
  --sh2:0 2px 5px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.4);
  --sh3:0 8px 24px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.55);
}}
:root[data-theme=dark]{
  --bg:#121118;          --sunk:#0d0c12;      --panel:#1b1a22; --panel-2:#211f2a;
  --fg:#f0eef5;          --fg-2:#cbc7d5;      --muted:#928da1;
  --line:#35323f;        --line-2:#474354;
  --accent:#a08fff;      --accent-2:#c0b3ff;  --accent-soft:#272040;
  --accent-ink:#17142a;
  --ok:#5fd49b;          --ok-soft:#132e1f;
  --warn:#e3b263;        --warn-soft:#312612;
  --bad:#ff958c;         --bad-soft:#391d1d;
  --free:#191821;        --gapfill:#3a2123;   --gapline:#8f4f49;
  --cell-l:18%; --cell-s:28%; --edge-l:56%; --edge-s:44%;
  --sh1:0 1px 1px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.25);
  --sh2:0 2px 5px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.4);
  --sh3:0 8px 24px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);direction:rtl;
  font:15px/1.55 "Segoe UI",Rubik,system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{line-height:1.25;font-weight:670;letter-spacing:-.015em;margin:0}
h1{font-size:22px} h2{font-size:18px} h3{font-size:14px;color:var(--fg-2)}
p{margin:5px 0}
svg{display:block}
code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;
  background:var(--sunk);padding:1px 5px;border-radius:5px}
a{color:var(--accent);text-underline-offset:3px}
::selection{background:var(--accent-soft)}

/* ---------------------------------------------------------- scrollbars --
   The platform default is a wide grey slab with its own track, which is the
   loudest thing on a page whose sections are a hairline border.  These are
   the same bar reduced to the part that carries meaning: a thumb showing
   how far down you are, no track, no arrows, and a colour from the theme so
   it works in both.

   Both syntaxes, because they are not the same feature.  `scrollbar-width`
   and `scrollbar-color` are the standard and they *inherit*, so setting
   them on `html` reaches every scroller; the `::-webkit-scrollbar` rules
   are the older mechanism and are the ones that allow a padded thumb.  A
   browser applies whichever it knows and ignores the other. */
html{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;
  /* A transparent border clipped to the padding box is what insets the
     thumb without a track to inset it against. */
  border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted);
  background-clip:padding-box}
*::-webkit-scrollbar-thumb:active{background:var(--accent);
  background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
.hidden{display:none!important}
.grow{flex:1;min-width:0}
.lead{color:var(--muted);font-size:13.5px;max-width:76ch}
.fine{color:var(--muted);font-size:12px;line-height:1.6}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ============================================================ controls == */
button,.btn{font:inherit;font-weight:500;padding:8px 15px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--fg);
  border-radius:var(--r1);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;
  transition:border-color .13s,color .13s,background .13s,transform .07s}
button:hover,.btn:hover{border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft)}
button:active,.btn:active{transform:translateY(1px)}
button:focus-visible,.btn:focus-visible,input:focus-visible,
select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
button.primary{background:var(--accent);color:var(--accent-ink);
  border-color:transparent}
button.primary:hover{background:var(--accent-2);color:var(--accent-ink)}
button.ghost{box-shadow:none;background:none;border-color:transparent;
  color:var(--muted)}
button.ghost:hover{background:var(--sunk);color:var(--fg)}
button.link{border:0;background:none;box-shadow:none;color:var(--accent);
  padding:0;font-weight:600;text-decoration:underline}
button.block{width:100%}
button.icon{padding:7px;width:32px;height:32px}
button:disabled{opacity:.4;cursor:default;transform:none}
button.danger:hover{border-color:var(--bad);color:var(--bad);
  background:var(--bad-soft)}
.seg{display:inline-flex;background:var(--sunk);border-radius:10px;padding:3px;
  gap:2px}
.seg button{border:0;box-shadow:none;background:none;color:var(--muted);
  border-radius:7px;padding:5px 14px}
.seg button.on{background:var(--panel);color:var(--accent);font-weight:650}
input,select,textarea{font:inherit;padding:8px 11px;
  border:1px solid var(--line-2);border-radius:var(--r1);
  background:var(--surface);color:var(--fg);width:100%}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
input::placeholder{color:var(--muted)}
label{display:block;margin:11px 0;font-size:12.5px;color:var(--muted);
  font-weight:600}
label>input:not([type=checkbox]),label>select{margin-top:5px;color:var(--fg);
  font-weight:400}
label.inline{display:inline-flex;gap:7px;align-items:center;margin:0;
  font-weight:500}
label.inline>input,label.inline>select{width:auto;margin:0}

/* ============================================================== sign in = */
.auth{position:fixed;inset:0;display:flex;background:var(--bg);z-index:50;
  overflow:auto}
.auth-side{flex:1 1 42%;padding:44px 40px;color:var(--accent-ink);
  background:var(--accent);
  background:linear-gradient(155deg,var(--accent) 0%,var(--accent-2) 100%);
  display:flex;flex-direction:column;justify-content:center;gap:18px}
.auth-side h2{font-size:26px;line-height:1.35;max-width:16ch;font-weight:700}
.auth-side .fine{color:inherit;opacity:.75;max-width:44ch}
.sell{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;
  gap:11px;max-width:46ch}
.sell li{font-size:14px;opacity:.92;padding-inline-start:18px;
  position:relative;line-height:1.5}
.sell li::before{content:"";position:absolute;inset-inline-start:0;top:9px;
  width:7px;height:7px;border-radius:2px;background:currentColor;opacity:.6}
.sell b{opacity:1;font-weight:700}
.auth-main{flex:1 1 58%;display:grid;place-items:center;padding:30px}
.auth-card{width:min(400px,100%);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r3);
  padding:30px 30px 24px}
.auth-card h1{font-size:21px;margin-bottom:3px}
.auth-card form{margin-top:14px}
.switch-line{margin-top:16px;font-size:13px;color:var(--muted);
  text-align:center}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand.big{font-size:17px;color:inherit}
.mark{width:30px;height:30px;border-radius:9px;flex:none;display:grid;
  place-items:center;font-size:15px;font-weight:800;
  background:var(--accent);color:var(--accent-ink);
  background:linear-gradient(140deg,var(--accent),var(--accent-2))}
.auth-side .mark{background:rgba(255,255,255,.22);color:inherit}
@media (max-width:860px){.auth-side{display:none}}

/* ============================================================== shell === */
#app{display:flex;min-height:100vh;align-items:stretch}
#rail{width:var(--rail);flex:none;background:var(--surface);
  border-inline-end:1px solid var(--line);padding:16px 13px;
  display:flex;flex-direction:column;gap:14px;position:sticky;top:0;
  height:100vh;overflow:auto;overscroll-behavior:contain}
#rail>.brand{padding:2px 5px 0}
#stage{flex:1;min-width:0;padding:24px 30px 44px;max-width:1620px}
.page-head{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.page-head h1{margin-bottom:3px}
.tab{display:none;animation:rise .2s ease}
.tab.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1}}

.switcher{position:relative}
.switcher-btn{width:100%;justify-content:flex-start;text-align:start;
  background:var(--surface);border-color:var(--line);padding:9px 11px;gap:8px}
.switcher-btn b{display:block;font-size:13.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.switcher-btn small{display:block;color:var(--muted);font-size:11.5px}
.switcher-btn:hover{background:var(--accent-soft);color:var(--fg)}
.caret{width:0;height:0;border-inline:4px solid transparent;
  border-top:5px solid var(--muted);flex:none}
.menu{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:40;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:var(--sh3);padding:5px;
  max-height:60vh;overflow:auto;overscroll-behavior:contain}
.menu button{width:100%;justify-content:flex-start;text-align:start;
  border:0;box-shadow:none;background:none;padding:8px 10px;font-size:13px}
.menu button:hover{background:var(--sunk);color:var(--fg)}
.menu button.on{background:var(--accent-soft);color:var(--accent)}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 2px}
.menu small{display:block;color:var(--muted);font-size:11px}

#nav{display:flex;flex-direction:column;gap:2px;flex:1}
#nav button{justify-content:flex-start;border:0;box-shadow:none;
  background:none;color:var(--muted);padding:9px 11px;font-size:13.5px;
  border-radius:var(--r1);gap:10px}
#nav button:hover{background:var(--sunk);color:var(--fg)}
#nav button.on{background:var(--accent-soft);color:var(--accent);
  font-weight:650}
#nav button svg{width:17px;height:17px;flex:none;opacity:.9}
#nav .badge{margin-inline-start:auto;font-size:10.5px;font-weight:700;
  background:var(--bad);color:#fff;border-radius:999px;padding:1px 7px}
#nav .badge.ok{background:var(--ok)}
.rail-foot{display:flex;align-items:center;gap:8px;
  border-top:1px solid var(--line);padding-top:11px}
.rail-foot>#theme{flex:none;border-color:var(--line)}
.rail-foot>#theme:hover{background:var(--accent-soft)}
.user-chip{display:flex;flex:1;min-width:0;align-items:center;gap:9px;
  padding:6px 8px;border-radius:var(--r1);border:1px solid var(--line)}
.user-chip b{display:block;font-size:13px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.user-chip small{color:var(--muted);font-size:11px}
.avatar{width:28px;height:28px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-weight:700;font-size:12.5px;
  background:var(--accent);color:var(--accent-ink)}

@media (max-width:900px){
  #app{flex-direction:column}
  #rail{width:auto;height:auto;position:static;flex-direction:row;
    flex-wrap:wrap;align-items:center;border-inline-end:0;
    border-bottom:1px solid var(--line)}
  .switcher{flex:1 1 190px}
  #nav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%}
  .rail-foot{flex-direction:row;border-top:0;padding-top:0}
  #stage{padding:16px}
}

/* ========================================================== containers == */
.cols{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.col{flex:1 1 400px;min-width:300px}
.col.wide{flex:3 1 620px}
.col.side{flex:1 1 330px;max-width:430px;position:sticky;top:20px}
.panel{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r2);padding:20px 22px;margin:0 0 16px}
.panel>b:first-child{display:block;margin-bottom:3px;font-size:14.5px}
.list{display:flex;flex-direction:column;gap:10px}
.card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r2);padding:16px 18px;display:flex;gap:12px;
  align-items:center;transition:border-color .14s}
.card:hover{border-color:var(--line-2)}
.card b{display:block;font-size:14.5px}
.card small{color:var(--muted);font-size:12.5px}
.card.on{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft),var(--sh1)}
.empty{color:var(--muted);font-size:13.5px;padding:38px 24px;
  border:1px dashed var(--line-2);border-radius:var(--r2);text-align:center;
  background:var(--surface)}
.empty b{display:block;color:var(--fg);margin-bottom:5px;font-size:15px}
.drop{border:2px dashed var(--line-2);border-radius:var(--r2);
  padding:24px 18px;text-align:center;cursor:pointer;
  background:var(--panel-2);display:block;
  transition:border-color .15s,background .15s;
  font-weight:500;color:var(--fg-2)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop input{display:none}
.drop em{display:block;margin-top:6px;color:var(--accent);font-style:normal;
  font-size:12px;font-weight:600}
.drop-icon{display:block;width:26px;height:26px;margin:0 auto 8px;
  border:2px solid currentColor;border-radius:6px;opacity:.35;position:relative}
.drop-icon::after{content:"";position:absolute;inset-inline-start:50%;top:5px;
  width:2px;height:12px;background:currentColor;transform:translateX(-50%)}

/* =========================================================== messages === */
.note{border-radius:var(--r1);padding:11px 14px;margin:9px 0;font-size:13.5px;
  border:1px solid var(--line);border-inline-start:3px solid var(--line-2);
  background:var(--panel-2);color:var(--fg-2)}
.note b{display:block;color:var(--fg);font-weight:650;margin-bottom:1px}
.note.ok{border-inline-start-color:var(--ok);background:var(--ok-soft)}
.note.warn{border-inline-start-color:var(--warn);background:var(--warn-soft)}
.note.bad{border-inline-start-color:var(--bad);background:var(--bad-soft)}
#toast{position:fixed;inset-block-end:20px;inset-inline-start:20px;z-index:99;
  display:flex;flex-direction:column;gap:9px;pointer-events:none}
#toast div{background:var(--panel);border:1px solid var(--line);
  border-inline-start:3px solid var(--accent);border-radius:var(--r1);
  padding:11px 15px;box-shadow:var(--sh2);max-width:62ch;font-size:13.5px;
  animation:slide .22s ease}
@keyframes slide{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
#toast div.bad{border-inline-start-color:var(--bad)}
#toast div.ok{border-inline-start-color:var(--ok)}

.pill{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:650;
  background:var(--sunk);color:var(--muted);white-space:nowrap;line-height:1.6}
.pill.hard{background:var(--accent-soft);color:var(--accent)}
.pill.soft{background:var(--ok-soft);color:var(--ok)}
.pill.off{background:var(--bad-soft);color:var(--bad)}

/* ========================================================== overview ==== */
.hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r3);padding:26px 28px;
  margin-bottom:18px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;
  width:5px;background:var(--accent)}
.hero.bad::before{background:var(--bad)}
.hero.warn::before{background:var(--warn)}
.hero h2{font-size:24px;margin-bottom:5px}
.hero .lead{margin-bottom:0}
.status{display:inline-flex;align-items:center;gap:7px;font-weight:650;
  font-size:12.5px;padding:5px 12px;border-radius:999px;
  background:var(--ok-soft);color:var(--ok)}
.status.bad{background:var(--bad-soft);color:var(--bad)}
.status.warn{background:var(--warn-soft);color:var(--warn)}
.status.idle{background:var(--sunk);color:var(--muted)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor}
.steps{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:18px}
.step{flex:1 1 190px;display:flex;gap:11px;align-items:flex-start;
  text-align:start;justify-content:flex-start;padding:15px 17px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r2);cursor:pointer}
.step:hover{border-color:var(--accent);color:var(--fg)}
.step .num{width:24px;height:24px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-size:12px;font-weight:700;background:var(--sunk);
  color:var(--muted)}
.step b{display:block;font-size:13.5px;font-weight:650}
.step small{display:block;color:var(--muted);font-size:11.5px;
  white-space:normal;line-height:1.45}
.step.done .num{background:var(--ok-soft);color:var(--ok)}
.step.now{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.step.now .num{background:var(--accent);color:var(--accent-ink)}
.step.later{opacity:.6}

.stats{display:grid;gap:13px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r2);padding:16px 18px}
.stat b{display:block;font-size:25px;font-weight:720;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.stat span{color:var(--muted);font-size:12px}
.stat.accent b{color:var(--accent)}
.stat.bad b{color:var(--bad)}
.stat.ok b{color:var(--ok)}

/* ======================================================== constraints === */
details.group,details.entity{border:1px solid var(--line);
  border-radius:var(--r2);margin:0 0 14px;background:var(--surface);
  overflow:hidden}
details>summary{padding:14px 18px;cursor:pointer;font-weight:650;
  display:flex;gap:10px;align-items:center;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary:hover{background:var(--panel-2)}
details>summary::before{content:"";width:0;height:0;flex:none;
  border-inline-start:5px solid var(--muted);border-block:4px solid transparent;
  transition:transform .16s;transform-origin:30% 50%}
details[open]>summary::before{transform:rotate(-90deg)}
details.group>summary{border-bottom:1px solid var(--line)}
details.entity>summary .meta{color:var(--muted);font-weight:400;
  font-size:12.5px;margin-inline-start:auto;text-align:end}
.rule{border-top:1px solid var(--line);padding:16px 19px}
.rule:hover{background:var(--panel-2)}
.rule .head{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.rule .head>b{flex:1;min-width:190px;font-size:14px}
.rule .why{color:var(--muted);font-size:12.8px;margin:8px 0 0;max-width:88ch;
  line-height:1.65}
.rule .scope{font-size:12px;color:var(--muted);margin-top:8px;padding-top:7px;
  border-top:1px dashed var(--line)}
.rule .scope b{color:var(--fg-2)}
.rule.disabled{opacity:.55}
.switch{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--muted);font-weight:600;cursor:pointer;padding:5px 11px;
  border-radius:999px;background:var(--sunk)}
.switch:hover{background:var(--accent-soft);color:var(--accent)}

/* ========================================================== timetable == */
.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  margin-bottom:10px}
.toolbar #filter{width:9em}
.score{display:flex;gap:8px;align-items:center;font-size:12.5px;
  color:var(--muted)}
.score .chip{font-weight:700;padding:4px 11px;border-radius:999px;
  background:var(--ok-soft);color:var(--ok)}
.score .chip.bad{background:var(--bad-soft);color:var(--bad)}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:12px;color:var(--muted);
  margin:0 2px 14px;align-items:center}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;
  margin-inline-end:6px;vertical-align:-1px;border:1px solid var(--line-2)}
.legend .l-free{background:var(--free)}
.legend .l-gap{background:var(--gapfill);border-color:var(--gapline)}
.legend .l-out{background:var(--sunk)}
.legend .l-lesson{background:hsl(255 var(--cell-s) var(--cell-l));
  border-color:hsl(255 var(--edge-s) var(--edge-l))}
.legend .hint{margin-inline-start:auto;opacity:.8}

.wrap{overflow:auto;overscroll-behavior:contain}
table.grid{border-collapse:separate;border-spacing:0;width:100%;
  min-width:620px;font-size:12px}
table.grid th,table.grid td{border-bottom:1px solid var(--line);
  border-inline-start:1px solid var(--line);padding:0;text-align:center;
  vertical-align:middle;height:47px}
table.grid tr>*:last-child{border-inline-end:0}
table.grid tr:last-child>*{border-bottom:0}
table.grid thead th{position:sticky;top:0;z-index:2;background:var(--panel-2);
  font-weight:650;height:33px;padding:5px 7px;color:var(--fg-2);
  box-shadow:0 1px 0 var(--line)}
table.grid tbody th{position:sticky;inset-inline-start:0;z-index:1;
  background:var(--panel-2);width:34px;color:var(--muted);font-weight:650;
  box-shadow:1px 0 0 var(--line)}
table.grid thead th:first-child{z-index:3}
td.free{background:var(--free)}
td.out{background:var(--sunk);opacity:.5}
td.gap{background:var(--gapfill)}
td.gap .t{color:var(--gapline);font-weight:650;font-size:10px}
.cell{display:flex;flex-direction:column;justify-content:center;gap:1px;
  width:100%;height:100%;padding:5px 7px;cursor:grab;border:0;border-radius:0;
  border-inline-start:3px solid hsl(var(--h) var(--edge-s) var(--edge-l));
  background:hsl(var(--h) var(--cell-s) var(--cell-l));
  color:var(--fg);font:inherit;line-height:1.25;text-align:center;
  box-shadow:none;transition:filter .1s,box-shadow .1s}
.cell:hover{filter:brightness(.965);color:var(--fg);
  box-shadow:inset 0 0 0 1px hsl(var(--h) var(--edge-s) var(--edge-l))}
:root[data-theme=dark] .cell:hover{filter:brightness(1.25)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cell:hover{
  filter:brightness(1.25)}}
.cell .s{font-weight:650;font-size:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cell .t{color:var(--muted);font-size:10px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cell.cont{opacity:.7;border-inline-start-style:dotted;cursor:default}
.cell.sel{box-shadow:inset 0 0 0 2px var(--accent);
  filter:saturate(1.2) brightness(1.02)}
.cell.locked .s::after{content:"🔒";font-size:9px;margin-inline-start:3px}
.cell.dragging{opacity:.3}
td.target{box-shadow:inset 0 0 0 2px var(--accent)}
.cell[draggable=true]:active{cursor:grabbing}

/* ========================================================== inspector == */
.opt{display:flex;gap:10px;align-items:center;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r1);margin:6px 0;
  font-size:13px;background:var(--panel-2)}
.opt:hover{border-color:var(--accent-2)}
.opt b{font-weight:650}
.opt small{color:var(--muted);display:block;font-size:11.5px;margin-top:1px}
.opt.better{border-inline-start:3px solid var(--ok)}
.opt.worse{border-inline-start:3px solid var(--warn)}
.opt.same{border-inline-start:3px solid var(--line-2)}
.delta{font-variant-numeric:tabular-nums;font-weight:700;padding:2px 9px;
  border-radius:999px;background:var(--sunk);color:var(--muted)}
.delta.up{color:var(--bad);background:var(--bad-soft)}
.delta.down{color:var(--ok);background:var(--ok-soft)}
.blocked-list{max-height:230px;overflow:auto;overscroll-behavior:contain;
  font-size:12px;
  color:var(--muted);margin-top:6px}
.blocked-list div{padding:5px 2px;border-bottom:1px solid var(--line)}
.blocked-list div:last-child{border:0}
.lesson-head{display:flex;gap:11px;align-items:stretch}
.swatch{width:6px;border-radius:3px;flex:none;
  background:hsl(var(--h) var(--edge-s) var(--edge-l))}

/* ============================================================= tables == */
table.kv{border-collapse:collapse;width:100%;font-size:12.8px}
table.kv th,table.kv td{border-bottom:1px solid var(--line);padding:8px 10px;
  text-align:start}
table.kv thead th{color:var(--muted);font-weight:650;font-size:11.5px;
  border-bottom:1px solid var(--line-2)}
table.kv tbody tr:hover{background:var(--panel-2)}
table.kv td.num{text-align:end;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:var(--r2);
  background:var(--surface);padding:4px 16px 10px}
/* The section list is a reference, not six announcements: a term and the
   line that explains it, so the whole set reads in one glance. */
.help-item{padding:7px 0;border-top:1px solid var(--line);font-size:12.5px;
  color:var(--muted);line-height:1.6}
.help-item:first-child{border-top:0;padding-top:0}
.help-item b{display:block;color:var(--fg);font-weight:650;font-size:13px;
  font-family:ui-monospace,Consolas,monospace}

pre.sample{background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r1);padding:13px;overflow:auto;font-size:11.5px;
  overscroll-behavior:contain;
  max-height:420px;line-height:1.7;margin:8px 0 0;
  font-family:ui-monospace,Consolas,monospace;direction:ltr;text-align:start}
.bar-track{background:var(--sunk);border-radius:999px;height:8px;
  overflow:hidden;margin:12px 0 7px}
.bar-fill{background:var(--accent);height:100%;transition:width .35s ease;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* =============================================================== print = */
@media print{
  #rail,.toolbar,.legend,#inspector,#edit-flash,#toast,#build-panel,
  .page-head .row,form{display:none!important}
  body{background:#fff}
  #app{display:block}
  #stage{padding:0;max-width:none}
  details>*{display:block!important}
  details>summary::before{display:none}
  details.entity{break-inside:avoid;box-shadow:none;border-color:#bbb;
    margin:0 0 9px}
  .col.wide{flex:1 1 100%}
  .wrap{overflow:visible}
}