/* Teacher dashboard (/teacher/): classes, rosters, gradebook. Every value comes from ../tokens.css. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; font-family: var(--tlg-font); font-size: var(--tlg-text-md); line-height: var(--tlg-leading-body); color: var(--tlg-text); background: var(--tlg-bg); }
[hidden] { display: none !important; }
:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: var(--tlg-focus-offset); }
h1, h2, h3, h4 { line-height: var(--tlg-leading-heading); }
h1 { font-size: var(--tlg-text-2xl); margin-bottom: var(--tlg-space-2); }
h2 { font-size: var(--tlg-text-lg); }
p { color: var(--tlg-text-muted); max-width: var(--tlg-prose); }
a { color: var(--tlg-link); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-2 { margin-top: var(--tlg-space-2); } .mt-3 { margin-top: var(--tlg-space-3); } .mt-4 { margin-top: var(--tlg-space-4); }
.mb-2 { margin-bottom: var(--tlg-space-2); } .mb-5 { margin-bottom: var(--tlg-space-5); }

/* ── The signed-in teacher, shown in the shared header's auth area ── */
.account { display: flex; align-items: center; gap: var(--tlg-space-3); min-width: 0; font-family: var(--tlg-font); font-size: var(--tlg-text-md); line-height: var(--tlg-leading-heading); color: var(--tlg-text); }
.avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--tlg-radius-full); object-fit: cover; color: var(--tlg-on-solid); background: var(--tlg-primary); font-weight: var(--tlg-weight-bold); }
.account-text { display: flex; flex-direction: column; min-width: 0; max-width: 16rem; }
.account-name { overflow: hidden; font-weight: var(--tlg-weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.account-email { overflow: hidden; color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1240px) { .account-email { display: none; } }
@media (max-width: 640px) { .account-text { display: none; } }
.link-btn { flex: none; padding: 0; border: 0; background: none; color: var(--tlg-link); font: inherit; font-weight: var(--tlg-weight-bold); text-decoration: underline; cursor: pointer; }
.link-btn.danger, .btn-danger { color: var(--tlg-danger-fg); }

/* ── Layout ── */
main { max-width: 960px; margin: 0 auto; padding: var(--tlg-space-10) var(--tlg-space-5); }
main:has(#screen-gradebook:not([hidden])) { max-width: 1400px; }
#view-loading, #view-signin, #view-error { max-width: 720px; margin-inline: auto; }
.card { padding: var(--tlg-space-8); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-1); }
.card p + p, .card h1 + p { margin-top: var(--tlg-space-2); }
#g-button { min-height: var(--tlg-tap); margin-top: var(--tlg-space-6); }
.notice { margin-top: var(--tlg-space-4); padding: var(--tlg-space-3) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); color: var(--tlg-danger-fg); background: var(--tlg-danger-bg); }
.notice--error { display: grid; justify-items: start; gap: var(--tlg-space-2); border-left: 4px solid var(--tlg-status-missing-solid); }
.notice--error .notice-title::before { content: "⚠ "; }
.notice--info { color: var(--tlg-text); background: var(--tlg-primary-tint); border-left-color: var(--tlg-primary); }
.notice--info .notice-title::before { content: "ℹ "; }
.notice .btn { margin-top: var(--tlg-space-1); }
.avatar-news { margin-bottom: var(--tlg-space-4); border-left: 4px solid var(--tlg-primary); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tlg-space-2) var(--tlg-space-4); }
.avatar-news p { flex: 1 1 320px; margin: 0; }
.avatar-news .btn { margin-top: 0; }
.empty { padding: var(--tlg-space-12) var(--tlg-space-4); text-align: center; }
.empty p { margin-inline: auto; }
.empty h2 { margin-bottom: var(--tlg-space-2); color: var(--tlg-text); }
.hint { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.muted { color: var(--tlg-text-muted); }
.num { font-variant-numeric: tabular-nums; }

/* ── Controls ── */
.btn { min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-weight: var(--tlg-weight-bold); cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--tlg-surface-2); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }   /* a link styled as a button (empty-state actions) */
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { border-color: var(--tlg-primary); color: var(--tlg-on-solid); background: var(--tlg-primary); }
.btn-primary:hover:not(:disabled) { border-color: var(--tlg-primary-hover); background: var(--tlg-primary-hover); }
label { display: block; font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
input[type="text"], textarea { width: 100%; margin-top: var(--tlg-space-1); padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; }
textarea { min-height: 9rem; resize: vertical; }
.check { display: flex; align-items: center; gap: var(--tlg-space-2); color: var(--tlg-text-muted); font-weight: var(--tlg-weight-regular); cursor: pointer; }
.check input { width: 18px; height: 18px; }

/* ── Dashboard tabs (Classes | Gradebook) ── */
.dash-nav { display: flex; gap: var(--tlg-space-2); margin-bottom: var(--tlg-space-5); border-bottom: var(--tlg-border-width-strong) solid var(--tlg-border); }
.dash-nav a { margin-bottom: calc(-1 * var(--tlg-border-width-strong)); padding: var(--tlg-space-2) var(--tlg-space-4); border-bottom: 3px solid transparent; color: var(--tlg-text-muted); font-weight: var(--tlg-weight-bold); text-decoration: none; }
.dash-nav a.on { border-bottom-color: var(--tlg-link); color: var(--tlg-link); }

/* ── Classes ── */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tlg-space-3) var(--tlg-space-4); margin-bottom: var(--tlg-space-5); }
.page-head h1 { margin: 0; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-4); }
.section-title { margin: var(--tlg-space-8) 0 var(--tlg-space-3); color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); letter-spacing: var(--tlg-tracking-caps); text-transform: uppercase; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--tlg-space-4); }
.class-card { display: flex; flex-direction: column; gap: var(--tlg-space-4); padding: var(--tlg-space-5); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); color: var(--tlg-text); background: var(--tlg-surface); text-decoration: none; box-shadow: var(--tlg-shadow-1); }
.class-card:hover { border-color: var(--tlg-primary); }
.class-card h2 { font-size: var(--tlg-text-lg); overflow-wrap: anywhere; }
.class-card .meta { margin-top: var(--tlg-space-1); color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.class-card .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--tlg-space-2); margin-top: auto; }
.class-card.archived { border-style: dashed; }
.class-card .badge-count { margin-left: var(--tlg-space-2); }
.code-chip { padding: 0 var(--tlg-space-2); border: var(--tlg-border-width) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); font-weight: var(--tlg-weight-bold); letter-spacing: var(--tlg-tracking-code); font-variant-numeric: tabular-nums; }

