/* ============================================================
   Class Planner (classroom.html)

   Same token language as coach-panel.html so the two app pages
   feel like one product. Kept in its own file because this page
   is heavy enough on markup already.
   ============================================================ */

:root{
  --bg-0:#07090f;
  --bg-1:#0b0e18;
  --panel:#0e1220;
  --cyan:#4fd8ff;
  --cyan-dim:rgba(79,216,255,0.32);
  --gold:#c9a66b;
  --violet:#8b7fe8;
  --amber:#d08a52;
  --green:#5ac8a0;
  --rose:#e0748a;
  --ink:#f3f6fb;
  --ink-dim:#8d99b2;
  --line:rgba(255,255,255,0.09);
  --line-2:rgba(255,255,255,0.05);
  --ease-lux:cubic-bezier(0.22, 1, 0.36, 1);
  --rail:246px;
  --rail-mini:60px;
  /* The page speaks the system's own face: San Francisco on an iPad or a
     Mac, Segoe on the school laptop. No webfont to wait for. */
  --sans:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Inter, Roboto, 'Helvetica Neue', sans-serif;
  /* Controls are filled, not outlined: one quiet fill, one a step up */
  --fill:rgba(255,255,255,0.06);
  --fill-2:rgba(255,255,255,0.11);
  --r-card:16px;
  --r-ctl:10px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  background:var(--bg-0); color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
h1,h2,h3,h4{font-family:var(--sans); font-weight:600; letter-spacing:-0.02em;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px;}
::selection{background:rgba(79,216,255,0.25);}

*::-webkit-scrollbar{width:10px; height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10); border-radius:6px; border:3px solid var(--bg-0);}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18);}

/* ================= SHELL =================
   One class carries the whole sidebar state: .rail-open on the
   app means the rail is out at full width. On a wide screen the
   rail never leaves: shut, it folds in to a strip of icons and the
   content takes the room it gave up. On a narrow one it is a
   drawer that slides in over the content and is gone when shut.
   The rail is fixed rather than a grid track so it can move
   without the content having to wait for it. */
.app{
  display:block; min-height:100vh;
  padding-left:var(--rail-mini);
  transition:padding-left .25s var(--ease-lux);
}
.app.rail-open{padding-left:var(--rail);}

.rail{
  position:fixed; left:0; top:0; width:var(--rail-mini); height:100vh;
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:1.1rem 0 1.2rem;
  z-index:60; overflow-y:auto; overflow-x:hidden;
  transition:width .25s var(--ease-lux), transform .25s var(--ease-lux);
}
.app.rail-open .rail{width:var(--rail);}

/* Only ever seen under 900px, where the rail overlays the page. */
.rail-backdrop{display:none;}
/* the button that folds the rail in and out and, beside it, the logo */
.rail-brand{
  display:flex; align-items:center; gap:0.7rem;
  padding:0 1rem 1.1rem 0.75rem; margin-bottom:1.1rem;
}
.rail-brand img{height:32px; width:auto;}
/* shown only on the folded strip */
.rail-nav.rail-mini{display:none;}
.rail-school{
  margin:0 1rem 1.5rem; padding:0.9rem 1rem;
  border-radius:14px; background:var(--fill);
}
.rail-school .rs-lab{font-size:0.66rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--gold);}
.rail-school .rs-name{font-family:var(--sans); font-size:1.02rem; font-weight:600; letter-spacing:-0.01em; margin-top:0.35rem; line-height:1.25;}
.rail-school .rs-meta{font-size:0.74rem; color:var(--ink-dim); margin-top:0.4rem;}

