/* Shared product finish. Color lives in tokens.css; hierarchy lives here.
   Corners come from the tokens.css scale on every surface (Work Plan item 113),
   so this file no longer overrides --r, --r-sm or --r-btn. */
body { --font-body: var(--font-sans); }
/* Plain links keep the product colour after a visit. Low specificity lets
   navigation and button links retain their own foreground colours. */
:where(a[href], a[href]:visited) { color: var(--c-accent-ink); text-underline-offset: .22em; }
h1 { font-weight: 650; }
.btn { --btn-lift: 1px; letter-spacing: 0; font-family: var(--font-sans); font-weight: 600; }
.btn-go, .btn-primary { --btn-face: var(--action); --btn-ink: var(--action-ink); }
.btn-danger { --btn-face: var(--danger-action); --btn-ink: var(--ink-on-deep); }
.btn:hover:not(:disabled), .btn-quiet:hover, .btn-solid-quiet:hover { filter: none; }
.btn:hover:not(:disabled) { opacity: .9; }
.btn-quiet, .btn-icon, .btn-solid-quiet {
  font-family: var(--font-sans); font-weight: 500; box-shadow: none;
  background: var(--card); border: 1px solid var(--border-strong); color: var(--fg);
}
.btn-solid-quiet { background: var(--action); color: var(--action-ink); border-color: transparent; }
.btn-quiet:hover, .btn-icon:hover { background: var(--surface-hover); }
.btn-quiet:active, .btn-icon:active, .btn-solid-quiet:active { box-shadow: none; transform: translateY(1px); }
.btn-quiet:focus-visible, .btn-icon:focus-visible, .btn-solid-quiet:focus-visible { box-shadow: 0 0 0 var(--ring-w) var(--ring); }
.t-input, .t-textarea, .q-text, .kp-input, .rv-mark-input, .rv-fb-input, select {
  background: var(--field); color: var(--fg); border-color: var(--border-strong);
  font-family: var(--font-sans); border-width: 1px; box-shadow: none;
}
.t-input::placeholder, .t-textarea::placeholder, input::placeholder, textarea::placeholder { color: var(--fg-muted); opacity: 1; }
.mic { background: var(--action); color: var(--action-ink); box-shadow: 0 2px 0 var(--under-teal); }
.mic.is-live { background: var(--danger-action); color: var(--ink-on-deep); box-shadow: 0 2px 0 var(--under-berry); }
.mic:focus-visible { box-shadow: 0 2px 0 var(--under-teal), 0 0 0 var(--ring-w) var(--ring); }
.word.is-hit { background: color-mix(in srgb, var(--c-grass) 10%, var(--card)); color: var(--c-grass-deep); }
.word.is-near { background: color-mix(in srgb, var(--c-gold) 12%, var(--card)); color: var(--c-gold-deep); }
.word.is-miss { background: color-mix(in srgb, var(--c-berry) 10%, var(--card)); color: var(--c-alert); }
.rec-chip { background: transparent; border-color: var(--border); color: var(--fg-muted); }
.gate { max-width: 960px; padding-top: clamp(2rem, 7vh, 5rem); }
.gate-mark { width: 58px; height: 88px; margin-bottom: var(--sp-16); }
.gate-title { font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -.022em; }
.gate-cards { gap: var(--sp-24); }
.gate-card { box-shadow: none; padding: clamp(1.25rem, 3vw, 2rem); }
.gate-card-title { font-size: var(--fs-20); }
.gate-sub { max-width: 34rem; margin-left: auto; margin-right: auto; }
.modal { box-shadow: var(--shadow-modal); }
.modal-list, .profile-static { background: var(--bg-soft); }
.theme-btn.is-on { background: var(--accent-soft); color: var(--c-accent-ink); border-color: var(--c-teal); }

/* Teacher frame: identity, work navigation, account. */
.t-head { gap: var(--sp-16); padding: var(--sp-16) var(--sp-24); background: var(--card); flex-wrap: nowrap; }
.workspace-brand { display: flex; align-items: center; gap: var(--sp-8); text-decoration: none; color: var(--fg); flex: none; }
.workspace-brand span { font: 650 var(--fs-20) var(--font-head); letter-spacing: -.025em; }
.workspace-brand img { border-radius: var(--r-sm); }
.workspace-heading { min-width: 0; padding-left: var(--sp-16); border-left: 1px solid var(--border); }
.workspace-heading h1 { font-size: var(--fs-18); line-height: 1.3; }
.workspace-heading p { margin: var(--sp-4) 0 0; color: var(--fg-muted); font-size: var(--fs-13); }
.t-tabs { margin-left: auto; border: 0; background: var(--bg-soft); padding: var(--sp-4); flex: none; }
.t-tab { min-height: 38px; padding: var(--sp-8) var(--sp-16); font-family: var(--font-sans); font-size: var(--fs-13); }
.t-tab.is-active { box-shadow: var(--shadow-lift); }
/* The active tab's surface is one thumb that slides to the tab chosen
   (classes.js places it), instead of each tab painting its own. Without the
   script, .has-thumb never lands and each tab keeps its own surface. */
