/* Littlework. The staff planning site.
   The palette is Fledgie's, because this is the same school looking at the same curriculum. */
:root{
  --ground:#F9FAFB; --surface:#FFFFFF; --settled:#F0F2F2;
  --line:#E4E8E8; --hairline:#EDF0F0;
  --ink:#26221F; --ink-muted:#4B5158; --ink-quiet:#8A9491;
  --brand:#047E89; --brand-tint:#EAF4F5; --brand-deep:#04656E;
  --peri:#C9D6EE; --peri-tint:#E7ECF8; --peri-deep:#33507C;
  --apple-tint:#E3F6EA; --apple-ink:#0E7A3C;
  --sunny-tint:#F7EFDD; --sunny-ink:#755400;
  --attention:#A81271; --attention-tint:#FDE6F4;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-pill:9999px;
  --ramp1:#DCEDEF; --ramp2:#B4DBDF; --ramp3:#79BFC6; --ramp4:#04656E;
  --ramp3-ink:#26221F; --ramp4-ink:#FFFFFF; --empty:#F1EEE8;
  --shadow:0 1px 2px rgba(38,34,31,.06),0 4px 14px rgba(38,34,31,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#171A1A; --surface:#1E2222; --settled:#262B2B;
    --line:#333A3A; --hairline:#2A3030;
    --ink:#EFEDE9; --ink-muted:#B4BBBB; --ink-quiet:#87908F;
    --brand:#3FA6B0; --brand-tint:#123034; --brand-deep:#7FD0D8;
    --peri:#33507C; --peri-tint:#1E2735; --peri-deep:#AFC2E4;
    --apple-tint:#12301E; --apple-ink:#6FD096;
    --sunny-tint:#332B18; --sunny-ink:#E3C46B;
    --attention:#FF9FDD; --attention-tint:#3A1830;
    --ramp1:#123034; --ramp2:#1B4A50; --ramp3:#2E7B84; --ramp4:#7FD0D8;
  --ramp3-ink:#F2EEE8; --ramp4-ink:#10201F; --empty:#242120;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --ground:#171A1A; --surface:#1E2222; --settled:#262B2B;
  --line:#333A3A; --hairline:#2A3030;
  --ink:#EFEDE9; --ink-muted:#B4BBBB; --ink-quiet:#87908F;
  --brand:#3FA6B0; --brand-tint:#123034; --brand-deep:#7FD0D8;
  --peri:#33507C; --peri-tint:#1E2735; --peri-deep:#AFC2E4;
  --apple-tint:#12301E; --apple-ink:#6FD096;
  --sunny-tint:#332B18; --sunny-ink:#E3C46B;
  --attention:#FF9FDD; --attention-tint:#3A1830;
  --ramp1:#123034; --ramp2:#1B4A50; --ramp3:#2E7B84; --ramp4:#7FD0D8;
  --ramp3-ink:#F2EEE8; --ramp4-ink:#10201F; --empty:#242120;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}

/* ---- chrome ---------------------------------------------------------------------- */
.bar{position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--line);padding:11px 22px;display:flex;align-items:center;
  gap:16px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;
  font-size:15px;white-space:nowrap}
.mark i{width:22px;height:22px;border-radius:6px;background:var(--brand);display:block}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin}
.tabs button{border:1px solid transparent;background:none;border-radius:var(--r-pill);
  padding:5px 12px;font-size:13px;font-weight:600;color:var(--ink-muted);white-space:nowrap}
.tabs button[aria-current="true"]{background:var(--brand-tint);color:var(--brand-deep)}
.tabs button:hover{color:var(--brand)}
.sp{flex:1 1 auto}
.pick{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-muted)}
.pick select{padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);color:var(--ink);font:inherit;font-size:12.5px}
.wrap{max-width:1080px;margin:0 auto;padding:24px 22px 72px}
/* The planner only. See render(). */
.wrap.wide{max-width:none;padding:20px 28px 40px}
h1{font-size:23px;font-weight:800;letter-spacing:-.022em;margin:0 0 3px}
.lede{color:var(--ink-muted);margin:0 0 22px;max-width:58em}
.kicker{font-size:10.5px;font-weight:700;color:var(--brand);margin:0 0 7px}
.note{font-size:12.5px;color:var(--ink-quiet);margin:16px 0 0;max-width:56em}
.warn{background:var(--sunny-tint);color:var(--sunny-ink);border-radius:var(--r-sm);
  padding:11px 14px;font-size:13px;margin:0 0 20px}

/* ---- the day --------------------------------------------------------------------- */
.day{display:grid;gap:8px}
/* Aligned to the top, not the middle. A block whose skill is open is a page tall, and centring
   put the start time and "Open the lesson" halfway down beside nothing. */
.blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 16px;display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:16px;
  align-items:start;text-align:left;width:100%}
.blk .clock,.blk .go{padding-top:2px}
.blk.fixed{background:transparent;border-style:dashed}
.blk.teach:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.clock{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink-quiet);
  white-space:nowrap}
