:root {
  color-scheme: light;
  --page: #f6f4ef;
  --surface: #fefefd;
  --surface-subtle: #e9e7e1;
  --ink: #151b27;
  --muted: #545f5f;
  --quiet: #68726f;
  --border: #e7e6e5;
  --border-strong: #d1d5cc;
  --brand: #2f6360;
  --brand-strong: #2f6360;
  --brand-soft: #e6eeea;
  --accent: #4d7974;
  --danger: #a03a35;
  --danger-soft: #f9edeb;
  --warning: #78571e;
  --warning-soft: #faf2df;
  --success: #345f44;
  --success-soft: #eaf3ed;
  --focus: #2f6360;
  --shadow: 0 20px 60px rgb(21 27 39 / 9%);
  --shadow-popup: 0 18px 48px rgb(21 27 39 / 13%);
  --radius-button: 10px;
  --radius-card: 12px;
  --radius-composer: 18px;
  --radius-popup: 14px;
  --radius-large: 12px;
  --radius-medium: 10px;
  --sidebar-width: 14rem;
  --content-width: 90rem;
  --motion-fast: 150ms;
  --motion-base: 240ms;
  --layer-nav: 40;
  --layer-scrim: 30;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 20rem;
  scroll-padding-block: 5rem;
  background: var(--page);
  font-family:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--page);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.7;
}

a {
  color: var(--brand-strong);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.site-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 0.75rem;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.brand strong,
.brand-english {
  display: block;
}

.brand strong {
  font-size: 1.08rem;
}

.brand-english {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.safety-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: start;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: var(--radius-medium);
  padding: 0.85rem 1rem;
  color: var(--muted);
  background: var(--surface-subtle);
}

.safety-notice strong {
  white-space: nowrap;
}

.safety-notice p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.app-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: -0.75rem 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: 0.65rem;
  background: rgb(255 255 255 / 82%);
}

.app-navigation button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  padding: 0.55rem 0.75rem;
  color: var(--brand-strong);
  background: transparent;
  font-weight: 750;
}

.app-navigation button:hover,
.app-navigation button[aria-current="page"] {
  border-color: var(--border);
  background: var(--brand-soft);
}

.main-content {
  display: grid;
  width: 100%;
  place-items: start center;
}

.global-status {
  width: min(100%, 48rem);
  margin-bottom: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-medium);
  padding: 0.75rem 1rem;
  overflow-wrap: anywhere;
  background: var(--surface);
}

.global-status[data-kind="success"] {
  border-color: var(--success);
  color: #164b2b;
  background: var(--success-soft);
}

.global-status[data-kind="error"] {
  border-color: var(--danger);
  color: #711919;
  background: var(--danger-soft);
}

.global-status[data-kind="warning"] {
  border-color: var(--warning);
  color: #5c3900;
  background: var(--warning-soft);
}

.view[hidden],
[hidden] {
  display: none !important;
}

.view {
  width: min(100%, 48rem);
}

.auth-card,
.account-card {
  border: 1px solid rgb(47 99 91 / 55%);
  border-radius: var(--radius-large);
  padding: clamp(1.15rem, 4vw, 2.5rem);
  overflow-wrap: anywhere;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.chat-card {
  width: min(100%, 64rem);
}

.knowledge-card,
.teacher-card,
.learning-card {
  width: min(100%, 64rem);
}

.checking-card,
.state-card {
  text-align: center;
}

.checking-card {
  padding-block: clamp(2rem, 8vw, 5rem);
}

.view-heading {
  margin-bottom: 1.5rem;
}

.view-heading p:last-child,
.checking-card p,
.state-card > p {
  color: var(--muted);
}

.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2.25rem);
  line-height: 1.25;
}

h2 {
  font-size: 1rem;
}

.view-heading p {
  margin: 0.6rem 0 0;
}

.patient-identifier-notice {
  margin: 0 0 1.5rem;
  border-left: 4px solid var(--accent);
  border-radius: 0.35rem;
  padding: 0.7rem 0.85rem;
  color: #60300b;
  background: #fff4e9;
  font-size: 0.92rem;
  font-weight: 650;
}

.chat-boundary-notices {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.chat-boundary-notices .patient-identifier-notice {
  margin: 0;
}

.phase-limit-notice {
  margin: 0;
  border-left: 4px solid var(--brand);
  border-radius: 0.35rem;
  padding: 0.7rem 0.85rem;
  color: #33443a;
  background: var(--brand-soft);
  font-size: 0.92rem;
  font-weight: 650;
}

.auth-form,
.chat-form,
.knowledge-form,
.material-upload-form,
.quiz-form {
  display: grid;
  gap: 1.25rem;
}

.auth-form[aria-busy="true"],
.chat-form[aria-busy="true"],
.knowledge-form[aria-busy="true"],
.material-upload-form[aria-busy="true"],
.quiz-form[aria-busy="true"] {
  opacity: 0.82;
}

.statistics-grid {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.statistics-grid > div {
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: 1rem;
  background: var(--surface-subtle);
}

.statistics-grid dt {
  color: var(--muted);
  font-weight: 700;
}

.statistics-grid dd {
  margin: 0.25rem 0 0;
  color: var(--brand-strong);
  font-size: clamp(1.55rem, 4vw, 2rem);
  font-weight: 850;
}

.activity-list {
  display: grid;
  gap: 0;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.activity-list li {
  border-left: 3px solid var(--brand);
  padding: 0.65rem 0.85rem;
  background: var(--surface-subtle);
}

.activity-list li + li {
  margin-top: 0.6rem;
}

.activity-list p {
  margin: 0;
}

.activity-time {
  margin-top: 0.2rem !important;
  color: var(--muted);
  font-size: 0.84rem;
}

.quiz-form fieldset {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: clamp(1rem, 3vw, 1.4rem);
}

.quiz-form legend {
  max-width: 100%;
  padding: 0 0.35rem;
  font-size: 1.08rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.quiz-options {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.quiz-option {
  display: grid;
  min-height: 44px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-medium);
  padding: 0.75rem;
  background: var(--surface-subtle);
  cursor: pointer;
}

.quiz-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.quiz-option input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.quiz-controls,
.pagination-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.quiz-feedback {
  margin-top: 1.25rem;
  border: 1px solid var(--border-strong);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius-medium);
  padding: 1rem;
  background: var(--surface-subtle);
}

.quiz-feedback[data-kind="correct"] {
  border-left-color: var(--success);
  background: var(--success-soft);
}

.quiz-feedback[data-kind="wrong"] {
  border-left-color: var(--warning);
  background: var(--warning-soft);
}

.quiz-feedback h2,
.quiz-feedback p {
  margin-top: 0;
}

.quiz-feedback dl {
  display: grid;
  gap: 0.45rem;
}

.quiz-feedback dl > div {
  display: grid;
  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
  gap: 0.75rem;
}

.quiz-feedback dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.wrongbook-details {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
}

.wrongbook-details > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.5fr) minmax(0, 1.5fr);
  gap: 0.75rem;
}

.wrongbook-details dt {
  color: var(--muted);
  font-weight: 700;
}

.wrongbook-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.pagination-controls {
  margin-top: 1rem;
}

.system-sections {
  display: grid;
  gap: 1rem;
}

.system-sections section {
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: 1rem;
  background: var(--surface-subtle);
}

.system-sections h2,
.system-sections p {
  margin: 0;
}

.system-sections p {
  margin-top: 0.45rem;
}

.material-upload-form {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.material-upload-form > h2 {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
}

.chat-controls {
  display: grid;
  gap: 1rem;
}

.field-group,
.role-selector {
  min-width: 0;
}

.field-group label,
.role-selector legend {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 750;
}

.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1.5px solid var(--border-strong);
  border-radius: 0.6rem;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: var(--surface);
  font-size: 1rem;
}

.field-group textarea {
  min-height: 10rem;
  resize: vertical;
}

.field-group input:hover,
.field-group select:hover,
.field-group textarea:hover {
  border-color: var(--brand);
}

.field-group input[aria-invalid="true"],
.field-group select[aria-invalid="true"],
.field-group textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--danger);
  background: #fffafa;
}

.chat-progress {
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: 0.75rem 1rem;
  color: var(--brand-strong);
  background: var(--surface-subtle);
  font-weight: 700;
}

.chat-answer-card {
  margin-top: 1.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-medium);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--surface-subtle);
}

.chat-answer-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.chat-answer-heading h2 {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
}

.answer-kind {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-size: 0.82rem;
  font-weight: 800;
}

.answer-kind[data-kind="fallback"] {
  border-color: var(--warning);
  color: #5c3900;
  background: var(--warning-soft);
}

.answer-kind[data-kind="refusal"] {
  border-color: var(--danger);
  color: #711919;
  background: var(--danger-soft);
}

.chat-answer-content {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-sources {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.chat-sources h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.source-note {
  margin: 0 0 0.75rem;
  border-left: 4px solid var(--warning);
  border-radius: 0.35rem;
  padding: 0.65rem 0.8rem;
  color: #5c3900;
  background: var(--warning-soft);
  font-weight: 700;
}

.results-section {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.results-heading,
.material-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.results-heading h2,
.material-heading h3 {
  margin: 0;
}

.result-count,
.result-score,
.result-meta {
  color: var(--muted);
  font-size: 0.86rem;
}

.result-list {
  display: grid;
  gap: 0.9rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.result-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: 1rem;
  overflow-wrap: anywhere;
  background: var(--surface-subtle);
}

.result-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.result-meta,
.result-score {
  margin: 0.4rem 0 0;
}

.result-content {
  margin: 0.75rem 0 0;
  white-space: pre-wrap;
}

.compact-results {
  margin-top: 0;
}

.empty-state {
  margin: 1rem 0 0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-medium);
  padding: 1rem;
  color: var(--muted);
  background: var(--surface);
}

.material-status {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.material-status[data-kind="ready"] {
  border-color: var(--success);
  color: #164b2b;
  background: var(--success-soft);
}

.material-status[data-kind="pending"] {
  border-color: var(--warning);
  color: var(--text);
  background: var(--warning-soft);
}

.material-status[data-kind="failed"] {
  border-color: var(--danger);
  color: #711919;
  background: var(--danger-soft);
}

.material-list-summary {
  margin: 0.9rem 0 0;
  border-left: 4px solid var(--success);
  border-radius: 0.35rem;
  padding: 0.65rem 0.8rem;
  color: #164b2b;
  background: var(--success-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

.material-details {
  display: grid;
  gap: 0;
  margin: 0.75rem 0 0;
}

.material-details > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.6fr) minmax(0, 1.4fr);
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding: 0.55rem 0;
}

.material-details dt {
  color: var(--muted);
  font-weight: 700;
}

.material-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.future-tools {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.compact-heading {
  margin-bottom: 1rem;
}

.compact-heading h2 {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
}

.future-tool-grid {
  display: grid;
  gap: 0.9rem;
}

.future-tool-card {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-medium);
  padding: 1rem;
  color: var(--muted);
  background: var(--surface-subtle);
}

.future-tool-card h3,
.future-tool-card p {
  margin: 0;
}

.future-tool-card h3 {
  color: var(--ink);
  font-size: 1.05rem;
}

.future-tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.chat-actions {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.field-help,
.field-error {
  margin: 0.4rem 0 0;
  font-size: 0.86rem;
}

.field-help {
  color: var(--muted);
}

.field-error {
  color: var(--danger);
  font-weight: 700;
}

.password-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: stretch;
}

.password-control .password-toggle {
  min-width: 7rem;
}

.role-selector {
  margin: 0;
  border: 0;
  padding: 0;
}

.role-options {
  display: grid;
  gap: 0.75rem;
}

.role-option {
  display: grid;
  min-height: 44px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-medium);
  padding: 0.75rem;
  background: var(--surface-subtle);
  cursor: pointer;
}

.role-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.role-option input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.role-option strong,
.role-option small {
  display: block;
}

.role-option small {
  margin-top: 0.1rem;
  color: var(--muted);
}

.primary-button,
.secondary-button,
.text-button {
  min-height: 44px;
  border-radius: 0.65rem;
  padding: 0.65rem 1rem;
  font-weight: 750;
}

.primary-button {
  border: 2px solid var(--brand);
  color: #ffffff;
  background: var(--brand);
}

.primary-button:hover:not(:disabled) {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
}

.secondary-button {
  border: 1.5px solid var(--border-strong);
  color: var(--color-action-text);
  background: var(--surface);
}

.secondary-button:hover:not(:disabled) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.text-button {
  border: 0;
  color: var(--color-action-text);
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

.full-width {
  width: 100%;
}

.view-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  color: var(--muted);
}

.error-summary {
  border: 2px solid var(--danger);
  border-radius: var(--radius-medium);
  padding: 0.75rem 1rem;
  color: #711919;
  background: var(--danger-soft);
}

.error-summary h2 {
  margin: 0;
}

.error-summary ul {
  margin: 0.5rem 0 0;
  padding-left: 1.4rem;
}

.error-summary a {
  color: #711919;
  font-weight: 700;
}

.error-link {
  min-height: 44px;
  border: 0;
  padding: 0.2rem 0;
  color: #711919;
  background: transparent;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

.identity-list {
  display: grid;
  gap: 0;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  overflow: hidden;
}

.identity-list > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface-subtle);
}

.identity-list > div + div {
  border-top: 1px solid var(--border);
}

.identity-list dt {
  color: var(--muted);
  font-weight: 700;
}

.identity-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 750;
}

.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.centered-actions {
  justify-content: center;
}

.state-icon,
.status-symbol {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  margin: 0 auto 1rem;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 900;
}

.state-icon-warning {
  color: var(--warning);
  background: var(--warning-soft);
}

.state-icon-error {
  color: var(--danger);
  background: var(--danger-soft);
}

.status-symbol {
  border: 5px solid #cbd3c5;
  border-top-color: var(--brand);
  animation: loading-rotation 900ms linear infinite;
}

.site-footer {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.noscript-message {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 10;
  margin: 0;
  border: 2px solid var(--danger);
  border-radius: var(--radius-medium);
  padding: 1rem;
  color: #711919;
  background: var(--danger-soft);
  font-weight: 700;
}

@keyframes loading-rotation {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 48rem) {
  .role-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .future-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statistics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 35rem) {
  .site-header {
    align-items: flex-start;
  }

  .phase-label {
    margin-left: 3.5rem;
  }

  .safety-notice {
    grid-template-columns: 1fr;
  }

  .password-control {
    grid-template-columns: 1fr;
  }

  .password-control .password-toggle,
  .action-group > button {
    width: 100%;
  }

  .identity-list > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .results-heading > button {
    width: 100%;
  }

  .material-details > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .app-navigation button,
  .quiz-controls > button,
  .pagination-controls > button {
    flex: 1 1 8rem;
  }

  .wrongbook-details > div,
  .quiz-feedback dl > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* UI-801 public, pricing, and account */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.public-navigation {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5vw, 1.5rem);
  margin-left: auto;
}

.public-navigation a {
  min-height: 44px;
  padding: 0.65rem 0.55rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 540;
  text-decoration: none;
}

.public-navigation a:hover {
  color: var(--ink);
}

.public-navigation .nav-login {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-button);
  padding-inline: 1rem;
  color: var(--ink);
  background: var(--surface);
}

.landing-view {
  width: 100%;
  max-width: 88rem;
}

.landing-hero {
  display: grid;
  justify-items: center;
  min-height: min(46rem, calc(100dvh - 7rem));
  align-content: center;
  padding: clamp(5rem, 11vw, 10rem) clamp(1rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem);
  text-align: center;
}

