/* Built from src/ by build.js. Edit those files, not this one. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* ============================================================
   Coaching Dashboard — four columns of stacked panels, widest
   where the daily work lives and narrowest where a single list
   (To-Do, General Resources) fills the whole column.
   ============================================================ */
:root{
  --paper:#E7E2D8;
  --panel:#FBFAF6;
  --panel-2:#F0ECE2;
  --ink:#191712;
  --muted:#655E52;
  --rule:#C9C0AE;
  --rule-soft:#E0D9CA;
  --signal:#33448F;
  --signal-ink:#FFFFFF;
  --signal-wash:#E2E4F0;
  /* A deeper cousin of the signal, for the one thing on the day bar that
     should sit below the ordinary blue rather than beside it. */
  --signal-deep:#1E2A63;
  --go:#2C7A5F;
  --flag:#A8641C;
  --dim:#9A9182;
  --daycell-bg:#33448F; --daycell-fg:#F4F5FB;
  --cyccell-bg:#DCD5C6; --cyccell-fg:#8A8172;

  --display:"Archivo","Arial Narrow",Helvetica,sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gap:13px;
  --radius:4px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#100F0C; --panel:#1D1A16; --panel-2:#262219;
    --ink:#EFEAE0; --muted:#A09887; --rule:#3D372D; --rule-soft:#2C2822;
    --signal:#97A5F4; --signal-ink:#0F1220; --signal-wash:#232741; --signal-deep:#4A5AD6;
    --go:#4FBE93; --flag:#D79A4C; --dim:#6C6557;
    --daycell-bg:#2F3C78; --daycell-fg:#DCE1FA;
    --cyccell-bg:#241F18; --cyccell-fg:#6B6355;
  }
}
:root[data-theme="dark"]{
  --paper:#100F0C; --panel:#1D1A16; --panel-2:#262219;
  --ink:#EFEAE0; --muted:#A09887; --rule:#3D372D; --rule-soft:#2C2822;
  --signal:#97A5F4; --signal-ink:#0F1220; --signal-wash:#232741; --signal-deep:#4A5AD6;
  --go:#4FBE93; --flag:#D79A4C; --dim:#6C6557;
  --daycell-bg:#2F3C78; --daycell-fg:#DCE1FA;
  --cyccell-bg:#241F18; --cyccell-fg:#6B6355;
}
/* Declared last, so the board's own switch beats the OS and the host. */
:root[data-board-theme="light"]{
  --paper:#E7E2D8; --panel:#FBFAF6; --panel-2:#F0ECE2;
  --ink:#191712; --muted:#655E52; --rule:#C9C0AE; --rule-soft:#E0D9CA;
  --signal:#33448F; --signal-ink:#FFFFFF; --signal-wash:#E2E4F0; --signal-deep:#1E2A63;
  --go:#2C7A5F; --flag:#A8641C; --dim:#9A9182;
  --daycell-bg:#33448F; --daycell-fg:#F4F5FB;
  --cyccell-bg:#DCD5C6; --cyccell-fg:#8A8172;
}
:root[data-board-theme="dark"]{
  --paper:#100F0C; --panel:#1D1A16; --panel-2:#262219;
  --ink:#EFEAE0; --muted:#A09887; --rule:#3D372D; --rule-soft:#2C2822;
  --signal:#97A5F4; --signal-ink:#0F1220; --signal-wash:#232741; --signal-deep:#4A5AD6;
  --go:#4FBE93; --flag:#D79A4C; --dim:#6C6557;
  --daycell-bg:#2F3C78; --daycell-fg:#DCE1FA;
  --cyccell-bg:#241F18; --cyccell-fg:#6B6355;
}

*{box-sizing:border-box}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.45;
  margin:0; padding-inline:16px; padding-block:14px 22px;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:2px}
img{max-width:100%}
[hidden]{display:none !important}

.board{max-width:1560px;margin:0 auto;display:flex;flex-direction:column;gap:var(--gap)}

/* ---------- masthead ---------- */
/* Three areas, so phone can restack them without moving any markup:
   the clock unit sits beside the title on a laptop and under it on a phone,
   with the date and Edit board following it either way. */
.masthead{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title time" "meta time";
  column-gap:20px;row-gap:7px;align-items:end;
  border-bottom:2.5px solid var(--ink);padding-bottom:10px;
}
.masthead h1{grid-area:title;align-self:end;
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;
  font-size:clamp(27px,3.6vw,44px);line-height:.95;margin:0;
  letter-spacing:-.02em;text-wrap:balance;
}
.datestamp{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0;letter-spacing:.02em}
.idrow{grid-area:meta;display:flex;align-items:center;gap:11px;flex-wrap:wrap}