.clock b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.blk .nm{font-weight:700;font-size:14.5px}
.blk .sub{font-size:12.5px;color:var(--ink-quiet);margin-top:2px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.chip{display:inline-block;background:var(--brand-tint);color:var(--brand-deep);
  border-radius:var(--r-pill);padding:3px 11px;font-weight:600;font-size:12.5px}
.chip.q{background:var(--settled);color:var(--ink-muted);font-weight:500;font-size:12px}
.chip.rm{background:var(--peri-tint);color:var(--peri-deep)}
/* The experiment due today. Periwinkle because it is a fact about the day rather than a thing
   that has gone wrong: it is already in the plan, and it is above the blocks because it happens
   only today, where a sequence day runs every week. */
.due{background:var(--peri-tint);border-radius:var(--r-md);padding:12px 14px;margin-bottom:14px;
  display:grid;gap:8px}
.due .kicker{color:var(--peri-deep);margin:0}
.duerow{background:var(--surface);border:1px solid transparent;border-radius:var(--r-sm);
  padding:11px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;
  align-items:center;text-align:left;width:100%;font-size:13px;line-height:1.45}
.duerow:hover{border-color:var(--peri)}
.duerow b{font-size:14.5px}
.duerow .sub{color:var(--ink-quiet);font-size:12.5px}
.duerow .go{color:var(--peri-deep)}
/* What this block takes from the week: the song, the book, the movement activity. Periwinkle
   like the experiment, because it is another fact about the day rather than a thing to fix. */
.takes{display:grid;gap:5px;margin-top:7px}
.takes > span{display:block;padding:6px 11px;border-radius:var(--r-sm);
  background:var(--peri-tint);color:var(--peri-deep);font-size:12.5px;line-height:1.45}
.takes i{font-style:normal;font-weight:700;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;display:block;margin-bottom:1px}
.takes b{font-weight:700}
.railnote{font-size:11.5px;color:var(--ink-quiet);margin:0 0 8px;line-height:1.45}

/* The same experiment named on the block that runs it, so the day reads in order. */
.sci{display:block;margin-top:7px;padding:7px 11px;border-radius:var(--r-sm);
  background:var(--peri-tint);color:var(--peri-deep);font-size:12.5px;line-height:1.45}
.sci b{font-weight:700}
.go{font-size:12.5px;font-weight:600;color:var(--brand);white-space:nowrap;
  background:none;border:0;padding:0;text-align:right}
.go.off{color:var(--ink-quiet);font-weight:500}
.go:disabled{cursor:default}
/* The block is a container now, so the parts that were one button are buttons of their own. */
.blkname{display:block;background:none;border:0;padding:0;text-align:left;width:100%}
.blkname:disabled{cursor:default}
.blk .chip{border:1px solid transparent;cursor:pointer}
.blk .chip:hover{border-color:var(--brand)}
.blk .chip.q:hover{border-color:var(--peri)}
.blk .chip[aria-expanded="true"]{background:var(--brand);color:#FFFFFF}
.blk .chip.q[aria-expanded="true"]{background:var(--peri-deep);color:#FFFFFF}

/* ---- one skill's progression, under the block it is practiced in ------------------------ */
.skp{display:grid;gap:9px;margin-top:9px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--ground);border:1px solid var(--line)}
.skphead{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.skphead b{font-size:15px;font-weight:800;letter-spacing:-.012em}
.skpx{background:none;border:0;padding:0;font-size:12px;font-weight:600;color:var(--ink-quiet)}
.skpx:hover{color:var(--brand)}
/* What the room is working on, in the framework's own concrete words rather than its abstract
   ones. "Draws a figure or object including the parts that matter most to them" is a thing you
   would recognise on a Monday. "Marks and materials are controlled to get a specific result" is
   the same fact written for somebody reading a framework. */
.skpidea{font-family:var(--serif);font-size:17px;line-height:1.35;color:var(--brand-deep)}
.skph4{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--brand);margin-bottom:-4px}
/* The abstraction is still here for anybody who wants it, folded away. */
.skpmore summary{font-size:11.5px;font-weight:600;color:var(--ink-quiet);cursor:pointer;
  list-style:none}
.skpmore summary::-webkit-details-marker{display:none}
.skpmore summary::before{content:"+ ";font-weight:700}
.skpmore[open] summary::before{content:"- "}
.skpmore summary:hover{color:var(--brand)}
.skpmore > span{display:block;font-size:12.5px;color:var(--ink-muted);line-height:1.5;
  margin-top:5px}
.skpsub{font-size:11px;font-weight:600;color:var(--ink-quiet)}
/* SCOPED TO .ladder ON PURPOSE. There is already a .rung, in the progression table inside a
   lesson, and it is a teal pill. An unscoped second one here would win or lose by file order,
   which is how the day tabs came out alternately narrow and full width. */
.ladder{display:grid;gap:0}
.ladder .rung{display:block;padding:7px 11px;font-size:12.5px;color:var(--ink-quiet);
  background:none;border-radius:0;border-left:3px solid var(--hairline);line-height:1.45}
.ladder .rung i{font-style:normal;display:block;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:1px}
/* The levels this room works. The ones either side stay, greyed: one is what children arrive
   with and the other is where a child who has it goes next. */
.ladder .rung.on{background:var(--brand-tint);border-left-color:var(--brand);color:var(--ink)}
.ladder .rung.on i{color:var(--brand-deep)}
.skptwo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.skptwo > span > i{font-style:normal;display:block;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--brand);margin-bottom:5px}
.skptwo em{font-style:normal;display:block;font-size:12.5px;color:var(--ink-muted);
  line-height:1.45;padding:3px 0 3px 13px;position:relative}
.skptwo em::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;
  border-radius:50%;background:var(--peri)}
.skpapp{display:grid;gap:1px;border-radius:var(--r-sm);overflow:hidden}
.skpapp > span{display:block;background:var(--sunny-tint);color:var(--sunny-ink);
  padding:7px 11px;font-size:12px;line-height:1.45}
.skpapp b{font-weight:700}
.skpapp u{text-decoration:none;display:block;font-weight:600;margin-top:2px}
.skpacc{font-size:11.5px;color:var(--ink-quiet);line-height:1.45}
.skpacc b{color:var(--ink-muted)}
@media (max-width:720px){ .skptwo{grid-template-columns:1fr} }

/* ---- the lesson ------------------------------------------------------------------- */
.back{background:none;border:0;padding:0;color:var(--brand);font-weight:600;font-size:13px;
  margin-bottom:12px}
.goal{font-family:var(--serif);font-size:23px;line-height:1.3;margin:0 0 18px;max-width:22em}
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:start}
.sec{margin-bottom:20px}
.sec h3{font-size:11px;font-weight:700;color:var(--brand);margin:0 0 8px}
.sec ol{margin:0;padding-left:20px;list-style:decimal}
.sec ol li{margin-bottom:5px}
/* The line to say while the children are at that step, under the step it belongs to. */
.said{display:block;margin:5px 0 9px;padding-left:11px;border-left:2px solid var(--peri);
  color:var(--ink-muted);font-size:13px}
.sec ul{margin:0;padding:0;list-style:none}
.sec ul li{padding:5px 0 5px 22px;position:relative;border-bottom:1px solid var(--hairline)}
.sec ul li:last-child{border-bottom:0}
.sec ul li::before{content:"";position:absolute;left:5px;top:12px;width:6px;height:6px;
  border-radius:var(--r-pill);background:var(--brand)}
.look{background:var(--apple-tint);color:var(--apple-ink);border-radius:var(--r-sm);
  padding:11px 13px;font-size:13.5px;font-weight:500}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 17px;margin-bottom:12px}
