/*
  Spell Beasts for Schools: package P4's screens (docs/TEACHER-UX.md sections 5.1 and 5.21-5.32):
  sign-in and the welcome (si-), the School area's This week, Classes and School details (sc-),
  Staff and a member's panel (st-), Year groups, a Year page and the two-year lists (yr-),
  Holidays (hol-) and Me (me-). Built on teach.css's shell (t-): its sheets, tables, chips,
  tiles, dialogs and print basics are used as they are, never restyled here.

  Desktop-first (1280px), one column at 760px and below, and nothing scrolls sideways at 390px
  (only a table inside its own box may).

  What this must never do: carry meaning in colour alone (a ▼ has its words, a pill its text),
  hide focus, or restyle the shell's components.
*/

/* ---------- sign in and the welcome (si-) ---------- */

.si-trial { font-size: 0.9375rem; color: var(--ink-soft); }
.si-trial a { display: inline-flex; align-items: center; gap: 2px; font-weight: 650; }
.si-codefield { display: flex; flex-direction: column; gap: 8px; }
.si-code { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.si-box {
  width: 48px; height: 56px; padding: 0; flex: 0 1 48px; min-width: 34px;
  border: 1.5px solid var(--ink-soft); border-radius: 10px; background: #fff; color: var(--ink);
  font: 700 1.6rem/1 var(--font-word); text-align: center; caret-color: var(--pond);
}
.si-box:hover { border-color: var(--ink); }
.si-box:focus { border-color: var(--pond); outline: 3px solid var(--pond); outline-offset: 1px; }
.si-box[aria-invalid="true"] { border-color: var(--think-ink); background: #FFF7FA; }
.si-code-gap { width: 10px; flex: none; }
.si-err { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--think-ink); background: var(--think-light); font-weight: 600; font-size: 0.9375rem; }
.si-err[hidden] { display: none; }
.si-err .t-icon { margin-top: 2px; color: var(--think-ink); }
.si-err .t-btn { margin-left: 4px; }
.si-who { font-size: 1.0625rem; color: var(--ink); }

@media (max-width: 420px) {
  .si-code { gap: 5px; }
  .si-box { height: 52px; font-size: 1.4rem; }
  .si-code-gap { width: 4px; }
}

/* ---------- School › This week, Classes, details (sc-) ---------- */

.sc-week { gap: var(--t-gap); }
.sc-welcome { margin-top: 0; }
.sc-weeklabel { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper-light); font-weight: 650; font-size: 0.9375rem; white-space: nowrap; }
.sc-today {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 20px;
  border: 1.5px solid var(--ink); border-radius: var(--t-radius); background: var(--yolk-light);
  box-shadow: 0 var(--t-under) 0 var(--paper-shade);
}
.sc-today-say { font-size: 1.125rem; max-width: 70ch; }
.sc-today-say a { font-weight: 700; }
.sc-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--t-gap); align-items: start; }
.sc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-gap); align-items: start; }
.sc-more { display: inline-flex; align-items: center; gap: 2px; font-weight: 650; font-size: 0.9375rem; }
.sc-big { font-size: 1.0625rem; }
.sc-stw-list, .sc-yins-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.sc-stw-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--t-feint); }
.sc-stw-who { min-width: 0; line-height: 1.9; }
.sc-stw-item .t-btn { padding-inline: 8px; }
.sc-yins { padding: 8px 0; border-top: 1px solid var(--t-feint); display: flex; flex-direction: column; gap: 6px; }
.sc-yins:first-child { border-top: none; padding-top: 0; }
.sc-yins-h { font-weight: 750; }
.sc-yins-h a { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); }

