/* Student controls share roles; reading, grading and honor artwork retain their own meaning. */
html.student-ui-root {
  --student-primary: #006dcc;
  --student-primary-hover: #005eb2;
  --student-bg: #eff6ff;
  --student-surface: #fff;
  --student-ink: #172b4d;
  --student-muted: #4c6280;
  --student-line: #d7e5f6;
  --student-field-line: #b8cee2;
  --student-selected: #e0f0ff;
  --student-font: 'Noto Sans TC', 'Segoe UI', sans-serif;
  --student-title: 2.25rem;
  --student-section: 1.5rem;
  --student-body: 1rem;
  --student-small: .875rem;
  --student-nav: .6875rem;
  font-family: var(--student-font);
  background: var(--student-bg);
  color: var(--student-ink);
}
html.student-ui-root body {
  --bg: var(--student-bg); --paper: var(--student-bg); --surface: var(--student-surface);
  --ink: var(--student-ink); --muted: var(--student-muted); --ink-soft: var(--student-muted);
  --accent: var(--student-primary); --action: var(--student-primary); --blue: var(--student-primary);
  --line: var(--student-line); --soft: var(--student-selected);
  --mcq-accent: var(--student-primary); --pet-accent: var(--student-primary);
  font-family: var(--student-font); font-size: var(--student-body); line-height: 1.65;
  color: var(--student-ink); background-color: var(--student-bg);
  accent-color: var(--student-primary);
}
html.student-ui-root body :is(button,input,select,textarea,dialog,.shell-header,.brand,.account) {
  font-family: var(--student-font);
}
html.student-ui-root:root body :is(h1,h2,h3,h4,h5,h6) { font-family: var(--student-font); }
html.student-ui-root body :is(button,input,select,textarea) { line-height: 1.5; }
html.student-ui-root body :is(input,select,textarea) { font-size: var(--student-body); caret-color: var(--student-primary); }
html.student-ui-root body :is(button,a,summary,input,select,textarea,[tabindex]):focus-visible {
  outline-color: var(--student-primary);
}
html.student-ui-root body ::selection { background: #bedcff; color: var(--student-ink); }

/* Page titles only: question headings and honor display type are not page titles. */
html.student-ui-root body :is(.page-heading,.hero,.practice-heading,.dashboard-hero,.login-card,.student-page-heading,.grades-heading,.ink-page-heading) h1,
html.student-ui-root body.mcq-student:not(.mcq-in-session) .mcq-heading h1,
html.student-ui-root body[data-page=maps].map-setup-mode .hero h1 {
  font-size: var(--student-title); font-weight: 750; line-height: 1.3; letter-spacing: -.025em;
}
html.student-ui-root:root body:not([data-page=question]):not([data-page=leaderboard]) main h1,
html.student-ui-root:root body .bank-heading h1 {
  font-size: var(--student-title); font-weight: 750; line-height: 1.3; letter-spacing: -.025em;
}
html.student-ui-root body :is(.student-panel,.dashboard-panel,.dashboard-section,.login-card,.map-reference-setup,.dialog-heading,.mcq-panel-heading,.mcq-history-heading)>:is(h2,h3),
html.student-ui-root body .study-header h2,
html.student-ui-root body :is(.account-section,.assignment-sheet,.feedback-panel,.result-heading)>h2,
html.student-ui-root body.student-page .subheading {
  font-size: var(--student-section); font-weight: 700; line-height: 1.4;
}
html.student-ui-root body :is(.page-intro,.muted,.eyebrow,.practice-meta,.study-meta,.mcq-setup-help,.map-setup-mode-help,#mcqGuestNotice,#mapSetupNotice,.login-card>p) {
  font-size: var(--student-small); line-height: 1.65;
}
html.student-ui-root body :is(.primary,.primary-button,.primary-action,.calculate-button,.primary-link,.assistant-primary,.pet-feed,.ink-start),
html.student-ui-root body.mcq-student #startButton,
html.student-ui-root body[data-page=maps] .map-reference-setup [data-action=start-practice] {
  background: var(--student-primary); border-color: var(--student-primary); color: #fff;
  font-size: var(--student-body); font-weight: 600; line-height: 1.5;
}
html.student-ui-root body :is(.primary,.primary-button,.primary-action,.calculate-button,.primary-link,.assistant-primary,.pet-feed,.ink-start):hover:not(:disabled),
html.student-ui-root body.mcq-student #startButton:hover:not(:disabled) {
  background: var(--student-primary-hover); border-color: var(--student-primary-hover); color: #fff;
}
html.student-ui-root body button:disabled { opacity: .65; cursor: not-allowed; }
html.student-ui-root body input:disabled { cursor: not-allowed; }
html.student-ui-root body :is(.text-button,.text-link,.topic-links a:not(.paper-link),.back-to-bank,.brand-symbol) { color: var(--student-primary); }
html.student-ui-root body :is(.notification-open,.notification-center button[aria-pressed=true]) { color: var(--student-primary); }
html.student-ui-root body :is(.setting-options button,.mcq-segmented span,.mcq-mode-cards strong,.map-setup-fields .setting-label,.mcq-count-label,.mcq-field-label) {
  font-size: var(--student-body);
}

/* Identical shell even on login; no dependency on an account response or skin JavaScript. */
html.student-ui-root body .shell-header { background: #f8fbff; color: var(--student-ink); }
html.student-ui-root body .brand { color: var(--student-ink); font-size: 1.5rem; font-weight: 750; }
html.student-ui-root body .account { font-size: var(--student-small); color: var(--student-ink); }
html.student-ui-root body #navigation :is(a,button) { font-family: var(--student-font); }
html.student-ui-root body #navigation [aria-current=page] { color: var(--student-primary); }
html.student-ui-root body[data-page=login] .login-card { background: #fff; }
html.student-ui-root body[data-page=login] { background: var(--student-bg); }

@media(max-width:767px) {
  html.student-ui-root { --student-title: 1.75rem; --student-section: 1.25rem; }
  html.student-ui-root body .brand { font-size: 1.25rem; }
  html.student-ui-root body #navigation {
    position: fixed; inset: auto 0 0; width: auto; z-index: 40;
    display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0;
    min-height: 66px; height: auto; padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--student-line); border-radius: 24px 24px 0 0;
    background: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html.student-ui-root body #navigation :is(a,button) {
    min-width: 0; min-height: 54px; padding: 4px 1px; gap: 4px;
    font-size: var(--student-nav); font-weight: 400; line-height: 1.35;
    color: var(--student-muted); border-radius: 20px;
  }
  html.student-ui-root body #navigation [aria-current=page] {
    background: var(--student-selected); color: var(--student-primary); font-weight: 700;
  }
  html.student-ui-root body #navigation svg { width: 24px; height: 24px; }
  html.student-ui-root body .shell-header { min-height: 64px; }
  html.student-ui-root body.assignments-page .assignment-shell { display: flex; }
  html.student-ui-root body.assignments-page .assignment-header { display: none; }
  html.student-ui-root body.assignments-page main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  html.student-ui-root body[data-page=login] main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}