/* The teacher's day tabs. This used to be called dayrow, which is also the name of a row in
   the admin block editor: a 78px label column beside a wide drop zone. Both rules were live,
   the admin one came later in the file and won, and five day buttons rendered alternately
   narrow and full width. Two surfaces, two names. */
.daypick{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:18px}
.daypick button{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--ink-muted)}
.daypick button[aria-current="true"]{background:var(--brand);border-color:var(--brand);
  color:var(--surface)}
.daypick button:hover{border-color:var(--brand)}

/* ---- tables ----------------------------------------------------------------------- */
.scroller{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface)}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--hairline);
  vertical-align:top}
thead th{font-size:11px;font-weight:700;color:var(--ink-quiet);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--brand-tint)}
td.wk{color:var(--ink-quiet);font-size:12.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.prog{table-layout:fixed}
.prog th{font-size:10px;padding:0 4px 6px 0;border:0}
.prog td{padding:0 4px 6px 0;border:0}
.rung{display:block;background:var(--brand-tint);border-radius:var(--r-xs);padding:5px 7px;
  font-size:11px;line-height:1.3}
.rung.blank{background:var(--settled);height:8px;padding:0;margin-top:6px}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.empty{background:var(--peri-tint);color:var(--peri-deep);border-radius:var(--r-sm);
  padding:13px 15px;font-size:13.5px}
@media (max-width:900px){
  .lesson{grid-template-columns:1fr}
  .blk{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .blk .go{grid-column:2}
}
/* ANYBODY WHO HAS ASKED FOR LESS MOTION GETS NONE OF IT. This is not a nicety: motion sickness
   and vestibular disorders are real, and a looping badge in the corner of the eye is exactly the
   kind of thing that causes trouble. Everything above degrades to the same page, still. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .shim i{background:var(--settled)}
}
@media print{
  .bar,.daypick,.back,.go{display:none}
  body{background:#fff}
  .blk,.card,.scroller{break-inside:avoid}
}

/* ---- teacher and admin switch ------------------------------------------------------ */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);
  overflow:hidden;background:var(--ground)}
.seg button{border:0;background:none;padding:5px 13px;font-size:12.5px;font-weight:600;
  color:var(--ink-muted)}
.seg button[aria-current="true"]{background:var(--brand);color:#fff}

/* ---- the block editor -------------------------------------------------------------- */
.admin{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:24px;align-items:start}
.rows{display:grid;gap:7px}
.row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;display:grid;grid-template-columns:18px 132px minmax(0,1fr) auto;gap:12px;
  align-items:start}
.row.lift{opacity:.45}
.row.over{border-color:var(--brand);box-shadow:0 -2px 0 0 var(--brand)}
.grip{cursor:grab;color:var(--ink-quiet);font-weight:700;letter-spacing:-1px;
  padding-top:7px;user-select:none}
.times{display:grid;gap:4px}
.times input{width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);color:var(--ink);font:inherit;font-size:12.5px;
  font-variant-numeric:tabular-nums}
.mins{font-size:11.5px;color:var(--ink-quiet);font-variant-numeric:tabular-nums}
.row.bad .mins{color:var(--attention);font-weight:700}
.row.bad input[type=time]{border-color:var(--attention)}
.body{display:grid;gap:6px;min-width:0}
.body input{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);color:var(--ink);font:inherit}
.body input.ti{font-weight:700}
.body input.lb{font-size:12.5px;color:var(--ink-muted)}
.body input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.drop{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px;
  border:1px dashed var(--line);border-radius:var(--r-sm);padding:5px 7px}
.drop.over{border-color:var(--brand);border-style:solid;background:var(--brand-tint)}
.drop .hint{font-size:12px;color:var(--ink-quiet)}

/* Same every day, or a different thing each day. The five day rows only exist in the second
   state, and each one owns its own name and its own routines. */
.vary{display:inline-flex;gap:0;background:var(--settled);border-radius:var(--r-pill);
  padding:2px;width:fit-content}
.seg{border:0;background:none;border-radius:var(--r-pill);padding:4px 11px;font-size:12px;
  font-weight:600;color:var(--ink-muted);white-space:nowrap}
.seg.on{background:var(--surface);color:var(--brand-deep);box-shadow:var(--shadow)}
.days{display:grid;gap:5px;border-left:2px solid var(--peri);padding-left:10px}
.dayrow{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:start}
.dayrow .dn{font-size:11.5px;font-weight:700;color:var(--peri-deep);padding-top:8px}
.dayrow .drop{grid-column:2}
.dayrow input.ti{font-size:13px}
.bnote{font-size:12px;color:var(--sunny-ink);background:var(--sunny-tint);
  border-radius:var(--r-sm);padding:6px 9px}

/* ---- the scaffold ------------------------------------------------------------------- */
/* Where the room is now. Periwinkle, because it is a fact about the year and not a thing
   anybody has to do about it. */
.now{background:var(--peri-tint);color:var(--peri-deep);border-radius:var(--r-sm);
  padding:10px 13px;margin:0 0 18px;font-size:13.5px;font-weight:600;max-width:58em}
/* A skill opening is this unit's teaching. A skill carrying is still in play from earlier, and
   a teacher has to be able to tell them apart at a glance without reading either. */
.sk{font-size:12.5px;color:var(--ink-quiet);padding:1px 0}
.sk.opens{color:var(--brand-deep);font-weight:700}
.sk.more{color:var(--ink-quiet);font-style:italic;padding-top:2px}

/* ---- the heat grid ------------------------------------------------------------------ */
/* A count on a four step ramp. Eleven shades are not readable at a glance and four are, and
   the number is in the cell anyway for anyone who needs the exact figure. */
table.grid thead th{vertical-align:bottom;line-height:1.15;white-space:normal}
table.grid tbody td{padding:5px 6px;vertical-align:middle}
table.grid td.unit{font-size:13px;font-weight:600;padding-left:14px}
table.grid td.n b{height:24px;border-radius:var(--r-xs);background:var(--empty);display:grid;
  place-items:center;font-size:11.5px;font-weight:700;color:var(--ink-quiet);
  font-variant-numeric:tabular-nums}
table.grid td.n b.l1{background:var(--ramp1);color:var(--brand-deep)}
table.grid td.n b.l2{background:var(--ramp2);color:var(--brand-deep)}
table.grid td.n b.l3{background:var(--ramp3);color:var(--ramp3-ink)}
table.grid td.n b.l4{background:var(--ramp4);color:var(--ramp4-ink)}
.rampkey{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:11.5px;
  color:var(--ink-quiet);margin:12px 0 0}