.back { display: inline-block; margin-bottom: var(--tlg-space-4); color: var(--tlg-link); font-weight: var(--tlg-weight-bold); text-decoration: none; }
.class-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tlg-space-5) var(--tlg-space-8); }
.class-head h1 { overflow-wrap: anywhere; }
.badge { display: inline-block; margin-top: var(--tlg-space-2); padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-full); color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.code-panel { text-align: center; }
.code-label { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); letter-spacing: var(--tlg-tracking-caps); text-transform: uppercase; }
.code-big { padding-left: var(--tlg-tracking-code); font-size: var(--tlg-text-3xl); font-weight: var(--tlg-weight-bold); line-height: var(--tlg-leading-heading); letter-spacing: var(--tlg-tracking-code); font-variant-numeric: tabular-nums; }
.code-actions, .toolbar { display: flex; flex-wrap: wrap; gap: var(--tlg-space-2); }
.code-actions { justify-content: center; margin-top: var(--tlg-space-2); }
.toolbar { margin: var(--tlg-space-4) 0; }

.roster-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tlg-space-2) var(--tlg-space-4); margin-bottom: var(--tlg-space-4); }
.add-form { display: grid; grid-template-columns: 1fr 12rem auto; align-items: end; gap: var(--tlg-space-2); }
.paste-tools { margin-top: var(--tlg-space-4); }
.paste-box { margin-top: var(--tlg-space-3); }
.paste-actions { display: flex; flex-wrap: wrap; gap: var(--tlg-space-2); margin-top: var(--tlg-space-2); }
.preview-scroll { max-height: 22rem; overflow: auto; margin-top: var(--tlg-space-2); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); }
.msg { margin-top: var(--tlg-space-3); padding: var(--tlg-space-3) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); font-size: var(--tlg-text-sm); }
.msg ul { margin: var(--tlg-space-1) 0 0 var(--tlg-space-5); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--tlg-space-2) var(--tlg-space-3); border-bottom: var(--tlg-border-width) solid var(--tlg-border); text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; color: var(--tlg-text-muted); background: var(--tlg-surface); font-size: var(--tlg-text-sm); letter-spacing: var(--tlg-tracking-caps); text-transform: uppercase; }
tr.warn td { background: var(--tlg-status-progress-bg); }
td.note { color: var(--tlg-status-progress-fg); font-size: var(--tlg-text-sm); }
td.actions { text-align: right; white-space: nowrap; }
td.actions .link-btn + .link-btn { margin-left: var(--tlg-space-4); }
td input[type="text"] { margin-top: 0; padding: var(--tlg-space-1) var(--tlg-space-2); }
.roster-table-wrap { margin-top: var(--tlg-space-4); }

dialog { width: 100%; max-width: min(30rem, calc(100vw - var(--tlg-space-8))); padding: 0; border: 0; border-radius: var(--tlg-radius-lg); color: var(--tlg-text); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-2); }
dialog::backdrop { background: var(--tlg-scrim); }
dialog form { display: grid; gap: var(--tlg-space-4); padding: var(--tlg-space-6); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--tlg-space-2); margin-top: var(--tlg-space-1); }

/* Projector view: stays light in both themes so the code reads from the back of the room. */
#project-dialog { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border-radius: 0; color: var(--tlg-projector-text); background: var(--tlg-projector-bg); box-shadow: none; }
#project-dialog[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2vh 3vw; text-align: center; }
.pd-close { position: absolute; top: var(--tlg-space-5); right: var(--tlg-space-5); min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-projector-muted); border-radius: var(--tlg-radius-sm); color: var(--tlg-projector-text); background: var(--tlg-projector-bg); font: inherit; font-size: var(--tlg-text-lg); font-weight: var(--tlg-weight-bold); cursor: pointer; }
.pd-class { max-width: 94vw; color: var(--tlg-projector-accent); font-size: var(--tlg-text-projector-title); font-weight: var(--tlg-weight-bold); line-height: var(--tlg-leading-heading); overflow-wrap: anywhere; }
.pd-period { margin-top: .4vh; color: var(--tlg-projector-muted); font-size: var(--tlg-text-projector-sub); font-weight: var(--tlg-weight-bold); }
.pd-label { margin-top: 5vh; color: var(--tlg-projector-muted); font-size: var(--tlg-text-projector-label); font-weight: var(--tlg-weight-bold); letter-spacing: var(--tlg-tracking-code); text-transform: uppercase; }
.pd-code { padding-left: .08em; color: var(--tlg-projector-text); font-size: var(--tlg-text-projector-code); font-weight: var(--tlg-weight-bold); line-height: var(--tlg-leading-tight); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.pd-count { min-height: 1.2em; margin-top: 1.5vh; color: var(--tlg-projector-ok); font-size: var(--tlg-text-projector-sub); font-weight: var(--tlg-weight-bold); }

.mode-choice { display: grid; gap: var(--tlg-space-2); margin-top: var(--tlg-space-3); }
.mode { display: flex; align-items: flex-start; gap: var(--tlg-space-3); padding: var(--tlg-space-3) var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-regular); cursor: pointer; }
.mode:has(input:checked) { border-color: var(--tlg-primary); background: var(--tlg-primary-tint); }
.mode input { flex: none; width: 18px; height: 18px; margin-top: var(--tlg-space-1); }
.mode strong { display: block; }
.mode span span { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.pending-card { border-color: var(--tlg-status-progress-solid); }
.badge-count { display: inline-block; min-width: 24px; padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-full); color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); text-align: center; }
.meter { height: var(--tlg-space-2); margin-top: var(--tlg-space-2); overflow: hidden; border-radius: var(--tlg-radius-full); background: var(--tlg-surface-2); }
.meter > span { display: block; height: 100%; background: var(--tlg-status-done-solid); transition: width .4s; }
.joined-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tlg-space-1) var(--tlg-space-4); margin-top: var(--tlg-space-4); }
.joined-line .big { font-size: var(--tlg-text-lg); font-weight: var(--tlg-weight-bold); }
.st-yes { color: var(--tlg-status-done-fg); font-weight: var(--tlg-weight-bold); white-space: nowrap; }
.st-no { color: var(--tlg-text-muted); white-space: nowrap; }
.live-dot { display: inline-block; width: 10px; height: 10px; margin-right: var(--tlg-space-2); border-radius: var(--tlg-radius-full); background: var(--tlg-status-done-solid); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ══ Gradebook ══ */
#screen-gradebook { max-width: 100%; }
.gb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tlg-space-3) var(--tlg-space-4); margin-bottom: var(--tlg-space-3); }
.gb-head h1 { margin: 0; }
.gb-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2); }
.gb-switch { display: flex; align-items: center; gap: var(--tlg-space-2); }
.gb-dates .gb-tlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gb-switch span, .gb-tlabel { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.gb-switch select, .gb-sortwrap select { max-width: 22rem; min-height: var(--tlg-tap); padding: 0 var(--tlg-space-3); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-weight: var(--tlg-weight-bold); }

/* subject tabs: the active one carries its subject's color */
.gb-tabs { display: flex; flex-wrap: wrap; gap: var(--tlg-space-1); margin-bottom: var(--tlg-space-4); border-bottom: var(--tlg-border-width-strong) solid var(--tlg-border); }
.gb-tab { display: inline-flex; align-items: center; gap: var(--tlg-space-2); min-height: var(--tlg-tap); margin-bottom: calc(-1 * var(--tlg-border-width-strong)); padding: 0 var(--tlg-space-4); border: 0; border-bottom: 4px solid transparent; color: var(--tlg-text-muted); background: none; font: inherit; font-weight: var(--tlg-weight-bold); cursor: pointer; }
.gb-tab:hover { color: var(--tlg-text); }
.gb-tab.on { border-bottom-color: var(--tlg-subject-solid); color: var(--tlg-subject-fg); }
.gb-tab:focus-visible { outline-offset: calc(-1 * var(--tlg-focus-width)); border-radius: var(--tlg-radius-sm); }
.gb-tabcount { padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-full); color: var(--tlg-text-muted); background: var(--tlg-surface-2); font-size: var(--tlg-text-sm); }
.gb-tab.on .gb-tabcount { color: var(--tlg-subject-fg); background: var(--tlg-subject-tint); }