.editorial-kicker {
  margin: 0 0 1rem;
  color: var(--quiet);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-title {
  max-width: 15ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.75rem, 7vw, 6.75rem);
  font-weight: 590;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.landing-lede {
  max-width: 42rem;
  margin: 2rem auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.hero-composer {
  position: relative;
  display: grid;
  width: min(100%, 56rem);
  min-height: 4.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  margin-top: 3.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-composer);
  padding: 0.65rem 0.65rem 0.65rem 1.25rem;
  background: var(--surface);
  box-shadow: 0 14px 50px rgb(17 17 19 / 7%);
}

.hero-composer::before {
  position: absolute;
  z-index: -1;
  inset: -2px;
  border-radius: calc(var(--radius-composer) + 1px);
  background: linear-gradient(90deg, rgb(121 170 162 / 34%), rgb(191 169 111 / 30%));
  content: "";
}

.hero-composer textarea {
  max-height: 10rem;
  min-height: 3rem;
  resize: none;
  border: 0;
  padding: 0.7rem 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 1rem;
  line-height: 1.5;
}

.hero-composer:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.composer-send {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: var(--surface);
  background: var(--ink);
  font-size: 1.2rem;
}

.composer-caption {
  margin: 0.75rem 0 0;
  color: var(--quiet);
  font-size: 0.78rem;
}

.product-reveal {
  display: grid;
  width: min(calc(100% - 2rem), 76rem);
  min-height: 36rem;
  grid-template-columns: 12rem minmax(0, 1fr);
  margin: 0 auto clamp(7rem, 12vw, 12rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 80px rgb(17 17 19 / 9%);
  animation: product-reveal 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes product-reveal {
  from { opacity: 0; filter: blur(6px); transform: translateY(24px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.preview-sidebar {
  display: grid;
  align-content: start;
  gap: 1rem;
  border-right: 1px solid var(--border);
  padding: 1.5rem;
  background: var(--surface-subtle);
}

.preview-brand {
  margin-bottom: 2rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.preview-line {
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--border);
}

.preview-line.is-active { background: var(--border-strong); }
.preview-line.is-short { width: 68%; }

.preview-reading {
  width: min(100%, 48rem);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 5rem);
}

.preview-professor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

.preview-professor strong,
.preview-professor small {
  display: block;
}

.preview-professor small {
  color: var(--quiet);
  font-size: 0.76rem;
}

.neutral-monogram {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.evidence-rail {
  position: relative;
  border-left: 1px solid var(--border-strong);
  padding-left: clamp(1.5rem, 4vw, 2.5rem);
}

.evidence-rail::before {
  position: absolute;
  top: 0.15rem;
  left: -0.25rem;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  content: "";
}

.preview-question {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 570;
  line-height: 1.35;
}

.evidence-rail > p:not(.preview-question) {
  color: var(--muted);
  line-height: 1.8;
}

.evidence-rail button {
  min-height: 44px;
  margin-top: 2rem;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 0.8rem 0;
  color: var(--quiet);
  background: transparent;
  text-align: left;
}

.preview-composer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.25rem;
  margin-top: 4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-composer);
  padding: 1rem;
}

.preview-composer span {
  width: 72%;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--border);
}

.preview-composer i {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  border-radius: 10px;
  background: var(--ink);
}

.landing-narrative,
.landing-knowledge {
  display: grid;
  width: min(calc(100% - 2rem), 68rem);
  grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(3rem, 8vw, 8rem);
  margin: 0 auto clamp(8rem, 14vw, 14rem);
}

.landing-narrative h2,
.landing-knowledge h2,
.section-intro h2,
.final-composer h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  font-weight: 580;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
}

.narrative-copy > p,
.landing-knowledge > p {
  margin-top: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.quiet-definition-list {
  margin: 2.5rem 0 0;
}

.quiet-definition-list div {
  border-top: 1px solid var(--border);
  padding: 1.25rem 0;
}

.quiet-definition-list dt {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 650;
}

.quiet-definition-list dd {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.demo-invitation {
  display: grid;
  width: min(calc(100% - 2rem), 68rem);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  margin: 0 auto clamp(8rem, 13vw, 12rem);
  border-block: 1px solid var(--border);
  padding: 2rem 0;
}

.demo-label {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.demo-invitation h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  font-weight: 580;
}

.demo-invitation p {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.landing-pricing,
.final-composer,
.pricing-view,
.demo-view {
  width: min(calc(100% - 2rem), 68rem);
  margin-inline: auto;
}

.landing-pricing {
  margin-bottom: clamp(8rem, 14vw, 14rem);
}

.section-intro,
.page-heading {
  max-width: 48rem;
  margin-bottom: 3rem;
}

.plans-catalog {
  border-block: 1px solid var(--border-strong);
}

.plan-row {
  display: grid;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(8rem, 0.7fr) minmax(12rem, 1.4fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
}

.plan-row:last-child { border-bottom: 0; }
.plan-row[data-current="true"] { background: var(--surface-subtle); }
.plan-row[data-plan-id="free"] {
  border-radius: 8px;
  padding-inline: 1rem;
  background: linear-gradient(90deg, rgb(121 170 162 / 16%), rgb(63 114 108 / 8%) 58%, transparent);
}
.plan-row h3 { margin: 0; font-size: 1.35rem; }
.plan-price { margin: 0; color: var(--ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.plan-price small { color: var(--quiet); font-size: 0.75rem; }
.plan-quota { grid-column: 1 / 2; margin: -1.75rem 0 0; color: var(--quiet); font-size: 0.75rem; }
.plan-row ul { grid-column: 3 / 4; grid-row: 1 / span 2; margin: 0; padding-left: 1.1rem; color: var(--muted); }
.plan-row li + li { margin-top: 0.4rem; }
.plan-row button { grid-column: 4; grid-row: 1 / span 2; min-width: 10rem; }

.catalog-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0;
}

.final-composer {
  margin-bottom: 8rem;
  border-top: 1px solid var(--border-strong);
  padding-top: 4rem;
  text-align: center;
}

.final-composer p { color: var(--muted); }
.final-composer .primary-button { display: inline-flex; margin-top: 1.5rem; text-decoration: none; }

.pricing-view,
.demo-view {
  padding-block: clamp(4rem, 9vw, 9rem);
}

.pricing-view .text-link { display: inline-flex; margin-top: 3rem; }

.pricing-view .page-heading {
  max-width: 45rem;
}

.pricing-view .page-heading h1 {
  max-width: 45rem;
  font-size: clamp(3rem, 4vw, 3.25rem);
  line-height: 1.08;
}

.account-plan {
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.section-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.section-row h2 { margin: 0; font-size: 1.4rem; }
.account-plan-status { margin: 1.25rem 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.compact-plans .plan-row { grid-template-columns: 0.6fr 0.6fr 1fr auto; padding: 1.25rem 0; }
.compact-plans .plan-row ul { font-size: 0.84rem; }

@media (max-width: 64rem) {
  .public-navigation { display: none; }
  .landing-hero { min-height: auto; }
  .product-reveal { min-height: 30rem; grid-template-columns: 8rem minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .landing-title { font-size: clamp(2.7rem, 12vw, 5rem); }
  .product-reveal { grid-template-columns: 1fr; }
  .preview-sidebar { display: none; }
  .landing-narrative,
  .landing-knowledge { grid-template-columns: 1fr; gap: 2.5rem; }
  .demo-invitation { grid-template-columns: 1fr; }
  .plan-row,
  .compact-plans .plan-row { grid-template-columns: 1fr auto; gap: 0.75rem 1rem; }
  .plan-row h3 { grid-column: 1; }
  .plan-price { grid-column: 2; grid-row: 1; text-align: right; }
  .plan-quota { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .plan-row ul { grid-column: 1 / -1; grid-row: 3; }
  .plan-row button { grid-column: 1 / -1; grid-row: 4; width: 100%; margin-top: 0.5rem; }
}

@media (max-width: 35rem) {
  .header-actions { margin-left: auto; }
  .hero-composer { margin-top: 2.25rem; padding-left: 1rem; }
  .product-reveal { width: 100%; }
  .preview-reading { padding: 2rem 1.25rem; }
  .landing-narrative,
  .landing-knowledge,
  .demo-invitation,
  .landing-pricing,
  .final-composer,
  .pricing-view,
  .demo-view { width: 100%; }
  .catalog-error { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* UI-801.3B-R2.1 — composer overlays live outside the input geometry. */
.composer-utility-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  letter-spacing: 0.08em;
}

.composer-utility-button:hover { border-color: var(--border); }

.composer-popover {
  position: fixed;
  z-index: 90;
  inset: auto;
  width: min(300px, calc(100vw - 16px));
  max-height: min(360px, 50dvh);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  padding: 0.45rem;
  animation: composer-popover-enter 180ms var(--ease-standard) both;
}

.composer-popover-heading {
  position: sticky;
  z-index: 1;
  top: -0.45rem;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -0.1rem -0.1rem 0.25rem;
  padding: 0.1rem 0.25rem;
  background: var(--surface);
}

.composer-popover-heading p { margin: 0; color: var(--text-primary); font-size: 0.78rem; font-weight: 650; }
.composer-popover-heading button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  font-size: 1.2rem;
}
.composer-popover-heading button:hover { background: var(--surface-secondary); }
.composer-foundation-field { margin: 0.65rem 0.25rem 0.25rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.composer-foundation-field select { width: 100%; margin-top: 0.35rem; }

.composer-popover-scrim {
  position: fixed;
  z-index: 88;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(11 12 15 / 28%);
}

@keyframes composer-popover-enter {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 48rem) {
  .composer-secondary-settings { display: block; }
  .composer-popover.is-bottom-sheet {
    position: fixed;
    z-index: 90;
    top: auto !important;
    right: 0.5rem;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: 0.5rem !important;
    width: auto !important;
    max-height: min(70dvh, 520px) !important;
    border-radius: 16px;
    padding: 0.55rem 0.55rem max(0.55rem, env(safe-area-inset-bottom));
    animation-name: composer-sheet-enter;
    animation-duration: var(--motion-panel);
  }
}

@keyframes composer-sheet-enter {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .composer-popover,
  .composer-popover.is-bottom-sheet {
    animation-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* UI-801 professor workspace: reading-first conversation, not chat bubbles. */
.chat-workspace {
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.professor-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid var(--line, var(--border));
  padding-bottom: 1.5rem;
}

.professor-header p,
.professor-header h1 { margin: 0; }
.professor-header > div:last-child > p:last-child { margin-top: 0.35rem; color: var(--muted); }

.professor-mark {
  display: grid;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: -0.04em;
}

.chat-boundary-notices {
  display: block;
  margin: 1rem 0 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}

.chat-boundary-notices summary,
.composer-more summary {
  min-height: 44px;
  color: var(--muted);
  font-size: 0.86rem;
  cursor: pointer;
}

.chat-boundary-notices > div { display: grid; gap: 0.75rem; padding-top: 0.75rem; }
.chat-boundary-notices .phase-limit-notice { border-left-color: var(--border-strong); color: var(--ink); background: var(--surface-subtle); }

.chat-conversation {
  min-height: 24rem;
  padding: clamp(2.5rem, 7vw, 6rem) 0 2rem;
}

.chat-empty {
  width: min(100%, 40rem);
  margin: 0 auto;
  text-align: center;
}

.chat-empty h2 { margin: 0.5rem 0; font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -0.045em; }
.chat-empty p:last-child { max-width: 34rem; margin: 0 auto; color: var(--muted); }

.chat-progress {
  width: min(100%, 46rem);
  margin: 0 auto 1.25rem;
  border: 0;
  border-left: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.4rem 0.8rem;
  color: var(--muted);
  background: transparent;
  font-weight: 500;
}

.chat-answer-card {
  width: min(100%, 54rem);
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.student-question {
  width: fit-content;
  max-width: min(80%, 38rem);
  margin: 0 0 2.5rem auto;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.8rem 1rem;
  background: var(--surface-subtle);
  overflow-wrap: anywhere;
}

.answer-document { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); }
.evidence-rail { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; color: var(--muted); }
.evidence-rail > span { width: 1px; min-height: 9rem; flex: 1; background: linear-gradient(var(--ink), var(--border)); }
.evidence-rail small { writing-mode: vertical-rl; font-size: 0.68rem; letter-spacing: 0.04em; }
.answer-body { min-width: 0; }
.chat-answer-heading { border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.chat-answer-content { padding: 1.5rem 0; font-size: clamp(1rem, 1.4vw, 1.08rem); line-height: 1.8; }

.adaptive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.adaptive-actions > span { margin-right: 0.35rem; color: var(--muted); font-size: 0.78rem; }
.adaptive-actions button,
.sources-toggle,
.composer-chip {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0.55rem 0.75rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font: inherit;
  cursor: pointer;
}
.adaptive-actions button:hover,
.composer-chip:hover,
.sources-toggle:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
.adaptive-actions button:disabled { cursor: wait; opacity: 0.55; }

.chat-sources { margin-top: 1.25rem; padding-top: 0; }
.sources-toggle { display: flex; width: 100%; justify-content: space-between; border-inline: 0; border-radius: 0; padding-inline: 0; }
.sources-toggle span:first-child { font-weight: 700; }
#chat-sources-panel { padding-top: 0.75rem; }

.professor-composer {
  position: sticky;
  z-index: 4;
  bottom: 1rem;
  display: grid;
  gap: 0.35rem;
  width: min(100%, 54rem);
  margin: 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-composer);
  padding: 0.8rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 50px rgba(17, 17, 17, 0.09);
  backdrop-filter: blur(18px);
}

.professor-composer textarea {
  width: 100%;
  min-height: 5.25rem;
  border: 0;
  outline: 0;
  padding: 0.35rem;
  color: var(--ink);
  background: transparent;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}
.professor-composer textarea[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 3px; }
.composer-help { margin: 0; padding-inline: 0.35rem; color: var(--muted); font-size: 0.72rem; }
.composer-toolbar { display: flex; gap: 0.65rem; align-items: flex-end; justify-content: space-between; }
.composer-selectors { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.composer-menu-wrap { position: relative; }
.composer-chip { min-height: 44px; color: var(--muted); font-size: 0.8rem; }
.composer-menu {
  position: absolute;
  z-index: 8;
  bottom: calc(100% + 0.5rem);
  left: 0;
  width: min(20rem, calc(100vw - 3rem));
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  padding: 0.6rem;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(17, 17, 17, 0.14);
}
.composer-menu > p { margin: 0.35rem 0.5rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.composer-menu [role="group"] { display: grid; gap: 0.2rem; }
.composer-menu [role="group"] + p { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.capability-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; width: 100%; min-height: 44px; align-items: center; border: 0; border-radius: 0.45rem; padding: 0.55rem; text-align: left; background: transparent; color: var(--ink); cursor: pointer; }
.capability-option:hover:not(:disabled), .capability-option[aria-checked="true"] { background: var(--surface-subtle); }
.capability-option:disabled { color: var(--muted); cursor: not-allowed; }
.capability-option small { color: var(--muted); }
.composer-more { position: relative; }
.composer-more > div { position: absolute; z-index: 8; bottom: calc(100% + 0.5rem); left: 0; width: 14rem; border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.8rem; background: var(--surface); box-shadow: 0 20px 50px rgba(17, 17, 17, 0.14); }
.composer-more summary { display: flex; min-height: 40px; align-items: center; border: 1px solid var(--border); border-radius: 0.55rem; padding: 0.55rem 0.75rem; }
.composer-more .field-group select { margin-top: 0.35rem; }
.composer-send { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 0; border-radius: 50%; padding: 0; color: white; background: var(--ink); font-size: 1.2rem; }
.composer-send:disabled { color: var(--muted); background: var(--surface-subtle); cursor: not-allowed; }
.chat-actions { width: min(100%, 54rem); margin: 1.5rem auto 0; }

@media (max-width: 48rem) {
  .chat-workspace { padding: 1rem; }
  .chat-conversation { min-height: 18rem; padding-top: 3rem; }
  .answer-document { grid-template-columns: 1rem minmax(0, 1fr); gap: 0.75rem; }
  .evidence-rail small { display: none; }
  .student-question { max-width: 90%; }
  .professor-composer { bottom: 0.5rem; }
  .composer-toolbar { align-items: center; }
  .composer-more { display: none; }
}

@media (forced-colors: active) {
  .evidence-rail > span { background: CanvasText; }
  .professor-composer { border: 2px solid CanvasText; }
}

/* UI-801.3B-R2 — graphite theme, framed conversation, and interruptible reveal */
:root {
  --conversation-radius: 26px;
  --composer-island-radius: 24px;
  --status-strong: #3f7772;
  --status-developing: #4d6f8a;
  --status-attention: #a06f3f;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #11171b;
  --surface: #192125;
  --surface-subtle: #1e272b;
  --surface-secondary: #1e272b;
  --surface-raised: #242e32;
  --ink: #f2f7f8;
  --text-primary: #f2f7f8;
  --muted: #b5c2c2;
  --text-secondary: #b5c2c2;
  --quiet: #909f9f;
  --text-muted: #909f9f;
  --border: #35403f;
  --border-strong: #4d5a5b;
  --brand: #9bd8c5;
  --brand-strong: #b7e5d4;
  --brand-soft: #19302a;
  --accent: #c0d2d0;
  --focus: #c5d9cc;
  --danger: #ff948a;
  --danger-soft: #341e1e;
  --warning: #ddb158;
  --warning-soft: #302716;
  --success: #73c983;
  --success-soft: #15301f;
  --warning-surface: #302716;
  --danger-surface: #341e1e;
  --accent-cool: #7abba9;
  --accent-sky: #8ec9e7;
  --accent-warm: #d8c997;
  --graphite: #172624;
  --graphite-soft: #2b4d45;
  --shadow: 0 22px 70px rgb(0 0 0 / 34%);
  --shadow-popup: 0 18px 52px rgb(0 0 0 / 42%);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .site-shell,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .auth-view {
  background: var(--page);
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .demo-navigation {
  background: rgb(17 23 27 / 90%);
}

html[data-theme="dark"] .auth-narrative {
  background:
    radial-gradient(circle at 16% 24%, rgb(107 173 153 / 13%), transparent 34%),
    radial-gradient(circle at 84% 76%, rgb(216 201 151 / 8%), transparent 32%),
    linear-gradient(145deg, #11171b, #0d1215);
}

html[data-theme="dark"] .auth-form-panel,
html[data-theme="dark"] .auth-mini-window,
html[data-theme="dark"] .demo-product-panel,
html[data-theme="dark"] .chat-workspace,
html[data-theme="dark"] .professor-composer {
  background-color: var(--surface);
}

html[data-theme="dark"] .auth-mini-window,
html[data-theme="dark"] .professor-composer {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, rgb(107 173 153 / 48%), var(--border) 54%, rgb(216 201 151 / 34%)) border-box;
}

html[data-theme="dark"] .landing-hero {
  background:
    radial-gradient(circle at 20% 20%, rgb(107 173 153 / 13%), transparent 32%),
    radial-gradient(circle at 78% 72%, rgb(216 201 151 / 8%), transparent 30%);
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .composer-send,
html[data-theme="dark"] .nav-join {
  color: #11171b;
  background: linear-gradient(135deg, #9bd8c5, #6bad99);
}

html[data-theme="dark"] :where(.error-summary, .field-error, .patient-identifier-notice, .phase-limit-notice) {
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

html[data-theme="dark"] :where(.error-summary, .patient-identifier-notice, .phase-limit-notice) {
  background: var(--surface-secondary);
}

html[data-theme="dark"] :where(.field-group input, .field-group select, .field-group textarea)[aria-invalid="true"] {
  color: var(--text-primary);
  background: var(--danger-soft);
}

html[data-theme="dark"] :where(.error-summary, .error-summary a, .error-link) { color: var(--danger); }
html[data-theme="dark"] .global-status[data-kind="success"] { color: var(--success); }
html[data-theme="dark"] .global-status[data-kind="error"] { color: var(--danger); }
html[data-theme="dark"] .global-status[data-kind="warning"] { color: var(--warning); }
html[data-theme="dark"] .answer-kind[data-kind="fallback"],
html[data-theme="dark"] .source-note { color: var(--warning); }
html[data-theme="dark"] .answer-kind[data-kind="refusal"] { color: var(--danger); }

.theme-switcher {
  position: relative;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.theme-switcher > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  border-radius: 9px;
  padding: 0 0.7rem;
  cursor: pointer;
  list-style: none;
}

.theme-switcher > summary::-webkit-details-marker { display: none; }
.theme-switcher > summary::after { margin-left: 0.45rem; content: "⌄"; }
.theme-switcher[open] > summary::after { content: "⌃"; }

.theme-icon-switcher > .theme-switcher-summary {
  width: 44px;
  min-width: 44px;
  height: 44px;
  justify-content: center;
  border-radius: 999px;
  padding: 0;
  transition: color 200ms var(--ease-standard), background-color 200ms var(--ease-standard);
}

.theme-icon-switcher > .theme-switcher-summary::before,
.theme-icon-switcher > .theme-switcher-summary::after {
  display: none;
  content: none;
}

.theme-trigger-icon {
  display: none;
  width: 1.15rem;
  height: 1.15rem;
}

.theme-icon-switcher:has([data-theme-choice="system"][aria-pressed="true"]) .theme-trigger-system,
.theme-icon-switcher:has([data-theme-choice="light"][aria-pressed="true"]) .theme-trigger-light,
.theme-icon-switcher:has([data-theme-choice="dark"][aria-pressed="true"]) .theme-trigger-dark {
  display: block;
}

.theme-icon-switcher > .theme-switcher-summary:hover {
  color: var(--text-primary);
  background: var(--surface-secondary);
}

.theme-icon-switcher > .theme-icon-menu {
  display: flex;
  min-width: auto;
  gap: 0.25rem;
  border-radius: 14px;
  padding: 0.3rem;
}

.theme-icon-switcher > .theme-icon-menu > button {
  display: grid;
  width: 42px;
  min-height: 42px;
  place-items: center;
  border-radius: 10px;
  padding: 0;
}

.theme-icon-switcher > .theme-icon-menu > button[aria-pressed="true"]::after { content: none; }
.theme-mode-icon { width: 1.12rem; height: 1.12rem; }

@supports selector(details::details-content) {
  .theme-switcher-header::details-content {
    opacity: 0;
    transform: translateY(-0.3rem) scale(0.98);
    transform-origin: top right;
    transition:
      opacity 180ms var(--ease-standard),
      transform 220ms var(--ease-panel),
      content-visibility 220ms allow-discrete;
  }

  .theme-switcher-header[open]::details-content {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* KM-806 Stage 5 · Incremental Document Detail */
/* Safari needs an immediate repaint when this card swaps overview/detail views. */
.teacher-card.view:not([hidden]) {
  animation: none;
}

.teacher-document-detail {
  min-width: 0;
  margin-top: 1.5rem;
}

.teacher-detail-toolbar,
.teacher-detail-heading,
.teacher-detail-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.teacher-detail-heading {
  align-items: flex-start;
  flex-direction: column;
  margin-block: 1.25rem;
}

.teacher-detail-heading :where(h2, p),
.teacher-detail-version-label {
  margin: 0;
  overflow-wrap: anywhere;
}

.teacher-detail-version-label,
.teacher-detail-status,
.teacher-detail-meta,
.teacher-source-list small {
  color: var(--muted);
}

.teacher-detail-tabs {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-bottom: 1px solid var(--border);
  padding: 0 0.25rem;
  scrollbar-width: thin;
}

.teacher-detail-tabs [role="tab"] {
  min-height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.65rem 0.75rem;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.teacher-detail-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--text);
  color: var(--text);
}

.teacher-detail-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.teacher-detail-panel {
  min-width: 0;
  padding-block: 1.25rem;
  overflow-wrap: anywhere;
}

.teacher-detail-panel > :first-child {
  margin-top: 0;
}

.teacher-detail-panel :where(h3, p, pre, dd, summary, a) {
  overflow-wrap: anywhere;
}

.teacher-detail-definitions dd {
  word-break: break-word;
}

.teacher-detail-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-block: 1rem;
}

.teacher-detail-actions > :where(button, a),
.teacher-detail-version-upload button,
.teacher-review-inline-form button,
.teacher-revision-form button {
  min-height: 44px;
}

.teacher-extracted-text {
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-composer);
  padding: 1rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  background: var(--surface-subtle);
  font: inherit;
  line-height: 1.7;
}

.teacher-generation-banner,
.teacher-knowledge-item,
.teacher-source-list li,
.teacher-activity-list li,
.teacher-detail-version-list li {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-composer);
  padding: 1rem;
  background: var(--surface);
}

.teacher-generation-banner {
  margin-bottom: 1rem;
}

.teacher-generation-banner :where(h3, p) {
  margin-block: 0 0.5rem;
}

.teacher-knowledge-list,
.teacher-evidence-list {
  display: grid;
  gap: 0.75rem;
}

.teacher-knowledge-item > h3,
.teacher-knowledge-item > p {
  margin-block: 0 0.65rem;
}

.teacher-knowledge-content,
.teacher-source-content,
.teacher-source-list p {
  white-space: pre-wrap;
  line-height: 1.65;
}

.teacher-source-excerpt {
  min-width: 0;
  border-top: 1px solid var(--border);
  padding-block: 0.85rem;
}

.teacher-source-location {
  margin: 0 0 0.35rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.teacher-source-chapters {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.teacher-source-excerpt .teacher-source-content {
  margin: 0;
  overflow-wrap: anywhere;
}

.teacher-source-content mark {
  color: inherit;
  background: color-mix(in srgb, var(--warning) 22%, transparent);
  text-decoration: underline;
  text-decoration-color: var(--warning);
  text-underline-offset: 0.2em;
}

.teacher-source-list,
.teacher-activity-list,
.teacher-detail-version-list {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.teacher-source-list + h3 {
  margin-top: 2rem;
}

.teacher-source-list li,
.teacher-activity-list li,
.teacher-detail-version-list li {
  display: grid;
  gap: 0.5rem;
}

.teacher-source-list :where(p, small),
.teacher-activity-list p,
.teacher-detail-version-list p {
  margin: 0;
}

.teacher-review-inline-form,
.teacher-revision-form,
.teacher-detail-version-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.teacher-revision-form {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.55fr) auto auto;
}

.teacher-review-inline-form label,
.teacher-revision-form label,
.teacher-detail-version-upload label {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
  font-weight: 700;
}

.teacher-review-inline-form :where(select, input),
.teacher-revision-form :where(input, textarea),
.teacher-detail-version-upload input {
  min-width: 0;
  width: 100%;
}

.teacher-revision-form textarea {
  resize: vertical;
}

@media (max-width: 48rem) {
  .teacher-detail-toolbar,
  .teacher-review-inline-form,
  .teacher-revision-form,
  .teacher-detail-version-upload {
    grid-template-columns: minmax(0, 1fr);
  }

  .teacher-detail-toolbar {
    display: grid;
    align-items: stretch;
  }

  .teacher-detail-toolbar > button,
  .teacher-review-inline-form > button,
  .teacher-revision-form > button,
  .teacher-detail-version-upload > button {
    width: 100%;
  }
}

@media (forced-colors: active) {
  .teacher-detail-tabs,
  .teacher-extracted-text,
  .teacher-generation-banner,
  .teacher-knowledge-item,
  .teacher-source-list li,
  .teacher-activity-list li,
  .teacher-detail-version-list li {
    border-color: CanvasText;
  }
}

@supports not selector(details::details-content) {
  .theme-switcher-header[open] > div { animation: theme-menu-reveal 220ms var(--ease-panel) both; }
}

@keyframes theme-menu-reveal {
  from { opacity: 0; transform: translateY(-0.3rem) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.theme-switcher > div {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.35rem);
  right: 0;
  display: grid;
  min-width: 9.5rem;
  gap: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.35rem;
  background: var(--surface);
  box-shadow: var(--shadow-popup);
}

.theme-switcher button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  color: var(--text-secondary);
  text-align: left;
  background: transparent;
}

.theme-switcher button:hover,
.theme-switcher button[aria-pressed="true"] {
  color: var(--text-primary);
  background: var(--surface-secondary);
}

.theme-switcher button[aria-pressed="true"]::after {
  float: right;
  color: var(--accent-cool);
  content: "●";
}

.theme-switcher-sidebar { margin: 0 0 0.65rem; }
.theme-switcher-sidebar > summary { padding-inline: 0.85rem; }
.theme-switcher-sidebar > div { right: auto; bottom: calc(100% + 0.35rem); left: 0; top: auto; }
.theme-switcher-auth { position: absolute; top: 1.25rem; right: 1.5rem; }

.auth-return-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  font-size: 0.82rem;
}

.auth-return-links a { min-height: 44px; display: inline-flex; align-items: center; }

.remember-account-control {
  display: grid;
  gap: 0.3rem;
  margin-top: -0.35rem;
}

.remember-account-option {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 520;
  cursor: pointer;
}

.remember-account-option input {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  width: 2.25rem;
  height: 1.35rem;
  min-height: 1.35rem;
  max-height: 1.35rem;
  box-sizing: border-box;
  flex: 0 0 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-secondary) 32%, var(--surface));
  transition: background 160ms ease;
  vertical-align: middle;
}

.remember-account-option input::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #00000033;
  transition: transform 160ms ease;
}

.remember-account-option input:checked {
  background: var(--brand);
}

.remember-account-option input:checked::after {
  transform: translateX(0.9rem);
}

.remember-account-option input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.chat-workspace {
  width: min(calc(100% - 3rem), 67.5rem);
  margin-block: 2rem 4rem;
  border: 1px solid var(--border);
  border-radius: var(--conversation-radius);
  padding: 2.25rem clamp(1.5rem, 4vw, 3.5rem) 3rem;
  background: var(--surface);
  box-shadow: 0 24px 70px rgb(17 17 19 / 6%);
}

.chat-conversation,
.chat-boundary-notices,
.chat-answer-card,
.chat-progress,
.professor-composer,
.composer-actions,
.chat-actions {
  max-width: 47.5rem;
  margin-inline: auto;
}

.student-question {
  width: fit-content;
  max-width: 65%;
  margin-left: auto;
  border-radius: 20px 20px 5px 20px;
  background: var(--surface-secondary);
}

.professor-composer {
  border-radius: var(--composer-island-radius);
  background: var(--surface);
}

.professor-composer::before { border-radius: calc(var(--composer-island-radius) + 1px); }

.demo-status-list dd.is-strong { color: var(--status-strong); }
.demo-status-list dd.is-developing { color: var(--status-developing); }
.demo-status-list dd.needs-attention { color: var(--status-attention); }
.demo-status-list dd.not-assessed { color: var(--text-muted); }

.view:not([hidden]) { animation: r2-route-crossfade 220ms var(--ease-standard) both; }
@keyframes r2-route-crossfade { from { opacity: 0; } to { opacity: 1; } }

.r2-first-paint .site-header,
.r2-first-paint .landing-hero,
.r2-first-paint .hero-composer,
.r2-first-paint .product-reveal {
  will-change: opacity, filter, transform;
}

.landing-view:not([hidden]) .landing-hero {
  animation: r2-blur-clear 600ms 80ms var(--ease-panel) both;
}

.landing-view:not([hidden]) .hero-composer {
  animation: r2-blur-clear 660ms 220ms var(--ease-panel) both;
}

.landing-view:not([hidden]) .product-reveal {
  animation-duration: 740ms;
  animation-delay: 360ms;
}

@keyframes r2-blur-clear {
  from { opacity: 0; filter: blur(8px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@media (max-width: 48rem) {
  .theme-switcher-header > summary { padding-inline: 0.45rem; }
  .theme-switcher-auth { top: 0.75rem; right: 1rem; }
  .auth-form-brand { margin-top: 2.5rem; }
  .chat-workspace {
    width: calc(100% - 1.25rem);
    margin-block: 0.75rem 2rem;
    border-radius: 20px;
    padding: 1.25rem 0.75rem 1.5rem;
  }
  .student-question { max-width: 65%; border-radius: 18px 18px 5px 18px; }
  .professor-composer { border-radius: 22px; }
  .composer-actions { scroll-snap-type: x proximity; }
  .composer-actions button { scroll-snap-align: start; }
}

@media (max-width: 35rem) {
  .theme-switcher-header > summary { font-size: 0; }
  .theme-switcher-header > summary::before { font-size: 1rem; content: "◐"; }
  .theme-switcher-header > summary::after { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .view:not([hidden]),
  .landing-view:not([hidden]) .landing-hero,
  .landing-view:not([hidden]) .hero-composer,
  .landing-view:not([hidden]) .product-reveal {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* UI-801 authenticated product surfaces. */
.product-home {
  width: min(100%, 70rem);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3.5rem);
}

.home-intro { max-width: 52rem; margin: clamp(1rem, 5vw, 4rem) auto 0; text-align: center; }
.home-intro h1 { margin-top: 0.7rem; font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -0.065em; }
.home-intro > p:last-child { color: var(--muted); }

.home-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 0.75rem;
  align-items: end;
  width: min(100%, 54rem);
  margin: 2rem auto 4rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-composer);
  padding: 0.85rem;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.08);
}
.home-composer textarea { min-height: 4.5rem; border: 0; outline: 0; padding: 0.35rem; font: inherit; resize: vertical; }
.home-composer .field-error { grid-column: 1 / -1; margin: 0; }
.compact-identity { border-block: 1px solid var(--border); padding-block: 0.75rem; }
.compact-identity > div { border: 0; padding-block: 0.35rem; background: transparent; }

.home-learning,
.account-plan { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.home-learning h2, .account-plan h2 { margin: 0.25rem 0 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.home-statistics { display: flex; flex-wrap: wrap; gap: 0; margin: 1.25rem 0; }
.home-statistics > div { min-width: 9rem; border-left: 1px solid var(--border); padding: 0.25rem 1.25rem; }
.home-statistics > div:first-child { border-left: 0; padding-left: 0; }
.home-statistics dt { color: var(--muted); font-size: 0.8rem; }
.home-statistics dd { margin: 0.25rem 0 0; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.04em; }
.compact-activity { max-width: 48rem; }

.home-destinations,
.learning-subnav { display: grid; margin-top: 3rem; border-top: 1px solid var(--border); }
.home-destinations button {
  display: grid;
  grid-template-columns: minmax(7rem, 0.35fr) minmax(10rem, 0.65fr) minmax(12rem, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: 5rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 0;
  text-align: left;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.home-destinations button:hover { padding-inline: 0.75rem; background: var(--surface-subtle); }
.home-destinations span, .home-destinations small { color: var(--muted); }
.home-destinations strong { font-size: 1rem; }
.account-actions { margin-top: 2rem; }

.learning-subnav { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.5rem 0 2rem; }
.learning-subnav button { min-height: 48px; border: 0; border-bottom: 1px solid var(--border); padding: 0.7rem; color: var(--muted); background: transparent; cursor: pointer; }
.learning-subnav button:hover { color: var(--ink); background: var(--surface-subtle); }

.knowledge-card,
.teacher-card,
.learning-card { width: min(100%, 64rem); }
.knowledge-form { margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.knowledge-form .error-summary { grid-column: 1 / -1; }
.knowledge-form .primary-button { width: auto; min-width: 10rem; margin-bottom: 0; }
.knowledge-card .result-card,
.teacher-card .result-card { border-inline: 0; border-radius: 0; padding-inline: 0; background: transparent; }
.teacher-card .material-upload-form { border: 1px solid var(--border); border-radius: var(--radius-composer); padding: clamp(1rem, 3vw, 1.5rem); }

@media (max-width: 48rem) {
  .product-home { padding: 1rem; }
  .home-intro { margin-top: 2rem; }
  .home-composer { margin-bottom: 2.5rem; }
  .home-destinations button { grid-template-columns: 1fr; gap: 0.2rem; }
  .learning-subnav { grid-template-columns: 1fr; }
  .knowledge-form { grid-template-columns: 1fr; }
  .knowledge-form .primary-button { width: 100%; }
}

.demo-view { width: min(100%, 74rem); padding: clamp(1rem, 4vw, 3rem); }
.demo-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 2rem; }
.demo-header h1 { margin: 0.65rem 0; font-size: clamp(2.2rem, 6vw, 4.5rem); letter-spacing: -0.06em; }
.demo-header p:last-child { max-width: 46rem; color: var(--muted); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.demo-persona { display: flex; gap: 0.8rem; align-items: center; margin-top: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; }
.demo-persona div:nth-child(2) { display: grid; }
.demo-persona span:not(.demo-label) { color: var(--muted); font-size: 0.82rem; }
.demo-persona .demo-label { margin-left: auto; }
.demo-steps { display: flex; gap: 0; margin-top: 2rem; border-bottom: 1px solid var(--border); }
.demo-steps button { min-width: 48px; min-height: 48px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; }
.demo-steps button[aria-current="step"] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 700; }
.demo-steps button:disabled { cursor: not-allowed; opacity: 0.45; }
.demo-scene { display: grid; grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 7vw, 7rem); min-height: 31rem; padding: clamp(2rem, 6vw, 5rem) 0; }
.demo-scene-copy h2 { margin: 0.5rem 0 1rem; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.05em; }
.demo-scene-copy p:last-child { color: var(--muted); line-height: 1.7; }
.demo-product-panel { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: 1rem; padding: clamp(1rem, 3vw, 2rem); background: var(--surface); box-shadow: 0 24px 70px rgba(17, 17, 17, 0.07); }
.demo-product-panel > .demo-label { position: absolute; top: 0.8rem; right: 0.8rem; }
.demo-question { width: fit-content; max-width: 85%; margin: 1.5rem 0 2rem auto; border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.75rem; background: var(--surface-subtle); }
.demo-answer-document { border-left: 1px solid var(--ink); padding-left: 1.25rem; }
.demo-answer-heading { display: flex; gap: 0.65rem; align-items: center; }
.demo-answer-document > p { line-height: 1.7; }
.demo-source { border-top: 1px solid var(--border); padding-top: 0.75rem; }
.demo-source summary { min-height: 44px; cursor: pointer; }
.demo-quiz { margin-top: 1.5rem; border: 0; padding: 0; }
.demo-quiz legend { margin-bottom: 1rem; font-size: 1.25rem; font-weight: 700; }
.demo-choice { display: block; width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--border); padding: 0.8rem; text-align: left; color: var(--ink); background: transparent; cursor: pointer; }
.demo-choice:hover { background: var(--surface-subtle); }
.demo-feedback { color: var(--muted); font-size: 0.86rem; }
.demo-status-list { display: grid; gap: 0; margin-top: 1rem; }
.demo-status-list > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 0.85rem 0; }
.demo-status-list dd { margin: 0; font-weight: 700; }
.demo-path { margin-top: 2rem; border-left: 2px solid var(--ink); padding-left: 1rem; }
.demo-path p { color: var(--muted); }
.demo-source-list { margin: 1rem 0 0; padding: 0; list-style: none; }
.demo-source-list li { display: grid; gap: 0.3rem; border-bottom: 1px solid var(--border); padding: 1rem 0; }
.demo-source-list span { color: var(--muted); font-size: 0.82rem; }
.demo-teacher-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.demo-teacher-grid section { border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.demo-teacher-grid h3 { margin: 0.4rem 0; }
.demo-teacher-grid p:last-child { color: var(--muted); }
.demo-navigation { display: flex; gap: 1rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 1.25rem; }

[tabindex="-1"] { scroll-margin-block: 5rem; }

@media (max-width: 48rem) {
  .demo-header { display: grid; }
  .demo-scene { grid-template-columns: 1fr; min-height: 0; gap: 1.5rem; }
  .demo-steps { overflow-x: auto; overscroll-behavior-inline: contain; }
  .adaptive-actions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.4rem; overscroll-behavior-inline: contain; }
  .adaptive-actions > * { flex: 0 0 auto; }
  .composer-menu {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-height: min(75vh, 34rem);
    overflow-y: auto;
    border-radius: 1rem 1rem 0 0;
    padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }
  .professor-composer { bottom: max(0.5rem, env(safe-area-inset-bottom)); }
}

@media (max-height: 31rem) and (orientation: landscape) {
  .chat-conversation { min-height: 12rem; padding-top: 1.5rem; }
  .professor-composer { position: relative; bottom: auto; }
  .composer-menu { max-height: 85vh; }
}

@media (max-width: 64rem) {
  .site-header { flex-wrap: wrap; }
  .public-navigation:not([hidden]) {
    order: 3;
    display: flex;
    width: 100%;
    margin: 0;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .public-navigation a { flex: 0 0 auto; }
}

@media (forced-colors: active) {
  .primary-button,
  .secondary-button,
  .field-group input,
  .field-group select,
  .field-group textarea,
  .role-option,
  .error-summary {
    border: 2px solid ButtonText;
  }

  .status-symbol {
    border-color: CanvasText;
    border-top-color: Highlight;
  }
}

/* UI-801 product shell */
.skip-link {
  position: fixed;
  z-index: 1000;
  inset: 0 auto auto 1rem;
  min-height: 44px;
  padding: 0.7rem 1rem;
  color: var(--surface);
  background: var(--ink);
  transform: translateY(-120%);
  transition: transform var(--motion-fast) ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  min-height: 3.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quiet-button,
.icon-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  color: var(--ink);
  background: var(--surface);
}

.quiet-button:hover,
.icon-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}

.locale-toggle {
  padding-inline: 0.75rem;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem;
}

.mobile-menu-toggle span {
  display: block;
  width: 1.15rem;
  height: 1px;
  background: currentColor;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.5rem;
  margin-bottom: 1.75rem;
}

.sidebar-brand strong,
.sidebar-brand small {
  display: block;
}

.sidebar-brand strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.sidebar-brand small {
  color: var(--quiet);
  font-size: 0.72rem;
}

.app-navigation {
  align-content: start;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-subtle);
}

.app-navigation,
.nav-primary,
.nav-secondary,
.nav-account {
  flex-direction: column;
}

.nav-primary,
.nav-secondary,
.nav-account {
  display: flex;
  width: 100%;
  gap: 0.25rem;
}

.nav-secondary {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.nav-account {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.app-navigation button {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 540;
  text-align: left;
}

.nav-primary button,
.nav-secondary button { gap: 0.7rem; }

.app-navigation button:hover {
  border-color: transparent;
  color: var(--ink);
  background: rgb(17 17 19 / 4%);
}

.app-navigation button[aria-current="page"] {
  border-color: var(--border);
  color: var(--ink);
  background: var(--surface);
}

.nav-user-button {
  gap: 0.65rem;
}

.nav-user-button strong,
.nav-user-button small {
  display: block;
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-button small {
  margin-top: 0.1rem;
  color: var(--quiet);
  font-size: 0.74rem;
}

.nav-avatar {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.68rem;
  font-weight: 700;
}

.navigation-scrim {
  position: fixed;
  z-index: var(--layer-scrim);
  inset: 0;
  width: 100%;
  min-height: 100%;
  border: 0;
  background: rgb(17 17 19 / 28%);
  backdrop-filter: blur(2px);
}

.auth-card,
.account-card {
  border-color: var(--border);
  box-shadow: none;
}

.site-footer {
  color: var(--quiet);
  font-size: 0.78rem;
}

@media (min-width: 64.01rem) {
  .site-shell:has(.app-navigation:not([hidden])) {
    display: grid;
    min-height: 100dvh;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-areas:
      "nav safety"
      "nav main"
      "nav footer";
    align-content: start;
    padding: 0;
  }

  .site-shell:has(.app-navigation:not([hidden])) .site-header {
    display: none;
  }

  .site-shell:has(.app-navigation:not([hidden])) .app-navigation {
    position: sticky;
    top: 0;
    display: flex;
    grid-area: nav;
    width: var(--sidebar-width);
    height: 100dvh;
    margin: 0;
    padding: 1.25rem 1rem;
  }

  .site-shell:has(.app-navigation:not([hidden])) .safety-notice {
    grid-area: safety;
    width: min(calc(100% - 4rem), 68rem);
    margin: 1.5rem auto 0;
  }

  .site-shell:has(.app-navigation:not([hidden])) .main-content {
    grid-area: main;
    min-width: 0;
    padding: clamp(2rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem) 6rem;
  }

  .site-shell:has(.app-navigation:not([hidden])) .site-footer {
    grid-area: footer;
    padding: 1rem 2rem 2rem;
  }
}

@media (max-width: 64rem) {
  .site-shell {
    padding: 0 1rem 2rem;
  }

  .site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    margin-inline: -1rem;
    padding: 0.65rem 1rem;
    background: rgb(252 252 253 / 92%);
    backdrop-filter: blur(14px);
  }

  .mobile-menu-toggle:not([hidden]) {
    display: inline-flex;
  }

  .site-header:has(.mobile-menu-toggle:not([hidden])) .brand {
    margin-right: auto;
  }

  .app-navigation:not([hidden]) {
    position: fixed;
    z-index: var(--layer-nav);
    inset: 0 auto 0 0;
    display: flex;
    width: min(19rem, calc(100vw - 3rem));
    height: 100dvh;
    margin: 0;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform var(--motion-base) ease-out;
  }

  .navigation-open .app-navigation:not([hidden]) {
    transform: translateX(0);
    box-shadow: var(--shadow-popup);
  }

  .safety-notice {
    margin-top: 1rem;
  }

  .main-content {
    padding-block: 2rem 5rem;
  }
}

@media (max-width: 35rem) {
  .brand-english,
  .site-header .brand > span:last-child strong {
    display: none;
  }

  .site-header .brand-mark {
    width: 2.25rem;
    height: 2.25rem;
  }

  .safety-notice {
    display: block;
    font-size: 0.82rem;
  }

  .safety-notice strong {
    display: block;
    margin-bottom: 0.25rem;
  }
}

/* UI-801.3B visual foundation — Editorial Product Minimalism */
:root {
  --surface-secondary: #e9e7e1;
  --text-primary: #151b27;
  --text-secondary: #545f5f;
  --text-muted: #68726f;
  --focus: #2f6360;
  --warning-surface: #faf2df;
  --danger-surface: #f9edeb;
  --accent-cool: #4d7974;
  --accent-sky: #79aaa2;
  --accent-warm: #bfa96f;
  --graphite: #172624;
  --graphite-soft: #2b4d45;
  --max-marketing: 80rem;
  --max-product: 74rem;
  --max-reading: 47.5rem;
  --max-form: 26.25rem;
  --sidebar-width: 14.5rem;
  --radius-composer: 14px;
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-panel: 320ms;
  --motion-reveal: 520ms;
  --motion-hero: 740ms;
  --motion-product: 900ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-panel: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-padding-block: 5.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", "Microsoft YaHei", sans-serif;
}

body {
  overflow-x: clip;
  background: var(--page);
}

:where(button, a, input, textarea, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

body[data-input-method="pointer"] :where(h1, h2)[tabindex="-1"]:focus {
  outline: none;
}

.site-shell {
  max-width: none;
  padding: 0;
}

.site-header {
  position: sticky;
  z-index: var(--layer-nav);
  top: 0;
  display: grid;
  width: 100%;
  min-height: 4.5rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid transparent;
  padding: 0 max(3rem, calc((100vw - var(--max-marketing)) / 2));
  background: rgb(252 252 253 / 0%);
  transition: background var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
}

.page-scrolled .site-header {
  border-bottom-color: var(--border);
  background: rgb(252 252 253 / 88%);
  backdrop-filter: blur(16px);
}

.brand {
  width: fit-content;
  gap: 0.65rem;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.brand strong,
.sidebar-brand strong {
  font-size: inherit;
  line-height: 1.2;
}

.brand-mark,
.brand-english {
  display: none;
}

.evidence-mark {
  position: relative;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
}

.evidence-mark i {
  position: absolute;
  top: 0.18rem;
  bottom: 0.18rem;
  width: 1px;
  background: var(--border-strong);
  transform: rotate(12deg);
}

.evidence-mark i:first-child { left: 0.35rem; }
.evidence-mark i:nth-child(2) { left: 0.72rem; top: 0.05rem; bottom: 0.3rem; }
.evidence-mark b {
  position: absolute;
  right: 0.1rem;
  bottom: 0.18rem;
  width: 0.38rem;
  height: 0.38rem;
  border: 1px solid var(--text-primary);
  border-radius: 50%;
  background: var(--surface);
}

.public-navigation {
  position: relative;
  justify-self: center;
  gap: 1.75rem;
  margin: 0;
}

.public-navigation a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 550;
}

.public-navigation a[data-scroll-target]::after {
  position: absolute;
  right: 25%;
  bottom: 0.3rem;
  left: 25%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-cool), var(--accent-warm));
  content: "";
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.public-navigation a[data-scroll-target].is-current {
  color: var(--ink);
  font-weight: 620;
}

.public-navigation a[data-scroll-target].is-current::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-mobile-only { display: none !important; }

.public-auth-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.public-auth-actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 570;
  text-decoration: none;
}

.public-auth-actions .nav-login {
  padding-inline: 0.45rem;
}

.public-auth-actions .nav-join,
.public-navigation .nav-join {
  min-height: 44px;
  border-radius: 8px;
  padding: 0 1rem;
  color: var(--surface);
  background: linear-gradient(135deg, var(--graphite), var(--graphite-soft));
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  justify-content: flex-end;
  justify-self: end;
}

.public-account-trigger {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0;
  color: var(--text-primary);
  background: var(--surface);
  cursor: pointer;
}

.public-account-trigger[hidden] {
  display: none !important;
}

.public-account-trigger:hover {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}

.public-account-avatar {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft, var(--color-hover));
  color: var(--accent, var(--color-primary));
  font-size: 0.8rem;
  font-weight: 650;
  text-transform: uppercase;
}

/* Signed-in public home: public header and content only, no workspace chrome. */
body.public-home-active > .site-shell > .site-header {
  display: grid !important;
}

body.public-home-active > .site-shell > .safety-notice {
  display: grid !important;
}

body.public-home-active > .site-shell > .site-footer {
  display: block !important;
}

body.public-home-active > .site-shell > .app-navigation,
body.public-home-active > .site-shell .mobile-menu-toggle {
  display: none !important;
}

body.public-home-active > .site-shell > .site-header #public-navigation {
  display: flex !important;
}

body.public-home-active > .site-shell > .site-header #locale-toggle {
  display: none !important;
}

body.public-home-active > .site-shell .ui811-header-history-search {
  display: none !important;
}

#account-menu-workspace {
  display: none !important;
}

body.public-home-active #account-menu #account-menu-workspace {
  display: grid !important;
}

.quiet-button,
.icon-button {
  border-color: transparent;
  background: transparent;
}

.quiet-button:hover,
.icon-button:hover {
  border-color: var(--border);
}

.safety-notice {
  width: min(calc(100% - 6rem), var(--max-marketing));
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0 auto;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0.65rem 0;
  color: var(--text-muted);
  background: transparent;
  font-size: 0.75rem;
}

.safety-notice strong { color: var(--text-secondary); }

.main-content {
  width: 100%;
  min-width: 0;
  padding: 0;
}

.site-footer {
  width: min(calc(100% - 6rem), var(--max-marketing));
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 2.5rem;
}

.app-navigation {
  border-right: 1px solid var(--border);
  background: var(--surface-secondary);
}

.sidebar-brand {
  gap: 0.65rem;
  color: var(--text-primary);
}

.nav-avatar { display: none; }
.nav-evidence {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
}
.nav-evidence i {
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  left: 0.72rem;
  width: 1px;
  background: var(--border-strong);
}
.nav-evidence b {
  position: absolute;
  right: 0.48rem;
  bottom: 0.5rem;
  width: 0.34rem;
  height: 0.34rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
}

@media (min-width: 64.01rem) {
  .site-shell:has(.app-navigation:not([hidden])) .main-content {
    padding: 0 clamp(2rem, 5vw, 5rem) 6rem;
  }
  .site-shell:has(.app-navigation:not([hidden])) .safety-notice {
    width: min(calc(100% - 6rem), 68rem);
    margin-top: 0.75rem;
  }
}

@media (max-width: 64rem) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 3.75rem;
    margin: 0;
    padding: max(0.45rem, env(safe-area-inset-top)) 2rem 0.45rem;
  }
  .public-navigation {
    position: fixed;
    z-index: var(--layer-nav);
    inset: 0 auto 0 0;
    display: flex;
    width: min(20rem, 88vw);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: max(5rem, calc(env(safe-area-inset-top) + 4rem)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
    background: var(--surface);
    box-shadow: var(--shadow-popup);
    transform: translateX(-105%);
    transition: transform var(--motion-panel) var(--ease-panel);
  }
  .public-navigation a {
    width: 100%;
    border-bottom: 1px solid var(--border);
    padding: 0.8rem 0.5rem;
  }
  .public-navigation .nav-mobile-only { display: inline-flex !important; }
  .public-navigation .nav-login {
    margin: 1rem 0 0;
    border-left: 0;
    padding-left: 0.5rem;
  }
  .public-navigation .nav-join {
    justify-content: center;
    margin-top: 0.75rem;
    border: 0;
  }
  .public-navigation a[data-scroll-target]::after { display: none; }
  .public-auth-actions { display: none; }
  .safety-notice,
  .site-footer {
    width: calc(100% - 4rem);
  }
}

@media (max-width: 35rem) {
  .site-header { padding-inline: 1rem; }
  .brand strong { display: inline; }
  .safety-notice,
  .site-footer { width: calc(100% - 2.5rem); }
  .safety-notice { display: grid; }
  .safety-notice strong { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .public-navigation,
  .site-header { transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  .evidence-mark b,
  .nav-evidence { border: 1px solid CanvasText; }
  .public-navigation .nav-join { border: 1px solid ButtonText; }
}

/* UI-801.3B public thesis, product reveal, and authentication */
.landing-view {
  max-width: none;
  overflow: clip;
}

.landing-hero {
  position: relative;
  isolation: isolate;
  justify-items: start;
  width: min(calc(100% - 6rem), var(--max-marketing));
  min-height: 43rem;
  margin: 0 auto;
  padding: 7.5rem 0 10rem;
  text-align: left;
}

.landing-hero::before {
  position: absolute;
  z-index: -1;
  inset: -4.5rem min(-3rem, calc((100vw - var(--max-marketing)) / -2)) 1rem;
  background:
    radial-gradient(circle at 18% 24%, rgb(121 170 162 / 18%), transparent 36%),
    radial-gradient(circle at 78% 62%, rgb(216 201 151 / 12%), transparent 34%);
  content: "";
  pointer-events: none;
}

.landing-hero .editorial-kicker {
  margin-bottom: 1.5rem;
}

.landing-title {
  max-width: 58rem;
  font-size: 3.75rem;
  font-weight: 610;
  letter-spacing: -0.055em;
  line-height: 1.06;
}

.landing-title span {
  display: block;
}

.landing-lede {
  max-width: 42rem;
  margin: 1.75rem 0 0;
  font-size: 1.16rem;
  line-height: 1.7;
}

.hero-composer {
  width: min(100%, 47.5rem);
  min-height: 4.5rem;
  margin-top: 2.75rem;
}

.hero-composer::before {
  z-index: 0;
  inset: -1px;
  background: linear-gradient(110deg, rgb(63 114 108 / 52%), rgb(121 170 162 / 30%) 48%, rgb(216 201 151 / 38%));
  opacity: 0.4;
  pointer-events: none;
}

.hero-composer > * { position: relative; z-index: 1; }

.hero-composer:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.composer-caption {
  max-width: 47.5rem;
  font-size: 0.8125rem;
}

.product-reveal {
  width: min(calc(100% - 6rem), var(--max-product));
  min-height: 41rem;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  margin: -8.5rem auto 8rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, rgb(63 114 108 / 42%), rgb(231 230 229 / 82%) 52%, rgb(216 201 151 / 36%)) border-box;
  box-shadow: 0 28px 72px rgb(21 27 39 / 9%);
}

.preview-sidebar {
  gap: 0.25rem;
  padding: 1.5rem 1rem;
}

.preview-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2.25rem 0.5rem;
  font-size: 0.78rem;
}

.preview-nav-item {
  border-radius: 7px;
  padding: 0.6rem 0.7rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.preview-nav-item.is-active {
  color: var(--text-primary);
  background: var(--surface);
  font-weight: 600;
}

.preview-reading {
  width: min(100%, 52rem);
  padding: 3.5rem clamp(2.5rem, 6vw, 5.5rem) 2.5rem;
}

.preview-professor {
  margin-bottom: 2.5rem;
}

.preview-professor h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

#landing-product-title,
#landing-knowledge-title,
#landing-demo-title,
#landing-pricing-title {
  scroll-margin-top: 6rem;
}

.preview-user-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.product-reveal .evidence-rail::before {
  border-color: rgb(63 114 108 / 72%);
  box-shadow: 0 0 0 3px rgb(63 114 108 / 10%);
}

.preview-question {
  max-width: 35rem;
  margin: 0.55rem 0 2rem;
  font-size: 1.25rem;
}

.preview-answer-section {
  max-width: 40rem;
  border-top: 1px solid var(--border);
  padding: 1.25rem 0;
}

.preview-answer-section h3 {
  margin: 0 0 0.55rem;
  font-size: 1rem;
  font-weight: 630;
}

.preview-answer-section p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.75;
}

.preview-composer {
  min-height: 4rem;
  margin-top: 2.25rem;
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.preview-composer span {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
}

.preview-composer i {
  display: grid;
  place-items: center;
  color: var(--surface);
  font-style: normal;
  font-size: 0.8rem;
}

.landing-narrative,
.landing-knowledge,
.demo-invitation,
.landing-pricing,
.final-composer {
  width: min(calc(100% - 6rem), 68rem);
}

.landing-narrative,
.landing-knowledge {
  margin-bottom: 8rem;
}

.landing-knowledge {
  border-radius: 10px;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(145deg, var(--graphite), var(--graphite-soft));
}

.landing-knowledge .editorial-kicker {
  color: rgb(155 216 197 / 92%);
}

.landing-knowledge h2 {
  color: #f4f7f1;
}

.landing-knowledge > p {
  color: #c3cfc6;
}

.primary-button,
.composer-send {
  border-color: var(--color-primary-active);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
}

.primary-button:hover:not(:disabled) {
  border-color: var(--color-primary-active);
  background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-active));
}

.landing-narrative h2,
.landing-knowledge h2,
.section-intro h2,
.final-composer h2 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.auth-view {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(25rem, 45fr);
  padding: 0;
  background: var(--page);
}

.auth-narrative {
  position: sticky;
  top: 0;
  display: flex;
  height: 100dvh;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border);
  padding: 2rem clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 24%, rgb(121 170 162 / 24%), transparent 34%),
    radial-gradient(circle at 84% 76%, rgb(216 201 151 / 16%), transparent 32%),
    linear-gradient(145deg, #fbfaf7, #f6f4ef);
}

.auth-brand,
.auth-form-brand {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.auth-product-fragment {
  width: min(100%, 40rem);
  margin: 1.25rem 0 auto;
}

.auth-story-title {
  max-width: 36rem;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.85rem, 2.65vw, 2.7rem);
  font-weight: 610;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.auth-story-title span { display: block; }

.auth-mini-window {
  width: min(100%, 39rem);
  margin-top: 1.75rem;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: clamp(1.1rem, 2.4vw, 1.65rem);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, rgb(63 114 108 / 38%), rgb(231 230 229 / 84%) 54%, rgb(216 201 151 / 34%)) border-box;
  box-shadow: 0 22px 58px rgb(21 27 39 / 9%);
}

.auth-mini-question {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}

.auth-mini-question > span {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.auth-mini-question p {
  margin: 0.35rem 0 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 560;
  line-height: 1.5;
}

.auth-mini-answer { padding-top: 1rem; }

.auth-mini-answer > header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.auth-mini-answer h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
}

.auth-mini-answer .evidence-rail {
  padding-left: 1.25rem;
}

.auth-mini-answer .evidence-rail::before {
  border-color: rgb(63 114 108 / 72%);
  box-shadow: 0 0 0 3px rgb(63 114 108 / 10%);
}

.auth-mini-answer section {
  border-top: 1px solid var(--border);
  padding: 0.7rem 0;
}

.auth-mini-answer h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 650;
}

.auth-mini-answer section p,
.auth-mini-sources p {
  margin: 0.25rem 0 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.55;
}

.auth-mini-sources {
  border-top: 1px solid var(--border);
  padding: 0.65rem 0;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.auth-mini-sources summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.auth-mini-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.auth-mini-actions button {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  color: var(--text-secondary);
  background: var(--surface-secondary);
  font-size: 0.7rem;
}

.auth-mini-actions button:disabled {
  cursor: default;
  opacity: 1;
}

.auth-knowledge-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1.15rem;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
}

.auth-knowledge-labels span::before {
  margin-right: 0.4rem;
  color: var(--accent-cool);
  content: "·";
}

.auth-boundary {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.65;
}

.auth-form-panel {
  display: grid;
  min-width: 0;
  place-items: start center;
  padding: 2rem clamp(2rem, 5vw, 5rem) 4rem;
  overflow: visible;
  background: var(--surface);
}

.auth-form-inner {
  width: min(100%, var(--max-form));
  margin: auto 0;
  padding-top: 0;
}

.auth-form-brand {
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
}

.auth-view .view-heading {
  margin-bottom: 1.75rem;
}

.auth-view .view-heading h1 {
  max-width: 12ch;
  margin: 0.4rem 0 0.8rem;
  font-size: clamp(2.25rem, 3vw, 2.5rem);
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.auth-view .view-heading p:last-child {
  color: var(--text-secondary);
}

.auth-view .patient-identifier-notice {
  margin: 0 0 1.5rem;
  border: 0;
  border-left: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 0 0 0 0.8rem;
  color: var(--text-secondary);
  background: transparent;
  font-size: 0.8125rem;
  line-height: 1.65;
}

.auth-view .auth-form {
  gap: 1.25rem;
}

.auth-view .field-group input,
.auth-view .password-control input {
  min-height: 52px;
  border-radius: 10px;
  background: var(--surface);
}

.auth-view .password-control {
  position: relative;
}

.auth-view .password-control input {
  width: 100%;
  padding-right: 4.5rem;
}

.auth-view .password-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  padding: 0 0.65rem;
  color: var(--text-secondary);
  background: transparent;
  font-size: 0.75rem;
}

.auth-view .role-options {
  gap: 0.75rem;
}

.auth-view .role-option {
  min-height: 72px;
  border-radius: 8px;
  padding: 0.85rem;
}

.auth-view .primary-button.full-width {
  min-height: 52px;
  border-radius: 9px;
}

.auth-view .view-switch {
  margin-top: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

body:has(.auth-view:not([hidden])) .site-header,
body:has(.auth-view:not([hidden])) > .site-shell > .safety-notice,
body:has(.auth-view:not([hidden])) .site-footer {
  display: none;
}

body:has(.auth-view:not([hidden])) .main-content { padding: 0; }

@media (max-width: 64rem) {
  .landing-hero {
    width: calc(100% - 4rem);
    min-height: 39rem;
    padding-block: 6.5rem 9rem;
  }
  .landing-title { font-size: 3.125rem; }
  .product-reveal {
    width: calc(100% - 4rem);
    grid-template-columns: 9rem minmax(0, 1fr);
    margin-top: -7rem;
  }
  .landing-narrative,
  .landing-knowledge,
  .demo-invitation,
  .landing-pricing,
  .final-composer { width: calc(100% - 4rem); }
  .auth-view .view-heading h1 {
    max-width: 100%;
    font-size: 2.125rem;
  }
}

@media (max-width: 48rem) {
  .auth-view {
    display: block;
    min-height: 100dvh;
    background: var(--page);
  }
  .auth-narrative { display: none; }
  .auth-form-panel {
    display: block;
    padding: max(1rem, env(safe-area-inset-top)) 1.25rem 3rem;
    background: transparent;
  }
  .auth-form-inner {
    width: min(100%, var(--max-form));
    margin: 0 auto;
  }
  .auth-form-brand { margin-bottom: 2.25rem; }
  .auth-view .view-heading h1 { font-size: 2rem; }
  .product-reveal { grid-template-columns: 1fr; min-height: 0; }
  .pricing-view .page-heading h1 { font-size: 2.25rem; }
}

@media (max-width: 35rem) {
  .landing-hero {
    width: calc(100% - 2.5rem);
    min-height: 40rem;
    padding-block: 5rem 8rem;
  }
  .landing-title {
    max-width: 21rem;
    font-size: 2.375rem;
    line-height: 1.1;
  }
  .landing-title span { display: inline; }
  .landing-title span:first-child::after { content: " "; }
  .landing-lede { margin-top: 1.25rem; font-size: 1rem; }
  .hero-composer { margin-top: 2rem; }
  .product-reveal {
    width: calc(100% - 2rem);
    margin-top: -5.5rem;
    margin-bottom: 5rem;
  }
  .preview-reading { padding: 1.5rem 1.25rem; }
  .preview-answer-section:nth-of-type(2) { display: none; }
  .landing-narrative,
  .landing-knowledge,
  .demo-invitation,
  .landing-pricing,
  .final-composer { width: calc(100% - 2.5rem); }
  .pricing-view {
    width: 100%;
    padding-inline: 1rem;
  }
}

/* UI-801.3B authenticated home and professor experience */
.product-home {
  width: min(100%, 68rem);
  margin: 0 auto;
  padding: 5rem 0 2rem;
}

.home-intro {
  max-width: 55rem;
  margin: 0;
  text-align: left;
}

.home-intro h1 {
  margin: 0.6rem 0 0;
  font-size: 3rem;
  font-weight: 610;
  letter-spacing: -0.05em;
  line-height: 1.1;
}

.home-intro > p:last-child {
  margin-top: 1rem;
  font-size: 1.05rem;
}

.home-composer {
  width: min(100%, 55rem);
  min-height: 5.25rem;
  margin: 2rem 0 5.5rem;
  border-radius: 14px;
  padding: 0.8rem 0.8rem 0.8rem 1rem;
  box-shadow: 0 12px 36px rgb(17 17 19 / 6%);
}

.home-composer textarea {
  min-height: 3.25rem;
  max-height: 11.25rem;
  resize: none;
  line-height: 1.55;
}

.compact-identity { display: none !important; }

.home-learning,
.account-plan {
  margin-top: 0;
  border-top: 1px solid var(--border-strong);
  padding: 2.25rem 0 3.5rem;
}

.home-learning h2,
.account-plan h2 {
  font-size: 1.75rem;
  letter-spacing: -0.025em;
}

.home-statistics {
  margin: 2rem 0;
  border-block: 1px solid var(--border);
  padding: 1rem 0;
}

.home-statistics > div {
  flex: 1;
  min-width: 8rem;
}

.home-statistics dd {
  font-size: 1.55rem;
  font-weight: 620;
}

.home-destinations {
  margin: 0 0 5rem;
  border-top: 1px solid var(--border-strong);
}

.home-destinations button {
  grid-template-columns: 7rem minmax(12rem, 1fr) minmax(12rem, 0.8fr);
  min-height: 4.5rem;
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}

.home-destinations button:hover {
  padding-inline: 0.75rem;
}

.home-destinations span {
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.04em;
}

.account-plan .compact-plans {
  margin-top: 1rem;
}

.compact-plans .plan-row {
  grid-template-columns: minmax(6rem, 0.6fr) minmax(7rem, 0.6fr) minmax(10rem, 1fr) auto;
  padding: 1rem 0;
}

.compact-plans .plan-row ul { font-size: 0.78rem; }

.account-actions {
  justify-content: flex-start;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.chat-workspace {
  width: min(100%, 65rem);
  padding: 2.25rem 0 4rem;
}

.professor-header {
  min-height: 4.75rem;
  gap: 0.85rem;
  padding-bottom: 1.25rem;
}

.professor-evidence-mark {
  width: 1.5rem;
  height: 1.5rem;
  flex-basis: 1.5rem;
}

.professor-header h1 {
  font-size: 1.35rem;
  font-weight: 630;
  letter-spacing: -0.025em;
}

.professor-header .eyebrow {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.professor-header > div:last-child > p:last-child {
  font-size: 0.82rem;
}

.chat-boundary-notices {
  width: min(100%, var(--max-reading));
  margin: 0.75rem auto 0;
  padding-bottom: 0;
}

.chat-boundary-notices summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.chat-boundary-notices .patient-identifier-notice,
.chat-boundary-notices .phase-limit-notice {
  border: 0;
  border-left: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 0 0 0 0.8rem;
  background: transparent;
  font-size: 0.82rem;
}

.chat-conversation {
  min-height: 18rem;
  padding: 3rem 0 1.5rem;
}

.chat-empty {
  width: min(100%, 34rem);
  min-height: 15rem;
  display: grid;
  align-content: center;
}

.chat-empty h2 {
  margin: 0.55rem 0 0.8rem;
  font-size: 2rem;
  font-weight: 600;
}

.chat-answer-card,
.chat-progress {
  width: min(100%, var(--max-reading));
}

.student-question {
  max-width: min(90%, 42.5rem);
  margin-bottom: 2.25rem;
  border: 0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.answer-document {
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 1.5rem;
}

.answer-document > .evidence-rail {
  display: flex;
  padding-left: 0;
  border-left: 0;
}

.answer-document > .evidence-rail::before { display: none; }

.answer-document > .evidence-rail > span {
  min-height: 12rem;
  background: linear-gradient(var(--border-strong), var(--text-primary), var(--border));
}

.chat-answer-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}

.chat-answer-heading h2 {
  margin-top: 0.35rem;
  font-size: 1.75rem;
  font-weight: 620;
  letter-spacing: -0.03em;
}

.chat-answer-content {
  padding: 1.75rem 0 1rem;
  font-size: 1.03rem;
  line-height: 1.78;
}

.chat-answer-content p,
.follow-up-answer p {
  margin: 0 0 1.15rem;
  white-space: pre-wrap;
}

.chat-sources {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.sources-toggle {
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.composer-actions {
  position: sticky;
  z-index: 5;
  bottom: 9.4rem;
  width: min(100%, 55rem);
  margin: 0 auto 0.5rem;
  flex-wrap: nowrap;
  border: 0;
  padding: 0.25rem 0;
  overflow-x: auto;
  background: linear-gradient(90deg, var(--page) 90%, transparent);
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.composer-actions::-webkit-scrollbar { display: none; }
.composer-actions > span { flex: 0 0 auto; }
.composer-actions button { flex: 0 0 auto; background: var(--surface); }

.professor-composer {
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(100%, 55rem);
  min-height: 7rem;
  gap: 0.5rem;
  border-radius: 14px;
  padding: 0.75rem;
  box-shadow: 0 12px 36px rgb(21 27 39 / 7%);
}

.professor-composer::before {
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  background: linear-gradient(110deg, rgb(121 170 162 / 24%), transparent 38%, rgb(216 201 151 / 20%));
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.professor-composer:focus-within::before { opacity: 1; }
.professor-composer > * { position: relative; }

.professor-composer textarea {
  min-height: 3.25rem;
  max-height: 11.25rem;
  padding: 0.35rem 0.45rem;
  resize: none;
}

.composer-toolbar { align-items: center; }
.composer-selectors { flex-wrap: nowrap; min-width: 0; }

.composer-chip,
.composer-more summary {
  min-height: 44px;
  border-color: transparent;
  color: var(--text-secondary);
  background: transparent;
}

.composer-chip:hover,
.composer-more summary:hover {
  border-color: var(--border);
}

.composer-menu {
  border-radius: 10px;
  box-shadow: 0 16px 40px rgb(17 17 19 / 10%);
}

.composer-menu > p {
  text-transform: none;
  letter-spacing: 0.04em;
}

.chat-actions {
  width: min(100%, 55rem);
  opacity: 0.72;
}

@media (max-width: 64rem) {
  .product-home,
  .chat-workspace { width: min(100%, 54rem); }
}

@media (max-width: 48rem) {
  .product-home,
  .chat-workspace {
    width: 100%;
    padding: 2rem 1.25rem 4rem;
  }
  .home-intro h1 { font-size: 2rem; }
  .home-composer { margin-bottom: 4rem; }
  .home-statistics { display: grid; grid-template-columns: repeat(3, 1fr); }
  .home-statistics > div,
  .home-statistics > div:first-child { min-width: 0; border-left: 1px solid var(--border); padding: 0.25rem 0.75rem; }
  .home-statistics > div:first-child { border-left: 0; padding-left: 0; }
  .home-statistics dd { font-size: 1.25rem; }
  .home-destinations button { grid-template-columns: 1fr; gap: 0.2rem; }
  .compact-plans .plan-row { grid-template-columns: 1fr auto; }
  .chat-conversation { min-height: 15rem; padding-top: 2rem; }
  .answer-document { grid-template-columns: 0.75rem minmax(0, 1fr); gap: 0.75rem; }
  .composer-actions { bottom: 8.6rem; }
  .composer-actions > span { display: none; }
  .professor-composer { bottom: max(0.5rem, env(safe-area-inset-bottom)); }
  .composer-help { display: none; }
  .composer-more { display: none; }
  .composer-chip { padding-inline: 0.55rem; font-size: 0.75rem; }
  .chat-actions { display: none; }

  .site-header:has(.mobile-menu-toggle:not([hidden])) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
  }
  .site-header:has(.mobile-menu-toggle:not([hidden])) .brand {
    justify-self: start;
    margin: 0;
  }
  .site-header:has(.mobile-menu-toggle:not([hidden])) .header-actions {
    grid-column: 3;
  }
}

.site-shell:has(.app-navigation:not([hidden])) > .safety-notice {
  display: none;
}

@media (max-width: 22rem) {
  .product-home,
  .chat-workspace { padding-inline: 1rem; }
  .home-statistics { grid-template-columns: 1fr; }
  .home-statistics > div,
  .home-statistics > div:first-child { border-left: 0; border-top: 1px solid var(--border); padding: 0.75rem 0; }
  .composer-selectors { gap: 0.1rem; }
  .composer-chip { padding-inline: 0.4rem; }
}

/* UI-801.3B guided product story and motion */
.landing-view:not([hidden]) .landing-hero .editorial-kicker,
.landing-view:not([hidden]) .landing-title span,
.landing-view:not([hidden]) .landing-lede,
.landing-view:not([hidden]) .hero-composer,
.landing-view:not([hidden]) .composer-caption {
  animation: editorial-rise 640ms var(--ease-panel) both;
}

.auth-view:not([hidden]) .auth-story-title {
  animation: auth-editorial-enter 320ms var(--ease-panel) both;
}

.auth-view:not([hidden]) .auth-mini-window {
  animation: auth-editorial-enter 320ms 80ms var(--ease-panel) both;
}

.auth-view:not([hidden]) .auth-mini-sources,
.auth-view:not([hidden]) .auth-mini-actions {
  animation: auth-editorial-enter 260ms 140ms var(--ease-panel) both;
}

@keyframes auth-editorial-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-view:not([hidden]) .landing-title span:first-child { animation-delay: 70ms; }
.landing-view:not([hidden]) .landing-title span:nth-child(2) { animation-delay: 130ms; }
.landing-view:not([hidden]) .landing-lede { animation-delay: 190ms; }
.landing-view:not([hidden]) .hero-composer { animation-delay: 250ms; }
.landing-view:not([hidden]) .composer-caption { animation-delay: 310ms; }

@keyframes editorial-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.motion-ready .product-reveal {
  opacity: 0.36;
  transform: translateY(22px) scale(0.992);
  animation: none;
  transition:
    opacity 720ms var(--ease-panel),
    transform 720ms var(--ease-panel),
    box-shadow 720ms var(--ease-panel);
}

.motion-ready .product-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 30px 82px rgb(17 17 19 / 10%);
}

.demo-view {
  width: min(calc(100% - 6rem), 74rem);
  padding: 5.5rem 0 6rem;
}

.demo-header {
  min-height: 13rem;
  padding-bottom: 2.5rem;
}

.demo-header h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 610;
  line-height: 0.98;
}

.demo-actions .secondary-button {
  border-color: var(--border);
  background: transparent;
}

.demo-persona {
  margin-top: 0;
  padding: 1.1rem 0;
}

.demo-steps {
  margin-top: 0;
}

.demo-steps button {
  flex: 1 1 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.demo-steps button:hover,
.demo-steps button:focus-visible {
  background: var(--surface-subtle);
}

.demo-steps button[data-step-state="current"] {
  border-bottom-color: var(--text-primary);
  color: var(--text-primary);
  font-weight: 650;
}

.demo-steps button[data-step-state="completed"] {
  border-bottom-color: transparent;
  color: var(--text-secondary);
  font-weight: 550;
}

.demo-steps button[data-step-state="upcoming"] {
  border-bottom-color: transparent;
  color: var(--text-muted);
  font-weight: 550;
}

.demo-scene {
  grid-template-columns: minmax(16rem, 0.68fr) minmax(0, 1.32fr);
  min-height: 34rem;
  align-items: start;
}

.demo-scene-copy {
  position: sticky;
  top: 7rem;
}

.demo-product-panel {
  min-height: 27rem;
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 26px 72px rgb(17 17 19 / 7%);
  transform-origin: 50% 30%;
}

.demo-product-panel.is-entering > * {
  animation: demo-content-enter 520ms var(--ease-panel) both;
}

.demo-product-panel.is-entering > *:nth-child(2) { animation-delay: 60ms; }
.demo-product-panel.is-entering > *:nth-child(3) { animation-delay: 100ms; }

.demo-product-panel.is-restarting {
  animation: demo-restart-crossfade 220ms var(--ease-standard) both;
}

@keyframes demo-content-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes demo-restart-crossfade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.demo-question {
  margin-top: 0;
  border: 0;
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
}

.demo-answer-document {
  display: grid;
  gap: 0;
  border-left-color: var(--border-strong);
}

.demo-answer-heading {
  margin-bottom: 1.35rem;
}

.demo-answer-section {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
}

.demo-answer-section h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}

.demo-answer-section p,
.demo-source p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.demo-source summary {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.demo-choice:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.demo-status-list dd {
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 650;
}

.demo-learning-path {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: demo-path;
}

.demo-learning-path li {
  position: relative;
  min-height: 4rem;
  border-top: 1px solid var(--border);
  padding: 1rem 0 1rem 2.4rem;
  counter-increment: demo-path;
}

.demo-learning-path li::before {
  position: absolute;
  top: 1rem;
  left: 0;
  content: counter(demo-path, decimal-leading-zero);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.demo-learning-path .is-inserted {
  border-left: 1px solid var(--ink);
  padding-left: calc(2.4rem - 1px);
  background: linear-gradient(90deg, var(--surface-subtle), transparent 72%);
}

.demo-learning-path small {
  display: block;
  margin-top: 0.35rem;
  color: var(--text-muted);
}

.demo-learning-path .is-deemphasized { color: var(--text-muted); }

.demo-teacher-grid {
  gap: 0;
  margin-top: 0;
}

.demo-teacher-grid section {
  padding: 1.25rem 0;
}

.demo-teacher-grid section:first-child { padding-top: 0; }

.demo-navigation {
  min-height: 4.5rem;
}

.demo-navigation-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.demo-navigation span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 64rem) {
  .demo-view { width: calc(100% - 4rem); }
  .demo-scene { gap: 3rem; }
}

@media (max-width: 48rem) {
  .demo-view {
    width: auto;
    padding: 2.5rem 1.25rem 4rem;
  }
  .demo-header { min-height: 0; }
  .demo-header h1 { font-size: 3rem; }
  .demo-actions { width: 100%; justify-content: space-between; }
  .demo-steps button { flex-basis: 3.25rem; }
  .demo-scene { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 2.5rem; }
  .demo-scene-copy { position: static; }
  .demo-product-panel { min-height: 23rem; }
  .demo-navigation { position: static; z-index: auto; flex-wrap: wrap; gap: 0.5rem; background: transparent; backdrop-filter: none; }
  .demo-navigation > span { order: -1; flex-basis: 100%; text-align: center; }
  .demo-navigation-actions { gap: 0.4rem; margin-left: auto; }
  .demo-navigation .primary-button,
  .demo-navigation .secondary-button { padding-inline: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-view:not([hidden]) .landing-hero .editorial-kicker,
  .landing-view:not([hidden]) .landing-title span,
  .landing-view:not([hidden]) .landing-lede,
  .landing-view:not([hidden]) .hero-composer,
  .landing-view:not([hidden]) .composer-caption,
  .auth-view:not([hidden]) .auth-story-title,
  .auth-view:not([hidden]) .auth-mini-window,
  .auth-view:not([hidden]) .auth-mini-sources,
  .auth-view:not([hidden]) .auth-mini-actions,
  .demo-product-panel.is-entering > * {
    animation: none !important;
  }
  .demo-product-panel.is-restarting { animation: none !important; }
  .motion-ready .product-reveal,
  .motion-ready .product-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .public-navigation a[data-scroll-target]::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .demo-learning-path .is-inserted { border: 1px solid CanvasText; }
  .landing-hero::before { display: none; }
  .landing-knowledge,
  .primary-button,
  .composer-send,
  .public-auth-actions .nav-join,
  .public-navigation .nav-join,
  .product-reveal {
    background: Canvas;
    color: CanvasText;
  }
  .landing-knowledge h2,
  .landing-knowledge > p { color: CanvasText; }
}

/* R2 final cascade: these layout and motion decisions intentionally follow the R1 layer. */
.chat-workspace {
  width: min(calc(100% - 3rem), 67.5rem);
  margin-block: 2rem 4rem;
  border: 1px solid var(--border);
  border-radius: var(--conversation-radius);
  padding: 2.25rem clamp(1.5rem, 4vw, 3.5rem) 3rem;
  background: var(--surface);
  box-shadow: 0 24px 70px rgb(17 17 19 / 6%);
}

.chat-conversation,
.chat-boundary-notices,
.chat-answer-card,
.chat-progress,
.professor-composer,
.composer-actions,
.chat-actions { max-width: 47.5rem; margin-inline: auto; }

.student-question {
  width: fit-content;
  max-width: 65%;
  margin-left: auto;
  border-radius: 20px 20px 5px 20px;
  background: var(--surface-secondary);
}

.professor-composer { border-radius: var(--composer-island-radius); }
.professor-composer::before { border-radius: calc(var(--composer-island-radius) + 1px); }

.landing-view:not([hidden]) .landing-hero,
.landing-view:not([hidden]) .hero-composer,
.landing-view:not([hidden]) .product-reveal {
  animation: none;
}
.r2-first-paint .site-header {
  animation: r2-blur-clear 220ms var(--ease-panel) both;
}
.r2-first-paint .landing-view:not([hidden]) .landing-hero {
  animation: r2-blur-clear 600ms 80ms var(--ease-panel) both;
}
.r2-first-paint .landing-view:not([hidden]) .hero-composer {
  animation: r2-blur-clear 660ms 220ms var(--ease-panel) both;
}
.r2-first-paint .landing-view:not([hidden]) .product-reveal {
  animation: r2-blur-clear 740ms 360ms var(--ease-panel) both;
}

@media (max-width: 48rem) {
  .chat-workspace {
    width: calc(100% - 1.25rem);
    margin-block: 0.75rem 2rem;
    border-radius: 20px;
    padding: 1.25rem 0.75rem 1.5rem;
  }
  .professor-composer { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .view:not([hidden]),
  .landing-view:not([hidden]) .landing-hero,
  .landing-view:not([hidden]) .hero-composer,
  .landing-view:not([hidden]) .product-reveal {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* R2.1 final overlay cascade: legacy composer rules must never recapture popovers. */
.composer-menu.composer-popover {
  position: fixed;
  inset: auto;
  z-index: 90;
  width: min(300px, calc(100vw - 16px));
  max-height: min(360px, 50dvh);
  overflow: auto;
}

@media (max-width: 48rem) {
  .composer-menu.composer-popover.is-bottom-sheet {
    position: fixed;
    top: auto !important;
    right: 0.5rem;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: 0.5rem !important;
    width: auto !important;
    max-height: min(70dvh, 520px) !important;
  }
}

/* UI-801.3B-R2.1 — account actions and conversation geometry. */
:root {
  --sidebar-width: 15rem;
  --max-reading: 60rem;
}

.nav-account { min-width: 0; }

.nav-user-button {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.account-menu-chevron {
  margin-left: auto;
  color: var(--quiet);
  font-size: 0.75rem;
}

.account-menu {
  position: fixed;
  z-index: 100;
  width: 18rem;
  max-height: min(620px, calc(100dvh - 16px));
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 0.45rem;
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: var(--shadow-popup);
  /* Account navigation must remain visible if animation delivery is suspended. */
  animation: none;
}

.account-menu-identity {
  display: grid;
  min-height: 56px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.45rem 0.55rem;
}

.account-menu-identity strong,
.account-menu-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-identity small { margin-top: 0.12rem; color: var(--quiet); font-size: 0.72rem; }
.account-menu-close { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 9px; padding: 0; color: var(--text-secondary); background: transparent; font-size: 1.15rem; }
.account-menu-close:hover { background: var(--surface-secondary); }

.account-menu-section {
  border-top: 1px solid var(--border);
  padding: 0.4rem 0;
}

.account-menu-section > p {
  margin: 0;
  padding: 0.35rem 0.55rem 0.25rem;
  color: var(--quiet);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.account-menu button:not(.account-menu-close) {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 0.8rem;
}

.account-menu button:not(.account-menu-close):hover,
.account-menu button[aria-pressed="true"] {
  color: var(--text-primary);
  background: var(--surface-secondary);
}

.account-menu-destinations > button {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 0.65rem;
  padding: 0.55rem;
  text-align: left;
}

.account-plan-menu-item small { color: var(--quiet); font-size: 0.68rem; white-space: nowrap; }
.account-plan-menu-item #account-menu-quota { grid-column: 1 / -1; }
.account-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.2rem; }
.account-choice-row:has([data-locale-choice]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-choice-row button { justify-content: center; padding: 0.45rem 0.3rem; text-align: center; }
.account-menu-logout { color: var(--danger) !important; }

.account-menu-scrim {
  position: fixed;
  z-index: 98;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(11 12 15 / 28%);
}

@keyframes account-menu-enter {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 64.01rem) {
  .site-shell:has(.app-navigation:not([hidden])) .main-content {
    padding: 0 1.5rem 4rem;
  }
}

.chat-workspace {
  width: min(calc(100% - 1rem), 87.5rem);
  min-height: calc(100dvh - 4rem);
  margin-block: 1.25rem 2.5rem;
  border-radius: 28px;
  padding: 1.75rem clamp(1.25rem, 2.2vw, 2rem) 2.5rem;
}

.professor-header,
.chat-boundary-notices,
.chat-conversation,
.chat-answer-card,
.chat-progress,
.composer-actions {
  width: min(100%, 60rem);
  max-width: 60rem;
  margin-inline: auto;
}

.professor-composer {
  width: min(100%, 65rem);
  max-width: 65rem;
  margin-inline: auto;
}

.chat-conversation {
  min-height: 12rem;
  padding: 1.5rem 0 1rem;
}

.chat-empty { min-height: 12rem; }
.student-question { max-width: min(70%, 50rem); }

.answer-document {
  position: relative;
  display: block;
  padding-left: 1.5rem;
}

.answer-document > .evidence-rail {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 1px;
  padding: 0;
}

.answer-document > .evidence-rail > span {
  position: absolute;
  inset: 0;
  width: 1px;
  min-height: 100%;
}

.answer-document > .evidence-rail small { display: none; }

@media (max-width: 48rem) {
  .account-menu.is-bottom-sheet {
    top: auto !important;
    right: 0.5rem;
    bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    left: 0.5rem !important;
    width: auto !important;
    max-height: min(82dvh, 620px);
    border-radius: 16px;
    padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
    animation: none;
  }

  .account-menu-identity { padding-top: 0.45rem; }
  .chat-workspace {
    width: 100%;
    min-height: calc(100dvh - 5rem);
    margin-block: 0.5rem 1.5rem;
    border-radius: 20px;
    padding: 1.15rem 0.75rem max(1.5rem, env(safe-area-inset-bottom));
  }
  .answer-document { padding-left: 1rem; }
  .student-question { max-width: 85%; }
}

@keyframes account-sheet-enter {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .account-menu { animation: none !important; }
}

@media (max-height: 30rem) {
  .professor-composer {
    position: relative;
    bottom: auto;
  }
}

/* UI-801.3B-R2.1 — first-load blur-to-clear focus reveal. */
.landing-view:not([hidden]) .landing-hero .editorial-kicker,
.landing-view:not([hidden]) .landing-title span,
.landing-view:not([hidden]) .landing-lede,
.landing-view:not([hidden]) .hero-composer,
.landing-view:not([hidden]) .composer-caption,
.landing-view:not([hidden]) .product-reveal {
  animation: none;
}

.landing-view::after {
  position: fixed;
  z-index: 70;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 20%, rgb(207 231 224 / 74%), transparent 42%),
    radial-gradient(circle at 78% 66%, rgb(232 222 190 / 64%), transparent 38%),
    rgb(246 244 239 / 58%);
  content: "";
}

html[data-theme="dark"] .landing-view::after {
  background:
    radial-gradient(circle at 22% 20%, rgb(63 114 108 / 72%), transparent 42%),
    radial-gradient(circle at 78% 66%, rgb(122 111 73 / 54%), transparent 38%),
    rgb(17 23 27 / 64%);
}

.r2-first-paint .site-header {
  animation: r21-navbar-focus 320ms var(--ease-panel) both;
}

.r2-first-paint .landing-view:not([hidden]) .landing-hero .editorial-kicker,
.r2-first-paint .landing-view:not([hidden]) .landing-title span {
  animation: r21-hero-focus 930ms 120ms var(--ease-panel) both;
}

.r2-first-paint .landing-view:not([hidden]) .landing-title span:nth-child(2) { animation-delay: 170ms; }

.r2-first-paint .landing-view:not([hidden]) .landing-lede,
.r2-first-paint .landing-view:not([hidden]) .hero-composer,
.r2-first-paint .landing-view:not([hidden]) .composer-caption {
  animation: r21-composer-focus 1040ms 260ms var(--ease-panel) both;
}

.r2-first-paint .landing-view:not([hidden]) .composer-caption { animation-delay: 320ms; }

.r2-first-paint .landing-view:not([hidden]) .product-reveal {
  animation: r21-window-focus 1320ms 480ms var(--ease-panel) both;
}

.r2-first-paint .landing-view:not([hidden])::after {
  animation: r21-focus-veil 1700ms var(--ease-panel) both;
}

/* Keep public content visible independently of Safari's parent animation timeline.
   The staged first-paint reveals on individual hero children remain decorative. */
.landing-view:not([hidden]),
.r21-return-crossfade .landing-view:not([hidden]),
.r2-first-paint .landing-view:not([hidden]) .landing-hero {
  animation: none;
}

@keyframes r21-navbar-focus {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes r21-hero-focus {
  from { opacity: 0.2; filter: blur(16px); transform: translateY(22px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes r21-composer-focus {
  from { opacity: 0.15; filter: blur(12px); transform: translateY(26px) scale(0.98); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes r21-window-focus {
  from { opacity: 0.08; filter: blur(20px); transform: translateY(36px) scale(0.975); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes r21-focus-veil {
  from { opacity: 0.7; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .r2-first-paint .site-header,
  .r2-first-paint .landing-view:not([hidden]) .landing-hero .editorial-kicker,
  .r2-first-paint .landing-view:not([hidden]) .landing-title span,
  .r2-first-paint .landing-view:not([hidden]) .landing-lede,
  .r2-first-paint .landing-view:not([hidden]) .hero-composer,
  .r2-first-paint .landing-view:not([hidden]) .composer-caption,
  .r2-first-paint .landing-view:not([hidden]) .product-reveal,
  .r2-first-paint .landing-view:not([hidden])::after {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }

  .landing-view::after { display: none; }

  .site-shell:has(.app-navigation:not([hidden])),
  .site-shell:has(.app-navigation:not([hidden])) .app-navigation,
  .sidebar-label,
  .sidebar-icon {
    transition-duration: 0.01ms !important;
  }
}

/* UI-801.3B-R2.2 — fixed sidebar tools, SVG icons, and spatial collapse. */
.system-boundary-view {
  width: min(100%, 76rem);
  border-color: transparent;
  padding: clamp(1rem, 3vw, 2rem);
}

.system-behaviour-note {
  margin-top: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  color: var(--text-secondary);
}

.system-behaviour-note summary {
  width: fit-content;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
}

.system-behaviour-note > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  padding-top: 1rem;
}

.system-behaviour-note h2 { margin: 0; font-size: 0.88rem; }
.system-behaviour-note p { margin: 0.35rem 0 0; font-size: 0.82rem; line-height: 1.65; }

.boundary-guide {
  display: grid;
  grid-template-columns: minmax(10.5rem, 13rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2rem;
}

.boundary-index {
  position: sticky;
  top: 1.5rem;
  display: flex;
  height: fit-content;
  flex-direction: column;
  gap: 0.2rem;
}

.boundary-index button {
  min-height: 44px;
  justify-content: flex-start;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
  padding: 0.55rem 0.8rem;
  color: var(--text-muted);
  background: transparent;
  text-align: left;
}

.boundary-index button:hover { color: var(--text-primary); background: var(--surface-subtle); }
.boundary-index button[aria-current="page"] {
  border-left: 2px solid var(--text-primary);
  color: var(--text-primary);
  background: var(--surface-secondary);
  font-weight: 650;
}

.boundary-content { min-width: 0; }
.boundary-panel > h2 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.boundary-intro { max-width: 44rem; margin: 0.65rem 0 1.75rem; color: var(--text-secondary); }

.boundary-example {
  border-top: 1px solid var(--border);
  padding: 1.4rem 0 1.75rem;
}

.boundary-example-mark {
  display: inline-flex;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.24rem 0.48rem;
  color: var(--text-muted);
  background: var(--surface-secondary);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.boundary-example dl { display: grid; gap: 1rem; margin: 0; }
.boundary-example dl > div { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: 1rem; }
.boundary-example dt { color: var(--text-muted); font-size: 0.78rem; font-weight: 650; }
.boundary-example dd { margin: 0; color: var(--text-primary); line-height: 1.7; }
.boundary-example dl > div:last-child dd { color: var(--text-secondary); }

@media (max-width: 48rem) {
  .system-boundary-view { border: 0; padding-inline: 0.25rem; }
  .system-behaviour-note > div { grid-template-columns: 1fr; }
  .boundary-guide { display: block; margin-top: 1.35rem; }
  .boundary-index {
    position: sticky;
    z-index: 5;
    top: max(3.75rem, env(safe-area-inset-top));
    display: flex;
    width: calc(100% + 0.5rem);
    flex-direction: row;
    gap: 0.2rem;
    margin: 0 -0.25rem 1.5rem;
    padding: 0.45rem 0.25rem;
    overflow-x: auto;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    scroll-padding-inline: var(--space-1);
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }
  .boundary-index::-webkit-scrollbar { display: none; }
  .boundary-index button {
    min-width: max-content;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 7px;
    scroll-snap-align: start;
  }
  .boundary-index button[aria-current="page"] { border: 0; border-bottom: 1px solid var(--text-primary); }
  .boundary-example dl > div { grid-template-columns: 1fr; gap: 0.3rem; }
}

.sidebar-topbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
}

.sidebar-topbar .sidebar-brand {
  min-width: 0;
  flex: 1;
  margin: 0;
}

.sidebar-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.2rem;
}

.app-navigation .sidebar-tool-button {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0;
}

.sidebar-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms var(--ease-standard);
}

.app-navigation button[data-sidebar-tooltip]::after {
  position: absolute;
  z-index: 120;
  top: 50%;
  left: calc(100% + 10px);
  width: max-content;
  max-width: 12rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: var(--shadow-popup);
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity 120ms var(--ease-standard), transform 120ms var(--ease-standard);
  content: attr(data-sidebar-tooltip);
  font-size: 0.76rem;
  font-weight: 570;
  white-space: nowrap;
}

body.sidebar-transitioning .app-navigation button[data-sidebar-tooltip]::after {
  opacity: 0 !important;
}

.sidebar-label {
  min-width: 0;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 180ms var(--ease-standard),
    transform 260ms var(--ease-panel),
    visibility 0s linear;
}

#sidebar-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-inline: auto;
  border-color: transparent;
  background: transparent;
}

#sidebar-collapse-toggle .sidebar-icon {
  display: block;
  margin: 0;
  transform-origin: 50% 50%;
}

.sidebar-collapse-icon { transform: translateX(-0.5px); }
#sidebar-collapse-toggle[data-collapsed-icon="true"] .sidebar-collapse-icon { transform: translateX(-0.5px) rotate(180deg); }

@media (min-width: 64.01rem) {
  body.sidebar-collapsed { --sidebar-width: 4.5rem; }

  .site-shell:has(.app-navigation:not([hidden])) {
    transition: grid-template-columns 320ms var(--ease-panel);
  }

  .site-shell:has(.app-navigation:not([hidden])) .app-navigation {
    overflow: visible;
    transition: width 320ms var(--ease-panel), padding 320ms var(--ease-panel);
  }

  body.sidebar-collapsed .site-shell:has(.app-navigation:not([hidden])) .app-navigation {
    width: var(--sidebar-width);
    padding-inline: 0.875rem;
  }

  body.sidebar-collapsed .sidebar-topbar {
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
  }

  body.sidebar-collapsed .sidebar-topbar .sidebar-brand {
    width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    justify-content: center;
  }

  body.sidebar-collapsed .sidebar-toolbar-actions { flex-direction: column; }

  body.sidebar-collapsed .nav-primary,
  body.sidebar-collapsed .nav-secondary,
  body.sidebar-collapsed .nav-account { align-items: center; }

  body.sidebar-collapsed .nav-secondary {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  body.sidebar-collapsed .app-navigation button[data-destination],
  body.sidebar-collapsed .nav-user-button {
    width: 44px;
    min-width: 44px;
    grid-template-columns: 1fr;
    justify-content: center;
    padding-inline: 0;
  }

  body.sidebar-collapsed .sidebar-label {
    position: absolute;
    width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition:
      opacity 150ms var(--ease-standard),
      transform 220ms var(--ease-panel),
      visibility 0s linear 220ms;
  }

  body.sidebar-collapsed .app-navigation button[data-sidebar-tooltip]:hover::after,
  body.sidebar-collapsed .app-navigation button[data-sidebar-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
  }

  body.sidebar-collapsed .app-navigation button[aria-current="page"]::before {
    position: absolute;
    left: -0.45rem;
    width: 2px;
    height: 18px;
    border-radius: 999px;
    background: currentColor;
    content: "";
  }

  body.sidebar-collapsed .nav-account {
    border-top: 0;
    padding-top: 0;
  }

  body.sidebar-collapsed .nav-user-button { height: 44px; }
}

@media (max-width: 64rem) {
  #sidebar-collapse-toggle { display: none; }
  .sidebar-topbar { margin-bottom: 1rem; }
}

/* UI-801.4 Stage 1 — Living Atlas production design foundation.
 * This final token layer is authoritative. Existing page selectors stay intact
 * until their governed migration stages and consume the aliases below.
 * UI-807 adapts the palette to 21st Sage Garden without changing geometry.
 */
:root {
  color-scheme: light;

  /* Semantic color */
  --color-canvas: #f6f4ef;
  --color-surface: #fefefd;
  --color-surface-elevated: #fffefa;
  --color-surface-muted: #e9e7e1;
  --color-text-primary: #151b27;
  --color-text-secondary: #545f5f;
  --color-text-muted: #68726f;
  --color-border-subtle: rgb(21 27 39 / 18%);
  --color-border-strong: rgb(21 27 39 / 34%);
  --color-primary: #3f726c;
  --color-primary-hover: #36645f;
  --color-primary-active: #2c5551;
  --color-action-text: #2f6360;
  --color-focus: #2f6360;
  --color-success: #345f44;
  --color-warning: #78571e;
  --color-error: #9c342f;
  --color-info: #2f6680;
  --color-hover: rgb(47 99 91 / 8%);
  --color-active: rgb(47 99 91 / 13%);
  --color-selected: rgb(47 99 91 / 16%);
  --color-disabled: rgb(84 96 95 / 42%);
  --color-boundary: #a13b32;
  --color-signal: #3f7772;

  /* Font and type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --type-xs: 0.75rem;
  --type-sm: 0.875rem;
  --type-body: 1rem;
  --type-lg: 1.125rem;
  --type-xl: 1.5rem;
  --type-page-title: clamp(1.75rem, 3vw, 2.25rem);
  --type-section-title: clamp(1.125rem, 2vw, 1.375rem);
  --type-display: clamp(2.25rem, 6vw, 5.5rem);
  --leading-tight: 1.15;
  --leading-base: 1.5;
  --leading-reading: 1.7;
  --weight-regular: 400;
  --weight-medium: 520;
  --weight-semibold: 650;
  --weight-bold: 750;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-page-inline: clamp(1rem, 4vw, 3rem);

  /* Shape, borders, and depth */
  --radius-control: 10px;
  --radius-surface: 12px;
  --radius-frame: 24px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--color-border-subtle);
  --border-control: 1px solid var(--color-border-strong);
  --border-active: 2px solid var(--color-primary);
  --shadow-control: 0 1px 3px rgb(21 27 39 / 6%);
  --shadow-surface: 0 4px 16px rgb(21 27 39 / 6%);
  --shadow-popup: 0 22px 64px rgb(21 27 39 / 15%);

  /* Restrained glass: header, composer, popover, and sheet only. */
  --glass-surface: rgb(250 250 247 / 88%);
  --glass-fallback: #fefefd;
  --glass-border: rgb(21 27 39 / 18%);
  --glass-blur: blur(18px);
  --glass-saturation: saturate(135%);

  /* Layout, safe areas, and documented media-query boundaries. */
  --layout-header-height: 4.75rem;
  --layout-reading-max: 47.5rem;
  --sidebar-width-open: 15rem;
  --sidebar-width-collapsed: 4.5rem;
  --touch-target-min: 44px;
  --safe-area-inline-start: env(safe-area-inset-left, 0px);
  --safe-area-inline-end: env(safe-area-inset-right, 0px);
  --safe-area-block-start: env(safe-area-inset-top, 0px);
  --safe-area-block-end: env(safe-area-inset-bottom, 0px);
  --layout-page-inline-start: max(var(--space-page-inline), var(--safe-area-inline-start));
  --layout-page-inline-end: max(var(--space-page-inline), var(--safe-area-inline-end));
  --breakpoint-mobile: 35rem;
  --breakpoint-tablet: 48rem;
  --breakpoint-desktop: 64rem;

  /* Motion and ordered layers. Custom properties document breakpoints only;
   * native media queries remain the runtime authority.
   */
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-deliberate: 520ms;
  --motion-sidebar: 320ms;
  --motion-reduced: 80ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-panel: var(--ease-enter);
  --layer-content: 1;
  --layer-scrim: 30;
  --layer-nav: 40;
  --layer-first-paint: 50;
  --layer-popover: 90;
  --layer-dialog: 100;
  --layer-sheet: 110;
  --layer-tooltip: 120;

  /* Compatibility aliases. No later legacy root may override this layer. */
  --page: var(--color-canvas);
  --surface: var(--color-surface);
  --surface-subtle: var(--color-surface-muted);
  --surface-secondary: var(--color-surface-muted);
  --surface-raised: var(--color-surface-elevated);
  --ink: var(--color-text-primary);
  --text-primary: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --text-secondary: var(--color-text-secondary);
  --quiet: var(--color-text-muted);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border-subtle);
  --border-strong: var(--color-border-strong);
  --brand: var(--color-primary);
  --brand-strong: var(--color-primary);
  --brand-soft: var(--color-selected);
  --accent: var(--color-signal);
  --focus: var(--color-focus);
  --danger: var(--color-error);
  --danger-soft: color-mix(in srgb, var(--color-error) 9%, var(--color-surface));
  --danger-surface: var(--danger-soft);
  --warning: var(--color-warning);
  --warning-soft: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  --warning-surface: var(--warning-soft);
  --success: var(--color-success);
  --success-soft: color-mix(in srgb, var(--color-success) 9%, var(--color-surface));
  --status-strong: var(--color-success);
  --status-developing: var(--color-info);
  --status-attention: var(--color-warning);
  --shadow: var(--shadow-surface);
  --radius-button: var(--radius-control);
  --radius-card: var(--radius-surface);
  --radius-composer: var(--radius-surface);
  --radius-popup: var(--radius-surface);
  --radius-large: var(--radius-surface);
  --radius-medium: var(--radius-control);
  --sidebar-width: var(--sidebar-width-open);
  --max-reading: var(--layout-reading-max);
  --motion-base: var(--motion-standard);
  --motion-panel: var(--motion-sidebar);
  --motion-reveal: var(--motion-deliberate);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #11171b;
  --color-surface: #192125;
  --color-surface-elevated: #242e32;
  --color-surface-muted: #1e272b;
  --color-text-primary: #f2f7f8;
  --color-text-secondary: #b5c2c2;
  --color-text-muted: #909f9f;
  --color-border-subtle: #35403f;
  --color-border-strong: #4d5a5b;
  --color-primary: #6bad99;
  --color-primary-hover: #7abba9;
  --color-primary-active: #5c9985;
  --color-action-text: #9bd8c5;
  --color-focus: #c5d9cc;
  --color-success: #73c983;
  --color-warning: #ddb158;
  --color-error: #ff948a;
  --color-info: #80bfef;
  --color-hover: rgb(180 195 194 / 9%);
  --color-active: rgb(180 195 194 / 15%);
  --color-selected: rgb(86 154 136 / 21%);
  --color-disabled: rgb(144 159 159 / 48%);
  --color-boundary: #ff948a;
  --color-signal: #8ec9e7;
  --shadow-control: 0 1px 3px rgb(0 0 0 / 16%);
  --shadow-surface: 0 4px 16px rgb(0 0 0 / 20%);
  --shadow-popup: 0 24px 68px rgb(0 0 0 / 46%);
  --glass-surface: rgb(22 28 33 / 89%);
  --glass-fallback: #192125;
  --glass-border: rgb(242 247 248 / 19%);

  /* Reassert legacy aliases at Dark selector specificity. */
  --page: var(--color-canvas);
  --surface: var(--color-surface);
  --surface-subtle: var(--color-surface-muted);
  --surface-secondary: var(--color-surface-muted);
  --surface-raised: var(--color-surface-elevated);
  --ink: var(--color-text-primary);
  --text-primary: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --text-secondary: var(--color-text-secondary);
  --quiet: var(--color-text-muted);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border-subtle);
  --border-strong: var(--color-border-strong);
  --brand: var(--color-primary);
  --brand-strong: var(--color-primary);
  --brand-soft: var(--color-selected);
  --accent: var(--color-signal);
  --focus: var(--color-focus);
  --danger: var(--color-error);
  --danger-soft: color-mix(in srgb, var(--color-error) 9%, var(--color-surface));
  --danger-surface: var(--danger-soft);
  --warning: var(--color-warning);
  --warning-soft: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  --warning-surface: var(--warning-soft);
  --success: var(--color-success);
  --success-soft: color-mix(in srgb, var(--color-success) 9%, var(--color-surface));
  --status-strong: var(--color-success);
  --status-developing: var(--color-info);
  --status-attention: var(--color-warning);
  --shadow: var(--shadow-surface);
}

html {
  background: var(--color-canvas);
  font-family: var(--font-sans);
  line-height: var(--leading-base);
}

body {
  color: var(--color-text-primary);
  background: var(--color-canvas);
}

::selection {
  color: var(--color-text-primary);
  background: var(--color-selected);
}

:where(input, textarea) { caret-color: var(--color-primary); }

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
}

[aria-busy="true"] { cursor: progress; }

:where(button, input, select, textarea) { accent-color: var(--color-primary); }

:where(.theme-switcher > summary, [data-theme-choice], .nav-user-button, .account-menu button) {
  min-height: var(--touch-target-min);
}

.theme-switcher button,
.account-menu button:not(.account-menu-close) {
  min-height: var(--touch-target-min);
}

:where(.hero-composer, .home-composer, .professor-composer):has(textarea:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

:where(.field-group input, .field-group select, .field-group textarea) {
  border-color: var(--color-border-strong);
}

.page-scrolled .site-header,
.professor-composer,
.composer-menu.composer-popover,
.account-menu {
  border-color: var(--glass-border);
  background-color: var(--glass-fallback);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .page-scrolled .site-header,
  .professor-composer,
  .composer-menu.composer-popover,
  .account-menu {
    background-color: var(--glass-surface);
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturation);
    backdrop-filter: var(--glass-blur) var(--glass-saturation);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }

  :where(.site-header, .public-navigation, .sidebar-label),
  .professor-composer::before {
    transition-duration: var(--motion-reduced) !important;
  }

  :where(.composer-popover, .account-menu, .composer-popover.is-bottom-sheet, .account-menu.is-bottom-sheet) {
    animation-duration: var(--motion-reduced) !important;
    animation-iteration-count: 1 !important;
    transform: none !important;
  }

  .r2-first-paint :where(
    .landing-view:not([hidden]) .landing-hero .editorial-kicker,
    .landing-view:not([hidden]) .landing-title span,
    .landing-view:not([hidden]) .landing-lede,
    .landing-view:not([hidden]) .hero-composer,
    .landing-view:not([hidden]) .composer-caption,
    .landing-view:not([hidden]) .product-reveal
  ) {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .landing-view::after { display: none; }
}

@media (forced-colors: active) {
  :root {
    --color-focus: Highlight;
    --color-border-subtle: CanvasText;
    --color-border-strong: CanvasText;
  }

  :where(button, input, select, textarea, summary) { border-color: ButtonText; }

  :where(.hero-composer, .home-composer, .professor-composer):has(textarea:focus-visible) {
    outline-color: Highlight;
  }
}

/* UI-801.4 Stage 2 — Living Atlas public, authentication, and demo surfaces. */
:where(.landing-view, .auth-view, .demo-view) {
  min-width: 0;
  color: var(--color-text-primary);
  background: var(--color-canvas);
}

:where(.landing-view, .auth-view, .demo-view) :where(h1, h2, h3, p) {
  overflow-wrap: anywhere;
}

:where(.landing-view, .auth-view, .demo-view) :where(a, button, input, textarea, select):focus-visible,
:where(.landing-view, .auth-view, .demo-view) [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: var(--space-1);
}

:where(.landing-view, .auth-view, .demo-view) :where(.primary-button, .secondary-button) {
  min-height: var(--touch-target-min);
  border-radius: var(--radius-control);
  box-shadow: none;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

:where(.landing-view, .auth-view, .demo-view) .primary-button,
.landing-view .composer-send {
  border: var(--border-control);
  border-color: var(--color-primary);
  color: var(--color-surface-elevated);
  background: var(--color-primary);
  box-shadow: none;
}

:where(.landing-view, .auth-view, .demo-view) .primary-button:hover,
.landing-view .composer-send:hover {
  border-color: var(--color-primary-hover);
  color: var(--color-surface-elevated);
  background: var(--color-primary-hover);
}

:where(.landing-view, .auth-view, .demo-view) .primary-button:active,
.landing-view .composer-send:active {
  border-color: var(--color-primary-active);
  background: var(--color-primary-active);
  transform: none;
}

:where(.landing-view, .auth-view, .demo-view) .secondary-button {
  border: var(--border-control);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

:where(.landing-view, .auth-view, .demo-view) .secondary-button:hover {
  border-color: var(--color-border-strong);
  color: var(--color-primary-hover);
  background: var(--color-hover);
}

.site-header:has(#public-navigation:not([hidden])) {
  border-bottom: var(--border-hairline);
  background: var(--color-canvas);
  box-shadow: none;
}

.public-navigation a[data-scroll-target]::after {
  background: var(--color-primary);
}

:where(.public-navigation, .public-auth-actions) .nav-join {
  border-color: var(--color-primary);
  color: var(--color-surface-elevated);
  background: var(--color-primary);
  box-shadow: none;
}

:where(.public-navigation, .public-auth-actions) .nav-join:hover {
  border-color: var(--color-primary-hover);
  color: var(--color-surface-elevated);
  background: var(--color-primary-hover);
}

/* Landing */
.landing-view {
  max-width: none;
  padding: 0;
  overflow: clip;
}

.landing-view::after,
.landing-hero::before,
.landing-view .hero-composer::before {
  display: none;
  content: none;
}

.landing-hero {
  display: grid;
  width: min(calc(100% - (var(--space-5) * 2)), 88rem);
  min-height: min(48rem, calc(100svh - var(--layout-header-height)));
  margin: var(--space-4) auto 0;
  padding:
    clamp(5rem, 11vh, 8rem)
    var(--layout-page-inline-end)
    clamp(7rem, 15vh, 11rem)
    var(--layout-page-inline-start);
  overflow: clip;
  border-radius: calc(var(--radius-frame) + var(--space-2));
  align-content: center;
  justify-items: center;
  text-align: center;
  background-color: var(--color-surface);
  background-image:
    radial-gradient(circle at 36% 52%, color-mix(in srgb, var(--color-warning) 11%, transparent) 0, transparent 46%),
    radial-gradient(circle at 74% 30%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0, transparent 42%);
  box-shadow: 0 1.5rem 4rem rgb(16 24 32 / 7%);
}

.landing-hero-copy {
  display: grid;
  width: min(100%, 62rem);
  min-width: 0;
  justify-items: center;
}

.landing-hero-actions,
.demo-invitation-actions,
.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  align-items: center;
}

.final-cta-actions > .primary-button,
.final-cta-actions > .secondary-button {
  display: inline-flex;
  min-height: var(--touch-target-min);
  margin-top: 0;
  border-width: 1px;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-decoration: none;
}

.landing-announcement {
  display: inline-flex;
  min-height: var(--touch-target-min);
  margin: 0 0 var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: var(--border-control);
  border-radius: var(--radius-pill);
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-surface-elevated) 82%, transparent);
  font-size: var(--type-sm);
  line-height: 1.4;
  text-decoration: none;
  backdrop-filter: blur(0.5rem);
}

.landing-announcement strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.landing-announcement svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.landing-announcement:hover {
  border-color: var(--color-border-strong);
  color: var(--color-primary-hover);
  background: var(--color-surface-elevated);
}

.landing-announcement:hover svg {
  transform: translateX(var(--space-1));
}

.landing-title {
  max-width: 18ch;
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(3.5rem, 6.4vw, 5.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1.04;
  letter-spacing: -0.04em;
  word-break: auto-phrase;
  text-wrap: balance;
}

.landing-title span {
  display: block;
  color: inherit;
}

.landing-lede {
  max-width: 68ch;
  margin: var(--space-6) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-lg);
  line-height: var(--leading-reading);
  text-wrap: pretty;
}

.landing-view .hero-composer {
  width: min(100%, 49rem);
  margin: clamp(var(--space-8), 7vw, 6rem) 0 0;
  border: var(--border-control);
  border-radius: var(--radius-surface);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-control);
}

.landing-view .hero-composer:has(textarea:focus-visible) {
  border-color: var(--color-focus);
  outline: 3px solid var(--color-focus);
  outline-offset: var(--space-1);
  box-shadow: none;
}

.landing-view .hero-composer textarea {
  color: var(--color-text-primary);
  background: transparent;
}

.landing-view .hero-composer textarea::placeholder {
  color: var(--color-text-muted);
}

.landing-view .composer-caption {
  max-width: 61ch;
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--type-sm);
  text-align: start;
}

.landing-view .composer-caption--concise {
  max-width: 36rem;
  color: var(--color-text-secondary);
}

.landing-positioning {
  width: min(100%, calc(var(--layout-reading-max) + 32rem));
  margin-inline: auto;
  padding:
    clamp(var(--space-8), 8vw, 8rem)
    var(--layout-page-inline-end)
    clamp(var(--space-8), 8vw, 8rem)
    var(--layout-page-inline-start);
  border-top: 0;
  background: var(--color-canvas);
}

.landing-positioning > h2 {
  max-width: 24ch;
  margin: 0 0 var(--space-7);
  color: var(--color-text-primary);
  font-size: var(--type-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.landing-knowledge-triad {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 0.8fr));
  gap: var(--space-6);
}

.landing-knowledge-triad article {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

.landing-knowledge-triad article.is-leading {
  border-top: var(--border-active);
}

.landing-knowledge-triad h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
}

.landing-knowledge-triad p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-reading);
}

.product-reveal {
  display: grid;
  grid-template-columns: minmax(12rem, 0.27fr) minmax(0, 1fr);
  width: min(calc(100% - var(--layout-page-inline-start) - var(--layout-page-inline-end)), 76rem);
  min-height: 38rem;
  margin: 0 auto clamp(var(--space-8), 9vw, 9rem);
  overflow: hidden;
  border: var(--border-hairline);
  border-radius: var(--radius-frame);
  background: var(--color-surface);
  box-shadow: none;
}

.product-reveal .preview-sidebar {
  min-width: 0;
  padding: var(--space-6) var(--space-4);
  border-right: var(--border-hairline);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
}

.product-reveal .preview-brand {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.product-reveal .preview-nav-item {
  border: var(--border-control);
  border-color: transparent;
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
}

.product-reveal .preview-nav-item.is-active {
  border-color: var(--color-border-subtle);
  color: var(--color-primary);
  background: var(--color-selected);
}

.product-reveal .preview-reading {
  min-width: 0;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.preview-demo-label,
.auth-demo-label,
.demo-view .demo-label,
.demo-invitation > .demo-label {
  display: inline-flex;
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border: var(--border-control);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  background: var(--color-selected);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-reveal .preview-professor {
  max-width: 48rem;
  margin-inline: auto;
}

.product-reveal .preview-question {
  margin-block: var(--space-5) var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: var(--border-control);
  border-radius: var(--radius-surface);
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

.product-reveal :where(.preview-answer-section, .preview-composer) {
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.product-reveal .evidence-rail {
  border-left: var(--border-active);
  border-left-color: var(--color-primary);
  color: var(--color-text-secondary);
  background: var(--color-selected);
}

.landing-narrative,
.landing-teaching-loop,
.demo-invitation,
.landing-pricing,
.final-composer {
  width: min(100%, calc(var(--layout-reading-max) + 32rem));
  margin-inline: auto;
  padding:
    clamp(var(--space-8), 8vw, 8rem)
    var(--layout-page-inline-end)
    clamp(var(--space-8), 8vw, 8rem)
    var(--layout-page-inline-start);
  border-top: var(--border-hairline);
  color: var(--color-text-primary);
  background: var(--color-canvas);
}

.landing-narrative {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(20rem, 0.38fr);
  gap: clamp(var(--space-8), 10vw, 10rem);
  align-items: start;
}

.landing-view .narrative-heading h2,
.landing-view .teaching-loop-intro h2,
.landing-view .section-intro h2,
.demo-invitation h2,
.final-composer h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--type-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.demo-invitation p,
.final-composer p {
  color: var(--color-text-secondary);
  line-height: var(--leading-reading);
}

.quiet-definition-list {
  display: grid;
  margin: 0;
  border-top: var(--border-hairline);
}

.quiet-definition-list > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.35fr) minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: var(--border-hairline);
}

.quiet-definition-list dt {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.quiet-definition-list dd {
  margin: 0;
  color: var(--color-text-secondary);
}

.landing-teaching-loop {
  display: grid;
  grid-template-columns: minmax(14rem, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(var(--space-8), 9vw, 9rem);
  align-items: start;
  background: var(--color-surface-muted);
}

.teaching-loop-intro {
  position: sticky;
  top: calc(var(--layout-header-height) + var(--space-6));
  min-width: 0;
}

.teaching-loop-steps {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-top: var(--border-hairline);
  list-style: none;
}

.teaching-loop-steps li {
  display: grid;
  grid-template-columns: var(--space-7) minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: var(--border-hairline);
}

.teaching-loop-steps li > span {
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
}

.teaching-loop-steps h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--type-lg);
  font-weight: var(--weight-semibold);
}

.teaching-loop-steps p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-reading);
}

.demo-invitation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: end;
  border-bottom: var(--border-hairline);
}

.demo-view .demo-persona {
  border: var(--border-control);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  background: var(--color-selected);
}

.landing-pricing .section-intro {
  max-width: var(--layout-reading-max);
}

.final-composer {
  display: grid;
  justify-items: start;
  text-align: start;
}

/* Authentication */
.auth-view {
  display: grid;
  grid-template-columns: minmax(23rem, 0.78fr) minmax(0, 1.22fr);
  min-height: 100svh;
  padding: 0;
}

.auth-narrative {
  order: 2;
  display: grid;
  min-width: 0;
  padding: clamp(var(--space-7), 6vw, 6rem);
  border-left: var(--border-hairline);
  align-content: space-between;
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-surface-muted) 72%, var(--color-canvas));
}

.auth-brand,
.auth-form-brand {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

.auth-product-fragment {
  width: min(100%, 45rem);
  margin-block: clamp(var(--space-7), 8vh, 6rem);
}

.auth-story-title {
  max-width: 13ch;
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(2rem, 4vw, 4.25rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.auth-mini-window {
  margin-top: var(--space-7);
  overflow: hidden;
  border: var(--border-hairline);
  border-radius: var(--radius-frame);
  color: var(--color-text-primary);
  background: var(--color-surface);
  box-shadow: none;
}

.auth-mini-window :where(.auth-mini-question, .auth-mini-answer, .auth-mini-sources) {
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.auth-mini-window .auth-mini-question {
  border-radius: var(--radius-surface);
  padding: var(--space-5);
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

.auth-mini-window .auth-mini-question > span {
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-mini-window .auth-mini-question p {
  margin: var(--space-2) 0 0;
  line-height: var(--leading-reading);
}

.auth-mini-answer > header {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
  align-items: center;
}

.auth-story-answer-title {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.auth-mini-answer .evidence-rail {
  margin: var(--space-5);
  padding-left: var(--space-5);
  border-left: var(--border-active);
}

.auth-mini-answer .evidence-rail section + section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
}

.auth-story-section-title {
  color: var(--color-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
}

.auth-mini-answer p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-reading);
}

.auth-mini-window .auth-mini-sources {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

.auth-mini-window .auth-mini-sources summary {
  color: var(--color-primary);
  cursor: pointer;
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
}

.auth-mini-actions,
.auth-knowledge-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.auth-mini-actions button,
.auth-knowledge-labels span {
  padding: var(--space-1) var(--space-3);
  border: var(--border-control);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  font-size: var(--type-xs);
}

.auth-boundary {
  max-width: var(--layout-reading-max);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
  color: var(--color-text-secondary);
  font-size: var(--type-sm);
}

.auth-form-panel {
  order: 1;
  display: grid;
  min-width: 0;
  padding:
    max(var(--space-7), env(safe-area-inset-top))
    max(var(--space-6), env(safe-area-inset-right))
    max(var(--space-7), env(safe-area-inset-bottom))
    max(var(--space-6), env(safe-area-inset-left));
  align-items: center;
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.auth-form-inner {
  width: min(100%, 27rem);
  margin-inline: auto;
}

.auth-view .view-heading {
  margin-block: var(--space-7) var(--space-6);
}

.auth-view .view-heading h1 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--type-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
}

.auth-view .view-heading p,
.auth-view .patient-identifier-notice,
.auth-view .view-switch,
.auth-view .auth-return-links {
  color: var(--color-text-secondary);
}

.auth-view .patient-identifier-notice {
  border: var(--border-control);
  border-left: var(--border-active);
  border-left-color: var(--color-warning);
  border-radius: var(--radius-control);
  background: var(--color-hover);
}

.auth-form :where(input, select) {
  min-height: var(--touch-target-min);
  border: var(--border-control);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  box-shadow: none;
}

.auth-form :where(input, select):hover {
  border-color: var(--color-border-strong);
}

.auth-form :where(input, select):focus-visible {
  border-color: var(--color-focus);
  box-shadow: none;
}

.auth-form .role-options {
  min-width: 0;
}

.auth-form .role-option {
  border: var(--border-control);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.auth-form .role-option:has(input:checked) {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  background: var(--color-selected);
}

.auth-view .error-summary {
  border: var(--border-control);
  border-left: var(--border-active);
  border-left-color: var(--color-error);
  border-radius: var(--radius-control);
  color: var(--color-error);
  background: var(--color-surface);
}

.auth-view :where(.field-error, [aria-invalid="true"] + .field-error) {
  color: var(--color-error);
}

.auth-view .field-help {
  color: var(--color-text-muted);
  font-size: var(--type-sm);
  line-height: var(--leading-base);
}

.auth-view .password-control {
  min-width: 0;
}

/* Guided demo */
.demo-view {
  width: min(100%, calc(var(--layout-reading-max) + 32rem));
  max-width: none;
  margin-inline: auto;
  padding:
    clamp(var(--space-7), 6vw, 6rem)
    var(--layout-page-inline-end)
    clamp(var(--space-8), 8vw, 8rem)
    var(--layout-page-inline-start);
}

.demo-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: var(--border-hairline);
  align-items: end;
}

.demo-header h1 {
  max-width: 15ch;
  margin: var(--space-3) 0 0;
  color: var(--color-text-primary);
  font-size: var(--type-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

.demo-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(7rem, 1fr));
  gap: 0;
  margin-block: var(--space-7) var(--space-8);
  overflow-x: auto;
  border-bottom: var(--border-hairline);
  scrollbar-width: thin;
}

.demo-steps button {
  min-width: 0;
  padding: var(--space-4) var(--space-3);
  border: 0;
  border-bottom: var(--border-active);
  border-bottom-color: transparent;
  border-radius: 0;
  color: var(--color-text-muted);
  background: transparent;
  text-align: start;
}

.demo-steps button[data-step-state="completed"] {
  color: var(--color-text-secondary);
}

.demo-steps button[data-step-state="completed"]::before {
  margin-right: var(--space-2);
  content: "✓";
  font-weight: var(--weight-bold);
}

.demo-steps button[data-step-state="current"] {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-selected);
  font-weight: var(--weight-bold);
}

.demo-steps button[data-step-state="current"]::before {
  margin-right: var(--space-2);
  content: "→";
}

.demo-steps button[data-step-state="upcoming"] {
  border-bottom-style: dotted;
}

.demo-scene {
  display: grid;
  grid-template-columns: minmax(15rem, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(var(--space-7), 7vw, 7rem);
  min-width: 0;
  align-items: start;
}

.demo-scene-copy {
  position: sticky;
  top: calc(var(--layout-header-height) + var(--space-6));
  min-width: 0;
}

.demo-scene-copy h2 {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--color-text-primary);
  font-size: var(--type-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.demo-scene-copy p {
  color: var(--color-text-secondary);
  line-height: var(--leading-reading);
}

.demo-product-panel {
  min-width: 0;
  overflow: hidden;
  border: var(--border-hairline);
  border-radius: var(--radius-frame);
  color: var(--color-text-primary);
  background: var(--color-surface);
  box-shadow: none;
}

.demo-product-panel :where(
  .demo-question,
  .demo-answer-document,
  .demo-answer-section,
  .demo-source,
  .demo-quiz,
  .demo-feedback,
  .demo-status-list,
  .demo-path,
  .demo-learning-path,
  .demo-teacher-grid
) {
  min-width: 0;
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.demo-product-panel .demo-question {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-hairline);
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

.demo-answer-document,
.demo-quiz,
.demo-status-list,
.demo-path,
.demo-learning-path,
.demo-teacher-grid {
  margin: 0;
  padding: var(--space-6);
}

.demo-answer-heading {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-hairline);
  align-items: center;
}

.demo-answer-section {
  padding-block: var(--space-5);
  border-bottom: var(--border-hairline);
}

.demo-answer-section h3,
.demo-teacher-grid h3,
.demo-product-panel > h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--type-lg);
  font-weight: var(--weight-semibold);
}

.demo-answer-section p,
.demo-teacher-grid p,
.demo-path p {
  color: var(--color-text-secondary);
  line-height: var(--leading-reading);
}

.demo-product-panel .demo-source {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: var(--border-control);
  border-radius: var(--radius-control);
  color: var(--color-primary);
  background: var(--color-selected);
}

.demo-source summary {
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

.demo-quiz {
  border: 0;
}

.demo-quiz legend {
  margin-bottom: var(--space-5);
  color: var(--color-text-primary);
  font-size: var(--type-lg);
  font-weight: var(--weight-semibold);
}

.demo-choice {
  display: block;
  width: 100%;
  min-height: var(--touch-target-min);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-control);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  background: var(--color-surface);
  text-align: start;
}

.demo-choice:not(:disabled):hover {
  border-color: var(--color-primary);
  background: var(--color-hover);
}

.demo-feedback {
  margin: 0;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: var(--border-hairline);
  color: var(--color-text-secondary);
}

.demo-status-list {
  display: grid;
  gap: var(--space-3);
}

.demo-status-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline);
}

.demo-status-list dd {
  margin: 0;
  font-weight: var(--weight-semibold);
}

.demo-status-list dd::before {
  margin-right: var(--space-2);
  content: "—";
}

.demo-status-list dd.is-strong::before {
  content: "✓";
}

.demo-status-list dd.needs-attention::before {
  content: "!";
}

.demo-learning-path {
  display: grid;
  gap: var(--space-3);
  list-style-position: inside;
}

.demo-learning-path li {
  padding: var(--space-4);
  border: var(--border-control);
  border-radius: var(--radius-control);
}

.demo-learning-path .is-inserted {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  background: var(--color-selected);
  border-left: var(--border-active);
}

.demo-learning-path .is-inserted::marker {
  content: "+  ";
  font-weight: var(--weight-bold);
}

.demo-learning-path .is-deemphasized {
  border-style: dashed;
}

.demo-teacher-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
}

.demo-teacher-grid section {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

.demo-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  justify-content: space-between;
}

.demo-navigation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

html[data-theme="dark"] :where(.landing-view, .auth-view, .demo-view) .primary-button,
html[data-theme="dark"] .landing-view .composer-send,
html[data-theme="dark"] :where(.public-navigation, .public-auth-actions) .nav-join {
  border-color: var(--color-primary);
  color: var(--color-canvas);
  background: var(--color-primary);
  box-shadow: none;
}

html[data-theme="dark"] .landing-hero,
html[data-theme="dark"] .auth-narrative,
html[data-theme="dark"] .auth-mini-window {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  background-image: none;
}

html[data-theme="dark"] .landing-hero {
  background-image:
    radial-gradient(circle at 68% 24%, rgb(107 173 153 / 16%) 0, transparent 42%),
    linear-gradient(var(--color-canvas), var(--color-canvas));
}

html[data-theme="dark"] .auth-mini-window {
  background: var(--color-surface);
}

@media (max-width: 64rem) {
  .landing-narrative {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .auth-view {
    grid-template-columns: minmax(22rem, 0.82fr) minmax(0, 1.18fr);
  }

  .demo-scene {
    grid-template-columns: minmax(13rem, 0.34fr) minmax(0, 0.66fr);
    gap: var(--space-7);
  }

  .landing-knowledge-triad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-knowledge-triad article.is-leading {
    grid-column: 1 / -1;
  }
}

@media (max-width: 48rem) {
  .landing-hero {
    min-height: min(43rem, calc(100svh - var(--layout-header-height)));
    padding-block: clamp(var(--space-8), 12vh, 6rem) clamp(5rem, 15vh, 8rem);
  }

  .product-reveal {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .product-reveal .preview-sidebar {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    border-right: 0;
    border-bottom: var(--border-hairline);
  }

  .product-reveal .preview-brand {
    flex: 0 0 100%;
  }

  .product-reveal .preview-nav-item {
    flex: 0 0 auto;
  }

  .demo-invitation,
  .quiet-definition-list > div,
  .demo-header,
  .demo-scene,
  .landing-teaching-loop {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-invitation {
    align-items: start;
  }

  .auth-view {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-view .auth-narrative {
    display: none;
  }

  .auth-form-panel {
    min-height: 100svh;
    padding-inline:
      max(var(--space-5), env(safe-area-inset-left))
      max(var(--space-5), env(safe-area-inset-right));
  }

  .demo-header {
    align-items: start;
  }

  .demo-actions {
    justify-content: flex-start;
  }

  .demo-scene-copy {
    position: static;
  }

  .teaching-loop-intro {
    position: static;
  }

  .demo-teacher-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 35rem) {
  .landing-hero,
  .landing-narrative,
  .landing-teaching-loop,
  .demo-invitation,
  .landing-pricing,
  .final-composer,
  .demo-view {
    padding-inline:
      max(var(--space-4), env(safe-area-inset-left))
      max(var(--space-4), env(safe-area-inset-right));
  }

  .landing-hero {
    width: calc(100% - (var(--space-2) * 2));
    margin-top: var(--space-2);
    border-radius: var(--radius-frame);
  }

  .product-reveal {
    width: calc(100% - (var(--space-4) * 2));
    border-radius: var(--radius-surface);
  }

  .landing-title,
  .demo-header h1 {
    font-size: clamp(2.25rem, 10vw, 2.5rem);
  }

  .landing-title {
    font-size: clamp(2.125rem, 9.2vw, 2.25rem);
    text-wrap: pretty;
  }

  .professor-header > div:last-child > p:last-child { max-width: 20em; }

  .landing-announcement {
    max-width: 100%;
    padding-inline: var(--space-3);
    font-size: var(--type-xs);
  }

  .landing-announcement span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .landing-knowledge-triad {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-knowledge-triad article.is-leading {
    grid-column: auto;
  }

  .landing-view .hero-composer,
  .auth-form-inner,
  .auth-form :where(input, select),
  .demo-product-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .demo-actions,
  .demo-navigation {
    align-items: stretch;
  }

  .landing-hero-actions,
  .demo-invitation-actions,
  .final-cta-actions,
  .demo-navigation-actions {
    width: 100%;
    align-items: stretch;
  }

  :where(.landing-hero-actions, .demo-invitation-actions, .final-cta-actions, .demo-navigation-actions) :where(a, button),
  .demo-actions :where(a, button),
  .demo-navigation button {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.landing-view, .auth-view, .demo-view) *,
  :where(.landing-view, .auth-view, .demo-view) *::before,
  :where(.landing-view, .auth-view, .demo-view) *::after {
    scroll-behavior: auto !important;
    animation-duration: var(--motion-reduced) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--motion-reduced) !important;
  }

  :where(.landing-view, .auth-view, .demo-view) :where(button, a) {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  :where(.landing-view, .auth-view, .demo-view) :where(
    .hero-composer,
    .product-reveal,
    .auth-mini-window,
    .auth-form input,
    .auth-form select,
    .demo-product-panel
  ) {
    border-color: CanvasText;
    box-shadow: none;
  }

  :where(.landing-view, .auth-view, .demo-view) :where(a, button, input, textarea, select):focus-visible {
    outline-color: Highlight;
  }
}

/* UI-801.4 Stage 3 — authenticated Product Shell authority. */
.site-shell:has(.app-navigation:not([hidden])) .main-content > .view:not([hidden]) {
  width: min(100%, calc(var(--layout-reading-max) + 32rem));
  margin-inline: auto;
}

.app-navigation {
  border-right: var(--border-hairline);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
}

.app-navigation :where(.nav-primary, .nav-secondary) button {
  gap: var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
}

.app-navigation :where(.nav-primary, .nav-secondary) button:hover {
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.app-navigation :where(.nav-primary, .nav-secondary) button[aria-current="page"] {
  border-left: var(--border-active);
  color: var(--color-text-primary);
  background: var(--color-selected);
}

.navigation-close { display: none !important; }

.account-menu {
  z-index: var(--layer-popover);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-popup);
}

.account-menu-scrim { z-index: var(--layer-dialog); }

.navigation-scrim { z-index: var(--layer-scrim); }

@media (min-width: 64.01rem) {
  body:not(.sidebar-collapsed) { --sidebar-width: var(--sidebar-width-open); }
  body.sidebar-collapsed { --sidebar-width: var(--sidebar-width-collapsed); }

  .site-shell:has(.app-navigation:not([hidden])) {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    transition: grid-template-columns var(--motion-sidebar) var(--ease-panel);
  }

  .site-shell:has(.app-navigation:not([hidden])) .app-navigation {
    width: var(--sidebar-width);
    transition:
      width var(--motion-sidebar) var(--ease-panel),
      padding var(--motion-sidebar) var(--ease-panel);
  }
}

@media (max-width: 64rem) {
  body.drawer-modal-open { overflow: hidden; }

  .app-navigation:not([hidden]) {
    flex-wrap: nowrap;
    z-index: var(--layer-nav);
    transition: transform var(--motion-sidebar) var(--ease-panel);
  }

  /* the old row basis must not become a vertical drawer item height */
  .app-navigation :where(.nav-primary, .nav-secondary) button,
  .app-navigation .nav-user-button {
    flex: 0 0 auto;
  }

  .app-navigation > :where(.sidebar-topbar, .nav-primary, .nav-secondary, .nav-account) {
    flex-shrink: 0;
  }

  .app-navigation button[data-sidebar-tooltip]::after { display: none; }

  .navigation-close { display: grid !important; }
}

@media (max-width: 48rem) {
  body.account-sheet-open { overflow: hidden; }

  .account-menu.is-bottom-sheet {
    z-index: var(--layer-sheet);
    padding-bottom: max(var(--space-3), var(--safe-area-block-end));
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-shell:has(.app-navigation:not([hidden])),
  .site-shell:has(.app-navigation:not([hidden])) .app-navigation,
  .sidebar-icon {
    transition: none !important;
  }

  .navigation-scrim,
  .account-menu-scrim {
    transition: opacity var(--motion-reduced) linear !important;
  }
}

/* UI-801.4 Stage 4 — Ask, Composer, Answer, Sources, and Boundary authority. */
.chat-workspace {
  min-height: calc(100dvh - 2 * var(--space-4));
  display: flex;
  flex-direction: column;
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-surface) 74%, var(--color-canvas));
  border: 0;
  box-shadow: none;
}

.professor-header,
.chat-boundary-notices,
.chat-conversation,
.chat-answer-card,
.chat-progress {
  width: min(100%, var(--layout-reading-max));
  margin-inline: auto;
}

.professor-header { border-bottom: 0; }

body:has(.chat-workspace:not([hidden])) .app-navigation {
  border-right-color: transparent;
}

body:has(.chat-workspace:not([hidden])) .app-navigation :where(.nav-secondary, .nav-account) {
  border-top-color: transparent;
}

body:has(.chat-workspace:not([hidden])) .app-navigation
:where(.nav-primary, .nav-secondary) button[aria-current="page"] {
  border-color: transparent;
  border-left: 0;
}

.professor-header > div:last-child > p:last-child {
  word-break: auto-phrase;
  text-wrap: pretty;
}

.chat-boundary-notices {
  color: var(--color-text-secondary);
  border-bottom: 0;
}

.chat-empty { color: var(--color-text-secondary); }

.chat-conversation { flex: 1 1 auto; }

.chat-empty h2,
.chat-answer-heading h2 { color: var(--color-text-primary); }

.chat-answer-card { container-type: inline-size; }

.student-question {
  margin-inline-start: auto;
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  border: 0;
  box-shadow: none;
}

.answer-document {
  padding: var(--space-5) var(--space-page-inline);
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.answer-document > .evidence-rail {
  inset: var(--space-6) auto auto var(--space-3);
  width: var(--space-2);
  height: var(--space-2);
  color: var(--color-text-secondary);
  background: transparent;
}

.answer-document > .evidence-rail > span {
  inset: 0;
  width: var(--space-2);
  height: var(--space-2);
  min-height: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.answer-selection-summary {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

.chat-answer-content {
  max-width: var(--layout-reading-max);
  color: var(--color-text-primary);
}

.chat-sources {
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.sources-toggle {
  min-height: var(--touch-target-min);
  padding-inline: var(--space-2);
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
}

.sources-toggle:hover {
  color: var(--color-text-primary);
  background: var(--color-hover);
}

.composer-dock {
  position: sticky;
  z-index: var(--layer-content);
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  width: min(100%, var(--layout-reading-max));
  margin-top: auto;
  margin-inline: auto;
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.composer-actions {
  position: static;
  width: 100%;
  margin: 0;
  padding: var(--space-1) 0;
  background: transparent;
}

.composer-actions button {
  min-height: var(--touch-target-min);
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  border: 0;
  box-shadow: none;
}

.composer-actions button[aria-busy="true"] { border-color: var(--color-focus); }

.professor-composer {
  position: relative;
  bottom: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border-color: transparent;
  border-radius: calc(var(--radius-surface) + var(--space-2));
  box-shadow: var(--shadow-surface);
}

.professor-composer::before { background: transparent; }

.professor-composer textarea {
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
}

.composer-capability-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

.composer-chip,
.composer-utility-button,
.composer-send {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.composer-popover {
  z-index: var(--layer-popover);
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border-color: transparent;
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-popup);
  transition: opacity var(--motion-standard) var(--ease-standard);
}

.boundary-guide { color: var(--color-text-primary); }

.boundary-index [role="tab"] {
  min-height: var(--touch-target-min);
  color: var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}

.boundary-index [role="tab"][aria-selected="true"] {
  color: var(--color-text-primary);
  background: var(--color-selected);
  border-color: var(--color-focus);
}

.boundary-panel,
.boundary-example {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
}

:where(.composer-actions button, .professor-composer textarea, .composer-chip, .composer-utility-button, .composer-send, .sources-toggle, .boundary-index [role="tab"]):focus-visible {
  outline: var(--border-active);
  outline-color: var(--color-focus);
  outline-offset: var(--space-1);
}

@media (max-width: 48rem) {
  body.composer-sheet-open { overflow: hidden; }

  .chat-workspace { padding-inline: var(--space-page-inline); }

  .composer-actions {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .composer-popover.is-bottom-sheet {
    z-index: var(--layer-sheet);
    color: var(--color-text-primary);
    background: var(--color-surface-elevated);
    border: var(--border-control);
  }
}

@media (max-width: 20rem) {
  .chat-workspace,
  .answer-document { padding-inline: var(--space-2); }

  .student-question { max-width: 100%; }
  .composer-selectors { flex-wrap: wrap; }
}

@media (max-height: 30rem), (orientation: landscape) and (max-width: 48rem) {
  .composer-dock {
    position: relative;
    bottom: auto;
    z-index: var(--layer-content);
  }
}

@media (prefers-reduced-motion: reduce) {
  .composer-dock,
  .composer-popover,
  .composer-popover-scrim,
  .answer-document {
    transition-duration: var(--motion-reduced) !important;
    animation-duration: var(--motion-reduced) !important;
  }
}

@media (forced-colors: active) {
  .answer-document,
  .professor-composer,
  .composer-popover,
  .boundary-panel,
  .boundary-example { border: var(--border-control); }

  .composer-actions button[aria-busy="true"],
  .boundary-index [role="tab"][aria-selected="true"] {
    outline: var(--border-active);
    outline-color: var(--color-focus);
  }
}

/* UI-801.4 Stage 5 — truthful product data surfaces authority. */
.product-surface {
  color: var(--color-text-primary);
  background: transparent;
}

:where(.product-home, .pricing-view, .learning-card, .knowledge-card, .teacher-card) {
  width: min(100%, calc(var(--layout-reading-max) + 12rem));
  margin-inline: auto;
}

:where(.product-home, .pricing-view, .learning-card, .knowledge-card, .teacher-card)
:where(.view-heading, .page-heading, .home-intro) {
  max-width: var(--layout-reading-max);
}

.product-surface :where(.view-heading, .page-heading, .home-intro) > p:not(.eyebrow, .editorial-kicker, .surface-boundary-note) {
  max-width: 46rem;
  color: var(--color-text-secondary);
}

.surface-boundary-note {
  width: fit-content;
  max-width: 46rem;
  margin: var(--space-4) 0 0;
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.pricing-view {
  padding:
    clamp(var(--space-7), 8vw, 7rem)
    var(--layout-page-inline-end)
    var(--space-8)
    var(--layout-page-inline-start);
}

.pricing-view .plans-catalog,
.product-home .plans-catalog {
  border-block: var(--border-control);
}

.plan-row {
  color: var(--color-text-primary);
  background: transparent;
  border-color: var(--color-border-subtle);
}

.plan-row[data-plan-id="free"] {
  border-radius: 0;
  padding-inline: 0;
  background: transparent;
}

.plan-row[data-current="true"] {
  background: var(--color-selected);
  box-shadow: inset var(--space-1) 0 0 var(--color-focus);
}

.product-home .plans-catalog { border-block: 0; }

.product-home .plan-row,
.product-home .plan-row[data-plan-id="free"] {
  margin-block: var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-frame);
  padding: var(--space-4);
  background: transparent;
  box-shadow: none;
}

.product-home .plan-row[data-current="true"] {
  border-color: var(--border-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow-control);
}

.plan-row :where(.plan-price, h3) { color: var(--color-text-primary); }
.plan-row :where(.plan-quota, ul, small) { color: var(--color-text-secondary); }
.plan-row button { min-height: var(--touch-target-min); }

.catalog-error {
  border-block: var(--border-hairline);
  color: var(--color-text-secondary);
}

.product-home {
  padding:
    clamp(var(--space-7), 7vw, 6rem)
    var(--layout-page-inline-end)
    var(--space-8)
    var(--layout-page-inline-start);
}

.home-composer {
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border: var(--border-control);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-control);
}

.home-composer textarea {
  color: var(--color-text-primary);
  background: transparent;
}

.home-learning,
.account-plan,
.home-destinations,
.learning-subnav {
  border-color: var(--color-border-strong);
}

.home-statistics,
.statistics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
}

.home-statistics {
  gap: var(--space-2);
  margin-block: var(--space-6);
  border: 0;
  border-radius: var(--radius-frame);
  padding: var(--space-2);
  background: var(--surface-subtle);
  box-shadow: var(--shadow-control);
}

.home-statistics > div,
.home-statistics > div:first-child {
  min-width: 0;
  border: 0;
  border-radius: var(--radius-surface);
  padding: var(--space-4);
  background: var(--surface-raised);
}

.statistics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

:where(.home-statistics, .statistics-grid) > div {
  min-width: 0;
  border-color: var(--color-border-subtle);
  background: transparent;
}

:where(.home-statistics, .statistics-grid) dt { color: var(--color-text-secondary); }
:where(.home-statistics, .statistics-grid) dd { color: var(--color-text-primary); }

.home-destinations button {
  padding-inline: var(--space-4);
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
  background: transparent;
  transition:
    color var(--motion-standard) var(--ease-standard),
    background-color var(--motion-standard) var(--ease-standard);
}

.home-destinations button:hover {
  padding-inline: var(--space-4);
  background: var(--color-surface-muted);
}

.home-destinations button :where(span, small) { color: var(--color-text-secondary); }

.home-learning .text-button {
  min-height: var(--touch-target-min);
  border-radius: var(--radius-control);
  padding-inline: var(--space-3);
  text-decoration: none;
}

.home-learning .text-button:hover { background: var(--color-surface-muted); }

.learning-card,
.knowledge-card,
.teacher-card {
  padding:
    clamp(var(--space-6), 6vw, 5rem)
    var(--layout-page-inline-end)
    var(--space-8)
    var(--layout-page-inline-start);
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-surface);
  box-shadow: none;
}

.learning-subnav {
  gap: var(--space-2);
  border-top: var(--border-hairline);
}

.learning-subnav button {
  min-height: var(--touch-target-min);
  border: var(--border-hairline);
  border-top: 0;
  color: var(--color-text-secondary);
  background: transparent;
}

.learning-subnav button:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

.product-surface :where(.results-section, .material-upload-form, .quiz-form) {
  margin-top: var(--space-6);
}

.knowledge-form,
.teacher-card .material-upload-form,
.quiz-form {
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border: var(--border-control);
  border-radius: var(--radius-surface);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  box-shadow: var(--shadow-control);
}

.knowledge-form :where(input, button),
.teacher-card .material-upload-form :where(input, button),
.quiz-form :where(input, button) {
  min-height: var(--touch-target-min);
}

.product-surface :where(.results-section, .result-list) {
  color: var(--color-text-primary);
}

.product-surface .results-heading {
  border-bottom: var(--border-control);
  padding-bottom: var(--space-3);
}

.product-surface .result-list {
  gap: 0;
}

.product-surface .result-card {
  border: 0;
  border-bottom: var(--border-hairline);
  border-radius: 0;
  padding: var(--space-5) 0;
  color: var(--color-text-primary);
  background: transparent;
}

.product-surface .result-card:last-child { border-bottom: 0; }

.product-surface :where(.result-meta, .result-count, .activity-time, .field-help) {
  color: var(--color-text-secondary);
}

.product-surface .empty-state,
.account-plan-status,
.product-surface .chat-progress {
  color: var(--color-text-secondary);
}

.product-surface .empty-state {
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  padding: var(--space-5);
  background: var(--color-surface-muted);
}

.product-surface .error-summary {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  border: var(--border-control);
  border-color: var(--color-error);
}

.quiz-options {
  display: grid;
  gap: var(--space-2);
}

.quiz-option {
  min-height: var(--touch-target-min);
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.quiz-option:has(input:checked) {
  border-color: var(--color-focus);
  background: var(--color-selected);
}

.quiz-feedback {
  border: var(--border-control);
  border-radius: var(--radius-surface);
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

.quiz-feedback[data-kind="correct"] { border-color: var(--color-success); }
.quiz-feedback[data-kind="wrong"] { border-color: var(--color-warning); }

.pagination-controls {
  gap: var(--space-3);
  border-top: var(--border-hairline);
  padding-top: var(--space-4);
}

.pagination-controls button { min-height: var(--touch-target-min); }

.teacher-card .identity-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: var(--border-hairline);
}

.teacher-card .patient-identifier-notice {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  border: var(--border-control);
}

.material-status {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  border: var(--border-control);
}

.material-status[data-kind="ready"] {
  color: var(--color-success);
  background: var(--color-surface);
  border-color: var(--color-success);
}

.material-status[data-kind="pending"] {
  color: var(--color-warning);
  background: var(--color-surface);
  border-color: var(--color-warning);
}

.material-status[data-kind="failed"] {
  color: var(--color-error);
  background: var(--color-surface);
  border-color: var(--color-error);
}

.product-surface :where(a, button, input, textarea, select):focus-visible {
  outline: var(--border-active);
  outline-color: var(--color-focus);
  outline-offset: var(--space-1);
}

@media (max-width: 48rem) {
  :where(.product-home, .pricing-view, .learning-card, .knowledge-card, .teacher-card) {
    min-width: 0;
    max-width: 100%;
    padding:
      var(--space-6)
      max(var(--space-4), var(--safe-area-inline-end))
      var(--space-7)
      max(var(--space-4), var(--safe-area-inline-start));
  }

  .home-statistics,
  .statistics-grid,
  .teacher-card .identity-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-destinations button,
  .plan-row,
  .compact-plans .plan-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-row :where(h3, .plan-price, .plan-quota, ul, button) {
    grid-column: 1;
    grid-row: auto;
    margin: 0;
  }

  .plan-row button { width: 100%; }
  .learning-subnav { grid-template-columns: minmax(0, 1fr); }
  .knowledge-form { grid-template-columns: minmax(0, 1fr); }
  .knowledge-form .primary-button { width: 100%; }

  .quiz-controls,
  .pagination-controls {
    align-items: stretch;
  }
}

@media (max-width: 20rem) {
  :where(.product-home, .pricing-view, .learning-card, .knowledge-card, .teacher-card) {
    padding-inline: var(--space-3);
  }

  .surface-boundary-note,
  .product-surface .empty-state {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-surface *,
  .product-surface *::before,
  .product-surface *::after {
    animation-duration: var(--motion-reduced) !important;
    transition-duration: var(--motion-reduced) !important;
  }
}

@media (forced-colors: active) {
  :where(.home-composer, .knowledge-form, .quiz-form, .teacher-card .material-upload-form, .surface-boundary-note, .product-surface .empty-state, .quiz-option) {
    border: var(--border-control);
    box-shadow: none;
  }

  .quiz-option:has(input:checked),
  .plan-row[data-current="true"] {
    outline: var(--border-active);
    outline-color: var(--color-focus);
  }
}

/* UI-801 Human Visual refinement — native chat composer inspired by the approved compact input reference. */
.professor-composer {
  gap: var(--space-1);
  overflow: clip;
  border-radius: 30px;
  padding: var(--space-2);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-surface);
  transition:
    box-shadow var(--motion-standard) var(--ease-standard),
    transform var(--motion-standard) var(--ease-standard),
    background-color var(--motion-standard) var(--ease-standard);
}

.professor-composer[data-interaction="active"] {
  box-shadow: var(--shadow-popup);
  transform: translateY(-1px);
}

.professor-composer:has(textarea:focus-visible) {
  outline: 0;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-focus) 18%, transparent),
    var(--shadow-popup);
}

.professor-composer::before { display: none; }

.composer-input-row {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  gap: var(--space-2);
  border-radius: 24px;
  padding: var(--space-1);
  background: var(--color-surface-elevated);
}

.professor-composer textarea {
  min-height: var(--touch-target-min);
  padding: 0.7rem 0.75rem;
  line-height: 1.5;
}

.professor-composer textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.composer-help,
.professor-composer > .field-error {
  padding-inline: calc(var(--space-2) + var(--space-1));
}

.composer-toolbar {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-1) var(--space-1);
}

.composer-chip,
.composer-utility-button {
  border: 0;
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  box-shadow: none;
}

.composer-chip:hover:not(:disabled),
.composer-utility-button:hover:not(:disabled) {
  color: var(--color-text-primary);
  background: var(--color-selected);
}

.composer-chip[aria-expanded="true"],
.composer-utility-button[aria-expanded="true"] {
  color: var(--color-text-primary);
  background: var(--color-selected);
  box-shadow: inset 0 0 0 1px var(--color-focus);
}

.composer-send {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex-basis: var(--touch-target-min);
  color: var(--color-canvas);
  background: var(--color-text-primary);
  font-size: 1.15rem;
  font-weight: 650;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}

.composer-send:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.composer-send:active:not(:disabled) { transform: translateY(0) scale(0.96); }

.composer-send:disabled {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
}

html[data-theme="dark"] .professor-composer {
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-popup);
}

@media (max-width: 48rem) {
  .professor-composer {
    border-radius: 24px;
    padding: var(--space-1);
  }

  .composer-input-row { border-radius: 20px; }
  .composer-toolbar { overflow-x: auto; overscroll-behavior-inline: contain; }
  .composer-selectors { flex: 0 0 auto; }
}

@media (max-width: 24rem) {
  .composer-chip { max-width: 8.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .professor-composer,
  .composer-send { transition-duration: var(--motion-reduced) !important; }
  .professor-composer[data-interaction="active"] { transform: none; }
}

@media (forced-colors: active) {
  .professor-composer,
  .composer-chip,
  .composer-utility-button,
  .composer-send { border: 1px solid CanvasText; }
  .professor-composer:has(textarea:focus-visible) { outline: 2px solid Highlight; }
}

/* UI-801 Human Visual refinement — prismatic authentication scene from the user-supplied source image. */
.auth-view,
.auth-form-panel,
.auth-narrative {
  background: var(--color-surface);
}

.auth-theme-float-circle .theme-switcher-auth {
  position: absolute;
  z-index: var(--layer-tooltip);
  top: max(var(--space-5), env(safe-area-inset-top));
  right: max(var(--space-5), env(safe-area-inset-right));
  padding: var(--space-1);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--glass-surface);
  box-shadow: var(--shadow-control);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.auth-theme-float-circle {
  position: relative;
}

.auth-theme-float-circle .theme-switcher-summary {
  color: var(--color-text-primary);
}

.auth-theme-float-circle .auth-theme-icon-only.theme-switcher-auth {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.auth-theme-float-circle .auth-theme-icon-only > .theme-switcher-summary,
.auth-theme-float-circle .auth-theme-icon-only > .theme-switcher-summary:hover {
  color: var(--color-text-secondary);
  background: transparent;
}

.auth-narrative {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-left: 0;
}

.auth-narrative::before,
.auth-narrative::after {
  position: absolute;
  z-index: -2;
  inset: clamp(var(--space-4), 2vw, var(--space-6));
  border-radius: clamp(var(--radius-frame), 2.5vw, 2.25rem);
  pointer-events: none;
  content: "";
}

.auth-narrative::before {
  border: 1px solid color-mix(in srgb, var(--color-surface) 72%, transparent);
  background: url("/static/assets/auth-prismatic-glass.png") 48% 50% / auto 108% no-repeat;
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--color-surface) 58%, transparent) inset,
    0 28px 72px color-mix(in srgb, var(--color-text-primary) 16%, transparent);
  filter: saturate(0.94) contrast(1.02);
  animation: auth-prismatic-drift 18s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.auth-narrative::after {
  z-index: -1;
  background:
    linear-gradient(
      118deg,
      transparent 16%,
      color-mix(in srgb, var(--color-surface) 38%, transparent) 42%,
      color-mix(in srgb, var(--color-focus) 12%, transparent) 51%,
      transparent 66%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-surface) 20%, transparent),
      color-mix(in srgb, var(--color-surface) 8%, transparent)
    );
  background-position: 112% 50%, 0 0;
  background-size: 180% 180%, 100% 100%;
  mix-blend-mode: screen;
  animation: auth-prismatic-sheen 16s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.auth-narrative > * { position: relative; z-index: 1; }

.auth-narrative .auth-brand,
.auth-narrative .auth-boundary {
  width: fit-content;
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  box-shadow: var(--shadow-control);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}

.auth-product-fragment {
  border: var(--border-hairline);
  border-radius: calc(var(--radius-frame) + var(--space-2));
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  box-shadow: var(--shadow-popup);
  -webkit-backdrop-filter: blur(26px) saturate(1.16);
  backdrop-filter: blur(26px) saturate(1.16);
}

.auth-mini-window,
.auth-mini-window :where(.auth-mini-question, .auth-mini-answer, .auth-mini-sources) {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
}

.auth-view:not([hidden]) .auth-story-title,
.auth-view:not([hidden]) .auth-mini-window,
.auth-view:not([hidden]) .auth-mini-sources,
.auth-view:not([hidden]) .auth-mini-actions {
  animation: none;
}

.auth-view:not([hidden]) .auth-narrative {
  animation: auth-prismatic-panel-in 680ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-view:not([hidden]) .auth-product-fragment {
  animation: auth-prismatic-content-in 620ms 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-view:not([hidden]) .auth-form-brand { animation: auth-form-element-in 480ms 40ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.auth-view:not([hidden]) .auth-form-inner > .view-heading { animation: auth-form-element-in 480ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.auth-view:not([hidden]) .auth-form-inner > .patient-identifier-notice { animation: auth-form-element-in 480ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.auth-view:not([hidden]) .auth-form-inner > .auth-form { animation: auth-form-element-in 520ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.auth-view:not([hidden]) .auth-form-inner > .view-switch { animation: auth-form-element-in 480ms 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }

html[data-theme="dark"] .auth-narrative {
  background: var(--color-surface);
}

html[data-theme="dark"] .auth-narrative::before {
  opacity: 0.94;
  filter: saturate(0.9) brightness(0.92) contrast(1.04);
}

html[data-theme="dark"] .auth-narrative::after {
  background:
    linear-gradient(
      118deg,
      transparent 16%,
      color-mix(in srgb, var(--color-surface) 22%, transparent) 42%,
      color-mix(in srgb, var(--color-focus) 8%, transparent) 51%,
      transparent 66%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-canvas) 16%, transparent),
      color-mix(in srgb, var(--color-canvas) 52%, transparent)
    );
}

html[data-theme="dark"] .auth-product-fragment,
html[data-theme="dark"] .auth-narrative .auth-brand,
html[data-theme="dark"] .auth-narrative .auth-boundary {
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
}

@keyframes auth-prismatic-panel-in {
  from { opacity: 0; filter: blur(12px); transform: translate3d(30px, 0, 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@keyframes auth-prismatic-content-in {
  from { opacity: 0; filter: blur(10px); transform: translate3d(0, 18px, 0) scale(0.985); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes auth-form-element-in {
  from { opacity: 0; filter: blur(8px); transform: translate3d(0, 12px, 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@keyframes auth-prismatic-drift {
  from { background-position: 45% 48%; background-size: auto 108%; }
  to { background-position: 53% 54%; background-size: auto 114%; }
}

@keyframes auth-prismatic-sheen {
  from { background-position: 112% 50%, 0 0; opacity: 0.42; }
  to { background-position: -12% 50%, 0 0; opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-view:not([hidden]) :where(
    .auth-narrative,
    .auth-product-fragment,
    .auth-form-brand,
    .auth-form-inner > .view-heading,
    .auth-form-inner > .patient-identifier-notice,
    .auth-form-inner > .auth-form,
    .auth-form-inner > .view-switch
  ),
  .auth-narrative::before,
  .auth-narrative::after {
    animation: none !important;
    filter: none;
    transform: none;
  }

  html[data-theme="dark"] .auth-narrative::before { filter: saturate(0.9) brightness(0.92) contrast(1.04); }
}

@media (prefers-reduced-transparency: reduce) {
  .auth-product-fragment,
  .auth-narrative .auth-brand,
  .auth-narrative .auth-boundary,
  .auth-mini-window,
  .auth-mini-window :where(.auth-mini-question, .auth-mini-answer, .auth-mini-sources) {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .auth-narrative::before,
  .auth-narrative::after { display: none; }

  .auth-product-fragment,
  .auth-narrative .auth-brand,
  .auth-narrative .auth-boundary { border: 1px solid CanvasText; }
}

/* KM-806 Stage 4 · Living Atlas Teacher Knowledge Workspace */
.teacher-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.teacher-card .teacher-workspace-grid .material-upload-form {
  margin: 0;
}

.teacher-taxonomy-panel,
.document-filter-form {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-composer);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--surface);
}

.teacher-taxonomy-panel > h2,
.document-filter-form > h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
}

.teacher-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.teacher-inline-form + .teacher-taxonomy-list {
  margin-bottom: 1rem;
}

.teacher-taxonomy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.teacher-taxonomy-list li,
.teacher-document-tags span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  padding: 0.25rem 0.45rem;
  overflow-wrap: anywhere;
  background: var(--surface-subtle);
}

.teacher-taxonomy-list .quiet-button {
  min-height: 44px;
  padding-inline: 0.55rem;
}

.taxonomy-rename-form {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto auto;
  gap: 0.5rem;
  width: 100%;
}

.taxonomy-rename-form label,
.taxonomy-rename-form input {
  min-width: 0;
  width: 100%;
}

.document-filter-form {
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) repeat(5, minmax(8rem, 1fr));
  gap: 0.85rem;
  margin-top: 1.5rem;
  align-items: end;
}

.document-filter-form > h2,
.teacher-filter-actions {
  grid-column: 1 / -1;
}

.document-filter-form[aria-busy="true"] {
  opacity: 0.82;
}

.teacher-filter-actions,
.teacher-document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.teacher-document-card {
  overflow-wrap: anywhere;
}

.teacher-statuses,
.teacher-document-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.teacher-statuses .material-status {
  position: static;
}

.teacher-document-tags {
  margin-block: 0.75rem;
}

.teacher-document-actions {
  margin-top: 1rem;
}

.teacher-document-manage {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.teacher-document-manage > summary {
  min-height: 44px;
  padding-block: 0.55rem;
  font-weight: 700;
  cursor: pointer;
}

.document-metadata-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.6fr);
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-block: 1rem;
}

.document-tag-options {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 0.65rem;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.document-tag-options legend {
  width: 100%;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.document-tag-options label {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.4rem;
}

.document-metadata-form > .primary-button {
  justify-self: start;
}

.teacher-version-section {
  padding-top: 1rem;
}

.teacher-version-section h4 {
  margin: 0 0 0.65rem;
  font-size: 1rem;
}

.teacher-version-list {
  display: grid;
  gap: 0;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.teacher-version-list li {
  display: grid;
  gap: 0.2rem;
  border-bottom: 1px solid var(--border);
  padding-block: 0.65rem;
}

.teacher-version-list span,
.teacher-version-list small {
  color: var(--muted);
}

.document-version-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
}

.document-version-upload label {
  grid-column: 1 / -1;
  font-weight: 700;
}

.document-version-upload input {
  min-width: 0;
}

.teacher-failed-reason {
  border-left: 3px solid var(--danger);
  padding-left: 0.75rem;
  color: var(--danger);
}

[data-confirming="true"] {
  border-color: var(--danger);
  color: var(--danger);
}

.teacher-load-more {
  margin-top: 1rem;
}

.teacher-card .material-list-summary {
  color: var(--success);
  background: var(--success-soft);
}

@media (max-width: 64rem) {
  .document-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .document-search-field {
    grid-column: span 2;
  }
}

@media (max-width: 48rem) {
  .teacher-workspace-grid,
  .document-filter-form,
  .document-metadata-form,
  .document-version-upload,
  .teacher-inline-form,
  .taxonomy-rename-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-search-field,
  .document-filter-form > h2,
  .teacher-filter-actions,
  .document-tag-options,
  .document-version-upload label {
    grid-column: 1;
  }

  .teacher-filter-actions > *,
  .teacher-document-actions > *,
  .teacher-inline-form > button,
  .document-version-upload > button,
  .taxonomy-rename-form > button {
    width: 100%;
  }
}

@media (forced-colors: active) {
  .teacher-taxonomy-list li,
  .teacher-document-tags span,
  .teacher-document-manage,
  .teacher-version-list li {
    border-color: CanvasText;
  }
}

/* KM-806 v1.2.1 Delta 4A · independent Teacher shell and exact Overview. */
body.teacher-shell-active > .site-shell > :where(.site-header, .safety-notice, .site-footer),
body.teacher-shell-active > .site-shell > .navigation-scrim,
body.teacher-shell-active > .site-shell > .account-menu,
body.teacher-shell-active > .site-shell > .account-menu-scrim {
  display: none !important;
}

body.teacher-shell-active > .site-shell,
body.teacher-shell-active .main-content {
  min-height: 100dvh;
  padding: 0;
}

body.teacher-shell-active .main-content {
  display: block;
}

body.teacher-shell-active .main-content > .global-status {
  position: fixed;
  z-index: calc(var(--layer-nav) + 2);
  top: var(--space-3);
  right: var(--space-3);
  width: min(32rem, calc(100vw - 2 * var(--space-3)));
}

body.teacher-shell-active .teacher-card.view:not([hidden]) {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: var(--color-canvas);
  box-shadow: none;
}

.teacher-shell {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 15rem minmax(0, 1fr);
}

.teacher-navigation {
  position: sticky;
  z-index: var(--layer-nav);
  top: 0;
  display: flex;
  width: 15rem;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-3);
  border-right: var(--border-hairline);
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  transition: width var(--motion-sidebar) var(--ease-panel);
}

.teacher-nav-topbar,
.teacher-nav-brand,
.teacher-nav-tools,
.teacher-mobile-header,
.teacher-panel-heading,
.teacher-overview-actions {
  display: flex;
  align-items: center;
}

.teacher-nav-topbar,
.teacher-panel-heading {
  justify-content: space-between;
  gap: var(--space-4);
}

.teacher-panel-heading > .teacher-panel-refresh {
  flex: 0 0 auto;
  min-width: 8rem;
  white-space: nowrap;
}

.teacher-nav-brand {
  min-width: 0;
  gap: var(--space-3);
}

.teacher-nav-brand :where(strong, small) {
  display: block;
  white-space: nowrap;
}

.teacher-nav-brand strong { color: var(--color-text-primary); }
.teacher-nav-brand small { color: var(--color-text-muted); font-size: 0.72rem; }
.teacher-nav-tools { gap: var(--space-1); }

.teacher-nav-icon,
.teacher-navigation :where(button, summary) {
  min-height: var(--touch-target-min);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: inherit;
  background: transparent;
}

.teacher-nav-icon {
  display: grid;
  width: var(--touch-target-min);
  flex: 0 0 var(--touch-target-min);
  place-items: center;
  padding: 0;
}

.teacher-nav-icon svg,
.teacher-return-button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.teacher-navigation :where(button, summary):hover,
.teacher-navigation :where(button, summary):focus-visible {
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.teacher-return-button,
.teacher-nav-primary > button,
.teacher-nav-secondary > button,
.teacher-nav-disclosure > summary {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  text-align: start;
}

.teacher-return-button {
  margin-bottom: var(--space-2);
  border-bottom-color: var(--color-border-subtle) !important;
  border-radius: 0 !important;
  color: var(--color-text-primary) !important;
}

.teacher-nav-primary,
.teacher-nav-secondary {
  display: grid;
  gap: var(--space-1);
}

.teacher-nav-primary > button[aria-current="page"] {
  border-color: transparent;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-selected);
}

.teacher-nav-secondary {
  margin-top: auto;
  border-top: var(--border-hairline);
  padding-top: var(--space-3);
}

.teacher-nav-glyph {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  place-items: center;
  font-size: 0.9rem;
  line-height: 1;
}

.teacher-nav-label {
  min-width: 0;
  overflow: hidden;
}

.teacher-nav-disclosure > summary {
  cursor: pointer;
  list-style: none;
}

.teacher-nav-disclosure > summary::-webkit-details-marker { display: none; }

.teacher-nav-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2) var(--space-2);
}

.teacher-nav-choices button {
  min-width: 0;
  padding: var(--space-1);
  font-size: 0.72rem;
}

.teacher-nav-choices button[aria-pressed="true"] {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  background: var(--color-selected);
}

.teacher-navigation-close,
.teacher-mobile-header,
.teacher-navigation-scrim {
  display: none;
}

.teacher-shell-content { min-width: 0; }

.teacher-shell-page {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding: clamp(var(--space-5), 4vw, var(--space-8));
}

.teacher-shell-heading {
  max-width: 52rem;
  margin-bottom: var(--space-7);
}

.teacher-workspace-panel,
.teacher-document-detail {
  width: 100%;
}

.teacher-panel-heading > :where(h2, div > h2),
.teacher-panel-heading > div > p {
  margin-block: 0;
}

.teacher-panel-heading > div { min-width: 0; }
.teacher-panel-heading > div > p:last-child { margin-top: var(--space-2); color: var(--color-text-secondary); }

.teacher-overview-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.teacher-overview-metrics > div {
  min-width: 0;
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-control);
}

.teacher-overview-metrics dt {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
}

.teacher-overview-metrics dd {
  margin: var(--space-2) 0 0;
  color: var(--color-text-primary);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1.1;
}

.teacher-overview-actions {
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.teacher-overview-activity {
  border-top: var(--border-hairline);
  padding-top: var(--space-5);
}

.teacher-overview-activity > summary { cursor: pointer; }
.teacher-overview-activity > summary > h2 { display: inline; }

.teacher-overview-activity .teacher-activity-list {
  display: grid;
  gap: 0;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.teacher-overview-activity .teacher-activity-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: var(--border-hairline);
  padding: var(--space-3) 0;
}

.teacher-overview-activity .teacher-activity-list small {
  color: var(--color-text-muted);
  text-align: end;
}

.teacher-overview-identity {
  margin-top: var(--space-7);
}

#teacher-upload-panel,
#teacher-taxonomy-panel {
  max-width: 52rem;
}

#teacher-curated-panel { max-width: 58rem; }

.teacher-curated-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.teacher-curated-card {
  display: grid;
  gap: var(--space-3);
}

.teacher-curated-card > :where(h3, p) { margin: 0; }

#teacher-library-panel .document-filter-form { margin-top: 0; }

@media (min-width: 64.01rem) {
  body.teacher-sidebar-collapsed .teacher-shell { grid-template-columns: 4.5rem minmax(0, 1fr); }
  body.teacher-sidebar-collapsed .teacher-navigation { width: 4.5rem; padding-inline: 0.75rem; overflow: visible; }
  body.teacher-sidebar-collapsed .teacher-navigation .teacher-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.teacher-sidebar-collapsed .teacher-nav-topbar { justify-content: center; }
  body.teacher-sidebar-collapsed .teacher-nav-brand,
  body.teacher-sidebar-collapsed .teacher-nav-tools { display: grid; justify-content: center; }
  body.teacher-sidebar-collapsed .teacher-nav-brand .evidence-mark { display: none; }
  body.teacher-sidebar-collapsed .teacher-return-button,
  body.teacher-sidebar-collapsed .teacher-nav-primary > button,
  body.teacher-sidebar-collapsed .teacher-nav-secondary > button,
  body.teacher-sidebar-collapsed .teacher-nav-disclosure > summary { width: var(--touch-target-min); justify-content: center; padding-inline: 0; }
  body.teacher-sidebar-collapsed .teacher-nav-disclosure:not([open]) .teacher-nav-choices { display: none; }
  body.teacher-sidebar-collapsed .teacher-nav-disclosure[open] .teacher-nav-choices {
    position: absolute;
    z-index: var(--layer-nav);
    left: 4.75rem;
    width: 14rem;
    border: var(--border-hairline);
    border-radius: var(--radius-surface);
    padding: var(--space-2);
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-popup);
  }
}

@media (max-width: 64rem) {
  body.teacher-drawer-modal-open { overflow: hidden; }
  .teacher-shell { display: block; }
  .teacher-navigation {
    position: fixed;
    left: 0;
    width: min(20rem, calc(100vw - 3rem));
    transform: translateX(-102%);
    transition: transform var(--motion-sidebar) var(--ease-panel);
  }
  body.teacher-navigation-open .teacher-navigation { transform: translateX(0); }
  .teacher-navigation-close,
  .teacher-mobile-header { display: flex; }
  .teacher-navigation-scrim {
    position: fixed;
    z-index: calc(var(--layer-nav) - 1);
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgb(16 24 32 / 48%);
  }
  #teacher-sidebar-collapse { display: none; }
  .teacher-mobile-header {
    position: sticky;
    z-index: calc(var(--layer-nav) - 2);
    top: 0;
    min-height: 4rem;
    gap: var(--space-3);
    border-bottom: var(--border-hairline);
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: blur(14px);
  }
  .teacher-shell-page { padding: var(--space-5) var(--space-4) var(--space-8); }
  .teacher-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 36rem) {
  .teacher-panel-heading,
  .teacher-overview-activity .teacher-activity-list li { align-items: flex-start; flex-direction: column; }
  .teacher-panel-heading > button { width: 100%; }
  .teacher-panel-heading > .teacher-panel-refresh { min-width: 0; width: 100%; }
  .teacher-overview-metrics { grid-template-columns: minmax(0, 1fr); }
  .teacher-overview-actions > button { width: 100%; }
  .teacher-overview-activity .teacher-activity-list small { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .teacher-navigation,
  .teacher-shell { transition: none !important; }
}

@media (forced-colors: active) {
  .teacher-navigation,
  .teacher-overview-metrics > div,
  .teacher-overview-activity .teacher-activity-list li { border-color: CanvasText; }
  .teacher-navigation-scrim { background: Canvas; opacity: 0.72; }
}

/* KM-806 v1.2.1 Delta 5A · Teacher-facing AI metadata and status language */
.teacher-plain-status {
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}

.teacher-plain-status[data-kind="active"],
.teacher-reference-status[data-kind="can_reference"] {
  border-color: var(--color-success);
  color: var(--color-success);
}

.teacher-plain-status[data-kind="failed"],
.teacher-reference-status[data-kind="processing_failed"] {
  border-color: var(--color-error);
  color: var(--color-error);
}

.teacher-plain-status[data-kind="reading"],
.teacher-plain-status[data-kind="organizing"],
.teacher-plain-status[data-kind="pending_review"],
.teacher-reference-status[data-kind="not_yet"],
.teacher-reference-status[data-kind="using_previous_version"] {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.teacher-reference-status {
  margin-block: var(--space-3);
  border: var(--border-hairline);
  border-inline-start: 0.25rem solid currentColor;
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  font-weight: 650;
  line-height: 1.55;
}

.teacher-processing-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  margin: var(--space-4) 0;
  padding: 0;
  counter-reset: teacher-progress;
  list-style: none;
}

.teacher-processing-steps li {
  min-width: 0;
  border-top: 0.2rem solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  counter-increment: teacher-progress;
}

.teacher-processing-steps li::before {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--space-2);
  place-items: center;
  border: var(--border-control);
  border-radius: 50%;
  content: counter(teacher-progress);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.teacher-processing-steps li[data-state="complete"],
.teacher-processing-steps li[data-state="current"] {
  border-top-color: var(--color-success);
  color: var(--color-text-primary);
}

.teacher-processing-steps li[data-state="complete"]::before,
.teacher-processing-steps li[data-state="current"]::before {
  border-color: var(--color-success);
  color: var(--color-success);
}

.teacher-processing-steps li[data-state="current"] { font-weight: 700; }

.teacher-processing-steps li[data-state="failed"] {
  border-top-color: var(--color-error);
  color: var(--color-error);
  font-weight: 700;
}

.teacher-processing-steps li[data-state="failed"]::before {
  border-color: var(--color-error);
  color: var(--color-error);
}

.teacher-technical-details {
  min-width: 0;
  margin-block: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  padding-inline: var(--space-4);
  background: var(--color-surface-muted);
}

.teacher-technical-details > summary {
  min-height: var(--touch-target-min);
  padding-block: var(--space-3);
  color: var(--color-text-secondary);
  font-weight: 700;
  cursor: pointer;
}

.teacher-technical-details > :not(summary) { margin-block: 0 var(--space-4); }

.teacher-ai-title-card,
.teacher-ai-usage-summary {
  margin-block: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  padding: var(--space-5);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-control);
}

.teacher-ai-title-card > :first-child,
.teacher-ai-usage-summary > :first-child { margin-top: 0; }

.teacher-ai-title-suggestion {
  margin-block: var(--space-3);
  color: var(--color-text-primary);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 650;
  line-height: 1.4;
}

.teacher-ai-title-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  margin-top: var(--space-4);
}

.teacher-ai-title-form label {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
  font-weight: 700;
}

.teacher-ai-title-form input { min-width: 0; width: 100%; }
.teacher-ai-title-form button { min-height: var(--touch-target-min); }
.teacher-original-filename { overflow-wrap: anywhere; font-weight: 650; }
.teacher-rag-technical { margin-top: var(--space-4); }

@media (max-width: 48rem) {
  .teacher-processing-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .teacher-processing-steps li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    border-top: 0;
    border-inline-start: 0.2rem solid var(--color-border-subtle);
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
  }
  .teacher-processing-steps li[data-state="complete"],
  .teacher-processing-steps li[data-state="current"] { border-inline-start-color: var(--color-success); }
  .teacher-processing-steps li[data-state="failed"] { border-inline-start-color: var(--color-error); }
  .teacher-processing-steps li::before { margin-bottom: 0; }
  .teacher-ai-title-form { grid-template-columns: minmax(0, 1fr); }
  .teacher-ai-title-form button { width: 100%; }
}

@media (forced-colors: active) {
  .teacher-reference-status,
  .teacher-technical-details,
  .teacher-ai-title-card,
  .teacher-ai-usage-summary,
  .teacher-processing-steps li,
  .teacher-processing-steps li::before { border-color: CanvasText; }
}

/* shared visual polish; page structure and interaction hooks stay unchanged */
.product-surface :where(.eyebrow, .editorial-kicker),
.statistics-grid dd {
  color: var(--color-action-text);
}

.product-surface :where(.view-heading, .page-heading, .home-intro) > h1 {
  font-size: var(--type-page-title);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.product-surface :where(.results-heading, .teacher-panel-heading, .teacher-detail-heading) h2,
.home-learning h2,
.account-plan h2,
.teacher-overview-activity h2 {
  font-size: var(--type-section-title);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.landing-title {
  max-width: 16em;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  word-break: normal;
  text-wrap: balance;
}

.product-home,
.learning-card,
.knowledge-card {
  padding-block-start: clamp(var(--space-5), 4vw, var(--space-7));
}

.home-composer { margin-block: var(--space-6) var(--space-7); }
.home-learning,
.account-plan { padding-block: var(--space-6) var(--space-7); }
.teacher-shell-heading { margin-bottom: var(--space-6); }

.field-help,
.field-error,
.auth-view .field-help,
.surface-boundary-note {
  font-size: var(--type-sm);
  line-height: 1.6;
}

.surface-boundary-note,
.teacher-reference-status {
  font-weight: var(--weight-medium);
}

.product-surface :where(.empty-state, .error-summary, .status-message) {
  border-radius: var(--radius-control);
  line-height: 1.6;
}

.product-surface :where(.knowledge-form, .quiz-form, .material-upload-form) {
  border-color: var(--color-border-subtle);
}

.home-statistics,
.teacher-overview-metrics > div {
  box-shadow: none;
}

@media (forced-colors: active) {
  .product-surface :where(.knowledge-form, .quiz-form, .material-upload-form) {
    border-color: CanvasText;
  }
}

/* student surfaces keep their existing structure and interaction contracts */
[data-view="landing"] .landing-hero {
  min-height: 0;
  padding-block: clamp(3rem, 7vw, 6rem);
  box-shadow: none;
}

[data-view="landing"] .landing-lede {
  max-width: 42rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.7;
  text-wrap: pretty;
}

[data-view="landing"] .landing-positioning {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

[data-view="landing"] .landing-positioning > h2 {
  max-width: 28em;
  margin-bottom: var(--space-5);
  line-height: 1.4;
}

:is([data-view="account"], [data-view="progress"], [data-view="quiz"], [data-view="wrongbook"], [data-view="knowledge"], [data-view="pricing"]) {
  padding-block: var(--space-6) var(--space-7);
}

:is([data-view="account"], [data-view="progress"], [data-view="quiz"], [data-view="wrongbook"], [data-view="knowledge"], [data-view="pricing"])
:is(.view-heading, .page-heading, .home-intro) {
  margin-bottom: var(--space-5);
}

[data-view="pricing"] .page-heading h1 {
  max-width: 23em;
  font-size: var(--type-page-title);
  line-height: 1.3;
  text-wrap: pretty;
}

[data-view="account"] .home-composer { margin-block: var(--space-5) var(--space-6); }
[data-view="account"] :is(.home-learning, .account-plan) { padding-block: var(--space-5) var(--space-6); }

[data-view="account"] .home-statistics,
[data-view="progress"] .statistics-grid {
  gap: 0;
  margin-block: var(--space-5);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-view="account"] .home-statistics > div,
[data-view="progress"] .statistics-grid > div {
  border: 0;
  border-inline-start: var(--border-hairline);
  border-radius: 0;
  padding: var(--space-2) var(--space-4);
  background: transparent;
}

[data-view="account"] .home-statistics > div:first-child,
[data-view="progress"] .statistics-grid > div:first-child { border-inline-start: 0; }

[data-view="progress"] .statistics-grid dt { font-size: var(--type-sm); font-weight: var(--weight-medium); }
[data-view="progress"] .statistics-grid dd { font-size: 1.75rem; font-weight: var(--weight-semibold); }

:is([data-view="account"], [data-view="progress"]) .activity-list li {
  margin: 0;
  border: 0;
  border-bottom: var(--border-hairline);
  padding: var(--space-3) 0;
  background: transparent;
}

[data-view="account"] .plan-row,
[data-view="account"] .plan-row[data-plan-id="free"] {
  margin-block: 0;
  border: 0;
  border-bottom: var(--border-hairline);
  border-radius: 0;
  padding: var(--space-4);
  box-shadow: none;
}

[data-view="account"] .plan-row[data-current="true"] {
  background: var(--color-selected);
  box-shadow: inset 3px 0 0 var(--color-focus);
}

:is([data-view="pricing"], [data-view="landing"]) .plan-row { padding-block: var(--space-5); }
[data-view="account"] .compact-plans .plan-row :is(ul, .plan-quota) { font-size: var(--type-sm); }

[data-view="progress"] .learning-subnav {
  margin-block: var(--space-4) var(--space-5);
  border: 0;
}

[data-view="progress"] .learning-subnav button { border: 0; border-bottom: var(--border-hairline); }

[data-view="knowledge"] .knowledge-form {
  margin-top: var(--space-5);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* dark knowledge search keeps an explicit, readable pairing in every state */
html[data-theme="dark"] [data-view="knowledge"] .knowledge-form .primary-button {
  border-color: #f4f5f7;
  color: #0b0c0f;
  background: linear-gradient(135deg, #f4f5f7, #d6d9df);
}

html[data-theme="dark"] [data-view="knowledge"] .knowledge-form .primary-button:hover:not(:disabled) {
  border-color: #d6d9df;
  color: #0b0c0f;
  background: linear-gradient(135deg, #e4e7ec, #c9ced7);
}

html[data-theme="dark"] [data-view="knowledge"] .knowledge-form .primary-button:focus-visible {
  border-color: #f4f5f7;
  color: #0b0c0f;
  background: linear-gradient(135deg, #f4f5f7, #d6d9df);
  outline-color: var(--focus);
}

html[data-theme="dark"] [data-view="knowledge"] .knowledge-form .primary-button:disabled {
  border-color: var(--border-strong);
  color: var(--text-muted);
  background: var(--surface-raised);
  opacity: 1;
}

:is([data-view="knowledge"], [data-view="progress"], [data-view="wrongbook"]) .results-section { margin-top: var(--space-5); }
[data-view="knowledge"] .result-card { padding-block: var(--space-4); line-height: 1.65; }

[data-view="quiz"] .quiz-form { margin-top: var(--space-5); box-shadow: none; }
[data-view="quiz"] .quiz-form fieldset { border: 0; border-radius: 0; padding: 0; }
[data-view="quiz"] .quiz-form legend { padding: 0; font-weight: var(--weight-semibold); line-height: 1.6; }
[data-view="quiz"] .quiz-option { padding-block: var(--space-3); }
[data-view="quiz"] .quiz-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
[data-view="quiz"] .quiz-controls button { width: auto; }

[data-view="wrongbook"] .wrongbook-details > div { grid-template-columns: 7rem minmax(0, 1fr); }
[data-view="wrongbook"] .wrongbook-details { line-height: 1.65; }
[data-view="wrongbook"] .wrongbook-details dt { font-weight: var(--weight-medium); }

[data-view="chat"] :is(.professor-header, .chat-boundary-notices) { max-width: 46rem; }
[data-view="chat"] .professor-header { padding-bottom: var(--space-3); }
[data-view="chat"] .chat-boundary-notices { padding-block: var(--space-2); }
[data-view="chat"] .chat-empty {
  width: 100%;
  max-width: 46rem;
  min-height: 0;
  margin-inline: auto;
  padding-block: var(--space-6);
  text-align: start;
}
[data-view="chat"] .chat-empty h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.4; letter-spacing: -0.025em; }
[data-view="chat"] .chat-empty p:last-child { max-width: 34rem; margin-inline: 0; line-height: 1.7; }

@media (min-width: 64.01rem) {
  .site-shell:has(:is([data-view="account"], [data-view="progress"], [data-view="quiz"], [data-view="wrongbook"], [data-view="knowledge"]):not([hidden])) {
    grid-template-rows: 0 minmax(0, 1fr) auto;
  }
}

@media (max-width: 48rem) {
  [data-view="account"] .home-statistics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-view="progress"] .statistics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
  [data-view="progress"] .statistics-grid > div:nth-child(odd) { border-inline-start: 0; }
  [data-view="progress"] .learning-subnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-view="progress"] .learning-subnav button { padding: var(--space-2); font-size: var(--type-sm); line-height: 1.5; }
  :is([data-view="account"], [data-view="pricing"], [data-view="landing"]) .plan-row { gap: var(--space-2); }
  :is([data-view="account"], [data-view="pricing"], [data-view="landing"]) .plan-price { text-align: start; }
  [data-view="chat"] .chat-empty { padding-block: var(--space-5); }
}

@media (max-width: 35rem) {
  [data-view="account"] .home-statistics > div { padding-inline: var(--space-2); }
  [data-view="wrongbook"] .wrongbook-details > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  [data-view="wrongbook"] .pagination-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); align-items: center; }
  [data-view="wrongbook"] .pagination-controls button { width: auto; }
  [data-view="quiz"] .quiz-controls { gap: var(--space-2); }
}

@media (forced-colors: active) {
  [data-view="knowledge"] .knowledge-form { border: 1px solid CanvasText; padding: var(--space-3); }
  [data-view="account"] .plan-row[data-current="true"] { outline: 2px solid Highlight; }
}

/* teacher presentation stays separate from document and review contracts */
[data-view="teacher"] .teacher-shell-page { padding-block: var(--space-6); }
[data-view="teacher"] .teacher-shell-heading { margin-bottom: var(--space-5); }
[data-view="teacher"] .teacher-shell-heading .surface-boundary-note {
  border: 0;
  padding: 0;
  background: transparent;
}

[data-view="teacher"] :is(.teacher-panel-heading, .teacher-detail-heading) {
  gap: var(--space-2);
}
[data-view="teacher"] :is(.teacher-panel-heading, .teacher-detail-heading) h2 {
  text-wrap: pretty;
}
[data-view="teacher"] .material-list-summary {
  margin-block: var(--space-3);
  border: 0;
  padding: 0;
  background: transparent;
  font-weight: var(--weight-medium);
}

[data-view="teacher"] .teacher-overview-metrics {
  gap: 0;
}
[data-view="teacher"] .teacher-overview-metrics > div {
  border: 0;
  border-inline-start: var(--border-hairline);
  border-radius: 0;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  box-shadow: none;
}
[data-view="teacher"] .teacher-overview-metrics > div:first-child { border-inline-start: 0; }
[data-view="teacher"] .teacher-overview-metrics dt { font-size: var(--type-sm); }
[data-view="teacher"] .teacher-overview-metrics dd { font-size: 1.75rem; font-weight: var(--weight-semibold); }
[data-view="teacher"] .teacher-overview-actions { margin-bottom: var(--space-5); }
[data-view="teacher"] .teacher-overview-activity { padding-top: var(--space-4); }
[data-view="teacher"] .teacher-overview-identity { margin-top: var(--space-5); }

[data-view="teacher"] :is(.teacher-activity-list, .teacher-source-list, .teacher-detail-version-list) li {
  border: 0;
  border-bottom: var(--border-hairline);
  border-radius: 0;
  padding: var(--space-3) 0;
  background: transparent;
}

[data-view="teacher"] :is(.document-filter-form, .teacher-taxonomy-panel, .material-upload-form) {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
[data-view="teacher"] .document-filter-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
[data-view="teacher"] .document-search-field { grid-column: auto; }
[data-view="teacher"] .document-filter-form > h2 { margin-bottom: var(--space-2); }
[data-view="teacher"] .results-section { margin-top: var(--space-5); }
[data-view="teacher"] :is(.teacher-document-card, .teacher-curated-card) { padding-block: var(--space-4); }
[data-view="teacher"] .teacher-curated-list { margin-top: var(--space-4); }
[data-view="teacher"] .teacher-curated-card { gap: var(--space-2); }
[data-view="teacher"] .teacher-reference-status {
  margin-block: var(--space-2);
  border-block: 0;
  border-inline-end: 0;
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
  background: transparent;
}
[data-view="teacher"] .teacher-document-tags { margin-block: var(--space-2); }
[data-view="teacher"] .teacher-document-actions { margin-top: var(--space-3); }
[data-view="teacher"] .teacher-processing-steps { margin-block: var(--space-3); }
[data-view="teacher"] .teacher-processing-steps li { padding-block: var(--space-2) 0; }

[data-view="teacher"] .material-upload-form {
  max-width: 44rem;
  margin-top: 0;
}
[data-view="teacher"] .teacher-taxonomy-list {
  display: grid;
  gap: 0;
  margin-block: var(--space-3) var(--space-5);
}
[data-view="teacher"] .teacher-taxonomy-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  border: 0;
  border-bottom: var(--border-hairline);
  border-radius: 0;
  padding: var(--space-2) 0;
  background: transparent;
}
[data-view="teacher"] .teacher-taxonomy-list .quiet-button { white-space: nowrap; }
[data-view="teacher"] .taxonomy-rename-form { grid-column: 1 / -1; }
[data-view="teacher"] :is(.taxonomy-rename-form, .teacher-ai-title-form) input {
  min-height: var(--touch-target-min);
  border: var(--border-control);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font: inherit;
}

[data-view="teacher"] .teacher-document-detail { margin-top: 0; }
[data-view="teacher"] .teacher-detail-heading { margin-block: var(--space-3); }
[data-view="teacher"] .teacher-detail-tabs [role="tab"] {
  padding-inline: var(--space-3);
  font-weight: var(--weight-medium);
}
[data-view="teacher"] .teacher-detail-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--color-focus);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
[data-view="teacher"] .teacher-detail-panel { padding-block: var(--space-4); }
[data-view="teacher"] :is(.teacher-ai-title-card, .teacher-ai-usage-summary, .teacher-generation-banner, .teacher-knowledge-item) {
  border: 0;
  border-bottom: var(--border-hairline);
  border-radius: 0;
  padding: var(--space-3) 0;
  background: transparent;
  box-shadow: none;
}
[data-view="teacher"] .teacher-generation-banner { margin-bottom: var(--space-3); }
[data-view="teacher"] .teacher-ai-title-suggestion { font-size: var(--type-section-title); }
[data-view="teacher"] .teacher-extracted-text { color: var(--color-text-primary); }

@media (min-width: 80rem) {
  [data-view="teacher"] .document-filter-form { grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 40.01rem) {
  [data-view="teacher"] .material-upload-form > button { width: auto; justify-self: start; }
  [data-view="teacher"] .teacher-inline-form { grid-template-columns: minmax(0, 1fr) auto; }
  [data-view="teacher"] .teacher-filter-actions > * { width: auto; }
  [data-view="teacher"] .teacher-detail-toolbar { display: flex; }
  [data-view="teacher"] .teacher-detail-toolbar > button { width: auto; }
}

@media (max-width: 48rem) {
  [data-view="teacher"] .document-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-view="teacher"] :is(.document-filter-form > h2, .teacher-filter-actions) { grid-column: 1 / -1; }
  [data-view="teacher"] .teacher-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-3); }
  [data-view="teacher"] .teacher-overview-metrics > div:nth-child(odd) { border-inline-start: 0; }
  [data-view="teacher"] .teacher-overview-metrics > div:last-child { grid-column: 1 / -1; }
  [data-view="teacher"] .teacher-processing-steps li { padding-block: var(--space-1); }
}

@media (max-width: 40rem) {
  [data-view="teacher"] .teacher-shell-page { padding-block: var(--space-5); }
  [data-view="teacher"] .document-filter-form { grid-template-columns: minmax(0, 1fr); }
  [data-view="teacher"] .teacher-overview-metrics > div { padding-inline: var(--space-2); }
}

@media (forced-colors: active) {
  [data-view="teacher"] .teacher-detail-tabs [role="tab"][aria-selected="true"] { border-bottom-color: Highlight; }
}

.teacher-approval-dialog {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1.5rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.teacher-approval-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.teacher-approval-dialog h2 { margin-top: 0; }
.teacher-approval-dialog p { overflow-wrap: anywhere; }
.teacher-review-wizard { width: min(54rem, calc(100% - 2rem)); }
.teacher-review-wizard > .teacher-detail-actions {
  position: sticky;
  bottom: -1.5rem;
  background: var(--surface);
  padding-block: 1rem;
  border-top: 1px solid var(--border);
}
.teacher-wizard-summary { white-space: pre-wrap; line-height: 1.8; }
.teacher-wizard-item { border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1.5rem; }
.teacher-wizard-item > label { display: block; margin-bottom: .75rem; font-weight: 600; }
.teacher-wizard-item textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; line-height: 1.65; padding: .75rem;
  color: var(--text-primary); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
.teacher-wizard-item > details { margin-block: .75rem; }
.teacher-review-wizard input[type="checkbox"] { width: 1.1rem; height: 1.1rem; vertical-align: middle; }

/* File browsing shares the existing document filters and folder management. */
.teacher-file-browser {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.teacher-file-main { min-width: 0; }
.teacher-folder-browser { border-inline-end: var(--border-hairline); padding-inline-end: var(--space-4); }
.teacher-folder-browser h2 { margin: 0 0 var(--space-3); font-size: var(--type-sm); }
.library-folder-list { display: grid; gap: var(--space-1); }
.library-folder-list button { text-align: start; white-space: normal; overflow-wrap: anywhere; min-height: 44px; }
.library-folder-list button[aria-pressed="true"] { background: var(--color-surface-raised, var(--color-surface)); border-color: transparent; font-weight: var(--weight-semibold); }
.library-taxonomy-manager { margin-block: var(--space-3) var(--space-4); border-bottom: var(--border-hairline); padding-bottom: var(--space-2); }
.library-taxonomy-manager > summary { min-height: 44px; padding-block: var(--space-2); cursor: pointer; font-weight: var(--weight-medium); }
.library-taxonomy-manager #teacher-taxonomy-panel { margin-top: var(--space-3); }
[data-view="teacher"] .teacher-file-browser .document-filter-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.teacher-file-browser .document-search-field { grid-column: auto; }
.library-advanced-filters { grid-column: 1; }
[data-view="teacher"] .teacher-file-browser .teacher-filter-actions { grid-column: 2; align-self: start; justify-content: flex-end; }
.teacher-file-browser .results-section { margin-top: var(--space-3); padding-top: var(--space-3); }
.library-advanced-filters > summary { min-height: 44px; padding-block: var(--space-2); cursor: pointer; font-size: var(--type-sm); }
.library-advanced-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-block: var(--space-2); }
[data-view="teacher"] :is(.teacher-document-card, .teacher-curated-card) {
  border: var(--border-control);
  border-radius: var(--radius-control);
  padding: var(--space-4);
  background: var(--color-surface);
  box-shadow: none;
}
[data-view="teacher"] :is(#material-list, .teacher-curated-list) { gap: var(--space-4); }
[data-view="teacher"] .teacher-document-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.teacher-document-card > :is(.material-heading, .teacher-reference-status, .teacher-document-tags, .teacher-failed-reason, .teacher-document-manage) { grid-column: 1 / -1; }
[data-view="teacher"] .teacher-document-card > .teacher-document-actions { margin-top: 0; align-self: center; }
[data-view="teacher"] .teacher-document-card > .teacher-technical-details[open] { grid-column: 1 / -1; }
[data-view="teacher"] .teacher-document-card .material-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}
.teacher-document-card .library-file-selection { grid-row: 1 / 3; align-self: start; padding: var(--space-1); }
.teacher-document-card .teacher-statuses { grid-column: 2; }
.library-file-selection input, .library-selection-heading input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--color-focus); }
.library-document-title { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.library-selection-heading, .library-selection-heading label { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.library-selection-heading { justify-content: space-between; margin-block: var(--space-3); }
.library-bulk-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; padding: var(--space-3); margin: 0 0 var(--space-3); border: var(--border-control); border-radius: var(--radius-control); }
.library-bulk-controls label { display: grid; gap: var(--space-1); flex: 1 1 9rem; min-width: 0; }
.library-bulk-controls select { width: 100%; min-width: 0; }
.library-bulk-results { padding-inline-start: var(--space-4); overflow-wrap: anywhere; }
.teacher-processing, .teacher-review-guide { margin-block: var(--space-4); padding-block: var(--space-3); border-top: var(--border-hairline); }
.teacher-review-guide .teacher-detail-actions { flex-wrap: wrap; }
#library-bulk-dialog-files { overflow-wrap: anywhere; }
[data-view="teacher"] .teacher-document-card .material-heading h3 { margin: 0; overflow-wrap: anywhere; }
[data-view="teacher"] .teacher-document-card .teacher-reference-status { padding: 0; border: 0; color: var(--color-text-secondary); font-size: var(--type-sm); }
[data-view="teacher"] .teacher-document-card .teacher-technical-details {
  margin-block: var(--space-2);
  border: 0;
  padding: 0;
  background: transparent;
}
[data-view="teacher"] .teacher-document-card .teacher-technical-details > summary { padding: var(--space-2) 0; font-size: var(--type-sm); }
[data-view="teacher"] .teacher-document-card .teacher-document-manage { margin-top: 0; padding-top: 0; }
@media (max-width: 64rem) {
  .teacher-file-browser { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .teacher-folder-browser { border-inline-end: 0; border-bottom: var(--border-hairline); padding-inline-end: 0; padding-bottom: var(--space-3); }
  .library-folder-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
}
@media (max-width: 40rem) {
  [data-view="teacher"] .teacher-file-browser .document-filter-form,
  .library-advanced-fields { grid-template-columns: minmax(0, 1fr); }
  [data-view="teacher"] :is(.teacher-document-card, .teacher-curated-card) { padding: var(--space-3); }
  [data-view="teacher"] .teacher-file-browser .teacher-filter-actions { grid-column: 1; justify-content: flex-start; }
}

/* Quiet boundaries; keyboard location remains explicit. */
:where(button, a, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; }
:where(.teacher-card, .teacher-review-wizard) :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.teacher-card { --color-selected: color-mix(in srgb, var(--color-text-primary) 8%, transparent); }
#teacher-version-upload-target { max-width: 44rem; margin-bottom: var(--space-5); }
#teacher-version-upload-target .document-version-upload { display: grid; gap: var(--space-3); }
.teacher-curated-card + .teacher-curated-card { margin-top: var(--space-3); }
@media (forced-colors: active) {
  :where(.teacher-card, .teacher-review-wizard) :focus-visible { outline-color: Highlight; }
}

.teacher-processing > label { display: block; margin-block: var(--space-3) var(--space-2); }
#teacher-processing-filter {
  min-height: var(--touch-target-min); min-width: 10rem;
  padding: var(--space-2) var(--space-3); border: var(--border-control);
  border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-primary);
}

/* Overview directs current work; history has its own reading layout. */
.teacher-next-step {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  margin-block: var(--space-5); padding-block: var(--space-5);
  border-block: var(--border-hairline);
}
.teacher-next-step h3 { margin-block: var(--space-2); font-size: var(--type-xl); }
.teacher-next-step p { margin-block: var(--space-2); max-width: 42rem; }
.teacher-next-step > button { flex-shrink: 0; }
.teacher-activity-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); margin-block: var(--space-5); }
.teacher-activity-filters label { display: grid; gap: var(--space-2); min-width: 12rem; flex: 1; }
.teacher-activity-filters select { width: 100%; min-width: 0; min-height: var(--touch-target-min); border: var(--border-control); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); color: var(--color-text-primary); background: var(--color-surface); }
.teacher-history-list { list-style: none; padding: 0; margin-block: var(--space-4); }
.teacher-history-list > li { display: block; padding-block: var(--space-4); border-bottom: var(--border-hairline); }
.teacher-history-list time { font-size: var(--type-sm); color: var(--color-text-muted); }
.teacher-history-list details { margin-top: var(--space-3); font-size: var(--type-sm); }
.teacher-history-list dl { margin-block: var(--space-3); display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.teacher-history-list dd { margin: 0; overflow-wrap: anywhere; }
#teacher-activity-title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
@media (max-width: 640px) {
  .teacher-next-step { flex-direction: column; align-items: stretch; }
  .teacher-activity-filters { flex-direction: column; align-items: stretch; }
  .teacher-activity-filters label { min-width: 0; }
}

.teacher-activity-entry-heading, .teacher-activity-entry-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.teacher-activity-entry-heading strong { font-size: var(--type-base); }
.teacher-activity-entry-meta { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--type-sm); }
.teacher-activity-result { font-size: var(--type-sm); white-space: nowrap; }
.teacher-activity-result-success { color: var(--color-text-muted); }
.teacher-activity-result-failed { color: var(--color-error); }
.teacher-activity-result-denied { color: var(--color-warning); }
@media (max-width: 640px) { .teacher-activity-entry-meta { flex-direction: column; gap: var(--space-1); } }

.teacher-shell-heading { padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: var(--border-hairline); }
.teacher-shell-heading > .eyebrow { display: none; }
.teacher-shell-heading .view-title { font-size: 1.125rem; margin-bottom: var(--space-2); }
.teacher-shell-heading > p { font-size: var(--type-sm); margin-block: var(--space-1); color: var(--color-text-muted); }
#teacher-overview-title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
#teacher-overview-live { color: var(--color-text-muted); font-size: var(--type-sm); }

#teacher-curated-reload {
  flex-shrink: 0;
  white-space: nowrap;
}

.library-rename-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-inline-start: .35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  vertical-align: middle;
}
.library-rename-button:hover { color: var(--color-text); background: var(--color-surface); }

#teacher-activity-versions-list a { color: var(--color-text); }

/* Related prompts belong to the answer, outside the sticky input. */
.answer-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin-block: 1rem;
}
.answer-table-scroll:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
}
.answer-table-scroll table {
  width: 100%;
  min-width: 28rem;
  border-collapse: collapse;
  font-size: .95em;
}
.answer-table-scroll th,
.answer-table-scroll td {
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.answer-table-scroll th { font-weight: 650; }

.answer-suggestions {
  margin-block: var(--space-5);
  position: static;
}
.answer-suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.answer-suggestion-list button {
  min-height: var(--touch-target-min);
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-primary);
  white-space: normal;
  line-height: 1.5;
  text-align: start;
}
.chat-answer-heading h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}


#chat-sources-list { gap: 0; }
.chat-source-document {
  min-width: 0;
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  overflow-wrap: anywhere;
}
.chat-source-document:last-child { border-bottom: 0; }
.chat-source-document h3 {
  margin: 0 0 .4rem;
  font-size: 1rem;
  line-height: 1.5;
}
.chat-source-preview,
.chat-source-excerpt {
  margin-block: .6rem;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.chat-source-fragments details {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.chat-source-fragments summary {
  min-height: var(--touch-target-min);
  padding-block: .6rem;
  color: var(--color-text-primary);
  font-size: .9rem;
  line-height: 1.6;
  cursor: pointer;
}
.chat-source-fragments summary:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}
.chat-source-excerpt { white-space: pre-wrap; }


.chat-answer-content :is(h3, h4, h5, h6) {
  margin-block: 1.35em .55em;
  font-size: 1em;
  line-height: 1.55;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.chat-answer-content h3 { font-size: 1.12em; }
.chat-answer-content :is(ul, ol) {
  margin-block: .75em 1em;
  padding-inline-start: 1.5em;
}
.chat-answer-content li {
  margin-block: .4em;
  padding-inline-start: .15em;
  overflow-wrap: anywhere;
}
.chat-answer-content hr {
  margin-block: 1.5em;
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}
.chat-answer-content .answer-plain-text { white-space: pre-wrap; }

/* ADM-807 Admin Control Center */
body.admin-shell-active .site-header,
body.admin-shell-active .safety-notice,
body.admin-shell-active .site-footer {
  display: none;
}

body.admin-shell-active .main-content {
  min-height: 100vh;
}

.admin-view {
  width: 100%;
  max-width: none;
  padding: 0;
}

.admin-shell {
  display: grid;
  width: min(100%, 100rem);
  min-height: 100vh;
  margin-inline: auto;
  padding:
    clamp(var(--space-6), 4vw, var(--space-8))
    var(--layout-page-inline-end)
    var(--space-8)
    var(--layout-page-inline-start);
  align-content: start;
  gap: var(--space-6);
}

.admin-shell-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: end;
  justify-content: space-between;
  padding-block-end: var(--space-5);
  border-bottom: var(--border-hairline);
}

.admin-shell-heading {
  display: grid;
  max-width: 52rem;
  min-width: 0;
  gap: var(--space-1);
}

.admin-shell-heading .evidence-mark {
  margin-block-end: var(--space-2);
}

.admin-shell-heading h1,
.admin-shell-heading p {
  margin: 0;
}

.admin-shell-heading > p:last-child {
  color: var(--color-text-secondary);
}

.admin-shell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.admin-center-panel {
  display: grid;
  min-width: 0;
  gap: var(--space-5);
}

#admin-center-tabs {
  position: sticky;
  top: var(--space-1);
  z-index: 5;
  padding-block: .75rem;
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-border-subtle);
}
#admin-center-tabs [role="tab"] {
  min-height: var(--touch-target-min);
  padding: .6rem .8rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
#admin-center-tabs [role="tab"][aria-selected="true"] {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  background: var(--color-surface-elevated);
}
#admin-center-content {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.admin-center-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.admin-center-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}
.admin-center-card :is(h3, h4) {
  margin-block: 0 .5rem;
  overflow-wrap: anywhere;
}
.admin-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.admin-center-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-center-table :is(th, td) {
  padding: .6rem;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.admin-center-badge {
  display: inline-block;
  padding: .15rem .45rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  font-size: .85em;
}
.admin-center-code {
  display: block;
  padding: .75rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  overflow-wrap: anywhere;
  user-select: all;
}
@media (max-width: 48rem) {
  #admin-center-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .admin-center-table {
    display: block;
    overflow-x: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  #admin-center-tabs [role="tab"] { transition: none; }
}
@media (forced-colors: active) {
  #admin-center-tabs [role="tab"][aria-selected="true"] {
    outline: 2px solid ButtonText;
  }
}

/* ADM-807 DashboardKit-aligned admin shell */
.admin-shell {
  --admin-sidebar-width: 15.5rem;
  --admin-sidebar-bg: #101820;
  --admin-sidebar-text: #f6f8f6;
  --admin-sidebar-muted: rgb(246 248 246 / 62%);
  --admin-sidebar-active: #0c5b58;
  display: grid;
  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--color-canvas);
}

html[data-theme="dark"] .admin-shell {
  --admin-sidebar-bg: #0b1115;
  --admin-sidebar-active: #2f817b;
  --admin-sidebar-muted: rgb(246 248 246 / 68%);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--layer-nav);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  min-width: 0;
  color: var(--admin-sidebar-text);
  background: var(--admin-sidebar-bg);
}

.admin-sidebar-brand {
  display: flex;
  min-height: 4.5rem;
  padding: 0 1rem;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.admin-sidebar-brand .evidence-mark {
  --border-strong: var(--admin-sidebar-muted);
  --text-primary: var(--admin-sidebar-text);
  --surface: transparent;
}

.admin-sidebar-brand > span:last-child {
  display: grid;
  min-width: 0;
}

.admin-sidebar-brand strong {
  font-size: var(--type-body);
  line-height: 1.3;
}

.admin-sidebar-brand small {
  color: var(--admin-sidebar-muted);
  font-size: var(--type-xs);
}

.admin-sidebar-close {
  display: none;
}

.admin-sidebar #admin-center-tabs {
  position: static;
  top: auto;
  z-index: auto;
  display: grid;
  min-height: 0;
  padding: var(--space-3);
  overflow-y: auto;
  align-content: start;
  gap: var(--space-1);
  border-bottom: 0;
  background: transparent;
}

.admin-nav-caption {
  margin: var(--space-5) var(--space-3) var(--space-1);
  color: var(--admin-sidebar-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.admin-nav-caption:first-child {
  margin-top: 0;
}

.admin-sidebar #admin-center-tabs [role="tab"] {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 0.65rem 0.8rem;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--admin-sidebar-muted);
  background: transparent;
  text-align: start;
  white-space: normal;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.admin-sidebar #admin-center-tabs [role="tab"]:hover {
  color: var(--admin-sidebar-text);
  background: rgb(255 255 255 / 7%);
}

.admin-sidebar #admin-center-tabs [role="tab"][aria-selected="true"] {
  color: #fff;
  border-color: transparent;
  background: var(--admin-sidebar-active);
}

.admin-sidebar-footer {
  display: grid;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-1);
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.admin-sidebar-footer strong,
.admin-sidebar-footer span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-sidebar-footer strong {
  font-size: var(--type-sm);
}

.admin-sidebar-footer span {
  color: var(--admin-sidebar-muted);
  font-size: var(--type-xs);
}

.admin-sidebar-footer-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  gap: var(--space-1);
}

.admin-sidebar-footer-actions button {
  min-height: 2.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-color: rgb(255 255 255 / 16%);
  border-radius: var(--radius-control);
  color: var(--admin-sidebar-text);
  background: transparent;
  font-size: var(--type-xs);
}

.admin-sidebar-scrim {
  display: none;
}

.admin-main-column {
  min-width: 0;
  min-height: 100vh;
  background: var(--color-canvas);
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: calc(var(--layer-nav) - 1);
  display: flex;
  min-height: 4.5rem;
  padding: var(--space-3) clamp(var(--space-4), 3vw, var(--space-6));
  align-items: center;
  gap: var(--space-4);
  border-bottom: var(--border-hairline);
  background: var(--color-surface);
}

.admin-icon-button {
  display: none;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: var(--border-control);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.admin-icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.admin-breadcrumb {
  display: flex;
  min-width: 0;
  margin-inline-end: auto;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--type-sm);
}

.admin-breadcrumb strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.admin-utility-menu {
  position: relative;
}

.admin-utility-menu > summary {
  display: inline-flex;
  min-height: var(--touch-target-min);
  padding: 0.65rem 0.9rem;
  align-items: center;
  border: var(--border-control);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  background: var(--color-surface);
  cursor: pointer;
  list-style: none;
}

.admin-utility-menu > summary::-webkit-details-marker {
  display: none;
}

.admin-utility-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--layer-popover);
  display: grid;
  width: 16rem;
  padding: var(--space-4);
  gap: var(--space-2);
  border: var(--border-control);
  border-radius: var(--radius-surface);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-popup);
}

.admin-utility-panel p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
}

.admin-utility-panel div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.admin-utility-panel button {
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.admin-utility-panel button[aria-pressed="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-selected);
}

.admin-content {
  width: min(100%, 100rem);
  margin-inline: auto;
  padding:
    clamp(var(--space-6), 4vw, var(--space-8))
    clamp(var(--space-4), 4vw, var(--space-7));
}

.admin-page-header,
.admin-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.admin-page-header {
  margin-bottom: var(--space-6);
}

.admin-page-header h1,
.admin-page-header p,
.admin-section-heading h2,
.admin-section-status {
  margin: 0;
}

.admin-page-header p {
  max-width: 68ch;
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
}

.admin-section-heading {
  align-items: end;
}

.admin-section-heading h2 {
  color: var(--color-text-primary);
  font-size: var(--type-section-title);
  line-height: 1.25;
}

.admin-section-status {
  color: var(--color-text-muted);
  font-size: var(--type-xs);
}

.admin-center-panel {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

#admin-center-content,
.admin-section {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.admin-section-description {
  max-width: 72ch;
  margin: 0;
  color: var(--color-text-secondary);
}

.admin-inline-note {
  max-width: 72ch;
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-sm);
}

.admin-section > h5 {
  margin: var(--space-4) 0 0;
  color: var(--color-text-primary);
  font-size: var(--type-lg);
}

.admin-kpi-grid,
.admin-compact-metrics,
.admin-section > .teacher-overview-metrics {
  display: grid;
  margin: 0;
  gap: var(--space-3);
}

.admin-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-kpi-grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-overview-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.admin-metric-group {
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-metric-group h5 {
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--type-body);
}

.admin-metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  gap: 0 var(--space-4);
}

.admin-metric-list > div {
  display: flex;
  min-width: 0;
  padding-block: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: var(--border-hairline);
}

.admin-metric-list dt {
  color: var(--color-text-secondary);
  font-size: var(--type-sm);
}

.admin-metric-list dd {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.admin-compact-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-kpi-grid > div,
.admin-compact-metrics > div,
.admin-section > .teacher-overview-metrics > div {
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-kpi-grid > div {
  min-height: 7rem;
  align-content: space-between;
}

.admin-compact-metrics > div,
.admin-section > .teacher-overview-metrics > div {
  min-height: 5.25rem;
}

.admin-kpi-grid dt,
.admin-compact-metrics dt,
.admin-section > .teacher-overview-metrics dt {
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
}

.admin-kpi-grid dd,
.admin-compact-metrics dd,
.admin-section > .teacher-overview-metrics dd {
  margin: var(--space-2) 0 0;
  color: var(--color-text-primary);
  font-size: var(--type-xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.admin-compact-metrics dd,
.admin-section > .teacher-overview-metrics dd {
  font-size: var(--type-lg);
}

.admin-center-panel .teacher-activity-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding: var(--space-4);
  gap: var(--space-3);
  align-items: end;
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-center-panel .teacher-activity-filters > button {
  align-self: end;
  justify-self: start;
}

.admin-period-switch {
  display: flex;
  flex-wrap: wrap;
  padding: var(--space-3);
  align-items: center;
  gap: var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-period-switch > span {
  margin-inline-end: auto;
  color: var(--color-text-secondary);
  font-size: var(--type-sm);
}

.admin-period-switch button {
  min-height: var(--touch-target-min);
  padding: 0.55rem 0.85rem;
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.admin-period-switch button[aria-pressed="true"] {
  border-color: var(--color-primary);
  color: #fff;
  background: var(--color-primary);
}

.admin-center-panel .teacher-activity-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--space-3);
}

.admin-center-panel .teacher-activity-list > li {
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-center-panel .teacher-activity-entry-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.admin-center-panel .teacher-activity-entry-heading strong {
  color: var(--color-text-primary);
  font-size: var(--type-body);
}

.admin-center-panel .teacher-statuses,
.admin-center-panel .teacher-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.admin-center-panel .teacher-detail-actions {
  margin-top: var(--space-3);
}

.admin-center-panel .admin-inline-detail {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

.admin-center-panel .admin-inline-detail .teacher-revision-form,
.admin-center-panel .admin-inline-detail .teacher-review-inline-form {
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-center-panel .teacher-revision-form,
.admin-center-panel .teacher-review-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding: var(--space-4);
  gap: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-center-panel .teacher-revision-form > .primary-button,
.admin-center-panel .teacher-review-inline-form > .primary-button {
  align-self: end;
  justify-self: start;
}

.admin-center-panel .primary-button {
  border-color: var(--color-primary);
  color: #fff;
  background: var(--color-primary);
}

.admin-center-panel .primary-button:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.admin-center-panel .answer-table-scroll {
  overflow-x: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-center-panel .answer-table-scroll table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
}

.admin-center-panel .answer-table-scroll :is(th, td) {
  padding: 0.75rem 0.8rem;
  border-bottom: var(--border-hairline);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.admin-center-panel .answer-table-scroll th {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
}

.admin-center-panel .answer-table-scroll tbody tr:last-child td {
  border-bottom: 0;
}

.admin-center-panel .empty-state {
  margin: 0;
  padding: var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-surface);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  text-align: center;
}

.admin-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.admin-plan-grid > section {
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-plan-grid .teacher-revision-form {
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-split-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  align-items: start;
}

.admin-split-column {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
  align-content: start;
}

.admin-center-panel .material-list-summary {
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-center-panel .material-list-summary p {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
}

.admin-invite-share {
  display: grid;
  min-width: 0;
  padding: var(--space-4);
  gap: var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.admin-invite-code {
  display: block;
  padding: var(--space-3);
  overflow-wrap: anywhere;
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  user-select: all;
}

@media (max-width: 72rem) {
  .admin-kpi-grid,
  .admin-compact-metrics,
  .admin-section > .teacher-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-overview-groups {
    grid-template-columns: 1fr;
  }

  .admin-kpi-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-plan-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 64rem) {
  .admin-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(19rem, 86vw);
    transform: translateX(-100%);
    transition: transform var(--motion-panel) var(--ease-panel);
  }

  .admin-sidebar-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-grid;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    place-items: center;
    border: 1px solid rgb(255 255 255 / 18%);
    border-color: rgb(255 255 255 / 18%);
    border-radius: var(--radius-control);
    color: var(--admin-sidebar-text);
    background: transparent;
    font-size: var(--type-lg);
  }

  .admin-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--layer-nav) - 1);
    display: block;
    border: 0;
    background: rgb(0 0 0 / 42%);
  }

  .admin-icon-button {
    display: inline-grid;
    place-items: center;
  }

  body.admin-navigation-open .admin-sidebar {
    transform: translateX(0);
  }

  .admin-topbar {
    gap: var(--space-3);
  }

  .admin-split-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .admin-sidebar #admin-center-tabs {
    display: grid;
    flex-wrap: initial;
    overflow-x: hidden;
  }

  .admin-content {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }

  .admin-topbar {
    padding-inline: var(--space-3);
  }

  .admin-breadcrumb > span:first-child,
  .admin-breadcrumb > span[aria-hidden="true"],
  .admin-topbar-actions > .secondary-button {
    display: none;
  }

  .admin-page-header,
  .admin-section-heading {
    display: grid;
  }

  .admin-page-header > button,
  .admin-section-heading > button {
    justify-self: start;
  }

  .admin-kpi-grid,
  .admin-compact-metrics,
  .admin-section > .teacher-overview-metrics {
    grid-template-columns: 1fr;
  }

  .admin-metric-list {
    grid-template-columns: 1fr;
  }

  .admin-utility-panel {
    right: auto;
    left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar,
  .admin-sidebar #admin-center-tabs [role="tab"] {
    transition: none;
  }
}

@media (forced-colors: active) {
  .admin-sidebar #admin-center-tabs [role="tab"][aria-selected="true"] {
    outline: 2px solid Highlight;
  }
}

/* UI-808 role experience polish. Keep the existing page contracts intact. */
.home-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5) var(--space-6);
}

.home-context-card {
  min-width: 0;
  border-block: var(--border-hairline);
  padding-block: var(--space-4);
}

.home-context:has(#home-continue-card[hidden]) .home-context-card:first-child {
  grid-column: 1 / -1;
}

.home-context-card h2 {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--type-section-title);
  line-height: 1.3;
}

.home-context-card p:not(.eyebrow) {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.home-context-card .text-button {
  min-height: var(--touch-target-min);
  margin-top: var(--space-2);
  padding-inline: 0;
}

.home-continue-card {
  border-inline-start: 3px solid var(--color-primary);
  padding-inline-start: var(--space-4);
}

[data-view="account"] .home-learning { margin-top: var(--space-5); }
[data-view="account"] .home-destinations { margin-top: var(--space-4); }

.account-plan-panel > summary {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  cursor: pointer;
}

.account-plan-panel > summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.account-plan-panel > summary strong {
  color: var(--color-text-primary);
  font-size: var(--type-section-title);
}

.account-plan-panel > summary > span:last-child {
  color: var(--color-action-text);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.account-plan-panel > summary::after {
  flex: 0 0 auto;
  content: "⌄";
  color: var(--color-text-muted);
  transition: transform 160ms var(--ease-panel);
}

.account-plan-panel[open] > summary::after { transform: rotate(180deg); }

.account-plan-body {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-2) var(--space-5);
}

.account-plan-body > .section-row {
  align-items: center;
  margin: 0;
}

.account-plan-body > .section-row > p {
  margin: 0;
  color: var(--color-text-secondary);
}

.wrongbook-return {
  min-height: var(--touch-target-min);
  margin-top: var(--space-3);
}

[data-view="teacher"] .teacher-file-browser {
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-4);
}

[data-view="teacher"] .teacher-folder-browser {
  padding-inline-end: var(--space-3);
}

[data-view="teacher"] .teacher-file-browser .document-filter-form {
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.38fr) auto;
  align-items: end;
}

[data-view="teacher"] .teacher-file-browser .document-search-field {
  grid-column: 1;
}

[data-view="teacher"] .teacher-file-browser .library-advanced-filters {
  grid-column: 1 / -1;
  grid-row: 2;
}

[data-view="teacher"] .teacher-file-browser .teacher-filter-actions {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  justify-content: flex-end;
}

.teacher-detail-tabs {
  position: relative;
  scroll-snap-type: inline proximity;
  scrollbar-color: var(--color-border-strong) transparent;
  mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
  padding-top: 1.4rem;
}

.teacher-detail-tabs [role="tab"] {
  position: relative;
  scroll-snap-align: start;
}

.teacher-detail-tabs [role="tab"][data-group-start="true"]::before {
  position: absolute;
  bottom: calc(100% + 0.1rem);
  left: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  content: attr(data-group-label);
}

.teacher-detail-tabs [role="tab"][data-tab-group="source"] {
  border-inline-start: var(--border-hairline);
}

.admin-content {
  padding-top: var(--space-5);
}

.admin-section-heading {
  align-items: center;
  margin-bottom: var(--space-2);
}

.admin-section-heading > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.admin-section-heading > button {
  align-self: center;
}

.admin-center-panel :where(
  input[type="search"],
  input[type="number"],
  input[type="text"],
  select
) {
  min-height: var(--touch-target-min);
  border: var(--border-control);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  font: inherit;
}

.admin-center-panel :where(
  .primary-button,
  .secondary-button,
  .quiet-button,
  button[data-bulk-action]
) {
  min-height: var(--touch-target-min);
}

.admin-overview-groups {
  gap: var(--space-2);
}

.admin-metric-group {
  min-width: 0;
}

.admin-metric-group > summary {
  min-height: var(--touch-target-min);
  padding-block: var(--space-2);
  cursor: pointer;
}

.admin-metric-list {
  grid-template-columns: minmax(0, 1fr);
}

.admin-metric-list > div {
  min-height: var(--touch-target-min);
  padding-block: var(--space-2);
  align-items: center;
}

.admin-period-switch button[aria-pressed="true"] {
  color: var(--color-canvas);
  background: var(--color-primary);
}

.admin-center-panel .primary-button {
  color: var(--color-canvas);
}

html[data-theme="dark"] [data-view="knowledge"] .knowledge-form .primary-button,
html[data-theme="dark"] [data-view="knowledge"] .knowledge-form .primary-button:hover:not(:disabled),
html[data-theme="dark"] [data-view="knowledge"] .knowledge-form .primary-button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-canvas);
  background: var(--color-primary);
}

html[data-theme="dark"] [data-view="knowledge"] .knowledge-form .primary-button:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

@media (max-width: 80rem) {
  [data-view="teacher"] .teacher-file-browser .document-filter-form {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.38fr);
  }

  [data-view="teacher"] .teacher-file-browser .teacher-filter-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  [data-view="teacher"] .teacher-file-browser .library-advanced-filters {
    grid-row: 3;
  }
}

@media (max-width: 72rem) {
  [data-view="teacher"] .teacher-file-browser {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  [data-view="teacher"] .teacher-folder-browser {
    border-inline-end: 0;
    border-bottom: var(--border-hairline);
    padding-inline-end: 0;
    padding-bottom: var(--space-3);
  }
}

@media (max-width: 48rem) {
  .home-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-continue-card {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .account-plan-panel > summary {
    min-height: 3.5rem;
  }

  .account-plan-panel > summary > span:last-child {
    display: none;
  }

  .teacher-detail-tabs [role="tab"][data-group-start="true"]::before {
    left: var(--space-2);
  }

  .admin-kpi-grid,
  .admin-compact-metrics,
  .admin-section > .teacher-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  [data-view="teacher"] .teacher-file-browser .document-filter-form {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-view="teacher"] .teacher-file-browser .document-search-field,
  [data-view="teacher"] .teacher-file-browser .teacher-filter-actions,
  [data-view="teacher"] .teacher-file-browser .library-advanced-filters {
    grid-column: 1;
  }

  [data-view="teacher"] .teacher-file-browser .teacher-filter-actions {
    grid-row: 2;
  }

  [data-view="teacher"] .teacher-file-browser .library-advanced-filters {
    grid-row: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-plan-panel > summary::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .account-plan-panel > summary::after,
  .teacher-detail-tabs [role="tab"][data-group-start="true"]::before {
    color: CanvasText;
  }

  .teacher-detail-tabs {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

.home-activity-action,
.wrongbook-return-button {
  min-height: var(--touch-target-min);
  border: 0;
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  color: var(--color-action-text);
  background: transparent;
  font: inherit;
  font-weight: var(--weight-medium);
  text-align: start;
  cursor: pointer;
}

.home-activity-action:hover,
.wrongbook-return-button:hover {
  background: var(--color-selected);
}

.wrongbook-return-button {
  align-self: start;
  margin-top: var(--space-2);
}

.teacher-status-projections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.teacher-status-projection {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: var(--border-hairline);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.teacher-status-projection[data-kind="teacher-workflow"][data-status="reading"],
.teacher-status-projection[data-kind="teacher-workflow"][data-status="organizing"],
.teacher-status-projection[data-kind="student-availability"][data-status="not_yet"] {
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
}

.teacher-status-projection[data-kind="teacher-workflow"][data-status="pending_review"],
.teacher-status-projection[data-kind="student-availability"][data-status="using_previous_version"] {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
}

.teacher-status-projection[data-kind="teacher-workflow"][data-status="failed"],
.teacher-status-projection[data-kind="student-availability"][data-status="processing_failed"],
.teacher-status-projection[data-kind="student-availability"][data-status="temporarily_unavailable"] {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

.teacher-status-projection[data-kind="student-availability"][data-status="can_reference"],
.teacher-status-projection[data-kind="teacher-workflow"][data-status="active"] {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

.teacher-curated-card .teacher-status-projections {
  order: -1;
}

.admin-metric-group {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.admin-metric-group-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
}

.admin-metric-group-count {
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-regular);
}

.admin-metric-group > .admin-metric-list {
  margin-top: var(--space-2);
}

.admin-attention {
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
  background: var(--color-surface);
}

.admin-attention > h5 {
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--type-body);
}

.admin-attention-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-attention-item {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: var(--border-hairline);
}

.admin-attention-item:first-child { padding-top: 0; }
.admin-attention-item:last-child { border-bottom: 0; padding-bottom: 0; }

.admin-attention-item[data-kind="failed"] {
  border-inline-start: 3px solid var(--color-error);
  padding-inline-start: var(--space-3);
}

.admin-attention-item[data-kind="pending"] {
  border-inline-start: 3px solid var(--color-warning);
  padding-inline-start: var(--space-3);
}

.admin-attention-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.admin-attention-heading strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.admin-attention-value {
  color: var(--color-text-secondary);
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
}

.admin-attention-detail {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-sm);
  line-height: 1.6;
}

.admin-attention-normal {
  margin: 0;
  color: var(--color-success);
  font-weight: var(--weight-medium);
}

.admin-attention-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  color: var(--color-text-muted);
  font-size: var(--type-xs);
}

.admin-attention-context > div {
  display: flex;
  gap: var(--space-2);
}

.admin-attention-context dt,
.admin-attention-context dd { margin: 0; }

.admin-switch-impact {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  padding: var(--space-3);
  background: var(--color-surface-muted);
}

.admin-switch-impact > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
}

.admin-switch-impact dt {
  color: var(--color-text-muted);
  font-size: var(--type-xs);
}

.admin-switch-impact dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-sm);
  line-height: 1.55;
}

.admin-audit-main-row {
  display: grid;
  grid-template-columns:
    minmax(7rem, 0.75fr)
    minmax(8rem, 0.8fr)
    minmax(9rem, 1fr)
    minmax(13rem, 1.5fr)
    auto;
  gap: var(--space-3);
  align-items: start;
  margin: 0;
}

.admin-audit-main-row > div {
  min-width: 0;
}

.admin-audit-main-row dt {
  color: var(--color-text-muted);
  font-size: var(--type-xs);
}

.admin-audit-main-row dd {
  margin: var(--space-1) 0 0;
  color: var(--color-text-primary);
  font-size: var(--type-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-audit-result dd {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  background: var(--color-surface-muted);
  font-weight: var(--weight-medium);
}

.admin-audit-result[data-kind="ready"] dd {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

.admin-audit-result[data-kind="pending"] dd {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
}

.admin-audit-result[data-kind="failed"] dd {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

.admin-audit-technical {
  margin-top: var(--space-3);
  border-top: var(--border-hairline);
  padding-top: var(--space-2);
}

.admin-audit-technical > summary {
  min-height: var(--touch-target-min);
  padding-block: var(--space-2);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--type-sm);
}

@media (max-width: 64rem) {
  .admin-audit-main-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-audit-main-row > div:nth-child(4),
  .admin-audit-main-row > div:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 48rem) {
  .admin-audit-main-row,
  .admin-switch-impact > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-audit-main-row > div {
    grid-column: 1;
  }
}

.parity-switch {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  width: 38px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  flex: 0 0 38px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 32%, var(--surface));
  transition: background 160ms ease;
  cursor: pointer;
  vertical-align: middle;
}

.parity-switch::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #00000033;
  transition: transform 160ms ease;
}

.parity-switch:checked {
  background: var(--accent);
}

.parity-switch:checked::after {
  transform: translateX(16px);
}

.parity-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}