.rampkey i{width:24px;height:12px;border-radius:3px;display:inline-block;margin-left:8px}
.rampkey i:first-child{margin-left:0}
.rampkey i.l1{background:var(--ramp1)}
.rampkey i.l2{background:var(--ramp2)}
.rampkey i.l3{background:var(--ramp3)}
.rampkey i.l4{background:var(--ramp4)}
.rampkey i.heading{background:var(--brand)}
.rampkey i.going{background:var(--peri)}
.rampkey i.empty{background:var(--empty)}

/* ---- the timeline ------------------------------------------------------------------- */
/* One cell per unit, so a skill's year is a shape. The rows are a real table; the strip is a
   chart inside one cell, which is a different thing from a grid pretending to be a table. */
.tlwrap{margin:4px 0 0}
.strip{display:grid;gap:2px}
.cell{height:16px;border-radius:2px;background:var(--empty);display:block;padding:0;border:0;
  position:relative}
.cell.heading{background:var(--brand)}
.cell.going{background:var(--peri)}
/* The unit, its weeks and what the skill is doing then only ever meet here. */
.cell:hover::after,.cell:focus-visible::after{content:attr(data-t);position:absolute;
  bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--ink);color:var(--ground);font-size:11px;font-weight:600;padding:5px 9px;
  border-radius:var(--r-sm);z-index:40;pointer-events:none;box-shadow:var(--shadow)}
.cell:hover,.cell:focus-visible{z-index:41}
.cell:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
table.tl{table-layout:fixed}
table.tl td{padding:5px 0;border-bottom:1px solid var(--hairline);vertical-align:middle}
table.tl tr:last-child td{border-bottom:0}
table.tl tbody tr:hover td{background:transparent}
table.tl .sname{font-size:12.5px;font-weight:600;padding-right:14px}
.vlab{display:block;font-size:10.5px;color:var(--ink-quiet);margin-top:3px}
.vlab .dose{color:var(--brand-deep);font-weight:700}
.vlab .dose.thin{color:var(--sunny-ink)}
.dhead{font-size:11px;font-weight:700;color:var(--brand);margin:20px 0 4px;letter-spacing:.04em}
.dhead.big{font-size:17px;color:var(--ink);letter-spacing:0;margin:36px 0 4px}
@media (max-width:760px){
  table.tl,table.tl tbody,table.tl tr,table.tl td{display:block;width:auto}
  table.tl .sname{padding:9px 0 4px;border-bottom:0}
}
@media (max-width:900px){
  .lesson{grid-template-columns:1fr}
  .blk{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .blk .go{grid-column:2}
}
/* ANYBODY WHO HAS ASKED FOR LESS MOTION GETS NONE OF IT. This is not a nicety: motion sickness
   and vestibular disorders are real, and a looping badge in the corner of the eye is exactly the
   kind of thing that causes trouble. Everything above degrades to the same page, still. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .shim i{background:var(--settled)}
}
@media print{
  .bar,.daypick,.back,.go{display:none}
  body{background:#fff}
  .blk,.card,.scroller{break-inside:avoid}
}

/* ---- teacher and admin switch ------------------------------------------------------ */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);
  overflow:hidden;background:var(--ground)}
.seg button{border:0;background:none;padding:5px 13px;font-size:12.5px;font-weight:600;
  color:var(--ink-muted)}
.seg button[aria-current="true"]{background:var(--brand);color:#fff}

/* ---- the block editor -------------------------------------------------------------- */
.admin{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:24px;align-items:start}
.rows{display:grid;gap:7px}
.row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;display:grid;grid-template-columns:18px 132px minmax(0,1fr) auto;gap:12px;
  align-items:start}
.row.lift{opacity:.45}
.row.over{border-color:var(--brand);box-shadow:0 -2px 0 0 var(--brand)}
.grip{cursor:grab;color:var(--ink-quiet);font-weight:700;letter-spacing:-1px;
  padding-top:7px;user-select:none}
.times{display:grid;gap:4px}
.times input{width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);color:var(--ink);font:inherit;font-size:12.5px;
  font-variant-numeric:tabular-nums}
.mins{font-size:11.5px;color:var(--ink-quiet);font-variant-numeric:tabular-nums}
.row.bad .mins{color:var(--attention);font-weight:700}
.row.bad input[type=time]{border-color:var(--attention)}
.body{display:grid;gap:6px;min-width:0}
.body input{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);color:var(--ink);font:inherit}
.body input.ti{font-weight:700}
.body input.lb{font-size:12.5px;color:var(--ink-muted)}
.body input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.drop{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px;
  border:1px dashed var(--line);border-radius:var(--r-sm);padding:5px 7px}
.drop.over{border-color:var(--brand);border-style:solid;background:var(--brand-tint)}
.drop .hint{font-size:12px;color:var(--ink-quiet)}

/* Same every day, or a different thing each day. The five day rows only exist in the second
   state, and each one owns its own name and its own routines. */
.vary{display:inline-flex;gap:0;background:var(--settled);border-radius:var(--r-pill);
  padding:2px;width:fit-content}
.seg{border:0;background:none;border-radius:var(--r-pill);padding:4px 11px;font-size:12px;
  font-weight:600;color:var(--ink-muted);white-space:nowrap}
.seg.on{background:var(--surface);color:var(--brand-deep);box-shadow:var(--shadow)}
.days{display:grid;gap:5px;border-left:2px solid var(--peri);padding-left:10px}
.dayrow{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:start}
.dayrow .dn{font-size:11.5px;font-weight:700;color:var(--peri-deep);padding-top:8px}
.dayrow .drop{grid-column:2}
.dayrow input.ti{font-size:13px}
.bnote{font-size:12px;color:var(--sunny-ink);background:var(--sunny-tint);
  border-radius:var(--r-sm);padding:6px 9px}

/* ---- the scaffold ------------------------------------------------------------------- */
/* Where the room is now. Periwinkle, because it is a fact about the year and not a thing
   anybody has to do about it. */
.now{background:var(--peri-tint);color:var(--peri-deep);border-radius:var(--r-sm);
  padding:10px 13px;margin:0 0 18px;font-size:13.5px;font-weight:600;max-width:58em}
