/* CAUBRIDGE: presentation only. Keep pupil-owned colours and media/board semantics. */
:root {
  color-scheme: light;
  --pine: #163d35; --gold: #c5a15b; --garnet: #742f41; --paper: #f3ebdd;
  --bg: #f3ebdd; --bg2: #f3eee4; --card: #fffcf6; --card2: #eee7d9;
  --line: #d8cdb8; --tx: #242b29; --mut: #63665e;
  --acc: #163d35; --acc2: #285c4e; --on-acc: #fff9ee;
  --ok: #226548; --warn: #805313; --bad: #a3293e; --pink: #742f41;
  --r: 16px; --shadow: 0 12px 36px rgba(48, 43, 29, .09);
  --title-font: Georgia, 'Times New Roman', serif;
}
body { background: radial-gradient(ellipse at 100% 0, #faf6ec, transparent 65%), var(--paper); }
::selection { background: #c5a15b66; }
h1, h2 { font-family: var(--title-font); font-weight: 500; letter-spacing: -.035em; }
h1 { font-size: clamp(28px, 2.8vw, 39px); line-height: 1.2; }
h2 { font-size: 26px; }
h3 { font-size: 16px; letter-spacing: -.01em; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px;
}
input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px #c5a15b33; }
input::placeholder, textarea::placeholder { color: var(--mut); opacity: .9; }
.btn { border-radius: 10px; min-height: 40px; }
.btn.small { min-height: 32px; }
.btn.primary { background: var(--pine); color: #fff9ee; border-color: var(--pine); box-shadow: 0 3px 8px #163d3518; }
.btn.primary:hover { background: #235549; }
.btn.ok { background: #dce9dc; color: #194e37; border-color: #a7c2ad; }
.btn.danger { background: var(--garnet); color: #fff9ee; border-color: var(--garnet); }
.icon-btn.active, .tool.active, .day-tab.on, .mins-b.on,
.topic-chip.on,
.ctx-n:not(.minus):not(.plus):hover, .grade-pad button:hover { color: var(--on-acc); }
.ctx-n.minus:hover, .ctx-n.plus:hover { color: #fff9ee; }
.academy-wordmark { font-family: var(--title-font); letter-spacing: .1em; font-weight: 600; line-height: 1.2; }
.academy-kicker, .nav-label, .academy-page-label { font-size: 10px; letter-spacing: .18em; font-weight: 700; }

/* Login: a quiet academy frontispiece and a familiar role/PIN form. */
.login { grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 70px; max-width: 1160px; margin: auto; padding: 60px 44px; }
.academy-welcome { text-align: center; color: var(--pine); width: 100%; }
.welcome-crest { display: block; width: 230px; height: 230px; object-fit: contain; margin: 12px auto 0; }
.academy-welcome .academy-wordmark { font-size: clamp(30px, 4vw, 49px); }
.academy-rule { width: 96px; height: 1px; background: var(--gold); margin: 28px auto; }
.academy-welcome h2 { font-size: 35px; line-height: 1.2; margin-bottom: 16px; }
.academy-welcome p { color: var(--mut); font-size: 15px; line-height: 1.8; }
.academy-values { display: flex; justify-content: center; gap: 24px; margin-top: 30px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #795c2c; }
.login-card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 22px; padding: 34px; box-shadow: var(--shadow); backdrop-filter: none; }
.login-card h1 { font-size: 28px; margin: 10px 0; }
.login-logo { margin: 0 auto 10px; }
.login-logo img { display: block; margin: auto; object-fit: contain; }
.role { background: #f7f3eb; border-color: #e1d7c5; border-radius: 12px; padding: 15px; }
.role:hover { background: #eee9dc; border-color: var(--gold); box-shadow: 0 3px 12px #163d350c; }
.role .nm { font-size: 16px; }

/* Dark pine navigation, cream page. Scoping keeps contrast in nested components. */
.sidebar, .lesson, .game-win {
  color-scheme: dark; --bg: #102b25; --bg2: #183c33; --card: #1b3d34; --card2: #244a40;
  --line: #3c5c4e; --tx: #f7f1e5; --mut: #c1caba;
  --acc: #d1b273; --acc2: #e0c58c; --on-acc: #102b25;
  --ok: #8ad2aa; --warn: #e8c37d; --bad: #ffabb2;
  color: var(--tx);
}
.app { grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { background: var(--pine); padding: 24px 16px 16px; border-right: 1px solid #315346; gap: 12px; }
.brand { padding: 0 0 22px; gap: 7px; border-bottom: 1px solid #c5a15b55; flex-shrink: 0; }
.brand-logo { width: 54px; height: 62px; object-fit: contain; flex-shrink: 0; }
.brand-copy { min-width: 0; display: grid; gap: 5px; }
.brand .academy-wordmark { color: #f3ebdd; font-size: 19px; letter-spacing: .04em; }
#brand-name { font-size: 11px; font-weight: 400; color: #d4c5a5; overflow-wrap: anywhere; }
.nav-label { color: #d4c5a5; padding: 6px 12px 0; }
.nav { min-height: 0; gap: 3px; scrollbar-width: thin; scrollbar-color: #627d64 transparent; }
.nav button { padding: 10px 12px; min-height: 41px; font-size: 14px; border-radius: 9px; color: #d7dfd1; }
.nav button:hover { background: #244b40; color: #fff9ee; }
.nav button.active { background: #c5a15b24; color: #f5db9e; box-shadow: inset 3px 0 var(--gold); }
.sidebar-bottom { flex-shrink: 0; border-top: 1px solid #c5a15b33; padding-top: 12px; }
.me { background: #102e27; }
.live-badge { background: #742f41; color: #fff9ee; }
.main { min-width: 0; width: 100%; max-width: 1500px; padding: 30px 38px 70px; }
.academy-page-label { display: flex; justify-content: space-between; gap: 12px; color: #6d735e; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.academy-page-label span:last-child { color: #8b6a30; font-weight: 500; letter-spacing: .13em; }
.main > .head-row { margin-bottom: 24px; }
.card, .day-card, .hw, .stu-card { box-shadow: 0 3px 14px #40311a04; }
.card { padding: 22px; }
.stu-card { background: var(--card); border-top: 3px solid var(--gold); }
.chip { font-size: 12px; }
.bar { background: var(--card2); }
.ring { background: conic-gradient(var(--acc) calc(var(--v)*1%), var(--card2) 0); }
.ring.hot { background: conic-gradient(var(--gold) calc(var(--v)*1%), var(--card2) 0); }
.year-card, .award, .week-card { background: linear-gradient(110deg, #e9e1ca, #f7f3e8); border-color: #ccb988; }
.year-card.vac { background: #e8eee1; border-color: #b6c6a4; }
.academy-live { background: #e4ecdf; border-color: #a9bca0; }
.next-strip { background: #e5eadd; border-color: #b0c0a7; border-left: 4px solid var(--pine); padding: 16px 18px; }
.next-strip.done { background: #e5eee1; }
.lesson-row { gap: 8px; padding: 11px 4px; }
.lesson-row > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.lesson-row .btn { flex-shrink: 0; }
.lesson-row.now { background: #163d3514; }
.lesson-row.next { background: #c5a15b1a; }
.day-card.today { border-color: #aa8a4a; box-shadow: 0 0 0 2px #c5a15b22; }
.note-body :is(h2,h3,h4) { color: var(--acc); }
.warn-dots i { background: var(--card2); }
.reader-body { background: #e7e0d2; }
.reader-load { color: #465147; }
.reader { box-shadow: 0 20px 70px #182c2840; }
.modal-bg { background: #102b25aa; }
.modal { box-shadow: 0 24px 80px #102b2540; border-top: 3px solid var(--gold); }
.modal h2 { font-size: 25px; }
.hw-var.on, .ql-kid.on, .player-pick.on { background: #c5a15b26; }
.ava-input.picking { box-shadow: 0 0 0 3px #c5a15b33; }
.debt-box { background: #c5a15b14; border-color: #c5a15b; }
.medal-bar u, .cov-bar i { background: linear-gradient(90deg, var(--pine), var(--gold)); }

/* Lesson: preserve video framing, signalling/status colours and whiteboard colours. */
.lesson { background: #0c221d; height: 100dvh; min-height: 0; }
.lesson-top, .lesson-bar { background: #16382f; }
.lesson-top { border-bottom-color: #c5a15b50; }
.lesson-crest { object-fit: contain; flex-shrink: 0; }
.lesson-topic { background: none; color: #ebd3a0; -webkit-text-fill-color: #ebd3a0; font-family: var(--title-font); font-size: 23px; font-weight: 500; }
.lesson-topic-label { color: #bdc7b8; }
.lesson-next { background: #c5a15b17; border-color: #a68a52; }
.lesson-side { background: #143129; }
.vtile, .vtile video { background: #0e2922; }
.vtile.screen video { background: #000; }
.pcard { border-color: #385748; }
.cbtn { border-radius: 10px; min-height: 58px; }
.cbtn.on { background: #d1b273; border-color: #d1b273; color: #102b25; }
.cbtn.on .cl { color: #102b25; }
.cbtn.danger { background: #742f41; color: #fff0ef; border-color: #aa6674; }
.cbtn.danger .cl { color: #fff0ef; }
.cbtn.rec { background: #942f3c; border-color: #e59295; }
.break-overlay, .kicked-overlay { background: #0c221df2; }
.break-card { border-color: var(--gold); box-shadow: var(--shadow); }
.break-time { background: none; color: #e5c684; font-family: var(--title-font); }
.tile-grade-btn, .tile-grade, .react-bar, .phrase-bar { background: #17382f; color: #f7f1e5; }
.wn.on { color: var(--on-acc); }
.wn.win { color: #f7f1e5; }
.game-stage { background: #102b25; color: #f7f1e5; }
.game-win h2 { font-family: inherit; font-size: 20px; }
.mem-cell.on, .pair-card.open { color: #102b25; }
.qz-ok, .qz-bad { color: #fff9ee; }
.ql-b.ok, .ql-b.bad { color: #fff9ee; }
.quiz-live { background: #17382ff7; }
.off-bar { color: #fff; }
.off-bar .btn { color: #fff; }

@media (max-width: 1100px) {
  .main { padding-right: 22px; padding-left: 22px; }
  .login { gap: 32px; padding: 36px; }
  .academy-welcome h2 { font-size: 29px; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0,1fr); }
  .sidebar { width: 260px; }
  .main { padding: 74px 18px 50px; }
  .mobile-menu { background: var(--pine); color: #fff9ee; border-color: #49664d; }
  .sidebar.open .brand { padding-top: 42px; }
  .login { grid-template-columns: 1fr; gap: 26px; max-width: 520px; padding: 28px 20px; }
  .welcome-crest { width: 130px; height: 130px; margin-top: 0; }
  .academy-welcome h2, .academy-welcome p, .academy-values, .academy-rule { display: none; }
  .academy-welcome .academy-wordmark { font-size: 32px; }
  .login-logo { display: none; }
  .login-card { padding: 26px; }
  .academy-page-label span:last-child { display: none; }
  .lesson-topic { font-size: 19px; }
  /* Anchor the drawer to the stage, not to guessed header/footer heights. */
  .lesson-body { position: relative; overflow: hidden; }
  .lesson-side { position: absolute; top: 0; bottom: 0; }
  .lesson-side:not(.open) { visibility: hidden; pointer-events: none; }
  .lesson-side.open { visibility: visible; pointer-events: auto; }
}
@media (max-width: 600px) {
  .g2, .g3, .week-kids { grid-template-columns: minmax(0,1fr); }
  .main { padding-left: 12px; padding-right: 12px; }
  .card { padding: 16px; }
  .head-row > .row, .hw-head > .row { flex-wrap: wrap; }
  .head-row > *, .hw-head > * { min-width: 0; max-width: 100%; }
  .academy-page-label { font-size: 9px; letter-spacing: .1em; }
  .lesson-row { flex-wrap: wrap; }
  .lesson-row .tm { margin-left: auto; }
  .lesson-top { gap: 7px; padding: 8px; }
  .lesson-subject { max-width: 155px; overflow: hidden; text-overflow: ellipsis; }
  .lesson-crest { width: 28px; height: 32px; }
  .lesson-next { max-width: calc(100vw - 32px); }
  .lesson-bar { gap: 5px; padding: 7px; max-height: 32dvh; overflow-y: auto; }
  .cbtn { min-width: 58px; padding: 6px 8px; }
  .break-card { width: 100%; padding: 24px 18px; }
  .break-overlay { overflow-y: auto; }
  .toasts { left: 12px; right: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .academy-page-label { color: #333; }
  .lesson-crest { display: none; }
}