.t-tabs { position: relative; }
.t-tabs-thumb { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: var(--r-xs); background: var(--card); box-shadow: var(--shadow-lift); pointer-events: none; opacity: 0; }
.t-tabs.has-thumb .t-tabs-thumb { opacity: 1; }
.t-tabs.has-thumb .t-tab { position: relative; z-index: 1; }
.t-tabs.has-thumb .t-tab.is-active { background: transparent; box-shadow: none; }
.t-tabs.has-thumb .t-tab.is-active:focus-visible { box-shadow: 0 0 0 var(--ring-w) var(--ring); }
@media (prefers-reduced-motion: no-preference) {
  .t-tabs.is-sliding .t-tabs-thumb { transition: transform .2s var(--ease-out), width .2s var(--ease-out); }
  .t-tab { transition: color .15s ease; }
}
.t-account { margin-left: 0; }
.workspace-theme { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-btn); background: transparent; color: var(--fg-muted); cursor: pointer; }
.workspace-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.workspace-theme:hover { background: var(--surface-hover); color: var(--fg); }
.workspace-theme.is-dark { color: var(--c-accent-ink); }
.t-side { background: var(--bg); padding: var(--sp-24) var(--sp-16); }
.t-side .t-label, .t-unit-toggle { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }
.t-side .t-label { font-size: var(--fs-13); color: var(--fg-muted); }
.t-side-head { margin-bottom: var(--sp-16); }
.t-folder { background: transparent; border: 1px solid transparent; padding: .75rem; padding-right: 2.5rem; min-height: 58px; box-shadow: none; border-radius: var(--r-sm); }
.t-folder:hover { background: var(--surface-hover); border-color: transparent; }
.t-folder.is-open { border-color: transparent; background: var(--accent-soft); box-shadow: inset 3px 0 var(--c-teal); }
.t-folder-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.4;
  font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 600;
}
.t-folder-meta { margin-top: var(--sp-4); font-size: var(--fs-13); font-weight: 400; }
.t-help { background: transparent; box-shadow: none; }
.t-help-head { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: var(--fs-13); }
.t-foot { background: var(--card); padding: var(--sp-8) var(--sp-24); gap: var(--sp-8); box-shadow: none; }
.t-foot-note { margin: 0; font-family: var(--font-sans); font-size: var(--fs-13); }
/* Same pill in every state — green, amber, red — so the eye finds "Saved"
   where it last saw "Saving". The tint comes from styles.css per state. */
.save-flag { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-13); text-transform: none; letter-spacing: 0; }
.workspace-services { position: relative; margin-left: auto; font: var(--fs-13) var(--font-sans); color: var(--fg-muted); }
.workspace-services summary { cursor: pointer; min-height: 30px; display: flex; align-items: center; gap: var(--sp-8); }
.workspace-services summary::after { content: '+'; }
.workspace-services[open] summary::after { content: '−'; }
.workspace-services .t-status { position: absolute; right: 0; bottom: calc(100% + 1rem); background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-16); box-shadow: var(--shadow-pop); width: 270px; z-index: 20; display: grid; gap: var(--sp-8); }
.t-pill, .t-pill.is-ok, .t-pill.is-off, .t-pill.is-err { background: transparent; border: 0; color: var(--fg-muted); font-family: var(--font-sans); }
.t-status-note { background: var(--card); padding: 0 var(--sp-24) var(--sp-8); color: var(--c-gold-deep); font: var(--fs-13)/1.5 var(--font-sans); }