/* A skill opening is this unit's teaching. A skill carrying is still in play from earlier, and
   a teacher has to be able to tell them apart at a glance without reading either. */
.sk{font-size:12.5px;color:var(--ink-quiet);padding:1px 0}
.sk.opens{color:var(--brand-deep);font-weight:700}
.sk.more{color:var(--ink-quiet);font-style:italic;padding-top:2px}

/* ---- the timeline ------------------------------------------------------------------- */
/* One column per week, and the unit ribbon uses the same grid so a unit sits exactly over the
   weeks it owns. Nothing here is a pseudo table: the rows are a real table and the strip is a
   chart inside one cell. */
.tlwrap{margin:0 0 34px}
.ribwrap{position:sticky;top:56px;z-index:20;background:var(--ground);
  padding:8px 0 6px;margin-bottom:4px}
.strip{display:grid;gap:2px;padding-left:190px}
.rib{margin-bottom:3px}
.useg{height:17px;border-radius:var(--r-xs);background:var(--peri-tint);color:var(--peri-deep);
  font-size:10px;font-weight:700;line-height:17px;padding:0 5px;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.useg.alt{background:var(--settled);color:var(--ink-muted)}
.ruler .tick{font-size:9px;color:var(--ink-quiet);font-variant-numeric:tabular-nums;
  text-align:left}
.cell{height:15px;border-radius:2px;background:var(--settled);display:block;padding:0;border:0;
  position:relative}
.cell.heading{background:var(--brand)}
.cell.going{background:var(--peri)}
.cell.now{box-shadow:0 0 0 2px var(--ink)}
/* The week, its unit and what is happening only ever meet here. */
.cell:hover::after,.cell:focus-visible::after{content:attr(data-t);position:absolute;
  bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--ink);color:var(--ground);font-size:11px;font-weight:600;padding:5px 9px;
  border-radius:var(--r-sm);z-index:40;pointer-events:none;box-shadow:var(--shadow)}
.cell:hover,.cell:focus-visible{z-index:41}
.cell:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
table.tl{width:100%;border-collapse:collapse;table-layout:fixed}
table.tl td{padding:2px 0;vertical-align:middle}
table.tl .sname{font-size:12.5px;font-weight:600;padding-right:12px}
table.tl td .strip{padding-left:0}
.dhead{font-size:11px;font-weight:700;color:var(--brand);margin:16px 0 5px;
  letter-spacing:.04em}
.dhead.big{font-size:17px;color:var(--ink);letter-spacing:0;margin:34px 0 6px}
.rampkey{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:11.5px;
  color:var(--ink-quiet);margin:0 0 6px}
.rampkey i{width:22px;height:11px;border-radius:2px;display:inline-block;margin-left:9px}
.rampkey i:first-child{margin-left:0}
.rampkey i.heading{background:var(--brand)}
.rampkey i.going{background:var(--peri)}
.rampkey i.empty{background:var(--settled)}
@media (max-width:760px){
  .strip{padding-left:0}
  .ribwrap{position:static}
  table.tl,table.tl tbody,table.tl tr,table.tl td{display:block;width:auto}
  table.tl .sname{padding:8px 0 3px}
}
tr.on td{background:var(--brand-tint)}
tr.on td:first-child{box-shadow:inset 3px 0 0 0 var(--brand)}
.tag{display:inline-block;margin-top:4px;border-radius:var(--r-pill);padding:2px 9px;
  font-size:11px;font-weight:700;background:var(--brand);color:var(--surface)}

/* ---- the units editor --------------------------------------------------------------- */
.urow .times{gap:6px}
.wkin{display:grid;gap:3px;font-size:11px;font-weight:700;color:var(--ink-quiet)}
.wkin input{width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);color:var(--ink);font:inherit;font-size:12.5px;
  font-variant-numeric:tabular-nums}
.opens{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:26px}
.opens .hint{font-size:12px;color:var(--ink-quiet)}
.drop .chip{display:inline-flex;align-items:center;gap:5px}
.drop .x{border:0;background:none;padding:0;color:var(--brand-deep);font-size:14px;
  line-height:1}
.del{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:5px 9px;font-size:12px;color:var(--ink-quiet)}
.del:hover{border-color:var(--attention);color:var(--attention)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-muted)}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.warn:hover{border-color:var(--attention);color:var(--attention)}
.rail{position:sticky;top:78px}
.palette{display:grid;gap:6px}
/* A THING YOU PICK UP LOOKS LIKE ONE. Seven bordered cards in a column read as a list of
   content, which is what the rest of the site uses that shape for. The handle is the whole
   difference, so it is the first thing in the row. */
.pal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px 11px;cursor:grab;display:grid;grid-template-columns:14px minmax(0,1fr);
  gap:9px;align-items:center}
.pal:hover{border-color:var(--brand)}
.pal:hover .grip{color:var(--brand)}
.pal .grip{font-size:12px;line-height:1}
.pal b{display:block;font-size:13px;font-weight:700}
.pal span span{font-size:11.5px;color:var(--ink-quiet)}
/* Already placed, so the column shows at a glance what is left to do. */
.pal.set{background:var(--brand-tint);border-color:transparent}
.pal.set span span{color:var(--brand-deep)}
.warnline{font-size:12.5px;color:var(--sunny-ink);background:var(--sunny-tint);
  border-radius:var(--r-sm);padding:8px 10px;margin:0 0 6px}
.warnline.bad{color:var(--attention);background:var(--attention-tint)}
.warnline.ok{color:var(--apple-ink);background:var(--apple-tint)}
.pill{display:inline-block;border-radius:var(--r-pill);padding:3px 10px;font-size:12px;
  font-weight:600;background:var(--apple-tint);color:var(--apple-ink)}
.pill.bad{background:var(--attention-tint);color:var(--attention)}
.pill.thin{background:var(--sunny-tint);color:var(--sunny-ink)}
/* Narrow, the row stacks into one column beside the handle. Every child has to be told to sit
   in that column: left to place itself, the block name falls into the eighteen pixel handle
   column and Delete lands on top of it. */
@media (max-width:900px){
  .admin{grid-template-columns:1fr}
  .rail{position:static}
  .row{grid-template-columns:18px minmax(0,1fr);gap:8px 10px}
  .row>*{grid-column:2}
  .row .grip{grid-column:1;grid-row:1}
  .row .times{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:8px}
  .row .del{justify-self:start}
}