.rail-sec{
  padding:0 1.5rem; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-dim); opacity:0.65; margin:1.4rem 0 0.6rem;
}
.rail-nav{display:flex; flex-direction:column; gap:1px; padding:0 0.75rem;}
.rail-link{
  display:flex; align-items:center; gap:0.8rem;
  padding:0.62rem 0.75rem; border-radius:var(--r-ctl); font-size:0.9rem;
  color:var(--ink-dim); position:relative; text-align:left; width:100%;
  white-space:nowrap; flex:none;
  transition:color .22s ease, background .22s ease;
}
.rail-link svg{
  width:17px; height:17px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
/* the selected row is a filled pill, nothing more */
.rail-link:hover{color:var(--ink); background:rgba(255,255,255,0.04);}
.rail-link.active{color:var(--ink); background:rgba(79,216,255,0.13);}
.rail-link .pip{
  margin-left:auto; font-size:0.68rem; padding:0.1rem 0.42rem; border-radius:20px;
  background:rgba(255,255,255,0.07); color:var(--ink-dim);
}
.rail-link.active .pip{background:var(--cyan-dim); color:var(--ink);}
/* the schools list: a folder tree. A school is a folder, its classes
   and any folders the coach made sit inside it; each level is indented
   by an inline padding-left */
.rail-schools .rail-link{padding:0.5rem 0.75rem; font-size:0.86rem; gap:0.45rem;}
.rail-schools .rail-link svg{width:16px; height:16px;}
.rail-schools .rs-folder svg{color:var(--gold);}
.rail-schools .rs-chev{
  width:0.9rem; flex:none; text-align:center; font-size:1.05rem; line-height:1;
  color:var(--ink-dim); transition:transform .18s ease, color .18s ease;
}
.rail-schools .rs-folder .rs-chev:hover{color:var(--cyan);}
.rail-schools .rs-folder.is-open .rs-chev{transform:rotate(90deg);}
.rail-schools .rs-folder.rs-path{color:var(--ink);}
.rail-schools .rs-folder.rs-here{color:var(--ink); background:rgba(201,166,107,0.09);}
.rail-schools .rail-sub svg{width:14px; height:14px; opacity:0.75;}
.rail-schools .rs-ini{
  width:22px; height:22px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.66rem; font-weight:600; color:#0a0d14; background:linear-gradient(140deg, var(--gold), var(--amber, #e0a458));
}
.rail-schools .rail-link.active .rs-ini{box-shadow:0 0 0 2px rgba(79,216,255,0.35);}
.rail-schools .rs-txt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rail-schools .rail-sub{padding-top:0.38rem; padding-bottom:0.38rem; font-size:0.8rem;}
.rail-schools .rail-sub.active{color:var(--cyan); background:none;}
.rail-schools .rs-ex{background:rgba(255,255,255,0.12); color:var(--ink-dim);}
.rail-schools .rs-toggle{justify-content:center; font-size:0.76rem; padding:0.4rem 0.75rem; color:var(--ink-dim); opacity:0.8;}
.rail-schools .rs-toggle:hover{color:var(--cyan); opacity:1;}
.rail-schools .rs-add{color:var(--cyan); margin-top:0.25rem;}
.rail-schools .rs-add:hover{color:var(--cyan); background:rgba(79,216,255,0.08);}
.rail-foot{margin-top:auto; padding:1.2rem 1.5rem 0;}
.rail-back{display:flex; align-items:center; gap:0.6rem; font-size:0.82rem; color:var(--ink-dim);}
.rail-back:hover{color:var(--ink);}
.rail-back svg{
  width:15px; height:15px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.main{min-width:0; display:flex; flex-direction:column;}

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:1rem;
  padding:1.3rem 2rem; border-bottom:1px solid var(--line);
  background:rgba(7,9,15,0.88); backdrop-filter:blur(14px);
}
.tb-title h1{font-size:1.4rem;}
.tb-title p{font-size:0.82rem; color:var(--ink-dim); margin-top:0.2rem;}
.tb-spacer{flex:1;}
/* Always visible, at the top-left of the main area. */
.railtoggle{
  display:flex; flex:none; width:36px; height:36px;
  border-radius:var(--r-ctl); background:var(--fill);
  transition:color .2s ease, background .2s ease;
}
.railtoggle:hover{color:var(--ink); background:var(--fill-2);}
.railtoggle svg{
  width:18px; height:18px; margin:auto; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
/* the panel's divider slides to the edge when the rail is away */
.railtoggle .pane-edge{transition:transform .25s var(--ease-lux); transform-origin:center;}
.app:not(.rail-open) .railtoggle .pane-edge{transform:translateX(-4px); opacity:0.55;}

/* ================= WORKSPACE SWITCH =================
   The four app pages are one product seen from four chairs, so
   the way across is a strip of tabs rather than a link buried in
   the rail. Only the chair you are in says its name; the other
   three are icons with a title, because four labels do not fit a
   topbar that also carries the page's own buttons.

   The strip itself is built in assets/coach-session.js, so the
   four pages cannot drift apart. */
.wsswitch{
  display:flex; flex:none; gap:2px; padding:2px;
  border-radius:var(--r-ctl); background:var(--fill);
}
.wsswitch[hidden]{display:none;}
.ws-tab{
  display:flex; align-items:center; gap:0.45rem;
  padding:0.42rem 0.6rem; border-radius:8px;
  font-size:0.8rem; color:var(--ink-dim); white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.ws-tab svg{
  width:15px; height:15px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.ws-tab i{display:none; font-style:normal;}
.ws-tab.is-on i{display:inline;}
.ws-tab:hover{color:var(--ink); background:rgba(255,255,255,0.045);}
.ws-tab.is-on{
  color:var(--ink); background:rgba(255,255,255,0.14);
  box-shadow:0 1px 3px rgba(0,0,0,0.35);
  cursor:default; padding-right:0.8rem;
}
.ws-tab.is-on:hover{background:rgba(255,255,255,0.14);}

.btn-key{
  padding:0.6rem 1.15rem; border-radius:var(--r-ctl); font-size:0.86rem; font-weight:600;
  background:var(--cyan); color:#04121a;
  transition:filter .2s ease, transform .12s ease;
}
.btn-key:hover{filter:brightness(1.08);}
.btn-key:active, .btn-quiet:active{transform:scale(0.97);}
.btn-quiet{
  padding:0.55rem 0.95rem; border-radius:var(--r-ctl); background:var(--fill);
  font-size:0.82rem; font-weight:500; color:var(--ink);
  transition:background .2s ease, color .2s ease, transform .12s ease;
}
.btn-quiet:hover{background:var(--fill-2);}
.btn-quiet.btn-warn{color:var(--rose);}
.btn-quiet.btn-warn:hover{background:rgba(224,116,138,0.14);}

.view{display:none; padding:1.8rem 2rem 4rem;}
/* The register is a table in spirit: it takes whatever width the
   window gives it, with 24px of air at the sides and no cap. */
#view-roster{padding-left:1.5rem; padding-right:1.5rem; max-width:none;}
.view.active{display:block;}

.statebar{
  display:flex; align-items:center; gap:0.7rem;
  padding:0.7rem 2rem; border-bottom:1px solid var(--line);
  font-size:0.8rem; color:var(--ink-dim); background:rgba(255,255,255,0.015);
}
.statebar .dot{width:7px; height:7px; border-radius:50%; background:var(--green); flex:none;}
.statebar.is-stale .dot{background:var(--amber);}
.statebar.is-bad .dot{background:var(--rose);}
.sb-spacer{flex:1;}

/* ================= CARDS ================= */
.card{
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-card);
  padding:1.2rem 1.35rem; margin-bottom:1rem;
}
.card-head{display:flex; align-items:center; gap:0.7rem; margin-bottom:0.9rem; flex-wrap:wrap;}
.card-head h2{font-size:1.2rem;}
.card-head h3{font-size:1.05rem;}
.card-head .sub{font-size:0.78rem; color:var(--ink-dim);}
.card-head .grow{flex:1;}

.chip{
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.2rem 0.62rem; border-radius:20px; font-size:0.72rem;
  /* a tinted capsule; the border is only there for the printed page */
  border:1px solid transparent; background:var(--fill);
  color:var(--ink-dim); white-space:nowrap;
}
.chip b{color:var(--ink); font-weight:600;}
.chip.lv{background:rgba(79,216,255,0.13); color:var(--cyan);}
.chip.lv b{color:var(--cyan);}
.chip.ok{background:rgba(90,200,160,0.14); color:var(--green);}
.chip.warn{background:rgba(208,138,82,0.15); color:var(--amber);}
.chip.warn b{color:var(--amber);}
.chip.bad{background:rgba(224,116,138,0.15); color:var(--rose);}
.chip.new{background:rgba(139,127,232,0.16); color:var(--violet);}

.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.1rem;}

/* ================= PLAN ================= */
.school-head{
  display:flex; align-items:baseline; gap:0.8rem; flex-wrap:wrap;
  margin:1.9rem 0 0.9rem; padding-bottom:0.6rem; border-bottom:1px solid var(--line);
}
.school-head.first{margin-top:0;}
.school-head h2{font-size:1.35rem;}
.school-head .sub{font-size:0.8rem; color:var(--ink-dim);}

.class-head{
  display:flex; align-items:baseline; gap:0.7rem; flex-wrap:wrap; margin:1.3rem 0 0.8rem;
}
.class-head h3{font-size:1.1rem;}
.class-head .sub{font-size:0.78rem; color:var(--ink-dim);}

.gcard{border-left:2px solid var(--cyan);}
.gcard[data-level="L0"]{border-left-color:var(--cyan);}
.gcard[data-level="L1"]{border-left-color:var(--green);}
.gcard[data-level="L2"]{border-left-color:var(--gold);}
.gcard[data-level="L3"]{border-left-color:var(--amber);}
.gcard[data-level="L4"]{border-left-color:var(--violet);}
.gcard .obj{font-size:0.88rem; line-height:1.55; margin:0.5rem 0 0.7rem;}
.gcard .roster{font-size:0.8rem; color:var(--ink-dim); line-height:1.7;}
.gcard .roster b{color:var(--ink); font-weight:500;}

.diff{margin-top:0.7rem; padding-top:0.7rem; border-top:1px solid var(--line-2);}
.diff li{list-style:none; font-size:0.8rem; color:var(--ink-dim); line-height:1.6;}
.diff li b{color:var(--ink); font-weight:500;}

/* rotation timeline */
.blk{display:grid; grid-template-columns:86px 1fr; gap:1rem; padding:0.9rem 0; border-top:1px solid var(--line-2);}
.blk.first{border-top:0; padding-top:0;}
.blk-time{font-size:0.78rem; color:var(--ink-dim); line-height:1.5;}
.blk-time b{display:block; font-family:var(--sans); font-size:1.02rem; color:var(--ink); font-weight:500;}
.blk-kind{font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; margin-top:0.3rem;}
.k-warmup{color:var(--cyan);}
.k-direct{color:var(--gold);}
.k-independent{color:var(--ink-dim);}
.k-paired_play{color:var(--green);}
.k-wrapup{color:var(--violet);}
.asg{padding:0.55rem 0; border-bottom:1px dashed var(--line-2);}
.asg:last-child{border-bottom:0; padding-bottom:0;}
.asg-head{display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; font-size:0.86rem;}
.asg-head .who{font-weight:500;}
.asg-head .led{font-size:0.72rem; color:var(--ink-dim);}
.asg-body{font-size:0.82rem; color:var(--ink-dim); line-height:1.65; margin-top:0.3rem; white-space:pre-wrap;}
.asg-meta{font-size:0.72rem; color:var(--ink-dim); margin-top:0.35rem; opacity:0.85;}
.pos{
  margin-top:0.45rem; padding:0.5rem 0.65rem; border:1px solid var(--line-2); border-radius:3px;
  background:rgba(255,255,255,0.02); font-size:0.78rem; color:var(--ink-dim); line-height:1.6;
}
.pos code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.72rem; color:var(--cyan); word-break:break-all;}
.pos .sol{color:var(--ink);}

ol.steps{margin:0.3rem 0 0 1.1rem; font-size:0.82rem; color:var(--ink-dim); line-height:1.7;}
ul.bul{margin:0.3rem 0 0 1.1rem; font-size:0.82rem; color:var(--ink-dim); line-height:1.7;}
ul.bul li b, ol.steps li b{color:var(--ink); font-weight:500;}

table.tbl{width:100%; border-collapse:collapse; font-size:0.82rem;}
table.tbl th{
  text-align:left; font-weight:500; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-dim); padding:0.5rem 0.6rem; border-bottom:1px solid var(--line);
}
table.tbl td{padding:0.55rem 0.6rem; border-bottom:1px solid var(--line-2); color:var(--ink-dim); vertical-align:top;}
table.tbl td b{color:var(--ink); font-weight:500;}
table.tbl code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.7rem; color:var(--cyan); word-break:break-all;}

.empty{padding:3rem 1rem; text-align:center; color:var(--ink-dim); font-size:0.9rem;}

/* ================= FORM CONTROLS =================
   The register is a table of inputs. Left to the browser they
   come out as white boxes on a black page, so every control
   gets the panel treatment. */