.timeblock{grid-area:time;justify-self:end;align-self:center;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.clockstack{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.clock{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 600;
  font-variant-numeric:tabular-nums;font-size:clamp(38px,5vw,56px);
  line-height:.88;letter-spacing:-.025em;
}
.clockrow{display:flex;align-items:baseline;gap:6px}
.meridiem{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em}
.periodline{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.04em;min-height:1em}

/* Day carries a label because the day number is what she reads first;
   the cycle letter stands on its own. */
.cyclebox{display:flex;align-items:stretch;gap:4px}
.cyclebox .cell{
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:2px;
  min-width:68px;padding:8px 13px 11px;border-radius:6px;
}
.cyclebox .cap{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.4;opacity:.72;text-align:left;
}
.cyclebox .val{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 900;
  font-size:34px;line-height:.95;letter-spacing:-.02em;text-align:center;
}
/* The board's signal blue, so in both themes it matches the buttons and
   headings: deep blue in light, the lighter periwinkle in dark. */
.cyclebox .day{background:var(--signal);color:var(--signal-ink)}
/* The cycle letter matters less than the day number, so it stays near
   the paper it sits on instead of competing with the blue. */
.cyclebox .cyc{background:var(--cyccell-bg);color:var(--cyccell-fg)}
.cyclebox.off .cell{
  background:transparent;color:var(--dim);
  box-shadow:inset 0 0 0 1.5px var(--rule);
}

/* ---------- the four-column shell ---------- */
/* Columns 1 and 2 carry two to three stacked panels each; columns 3 and 4
   each hold a single panel, and run almost as wide. Today's duties sits
   in the grid too, spanning only columns 1 and 2, so columns 3 and 4
   start a row earlier, flush with its top. */
.shell{
  display:grid;
  grid-template-columns:1.5fr 1.5fr 1.15fr 1.15fr;
  grid-template-areas:
    "duties duties c3 c4"
    "c1 c2 c3 c4";
  /* The duties row takes only the height of the banner. Without this the
     two full-height columns beside it push their overflow into row one
     and the banner stretches to match them. */
  grid-template-rows:min-content 1fr;
  gap:var(--gap);
}
.col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.duties{grid-area:duties}
.col1{grid-area:c1}
.col2{grid-area:c2}
.col3{grid-area:c3}
.col4{grid-area:c4}

/* ---------- looking back ---------- */
/* Amber and above everything, so a page from the archive can never be
   mistaken for today's board. */
.lookback{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--flag);color:#FFF8EE;border-radius:6px;padding:9px 14px;
}
:root[data-board-theme="dark"] .lookback,
:root[data-theme="dark"] .lookback{color:#1B1206}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lookback{color:#1B1206} }
.lookback .lbtag{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;opacity:.8;
}
.lookback .lbwhen{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;font-size:17px}
.lookback .lbver{font-family:var(--mono);font-size:11.5px;opacity:.85}
.lookback .lbdirty{font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:.9}
.lookback .mini{
  background:transparent;border-color:currentColor;color:inherit;
}
.lookback .mini:hover{background:rgba(255,255,255,.18);color:inherit}
.lookback #lbBack{margin-left:auto}
.board.isback .masthead{border-bottom-color:var(--flag)}

/* Pushed to the right so it sits beside the theme switch. */
.logpick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.logpick .lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.logpick select{
  border:1px solid var(--rule);background:var(--panel);border-radius:3px;
  padding:3px 6px;font-family:var(--mono);font-size:11.5px;color:var(--muted);max-width:190px;
}
.logpick select:hover{color:var(--ink);border-color:var(--muted)}
.logpick select:disabled{opacity:.5}

/* ---------- duty strip ---------- */
/* Filled in the Day block's blue rather than bordered like the panels
   below it, so it reads as a banner over the board, not another panel.
   The chips inside are tinted from the text colour, so they read on the
   deep blue of light mode and the periwinkle of dark mode alike. */
.duties{
  background:var(--signal);color:var(--signal-ink);
  border:0;border-radius:6px;
  padding:11px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.duties .dutyLabel{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:inherit;opacity:.7;font-weight:600;flex:0 0 auto;
}
.dutyList{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 280px;min-width:0}
.duty{
  display:flex;align-items:baseline;gap:9px;
  background:color-mix(in srgb, currentColor 15%, transparent);border:0;border-radius:4px;padding:5px 12px;
}
.duty .p{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;background:color-mix(in srgb, currentColor 22%, transparent);border-radius:3px;
  padding:2px 6px;white-space:nowrap;align-self:center;
}
.duty .t{font-family:var(--mono);font-size:12px;opacity:.85;white-space:nowrap;font-weight:500}
.duty .n{font-weight:600}
.duty .sub{font-size:12.5px;opacity:.7}
.dutyNone{font-size:14px;opacity:.68}

/* ---------- panels ---------- */
.panel{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
}
.phead{
  display:flex;align-items:center;gap:9px;padding:8px 13px;
  background:var(--panel-2);border-bottom:1px solid var(--rule);
}
.phead h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  margin:0;font-weight:600;color:var(--ink);
}
.phead .count{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.phead .count + .edit{margin-left:0}
.edit{
  margin-left:auto;border:0;background:transparent;color:var(--muted);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 5px;border-radius:2px;
}
.edit:hover{color:var(--signal);background:var(--panel)}
.pbody{padding:12px 13px 13px;display:flex;flex-direction:column;gap:9px;min-width:0;flex:1 1 auto}

.empty{color:var(--dim);font-size:13.5px;font-style:italic}

/* ---------- small controls ---------- */
.mini{
  border:1px solid var(--rule);background:var(--panel-2);border-radius:3px;
  padding:3px 9px;font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.55;
}
.mini:hover{color:var(--ink);border-color:var(--muted)}
.icon{border:0;background:transparent;color:var(--dim);padding:2px 5px;border-radius:2px;
  font-family:var(--mono);font-size:13px;line-height:1}
.icon:hover{color:var(--ink);background:var(--panel-2)}
.icon.danger:hover{color:#B4472F;background:transparent}
.icon[disabled]{opacity:.28;cursor:default}
.icon[disabled]:hover{color:var(--dim);background:transparent}

.tick{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:16px;height:16px;border:1.5px solid var(--muted);border-radius:3px;
  background:transparent;cursor:pointer;position:relative;margin:0;
}
/* Every tick on the board crosses off in the same amber, wherever it
   sits — goals, daily tasks, to-do, newsletter, reminders. */
.tick:checked{background:var(--flag);border-color:var(--flag)}
.tick:checked::after{
  content:"";position:absolute;left:4.5px;top:1px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}

/* ---------- goals ---------- */
/* Both halves fold away, so the panel can be as quiet as the day needs. */
.gsec{border-top:1px solid var(--rule-soft);padding-top:10px}
.gsec:first-of-type{border-top:0;padding-top:0}
.gsec > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
}
.gsec > summary::-webkit-details-marker{display:none}
.gsec > summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:7px;height:7px;
  border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg);margin-bottom:3px;
}
.gsec[open] > summary::after{transform:rotate(-135deg);margin-bottom:-3px}
.gsec > summary:hover::after{border-color:var(--signal)}
.gbody{display:flex;flex-direction:column;gap:7px;padding-top:9px}
.gbody .results{border-top:1px solid var(--rule-soft);padding-top:10px;margin-top:3px}
.goalcap{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.possibility{display:flex;flex-wrap:wrap;gap:0 9px}
/* Big enough to catch the eye on the way past, small enough that it is
   not the loudest thing on a board she reads all day. */
.word{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;
  font-size:18px;line-height:1.3;color:var(--signal);letter-spacing:-.005em;
}
.word:not(:last-child)::after{content:" \00b7";color:var(--dim);font-weight:400}
.intention{font-size:15.5px;line-height:1.5;margin:0;text-wrap:pretty}
.results{display:flex;flex-direction:column;gap:7px}
.result{display:flex;gap:9px;align-items:flex-start}
.result span{font-size:14px;line-height:1.4}
.result.done span{text-decoration:line-through;color:var(--dim)}

/* ---------- track-in ---------- */
/* Shown only when the list has just emptied itself, so a clear that
   looks like data loss can be followed to where the data went. */
.rolled{
  display:flex;align-items:center;gap:8px;
  border-left:3px solid var(--flag);background:var(--panel-2);
  border-radius:0 3px 3px 0;padding:7px 9px;margin-bottom:9px;
  font-size:12.5px;color:var(--muted);line-height:1.4;
}
.rolled span{flex:1 1 auto;min-width:0}
.rolled .icon{flex:0 0 auto;opacity:1}
.rolled.bad{border-left-color:#B4472F;color:var(--ink)}
.tracksec + .tracksec{margin-top:11px;padding-top:10px;border-top:1px solid var(--rule-soft)}
.seclabel{
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin-bottom:6px;
}
.citem{display:flex;flex-direction:column;gap:5px;padding:4px 0}
.crow{display:flex;align-items:center;gap:9px;min-width:0}
.cname{flex:1 1 auto;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.citem.done .cname{color:var(--dim)}
/* Never shrinks, so the eight period slots occupy the same width on
   every row and read as one column. */
.cavail{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
.pslot{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.03em;
  color:var(--dim);border-radius:3px;padding:1px 4px;white-space:nowrap;
}
.pslot.on{background:var(--signal-wash);color:var(--signal)}
.cavail.none{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.cnotebtn{
  border:1px solid var(--rule-soft);background:transparent;border-radius:3px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);
  padding:2px 6px;line-height:1.5;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:4px;
}
.cnotebtn .ndot{font-style:normal;font-size:7px;line-height:1}
.cnotebtn:hover{border-color:var(--muted);color:var(--ink)}
.cnotebtn.has{border-color:var(--flag);color:var(--flag)}
.cnote{
  width:100%;min-height:74px;resize:vertical;border:1px solid var(--rule-soft);
  border-radius:3px;background:var(--panel-2);padding:8px 9px;font-size:13.5px;line-height:1.5;
}
.cnote:focus{outline:none;border-color:var(--signal)}

/* ---------- schedules ---------- */
.frame{
  border:1px solid var(--rule-soft);background:var(--panel-2);border-radius:3px;
  overflow:auto;display:flex;align-items:center;justify-content:center;
  flex:1 1 auto;min-height:170px;
}
.frame img{display:block;max-width:100%;height:auto}
.frame.compact{min-height:90px}
.carbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.carname{flex:1 1 130px;min-width:0;font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- resources, notes, bell schedule ---------- */
/* Each link is a tile you press, the way the homeroom board does it. */
.reslist{display:flex;flex-direction:column;gap:6px}
.res{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:3px;background:var(--panel-2);
  padding:9px 11px;font-size:14.5px;
}
.res:hover{border-color:var(--signal)}
.res .arrow{font-family:var(--mono);color:var(--dim);font-size:12px;margin-left:auto;flex:0 0 auto}
.res:hover .arrow{color:var(--signal)}
.res .arrow.play{color:var(--signal);font-size:9px}
.res .lbl{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Each section of General resources gets a blue rule and label, so four
   different kinds of content read as four things instead of one wall. */
.ressec{display:flex;flex-direction:column;gap:7px}
.subhead{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--signal);font-weight:600;
}
.subhead::after{content:"";flex:1 1 auto;height:1px;background:var(--signal);opacity:.3}
.res .arrow.play{font-size:9px}
.belltable{width:100%;border-collapse:collapse;font-size:13px}
.belltable th{
  text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);font-weight:600;padding:0 6px 5px 0;border-bottom:1px solid var(--rule-soft);
}
.belltable td{padding:5px 6px 5px 0;border-bottom:1px solid var(--rule-soft);vertical-align:baseline}
.belltable th:last-child,.belltable td:last-child{padding-right:0}
.belltable tr:last-child td{border-bottom:0}
.belltable td.pname{font-size:13.5px}
.belltable td.ptime{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.belltable td.empty{color:var(--dim);font-size:13px;font-style:italic;padding:4px 0}
.belltable tbody tr:nth-child(even){background:var(--panel-2)}
.belltable tbody tr.now{background:var(--signal-wash)}
.belltable tbody tr.now td{color:var(--signal);font-weight:600}
.belltable tbody tr.now td.ptime{color:var(--signal)}
.belltable tbody tr.now td:first-child{box-shadow:inset 3px 0 0 var(--signal);padding-left:6px}
.belltable td:first-child{padding-left:3px}
.belltable th:first-child{padding-left:3px}

/* ---------- to-do ---------- */
.todo{display:flex;flex-direction:column}
.trow{display:flex;align-items:center;gap:4px;padding:2px 0}
.trow .icon{padding:2px 3px;font-size:12px}
.trow .icon.danger{font-size:13px}
.trow.header{margin-top:9px;padding-top:7px;border-top:1px solid var(--rule-soft)}
.trow.header:first-child{margin-top:0;padding-top:0;border-top:0}
.tfield{
  flex:1 1 auto;min-width:0;border:0;background:transparent;padding:2px 3px;
  border-radius:3px;font-size:14.5px;
}
.tfield:focus{background:var(--panel-2);outline:none}
.trow.header .tfield{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);font-weight:600;
}
.trow.done .tfield{text-decoration:line-through;color:var(--dim)}
.tadd{
  border:0;background:transparent;color:var(--dim);font-family:var(--mono);font-size:14px;
  line-height:1;padding:2px 5px;border-radius:2px;opacity:.45;
}
/* The row controls stay out of the way until the row is in play. */
.trow .icon{opacity:0}
.trow:hover .tadd,.trow:focus-within .tadd{opacity:1}
.trow:hover .icon,.trow:focus-within .icon{opacity:1}
.trow:hover .icon[disabled],.trow:focus-within .icon[disabled]{opacity:.22}
.tadd:hover{color:var(--signal);background:var(--panel-2)}
@media (hover:none){
  .trow .icon,.trow .tadd{opacity:1}
  .trow .icon[disabled]{opacity:.22}
}
/* Four buttons of one size, two to a row, rather than a ragged wrap. */
.todofoot{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--rule-soft);
}
.todofoot .mini{text-align:center;padding:7px 6px;line-height:1.35}

/* ---------- tutoring ---------- */
.panel[aria-labelledby="tutHead"]{container-type:inline-size}
/* Earned to date leads the panel, in a blue band, because it is the
   number she opens this for. */
/* A figure worth having but not worth announcing — this board is open on
   a desk at school, so the running total reads as a caption rather than
   a headline, in the same quiet grey the other small labels use. */
.tutearn{
  display:flex;align-items:baseline;gap:10px;
  border-bottom:1px solid var(--rule-soft);padding:0 1px 7px;margin-bottom:4px;
}
.tutearn .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:600;
}
.tutearn .val{
  margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;
  line-height:1.2;color:var(--muted);font-variant-numeric:tabular-nums;
}

.tutstu + .tutstu{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.tuthead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* A student's name is the one heading here that is a name rather than a
   label, so it is set in the display face and sentence case — bigger
   than a panel heading, but not shouting. */
.tutname{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:19px;line-height:1.15;letter-spacing:-.01em;
}
.tutchip{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;white-space:nowrap;
  color:var(--flag);border:1px solid var(--flag);border-radius:3px;padding:2px 7px;
}
.tutchip.clear{color:var(--dim);border-color:var(--rule);border-style:dashed;font-weight:400}
.tutwhen{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:3px 0 8px;
}
.tutwhen .rate{color:var(--flag);font-weight:600}

/* ---- the session table ---- */
.tuttable{width:100%;border-collapse:collapse;table-layout:fixed}
.tuttable th{
  font-family:var(--mono);font-size:8px;letter-spacing:0;text-transform:uppercase;
  color:var(--signal);font-weight:600;text-align:left;line-height:1.3;
  padding:5px 2px;border-bottom:1.5px solid var(--signal);vertical-align:bottom;
}
.tuttable th.mid{text-align:center}
.tuttable th .short{display:none}
.tuttable th.num{text-align:right}
.tuttable td{
  padding:6px 2px;border-bottom:1px solid var(--rule-soft);vertical-align:middle;
}
/* Rules down the tick columns and the cost, so four narrow headings read
   as four columns rather than one run of words. */
.tuttable th:nth-child(n+3):nth-child(-n+7),
.tuttable td:nth-child(n+3):nth-child(-n+7){border-left:1px solid var(--rule-soft)}
.tuttable tr.foldrow td{border-left:0}
.tuttable tbody tr:last-child td{border-bottom:0}
.tuttable tbody tr:nth-child(even):not(.foldrow) td{background:var(--panel-2)}
.tuttable td.mid{text-align:center}
.tuttable td.mid .tick{display:inline-block;vertical-align:middle}
.tuttable td.none{color:var(--dim);font-size:13px;font-style:italic;text-align:center;padding:10px 0}

/* eight columns: the four ticks share the middle, the ends stay legible */
.tuttable col-date{}
.tuttable th:nth-child(1),.tuttable td:nth-child(1){width:17%}
.tuttable th:nth-child(2),.tuttable td:nth-child(2){width:15%}
.tuttable th:nth-child(3),.tuttable td:nth-child(3),
.tuttable th:nth-child(4),.tuttable td:nth-child(4),
.tuttable th:nth-child(5),.tuttable td:nth-child(5),
.tuttable th:nth-child(6),.tuttable td:nth-child(6){width:11.5%}
.tuttable th:nth-child(7),.tuttable td:nth-child(7){width:16%}
.tuttable th:nth-child(8),.tuttable td:nth-child(8){width:6%}

.datebtn{
  border:0;background:transparent;padding:0;text-align:left;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);
  border-bottom:1px dashed transparent;line-height:1.3;
}
.datebtn:hover{color:var(--signal);border-bottom-color:var(--signal)}
.tuttable tr.paid .datebtn{color:var(--muted);font-weight:400}
/* Out of the way until she asks for it, then laid over the row at the
   width a date field actually needs rather than the width of its column. */
.rowdate{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;
  clip-path:inset(50%);
}
.tuttable td.when{position:relative}
.tuttable td.when.editing .datebtn{visibility:hidden}
.tuttable td.when.editing .rowdate{
  clip-path:none;position:absolute;left:0;top:-2px;z-index:8;
  width:134px;height:auto;opacity:1;pointer-events:auto;
  border:1px solid var(--signal);background:var(--panel);border-radius:3px;
  padding:2px 5px;font-family:var(--mono);font-size:11.5px;color:var(--ink);
  box-shadow:0 3px 10px rgba(0,0,0,.16);
}
.tuttable td.when.editing .rowdate:focus{outline:none}
/* Which way a hybrid session ran — one tap to flip it. */
.waychip{
  display:inline-block;margin-top:3px;border:0;border-radius:3px;
  background:var(--signal-wash);color:var(--signal);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;font-weight:600;
  padding:2px 5px;line-height:1.3;white-space:nowrap;
}
.waychip.zoom{background:var(--daycell-bg);color:var(--daycell-fg)}
.waychip .wshort{display:none}
.waychip:hover{filter:brightness(1.06)}

.tuttable td.len{white-space:nowrap}
.tuttable td.len input{
  width:34px;border:1px solid var(--rule-soft);background:var(--panel);
  border-radius:3px;padding:1px 3px;font-family:var(--mono);font-size:11px;text-align:right;
  -moz-appearance:textfield;
}
.tuttable td.len input::-webkit-outer-spin-button,
.tuttable td.len input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tuttable td.len .u{font-family:var(--mono);font-size:8.5px;color:var(--dim);margin-left:2px}

/* Amber while the money is still owed; quiet once it has landed. */
.tuttable td.cost{text-align:right;font-family:var(--mono);font-size:11.5px;
  font-variant-numeric:tabular-nums;color:var(--flag);font-weight:600}
.tuttable tr.paid td.cost{color:var(--dim);font-weight:400}
.tuttable tr.paid td.when input[type=date]{color:var(--muted);font-weight:400}

.tuttable td.del{text-align:right}
.tuttable td.del .icon{opacity:0;padding:0 2px;font-size:12px}
.tuttable tr:hover td.del .icon,.tuttable tr:focus-within td.del .icon{opacity:1}
@media (hover:none){ .tuttable td.del .icon{opacity:1} }

.tuttable tr.foldrow td{border-bottom:0;padding:4px 0 0}
.tutfold{
  border:0;background:transparent;text-align:left;padding:2px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--dim);
}
.tutfold:hover{color:var(--signal)}
.tutadd{padding:2px 9px;font-size:10.5px}
.tutfields{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;
  border-top:1px solid var(--rule-soft);padding-top:9px;
}

/* The panel measures itself, so the table shortens its widest heading
   when the column it sits in narrows rather than when the window does.
   Declared last, so it beats the rule that hides the short spelling. */
@container (max-width:382px){
  .tuttable th .long{display:none}
  .tuttable th .short{display:inline}
  .waychip .wlong{display:none}
  .waychip .wshort{display:inline}
  /* the heading already says what the number is */
  .tuttable td.len .u{display:none}
  .tuttable td.len input{width:30px}
  .tuttable th:nth-child(1),.tuttable td:nth-child(1){width:18%}
  .tuttable th:nth-child(2),.tuttable td:nth-child(2){width:13%}
  .tuttable th:nth-child(3),.tuttable td:nth-child(3),
  .tuttable th:nth-child(4),.tuttable td:nth-child(4),
  .tuttable th:nth-child(5),.tuttable td:nth-child(5),
  .tuttable th:nth-child(6),.tuttable td:nth-child(6){width:11.25%}
  .tuttable th:nth-child(7),.tuttable td:nth-child(7){width:18%}
  .tuttable th:nth-child(8),.tuttable td:nth-child(8){width:5.5%}
}
/* Narrower still: even the short spellings need the type tightened a step
   so no heading runs past its column rule. */
@container (max-width:318px){
  .tuttable th{font-size:7px;padding:5px 1px}
  .tuttable td.len input{width:26px}
  .waychip{font-size:8px;letter-spacing:.02em;padding:2px 4px}
}

/* ---------- notes ---------- */
.notebox{
  width:100%;min-height:110px;flex:0 0 auto;resize:vertical;
  border:1px solid var(--rule-soft);border-radius:3px;background:var(--panel-2);
  padding:10px 11px;font-family:var(--body);font-size:14.5px;line-height:1.55;
}
.notebox:focus{outline:none;border-color:var(--signal)}

/* ---------- reminders ---------- */
/* One row per follow-up, whatever brought it here. The line under the
   text says why it is showing — the date it came due, or the days the
   repeat lands on — so nothing has to be remembered to read the list. */
.remlist{display:flex;flex-direction:column;gap:2px}
.remrow{display:flex;align-items:flex-start;gap:9px;padding:5px 0}
.remrow + .remrow{border-top:1px solid var(--rule-soft)}
.remrow .tick{margin-top:2px}
.remmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.remtext{font-size:14.5px;line-height:1.35;cursor:pointer;word-break:break-word}
.remrow.done .remtext{text-decoration:line-through;color:var(--dim)}
.remwhy{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--dim);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.remrow.done .remwhy{opacity:.6}
/* Overdue is the one thing on this panel worth raising your voice about. */
.remrow.late .remwhy{color:var(--flag);font-weight:600}
.remkind{
  border:1px solid var(--rule-soft);border-radius:2px;padding:0 4px;
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;
}
.remrow.late .remkind{border-color:var(--flag)}
.remtools{display:flex;align-items:center;gap:1px;flex:0 0 auto}
.remtools .icon{opacity:0;padding:2px 4px}
.remrow:hover .icon,.remrow:focus-within .icon{opacity:1}
@media (hover:none){ .remtools .icon{opacity:1} }
.remfoot{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--rule-soft);
}
.remfoot .mini{text-align:center;padding:7px 6px;line-height:1.35}
/* The quick dates: three to a row, so the six weekdays fill two rows and
   the three spans of time fill the third. */
.quickrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.quickrow .mini{
  text-align:center;padding:6px 4px;line-height:1.25;
  display:flex;align-items:center;justify-content:center;min-height:32px;
}
.quickrow .mini[aria-pressed="true"]{
  background:var(--signal);border-color:var(--signal);color:var(--signal-ink);font-weight:600;
}
.seg.remmode{align-self:flex-start}
/* The sixteen cycle days read as the two cycles they are: A across the
   top, B across the bottom, rather than one wrapping run. */
#remCodes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
#remCodes .codebtn{text-align:center;padding:5px 2px}
/* ---- event colours ---- */
.swatches{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
/* The two that also show on the day bar, kept in a pen of their own so
   the difference from the Google-only colours needs no explaining. */
.swboard{
  display:flex;gap:5px;align-items:center;
  padding:3px 6px;margin-left:5px;border-radius:14px;
  background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--rule);
}
.swatch{
  width:22px;height:22px;border-radius:50%;padding:0;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 2px var(--panel);
}
.swatch.none{border:1px dashed var(--rule);box-shadow:none}
.swatch[aria-pressed="true"]{
  box-shadow:inset 0 0 0 2px var(--panel), 0 0 0 2px var(--ink);
}
.swatch.none[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.swatch:hover{border-color:var(--ink)}
/* The swatch beside the composer's name box: what the event will wear. */
.cdot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--rule);vertical-align:baseline;margin-left:5px;
}

