.page-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.faq-shell { width: 100%; max-width: 840px; margin: 0 auto; }
.faq-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.faq-item { border: 1px solid var(--line); background: var(--white); margin-bottom: 12px; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; cursor: pointer; font-weight: 600; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--gold); }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.faq-answer { padding: 20px 24px; }
.faq-answer p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.faq-item-actions { display: flex; gap: 20px; margin-top: 18px; }
.faq-item-actions .table-link { padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; cursor: pointer; }
.faq-editor .field { margin-bottom: 18px; }
.faq-editor textarea { resize: vertical; min-height: 120px; }
.loading-state { display: flex; width: 100%; min-width: 0; box-sizing: border-box; flex-direction: column; justify-content: center; align-items: center; gap: 16px; min-height: 180px; color: var(--muted); text-align: center; }
.loading-state > span { min-width: 0; overflow-wrap: anywhere; }
.auth-cross { display: block; aspect-ratio: 1; color: #ff9b26; }
.auth-cross > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.loading-state .auth-cross { width: 72px; height: 72px; flex: 0 0 auto; }
.loading-state-compact { flex-direction: row; min-height: 36px; gap: 12px; }
.loading-state-compact .auth-cross { width: 28px; height: 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .faq-item summary, .faq-answer { padding: 16px; }
  .page-actions > .button { width: 100%; }
}
.profile-shell { max-width: 760px; margin: 0 auto; }
.profile-course-row { display: flex; align-items: end; gap: 12px; margin: 18px 0; }
.profile-course-row .field { flex: 1; min-width: 0; margin: 0; }
.profile-feedback { margin-top: 16px; }
.profile-class-card { border: 1px solid var(--line); padding: 16px; margin: 18px 0; min-width: 0; overflow-wrap: anywhere; }
.class-card-heading, .class-card-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.class-card-heading h3 { margin: 0; }
.class-card-actions { justify-content: flex-start; margin-top: 14px; }
.class-editor { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.class-editor[hidden], .class-remove-confirm[hidden] { display: none; }
.class-editor .field { margin-top: 18px; }
.class-editor .modal-actions { flex-wrap: wrap; }
.class-editor .modal-actions .button { white-space: normal; }
.class-feedback:not(:empty), .syllabus-feedback:not(:empty) { margin-top: 14px; }
.syllabus-course-hint { display: block; margin-top: 8px; }
.syllabus-course-hint[hidden] { display: none; }
.syllabus-reference { margin: 18px 0; border: 1px solid var(--line); padding: 14px; }
.syllabus-reference summary { cursor: pointer; font-weight: 600; }
.syllabus-review-card { border: 1px solid var(--line); margin: 16px 0; }
.syllabus-review-card > summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 18px; cursor: pointer; }
.syllabus-review-card > summary small { display: block; color: var(--muted); margin-top: 4px; }
.syllabus-review-content { padding: 18px; border-top: 1px solid var(--line); }
.syllabus-filter { margin: 0; min-width: 150px; }
.syllabus-reference summary:focus-visible, .syllabus-review-card > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.syllabus-preview { min-width: 0; }
@media (max-width: 600px) {
  .syllabus-shell .section-heading { flex-wrap: wrap; }
  .syllabus-review-content, .syllabus-review-card > summary { padding: 14px; }
  .syllabus-reference summary, .class-card-actions button { min-height: 44px; }
  .syllabus-review-form .modal-actions .button { flex: 1; white-space: normal; }
}

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.profile-column { display: grid; gap: 24px; min-width: 0; align-content: start; }
.profile-layout .profile-shell, .profile-layout .password-shell { max-width: none; margin: 0; }
.profile-layout .panel { min-width: 0; }
.credit-request { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.credit-feedback { margin: 12px 0; }
.credit-evidence-image { display: block; max-width: 100%; max-height: 500px; object-fit: contain; margin: 16px 0; }
.credit-review-actions { display: flex; gap: 12px; }
@media (max-width: 900px) { .profile-layout { grid-template-columns: 1fr; } }
.profile-picture-preview { width: 128px; height: 128px; margin: 20px 0; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.profile-picture-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-picture-preview span { font-size: 36px; color: var(--muted); }
.picture-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.picture-feedback { margin: 12px 0; }
.checkpoint-calendar { width: 100%; max-width: 330px; margin: 0 auto; table-layout: fixed; border-collapse: separate; border-spacing: 3px; text-align: center; }
.checkpoint-calendar caption { font-size: 18px; padding-bottom: 8px; color: var(--ink); }
.checkpoint-calendar th, .checkpoint-calendar td { padding: 5px 0; text-align: center; border: 0; font-size: 13px; background: transparent; }
.checkpoint-calendar th { color: var(--muted); }
.checkpoint-calendar abbr { text-decoration: none; }
.checkpoint-calendar .checkpoint-due { background: var(--gold); color: #16263b; font-weight: 700; outline: 1px solid var(--gold); }
.checkpoint-remaining { text-align: center; font-size: 18px; font-weight: 600; margin-top: 12px; }

.checkpoint-quota-table { min-width: 580px; }
.checkpoint-quota-table input { width: 100%; min-width: 76px; padding: 10px; }
.checkpoint-quota-table small { display: block; margin-top: 6px; font-weight: 400; }
.checkpoint-quota-table td, .checkpoint-quota-table th { padding: 12px 8px; }
.checkpoint-quota-table input { border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; }
.checkpoint-quota-table input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.checkpoint-calendar td { position: relative; height: 38px; vertical-align: middle; }
.checkpoint-calendar td small { display: block; font-size: 9px; line-height: 11px; }
.checkpoint-calendar .checkpoint-due { background: transparent; color: var(--ink); outline: 1px solid var(--gold); }
.checkpoint-calendar .calendar-today { background: var(--gold); color: #16263b; font-weight: 700; }
.calendar-due-dot { display: block; width: 4px; height: 4px; margin: 2px auto 0; background: var(--gold); }
.calendar-today .calendar-due-dot { background: #16263b; }

.overview-greeting { margin: 0 0 24px; font-size: clamp(22px, 3vw, 30px); font-weight: 500; }

.overview-submit { justify-content: flex-start; }

.invitation-filters { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.invitation-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.invitation-select { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.invitation-select input { width: 20px; height: 20px; accent-color: var(--gold); }
.invitation-batch-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); }
.invitation-batch-list ul { list-style: none; margin: 0; padding: 0; }
.invitation-batch-list li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.invitation-batch-list li:last-child { border-bottom: 0; }
.invitation-batch-list small { display: block; color: var(--muted); }
.invitation-batch-list [data-batch-result] { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .invitation-filters { grid-template-columns: 1fr; } }

.category-toolbar { display: flex; justify-content: flex-end; margin: 20px 0; }
.category-list-item { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.category-list-item > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.category-list-item h3 { margin: 0 0 8px; }
.category-list-item p { margin: 0 0 6px; }
.category-list-item small, .category-status { display: block; color: var(--muted); }
.category-status { margin-top: 8px; font-size: 13px; }
.category-item-actions { display: flex; gap: 12px; flex-shrink: 0; }
.category-feedback { margin-top: 20px; }
.category-editor > h3 { margin-bottom: 24px; }
.category-editor [hidden] { display: none; }
.category-editor textarea { resize: vertical; }
.category-editor .checkbox-line { align-items: center; }
.category-band { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; margin: 16px 0; }
.category-band .field { margin: 0; }
.category-band input { min-width: 0; width: 100%; }
.category-band .button { min-height: 44px; }
.category-rule-hint { margin-top: 10px; }
@media (max-width: 600px) {
  .category-list-item { align-items: stretch; flex-direction: column; gap: 14px; }
  .category-item-actions > button { flex: 1; }
  .category-band { grid-template-columns: 1fr 1fr; }
  .category-band > button { grid-column: 1 / -1; justify-self: end; }
}

.member-calendar-shell { width: 100%; min-height: 75vh; background: var(--white); }
.member-calendar-shell:fullscreen { padding: 24px; overflow: auto; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.calendar-toolbar h2 { margin: 0; }
.calendar-toolbar > div { display: flex; gap: 8px; flex-wrap: wrap; }
.calendar-checkpoint-links { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.calendar-checkpoint-links span { display: block; margin-top: 4px; font-size: 11px; text-transform: none; }
.calendar-scroll { overflow-x: auto; }
.member-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); min-width: 650px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.calendar-weekday { padding: 12px; text-align: center; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calendar-day { min-height: 130px; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); min-width: 0; }
.calendar-blank { background: var(--white); }
.calendar-day time { display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.calendar-day.is-today { box-shadow: inset 0 3px var(--gold); }
.calendar-day.is-today time { color: var(--gold); font-weight: 700; }
.calendar-checkpoint { position: relative; border: 1px solid var(--gold); margin-bottom: 8px; padding: 6px; font-size: 12px; }
.calendar-checkpoint summary { cursor: pointer; }
.calendar-checkpoint-tip { padding: 10px 0 2px; font-weight: 600; }
.calendar-checkpoint-tip small { display: block; margin-top: 6px; font-weight: 400; }
.calendar-checkpoint:not([open]):hover .calendar-checkpoint-tip { display: block; }
.calendar-submission { display: block; width: 100%; text-align: left; padding: 8px; margin-top: 6px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--muted); font: inherit; font-size: 12px; overflow-wrap: anywhere; cursor: pointer; }
.calendar-submission.pending { border-left-color: var(--gold); }
.calendar-submission.approved { border-left-color: #499b75; }
.calendar-submission.denied { border-left-color: #c66565; }
.calendar-submission small { display: block; margin-top: 4px; text-transform: capitalize; color: var(--muted); }
.celebration-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2000; pointer-events: none; }
.checkpoint-tomato { position: fixed; inset: 0; z-index: 2000; pointer-events: none; overflow: hidden; }
.tomato-impact { position: absolute; inset: 0; pointer-events: none; }
.tomato-flight, .tomato-splat { position: absolute; top: var(--impact-y); left: var(--impact-x); pointer-events: none; }
.tomato-flight { width: var(--tomato-size); height: auto; animation: tomato-throw var(--throw-duration) var(--throw-delay) ease-in both; }
.tomato-splat { width: clamp(140px, var(--splat-size), 360px); height: auto; animation: tomato-splat var(--splat-duration) var(--impact-delay) linear both; }
@keyframes tomato-throw {
  0% { opacity: 1; transform: translate(var(--throw-x), var(--throw-y)) rotate(-80deg) scale(.18); }
  65% { opacity: 1; transform: translate(-80%, -110%) rotate(10deg) scale(1); }
  95% { opacity: 1; transform: translate(-50%, -50%) rotate(35deg) scale(3.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(40deg) scale(3.6); }
}
@keyframes tomato-splat {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--splat-angle)) scale(.25); }
  1% { opacity: .9; transform: translate(-50%, -50%) rotate(var(--splat-angle)) scale(1.08); }
  3% { opacity: .86; transform: translate(-50%, -50%) rotate(var(--splat-angle)) scale(1); }
  25% { opacity: .82; transform: translate(-50%, calc(-50% + 3vh)) rotate(var(--splat-angle)) scale(1); }
  55% { opacity: .62; transform: translate(-50%, calc(-50% + 12vh)) rotate(var(--splat-angle)) scale(1, 1.08); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--splat-drift)), calc(-50% + var(--splat-drop))) rotate(var(--splat-angle)) scale(1, 1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .checkpoint-tomato { display: none; }
}

.mini-calendar-open { cursor: pointer; border: 1px solid var(--line); padding: 12px; }
.mini-calendar-open:hover { border-color: var(--gold); }
.mini-calendar-open-label { display: block; margin-top: 12px; text-align: right; font-size: 12px; color: var(--muted); }
.mini-calendar-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.calendar-dialog { width: min(1400px, 96vw); max-width: 96vw; height: 92vh; max-height: 92vh; padding: 24px; background: var(--white); color: var(--ink); border: 1px solid var(--line); overflow: auto; }
.calendar-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.calendar-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.calendar-dialog-heading h2 { margin: 0; }
@media (max-width: 600px) { .calendar-dialog { padding: 16px; } }

.mini-calendar-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.mini-calendar-heading .eyebrow { margin: 0; }
.mini-calendar-controls { display: flex; gap: 6px; }
.mini-calendar-controls button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 6px 9px; cursor: pointer; font: inherit; font-size: 12px; }
.mini-calendar-controls button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.password-shell { max-width: 680px; width: 100%; }
.password-feedback { margin-bottom: 12px; }
.badge-feedback { margin: 12px 0; }
.badge-shell code { overflow-wrap: anywhere; }
.badge-form .button { min-height: 44px; }

/* Touch controls stay usable without triggering iOS input zoom. */
@media (pointer: coarse), (max-width: 600px) {
  .activity-picker input, .field input, .field select, .field textarea { font-size: 16px; }
  .table-link, .text-btn { min-height: 44px; }
}
input[type="file"] { max-width: 100%; min-width: 0; }
.attachment, .sample-file, .sample-file > div { min-width: 0; overflow-wrap: anywhere; }
dialog { max-height: 90dvh; overscroll-behavior: contain; }

@media (max-width: 600px) {
  .table-wrap .submission-table { min-width: 0; width: 100%; }
  .submission-table thead { display: none; }
  .submission-table tbody { display: block; }
  .submission-table .submission-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
  .submission-table .submission-row td { border: 0; padding: 0; min-width: 0; white-space: normal; }
  .submission-table .submission-main, .submission-table .submission-member { grid-column: 1 / -1; }
  .submission-title { min-height: 44px; overflow-wrap: anywhere; }
  .modal-actions, .credit-review-actions, .picture-actions { flex-wrap: wrap; gap: 10px; }
  .modal-actions .button { min-width: 130px; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  .close, .nav-scroll, .mini-calendar-controls button { min-width: 44px; min-height: 44px; }
  .calendar-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); padding: 12px; }
  .member-calendar-grid { min-width: 0; }
  .calendar-weekday { padding: 8px 2px; font-size: 11px; }
  .calendar-day { min-height: 90px; padding: 5px 3px; overflow-wrap: anywhere; }
  .calendar-day time, .calendar-checkpoint, .calendar-submission { font-size: 11px; }
  .calendar-checkpoint, .calendar-submission { padding: 4px 2px; }
  .calendar-toolbar .button, .calendar-checkpoint-links .button { min-height: 44px; }
  .calendar-checkpoint-links { gap: 8px; }
  .calendar-checkpoint-links .button { flex: 1 1 140px; white-space: normal; }
}

.course-loading { margin-top: 8px; padding: 6px; min-height: 40px; }
.course-loading .loading-state { font-size: 13px; gap: 10px; }

.overview-points-stack { display: flex; flex-direction: column; min-width: 0; }
.overview-points-stack > .points-panel { flex: 1; }
.overview-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.overview-stats .mini-stat { flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 14px 16px; border: 0; border-right: 1px solid var(--line); }
.overview-stats .mini-stat:last-child { border-right: 0; }
.overview-stats .mini-stat strong { font-size: 26px; line-height: 1; min-width: 0; }
.overview-stats .mini-stat span { font-size: 12px; }
.overview-stats .mini-stat span b { display: block; margin: 0 0 3px; font-size: 13px; }
@media (max-width: 800px) {
  .overview-stats .mini-stat { padding: 12px 10px; }
}
@media (max-width: 380px) {
  .overview-stats .mini-stat { padding: 12px 8px; }
  .overview-stats .mini-stat span b { font-size: 12px; }
}
.picture-crop { margin: 16px 0; }
.picture-crop canvas { display: block; width: min(100%, 280px); height: auto; aspect-ratio: 1; border: 1px solid var(--line); touch-action: none; cursor: grab; }
.picture-crop .field { margin-top: 12px; }
.picture-crop input[type="range"] { min-height: 44px; padding: 0; width: 100%; }
.account-button .avatar { overflow: hidden; }
.account-button .avatar img { width: 100%; height: 100%; object-fit: cover; }

.inline-evidence-image { display: block; max-width: 100%; height: auto; margin: 12px auto; }
.inline-evidence-pdf { display: block; width: 100%; height: min(65dvh, 650px); border: 1px solid var(--line); margin: 12px 0; background: white; }
.file-preview { min-width: 0; margin-top: 12px; }
.file-preview-frame { position: relative; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.file-preview-frame[data-state="ready"] { min-height: 0; }
.file-preview-frame[data-state="loading"] > .inline-evidence-image { visibility: hidden; }
.file-preview-loader { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: var(--white); }
.file-preview-loader .loading-state { min-height: 0; }
.file-preview-frame > .error { text-align: center; margin: 0; }
.file-preview-actions { display: flex; justify-content: center; margin-top: 12px; }
.file-preview .inline-evidence-image { max-height: 75dvh; width: auto; object-fit: contain; }
.file-preview .inline-evidence-image, .file-preview .inline-evidence-pdf { margin: 0; }
.file-preview [data-state="error"] .button { min-height: 44px; }

@media (max-width: 600px) {
  .calendar-checkpoint-links .button { flex-direction: column; align-items: flex-start; text-align: left; padding: 9px; font-size: 11px; gap: 0; }
  .calendar-checkpoint-links span { width: 100%; }
  .calendar-checkpoint-prefix { display: none; }
  .calendar-submission { max-height: 100px; overflow: hidden; }
}

.submission-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 0; }
#current-semester-settings { margin-bottom:32px; }
.submission-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, .55fr) minmax(150px, .4fr); gap: 16px; align-items: end; margin: 24px 0 8px; }
.submission-toolbar .field { margin: 0; min-width: 0; }
.submission-toolbar .field:only-child { grid-column: 1 / -1; }
.submission-toolbar input, .submission-toolbar select { width: 100%; min-height: 44px; }
.review-workflow { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; }
.review-workflow h2 { margin: 0 0 8px; }
.review-workflow p { margin: 0; color: var(--muted); }
.review-workflow .heading-actions { margin: 0; flex-wrap: wrap; }
.review-next-choice { margin-top: 24px; align-items: flex-start; }
#claim-form .modal-actions { flex-wrap: wrap; }
#claim-form .modal-actions .button { min-height: 44px; white-space: normal; }
@media (min-width: 900px) {
  #modal.submission-review-dialog { width: min(1100px, calc(100vw - 48px)); max-width: 1100px; }
  .submission-review-dialog #modal-content { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); column-gap: 28px; }
  .submission-review-dialog #modal-content > .modal-heading { grid-column: 1 / -1; }
  .submission-review-dialog .submission-review-details { grid-column: 1; min-width: 0; }
  .submission-review-dialog #review-form { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 0; padding-left: 24px; border-left: 1px solid var(--line); }
  .submission-review-dialog #review-form .modal-actions { flex-wrap: wrap; }
  .submission-review-dialog #review-form .subtle-rule { display: none; }
}
@media (max-width: 700px) {
  .submission-toolbar { grid-template-columns: 1fr 1fr; }
  .submission-toolbar .field:first-child { grid-column: 1 / -1; }
  .review-workflow .heading-actions, .review-workflow .heading-actions .button { width: 100%; }
  #claim-form .modal-actions .button { flex: 1 1 100%; }
}
.roster-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.roster-tabs [aria-pressed="true"] { background: var(--navy, #162a42); color: #fff; border-color: var(--navy, #162a42); }
.roster-member-table td { vertical-align: top; }
.roster-row-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.roster-access-menu summary, .roster-office-note summary { cursor: pointer; font-size: 13px; }
.roster-access-menu .table-link { display: block; margin-top: 12px; }
.roster-office-note { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.invitation-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); margin: 18px 0; }
.invitation-summary > span { padding: 16px; font-size: 12px; }
.invitation-summary strong { display: block; font-size: 24px; line-height: 1.4; }
.invitation-table td { vertical-align: top; }
.invitation-table td:last-child .table-link { display: block; margin-bottom: 10px; }
.invitation-table td:nth-child(3) { max-width: 260px; }
.class-review-history { padding: 12px 0; border-top: 1px solid var(--line); margin-bottom: 16px; }
.class-review-history summary { cursor: pointer; }
.class-review-history small { display: block; margin: 4px 0; }
.class-review-result:not(:empty) { padding: 12px; border-left: 3px solid var(--navy, #162a42); background: var(--paper); }
@media (max-width: 640px) { .invitation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roster-tabs .button { flex: 1; } }

:root[data-theme="dark"] .roster-tabs [aria-pressed="true"] { border-color: var(--gold); background: var(--navy); color: #fff; }

/* Class review work area: selections stay visible and confirmation is explicit. */
.class-batch-bar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:16px; margin:16px 0; border:1px solid var(--line); background:var(--paper); }
.class-batch-bar [data-class-selected] { margin-right:auto; font-weight:700; }
.class-batch-confirm { border:2px solid var(--navy); padding:20px; margin:16px 0; }
.class-batch-confirm li { margin:8px 0; overflow-wrap:anywhere; }
.class-select { display:flex; align-items:center; gap:10px; padding:12px 0; cursor:pointer; }
.class-select input { width:20px; height:20px; }
.class-batch-bar[hidden], .class-batch-confirm[hidden] { display:none; }
@media (max-width:600px) { .class-batch-bar > button { width:100%; min-height:44px; } .class-batch-confirm { padding:16px; } }

.class-member-group { border-top:1px solid var(--line); padding-top:16px; margin-top:24px; }
.class-member-group:first-child { margin-top:0; }
.class-member-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:12px; }
.class-member-heading h3 { margin:0; font-size:20px; }
.class-member-heading p { margin:4px 0 0; font-size:13px; }
@media (max-width:600px) { .class-member-heading { align-items:stretch; flex-direction:column; } .class-member-heading button { min-height:44px; } }

.submission-correct { display: block; margin-top: 8px; min-height: 36px; }

.leaderboard-panel { max-width: 960px; margin-inline: auto; }
.leaderboard-panel > h2 { margin-top: 0; }
.leaderboard-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.leaderboard-toolbar .field { flex: 1 1 220px; margin: 0; }
.leaderboard-toolbar input { min-height: 44px; }
.leaderboard-toolbar button { min-height: 44px; }
.leaderboard-feedback { color: var(--muted); font-size: 14px; }
.leaderboard-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "silver gold bronze"; align-items: end; gap: 12px; margin: 32px 0; }
.podium-place { min-width: 0; text-align: center; }
.podium-place-1 { grid-area: gold; --step-height: 160px; }
.podium-place-2 { grid-area: silver; --step-height: 124px; }
.podium-place-3 { grid-area: bronze; --step-height: 96px; }
.podium-names { display: grid; gap: 8px; padding-bottom: 16px; }
.podium-member { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; overflow-wrap: anywhere; }
.podium-crown { display: block; width: 52px; height: 39px; max-width: 100%; fill: var(--gold); stroke: var(--medal-name); stroke-width: 1.5; stroke-linejoin: round; }
.podium-member > strong { color: var(--medal-name); font-size: 18px; line-height: 1.3; }
.podium-member.leaderboard-you { outline: 1px solid var(--medal-border); }
.podium-step { min-height: var(--step-height); padding: 12px 8px; border: 1px solid var(--medal-border); background: var(--medal-bg); color: var(--medal-name); }
.podium-step h3 { margin: 0; font: 500 40px/1.2 var(--display); color: inherit; }
.podium-step p { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; margin: 8px 0 0; }
.podium-step p strong { font: 700 20px/1.4 ui-monospace, monospace; }
.podium-step p span { font-size: 13px; }
.leaderboard-list-section h3 { font: 500 20px var(--display); margin: 32px 0 16px; }
.leaderboard-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.leaderboard-list li { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px; border-bottom: 1px solid var(--line); }
.leaderboard-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.leaderboard-identity strong { overflow-wrap: anywhere; }
.leaderboard-points { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.leaderboard-points strong { font: 600 20px/1.4 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.leaderboard-points > span { color: var(--muted); font-size: 13px; }
.medal-gold { --medal-name: #795000; --medal-bg: #fff0c6; --medal-border: #b88c25; }
.medal-silver { --medal-name: #465166; --medal-bg: #e9edf3; --medal-border: #8791a2; }
.medal-bronze { --medal-name: #84492a; --medal-bg: #f7e3d5; --medal-border: #b7805d; }
:root[data-theme="dark"] .medal-gold { --medal-name: #f6d37d; --medal-bg: #392f1c; --medal-border: #b88c25; }
:root[data-theme="dark"] .medal-silver { --medal-name: #dae1ec; --medal-bg: #303d50; --medal-border: #8791a2; }
:root[data-theme="dark"] .medal-bronze { --medal-name: #efb88e; --medal-bg: #3e2c24; --medal-border: #b7805d; }
.leaderboard-you { background: var(--paper); }
.leaderboard-list .leaderboard-you { box-shadow: inset 3px 0 var(--gold); }
.leaderboard-you-label { color: var(--muted); font-size: 13px; }
.leader-honor { display: flex; align-items: center; gap: 24px; padding: 24px; margin: 0 0 24px; border: 1px solid #b88c25; background: #1b3050; color: #fff; }
.leader-emblem { width: 144px; height: 144px; flex: none; color: #f6d37d; }
.leader-honor-copy { min-width: 0; }
.leader-honor .eyebrow { color: #f6d37d; margin: 0 0 8px; }
.leader-honor h2 { color: #fff; font: 500 clamp(26px, 3vw, 36px)/1.15 var(--display); margin: 0; }
.leader-honor p:not(.eyebrow) { margin: 12px 0; }
.leader-honor a, :root[data-theme="dark"] .leader-honor a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #f6d37d; text-underline-offset: 4px; }
.leader-honor a:focus-visible { outline: 2px solid #f6d37d; outline-offset: 4px; }
@media (max-width: 600px) {
  .leaderboard-podium { gap: 8px; margin: 24px 0; }
  .podium-member > strong { font-size: 14px; }
  .podium-crown { width: 40px; height: 30px; }
  .podium-step h3 { font-size: 32px; }
  .podium-step p { flex-direction: column; align-items: center; gap: 0; }
  .leaderboard-list li { padding: 12px 8px; gap: 16px; }
  .leaderboard-identity { gap: 8px; }
  .leader-honor { gap: 16px; padding: 16px; align-items: flex-start; }
  .leader-emblem { width: 80px; height: 80px; }
  .leader-honor .eyebrow { font-size: 10px; }
}
@media (max-width: 380px) {
  .leader-honor { flex-direction: column; }
}

/* One branded startup screen shared by the live portal and fictional demo. */
.portal-loading .workspace,
.signed-out .workspace {
  display: block;
}
.portal-loading .sidebar,
.signed-out .sidebar {
  display: none;
}
.portal-loading main,
.signed-out main {
  max-width: 680px;
  margin: 0 auto;
  padding-top: clamp(48px, 10vh, 110px);
}
.portal-loading .page-heading,
.signed-out .page-heading {
  justify-content: center;
  text-align: center;
}
.portal-loading,
.signing-in {
  overflow: hidden;
}
.auth-loading {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--paper);
  color: var(--ink);
}
.portal-loading .auth-loading,
.signing-in .auth-loading {
  display: flex;
}
.auth-loading-content {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  animation: portal-arrive 420ms ease-out both;
}
.startup-chapter { font: 12px/1.4 ui-monospace, monospace; letter-spacing: .12em; color: var(--muted); }
.startup-wordmark { display: grid; gap: 6px; }
.startup-wordmark strong { font: 500 clamp(24px, 5vw, 32px)/1.15 var(--display); letter-spacing: .06em; }
.startup-wordmark span { font: 11px/1.4 ui-monospace, monospace; letter-spacing: .22em; color: var(--muted); }
.startup-rule { width: min(220px, 65vw); height: 2px; background: var(--line); overflow: hidden; }
.startup-rule > span { display: block; width: 40%; height: 100%; background: var(--gold); animation: startup-sweep 1400ms ease-in-out infinite; }
body:not(.portal-loading):not(.signing-in) > .masthead,
body:not(.portal-loading):not(.signing-in) > .workspace { animation: portal-arrive 320ms ease-out; }
@keyframes portal-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes startup-sweep { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) {
  .auth-loading-content, .startup-rule > span,
  body:not(.portal-loading):not(.signing-in) > .masthead,
  body:not(.portal-loading):not(.signing-in) > .workspace { animation: none; }
}
.auth-cross {
  display: block;
  width: clamp(104px, 22vw, 152px);
  aspect-ratio: 1;
  color: #ff9b26;
}
.auth-cross > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.auth-loading p {
  margin: 0;
  font: 500 20px var(--display);
  letter-spacing: .03em;
}

.credit-load-panel { margin: 12px 0; padding: 16px; border: 1px solid var(--line); background: var(--white); }
.credit-load-panel > summary { cursor: pointer; line-height: 1.5; }
.credit-load-panel .field { max-width: 360px; }
.credit-load-panel p { overflow-wrap: anywhere; }
.credit-load-panel form > button { min-height: 44px; }