/* `input` bare, not input[type=text]: an input with no type
   attribute is a text box but matches no type selector. */
input, select, textarea{
  font:inherit; color:var(--ink);
  background:var(--fill);
  border:1px solid transparent; border-radius:8px;
  padding:0.34rem 0.55rem; min-width:0;
}
input:focus, select:focus{outline:none; border-color:var(--cyan-dim); background:rgba(79,216,255,0.08);}
input::placeholder{color:var(--ink-dim); opacity:0.55;}
select option{background:var(--panel); color:var(--ink);}
input[type="checkbox"]{
  accent-color:var(--cyan); width:15px; height:15px; cursor:pointer;
  background:none; border:0; padding:0;
}
/* the pickers' own icons are black-on-black in a dark page */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1); opacity:0.5; cursor:pointer;}
input[type="number"]{-moz-appearance:textfield;}

/* controls that sit inside a chip borrow the chip's border */
.chip input, .chip select{
  background:none; border:0; padding:0 0 0 0.15rem; color:var(--ink); font-size:0.78rem;
}
.chip input:focus, .chip select:focus{background:none; border:0;}
.chip{gap:0.3rem;}

table.tbl input, table.tbl select{font-size:0.8rem; padding:0.3rem 0.4rem;}
table.tbl td{vertical-align:middle;}
table.tbl tr:hover td{background:rgba(255,255,255,0.015);}
.rmStudent{padding:0.18rem 0.42rem; line-height:1; font-size:0.9rem;}

/* ================= THE REGISTER: STUDENT CARDS =================
   One card per child. The card carries its level as a data
   attribute so the accent, the tag and the active pill all move
   together from one place. */

.titleField{
  font-family:var(--sans); font-size:1.45rem; font-weight:700; letter-spacing:-0.025em;
  background:none; border:0; border-bottom:1px solid transparent; border-radius:0;
  padding:0.1rem 0.15rem; width:min(100%, 19rem); color:var(--ink);
}
.subField{
  font-size:0.85rem; color:var(--ink-dim);
  background:none; border:0; border-bottom:1px solid transparent; border-radius:0;
  padding:0.1rem 0.15rem; width:min(100%, 9rem);
}
/* --- where a class is filed, and the folder pages above it --- */
.crumbs{
  display:flex; align-items:center; gap:0.3rem; flex-wrap:wrap;
  font-size:0.78rem; color:var(--ink-dim); margin-bottom:0.55rem;
}
.crumb{color:var(--ink-dim); padding:0.1rem 0.25rem; border-radius:2px; transition:color .2s ease;}
.crumb:hover{color:var(--cyan);}
.crumbs .sep{opacity:0.5;}
.crumbs .here{color:var(--ink); padding:0.1rem 0.25rem;}

.ftiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0.7rem;}
.ftile{
  display:flex; align-items:center; gap:0.8rem; text-align:left; min-width:0;
  padding:0.9rem 1rem; border-radius:14px; background:var(--fill);
  transition:background .2s ease, transform .12s ease;
}
.ftile:hover{background:var(--fill-2);}
.ftile:active{transform:scale(0.98);}
.ftile.is-on{background:rgba(79,216,255,0.12);}
.ftile svg{
  width:26px; height:26px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.ftile.is-folder svg{color:var(--gold);}
.ftile.is-class svg{color:var(--cyan);}
.ftile-txt{min-width:0;}
.ftile b{
  display:block; font-weight:600; font-size:0.92rem; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ftile small{display:block; font-size:0.74rem; color:var(--ink-dim); margin-top:0.2rem;}

.titleField:hover, .subField:hover{border-bottom-color:var(--line);}
.titleField:focus, .subField:focus{background:none; border-bottom-color:var(--cyan);}

/* --- bulk bar --- */
.selbar{
  display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
}
.selbar .grow{flex:1;}
#tallyBar{display:inline-flex; flex-wrap:wrap; gap:0.3rem;}
/* the level buttons only appear once a student is ticked */
.selbulk{display:inline-flex; align-items:center; gap:0.6rem; flex-wrap:wrap;}
.selbulk[hidden]{display:none;}
.selcount{font-size:0.82rem; font-weight:600; color:var(--cyan);}

/* a segmented control: one track, the choices sitting inside it */
.seg{display:inline-flex; gap:2px; padding:2px; border-radius:var(--r-ctl); background:var(--fill);}
.seg button{
  min-width:2.4rem; padding:0.42rem 0.6rem; border-radius:8px;
  font-size:0.8rem; font-weight:500; color:var(--ink-dim);
  transition:background .2s ease, color .2s ease;
}
.seg button:hover{color:var(--ink); background:var(--fill-2);}

/* --- class settings: one line until the coach opens it --- */
.cset summary{
  display:flex; align-items:center; gap:0.7rem; cursor:pointer; list-style:none;
  padding:0.6rem 0.8rem; border-radius:var(--r-ctl); background:var(--fill);
  font-size:0.84rem; transition:background .2s ease;
}
.cset summary::-webkit-details-marker{display:none;}
.cset summary:hover{background:var(--fill-2);}
.cset-lab{font-weight:500;}
.cset-sum{color:var(--ink-dim); margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cset summary::after{content:'\203A'; color:var(--ink-dim); font-size:1.1rem; line-height:1; transition:transform .2s ease;}
.cset[open] summary::after{transform:rotate(90deg);}
.cset[open] summary{margin-bottom:0.8rem;}
.cset .toolrow:last-child{margin-bottom:0;}
.cset .chip{padding:0.34rem 0.7rem; font-size:0.76rem;}

/* --- the list ---
   One line per student: tick, name, level, attendance. Pressing the
   line folds that student's details down underneath it - the level
   picker, the numbers, the note - so the room reads as a short list
   until the coach wants one child. */
.scards{
  display:grid; gap:0; margin-bottom:1rem;
  grid-template-columns:1fr;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-card);
  overflow:hidden;
}
.scards:empty{display:none;}

.scard{
  position:relative;
  /* a row in a grouped list: no box of its own, a hairline under it */
  border-bottom:1px solid var(--line-2);
  transition:background .2s ease;
}
.scard:last-child{border-bottom:0;}
.scard::before{
  content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:0 3px 3px 0; background:transparent;
  transition:background .2s ease;
}
.scard:hover{background:rgba(255,255,255,0.025);}
.scard.is-open{background:rgba(255,255,255,0.035);}
.scard[data-level="L0"]::before{background:var(--cyan);}
.scard[data-level="L1"]::before{background:var(--green);}
.scard[data-level="L2"]::before{background:var(--gold);}
.scard[data-level="L3"]::before{background:var(--amber);}
.scard[data-level="L4"]::before{background:var(--violet);}
.scard.is-away{opacity:0.62;}
.scard.is-away:hover, .scard.is-away.is-open{opacity:1;}
.scard.is-picked{background:rgba(79,216,255,0.07);}

/* the line itself: the whole of it is the handle */
.scard-top{
  display:flex; align-items:center; gap:0.65rem;
  min-height:58px; padding:0.5rem 0.6rem 0.5rem 1rem; cursor:pointer;
}
.scard-pick{display:flex; align-items:center; flex:none; cursor:pointer; padding:0.4rem 0.1rem;}
.scard-name{
  flex:0 1 17rem; min-width:7rem;
  font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:-0.01em;
  background:none; border:0; border-bottom:1px solid transparent; border-radius:0;
  padding:0.15rem 0.1rem; color:var(--ink); text-overflow:ellipsis;
}
/* folded, the name is part of the handle; open, it is a box to type in */
.scard:not(.is-open) .scard-name{pointer-events:none;}
.scard.is-open .scard-name:hover{border-bottom-color:var(--line);}
.scard-name:focus{background:none; border-bottom-color:var(--cyan);}
.scard-tags{display:flex; flex:1; flex-wrap:wrap; gap:0.35rem; min-width:0;}
.scard-tags .chip i{font-style:normal;}
.scard-foot{display:flex; align-items:center; flex:none;}
.scard .attpick{padding:0; gap:4px;}
.scard-more{
  flex:none; display:flex; width:32px; height:32px; border-radius:50%;
  color:var(--ink-dim); transition:background .2s ease, color .2s ease;
}
.scard-more svg{
  width:16px; height:16px; margin:auto; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .32s var(--ease-lux);
}
.scard-top:hover .scard-more{color:var(--ink); background:var(--fill);}
.scard.is-open .scard-more{color:var(--cyan);}
.scard.is-open .scard-more svg{transform:rotate(180deg);}

/* the fold: a grid row easing from nothing to its own height, so the
   panel slides to whatever it holds with no height written down */
.scard-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease-lux);}
.scard.is-open .scard-body{grid-template-rows:1fr;}
.scard-inner{
  min-height:0; overflow:hidden; opacity:0;
  /* hidden outright once shut, so Tab does not wander into it */
  visibility:hidden; transition:opacity .18s ease, visibility 0s linear .32s;
}
.scard.is-open .scard-inner{opacity:1; visibility:visible; transition:opacity .3s ease .08s, visibility 0s;}
.scard-detail{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:0.8rem 1rem;
  padding:0.15rem 1rem 1.1rem 2.75rem;
}
.scard-detail .f{display:flex; flex-direction:column; gap:0.3rem; min-width:0;}
.scard-detail .f > span{
  font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); opacity:0.8;
}
.scard-fields{
  display:grid; flex:1 1 30rem; gap:0.7rem;
  grid-template-columns:5.5rem 5.5rem minmax(8rem, 1fr) minmax(8rem, 1.3fr);
}
.scard-fields .f input{width:100%; min-height:38px; font-size:0.84rem;}
.scard-rm{
  flex:none; margin-left:auto; padding:0.55rem 0.8rem; border-radius:var(--r-ctl);
  font-size:0.8rem; font-weight:500; color:var(--rose);
  transition:background .2s ease;
}
.scard-rm:hover{background:rgba(224,116,138,0.14);}