/* layout: filter panel on the left, everything else on the right */
.gb-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; gap: var(--tlg-space-5); }
.gb-main { min-width: 0; }
.gb-panel { position: sticky; top: calc(var(--tlg-header-h) + var(--tlg-space-4)); max-height: calc(100vh - var(--tlg-header-h) - var(--tlg-space-8)); overflow-y: auto; padding: var(--tlg-space-4); }
.gb-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gb-skip:focus { position: static; display: inline-block; width: auto; height: auto; margin-bottom: var(--tlg-space-2); clip: auto; color: var(--tlg-link); font-weight: var(--tlg-weight-bold); }
.gb-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tlg-space-2); }
.gb-panel-head h2 { margin: 0; font-size: var(--tlg-text-lg); }
.gb-panel-quick { display: flex; gap: var(--tlg-space-4); margin: var(--tlg-space-2) 0; font-size: var(--tlg-text-sm); }
.gb-hide-empty { margin: var(--tlg-space-2) 0 var(--tlg-space-3); padding: var(--tlg-space-2) 0; border-block: var(--tlg-border-width) solid var(--tlg-border); font-size: var(--tlg-text-sm); }
.gb-units, .gb-units ul { margin: 0; padding: 0; list-style: none; }
.gb-unit + .gb-unit { border-top: var(--tlg-border-width) solid var(--tlg-border); }
.gb-unit-head { display: flex; align-items: center; gap: var(--tlg-space-2); }
.gb-unit-head input, .gb-fact input, .gb-fpage-head input { flex: none; width: 18px; height: 18px; margin: 0; }
.gb-unit-toggle { display: flex; flex: 1; align-items: center; gap: var(--tlg-space-2); min-width: 0; min-height: var(--tlg-tap); padding: 0; border: 0; color: var(--tlg-text); background: none; font: inherit; font-weight: var(--tlg-weight-bold); text-align: left; cursor: pointer; }
.gb-unit-name { flex: 1; min-width: 0; }
.gb-chev { width: 1em; color: var(--tlg-text-subtle); text-align: center; }
.gb-unit-list { padding: 0 0 var(--tlg-space-2) var(--tlg-space-3) !important; }
.gb-fact label, .gb-fpage-head { display: flex; align-items: center; gap: var(--tlg-space-2); min-height: 36px; font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-regular); cursor: pointer; }
.gb-fpage-head { font-weight: var(--tlg-weight-bold); }
.gb-fpage > ul { padding-left: var(--tlg-space-5) !important; }
.gb-fact-name { flex: 1; min-width: 0; line-height: var(--tlg-leading-heading); }
.gb-fact-count { min-width: 28px; padding: 0 var(--tlg-space-1); border-radius: var(--tlg-radius-full); color: var(--tlg-status-done-fg); background: var(--tlg-status-done-bg); font-size: var(--tlg-text-sm); text-align: center; }
.gb-fact-empty .gb-fact-name, .gb-fact-empty .gb-fact-count { color: var(--tlg-text-muted); }
.gb-fact-empty .gb-fact-count { background: var(--tlg-surface-2); }
.gb-panel-done, .gb-panel-toggle { display: none; }

/* one toolbar row */
.gb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2) var(--tlg-space-3); margin-bottom: var(--tlg-space-3); }
.gb-dates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2); }
.gb-dates input[type="date"] { width: 148px; min-height: var(--tlg-tap); padding: 0 var(--tlg-space-2); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; }
.gb-preset { min-height: 36px; padding: 0 var(--tlg-space-3); border: var(--tlg-border-width) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); cursor: pointer; }
.gb-preset[aria-pressed="true"] { border-color: var(--tlg-primary); color: var(--tlg-on-solid); background: var(--tlg-primary); }
.gb-check { display: inline-flex; align-items: center; gap: var(--tlg-space-2); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); cursor: pointer; }
.gb-check input { width: 18px; height: 18px; }
.gb-sortwrap { display: inline-flex; align-items: center; gap: var(--tlg-space-2); }
.gb-export-btn { margin-left: auto; }

/* the one-line banner that opens to fix missing IDs */
.gb-banner { margin-bottom: var(--tlg-space-3); padding: var(--tlg-space-2) var(--tlg-space-4); border: var(--tlg-border-width) solid var(--tlg-border); border-left: 4px solid var(--tlg-status-missing-solid); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface); font-size: var(--tlg-text-sm); }
.gb-banner a { color: var(--tlg-link); font-weight: var(--tlg-weight-bold); }
.gb-banner summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2); min-height: 36px; cursor: pointer; list-style: none; }
.gb-banner summary::-webkit-details-marker { display: none; }
.gb-banner-text { color: var(--tlg-text-muted); }
.gb-banner-fix { color: var(--tlg-link); font-weight: var(--tlg-weight-bold); text-decoration: underline; }
.gb-banner[open] .gb-banner-fix { display: none; }
.gb-banner-body { display: grid; gap: var(--tlg-space-2); padding: var(--tlg-space-2) 0 var(--tlg-space-3); }
.gb-banner-body p { max-width: none; }
.gb-banner-body textarea { min-height: 6rem; font-family: var(--tlg-font); }
.gb-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-4); }
.gb-note { margin-bottom: var(--tlg-space-2); padding: var(--tlg-space-3) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); font-size: var(--tlg-text-sm); }
.gb-note-warn { color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); }

