/* Workspace screens: records, classes, staff and home briefings. Builds on components.css. */

.check { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-md); color: var(--ink-2); cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); flex: none; }
.stack { display: grid; gap: var(--s-4); align-content: start; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3) var(--s-4); }
.form-grid .span-all { grid-column: 1 / -1; }
.filters { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: end; }
.filters .field { min-width: 10rem; }
.filters .grow { flex: 1; min-width: 14rem; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.side-col { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-4); align-items: start; }
@media (max-width: 64rem) { .two-col, .side-col { grid-template-columns: minmax(0, 1fr); } }
.mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.92em; letter-spacing: 0; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.row-line { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.row-line:last-child { border-bottom: 0; }
.row-line .grow { flex: 1; min-width: 0; }
details.inline-edit > summary { list-style: none; cursor: pointer; }
details.inline-edit > summary::-webkit-details-marker { display: none; }
details.inline-edit[open] > summary { margin-bottom: var(--s-3); }
.sub-head { font-size: var(--t-sm); font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin: var(--s-2) 0; }

/* Student profile (design-system/screens/student-profile.html) */
.profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; }
.profile-photo { width: 5.5rem; height: 5.5rem; border-radius: 1.25rem; display: grid; place-items: center; background: #e8e1f5; color: #4f3a85; font-size: 1.9rem; font-weight: 700; position: relative; overflow: visible; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
:root[data-theme="dark"] .profile-photo { background: #2a2340; color: #cbb8f5; }
.profile-photo .st { position: absolute; right: -6px; bottom: -6px; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--pos); border: 3px solid var(--ground); }
.profile-photo .st.off { background: var(--ink-3); }
.profile-name { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.profile-facts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 1.75rem; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 550; color: var(--ink-2); }
.chip .i { color: var(--ink-3); }
.chip-alert { background: var(--neg-bg); border-color: var(--neg-line); color: var(--neg); }
.chip-alert .i { color: var(--neg); }
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 22rem; gap: var(--s-4); margin-top: var(--s-5); align-items: start; }
.guardian { padding: var(--s-4); display: grid; gap: var(--s-3); border-bottom: 1px solid var(--line); }
.guardian:last-child { border-bottom: 0; }
.guardian.is-restricted { background: var(--neg-bg); }
.g-top { display: flex; gap: var(--s-3); align-items: center; }
.g-name { font-weight: 650; }
.g-rel { font-size: var(--t-sm); color: var(--ink-3); }
.flags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.flag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); padding: 0.2rem 0.5rem; border-radius: 6px; background: var(--ground); }
.flag .i { width: 0.95rem; height: 0.95rem; color: var(--pos); }
.flag.neg { background: var(--neg-bg); color: var(--neg); }
.flag.neg .i { color: var(--neg); }
.phone { font-variant-numeric: tabular-nums; font-weight: 600; }
.tl { list-style: none; margin: 0; padding: var(--s-4) 0 0; }
.tl li { position: relative; display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }
.tl li::before { content: ""; position: absolute; left: calc(var(--s-4) + 0.875rem); top: 1.9rem; bottom: 0; width: 1px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl .t-ico { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--ground); color: var(--ink-2); position: relative; }
.tl .t-ico .i { width: 0.95rem; height: 0.95rem; }
.tl .t-when { font-size: var(--t-xs); color: var(--ink-3); }
.tl .t-what { font-size: var(--t-md); }
.locked { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-ctl); background: var(--ground); font-size: var(--t-sm); color: var(--ink-2); }
.locked .i { color: var(--ink-3); width: 1.25rem; height: 1.25rem; }
.doc-list li { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.doc-list li:last-child { border-bottom: 0; }
@media (max-width: 90rem) { .profile-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .profile-grid > .col-side { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; } }
@media (max-width: 52rem) {
  .profile-head { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); }
  .profile-photo { width: 4.25rem; height: 4.25rem; font-size: 1.5rem; }
  .actions { grid-column: span 2; justify-content: flex-start; }
  .profile-grid { grid-template-columns: minmax(0, 1fr); } .profile-grid > .col-side { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .hide-sm { display: none !important; }
}

/* Classes board */
.class-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s-4); }
.class-card .streams { display: grid; gap: 0; }
.class-card .stream { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.class-card .stream:hover { background: var(--ground); }
.stream-tag { width: 2.25rem; height: 2.25rem; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: var(--brand-tint); color: var(--brand-ink); }
.fill { height: 6px; border-radius: 3px; background: var(--ground-2); overflow: hidden; margin-top: 4px; }
.fill > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.fill.over > span { background: var(--neg); }
.level-head { display: flex; align-items: baseline; gap: var(--s-3); margin: var(--s-6) 0 var(--s-3); }
.level-head:first-child { margin-top: 0; }
.level-head h2 { font-family: var(--font-serif, Georgia, serif); font-size: var(--t-lg, 1.25rem); font-weight: 600; }

/* Import preview */
.row-bad td { background: var(--neg-bg); }
.row-warn td { background: var(--warn-bg); }
.issues { margin: 0; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--neg); }
.issues.warn { color: var(--warn); }