/* ---- the reminders tab of Edit board ---- */
/* Each stored reminder is one block: its text and controls on top, then
   a chip saying where it stands, then (for a repeat) its days. */
.editrow.remrow-edit{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.remedit-top{display:flex;gap:6px;align-items:center}
.remedit-top input[type=text]{flex:1 1 auto;min-width:0}
.remedit-top input[type=date]{flex:0 0 150px}
.remrow-edit .remstand{align-self:flex-start;text-transform:none;letter-spacing:.03em;font-size:10.5px}
.remstand.on{border-color:var(--signal);color:var(--signal);background:var(--signal-wash)}
.remstand.late{border-color:var(--flag);color:var(--flag);background:transparent;font-weight:600}
.remstand.quiet{border-style:dashed}
.remdays{
  display:flex;flex-direction:column;gap:7px;
  border-top:1px solid var(--rule-soft);padding-top:9px;
}
.remdays .codegrid.remcodes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.remdays .codegrid.remcodes .codebtn{text-align:center;padding:5px 2px}
.remdays .switch{font-size:13px}
@media (max-width:780px){
  .remedit-top{flex-wrap:wrap}
  .remedit-top input[type=date]{flex:1 1 130px}
}

/* Landing on a day school is closed is nearly always a mistake, so it
   says so in the same amber the overdue rows use. */
.daywarn{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--flag);border:1px solid var(--flag);border-radius:3px;
  padding:2px 7px;white-space:nowrap;
}
/* The linger toggle is a choice, not a section heading — it should not
   pick up the blue uppercase label styling the fields around it use. */