/* summary strip: one compact card per column, scrolling sideways on its own */
.gb-summary-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 184px; gap: var(--tlg-space-2); margin-bottom: var(--tlg-space-3); padding-bottom: var(--tlg-space-2); overflow-x: auto; }
.gb-sum { display: grid; gap: var(--tlg-space-1); padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface); font-size: var(--tlg-text-sm); }
.gb-sum-name { overflow: hidden; font-weight: var(--tlg-weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.gb-sum-count { color: var(--tlg-text-muted); }
.gb-sum-count strong { color: var(--tlg-text); }
.gb-sum-bar { height: var(--tlg-space-2); overflow: hidden; border-radius: var(--tlg-radius-full); background: var(--tlg-surface-2); }
.gb-sum-fill { display: block; height: 100%; background: var(--tlg-status-done-solid); }
.gb-w-0 { width: 0%; } .gb-w-5 { width: 5%; } .gb-w-10 { width: 10%; } .gb-w-15 { width: 15%; } .gb-w-20 { width: 20%; } .gb-w-25 { width: 25%; } .gb-w-30 { width: 30%; } .gb-w-35 { width: 35%; } .gb-w-40 { width: 40%; } .gb-w-45 { width: 45%; } .gb-w-50 { width: 50%; } .gb-w-55 { width: 55%; } .gb-w-60 { width: 60%; } .gb-w-65 { width: 65%; } .gb-w-70 { width: 70%; } .gb-w-75 { width: 75%; } .gb-w-80 { width: 80%; } .gb-w-85 { width: 85%; } .gb-w-90 { width: 90%; } .gb-w-95 { width: 95%; } .gb-w-100 { width: 100%; }
.gb-sum-prog { min-height: 1.5em; color: var(--tlg-status-progress-fg); }
.gb-summary { margin: 0 0 var(--tlg-space-2); color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }

/* the grid: sticky names and header (see "One scroll" below for how it scrolls) */
.gb-gridwrap { overflow: auto; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); }
table.gb-grid { min-width: 100%; border-collapse: separate; border-spacing: 0; }
.gb-grid th, .gb-grid td { padding: 0; border-right: var(--tlg-border-width) solid var(--tlg-border); border-bottom: var(--tlg-border-width) solid var(--tlg-border); text-align: left; vertical-align: middle; }
.gb-grid thead th { position: sticky; top: 0; z-index: 3; width: 128px; min-width: 128px; max-width: 168px; padding: var(--tlg-space-2); border-bottom: var(--tlg-border-width-strong) solid var(--tlg-border); color: var(--tlg-text); background: var(--tlg-surface); font-size: var(--tlg-text-sm); letter-spacing: 0; text-transform: none; vertical-align: bottom; }
.gb-grid th.gb-corner { left: 0; z-index: 4; width: 184px; min-width: 184px; max-width: none; }
.gb-corner-label { display: block; margin-bottom: var(--tlg-space-1); }
.gb-corner select { width: 100%; min-height: 36px; padding: 0 var(--tlg-space-2); border: var(--tlg-border-width) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-weight: var(--tlg-weight-regular); }
.gb-grid th.gb-student { position: sticky; left: 0; z-index: 2; min-width: 184px; padding: var(--tlg-space-1) var(--tlg-space-3); color: var(--tlg-text); background: var(--tlg-surface); font-size: var(--tlg-text-sm); letter-spacing: 0; text-transform: none; }
.gb-name { display: block; font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); line-height: var(--tlg-leading-heading); }
.gb-uname { color: var(--tlg-text-muted); font-weight: var(--tlg-weight-regular, 400); }
.gb-num { display: block; color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-regular); font-variant-numeric: tabular-nums; }
.gb-num-missing { display: inline-flex; margin-top: var(--tlg-space-1); }
.gb-acttitle { display: -webkit-box; overflow: hidden; font-weight: var(--tlg-weight-bold); line-height: var(--tlg-leading-heading); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.gb-colsub { display: block; color: var(--tlg-text-muted); font-weight: var(--tlg-weight-regular); }
.gb-colsub .st-submitted { color: var(--tlg-status-done-fg); } .gb-colsub .st-in_progress { color: var(--tlg-status-progress-fg); }
.gb-colbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-align: left; cursor: pointer; }
.gb-pagehead .gb-colbtn { flex-direction: row; flex-wrap: wrap; column-gap: var(--tlg-space-1); }
.gb-pagehead .gb-colsub { flex-basis: 100%; }
.gb-colbtn-sm { flex-direction: row; gap: var(--tlg-space-1); color: var(--tlg-link); font-weight: var(--tlg-weight-bold); }
.gb-parthead { background: var(--tlg-primary-tint) !important; }

.gb-cell { all: unset; position: relative; box-sizing: border-box; display: flex; align-items: center; gap: var(--tlg-space-1); width: 100%; min-height: var(--tlg-tap); padding: 0 var(--tlg-space-2); font-size: var(--tlg-text-sm); white-space: nowrap; cursor: pointer; }
.gb-cell:hover { filter: brightness(.96); }
html[data-theme="dark"] .gb-cell:hover { filter: brightness(1.15); }
.gb-cell:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: calc(-1 * var(--tlg-focus-width)); }
.gb-cell.st-submitted { color: var(--tlg-status-done-fg); background: var(--tlg-status-done-bg); }
.gb-cell.st-in_progress { color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); }
.gb-cell.st-not_started { color: var(--tlg-status-none-fg); background: var(--tlg-status-none-bg); }
.gb-mark { flex: none; width: 1.1em; font-weight: var(--tlg-weight-bold); text-align: center; }
.gb-cellsub { overflow: hidden; text-overflow: ellipsis; }
.gb-flag { margin-left: auto; }
.gb-dur { margin-top: var(--tlg-space-1); font-weight: var(--tlg-weight-bold); font-variant-numeric: tabular-nums; }
.gb-dur-big { margin: 0; font-size: var(--tlg-text-xl); line-height: var(--tlg-leading-heading); }
.gb-dur-short { padding: 0 var(--tlg-space-1); border-radius: var(--tlg-radius-sm); color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); }
.gb-dur-none { font-weight: var(--tlg-weight-regular); }
.gb-dur-big.gb-dur-none { font-size: var(--tlg-text-md); }

@media (max-width: 1100px) {
  .gb-layout { grid-template-columns: minmax(0, 1fr); }
  .gb-panel { display: none; position: static; max-height: none; }
  .gb-panel-open .gb-panel { display: block; }
  .gb-panel-open .gb-main { display: none; }
  .gb-panel-toggle, .gb-panel-done { display: inline-flex; align-items: center; }
  .gb-panel-done { margin-top: var(--tlg-space-3); }
  .gb-export-btn { margin-left: 0; }
}
@media (max-width: 640px) {
  .gb-grid th.gb-corner, .gb-grid th.gb-student { width: 132px; min-width: 132px; }
  .gb-grid thead th { width: 112px; min-width: 112px; }
}