/* Home briefings */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-4); }
.kpi { padding: var(--s-4) var(--s-5); }
.kpi .figure { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
.kpi .note { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s-1); }
.bar-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3rem; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; font-size: var(--t-sm); }
.bar-row .bar { height: 0.6rem; border-radius: 4px; background: var(--ground-2); overflow: hidden; display: flex; }
.bar-row .bar span { display: block; height: 100%; }
.bar-row .bar .f { background: var(--brand); }
.bar-row .bar .m { background: var(--accent, #E1A33A); }
.todo li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.todo li:last-child { border-bottom: 0; }
.todo .i { color: var(--warn); }
.todo .ok .i { color: var(--pos); }
.coming { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); color: var(--ink-3); font-size: var(--t-sm); }
@media (max-width: 64rem) { .side-col > .first-sm { order: -1; } }
.break-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
.break-row .input { min-width: 0; width: 100%; }
@media (max-width: 40rem) { .break-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .break-row > :first-child { grid-column: 1 / -1; } }

/* Class register (design-system/screens/teacher-attendance.html), phone first */
.register { max-width: 36rem; }
.reg-head { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-3); }
.reg-title { font-size: var(--t-xl, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.reg-sub { font-size: var(--t-sm); color: var(--ink-2); }
.reg-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card, 1rem); overflow: hidden; }
.reg-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-4); min-height: var(--row-touch, 3.5rem); border-bottom: 1px solid var(--line); position: relative; margin: 0; border-left: 0; border-right: 0; border-top: 0; }
.reg-row:last-child { border-bottom: 0; }
.reg-row .nm { font-weight: 600; line-height: 1.2; }
.reg-row .sub { font-size: var(--t-xs); color: var(--ink-3); }
.reg-row:has(input[value="absent"]:checked), .reg-row[data-s="absent"] { background: color-mix(in oklab, var(--neg-bg) 70%, var(--surface)); }
.reg-row:has(input[value="late"]:checked), .reg-row[data-s="late"] { background: color-mix(in oklab, var(--warn-bg) 70%, var(--surface)); }
.reg-row:has(input[value="excused"]:checked), .reg-row[data-s="excused"] { background: color-mix(in oklab, var(--info-bg, #e6eef8) 60%, var(--surface)); }
.reg-row:has(input[value="absent"]:checked)::before, .reg-row:has(input[value="late"]:checked)::before, .reg-row[data-s="absent"]::before, .reg-row[data-s="late"]::before { content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--neg); }
.reg-row:has(input[value="late"]:checked)::before, .reg-row[data-s="late"]::before { background: var(--warn); }
.pal { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); }
.pal label { width: 2.75rem; height: 2.5rem; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; position: relative; transition: background-color .12s ease, color .12s ease; }
.pal label + label { border-left: 1px solid var(--line); }
.pal input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pal label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -3px; }
.pal .i { width: 1.25rem; height: 1.25rem; }
.pal label:active { transform: scale(0.94); }
.pal label[data-v="present"]:has(input:checked) { background: var(--pos-bg); color: var(--pos); }
.pal label[data-v="absent"]:has(input:checked) { background: var(--neg); color: #fff; }
.pal label[data-v="late"]:has(input:checked) { background: var(--warn-bg); color: var(--warn); }
.pal label[data-v="excused"]:has(input:checked) { background: var(--brand-tint); color: var(--brand-ink); }
.reg-extra { grid-column: 2 / -1; display: none; gap: var(--s-2); align-items: center; padding-bottom: var(--s-1); flex-wrap: wrap; }
.reg-extra .select, .reg-extra .input { height: 2.25rem; font-size: var(--t-sm); width: auto; flex: 1; min-width: 8rem; }
.reg-row:has(input[value="absent"]:checked) .reg-extra.for-absent, .reg-row:has(input[value="excused"]:checked) .reg-extra.for-absent, .reg-row:has(input[value="late"]:checked) .reg-extra.for-late { display: flex; }
.reg-bar { position: sticky; bottom: 0; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card, 1rem); margin-top: var(--s-3); padding: var(--s-3) var(--s-4) calc(env(safe-area-inset-bottom) + var(--s-3)); display: grid; gap: var(--s-2); box-shadow: var(--shadow-2, 0 -4px 16px rgb(0 0 0 / .06)); }
.tally { display: flex; gap: var(--s-4); font-size: var(--t-sm); font-weight: 600; flex-wrap: wrap; }
.tally b { font-variant-numeric: tabular-nums; font-size: var(--t-lg, 1.125rem); }
.tally .pos { color: var(--pos); } .tally .neg { color: var(--neg); } .tally .warn { color: var(--warn); }
.reg-sheet { position: fixed; left: 50%; bottom: 0; width: min(32rem, 100vw); transform: translate(-50%, 102%); z-index: 60; background: var(--surface); border-radius: 1.25rem 1.25rem 0 0; box-shadow: var(--shadow-3, 0 -8px 40px rgb(0 0 0 / .2)); transition: transform .28s cubic-bezier(.32, .72, 0, 1); padding: var(--s-2) var(--s-5) calc(env(safe-area-inset-bottom) + var(--s-5)); display: grid; gap: var(--s-4); max-height: 85vh; overflow: auto; }
.reg-sheet[data-open="true"] { transform: translate(-50%, 0); }
.reg-scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 55; }
.grab { width: 2.5rem; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 0 auto var(--s-2); }
.sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.sum-grid div { padding: var(--s-3); border-radius: var(--r-ctl); background: var(--ground); display: grid; }
.sum-grid b { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.who { list-style: none; margin: 0; padding: 0; }
.who li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 0.4rem 0; font-size: var(--t-md); border-bottom: 1px solid var(--line); }
.who li:last-child { border-bottom: 0; }
.msg-state { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--t-xs); font-weight: 600; }
.register-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-3); }
.register-card { display: grid; gap: var(--s-2); padding: var(--s-4); color: inherit; text-decoration: none; }
.register-card:hover { border-color: var(--line-strong); }
.att-days { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 1.1rem); grid-auto-columns: 1.1rem; gap: 4px; }
.att-days span { border-radius: 3px; background: color-mix(in oklab, var(--pos) 55%, var(--surface)); }
.att-days .a { background: var(--neg); } .att-days .l { background: var(--warn); } .att-days .x { background: var(--brand); opacity: .55; } .att-days .h { background: var(--ground-2); }
.sim-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .45rem; border-radius: 6px; font-size: var(--t-xs); font-weight: 650; background: var(--sim-bg, #efe7fb); color: var(--sim, #5b3fa0); }
.reg-sheet[data-open="false"] { visibility: hidden; transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s; }

/* Mark sheet: a card per student on phones instead of a wide table */
@media (max-width: 40rem) {
  .marks-table thead { display: none; }
  .marks-table, .marks-table tbody { display: block; }
  .marks-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .marks-table td { display: block; padding: 0; border: 0; text-align: left; }
  .marks-table td:first-child { grid-column: 1 / -1; }
  .marks-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 2px; }
  .marks-table .input, .marks-table .select { width: 100% !important; text-align: left !important; }
}
@media (max-width: 40rem) {
  .table.marks-table td, .table.marks-table td.r { padding: 0 !important; text-align: left !important; white-space: normal; border: 0; height: auto; }
  .table.marks-table td.num b { font-size: 1.1rem; }
}
.fill { display: block; }