.efield > label.switch{
  font-family:var(--body);font-size:13.5px;letter-spacing:0;text-transform:none;
  color:var(--muted);font-weight:400;
}
.seg.remmode button[aria-pressed="true"]{background:var(--signal);color:var(--signal-ink)}
@media (max-width:780px){
  .quickrow{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- newsletter ---------- */
.nlrow{display:flex;align-items:center;gap:9px;padding:3px 0}
.nlrow .lbl{flex:1 1 auto;min-width:0;font-size:14.5px;cursor:pointer}
.nlrow.done .lbl{color:var(--dim)}
.nlrow .sent{font-family:var(--mono);font-size:10.5px;color:var(--flag);white-space:nowrap}
.nlbar{height:4px;background:var(--rule-soft);border-radius:2px;overflow:hidden;margin-bottom:3px}
.nlbar i{display:block;height:100%;background:var(--flag)}

/* ---------- footer ---------- */
.footer{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:12px;
}
.stamp{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.sync{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:0 0 auto}
.dot.ok{background:var(--go)}
.dot.busy{background:var(--flag)}
.dot.off{background:#B4472F}
.themewrap{display:flex;align-items:center;gap:9px}
.themewrap .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.seg{display:flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--panel)}
.seg button{border:0;border-right:1px solid var(--rule);background:transparent;padding:4px 11px;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--muted)}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---------- settings drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(16,15,12,.45);z-index:40}
.drawer{
  position:fixed;inset-block:0;right:0;width:min(860px,100%);z-index:41;
  background:var(--paper);border-left:1px solid var(--rule);
  display:flex;flex-direction:column;
}
.drawerhead{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:2.5px solid var(--ink);flex:0 0 auto}
.drawerhead h2{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;
  font-size:21px;margin:0;letter-spacing:-.015em;
}
/* The sections stand in a column down the side. As a single scrolling
   strip they could not all be seen at once, which meant hunting sideways
   for a tab every time; a column shows all ten and keeps its place. */
.drawermain{flex:1 1 auto;display:flex;min-height:0}
.tabs{
  flex:0 0 178px;display:flex;flex-direction:column;gap:1px;
  padding:14px 10px 20px;overflow-y:auto;
  background:var(--panel-2);border-right:1px solid var(--rule);
}
.tabs button{
  border:0;background:transparent;border-radius:3px;text-align:left;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  padding:7px 10px;color:var(--muted);line-height:1.3;
}
.tabs button:hover{color:var(--ink);background:var(--panel)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);font-weight:600}
.tabgroup{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);font-weight:600;padding:12px 10px 5px;
}
.tabgroup:first-child{padding-top:2px}
.drawerbody{flex:1 1 auto;min-width:0;overflow-y:auto;padding:18px 18px 40px;display:flex;flex-direction:column;gap:20px}