/* --- the level picker: a segmented control, the lit segment the level --- */
.lvpick{display:flex; gap:2px; padding:2px; border-radius:var(--r-ctl); background:var(--fill);}
.lvbtn{
  flex:1; min-width:2.5rem; min-height:34px; padding:0.3rem 0.4rem; border-radius:8px;
  font-size:0.78rem; font-weight:500; color:var(--ink-dim);
  transition:color .2s ease, background .2s ease;
}
.lvbtn:hover{color:var(--ink); background:var(--fill-2);}
.lvbtn.on{color:#04121a; background:var(--ink); font-weight:600;}
.lvbtn.on[data-lvl="L0"]{background:var(--cyan);}
.lvbtn.on[data-lvl="L1"]{background:var(--green);}
.lvbtn.on[data-lvl="L2"]{background:var(--gold);}
.lvbtn.on[data-lvl="L3"]{background:var(--amber);}
.lvbtn.on[data-lvl="L4"]{background:var(--violet); color:#f3f6fb;}

/* On a phone the line wraps: name and arrow first, attendance under them. */
@media (max-width:760px){
  .scard-top{flex-wrap:wrap; padding-right:0.5rem;}
  .scard-name{flex:1 1 8rem;}
  .scard-tags{flex:none; order:3;}
  .scard-more{order:4;}
  .scard-foot{order:5; flex:1 1 100%;}
  .scard-detail{padding-left:1rem;}
  .scard-fields{grid-template-columns:1fr 1fr; flex-basis:100%;}
  .scard-fields .f.wide{grid-column:1 / -1;}
  .f-level{flex:1 1 100%;}
}

/* Somebody who prefers less motion gets the panel without the slide. */
@media (prefers-reduced-motion: reduce){
  .btn-key:active, .btn-quiet:active, .ftile:active{transform:none;}
  .scard-body, .scard-inner, .scard.is-open .scard-inner, .scard-more svg{transition:none;}
}

/* ================= EDITOR ================= */
.toolrow{display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin-bottom:0.9rem;}
.toolrow .grow{flex:1;}
textarea.code{
  width:100%; min-height:58vh; resize:vertical;
  background:#070a12; color:#d9e2f2; border:1px solid var(--line); border-radius:4px;
  padding:1rem 1.1rem; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:0.78rem; line-height:1.65; tab-size:2;
}
textarea.code:focus{outline:none; border-color:var(--cyan-dim);}
.code-note{font-size:0.76rem; color:var(--ink-dim); margin-top:0.5rem; line-height:1.6;}
.err{color:var(--rose);}
.ok{color:var(--green);}

.warnlist li{
  list-style:none; font-size:0.82rem; color:var(--amber);
  line-height:1.7; padding-left:1.1rem; position:relative;
}
.warnlist li::before{content:'!'; position:absolute; left:0;}

.prose{font-size:0.86rem; color:var(--ink-dim); line-height:1.75; max-width:62ch;}
.prose h3{color:var(--ink); font-size:1rem; margin:1.4rem 0 0.4rem;}
.prose h3:first-child{margin-top:0;}
.prose p{margin-bottom:0.6rem;}
.prose b{color:var(--ink); font-weight:500;}
.prose code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.78rem; color:var(--cyan);}

/* From 900px up a shut rail is a strip of icons: the logo, the
   headings, the schools tree and every label step out, each icon
   keeps its job and says its name on hover. The button that folds
   it lives in the rail itself, so the topbar's copy steps aside. */
@media (min-width:900px){
  .topbar .railtoggle{display:none;}

  .app:not(.rail-open) .rail-brand{justify-content:center; padding:0 0 0.9rem;}
  .app:not(.rail-open) .rail-logo,
  .app:not(.rail-open) .rail-school,
  .app:not(.rail-open) .rail-sec,
  .app:not(.rail-open) #railSchools,
  .app:not(.rail-open) .rail-adv,
  .app:not(.rail-open) .rail-advbox,
  .app:not(.rail-open) .rail-link .pip{display:none;}
  .app:not(.rail-open) .rail-nav.rail-mini{display:flex;}

  .app:not(.rail-open) .rail-nav{padding:0 0.6rem; gap:2px; margin-bottom:0.7rem;}
  /* font-size 0 drops the label, which is a bare text node, and leaves
     the icon, which is sized in pixels */
  .app:not(.rail-open) .rail-link{justify-content:center; gap:0; padding:0; height:40px; font-size:0;}
  .app:not(.rail-open) .rail-link svg{width:18px; height:18px;}
  .app:not(.rail-open) .rail-foot{display:flex; justify-content:center; padding:0.8rem 0 0;}
  .app:not(.rail-open) .rail-back{
    justify-content:center; gap:0; width:40px; height:40px; font-size:0; border-radius:var(--r-ctl);
  }
  .app:not(.rail-open) .rail-back:hover{background:rgba(255,255,255,0.04);}
}

/* Under 900px the rail stops being furniture and becomes a
   drawer: it lies over the page instead of pushing it, so the
   content keeps the full width whether it is open or shut. */
@media (max-width:899px){
  .app, .app.rail-open{padding-left:0;}
  .rail{width:var(--rail); transform:translateX(-100%); box-shadow:0 0 60px -10px rgba(0,0,0,0.9);}
  .app.rail-open .rail{transform:none;}

  .rail-backdrop{
    display:block; position:fixed; inset:0; z-index:50;
    background:rgba(4,6,11,0.66);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  .app.rail-open .rail-backdrop{opacity:1; pointer-events:auto;}

  .topbar{padding:1rem 1.1rem;}
  /* on a phone even the lit tab drops its word: four icons, no more */
  .ws-tab, .ws-tab.is-on{padding:0.42rem 0.5rem;}
  .ws-tab.is-on i{display:none;}
  .view{padding:1.2rem 1.1rem 3.5rem;}
  #view-roster{padding-left:1.1rem; padding-right:1.1rem;}
  .statebar{padding:0.7rem 1.1rem;}
  .blk{grid-template-columns:1fr; gap:0.35rem;}
}

/* Someone who prefers less motion gets the state, not the slide. */
@media (prefers-reduced-motion: reduce){
  .app, .rail, .rail-backdrop, .railtoggle .pane-edge{transition:none;}
}

/* A coach walks into the room with paper, not a laptop. */
@media print{
  .rail,.rail-backdrop,.topbar,.statebar,.toolrow,.no-print{display:none !important;}
  .app,.app.rail-open{display:block; padding-left:0;}
  html,body{background:#fff; color:#111;}
  .view{display:none;}
  .view.active{display:block; padding:0;}
  .card,.scard{border-color:#ddd; background:#fff; break-inside:avoid; box-shadow:none; transform:none;}
  .scard-rm,.scard-more,.selbar,.lvpick{display:none !important;}
  .card-head .sub,.asg-body,.blk-time,.roster,.diff li,table.tbl td,ol.steps,ul.bul,.pos{color:#333;}
  h1,h2,h3,h4,.blk-time b,table.tbl td b{color:#000;}
  .chip{border-color:#bbb; color:#333;}
  .pos code{color:#0b5d78;}
}

/* ================= ATTENDANCE =================
   Four states, and each one says what it is twice: a colour and a
   word. Colour alone would leave the register unreadable to a
   coach who cannot tell the green from the amber. */
.attbtn.st-present, .attcount.st-present, .attcell.st-present{--att:var(--green);   --att-soft:rgba(90,200,160,0.14);  --att-edge:rgba(90,200,160,0.45); --att-ink:#04121a;}
.attbtn.st-late,    .attcount.st-late,    .attcell.st-late   {--att:var(--amber);   --att-soft:rgba(208,138,82,0.14);  --att-edge:rgba(208,138,82,0.5);  --att-ink:#120a04;}
.attbtn.st-absent,  .attcount.st-absent,  .attcell.st-absent {--att:var(--rose);    --att-soft:rgba(224,116,138,0.14); --att-edge:rgba(224,116,138,0.5); --att-ink:#190509;}
.attbtn.st-excused, .attcount.st-excused, .attcell.st-excused{--att:var(--ink-dim); --att-soft:rgba(141,153,178,0.14); --att-edge:rgba(141,153,178,0.45);--att-ink:#070a12;}
.attcount.st-none, .attcell.st-none{--att:var(--ink-dim); --att-soft:transparent; --att-edge:var(--line);}

/* --- the per-student control --- */
.attpick{display:flex; flex-wrap:wrap; gap:4px; align-items:center;}
.attbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.3rem;
  min-height:40px; padding:0.3rem 0.6rem;
  border:1px solid transparent; border-radius:var(--r-ctl);
  background:var(--fill); color:var(--ink-dim);
  font-size:0.72rem; font-weight:500; line-height:1.1;
  transition:color .2s ease, background .2s ease;
}
.attbtn b{font-weight:600; font-size:0.74rem; opacity:0.85;}
.attbtn i{font-style:normal;}
.attbtn:hover{color:var(--att, var(--ink)); background:var(--att-soft, var(--fill-2));}
.attbtn.on{background:var(--att); color:var(--att-ink); font-weight:600;}
.attbtn.on b{opacity:1;}
.attbtn.on:hover{background:var(--att); color:var(--att-ink);}

.attlate{
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.1rem 0.5rem 0.1rem 0.6rem; min-height:40px;
  border-radius:var(--r-ctl); background:rgba(208,138,82,0.14);
}
.attlate[hidden]{display:none;}
.attlate span{font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber); white-space:nowrap;}
.attlate input{width:8rem; font-size:0.78rem; padding:0.25rem 0.35rem; border-radius:6px;}

/* --- the session bar --- */
.attbar .card-head{align-items:center;}
.attstat{display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem;}
.attstat .grow{flex:1;}
.attcount{
  display:inline-flex; align-items:baseline; gap:0.3rem;
  padding:0.26rem 0.7rem; border-radius:20px; font-size:0.72rem;
  background:var(--fill); color:var(--ink-dim);
}
.attcount b{font-size:0.88rem; font-weight:700; color:var(--ink);}
.attcount.on{color:var(--att); background:var(--att-soft);}
.attcount.st-none.on{background:var(--fill);}
.attcount.on b{color:var(--att);}
.attpct{
  display:inline-flex; align-items:baseline; gap:0.3rem;
  font-family:var(--sans); font-size:1.05rem; font-weight:700; color:var(--green); padding:0 0.3rem;
}
.attpct i{font-style:normal; font-size:0.62rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-dim);}
.attpct.is-low{color:var(--rose);}
.attsync{cursor:pointer; padding-right:0.35rem;}
/* the one on/off on the page gets a real switch */
.attsync input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; order:2; flex:none;
  width:34px; height:20px; border-radius:20px; margin-left:0.35rem;
  background:rgba(255,255,255,0.16); position:relative; transition:background .2s ease;
}
.attsync input[type="checkbox"]::after{
  content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.4); transition:transform .2s var(--ease-lux);
}
.attsync input[type="checkbox"]:checked{background:var(--green);}
.attsync input[type="checkbox"]:checked::after{transform:translateX(14px);}

/* --- the history table --- */
.attrange{display:inline-flex; gap:4px; flex-wrap:wrap;}
.attmonth{display:inline-flex; align-items:center; gap:4px;}
.attmonth .btn-quiet{padding:0.3rem 0.6rem; font-size:1rem; line-height:1;}
.attmonth .btn-quiet:disabled{opacity:0.35; cursor:default;}
.attmonth select{background:var(--bg-1); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:0.35rem 0.5rem; font:inherit; font-size:0.85rem;}
.attrangebtn.on{color:var(--ink); border-color:var(--cyan-dim); background:rgba(79,216,255,0.07);}
.attkey{display:inline-flex; align-items:center; gap:0.3rem; font-size:0.68rem; color:var(--ink-dim);}

.atthistwrap{overflow-x:auto; padding-bottom:0.2rem;}
/* attendance by school: a card each, marks that can be clicked */
.attschool .card-head{flex-wrap:wrap;}
.attschool .att-ini{width:28px; height:28px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:0.7rem; font-weight:600; color:#0a0d14; background:linear-gradient(140deg, var(--gold), var(--amber, #e0a458));}
.attpick{display:flex; flex-wrap:wrap; gap:6px; padding:0.2rem 1.2rem 0.9rem;}
.attpickbtn{display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:0.85rem; color:var(--ink-dim); cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:0.3rem 0.85rem 0.3rem 0.35rem;}
.attpickbtn:hover{color:var(--ink); border-color:var(--cyan-dim);}
.attpickbtn.on{color:var(--ink); border-color:var(--cyan-dim); background:rgba(79,216,255,0.07);}
.attpickbtn .att-ini{width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:0.62rem; font-weight:600; color:#0a0d14; background:linear-gradient(140deg, var(--gold), var(--amber, #e0a458));}
.attschool .attempty{padding:1.1rem 1.2rem; font-size:0.86rem;}
button.attcell{font-family:inherit; cursor:pointer; padding:0; transition:transform .12s ease, box-shadow .12s ease;}
button.attcell:hover{transform:scale(1.12); box-shadow:0 0 0 2px rgba(79,216,255,0.35);}
button.attcell:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
button.attcell.st-none{color:var(--ink-dim); border-style:dashed;}
.attedit{margin:0; font-size:0.76rem;}
table.atthist{min-width:max-content;}
table.atthist th, table.atthist td{white-space:nowrap; text-align:center;}
table.atthist th.c-name, table.atthist td.c-name{
  position:sticky; left:0; z-index:2;
  text-align:left; min-width:190px;
  background:var(--panel);
  box-shadow:1px 0 0 var(--line);
}
table.atthist tr:hover td.c-name{background:#12172a;}
table.atthist th.c-date span{font-size:0.66rem;}
table.atthist td.c-tot, table.atthist th.c-tot{color:var(--ink-dim); font-variant-numeric:tabular-nums;}
table.atthist td.c-pct{text-align:right;}
table.atthist td.c-pct .attpct{font-size:0.92rem;}
table.atthist tr.is-low td.c-name b{color:var(--rose);}
table.atthist tfoot td{
  border-top:1px solid var(--line); color:var(--ink-dim);
  font-size:0.74rem; padding-top:0.6rem;
}

.attcell{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px;
  font-size:0.68rem; font-weight:600;
  border:1px solid var(--att-edge); background:var(--att-soft); color:var(--att);
}

/* On a wide row the word carries the state on its own and the letter
   steps aside. */
@media (min-width:900px){
  .attbtn{padding:0.28rem 0.6rem; font-size:0.7rem; gap:0;}
  .attbtn b{display:none;}
  .attlate{min-height:38px; padding:0.05rem 0.4rem;}
  .attlate input{width:8rem;}
}

/* At phone width the card is already stacked; the control simply
   takes the full line under the name and the four buttons share
   it equally. */
@media (max-width:640px){
  .attpick{width:100%;}
  .attbtn{flex:1 1 0; min-width:0; padding:0.3rem 0.2rem;}
  .attbtn i{overflow:hidden; text-overflow:ellipsis;}
  .attlate{width:100%; justify-content:space-between;}
  .attlate input{flex:1 1 auto; min-width:7.5rem; width:auto;}
  .attbar .card-head{gap:0.5rem;}
  .attbar .card-head .grow{flex:1 1 100%;}
  table.atthist th.c-name, table.atthist td.c-name{min-width:140px;}
}

@media (prefers-reduced-motion: reduce){
  .attbtn, .attsync input[type="checkbox"]::after{transition:none;}
}

/* --- signing in to the academy database --- */
.attauth{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem;
  margin-top:0.7rem; padding-top:0.7rem; border-top:1px solid var(--line);
}
.attauth[hidden]{display:none;}
.attauth-f{display:inline-flex; align-items:center; gap:0.45rem;}
.attauth-f span{
  font-size:0.62rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-dim);
  white-space:nowrap;
}
.attauth-f input{min-height:40px; width:12rem; font-size:0.84rem; border-radius:8px;}
.attauth-msg{font-size:0.74rem; color:var(--ink-dim); line-height:1.5;}
.attsignout{border-color:var(--line); color:var(--ink-dim); cursor:pointer;}
.attsignout:hover{color:var(--ink); border-color:rgba(255,255,255,0.22);}

@media (max-width:640px){
  .attauth-f{width:100%;}
  .attauth-f input{flex:1; width:auto;}
}

/* ================= THE GATE =================
   Shown instead of the app until the server says who this is. Same
   ink and panel as everything else, one card, nothing behind it. */
.gate{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(47,125,255,0.10), transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
}
.gate[hidden]{display:none;}
.gate-card{
  width:min(23rem, 100%);
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.8rem 1.6rem 1.5rem;
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.95);
}
.gate-card img{height:34px; width:auto; margin-bottom:1.1rem;}
.gate-card h1{font-size:1.35rem; margin-bottom:0.2rem;}
.gate-sub{font-size:0.82rem; color:var(--ink-dim); margin-bottom:1.1rem; line-height:1.6;}
.gate-f{margin-bottom:0.25rem;}
.gate-f span{
  font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim);
}
.gate-card input{
  min-height:44px; width:100%; margin-bottom:0.8rem;
  font-size:0.9rem; border-radius:8px;
}
.gate-err{
  font-size:0.78rem; color:var(--rose); min-height:1.2rem; line-height:1.5; margin-bottom:0.3rem;
}
.gate-go{width:100%; min-height:46px;}
.gate-go[disabled]{opacity:0.6; cursor:default; transform:none;}
.gate-offline{width:100%; margin-top:0.6rem;}
.gate-offline[hidden]{display:none;}
.gate-note{font-size:0.72rem; color:var(--ink-dim); line-height:1.6; margin-top:1rem;}

@media (max-width:480px){
  .gate{padding:1rem; align-items:flex-start; padding-top:3rem;}
  .gate-card{padding:1.4rem 1.2rem 1.2rem;}
}

/* ---------- lesson record + student logins ---------- */
.lessontbl .lessontopic, .logintbl input{width:100%; min-width:9rem;}
.lessontbl th:nth-child(2), .lessontbl td:nth-child(2){width:5.5rem;}
.logintbl .lg-pass{font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--cyan); letter-spacing:0.02em;}
.logintbl td.lg-act{white-space:nowrap; text-align:right;}
.logintbl td.lg-act .btn-quiet{margin-left:0.35rem;}
.btn-key:disabled, .btn-quiet:disabled{opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none;}
@media (max-width:760px){
  .logintbl thead{display:none;}
  .logintbl tr{display:block; padding:0.7rem 0; border-bottom:1px solid var(--line);}
  .logintbl td{display:block; border:0; padding:0.25rem 0;}
  .logintbl td.lg-act{text-align:left;}
  .logintbl td.lg-act .btn-quiet{margin:0 0.35rem 0 0;}
}
@media print{
  /* the hand-out: names, usernames and passwords, and nothing to press */
  .logintbl input{border:0; background:none; color:#000; padding:0;}
  .logintbl th:nth-child(4), .logintbl td:nth-child(4){display:none;}
}

.lessontbl .lessonpick{width:100%; min-width:11rem; max-width:22rem;}
.lessoncard .code-note a{color:var(--cyan);}

/* ---------- lesson diagrams: the link under the picker, and the teaching view ---------- */
.lessondg{display:block; margin-top:0.35rem;}
.lessondg:empty{display:none;}
.lessondgbtn{padding:0.22rem 0.6rem; font-size:0.74rem;}
.teachview{
  position:fixed; inset:0; z-index:400; display:flex; flex-direction:column;
  background:var(--bg-0); color:var(--ink);
}
.teachview[hidden]{display:none;}
.teach-bar{
  display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;
  padding:0.8rem 1.2rem; border-bottom:1px solid var(--line);
}
.teach-title{flex:1; min-width:12rem;}
.teach-title b{display:block; font-family:var(--sans); font-size:1.15rem; font-weight:500;}
.teach-title span{font-size:0.78rem; color:var(--ink-dim);}
.teach-bar button{min-height:44px;}
.teach-stage{
  flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(14rem,24rem);
  gap:2rem; align-items:center; padding:1.2rem 2rem; overflow:auto;
}
/* as large as fits both ways: the width it has, and the height left under the bar */
.teach-board{width:min(100%, calc(100vh - 9rem)); margin-inline:auto;}
.teach-cap{font-family:var(--sans); font-size:clamp(1.3rem, 2.4vw, 2.2rem); line-height:1.25;}
.teach-turn{margin-top:0.9rem; font-size:1rem; color:var(--cyan);}
.teach-tools{display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.4rem;}
.teach-tools button{min-height:40px;}
.teach-hint{margin-top:0.7rem; font-size:0.74rem; color:var(--ink-dim);}
.teach-moves{margin-top:1.2rem; font-size:1rem; line-height:1.7; color:var(--ink-dim); font-variant-numeric:tabular-nums;}
.teach-moves span:first-child{display:block; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold);}
@media (max-width:820px){
  .teach-stage{grid-template-columns:1fr; gap:1rem; padding:1rem; align-items:start;}
  .teach-board{width:min(100%, 60vh);}
}

/* checks and homework sit under the lesson plan */
.checks-head{margin:2.2rem 0 0.9rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; align-items:baseline; gap:0.8rem; flex-wrap:wrap;}
.checks-head h2{margin:0; font-size:1.25rem;}
.checks-head .sub{color:var(--ink-dim); font-size:0.86rem;}

/* ---------- the lesson plan's group cards open a panel ---------- */
.gcard.gopen{cursor:pointer; transition:transform .25s var(--ease-lux), box-shadow .25s var(--ease-lux), border-color .25s;}
.gcard.gopen:hover{transform:translateY(-2px); box-shadow:0 14px 34px -18px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06);}
.gcard.gopen:focus-visible{outline:2px solid var(--cyan-dim); outline-offset:3px;}
.gfoot{display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; margin-top:0.95rem; padding-top:0.75rem;
  border-top:1px solid var(--line-2); font-size:0.78rem; color:var(--ink-dim);}
.gfoot b{color:var(--ink); font-weight:500;}
.gfoot-n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gfoot-go{color:var(--cyan); letter-spacing:0.02em; transition:transform .25s var(--ease-lux);}
.gcard.gopen:hover .gfoot-go{transform:translateX(3px);}

.gp{position:fixed; inset:0; z-index:300;}
.gp[hidden]{display:none;}
.gp-veil{position:absolute; inset:0; background:rgba(3,5,10,0.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s var(--ease-lux);}
.gp-sheet{position:absolute; top:0; right:0; bottom:0; width:min(540px, 100%); display:flex; flex-direction:column;
  background:linear-gradient(180deg, #0f1424 0%, var(--bg-1) 38%); border-left:1px solid var(--line);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,0.9); transform:translateX(104%); transition:transform .38s var(--ease-lux);}
.gp.in .gp-veil{opacity:1;}
.gp.in .gp-sheet{transform:none;}

.gp-head{position:relative; padding:1.6rem 1.7rem 1.3rem; border-bottom:1px solid var(--line);
  --acc:var(--cyan);}
.gp-head[data-level="L1"]{--acc:var(--green);}
.gp-head[data-level="L2"]{--acc:var(--gold);}
.gp-head[data-level="L3"]{--acc:var(--amber);}
.gp-head[data-level="L4"]{--acc:var(--violet);}
.gp-head::before{content:""; position:absolute; left:0; top:1.6rem; bottom:1.3rem; width:3px; border-radius:0 3px 3px 0; background:var(--acc);}
.gp-kicker{font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-dim);}
.gp-head h2{font-size:1.75rem; margin:0.35rem 0 0.45rem; color:var(--acc);}
.gp-head h2 span{color:var(--ink); font-size:1.15rem; margin-left:0.35rem;}
.gp-who{font-size:0.8rem; color:var(--ink-dim); line-height:1.6; padding-right:2rem;}
.gp-x{position:absolute; top:1.1rem; right:1.1rem; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink-dim); font-size:1.3rem; line-height:1; cursor:pointer; transition:all .2s;}
.gp-x:hover{color:var(--ink); border-color:var(--cyan-dim); transform:rotate(90deg);}

.gp-body{flex:1; overflow-y:auto; padding:0.4rem 1.7rem 2rem;}
.gp-sec{padding:1.3rem 0 0.4rem;}
.gp-label{display:flex; align-items:center; gap:0.6rem; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:0.8rem;}
.gp-tag{letter-spacing:0.02em; text-transform:none; font-size:0.72rem; padding:0.15rem 0.6rem; border-radius:999px;
  border:1px solid var(--cyan-dim); color:var(--cyan);}
.gp-tag.chosen{border-color:rgba(201,166,107,0.5); color:var(--gold);}
.gp-count{letter-spacing:0; font-size:0.72rem; color:var(--ink); background:rgba(255,255,255,0.06); border-radius:999px; padding:0.1rem 0.55rem;}

.gp-next{position:relative; padding:1.25rem 1.3rem 1.1rem; border-radius:14px; border:1px solid rgba(201,166,107,0.28);
  background:radial-gradient(120% 140% at 0% 0%, rgba(201,166,107,0.12), transparent 55%), rgba(255,255,255,0.02);}
.gp-next-meta{font-size:0.74rem; color:var(--ink-dim);}
.gp-next-topic{font-family:var(--sans); font-size:1.45rem; line-height:1.25; margin:0.35rem 0 0.2rem; color:var(--ink);}
.gp-next-notes{font-size:0.84rem; line-height:1.6; color:var(--ink-dim); margin-top:0.5rem;}
.gp-actions{display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1rem;}

.gp-pick{margin-top:0.9rem; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(0,0,0,0.18);}
.gp-pick-bar{padding:0.7rem;}
.gp-search{width:100%; background:var(--bg-0); color:var(--ink); border:1px solid var(--line); border-radius:9px;
  padding:0.55rem 0.75rem; font:inherit; font-size:0.86rem;}
.gp-search:focus{outline:none; border-color:var(--cyan-dim);}
.gp-mods{display:flex; gap:6px; overflow-x:auto; padding:0 0.7rem 0.7rem; scrollbar-width:thin;}
.gp-mod{flex:none; font:inherit; font-size:0.74rem; color:var(--ink-dim); background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:0.28rem 0.7rem;}
.gp-mod:hover{color:var(--ink);}
.gp-mod.on{color:var(--bg-0); background:var(--acc); border-color:var(--acc); font-weight:500;}
.gp-list{list-style:none; max-height:320px; overflow-y:auto; border-top:1px solid var(--line);}
.gp-item{display:flex; align-items:center; gap:0.8rem; width:100%; text-align:left; font:inherit; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line-2); padding:0.62rem 0.9rem; cursor:pointer; transition:background .15s;}
.gp-item:hover{background:rgba(79,216,255,0.06);}
.gp-item.on{background:rgba(201,166,107,0.1);}
.gp-item.done .gp-t{color:var(--ink-dim);}
.gp-n{flex:none; width:1.8rem; height:1.8rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:0.72rem; color:var(--ink-dim); border:1px solid var(--line);}
.gp-item.on .gp-n{border-color:var(--gold); color:var(--gold);}
.gp-t{flex:1; font-size:0.86rem; line-height:1.35;}
.gp-t i{display:block; font-style:normal; font-size:0.72rem; color:var(--ink-dim); margin-top:0.1rem;}
.gp-s{flex:none; font-size:0.7rem; color:var(--ink-dim);}
.gp-item.on .gp-s{color:var(--gold);}
.gp-item.done .gp-s{color:var(--green);}

.gp-line{list-style:none; position:relative; padding-left:1.3rem;}
.gp-line::before{content:""; position:absolute; left:4px; top:0.45rem; bottom:0.45rem; width:1px; background:var(--line);}
.gp-line li{position:relative; padding:0 0 1.05rem;}
.gp-line li::before{content:""; position:absolute; left:calc(-1.3rem + 0.5px); top:0.42rem; width:8px; height:8px; border-radius:50%;
  background:var(--bg-1); border:1.5px solid var(--green);}
.gp-line li:first-child::before{background:var(--green); box-shadow:0 0 0 4px rgba(90,200,160,0.15);}
.gp-date{display:block; font-size:0.72rem; color:var(--ink-dim); letter-spacing:0.02em;}
.gp-ltopic{display:block; font-size:0.95rem; margin:0.12rem 0;}
.gp-lmeta{display:block; font-size:0.74rem; color:var(--ink-dim);}
.gp-link{font:inherit; color:var(--cyan); background:none; border:0; padding:0; cursor:pointer;}
.gp-link:hover{text-decoration:underline;}
.gp-empty{font-size:0.84rem; color:var(--ink-dim); line-height:1.6; padding:0.6rem 0;}
.gp-list .gp-empty{padding:0.9rem;}

@media (max-width:640px){
  .gp-head{padding:1.3rem 1.1rem 1.1rem;}
  .gp-body{padding:0.3rem 1.1rem 1.6rem;}
  .gp-next-topic{font-size:1.25rem;}
}

/* ---------- the menu's Advanced drawer ---------- */
.rail-adv .adv-chev{margin-left:auto; font-size:1.1rem; line-height:1; transition:transform .25s var(--ease-lux);}
.rail-adv.open .adv-chev{transform:rotate(90deg);}
.rail-advbox{margin:0.15rem 0 0.2rem 1.05rem; padding-left:0.55rem; border-left:1px solid var(--line);}
.rail-advbox .rail-link{font-size:0.84rem; padding:0.5rem 0.7rem;}

/* ---------- Framework, to try rather than read ---------- */
.fw-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:1.1rem; margin-bottom:1.1rem;}
.fw-grid .fw-card{margin:0;}
.fw-k{display:block; font-size:0.68rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-dim); margin:1.1rem 0 0.55rem;}

.fw-ask{list-style:none; counter-reset:q; padding:0.2rem 1.2rem 0.4rem;}
.fw-ask li{counter-increment:q; display:flex; gap:0.9rem; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
  padding:0.85rem 0 0.85rem 2.2rem; border-bottom:1px solid var(--line-2); position:relative; animation:fwIn .35s var(--ease-lux);}
.fw-ask li::before{content:counter(q); position:absolute; left:0; top:0.85rem; width:1.55rem; height:1.55rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:0.72rem; border:1px solid var(--line); color:var(--ink-dim);}
.fw-ask li.yes::before{content:"\2713"; border-color:var(--green); color:var(--green);}
.fw-ask li.no::before{border-color:var(--amber); color:var(--amber);}
.fw-ask li.now::before{border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 0 4px rgba(79,216,255,0.1);}
.fw-q{flex:1 1 220px; font-size:0.9rem; line-height:1.5;}
.fw-ask li.yes .fw-q{color:var(--ink-dim);}
.fw-yn{display:inline-flex; gap:5px; flex:none;}
.fw-b{font:inherit; font-size:0.78rem; color:var(--ink-dim); background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:0.3rem 0.8rem; cursor:pointer; transition:all .2s;}
.fw-b:hover{color:var(--ink); border-color:var(--cyan-dim);}
.fw-ask li.yes .fw-b.on{background:rgba(90,200,160,0.14); border-color:var(--green); color:var(--green);}
.fw-ask li.no .fw-b.on{background:rgba(208,138,82,0.14); border-color:var(--amber); color:var(--amber);}
.fw-result{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0.9rem 1.2rem 0.4rem; padding:1rem 1.1rem; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--acc) 45%, transparent);
  background:radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%);
  animation:fwIn .45s var(--ease-lux);}