/* Classwork is the focal point; roster administration follows it. */
#t-class-scroll { padding: var(--sp-32) clamp(var(--sp-16), 3vw, var(--sp-48)); }
.cls-empty-state {
  display: grid; justify-items: center; align-content: center; gap: 0;
  min-height: clamp(17rem, 45vh, 28rem); padding: var(--sp-32) var(--sp-16); text-align: center;
}
.cls-empty-icon { width: 56px; height: 56px; fill: none; stroke: var(--fg-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cls-empty-state h2 { margin: 0; color: var(--fg); font: 650 clamp(1.3rem, 2.5vw, 1.6rem)/1.3 var(--font-head); letter-spacing: -.02em; }
.cls-empty-create { min-height: 46px; padding: .75rem 1.25rem; }
.cls-empty-create svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cls-create-status { max-width: 24rem; margin: 0; color: var(--fg-muted); font: var(--fs-14)/1.5 var(--font-sans); overflow-wrap: anywhere; }
.cls-create-status.is-error { color: var(--c-alert); }
.cls-create-status-side { padding: 0 var(--sp-16) var(--sp-16); }
.cls-create-status-side:empty { padding: 0; }
.cls-empty-state > :not(:first-child):not(:empty) { margin-top: var(--sp-16); }
.cls-head, .cls-grid { max-width: 76rem; }
.cls-head { margin-bottom: var(--sp-32); align-items: center; }
.cls-title { font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -.025em; }
.cls-code { background: var(--card); border: 1px solid var(--border); font-size: var(--fs-20); letter-spacing: .16em; border-radius: var(--r-btn); padding: .75rem var(--sp-16); }
.cls-code-hint { max-width: 20rem; font-size: var(--fs-13); }
.cls-grid { gap: var(--sp-24); }
.cls-card { padding: var(--sp-24); border-radius: var(--r); box-shadow: none; }
.cls-card-head { font: 650 var(--fs-18) var(--font-head); text-transform: none; letter-spacing: -.01em; color: var(--fg); margin-bottom: var(--sp-16); }
.cls-warn { background: var(--bg-soft); border-left: 2px solid var(--c-gold); color: var(--fg-muted); font-size: var(--fs-13); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.cls-warn b { color: var(--fg); }
/* These labels drop the uppercase tracking styles.css gives them, so they also
   leave the 12px size that only an uppercase label may use (item 115). */
.cls-assign-table th, .cls-formula-label { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }
.cls-assign-table thead th { font-size: var(--fs-13); }
.cls-consent.is-granted { background: var(--field); color: var(--c-grass-deep); border-color: var(--border-strong); }
.review-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); flex-wrap: wrap; margin-bottom: var(--sp-24); }
.review-summary { font-size: var(--fs-14); color: var(--fg-muted); margin: 0; }
.review-filters { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.review-filter { font: 500 var(--fs-13) var(--font-sans); background: transparent; color: var(--fg-muted); padding: var(--sp-8) .75rem; min-height: 38px; border: 1px solid var(--border); border-radius: var(--r-btn); cursor: pointer; }
.review-filter[aria-pressed="true"] { background: var(--accent-soft); color: var(--c-accent-ink); border-color: var(--c-teal); }
.review-filter:hover { background: var(--surface-hover); }
.cls-formula { margin-bottom: var(--sp-16); }
.cls-formula-label, .cls-formula-note { font-size: var(--fs-13); }
.cls-results-list { max-width: none; }
.cls-result-row.is-figures { grid-template-columns: minmax(7rem, 1fr) 6.3rem 5rem 10rem 3rem; gap: var(--sp-16); padding: var(--sp-16) 0; align-items: center; }
.cls-result-row.is-head { font-size: var(--fs-13); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
.cls-col-head, .cls-formula .mono-label { font-family: var(--font-sans); font-size: var(--fs-13); text-transform: none; letter-spacing: 0; }
.cls-result-name { font-size: var(--fs-14); font-weight: 500; }
.cls-result-score { gap: var(--sp-16); }
.cls-score-part { min-width: 4.5rem; font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 500; }
.cls-result-pending { color: var(--fg-muted); font-family: var(--font-sans); font-size: var(--fs-13); }
.cls-attempts-toggle { font: 500 var(--fs-13) var(--font-sans); color: var(--c-accent-ink); border: 1px solid var(--border); border-radius: var(--r-btn); min-height: 36px; text-decoration: none; padding: var(--sp-8); white-space: nowrap; }
.is-figures .cls-attempts-toggle { text-align: center; }
.cls-result-row.is-head > .cls-col-head:nth-child(2),
.cls-result-row.is-head > .cls-col-head:nth-child(3),
.cls-result-row.is-figures > .cls-result-pending,
.cls-result-row.is-figures > .cls-empty { text-align: center; }
.cls-attempts-toggle:hover, .cls-attempts-toggle[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--c-teal); }
.cls-listen-slot { width: auto; }
.cls-listen { min-height: 36px; }
.cls-attempts { background: var(--bg-soft); padding: var(--sp-24); border: 1px solid var(--border); border-radius: var(--r-sm); margin: var(--sp-8) 0 var(--sp-16); }
.review-panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); margin-bottom: var(--sp-24); }
.review-panel-head h4 { font: 650 var(--fs-18) var(--font-head); margin: 0; }
.cls-attempt-qtext { font: 600 var(--fs-16)/1.5 var(--font-head); color: var(--fg); margin: var(--sp-16) 0 var(--sp-8); }
.cls-attempt-seq { gap: var(--sp-16); }
.cls-attempt-item { background: var(--card); padding: var(--sp-24); border: 1px solid var(--border); border-radius: var(--r-sm); }
.rv-label { font: 500 var(--fs-13) var(--font-sans); color: var(--fg-muted); text-transform: none; letter-spacing: 0; margin-bottom: var(--sp-8); }
.rv-head { margin-bottom: var(--sp-16); }
.rv-state { background: transparent; text-transform: none; letter-spacing: 0; font: var(--fs-13) var(--font-sans); border: 0; padding: var(--sp-4) 0; }
.rv-said { font: 400 var(--fs-16)/1.7 var(--font-sans); color: var(--fg); border-left: 2px solid var(--border-strong); padding: var(--sp-4) 0 var(--sp-4) var(--sp-16); margin: 0 0 var(--sp-16); }
.rv-missed { color: var(--fg-muted); margin-bottom: var(--sp-16); }
.rv-aifb { font-size: var(--fs-13); line-height: 1.6; }
.rv-suggested { background: var(--bg-soft); padding: var(--sp-16); border-radius: var(--r-sm); margin: var(--sp-16) 0 var(--sp-24); }
.rv-figure { font-family: var(--font-sans); }
.rv-decision-title { font: 650 var(--fs-16) var(--font-head); margin: 0 0 var(--sp-16); }
.rv-form { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-16); margin-bottom: var(--sp-16); }
.rv-mark-input, .rv-fb-input { min-height: 44px; padding: .75rem; font-size: var(--fs-14); }
.rv-acts { gap: var(--sp-8); }
.rv-acts .btn-mini { min-height: 38px; }

