/* WattleAssess design system — original, brand-neutral, WCAG 2.2 AA oriented. */
:root {
  --bg: #f7f8f6; --surface: #ffffff; --ink: #1d2320; --muted: #4f5a55; --line: #cfd6d2;
  --accent: #613d52; --accent-ink: #ffffff; --focus: #b35c00;
  --ok: #1e6b3a; --ok-bg: #e4f3ea; --warn: #7a4b00; --warn-bg: #fdf1dc; --bad: #8c1d1d; --bad-bg: #fbe4e4; --neutral: #3d4a44; --neutral-bg: #e9ecea;
  --radius: 8px; --gap: 1rem; --maxw: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181a; --surface: #1d2326; --ink: #eef2ef; --muted: #b3bdb7; --line: #3a4440;
    --accent: #dfb8cd; --accent-ink: #352631; --focus: #ffb454;
    --ok: #8fd4a8; --ok-bg: #1d3b2a; --warn: #f3c37b; --warn-bg: #4a3410; --bad: #f29b9b; --bad-bg: #4a1f1f; --neutral: #d0d8d3; --neutral-bg: #2b3330;
  }
}
:root[data-theme="dark"] {
  --bg: #14181a; --surface: #1d2326; --ink: #eef2ef; --muted: #b3bdb7; --line: #3a4440;
  --accent: #dfb8cd; --accent-ink: #352631; --focus: #ffb454;
  --ok: #8fd4a8; --ok-bg: #1d3b2a; --warn: #f3c37b; --warn-bg: #4a3410; --bad: #f29b9b; --bad-bg: #4a1f1f; --neutral: #d0d8d3; --neutral-bg: #2b3330;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 1.25rem; padding-bottom: 2.5rem; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--surface); color: var(--ink); padding: .5rem 1rem; z-index: 10; }
.skip-link:focus { left: 0; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.1rem; }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0; padding: 0; }
.context-bar { display: flex; flex-wrap: wrap; gap: 1rem; padding-bottom: .5rem; font-size: .92rem; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; padding: 1rem 0; }
h1 { font-size: 1.7rem; margin: .2rem 0 .8rem; } h2 { font-size: 1.25rem; margin: 1.2rem 0 .5rem; } h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.lede { font-size: 1.1rem; max-width: 50rem; }
.muted { color: var(--muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.panel.narrow { max-width: 30rem; }
.card-grid { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.card h2 { margin-top: 0; font-size: 1.05rem; }
.stack > * + * { margin-top: .9rem; }
.field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.field .hint { color: var(--muted); font-size: .9rem; margin: 0 0 .3rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], select, textarea {
  width: 100%; max-width: 40rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit;
}
textarea { min-height: 7rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; }
legend { font-weight: 600; }
.button, button { display: inline-block; padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; min-height: 2.5rem; }
.button-primary, button.button-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.button-danger { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.link-button { background: none; border: none; color: var(--accent); text-decoration: underline; padding: 0; min-height: 0; cursor: pointer; font: inherit; }
.inline-form { display: inline; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0; }
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 600; border: 1px solid currentColor; }
.badge-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.badge-ok { color: var(--ok); background: var(--ok-bg); } .badge-warn { color: var(--warn); background: var(--warn-bg); }
.badge-bad { color: var(--bad); background: var(--bad-bg); } .badge-neutral { color: var(--neutral); background: var(--neutral-bg); }
.alert { border-radius: var(--radius); padding: .7rem 1rem; margin: .8rem 0; border: 1px solid; }
.alert-info { color: var(--neutral); background: var(--neutral-bg); border-color: var(--line); }
.alert-error { color: var(--bad); background: var(--bad-bg); border-color: var(--bad); }
.alert-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.alert-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok); }
table { border-collapse: collapse; width: 100%; background: var(--surface); margin: .5rem 0 1rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; background: var(--neutral-bg); }
caption { text-align: left; font-weight: 600; padding: .4rem 0; }
.table-wrap { overflow-x: auto; }
.list { padding-left: 1.2rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .6rem 0; }
.kv dt { font-weight: 600; } .kv dd { margin: 0; }
.two-col { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .two-col { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .two-col.even { grid-template-columns: 1fr 1fr; } }
.sticky { position: sticky; top: .5rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.math { font-family: "STIX Two Math", "Cambria Math", serif; }
.math-power { font-size: .75em; line-height: 0; vertical-align: super; }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.script-image { max-width: 100%; border: 1px solid var(--line); border-radius: 6px; }
.save-status { font-size: .9rem; color: var(--muted); }
.choice-list { list-style: none; padding: 0; } .choice-list li { margin: .35rem 0; }
.choice-list label { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.progress { display: flex; gap: .3rem; flex-wrap: wrap; list-style: none; padding: 0; }
.progress li { padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; }
.progress li[aria-current="step"] { border-color: var(--accent); font-weight: 700; }
.kbd { font-family: ui-monospace, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; background: var(--neutral-bg); }
details > summary { cursor: pointer; font-weight: 600; }
.evidence-drawer { border-left: 4px solid var(--accent); padding-left: .8rem; }
@media (max-width: 40rem) { .kv { grid-template-columns: 1fr; } .header-row { flex-direction: column; align-items: flex-start; } }

/* content module */
.stem { font-size: 1.05rem; }
.stimulus { margin: .6rem 0 1rem; padding: .6rem .8rem; border-left: 4px solid var(--line); }
.stimulus table { margin-top: .4rem; }
/* assets module: upload widget and capture review */
.upload-widget .hint { max-width: 50rem; }
.upload-widget input[type="file"] { display: block; max-width: 40rem; padding: .4rem 0; font: inherit; color: var(--ink); }
.upload-status:empty { display: none; }
.upload-progress { display: block; width: 100%; max-width: 40rem; height: .8rem; margin-top: .5rem; }
.processing-status { max-width: 40rem; margin-block: .8rem; padding: .8rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.processing-status .actions { flex-wrap: wrap; margin-top: .65rem; }
.processing-status p { margin: 0 0 .5rem; }
.upload-progress[hidden], .processing-status [hidden] { display: none !important; }
.capture-preview { margin: 0; }
.capture-preview img { max-height: 70vh; width: auto; background: var(--surface); }
.capture-preview figcaption { font-size: .9rem; margin-top: .4rem; }
.crop-fields { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); margin-bottom: .6rem; }
.crop-fields input[type="number"] { max-width: 8rem; }
/* attempts module */
.marking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 900px) { .marking-grid { grid-template-columns: 1fr; } }
.page-image, .thumb { max-width: 100%; height: auto; border: 1px solid #ccc; }
.criterion .quick-marks { display: inline-flex; gap: .25rem; margin-left: .5rem; }
.button-small { padding: .1rem .5rem; font-size: .9rem; }
.uncertain { background: #fff3cd; text-decoration: underline dotted; }
.timer { font-weight: 600; }
.annotation, .explanation { border-left: 3px solid #888; padding-left: .75rem; }
.worked-explanation { white-space:pre-wrap; overflow-wrap:anywhere; }
.visually-hidden { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Academic studio theme: shared foundations for every domain screen. */
:root {
  --bg:#f6f7f3; --surface:#fff; --ink:#23352f; --muted:#68746d; --line:#e0e5de;
  --accent:#226556; --accent-ink:#fff; --focus:#aa6019;
  --ok:#286344; --ok-bg:#eaf5e9; --warn:#815b21; --warn-bg:#fbf1d9;
  --bad:#a23f3e; --bad-bg:#fff0ed; --neutral:#5e6b63; --neutral-bg:#f0f3ed;
  --radius:14px; --gap:1.2rem; --maxw:1480px;
  --sidebar:#103c38; --sidebar-ink:#ceded8; --shadow:0 4px 20px #243b2e04;
}
:root[data-theme="dark"] {
  --bg:#14211e; --surface:#1c2d27; --ink:#edf3ea; --muted:#aabcb0; --line:#374a3f;
  --accent:#a9dcb5; --accent-ink:#153c2b; --focus:#ffbd74;
  --ok:#a5d9ad; --ok-bg:#294332; --warn:#edd091; --warn-bg:#453c26;
  --bad:#ffb1a4; --bad-bg:#4b302d; --neutral:#c0d0c4; --neutral-bg:#2a3b31;
}
html { scroll-behavior:smooth; }
body { font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font-size:inherit; }
a { text-underline-offset:3px; }
h1,h2,h3 { letter-spacing:-.035em; line-height:1.3; }
h1 { font-size:clamp(1.65rem,2.7vw,2.25rem); font-weight:650; margin:0 0 .6rem; }
h2 { font-size:1.15rem; font-weight:650; } h3 { font-size:1rem; font-weight:650; }
p { margin:.5rem 0 1rem; } .lede { color:var(--muted); }
button,.button { border-radius:8px; padding:.6rem 1rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-size:.87rem; min-height:42px; transition:background .15s,border-color .15s,transform .15s; }
button:hover,.button:hover { background:var(--neutral-bg); border-color:var(--muted); }
.button-primary:hover { background:var(--accent); filter:brightness(.92); border-color:var(--accent); }
button:disabled,.button[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.button-small { padding:.35rem .65rem; min-height:34px; font-size:.8rem; }
.link-button { padding:0; min-height:30px; border:0; background:none; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),select,textarea { border-radius:8px; padding:.65rem .8rem; min-height:43px; max-width:100%; }
input[type="checkbox"],input[type="radio"] { accent-color:var(--accent); width:16px; height:16px; flex-shrink:0; }
input[type="file"] { max-width:100%; }
.field label { font-size:.85rem; margin-bottom:.4rem; }
.field .hint,.hint { font-size:.8rem; color:var(--muted); }
fieldset { margin:0 0 1rem; padding:1rem; } legend { padding:0 .4rem; }
textarea { resize:vertical; } pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.8rem; } code { overflow-wrap:anywhere; }
.icon { display:inline-block; width:19px; height:19px; flex-shrink:0; vertical-align:middle; }
.icon-button { border:0; background:transparent; color:inherit; padding:9px; min-height:36px; min-width:36px; border-radius:9px; }
.icon-button:hover { background:var(--neutral-bg); }
.brand { display:flex; align-items:center; gap:11px; font-size:1.28rem; font-weight:700; letter-spacing:-.035em; line-height:1.2; }
.brand small { display:block; font-size:.55rem; letter-spacing:.2em; font-weight:500; margin-top:5px; }
.brand-symbol { width:38px; height:38px; color:var(--sidebar); flex-shrink:0; }
.sidebar { position:fixed; inset:0 auto 0 0; width:245px; z-index:30; background:var(--sidebar); color:var(--sidebar-ink); display:flex; flex-direction:column; padding:28px 18px 0; overflow-y:auto; }
.sidebar .brand { color:#fff; padding:0 5px 25px; }
.sidebar .brand-symbol { color:#24544a; }
.sidebar .brand small { color:#b1c7bd; }
.workspace-switch { display:flex; align-items:center; gap:10px; padding:13px 10px; border:1px solid #b7d4bd25; border-radius:10px; color:#e0eee2; text-decoration:none; margin-bottom:20px; background:#ffffff05; }
.workspace-switch > span:nth-child(2) { min-width:0; flex:1; }
.workspace-switch strong { display:block; font-size:.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.workspace-switch small { display:block; font-size:.66rem; color:#a9c3b7; }
.workspace-switch .icon { width:13px; }
.workspace-letter { display:grid; place-items:center; width:32px; height:34px; background:#ffffff13; border-radius:8px; font-size:1rem; font-family:Georgia,serif; }
.nav-group { margin-bottom:20px; }
.nav-group-label { color:#9db9ac; font-size:.61rem; text-transform:uppercase; letter-spacing:.13em; padding-left:12px; margin:0 0 7px; }
.sidebar-navigation ul { list-style:none; padding:0; margin:0; }
.sidebar-navigation a { display:flex; align-items:center; gap:11px; color:#cbdcd3; text-decoration:none; padding:10px 12px; border-radius:8px; font-size:.79rem; margin-bottom:3px; transition:background .15s; }
.sidebar-navigation a:hover { background:#ffffff0a; color:#fff; }
.sidebar-navigation a.active { background:#d5edb5; color:#183f32; font-weight:650; }
.sidebar-navigation .icon { width:17px; height:17px; }
.sidebar-bottom { margin-top:auto; padding-top:12px; }
.sidebar-note { display:flex; gap:12px; align-items:center; padding:16px 10px; border-top:1px solid #ffffff14; }
.sidebar-note .icon { color:#c6dfb3; width:25px; height:25px; }
.sidebar-note p { margin:0; font-size:.7rem; color:#aec8bb; }
.sidebar-note strong { color:#cdded4; font-weight:500; }
.sidebar-profile { display:flex; align-items:center; gap:9px; padding:17px 0; border-top:1px solid #ffffff14; }
.sidebar-profile > span:nth-child(2) { flex:1; min-width:0; }
.sidebar-profile strong { display:block; font-size:.73rem; color:#e3ece5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-profile small { display:block; font-size:.64rem; color:#abc4b7; }
.sidebar-profile .icon-button:hover { background:#ffffff10; }
.sidebar-profile .avatar { width:30px; height:30px; font-size:.7rem; background:#b5c4a3; }
.avatar { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; font-size:.8rem; font-weight:650; background:#e7eadb; color:#4a6448; }
.app-frame { margin-left:245px; min-height:100vh; display:flex; flex-direction:column; min-width:0; }
.topbar { min-height:77px; border-bottom:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:space-between; padding:16px 34px; gap:16px; }
.topbar-location { display:flex; align-items:center; gap:12px; min-width:0; font-size:.75rem; }
.topbar-location a { color:var(--muted); text-decoration:none; }
.topbar-location [data-page-name] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; }
.breadcrumb-divider { color:#b9c1b9; }
.topbar-actions { display:flex; align-items:center; gap:13px; flex-shrink:0; }
.workspace-date { font-size:.72rem; color:var(--muted); margin-right:8px; }
.demo-label { font-size:.63rem; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:3px 6px; }
.menu-toggle { display:none; }
.main-content { width:100%; flex:1; }
main.wrap { padding:32px 34px 48px; }
.context-nav:has(ul:empty) { display:none; }
.context-nav ul { display:flex; flex-wrap:wrap; gap:14px; list-style:none; margin:0 0 22px; padding:0; }
.context-nav a { font-size:.76rem; color:var(--muted); text-decoration:none; }
.context-nav a:hover { color:var(--accent); text-decoration:underline; }
.site-footer { display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; border-top:1px solid var(--line); padding:16px 34px; font-size:.67rem; }
.panel,.card { border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.panel > h2:first-child,.card > h2:first-child { margin-top:0; }
.panel.narrow { margin:2rem auto; width:100%; max-width:32rem; }
.card-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:16px; }
.card p { font-size:.85rem; color:var(--muted); }
.badge { font-size:.68rem; border:0; font-weight:600; padding:4px 9px; gap:5px; white-space:nowrap; }
.badge-dot { height:5px; width:5px; }
.alert { font-size:.85rem; border-width:1px; padding:13px 16px; }
table { font-size:.82rem; } th,td { padding:13px 15px; } th { background:var(--bg); font-weight:500; font-size:.71rem; color:var(--muted); }
tbody tr:last-child td { border-bottom:0; } caption { margin:0 0 8px; }
.table-wrap { border:1px solid var(--line); border-radius:10px; background:var(--surface); } .table-wrap table { margin:0; }
.table-wrap:focus-visible { outline:3px solid var(--focus); }
.kv { font-size:.83rem; gap:.5rem 1.2rem; } .kv dt { color:var(--muted); font-weight:500; } .kv dd { overflow-wrap:anywhere; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:24px; }
.page-heading p { margin:0; color:var(--muted); font-size:.85rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-size:.64rem; font-weight:650; margin:0 0 8px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:28px 0 14px; }
.section-heading h2 { margin:0; } .section-heading a { font-size:.76rem; text-decoration:none; }
.empty-state { padding:30px 20px; text-align:center; color:var(--muted); } .empty-state h3 { color:var(--ink); }
.empty-state .icon { width:30px; height:30px; color:var(--accent); margin-bottom:8px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:22px 0 28px; }
.stat-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; min-height:137px; }
.stat-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; color:var(--muted); font-size:.73rem; }
.stat-heading .icon { padding:8px; box-sizing:content-box; background:var(--neutral-bg); border-radius:9px; color:var(--accent); width:17px; height:17px; }
.stat-value { display:block; font-size:2rem; font-weight:600; letter-spacing:-.05em; line-height:1.1; margin:9px 0 4px; font-variant-numeric:tabular-nums; }
.stat-detail { font-size:.65rem; color:var(--muted); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:23px; align-items:start; }
.dashboard-panel { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.dashboard-panel .section-heading { padding:20px 22px; margin:0; border-bottom:1px solid var(--line); }
.dashboard-panel .section-heading h2 { font-size:1rem; }
.dashboard-panel table { margin:0; }
.assessment-title { display:block; font-size:.8rem; text-decoration:none; font-weight:600; color:var(--ink); max-width:300px; }
.assessment-title:hover { color:var(--accent); text-decoration:underline; }
.assessment-subtitle { display:block; font-size:.65rem; color:var(--muted); margin-top:3px; }
.assessment-glyph { display:inline-grid; place-items:center; width:35px; height:38px; border-radius:8px; background:var(--ok-bg); color:var(--accent); margin-right:12px; flex-shrink:0; }
.assessment-cell { display:flex; align-items:center; min-width:210px; }
.quick-action { display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.quick-action:last-child { border:0; } .quick-action:hover { background:var(--bg); }
.quick-action > .icon:first-child { width:18px; height:18px; padding:10px; box-sizing:content-box; border-radius:10px; background:var(--neutral-bg); color:var(--accent); }
.quick-action span { flex:1; } .quick-action strong { display:block; font-size:.78rem; font-weight:600; } .quick-action small { display:block; color:var(--muted); font-size:.65rem; margin-top:2px; }
.quick-action > .icon:last-child { width:14px; color:var(--muted); }
.teacher-note { position:relative; overflow:hidden; background:#eaf0df; border:1px solid #e1e8d4; color:#3b573b; border-radius:14px; padding:24px; margin-top:20px; }
.teacher-note h3 { font:1.45rem/1.25 Georgia,serif; margin:12px 0; max-width:200px; }
.teacher-note p { font-size:.75rem; color:#5d7054; margin:0; }
.teacher-note .icon { width:25px; height:25px; }
.teacher-note a { color:#345c40; font-size:.75rem; display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-weight:600; text-decoration:none; }
.teacher-note a .icon { width:15px; height:15px; }
.class-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.class-card { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-decoration:none; color:var(--ink); }
.class-card:hover { border-color:var(--accent); }
.class-card h3 { font-size:.8rem; margin:14px 0 4px; } .class-card p { font-size:.66rem; color:var(--muted); margin:0; }
.class-icon { display:inline-flex; padding:9px; color:#507759; background:#edf3e7; border-radius:10px; }
.class-card:nth-child(3n+2) .class-icon { color:#776591; background:#f1edf7; } .class-card:nth-child(3n) .class-icon { color:#9c793c; background:#faf1df; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.resource-link { border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:17px; text-decoration:none; color:var(--ink); display:flex; gap:13px; align-items:start; }
.resource-link > .icon { color:var(--accent); margin-top:2px; }
.resource-link strong { font-size:.77rem; display:block; } .resource-link small { display:block; font-size:.67rem; color:var(--muted); margin-top:5px; line-height:1.5; }
.resource-link:hover { border-color:var(--accent); }
.notification-list { list-style:none; margin:0; padding:0; }
.notification-list li { border-bottom:1px solid var(--line); padding:17px 22px; }
.notification-list strong { font-size:.8rem; } .notification-list p { font-size:.75rem; color:var(--muted); margin:4px 0; }
.public-header { display:flex; justify-content:space-between; align-items:center; padding:25px max(6vw,24px); border-bottom:1px solid var(--line); }
.public-app main { min-height:calc(100vh - 185px); }
.public-app .site-footer { padding-left:6vw; padding-right:6vw; }
.auth-layout { display:grid; grid-template-columns:1.1fr 1fr; max-width:1050px; margin:5vh auto; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--surface); box-shadow:0 18px 60px #25433606; }
.auth-story { background:#103c38; color:#f0f3e9; padding:50px; display:flex; flex-direction:column; justify-content:center; min-height:510px; }
.auth-story .eyebrow { color:#b6d398; }
.auth-story h2 { font:2.8rem/1.15 Georgia,serif; margin:12px 0 22px; letter-spacing:-.04em; }
.auth-story p { color:#b8cdc1; font-size:.88rem; }
.auth-principles { list-style:none; padding:0; margin:28px 0 0; }
.auth-principles li { display:flex; align-items:center; gap:10px; margin:12px 0; font-size:.78rem; color:#d6e5d9; }
.auth-principles .icon { color:#c7e4a6; width:16px; }
.auth-form { padding:50px; align-self:center; } .auth-form h1 { font-size:1.85rem; }
.auth-form > p { font-size:.82rem; color:var(--muted); margin-bottom:28px; }
.auth-form .button-primary { width:100%; margin-top:22px; }
.password-field { display:flex; align-items:center; position:relative; }
.password-field input { padding-right:65px!important; }
.password-field button { position:absolute; right:4px; font-size:.7rem; background:none; border:0; padding:5px 10px; color:var(--muted); }
.auth-help { margin:23px 0 0!important; padding-top:20px; border-top:1px solid var(--line); font-size:.73rem!important; }
.landing-hero { max-width:1100px; margin:45px auto 20px; display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:center; }
.landing-hero h1 { font:clamp(2.6rem,4.6vw,4.8rem)/1.08 Georgia,serif; letter-spacing:-.055em; max-width:650px; }
.landing-hero h1 em { color:var(--accent); font-style:normal; }
.landing-hero .lede { font-size:1rem; line-height:1.8; max-width:460px; margin:24px 0; }
.landing-art { background:#e8eddd; border:1px solid #dfe6d4; border-radius:24px; padding:42px 30px; transform:rotate(-2deg); }
.landing-art > p { color:#506849; font-size:.66rem; text-transform:uppercase; letter-spacing:.15em; }
.learning-step { display:flex; align-items:center; gap:16px; padding:20px; background:#fff; border:1px solid #dce4d5; border-radius:12px; margin:14px 0; color:#244d3e; box-shadow:0 8px 15px #25433606; }
.learning-step:nth-child(3) { transform:translateX(16px); }
.learning-step > .icon { width:24px; height:24px; padding:12px; box-sizing:content-box; background:#edf4e6; border-radius:12px; }
.learning-step strong { font-size:.87rem; display:block; } .learning-step small { font-size:.73rem; color:#68786b; }
.landing-features { max-width:1100px; margin:75px auto 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:35px; }
.landing-features h2 { font-size:.95rem; } .landing-features p { color:var(--muted); font-size:.82rem; }
.sidebar-overlay[hidden] { display:none!important; }
.skip-link { z-index:100; }
@media(min-width:1600px) { main.wrap { padding:40px 48px; } }
@media(max-width:1200px) { .workspace-date { display:none; } .dashboard-grid { grid-template-columns:minmax(0,1fr) 270px; gap:18px; } .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .class-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1020px) { .sidebar { width:220px; padding-left:12px; padding-right:12px; } .app-frame { margin-left:220px; } .topbar { padding:15px 24px; } main.wrap { padding:28px 24px; } .dashboard-grid { grid-template-columns:1fr; } .dashboard-aside { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .teacher-note { margin:0; } .stat-grid { gap:10px; } .stat-card { padding:14px; } .auth-layout { margin:2vh auto; } .auth-form,.auth-story { padding:35px; } }
@media(max-width:780px) {
  .sidebar { width:245px; transform:translateX(-100%); transition:transform .2s; }
  .navigation-open .sidebar { transform:translateX(0); }
  .navigation-open { overflow:hidden; }
  .sidebar-overlay { position:fixed; inset:0; border:0; border-radius:0; background:#261b23a8; z-index:25; width:100%; height:100%; }
  .sidebar-overlay:hover { background:#261b23a8; }
  .app-frame { margin-left:0; } .menu-toggle { display:inline-flex; }
  .topbar { padding:10px 18px; min-height:65px; } .topbar-actions { gap:5px; } .topbar-location { gap:7px; }
  .topbar-location > a,.breadcrumb-divider,.topbar-avatar { display:none; }
  .topbar-location [data-page-name] { max-width:180px; }
  main.wrap { padding:24px 20px 35px; } .page-heading { align-items:flex-start; } .page-heading > .button { flex-shrink:0; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stat-value { font-size:1.8rem; }
  .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .auth-layout { grid-template-columns:1fr; max-width:480px; } .auth-story { min-height:0; padding:30px; }
  .auth-story h2 { font-size:2rem; margin:10px 0; } .auth-story > p,.auth-principles { display:none; } .auth-form { padding:30px; }
  .landing-hero { grid-template-columns:1fr; margin:25px auto; gap:35px; } .landing-art { max-width:420px; width:100%; margin:0 auto; padding:22px; }
  .landing-features { margin-top:45px; gap:20px; } .site-footer { padding:17px 20px; font-size:.62rem; }
}
@media(max-width:480px) { .demo-label { display:none; } .topbar-location [data-page-name] { max-width:165px; } .page-heading { flex-wrap:wrap; } .dashboard-aside,.resource-grid,.class-grid,.landing-features { grid-template-columns:1fr; } .stat-card { min-height:122px; } .panel,.card { padding:17px; } .section-heading { align-items:flex-start; } .section-heading a { font-size:.68rem; } .public-header { padding:18px 20px; } .brand { font-size:1.1rem; } .brand small { font-size:.5rem; } .brand-symbol { width:33px; } .public-header .button { padding:.45rem .7rem; } .auth-form { padding:25px; } .site-footer > span:nth-child(2) { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }
@media print { .sidebar,.topbar,.context-nav,.site-footer,.skip-link { display:none!important; } .app-frame { margin:0; } body { background:#fff; color:#000; } main.wrap { padding:0; } .panel,.card { box-shadow:none; break-inside:avoid; } }
/* Keep nested tables inside their scroll areas at narrow viewport widths. */
.dashboard-grid > *, .two-col > *, .card-grid > *, .builder-layout > *, .library-layout > * { min-width:0; }
.table-wrap { min-width:0; max-width:100%; }
.dashboard-panel .table-wrap { border:0; border-radius:0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; }
:root[data-theme="dark"] .wb-upload-zone { background:var(--neutral-bg); border-color:var(--line); }
:root[data-theme="dark"] .wb-skill-card[data-state="practice_suggested"] { background:var(--warn-bg); }
:root[data-theme="dark"] .wb-skill-card[data-state="recent_demonstration"] { background:var(--ok-bg); }
:root[data-theme="dark"] .wb-status { background:var(--ok-bg); color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .wb-status[data-tone="error"] { background:var(--bad-bg); color:var(--bad); }
@media(max-width:780px) { main table { max-width:100%; } .table-wrap,.table-scroll { overflow-x:auto; } }
@media(max-width:780px) { .sidebar { visibility:hidden; } .navigation-open .sidebar { visibility:visible; } }
.question-figure { display:block; width:auto; max-width:100%; height:auto; margin:1rem auto; border-radius:10px; background:#fff; }

/* Historical exam observations stay secondary to the original question. */
.exam-recurrence { border-inline-start:3px solid var(--accent); background:var(--ok-bg); margin:1rem 0; padding:1rem; }
.exam-recurrence > .eyebrow { margin-top:0; }
.exam-recurrence-concept { padding:.45rem 0 .65rem; }
.exam-recurrence-concept + .exam-recurrence-concept { border-top:1px solid var(--line); }
.exam-recurrence-concept p { margin:.35rem 0; overflow-wrap:anywhere; }
.exam-recurrence-concept summary { cursor:pointer; color:var(--accent); padding:.35rem 0; }
.exam-recurrence-note { font-size:.85rem; line-height:1.5; margin-bottom:0; }
.question-card .exam-recurrence { font-size:.9rem; }