.sc-tablesheet { padding: 4px 8px 8px; }
.sc-table .sc-sub > * { background: var(--paper); font-weight: 700; border-top: 1.5px solid var(--ink-soft); }
.sc-table .sc-sub th a { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); }
.sc-table .sc-sub small { font-weight: 500; }
.sc-table .sc-ks > * { background: var(--paper-deep); }
.sc-table tr.is-quiet > * { color: var(--ink-soft); }
.sc-table .sc-c-wide { min-width: 12rem; }
.sc-tch { display: block; color: var(--ink-soft); font-weight: 500; }
.sc-nil { color: var(--think-ink); font-weight: 650; }
.sc-prog { display: inline-flex; flex-direction: column; gap: 3px; min-width: 6.5rem; }
.sc-prog .t-bar { width: 100%; }
.sc-menucell { width: 48px; text-align: right; }
.sc-code { font-size: 1rem; }
.sc-limit { color: var(--ink-soft); font-weight: 650; }
.sc-warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--think-ink); }
.sc-archived summary { cursor: pointer; padding: 2px 0; }
.sc-archived[open] summary { margin-bottom: 10px; }
.sc-arch-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.sc-arch-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 0; border-top: 1px solid var(--t-feint); }
.sc-keys { margin: 0; display: flex; flex-direction: column; }
.sc-keys > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--t-feint); }
.sc-keys dt { font-weight: 700; }
.sc-keys dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sc-tell { font-weight: 650; }
.sc-store { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.sc-store > div { min-width: 0; }
.sc-store dt { font-weight: 750; }
.sc-store dd { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.9375rem; }
.sc-admins { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-admins li { display: flex; align-items: center; gap: 10px; }
.sc-admins li > span:last-child { display: flex; flex-direction: column; }
.sc-admins small { color: var(--ink-soft); }
.sc-adm-i, .st-mem-i {
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--leaf-deep); background: var(--leaf-light); font-weight: 800; font-size: 0.875rem;
}

/* ---------- Staff (st-) ---------- */

.st-chips { min-width: 0; max-width: 100%; }
.st-findwrap { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; border: 1.5px solid var(--ink-soft); border-radius: 9px; background: #fff; min-width: 0; }
.st-findwrap:focus-within { border-color: var(--pond); outline: 3px solid var(--pond); outline-offset: 1px; }
.st-find { border: none; min-height: 38px; width: 11rem; padding: 4px 6px; outline: none; }
.st-find:focus-visible { outline: none; }
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--t-gap); align-items: start; }
.st-layout--member { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
.st-tablesheet { padding: 4px 8px 12px; }
.st-namecell { display: flex; flex-direction: column; }
.st-email { font-weight: 400; }
.st-foot { padding: 8px 10px 0; }
.st-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 9px; min-height: 24px;
  border: 1.5px solid var(--ink-soft); border-radius: 999px; background: var(--paper-light);
  font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
}
.st-pill--admin { border-color: var(--leaf-deep); background: var(--leaf-light); }
.st-pill--wait { border-color: var(--yolk-deeper); background: var(--yolk-light); }
.st-pill--off { border-style: dashed; color: var(--ink-soft); }
.st-last { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.st-actcell { text-align: right; }
.st-invites { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.st-member { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-mem-head { display: flex; align-items: center; gap: 12px; }
.st-mem-head h2 { font-size: 1.35rem; overflow-wrap: anywhere; }
.st-mem-i { width: 46px; height: 46px; font-size: 1rem; border-color: var(--ink-soft); background: var(--paper); }
.st-mem-i.is-admin { border-color: var(--leaf-deep); background: var(--leaf-light); }
.st-back { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; }
.st-keys { margin: 0; display: flex; flex-direction: column; }
.st-keys > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 12px; padding: 7px 0; border-top: 1px solid var(--t-feint); }
.st-keys dt { font-weight: 700; font-size: 0.9375rem; }
.st-keys dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.st-mem-sum { padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 0.9375rem; font-weight: 600; }
.st-guard { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-soft); font-size: 0.9375rem; }
.st-guard .t-icon { margin-top: 2px; }
.st-invited { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1.5px solid var(--yolk-deeper); border-radius: 10px; background: var(--yolk-light); }
.st-invited .t-btn { align-self: flex-start; }
.st-log { display: flex; flex-direction: column; gap: 8px; }
.st-log-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.st-range { width: auto; min-height: 38px; }
.st-logf { flex-wrap: wrap; overflow: visible; }
.st-logf .t-chip { min-height: 34px; padding: 3px 11px; font-size: 0.875rem; }
.st-tl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.st-tl li { display: grid; grid-template-columns: 5.5rem 4.2rem minmax(0, 1fr); gap: 2px 8px; padding: 5px 0; font-size: 0.9375rem; }
.st-tl li.is-day { border-top: 1px solid var(--t-feint); }
.st-tl-d { font-weight: 700; color: var(--ink); }
.st-tl-t { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.st-tl-w { min-width: 0; overflow-wrap: anywhere; }
.st-leave { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1.5px dashed var(--rule); }
.st-leave-row { display: flex; flex-direction: column; gap: 6px; }
.st-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 0.9375rem; }
.st-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.st-mem-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 12px; border-top: 1.5px dashed var(--rule); }