/* Demo tour (demo schools only) */
.tour { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.tour-step .panel-body { display: grid; gap: var(--s-3); align-content: start; }
.tour-n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-tint); color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tour-say { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.tour-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tour-later { opacity: .72; }
.tour-result { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--line-strong); font-size: var(--t-sm); }
.tour-balance { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.tour-balance b { font-size: var(--t-lg); }
.sms { background: var(--sim-bg); border: 1px dashed var(--sim-line); border-radius: var(--r-ctl) var(--r-ctl) var(--r-ctl) 2px; padding: var(--s-2) var(--s-3); }
.sms-to { display: flex; gap: var(--s-2); align-items: center; color: var(--sim); font-size: var(--t-xs); font-weight: 600; }
.sms p { margin-top: var(--s-1); color: var(--ink); }
.tour-qr { width: 11rem; padding: var(--s-2); background: #fff; border-radius: var(--r-ctl); border: 1px solid var(--line); }
.tour-qr svg { display: block; width: 100%; height: auto; }

/* Shared helpers for the school-life modules */
.input-lg { height: 3rem; font-size: 1.0625rem; }
.select-sm { height: 2rem; padding-top: 0; padding-bottom: 0; font-size: var(--t-sm); width: auto; }
.avatar-xl { width: 4rem; height: 4rem; font-size: 1.35rem; }

/* Gate */
.gate-search { display: flex; gap: var(--s-2); }
.gate-search .input { flex: 1; min-width: 0; }
.gate-results li a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
.gate-results li a > span:nth-child(2) { flex: 1; min-width: 0; }
.gate-results li a:hover { background: var(--surface-2); }
.gate-student-head { display: flex; align-items: center; gap: var(--s-4); }
.gate-photo { width: 4.5rem; height: 4.5rem; border-radius: var(--r-ctl); object-fit: cover; }
.gate-thumb { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.gate-h { font-size: var(--t-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.gate-people li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.gate-person { flex: 1; min-width: 10rem; display: grid; }
.gate-person .faint { font-size: var(--t-xs); }
.gate-release { display: flex; gap: var(--s-2); align-items: center; }
.gate-inline { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.gate-inline .input { width: 9rem; letter-spacing: .15em; }
.gate-refuse > summary, .gate-admin summary { list-style: none; cursor: pointer; display: inline-flex; }
.gate-refuse > summary::-webkit-details-marker, .gate-admin summary::-webkit-details-marker { display: none; }
.gate-admin { display: grid; gap: var(--s-2); justify-items: start; }
.gate-admin details { width: 100%; }
.gate-code-digits { font-size: 2.4rem; font-weight: 700; letter-spacing: .12em; margin: var(--s-1) 0; color: var(--ink); }
.gate-offline > summary { display: flex; gap: var(--s-2); align-items: center; cursor: pointer; list-style: none; }
.gate-offline > summary::-webkit-details-marker { display: none; }
.gate-steps { padding-left: 1.2rem; display: grid; gap: var(--s-1); font-size: var(--t-sm); color: var(--ink-2); }
.gate-log-row { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.gate-log-row > div { flex: 1; min-width: 0; }
@media (max-width: 40rem) { .gate-release { width: 100%; } .gate-release .select { flex: 1; } }

/* Sick bay */
.input-sm { height: 2rem; font-size: var(--t-sm); padding-top: 0; padding-bottom: 0; }
.sb-meds { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s-2); }
.sb-med { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: var(--t-sm); }
.sb-med .input { width: 4.5rem; }
.sb-stock { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; }
.sb-stock .input { width: 9rem; }

/* Boarding */
.board-dorms { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.board-dorm { color: inherit; text-decoration: none; display: block; transition: border-color .15s; }
.board-dorm:hover { border-color: var(--school-brand); }
.board-dorm .panel-body { display: grid; gap: var(--s-2); }
.board-dorm-name { display: flex; justify-content: space-between; align-items: center; font-weight: 650; }
.board-dorm .figure { font-size: 1.8rem; }
.board-calls { display: flex; flex-wrap: wrap; gap: var(--s-1); }
/* Radio buttons shown as a segmented control */
.seg label { position: relative; }
.seg input[type=radio], .seg input[type=checkbox] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label span { display: inline-block; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg input[value=missing]:checked + span { background: var(--neg-bg); color: var(--neg); }
.seg input[value=sick]:checked + span { background: var(--warn-bg); color: var(--warn); }
.seg input:focus-visible + span { outline: 2px solid var(--school-brand); outline-offset: 1px; }

/* Transport */
.tr-mine { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tr-stop + .tr-stop { border-top: 1px solid var(--line); }
.tr-stop-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.tr-stop-head b { flex: 1; }
.tr-pos { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--brand-tint); color: var(--ink); font-weight: 700; font-size: var(--t-sm); flex: none; }
.tr-rider { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); flex-wrap: wrap; }
.tr-rider-name { flex: 1; min-width: 10rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.tr-rider-name .faint { font-size: var(--t-xs); }
.tr-actions { display: flex; gap: var(--s-2); }
.tr-actions .btn { min-width: 4.5rem; min-height: 2.75rem; }
.tr-correct > summary { list-style: none; cursor: pointer; }

/* Library labels: shown only when printing */
.lib-labels { display: none; }
@media print {
  .lib-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; }
  .lib-label { border: 1px dashed #999; padding: 3mm; display: grid; justify-items: center; gap: 1mm; font-size: 9pt; text-align: center; break-inside: avoid; }
  .lib-label svg { width: 22mm; height: 22mm; }
  .no-print, .sidebar, .topbar, .page-head, .demo-strip { display: none !important; }
}

/* Admissions board */
.adm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); }
.adm-col { background: var(--ground-2); border-radius: var(--r-panel); padding: var(--s-2); display: grid; gap: var(--s-2); align-content: start; min-height: 6rem; }
.adm-col-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-sm); font-weight: 650; padding: var(--s-1) var(--s-2); }
.adm-card { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); color: inherit; text-decoration: none; font-size: var(--t-sm); }
.adm-card:hover { border-color: var(--school-brand); }
.adm-card .faint { font-size: var(--t-xs); }
.adm-meta { display: flex; gap: var(--s-1); align-items: center; margin-top: 2px; }
.adm-meta:empty { display: none; }

/* Canteen */
.wl-head { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.wl-head > div:nth-child(2) { flex: 1; min-width: 10rem; }
.wl-balance { text-align: right; }
.wl-balance .figure { font-size: 1.8rem; }
.wl-till { display: grid; gap: var(--s-3); }
.wl-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s-2); }
.wl-product { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.wl-name { font-weight: 650; }
.wl-product .faint { font-size: var(--t-xs); }
.wl-product .input { width: 100%; margin-top: var(--s-1); }

/* Timetable (Checkpoint 11) */
.tt-pickers { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--s-4); }
.tt-pickers .field { min-width: 12rem; flex: 0 1 16rem; }
.tt-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
@media (max-width: 1279px) { .tt-layout { grid-template-columns: minmax(0, 1fr); } }
.tt-panel { padding: 0; overflow: hidden; }
.tt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tt-grid { width: 100%; min-width: calc(5rem + var(--tt-days) * 7.5rem); border-collapse: collapse; table-layout: fixed; font-size: var(--t-sm); }
.tt-grid th, .tt-grid td { border: 1px solid var(--line); padding: 0; vertical-align: top; }
.tt-grid thead th { background: var(--surface-2); padding: var(--s-2); font-weight: 600; text-align: left; position: sticky; top: 0; }
.tt-grid .tt-time { width: 5.5rem; padding: var(--s-2); text-align: left; background: var(--surface-2); font-weight: 400; position: sticky; left: 0; z-index: 1; }
.tt-grid .tt-time b { display: block; font-size: var(--t-xs); }
.tt-grid .tt-time span { font-size: var(--t-xs); }
.tt-day-short { display: none; }
.tt-band td { background: var(--ground-2); color: var(--ink-3); text-align: center; padding: var(--s-1); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; }
.tt-band .tt-time { font-size: var(--t-xs); color: var(--ink-3); }
.tt-cell { height: 4.25rem; position: relative; }
.tt-cell.is-blocked { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--ground-2) 6px 12px); }
.tt-cell.is-over { outline: 2px dashed var(--brand); outline-offset: -3px; }
.tt-lesson { --h: 150; height: 100%; min-height: 4.25rem; padding: var(--s-1) var(--s-2); display: flex; flex-direction: column; gap: 1px;
  background: color-mix(in oklab, hsl(var(--h) 55% 50%) 13%, var(--surface)); border-left: 3px solid hsl(var(--h) 45% 42%); position: relative; }