/* ---------- image lightbox ---------- */
.lightbox{
  position:fixed;inset:6vh 7vw;z-index:41;
  background:var(--panel);border:1px solid var(--rule);border-radius:6px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.lightboxbar{
  display:flex;align-items:center;gap:12px;padding:10px 14px;flex:0 0 auto;
  border-bottom:1px solid var(--rule);background:var(--panel-2);
}
.lightboxname{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lightboxframe{
  flex:1 1 auto;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:16px;background:var(--panel-2);
}
.lightboxframe img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:780px){
  .lightbox{inset:3vh 3vw}
}

/* ---------- time tracker ---------- */
.timeadd{
  border:1px solid var(--signal);background:var(--signal);color:var(--signal-ink);
  border-radius:3px;padding:7px 12px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;font-weight:600;align-self:flex-start;
}
.timeadd:hover{filter:brightness(1.08)}
.timeadd[disabled]{opacity:.45;cursor:default;filter:none}
.timerow2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.timerow2 .dbnote{
  margin-left:auto;text-align:right;line-height:1.35;
  display:flex;flex-direction:column;gap:0;
}
.dbnote .dbsub{color:var(--dim)}
/* One line, always: the name gives up room before anything wraps. */
.lastevt{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
  border-top:1px solid var(--rule-soft);padding-top:9px;margin-top:2px;
}
.lastevt > *{flex:0 0 auto}
.lastevt .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.lastevt .nm{font-size:13.5px;flex:1 1 30px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lastevt .tm{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.evtnote{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.evtnote.warn{color:var(--flag)}

/* ---------- the day bar ---------- */
/* Seven in the morning to seven at night as one continuous strip, with
   whatever is on the calendar filled in. Five-minute resolution, but the
   grain never shows — abutting events read as one solid run. */
.daybar{display:flex;flex-direction:column;gap:5px;margin-top:3px}
.dbtrack{
  position:relative;height:30px;border-radius:4px;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--rule-soft);
}
.dbtrack .dbhour{
  position:absolute;top:0;bottom:0;width:1px;background:var(--rule-soft);
}
.dbtrack .dbblock{
  position:absolute;top:3px;bottom:3px;border-radius:2px;
  background:var(--signal);opacity:.82;
}
/* The day is blue. Two of the nine calendar colours step out of it:
   Blueberry sinks to a deeper blue, Tangerine goes amber. Drawn in that
   order, so where they overlap the louder one wins. */
.dbtrack .dbblock.deep{background:var(--signal-deep);opacity:1}
.dbtrack .dbblock.amber{background:var(--flag);opacity:.92}
.dbtrack .dbnow{
  position:absolute;top:-1px;bottom:-1px;width:2px;margin-left:-1px;
  background:var(--flag);
}
.dbtrack .dbnow::before{
  content:"";position:absolute;top:0;left:-2px;width:6px;height:6px;
  border-radius:50%;background:var(--flag);
}
.dbaxis{position:relative;height:12px}
.dbtick{
  position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--dim);
}
.dbnote{margin:0;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.03em}
.dbnote.warn{color:var(--flag)}

/* ---------- event composer ---------- */
.scrim.evt{z-index:46}
.evtbox{
  position:fixed;z-index:47;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100% - 28px));max-height:min(86vh,760px);
  background:var(--panel);border:1px solid var(--rule);border-radius:6px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.evthead{
  display:flex;align-items:center;gap:12px;padding:12px 16px;flex:0 0 auto;
  border-bottom:2px solid var(--ink);background:var(--panel-2);
}
.evthead h2{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;
  font-size:18px;margin:0;letter-spacing:-.01em;flex:1 1 auto;
}
.evtbody{flex:1 1 auto;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px}
.efield{display:flex;flex-direction:column;gap:6px}
.efield > label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);font-weight:600;
}
.efield .opt{color:var(--dim);letter-spacing:.06em}
.evtbox input:not([type=checkbox]),.evtbox select,.evtbox textarea{
  border:1px solid var(--rule);background:var(--panel-2);border-radius:3px;
  padding:6px 8px;font-size:14px;width:100%;min-width:0;
}
.evtbox textarea{font-family:var(--body);line-height:1.5;resize:vertical}
.evtbox input:focus,.evtbox select:focus,.evtbox textarea:focus{outline:none;border-color:var(--signal)}

.combo{position:relative}
.combolist{
  position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:5;
  background:var(--panel);border:1px solid var(--rule);border-radius:3px;
  max-height:190px;overflow-y:auto;box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.combolist button{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:7px 10px;font-size:14px;color:var(--ink);
}
.combolist button[aria-selected="true"]{background:var(--signal-wash);color:var(--signal);font-weight:600}

.timerow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.timerow input[type=date]{flex:0 1 145px}
.timepair{display:flex;align-items:center;gap:3px}
.timepair input[type=time]{flex:0 0 108px;width:108px;text-align:center}
.todash{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.nudge{
  border:1px solid var(--rule);background:var(--panel-2);border-radius:3px;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);padding:4px 5px;line-height:1.2;
}
.nudge:hover{color:var(--signal);border-color:var(--signal)}
.evtlen{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.halfrow{display:flex;gap:6px;flex-wrap:wrap}
.periodchips,.peoplechips{display:flex;gap:5px;flex-wrap:wrap}
.pchip,.uchip{
  border:1px solid var(--rule);background:var(--panel-2);border-radius:3px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);
  padding:4px 8px;line-height:1.3;white-space:nowrap;
}
.uchip{font-family:var(--body);font-size:13px;letter-spacing:0}
.pchip:hover,.uchip:hover{border-color:var(--muted);color:var(--ink)}
.pchip[aria-pressed="true"],.uchip[aria-pressed="true"]{
  background:var(--signal);border-color:var(--signal);color:var(--signal-ink);font-weight:600;
}
.others{display:flex;flex-direction:column;gap:6px}
.others:empty{display:none}
.otherrow{display:flex;gap:6px;align-items:center}
.otherrow input{flex:1 1 120px;min-width:0}
.guestrow{display:flex;gap:16px;flex-wrap:wrap;margin-top:2px}
.switch{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);cursor:pointer}
.switch input{width:15px;height:15px;margin:0;accent-color:var(--signal);cursor:pointer}
.switch.off{opacity:.4;cursor:default}
.switch.off input{cursor:default}
.evtpreview{
  border-left:3px solid var(--signal);background:var(--panel-2);border-radius:0 3px 3px 0;
  padding:9px 12px;font-size:13.5px;line-height:1.55;color:var(--muted);white-space:pre-wrap;
}
.evtpreview:empty{display:none}
.evtfoot{
  display:flex;align-items:center;gap:8px;padding:11px 16px;flex:0 0 auto;
  border-top:1px solid var(--rule);background:var(--panel-2);
}
.evtstatus{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--muted);line-height:1.4}
.evtstatus.bad{color:#B4472F}
.evtstatus.good{color:var(--go)}
.mini.go{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);font-weight:600}
.mini.go:hover{filter:brightness(1.08);color:var(--signal-ink)}
.mini.go[disabled]{opacity:.5;cursor:default;filter:none}
@media (max-width:780px){
  .evtbox{width:calc(100% - 16px);max-height:92vh}
  .timepair input[type=time]{flex:0 0 96px;width:96px}
}