/* One scroll, wherever the cursor is: on laptop-size screens and up the grid is at most one window tall, and gradebook.js
   turns every wheel/trackpad scroll on the page into one continuous scroll: the page scrolls until the grid reaches the top,
   then the grid scrolls, then the page again (and the reverse going up). Small screens: the page scrolls, the grid only sideways. */
/* With the detail drawer or export window open, scrolling never moves the page behind it. */
html:has(#screen-gradebook dialog[open]) { overflow: hidden; }
@media (min-width: 901px) and (min-height: 560px) {
  #screen-gradebook .gb-gridwrap { max-height: calc(100dvh - var(--tlg-header-h) - var(--tlg-space-4)); }
}

/* Compact: narrower columns, shorter rows, no summary cards (the column headers already show the counts) */
.gb-compact .gb-summary-strip { display: none; }
.gb-compact .gb-grid thead th { width: 104px; min-width: 104px; max-width: 132px; padding: var(--tlg-space-1) var(--tlg-space-2); }
.gb-compact .gb-acttitle { -webkit-line-clamp: 2; }
.gb-compact .gb-grid th.gb-corner, .gb-compact .gb-grid th.gb-student { width: 156px; min-width: 156px; }
.gb-compact .gb-grid th.gb-student { padding: 0 var(--tlg-space-2); }
.gb-compact .gb-name { display: inline; font-size: var(--tlg-text-sm); }
.gb-compact .gb-num { display: inline; margin-left: var(--tlg-space-1); }
.gb-compact .gb-cell { min-height: 32px; }

dialog.gb-drawer { width: min(780px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; }
/* The drawer's header (name, status, Previous/Next, Close) stays pinned while long work scrolls under it. */
.gb-drawer .gb-dhead { position: sticky; top: 0; z-index: 2; flex-wrap: wrap; margin: calc(-1 * var(--tlg-space-5)) calc(-1 * var(--tlg-space-6)) 0; padding: var(--tlg-space-4) var(--tlg-space-6) var(--tlg-space-3); border-bottom: var(--tlg-border-width) solid var(--tlg-border); background: var(--tlg-surface); }
.gb-dnav { display: flex; flex-wrap: wrap; gap: var(--tlg-space-2); margin-left: auto; }
.gb-dnav .gb-close { margin-left: 0; }
.gb-step[disabled] { opacity: .45; cursor: not-allowed; }
.gb-tscore { display: grid; gap: var(--tlg-space-2); padding: var(--tlg-space-3) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); }
.gb-tscore h4 { margin: 0; font-size: var(--tlg-text-md); }
.gb-tsrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tlg-space-2) var(--tlg-space-3); }
.gb-tsrow label, .gb-tsnotelabel { display: grid; gap: var(--tlg-space-1); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.gb-tsnum { width: 6.5rem; min-height: 44px; font-size: var(--tlg-text-lg); }
.gb-tsout { padding-bottom: var(--tlg-space-2); color: var(--tlg-text-muted); }
.gb-tspart { align-items: center; }
.gb-tsplabel { flex: 1 1 8rem; min-width: 8rem; font-weight: var(--tlg-weight-bold); }
.gb-tspart .gb-tsout { padding-bottom: 0; }
.gb-tsnote { width: 100%; min-height: 3rem; font: inherit; resize: vertical; }
.gb-tsactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2) var(--tlg-space-3); }
.gb-tshint { margin: 0; }
dialog#gb-export { width: min(760px, calc(100vw - var(--tlg-space-8))); max-width: none; max-height: calc(100vh - var(--tlg-space-8)); overflow: auto; }
.gb-dbody, .gb-xbody { display: grid; align-content: start; gap: var(--tlg-space-4); padding: var(--tlg-space-5) var(--tlg-space-6) var(--tlg-space-8); }
.gb-dhead { display: flex; align-items: flex-start; gap: var(--tlg-space-3); }
.gb-dhead > div { flex: 1; min-width: 0; }
.gb-dhead h2 { overflow-wrap: anywhere; }
.gb-dsub { margin: var(--tlg-space-1) 0 0; }
.gb-dhint { margin: 0; font-size: var(--tlg-text-sm); }
.gb-pill { display: inline-flex; align-items: center; gap: var(--tlg-space-1); padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-full); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); white-space: nowrap; }
.gb-pill.st-submitted { color: var(--tlg-status-done-fg); background: var(--tlg-status-done-bg); }
.gb-pill.st-in_progress { color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); }
.gb-pill.st-not_started { color: var(--tlg-status-none-fg); background: var(--tlg-status-none-bg); }
.gb-dim { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-regular); }
.gb-attempt { display: grid; gap: var(--tlg-space-3); padding: var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); }
.gb-attempt-counts { border-color: var(--tlg-status-done-solid); }
.gb-ahead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-1) var(--tlg-space-3); }
.gb-ahead h3 { margin: 0; font-size: var(--tlg-text-lg); }
.gb-when { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.gb-counts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2); margin-left: auto; }
.gb-adur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-1) var(--tlg-space-4); }
.gb-ascore { font-size: var(--tlg-text-lg); }
.gb-work summary, .gb-raw summary { color: var(--tlg-link); font-weight: var(--tlg-weight-bold); cursor: pointer; }
.gb-raw pre { max-height: 22rem; overflow: auto; padding: var(--tlg-space-3); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); font-size: var(--tlg-text-sm); white-space: pre-wrap; word-break: break-word; }
.gb-view { display: grid; gap: var(--tlg-space-4); }
.gb-sec h4 { margin: 0 0 var(--tlg-space-2); color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); letter-spacing: var(--tlg-tracking-caps); text-transform: uppercase; }
.gb-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--tlg-space-1) var(--tlg-space-4); margin: 0; }
.gb-kv dt { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.gb-kv dd { margin: 0; overflow-wrap: anywhere; }
.gb-text { margin-top: var(--tlg-space-2); }
.gb-textlabel { margin-bottom: var(--tlg-space-1); }
.gb-pre { padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.gb-tablewrap { overflow-x: auto; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); }
table.gb-data { width: 100%; border-collapse: collapse; font-size: var(--tlg-text-sm); font-variant-numeric: tabular-nums; }
.gb-data th { position: sticky; top: 0; padding: var(--tlg-space-2); border-bottom: var(--tlg-border-width-strong) solid var(--tlg-border); color: var(--tlg-text-muted); background: var(--tlg-surface); font-size: var(--tlg-text-sm); letter-spacing: 0; text-align: left; text-transform: none; white-space: nowrap; }
.gb-data td { padding: var(--tlg-space-1) var(--tlg-space-2); border-bottom: var(--tlg-border-width) solid var(--tlg-border); }
.gb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--tlg-space-2); }
.gb-tile { padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); }
.gb-tilev { font-size: var(--tlg-text-xl); font-weight: var(--tlg-weight-bold); line-height: var(--tlg-leading-heading); }
.gb-tilel { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
table.gb-acc { width: 100%; border-collapse: collapse; font-size: var(--tlg-text-sm); }
.gb-acc th, .gb-acc td { padding: var(--tlg-space-1) var(--tlg-space-2); border-bottom: var(--tlg-border-width) solid var(--tlg-border); text-align: left; }
.gb-acc thead th { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.gb-acc tbody th { position: static; color: var(--tlg-text); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); letter-spacing: 0; text-transform: none; }
.gb-barcell { display: flex; align-items: center; gap: var(--tlg-space-2); min-width: 9rem; }
.gb-bar { flex: 1; height: var(--tlg-space-2); overflow: hidden; border-radius: var(--tlg-radius-full); background: var(--tlg-surface-2); }
.gb-bar > span { display: block; height: 100%; background: var(--tlg-status-done-solid); }
.gb-strip { display: flex; flex-wrap: wrap; gap: var(--tlg-space-1); margin: var(--tlg-space-2) 0; }
.gb-dot { display: inline-block; width: 14px; height: 14px; border-radius: var(--tlg-space-1); vertical-align: middle; }
.gb-dot-ok { background: var(--tlg-status-done-solid); } .gb-dot-late { background: var(--tlg-status-progress-solid); } .gb-dot-miss { background: var(--tlg-status-missing-solid); }
.gb-legend { margin: 0; }
.gb-xset { display: grid; gap: var(--tlg-space-2); margin: 0; padding: 0; border: 0; }
.gb-xset fieldset { display: grid; gap: var(--tlg-space-1); padding: var(--tlg-space-2) var(--tlg-space-3) var(--tlg-space-3); border: var(--tlg-border-width-strong) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); }
.gb-xset legend { padding: 0 var(--tlg-space-1); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.gb-radio { display: flex; align-items: flex-start; gap: var(--tlg-space-2); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-regular); cursor: pointer; }
.gb-radio input { margin-top: var(--tlg-space-1); }
.gb-xpreview { overflow-x: auto; padding: var(--tlg-space-3) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); color: var(--tlg-code-text); background: var(--tlg-code-bg); font-size: var(--tlg-text-sm); line-height: var(--tlg-leading-body); white-space: pre; }
.gb-how { display: grid; gap: var(--tlg-space-1); margin: 0; padding-left: var(--tlg-space-5); color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.gb-xactions { display: flex; justify-content: flex-end; }
.gb-close { margin-left: auto; }

/* ── Student work panel (gradebook.js renderDetail): header, at-a-glance, Needs attention, answers, data, more ──
   Only the Needs attention box and the answer cards have borders. Grids are minmax(0, 1fr) so a wide table scrolls
   inside its .gb-tablewrap instead of widening the drawer. */
.gb-drawer .gb-dbody { grid-template-columns: minmax(0, 1fr); gap: var(--tlg-space-6); }
.gb-drawer .gb-dhead { flex-wrap: wrap; align-items: center; row-gap: var(--tlg-space-1); }
.gb-drawer .gb-dhead > .gb-dtitle { flex: 1 1 auto; }
.gb-drawer .gb-dhead > .gb-dnav { flex: none; }
.gb-dtitle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-1) var(--tlg-space-3); }
.gb-dtitle h2 { margin: 0; }
.gb-drawer .gb-dsub { flex-basis: 100%; margin: 0; color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.gb-dsub strong { color: var(--tlg-text); }
.gb-dsub .gb-pill { margin-left: var(--tlg-space-2); }
.gb-glance { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.gb-drawer .gb-tile { display: grid; align-content: start; gap: 2px; border: 0; }
.gb-drawer .gb-tile .gb-pill { justify-self: start; }
.gb-tilev-sm { font-size: var(--tlg-text-md); }
.gb-tilenote { font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); }
.gb-emptystate { padding: var(--tlg-space-5); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface-2); text-align: center; }
.gb-emptystate h3 { margin: 0 0 var(--tlg-space-1); font-size: var(--tlg-text-lg); }
.gb-emptystate p { max-width: none; margin: 0; }
.gb-gradebox, .gb-gradeform { display: grid; gap: var(--tlg-space-2); }
.gb-drawer form.gb-tsparts, .gb-drawer form.gb-gradeform { padding: 0; }
.gb-gradeform h3 { margin: 0; font-size: var(--tlg-text-lg); }
.gb-gradeform .gb-tsrow label { display: grid; }

