/* Bright Angle interior surfaces. The landing page keeps its own composition. */
.practice-page:not(.home-page) {
  --reading-inset: clamp(16px, 2vw, 28px);
}
.practice-page:not(.home-page) :is(.page-title, .aura-title, .course-heading h1),
.page :is(.page-heading h1, .bright-heading) {
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.practice-page:not(.home-page) .page-description { max-width: 68ch; }
.practice-page:not(.home-page) .course-tabs { flex-wrap: wrap; overflow: visible; }
.practice-page:not(.home-page) .course-tab:focus-visible { outline-offset: 0; }
.practice-page:not(.home-page) .practice-button:is(.primary, .secondary, .tonal):not(:hover, :focus-visible),
.page :is(.button, .bright-form-bay) { box-shadow: none; }
.practice-page:not(.home-page) :is(.practice-choice, .lesson-index, .question-model, .progress-help) {
  border-radius: var(--control-radius);
}
.practice-page:not(.home-page) :is(.lesson-step-number, .practice-measurements dd, .control-reading, .model-clock, .lab-worked-value),
.page :is(.timer-value, .question-number, .question-jump, .pin-code, .input-code, .input-pin, .metric-strip span:not(:first-child) strong),
.tournament-table td, .tournament-position strong {
  font-family: var(--bright-mono);
  font-variant-numeric: tabular-nums;
}

/* Course register: use illustrations to identify books, lesson data to identify rows. */
.course-catalogue .course-cover { grid-template-rows: clamp(128px, 12vw, 172px) 1fr; box-shadow: none; }
.course-cover-copy { padding: 17px 20px 12px; }
.course-cover-action { margin-block-start: auto; }
.practice-page .course-banner { box-shadow: none; align-items: stretch; }
.practice-page .course-banner-copy { align-self: center; }
.practice-page .course-banner-media { align-self: center; background: var(--tone); }
.practice-page .course-banner-copy .lesson-section-number { margin-block-end: 8px; color: var(--muted); font-size: .875rem; }
.practice-page .course-position { font-size: .875rem; color: var(--muted); }
.practice-page .course-section-picker { width: fit-content; max-width: 100%; }
.practice-page .course-section-picker select { min-width: 0; max-width: 100%; }
.practice-page .course-lesson-tile.practice-button { box-shadow: none; }
.practice-page .course-lesson-register .course-lesson-tile.practice-button { min-height: 60px; border-radius: var(--control-radius); }
.practice-page .unit-card { box-shadow: none; }
.practice-page .unit-header {
  border: 1px solid var(--line);
  border-radius: var(--bright-tile-radius);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  padding: var(--reading-inset);
}
.practice-page .unit-header .course-meter { background: var(--md-surface-container-high); }
.practice-page .unit-lessons {
  border: 1px solid var(--line);
  border-radius: var(--bright-tile-radius);
  background: var(--surface);
}
.practice-page .unit-lessons a { border-radius: var(--control-radius); }
.practice-page .unit-lessons .lesson-current a { background: var(--md-primary-container); }
.practice-page .lesson-row-copy strong { font-weight: 600; overflow-wrap: anywhere; }
.practice-page :is(.progress-panel, .checkpoint-card) {
  padding: var(--reading-inset);
  border: 1px solid var(--line);
  border-radius: var(--bright-tile-radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}
.practice-page .checkpoint-card :is(.stat-note, .panel-heading .m3-icon) { color: var(--muted); }
.practice-page .progress-panel h2 { margin-block-end: 8px; }
.practice-page .progress-help { box-shadow: none; }
.practice-page .progress-unit-list a { padding-block: 6px; }
.practice-page .progress-unit-list span { font-size: .875rem; }

/* The working model leads the split spread; examples retain their printed reading order. */
.practice-page.lesson-page { max-width: none; }
.lesson-page .lesson-heading { margin-block-end: 20px; }
.lesson-page .lesson-heading .page-title { max-width: 33ch; }
.lesson-page .lesson-toolbar .back-link { background: transparent; }
.lesson-page .lesson-toolbar .course-meter { width: 100%; }
.lesson-page .lesson-step-number { letter-spacing: -.025em; }
.lesson-page .lesson-layout.experiment-layout { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(16px, 2vw, 28px); }
.lesson-page :is(.lesson-rule, .lesson-example, .model-exercise, .question-card, .lesson-complete) {
  border-radius: var(--bright-tile-radius);
  padding: var(--reading-inset);
  background: var(--surface);
  box-shadow: none;
}
.lesson-page .lesson-rule { background: var(--md-surface-low); }
.lesson-page .lesson-notes :is(h2, h3), .lesson-page .model-exercise h2 { font-weight: 650; }
.lesson-page .lesson-notes p { line-height: 1.6; }
.lesson-page .lesson-notes .formula-ink { font-size: clamp(1rem, 1.35vw, 1.28rem); }
.lesson-page .question-card h1 { font-size: clamp(20px, 3vw, 32px); line-height: 1.2; letter-spacing: -.025em; }
.lesson-page .model-exercise .practice-measurements > div { background: var(--md-secondary-container); }
.lesson-page .model-exercise .practice-measurements dt { color: var(--muted); }
.lesson-page .model-exercise .practice-measurements dd { color: var(--md-on-secondary-container); }
.lesson-page .question-model { background: var(--surface); }
.lesson-page .question-model .lesson-notes > :is(.lesson-rule, .lesson-example) {
  border: 0;
  border-block-start: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
}
.lesson-page .practice-choice:not(.choice-correct, .choice-wrong):has(input:checked) { background: var(--accent-soft); }
.lesson-page .choice-letter { border-radius: var(--control-radius); background: var(--md-secondary-container); }
.lesson-page .practice-choice:has(input:checked) .choice-letter { background: var(--accent); color: var(--md-on-primary); }
.lesson-page .lesson-complete { border-color: var(--md-outline-variant); color: var(--ink); }
.lesson-page .lesson-complete .complete-mark { border-radius: var(--control-radius); background: var(--success-soft); color: var(--success); }
.lesson-page .lesson-complete[data-result="error"] .complete-mark { background: var(--danger-soft); color: var(--danger); }
.lesson-page .lesson-complete[data-result="neutral"] .complete-mark { background: var(--md-secondary-container); color: var(--muted); }
.practice-page:not(.home-page) :is(.feedback-correct, .score-pass) { background: var(--success-soft); color: var(--success); }
.practice-page:not(.home-page) :is(.feedback-wrong, .score-miss) { background: var(--danger-soft); color: var(--danger); }
.lesson-page .checkpoint-review { margin-block-start: 24px; }
.lesson-page .result-detail { border-radius: var(--control-radius); background: var(--surface); }

/* Lab bench: neutral instrument face, white controls and a separate notebook. */
.labs-page .lab-index-card { box-shadow: none; }
.lab-page .lab-detail-heading { flex-wrap: wrap; align-items: start; gap: 8px 20px; }
.lab-page .lab-detail-heading .page-title { font-size: clamp(30px, 4.1vw, 44px); }
.lab-page .lab-detail-heading .course-tabs { margin-block-end: 8px; }
.lab-page .lab-notebook .lab-stand { margin-block: 0; }
.lab-page .lab-stand .practice-model-figure {
  border: 1px solid #c3c5c1;
  box-shadow: none;
}
.lab-page .lab-stand-settings {
  border: 1px solid var(--line);
  border-radius: var(--bright-tile-radius);
  background: var(--surface);
  box-shadow: none;
}
.lab-page .lab-stand-settings :is(h2, h3), .lab-demo .demo-controls h2 { font-weight: 650; }
.lab-page .lab-stand-settings .practice-control { background: var(--md-surface-low); }
.lab-page .lab-circuit-aside .practice-control { background: var(--surface); }
.lab-page .lab-trial-list:empty { margin: 0; }
.lab-page .lab-trial-list:not(:empty) { gap: 12px; }
.lab-page .lab-trial-card, .lab-page .lab-panel, .lab-demo .demo-controls {
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--bright-tile-radius);
  background: var(--surface);
  color: var(--ink);
}
.lab-page .lab-notebook-status:not(:empty) { margin-block: 0 12px; }
.lab-page .lab-reading-row { background: var(--md-surface-container-low); }
.lab-demo .demo-instrument { border-radius: var(--bright-tile-radius); }
.lab-demo .demo-ranges input { height: 44px; }
.simulation-card { box-shadow: none; }
.simulation-card .sim-picker { background: var(--md-surface-low); }
.simulation-card .sim-picker select { min-height: 44px; }

/* Entry screens and assessment: the form, timer or task is the first useful object. */
.practice-page .practice-account-card, .page .bright-form-bay {
  border-radius: var(--bright-tile-radius);
  background: var(--surface);
  box-shadow: none;
}
.page .teacher-login-denied { background: var(--danger-soft); }
.practice-page .practice-account-layout.with-art { grid-template-columns: minmax(0, 1fr) minmax(0, 512px); }
.practice-page .practice-account-art {
  padding: 0;
  border: 0;
  background: var(--surface);
  box-shadow: none;
}
.practice-page .practice-account-art img { border-radius: inherit; }
.practice-page .practice-account-name { margin: 0 0 6px; }
.practice-page .practice-account-error { padding: 8px 10px; border-radius: 8px; background: var(--danger-soft); }
.practice-page .class-work-card, .page .teacher-card { box-shadow: none; }
.practice-page .class-work-grid > [role="status"], .page .empty-state {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--bright-tile-radius);
  background: var(--surface);
  color: var(--muted);
  text-align: start;
}
.page .empty-state h2 { color: var(--ink); }
.page .empty-state p { margin: 0; }
.page .join-profile { background: var(--md-secondary-container); border-color: transparent; }
.page .join-profile .join-class-link { background: transparent; }
.page .join-profile p { margin: 4px 0 0; }
.page :is(.join-form, .teacher-login, .editor-footer) .inline-message:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.page .join-form .tracking-notice { border-radius: var(--control-radius); }
.page .join-form .code-preview {
  display: inline-block;
  padding: 6px 9px;
  background: var(--accent-soft);
  color: var(--md-on-primary-container);
  font-family: var(--bright-mono);
}
.page :is(.button-small, .button-link, .grade-field .input, .task-controls .input) { min-height: 44px; }
.page .math-display { position: relative; }
.page-student .student-topline { align-items: start; margin-block-end: 12px; }
.page-student .student-title-block { min-width: 0; overflow-wrap: anywhere; }
.page-student .student-title-block h1 { font-weight: 700; }
.page-student .timer {
  flex: none;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--surface);
}
.page-student .timer-label { display: block; }
.page-student .timer-value { letter-spacing: -.025em; }
.page-student .student-progress { margin-block-end: 16px; }
.page-student :is(.question-panel, .question-list, .finish-panel) { min-width: 0; border: 1px solid var(--line); box-shadow: none; }
.page-student .question-list { margin-block-start: 0; background: var(--md-surface-low); }
.page-student .question-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding-inline: 4px;
}
.page-student .question-jump > .bright-icon { display: none; width: 14px; height: 14px; }
.page-student .question-jump.is-answered > .bright-icon { display: block; }
.page-student .question-header { padding-block-end: 12px; margin-block-end: 16px; border-block-end: 1px solid var(--line); }
.page-student .question-prompt { overflow-wrap: anywhere; }
.page-student .question-nav { border-radius: 0 0 var(--bright-tile-radius) var(--bright-tile-radius); }
.page-student .question-nav .button { min-width: 0; }
.page-student .finish-panel { margin-block-start: 14px; }
.page-student .finish-panel strong { color: var(--ink); font-family: var(--bright-mono); }
.page-student .finished-mark.is-expired { background: var(--warning-soft); color: var(--warning); }