.tt-lesson[data-tone="1"] { --h: 205; } .tt-lesson[data-tone="2"] { --h: 265; } .tt-lesson[data-tone="3"] { --h: 35; }
.tt-lesson[data-tone="4"] { --h: 330; } .tt-lesson[data-tone="5"] { --h: 180; } .tt-lesson[data-tone="6"] { --h: 85; } .tt-lesson[data-tone="7"] { --h: 0; }
.tt-lesson[draggable="true"] { cursor: grab; }
.tt-lesson.is-picked { outline: 2px solid var(--brand); outline-offset: -2px; }
.tt-lesson.is-clash { outline: 2px solid var(--neg); outline-offset: -2px; background: var(--neg-bg); }
.tt-lesson.is-locked::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.tt-subject { font-weight: 700; font-size: var(--t-sm); line-height: 1.2; }
.tt-meta { font-size: var(--t-xs); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.tt-actions { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.tt-lesson:hover .tt-actions, .tt-lesson:focus-within .tt-actions, .tt-lesson.is-locked .tt-actions { opacity: 1; }
@media (hover: none) { .tt-actions { opacity: 1; } }
.tt-act { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 6px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.tt-act:hover { color: var(--ink); }
.tt-act .i { width: 0.9rem; height: 0.9rem; }
.tt-drop { position: absolute; inset: auto 4px 4px auto; }
.tt-cell.is-free .tt-drop { inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.tt-why { display: block; padding: var(--s-1) var(--s-2); font-size: var(--t-xs); color: var(--ink-3); }
.tt-problem { display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-4); font-size: var(--t-sm); border-top: 1px solid var(--line); }
.tt-problem .i { flex: none; margin-top: 2px; color: var(--warn); }
.tt-print-title { display: none; }
.cv-head { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; align-items: flex-start; }
.cv-done { display: flex; gap: var(--s-2); align-items: center; }
.cv-option { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .tt-day-long { display: none; } .tt-day-short { display: inline; }
  .tt-grid { min-width: calc(4rem + var(--tt-days) * 5.25rem); }
  .tt-grid .tt-time { width: 4rem; }
  .tt-meta { white-space: normal; }
}
@media print {
  .tt-print-title { display: block; font-size: 14pt; margin: 0 0 8pt; }
  .tt-layout { display: block; }
  .tt-grid { min-width: 0; font-size: 9pt; }
  .tt-grid thead th, .tt-grid .tt-time { position: static; }
  .tt-lesson { background: none !important; border-left-width: 2px; }
  .tt-actions, .tt-drop, .tt-why { display: none !important; }
}
.row-line.is-now { background: var(--brand-tint); }

/* Lessons, schemes and the class diary (Checkpoint 11) */
.cov { display: flex; align-items: center; gap: var(--s-2); min-width: 9rem; }
.cov-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--ground-2); overflow: hidden; }
.cov-bar span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.cov-bar.is-low span { background: var(--warn); }
.cov .num { min-width: 2.6rem; text-align: right; font-size: var(--t-sm); }
.diary-row { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.diary-row:first-child { border-top: 0; }
.diary-row p + p { margin-top: 2px; }
.diary-when { min-width: 6.5rem; display: flex; flex-direction: column; font-size: var(--t-sm); }
.diary-band { padding: var(--s-1) var(--s-4); background: var(--ground-2); color: var(--ink-3); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; border-top: 1px solid var(--line); }
.review-row { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); flex-wrap: wrap; }
.review-actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.review-actions .input { width: 14rem; }
.plan-stages th[scope="row"] { width: 9rem; font-weight: 600; vertical-align: top; }
.plan-stages td { vertical-align: top; }
.plan-stages .textarea { min-height: 3.5rem; }
.plan-stages .input-sm { width: 4.5rem; }
.scheme-table td { vertical-align: top; }
.scheme-table .textarea { min-height: 3.5rem; min-width: 10rem; }
.scheme-table .input-sm { width: 4.5rem; }
.plan-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.plan-meta dt { font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.plan-meta dd { margin: 0; font-weight: 600; }
.plan-h { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: var(--s-4) 0 var(--s-1); }
.plan-print-title { display: none; }
@media (max-width: 600px) {
  .diary-row { flex-wrap: wrap; }
  .diary-when { min-width: 0; flex-direction: row; gap: var(--s-2); width: 100%; }
  .review-actions .input { width: 100%; }
}
@media print {
  .plan-print-title { display: block; font-size: 13pt; margin-bottom: 8pt; }
  .plan-doc { border: 0; box-shadow: none; }
}

/* Clubs and events (Checkpoint 11) */
.act-marks { display: flex; flex-direction: column; }
.act-marks li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.act-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s-1) var(--s-3); max-height: 18rem; overflow: auto; }
.seg-sm label span { padding: 2px var(--s-2); font-size: var(--t-xs); }
.ev-history summary { cursor: pointer; }