/* ---- signing in ---------------------------------------------------------------------- */
/* One column, one question at a time. Nothing else is on the page, because there is nothing
   else somebody can usefully do until they are in. */
.gate{max-width:380px;margin:0 auto;padding:12vh 22px 60px;display:grid;gap:14px;
  justify-items:start}
.gate h1{margin:6px 0 0}
.gate .lede{margin:0}
.gate .mark{font-size:16px}
.gform{display:grid;gap:11px;width:100%;margin:4px 0 0}
.gform label{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--ink-muted)}
.gform input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:400}
.gform input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.btn.go{background:var(--brand);border-color:var(--brand);color:var(--surface);width:100%;
  padding:10px 14px;font-size:14px}
.btn.go:disabled{opacity:.6}
.linkish{background:none;border:0;padding:0;color:var(--brand);font-size:12.5px;font-weight:600}
.who{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-quiet);
  white-space:nowrap}
.dberr{margin:0;padding:8px 22px;background:var(--attention-tint);color:var(--attention);
  font-size:12.5px;font-weight:600}
.where{border-radius:var(--r-pill);padding:2px 9px;font-size:11px;font-weight:700;
  background:var(--apple-tint);color:var(--apple-ink)}
.where.local{background:var(--settled);color:var(--ink-quiet)}

/* The set up screen shows the rooms and the year rather than counting them, so it needs the
   width a table and a ribbon want. */
.gate.wide{max-width:760px;justify-items:stretch}
.gate.wide .mark,.gate.wide h1,.gate.wide .kicker{justify-self:start}
.gate .scroller{width:100%}
/* The year, as the twenty five units it is. A ribbon of proportional segments was tried first
   and said nothing: at forty eight columns a two week unit is thirty pixels wide, too narrow
   for its own name, so it came out as twenty five blank boxes. The length of a unit is a number
   and reads better as one. */
.yearlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:6px}
.ucard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 11px;display:grid;gap:1px;min-width:0}
.ucard b{font-size:12.5px;font-weight:700;line-height:1.25}
.ucard span{font-size:11px;color:var(--ink-quiet);font-variant-numeric:tabular-nums}
.gate .wk{font-size:12px;color:var(--ink-quiet);margin:6px 0 0}
.gate .chip{font-size:11.5px;padding:2px 9px}

/* The set up filling itself in. A row or a card is written, in flight, or not reached yet, and
   the three read differently so somebody watching can see where it has got to. */
.setting{display:grid;gap:7px;width:100%}
.track{height:6px;border-radius:var(--r-pill);background:var(--settled);overflow:hidden}
.track i{display:block;height:100%;background:var(--brand);border-radius:var(--r-pill);
  transition:width .25s ease}
.ucard.done{border-color:var(--brand);background:var(--brand-tint)}
.ucard.done b{color:var(--brand-deep)}
.ucard.now{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
tbody tr.done td{background:var(--brand-tint)}
tbody tr.now td{box-shadow:inset 3px 0 0 0 var(--brand)}
@media (prefers-reduced-motion:reduce){ .track i{transition:none} }

.choices{display:grid;gap:8px;width:100%}
.choices .btn{width:100%;padding:10px 14px;font-size:13.5px;text-align:center}
.empty{color:var(--ink-quiet);font-size:13px;padding:18px 0}

/* ---- pasting a schedule ---------------------------------------------------------------- */
.pastewrap{max-width:760px}
.pastebox{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;line-height:1.55;
  resize:vertical;font-variant-numeric:tabular-nums}
.pastebox:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.warnline .wk{display:block;margin-top:2px;opacity:.85}

/* ---- a suggestion, on the block it is about ------------------------------------------- */
/* Said where the change would be made, with the change attached. A sentence about a block
   sitting in a sidebar is a sentence somebody has to carry across the screen in their head. */
.fixline{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12px;
  background:var(--sunny-tint);color:var(--sunny-ink);border-radius:var(--r-sm);
  padding:6px 7px 6px 10px}
.fixline.bad{background:var(--attention-tint);color:var(--attention)}
.fixline>span{flex:1 1 200px;min-width:0}
.fixbtn{border:1px solid currentColor;background:var(--surface);border-radius:var(--r-pill);
  padding:3px 11px;font-size:11.5px;font-weight:700;color:inherit;white-space:nowrap}
/* Both of these were set from currentColor, so on hover the text and the ground resolved to the
   same value and the button went blank. Hover names its own two colors. */
.fixline .fixbtn:hover{background:var(--sunny-ink);color:var(--sunny-tint)}
.fixline.bad .fixbtn:hover{background:var(--attention);color:var(--attention-tint)}

/* ---- the mentor ------------------------------------------------------------------------ */
/* Under the day, not beside it. Read once in the morning rather than worked against, so it is
   allowed to be quiet: a periwinkle ground, because it is a fact about the room and not
   something anybody has to act on today. */
.mentor{margin:26px 0 0;background:var(--peri-tint);border:1px solid var(--peri);
  border-radius:var(--r-md);padding:18px 20px 20px;max-width:62em}
.mhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mmark{width:9px;height:9px;border-radius:var(--r-pill);background:var(--peri-deep);
  display:block;flex:none}
.mentor .kicker{color:var(--peri-deep);margin:16px 0 5px}
.mhead .kicker{color:var(--peri-deep)}
.mtabs{margin-left:auto;display:flex;gap:4px}
.mtabs button{border:1px solid var(--peri);background:var(--surface);border-radius:var(--r-pill);
  width:24px;height:24px;font-size:11px;font-weight:700;color:var(--peri-deep);padding:0}
.mtabs button[aria-current="true"]{background:var(--peri-deep);border-color:var(--peri-deep);
  color:var(--surface)}
.mwhy{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--peri-deep)}
.mtext{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.mquiet{color:var(--ink-muted);font-size:12.5px}
.madd{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;
  margin-top:16px}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px}
.mcard .kicker{margin:0 0 4px}
.mask{margin:0;padding-left:20px}
.mask li{font-size:13.5px;line-height:1.55;margin-bottom:4px}

