/* School OS · Update 114 — the office workspace, laptop first (Samuel, 15 Oct 2026: "very good, but still very down").
   Loaded LAST (after style.css, royal.css and u64.css): it only changes how things look, never what they do.
   The school's identity stays — crest, navy, gold, the Cormorant headings — with calmer surfaces, one accent (gold),
   status colours only for status, a real desktop layout (grouped side menu, top bar with breadcrumb, search and term),
   sticky table headings, centred dialogs with their buttons always in view, and a dark mode. Printing is always light. */

/* ============================================================== 1. Tokens (light · dark) */
:root{
  --bg:#f6f7fb;--panel:#fff;--panel-soft:#f0f2f8;--ink:#0f1b33;--muted:#5b6782;--line:#e3e7f0;--line-2:#d5dbe8;
  --nav:#0a1f44;--navy:#0a1f44;--navy-2:#071d3d;--gold:#c9a227;--gold-2:#e8cf8a;--gold-3:#a88234;--gold-deep:#7d5f0e;
  --accent:#0a1f44;--accent-soft:#eef1f8;
  --good:#1f8a5b;--good-soft:#e5f4ec;--warn:#b7791f;--warn-soft:#fbf1df;--bad:#c0392b;--bad-soft:#fbeae8;--info:#2b6cb0;--info-soft:#e8f0fa;
  --blue:#2b6cb0;--blue-soft:#e8f0fa;--orange:#9a6418;--orange-soft:#fbf1df;--red:#c0392b;--red-soft:#fbeae8;--purple:#6b4f9c;--purple-soft:#f2eef9;
  --radius:16px;--r-sm:10px;--shadow:0 1px 2px rgba(15,27,51,.04),0 10px 28px -18px rgba(15,27,51,.22);--shadow-lg:0 30px 80px -20px rgba(6,20,47,.45);
  --font:Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --side-w:256px;--rail-w:76px;--top-h:64px;--ease:cubic-bezier(.2,.7,.2,1);
  --side-bg:linear-gradient(180deg,#0c2350 0%,#0a1f44 38%,#071a3a 100%);
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#0b1220;--panel:#111a2e;--panel-soft:#17223a;--ink:#e8edf7;--muted:#9aa7c2;--line:#24304a;--line-2:#2f3d5c;
  --nav:#0a1222;--gold:#d9b84a;--gold-2:#e8cf8a;--gold-3:#c6a23c;--gold-deep:#d9b84a;
  --accent:#8fb0ff;--accent-soft:#1a2747;
  --good:#4cc38a;--good-soft:#15302a;--warn:#e0a84a;--warn-soft:#33281a;--bad:#ff7a6e;--bad-soft:#3a1f24;--info:#6ea8ff;--info-soft:#18294a;
  --blue:#8fb0ff;--blue-soft:#18294a;--orange:#e0a84a;--orange-soft:#33281a;--red:#ff7a6e;--red-soft:#3a1f24;--purple:#c9b4f2;--purple-soft:#2a2346;
  --shadow:0 1px 0 rgba(255,255,255,.02),0 12px 30px -20px rgba(0,0,0,.7);--shadow-lg:0 30px 80px -20px rgba(0,0,0,.75);
  --side-bg:linear-gradient(180deg,#0e1830 0%,#0a1222 100%);
}
/* The section colours (Update 36) stay as a small cue on the page medal and its kicker only — calmer than before. */
body[data-sec=people]{--sec:#2f5fb3;--sec-deep:#24508f;--sec-soft:#e8eefa}
body[data-sec=presence]{--sec:#0f7f7a;--sec-deep:#0b625e;--sec-soft:#e1f2f0}
body[data-sec=learning]{--sec:#6a3d9a;--sec-deep:#56307f;--sec-soft:#f0e9f9}
body[data-sec=staff]{--sec:#b0601b;--sec-deep:#8f480b;--sec-soft:#fbeee1}
body[data-sec=money]{--sec:#1d7a45;--sec-deep:#125830;--sec-soft:#e3f2e9}
body[data-sec=ops]{--sec:#8a5a2b;--sec-deep:#633f1b;--sec-soft:#f4ebe0}
body[data-sec=msg]{--sec:#1a7fb8;--sec-deep:#0e6596;--sec-soft:#e2f1fa}
body[data-sec=insight]{--sec:#4a6283;--sec-deep:#33465f;--sec-soft:#e8edf4}
[data-theme=dark] body[data-sec]{--sec-deep:color-mix(in srgb,var(--sec) 50%,#fff);--sec-soft:color-mix(in srgb,var(--sec) 22%,#111a2e)}

/* ============================================================== 2. Base */
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:color-mix(in srgb,var(--gold) 35%,transparent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.muted{color:var(--muted)}
kbd{font:600 11px/1 var(--font);padding:3px 6px;border-radius:6px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}
@media (prefers-reduced-motion:no-preference){
  .nav a,.btn,.icon-btn,.card,.class-tile,.quick-action,.td-tile,.side,.top-search,.o-row,.o-chip{transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease),width .2s var(--ease)}
}

/* ============================================================== 3. Shell — side menu (laptop) */
@media (min-width:901px){
  .shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100dvh}
  .side{position:sticky;top:0;height:100dvh;width:var(--side-w);padding:16px 12px 12px;background:var(--side-bg);border-right:1px solid rgba(201,162,39,.18);display:flex;flex-direction:column;overflow:hidden;z-index:35;transform:none!important;box-shadow:none}
  .side:before{background:radial-gradient(420px 260px at 0% -6%,rgba(201,162,39,.16),transparent 60%)}
  .side .mobileclose{display:none!important}
}
.side-head{display:flex;align-items:center;gap:8px;position:relative}
.side .brand{flex-direction:row;align-items:center;text-align:left;gap:12px;padding:4px 6px 14px;min-width:0;flex:1;color:#fff;text-decoration:none}
.side .brand img{width:44px;height:44px;border-radius:12px;flex-shrink:0;box-shadow:0 0 0 1.5px var(--gold-2),0 0 0 4px rgba(201,162,39,.18),0 6px 16px rgba(0,0,0,.35)}
.brand-words{min-width:0}
.side .brand .rb-name{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.05;color:#fff;white-space:nowrap}
.side .brand .rb-sub{font-size:9.5px;letter-spacing:2.2px;margin-top:3px;color:var(--gold-2);font-weight:700;text-transform:uppercase;white-space:nowrap}
.side .brand .rb-motto{font-family:var(--serif);font-style:italic;font-size:12.5px;color:#b8c4da;margin-top:1px;white-space:nowrap}
.side .rb-rule{display:none}
.side .workspace{display:none}
#nav{flex:1;overflow-y:auto;overflow-x:hidden;margin:0;padding:2px 0 8px;overscroll-behavior:contain;scrollbar-gutter:stable}
.side{overflow:clip}
#nav::-webkit-scrollbar{width:6px}#nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}
.navgrp{margin:0 0 6px}
.navgrp>p{margin:12px 10px 4px;font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:rgba(232,207,138,.72)}
.navgrp:first-child>.nav{margin-top:2px}
.side .nav{display:grid;gap:1px}
.side .nav a{position:relative;display:flex;align-items:center;gap:11px;min-height:36px;padding:7px 10px;border-radius:10px;color:#c5cfe1;font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap;box-shadow:none;background:transparent}
.side .nav a .icon{width:18px;height:18px;flex-shrink:0;color:#93a3c0}
.side .nav a .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.side .nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side .nav a:hover .icon{color:#dbe3f2}
.side .nav a.active{background:linear-gradient(90deg,rgba(201,162,39,.24),rgba(201,162,39,.08));color:#fff;font-weight:650;box-shadow:inset 3px 0 0 var(--gold-2)}
.side .nav a.active .icon{color:var(--gold-2)}
.side .nav-count{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;background:rgba(201,162,39,.2);color:#f3dfa6}
.side .nav-out{margin-left:auto;font-size:11px;color:#7f8fae}
.side .nav-count+.nav-out{margin-left:6px}
.side-bottom{margin-top:auto;padding-top:10px;border-top:1px solid rgba(201,162,39,.16)}
.side .help-tile{display:block;background:transparent;border:0;padding:0;margin:0 0 8px}
.side .help-tile b,.side .help-tile p{display:none}
.side .help-tile button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;border-radius:10px;border:1px solid rgba(201,162,39,.32);background:rgba(255,255,255,.04);color:#f3dfa6;font-size:13px;font-weight:600;text-align:left}
.side .help-tile button:hover{background:rgba(201,162,39,.14);border-color:rgba(201,162,39,.55)}
.side .help-tile button .icon{width:18px;height:18px;margin:0}
.side .userbox{display:flex;align-items:center;gap:10px;border-top:0;padding:6px 4px 0}
.side .userbox>div:nth-child(2){min-width:0;flex:1}
.side .userbox b{display:block;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .userbox small{display:block;font-size:11px;color:#9fb0c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .userbox .avatar{width:34px;height:34px;flex-shrink:0;font-size:12px}
.side .userbox .icon-btn{color:#b8c4da;width:34px;height:34px}
.side .userbox .icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---- the slim menu (icons only): smaller laptops, or when the office chooses it; it opens while in use */
@media (min-width:901px){
  .shell.rail{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .shell.rail .side{width:var(--rail-w);padding:14px 10px 10px}
  .shell.rail .side:not(:hover):not(:focus-within) .brand-words,
  .shell.rail .side:not(:hover):not(:focus-within) .navgrp>p,
  .shell.rail .side:not(:hover):not(:focus-within) .nav-label,
  .shell.rail .side:not(:hover):not(:focus-within) .nav-out,
  .shell.rail .side:not(:hover):not(:focus-within) .help-tile span,
  .shell.rail .side:not(:hover):not(:focus-within) .userbox>div:nth-child(2),
  .shell.rail .side:not(:hover):not(:focus-within) .userbox .icon-btn{display:none}
  .shell.rail .side:not(:hover):not(:focus-within) .brand{justify-content:center;padding:4px 0 12px}
  .shell.rail .side:not(:hover):not(:focus-within) .nav a{justify-content:center;padding:8px 0}
  .shell.rail .side:not(:hover):not(:focus-within) .nav-count{position:absolute;top:2px;right:4px;min-width:16px;height:16px;font-size:9.5px;padding:0 4px}
  .shell.rail .side:not(:hover):not(:focus-within) .navgrp{margin:0;padding:6px 0;border-top:1px solid rgba(255,255,255,.06)}
  .shell.rail .side:not(:hover):not(:focus-within) .navgrp:first-child{border-top:0}
  .shell.rail .side:not(:hover):not(:focus-within) .help-tile button{justify-content:center;padding:8px 0}
  .shell.rail .side:not(:hover):not(:focus-within) .userbox{justify-content:center;padding:6px 0 0}
  .shell.rail .side:is(:hover,:focus-within){width:var(--side-w);box-shadow:24px 0 60px -20px rgba(0,0,0,.55)}
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.shell.rail .side:hover{transition-delay:.12s}}

/* ============================================================== 4. Shell — top bar */
.top{height:var(--top-h);padding:0 28px;gap:16px;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);box-shadow:none;z-index:20}
.top-school{gap:10px;min-width:0;flex:1}
.top .icon-btn,.topright>.icon-btn{width:38px;height:38px;min-height:38px;border-radius:10px;display:inline-grid;place-items:center;color:var(--muted);background:transparent;border:0;margin:0}
.top .icon-btn:hover{background:var(--panel-soft);color:var(--ink)}
.top .icon-btn .icon{width:19px;height:19px}
.top .rail-toggle{display:none}
@media (min-width:901px){.top .rail-toggle{display:inline-grid}.top .mobilemenu{display:none!important}.top-crest,.top .top-id{display:none!important}.top-search span{display:block}.top-search kbd{display:inline-block}}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden}
.crumbs i{font-style:normal;color:var(--line-2)}
.crumbs span{color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;border-radius:6px}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs b{color:var(--ink);font-weight:650;overflow:hidden;text-overflow:ellipsis}
.topright{gap:8px;flex-shrink:0}
.top-search{min-width:0;width:min(34vw,360px);height:38px;min-height:38px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-soft);color:var(--muted);font-size:13px;display:flex;align-items:center;gap:10px;box-shadow:none}
.top-search:hover{border-color:var(--line-2);background:var(--panel)}
.top-search span{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-search .icon{width:17px;height:17px;flex-shrink:0}
.top-search kbd{margin-left:auto}
.term-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:600;white-space:nowrap}
.term-chip .icon{width:16px;height:16px;color:var(--gold-deep)}
.term-chip:hover{border-color:var(--gold)}
.top-separator{width:1px;height:24px;background:var(--line);margin:0 2px}
.top-avatar{width:36px;height:36px;border-radius:50%;font-size:12px;font-weight:800;background:linear-gradient(135deg,#f3dfa6,#d9b764 45%,#b8902f);color:var(--navy);border:0}
#help-slot:empty{display:none}
.notif-dot{top:7px;right:8px}
@media (max-width:1180px){.term-chip span{display:none}.term-chip{padding:0 10px}}
@media (max-width:1100px) and (min-width:901px){.top-search{width:220px}}
@media (max-width:900px){.top-search span,.top-search kbd{display:none}.top-search{width:38px;padding:0;justify-content:center;border-color:transparent;background:transparent}.term-chip{display:none}}

/* the strip under the top bar: quiet when everything is fine, clear when something needs a look */
.school-sync-banner{padding:6px 28px;min-height:32px;font-size:12px;background:transparent;color:var(--muted);border-bottom:1px solid var(--line)}
.school-sync-banner [data-school-status]{display:inline-flex;align-items:center;gap:8px}
.school-sync-banner [data-school-status]:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 18%,transparent)}
.school-sync-banner.is-ok [data-school-status]:before{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent)}
.school-sync-banner:not(.is-ok){background:var(--warn-soft);color:var(--ink)}
.school-sync-banner .text-btn{font-size:12px;min-height:28px;color:var(--gold-deep)}

/* ============================================================== 5. Drawer (≤900 px) — the same menu slides in */
@media (max-width:900px){
  .shell{display:block}
  .side{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:300px;max-width:88vw;transform:translateX(-105%);transition:transform .22s ease;padding:18px 14px 14px;z-index:45;display:flex;flex-direction:column;overflow:hidden;background:var(--side-bg)}
  .side.open{transform:translateX(0);box-shadow:10px 0 70px rgba(0,0,0,.35)}
  .side .mobileclose{display:grid!important;position:static;flex-shrink:0;color:#b8c4da;width:40px;height:40px;place-items:center;border-radius:10px}
  .side .workspace{display:flex;margin:0 0 10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(201,162,39,.25);background:rgba(255,255,255,.04)}
  .side .nav a{min-height:44px;font-size:14.5px}
  .scrim.open{display:block;position:fixed;inset:0;background:rgba(5,12,26,.55);backdrop-filter:blur(3px);z-index:40}
  .top .mobilemenu{display:inline-grid!important}
  .top{padding:0 16px}
}
@media (max-width:900px) and (min-width:761px){
  .top-crest{display:block;width:32px;height:32px;border-radius:9px}
  .top .top-id{display:none}
}
/* phone top bar (≤760): crest, the short school name and "Term 1 · 2026/27" (Update 104/105), no breadcrumb */
@media (max-width:760px){
  .crumbs{display:none}
  .top{height:60px;padding:0 10px 0 6px;gap:4px;background:color-mix(in srgb,var(--panel) 92%,transparent)}
  .top .top-id{display:block;min-width:0}
  .top-school .school-title{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink);line-height:1.1}
  .top-school small{font-size:11.5px;color:var(--muted)}
  .top-crest{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1.5px var(--gold)}
  .topright{gap:0}
  .topright .theme-button,.top-separator,.top-avatar{display:none}
  .top .icon-btn,.topright>.icon-btn,.top-search{width:44px!important;height:44px;min-height:44px}
  .school-sync-banner{padding:6px 16px}
}

/* ============================================================== 6. Content and page heading */
.content{max-width:1440px;margin:0 auto;padding:28px 32px 40px;min-height:calc(100dvh - var(--top-h) - 33px)}
@media (min-width:1600px){.content{padding:32px 40px 48px}}
@media (max-width:1190px) and (min-width:761px){.content{padding:24px 24px 36px}}
.page-head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.page-head:after,body[data-sec] .page-head:after{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:2px;border-radius:2px;background:var(--gold)}
body[data-sec] .page-head>div:first-child{column-gap:16px;align-items:center}
.page-head h1{font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:-.2px;line-height:1.1;color:var(--ink)}
.page-head .eyebrow{font-size:10.5px;letter-spacing:1.8px;margin-bottom:6px;color:var(--gold-deep)}
.page-head .eyebrow:before{width:14px;height:1.5px}
body[data-sec] .page-head .eyebrow{color:var(--sec-deep)}
body[data-sec] .page-head .eyebrow:before{background:var(--sec)}
.page-head p{font-size:14px;line-height:1.55;color:var(--muted);margin-top:6px;max-width:78ch}
.sec-medal{width:46px;height:46px;background:var(--sec-soft);color:var(--sec);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sec) 25%,transparent)}
.sec-medal svg{width:21px;height:21px}
.head-actions{gap:8px}
.eyebrow{color:var(--gold-deep)}

/* ============================================================== 7. Cards, sections, numbers */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.card:before,.metric:before{display:none}
.card-head{margin-bottom:14px;align-items:flex-start}
.card-head h2,.card h2:not(.serif){font-family:var(--font);font-size:16px;font-weight:650;letter-spacing:0;line-height:1.35;color:var(--ink)}
body[data-sec] .card-head h2:before{display:none}
.card-head p{font-size:13px;color:var(--muted);margin-top:3px}
.card h3{font-size:14.5px;font-weight:650}
.section-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:28px 0 12px}
.section-label h2{font-family:var(--font);font-size:16px;font-weight:650;letter-spacing:0;color:var(--ink)}
.section-label>span{font-size:12.5px;color:var(--muted)}
.metrics{gap:16px}
.metric,body[data-sec] .metric{padding:18px 20px 16px;border-radius:var(--radius);border:1px solid var(--line);border-top:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.metric-top>span{font-size:11.5px;letter-spacing:.9px;font-weight:650;color:var(--muted);text-transform:uppercase}
.metric-icon,.metric.blue .metric-icon,.metric.purple .metric-icon,.metric.orange .metric-icon,body[data-sec] .metric-icon,body[data-sec] .metric.blue .metric-icon,body[data-sec] .metric.purple .metric-icon,body[data-sec] .metric.orange .metric-icon{width:32px;height:32px;border-radius:10px;background:var(--panel-soft);color:var(--gold-deep);box-shadow:none}
.metric-icon .icon{width:16px;height:16px}
.metric-value{font-family:var(--serif);font-size:38px;font-weight:700;line-height:1;margin:12px 0 6px;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.metric-value.money{font-size:30px}
.metric-foot{font-size:12.5px;color:var(--muted)}
.info-strip,body[data-sec] .info-strip:not(.gold):not(.fin-dup){border-radius:12px;border:1px solid color-mix(in srgb,var(--info) 22%,transparent);border-left:1px solid color-mix(in srgb,var(--info) 22%,transparent);background:var(--info-soft);color:var(--ink);font-size:13px;line-height:1.6;padding:12px 14px}
.info-strip>.icon{color:var(--info)}
.empty{padding:40px 20px}
.empty>.icon{color:var(--gold)}
.empty h3{font-family:var(--serif);font-size:22px;color:var(--ink)}
.empty p{font-size:13.5px;color:var(--muted)}
.workspace-note{font-size:12px;color:var(--muted);margin-top:28px;padding-top:14px;border-top:1px solid var(--line)}

/* ============================================================== 8. Buttons, chips, badges */
.btn{min-height:40px;padding:9px 16px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;letter-spacing:.1px;background:var(--navy);color:#fff;border:1px solid var(--navy);box-shadow:0 1px 2px rgba(6,20,47,.12)}
.btn:hover{background:var(--navy-2);transform:none}
.btn:active{transform:translateY(1px)}
.btn .icon{width:17px;height:17px}
.btn.secondary,.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.btn.secondary:hover,.btn.ghost:hover{border-color:var(--gold);background:var(--panel)}
.btn.gold{background:linear-gradient(135deg,#f0d999,#d4b04f 50%,#c19a2c);color:var(--navy);border-color:#c9a227;font-weight:700}
.btn.gold:hover{filter:brightness(1.04)}
.btn.soft{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.btn.danger{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.btn.small{min-height:34px;padding:6px 12px;font-size:12.5px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
[data-theme=dark] .btn{background:linear-gradient(135deg,#ecd58f,#d9b84a 55%,#c6a23c);color:#0a1f44;border-color:#d9b84a}
[data-theme=dark] .btn.secondary,[data-theme=dark] .btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--line-2)}
[data-theme=dark] .btn.soft{background:var(--accent-soft);color:var(--accent);border-color:transparent}
[data-theme=dark] .btn.danger{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.royal-hero .btn.ghost,.rh-actions .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.text-btn{color:var(--gold-deep);font-weight:600;font-size:13px}
[data-theme=dark] .text-btn{color:var(--gold)}
.badge{border-radius:999px;font-size:11.5px;font-weight:650;padding:3px 10px;background:var(--info-soft);color:var(--info)}
.badge.good{background:var(--good-soft);color:var(--good)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.neutral{background:var(--panel-soft);color:var(--muted)}
.pill{border-radius:999px;border-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold-deep);font-weight:650}
.segmented{border-radius:10px;padding:3px;background:var(--panel-soft);border:1px solid var(--line)}
.segmented button{min-height:32px;padding:6px 12px;font-size:12.5px;font-weight:600;border-radius:8px;color:var(--muted)}
.segmented button.active,[data-theme=dark] .segmented button.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(6,20,47,.12),inset 0 0 0 1px var(--line)}
.theme-seg button{min-width:64px}

/* ============================================================== 9. Tabs (underline on laptops; pills on phones — Update 104) */
.tabs{gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:10px 12px 11px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0}
.tabs button:hover{color:var(--ink);background:var(--panel-soft)}
.tabs button.active,body[data-sec] .tabs button.active,[data-theme=dark] .tabs button.active{color:var(--ink);border-color:var(--gold);border-bottom-width:2px;font-weight:650;background:transparent}

/* ============================================================== 10. Forms — every chooser looks like one family */
.field>span{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;display:block}
.field input,.field select,.field textarea{min-height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-size:14px;padding:8px 12px}
.field textarea{min-height:88px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent);outline:none}
.field select,:where(#view,#modal) select:not([class]),.o-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6782' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:34px}
:where(#view,#modal) select:not([class]),.o-select{min-height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);background-color:var(--panel);color:var(--ink);font:500 14px/1.2 var(--font);padding:8px 34px 8px 12px;max-width:100%;cursor:pointer}
:where(#view,#modal) select:not([class]):hover,.o-select:hover{border-color:var(--gold)}
:where(#view,#modal) select:not([class]):focus,.o-select:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent);outline:none}
[data-theme=dark] .field select,[data-theme=dark] :where(#view,#modal) select:not([class]),[data-theme=dark] .o-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa7c2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.input-wrap,.filter-select{border-radius:var(--r-sm);border-color:var(--line-2);background:var(--panel);min-height:40px}
.input-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.form-actions{border-top:1px solid var(--line);gap:8px}

/* ============================================================== 11. Tables — hairline rows, sticky heading, numbers on the right */
.tablewrap{border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:none}
table{font-size:13.5px}
th,body[data-sec] th{background:var(--panel-soft);color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.7px;text-transform:uppercase;padding:11px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:first-child td{border-top:0}
tbody tr:hover td{background:color-mix(in srgb,var(--panel-soft) 60%,transparent)}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:901px){#view .tablewrap:not(.ph-cards){max-height:calc(100dvh - 170px);overflow:auto}}
.toolbar{gap:10px;margin:0 0 14px}

/* ============================================================== 12. Dialogs — centred, buttons always in view */
.modal{background:rgba(6,14,30,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:24px}
.modalbox{width:720px;max-width:100%;border-radius:18px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-lg);padding:24px 28px}
.modalbox.wide{width:960px}
.modal-head{margin-bottom:18px;gap:16px}
.modal-head h2{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1.15;color:var(--ink)}
.modal-head p{font-size:13.5px;color:var(--muted);margin-top:4px}
.modalbox>form>.form-actions:last-child,.modalbox>.form-actions:last-child{position:sticky;bottom:-24px;margin:20px -28px -24px;padding:14px 28px;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(6px);z-index:3;border-radius:0 0 18px 18px}
.search-dialog{width:640px}
.search-box{border-radius:12px}
.search-result{border-radius:12px}
.search-result:hover,.search-result:focus-visible{background:var(--panel-soft)}
.search-hint kbd{margin:0 2px}
@media (max-width:760px){.modalbox{padding:20px 18px}.modalbox>form>.form-actions:last-child,.modalbox>.form-actions:last-child{bottom:-20px;margin:18px -18px -20px;padding:12px 18px}}

/* ============================================================== 13. Overview (dashboard) */
.royal-hero{padding:24px 28px;gap:24px;border-radius:20px;margin-bottom:20px;box-shadow:0 18px 40px -30px rgba(6,20,47,.8)}
.royal-hero:after{height:3px}
.rh-crest{width:88px;height:88px;border-radius:22px}
.rh-main h1{font-size:36px;margin-top:6px}
.rh-school{font-size:17px;margin-top:4px}
.rh-actions{margin-top:14px}
.rh-medal{padding:10px 14px;border-radius:16px}
.rh-medal>b{width:54px;height:54px;font-size:32px}
.rh-medal span{font-size:20px}
.today{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px 16px;margin:0 0 8px}
.today:before{display:none}
.td-head h2{font-family:var(--font);font-size:16px;font-weight:650;color:var(--ink)}
.td-head span{color:var(--muted)}
.td-tiles{background:transparent;gap:12px;border-radius:0}
.td-tile{background:var(--panel-soft);border:1px solid var(--line);border-radius:14px;color:var(--ink);padding:14px 16px}
.td-tile:hover,.td-tile:focus-visible{background:var(--panel);border-color:var(--gold)}
.td-tile b{color:var(--ink);font-size:34px}
.td-tile b i{color:var(--muted);font-size:20px}
.td-tile span{font-size:13px;font-weight:650}
.td-tile small{color:var(--muted)}
.td-tile.t-money b{font-size:26px;padding-top:6px}
.td-ok{color:var(--good)!important}
.td-attn{background:var(--bad-soft);border-radius:12px}
.td-attn h3{color:var(--bad)}
.td-item{color:var(--ink)}
.class-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.class-tile{min-height:78px;padding:12px 14px;border-radius:14px;box-shadow:none}
.class-tile:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.class-tile b{font-size:21px}
.class-tile:before{width:3px}
.quick-grid{gap:12px}
.quick-action{border-radius:14px;padding:14px 16px;box-shadow:none;background:var(--panel);border:1px solid var(--line)}
.quick-action:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.quick-action>span,.quick-action:nth-child(n)>span{width:38px;height:38px;background:var(--panel-soft);color:var(--gold-deep);box-shadow:none;border-radius:12px}
.dashboard-columns{gap:16px;margin-top:20px}
.stack{gap:16px}
.task-icon{border-radius:10px}
.donut{background:conic-gradient(var(--gold) 0 var(--p),var(--panel-soft) var(--p) 100%)}

/* ============================================================== 14. New office screens (Update 114) */
.o112{display:grid;gap:16px}
.o-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.o-toolbar .o-grow{flex:1}
.o-search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);min-width:min(280px,100%)}
.o-search input{border:0;background:transparent;outline:none;font:inherit;font-size:14px;color:var(--ink);min-width:0;flex:1;height:38px}
.o-search .icon{width:16px;height:16px;color:var(--muted)}
.o-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.o-chips{display:flex;flex-wrap:wrap;gap:6px}
.o-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font:600 13px/1 var(--font);cursor:pointer;white-space:nowrap}
.o-chip:hover{border-color:var(--gold)}
.o-chip.on,.o-chip[aria-pressed=true],.o-chip[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:#fff}
[data-theme=dark] .o-chip.on,[data-theme=dark] .o-chip[aria-pressed=true],[data-theme=dark] .o-chip[aria-selected=true]{background:var(--gold);border-color:var(--gold);color:#0a1f44}
.o-chip small{font-weight:600;opacity:.7}
.o-label{font-size:11.5px;font-weight:650;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.o-pickers{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-end}
.o-pickers>div{min-width:0}
.o-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap;background:var(--panel-soft);color:var(--muted)}
.o-status:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.o-status.good{background:var(--good-soft);color:var(--good)}
.o-status.warn{background:var(--warn-soft);color:var(--warn)}
.o-status.bad{background:var(--bad-soft);color:var(--bad)}
.o-status.info{background:var(--info-soft);color:var(--info)}
.o-status.plain:before{display:none}
.o-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.o-kv>div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft)}
.o-kv b{display:block;font-family:var(--serif);font-size:28px;line-height:1.05;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.o-kv span{font-size:12.5px;color:var(--muted)}
.o-note{font-size:13px;color:var(--muted);margin:0}
.o-lead{font-size:14px;color:var(--muted);margin:0 0 12px;max-width:80ch}
/* the question-level bar: remember · understand · apply · reason */
.o-mix{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--panel-soft);min-width:140px}
.o-mix i{display:block;height:100%}
.o-mix .l-recall,.o-key .l-recall:before{background:#b8c2d6}
.o-mix .l-understand,.o-key .l-understand:before{background:#6e8fc9}
.o-mix .l-apply,.o-key .l-apply:before{background:#2f5fb3}
.o-mix .l-reason,.o-key .l-reason:before{background:#c9a227}
[data-theme=dark] .o-mix .l-recall,[data-theme=dark] .o-key .l-recall:before{background:#56627e}
[data-theme=dark] .o-mix .l-understand,[data-theme=dark] .o-key .l-understand:before{background:#5f7fbf}
[data-theme=dark] .o-mix .l-apply,[data-theme=dark] .o-key .l-apply:before{background:#8fb0ff}
.o-mixtext{font-size:12px;color:var(--muted);margin-top:5px;white-space:nowrap}
.o-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
.o-key span{display:inline-flex;align-items:center;gap:6px}
.o-key span:before{content:"";width:10px;height:10px;border-radius:3px}
.o-frac{font-variant-numeric:tabular-nums;white-space:nowrap}
.o-frac b{font-weight:650;color:var(--ink)}
.o-frac small{color:var(--muted);font-size:12px}
.o-bar{height:6px;border-radius:999px;background:var(--panel-soft);overflow:hidden;margin-top:6px;min-width:80px}
.o-bar i{display:block;height:100%;background:var(--good);border-radius:999px}
.o-bar i.warn{background:var(--warn)}.o-bar i.bad{background:var(--bad)}
.o-name b{display:block;font-weight:650;color:var(--ink)}
.o-name small{display:block;color:var(--muted);font-size:12px;margin-top:2px;max-width:340px;white-space:normal}
.o-table td{vertical-align:top}
.o-table .o-mix{margin-top:4px}
/* lesson plan: lesson by lesson */
.o-week{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.o-week+.o-week{margin-top:12px}
.o-week>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:var(--panel-soft);border-bottom:1px solid var(--line);font-size:13px;font-weight:650;color:var(--ink)}
.o-week>header small{color:var(--muted);font-weight:500}
.o-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:11px 16px;border-top:1px solid var(--line)}
.o-week>.o-row:first-of-type{border-top:0}
.o-row.now{background:color-mix(in srgb,var(--gold) 9%,transparent);box-shadow:inset 3px 0 0 var(--gold)}
.o-when b{display:block;font-size:13.5px;font-weight:650;color:var(--ink)}
.o-when small{color:var(--muted);font-size:12px}
.o-what{min-width:0}
.o-what b{font-weight:650;color:var(--ink)}
.o-code,.o-what .o-code{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--gold-deep);background:color-mix(in srgb,var(--gold) 12%,transparent);padding:3px 6px;border-radius:6px;margin-right:6px;white-space:nowrap}
.o-what small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.o-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.o-log{display:grid;gap:0}
.o-log>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.o-log>div:first-child{border-top:0}
.o-log time{color:var(--muted);font-size:12.5px}
.o-log small{color:var(--muted)}
/* lesson note (read and print) */
.o-noteview{display:grid;gap:14px}
.o-noteview .o-nhead{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft)}
.o-noteview .o-nhead div span{display:block;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:650}
.o-noteview .o-nhead div b{font-size:14px;font-weight:600;color:var(--ink)}
.o-noteview h4{margin:0 0 6px;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--gold-deep)}
.o-noteview p,.o-noteview li{font-size:14px;line-height:1.6;margin:0;white-space:pre-wrap}
.o-noteview ul{margin:0;padding-left:20px}
.o-phases{display:grid;gap:10px}
.o-phase{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.o-phase header{display:flex;justify-content:space-between;gap:8px;font-weight:650;margin-bottom:6px}
.o-phase header small{color:var(--muted);font-weight:500}
.o-comment{border-left:3px solid var(--warn);background:var(--warn-soft);padding:10px 14px;border-radius:0 10px 10px 0;font-size:13.5px}
/* pupils across subjects */
.o-pgrid td.o-cell{text-align:center;font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.o-cell.good{color:var(--good)}.o-cell.warn{color:var(--warn)}.o-cell.bad{color:var(--bad)}.o-cell.none{color:var(--muted);font-weight:400}
.o-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--muted)}
.o-dot.good{background:var(--good)}.o-dot.warn{background:var(--warn)}.o-dot.bad{background:var(--bad)}
/* topic sheet */
.o-sheet-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.o-sheet-col{border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.o-sheet-col h4{margin:0 0 8px;font-size:13px;display:flex;align-items:center;gap:6px}
.o-sheet-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13.5px}
.o-sheet-col li{display:flex;justify-content:space-between;gap:8px}
.o-sheet-col li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.o-sheet-cols{grid-template-columns:1fr}.o-row{grid-template-columns:1fr;gap:4px}.o-tags{justify-content:flex-start}.o-log>div{grid-template-columns:1fr;gap:2px}}
/* curriculum map: the choosers (class buttons, subject buttons, teacher / pupil lists) */
#cmoBody .actions{gap:10px;align-items:center;flex-wrap:wrap}
.cmo-classes,.cmo-subjects{display:flex;flex-wrap:wrap;gap:6px}
.cmo-pick{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin-bottom:6px}
.cmo-pick .o-select{width:auto;min-width:200px;max-width:340px}
.cmo-tile{cursor:pointer}
.cmo-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cmo-tile:hover{border-color:var(--gold)}
/* the office curriculum page (curriculum.js): calmer class tabs and subject chips */
#view .hrc-tab{border-color:var(--line-2);background:var(--panel);color:var(--ink);font-weight:600;min-height:36px;padding:7px 14px}
#view .hrc-tab:hover{border-color:var(--gold)}
#view .hrc-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
[data-theme=dark] #view .hrc-tab.on{background:var(--gold);border-color:var(--gold);color:#0a1f44}
#view .hrc-chip{border-color:var(--line-2);background:var(--panel);color:var(--ink)}
#view .hrc-chip.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--panel))}
#view .hrc-search input{min-height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);padding:8px 12px}
/* term calendar (Settings) */
.o-cal{display:grid;gap:16px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.o-cal h3{font-size:14.5px;font-weight:650;margin:0 0 4px}
.o-holidays{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.o-holidays li{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--line);font-size:13.5px}
.o-holidays li:first-child{border-top:0}
.o-holidays li span{color:var(--muted);white-space:nowrap}
.o-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.o-closed{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.o-closed .o-chip{cursor:default}
.o-closed .o-chip button{border:0;background:transparent;color:inherit;font-size:16px;line-height:1;padding:0 0 0 4px;cursor:pointer}
.o-row-add{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
/* Overview: "Learning this week" */
.o-week-card .o-lines{display:grid;gap:0}
.o-week-card .o-line{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;font:inherit}
.o-week-card .o-line:first-child{border-top:0}
.o-week-card .o-line:hover b{color:var(--gold-deep)}
.o-week-card .o-line .o-ico{width:34px;height:34px;border-radius:10px;background:var(--panel-soft);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0}
.o-week-card .o-line .o-ico .icon{width:17px;height:17px}
.o-week-card .o-line div{flex:1;min-width:0}
.o-week-card .o-line b{display:block;font-size:13.5px;font-weight:650}
.o-week-card .o-line small{display:block;color:var(--muted);font-size:12.5px}

/* ============================================================== 15. The Office guide */
.og{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
.og-toc{position:sticky;top:calc(var(--top-h) + 16px);max-height:calc(100dvh - var(--top-h) - 32px);overflow:auto;padding:14px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.og-toc p{margin:4px 8px 8px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.og-toc a{display:block;padding:6px 8px;border-radius:8px;font-size:13px;color:var(--ink);text-decoration:none;line-height:1.35}
.og-toc a:hover{background:var(--panel-soft)}
.og-toc a.on{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--ink);font-weight:650;box-shadow:inset 2px 0 0 var(--gold)}
.og-toc a small{display:block;color:var(--muted);font-size:11.5px}
.og-main{min-width:0;display:grid;gap:16px}
.og-intro{padding:22px 24px;border-radius:var(--radius);background:linear-gradient(135deg,#0c2552,#0a1f44 60%,#071a3a);color:#fff;position:relative;overflow:hidden}
.og-intro:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#f0d999,#c9a227,#a88234)}
.og-intro h2{font-family:var(--serif);font-size:26px;font-weight:700;margin:0 0 6px;color:#fff}
.og-intro p{margin:0;color:#d5ddec;font-size:14.5px;line-height:1.6;max-width:78ch}
.og-intro .og-crest{float:right;width:64px;height:64px;border-radius:16px;margin:0 0 8px 16px;box-shadow:0 0 0 1.5px var(--gold-2)}
.og-sec{scroll-margin-top:calc(var(--top-h) + 16px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow)}
.og-sec>header{display:flex;align-items:flex-start;gap:14px;margin-bottom:10px}
.og-sec>header .og-ico{width:40px;height:40px;border-radius:12px;background:var(--panel-soft);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0}
.og-sec>header .og-ico .icon{width:20px;height:20px}
.og-sec h2{font-family:var(--serif);font-size:24px;font-weight:700;margin:0;line-height:1.15;color:var(--ink)}
.og-sec header p{margin:3px 0 0;color:var(--muted);font-size:13.5px}
.og-sec h3{font-size:15px;font-weight:650;margin:18px 0 6px;color:var(--ink)}
.og-sec p,.og-sec li{font-size:14.5px;line-height:1.7;color:var(--ink)}
.og-sec p{margin:0 0 10px;max-width:82ch}
.og-sec ul,.og-sec ol{margin:4px 0 12px;padding-left:22px;max-width:82ch}
.og-sec li{margin:3px 0}
.og-sec li::marker{color:var(--gold-deep)}
.og-why{margin:12px 0 4px;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--gold) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);font-size:14px;line-height:1.65}
.og-why b{color:var(--gold-deep)}
.og-tip{margin:12px 0 4px;padding:12px 16px;border-radius:12px;background:var(--info-soft);font-size:14px;line-height:1.65}
.og-btn{display:inline-block;font:600 12.5px/1.2 var(--font);padding:2px 8px;border-radius:7px;border:1px solid var(--line-2);background:var(--panel-soft);color:var(--ink);white-space:nowrap}
.og-go{margin-top:6px}
mark.og-hit{background:color-mix(in srgb,var(--gold) 40%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.og-none{padding:30px;text-align:center;color:var(--muted)}
.og-count{font-size:13px;color:var(--muted)}
@media (max-width:1100px){.og{grid-template-columns:1fr}.og-toc{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:4px}.og-toc p{width:100%}.og-toc a small{display:none}.og-toc a{border:1px solid var(--line)}}
@media (max-width:760px){.og-sec{padding:18px 16px}.og-sec h2{font-size:22px}.og-intro{padding:18px}.og-intro .og-crest{display:none}}

/* ============================================================== 16. Phones (≤760): bottom bar and touch sizes */
@media (max-width:760px){
  .mobile-nav{background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mobile-nav a,.mobile-nav button{font-size:11px;font-weight:600;min-height:48px;color:var(--muted)}
  .mobile-nav a.active{color:var(--ink);background:color-mix(in srgb,var(--gold) 14%,transparent)}
  .mobile-nav a.active .icon{color:var(--gold-deep)}
  .mobile-nav .add-action{background:linear-gradient(135deg,#f0d999,#d4b04f 50%,#c19a2c);color:var(--navy)}
  .content{padding:18px 16px 110px}
  .btn{min-height:44px}
  .btn.small{min-height:40px}
  .o-chip{min-height:40px}
  .card{padding:16px}
  .page-head h1{font-size:26px!important}
  .page-head:after{display:none}
  .o-toolbar{gap:8px}
  .o-search{min-width:0;flex:1 1 100%}
  .side .nav a{min-height:44px}
  /* one accent: the current tab is navy (gold in the dark look), not the section colour */
  .tabs button.active,body[data-sec] .tabs button.active,.tw-tabs.tabs button.on{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important}
  [data-theme=dark] .tabs button.active,[data-theme=dark] body[data-sec] .tabs button.active,[data-theme=dark] .tw-tabs.tabs button.on{background:var(--gold)!important;border-color:var(--gold)!important;color:#0a1f44!important}
  .tw-tabs.tabs button{border:1px solid var(--line)!important;border-radius:999px!important}
}

/* ============================================================== 17. Dark mode touches for older parts of the office */
[data-theme=dark] .side{border-right-color:rgba(217,184,74,.12)}
[data-theme=dark] .royal-hero{box-shadow:none;border:1px solid rgba(217,184,74,.18)}
[data-theme=dark] .class-tile,[data-theme=dark] .quick-action{background:var(--panel)}
[data-theme=dark] th{color:var(--muted)}
[data-theme=dark] .card,[data-theme=dark] .metric,[data-theme=dark] .tablewrap{border-color:var(--line)}
[data-theme=dark] .info-strip{color:var(--ink)}
[data-theme=dark] .og-why{background:color-mix(in srgb,var(--gold) 10%,var(--panel))}
[data-theme=dark] input,[data-theme=dark] textarea{color-scheme:dark}

/* ============================================================== 18. Printing: always light, no menus */
@media print{
  html,html[data-theme]{color-scheme:light;--bg:#fff;--panel:#fff;--panel-soft:#f4f5f9;--ink:#0f1b33;--muted:#4a5670;--line:#d9dee8;--line-2:#c9d0de;--gold-deep:#7d5f0e;--accent:#0a1f44;--good:#1f8a5b;--warn:#b7791f;--bad:#c0392b;--info:#2b6cb0}
  body{background:#fff!important;color:#000}
  .side,.top,.mobile-nav,.school-sync-banner,.scrim,.og-toc,.o-toolbar,.o-noprint,.workspace-note{display:none!important}
  .shell{display:block!important}
  .content{padding:0!important;max-width:none}
  .card,.og-sec,.o-week{box-shadow:none!important;break-inside:avoid}
  .og{display:block}
  .og-sec{border:0;padding:0 0 10mm;break-inside:auto}
  .og-sec h2{font-size:20pt}
  .og-intro{background:#fff!important;color:#000!important;border:1px solid #ccc}
  .og-intro h2,.og-intro p{color:#000!important}
  #view .tablewrap{max-height:none!important;overflow:visible!important}
  th{position:static}
}

/* ============================================================== 19. Curriculum map extras (Update 114) */
.cmo-field{display:grid;gap:0;min-width:180px}
.cmo-field .o-select{min-width:180px}
.cmo-h{font-size:15px;font-weight:650;margin:16px 0 8px}
.cmo-note{background:var(--warn-soft);color:var(--ink);border-radius:10px;padding:9px 12px;font-size:13px;margin:12px 0 0}
.cmo-key{gap:14px;align-items:center}
.cmo-key .good i{background:var(--good)}.cmo-key .weak i{background:var(--warn)}.cmo-key .gap i{background:var(--bad)}.cmo-key .coming i{background:var(--line-2)}
.cmo-hint{margin-left:auto;color:var(--muted);font-size:12px}
button.cmo-tile{font:inherit;text-align:left;color:inherit;width:100%}
.cmo-tile{border-radius:12px;padding:10px 11px;border:1px solid var(--line);background:var(--panel)}
.cmo-tile b{font:600 11.5px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.2px}
.cmo-tile.good{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 30%,transparent);color:var(--ink)}
.cmo-tile.weak{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--ink)}
.cmo-tile.gap{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent);color:var(--ink)}
.cmo-tile.good small{color:var(--good)}.cmo-tile.weak small{color:var(--warn)}.cmo-tile.gap small{color:var(--bad)}
.cmo-pills i{background:var(--panel-soft);color:var(--muted)}
.cmo-pills .good{background:var(--good-soft);color:var(--good)}.cmo-pills .weak{background:var(--warn-soft);color:var(--warn)}.cmo-pills .gap{background:var(--bad-soft);color:var(--bad)}
.cmo-n{border-left-width:3px;border-radius:0 8px 8px 0;background:var(--panel-soft);padding:8px 12px}
.cmo-n.gap{border-color:var(--bad)}.cmo-n.weak{border-color:var(--warn)}.cmo-n.good{border-color:var(--good)}
.o-sub{font-size:14px;font-weight:650;margin:0 0 8px}
.cmo-prow{cursor:pointer}
.cmo-prow:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.cmo-avg td{background:var(--panel-soft);font-weight:650}
.o-pgrid th.num{white-space:nowrap}

/* ============================================================== 20. Tests & class work (Update 114) */
.tw-tabs.tabs{display:flex;flex-wrap:nowrap;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.tw-tabs.tabs button,.tw-tabs.tabs button.on{border:0;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;background:transparent;color:var(--muted);min-height:42px;padding:10px 12px 11px;font-weight:600;font-size:14px}
.tw-tabs.tabs button.on,.tw-tabs.tabs button.active{color:var(--ink);border-bottom-color:var(--gold);background:transparent}
.tw-bar{gap:12px;align-items:flex-end;margin:0 0 14px}
.tw-bar .field select{min-width:200px}
.tw-bar p{margin:0 0 10px;font-size:13px}
.tw-strip{display:flex;flex-wrap:wrap;gap:6px 20px;padding:12px 16px;margin:0 0 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:13px;color:var(--muted)}
.tw-strip b{font-family:var(--serif);font-size:22px;color:var(--ink);margin-right:4px;font-variant-numeric:lining-nums}
.tw-day{margin:14px 0 6px;font-size:12px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.ot-group{margin:0 0 22px}
.ot-group-h h2{font-family:var(--font);font-size:16px;font-weight:650}
.ot-group-h p{font-size:13px}
.ot-card{grid-template-columns:58px minmax(0,1fr);gap:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);border-left:3px solid var(--gold);box-shadow:none;margin:0 0 8px;background:var(--panel)}
.ot-card:hover{box-shadow:var(--shadow)}
.ot-card.draft{border-left-color:var(--line-2)}.ot-card.written{border-left-color:var(--warn)}.ot-card.done{border-left-color:var(--good)}
.ot-card.ot-today{border-left-color:var(--bad);background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 8%,transparent),var(--panel) 40%)}
.ot-date{background:var(--panel-soft);color:var(--muted);border:1px solid var(--line);border-radius:12px}
.ot-date b{color:var(--ink);font-size:26px}
.ot-top{gap:6px 10px}
.ot-top h3{font-size:15.5px;font-weight:650}
.tw-chips{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.tw-by{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:650;background:var(--panel-soft);color:var(--ink);border:1px solid var(--line)}
.tw-by.office{background:color-mix(in srgb,var(--gold) 16%,var(--panel));border-color:color-mix(in srgb,var(--gold) 40%,transparent);color:var(--gold-deep)}
.tw-by.school{background:var(--info-soft);border-color:transparent;color:var(--info)}
.ot-what{margin:6px 0 2px;font-size:14px}
.ot-meta{font-size:13px;color:var(--muted)}
.ot-acts{gap:8px;margin-top:10px}
.tw-clash{border-left:3px solid var(--bad)!important;margin-bottom:16px}
.tw-clash h3{color:var(--bad);font-size:15px}
.ot-lock.shut{background:var(--navy);border-color:rgba(201,162,39,.35)}
.ot-lock.open{background:var(--good-soft);color:var(--ink);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.ot-lock.off{background:var(--panel-soft);color:var(--muted)}
.tw-page{background:#fff;color:#111}
[data-theme=dark] .tw-page{border-color:var(--line)}

/* ---- the marks of one piece of work: clean — summary beside the table (laptop), summary then a list (phone) */
.modalbox.mk-box{width:980px}
.mk-topics{margin:-8px 0 14px;font-size:13px;color:var(--muted)}
.o-code{display:inline-block;margin-right:6px}
.mk{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.mk-sum{position:sticky;top:0;display:grid;gap:12px}
.mk-avg{padding:16px 18px;border-radius:14px;background:var(--panel-soft);border:1px solid var(--line);display:grid;gap:2px}
.mk-avg span{font-size:12px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.mk-avg b{font-family:var(--serif);font-size:44px;line-height:1.05;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.mk-avg b small{font-size:20px;color:var(--muted);font-weight:600}
.mk-avg em{font-style:normal;font-weight:650;font-size:14px}
.mk-avg.good em{color:var(--good)}.mk-avg.warn em{color:var(--warn)}.mk-avg.bad em{color:var(--bad)}
.mk-dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk-dl>div{padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.mk-dl>div:last-child{grid-column:1/-1}
.mk-dl dt{font-size:12px;color:var(--muted)}
.mk-dl dd{margin:2px 0 0;font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.mk-dl dd small{font:500 12px var(--font);color:var(--muted)}
.mk-dl .bad{border-color:color-mix(in srgb,var(--bad) 35%,transparent);background:var(--bad-soft)}.mk-dl .bad dd{color:var(--bad)}
.mk-dl .warn dd{color:var(--warn)}
.mk-below{margin:0;font-size:13px;line-height:1.55;padding:10px 12px;border-radius:12px;background:var(--bad-soft);color:var(--ink)}
.mk-main{min-width:0;display:grid;gap:18px}
.mk-table{max-height:none!important}
.mk-table table{min-width:0}
.mk-table td{padding:9px 14px}
.mk-pos{width:76px;font-weight:650;color:var(--muted);white-space:nowrap}
.mk-r.good .mk-pos,.mk-r:nth-child(-n+3) .mk-pos{color:var(--gold-deep)}
.mk-name{font-weight:600}
.mk-mark{white-space:nowrap}.mk-mark b{font-size:15px}.mk-mark small{color:var(--muted);font-size:12.5px}
.mk-bar{width:28%}
.mk-pct{font-weight:650}.mk-pct.good{color:var(--good)}.mk-pct.warn{color:var(--warn)}.mk-pct.bad{color:var(--bad)}
.mk-r.bad td{background:color-mix(in srgb,var(--bad-soft) 55%,transparent)}
.mk-out td{color:var(--muted)}
.mk-word{font-style:italic}
.mk-qs h3{font-size:15px;font-weight:650;margin:0}
.mk-q{display:grid;grid-template-columns:70px minmax(0,1fr) 120px;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.mk-qn{font-weight:700;white-space:nowrap}
.mk-q.bad .mk-qn{color:var(--bad)}.mk-q.good .mk-qn{color:var(--good)}.mk-q.warn .mk-qn{color:var(--warn)}
.mk-qt b{font-size:13px;font-weight:600;display:block;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-qp{text-align:right;font-size:13px;color:var(--muted);white-space:nowrap}.mk-qp b{color:var(--ink)}
@media (max-width:760px){
  .mk{display:block}.mk-sum{position:static;margin-bottom:16px}
  .mk-avg b{font-size:38px}
  .mk-dl{grid-template-columns:repeat(2,1fr)}
  .mk-bar,.mk-table thead th:nth-child(4){display:none}
  .mk-table td{padding:10px 8px;font-size:14px}
  .mk-pos{width:54px}
  .mk-q{grid-template-columns:56px minmax(0,1fr);}.mk-qp{grid-column:2;text-align:left}
}

/* ============================================================== 21. Position sheets — the office file */
.ps-file{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.ps-nav{position:sticky;top:calc(var(--top-h) + 12px);display:grid;gap:6px}
.ps-nav .o-label{margin-top:8px}
.ps-classes{display:grid;gap:2px}
.ps-cls{display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;border-radius:9px;padding:8px 10px;font:500 14px var(--font);color:var(--ink);cursor:pointer;text-align:left;min-height:38px}
.ps-cls small{color:var(--muted);font-size:12px}
.ps-cls:hover{background:var(--panel-soft)}
.ps-cls.on{background:color-mix(in srgb,var(--gold) 14%,transparent);font-weight:650;box-shadow:inset 2px 0 0 var(--gold)}
.ps-h{font-family:var(--serif)!important;font-size:24px!important;font-weight:700!important;margin:4px 0 6px}
.ps-group{margin-top:14px}
.ps-group h3{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.ps-group h3 small{font-weight:600;color:var(--muted);margin-left:4px}
.ps-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font:inherit;color:inherit;text-align:left;cursor:pointer;margin-bottom:6px}
.ps-item:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.ps-ico{width:36px;height:36px;border-radius:10px;background:var(--panel-soft);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0}
.ps-ico .icon{width:18px;height:18px}
.ps-t{flex:1;min-width:0}.ps-t b{display:block;font-weight:650}.ps-t small{display:block;color:var(--muted);font-size:12.5px}
.ps-item>.icon{width:16px;height:16px;color:var(--muted)}
@media (max-width:900px){.ps-file{grid-template-columns:1fr}.ps-nav{position:static}.ps-classes{display:flex;flex-wrap:wrap;gap:6px}.ps-cls{border:1px solid var(--line-2);border-radius:999px;min-height:40px;gap:8px}}
.modalbox.ps-box{width:960px}
.ps-pdfs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.ps-pdfs .btn{min-height:58px;justify-content:center;gap:12px;font-size:15px}
.ps-pdfs .btn span{display:grid;text-align:left;line-height:1.2}.ps-pdfs .btn small{font-weight:500;font-size:12px;opacity:.85}
.ps-pdfs .btn .icon{width:22px;height:22px}
.ps-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.ps-preview{overflow:hidden;background:var(--panel-soft);border:1px solid var(--line);border-radius:14px;padding:12px 0;display:flex;justify-content:center}
.ps-scale{transform-origin:top center;width:794px}
.ps-scale .ps-page{margin:0 auto 16px;box-shadow:0 8px 30px -12px rgba(6,20,47,.35)}
@media (max-width:760px){.ps-pdfs{grid-template-columns:1fr}}
.ps-host{position:fixed;left:-12000px;top:0;width:794px;z-index:-1;pointer-events:none}

/* ---- the A4 page itself (also used for the PDF): always light, like paper */
.ps-page{width:794px;height:1123px;box-sizing:border-box;padding:46px 52px 40px;background:#fff;color:#0f1b33;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;position:relative;display:flex;flex-direction:column;overflow:hidden;color-scheme:light}
.ps-head{display:flex;align-items:center;gap:14px}
.ps-head img{width:58px;height:58px;border-radius:12px}
.ps-school{flex:1;min-width:0;display:grid}
.ps-school b{font-family:"HR Serif",Georgia,serif;font-size:23px;font-weight:700;color:#0a1f44;line-height:1.1}
.ps-school i{font-size:12.5px;color:#4a5670}
.ps-tag{border-radius:10px;padding:8px 16px;text-align:right;display:grid;gap:2px}
.ps-tag b{font-family:"HR Serif",Georgia,serif;font-size:26px;line-height:1}
.ps-tag span{font-size:11px}
.ps-rule{height:5px;margin:14px 0 16px;border-top:2px solid #0a1f44;border-bottom:1px solid #0a1f44}
.ps-cont{margin:-6px 0 10px;font-size:12px;color:#4a5670}
.ps-title .ps-subj{font-size:12.5px;font-weight:700;letter-spacing:1.6px;color:#7d5f0e}
.ps-title h1{font-family:"HR Serif",Georgia,serif;font-size:30px;line-height:1.1;margin:4px 0 4px;color:#0a1f44}
.ps-title p{margin:0;font-size:13px;color:#33405a;line-height:1.5}
.ps-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 14px}
.ps-stats>div{border:1px solid #d5dbe8;border-radius:10px;padding:8px 12px}
.ps-stats span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#4a5670}
.ps-stats b{font-family:"HR Serif",Georgia,serif;font-size:24px;line-height:1.15;font-variant-numeric:lining-nums tabular-nums}
.ps-stats b small{font-family:Arial,sans-serif;font-size:12px;color:#4a5670}
.ps-table{width:100%;border-collapse:collapse;font-size:14px;min-width:0}
.ps-table th{position:static;background:none;text-transform:uppercase;font-size:10.5px;letter-spacing:.8px;color:#4a5670;padding:7px 10px;border-bottom:2px solid #0a1f44;text-align:left}
.ps-table td{padding:0 10px;border-top:1px solid #e3e7f0;height:26px;line-height:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.ps-table td small,.mk-mark small{display:inline;font-size:inherit;margin:0}
.ps-table tbody tr:first-child td{border-top:0}
.ps-table tbody tr:hover td{background:none}
.ps-table .ps-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ps-table .ps-num small{color:#4a5670}
.ps-pos{width:96px;white-space:nowrap}
.ps-star{display:none}
.ps-name{font-weight:600;letter-spacing:.2px}
.ps-nomark td{color:#6b7690}
.ps-absent{margin-top:12px;padding:10px 12px;border:1px dashed #9aa5b8;border-radius:10px;font-size:12.5px;line-height:1.55;color:#33405a}
.ps-foot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;font-size:11px;color:#6b7690}
/* colour (for phones) */
.ps-colour .ps-tag{background:#0a1f44;color:#fff}.ps-colour .ps-tag b{color:#e8cf8a}.ps-colour .ps-tag span{color:#d5ddec}
.ps-colour .ps-rule{border-top-color:#c9a227;border-bottom-color:#c9a227}
.ps-colour .ps-stats>div:first-child{background:#0a1f44;border-color:#0a1f44}.ps-colour .ps-stats>div:first-child span{color:#e8cf8a}.ps-colour .ps-stats>div:first-child b{color:#fff}
.ps-colour .ps-table th{border-bottom-color:#c9a227}
.ps-colour .ps-top td{font-weight:700}
.ps-colour .ps-1 td{background:#fbf1cf}.ps-colour .ps-1 .ps-pos b{background:linear-gradient(135deg,#f0d999,#c9a227);color:#0a1f44}
.ps-colour .ps-2 td{background:#eef1f6}.ps-colour .ps-2 .ps-pos b{background:linear-gradient(135deg,#f4f6fa,#a9b3c4);color:#0a1f44}
.ps-colour .ps-3 td{background:#f8e8dc}.ps-colour .ps-3 .ps-pos b{background:linear-gradient(135deg,#f3d2b8,#b8763e);color:#fff}
.ps-colour .ps-top .ps-pos b{display:inline-block;min-width:44px;text-align:center;padding:3px 9px;border-radius:999px}
/* black and white (for printing): white boxes, thick black lines, ★ and bold for the top three, little toner */
.ps-bw{color:#000}
.ps-bw .ps-tag{border:2.5px solid #000;color:#000;background:#fff}.ps-bw .ps-tag span{color:#000}
.ps-bw .ps-school b,.ps-bw .ps-title h1{color:#000}
.ps-bw .ps-title .ps-subj{color:#000}
.ps-bw .ps-rule{border-top:3px solid #000;border-bottom:1px solid #000}
.ps-bw .ps-stats>div{border:1.5px solid #000}
.ps-bw .ps-stats span,.ps-bw .ps-title p,.ps-bw .ps-school i,.ps-bw .ps-table th{color:#000}
.ps-bw .ps-table th{border-bottom:3px solid #000}
.ps-bw .ps-table td{border-top:1px solid #999}
.ps-bw .ps-top td{font-weight:800;border-top:2px solid #000}
.ps-bw .ps-top+tr:not(.ps-top) td{border-top:2px solid #000}
.ps-bw .ps-star{display:inline;margin-right:4px}
.ps-bw .ps-absent{border-color:#000;color:#000}
.ps-bw .ps-foot{color:#333}

/* lesson note print */
#o112PrintArea{display:none}
@media print{
  body.o112-printing>*:not(#o112PrintArea){display:none!important}
  body.o112-printing #o112PrintArea{display:block}
  .o-print{font:11.5pt/1.5 Arial,sans-serif;color:#000}
  .o-print-head{display:flex;align-items:center;gap:12px;border-bottom:2px solid #0a1f44;padding-bottom:8px;margin-bottom:10px}
  .o-print-head img{width:52px;height:52px}
  .o-print-head h1{font:700 16pt Georgia,serif;margin:0}.o-print-head p{margin:0;font-size:9.5pt}
  .o-print-tag{margin-left:auto;text-align:right;display:grid}.o-print-tag b{font:700 13pt Georgia,serif}
  .o-print h2{font:700 15pt Georgia,serif;margin:6px 0 10px}
  .o-print footer{margin-top:10px;font-size:9pt;color:#555}
  .ps-host{display:none!important}
}

/* ============================================================== 22. Update 115 (School OS) — the office
   Double entries · class-test weeks · "Checking marks" · subject position sheets · Settings → Printing · office class tests
   (opened by themselves, "Move to another day", the typing kit and the print dialog). Calm, one accent, light + dark. */
.tw-calm{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;margin:0 0 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:13.5px;line-height:1.45}
.tw-calm b{color:var(--ink);font-weight:650}
.tw-calm .icon{width:18px;height:18px;flex-shrink:0;color:var(--info);margin-top:1px}
.tw-dbl{border-left:3px solid var(--warn)!important;margin-bottom:16px;display:grid;gap:12px}
.tw-dbl-h{display:flex;gap:12px;align-items:flex-start}
.tw-dbl-h h3{margin:0 0 2px;font-size:15.5px;font-weight:650;display:flex;align-items:center;gap:8px}
.tw-dbl-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--warn-soft);color:var(--warn);flex-shrink:0}
.tw-dbl-ico .icon{width:18px;height:18px}
.tw-dbl-g{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:10px;background:var(--panel-soft)}
.tw-dbl-t{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14px}
.tw-dbl-t span{color:var(--muted);font-size:13px}
.tw-dbl-items{display:grid;gap:6px}
.tw-dbl-it{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;min-height:48px}
.tw-dbl-it:hover{border-color:var(--gold)}
.tw-dbl-it.on{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.tw-dbl-it input{width:18px;height:18px;accent-color:var(--gold);flex-shrink:0;margin:0}
.tw-dbl-w{flex:1;min-width:0;display:grid}
.tw-dbl-w b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-dbl-w small{color:var(--muted);font-size:12.5px}
.tw-dbl-acts{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.tw-dbl-acts .o-note{flex:1;min-width:220px}
.tw-joined{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;margin:0 0 14px;border-radius:12px;background:var(--good-soft);border:1px solid color-mix(in srgb,var(--good) 30%,transparent);font-size:13.5px}
.tw-joined>span{flex:1;min-width:0}
.tw-joined>.icon{width:18px;height:18px;color:var(--good);flex-shrink:0}
.tw-joined .icon-btn{width:36px;height:36px}
.tw-check{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:650;background:var(--warn-soft);color:var(--warn);white-space:nowrap}
.tw-check .icon{width:13px;height:13px}
.mk-check{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:-4px 0 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);background:var(--warn-soft)}
.mk-check>.icon{width:20px;height:20px;color:var(--warn);flex-shrink:0}
.mk-check>div{flex:1;min-width:0}
.mk-check b{font-weight:650;color:var(--ink)}
.mk-check p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.mk-check .btn{flex-shrink:0}
@media (max-width:640px){.mk-check{flex-wrap:wrap}.mk-check .btn{width:100%;justify-content:center}.tw-dbl-acts .btn{width:100%;justify-content:center}}
/* office class tests: opened by themselves, move to another day */
.ot-auto{display:inline-flex;align-items:center;gap:5px;margin-right:8px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:650;background:var(--good-soft);color:var(--good);vertical-align:1px}
.ot-auto .icon{width:13px;height:13px}
.ot-move{display:grid;gap:14px}
.ot-move-why{display:flex;gap:10px;margin:0;padding:12px 14px;border-radius:12px;background:var(--panel-soft);border:1px solid var(--line);font-size:13.5px;line-height:1.5}
.ot-move-why .icon{width:18px;height:18px;color:var(--info);flex-shrink:0;margin-top:2px}
/* position sheets: the kinds of sheet, the subject's own sheets */
.ps-toolbar{flex-wrap:wrap;row-gap:10px}
.ps-types{flex-wrap:wrap}
.ps-group-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.ps-group-h h3{margin:0}
.ps-subjnow{min-height:32px;font-size:12.5px}
.ps-item.ps-subjsheet{background:color-mix(in srgb,var(--gold) 6%,var(--panel));border-color:color-mix(in srgb,var(--gold) 28%,var(--line))}
.ps-item.ps-subjsheet .ps-ico{background:color-mix(in srgb,var(--gold) 16%,var(--panel));color:var(--gold-deep)}
.ps-when{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 12px}
.ps-when-o{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--panel)}
.ps-when-o:has(input:checked){border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.ps-when-o input{margin-top:3px;accent-color:var(--gold)}
.ps-when-o span{display:grid;gap:2px}.ps-when-o small{color:var(--muted);font-size:12.5px}
@media (max-width:640px){.ps-when{grid-template-columns:1fr}.ps-group-h{flex-wrap:wrap}.ps-subjnow{width:100%;justify-content:center;min-height:40px}}
/* Settings → Printing */
.o-printset{display:grid;gap:14px;max-width:560px}
.o-printset .field input{max-width:220px}
.o-switch{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px}
.o-switch input{position:absolute;opacity:0;width:1px;height:1px}
.o-switch-ui{width:44px;height:26px;border-radius:999px;background:var(--line-2);position:relative;flex-shrink:0;transition:background-color .18s var(--ease)}
.o-switch-ui:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s var(--ease)}
.o-switch input:checked+.o-switch-ui{background:var(--gold)}
.o-switch input:checked+.o-switch-ui:after{transform:translateX(18px)}
.o-switch input:focus-visible+.o-switch-ui{outline:2px solid var(--gold);outline-offset:2px}
.o-switch-t{display:grid}.o-switch-t small{color:var(--muted);font-size:12.5px}
.o-costline{display:flex;gap:10px;align-items:flex-start;margin:0;padding:11px 13px;border-radius:12px;background:var(--panel-soft);border:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.5}
.o-costline b{color:var(--ink);font-weight:600}
.o-costline .icon{width:18px;height:18px;flex-shrink:0;color:var(--gold-deep);margin-top:1px}
@media (prefers-reduced-motion:reduce){.o-switch-ui,.o-switch-ui:after{transition:none}}
/* the office's class-test editor with the typing kit: the kit's own symbol sheet has these signs, so our bar keeps the rest */
.ot-form.ot-kit-on .ot-maths [data-kit]{display:none}
.ot-form .ot-part .hrt-kit{margin:0 0 8px}
.ot-word #otPast{margin-left:auto}
.ot-sheet .ot-sheet-box{width:min(720px,100%);max-height:min(86dvh,860px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.ot-sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.ot-sheet-h h2{margin:2px 0 2px!important}
.ot-sheet-h p{margin:0!important}
.ot-sheet-b{padding:14px 20px 18px;overflow:auto;display:grid;gap:12px}
.ot-past{display:grid;gap:8px}
.ot-pastrow{display:grid;gap:2px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;min-height:48px}
.ot-pastrow:hover{border-color:var(--gold)}
.ot-pastrow small{color:var(--muted);font-size:12.5px}
.ot-pastview{border:1px solid var(--line);border-radius:12px;padding:16px 18px;max-height:46dvh;overflow:auto;font-size:14.5px;line-height:1.55}
.ot-pastview .hr-ans{background:#eef6ee;border-left:3px solid #1f8a5b;padding:4px 8px;margin:4px 0;border-radius:6px;color:#1b4d33}
.ot-pastview .hr-ans:before{content:"Answer (only teachers see this) · ";font-weight:650;font-size:12px}
/* the print dialog */
.modalbox.otp-box{width:720px}
.otp{display:grid;gap:14px}
.otp-meter{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel-soft);display:grid;gap:6px}
.otp-count{font-size:14px;color:var(--muted)}
.otp-count b{font-family:var(--serif);font-size:30px;color:var(--ink);margin-right:4px;font-variant-numeric:lining-nums}
.otp-saved{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--good-soft);color:var(--good);font-size:12px;font-weight:650}
.otp-dots{display:flex;gap:4px;flex-wrap:wrap}
.otp-dots i{width:16px;height:22px;border-radius:3px;border:1.5px solid var(--ink);background:var(--panel)}
.otp-dots i.b{border-style:dashed;opacity:.7}
.otp-meter small{color:var(--muted);font-size:12px}
.otp-cost{display:flex;gap:10px;align-items:flex-start;margin:0;padding:11px 13px;border-radius:12px;background:var(--panel-soft);border:1px solid var(--line);font-size:13.5px;line-height:1.5}
.otp-cost .icon{width:18px;height:18px;flex-shrink:0;color:var(--gold-deep);margin-top:1px}
.otp-cost a{color:var(--info);font-weight:600}
.otp-who{border:0;margin:0;padding:0;display:grid;gap:8px}
.otp-who legend{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;padding:0}
.otp-o{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--panel);min-height:48px}
.otp-o:has(input:checked){border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.otp-o input{margin-top:3px;accent-color:var(--gold)}
.otp-o span{display:grid;gap:2px}.otp-o small{color:var(--muted);font-size:12.5px}
.otp-ver{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.otp-ver:has(input:disabled){opacity:.55}
.otp-nover{margin:0}
.otp-w{margin:0;padding:10px 14px 10px 32px;border-radius:12px;background:var(--warn-soft);font-size:13px;line-height:1.5}
.otp-acts{flex-wrap:wrap}
@media (max-width:640px){.otp-acts .btn{flex:1 1 calc(50% - 8px);justify-content:center}}
/* Type a sheet: the version on the sheet */
.ot-typever{display:grid;gap:6px;margin:12px 0 4px}
.ot-typever>span{font-size:13px;font-weight:600}
.ot-typever small{color:var(--muted);font-size:12px}
/* the camera: a Version B sheet */
.ot-verbadge{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:10060;display:grid;gap:2px;max-width:min(520px,calc(100vw - 24px));padding:10px 16px;border-radius:12px;background:#e7c46b;color:#1a1408;box-shadow:0 12px 30px -10px #000;font-size:13px;text-align:center}
.ot-verbadge b{font-size:15px;letter-spacing:.06em}
.ot-blankp{margin:auto;color:#777;font:italic 10.5pt Georgia,serif;text-align:center;padding-top:40%}
/* the kit inside the office form: never wider than its page; the whole test's preview and "Start from last term’s paper" are the
   office's own (both sections together), so the kit's one-page Template / Last term / Preview buttons are not shown here */
.ot-form .ot-sec,.ot-form .ot-part,.ot-form .hrt-kit,.ot-form .hrt-strip,.ot-form .hrt-ctx{min-width:0;max-width:100%}
.ot-form .hrt-kit{overflow:hidden}
.ot-form .hrt-bar [data-hrt="templates"],.ot-form .hrt-bar [data-hrt="past"],.ot-form .hrt-bar [data-hrt="preview"]{display:none}
/* Update 121: change the kind of a teacher's card */
.tw-kindask{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 0;padding:8px 10px;border-radius:10px;background:var(--warn-soft);font-size:13px;line-height:1.4}
.tw-kindask .icon{width:16px;height:16px;color:var(--warn)}
.tw-kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.tw-kbtn{min-height:56px;justify-content:center}
/* Update 121: Gate times — reporting-time groups */
.gtg-h{margin:16px 0 8px;font-size:15px}
.gtg-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 12px;background:var(--panel)}
.gtg-top{display:grid;grid-template-columns:1fr 140px auto;gap:10px;align-items:end}
@media (max-width:620px){.gtg-top{grid-template-columns:1fr 1fr}.gtg-top .btn{grid-column:1/-1}}
.gtg-lbl{margin:12px 0 6px;font-weight:700;font-size:13px}
.gtg-ticks{display:flex;flex-wrap:wrap;gap:6px}
.gtg-tick{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px;cursor:pointer;background:var(--bg,transparent)}
.gtg-tick input{width:16px;height:16px;margin:0}
.gtg-tick.off{opacity:.45;cursor:not-allowed}
.gtg-pupils{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gtg-pupils select{min-height:36px;border-radius:9px;padding:0 8px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.gtg-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 10px;border-radius:999px;background:var(--warn-soft);font-size:13px}
.gtg-chip button{border:0;background:transparent;font-size:16px;line-height:1;cursor:pointer;padding:0 6px;color:inherit}
.gtg-warn{margin:0 0 12px;padding-left:18px;display:grid;gap:8px;line-height:1.45}
/* Update 122: Gate times → the swaps made by themselves (Undo) */
.gtg-h{margin:4px 0 8px;font-size:15px}
.gtg-swaps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.gtg-swaps li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:10px 12px;border:1px solid var(--line,#e6e0d4);border-radius:12px;line-height:1.45}
.gtg-swaps li .text-btn{flex:none}
/* Update 121: "Use the usual school times" under a small "More" */
.tt-ownmore{display:inline-block;margin-left:6px}
.tt-ownmore summary{display:inline;cursor:pointer;color:var(--muted);font-size:12.5px;text-decoration:underline}
.tt-ownmore[open]{display:block;margin:8px 0 0}.tt-ownmore small{display:block;color:var(--muted);font-size:12px;margin-top:4px}