/* Teacher: make the editor's source bank secondary; keep reports aligned and legible. */
.page :is(.editor-grid, .course-roster-layout) > * { min-width: 0; }
.page :is(.editor-grid, .course-roster-layout) .panel, .page:has(.metric-strip) .panel {
  border: 1px solid var(--line);
  box-shadow: none;
}
.page .editor-side > .panel { background: var(--md-surface-low); }
.page .editor-side .panel + .panel, .page .course-roster-layout .panel + .panel { margin-top: 0; }
.page .editor-grid .task-item { background: var(--md-surface-low); }
.page .editor-grid .task-number { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-family: var(--bright-mono); }
.page .editor-footer { padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.page .editor-footer-actions { margin-inline-start: auto; }
.page .metric-strip { padding: 12px 16px; border-radius: var(--control-radius); background: var(--md-secondary-container); }
.page .results-table th { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.page .results-table .table-secondary { line-height: 1.5; }
.page .pin-item-name { max-width: 28ch; overflow-wrap: anywhere; white-space: normal; }
.page .results-table td { overflow-wrap: anywhere; }
.page .course-student[open] { background: var(--md-surface-low); }
.page .course-student summary { padding-inline: 8px; }
.page .course-student > :not(summary) { margin-inline: 8px; }

/* The demo art remains one image, while rules and ranking use the same light reading surfaces. */
.bright-content > .practice-page.bright-tournament { padding-block: 32px 56px; }
.bright-tournament .tournament-title { font-weight: 700; letter-spacing: -.032em; text-wrap: balance; }
.bright-tournament :is(.tournament-surface, .tournament-entry, .tournament-rules) {
  border: 1px solid var(--line);
  border-radius: var(--bright-tile-radius);
  background: var(--surface);
  box-shadow: none;
}
.bright-tournament :is(.tournament-demo-note, .tournament-heading > span, .tournament-rules p) { color: var(--muted); }
.bright-tournament .tournament-tabs { background: var(--md-secondary-container); border-radius: var(--control-radius); }
.bright-tournament .tournament-tabs a { border-radius: var(--control-radius); color: var(--muted); }
.bright-tournament .tournament-tabs a:is([aria-current], :hover) { background: var(--accent-soft); color: var(--md-on-primary-container); box-shadow: none; }
.bright-tournament .tournament-table { border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.bright-tournament .tournament-table :is(th, td) { border-color: var(--line); }
.bright-tournament .tournament-table thead th { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.bright-tournament .tournament-own > * { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.bright-tournament .tournament-team-progress { color: var(--md-on-primary-container); }
.bright-tournament .tournament-team-progress progress { accent-color: var(--accent); }
.bright-tournament .tournament-position { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.bright-tournament .tournament-position strong { font-size: 20px; color: inherit; }
.bright-tournament .tournament-rules p { max-width: 68ch; }

/* Separate sources document uses the same tokens and has a short return path. */
.credits-document {
  box-sizing: border-box;
  width: min(100%, 48rem);
  margin: 0 auto;
  padding: clamp(16px, 5vw, 48px) clamp(16px, 4vw, 32px);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: 400 1rem/1.6 Inter, system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.credits-document h1 { margin: 12px 0 16px; font-size: clamp(30px, 4.1vw, 44px); line-height: 1.12; letter-spacing: -.032em; text-wrap: balance; }
.credits-document h2 { margin-block-start: 32px; font-size: 20px; }
.credits-document :is(p, li) { max-width: 68ch; }
.credits-document ul { padding: 0; list-style: none; }
.credits-document li { margin-block: 0; padding-block: 12px; border-block-start: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant); }
.credits-document a { color: var(--md-primary); text-underline-offset: 3px; }
.credits-document a:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.credits-document .credits-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

@media (min-width: 681px) {
  .page .results-table th:nth-child(3) { width: 24%; }
  .page .results-table th:nth-child(4) { width: 18%; }
  .page .results-table .result-pin .button { padding-inline: 8px; }
}
@media (max-width: 760px) {
  .lesson-page .lesson-layout.experiment-layout { grid-template-columns: minmax(0, 1fr); }
  .practice-page .practice-account-layout.with-art { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .practice-page .practice-account-layout.with-art .practice-account-card { grid-row: 1; }
  .page .join-layout { gap: 14px; }
  .bright-content > .practice-page.bright-tournament { padding-block-start: 24px; }
  .bright-tournament .tournament-aside { grid-row: auto; }
  .bright-tournament .tournament-entry { padding: 16px; }
  .bright-tournament .tournament-position { min-height: 0; padding: 14px; }
  .bright-tournament .tournament-table th[scope="row"] { overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .lesson-page .lesson-toolbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    margin-block-end: 16px;
  }
  .lesson-page .lesson-toolbar .course-meter { grid-area: 2 / 1 / 3 / -1; height: 5px; }
  .lesson-page .lesson-step-number { grid-area: 1 / 2; }
  .page-student .question-panel { padding: 14px; }
  .page-student .question-nav { position: static; margin: 14px -14px -14px; padding: 8px 14px max(8px, env(safe-area-inset-bottom)); }
  .page-student .student-title-block h1 { font-size: 20px; }
  .page-student .question-prompt { font-size: 17px; }
  .page-student .student-footer { padding-block-start: 12px; border-block-start: 1px solid var(--line); }
  .page .editor-grid .panel-heading { flex-wrap: wrap; gap: 8px; }
  .page .course-roster-layout, .page .panel-pad > .row-between { align-items: stretch; }
  .page .panel-pad > .row-between { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 360px) {
  .page-student .timer { padding-inline: 6px; }
  .page-student .timer-value { font-size: 20px; }
  .page-student .question-nav .button { padding-inline: 6px; }
  .bright-tournament .tournament-tabs a { padding-inline: 6px; font-size: 13px; }
}