/* ---- motion ----------------------------------------------------------------------------- */
/* ONE EASING AND TWO DURATIONS, and everything uses them, because a page where each thing moves
   on its own curve reads as unfinished rather than as designed. The curve is a soft decelerate:
   things arrive quickly and settle, which is how paper behaves when you put it down.

   Motion here is only ever used to say that something changed. Nothing loops, nothing draws
   attention to itself while somebody is reading, and the whole vocabulary is switched off for
   anybody who has asked their machine for less of it. */
:root{
  --ease:cubic-bezier(.2,.7,.3,1);
  --quick:140ms;
  --settle:280ms;
}

@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* A slow breath rather than a blink. It marks the block that is happening now and has to be
   readable while it does it. */
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}

/* ---- the planner ------------------------------------------------------------------------ */
/* Three columns that each answer one question: when, what, and what with. The middle is the one
   being made, so it gets the width and the paper; the two rails are quieter than it on purpose.
   Under 1100px the rails go above and below rather than shrinking, because a shelf two words
   wide is not a shelf. */
.plan3{display:grid;grid-template-columns:264px minmax(0,1fr) 320px;gap:24px;
  align-items:start}
.pleft,.pright{display:grid;gap:5px;align-content:start;position:sticky;top:72px;
  max-height:calc(100vh - 96px);overflow:auto;scrollbar-width:thin}
/* The middle is the paper: it is the only panel with any lift, which is what tells somebody
   at a glance which of the three they are working in. */
/* Tall enough to be the page rather than a card floating on one. A block with nothing planned
   in it was a short box with two thirds of the window empty underneath. */
.pmid{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:26px 32px;box-shadow:var(--shadow);min-height:calc(100vh - 128px)}
.pmid.swap{animation:rise var(--settle) var(--ease) both}
/* The block's name is the largest thing on the page and is set in the serif, which is the same
   face the curriculum's big ideas are set in. It is the one place the product is allowed to be
   handsome rather than efficient. */
.ph{margin:2px 0 12px;font-family:var(--serif);font-size:29px;line-height:1.15;
  letter-spacing:-.01em;text-wrap:balance}

/* One block of the day. The count is what has been planned into it, so the rail shows at a
   glance which parts of the day have been thought about and which have not. */
.pbk{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:baseline;
  text-align:left;width:100%;border:1px solid transparent;background:none;border-radius:var(--r-sm);
  padding:7px 9px}
.pbk{transition:background var(--quick) var(--ease),border-color var(--quick) var(--ease),
  transform var(--quick) var(--ease)}
.pbk:hover{background:var(--surface);border-color:var(--line)}
.pbk:active{transform:scale(.99)}
.pbk.on{background:var(--surface);border-color:var(--brand);box-shadow:inset 3px 0 0 0 var(--brand)}
.pbt{font-size:11.5px;color:var(--ink-quiet);font-variant-numeric:tabular-nums}
.pbn{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.pbk.on .pbn{color:var(--brand-deep)}
.pbc{font-size:10.5px;font-weight:700;color:var(--surface);background:var(--brand);
  border-radius:var(--r-pill);padding:1px 6px}
/* The block happening at this minute, and only ever on a day that really is today. Apple,
   because that is the colour this product uses for what is running now. */
.pbk.live{background:var(--apple-tint)}
.pbk.live .pbn{color:var(--apple-ink)}
/* A block the day pass wrote a line for. A dot rather than a number, because it is one waiting
   decision and not a count of things already planned. */
.pbk.waiting .pbn{color:var(--peri-deep)}
.pbd{width:7px;height:7px;border-radius:50%;background:var(--peri-deep);display:block}
.pbl{font-size:10px;font-weight:700;color:var(--surface);background:var(--apple-ink);
  border-radius:var(--r-pill);padding:1px 7px;letter-spacing:.03em;
  animation:breathe 3.4s var(--ease) infinite}
/* The unit's question, in the serif, because it is a question somebody is meant to hold in
   their head all week rather than a label to skim. */
.punit{margin:0 0 12px;font-family:var(--serif);font-size:13.5px;line-height:1.4;
  color:var(--peri-deep);background:var(--peri-tint);border-radius:var(--r-sm);padding:10px 12px}

.psk{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 14px}
.skpill{font-size:11px;font-weight:700;color:var(--brand-deep);background:var(--brand-tint);
  border-radius:var(--r-pill);padding:2px 9px}

.psheet{display:grid;gap:10px;margin-top:14px}
.pitem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;
  background:var(--ground);animation:rise var(--quick) var(--ease) both}
/* Something the curriculum wrote, rather than something chosen off the shelf. */
.pitem.lit{background:var(--surface);border-color:var(--brand);
  box-shadow:inset 3px 0 0 0 var(--brand)}
/* AN EMPTY BLOCK STATES A FACT AND STOPS. It used to read "the shelf is on the right", which
   is telling somebody how to use the screen they are looking at, and the house rules forbid it
   for a good reason: an affordance that has to be pointed at has already failed. It also sat in
   a tinted box, which made the absence of a plan look like a piece of content. */
.pempty{margin:2px 0;color:var(--ink-quiet);font-size:13px;padding:14px 0}
.pnote{display:grid;gap:5px;margin-top:4px}
.pnote textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);color:var(--ink);font:inherit;font-size:13px;line-height:1.55;
  padding:9px 11px;resize:vertical}
.pnote textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;background:var(--surface)}

/* The shelf. One group open at a time, because ten open at once is the wall this replaced. */
.shg{display:grid}
.shh{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  text-align:left;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);padding:8px 11px;font-size:12.5px;font-weight:600;color:var(--ink);
  transition:border-color var(--quick) var(--ease),color var(--quick) var(--ease)}
.shh[aria-expanded="true"]{border-color:var(--brand);color:var(--brand-deep)}
/* The group the mentor filled, marked so it does not read as one more shelf among nine. Named
   by what it is rather than by being first, because first is a position and positions move. */
.shg.picked .shh{border-color:var(--peri);color:var(--peri-deep);background:var(--peri-tint)}
.shg.picked .shh[aria-expanded="true"]{border-color:var(--peri-deep)}
.shg.picked .shn{color:var(--peri-deep)}
.shn{font-size:10.5px;font-weight:700;color:var(--ink-quiet);font-variant-numeric:tabular-nums}
.shh[aria-expanded="true"] .shn{color:var(--brand)}
.shl{display:grid;gap:4px;padding:6px 0 10px;animation:fade var(--quick) var(--ease) both}
.shi{display:grid;gap:2px;text-align:left;width:100%;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-sm);padding:8px 10px;
  transition:border-color var(--quick) var(--ease),background var(--quick) var(--ease),
    box-shadow var(--quick) var(--ease),transform var(--quick) var(--ease)}
