/* Teachers fill this in on a phone between classes, so everything is one
   column, tap targets are generous, and nothing needs a horizontal scroll.

   The palette is the logo's, sampled from the file rather than guessed at:
   #723500 is three quarters of the mark, #20B8B9 the ninepin and the spool,
   #079393 the kite string. Brown carries the chrome and every primary action;
   turquoise is the accent, and it is deliberately the second colour rather than
   the first, because the one thing on these screens that must never be mistaken
   for decoration is a state.

   Which is why green, amber and red keep their ordinary meanings on the day
   screen and are not brand colours at all. A student who was absent should
   never be the same colour as a button. */
:root {
  --ink: #241a12; --quiet: #6b615a; --line: #e2dcd6;

  --brand: #723500;              /* the wordmark */
  --brand-deep: #4d2400;         /* pressed, and hovered */
  --brand-soft: #f5eee8;         /* the wash behind a selected thing */
  --accent: #079393;             /* the kite string */
  --accent-bright: #20b8b9;      /* the ninepin */
  --accent-soft: #e6f6f6;

  /* Named for what they mean, not for what colour they are. */
  --ok: #1d6b45; --ok-soft: #e0f0e7;
  --bad: #a4262c; --bad-soft: #fce4e4;
  --warn: #a86a00; --warn-soft: #fdf3e2;

  --paper: #fff; --ground: #faf8f6;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
/* A light bar, because the wordmark is brown on transparent and a brown bar
   would swallow it. The brand colour carries the nav and the rule underneath
   instead, and the page sits on a warm off-white so the bar still reads as a
   bar. */
header { background: var(--paper); border-bottom: 2px solid var(--brand); }
.bar {
  max-width: 720px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.mark { display: flex; align-items: center; }
.mark img { height: 34px; width: auto; display: block; }
/* Five items and a phone. Scrolling sideways beats wrapping 'New class' onto
   two lines and pushing the page down. */
nav { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; }
nav a {
  color: var(--brand); text-decoration: none; padding: 6px 10px;
  border-radius: 6px; font-size: 15px; white-space: nowrap; font-weight: 600;
}
nav a:hover { background: var(--brand-soft); }
nav a.on { background: var(--brand); color: #fff; }
.who {
  max-width: 720px; margin: 0 auto; padding: 0 16px 10px;
  color: var(--quiet); font-size: 14px;
}
main { max-width: 720px; margin: 0 auto; padding: 20px 16px 64px; }
h1 { font-size: 22px; margin: 4px 0 4px; }
.lead { color: var(--quiet); margin: 0 0 18px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px;
}
label { display: block; font-weight: 600; margin: 16px 0 6px; font-size: 15px; }
.card > label:first-of-type, .row label { margin-top: 0; }
input[type=text], input[type=password], input[type=date], input[type=search],
select {
  width: 100%; padding: 11px 12px; font-size: 16px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus, button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent);
}
.row { display: flex; gap: 12px; }
.row > div { flex: 1; }
button {
  margin-top: 22px; width: 100%; padding: 13px; font-size: 16px; font-weight: 600;
  color: #fff; background: var(--brand); border: 0; border-radius: 8px;
  cursor: pointer;
}
button:hover { background: var(--brand-deep); }
button.link {
  width: auto; margin: 10px 0 0; padding: 0; background: none; color: var(--bad);
  font-weight: 500; font-size: 14px; text-decoration: underline;
}
button.link:hover { background: none; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { margin: 0; font-weight: 500; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
  display: block; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; cursor: pointer; font-size: 15px;
}
.pill input:checked + span {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.pill input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.students {
  margin-top: 8px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.student { display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 11px 12px; border-bottom: 1px solid #eef0f3; font-weight: 400; }
.student:last-child { border-bottom: 0; }
/* The browser hides [hidden] with a user-agent rule of display:none, and any
   author rule that sets display outranks it. Without this, the search box
   above sets hidden on every row that does not match and nothing moves. Any
   element given a display here needs the same line. */
.student[hidden] { display: none; }
/* A group heading inside the pick list. It carries a display, so it needs the
   [hidden] line too - see the note above; without it a heading stays put while
   everything under it is filtered away. */
.pick-head {
  display: block; margin: 0; padding: 7px 12px;
  background: #f7f8fa; border-bottom: 1px solid #eef0f3;
  font-size: 13px; font-weight: 600; color: var(--quiet);
  position: sticky; top: 0;
}
.pick-head[hidden] { display: none; }

/* The fields an ad-hoc class almost never needs. Folded away so the common
   path is a name and one button. */
details.more { margin-top: 10px; }
details.more > summary {
  cursor: pointer; color: var(--brand); font-size: 15px; padding: 6px 0;
}

.student input { width: 20px; height: 20px; accent-color: var(--brand); }
.student:has(input:checked) { background: var(--brand-soft); font-weight: 600; }
.count { float: right; font-weight: 500; color: var(--quiet); font-size: 14px; }
.hint { color: var(--quiet); font-size: 14px; margin: 6px 0 0; }
.hint-inline { color: var(--quiet); font-weight: 400; font-size: 14px; }

.flash { margin-bottom: 16px; }
.flash p {
  margin: 0 0 8px; padding: 11px 14px; border-radius: 8px; font-size: 15px;
}
.flash .ok { background: var(--ok-soft); color: var(--ok); }
.flash .error { background: var(--bad-soft); color: var(--bad); }

.entry {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 10px;
}
.entry.synced { background: #fbfcfd; }
.entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 13px; padding: 2px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
}
.tag.quiet { background: #f0f1f4; color: var(--quiet); }
.tag.done { background: var(--ok-soft); color: var(--ok); }
/* Something a person should look at: a test never reviewed, a term with no
   payment against it. Amber rather than red - it is a question, not a fault. */
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.topic { margin: 8px 0 4px; font-weight: 600; }
.names { margin: 0; color: var(--quiet); font-size: 14px; }
@media (max-width: 420px) { .row { flex-direction: column; gap: 0; } }

/* A student who has already sat the chosen concept: still selectable - people
   do repeat a class - but visibly settled, and sorted below those who have not. */
.student.is-done span { color: var(--quiet); }
.done-tag {
  margin-left: auto; font-style: normal; font-size: 12px;
  color: var(--ok); background: var(--ok-soft);
  padding: 1px 8px; border-radius: 999px;
}
.student.is-done { background: #fbfcfd; }
.student:has(input:checked).is-done { background: var(--brand-soft); }

/* ---- admin ---------------------------------------------------------------
   The teacher screens are a phone form. This side is a desk: wide tables,
   full records, and a change history under every one. */
.head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.head-row h1 { margin: 0; }
.btn {
  display: inline-block; padding: 9px 14px; border-radius: 8px;
  background: var(--brand); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 600;
}
.btn:hover { background: var(--brand-deep); }
.btn.quiet { background: #fff; color: var(--brand); border: 1px solid var(--line); }
.btn.quiet:hover { background: var(--brand-soft); }

.tile {
  display: block; margin-bottom: 12px; padding: 18px 20px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper);
  text-decoration: none; color: inherit;
}
a.tile:hover { border-color: var(--brand); }
.tile h2 { margin: 0 0 4px; font-size: 18px; color: var(--brand); }
.tile p { margin: 0; color: var(--quiet); font-size: 15px; }
.tile-note { margin-top: 6px !important; font-size: 14px !important; }
.tile.disabled { background: #fbfcfd; }
.tile.disabled h2 { color: var(--quiet); }

.filters {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px;
}
.filters input[type=search] { flex: 2 1 240px; width: auto; }
.filters select { flex: 1 1 130px; width: auto; }
.filters button { margin-top: 0; width: auto; flex: 0 0 auto; padding: 11px 18px; }

.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #eef0f3;
  white-space: nowrap; }
thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--quiet); background: #fafbfc; }
tbody tr:last-child td { border-bottom: 0; }
td a { color: var(--brand); font-weight: 600; }
.muted { color: var(--quiet); }
.warn { color: var(--bad); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.pill-active, .pill-dormant, .pill-left {
  font-size: 13px; padding: 2px 9px; border-radius: 999px;
}
.pill-active { background: var(--ok-soft); color: var(--ok); }
.pill-dormant { background: var(--warn-soft); color: var(--warn); }
.pill-left { background: #f0f1f4; color: var(--quiet); }

fieldset { border: 0; border-top: 1px solid var(--line); margin: 0 0 4px;
  padding: 16px 0 0; }
fieldset:first-of-type { border-top: 0; padding-top: 0; }
legend { font-weight: 700; font-size: 14px; color: var(--brand);
  text-transform: uppercase; letter-spacing: .05em; padding: 0 8px 0 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 16px; }
.field.wide { grid-column: 1 / -1; }
.field label { margin-top: 12px; }
textarea { width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
h2.sub { margin: 28px 0 10px; font-size: 18px; }

/* ---- registration queue ---- */
.pill-link {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  text-decoration: none; font-size: 15px; margin: 0 6px 14px 0;
}
.pill-link.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pill-link span { opacity: .7; margin-left: 4px; }
/* A response that may already be on the roster. Amber, not red: it is a
   question for a person, not an error. */
.match {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: #fff4e0; border-left: 3px solid #b8860b;
}
.match.standalone { margin: 0 0 16px; }
.match p { margin: 0 0 4px; font-size: 14px; color: #6b4e00; }
.match p:last-child { margin-bottom: 0; }
.match a { color: #6b4e00; }
button.danger {
  background: #fff; color: var(--bad); border: 1px solid var(--line);
  margin-top: 10px;
}
button.danger:hover { background: var(--bad-soft); }

.subjects { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.subject {
  font-size: 13px; padding: 2px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
}
/* Typed into the Other box rather than chosen, so it needs a human read. */
.subject.unknown { background: var(--warn-soft); color: var(--warn); }
.card.tight { padding: 14px 16px; margin-bottom: 16px; }
.eyebrow-sm {
  margin: 0 0 2px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--quiet);
}

.paging {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 18px; font-size: 15px;
}
.paging a { color: var(--brand); font-weight: 600; text-decoration: none; }
.paging a:hover { text-decoration: underline; }
.paging span { color: var(--quiet); }

/* ------------------------------------------------------------------------- */
/* the day screen                                                             */
/*                                                                            */
/* Read at arm's length, in a room, by somebody who is also teaching. Six      */
/* punctuality states are too many to tell apart by reading, so every class    */
/* carries a colour on its left edge and the words only confirm it.           */
/* ------------------------------------------------------------------------- */
.day-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.day-head h1 { margin: 0; }
.day-nav { display: flex; align-items: center; gap: 6px; }
.day-nav input[type=date] { width: auto; padding: 8px 10px; }
.step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--brand); text-decoration: none;
  font-size: 20px; line-height: 1;
}
.step:hover { background: var(--brand-soft); }
.step.off { opacity: .35; pointer-events: none; }

.scroller { overflow-x: auto; padding-bottom: 4px; flex-wrap: nowrap; }
.scroller .pill-link { white-space: nowrap; }

/* One row per class. The state is carried by a coloured edge and a dot rather
   than by a wide column of words - six states are too many to tell apart by
   reading at arm's length, and the words beside the dot confirm what the colour
   already said. */
.day-table td:first-child { border-left: 4px solid transparent; }
.day-table .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); margin-right: 8px; vertical-align: 1px;
}
tr.t-good td:first-child { border-left-color: var(--ok); }
tr.t-good .dot { background: var(--ok); }
tr.t-warn td:first-child { border-left-color: var(--warn); }
tr.t-warn .dot { background: var(--warn); }
tr.t-bad td:first-child { border-left-color: var(--bad); }
tr.t-bad .dot { background: var(--bad); }
tr.t-quiet td:first-child { border-left-color: var(--quiet); }
tr.t-quiet .dot { background: var(--quiet); }
/* Not yet recorded is the work left to do, so it looks like work. */
.day-table tr.is-open td { background: #fffdf7; }
.day-table td.wholine { font-weight: 600; }
.day-table td.state { font-size: 14px; color: var(--quiet); }
.tag.free { background: var(--warn-soft); color: var(--warn); }

/* The record buttons live in their own cell and stay on one line, so the row
   stays a row. They are still full-sized targets - this is tapped in a
   classroom, not clicked at a desk. */
td.acts form { display: flex; gap: 6px; }
td.acts button {
  margin: 0; width: auto; padding: 9px 12px; font-size: 14px;
  white-space: nowrap;
}
td.acts button.quiet {
  background: #fff; color: var(--brand); border: 1px solid var(--line);
}
td.acts button.quiet:hover { background: var(--brand-soft); }
td.acts button.quiet.on { background: var(--brand); color: #fff; }
td.pick select { padding: 7px 9px; font-size: 14px; min-width: 130px; }

/* The full form for one class, opened in place. Given a width of its own so it
   lays out as a form rather than as whatever the column happens to be. */
td.more details > summary {
  cursor: pointer; color: var(--brand); font-weight: 600; font-size: 14px;
}
td.more .panel { width: 460px; max-width: 78vw; padding: 10px 0 4px; }
td.more .panel .hint { white-space: normal; }

/* How far each educator has got. The card layout carried this in its group
   headings; a table has an Educator column instead, so the counts come here. */
.tally { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
/* Neutral until it is finished, then green. Amber is kept for things that are
   actually wrong - a slot with no time - rather than for work that simply has
   not been done yet, which is most of the screen at nine in the morning. */
.tally-one {
  font-size: 13px; padding: 3px 10px; border-radius: 999px;
  background: #fff; color: var(--quiet); border: 1px solid var(--line);
}
.tally-one strong { color: var(--ink); }
.tally-one.done {
  background: var(--ok-soft); color: var(--ok); border-color: #c8e0d3;
}
.tally-one.done strong { color: var(--ok); }
.tally-one.mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.cls-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cls-acts button {
  margin: 0; width: auto; flex: 1 1 auto; min-width: 88px; padding: 11px 14px;
  font-size: 15px;
}
.cls-acts button.quiet {
  background: #fff; color: var(--brand); border: 1px solid var(--line);
}
.cls-acts button.quiet:hover { background: var(--brand-soft); }
.cls-acts button.quiet.on { background: var(--brand); color: #fff; }
.cls-acts button.link { flex: 0 0 auto; min-width: 0; margin-top: 2px; }

/* Still used by the staff screen's subjects disclosure. */
.cls-more { margin-top: 10px; }
.cls-more summary {
  cursor: pointer; font-size: 14px; color: var(--brand); font-weight: 600;
  padding: 4px 0;
}
/* Two columns even on a phone: a time and its pair belong beside each
   other, and one column turns the disclosure into a page of scrolling. */
.tight-grid {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 10px 14px; margin-top: 8px;
}
.tight-grid .field label { margin-top: 0; }
.tight-grid input[type=time], .tight-grid input[type=number] {
  width: 100%; padding: 10px 12px; font-size: 16px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
label.check {
  display: flex; align-items: center; gap: 9px; font-weight: 500; margin: 0;
}
label.check input { width: 20px; height: 20px; accent-color: var(--brand); }
label.check span { font-size: 15px; }
.add-cls { margin-top: 24px; }
.add-cls summary { cursor: pointer; }

/* ------------------------------------------------------------------------- */
/* the masters lists                                                          */
/* ------------------------------------------------------------------------- */
.slot {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.slot.off { background: #fbfcfd; opacity: .72; }
.slot.child { margin-left: 22px; }
/* A slot with no time on it is the work left to do, so it looks like work. */
.slot.needs-time { border-left: 5px solid var(--warn); }
.slot-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-bottom: 8px; }
.slot-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.slot-fields label {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--quiet);
  flex: 0 1 auto; display: flex; flex-direction: column; gap: 4px;
}
.slot-fields label.grow { flex: 1 1 220px; }
.slot-fields input[type=text], .slot-fields select { min-width: 130px; }
.slot-fields input[type=time], .slot-fields input[type=number] {
  padding: 9px 10px; font-size: 15px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); width: 110px;
}
.slot-fields input[type=number] { width: 90px; }
.slot-fields label.check {
  flex: 0 0 auto; align-self: end; flex-direction: row; align-items: center;
  padding-bottom: 8px;
}
.slot-acts { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; }
.slot-acts button { margin: 0; width: auto; padding: 9px 18px; font-size: 15px; }
.slot-acts button.link { padding: 0; }
.warn-tile { border-color: var(--warn); }
/* Why a slot says what it says - which teacher it was read off, and whether
   anybody has confirmed it. Small, because it is provenance, not the row. */
.slot-note { font-size: 13px; color: var(--quiet); flex: 1 1 100%; }

/* ---- the entered-classes table ---- */
/* A date pair reads as one control, so the two fields carry their own labels
   rather than a heading above the row. */
.from-to {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; color: var(--quiet); flex: 1 1 190px;
}
.from-to input[type=date] {
  flex: 1 1 auto; width: auto; padding: 11px 12px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--ink);
}
/* Numbers line up on the right so a column of them can be read down. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Six full names will not fit on a row, and letting them wrap made every row
   four times the height of its own text - which is the one thing a table is
   for. So the roll collapses to the first name and a count, and opens in place.
   A disclosure rather than a tooltip because half of this is read on a phone,
   where there is no hover. */
td.names details > summary { cursor: pointer; color: var(--brand); }
td.names details[open] > summary { color: var(--quiet); font-size: 13px; }
td.names details > span {
  display: block; white-space: normal; width: 240px; padding-top: 4px;
  font-size: 14px; line-height: 1.4;
}
/* Notes are usually a few words; a long one is trimmed rather than left to set
   the height of the row, with the whole of it on the cell for a hover. */
td.note { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
tbody tr.synced td { background: #fbfcfd; }
tfoot td {
  background: #fafbfc; font-weight: 600; border-top: 1px solid var(--line);
}
table form { display: inline; }
table button.link { margin: 0; }

/* Length is edited on the row, next to the state, because it is the other half
   of recording a class: what happened, and how long they came for. */
td.hours form { display: flex; justify-content: flex-end; }
td.hours input[type=number] {
  width: 72px; padding: 7px 8px; font-size: 15px; text-align: right;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* The sign-in screen is the one place with room to show the mark at a size
   worth showing it at, so the heading is the programme and the logo says whose
   it is. */
.welcome { text-align: center; margin: 24px 0 26px; }
.welcome img { width: 100%; max-width: 320px; height: auto; }
.welcome h1 {
  margin: 10px 0 0; font-size: 19px; font-weight: 600; color: var(--quiet);
  letter-spacing: .1em; text-transform: uppercase;
}

.filters .take { margin-top: 0; width: auto; flex: 0 0 auto; padding: 11px 16px;
  font-size: 15px; }
.filters button.quiet {
  background: #fff; color: var(--brand); border: 1px solid var(--line);
  font-weight: 600; cursor: pointer;
}
.filters button.quiet:hover { background: var(--brand-soft); }

/* ------------------------------------------------------------------------- */
/* on paper                                                                   */
/*                                                                            */
/* The other half of "export the day": a browser's Save as PDF, from a page    */
/* that has had the things you cannot press on paper taken off it. A PDF       */
/* library would have been a new dependency to produce a worse version of      */
/* this. */
@media print {
  @page { margin: 12mm; size: landscape; }
  body { background: #fff; font-size: 11px; }
  main { max-width: none; padding: 0; }
  header { border-bottom: 1px solid #999; }
  .bar { padding: 0 0 6px; }
  .mark img { height: 26px; }
  /* Everything that is a control rather than a fact. */
  nav, .filters, .pills, .day-nav, .add-cls, .cls-acts, td.acts, td.more,
  .flash, button, .step, form.cls-assign noscript { display: none !important; }
  /* The educator picker prints as the name it is set to, not as a dropdown. */
  td.pick select {
    border: 0; padding: 0; background: none; appearance: none;
    -webkit-appearance: none; font-size: 11px; color: var(--ink);
  }
  td.hours input[type=number] {
    border: 0; padding: 0; background: none; appearance: none;
    -moz-appearance: textfield; width: auto; text-align: right;
  }
  td.hours input::-webkit-outer-spin-button,
  td.hours input::-webkit-inner-spin-button { display: none; }
  /* A table that scrolls sideways on a screen has to lie flat on paper. */
  .scroll { overflow: visible; border: 0; }
  table { font-size: 10.5px; }
  th, td { padding: 4px 6px; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .tally { gap: 4px; }
  .tally-one { border: 1px solid #ccc; }
  a[href]:after { content: none !important; }
}

/* What a consolidated hour was spent on. Half the classes here are
   consolidated, so this sits on the row beside the subject rather than behind
   a disclosure - and it is amber until it is answered, because an hour that
   never says what it was is a hole in the term report. */
td.subject { white-space: nowrap; }
td.subject form { display: inline; }
td.subject select {
  width: auto; min-width: 104px; margin-left: 6px; padding: 5px 8px;
  font-size: 13px; border: 1px solid var(--line); border-radius: 6px;
}
td.subject select.unsaid {
  border-color: var(--warn); background: var(--warn-soft); color: var(--warn);
}
td.subject .sub {
  margin-left: 6px; font-size: 13px; color: var(--quiet);
}
td.subject .sub.warn { color: var(--warn); }


/* ---- The edit dialog on the day screen ----------------------------------
   Opened from the row rather than inside it. On a phone it is the whole
   screen; on anything wider it is a card in the middle with the page dimmed
   behind it, and the Save button never scrolls out of reach. */
dialog.edit {
  border: 0; padding: 0; border-radius: 14px; width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); color: var(--ink); background: var(--paper);
  box-shadow: 0 18px 48px rgba(36, 26, 18, .28);
}
dialog.edit::backdrop { background: rgba(36, 26, 18, .45); }
dialog.edit form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.edit-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--line);
}
.edit-head h2 { margin: 0; font-size: 20px; }
.edit-sub { margin: 2px 0 0; color: var(--quiet); font-size: 14px; }
.edit-head .close { font-size: 20px; line-height: 1; padding: 4px 8px; color: var(--quiet); }
.edit-body { overflow-y: auto; padding: 6px 20px 8px; }
.edit-group { border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
.edit-group legend {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--quiet); padding: 0; margin-bottom: 8px;
}
.edit-group[disabled] { opacity: .75; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: inline-block; padding: 9px 14px; border-radius: 999px; font-size: 15px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.seg label:hover span { border-color: var(--brand); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg .seg-present input:checked + span, .seg .seg-late input:checked + span {
  background: var(--ok); border-color: var(--ok); }
.seg .seg-absent_uninformed input:checked + span { background: var(--bad); border-color: var(--bad); }
.seg .seg-absent_informed input:checked + span { background: var(--warn); border-color: var(--warn); }
.edit-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-top: 14px; }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.edit-field { display: flex; flex-direction: column; gap: 4px; margin: 0;
  font-size: 14px; font-weight: 600; color: var(--quiet); }
.edit-field.wide { grid-column: 1 / -1; }
.edit-field select, .edit-field input, .edit-field textarea {
  font: inherit; font-weight: 400; color: var(--ink); width: 100%; }
.edit-field textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.stepper { display: inline-flex; align-items: stretch; gap: 0; }
.stepper input { width: 72px; text-align: center; border-radius: 0; margin: 0; }
.stepper button { min-width: 40px; padding: 0 10px; margin: 0; font-size: 18px; }
.stepper button:first-child { border-radius: 8px 0 0 8px; }
.stepper button:last-child { border-radius: 0 8px 8px 0; }
.toggle { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.toggle input { width: 18px; height: 18px; }
.edit-foot {
  display: flex; align-items: center; gap: 8px; padding: 12px 20px;
  border-top: 1px solid var(--line); background: var(--ground);
  border-radius: 0 0 14px 14px;
}
.edit-foot .spacer { flex: 1; }
.edit-foot .hint { margin: 0; }
.danger-link { color: var(--bad); }
button.open-edit { white-space: nowrap; }
@media (max-width: 560px) {
  dialog.edit { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; margin: 0; }
  dialog.edit form { max-height: 100vh; height: 100%; }
  .edit-body { flex: 1; }
  .edit-grid { grid-template-columns: 1fr; }
  .edit-foot { border-radius: 0; }
}

/* The page's own button rule is full width with a margin above - right for a
   form on a phone, wrong for every button in a dialog. */
dialog.edit button { width: auto; margin: 0; }
dialog.edit button.quiet {
  background: #fff; color: var(--brand); border: 1px solid var(--line);
  padding: 10px 18px; font-size: 15px;
}
dialog.edit button.quiet:hover { background: var(--brand-soft); }
dialog.edit .edit-foot button.go { padding: 10px 26px; font-size: 15px; }
dialog.edit .edit-head button.close {
  color: var(--quiet); text-decoration: none; font-size: 22px; padding: 2px 6px;
}
dialog.edit input[type=number], dialog.edit input[type=time] {
  padding: 10px 12px; font-size: 16px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink);
}
dialog.edit .stepper input { border-radius: 0; border-left: 0; border-right: 0; }
dialog.edit .stepper button.quiet { padding: 0 14px; font-size: 18px; }
dialog.edit .danger-link { color: var(--bad); margin: 0; font-size: 14px; }
dialog.edit .edit-body { overflow-x: hidden; }
table button.open-edit { width: auto; margin: 0; padding: 7px 14px; font-size: 14px; }
table button.open-edit.quiet { background: #fff; color: var(--brand); border: 1px solid var(--line); }
table button.open-edit.quiet:hover { background: var(--brand-soft); }

/* The dialog is written inside a table cell, and a modal dialog still inherits
   from wherever it sits in the page: the cell's nowrap and alignment would
   otherwise stretch every line of it sideways. */
dialog.edit { white-space: normal; text-align: left; font-size: 16px; }