/* ---------- assembly schedules ---------- */
/* Quiet, but amber: the period chips above it mean something different
   on these days and that should register before she picks one. */
.altnote{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  border-left:2px solid var(--flag);padding:3px 0 3px 9px;margin-top:1px;
  font-size:12px;color:var(--muted);line-height:1.4;
}
.altnote .altname{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--flag);font-weight:600;
}
.belltable tbody tr.asm td{color:var(--flag);font-weight:600}
.belltable tbody tr.asm td:first-child{box-shadow:inset 3px 0 0 var(--flag);padding-left:6px}
.altday{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--flag);font-weight:600;
}
.tomsub.alt{color:var(--flag)}
.altgrid{display:grid;grid-template-columns:auto 1fr 1fr;gap:5px 8px;align-items:center}
.altgrid .lbl{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.altgrid .lbl.asm{color:var(--flag);font-weight:600}
.altgrid input[type=time]{width:100%}

/* ---------- tomorrow ---------- */
/* Wider than the composer: it is a page to read rather than a form to
   fill, and the period pills need room to stay on one line. */
.tombox{width:min(760px,calc(100% - 28px))}
.tomhead{gap:9px}
.tomwhen{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.tomwhen h2{font-size:18px;margin:0}
.tomsub{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tomsec{display:flex;flex-direction:column;gap:8px}
.tomsec > h3{
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  margin:0;color:var(--signal);font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.tomsec > h3::after{content:"";flex:1 1 auto;height:1px;background:var(--signal);opacity:.3}

/* one calendar event */
.tomevt{
  display:grid;grid-template-columns:122px minmax(0,1fr) auto;gap:3px 12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--rule-soft);
}
.tomevt:last-child{border-bottom:0}
.tomevt .tt{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.tomevt .tn{font-size:14.5px;line-height:1.35;min-width:0;word-break:break-word}
.tomevt .tw{grid-column:2;font-size:12.5px;color:var(--muted);margin-top:-2px}
.tomevt .tp{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;
  background:var(--signal-wash);color:var(--signal);border-radius:3px;
  padding:2px 6px;white-space:nowrap;
}
.tomevt .tp.spans{background:transparent;color:var(--flag);box-shadow:inset 0 0 0 1px var(--flag)}
.tomevt .tp.none{background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1px var(--rule-soft)}

/* who is free, and whether she is */
.tomrow{display:flex;align-items:center;gap:9px;padding:5px 0}
.tomrow + .tomrow{border-top:1px solid var(--rule-soft)}
.tomrow .tnm{flex:1 1 auto;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tomslots{display:flex;gap:3px;flex:0 0 auto}
.tomslot{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.03em;
  color:var(--dim);border-radius:3px;padding:2px 5px;white-space:nowrap;
  border:1px solid transparent;
}
/* she is free too — the only ones worth acting on */
.tomslot.open{background:var(--signal);color:var(--signal-ink)}
/* the teacher is free but her own calendar is not */
.tomslot.clash{color:var(--flag);border-color:var(--flag)}
.tomlegend{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);padding-top:2px;
}
.tomlegend .sw{display:inline-flex;align-items:center;gap:5px}
.tomnote{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.tomlong{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:6px 0 0;color:var(--muted)}
.tomlong .tl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.tomlong .tn{font-size:13px;line-height:1.4;min-width:0;word-break:break-word}
.tomnote.warn{color:var(--flag)}
@media (max-width:780px){
  .tomevt{grid-template-columns:1fr auto}
  .tomevt .tt{grid-column:1 / -1}
  .tomevt .tw{grid-column:1}
  .tomslots{flex-wrap:wrap;justify-content:flex-end}
}

/* ---------- confirm dialog ---------- */
/* The board runs in a frame where the browser's own confirm() can be
   blocked outright, which silently swallowed deletes. This asks in page. */
.scrim.ask{z-index:50}
.askbox{
  position:fixed;z-index:51;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(400px,calc(100% - 32px));
  background:var(--panel);border:1px solid var(--rule);border-radius:6px;
  padding:16px 18px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.askmsg{margin:0;font-size:14.5px;line-height:1.5}
.askrow{display:flex;gap:8px;justify-content:flex-end}
.mini.danger{border-color:#B4472F;color:#B4472F}
.mini.danger:hover{background:#B4472F;border-color:#B4472F;color:#fff}
.fieldset{display:flex;flex-direction:column;gap:10px}
.fieldset > h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  margin:0;color:var(--ink);font-weight:600;
}
.hint{font-size:13px;color:var(--muted);margin:0;line-height:1.5;max-width:62ch}
.field{display:flex;flex-direction:column;gap:4px}
.field > label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.drawer input[type=text],.drawer input[type=url],.drawer input[type=time],
.drawer input[type=date],.drawer input[type=number],.drawer select,.drawer textarea.ta{
  border:1px solid var(--rule);background:var(--panel);border-radius:3px;
  padding:6px 8px;font-size:14px;width:100%;min-width:0;
}
.drawer input:focus,.drawer select:focus,.drawer textarea:focus{border-color:var(--signal)}
.drawer textarea.ta{font-family:var(--body);line-height:1.5;resize:vertical;min-height:64px}
.editrow{
  display:grid;gap:7px;align-items:start;
  padding:8px;border:1px solid var(--rule-soft);border-radius:3px;background:var(--panel);
}
.rowtools{display:flex;align-items:center;gap:1px;justify-self:end}
.editlist{display:flex;flex-direction:column;gap:7px}
.addbtn{align-self:flex-start}
.rowgrid2{grid-template-columns:1fr auto}
.rowgrid3{grid-template-columns:1.4fr .9fr auto}
.rowgrid4{grid-template-columns:1.3fr 1fr 1fr auto}
.rowgrid5{grid-template-columns:1.3fr .65fr .9fr .9fr auto}
/* the 8x8 availability picker */
.availwrap{display:flex;flex-direction:column;gap:9px;min-width:0}
.availgrid{display:grid;grid-template-columns:auto repeat(8,minmax(0,1fr));gap:3px;min-width:0}
.availgrid .gh{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--dim);
  text-align:center;align-self:center;
}
.availgrid .gr{
  font-family:var(--mono);font-size:9.5px;color:var(--dim);
  text-align:right;padding-right:5px;align-self:center;
}
.gc{
  height:28px;min-width:0;border:1px solid var(--rule-soft);border-radius:3px;
  background:var(--panel-2);padding:0;line-height:1;
  font-family:var(--mono);font-size:10px;font-weight:600;color:transparent;
}
.gc:hover{border-color:var(--muted)}
.gc.both{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.gc.a,.gc.b{background:var(--signal-wash);border-color:var(--signal);color:var(--signal)}
.availlegend{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
}
.availlegend .sw{display:inline-flex;align-items:center;gap:5px}
.availlegend i{
  width:13px;height:13px;border-radius:3px;display:inline-block;
  border:1px solid var(--rule-soft);background:var(--panel-2);
}
.availlegend i.both{background:var(--signal);border-color:var(--signal)}
.availlegend i.part{background:var(--signal-wash);border-color:var(--signal)}

.codegrid{display:flex;flex-wrap:wrap;gap:5px}
.codebtn{
  border:1px solid var(--rule);background:var(--panel-2);border-radius:3px;
  font-family:var(--mono);font-size:11.5px;padding:3px 8px;color:var(--muted);
}
.codebtn[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);font-weight:600}
.uploadwrap{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:9px}
.thumb{border:1px solid var(--rule-soft);border-radius:3px;background:var(--panel);padding:7px;display:flex;flex-direction:column;gap:6px}
.thumb img{width:100%;height:78px;object-fit:cover;border-radius:2px;background:var(--panel-2)}
.thumb .tn{display:flex;gap:2px;align-items:center}
.thumb .tn input{font-size:12.5px;padding:4px 6px;flex:1 1 auto;min-width:0;margin-right:4px}
.thumb .tn .icon{padding:2px 4px;font-size:12px}
.thumb .tn .icon.danger{font-size:13px}
.note-warn{
  border-left:3px solid var(--flag);background:var(--panel);padding:9px 12px;
  font-size:13px;color:var(--muted);line-height:1.5;border-radius:0 3px 3px 0;
}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:3px;padding:3px 8px;color:var(--muted);
  background:var(--panel-2);white-space:nowrap;
}
.chip.solid{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);font-weight:600}
.chip.quiet{border-style:dashed}

/* ---------- course meetings ---------- */
/* One tile per course, two to a row; a last odd one takes the full row
   rather than leaving a hole beside it. */
.crsgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.crsbtn{
  border:1px solid var(--rule);background:var(--panel-2);border-radius:3px;
  padding:9px 10px;text-align:center;font-size:14px;font-weight:500;line-height:1.25;
}
.crsbtn:hover{border-color:var(--signal);color:var(--signal)}
.crsgrid .crsbtn:last-child:nth-child(odd){grid-column:1 / -1}

/* The running record: wider than the composer, because three columns of
   notes sit side by side in it. */
.meetbox{width:min(1080px,calc(100% - 28px));max-height:min(92vh,980px)}
.meetbox .evtbody{gap:12px;padding-top:12px;min-height:0;overscroll-behavior:contain}
/* Cards keep their full height and the body scrolls, rather than every
   card being squeezed to fit the box and clipped. */
.meetbox .evtbody > *{flex-shrink:0}
.meetsub{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.meettop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meetwarn{
  border-left:3px solid var(--flag);background:var(--panel-2);border-radius:0 3px 3px 0;
  padding:8px 11px;font-size:13px;color:var(--muted);line-height:1.45;
}

.mtg{border:1px solid var(--rule);border-radius:4px;background:var(--panel);overflow:hidden}

.mthead{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;background:var(--panel-2);
}
.mtg:not(.folded) .mthead{border-bottom:1px solid var(--rule-soft)}
.mtdate{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;
  font-size:17px;letter-spacing:-.005em;white-space:nowrap;margin-right:2px;
}
.mthead input[type=date]{
  border:1px solid var(--signal);background:var(--panel);border-radius:3px;
  padding:3px 6px;font-family:var(--mono);font-size:12.5px;width:auto;flex:0 0 auto;
}
.mtpeople{display:flex;gap:5px;flex-wrap:wrap;align-items:center;flex:1 1 220px;min-width:0}
.mtchip{
  border:1px solid var(--rule);background:var(--panel);border-radius:3px;
  font-size:13px;padding:3px 9px;line-height:1.35;color:var(--muted);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
button.mtchip:hover{border-color:var(--muted);color:var(--ink)}
.mtchip.on{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);font-weight:600}
/* Locked: who came reads in colour, who did not fades back. */
.mtchip.off{background:transparent;border-style:dashed;border-color:var(--rule);color:var(--dim);font-weight:400}
.mtchip .x{font-family:var(--mono);font-size:12px;opacity:.75;cursor:pointer}
.mtchip .x:hover{opacity:1}
.mtaddp{display:inline-flex;gap:4px;align-items:center}
.mtaddp input{
  border:1px solid var(--rule);background:var(--panel);border-radius:3px;
  padding:3px 7px;font-size:13px;width:130px;
}
.mttools{display:flex;align-items:center;gap:2px;margin-left:auto;flex:0 0 auto}
.mticon{
  border:0;background:transparent;color:var(--muted);border-radius:3px;
  width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.mticon:hover{background:var(--panel);color:var(--ink)}
.mticon svg{width:16px;height:16px;display:block}
.mticon.unlocked{color:var(--signal)}
.mticon.fold svg{transition:transform .15s}
.mtg.folded .mticon.fold svg{transform:rotate(-90deg)}

/* The date strip is filled in the board's blue, the way the duties banner
   is, so each meeting starts with a bar that is easy to find on a scroll.
   Everything on it is redrawn light: who came is a white chip, who did
   not is a faded dashed outline. */
.mtg{border-color:var(--daycell-bg)}
.mtg .mthead{background:var(--daycell-bg);color:var(--daycell-fg);border-bottom:0}
.mthead .mtdate{color:var(--daycell-fg)}
.mthead input[type=date]{border-color:transparent;background:var(--panel);color:var(--ink)}
.mthead .mtchip{background:transparent;border-color:rgba(255,255,255,.45);color:var(--daycell-fg)}
.mthead button.mtchip:hover{border-color:var(--daycell-fg);color:var(--daycell-fg);background:rgba(255,255,255,.12)}
.mthead .mtchip.on{background:var(--panel);border-color:var(--panel);color:var(--signal);font-weight:600}
.mthead button.mtchip.on:hover{background:var(--panel);color:var(--signal)}
.mthead .mtchip.off{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.35);color:var(--daycell-fg);opacity:.6}
.mthead .mini{background:transparent;border-color:rgba(255,255,255,.45);color:var(--daycell-fg)}
.mthead .mini:hover{background:rgba(255,255,255,.12);border-color:var(--daycell-fg);color:var(--daycell-fg)}
.mthead .mtaddp input{border-color:transparent;background:var(--panel);color:var(--ink)}
.mthead .mticon,.mthead .mticon.unlocked{color:var(--daycell-fg)}
.mthead .mticon:hover{background:rgba(255,255,255,.16);color:var(--daycell-fg)}

.mtbody{padding:4px 12px 12px}
/* Activity, process, notes — the three columns from the paper sketch.
   Rules between the columns, not boxes round every cell. */
.mtcols,.mtrow{display:grid;grid-template-columns:minmax(150px,.85fr) minmax(0,1.25fr) minmax(0,1.6fr)}
.mtcols{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--flag);font-weight:600;border-bottom:1.5px solid var(--flag);
}
.mtcols > span{padding:8px 10px 5px}
.mtrow{border-bottom:1px solid var(--rule-soft);position:relative}
.mtrow:last-child{border-bottom:0}
.mtrow > .mtcell{padding:10px 10px 11px;min-width:0;display:flex;flex-direction:column;gap:6px}
.mtcols > span + span,.mtrow > .mtcell + .mtcell{border-left:1px solid var(--rule-soft)}
.mtcap{
  display:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--flag);font-weight:600;
}
.mtact{font-weight:600;font-size:14.5px;line-height:1.3;word-break:break-word}
/* The topics picked for a row, one chip each; the drop-down under them
   adds another. */
.mttopics{display:flex;flex-wrap:wrap;gap:5px}
.mttopic{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  background:var(--signal-wash);color:var(--signal);border-radius:3px;
  padding:4px 5px 4px 9px;font-size:13px;font-weight:600;line-height:1.3;
}
.mttopic > span{min-width:0;word-break:break-word}
.mttopic .x{
  border:0;background:transparent;color:inherit;opacity:.6;padding:0 3px;
  font-family:var(--mono);font-size:13px;line-height:1;flex:0 0 auto;
}
.mttopic .x:hover{opacity:1}
.mtmins{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.mtrow select,.mtrow input[type=text],.mtrow input[type=number],.mtrow textarea{
  border:1px solid var(--rule-soft);background:var(--panel-2);border-radius:3px;
  padding:5px 7px;font-size:13.5px;width:100%;min-width:0;line-height:1.4;
}
.mtrow select:focus,.mtrow input:focus,.mtrow textarea:focus{outline:none;border-color:var(--signal)}
/* Only the field under the pointer (or being typed in) goes blue. */
.mtrow select,.mtrow input,.mtrow textarea{color:var(--ink)}
.mtrow select:hover,.mtrow input:hover,.mtrow textarea:hover,
.mtrow select:focus,.mtrow input:focus,.mtrow textarea:focus{color:var(--signal);border-color:var(--signal)}
.mtrow textarea{resize:none;overflow:hidden;font-family:var(--body)}
.mtminrow{display:flex;align-items:center;gap:5px}
.mtminrow input[type=number]{width:62px;flex:0 0 auto;font-family:var(--mono);-moz-appearance:textfield}
.mtminrow input::-webkit-outer-spin-button,.mtminrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mtminrow span{font-family:var(--mono);font-size:11px;color:var(--dim)}

.mtbul{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.mtbul li{display:flex;gap:7px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.mtbul li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--muted);margin-top:.62em}
.mtbul li > span{min-width:0;word-break:break-word;white-space:pre-wrap}
.mtbul li textarea{flex:1 1 auto}
.mtbul li .icon{opacity:0;flex:0 0 auto;margin-top:3px}
.mtbul li:hover .icon,.mtbul li:focus-within .icon{opacity:1}
@media (hover:none){ .mtbul li .icon{opacity:1} }

.mtpo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 8px;align-items:baseline}
.mtpo .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);font-weight:600;white-space:nowrap;
}
.mtpo .v{font-size:13.5px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.mtpo .v.none{color:var(--dim);font-style:italic}
/* the divider from the sketch: a rule, not another cell */
.mtdiv{height:0;border-top:1.5px solid var(--rule);margin:3px 0 1px}
.mtnotes{font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}

.mtrowx{position:absolute;top:8px;right:2px;opacity:0}
.mtrow.mtedit > .mtcell:last-child{padding-right:30px}
.mtrow:hover .mtrowx,.mtrow:focus-within .mtrowx{opacity:1}
@media (hover:none){ .mtrowx{opacity:1} }
.mtempty{color:var(--dim);font-size:13.5px;font-style:italic;padding:12px 2px 2px}
.mtfoot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--rule-soft);
}
.mtfoot .spacer{flex:1 1 auto}
.mtfoot .mini{padding:5px 11px}
/* Grey like any other button until the pointer is on it. */
.mini[disabled]{opacity:.45;cursor:default}
.mini.delmeet:hover{background:#B4472F;border-color:#B4472F;color:#fff}

/* ---- export ---- */
.scrim.exp{z-index:48}
.expbox{z-index:49;width:min(600px,calc(100% - 28px))}
.explist{
  display:flex;flex-direction:column;gap:1px;max-height:260px;overflow-y:auto;
  border:1px solid var(--rule-soft);border-radius:3px;background:var(--panel-2);padding:4px;
}
.exprow{
  display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:3px;cursor:pointer;
  font-size:13.5px;line-height:1.35;
}
.exprow:hover{background:var(--panel)}
.exprow .when{font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap;flex:0 0 auto}
.exprow .what{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.expquick{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.expquick .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
.seg.expfmt button,.seg.exporder button{padding:6px 12px}
.seg.expfmt button[aria-pressed="true"],.seg.exporder button[aria-pressed="true"]{background:var(--signal);color:var(--signal-ink)}
.expincl{display:flex;gap:8px 16px;flex-wrap:wrap}
.evtstatus a{color:var(--signal);font-weight:600}

/* ---- the course meetings tab of Edit board ---- */
.crsedit{display:flex;flex-direction:column;gap:8px}
.crsroster{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.presetrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 9px;align-items:center}
.presetrow .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.presetrow textarea.ta{min-height:44px}
.foldnow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px}
.foldnow a{color:var(--signal);font-weight:600;text-decoration:none}
.foldnow a:hover{text-decoration:underline}
.foldhits{display:flex;flex-direction:column;gap:4px}
.foldhits button{
  text-align:left;border:1px solid var(--rule);background:var(--panel);border-radius:3px;
  padding:7px 10px;font-size:14px;
}
.foldhits button:hover{border-color:var(--signal);color:var(--signal)}

/* ---------- responsive ---------- */
@media (max-width:1320px){
  .shell{grid-template-columns:1.3fr 1.3fr 1.15fr 1.15fr}
}
@media (max-width:1080px){
  .shell{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    grid-template-areas:
      "duties duties"
      "c1 c2"
      "c3 c4";
  }
}
@media (max-width:780px){
  body{padding-inline:13px}
  /* On a phone the panels set their own order rather than following the
     desktop columns: `display:contents` dissolves the column wrappers so
     every panel becomes a row of the shell in its own right. Desktop is
     untouched — this block only runs below 780px. */
  .shell{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-template-areas:none;
  }
  .col{display:contents}
  .duties,.col1,.col2,.col3,.col4{grid-area:auto}
  .duties{order:1}
  .panel[aria-labelledby="timeHead"]{order:2}   /* Time tracker */
  .panel[aria-labelledby="remHead"]{order:3}    /* Reminders */
  .panel[aria-labelledby="todoHead"]{order:4}   /* To do */
  .panel[aria-labelledby="trackHead"]{order:5}  /* Daily Tasks */
  .panel[aria-labelledby="meetHead"]{order:6}   /* Course meetings */
  .panel[aria-labelledby="goalsHead"]{order:7}  /* Goals */
  .panel[aria-labelledby="schedHead"]{order:8}  /* Schedules */
  .panel[aria-labelledby="resHead"]{order:9}    /* General resources */
  .panel[aria-labelledby="tutHead"]{order:10}   /* Tutoring */
  .panel[aria-labelledby="nlHead"]{order:11}    /* Newsletter */
  /* The running record stacks: each activity becomes one block, its three
     parts labelled, since three columns will not fit a phone. */
  .meetbox{width:calc(100% - 12px);max-height:94vh}
  .meetbox .evtbody{padding:10px 10px 16px}
  .mtcols{display:none}
  .mtrow{grid-template-columns:1fr}
  .mtrow > .mtcell{padding:8px 2px}
  .mtrow > .mtcell + .mtcell{border-left:0;border-top:1px dashed var(--rule-soft)}
  .mtcap{display:block}
  .mtrow{border-bottom:1.5px solid var(--rule)}
  .mtbody{padding:2px 10px 10px}
  .mtrowx{opacity:1;top:4px;right:0}
  .mtrow.mtedit > .mtcell:last-child{padding-right:2px}
  .mtaddp input{width:110px}
  /* date and padlock share the top line; the people get a line of their own */
  .mthead .mttools{order:2}
  .mthead .mtpeople{order:3;flex:1 1 100%}
  .masthead{grid-template-columns:1fr;grid-template-areas:"title" "time" "meta";row-gap:11px}
  .masthead h1{text-align:center}
  /* The date takes a line of its own, so the two buttons sit together
     underneath it rather than being pushed around by its length. */
  .idrow{justify-content:center;gap:7px 9px}
  .idrow .datestamp{flex:1 0 100%;text-align:center}
  .timeblock{justify-self:stretch;align-self:start;gap:10px}
  /* The clock takes the room the day block leaves and sits centred in it. */
  .clockstack{flex:1 1 auto;align-items:center;gap:3px}
  .clock{font-size:clamp(44px,13.5vw,62px)}
  .periodline{font-size:13px}
  .cyclebox .cell{min-width:74px;padding:9px 14px 12px}
  .cyclebox .val{font-size:38px}
  .duties{padding:10px 13px;gap:10px}
  .rowgrid3,.rowgrid4,.rowgrid5{grid-template-columns:1fr}
  .availgrid{gap:2px}
  .gc{height:24px;font-size:9px}
  .availgrid .gh,.availgrid .gr{font-size:8.5px}
  .rowtools{justify-self:start}
  .drawerbody{padding:14px 14px 40px}
  /* A sidebar is for a window with room to spare. On a phone the same
     ten sections laid out as a grid ate most of the screen before any
     content appeared, so here they go back to one scrolling strip —
     sideways scrolling costs a swipe, but it costs no height. The group
     labels go with it; they only earn their keep in a column. */
  .drawermain{flex-direction:column}
  .tabs{
    flex:0 0 auto;display:flex;flex-direction:row;gap:5px;
    overflow-x:auto;padding:9px 14px;
    background:transparent;border-right:0;border-bottom:1px solid var(--rule);
  }
  .tabs button{
    border:1px solid var(--rule);background:var(--panel);border-radius:3px;
    white-space:nowrap;text-align:center;padding:4px 10px;font-size:11.5px;
    letter-spacing:.06em;line-height:1.5;
  }
  .tabs button[aria-selected="true"]{border-color:var(--ink)}
  .tabgroup{display:none}
  .drawerhead{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}