.gb-attn { padding: var(--tlg-space-3) var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-status-missing-solid); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); }
.gb-attn h3 { margin: 0 0 var(--tlg-space-2); font-size: var(--tlg-text-md); }
.gb-attn ul { display: grid; gap: var(--tlg-space-1); margin: 0; padding: 0; list-style: none; }
.gb-attn li { display: flex; align-items: baseline; gap: var(--tlg-space-2); font-size: var(--tlg-text-md); }
.gb-attn-text { flex: 1; min-width: 0; }
.gb-attn-text .link-btn { margin-left: var(--tlg-space-2); }
.gb-attn a { color: var(--tlg-link); }
.gb-attn-icon { flex: none; min-width: 1.75em; border-radius: var(--tlg-radius-sm); font-weight: var(--tlg-weight-bold); text-align: center; }
.gb-attn-missing .gb-attn-icon { color: var(--tlg-status-missing-fg); background: var(--tlg-status-missing-bg); }
.gb-attn-warn .gb-attn-icon { color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); }
.gb-attn-todo .gb-attn-icon { background: var(--tlg-primary-tint); }
.gb-allclear { margin: 0; padding: var(--tlg-space-2) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); color: var(--tlg-status-done-fg); background: var(--tlg-status-done-bg); font-weight: var(--tlg-weight-bold); }

