@charset "UTF-8";

/* Foundations. Load tokens.css before this file. */
* { box-sizing: border-box; }
html { font: 16px/var(--leading-body) var(--font-sans); color: var(--color-text); background: var(--color-canvas); }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); word-break: keep-all; overflow-wrap: anywhere; }
h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-base); }
p { line-height: var(--leading-body); overflow-wrap: anywhere; }
small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
code { font-size: var(--text-xs); background: var(--color-surface-subtle); border-radius: var(--radius-sm); padding: 2px var(--space-1); overflow-wrap: anywhere; }
figure { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* App shell */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--layout-sidebar); background: var(--color-brand-deep); color: var(--color-text-inverse); padding: var(--space-8) var(--space-5) var(--space-5); display: flex; flex-direction: column; z-index: var(--z-navigation); border-top: 4px solid var(--color-action); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); letter-spacing: var(--tracking-heading); font-weight: var(--weight-heavy); flex-shrink: 0; }
.brand-mark { display: block; width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; border-radius: var(--radius-sm); }
.brand small { font-size: .625rem; letter-spacing: var(--tracking-label); font-weight: var(--weight-medium); margin-top: var(--space-1); }
.sidebar .brand small { color: var(--color-text-on-dark); }
.workspace-label { margin: var(--space-8) var(--space-3) var(--space-3); font-size: var(--text-xs); color: var(--color-text-on-dark); }
.sidebar nav { display: grid; gap: var(--space-1); overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.sidebar nav a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); padding: var(--space-3); border-radius: var(--radius-md); color: var(--color-text-on-dark); font-size: var(--text-md); font-weight: var(--weight-medium); border-left: 3px solid transparent; }
.sidebar nav a > span { font-size: var(--text-lg); line-height: 1; width: 22px; text-align: center; flex-shrink: 0; }
.sidebar nav a:hover { color: var(--color-text-inverse); background: var(--color-brand-hover); }
.sidebar nav a.active { color: var(--color-text-inverse); background: var(--color-brand-hover); border-left-color: var(--color-text-inverse); font-weight: var(--weight-bold); }
.sidebar-note { margin-top: auto; padding: var(--space-8) var(--space-3); }
.sidebar-note .eyebrow { font-size: .625rem; color: var(--color-text-on-dark); }
.sidebar-note p { font-size: var(--text-sm); color: var(--color-text-on-dark); }
.profile { border-top: 1px solid var(--color-border-on-dark); padding-top: var(--space-5); display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.profile > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.profile form { margin-left: auto; }
.profile small, .profile .icon-button { color: var(--color-text-on-dark); }
.avatar { height: var(--space-10); width: var(--space-10); border-radius: var(--radius-full); background: var(--color-selected); color: var(--color-brand); display: inline-grid; place-items: center; flex-shrink: 0; font-weight: var(--weight-semibold); }
.shell { margin-left: var(--layout-sidebar); }
.topbar { min-height: 76px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-10); font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-surface); }
.topbar b { font-weight: var(--weight-semibold); color: var(--color-text); margin-left: var(--space-2); }
.beta { background: var(--color-surface-subtle); color: var(--color-text-muted); font-size: .625rem; letter-spacing: var(--tracking-label); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); margin-left: var(--space-3); }
main { max-width: var(--layout-content); margin: auto; padding: var(--space-10) var(--space-10) var(--space-16); min-height: calc(100vh - 152px); }
footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-10); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); }
footer b { letter-spacing: var(--tracking-label); color: var(--color-text); }
.public-shell footer { justify-content: center; }
.page-heading { display: flex; gap: var(--space-6); align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.page-heading > div { min-width: 0; }
.page-heading p:not(.eyebrow) { color: var(--color-text-muted); font-size: var(--text-md); margin-top: var(--space-3); }
.eyebrow { font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--color-action); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.dashboard-heading { padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); }

