/* The staff side. Same language as the parent pages, but plainer and roomier,
   because the people using it are updating a page between lessons. */

/* Narrower than the parent pages. A text field stretched across 1240px is
   hard to read back and makes a short answer look like a mistake. */
.main__inner { max-width: 980px; }

.sheet { margin: 0; }

.block {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.block__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.block--standalone { margin-top: 30px; }

.note {
  background: var(--blue-pale);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  color: var(--blue-ink);
  font-size: 13px;
}
.warn {
  background: var(--coral-pale);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--coral-ink);
  font-size: 13px;
}

/* ---------------------------------------------------------------- forms */

label { display: block; margin: 16px 0 0; font-size: 13px; font-weight: 500; }
label em { display: block; margin-top: 4px; color: var(--muted); font-style: normal; font-weight: 400; font-size: 12px; }

input[type=text], input[type=password], input[type=date], input:not([type]),
textarea, select {
  display: block;
  width: 100%;
  margin-top: 7px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--surface);
}
textarea { resize: vertical; }
input[type=file] { display: block; margin-top: 8px; font-size: 13px; font-weight: 400; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

button, .btn {
  display: inline-block;
  margin-top: 18px;
  background: var(--fill);
  color: var(--on-fill);
  border: 1px solid var(--fill);
  border-radius: var(--pill);
  padding: 11px 22px;
  font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
button:hover { background: var(--fill-hover); }
.ghost {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.ghost:hover { background: var(--bg); color: var(--ink); }
.ghost--danger { color: var(--coral); border-color: transparent; background: transparent; font-size: 12px; padding: 7px 12px; }
.ghost--danger:hover { background: var(--coral-pale); }

.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions button, .actions .btn { margin-top: 0; }

.weekjump { display: flex; align-items: flex-end; gap: 10px; }
.weekjump label, .weekjump .field { margin: 0; }
.weekjump button { margin-top: 0; }

/* -------------------------------------------------- spelling list rows */

.spellrow {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 20px 20px;
}
.spellrow legend {
  padding: 4px 12px;
  background: var(--fill); color: var(--on-fill);
  border-radius: var(--pill);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.spellrow .ghost { margin-top: 14px; }

/* ------------------------------------------------------------- routine */

.routine { display: grid; gap: 16px; margin-top: 16px; }
.routine > div {
  display: grid;
  grid-template-columns: 130px auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.routine b { font-size: 14px; font-weight: 500; }
.routine input { margin-top: 0; }

.days { display: flex; gap: 5px; }
.days__day input { position: absolute; opacity: 0; pointer-events: none; }
.days__day span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 40px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.days__day input:checked + span { background: var(--fill); color: var(--on-fill); font-weight: 600; }
.days__day input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ----------------------------------------------------------- row lists */

.rows { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
}
.rows b { display: block; font-size: 13px; font-weight: 500; }
.rows em { color: var(--muted); font-style: normal; font-size: 12px; }
.rows form { margin: 0; }
.rows button { margin-top: 0; }

.picker { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.picker a {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  text-decoration: none;
}
.picker a:hover { box-shadow: 0 1px 3px rgba(27,36,55,.06), 0 14px 36px rgba(27,36,55,.09); }
.picker b { font-size: 17px; font-weight: 600; }
.picker em { display: block; color: var(--muted); font-style: normal; font-size: 12px; }
.picker span.go { color: var(--muted); }

/* ------------------------------------------------------------- sign in */

.gate { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.gate__card {
  width: 100%; max-width: 410px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}
.gate__mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--fill);
  border-radius: 14px;
  color: var(--on-fill); font-size: 18px; font-weight: 600;
  margin-bottom: 18px;
}
.gate__card button { width: 100%; }

@media (max-width: 680px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .routine > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ------------------------------------------------------- checklist */

.checklist { display: grid; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.checklist li {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
}
.checklist__mark {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 600;
}
.checklist li.is-ok .checklist__mark    { background: var(--green-pale); color: var(--green); }
.checklist li.is-blank .checklist__mark { background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.checklist li > span:nth-child(2) { flex: 1; min-width: 0; }
.checklist b { display: block; font-weight: 500; }
.checklist em { color: var(--muted); font-style: normal; font-size: 12px; }
.checklist__state { flex: none; color: var(--muted); font-size: 11px; font-weight: 600; }
.checklist li.is-ok .checklist__state { color: var(--green); }

/* A checkbox that reads as a sentence rather than a stray box. */
.tickline { display: flex; align-items: center; gap: 10px; }
.tickline input { width: auto; margin: 0; }
.tickline span { font-weight: 400; font-size: 13px; }

select { cursor: pointer; }

/* Two buttons side by side on a row, without them stacking. */
.rowactions { display: flex; gap: 6px; flex: none; }
.rowactions form { margin: 0; }
.rows li.is-off { opacity: .55; }

/* Book rows: a small cover beside the title. */
.bookrow { display: flex; align-items: center; gap: 12px; }
.bookrow img, .bookrow__blank {
  width: 34px; height: 48px; flex: none;
  border-radius: 4px; object-fit: cover; background: var(--bg);
}
.coverswap { margin: 0; }
.coverswap label.ghost {
  cursor: pointer; display: inline-flex; align-items: center;
  border-radius: var(--pill); padding: 9px 16px; font-size: 13px; font-weight: 500;
}
.coverswap label.ghost:hover { border-color: var(--line-strong); color: var(--ink); }

/* A letter still pointing at the old website, so it stands out to fix. */
.rows li.is-flagged { background: var(--amber-pale); }
.rows li.is-flagged strong { color: var(--amber-ink); font-weight: 600; }

/* Design choice: three options as rows you can tap. */
.choice { display: grid; gap: 8px; }
.choice__opt {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg); border-radius: var(--radius-sm);
  padding: 12px 14px; cursor: pointer;
}
.choice__opt input { margin-top: 4px; }
.choice__opt b { display: block; font-size: 14px; font-weight: 600; }
.choice__opt em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.choice__opt:has(input:checked) { background: var(--blue-pale); }
.choice button { justify-self: start; }

/* ============================================================ date picker

   In the Lead Sheets style: a "Choose a date" field that opens a calendar
   inside the page, with quick picks above it. The global button styles
   (dark pills) are reset first, since every part of this is a button. */

.field { display: block; margin: 16px 0 0; font-size: 13px; font-weight: 500; }
.field em { display: block; margin-top: 4px; color: var(--muted); font-style: normal; font-weight: 400; font-size: 12px; }

.datepick { position: relative; margin-top: 7px; }
.datepick button {
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.datepick button:hover { background: none; }

.datepick__field {
  display: flex !important; align-items: center; gap: 10px;
  width: 100%;
  background: var(--surface) !important;
  border: 1.5px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 14px !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: var(--ink) !important; text-align: left;
}
.datepick__field svg { color: var(--ink-soft); flex: none; }
.datepick.is-empty .datepick__text { color: var(--muted); }
.datepick__field:hover, .datepick.is-open .datepick__field { border-color: var(--blue) !important; }
.datepick__field:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.datepick__panel {
  margin-top: 10px;
  background: var(--bg);
  border-radius: 16px;
  padding: 14px 14px 16px;
}
.datepick__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.datepick__quick button {
  padding: 8px 16px !important; border-radius: var(--pill) !important;
  background: var(--surface) !important; border: 1.5px solid var(--line-strong) !important;
  font-size: 14px !important; font-weight: 500 !important;
}
.datepick__quick button:hover { border-color: var(--ink-soft) !important; }

.datepick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.datepick__month { font-size: 15px; font-weight: 600; }
.datepick__step {
  width: 36px; height: 36px; display: grid !important; place-items: center;
  border-radius: 50% !important; color: var(--ink-soft) !important;
}
.datepick__step:hover { background: var(--surface) !important; color: var(--ink) !important; }

.datepick__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; touch-action: pan-y; }
.datepick__wd { text-align: center; color: var(--muted); font-size: 11.5px; font-weight: 500; padding: 4px 0 6px; }
.datepick__day {
  height: 40px; border-radius: 10px !important;
  font-size: 14px !important; font-weight: 500 !important;
  border: 1.5px solid transparent !important;
}
.datepick__day:hover { background: var(--surface) !important; }
.datepick__day.is-past { color: var(--muted) !important; opacity: .6; }
.datepick__day.is-weekend:not(.is-picked) { color: var(--muted) !important; }
.datepick__day.is-today { border-color: var(--blue) !important; color: var(--blue) !important; font-weight: 600 !important; opacity: 1; }
.datepick__day.is-picked {
  background: var(--blue) !important; border-color: var(--blue) !important;
  color: #fff !important; font-weight: 600 !important; opacity: 1;
}
.datepick__need { margin-top: 10px; color: var(--coral); font-size: 13px; font-weight: 500; }

/* The "Editing another week" picker floats over the page rather than
   pushing the heading about. */
.datepick--pop .datepick__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: 330px; max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(27,36,55,.06), 0 18px 40px rgba(27,36,55,.14);
}
.datepick--pop .datepick__day:hover, .datepick--pop .datepick__step:hover { background: var(--bg) !important; }
.weekjump .datepick { min-width: 240px; }

@media (max-width: 520px) {
  /* The three quick picks on one line on a phone. */
  .datepick__quick { flex-wrap: nowrap; gap: 6px; }
  .datepick__quick button { flex: 1; padding: 8px 6px !important; font-size: 13.5px !important; white-space: nowrap; }
}

/* ------------------------------------------------------------ date ranges */

.datepick__hint { margin: 0 2px 10px; color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.datepick__day.is-in { background: var(--blue-pale) !important; border-radius: 6px !important; color: var(--ink) !important; opacity: 1; }
.datepick__day.is-start:not(.is-end) { border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; }
.datepick__day.is-end:not(.is-start) { border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; }
.datepick__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.datepick__link { color: var(--blue) !important; font-size: 14px !important; font-weight: 500 !important; padding: 8px 4px !important; }
.datepick__done {
  background: var(--fill) !important; color: var(--on-fill) !important;
  border-radius: var(--pill) !important; padding: 9px 20px !important;
  font-size: 14px !important; font-weight: 500 !important;
}

/* --------------------------------------------------------------- term dates */

.termcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.termcard {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 18px; border-top: 4px solid;
}
.termcard h3 { font-size: 16px; font-weight: 600; }
.termcard .field:first-of-type { margin-top: 10px; }
.termcard--autumn { border-top-color: var(--coral); }
.termcard--spring { border-top-color: var(--green); }
.termcard--summer { border-top-color: var(--amber); }
@media (max-width: 1100px) { .termcards { grid-template-columns: minmax(0, 1fr); } }

.bankhols { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.bankhols button { margin-top: 0; display: inline-flex; align-items: center; gap: 8px; }
.terms__foot { margin: 22px 4px 0; }
.terms__foot a { color: var(--blue); }
.block .muted a { color: var(--blue); }

/* ------------------------------------------------- rows that can be edited */

.rows li.has-edit { flex-wrap: wrap; }
.rows li[id] { scroll-margin-top: 20px; }
.rowedit {
  flex-basis: 100%;
  margin: 6px 0 4px !important;
  padding: 4px 16px 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.rowedit .actions { margin-top: 14px; }
.rowedit .actions button { margin-top: 0; }
a.ghost {
  display: inline-flex; align-items: center;
  border-radius: var(--pill);
  padding: 9px 16px;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.rowactions .ghost:not(.ghost--danger) { padding: 9px 16px; font-size: 13px; }
a.ghost[aria-expanded="true"] { background: var(--blue-pale); color: var(--ink); border-color: transparent; }

/* Teaching team rows */
.teamphoto, .bookrow .teamphoto {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%; object-fit: cover;
}
.teamphoto--blank {
  display: grid; place-items: center;
  background: var(--surface); color: var(--muted);
  font-weight: 600; font-size: 16px;
}
.teamadd { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.teamadd h3 { font-size: 14px; font-weight: 600; }

/* A message holding a password stays until it is closed. */
.flashes--keep p::after {
  content: "Tap to close";
  display: block; margin-top: 6px;
  font-size: 12px; font-weight: 400; opacity: .7;
}

/* Class tick boxes: wide enough for a class name, wrapping on a phone. */
.days--wide { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.days--wide .days__day span { width: auto; padding: 0 16px; font-size: 13px; }

/* ------------------------------------------------------------ dinner menu */

.menuweeks { display: grid; gap: 10px; margin-top: 18px; }
.menuweek { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.menuweek summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
.menuweek summary::-webkit-details-marker { display: none; }
.menuweek summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 18px; }
.menuweek[open] summary::after { content: "–"; }
.menuweek summary b { font-size: 14px; font-weight: 600; }
.menuweek__tag { padding: 3px 10px; border-radius: var(--pill); background: var(--bg); font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.menuweek__tag--now { background: var(--amber-pale); color: var(--amber-ink); }
.menuweek__days {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  padding: 0 16px 16px;
}
.menuweek__days label { margin-top: 0; }
.menuweek__days textarea { font-size: 13px; line-height: 1.45; min-height: 158px; field-sizing: content; }
@media (max-width: 1100px) { .menuweek__days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .menuweek__days { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------- this term's learning */

.learnfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; margin-top: 6px; }
.learnfield__head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.learnfield__dot { width: 4px; height: 16px; border-radius: 2px; flex: none; }
.learnfield__dot--0 { background: var(--blue); } .learnfield__dot--1 { background: var(--coral); }
.learnfield__dot--2 { background: var(--green); } .learnfield__dot--3 { background: var(--amber); }
.learnfield__dot--4 { background: var(--purple); }
.learnfield textarea { font-size: 13.5px; line-height: 1.5; min-height: 92px; field-sizing: content; }
@media (max-width: 900px) { .learnfields { grid-template-columns: minmax(0, 1fr); } }

/* Learning map preview in Class setup */
.mappreview { display: flex; gap: 18px; align-items: flex-start; margin-top: 16px; padding: 14px; background: var(--bg); border-radius: var(--radius-sm); }
.mappreview__frame {
  position: relative; flex: none; display: block;
  width: 280px; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
}
.mappreview__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mappreview__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: transparent; }
.mappreview__pdf { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; color: var(--muted); }
.mappreview__pdf svg { width: 28px; height: 28px; color: var(--blue); margin-bottom: 4px; }
.mappreview__pdf b { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.mappreview__pdf em { font-style: normal; font-size: 12px; }
.mappreview__broken { display: none; position: absolute; inset: 0; padding: 18px; place-items: center; text-align: center; color: var(--muted); font-size: 12.5px; }
.mappreview__frame.is-broken .mappreview__broken { display: grid; }
.mappreview__info { display: grid; gap: 4px; align-content: start; }
.mappreview__info b { font-size: 14px; font-weight: 600; }
.mappreview__info em { color: var(--green-ink); font-style: normal; font-size: 12.5px; font-weight: 500; }
.mappreview__info .actions { margin-top: 10px; }
.mappreview__info .actions button { margin-top: 0; }
.mappreview__none { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--amber-pale); color: var(--amber-ink); font-size: 13px; font-weight: 500; }
.checklist em a { color: var(--blue); font-weight: 500; }
@media (max-width: 620px) {
  .mappreview { flex-direction: column; }
  .mappreview__frame { width: 100%; }
  /* Phone browsers mostly cannot draw a PDF in a frame; the tile says it is there. */
  .mappreview__frame iframe { display: none; }
}

/* Jump links at the top of This week, Class setup and Whole school. They
   stay at the top of the window while scrolling (staff.js lights up the
   section on screen and leaves room above each heading). */
.jumpto {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px -14px 22px; padding: 10px 14px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 0 0 16px 16px;
  transition: box-shadow .2s ease;
}
.jumpto.is-stuck { box-shadow: 0 1px 0 var(--line), 0 12px 24px -12px rgba(27, 36, 55, .16); }
.jumpto a {
  padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.jumpto a:hover { border-color: var(--blue); color: var(--blue); }
.jumpto a.is-on, .jumpto a.is-on:hover { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.block[id] { scroll-margin-top: 0; }
/* On a phone the links sit under the top bar (menu, page, New update). */
@media (max-width: 900px) {
  .jumpto { top: calc(env(safe-area-inset-top, 0px) + 64px); }
}
@media (max-width: 620px) {
  .jumpto { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 10px 16px; border-radius: 0; scrollbar-width: none; }
  .jumpto::-webkit-scrollbar { display: none; }
}

/* Book cover picker: tap the right edition */
.coverpick { margin: 4px 0 16px; }
.coverpick__status { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }
.coverpick__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.coverpick__grid:empty { display: none; }
.coverpick__opt {
  position: relative; width: 74px; height: 108px; padding: 0; margin: 0;
  border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: var(--bg); color: var(--muted); cursor: pointer; box-shadow: none;
  transition: border-color .15s, transform .15s;
}
.coverpick__opt:hover { background: var(--bg); }
.coverpick__opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coverpick__opt:hover { transform: translateY(-2px); }
.coverpick__opt.is-picked { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }
.coverpick__opt.is-picked::after {
  content: "\2713"; position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #fff; font-size: 12px; font-weight: 700;
}
.coverpick__opt--none {
  display: grid; place-items: center; padding: 8px; text-align: center;
  border: 2px dashed var(--line-strong);
  font-size: 12px; font-weight: 500; line-height: 1.3;
}
.coverpick__opt--none.is-picked::after { display: none; }
.coverpick__opt--none.is-picked { color: var(--blue); border-style: solid; }
.rows li .rowedit .coverpick { margin-top: 2px; }

/* Upload boxes (staff.js turns every file input into one). Without
   scripts, the plain button at least matches the other buttons. */
input[type=file]::file-selector-button {
  margin-right: 12px; padding: 8px 16px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.filedrop {
  position: relative; display: flex; margin-top: 8px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); transition: border-color .15s, background .15s;
}
.filedrop input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; font-size: 0; z-index: 1;
}
.filedrop__face { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 0; width: 100%; }
.filedrop__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--surface); color: var(--blue); overflow: hidden;
}
.filedrop__icon img { width: 100%; height: 100%; object-fit: cover; }
.filedrop__text { display: grid; gap: 2px; min-width: 0; }
.filedrop__text b { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filedrop__text em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--muted); }
.filedrop:hover, .filedrop.is-over { border-color: var(--blue); background: var(--blue-pale); }
.filedrop:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }
.filedrop.has-file { border-style: solid; border-color: var(--green, #2E9E6A); background: var(--surface); }
.filedrop.has-file .filedrop__icon { background: var(--bg); color: var(--green-ink, #1F7A50); }
.filedrop.has-file .filedrop__face { width: auto; flex: 1; }
/* Remove the chosen file: above the invisible input, so it takes the tap. */
.filedrop__clear {
  position: relative; z-index: 2; flex: none; align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 14px 0 0; padding: 7px 13px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.filedrop__clear:hover, .filedrop__clear:focus-visible { color: var(--coral); border-color: var(--coral); background: var(--coral-pale); }
.filedrop__clear[hidden] { display: none; }
/* Several photos chosen: a row of them under the box. */
.filedrop__thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.filedrop__thumbs[hidden] { display: none; }
.filedrop__thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.filedrop.is-busy { opacity: .8; }

/* Start of term check on Class setup */
.termcheck details > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.termcheck details > summary::-webkit-details-marker { display: none; }
.termcheck__title { display: grid; gap: 2px; }
.termcheck__title h2 { margin: 0; }
.termcheck__count { display: flex; align-items: center; gap: 10px; flex: none; }
.termcheck__count b { font-size: 13px; font-weight: 600; }
.termcheck details[open] > summary + p { margin-top: 14px; }
.termcheck .ring {
  --p: 0; width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--line) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.termcheck .ring--done { background: var(--green); }
.termcheck.is-done { padding-top: 18px; padding-bottom: 18px; }
.checklist li.is-empty em { color: var(--amber-ink); }
.checklist li.is-empty em a { color: var(--blue); }
.checklist form { margin: 0; flex: none; }
.tickbtn {
  margin: 0; padding: 8px 14px; font-size: 12.5px; font-weight: 500;
  background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line);
}
.tickbtn:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.tickbtn.is-on { background: var(--green-pale); color: var(--green-ink); border-color: transparent; }
.tickbtn.is-on:hover { background: var(--green-pale); }

/* Nudge on This week when the term check is outstanding */
.termnudge {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--amber-pale); color: var(--amber-ink); text-decoration: none;
}
.termnudge b { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.termnudge span { font-size: 13px; }
.termnudge__go { margin-left: auto; font-size: 16px; }
@media (max-width: 620px) {
  .termnudge { flex-wrap: wrap; gap: 4px 10px; }
  .termnudge__go { display: none; }
  .checklist li { flex-wrap: wrap; }
  .checklist li form { margin-left: 40px; }
}

/* Past dates folded under the upcoming ones */
.rows:empty { display: none; }
.nodates { margin-top: 18px; }
.pastdates { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pastdates > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--pill); background: var(--bg);
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.pastdates > summary::-webkit-details-marker { display: none; }
.pastdates > summary .chev { flex: none; transition: transform .15s; }
.pastdates[open] > summary .chev { transform: rotate(90deg); }
.pastdates > summary span {
  min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 600;
}
.pastdates > p { margin: 10px 0 0; }
.pastdates .rows li { opacity: .8; }
.pastdates .rows li:hover, .pastdates .rows li:focus-within { opacity: 1; }

/* A new or reset password: a box in the middle of the screen that stays
   until Done is pressed. */
.pwbox {
  width: min(440px, calc(100vw - 32px)); padding: 26px 26px 22px; border: 0;
  border-radius: 20px; background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
}
.pwbox::backdrop { background: rgba(15, 20, 30, .45); }
.pwbox h2 { margin: 0 0 16px; font-size: 19px; font-weight: 600; }
.pwbox__label { margin: 12px 0 4px; color: var(--muted); font-size: 13px; font-weight: 500; }
.pwbox__value {
  margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--bg);
  font-size: 17px; font-weight: 500; user-select: all; -webkit-user-select: all; word-break: break-all;
}
.pwbox__value--pw { font-size: 22px; font-weight: 600; letter-spacing: .02em; color: var(--blue-ink, var(--ink)); }
.pwbox__note { margin: 14px 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.pwbox__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.pwbox__actions button { margin: 0; }

/* The Skoolday app icon in the team area and on the sign in page. */
.rail__logo { width: 40px; height: 40px; flex: none; border-radius: 11px; box-shadow: 0 2px 6px rgba(31, 100, 224, .25); }
/* Top of the team menu: "skoolday" (the wordmark), the school's name under it.
   The school's name can run to two lines, so the words hang from the top of
   the icon (the tall letters level with its top edge) instead of being
   centred on it, which pushed "skoolday" up above the icon. */
.rail .rail__brand { align-items: flex-start; }
.rail__name--sd { line-height: 0; color: var(--ink); margin-top: -1px; }
.rail__name--sd svg { display: block; }
.rail .rail__brand .rail__sub { margin-top: 5px; font-size: 12px; line-height: 1.35; }
.gate__logo { display: block; width: 56px; height: 56px; border-radius: 15px; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(31, 100, 224, .25); }

/* ------------------------------------------------------------- updates */

input[type=time] {
  display: block; width: 100%; margin-top: 7px;
  background: var(--bg); border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 12px 14px; color: inherit; font: inherit; font-size: 14px; font-weight: 400;
}
.upform { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.uptarget { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.uptarget b { color: var(--ink); font-weight: 600; }
.upopts { display: grid; gap: 4px; margin-top: 18px; }
.upopts .tickline { align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); }
.upopts .tickline:has(input:checked) { background: var(--blue-pale); }
.upopts .tickline input { margin-top: 3px; }
.upopts .tickline b { font-weight: 600; }
.upopts .tickline em { display: block; margin-top: 2px; }
.upwhen { margin: 0 12px 6px 36px; }
.upwhen label { margin-top: 6px; }

/* The notification as a phone will show it. */
.phonepreview { position: sticky; top: 20px; }
.phonepreview__label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 6px 2px 8px; }
.phonepreview__screen {
  padding: 18px 12px 26px; border-radius: 26px;
  background: linear-gradient(160deg, #5B7FD6, #8E6FD8 60%, #D58DB4);
}
.phonepreview__card {
  display: flex; gap: 10px; padding: 11px 12px; border-radius: 18px;
  background: rgba(250, 250, 252, .86); color: #1B1D22;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 6px 20px rgba(20, 20, 40, .18);
  transition: opacity .2s ease;
}
.phonepreview__card img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.phonepreview__text { min-width: 0; flex: 1; }
.phonepreview__top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #6B6F78; }
.phonepreview__top b { font-weight: 600; color: #3A3D44; }
.phonepreview__title { margin-top: 1px; font-size: 13.5px; font-weight: 600; }
.phonepreview__body { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.phonepreview.is-off .phonepreview__card { opacity: .4; }
.phonepreview__note { margin-top: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.phonepreview__note:empty { display: none; }

/* The list of updates sent. */
/* One line each, opened with a tap: the whole message, what happened to
   its notification, and Remove. */
.uprows { gap: 6px; }
.uprows li { display: block; padding: 0; }
.uprows li.is-urgent { background: var(--coral-pale); }
.uprow { min-width: 0; }
.uprow__sum {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 16px;
  cursor: pointer; list-style: none;
}
.uprow__sum::-webkit-details-marker { display: none; }
.uprow__head { flex: 1; min-width: 0; display: grid; gap: 2px; }
.uprow__title {
  display: block; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uprow__urgent { color: var(--coral); }
.uprow__meta { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.uprow__go { flex: none; color: var(--muted); transition: transform .15s; }
.uprow[open] .uprow__go { transform: rotate(180deg); }
.uprow[open] .uprow__title { white-space: normal; }
.uprow__more { padding: 0 16px 14px; display: grid; gap: 8px; justify-items: start; }
.uprow__more form button { margin-top: 0; }
.uprow__body { font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }

/* Team accounts: who parents see on an account's updates. */
.shownas { margin-top: 4px; }
.shownas__own .pair { margin-top: 0; }
.shownas__face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; }
.uprow__status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.upst { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--pill); font-size: 11.5px; font-weight: 500; background: var(--bg); color: var(--ink-soft); }
.upst--ok { background: var(--green-pale); color: #187A50; }
.upst--wait { background: var(--amber-pale); color: #8A5C00; }
.upst--seen { background: var(--blue-pale); color: var(--blue-ink); }

/* Diary rows: how many families gave a post a heart. */
.hearts { display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px; }
.hearts.has-hearts { color: #D6457F; }
.hearts.has-hearts .icon { fill: currentColor; }

@media (max-width: 860px) {
  .upform { grid-template-columns: 1fr; }
  .phonepreview { position: static; max-width: 340px; }
}

/* ---------------------------------------------------------- owner area */

.switches { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.switchrow {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg);
}
.switchrow__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.switchrow__text b { font-size: 14px; font-weight: 600; }
.switchrow__text em { color: var(--muted); font-style: normal; font-size: 12.5px; line-height: 1.45; }
.switchrow__off { color: var(--ink-soft) !important; }
.switchrow.is-off .switchrow__off { color: var(--coral) !important; }
.switchrow form { margin: 0; flex: none; }
.switchrow.is-coming { opacity: .7; }
.switchrow--inline { margin: 12px 0 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg); }
/* A small switch, with On or Off written beside it. */
.switch {
  margin: 0; padding: 4px 0; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; color: var(--muted);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.switch:hover { background: none; color: var(--ink); }
.switch__word { min-width: 22px; text-align: right; }
.switch__track {
  position: relative; display: block; width: 38px; height: 22px; border-radius: var(--pill);
  background: var(--line-strong); transition: background .15s ease;
}
.switch__knob {
  position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(27, 36, 55, .25); transition: left .15s ease;
}
.switch.is-on { color: var(--green); }
.switch.is-on .switch__track { background: var(--green); }
.switch.is-on .switch__knob { left: 19px; }
.switch:focus-visible { outline: none; }
.switch:focus-visible .switch__track { box-shadow: 0 0 0 3px var(--blue-pale), 0 0 0 4px var(--blue); }

.usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.usage__tile { padding: 16px; border-radius: var(--radius-sm); background: var(--bg); display: grid; gap: 2px; }
.usage__tile b { font-size: 28px; font-weight: 600; line-height: 1.1; }
.usage__tile b small { font-size: 14px; font-weight: 500; color: var(--muted); }
.usage__tile span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.usage__classes { margin-top: 14px; color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.usage__classes b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .usage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .switchrow { align-items: flex-start; }
}

/* Forgotten password: who to ask, and the setup code for support. */
.gate__help { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); }
.gate__help a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.gate__help a:hover { color: var(--blue); }
.gate__ways { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.gate__ways li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; }
.gate__ways b { font-weight: 600; }
.gate__ways span { color: var(--ink-soft); line-height: 1.45; }
.gate__code { margin-top: 16px; }
.gate__code summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.gate__code summary:hover { color: var(--blue); }
.gate__code[open] summary { margin-bottom: 6px; }

/* Forgot password?: a small prompt that opens under the link. */
.gate__forgot { position: relative; margin-top: 14px; text-align: center; }
.gate__forgot summary {
  display: inline-block; list-style: none; cursor: pointer;
  color: var(--ink-soft); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.gate__forgot summary::-webkit-details-marker { display: none; }
.gate__forgot summary:hover { color: var(--blue); }
.gate__tip {
  position: relative; margin: 12px auto 0; max-width: 300px; padding: 11px 14px;
  border-radius: var(--radius-sm); background: var(--fill); color: var(--on-fill);
  font-size: 13px; line-height: 1.45; text-align: center;
}
.gate__tip::before {
  content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top: 0; border-bottom-color: var(--fill);
}
.gate__forgot[open] .gate__tip { animation: tip-in .18s ease; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-4px); } }

/* Teaching teams on Whole school: one group per class. */
.teamclass { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.teamclass:first-of-type { border-top: 0; padding-top: 4px; }
.teamclass__name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.teamclass .rows { margin-top: 10px; }
.teamclass .teamadd { margin-top: 12px; padding-top: 0; border-top: 0; }
.teamadd summary { cursor: pointer; display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue); }
.teamadd[open] summary { margin-bottom: 4px; }

/* ------------------------------------------------------------------ home
   A class's Home, in the same language as the class page: white cards, a
   pale icon square, a small grey label and one strong line. A job that is
   done gets a green tick; one still to do has an empty circle. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dash { margin: 4px 0 26px; }
.dash__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.dash__head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.dash__sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.dash__progress { flex: none; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.dash__bar { display: flex; gap: 3px; }
.dash__bar i { width: 18px; height: 6px; border-radius: 3px; background: var(--line-strong); }
.dash__bar i.is-on { background: var(--green); }
.dash__progress.is-done { color: var(--green-ink); }

.todos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.todo {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; color: inherit; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
.todo:hover { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(27,36,55,.06), 0 14px 36px rgba(27,36,55,.09); }
.todo:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.todo__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.todo__icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-pale); color: var(--blue-ink);
}
.todo__mark {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--line-strong); color: #fff;
}
.todo.is-done .todo__mark { background: var(--green); box-shadow: none; }
.todo.is-later .todo__mark { visibility: hidden; }
.todo__label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.todo__value {
  font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.todo:not(.is-done) .todo__value { color: var(--muted); font-weight: 500; }
.todo__note { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: 12.5px; }
.todo__note .icon { color: var(--muted); }
.todo__go {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--blue);
}
.todo.is-done .todo__go { color: var(--muted); }

.dashgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
/* Home on a computer: the full width, three cards across, like a
   dashboard; the forms elsewhere stay narrower so lines are easy to read. */
.main__inner--wide { max-width: 1400px; }
.dashgrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.dashgrid--three .dashcard { display: flex; flex-direction: column; }
.dashgrid--three .dashcard__foot { margin-top: auto; padding-top: 20px; }
.sentlist__icon--photo { overflow: hidden; background: var(--bg); }
.sentlist__icon--photo img { width: 100%; height: 100%; object-fit: cover; }
.dashcard { margin: 0; }
.dashcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dashcard__head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.dashcard__head > span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.dashcard__sub {
  margin: 22px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.dashcard__empty { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.dashcard__more { margin: 10px 0 0; font-size: 13px; }
.dashcard__more a { color: var(--blue); font-weight: 500; text-decoration: none; }
.dashcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.dashcard__foot .btn { margin-top: 0; padding: 9px 18px; font-size: 13.5px; }
.dashcard__note { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.dashcard__lead { margin: 18px 0 0; }
.dashcard__lead b { display: block; font-size: 14px; font-weight: 600; }
.dashcard__lead span { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; }

/* One line per thing, with a hairline between, like the lists on the class page. */
.sentlist, .termleft, .comingup { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.sentlist li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sentlist li:last-child, .termleft li:last-child a, .comingup li:last-child { border-bottom: 0; }
.sentlist__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--blue-pale); color: var(--blue-ink);
}
.sentlist__icon.is-urgent { background: var(--coral-pale); color: var(--coral-ink); }
.sentlist__icon.is-wait { background: var(--amber-pale); color: var(--amber-ink); }
.sentlist__text { min-width: 0; flex: 1; }
.sentlist__text b {
  display: block; font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sentlist__text em { display: block; margin-top: 1px; color: var(--muted); font-style: normal; font-size: 12px; }
.sentlist__count { flex: none; text-align: right; color: var(--muted); font-size: 11.5px; line-height: 1.2; }
.sentlist__count b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }

/* Where the term is: a block a week, like the bar on the class page. */
.minibar { display: flex; gap: 4px; margin: 16px 0 2px; }
.minibar__wk { flex: 1; height: 8px; border-radius: 4px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.minibar__wk.is-done { background: var(--blue); box-shadow: none; }
.minibar__wk.is-current { background: var(--blue); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue); }
.minibar__wk.is-half-term { background: repeating-linear-gradient(135deg, var(--line) 0 3px, transparent 3px 6px); box-shadow: none; }

.termleft a {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.termleft a:hover b { color: var(--blue); }
.termleft__ring { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.termleft__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--blue-pale); color: var(--blue-ink);
}
.termleft__text { flex: 1; min-width: 0; }
.termleft b { display: block; font-size: 13.5px; font-weight: 500; }
.termleft em { display: block; margin-top: 1px; color: var(--muted); font-style: normal; font-size: 12px; }
.termleft .icon:last-child { flex: none; color: var(--muted); }

.comingup li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.comingup__when { flex: none; width: 92px; font-weight: 600; }
.comingup em { color: var(--muted); font-style: normal; font-size: 12px; margin-left: 4px; }

/* The class chooser: each class's week at a glance. */
.picker__week { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; vertical-align: 1px; }
.picker__dot { width: 14px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.picker__dot.is-done { background: var(--green); }

@media (max-width: 1280px) {
  /* Two across: what went home, and the term; the diary under them. */
  .dashgrid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashgrid--three > :nth-child(2) { order: 3; grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .todos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashgrid, .dashgrid--three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .dash__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dash__head h2 { font-size: 18px; }
  .todos { gap: 10px; }
  .todo { padding: 16px; }
  .todo__icon { width: 38px; height: 38px; }
  .todo__value { font-size: 15px; }
  .comingup__when { width: 80px; }
}

/* A section folded away until opened, such as Recent changes. */
.foldblock > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.foldblock > summary::-webkit-details-marker { display: none; }
.foldblock > summary h2 { margin: 0; }
.foldblock__count { color: var(--muted); font-size: 13px; font-weight: 500; background: var(--bg); border-radius: var(--pill); padding: 2px 9px; }
.foldblock > summary .icon { margin-left: auto; color: var(--muted); transition: transform .15s ease; }
.foldblock[open] > summary .icon { transform: rotate(180deg); }
.foldblock[open] > summary { margin-bottom: 4px; }

/* The head's Overview: a card per class with its week, side by side. */
.classcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.classcard {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; color: inherit; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
.classcard:hover { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(27,36,55,.06), 0 14px 36px rgba(27,36,55,.09); }
.classcard__top { display: flex; align-items: center; gap: 12px; }
.classcard__top > .icon { margin-left: auto; color: var(--muted); }
.classcard__name { display: grid; gap: 1px; min-width: 0; }
.classcard__name b { font-size: 16px; font-weight: 600; }
.classcard__name em { font-style: normal; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.classcard__name em.is-done { color: var(--green-ink); }
.classcard__jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.classcard__jobs li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.classcard__jobs li.is-done { color: var(--ink); }
.classcard__mark {
  flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--line-strong); color: #fff;
}
.classcard__jobs li.is-done .classcard__mark { background: var(--green); box-shadow: none; }
.classcard__jobs li.is-later .classcard__mark { box-shadow: inset 0 0 0 1.5px var(--line); }
.classcard__foot { display: grid; gap: 4px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.classcard__foot span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }

/* Phones with notifications on, a bar per class. */
.phonebars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.phonebars li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 32px; align-items: center; gap: 10px; font-size: 13.5px; }
.phonebars__bar { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.phonebars__bar i { display: block; height: 100%; border-radius: 4px; background: var(--blue); min-width: 0; }
.phonebars b { text-align: right; font-weight: 600; }

@media (max-width: 1280px) { .classcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .classcards { grid-template-columns: minmax(0, 1fr); } }

/* Dashboards: every heading and row goes to where it is changed. */
.dashcard__head h2 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.dashcard__head h2 a .icon { color: var(--muted); transition: transform .15s ease; }
.dashcard__head h2 a:hover { color: var(--blue); }
.dashcard__head h2 a:hover .icon { color: var(--blue); transform: translateX(2px); }
.sentlist__row { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.sentlist__row:hover .sentlist__text b { color: var(--blue); }
.comingup li { padding: 0; }
.comingup__row { display: flex; gap: 12px; flex: 1; padding: 11px 0; color: inherit; text-decoration: none; }
.comingup__row:hover > span:last-child { color: var(--blue); }
/* The row a dashboard link points at lights up for a moment. */
.rows li[id] { scroll-margin-top: 90px; }
.rows li:target { animation: pz-target 2.4s ease; }
@keyframes pz-target { 0%, 60% { box-shadow: 0 0 0 2px var(--blue); } 100% { box-shadow: 0 0 0 2px transparent; } }

/* -------------------------------------------------------- class diary
   The team's diary page: every post as a small picture and its headline,
   opening to change it. Photos in a post as tiles; tapping one marks it to
   be taken out when the post is saved. */
.diarymonth__head { margin: 6px 0 10px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.diarymonth__head:not(:first-child) { margin-top: 26px; }
.drows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.drow { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.drow[open] { border-color: var(--line-strong, var(--line)); box-shadow: 0 6px 20px rgba(27, 36, 55, .06); }
.drow__sum {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px;
  cursor: pointer; list-style: none;
}
.drow__sum::-webkit-details-marker { display: none; }
.drow__thumb {
  width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: var(--bg); color: var(--muted);
}
.drow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drow__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.drow__text b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow__text em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.drow__go { color: var(--muted); transition: transform .15s; }
.drow[open] .drow__go { transform: rotate(180deg); }
.drow__edit, .drow__remove { padding: 0 16px; }
.drow__edit { border-top: 1px solid var(--line); padding-top: 2px; }
.drow__remove { padding-bottom: 12px; text-align: right; }
.drow__remove button { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }
.drow__actions button { margin-top: 16px; }
.drow__label { margin: 16px 0 8px; font-size: 13px; font-weight: 500; }
.drow__label span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.dphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.dphoto { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg); cursor: pointer; }
.dphoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s, filter .15s; }
.dphoto input { position: absolute; opacity: 0; pointer-events: none; }
.dphoto__cover {
  position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: var(--pill);
  background: rgba(27, 36, 55, .72); color: #fff; font-size: 11px; font-weight: 600;
}
.dphoto__out {
  position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 4px;
  color: #fff; font-size: 12px; font-weight: 600; background: rgba(214, 64, 40, .55);
}
.dphoto input:checked ~ img { filter: grayscale(1); opacity: .5; }
.dphoto input:checked ~ .dphoto__out { display: grid; }
.dphoto input:focus-visible ~ img { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (max-width: 640px) {
  .drow__edit, .drow__remove { padding-left: 12px; padding-right: 12px; }
  .dphotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Earlier letters, folded under the newest six. */
.olderfold { margin-top: 10px; }
.olderfold > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--pill); background: var(--bg);
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.olderfold > summary::-webkit-details-marker { display: none; }
.olderfold > summary .icon { color: var(--muted); transition: transform .15s ease; }
.olderfold[open] > summary .icon { transform: rotate(180deg); }
.olderfold > .rows { margin-top: 10px; }

/* Messages in the menu: how many from parents are unread. */
.rail__count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--fill); color: var(--on-fill);
  font-style: normal; font-size: 11.5px; font-weight: 600;
}

/* ------------------------------------------------- team sign in (Skoolday)

   The greeting on the off-white side, the form and the stacked Skoolday
   logo on the white side. Side by side on a computer; on a tablet or a
   phone the greeting is on top and the form comes up over it on a white
   panel, with the logo under the Sign in button. Always light: the page
   sets its own colours whatever the device's night setting. */
.signin {
  --si-ink: #1A1F36; --si-soft: #5A6178; --si-blue: #2F5FD9; --si-blue-2: #2852C2;
  --si-off: #F9F9F9; --si-line: #E3E7EF; --si-box: #F7F8FB;
  color-scheme: light;
  display: flex; min-height: 100vh; min-height: 100dvh;
  background: #FFFFFF; color: var(--si-ink);
  font-family: Poppins, system-ui, -apple-system, sans-serif;
}
.signin__hello {
  flex: 0 0 50%; position: relative;
  display: flex; flex-direction: column;
  background: var(--si-off);
  padding: 56px 24px 52px clamp(48px, 8.75vw, 112px);
}
.signin__greet { margin: auto 0; }
.signin__date { font-size: 13px; font-weight: 500; letter-spacing: 1.6px; color: var(--si-soft); }
.signin__hi {
  margin: 18px 0 26px;
  /* Half the screen each side, so the greeting is sized to the panel: the
     longest, "Good afternoon", is about 7.5 times its size wide and stays
     on one line from a small laptop up; 92px at most on a big screen. */
  font-size: clamp(48px, 5vw, 92px); font-weight: 600; line-height: 1; letter-spacing: -.038em;
  color: var(--si-ink);
}
/* The quote of the day sits straight under the greeting. */
.signin__quote { margin: 0; max-width: 520px; color: var(--si-soft); }
.signin__quote blockquote { margin: 0; font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.signin__quote figcaption { margin-top: 8px; font-size: 14px; font-weight: 500; }

.signin__side {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 40px 68px;
  background: #FFFFFF;
}
.signin__logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 44px; }
.signin__logo .sdbag { width: 76px; height: 76px; }
.signin__word { display: block; height: 29px; width: auto; margin-top: 6px; color: var(--si-ink); }
.signin__tag { display: block; height: 13.5px; width: auto; margin-top: 7px; color: var(--si-soft); }

.signin__form { width: 100%; max-width: 360px; display: flex; flex-direction: column; }
/* "Sign in" heads the form, with the school's name under it. */
.signin__title { margin: 0 0 4px; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--si-ink); }
.signin__school { margin-bottom: 6px; font-size: 14px; color: var(--si-soft); }
.signin .signin__label { margin: 16px 0 0; font-size: 13px; font-weight: 400; color: var(--si-soft); }
.signin .signin__input {
  height: 50px; margin-top: 8px; padding: 0 14px;
  background: var(--si-box); border: 1px solid var(--si-line); border-radius: 12px;
  color: var(--si-ink); font-size: 15px;
}
.signin .signin__input:focus { background: #FFFFFF; border-color: var(--si-blue); box-shadow: 0 0 0 3px rgba(47, 95, 217, .15); }
.signin__pw { position: relative; }
.signin__pw .signin__input { padding-right: 52px; }
.signin .signin__eye {
  position: absolute; right: 3px; bottom: 3px;
  width: 44px; height: 44px; margin: 0; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 10px; color: var(--si-soft);
}
.signin .signin__eye:hover { background: transparent; color: var(--si-ink); }
.signin .signin__eye[aria-pressed="true"] { color: var(--si-blue); }
.signin__error { margin-top: 12px; font-size: 13.5px; color: #B42318; }
.signin .signin__go {
  width: 100%; height: 52px; margin-top: 24px; padding: 0;
  background: var(--si-blue); border: 0; border-radius: 14px;
  color: #FFFFFF; font-size: 16px; font-weight: 500;
}
.signin .signin__go:hover { background: var(--si-blue-2); }
.signin__help { margin-top: 18px; font-size: 14px; color: var(--si-soft); }

/* A message such as "Signed out." floats at the top instead of pushing
   the page down. */
body:has(.signin) .flashes {
  position: fixed; top: 16px; left: 50%; z-index: 5; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px); padding: 0;
}
body:has(.signin) { background: #FFFFFF; }

/* Tablets and phones: greeting on top, the form on a panel over it. */
@media (max-width: 999px) {
  .signin { flex-direction: column; background: var(--si-off); }
  .signin__hello { flex: none; padding: 120px 72px 104px; }
  .signin__greet { margin: 0; padding: 0; }
  .signin__hi { margin: 16px 0 18px; font-size: 76px; letter-spacing: -.037em; }
  .signin__quote { max-width: 560px; }
  .signin__side {
    position: relative; z-index: 1;
    flex: 1 0 auto; justify-content: flex-start;
    margin-top: -32px; padding: 64px 40px 44px;
    border-radius: 32px 32px 0 0; box-shadow: 0 -10px 30px rgba(26, 31, 54, .06);
  }
  .signin__form { max-width: 440px; }
  .signin .signin__input { height: 52px; font-size: 16px; }
  .signin .signin__go { height: 54px; }
  .signin__help { text-align: center; }
  /* The logo moves under the button, in the space left at the bottom. */
  .signin__logo { order: 2; margin: auto 0; padding-top: 28px; }
  .signin__logo .sdbag { width: 68px; height: 68px; }
  .signin__word { height: 27.5px; }
  .signin__tag { height: 13.5px; }
}
@media (max-width: 599px) {
  .signin__hello { padding: 56px 26px 56px; }
  .signin__date { font-size: 12px; letter-spacing: 1.4px; }
  .signin__term { display: none; }
  .signin__hi { margin: 10px 0 8px; font-size: clamp(34px, 10.8vw, 42px); line-height: 1.05; letter-spacing: -.038em; }
  .signin__hi { margin-bottom: 14px; }
  .signin__quote blockquote { font-size: 15px; line-height: 1.5; }
  .signin__quote figcaption { margin-top: 4px; font-size: 12px; }
  .signin__side { margin-top: -28px; padding: 28px 24px 30px; border-radius: 28px 28px 0 0; align-items: stretch; }
  .signin__form { max-width: none; }
  .signin__title { font-size: 22px; }
  .signin__school { font-size: 13px; margin-bottom: 2px; }
  .signin .signin__label { margin-top: 14px; }
  .signin .signin__input { height: 50px; }
  .signin .signin__go { height: 52px; margin-top: 20px; }
  .signin__help { margin-top: 14px; font-size: 13px; }
  .signin__logo { padding-top: 18px; }
  .signin__logo .sdbag { width: 46px; height: 46px; }
  .signin__word { height: 20.5px; margin-top: 4px; }
  .signin__tag { height: 11.5px; margin-top: 5px; }
}