/* paste a list, add one person */
.st-paste-grid { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.t-sdlg .st-paste-grid { grid-template-columns: minmax(0, 1fr); }
.st-emailcell { overflow-wrap: normal; word-break: normal; font-size: 0.875rem; }
.st-paste .t-textarea { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.875rem; min-height: 180px; }
.st-preview:empty { display: none; }
.st-ptable select { min-height: 34px; padding-top: 2px; padding-bottom: 2px; width: auto; max-width: 11rem; font-size: 0.875rem; }
.st-ptable tr.is-bad > * { background: #FFF7FA; }
.st-ptable tr.is-done > * { background: var(--leaf-light); }
.st-rowstate { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); }
.st-rowstate.is-bad { color: var(--think-ink); }
.st-rowstate.is-ok { color: var(--leaf-deep); }
.st-rowstate.is-warn, .st-rowstate.is-wait { color: var(--yolk-deeper); }
.st-paste-sum:empty { display: none; }
.st-roles { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; }
.st-roles dt { font-weight: 750; }
.st-roles dd { margin: 0; color: var(--ink-soft); }
.st-invite { padding: 12px 14px; border: 1.5px dashed var(--rule); border-radius: 10px; background: var(--paper); display: flex; flex-direction: column; gap: 4px; }
.st-add-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-radios { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-radio { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.st-radio input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); flex: none; }
.st-cls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 6px 14px; }
.st-newclass { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }

/* ---------- Year groups, a Year page, two-year lists (yr-) ---------- */

.yr-table .yr-code { display: inline-flex; align-items: center; gap: 8px; }
.yr-codev { font-size: 1rem; }
.yr-sw {
  display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 30px; padding: 0 10px;
  border: 1.5px solid var(--ink-soft); border-radius: 999px; background: var(--paper); color: var(--ink-soft);
  font: 700 0.8125rem/1 var(--t-font); cursor: pointer;
}
.yr-sw[aria-checked="true"] { background: var(--leaf); border-color: var(--leaf-deep); color: #fff; }
.yr-h { margin-top: 6px; }
.yr-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-gap); align-items: start; }
.yr-list .t-btn { align-self: flex-start; }
.yr-keys { margin: 0; display: flex; flex-direction: column; }
.yr-keys > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--t-feint); }
.yr-keys dt { font-weight: 700; }
.yr-keys dd { margin: 0; }
.yr-say { font-size: 1.0625rem; }
.yr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--t-gap); align-items: start; }
.yr-words { display: flex; flex-wrap: wrap; gap: 6px; }