/* Controls */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: var(--control-height); border: 1px solid transparent; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-heading); text-align: center; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.primary { background: var(--color-action); color: var(--color-text-inverse); }
.primary:hover:not(:disabled) { background: var(--color-action-hover); }
.secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-brand); }
.secondary:hover:not(:disabled) { background: var(--color-surface-subtle); border-color: var(--color-brand); }
.small { min-height: var(--target-min); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.full { width: 100%; }
.full span { margin-left: auto; }
.icon-button { background: none; border: 0; color: var(--color-text-muted); font-size: var(--text-xl); min-width: var(--target-min); min-height: var(--target-min); padding: var(--space-1); }
.text-button, .text-link { color: var(--color-link); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 4px; }
.text-button { background: none; border: 0; min-height: var(--target-min); padding: var(--space-2); }
.text-link { display: inline-flex; align-items: center; min-height: var(--target-min); }
label { display: block; font-size: var(--text-md); color: var(--color-text-body); font-weight: var(--weight-semibold); min-width: 0; }
label input:not([type=checkbox]):not([type=radio]), label select, label textarea { display: block; width: 100%; min-width: 0; margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); min-height: var(--control-height); font-size: var(--text-base); font-weight: var(--weight-regular); }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); font-size: var(--text-md); opacity: 1; }
label small { margin-top: var(--space-2); font-weight: var(--weight-regular); }
input[type=checkbox], input[type=radio] { accent-color: var(--color-brand); width: 18px; height: 18px; flex-shrink: 0; }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--color-danger); }
input[type=file] { max-width: 100%; }
textarea { resize: vertical; }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); }
.stack { display: grid; gap: var(--space-5); }
.stack > .button { justify-self: start; }
.stack > .full { justify-self: stretch; }
.form-panel { max-width: var(--layout-form); margin-top: var(--space-8); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.inline-form { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.inline-form:has(label) { align-items: end; }
.grow { flex: 1; min-width: 0; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-2) 0; }
.form-actions > .button { flex-shrink: 0; }
.student-options { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; gap: var(--space-4); flex-wrap: wrap; min-width: 0; }
.student-options legend { font-size: var(--text-md); padding: 0 var(--space-2); }

/* Layout and data */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-card); }
.stat > span { font-size: var(--text-sm); color: var(--color-text-body); }
.stat strong { display: block; font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: 1.8; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-heading); }
.stat strong small { display: inline; font-size: var(--text-sm); font-weight: var(--weight-regular); margin-left: var(--space-2); letter-spacing: normal; }
.stat p { font-size: var(--text-xs); color: var(--color-text-muted); }
.amber-text { color: var(--color-warning) !important; }
.brand-text { color: var(--color-brand) !important; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); min-width: 0; }
.panel > h2 { margin-bottom: var(--space-5); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.section-heading .eyebrow { margin-bottom: var(--space-1); }
.side-stack { display: grid; gap: var(--space-6); align-content: start; min-width: 0; }
.compact { padding: var(--space-6) var(--space-5); }
.compact h2 { font-size: var(--text-lg); }
.badge { display: inline-block; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5; white-space: nowrap; }
.badge + .badge { margin-left: var(--space-1); }
/* Existing semantic class names remain compatible with all role templates. */
.green { background: var(--color-success-subtle); color: var(--color-success); }
.amber { background: var(--color-warning-subtle); color: var(--color-warning); }
.red { background: var(--color-danger-subtle); color: var(--color-danger); }
.neutral { background: var(--color-surface-subtle); color: var(--color-text-muted); }
.table-wrap { overflow: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); text-align: left; }
th { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); background: var(--color-surface-subtle); padding: var(--space-3); white-space: nowrap; border-bottom: 1px solid var(--color-border); }
td { padding: var(--space-5) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-surface-subtle); }
.row-title { font-size: var(--text-md); font-weight: var(--weight-semibold); display: block; min-width: 150px; max-width: 265px; }
.row-title:hover { text-decoration: underline; text-underline-offset: 4px; }
td small { margin-top: var(--space-1); }
.submission-number { font-size: var(--text-md); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.submission-number span { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-regular); }
.progress { width: 80px; height: 4px; background: var(--color-selected); border-radius: var(--radius-full); margin-top: var(--space-2); overflow: hidden; }
.progress i { height: 100%; background: var(--color-brand); display: block; }
.arrow-link { border: 1px solid var(--color-border); border-radius: var(--radius-md); width: var(--target-min); height: var(--target-min); display: grid; place-items: center; color: var(--color-brand); }
.arrow-link:hover { background: var(--color-selected); }
.focus-card { background: var(--color-brand); position: relative; border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); overflow: hidden; min-height: 260px; border-top: 4px solid var(--color-action); }
.tiny-label { font-size: var(--text-xs); color: var(--color-text-on-dark); }
.focus-card h2 { font-size: var(--text-2xl); line-height: 1.5; margin-top: var(--space-4); color: var(--color-text-inverse); position: relative; z-index: 1; }
.focus-card p { font-size: var(--text-sm); color: var(--color-text-on-dark); margin: var(--space-3) 0 var(--space-4); position: relative; z-index: 1; }
.focus-card a { font-size: var(--text-sm); color: var(--color-text-inverse); display: inline-flex; align-items: center; min-height: var(--target-min); position: relative; z-index: 1; text-decoration: underline; text-underline-offset: 5px; }
.focus-shape { font: italic 80px var(--font-editorial); position: absolute; bottom: 0; right: var(--space-4); color: var(--color-border-on-dark); pointer-events: none; }
.class-mini { display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--color-border); padding: var(--space-4) 0; }
.class-mini:last-child { padding-bottom: 0; }
.class-mini > span:nth-child(2) { flex: 1; min-width: 0; }
.class-mini b { font-size: var(--text-sm); display: block; }
.class-icon { min-width: var(--space-10); min-height: var(--space-10); padding: var(--space-1); border-radius: var(--radius-md); background: var(--color-surface-subtle); color: var(--color-brand); display: grid; place-items: center; font-size: var(--text-xs); flex-shrink: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.spaced { margin-top: var(--space-6); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.class-card { display: block; transition: border-color var(--duration-fast) var(--ease-standard); }
.class-card:hover { border-color: var(--color-brand); }
.class-card h2 { margin-top: var(--space-5); }
.class-card p { color: var(--color-text-muted); font-size: var(--text-md); margin: var(--space-2) 0 var(--space-5); }
.class-card .green { background: var(--color-selected); color: var(--color-brand); }
.person-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.person-row > a { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
.person-row form { margin-left: auto; }
.timeline-item { display: block; position: relative; padding: 0 0 var(--space-8) var(--space-6); border-left: 1px solid var(--color-border); margin-left: var(--space-1); }
.timeline-item h3 { margin: var(--space-2) 0; }
.timeline-item p { font-size: var(--text-md); color: var(--color-text-muted); }
.timeline-dot { position: absolute; left: -5px; top: var(--space-1); width: 9px; height: 9px; background: var(--color-action); border: 2px solid var(--color-surface); border-radius: var(--radius-full); }

/* Learning, review and media */
.step { font: var(--text-xl) var(--font-editorial); color: var(--color-action); margin-right: var(--space-3); }
.question-editor { display: grid; grid-template-columns: 35px 1.1fr 1.1fr 1.4fr 44px; align-items: center; gap: var(--space-3); border-top: 1px solid var(--color-border); padding: var(--space-5) 0; }
.question-editor:first-child { margin-top: var(--space-5); }
.question-index { font-size: var(--text-sm); color: var(--color-text-muted); }
.key-row { display: flex; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; font-size: var(--text-md); flex-wrap: wrap; }
.key-row a { margin-left: auto; }
.result-banner { background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-left: 4px solid var(--color-brand); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-6); }
.result-banner p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.result-banner strong { font-size: var(--text-2xl); color: var(--color-brand); text-align: right; }
.result-banner strong small { font-weight: var(--weight-regular); }
.answer-row { display: flex; gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.answer-row:last-child { border-bottom: 0; }
.answer-number { font: var(--text-2xl) var(--font-editorial); color: var(--color-brand); min-width: 50px; }
.answer-number small { font: var(--text-xs) var(--font-sans); margin-top: var(--space-2); }
.answer-content { flex: 1; min-width: 0; }
.choices { display: flex; gap: var(--space-3); border: 0; padding: 0; margin: 0; flex-wrap: wrap; }
.choices label { position: relative; }
.choices input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choices span { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--text-base); }
.choices input:checked + span { background: var(--color-brand); color: var(--color-text-inverse); border-color: var(--color-brand); }
.choices input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.submitted-answer { font-size: var(--text-base); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: var(--space-3); }
.strategy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.strategy-grid > div { display: flex; gap: var(--space-3); align-items: center; background: var(--color-surface-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.strategy-grid b { font: var(--text-2xl) var(--font-editorial); color: var(--color-action); }
.strategy-grid span { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.strategy-grid small { font-weight: var(--weight-regular); }
.upload-form { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-subtle); padding: var(--space-6); margin: var(--space-5) 0; }
.video-item { border-top: 1px solid var(--color-border); padding-top: var(--space-6); margin-top: var(--space-6); }
.video-item p { margin-bottom: var(--space-3); }
video { display: block; width: 100%; max-height: 420px; background: var(--color-brand-deep); border-radius: var(--radius-md); margin-bottom: var(--space-5); }
.feedback { background: var(--color-surface-subtle); padding: var(--space-5); border-radius: var(--radius-md); }
.feedback p { white-space: pre-wrap; margin: var(--space-2) 0 0; }
.task-card { display: flex; gap: var(--space-5); justify-content: space-between; padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.task-card h3 { margin: var(--space-2) 0; }
.task-card p { font-size: var(--text-md); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.task-card > div { min-width: 0; }
.task-card > div:last-child { text-align: right; min-width: 95px; }
.task-arrow { display: block; color: var(--color-action); margin-top: var(--space-3); }
.attendance-log { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
.attendance-log small { text-align: right; }
.attendance-row { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.attendance-row small { margin-top: var(--space-1); }
.qr-panel { text-align: center; }
.qr-panel img { display: block; width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; margin: var(--space-4) auto; background: var(--color-surface); }
.qr-panel p { color: var(--color-text-muted); font-size: var(--text-sm); }
.check-in-panel { max-width: 580px; margin: var(--space-10) auto; text-align: center; padding: var(--space-12); border-top: 4px solid var(--color-brand); }
.check-in-panel p { margin-bottom: var(--space-6); }
.check-in-panel .button { justify-self: stretch; }
.instant-qr { display: block; max-width: 100%; height: auto; margin: var(--space-5) auto; background: var(--color-surface); }
.pairing-code { font-size: var(--text-2xl); letter-spacing: .1em; overflow-wrap: anywhere; }
.kiosk-panel { max-width: 700px; }
.answer-text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 420px; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-text-body); }
.application-row { padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.application-row:first-of-type { border-top: 0; }
.youtube-player { display: block; width: 100%; aspect-ratio: 16/9; min-height: 200px; border: 0; border-radius: var(--radius-md); margin: var(--space-4) 0; background: var(--color-brand-deep); }
.lecture-card { border-top: 1px solid var(--color-border); padding: var(--space-6) 0; }
.lecture-card label { margin-top: var(--space-4); }
.explanation-player { margin-top: var(--space-5); }

/* Feedback and help */
.demo-banner, .notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.demo-banner { background: var(--color-warning-subtle); border: 1px solid var(--color-warning); color: var(--color-warning); }
.notice { background: var(--color-success-subtle); border: 1px solid var(--color-success); color: var(--color-success); }
.empty { padding: var(--space-12) var(--space-6); text-align: center; color: var(--color-text-muted); }
.empty > span { font-size: var(--text-3xl); }
.empty h3, .empty h2 { margin-bottom: var(--space-3); color: var(--color-text); }
.empty .button { margin-top: var(--space-5); }
.muted, .helper { color: var(--color-text-muted); }
.helper { font-size: var(--text-sm); }
.helper a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
summary { cursor: pointer; color: var(--color-text); font-weight: var(--weight-semibold); min-height: var(--target-min); }
.error-panel { max-width: 700px; margin: var(--space-16) auto; border-top: 4px solid var(--color-danger); }
.error-panel p { margin: var(--space-4) 0 var(--space-6); }
.error-panel .eyebrow { margin: 0 0 var(--space-3); }
.help-overview { background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-left: 4px solid var(--color-brand); border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-6); }
.help-overview b { color: var(--color-brand); }
.help-overview p { margin-top: var(--space-2); font-size: var(--text-md); }
.help-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.help-side { display: grid; gap: var(--space-6); }
.help-steps { list-style: none; counter-reset: help-step; margin: 0; padding: 0; }
.help-steps li { counter-increment: help-step; position: relative; padding: var(--space-6) 0 var(--space-6) var(--space-12); border-bottom: 1px solid var(--color-border); }
.help-steps li:first-child { padding-top: var(--space-1); }
.help-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.help-steps li::before { content: counter(help-step, decimal-leading-zero); position: absolute; left: 0; color: var(--color-action); font: var(--text-xl) var(--font-editorial); }
.help-steps p { font-size: var(--text-md); margin-top: var(--space-3); color: var(--color-text-body); }
.help-layout a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.help-status { margin: 0; }
.help-status dt { margin-top: var(--space-4); }
.help-status dd { font-size: var(--text-sm); margin: var(--space-2) 0 0; color: var(--color-text-body); }
.help-faq details { border-top: 1px solid var(--color-border); padding: var(--space-3) 0; }
.help-faq details:last-child { padding-bottom: 0; }
.help-faq summary { font-size: var(--text-md); display: list-item; align-content: center; }
.help-faq p { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-body); }

/* Public brand experience */
.public-shell main { max-width: var(--layout-public); padding-top: var(--space-12); }
.login-layout { display: grid; grid-template-columns: 1.08fr 1fr; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-raised); }
.login-story { background: var(--color-brand-deep); color: var(--color-text-inverse); padding: var(--space-10); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-12); border-top: 4px solid var(--color-action); }
.login-story .brand small, .login-story .eyebrow { color: var(--color-text-on-dark); }
.login-story .brand-mark { width: 80px; height: 80px; }
.login-message h1 { font-size: var(--text-display); line-height: 1.3; letter-spacing: -.05em; margin: var(--space-5) 0 var(--space-6); }
.login-message h1 em { font-style: normal; text-decoration: underline; text-decoration-color: var(--color-action); text-decoration-thickness: 4px; text-underline-offset: 12px; }
.login-message > p:last-child { font-size: var(--text-md); color: var(--color-text-on-dark); line-height: 1.9; }
.login-principles { display: flex; gap: var(--space-5); border-top: 1px solid var(--color-border-on-dark); padding-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-on-dark); }
.login-principles b { display: block; font: var(--text-xl) var(--font-editorial); color: var(--color-text-inverse); margin-bottom: var(--space-2); }
.login-form { padding: var(--space-16) var(--space-10); align-self: center; }
.login-form .eyebrow { font-size: .6875rem; }
.login-form h2 { font-size: var(--text-3xl); }
.login-form > .muted { font-size: var(--text-md); margin: var(--space-3) 0 var(--space-8); }
.login-form .primary { margin-top: var(--space-2); }
.signup-link { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.signup-link a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--color-brand); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 4px; }
.login-support { margin-top: var(--space-5); }
.demo-accounts { border-top: 1px solid var(--color-border); margin-top: var(--space-6); padding-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); }
.demo-accounts p { margin-top: var(--space-2); }
.academy-intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--space-16); padding: var(--space-20) 0 var(--space-6); }
.academy-intro h2 { font-size: var(--text-3xl); margin: var(--space-4) 0 var(--space-6); }
.academy-intro-copy > p:not(.eyebrow) { font-size: var(--text-md); color: var(--color-text-muted); }
.intro-topics { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-body); }
.principal-profile img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.principal-profile figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.signup-panel { margin: 0 auto; padding: var(--space-10); border-top: 4px solid var(--color-action); }
.signup-panel .brand { margin-bottom: var(--space-6); }
.welcome-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; margin-bottom: var(--space-8); background: var(--color-brand-deep); color: var(--color-text-inverse); border-radius: var(--radius-lg); overflow: hidden; }
.welcome-intro > div { padding: var(--space-8); }
.welcome-intro .eyebrow, .welcome-intro p { color: var(--color-text-on-dark); }
.welcome-intro h2 { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
.welcome-intro img { width: 100%; height: auto; display: block; }

/* Keyboard and responsive behavior */
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; z-index: var(--z-skip); background: var(--color-surface); color: var(--color-brand); padding: var(--space-4); }
@media (min-width: 1550px) {
  main { padding-top: var(--space-12); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .stat { padding: var(--space-6) var(--space-8); }
}
@media (max-width: 1150px) {
  :root { --layout-sidebar: 14rem; }
  .sidebar { padding: var(--space-6) var(--space-3) var(--space-5); }
  .sidebar .brand-mark { width: 56px; height: 56px; }
  .sidebar nav a { gap: var(--space-2); padding: var(--space-3) var(--space-2); font-size: var(--text-sm); }
  .topbar { padding-inline: var(--space-6); }
  main { padding: var(--space-8) var(--space-6) var(--space-12); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-grid > .side-stack { grid-template-columns: 1fr 1fr; }
  .stats { gap: var(--space-3); }
  .stat { padding: var(--space-4); }
  .card-grid, .strategy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: var(--text-2xl); }
  .two-col { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .person-row { flex-wrap: wrap; }
  .question-editor { grid-template-columns: 30px 1fr 1fr 44px; }
  .question-editor > label:nth-of-type(3) { grid-column: 2 / 4; }
  .question-editor > .remove-question { grid-column: 4; grid-row: 1; }
  .login-story { padding: var(--space-8); }
  .login-form { padding: var(--space-12) var(--space-8); }
  .help-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sidebar { position: static; width: auto; padding: var(--space-3) var(--space-4) var(--space-2); display: block; }
  .brand { font-size: var(--text-lg); }
  .sidebar .brand-mark, .brand-mark { width: 48px; height: 48px; }
  .brand small { font-size: .5625rem; }
  .sidebar .workspace-label, .sidebar-note, .sidebar .profile { display: none; }
  .sidebar nav { display: flex; overflow-x: auto; gap: var(--space-1); margin: var(--space-3) 0 0; padding-bottom: var(--space-2); scrollbar-width: thin; }
  .sidebar nav a { padding: var(--space-2) var(--space-3); gap: var(--space-2); white-space: nowrap; flex-shrink: 0; border-left: 0; border-bottom: 2px solid transparent; }
  .sidebar nav a.active { border-bottom-color: var(--color-text-inverse); }
  .sidebar nav a > span { font-size: var(--text-base); width: auto; }
  .shell { margin-left: 0; }
  .topbar { min-height: var(--control-height); padding: var(--space-3) var(--space-4); }
  .topbar > span:first-child { display: none; }
  .topbar > span:last-child { margin-left: auto; }
  main { padding: var(--space-6) var(--space-4) var(--space-10); }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-lg); }
  .page-heading { display: block; margin-bottom: var(--space-6); }
  .page-heading > .button, .page-heading > .inline-form { margin-top: var(--space-5); }
  .page-heading p:not(.eyebrow) { font-size: var(--text-sm); }
  .eyebrow { font-size: var(--text-xs); }
  .dashboard-heading { padding-bottom: var(--space-6); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
  .stat { padding: var(--space-4); }
  .stat strong { font-size: var(--text-2xl); }
  .stat > span { font-size: var(--text-xs); }
  .panel { padding: var(--space-5) var(--space-4); }
  .dashboard-grid { gap: var(--space-5); }
  .dashboard-grid > .side-stack { grid-template-columns: minmax(0, 1fr); }
  .table-wrap { margin: 0; }
  td { padding: var(--space-4) var(--space-2); }
  th { padding: var(--space-3) var(--space-2); }
  .row-title { min-width: 150px; }
  .two-col, .card-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions > .inline-form { justify-content: flex-end; }
  .strategy-grid { gap: var(--space-2); }
  .strategy-grid > div { padding: var(--space-3); }
  .answer-row { gap: var(--space-3); }
  .answer-number { min-width: 28px; font-size: var(--text-xl); }
  .choices { gap: var(--space-2); }
  .choices span { width: var(--target-min); height: var(--target-min); }
  .result-banner { padding: var(--space-5); display: block; }
  .result-banner strong { display: block; text-align: left; margin-top: var(--space-3); }
  .task-card { flex-direction: column; gap: var(--space-3); }
  .task-card > div:last-child { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; text-align: left; }
  .task-arrow { margin: 0 0 0 auto; }
  .question-editor { grid-template-columns: 25px minmax(0, 1fr) 44px; }
  .question-editor > label, .question-editor > label:nth-of-type(3) { grid-column: 2; }
  .question-editor > .remove-question { grid-column: 3; }
  .question-editor .question-index { grid-row: 1; }
  .attendance-row { flex-wrap: wrap; }
  .attendance-row .inline-form { margin-left: auto; }
  .public-shell main { padding: var(--space-4); }
  .login-layout { grid-template-columns: minmax(0, 1fr); }
  .login-story { padding: var(--space-6); gap: var(--space-6); }
  .login-story .brand-mark { width: 48px; height: 48px; }
  .login-message h1 { font-size: 2rem; margin: var(--space-3) 0 var(--space-5); }
  .login-message h1 br:nth-of-type(2) { display: none; }
  .login-message h1 em { text-underline-offset: 7px; text-decoration-thickness: 3px; }
  .login-message > p:last-child { font-size: var(--text-sm); }
  .login-message .eyebrow, .login-principles { display: none; }
  .login-form { padding: var(--space-8) var(--space-6); }
  .login-form h2 { font-size: var(--text-2xl); }
  .login-form > .muted { margin-bottom: var(--space-6); }
  .academy-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-12) var(--space-2) var(--space-6); }
  .academy-intro h2 { font-size: var(--text-2xl); }
  .principal-profile { max-width: 480px; }
  .intro-topics { gap: var(--space-3); }
  .signup-panel { padding: var(--space-6); }
  .welcome-intro { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .welcome-intro > div { padding: var(--space-6); }
  .welcome-intro h2 { font-size: var(--text-2xl); }
  .check-in-panel { margin: var(--space-3) auto; padding: var(--space-8) var(--space-5); }
  .error-panel { margin: var(--space-4) auto; }
  footer { padding: var(--space-5) var(--space-4); gap: var(--space-2) var(--space-4); }
  .upload-form { padding: var(--space-4); }
  .help-overview { padding: var(--space-5); }
  .help-layout, .help-side { gap: var(--space-5); }
  .help-steps li { padding-left: var(--space-10); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}