/* Shared foundation; public and administrative compositions live in scoped layers. */
:root {
  --ui-canvas: #f6f8fa;
  --ui-surface: #fff;
  --ui-ink: #233039;
  --ui-muted: #62717b;
  --ui-line: #dce3e8;
  --ui-accent: var(--brand-primary, #246973);
  --radius: 8px;
}

body[data-role] {
  background: var(--ui-canvas);
  color: var(--ui-ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body[data-role] :is(h1, h2, h3, h4, p, a, button, input, select, textarea, label, span, strong, small) {
  letter-spacing: 0;
}

body[data-role] :is(h1, h2, h3, h4) {
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

body[data-role] :is(input, select, textarea) {
  max-inline-size: 100%;
  min-inline-size: 0;
  font: inherit;
  font-size: 16px;
  color: var(--ui-ink);
  border-radius: 6px;
}

body[data-role] :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
  min-block-size: 44px;
}

body[data-role] :is(.button, .text-button) {
  min-block-size: 44px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
}

body[data-role] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}

body[data-role] :is(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

body[data-role] [aria-invalid="true"] { border-color: #b73838; }
body[data-role] :is(.hint, .muted) { font-size: 14px; line-height: 1.65; }
body[data-role] :is(.table-wrap, .table-scroll) { max-inline-size: 100%; overflow-x: auto; }
body[data-role] table { font-variant-numeric: tabular-nums; }

/* Member navigation has one stable horizontal language across roles. */
body[data-shell="app"]:not(.admin-module-active) .site-header {
  border-block-start: 0;
  border-block-end: 1px solid var(--ui-line);
  background: var(--ui-surface);
  box-shadow: none;
  backdrop-filter: none;
}

body[data-shell="app"]:not(.admin-module-active) .site-header-inner {
  inline-size: min(100%, 1360px);
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
  gap: 20px;
  min-block-size: 76px;
  padding: 12px 32px;
}

body[data-shell="app"]:not(.admin-module-active) .brand-logo {
  inline-size: 42px;
  block-size: 42px;
  flex-basis: 42px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

body[data-shell="app"]:not(.admin-module-active) .brand strong { font-size: 18px; color: var(--ui-ink); }
body[data-shell="app"]:not(.admin-module-active) .brand span { display: none; }
body[data-shell="app"]:not(.admin-module-active) .nav { gap: 4px; }
body[data-shell="app"]:not(.admin-module-active) .nav .tab {
  min-block-size: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

body[data-shell="app"]:not(.admin-module-active) .nav .tab:is(:hover, :focus-visible) {
  background: #f0f4f6;
  color: var(--ui-ink);
  transform: none;
}

body[data-shell="app"]:not(.admin-module-active) .nav .tab.is-active {
  background: var(--brand-primary-soft, #eaf3f2);
  color: var(--ui-accent);
  box-shadow: inset 0 -2px 0 var(--ui-accent);
}

body[data-shell="app"]:not(.admin-module-active):not([data-page-module="home"]) #app-view {
  inline-size: 100%;
  max-inline-size: 1280px;
  padding: 0 32px 48px;
}

body[data-shell="app"]:not(.admin-module-active) .page-head {
  padding-block: 24px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--ui-line);
  margin-bottom: 24px;
}

body[data-shell="app"]:not(.admin-module-active) :is(#page-title, .module-head h2) { font-size: 26px; }
body[data-shell="app"]:not(.admin-module-active) .module-page {
  min-inline-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-shell="app"]:not(.admin-module-active) .module-head { margin-bottom: 24px; }
body[data-shell="app"]:not(.admin-module-active) :is(.panel-title-row h3, .role-panel h3) { font-size: 20px; }
body[data-shell="app"]:not(.admin-module-active) .module-page > section.panel {
  padding: 24px 0;
  margin-block: 0;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-shell="app"]:not(.admin-module-active) :is(.stat-card, .list-item, .role-metric) {
  border-radius: 8px;
  box-shadow: none;
}

body[data-shell="app"]:not(.admin-module-active) :is(.module-tabs, .role-workspace-tabs) {
  gap: 4px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

body[data-shell="app"]:not(.admin-module-active) :is(.panel-title-row, .module-head) { flex-wrap: wrap; }
body[data-shell="app"]:not(.admin-module-active) :is(.eyebrow, .sh-eyebrow, .sh-result, .learning-stage-order-note) { font-size: 15px; }
body[data-shell="app"]:not(.admin-module-active) :is(.member-line, .page-context, .practice-player .hint) { font-size: 15px; }
body[data-shell="app"]:not(.admin-module-active) .practice-player .page-context { font-size: 14px; }

body[data-shell="app"]:not(.admin-module-active) .learning-home .learning-section {
  padding: 28px 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-shell="app"]:not(.admin-module-active) .learning-home .learning-section h3 { font-size: 22px; }
body[data-shell="app"]:not(.admin-module-active) .learning-home .home-content-with-ad { display: block; }
body[data-shell="app"]:not(.admin-module-active) .learning-home .member-home-banner-section { padding-block: 0 24px; }
body[data-shell="app"]:not(.admin-module-active) .learning-home .home-word-lookup {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-shell="app"]:not(.admin-module-active) .learning-home .home-social-section:not(:has(a[href], button:not([data-dev-feature]))) { display: none; }
body[data-shell="app"]:not(.admin-module-active) .learning-home .voice-topic-card {
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

/* A framed question is a tool, not a full page of nested decorative panels. */
body[data-role][data-page-module="onlinePractice"] .practice-player {
  inline-size: 100%;
  max-inline-size: 960px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-role][data-page-module="onlinePractice"] .practice-player-top {
  gap: 16px;
  align-items: start;
  flex-wrap: wrap;
  padding-block: 0 16px;
}

body[data-role][data-page-module="onlinePractice"] .practice-player-top h3 { font-size: 22px; }
body[data-role][data-page-module="onlinePractice"] .practice-player-top-actions { flex-wrap: wrap; gap: 8px; }
body[data-role][data-page-module="onlinePractice"] .practice-question-card {
  padding: 28px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

body[data-role][data-page-module="onlinePractice"] .practice-option {
  min-block-size: 52px;
  padding: 12px 16px;
  border-radius: 6px;
  border-color: #cad5dc;
  background: #fff;
  font-size: 17px;
  text-align: start;
  box-shadow: none;
}

body[data-role][data-page-module="onlinePractice"] .practice-option.is-selected {
  border-color: var(--ui-accent);
  background: var(--brand-primary-soft, #eaf3f2);
  color: var(--ui-accent);
  box-shadow: inset 3px 0 0 var(--ui-accent);
}

body[data-role][data-page-module="onlinePractice"] .practice-player-actions { gap: 12px; flex-wrap: wrap; }
body[data-role][data-page-module="onlinePractice"] .practice-answer-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 16px 0;
  box-shadow: none;
}

/* Student home: compact learning focus, consistent books and distinct tool colors. */
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-inner {
  inline-size: min(100% - 64px, 1216px);
}

body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-welcome { padding-block: 24px; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-welcome h1 { font-size: 28px; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-learning-band {
  background: #eef5f5;
  padding-block: 28px;
  border-block: 1px solid #dce9e9;
}

body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-learning-grid { gap: 40px; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-current h2 { font-size: 26px; }
body[data-role="student"][data-page-module="home"] .student-home-v2 :is(.sh-lookup, .sh-lesson-words) { padding-left: 24px; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-word-results article { padding-block: 8px; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-word-results strong { font-size: 21px; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-content-grid { gap: 36px; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-book-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-book-grid > :only-child {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
}

body[data-role="student"][data-page-module="home"] .student-home-v2 .course-cover-media { aspect-ratio: 4 / 3; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .course-cover-card { min-block-size: 0; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .course-cover-media img { object-fit: contain; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .course-cover-copy strong { font-size: 18px; }
body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-tools { padding-block: 20px; }

@media (max-width: 1000px) {
  body[data-shell="app"]:not(.admin-module-active) .site-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding-inline: 24px;
  }
  body[data-shell="app"]:not(.admin-module-active) #nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  body[data-shell="app"]:not(.admin-module-active) #account-nav { grid-column: 2; grid-row: 1; }
}

@media (max-width: 700px) {
  body[data-shell="app"]:not(.admin-module-active) .site-header-inner {
    inline-size: 100%;
    padding: 10px 16px;
    min-block-size: 64px;
  }
  body[data-shell="app"]:not(.admin-module-active) .brand strong { font-size: 16px; }
  body[data-shell="app"]:not(.admin-module-active) .nav .tab { min-block-size: 44px; font-size: 14px; padding-inline: 10px; }
  body[data-shell="app"]:not(.admin-module-active):not([data-page-module="home"]) #app-view { padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  body[data-shell="app"]:not(.admin-module-active) .page-head { padding-block: 20px 12px; margin-bottom: 20px; }
  body[data-shell="app"]:not(.admin-module-active) :is(#page-title, .module-head h2) { font-size: 23px; }
  body[data-role][data-page-module="onlinePractice"] .practice-question-card { padding: 18px 16px; }
  body[data-role][data-page-module="onlinePractice"] .practice-option { font-size: 16px; }
  body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-inner { inline-size: calc(100% - 32px); }
  body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-learning-grid { gap: 24px; }
  body[data-role="student"][data-page-module="home"] .student-home-v2 :is(.sh-lookup, .sh-lesson-words) { padding-left: 0; }
  body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-current h2 { font-size: 23px; }
  body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-book-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-book-grid > :only-child { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
  body[data-role="student"][data-page-module="home"] .student-home-v2 .sh-content-grid { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-role] :is(.button, .tab, .course-cover-card, .practice-option) { transition: none; }
}