.gb-aview { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tlg-space-5); }
.gb-aview .gb-ahead h3 { margin: 0; font-size: var(--tlg-text-lg); }
.gb-written, .gb-tsparts, .gb-datasec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tlg-space-3); }
.gb-written > h4 { margin: 0; }
.gb-answer { display: grid; gap: var(--tlg-space-2); padding: var(--tlg-space-3) var(--tlg-space-4); border: var(--tlg-border-width) solid var(--tlg-border); border-left-width: 5px; border-radius: var(--tlg-radius-sm); background: var(--tlg-surface); }
.gb-answer-missing { border-left-color: var(--tlg-status-missing-solid); }
.gb-answer-warn { border-left-color: var(--tlg-status-progress-solid); }
.gb-answer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tlg-space-1) var(--tlg-space-3); }
.gb-answer-text { font-size: var(--tlg-text-md); line-height: var(--tlg-leading-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.gb-answer-empty { max-width: none; margin: 0; color: var(--tlg-text-muted); font-style: italic; }
@media (max-width: 480px) { .gb-answer .gb-tsplabel { flex-basis: 100%; } }
.gb-answer .gb-tspart { padding-top: var(--tlg-space-2); border-top: var(--tlg-border-width) dashed var(--tlg-border); }
.gb-badge { display: inline-flex; align-items: center; padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-full); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); white-space: nowrap; }
.gb-badge-missing { color: var(--tlg-status-missing-fg); background: var(--tlg-status-missing-bg); }
.gb-badge-warn { color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); }
.gb-tsfoot { display: grid; gap: var(--tlg-space-2); padding: var(--tlg-space-3) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); }

.gb-data td.gb-td-blank { color: var(--tlg-status-missing-fg); background: var(--tlg-status-missing-bg); text-align: center; }
.gb-data td.gb-td-no { color: var(--tlg-status-missing-fg); font-weight: var(--tlg-weight-bold); white-space: nowrap; }
.gb-data td.gb-td-yes { color: var(--tlg-status-done-fg); font-weight: var(--tlg-weight-bold); white-space: nowrap; }
.gb-data tr.gb-unmeasured td { background: color-mix(in srgb, var(--tlg-status-missing-bg) 50%, transparent); }
.gb-data tr.gb-unmeasured td.gb-td-blank { background: var(--tlg-status-missing-bg); }
.gb-data tr.gb-unmeasured .gb-badge { margin-left: var(--tlg-space-2); }
.gb-data td { white-space: nowrap; }
.gb-tablewrap-plain { max-height: none; border: 0; }
.gb-nodata { max-width: none; margin: 0; padding: var(--tlg-space-2) var(--tlg-space-3); border-radius: var(--tlg-radius-sm); color: var(--tlg-status-missing-fg); background: var(--tlg-status-missing-bg); font-weight: var(--tlg-weight-bold); }

.gb-more > summary { display: flex; align-items: center; min-height: var(--tlg-tap); color: var(--tlg-link); font-weight: var(--tlg-weight-bold); cursor: pointer; }
.gb-more[open] > summary { margin-bottom: var(--tlg-space-2); }
.gb-more > .gb-sec + .gb-sec, .gb-more > .gb-sec + p { margin-top: var(--tlg-space-4); }
.gb-others { display: grid; gap: var(--tlg-space-2); margin: 0; padding: 0; list-style: none; }
.gb-others > li { padding: var(--tlg-space-2) var(--tlg-space-3); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); }
.gb-other-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-1) var(--tlg-space-3); }
.gb-other-row .gb-other-actions { display: flex; align-items: center; gap: var(--tlg-space-3); margin-left: auto; }
.gb-other-view { margin-top: var(--tlg-space-3); padding: var(--tlg-space-3) 0 var(--tlg-space-2) var(--tlg-space-3); border-left: 3px solid var(--tlg-border-strong); }
.gb-target { scroll-margin-top: 10rem; }
.gb-target:focus { outline: none; }
.gb-flash { animation: gb-flash 1.6s ease-out; }
@keyframes gb-flash { 0%, 45% { box-shadow: 0 0 0 4px var(--tlg-focus); } 100% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .gb-flash { animation: none; outline: 3px solid var(--tlg-focus); outline-offset: 2px; } }

#toast { position: fixed; bottom: var(--tlg-space-6); left: 50%; z-index: 50; max-width: min(34rem, calc(100vw - var(--tlg-space-8))); padding: var(--tlg-space-3) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); color: var(--tlg-toast-text); background: var(--tlg-toast-bg); font-weight: var(--tlg-weight-bold); box-shadow: var(--tlg-shadow-2); transform: translateX(-50%); }
#toast.error { color: var(--tlg-on-solid); background: var(--tlg-toast-danger-bg); }

@media (max-width: 640px) {
  main { padding: var(--tlg-space-6) var(--tlg-space-4); }
  .card { padding: var(--tlg-space-5); }
  .add-form { grid-template-columns: 1fr; }
  .code-panel { text-align: left; }
  .code-actions { justify-content: flex-start; }
  .gb-frow > strong { min-width: 100%; }
  .gb-kv { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } .meter > span { transition: none; } }