/* Payroll (Checkpoint 11) */
.pay-item { display: inline-flex; align-items: center; gap: 2px; margin: 0 var(--s-1) 2px 0; padding: 0 var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); background: var(--ground-2); white-space: nowrap; }
.pay-item.allowance { background: var(--pos-bg); color: var(--pos); }
.pay-item.advance { background: var(--warn-bg); color: var(--warn); }
.link-btn { border: 0; background: none; padding: 0 2px; cursor: pointer; color: inherit; font: inherit; }
.rec-cand { display: flex; gap: var(--s-2); align-items: center; margin-bottom: var(--s-1); font-size: var(--t-sm); }

/* Getting started (WL-5) */
.setup-mark { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--line-strong); font-weight: 700; font-size: var(--t-sm); color: var(--ink-3); flex: none; }
.setup-mark.is-done { background: var(--pos); border-color: var(--pos); color: #fff; }

/* Pagination (Checkpoint 12): previous, page x of y, next. */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-3) 0; }
.pager .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.pager-info { font-size: var(--t-sm); color: var(--ink-2); }

/* Comment drafts (Checkpoint 12): one row per student; the comment drops below on phones. */
.draft-row { display: grid; grid-template-columns: 1.5rem minmax(12rem, 1fr) minmax(18rem, 1.6fr); gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); align-items: start; }
.draft-pick { padding-top: 2px; }
.draft-who { display: grid; gap: 4px; min-width: 0; }
.draft-facts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; font-size: var(--t-xs); }
.draft-text { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.draft-text textarea { width: 100%; min-height: 5.2rem; resize: vertical; }
@media (max-width: 760px) {
  .draft-row { grid-template-columns: 1.5rem 1fr; }
  .draft-text { grid-column: 1 / -1; }
}

/* Curriculum review (Brief 08, A3): what was read, beside the page it came from. */
.cur-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); }
.cur-fields { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.cur-sub { border-left: 3px solid var(--line); padding-left: var(--s-3); display: grid; gap: var(--s-2); }
.cur-page { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--s-3); min-width: 0; max-height: 28rem; overflow: auto; }
.cur-page pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.5; margin: var(--s-2) 0 0; color: var(--ink-2); }
@media (max-width: 860px) { .cur-grid { grid-template-columns: 1fr; } .cur-page { max-height: 16rem; } }