.fw-res-code{font-family:var(--sans); font-size:2.2rem; line-height:1; color:var(--acc);}
.fw-res-txt{flex:1; display:flex; flex-direction:column; gap:0.2rem;}
.fw-res-txt b{font-size:1.02rem; font-weight:500;}
.fw-res-txt span{font-size:0.8rem; color:var(--ink-dim);}

.fw-controls{display:flex; flex-wrap:wrap; gap:1rem 1.4rem; padding:0.3rem 1.2rem 0;}
.fw-step .fw-k{margin:0 0 0.4rem;}
.fw-stepper{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.fw-stepper button{width:2.1rem; height:2.1rem; font:inherit; font-size:1.05rem; color:var(--ink); background:transparent; border:0; cursor:pointer;}
.fw-stepper button:hover:not(:disabled){background:rgba(79,216,255,0.08); color:var(--cyan);}
.fw-stepper button:disabled{opacity:0.3; cursor:default;}
.fw-stepper b{min-width:3.6rem; text-align:center; font-family:var(--sans); font-size:1.15rem; font-weight:500;}
.fw-stepper small{font-family:var(--sans); font-size:0.68rem; color:var(--ink-dim); margin-left:0.2rem;}
.fw-bar{display:flex; gap:3px; height:38px; margin:1.2rem 1.2rem 0.3rem; border-radius:10px; overflow:hidden;}
.fw-seg{display:flex; align-items:center; justify-content:center; min-width:22px; font-size:0.72rem; font-weight:500; color:#0a0d14;
  transition:flex .45s var(--ease-lux);}
.fw-seg.k-warmup{background:var(--cyan);}
.fw-seg.k-direct{background:var(--gold);}
.fw-seg.k-direct:nth-child(odd){background:color-mix(in srgb, var(--gold) 78%, #fff);}
.fw-seg.k-paired_play{background:var(--green);}
.fw-seg.k-wrapup{background:var(--violet);}
.fw-blocks{list-style:none; padding:0.5rem 1.2rem 0.2rem;}
.fw-blocks li{display:grid; grid-template-columns:4.2rem 7.5rem 1fr auto; gap:0.6rem; align-items:baseline; padding:0.42rem 0;
  border-bottom:1px solid var(--line-2); font-size:0.84rem;}
.fw-blocks li b{font-weight:500;}
.fw-clock{font-variant-numeric:tabular-nums; color:var(--ink-dim); font-size:0.76rem;}
.fw-bsub{color:var(--ink-dim); font-size:0.8rem;}
.fw-min{font-variant-numeric:tabular-nums; color:var(--ink-dim); font-size:0.78rem;}
.fw-blocks li.k-warmup b{color:var(--cyan);}
.fw-blocks li.k-direct b{color:var(--gold);}
.fw-blocks li.k-paired_play b{color:var(--green);}
.fw-blocks li.k-wrapup b{color:var(--violet);}
.fw-warn{list-style:none; margin:0.7rem 1.2rem 0; padding:0.7rem 0.9rem; border-radius:10px; border:1px solid rgba(224,116,138,0.35);
  background:rgba(224,116,138,0.07); font-size:0.82rem; line-height:1.5; color:var(--rose);}
.fw-ok{margin:0.7rem 1.2rem 0; font-size:0.82rem; color:var(--green);}

.fw-tabs{display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; padding:0.3rem 1.2rem 0;}
.fw-tab{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:0.15rem; text-align:left; font:inherit; cursor:pointer;
  color:var(--ink-dim); background:rgba(255,255,255,0.015); border:1px solid var(--line); border-radius:12px; padding:0.7rem 0.8rem;
  transition:all .25s var(--ease-lux);}
.fw-tab b{font-family:var(--sans); font-size:1.25rem; font-weight:500; color:var(--acc);}
.fw-tab span{font-size:0.76rem;}
.fw-tab i{position:absolute; top:0.55rem; right:0.6rem; font-style:normal; font-size:0.68rem; color:var(--ink);
  background:rgba(255,255,255,0.07); border-radius:999px; padding:0.05rem 0.45rem;}
.fw-tab:hover{border-color:color-mix(in srgb, var(--acc) 50%, transparent); color:var(--ink);}
.fw-tab.on{color:var(--ink); border-color:var(--acc);
  background:radial-gradient(130% 140% at 0% 0%, color-mix(in srgb, var(--acc) 15%, transparent), transparent 65%);}
.fw-level{padding:0.2rem 1.2rem 1.2rem; animation:fwIn .35s var(--ease-lux);}
.fw-entry{margin-top:1rem; padding:0.9rem 1rem; border-left:3px solid var(--acc); background:rgba(255,255,255,0.02);
  border-radius:0 10px 10px 0; font-size:0.92rem; line-height:1.55;}
.fw-entry .fw-k{margin:0 0 0.3rem;}
.fw-ladder{list-style:none; display:flex; flex-wrap:wrap; gap:8px 6px; align-items:center;}
.fw-ladder li{display:inline-flex; align-items:center; gap:0.5rem; font-size:0.84rem; padding:0.4rem 0.8rem 0.4rem 0.4rem;
  border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,0.015);}
.fw-rung{width:1.45rem; height:1.45rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:0.7rem; font-weight:600; color:#0a0d14; background:var(--acc);}
.fw-note{margin-top:0.9rem; font-size:0.82rem; color:var(--ink-dim);}
.fw-syl{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px;}
.fw-sl{display:flex; align-items:center; gap:0.6rem; text-align:left; font:inherit; font-size:0.82rem; color:var(--ink); cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:10px; padding:0.5rem 0.65rem; transition:all .2s;}
.fw-sl:hover:not(:disabled){border-color:color-mix(in srgb, var(--acc) 55%, transparent); background:color-mix(in srgb, var(--acc) 7%, transparent);}
.fw-sl.nodg{color:var(--ink-dim); cursor:default;}
.fw-sl i{margin-left:auto; font-style:normal; font-size:0.68rem; color:var(--acc);}
.fw-sn{flex:none; width:1.45rem; font-size:0.72rem; color:var(--ink-dim); font-variant-numeric:tabular-nums;}

details.fw-adv summary{cursor:pointer; list-style:none;}
details.fw-adv summary::-webkit-details-marker{display:none;}
details.fw-adv summary h2{font-size:1rem; color:var(--ink-dim);}
details.fw-adv[open] summary h2{color:var(--ink);}

@keyframes fwIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@media (max-width:720px){
  .fw-tabs{grid-template-columns:repeat(3, 1fr);}
  .fw-blocks li{grid-template-columns:3.6rem 1fr auto;}
  .fw-blocks .fw-bsub{display:none;}
}

.gp-edit{text-decoration:none; display:inline-flex; align-items:center;}

/* ---------- editing a block of the plan ---------- */
.blk-main{position:relative; min-width:0;}
.blk-editbtn{position:absolute; top:0.35rem; right:0; display:inline-flex; align-items:center; gap:0.35rem; font:inherit; font-size:0.74rem;
  color:var(--ink-dim); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:0.28rem 0.7rem; cursor:pointer;
  opacity:0; transition:opacity .2s, color .2s, border-color .2s;}
.blk-editbtn svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.blk:hover .blk-editbtn, .blk-editbtn:focus-visible{opacity:1;}
.blk-editbtn:hover{color:var(--cyan); border-color:var(--cyan-dim);}
@media (hover:none){ .blk-editbtn{opacity:1;} }
.blk.edited .blk-time b{color:var(--gold);}
.blk-edited{display:inline-block; margin-top:0.35rem; font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(201,166,107,0.4); border-radius:999px; padding:0.05rem 0.45rem;}
.blk.editing{background:linear-gradient(90deg, rgba(79,216,255,0.04), transparent 70%); border-radius:10px; padding-left:0.6rem; padding-right:0.6rem;
  box-shadow:inset 2px 0 0 var(--cyan);}
.blk-minin{display:flex; align-items:center; gap:0.35rem; margin:0.25rem 0;}
.blk-minin input{width:3.6rem; background:var(--bg-0); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:0.25rem 0.4rem; font:inherit; font-size:0.85rem;}
.blk.editing .pe-act, .blk.editing .pe-ins{display:block; width:100%; margin-top:0.4rem; background:var(--bg-0); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:0.5rem 0.65rem; font:inherit; font-size:0.85rem; line-height:1.55;}
.blk.editing .pe-act{font-weight:500;}
.blk.editing .pe-ins{resize:vertical; color:var(--ink-dim);}
.blk.editing .pe-act:focus, .blk.editing .pe-ins:focus, .blk-minin input:focus{outline:none; border-color:var(--cyan-dim); color:var(--ink);}
.pe-bar{display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; padding:0.8rem 0 0.2rem;}
.pe-bar .code-note{margin:0 0 0 0.3rem;}