/* K-Maths · shared interface, October 2026
   Brand colours are the active palette in styles.css. This layer intentionally
   leaves specialist video/fullscreen and assessment layouts intact. */
:root {
  --green: #067647;
  --surface-subtle: #f2f5f9;
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow: 0 6px 24px rgba(6,17,54,.055);
  --header-height: 82px;
  --sidebar-width: 238px;
}
html[data-theme=hard] {
  --surface-subtle: #101f49;
  --border: #2a385b;
  --muted: #bbc6da;
  --shadow: 0 6px 24px rgba(0,0,0,.16);
  color-scheme: dark;
}
html { scroll-padding-top: 100px; }
body, html[data-theme=hard] body {
  background: var(--cream); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
body { min-width: 300px; }
main { min-height: 50vh; }
h1, h2, h3 { color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 3.3vw, 2.8rem); line-height: 1.13; letter-spacing: -.04em; font-weight: 750; }
h2 { font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.25; letter-spacing: -.028em; font-weight: 700; }
h3 { font-size: 1.05rem; line-height: 1.4; letter-spacing: -.015em; font-weight: 700; }
p, li, a, label, td, th { overflow-wrap: break-word; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--green) !important; outline-offset: 4px; }
html[data-theme=hard] :focus-visible { outline-color: var(--yellow) !important; }
[hidden] { display: none !important; }
img { max-width: 100%; }
.ui-icon { width: 20px; height: 20px; flex: 0 0 20px; display: block; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 10001; background: var(--yellow); color: #061136; padding: 12px 18px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
/* Navigation */
.site-header, html[data-theme=hard] .site-header { height: var(--header-height); background: var(--card); border-bottom: 1px solid var(--border); box-shadow: none; backdrop-filter: none; z-index: 120; }
.nav { height: 100%; max-width: 1280px; padding: 12px 32px; gap: 24px; flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.logo { width: 52px !important; height: 52px !important; padding: 0; object-fit: contain; background: #fff; box-shadow: none; border: 1px solid #e4e9f3; border-radius: 50%; }
.brand-wordmark { display: flex; flex-direction: column; gap: 0; line-height: 1.25; color: var(--text); }
.brand-wordmark strong { font-size: 1rem; font-weight: 800; letter-spacing: .035em; }
.brand-wordmark small { font-size: .63rem; letter-spacing: .2em; font-weight: 600; color: var(--muted); }
.nav-links { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; position: static; font-size: .84rem; font-weight: 600; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.nav-links a, html[data-theme=hard] .nav-links a { color: var(--text); padding: 9px 10px; border-radius: 7px; white-space: nowrap; }
.nav-links a.active, .nav-links a:hover { color: var(--navy); background: var(--surface-subtle); }
html[data-theme=hard] .nav-links a.active, html[data-theme=hard] .nav-links a:hover { color: var(--yellow); background: var(--surface-subtle); }
.nav-links .nav-cta { color: #061136 !important; background: var(--yellow) !important; padding: 11px 16px; margin-left: 3px; }
.theme-toggle, html[data-theme=hard] .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; min-height: 42px; width: 42px; padding: 10px; cursor: pointer; color: var(--text); background: var(--card); }
.theme-toggle:hover { background: var(--surface-subtle); }
.theme-toggle .theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-btn { display: none; align-items: center; justify-content: center; gap: 7px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; min-height: 42px; font-size: .85rem; padding: 8px 12px; }
.navigation-backdrop { display: none; }
/* Workspace shell */
.app-shell .nav { max-width: none; padding: 12px 28px; gap: 24px; }
.app-shell .nav > .brand { width: calc(var(--sidebar-width) - 28px); }
.app-shell #navLinks { display: none; }
.shell-identity { display: flex; flex-direction: column; gap: 1px; order: 1; }
.shell-identity strong { font-size: .8rem; font-weight: 600; }
.shell-identity span { font-size: .73rem; color: var(--muted); }
.shell-top-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; order: 2; }
.shell-profile { display: flex; gap: 10px; align-items: center; font-size: .81rem; font-weight: 600; max-width: 240px; }
.shell-profile > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-initials { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 35px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 50%; color: var(--text); font-size: .73rem; }
.workspace-sidebar { position: fixed; top: var(--header-height); bottom: 0; left: 0; width: var(--sidebar-width); overflow-y: auto; background: var(--card); border-right: 1px solid var(--border); padding: 26px 14px 20px; z-index: 115; overscroll-behavior: contain; scrollbar-width: thin; }
.workspace-label { font-size: .64rem; text-transform: uppercase; color: var(--muted); letter-spacing: .09em; font-weight: 700; padding: 0 14px 16px; }
.sidebar-group { margin-bottom: 16px; }
.sidebar-group h2 { font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 14px; }
.sidebar-group a { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 8px 12px; margin-bottom: 2px; border-radius: 7px; font-size: .83rem; font-weight: 550; color: var(--muted); border-left: 3px solid transparent; }
.sidebar-group a .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
.sidebar-group a:hover { color: var(--text); background: var(--surface-subtle); }
.sidebar-group a.active { background: var(--surface-subtle); color: var(--navy); border-left-color: var(--yellow); font-weight: 700; }
html[data-theme=hard] .sidebar-group a.active { color: var(--yellow); }
.sidebar-footer { border-top: 1px solid var(--border); padding: 14px 10px 0; }
.shell-logout { display: flex; align-items: center; gap: 11px; background: transparent; color: var(--muted); border: 0; font-size: .83rem; min-height: 42px; cursor: pointer; padding: 8px 4px; }
.shell-logout:hover { color: var(--text); }
.app-shell > main, .app-shell > .footer { margin-left: var(--sidebar-width); }
.app-shell > main { min-width: 0; }
.app-shell > .footer { padding: 22px 32px; background: var(--cream) !important; color: var(--muted); border-top: 1px solid var(--border); }
.app-shell > .footer .footer-grid { display: none; }
.app-shell > .footer .copyright { margin: 0 auto; padding: 0; border: 0; font-size: .75rem; color: var(--muted); }
/* Common pages, fields and tables */
.section { width: 100%; max-width: 1200px; padding: 32px; margin: 0 auto; min-width: 0; }
.page-title, html[data-theme=hard] .page-title { padding: 42px 32px 12px; background: transparent; }
.page-title .center { text-align: left; margin: 0; max-width: 820px; }
.page-title .hero-text { font-size: .96rem; margin: 14px 0 0; max-width: 760px; }
.page-title h1 { max-width: 900px; }
.eyebrow, .section-label, html[data-theme=hard] .eyebrow, html[data-theme=hard] .section-label { display: block; padding: 0; border: 0; border-radius: 0; background: none; color: var(--green); font-size: .67rem; font-weight: 750; letter-spacing: .14em; line-height: 1.5; margin-bottom: 12px; }
html[data-theme=hard] .eyebrow, html[data-theme=hard] .section-label { color: var(--yellow); }
.hero-text { font-size: 1rem; line-height: 1.7; }
.card, .panel, .tool-card, .question-card, .result-card, .submission-card, .question-preview, .quiz-question-card,
html[data-theme=hard] .card, html[data-theme=hard] .panel, html[data-theme=hard] .tool-card, html[data-theme=hard] .result-card, html[data-theme=hard] .submission-card { background: var(--card); border: 1px solid var(--border); box-shadow: none; border-radius: var(--radius-md); padding: 24px; }
.panel > h2 { font-size: 1.25rem; margin-bottom: 18px; }
.tool-card { min-height: 150px; }
.tool-card:hover { transform: none; border-color: var(--green); box-shadow: var(--shadow); }
.tool-card span { color: var(--green); }
html[data-theme=hard] .tool-card span { color: var(--yellow); }
.btn, .row-actions .btn, .row-actions button { border-radius: 8px; font-size: .85rem; font-weight: 650; min-height: 44px; padding: 10px 18px; line-height: 1.4; box-shadow: none; transition: background .15s, border-color .15s; }
.btn:hover { transform: none; filter: brightness(.96); }
.btn-primary, html[data-theme=hard] .btn-primary { background: var(--navy) !important; color: #fff !important; box-shadow: none; border: 1px solid transparent; }
html[data-theme=hard] .btn-primary { background: var(--yellow) !important; color: #061136 !important; }
.btn-secondary, html[data-theme=hard] .btn-secondary { background: var(--yellow) !important; color: #061136 !important; box-shadow: none; }
.btn-outline, html[data-theme=hard] .btn-outline { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-small { min-height: 40px; font-size: .8rem; padding: 8px 14px; }
.btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.link-button { color: var(--green); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; }
html[data-theme=hard] .link-button { color: var(--yellow); }
label { font-size: .85rem; font-weight: 600; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea,
html[data-theme=hard] input:not([type=checkbox]):not([type=radio]):not([type=range]), html[data-theme=hard] select, html[data-theme=hard] textarea { border-radius: 7px !important; background: var(--card) !important; border: 1px solid var(--border) !important; color: var(--text); padding: 11px 13px; min-height: 44px; font-size: 16px; max-width: 100%; min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:focus, select:focus, textarea:focus { border-color: var(--green) !important; outline: 2px solid var(--green); outline-offset: 2px; box-shadow: none; }
input[type=checkbox], input[type=radio] { accent-color: var(--green); min-width: 18px; min-height: 18px; width: 18px; height: 18px; }
input[type=file] { width: 100%; font-size: .84rem !important; }
input[type=file]::file-selector-button { background: var(--surface-subtle); color: var(--text); border: 0; border-right: 1px solid var(--border); padding: 10px 12px; margin: -6px 12px -6px -8px; cursor: pointer; }
fieldset, .password-box, .otp-box { border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
legend { font-size: .82rem; font-weight: 700; }
.check { font-weight: 500; font-size: .85rem; }
.big-form { gap: 20px; }
.big-form label, .big-form fieldset, .big-form > div { min-width: 0; }
.form-message.show, .auth-status { border-radius: 8px; background: var(--surface-subtle); border: 1px solid var(--border); border-left: 3px solid var(--green); color: var(--text); font-size: .88rem; font-weight: 500; }
.form-message.form-error { border-left-color: var(--danger); }
.table-wrap, .table-scroll { max-width: 100%; border-radius: 10px; box-shadow: none; overscroll-behavior-x: contain; scrollbar-width: thin; }
th { background: var(--surface-subtle); color: var(--muted); font-weight: 650; font-size: .72rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
th, td { padding: 14px 18px; border-color: var(--border); }
td { font-size: .86rem; }
tbody tr:hover { background: var(--surface-subtle); }
.table-wrap > table { min-width: 560px; }
.row-actions { gap: 6px; }
.row-actions button, .row-actions a { font-size: .78rem; }
.helper, .email-note, .time-note { font-size: .8rem; font-weight: 400; }
.form-section { max-width: 990px; }
.form-section.two-panels { max-width: 1200px; gap: 24px; align-items: start; }
.form-panel { padding: 32px; }
.two-panels, .marks-layout, .goals-layout, .quiz-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
.quiz-meta-grid, .mini-grid { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.quiz-meta-grid strong, .insight-number, .comparison-numbers strong { color: var(--green); }
html[data-theme=hard] .quiz-meta-grid strong, html[data-theme=hard] .insight-number, html[data-theme=hard] .comparison-numbers strong { color: var(--yellow); }
.assessment-instructions-text { overflow-wrap: anywhere; }
.question-image-preview, .assessment-file-preview-image { display: block; object-fit: contain; max-width: 100%; max-height: 360px; width: auto; border: 1px solid var(--border); border-radius: 8px; }
.answer-file-preview { padding: 14px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 9px; margin-top: 10px; }
.answer-file-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.assessment-save-status { font-size: .8rem; color: var(--muted); margin: 8px 0; }
.assessment-save-status[data-state=error] { color: var(--danger); }
.assessment-save-status[data-state=saved] { color: var(--success); }
.quiz-question-card, .answer-box { min-width: 0; }
.quiz-question-card pre, .quiz-question-card .katex-display { overflow-x: auto; max-width: 100%; }
.quiz-question-card p { overflow-wrap: anywhere; }
.assessment-modal, .modal-card { max-height: 90dvh; overflow-y: auto; }
/* Public homepage: a tutoring brand, built around understanding and practice. */
.home-page { background: var(--card); }
.home-page .section { max-width: 1280px; padding: 72px 40px; }
.home-hero { max-width: 1280px; margin: auto; padding: 66px 40px 60px; display: grid; grid-template-columns: 1.12fr 1fr; gap: 72px; align-items: center; }
.home-hero h1 { font-size: clamp(2.8rem,4.6vw,4.2rem); line-height: 1.06; letter-spacing: -.055em; margin: 22px 0; font-weight: 740; }
.home-hero h1 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: var(--green); letter-spacing: -.055em; }
html[data-theme=hard] .home-hero h1 em { color: var(--yellow); }
.home-kicker { display: flex; align-items: center; gap: 10px; color: var(--green); font-size: .68rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.home-kicker:before { content: ''; display: block; width: 24px; height: 2px; background: var(--green); }
html[data-theme=hard] .home-kicker { color: var(--yellow); }
.hero-description { font-size: 1rem; color: var(--muted); max-width: 440px; margin-bottom: 28px; line-height: 1.8; }
.home-hero .hero-actions { gap: 12px; }
.home-hero .hero-actions .btn { min-height: 48px; padding: 12px 22px; }
.link-arrow { display: inline-flex; align-items: center; gap: 16px; font-size: .85rem; font-weight: 650; }
.link-arrow:after { content: '↗'; font-size: 1.1em; }
.grade-note { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .75rem; margin-top: 28px; }
.grade-note:before { content: ''; width: 7px; height: 7px; background: var(--green); border-radius: 50%; flex: 0 0 7px; }
.learning-board { position: relative; background: #061136; color: #fff; padding: 32px; border-radius: 14px; overflow: hidden; }
.board-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ffffff24; padding-bottom: 20px; }
.board-top span:first-child { font-size: .66rem; letter-spacing: .18em; font-weight: 650; color: #d6deed; }
.board-top span:last-child { font-family: Georgia,serif; font-size: 1.2rem; font-style: italic; color: #f4c400; }
.learning-board h2 { color: #fff; font-size: 1.55rem; font-weight: 550; letter-spacing: -.035em; margin: 24px 0 0; }
.learning-diagram { width: 100%; height: auto; display: block; margin: 4px 0 4px; }
.board-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #ffffff24; padding-top: 19px; font-size: .68rem; color: #c8d3ee; }
.board-caption strong { color: #f4c400; font-size: .72rem; font-weight: 650; }
.learning-strip { background: var(--surface-subtle); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.learning-strip-inner { max-width: 1280px; margin: auto; padding: 22px 40px; display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.learning-strip-item { display: flex; align-items: center; gap: 14px; }
.learning-strip-item > span { font-family: Georgia,serif; font-size: 1.5rem; color: var(--green); }
.learning-strip-item strong { display: block; font-size: .84rem; font-weight: 650; }
.learning-strip-item p { color: var(--muted); font-size: .75rem; margin-top: 1px; }
.home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.home-section-heading h2 { max-width: 470px; font-size: clamp(1.75rem,2.6vw,2.35rem); }
.home-section-heading > p { max-width: 370px; font-size: .9rem; color: var(--muted); }
.subject-catalog { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.subject-entry { padding: 27px 24px; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--card); }
.subject-entry:last-child { border-right: 0; }
.subject-entry .subject-number { font-size: .67rem; font-weight: 650; color: var(--muted); letter-spacing: .08em; }
.subject-glyph { font-family: Georgia,serif; font-size: 2.4rem; height: 55px; line-height: 55px; color: var(--green); }
.subject-entry h3 { font-size: 1.04rem; margin: 5px 0 0; }
.subject-entry p { color: var(--muted); font-size: .81rem; line-height: 1.8; flex: 1; }
.subject-entry a { margin-top: 13px; font-size: .78rem; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.subject-entry a:hover { border-bottom-color: var(--green); color: var(--green); }
.subject-enquiry { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 0 0; color: var(--muted); font-size: .81rem; }
.subject-enquiry a { color: var(--text); font-size: .8rem; }
.approach-section { background: var(--surface-subtle); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.approach-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 110px; align-items: start; }
.approach-intro h2 { font-size: clamp(1.75rem,2.6vw,2.35rem); margin-bottom: 22px; }
.approach-intro p { color: var(--muted); font-size: .93rem; margin-bottom: 26px; }
.approach-steps { list-style: none; counter-reset: step; }
.approach-steps li { display: grid; grid-template-columns: 35px 1fr; column-gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); counter-increment: step; }
.approach-steps li:first-child { padding-top: 0; }
.approach-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.approach-steps li:before { content: '0' counter(step); font-family: Georgia,serif; color: var(--green); font-size: 1.25rem; grid-row: 1/3; }
.approach-steps h3 { margin-bottom: 6px; font-size: .99rem; }
.approach-steps p { color: var(--muted); font-size: .86rem; }
.timetable-card { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 34px 40px; border: 1px solid var(--border); border-radius: 12px; position: relative; overflow: hidden; }
.timetable-card:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--yellow); }
.timetable-card h2 { margin-bottom: 12px; }
.timetable-card p { font-size: .85rem; color: var(--muted); }
.timetable-detail { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; }
.timetable-detail strong { display: block; font-size: 1.45rem; letter-spacing: -.03em; }
.timetable-detail span { font-size: .78rem; color: var(--muted); }
.home-cta { background: var(--green); color: #fff; }
.home-cta .section { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding-top: 48px; padding-bottom: 48px; }
.home-cta h2 { color: #fff; font-size: 2rem; margin-bottom: 8px; }
.home-cta p { color: #e4f1eb; max-width: 550px; font-size: .9rem; }
.home-cta .btn { background: #fff !important; color: #061136 !important; white-space: nowrap; }
.footer, html[data-theme=hard] .footer { background: #061136 !important; padding: 42px 40px 24px; }
.footer-grid { max-width: 1200px; grid-template-columns: 1.2fr .9fr 1fr; gap: 60px; }
.footer-logo { width: 66px !important; height: 66px !important; object-fit: contain; padding: 0; border-radius: 50%; box-shadow: none; }
.footer h3 { font-size: .74rem; color: #fff; font-weight: 650; }
.footer a, .footer p { font-size: .79rem; color: #bec9df; line-height: 1.7; }
.footer a { margin-top: 5px; overflow-wrap: anywhere; }
.footer .copyright { max-width: 1200px; font-size: .71rem; padding-top: 20px; margin-top: 30px; color: #b4bfd5; }
.footer-legal { display: flex; gap: 18px; margin-top: 12px; }
/* Login / registration */
.auth-page .page-title { padding-top: 50px; }
.auth-page .two-panels { padding-top: 24px; padding-bottom: 64px; }
.auth-page .panel { padding: 32px; }
.auth-page .panel > .muted { font-size: .78rem; margin: 18px 0 4px; }
.auth-page #forgotPanel { background: var(--surface-subtle); }
.auth-page #forgotPanel h2 { font-size: 1.2rem; }
.auth-page #loginForm { margin: 24px 0 0; }
.password-field { display: flex; align-items: center; position: relative; }
.password-field input { padding-right: 65px !important; }
.password-field button { position: absolute; right: 5px; top: 5px; bottom: 5px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; padding: 0 10px; font-size: .75rem; cursor: pointer; }
.auth-registration-note { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; font-size: .84rem; color: var(--muted); }
.auth-registration-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.empty-state { padding: 30px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); background: var(--surface-subtle); }
.empty-state h2 { font-size: 1.2rem; margin-bottom: 8px; }
/* Responsive layout: preserve a readable content column inside the sidebar. */
@media(min-width:1100px) and (max-width:1370px) {
  .app-shell .quiz-layout, .app-shell .goals-layout, .app-shell .marks-layout { grid-template-columns: 1fr; }
}
@media(max-width:1280px) {
  :root { --header-height: 72px; }
  .nav, .app-shell .nav { padding: 10px 24px; gap: 16px; }
  .nav > .brand, .app-shell .nav > .brand { width: auto; }
  .menu-btn { display: inline-flex; margin-left: auto; order: 3; }
  .nav-links { display: none; position: fixed; top: calc(var(--header-height) + 10px); left: auto; right: 18px; width: 320px; max-width: calc(100vw - 36px); flex-direction: column; align-items: stretch; gap: 4px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); z-index: 130; max-height: calc(100dvh - 100px); overflow-y: auto; }
  .nav-links.show { display: flex; }
  .nav-links a { padding: 12px; }
  .nav-links .nav-cta { margin: 2px 0; }
  .nav-links .theme-toggle { width: auto; margin-top: 8px; justify-content: flex-start; }
  .nav-links .theme-label { position: static; width: auto; height: auto; clip-path: none; }
  .app-shell > main, .app-shell > .footer { margin-left: 0; }
  .workspace-sidebar { display: none; width: 280px; box-shadow: var(--shadow); }
  .workspace-sidebar.show { display: block; }
  .shell-identity { margin-right: auto; }
  .shell-identity strong { display: none; }
  .shell-top-actions { margin-left: 0; gap: 12px; }
  .shell-profile > span:last-child { display: none; }
  .navigation-backdrop.visible { display: block; position: fixed; inset: var(--header-height) 0 0; background: rgba(3,11,46,.35); z-index: 110; }
  .navigation-open { overflow: hidden; }
  .home-hero { gap: 40px; padding: 48px 32px; }
  .learning-board { padding: 26px; }
  .home-page .section { padding: 55px 32px; }
  .subject-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .subject-entry:nth-child(2) { border-right: 0; }
  .subject-entry:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .approach-grid { gap: 50px; }
  .timetable-card { gap: 30px; padding: 28px; }
  .timetable-detail { grid-template-columns: 1fr; }
  .timetable-detail .btn { width: fit-content; }
}
@media(max-width:760px) {
  h1 { font-size: 1.9rem; }
  .section { padding: 24px 20px; }
  .page-title { padding: 30px 20px 8px; }
  .section .center { margin-bottom: 22px; }
  .nav, .app-shell .nav { padding: 10px 20px; }
  .logo { width: 45px !important; height: 45px !important; }
  .brand { gap: 9px; }
  .brand-wordmark strong { font-size: .86rem; }
  .brand-wordmark small { font-size: .57rem; }
  .app-shell .brand-wordmark, .shell-identity { display: none; }
  .shell-top-actions { margin-left: auto; }
  .app-shell .menu-btn { margin-left: 0; }
  .panel, .card, .tool-card, .form-panel, .quiz-question-card { padding: 20px; }
  .two-panels, .marks-layout, .goals-layout, .quiz-layout, .big-form, .split, .recorded-grid, .dashboard-cards { grid-template-columns: 1fr; }
  .form-section.two-panels { padding-top: 20px; }
  .home-hero { grid-template-columns: 1fr; gap: 38px; padding: 42px 22px; }
  .home-hero h1 { font-size: clamp(2.8rem,9vw,3.6rem); margin-top: 18px; }
  .hero-description { font-size: .95rem; max-width: 520px; }
  .learning-board { max-width: 520px; width: 100%; justify-self: center; padding: 25px; }
  .learning-strip-inner { padding: 24px 22px; gap: 22px; grid-template-columns: 1fr; }
  .learning-strip-item { gap: 18px; }
  .home-page .section { padding: 42px 22px; }
  .home-section-heading { flex-direction: column; align-items: flex-start; gap: 16px; }
  .subject-catalog { grid-template-columns: 1fr; }
  .subject-entry { padding: 23px; border-right: 0; border-bottom: 1px solid var(--border); gap: 8px; }
  .subject-entry:last-child { border-bottom: 0; }
  .subject-glyph { height: 44px; line-height: 44px; font-size: 2rem; }
  .subject-enquiry { align-items: flex-start; flex-direction: column; gap: 12px; }
  .approach-grid { grid-template-columns: 1fr; gap: 30px; }
  .approach-intro p { margin-bottom: 18px; }
  .timetable-card { grid-template-columns: 1fr; padding: 26px; gap: 24px; }
  .timetable-detail { grid-template-columns: 1fr auto; }
  .home-cta .section { align-items: flex-start; flex-direction: column; gap: 22px; }
  .home-cta h2 { font-size: 1.65rem; }
  .footer { padding: 36px 22px 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-grid > div:first-child { grid-column: 1/-1; }
  .auth-page .panel { padding: 24px; }
  .auth-page .page-title { padding-top: 35px; }
  .app-shell > .footer { padding: 20px; }
  .analytics-tools input, .analytics-tools select, .lesson-library-toolbar input { min-width: 0 !important; max-width: 100%; }
  .modern-recorded-grid { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:380px) {
  .brand-wordmark { display: none; }
  .timetable-detail { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .home-hero .hero-actions { flex-direction: column; align-items: stretch; }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .site-header, .workspace-sidebar, .navigation-backdrop, .skip-link, .footer { display: none !important; }
  .app-shell > main { margin: 0 !important; }
  body, html[data-theme=hard] body { background: white; color: #061136; }
  .section { max-width: none; }
}
.section:has(> #uploadPanel.hidden-block) { display: none; }
html[data-theme=hard] .legend-mark.actual { background: #a4dfbc; }
/* Bring the existing live rankings into the same light/dark workspace. */
:root {
  --rank-bg: var(--cream); --rank-bg-soft: var(--surface-subtle);
  --rank-surface: var(--card); --rank-surface-2: var(--surface-subtle);
  --rank-line: var(--border); --rank-text: var(--text); --rank-muted: var(--muted);
  --rank-navy: var(--navy); --rank-navy-deep: #061136; --rank-yellow: var(--yellow);
}
html:has(.rankings-page), body.rankings-page { background: var(--cream) !important; color: var(--text) !important; }
.rankings-site-header { background: var(--card) !important; border-color: var(--border) !important; backdrop-filter: none; }
.rankings-site-header .menu-btn { color: var(--text) !important; }
.app-shell .rankings-main { width: auto; max-width: 1200px; margin-right: auto; padding: 34px 32px 48px; }
.rankings-hero { border-radius: 12px; border-color: var(--border); background: #061136; box-shadow: none; }
.rankings-hero-inner { text-align: left; padding: 28px; }
.rankings-logo { display: none; }
.rankings-hero h1 { font-size: clamp(1.8rem,3vw,2.5rem); }
.rankings-subtitle { color: #c8d3ee; font-size: .9rem; margin: 10px 0 20px; }
.rankings-meta { justify-content: flex-start; }
.rankings-hero-glow { display: none; }
.rankings-dashboard { background: var(--card); border-color: var(--border); border-radius: 12px; box-shadow: none; }
.ranking-section-head h2, .podium-card h3, .result-percentage, .learner-name strong, .row-result strong { color: var(--text); }
.ranking-section-label, .ranking-refresh-btn, .rank-number { color: var(--green); }
html[data-theme=hard] .ranking-section-label, html[data-theme=hard] .ranking-refresh-btn, html[data-theme=hard] .rank-number { color: var(--yellow); }
.ranking-refresh-btn { border: 1px solid var(--border); background: var(--surface-subtle); font-size: .8rem; border-radius: 8px; font-weight: 650; min-height: 42px; }
.ranking-tab { font-size: .84rem; font-weight: 650; }
.ranking-tab.active { background: var(--yellow); box-shadow: none; }
.podium-card, .ranking-row { border-color: var(--border); background: var(--surface-subtle); border-radius: 10px; box-shadow: none; }
.podium-card.rank-1 { box-shadow: none; }
.ranking-count-chip, .row-position, .rankings-notice { color: var(--text); }
.rankings-notice.error { color: var(--danger); }
.ranking-column-headings { color: var(--muted); }
.tie-badge { color: var(--text); }
.app-shell .rankings-footer, .app-shell .rankings-footer .copyright { background: var(--cream) !important; color: var(--muted) !important; }
@media(max-width:760px) {
  .app-shell .rankings-main { width: 100%; padding: 26px 20px 36px; }
  .rankings-hero-inner { padding: 24px; }
  .ranking-refresh-wrap { flex-wrap: wrap; }
  .rankings-tabs { min-width: 0; }
}
.auth-connection-error { max-width: 620px; margin: 48px auto; }
.auth-connection-error h1 { font-size: 1.7rem; margin-bottom: 16px; }
.auth-connection-error .btn { margin-top: 20px; }
/* Grid children must be allowed to shrink around scrollable data tables. */
.panel, .form-panel, .two-column-layout > *, .marks-layout > *, .goals-layout > * { min-width: 0; }
@media(max-width:760px) {
  .two-column-layout, .marks-layout, .goals-layout { grid-template-columns: minmax(0,1fr); }
}
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 8px 0; max-width: 100%; }
.assessment-choice-list .katex { white-space: normal; }
.assessment-site-header .theme-toggle { font-size: 0; }
.assessment-site-header .theme-toggle .ui-icon { font-size: initial; }
.assessment-sticky-bar { top: calc(var(--header-height) + 8px); }
.assessment-navigator, .assessment-answer-pane, .assessment-submit-zone, .assessment-instruction-card, .assessment-before-begin { border-radius: 12px; box-shadow: none; }
.assessment-question-number, .assessment-nav-title .assessment-eyebrow { color: var(--text); }

/* October 2026: accessible, signed goal-vs-mark status in either theme. */
.comparison-numbers .goal-gap.goal-gap--above strong { color: #067647; }
.comparison-numbers .goal-gap.goal-gap--below strong { color: #b42318; }
.comparison-numbers .goal-gap.goal-gap--equal strong { color: var(--text); }
html[data-theme=hard] .comparison-numbers .goal-gap.goal-gap--above strong { color: #72e4a6; }
html[data-theme=hard] .comparison-numbers .goal-gap.goal-gap--below strong { color: #ff9090; }
html[data-theme=hard] .comparison-numbers .goal-gap.goal-gap--equal strong { color: var(--text); }

/* iPad landscape workspace: keep the sidebar docked in the space to the left
   of the dashboard. Portrait and compact/mobile navigation stay unchanged. */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1280px) {
  .app-shell .workspace-sidebar {
    display: block;
    width: var(--sidebar-width);
    box-shadow: none;
  }
  .app-shell .menu-btn { display: none; }
  .app-shell > main,
  .app-shell > .footer { margin-left: var(--sidebar-width); }
  /* The dashboard has its own max-width and centering rules. Keep its
     content beside the sidebar instead of leaving an empty left gutter. */
  .app-shell > main.dashboard-workspace {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    margin-right: 0;
  }
  .app-shell .navigation-backdrop { display: none; }
  .app-shell.navigation-open { overflow: auto; }
}
/* A narrow landscape tablet still has room for the sidebar, but not for
   the dashboard's full two-column cards. */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1099px) {
  .app-shell .dashboard-top-grid,
  .app-shell .dashboard-groups-grid { grid-template-columns: minmax(0, 1fr); }
}