/* Brief 08, A5: scripts and marking */
.mk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-4); }
.mk-n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: var(--s-2); border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); font-size: var(--t-sm); font-weight: 700; }
.mk-pages { display: grid; gap: var(--s-3); padding: var(--s-4); }
.mk-page { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.mk-page:last-child { border-bottom: 0; padding-bottom: 0; }
.mk-thumb img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; }
.mk-flags { margin: 0; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--neg); }
.mk-answer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.mk-scan img { display: block; width: 100%; height: auto; max-height: 26rem; object-fit: contain; object-position: top left; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; }
.mk-omr { display: grid; gap: var(--s-1); justify-items: start; padding: var(--s-4); border: 1px dashed var(--line); border-radius: var(--r-ctl); font-size: var(--t-sm); }
.mk-omr b { font-size: 1.8rem; line-height: 1.1; }
.mk-body { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.mk-head { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.mk-stem { margin: 0; color: var(--ink-2); white-space: pre-line; }
.mk-criteria { margin: 0; }
.mk-line { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; font-size: var(--t-sm); }
.mk-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; }
.mk-form .grow { flex: 1 1 10rem; }
.mk-bar { height: 0.5rem; border-radius: 4px; background: var(--ground-2); overflow: hidden; }
.mk-bar span { display: block; height: 100%; }
@media (max-width: 860px) { .mk-answer { grid-template-columns: 1fr; } .mk-page { grid-template-columns: 5.5rem minmax(0, 1fr); } }

/* Brief 08, A6: before publishing */
.pc-list { list-style: none; margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); display: grid; gap: var(--s-3); }
.pc-list li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--s-2); align-items: start; font-size: var(--t-md); }
.pc-list .i { margin-top: 0.2rem; }

