:root {
  --ink: #1d2a26;
  --ink-soft: #5c6b66;
  --line: #e0e3dd;
  --paper: #f6f5f0;
  --card: #fff;
  --pine: #1f4d45;
  --pine-deep: #163832;
  --pine-tint: #e6efec;
  --ochre: #b9791f;
  --ochre-tint: #fbf1df;
  --red: #b23a30;
  --red-tint: #fbe9e6;
  --green: #2d7a56;
  --green-tint: #e4f3ea;
  --blue: #2c628f;
  --blue-tint: #e5eff7;
  --radius: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
a { color: var(--pine); }
h1 { font-size: 1.5rem; margin: 0; line-height: 1.25; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Shell */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--pine-deep); color: #dfe9e5; padding: 1rem .75rem 2rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; gap: .6rem; align-items: center; padding: .25rem .5rem 1rem; color: #fff; text-decoration: none; font-weight: 600; line-height: 1.2; }
.brand-mark { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--ochre); color: #fff; display: grid; place-items: center; font-weight: 700; object-fit: cover; }
.side h4 { margin: 1rem .5rem .25rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #94aea6; font-weight: 600; }
.side a.nav { display: block; padding: .38rem .6rem; border-radius: 6px; color: #dfe9e5; text-decoration: none; }
.side a.nav:hover { background: rgba(255,255,255,.08); }
.side a.nav.active { background: #fff; color: var(--pine-deep); font-weight: 600; }
.top { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.5rem; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top form.search { flex: 1; max-width: 420px; margin: 0; }
.top form.search input { width: 100%; }
.who { margin-left: auto; display: flex; gap: .75rem; align-items: center; font-size: .9rem; }
.who form { margin: 0; }
.menu-button { display: none; }
main { padding: 1.5rem; max-width: 1240px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Parts */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.side-right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.grid > .card { margin-bottom: 0; }
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; text-decoration: none; color: inherit; display: block; }
.stat b { display: block; font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-soft); font-size: .85rem; }
.stat.alert b { color: var(--red); }
.assign-people { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: start; }
a.assign-person { display: block; margin: 0; color: inherit; text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-tap { position: relative; display: block; }
.chip-tap input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-tap span { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: .35rem .85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-weight: 600; }
.chip-tap small { color: var(--ink-soft); font-weight: 400; }
.chip-tap input:checked + span { background: var(--pine); border-color: var(--pine); color: #fff; }
.chip-tap input:checked + span small { color: #fff; }
.chip-tap input:focus-visible + span { outline: 2px solid var(--pine); outline-offset: 2px; }
.assign-class { border-top: 1px solid var(--line); padding: .55rem 0; }
.assign-class summary { min-height: 32px; font-weight: 600; cursor: pointer; }
.assign-class .chips { margin-top: .5rem; }
.pupil-row { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.team-dot { display: inline-block; width: .8rem; height: .8rem; margin-right: .4rem; border-radius: 50%; }
.avatar.small-avatar { width: 36px; height: 36px; font-size: .8rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.row-actions { white-space: nowrap; }
.row-actions a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--pine); }
.row-actions a:hover, .row-actions a:focus-visible { background: var(--pine-tint); }
.row-actions a.danger-link { color: var(--red); }
.row-actions svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.child-row { display: flex; gap: .6rem; align-items: center; }
.field-title { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.photo-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.field label.photo-button { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 0; padding: .6rem; text-align: center; white-space: normal; font-size: 1rem; }
.field label.photo-button.ghost { color: var(--pine); }
.photo-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photo-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.photo-item { width: 96px; font-size: .78rem; overflow-wrap: anywhere; }
.photo-item img { display: block; width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; }
.photo-item button { width: 100%; min-height: 40px; margin-top: .25rem; padding: .2rem; }
.grid.areas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: start; margin-bottom: 1rem; }
.route-tabs { display: flex; gap: .4rem; overflow-x: auto; margin-bottom: 1rem; padding-bottom: .3rem; }
.route-tabs a { flex: none; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: inherit; text-decoration: none; font-weight: 600; }
.route-tabs a.active { background: var(--pine); border-color: var(--pine); color: #fff; }

.btn, button { display: inline-block; font: inherit; font-weight: 600; padding: .45rem .9rem; border: 1px solid var(--pine); border-radius: 6px; background: var(--pine); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover, button:hover { background: var(--pine-deep); }
.btn.ghost, button.ghost { background: transparent; color: var(--pine); }
.btn.ghost:hover, button.ghost:hover { background: var(--pine-tint); }
.btn.danger, button.danger { background: var(--red); border-color: var(--red); }
.btn.small, button.small { padding: .2rem .55rem; font-size: .85rem; }
button.link { background: none; border: 0; color: var(--pine); padding: 0; font-weight: 400; text-decoration: underline; }

input, select, textarea { font: inherit; color: inherit; padding: .42rem .6rem; border: 1px solid #c6ccc5; border-radius: 6px; background: #fff; max-width: 100%; }
input:focus, select:focus, textarea:focus, a:focus-visible, button:focus-visible { outline: 2px solid var(--ochre); outline-offset: 1px; }
input[type=checkbox], input[type=radio] { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .2rem; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea { width: 100%; }
.field.check label { display: flex; gap: .45rem; align-items: center; }
.field.wide { grid-column: 1 / -1; }
.field .help { color: var(--ink-soft); font-size: .8rem; margin-top: .15rem; }
.field ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.field ul label { font-weight: 400; display: flex; gap: .35rem; align-items: center; }
.errorlist, .error { color: var(--red); font-size: .84rem; list-style: none; padding: 0; margin: .2rem 0 0; }
.has-error input, .has-error select { border-color: var(--red); }
.form-foot { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.filters input[type=search] { min-width: 220px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--card); }
th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: .5rem .7rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
th.num { text-align: right; }
td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: #fafaf6; }
tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
td a.rowlink { font-weight: 600; text-decoration: none; }
td a.rowlink:hover { text-decoration: underline; }

.badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 99px; background: var(--paper); color: var(--ink-soft); white-space: nowrap; }
.badge.good { background: var(--green-tint); color: var(--green); }
.badge.warn { background: var(--ochre-tint); color: #8a5a10; }
.badge.bad { background: var(--red-tint); color: var(--red); }
.badge.info { background: var(--blue-tint); color: var(--blue); }

.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: .75rem; border: 1px solid; }
.flash.success { background: var(--green-tint); border-color: #bfe0cc; color: #1f5c40; }
.flash.error { background: var(--red-tint); border-color: #f0c9c4; color: #8c2c24; }
.flash.warning, .flash.info { background: var(--ochre-tint); border-color: #eedcb8; color: #6f4a0d; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: .75rem; padding: .42rem 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .9rem; margin: 0; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }

.profile { display: flex; gap: 1rem; align-items: center; }
.avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; background: var(--pine-tint); color: var(--pine); display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; }

/* Bars */
.bars { display: flex; gap: .75rem; align-items: flex-end; height: 150px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; min-width: 0; }
.bar-pair { flex: 1; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.bar { width: 42%; max-width: 26px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bar.a { background: #b9c9c4; }
.bar.b { background: var(--pine); }
.bar-label { font-size: .78rem; color: var(--ink-soft); margin-top: .25rem; }
.legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--ink-soft); margin-top: .4rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; }
.hbar { display: grid; grid-template-columns: 70px 1fr 34px; gap: .5rem; align-items: center; padding: .15rem 0; font-size: .88rem; }
.hbar div { background: var(--paper); border-radius: 3px; height: 10px; overflow: hidden; }
.hbar i { display: block; height: 100%; background: var(--pine); }

/* Attendance pills */
.roll { list-style: none; margin: 0; padding: 0; }
.roll li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.pills { display: inline-flex; flex: none; }
.pills input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pills label { padding: .3rem .62rem; border: 1px solid #c6ccc5; margin-left: -1px; cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--ink-soft); background: #fff; user-select: none; }
.pills label:first-of-type { border-radius: 6px 0 0 6px; }
.pills label:last-of-type { border-radius: 0 6px 6px 0; }
.pills input:checked + label.P { background: var(--green); border-color: var(--green); color: #fff; }
.pills input:checked + label.A { background: var(--red); border-color: var(--red); color: #fff; }
.pills input:checked + label.L, .pills input:checked + label.D { background: var(--ochre); border-color: var(--ochre); color: #fff; }
.pills input:checked + label.E, .pills input:checked + label.O, .pills input:checked + label.G { background: var(--blue); border-color: var(--blue); color: #fff; }
.pills input:focus-visible + label { outline: 2px solid var(--ochre); }
.sticky-save { position: sticky; bottom: 0; background: var(--card); padding: .6rem 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.mark-input { width: 90px; text-align: right; }
.mark-input.bad { border-color: var(--red); }

/* Timetable and calendar */
.tt { table-layout: fixed; min-width: 640px; }
.tt td { height: 62px; padding: .3rem; font-size: .84rem; border: 1px solid var(--line); vertical-align: top; }
.tt td.break { background: var(--paper); text-align: center; color: var(--ink-soft); height: auto; vertical-align: middle; }
.tt td.clash { background: var(--red-tint); }
.tt a { display: block; height: 100%; text-decoration: none; color: inherit; min-height: 48px; }
.tt b { display: block; }
.cal { table-layout: fixed; min-width: 620px; }
.cal td { height: 92px; vertical-align: top; border: 1px solid var(--line); padding: .3rem; font-size: .82rem; }
.cal td.off { background: #f2f1ec; color: var(--ink-soft); }
.cal td.other { opacity: .45; }
.cal td.today { box-shadow: inset 0 0 0 2px var(--ochre); }
.cal .chip { display: block; background: var(--pine-tint); border-radius: 4px; padding: 0 .3rem; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal .chip.hol { background: var(--ochre-tint); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--pine-deep); padding: 1rem; }
.login-card { background: var(--card); border-radius: 10px; padding: 1.75rem; width: 100%; max-width: 380px; }
.login-card h1 { margin: .75rem 0 .1rem; }
.login-card .field { margin-top: .75rem; }
.setup-key { font: 600 1.05rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .05em; overflow-wrap: anywhere; background: var(--paper); padding: .6rem; border-radius: 6px; }
.recovery-codes { columns: 2; font: 600 1rem ui-monospace, Consolas, monospace; padding-left: 1.1rem; }
.login-card button { width: 100%; margin-top: 1rem; padding: .55rem; }
.demo-note { margin-top: 1rem; padding: .6rem .75rem; background: var(--ochre-tint); border-radius: 6px; font-size: .84rem; }

@media (max-width: 860px) {
  .shell { display: block; }
  .side { position: fixed; z-index: 20; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .18s ease; }
  .side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .menu-button { display: inline-block; }
  .top { padding: .5rem 1rem; }
  .who span, .who a { display: none; }
  main { padding: 1rem; }
  .grid.two, .grid.side-right, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .stat b { font-size: 1.3rem; }
  input, select, textarea { font-size: 16px; }
  .filters > * { flex: 1 1 100%; }

  /* Lists become stacked cards on a phone. */
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack { background: none; }
  table.stack tr { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .6rem; padding: .35rem .75rem; }
  table.stack td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; border: 0; padding: .18rem 0; overflow-wrap: anywhere; }
  table.stack td::before { content: attr(data-label); color: var(--ink-soft); text-align: left; font-size: .84rem; flex: none; }
  table.stack td:empty { display: none; }
  table.students td.photo-cell { justify-content: flex-start; }
  table.students td.row-actions { justify-content: flex-end; }
  table.stack tfoot { display: block; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }
@media print { .side, .top, .no-print { display: none !important; } main { padding: 0; } }

.hw-pictures { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.hw-pictures img { display: block; width: 100%; height: 130px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6px; }
.hw-remove { font-weight: 400; }
.hw-remove span { display: flex; gap: .3rem; align-items: center; font-size: .85rem; margin-top: .2rem; }
.hw-classes li { align-items: flex-start; gap: .75rem; }
.hw-classes li > span:first-child { flex: none; white-space: nowrap; }
.hw-classes .badge { white-space: normal; border-radius: 10px; margin-bottom: .15rem; }
.back-link { display: inline-block; margin-bottom: .6rem; padding: .3rem 0; font-weight: 600; color: var(--pine); text-decoration: none; }

.goal-entry { border: 0; border-top: 1px solid var(--line); margin: 0; padding: .6rem 0; min-width: 0; }
.goal-entry legend { font-weight: 600; padding: 0; }
.goal-entry input[name^=note] { width: 100%; margin-top: .4rem; }
.help-levels { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.help-levels input { position: absolute; opacity: 0; }
.help-levels span { display: block; padding: .35rem .6rem; font-size: .85rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
.help-levels input:checked + span { background: var(--pine); border-color: var(--pine); color: #fff; }
.help-levels input:focus-visible + span { outline: 2px solid var(--blue); }
.trend { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .3rem; height: 90px; margin: .4rem 0 .2rem; }
.trend div { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; height: 100%; }
.trend i { display: block; background: var(--pine); border-radius: 3px 3px 0 0; min-height: 2px; }
.trend span { font-size: .62rem; color: var(--ink-soft); text-align: center; white-space: nowrap; overflow: hidden; }

.att-key { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; margin-bottom: .5rem; background: none; }
.att-key span { background: none !important; display: inline-flex; align-items: center; gap: .3rem; }
.att-key span::before { content: ""; width: .7rem; height: .7rem; border-radius: 2px; }
.att-key .att-p::before, .att-bar .att-p { background: var(--green); }
.att-key .att-l::before, .att-bar .att-l { background: var(--ochre); }
.att-key .att-e::before, .att-bar .att-e { background: var(--blue); }
.att-key .att-a::before, .att-bar .att-a { background: var(--red); }
.att-bar { display: flex; height: .8rem; min-width: 110px; border-radius: 3px; overflow: hidden; background: var(--line); }
.att-bar i { display: block; height: 100%; }

.behaviour-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.behaviour-actions .btn { text-align: center; padding: .7rem .5rem; }
.timeline-item { align-items: flex-start; gap: .75rem; }
.hbar.wide { grid-template-columns: 130px 1fr 34px; }

.route-add select { flex: 1 1 220px; min-width: 0; }
.route-add label { display: block; margin-bottom: .3rem; }
.bus-sheet th, .bus-sheet td { white-space: nowrap; }
.bus-sheet td a.badge { text-decoration: none; }
.bus-sheet th:first-child, .bus-sheet td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }

/* A teacher's day */
.day-list { list-style: none; margin: 0; padding: 0; }
.day-row { display: flex; gap: .8rem; padding: .55rem .4rem; border-top: 1px solid var(--line); align-items: flex-start; }
.day-row:first-child { border-top: 0; }
.day-time { flex: none; width: 3.4rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.day-time small { display: block; color: var(--ink-soft); font-weight: 400; }
.day-what { flex: 1; min-width: 0; }
.day-lesson { display: block; }
.day-lesson + .day-lesson { margin-top: .4rem; }
.day-links { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .25rem; font-size: .9rem; }
.day-links a { display: inline-block; padding: .35rem 0; }
.day-row.break, .day-row.free { padding-top: .35rem; padding-bottom: .35rem; }
.day-row.break .day-time, .day-row.free .day-time { font-weight: 400; color: var(--ink-soft); }
.day-row.past { opacity: .55; }
.day-row.now { background: var(--pine-tint); border-radius: 8px; border-top-color: transparent; }
.day-row.now + .day-row { border-top-color: transparent; }