@media (min-width: 821px) {
  .t-split { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .workspace-heading p { display: none; }
  .workspace-heading { padding-left: var(--sp-16); }
  .t-head { padding: var(--sp-16); gap: var(--sp-8); }
  .workspace-brand span { display: none; }
  .cls-result-row.is-figures { grid-template-columns: minmax(5rem, 1fr) 5.5rem 4rem 8rem 2rem; gap: var(--sp-8); }
  .cls-result-score { gap: var(--sp-8); }
  .cls-score-part { min-width: 3.75rem; }
}
@media (max-width: 820px) {
  .t-head { flex-wrap: wrap; }
  .workspace-heading { flex: 1; }
  .t-tabs { order: 5; flex-basis: 100%; margin: 0; }
  .t-tab { flex: 1; min-height: 44px; }
  .t-side { padding: var(--sp-16); }
  .t-folders { max-height: 230px; overflow-y: auto; }
  .t-help { margin-top: var(--sp-16); }
  #t-class-scroll { padding: var(--sp-24) var(--sp-16); }
  .t-foot { padding: var(--sp-8) var(--sp-16); flex-wrap: wrap; }
  .t-foot-note { font-size: var(--fs-13); }
  .t-status-note { padding-left: var(--sp-16); padding-right: var(--sp-16); }
  .cls-head-code { align-items: flex-start; }
  .cls-card { padding: var(--sp-16); }
}
@media (max-width: 640px) {
  .workspace-heading h1 { font-size: var(--fs-16); }
  .t-head .info-btn { display: none; }
  .cls-head { margin-bottom: var(--sp-16); }
  .cls-result-row.is-figures { grid-template-columns: minmax(0, 1fr) 6.2rem 4.4rem; gap: var(--sp-8); }
  .cls-result-score { grid-column: 1 / 3; display: flex; gap: var(--sp-16); }
  .cls-score-part { text-align: left; min-width: 0; }
  .cls-result-row:not(.is-head) .cls-score-part::before { content: 'Content '; color: var(--fg-muted); font-size: var(--fs-13); }
  .cls-result-row:not(.is-head) .cls-score-part + .cls-score-part::before { content: 'Spoken '; }
  .cls-result-row.is-head .cls-result-score, .cls-result-row.is-head .cls-listen-slot { display: none; }
  .cls-listen-slot { grid-column: 3; }
  .cls-result-row.is-head { font-size: var(--fs-13); }
  .cls-attempts {
    padding: var(--sp-16) 0 0; margin-top: var(--sp-16); background: transparent;
    border: 0; border-top: 1px solid var(--border); border-radius: 0;
  }
  .cls-attempt-item { padding: var(--sp-16); }
  .review-panel-head { align-items: flex-start; }
  .review-panel-head h4 { font-size: var(--fs-16); }
  .rv-form { grid-template-columns: minmax(0, 1fr); }
  .rv-mark-input { max-width: 8rem; }
  .review-filter, .cls-attempts-toggle { min-height: 44px; }
  #t-class-detail .btn-mini, #t-class-detail .select-wrap select { min-height: 44px; }
  #t-class-detail .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
  .gate-cards { gap: var(--sp-16); }
  .gate-form { flex-wrap: wrap; }
  .gate-form input { width: 100%; flex-basis: 100%; }
  .gate-form button { width: 100%; }
}