.shi:hover:not(:disabled){border-color:var(--brand);background:var(--brand-tint);
  box-shadow:var(--shadow);transform:translateY(-1px)}
.shi:active:not(:disabled){transform:none;box-shadow:none}
.shi:disabled{background:var(--apple-tint);border-color:var(--apple-ink)}
.shim{font-size:10px;font-weight:700;color:var(--brand);letter-spacing:.04em;
  text-transform:uppercase}
.shia{font-size:12px;line-height:1.45;color:var(--ink-muted);display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.shi:disabled .shia{color:var(--ink-quiet)}
.shok{font-size:10.5px;font-weight:700;color:var(--apple-ink)}

@media (max-width:1100px){
  .plan3{grid-template-columns:1fr}
  .pmid{min-height:0}
  .pleft,.pright{position:static;max-height:none;overflow:visible}
  .pleft{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* ---- the mentor that reads what was written --------------------------------------------- */
/* Deliberately quieter than the shelf. The shelf is free and instant; this costs money and takes
   a few seconds, so it sits at the bottom of the plan and is asked for rather than offered. */
.askrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--hairline)}
.askb{border:1px solid var(--line);background:var(--surface);color:var(--ink-muted);
  border-radius:var(--r-pill);padding:6px 14px;font-size:12px;font-weight:600;
  transition:border-color var(--quick) var(--ease),color var(--quick) var(--ease),
    transform var(--quick) var(--ease)}
/* While it is thinking, the button says so by breathing rather than by spinning. */
.askb:disabled{animation:breathe 1.6s var(--ease) infinite}
.askb:hover:not(:disabled){border-color:var(--brand);color:var(--brand-deep)}
.askb:disabled{color:var(--ink-quiet);background:var(--ground)}
.askc{border:1px solid var(--peri);background:var(--peri-tint);border-radius:var(--r-sm);
  padding:12px 14px;margin-top:12px;animation:rise var(--settle) var(--ease) both}
.askc .injm{color:var(--peri-deep)}
.askc .injt{color:var(--ink)}
/* Their own words, quoted back, so it is visible that the answer read them. */
.askfrom{margin:0 0 6px;font-size:12px;font-style:italic;color:var(--peri-deep)}
.askerr{margin:12px 0 0;font-size:12.5px;color:var(--ink-quiet)}
.askc.prep{background:var(--surface);border-color:var(--line)}
.askc.day{margin-top:0;margin-bottom:12px}
.prepsec{margin:0 0 10px}
.prepl{margin:3px 0 0;padding-left:18px}
.prepl li{font-size:12.5px;line-height:1.55;color:var(--ink-muted);margin-bottom:2px}
.prepl li b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- the injector ---------------------------------------------------------------------- */
/* ONE SUGGESTION, AND TWO WAYS TO BE DONE WITH IT. This was a stack of five cards, each with a
   heading, three paragraphs and an add button, and the whole rail read as an article beside the
   page rather than as something to decide. A teacher at half past nine does not read an article.
   So it holds one, the doing is the headline, the reason is one line under it, and both buttons
   end the card: taking it puts it in the plan, passing on it means it is not offered again. */
.withinj{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.inj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;position:sticky;top:72px;animation:rise var(--settle) var(--ease) both}
.injm{margin:0 0 5px;font-size:10px;font-weight:700;color:var(--brand);
  letter-spacing:.04em;text-transform:uppercase}
.injt{margin:0 0 7px;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.injf{margin:0 0 7px;font-size:12.5px;line-height:1.5;color:var(--ink);font-weight:600}
.injx{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink-muted)}
.injl{margin:0 0 10px;padding-left:18px}
.injl li{font-size:12.5px;line-height:1.5;color:var(--ink-muted);margin-bottom:3px}
.injrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.injbtn{border:1px solid var(--brand);background:var(--brand);color:var(--surface);
  border-radius:var(--r-pill);padding:5px 14px;font-size:12px;font-weight:700;
  transition:background var(--quick) var(--ease),transform var(--quick) var(--ease)}
.injbtn:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.injbtn:active,.injskip:active,.askb:active{transform:scale(.97)}
.injskip{border:1px solid var(--line);background:var(--surface);color:var(--ink-quiet);
  border-radius:var(--r-pill);padding:5px 13px;font-size:12px;font-weight:600}
.injskip:hover{border-color:var(--ink-quiet);color:var(--ink-muted)}
.injn{margin:9px 0 0;font-size:11.5px;color:var(--ink-quiet)}
/* WAITING, SHOWN AS THE SHAPE OF WHAT IS COMING. Three bars where three lines of text will be,
   so the panel does not jump when the answer lands, and a sweep across them so it is obviously
   working rather than stuck. A sentence saying "loading" tells somebody less than this does. */
.inj.waiting{animation:none}
.mentor.waiting{display:grid;gap:9px}
.mentor.waiting .shim{max-width:32em}
.inj.waiting .injx{margin:0 0 9px;color:var(--ink-quiet);font-size:12px}
.shim{display:grid;gap:7px}
.shim i{display:block;height:9px;border-radius:var(--r-xs);
  background:linear-gradient(90deg,var(--settled) 0%,var(--hairline) 40%,var(--settled) 80%);
  background-size:220% 100%;animation:sweep 1.25s var(--ease) infinite}
.shim i:nth-child(2){width:88%;animation-delay:.1s}
.shim i:nth-child(3){width:62%;animation-delay:.2s}
@keyframes sweep{from{background-position:120% 0}to{background-position:-60% 0}}
/* The card is written for this block, so it is marked as this school's own rather than as
   something the product says to everybody. */
.inj .injm{color:var(--brand)}
.planned{margin:26px 0 0;border-top:1px solid var(--line);padding-top:18px}
.pblock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--hairline)}
.rail .inj{margin-top:18px;position:static;padding:12px 13px}
@media (max-width:900px){ .withinj{grid-template-columns:1fr} }

.inviteform{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end;
  max-width:900px}
.inviteform .btn.go{width:auto;padding:9px 18px}
.inviteform select{padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:400}
td select{padding:5px 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);color:var(--ink);font:inherit;font-size:12.5px;width:100%}