/* Brief 08, A7 */
.sp-start { margin-top: var(--s-3); }
.sp-start > summary { list-style: none; display: inline-flex; cursor: pointer; }
.sp-start > summary::-webkit-details-marker { display: none; }

/* Brief 08, A8 */
.cal-list { display: grid; }
.cal-day { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.cal-day:last-child { border-bottom: 0; }
.cal-day.is-today { background: var(--brand-tint); }
.cal-date { display: grid; justify-items: center; align-content: start; }
.cal-date b { font-size: 1.4rem; line-height: 1.1; }
.cal-date span { font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; }
.cal-entry { padding-left: var(--s-2); border-left: 3px solid var(--line); }
.cal-entry.kind-meeting, .cal-entry.kind-training { border-left-color: var(--brand); }
.cal-entry.kind-deadline { border-left-color: var(--warn); }
.cal-entry.kind-exam { border-left-color: var(--neg); }
.cal-entry.kind-break, .cal-entry.kind-term { border-left-color: var(--pos); }
.task-list { display: grid; }
.task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.task.is-overdue { border-left: 3px solid var(--neg); }
.task-main { min-width: 0; }
.tpl-rows { display: grid; gap: var(--s-2); }
.tpl-row { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(9rem, 1.3fr) 5rem 7rem; gap: var(--s-2); }
.tpl-head { font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 700px) { .task { grid-template-columns: 1fr; } .tpl-row { grid-template-columns: 1fr 1fr; } .tpl-head { display: none; } }

/* Brief 08, A10 */
.fb-q { display: grid; grid-template-columns: minmax(0, 2fr) minmax(8rem, 1fr) minmax(0, 1.5fr); gap: var(--s-2); }
@media (max-width: 700px) { .fb-q { grid-template-columns: 1fr; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); } }
.fb-bars .bar-row { grid-template-columns: minmax(7rem, 15rem) minmax(0, 1fr) 2.5rem; }
.fb-bars .bar-row .truncate { white-space: normal; }