.yr-codestrip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px;
  border: 1.5px solid var(--ink); border-radius: var(--t-radius); background: var(--paper-light);
}
.yr-codehint { flex: 1 1 18rem; }
.yr-codeacts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.yr-swlabel { font-size: 0.8125rem; font-weight: 700; color: var(--ink-soft); }
.yr-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--t-gap); align-items: start; }
.yr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--t-gap); align-items: start; }
.yr-trend-lines { display: flex; flex-direction: column; gap: 10px; }
.yr-trend-line { display: grid; grid-template-columns: minmax(0, 11rem) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.yr-trend-k { font-weight: 700; }
.yr-trend-v { color: var(--ink-soft); }
.yr-trend .t-spark { color: var(--pond-deep); }
@media (max-width: 480px) {
  .yr-trend-line { grid-template-columns: minmax(0, 1fr) auto; }
  .yr-trend-v { grid-column: 1 / -1; }
}
.yr-sidesheet { display: flex; flex-direction: column; gap: 8px; }
.yr-side { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.yr-side th, .yr-side td { padding: 8px 10px; border-bottom: 1px solid var(--t-feint); text-align: left; vertical-align: top; }
.yr-side thead th { border-bottom: 1.5px solid var(--ink); font-weight: 750; }
.yr-side thead th a { color: var(--ink); font-size: 1.05rem; }
.yr-side tbody th { font-weight: 650; color: var(--ink-soft); width: 32%; }
.yr-side small { color: var(--ink-soft); }
.yr-side .yr-all { background: var(--paper); font-weight: 650; }
.yr-down { color: var(--think-ink); font-weight: 800; white-space: nowrap; }
.yr-look { display: inline-flex; align-items: center; gap: 2px; color: var(--think-ink); font-weight: 750; }
.yr-mm, .yr-cc { list-style: none; padding: 0; display: flex; flex-direction: column; }
.yr-mm li, .yr-cc li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 7px 0; border-top: 1px solid var(--t-feint); }
.yr-mm-w { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.yr-mm-x { font-size: 0.875rem; color: var(--ink-soft); }
.yr-mm-c { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.yr-cc li { flex-direction: column; align-items: flex-start; }
.yr-cc-words { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Holidays (hol-) ---------- */

.hol-rule { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-soft); }
.hol-rule .t-icon { margin-top: 2px; }
.hol-lists { display: flex; flex-direction: column; gap: 10px; }
.hol-list, .hol-plist { list-style: none; padding: 0; display: flex; flex-direction: column; }
.hol-item { display: grid; grid-template-columns: minmax(10rem, 1.4fr) minmax(9rem, 1.2fr) minmax(6rem, 0.7fr) auto; gap: 4px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--t-feint); }
.hol-item.is-now { background: var(--yolk-light); border-radius: 8px; padding-inline: 8px; }
.hol-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.hol-now { padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--paper-light); font-size: 0.75rem; font-weight: 700; }
.hol-when { font-variant-numeric: tabular-nums; }
.hol-days { color: var(--ink-soft); font-size: 0.9375rem; }
.hol-list--past .hol-item { color: var(--ink-soft); }
.hol-past summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.hol-sum { font-size: 1rem; }
.hol-form { gap: 12px; }
.hol-form .t-textarea { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.875rem; }
.hol-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hol-plist li { padding: 4px 0; border-top: 1px solid var(--t-feint); font-size: 0.9375rem; }
.hol-plist .hol-bad { display: flex; align-items: flex-start; gap: 6px; color: var(--think-ink); font-weight: 600; }
.hol-note { color: var(--ink-soft); }
.hol-state.is-ok { color: var(--leaf-deep); font-weight: 650; }
.hol-state.is-bad { color: var(--think-ink); font-weight: 650; }

/* ---------- Me (me-) ---------- */

.me-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-gap); align-items: start; }
.me-name-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.me-keys { margin: 0; display: flex; flex-direction: column; }
.me-keys > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 4px 12px; padding: 7px 0; border-top: 1px solid var(--t-feint); }
.me-keys dt { font-weight: 700; }
.me-keys dd { margin: 0; min-width: 0; }
.me-classes, .me-list { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.me-sample { font-size: 0.9375rem; color: var(--ink-soft); }
.me-out { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- narrower screens ---------- */

@media (max-width: 1100px) {
  .yr-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-layout--member { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .st-paste-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1020px) {
  .sc-cols, .yr-main { grid-template-columns: minmax(0, 1fr); }
  .st-layout--member { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .sc-two, .me-grid, .yr-lists, .yr-two, .yr-three, .sc-store, .st-add-two, .hol-dates { grid-template-columns: minmax(0, 1fr); }
  .sc-today { padding: 12px 14px; }
  .sc-today-say { font-size: 1rem; }
  .sc-keys > div, .st-keys > div, .yr-keys > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .st-layout--member .st-listcol { display: none; }
  .st-findwrap { flex: 1 1 100%; }
  .st-find { width: 100%; }
  .hol-item { grid-template-columns: minmax(0, 1fr) auto; }
  .hol-item .hol-when, .hol-item .hol-days { grid-column: 1; }
  .hol-item > .t-btn { grid-column: 2; grid-row: 1 / span 3; }
  .st-tl li { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .st-tl-d { grid-column: 1 / -1; }
  .st-tl li:not(.is-day) .st-tl-d { display: none; }
  .yr-side { font-size: 0.875rem; }
  .yr-side th, .yr-side td { padding: 6px 6px; }
  .yr-side tbody th { width: auto; }
  .yr-side thead th small { display: block; }
  .sc-table .sc-c-wide { min-width: 0; }
  .sc-prog { min-width: 0; flex-direction: row; align-items: center; gap: 8px; }
  .sc-prog .t-bar { width: 4.5rem; }
  .sc-weeklabel { white-space: normal; }
  .me-name-row { grid-template-columns: minmax(0, 1fr); }
  .me-name-row .t-btn { justify-self: start; }
  .st-newclass { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- print ---------- */

@media print {
  .p-doc .p-sub > * { font-weight: 700; border-top: 0.3mm solid #000; }
}
.sc-yins[hidden] { display: none; }