/* ══ Class Games tab (teacher/class-games.js): host cards, results list, one game ══ */
.cg-hosts, .cg-missed-grid, .cg-fills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; gap: var(--tlg-space-4); }
.cg-hosts { align-items: stretch; }
.cg-host, .cg-missed, .cg-fillcard { padding: var(--tlg-space-5); }
.cg-host { display: flex; flex-direction: column; gap: var(--tlg-space-3); }
.cg-host p { flex: 1; }
.cg-host .btn { align-self: flex-start; }
.cg-join { margin-top: var(--tlg-space-3); }
.cg-results:focus { outline: none; }
.cg-table-card { padding: 0; overflow: hidden; }
.cg-scroll { overflow-x: auto; }
.cg-table { font-size: var(--tlg-text-sm); font-variant-numeric: tabular-nums; }
.cg-table .num { text-align: right; }
.cg-table tbody tr:last-child td { border-bottom: 0; }
.cg-row { cursor: pointer; }
.cg-row:hover td { background: var(--tlg-surface-2); }
.cg-row a { font-weight: var(--tlg-weight-bold); }
.cg-nowrap { white-space: nowrap; }
.cg-tag, .cg-correct { display: inline-block; padding: 0 var(--tlg-space-2); border-radius: var(--tlg-radius-full); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); white-space: nowrap; }
.cg-tag { margin-left: var(--tlg-space-2); vertical-align: middle; }
.cg-tag--won, .cg-correct { color: var(--tlg-status-done-fg); background: var(--tlg-status-done-bg); }
.cg-tag--lost { color: var(--tlg-status-missing-fg); background: var(--tlg-status-missing-bg); }
.cg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--tlg-space-3) var(--tlg-space-5); margin-top: var(--tlg-space-4); }
.cg-fact dt { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); letter-spacing: var(--tlg-tracking-caps); text-transform: uppercase; }
.cg-fact dd { font-size: var(--tlg-text-lg); font-weight: var(--tlg-weight-bold); overflow-wrap: anywhere; }
.cg-missed-head { display: flex; align-items: baseline; gap: var(--tlg-space-2); }
.cg-rank { color: var(--tlg-link); font-weight: var(--tlg-weight-bold); }
.cg-prompt { margin: var(--tlg-space-2) 0 var(--tlg-space-3); font-size: var(--tlg-text-md); overflow-wrap: anywhere; }
.cg-bars, .cg-wrong { display: grid; list-style: none; }
.cg-bars { gap: var(--tlg-space-3); }
.cg-bar-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tlg-space-1) var(--tlg-space-2); font-size: var(--tlg-text-sm); }
.cg-bar-text { overflow-wrap: anywhere; }
.cg-bar-line { display: flex; align-items: center; gap: var(--tlg-space-2); margin-top: var(--tlg-space-1); }
.cg-bar-track { flex: 1; height: 12px; overflow: hidden; border-radius: var(--tlg-radius-full); background: var(--tlg-surface-2); }
.cg-bar-fill { display: block; height: 100%; background: var(--tlg-text-subtle); }
.cg-bar.is-correct .cg-bar-fill { background: var(--tlg-status-done-solid); }
.cg-bar.is-correct .cg-bar-text { font-weight: var(--tlg-weight-bold); }
.cg-bar-num { min-width: 5.5em; color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); text-align: right; }
.cg-fill p + p { margin-top: var(--tlg-space-1); }
.cg-qtext { min-width: 16rem; overflow-wrap: anywhere; }
.cg-qtext summary { cursor: pointer; }
.cg-qtext details p { margin-top: var(--tlg-space-1); max-width: none; color: var(--tlg-text); }
.cg-private { margin-bottom: var(--tlg-space-3); }
.cg-wrong { gap: var(--tlg-space-1); margin-top: var(--tlg-space-3); }
.cg-wrong li { display: flex; justify-content: space-between; gap: var(--tlg-space-3); padding: var(--tlg-space-1) var(--tlg-space-3); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); }
.cg-wrong-text { overflow-wrap: anywhere; }
.cg-count { font-weight: var(--tlg-weight-bold); white-space: nowrap; }
.cg-roster { margin-left: var(--tlg-space-2); padding: 0 var(--tlg-space-2); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-full); color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); }
.cg-actions { margin-top: var(--tlg-space-8); }
.cg-actions .btn-danger { color: var(--tlg-danger-fg); }
.cg-back-bottom { margin-top: var(--tlg-space-4); }
@media (max-width: 640px) { .cg-host, .cg-missed, .cg-fillcard { padding: var(--tlg-space-4); } .cg-qtext { min-width: 10rem; } .cg-type { display: none; } }

/* ── Assignments (gradebook.js, migration 0053): column menu, flags, Other work, archived list ── */
.gb-ahead-top { display: flex; align-items: flex-start; gap: var(--tlg-space-1); }
.gb-ahead-top .gb-acttitle { flex: 1; min-width: 0; }
.gb-amenu { position: relative; flex: none; }
.gb-amenu > summary { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--tlg-radius-sm); color: var(--tlg-text-muted); font-size: 18px; font-weight: var(--tlg-weight-bold); list-style: none; cursor: pointer; }
.gb-amenu > summary::-webkit-details-marker { display: none; }
.gb-amenu > summary:hover, .gb-amenu[open] > summary { color: var(--tlg-text); background: var(--tlg-bg); }
.gb-amenu-pop { position: absolute; top: 100%; right: 0; z-index: 10; display: flex; flex-direction: column; min-width: 210px; padding: var(--tlg-space-1); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface); box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.gb-amenu-item { all: unset; box-sizing: border-box; padding: var(--tlg-space-2) var(--tlg-space-3); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); cursor: pointer; }
.gb-amenu-item:hover, .gb-amenu-item:focus-visible { background: var(--tlg-primary-tint); }
.gb-amenu-item:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: -2px; }
.gb-colsub.gb-past { color: var(--tlg-text); font-weight: var(--tlg-weight-bold); }
.gb-extra { background: var(--tlg-primary-tint) !important; }
.gb-chip { font-weight: var(--tlg-weight-bold); color: var(--tlg-primary); }
.gb-flag-late { padding: 0 var(--tlg-space-1); border-radius: var(--tlg-radius-sm); color: var(--tlg-on-solid); background: var(--tlg-earth-solid-strong); font-size: 12px; font-weight: var(--tlg-weight-bold); }
.gb-flag-late + .gb-flag { margin-left: 0; }
.gb-cell-na { cursor: default; justify-content: center; color: var(--tlg-text-subtle); background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--tlg-grid-line) 6px 8px); }
.gb-cell-na:hover { filter: none; }
.gb-pill-late { color: var(--tlg-on-solid); background: var(--tlg-earth-solid-strong); }
.gb-pill-out { color: var(--tlg-status-missing-fg); background: var(--tlg-status-missing-bg); white-space: normal; }
.gb-other th[scope="row"] { position: static; color: var(--tlg-text); font-weight: var(--tlg-weight-bold); }
.gb-other td, .gb-other th { vertical-align: middle; }
.gb-other-actions { white-space: nowrap; }
.gb-other-actions select { max-width: 220px; min-height: 36px; padding: 0 var(--tlg-space-2); border: var(--tlg-border-width) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; }
.gb-why { color: var(--tlg-text-muted); }
.gb-archived { margin-bottom: var(--tlg-space-4); padding: var(--tlg-space-4); }
.gb-archived h2 { margin: 0 0 var(--tlg-space-2); font-size: var(--tlg-text-lg); }
.gb-archived ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--tlg-space-2); }
.gb-archived-name { font-weight: var(--tlg-weight-bold); }
.gb-danger { color: var(--tlg-danger-fg); }
#gb-add { white-space: nowrap; }
.gb-grid thead th:has(.gb-amenu[open]) { z-index: 6; }

/* Avatar Phase 6: class goal card */
.goal-form { display: grid; gap: 10px; margin-top: 12px; max-width: 640px; }
.goal-form label { display: grid; gap: 4px; font-weight: 700; }
.goal-form select, .goal-form input[type="number"] { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--tlg-border, #c9d1da); max-width: 100%; }
.goal-rewards { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.goal-rewards legend { font-weight: 700; margin-bottom: 4px; }
.goal-line { margin: 0 0 6px; font-weight: 700; }
.goal-bar { height: 14px; border-radius: 999px; background: var(--tlg-surface-2, #e6ebf1); overflow: hidden; box-shadow: inset 0 0 0 1px var(--tlg-border, #c9d1da); }
.goal-bar span { display: block; height: 100%; background: var(--tlg-primary, #1c7c6c); }
.goal-met { font-weight: 700; color: #7a5a00; }
.goal-now .btn { margin-top: 8px; }
.goal-history { margin: 8px 0 0; padding-left: 20px; }