/* Shared learner website frame (Study, Saved, Progress, Account) and the Saved /
   Progress pages. Roles come from mingbai-tokens.css. */

/* Frame: brand, navigation and content share one centred axis. */
.page-shell > .site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mb-space-5);
  width: min(var(--mb-frame), calc(100% - 2 * var(--mb-gutter)));
  margin-inline: auto;
  padding: 24px 0 0;
}
.site-logo { display: block; width: auto; height: 44px; }
.site-nav { display: flex; gap: clamp(14px, 2.4vw, 28px); font: 400 var(--mb-ui-m)/1.4 var(--mb-font-ui); }
.site-nav a { padding: 6px 0 4px; border-bottom: 2px solid transparent; color: var(--mb-ink-secondary); }
.site-nav a:hover { color: var(--mb-ink); }
.site-nav a[aria-current="page"] { color: var(--mb-ink); border-bottom-color: var(--mb-accent); font-weight: 500; }
.site-footer { font-family: var(--mb-font-ui); font-size: var(--mb-ui-s); }

.study-main { padding: 0 var(--mb-gutter) var(--mb-space-8); }
.study-shell,
.portal-shell { width: min(var(--mb-frame), 100%); }
.page-main .account-card { width: min(var(--mb-frame), 100%); }

/* Keyboard-only focus; programmatic and pointer focus stay quiet. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { border-radius: 4px; outline: 2px solid var(--mb-focus); outline-offset: 2px; }

/* Shared eyebrow / label role */
.kicker { color: var(--mb-accent); font: 500 12px/1.4 var(--mb-font-ui); letter-spacing: .1em; text-transform: uppercase; }

/* Page head: a modest title, not a landing-page hero. */
.learner-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mb-space-3) var(--mb-space-5);
  margin: var(--mb-space-7) 0 var(--mb-space-6);
}
.learner-title { max-width: none; margin: 0; color: var(--mb-ink); font: 400 40px/1.1 var(--mb-font-display); letter-spacing: -.005em; }
/* Editorial mark: a short cinnabar rule over each learner page title. */
.learner-title::before,
.study-landing .study-landing-title::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: var(--mb-space-4); background: var(--mb-accent); }
.learner-page-sub { margin: var(--mb-space-2) 0 0; color: var(--mb-ink-muted); font: 400 var(--mb-ui-m)/1.45 var(--mb-font-ui); }

/* Actions */
.learner-text-action,
.saved-remove {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mb-action-tertiary-fg);
  cursor: pointer;
  font: 500 var(--mb-ui-m)/1.4 var(--mb-font-ui);
  text-decoration: underline;
  text-decoration-color: var(--mb-link-underline);
  text-underline-offset: 4px;
}
.learner-text-action:hover { color: var(--mb-ink); text-decoration-color: var(--mb-accent); }
.portal-export::before { content: "↓\00a0"; }
.saved-remove { color: var(--mb-ink-muted); font-weight: 400; text-decoration-color: transparent; }
.saved-remove:hover, .saved-remove:focus-visible { color: var(--mb-ink); text-decoration-color: currentColor; }
.saved-remove:disabled, .portal-action:disabled { cursor: progress; opacity: .55; }
.learner-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--mb-link); font: 500 var(--mb-ui-m)/1.4 var(--mb-font-ui); text-decoration: underline; text-decoration-color: var(--mb-link-underline); text-underline-offset: 4px; }
.learner-link:hover { text-decoration-color: var(--mb-accent); }
.learner-link[target="_blank"]::after { content: "\00a0↗"; }

/* States replace only the content region; no card. */
.learner-state { max-width: 36em; padding: var(--mb-space-2) 0 0; }
.learner-state h2 { margin: 0; color: var(--mb-ink); font: 400 28px/1.2 var(--mb-font-display); }
.learner-state p { margin: var(--mb-space-3) 0 0; color: var(--mb-ink-secondary); font: 400 var(--mb-text-m)/1.6 var(--mb-font-reading); }
.learner-state .btn { margin-top: var(--mb-space-5); }
.learner-state[data-tone="attention"] { padding-left: var(--mb-space-4); border-left: 2px solid var(--mb-error); }
.portal-view[data-busy="true"] .learner-state h2 { color: var(--mb-ink-muted); font: 400 var(--mb-ui-m)/1.45 var(--mb-font-ui); }
.portal-status { margin: 0; color: var(--mb-ink-secondary); font: 400 var(--mb-ui-m)/1.45 var(--mb-font-ui); }
.portal-status:empty { display: none; }
.portal-status:not(:empty) { margin-bottom: var(--mb-space-5); padding-left: var(--mb-space-3); border-left: 2px solid var(--mb-rule); }

/* Chinese text */
.saved-surface, .saved-context { line-break: strict; text-wrap: pretty; overflow-wrap: anywhere; }
.zh-keep { white-space: nowrap; }

/* Saved: grouped by source */
.saved-groups { display: grid; gap: var(--mb-space-6); }
.saved-group { padding-top: var(--mb-space-4); border-top: 1px solid var(--mb-hairline); }
.saved-group-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 var(--mb-space-4); margin-bottom: var(--mb-space-1); }
.saved-group-titles { min-width: 0; }
.saved-group-title { margin: 0; color: var(--mb-ink); font: 600 var(--mb-text-l)/1.4 var(--mb-font-reading); overflow-wrap: anywhere; }
.saved-group.is-ungrouped .saved-group-title { color: var(--mb-ink-secondary); font-weight: 500; }
.saved-group-meta, .saved-meta { display: flex; flex-wrap: wrap; margin: var(--mb-space-1) 0 0; color: var(--mb-ink-muted); font: 400 var(--mb-ui-s)/1.4 var(--mb-font-ui); font-variant-numeric: tabular-nums; }
.saved-group-meta > span, .saved-meta > span { white-space: nowrap; }
.saved-group-meta > span + span::before, .saved-meta > span + span::before { content: "·"; margin: 0 7px; }
.saved-group-open { margin-top: -10px; white-space: nowrap; }
.saved-list { margin: 0; padding: 0; list-style: none; }
.saved-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mb-space-5); padding: 20px 0; border-top: 1px solid var(--mb-hairline-soft); }
.saved-item:first-child { border-top: 0; }
.saved-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--mb-space-3); margin: 0; font-weight: 400; }
.saved-surface { color: var(--mb-ink); font: 500 var(--mb-zh-m)/1.3 var(--mb-font-zh); }
.saved-item.is-line .saved-surface { font-size: var(--mb-zh-s); font-weight: 400; line-height: 1.6; }
.saved-pinyin { color: var(--mb-ink-muted); font: 400 16px/1.5 var(--mb-font-pinyin); }
.saved-meaning { margin: var(--mb-space-1) 0 0; color: var(--mb-ink); font: 400 var(--mb-text-m)/1.55 var(--mb-font-reading); }
.saved-context { margin: var(--mb-space-3) 0 0; color: rgba(26, 22, 20, .78); font: 400 var(--mb-zh-xs)/1.7 var(--mb-font-zh); }
.saved-target { background: none; color: var(--mb-target); text-decoration: underline; text-decoration-color: var(--mb-target-underline); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.saved-meta { margin-top: var(--mb-space-2); }
.saved-actions { display: flex; flex-direction: column; align-items: flex-end; margin-top: -10px; }

/* Progress: two independent counts first, then where they sit by HSK level. */
.portal-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--mb-space-7); border-block: 1px solid var(--mb-hairline); }
.portal-stat { padding: var(--mb-space-5) var(--mb-space-5) var(--mb-space-5) 0; }
.portal-stat + .portal-stat { padding-left: var(--mb-space-5); border-left: 1px solid var(--mb-hairline); }
.portal-stat strong { display: block; color: var(--mb-ink); font: 400 64px/1 var(--mb-font-display); font-variant-numeric: tabular-nums; }
.portal-stat-label { display: block; margin-top: var(--mb-space-2); color: var(--mb-ink); font: 500 var(--mb-ui-m)/1.4 var(--mb-font-ui); }
.portal-stat-detail { display: block; margin-top: 2px; color: var(--mb-ink-muted); font: 400 var(--mb-ui-s)/1.4 var(--mb-font-ui); }
.hsk-section h2 { margin: 0 0 var(--mb-space-2); color: var(--mb-ink); font: 400 28px/1.2 var(--mb-font-display); }
.hsk-table { width: 100%; border-collapse: collapse; font-family: var(--mb-font-ui); font-size: var(--mb-ui-m); text-align: left; }
.hsk-table th, .hsk-table td { padding: 12px 4px; border-bottom: 1px solid var(--mb-hairline-soft); }
.hsk-table thead th { padding-block: 8px; color: var(--mb-ink-muted); font-size: 12px; font-weight: 500; }
.hsk-table tbody th { color: var(--mb-ink); font-weight: 500; }
.hsk-table td { width: 22%; color: var(--mb-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.hsk-table td:not(:first-child), .hsk-table th:not(:first-child) { text-align: right; }
.hsk-quiet { margin: var(--mb-space-3) 0 0; color: var(--mb-ink-muted); font: 400 var(--mb-ui-s)/1.5 var(--mb-font-ui); }
.portal-note { margin: var(--mb-space-4) 0 0; color: var(--mb-ink-muted); font: 400 var(--mb-ui-s)/1.5 var(--mb-font-ui); }
.portal-note summary { display: flex; min-height: 44px; align-items: center; width: fit-content; color: var(--mb-ink-secondary); cursor: pointer; font-weight: 500; text-decoration: underline; text-decoration-color: var(--mb-link-underline); text-underline-offset: 4px; }
.portal-note summary:hover { color: var(--mb-ink); text-decoration-color: var(--mb-accent); }
.portal-note p { max-width: 44em; margin: 0; }
.progress-steps { display: grid; gap: var(--mb-space-4); margin: var(--mb-space-5) 0 0; padding: 0; list-style: none; counter-reset: progress-step; }
.progress-steps li { position: relative; padding-left: 40px; color: var(--mb-ink-secondary); font: 400 var(--mb-text-m)/1.55 var(--mb-font-reading); counter-increment: progress-step; }
.progress-steps li::before { position: absolute; top: -4px; left: 0; content: counter(progress-step); color: var(--mb-accent); font: italic 400 28px/1 var(--mb-font-display); }
.progress-step-lead { color: var(--mb-ink); }

@media (max-width: 680px) {
  .page-shell > .site-header { flex-wrap: wrap; gap: 6px 14px; padding-top: 16px; }
  .site-logo { height: 36px; }
  .site-nav { flex-wrap: wrap; gap: 0 18px; }
  .site-nav a { padding-block: 10px 6px; }
  .learner-page-head { margin: var(--mb-space-6) 0 var(--mb-space-5); }
  .learner-title { font-size: 32px; }
  .saved-groups { gap: var(--mb-space-5); }
  .saved-group-open { margin-top: 0; }
  .saved-item { grid-template-columns: 1fr; gap: 0; }
  .saved-surface { font-size: 26px; }
  .saved-context { font-size: 17px; line-height: 1.65; }
  .saved-actions { flex-direction: row; justify-content: space-between; align-items: center; margin-top: var(--mb-space-1); }
  .saved-actions .saved-remove:only-child { margin-left: auto; }
  .portal-stat { padding: var(--mb-space-4) var(--mb-space-3) var(--mb-space-4) 0; }
  .portal-stat + .portal-stat { padding-left: var(--mb-space-4); }
  .portal-stat strong { font-size: 52px; }
  .hsk-table th, .hsk-table td { padding: 11px 2px; }
}

/* Study entry uses the same modest page title. */
.study-landing .study-landing-title { max-width: none; font-size: 40px; line-height: 1.1; }
.study-zh .zh-keep { white-space: nowrap; }
@media (max-width: 680px) { .study-landing .study-landing-title { font-size: 32px; } }
.study-main:not(.portal-main) { padding-top: var(--mb-space-6); }
/* A target is one token: it never breaks across lines. */
.study-target, .saved-target { white-space: nowrap; }

/* Round 2 shared control contract — mirrored in the extension paper adapter.
   Additive mb-* classes let later surfaces adopt this without replacing handlers.
   No generated seal: website Saved remains a calm collection. */
.mb-control {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mb-space-2); min-height: var(--mb-control-height);
  box-sizing: border-box; padding: var(--mb-space-2) var(--mb-space-4);
  border: 1px solid var(--mb-control-border); border-radius: var(--mb-control-radius);
  background: transparent; color: var(--mb-ink); cursor: pointer;
  font: 500 var(--mb-ui-m)/1.35 var(--mb-font-controls);
  text-align: center; text-decoration: none; white-space: normal;
}
.mb-control--primary { background: var(--mb-action-primary-bg); color: var(--mb-action-primary-fg); border-color: var(--mb-action-primary-bg); }
.mb-control--secondary { border-color: var(--mb-action-secondary-border); color: var(--mb-action-secondary-fg); }
.mb-control--tertiary { border-color: transparent; color: var(--mb-action-tertiary-fg); text-decoration: underline; text-underline-offset: 3px; }
.mb-control--primary:hover { background: var(--mb-action-primary-bg-hover); border-color: var(--mb-action-primary-bg-hover); }
.mb-control--secondary:hover { background: var(--mb-action-secondary-bg-hover); }
.mb-control--tertiary:hover { color: var(--mb-accent); }
.mb-control--save { background: var(--mb-save-bg); color: var(--mb-save-fg); border-color: var(--mb-save-border); }
.mb-control--save:hover { background: var(--mb-accent-soft); }
.mb-control--save[aria-pressed="true"] { background: var(--mb-save-active-bg); color: var(--mb-save-active-fg); border-color: var(--mb-save-border); }
.mb-choice[aria-pressed="true"], .mb-choice[aria-selected="true"] { background: var(--mb-selection-bg); color: var(--mb-selection-fg); border-color: var(--mb-selection-border); box-shadow: inset 0 -2px var(--mb-selection-border); }
.mb-control:focus-visible, .mb-choice:focus-visible { outline: var(--mb-focus-width) solid var(--mb-focus); outline-offset: var(--mb-focus-offset); }
.mb-control:disabled, .mb-control[aria-disabled="true"] { opacity: .55; cursor: default; }
.mb-control--primary:disabled:hover, .mb-control--primary[aria-disabled="true"]:hover { background: var(--mb-action-primary-bg); border-color: var(--mb-action-primary-bg); }
.mb-control--save:disabled:hover, .mb-control--save[aria-disabled="true"]:hover { background: var(--mb-save-bg); }
.mb-control--save[aria-pressed="true"]:disabled:hover, .mb-control--save[aria-pressed="true"][aria-disabled="true"]:hover { background: var(--mb-save-active-bg); }
.mb-status[data-status="error"] { color: var(--mb-error); }
.mb-status[data-status="success"] { color: var(--mb-success); }
.mb-status[data-status="warning"] { color: var(--mb-warning); }

/* Existing website controls adopt the shared role without changing their actions. */
.btn, .study-grade-buttons .btn.secondary, .study-complete .btn.secondary, .study-empty .btn.secondary, .btn.secondary.paired {
  border-radius: var(--mb-control-radius); min-height: var(--mb-control-height);
  font: 500 16px/1.35 var(--mb-font-controls);
}
.btn.primary { font: 600 16px/1.35 var(--mb-font-controls); }
.btn.secondary { border-color: var(--mb-control-border); }
.study-line-pinyin, .study-headline-pinyin, .study-part-pinyin { font-family: var(--mb-font-pinyin); font-style: normal; }
#study-answer-heading { text-transform: uppercase; letter-spacing: .06em; color: var(--mb-accent); }

/* ------------------------------------------------------------------------
   Round 2 learner register (2026-10-09). Presentation only: Study, Saved,
   Progress, Account and billing-success share one frame. Crimson is kept for
   where-you-are (active nav rule), target Chinese and the Study ANSWER
   heading; labels are quiet small caps in ink-3; headings are Alegreya 600
   with no editorial rule; controls are upright Alegreya Sans, 5px radius.
   Component-scoped values (for token reconciliation by the integration owner):
   --r2-card-radius, --r2-sheet, --r2-label-size, --r2-label-tracking,
   --r2-primary-hover. */
:root {
  --r2-card-radius: 8px;
  --r2-sheet: var(--mb-paper-raised);
  --r2-label-size: 12.5px;
  --r2-label-tracking: .07em;
  --r2-primary-hover: #3a332c;
}

/* Frame and navigation: full wordmark, four destinations, crimson active rule. */
.page-shell > .site-header { padding-top: 22px; }
.site-logo { height: 44px; }
.site-nav { gap: clamp(14px, 2.6vw, 28px); font: 500 15px/1.4 var(--mb-font-controls); font-variant-numeric: lining-nums; }
.site-nav a { padding: 8px 0 6px; color: var(--mb-ink-secondary); white-space: nowrap; }
.site-nav a[aria-current="page"] { color: var(--mb-ink); font-weight: 600; border-bottom-color: var(--mb-accent); }

/* Headings: Alegreya 600, sentence case, no rule above, no full stop. */
.learner-title::before,
.study-landing .study-landing-title::before { content: none; display: none; }
.learner-title,
.study-landing .study-landing-title,
.study-complete h1,
.study-complete h2 { font-family: var(--mb-font-heading); font-weight: 600; letter-spacing: -.005em; color: var(--mb-ink); }
.study-complete h1,
.study-complete h2 { font-size: 32px; line-height: 1.2; }
.learner-title { font-size: 36px; line-height: 1.15; }
.learner-page-head { margin: var(--mb-space-6) 0 var(--mb-space-5); }
.learner-page-sub { color: var(--mb-ink-muted); font: 400 14px/1.45 var(--mb-font-controls); font-variant-numeric: lining-nums tabular-nums; }

/* Labels replace red eyebrows. */
.kicker,
.study-family,
.study-complete .kicker,
.study-line-label,
.study-source dt,
.study-section-label {
  color: var(--mb-ink-muted);
  font: 600 var(--r2-label-size)/1.4 var(--mb-font-controls);
  letter-spacing: var(--r2-label-tracking);
  text-transform: uppercase;
}

/* Controls: primary ink / secondary outline / tertiary text. Upright, 5px. */
.btn,
.btn.primary,
.btn.secondary,
.btn.secondary.paired,
.study-grade-buttons .btn.secondary,
.study-complete .btn.secondary {
  min-height: var(--mb-control-height);
  padding: 10px 22px;
  border-radius: var(--mb-control-radius);
  font: 600 16px/1.3 var(--mb-font-controls);
  font-style: normal;
  letter-spacing: .005em;
}
.btn.secondary { border: 1px solid var(--mb-control-border); background: transparent; color: var(--mb-ink); }
.btn.secondary:hover { background: var(--mb-action-secondary-bg-hover); border-color: var(--mb-ink-secondary); }
.btn.primary:hover { background: var(--r2-primary-hover); }
.btn.primary[aria-disabled="true"]:hover { background: var(--mb-action-primary-bg); }

/* Flat sheet surfaces with a hairline; never nested, no lift. */
.study-landing,
.study-card,
.study-complete,
.study-waiting {
  border: 1px solid var(--mb-rule);
  border-radius: var(--r2-card-radius);
  background: var(--r2-sheet);
  box-shadow: none;
  padding: 32px 36px;
}

/* Study landing: the selected duration is ink, not crimson. */
.study-landing .study-landing-title { font-size: 36px; }
.study-landing .lede, .study-complete .lede { font: 400 18px/1.5 var(--mb-font-reading); color: var(--mb-ink-secondary); }
.study-duration-set legend { font: 500 18px/1.4 var(--mb-font-reading); color: var(--mb-ink); }
.study-duration-face { border-color: var(--mb-rule); border-radius: var(--mb-control-radius); }
.study-duration-value { font: 500 40px/1 var(--mb-font-heading); font-variant-numeric: lining-nums tabular-nums; }
.study-duration-unit { font: 500 14px/1.3 var(--mb-font-controls); color: var(--mb-ink-muted); }
.study-duration input:checked + .study-duration-face { border-color: var(--mb-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--mb-ink); }
.study-duration input:checked + .study-duration-face .study-duration-value { color: var(--mb-ink); }

/* Study session: "This session · n of m" with an ink fill. */
.study-topbar { margin: 0 2px 14px; font: 500 14.5px/1.4 var(--mb-font-controls); }
.study-progress { gap: 14px; }
.study-progress-label { color: var(--mb-ink-secondary); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.study-progress-text { color: inherit; }
.study-progress-track { width: 160px; height: 3px; border-radius: 2px; background: var(--mb-rule); }
.study-progress-fill { background: var(--mb-ink); }
.study-text-button { font: 500 14.5px/1.4 var(--mb-font-controls); color: var(--mb-ink-secondary); }
.study-text-button:hover { text-decoration-color: currentColor; }

/* Question: Alegreya 500 ink, upright. Chinese leads in Song. */
.study-family { margin: 0 0 8px; }
.study-card .study-prompt { max-width: 30em; color: var(--mb-ink); font: 500 22px/1.32 var(--mb-font-reading); font-style: normal; }
.study-cue { color: var(--mb-ink-secondary); font: italic 400 17px/1.5 var(--mb-font-reading); }
.study-lines { margin-top: 22px; }
.study-zh { font: 500 40px/1.5 var(--mb-font-zh); }
.study-line.is-anchor .study-zh { font-size: 26px; }
.study-target { color: var(--mb-target); text-decoration-color: var(--mb-target); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.study-line-pinyin { margin-top: 2px; color: var(--mb-ink-secondary); font: 400 16px/1.5 var(--mb-font-pinyin); }
.study-hint { color: var(--mb-ink-secondary); font: 400 14.5px/1.4 var(--mb-font-controls); }

/* Answer: ANSWER keeps its crimson accent; meaning reads in Alegreya. */
.study-answer { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mb-rule); }
#study-answer-heading { color: var(--mb-accent); }
.study-headline { margin: 10px 0 4px; gap: 2px 12px; }
.study-headline-zh { font: 500 34px/1.3 var(--mb-font-zh); }
.study-headline-pinyin { color: var(--mb-ink-secondary); font: 400 16px/1.4 var(--mb-font-pinyin); }
.study-note-label { color: var(--mb-ink-muted); font: 500 13px/1.4 var(--mb-font-controls); }
.study-note-text { font: 400 18px/1.5 var(--mb-font-reading); color: var(--mb-ink); }
.study-note.is-translation .study-note-text { font-style: italic; color: var(--mb-ink-secondary); }
.study-part { border-radius: var(--mb-control-radius); border-color: var(--mb-rule); }
.study-part-zh { font-weight: 500; }
.study-part-pinyin, .study-part-gloss { font-family: var(--mb-font-controls); }
.study-context { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mb-rule); }
.study-source { color: var(--mb-ink-muted); font-family: var(--mb-font-controls); }
.study-source-main { color: var(--mb-ink); font: 400 16px/1.5 var(--mb-font-reading); font-variant-numeric: lining-nums tabular-nums; }

/* Reveal / grading bar: pinned within thumb reach; Forgot and Got it are peers. */
.study-attempt,
.study-grade {
  margin: 28px -36px -32px;
  padding: 16px 36px max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--mb-rule);
  border-radius: 0 0 calc(var(--r2-card-radius) - 1px) calc(var(--r2-card-radius) - 1px);
  background: var(--r2-sheet);
}
.study-grade .study-section-label { color: var(--mb-ink-secondary); font: 500 14.5px/1.4 var(--mb-font-controls); letter-spacing: 0; text-transform: none; }
.study-grade-buttons .btn { min-width: 140px; min-height: 44px; }

.study-message { border-left-color: var(--mb-ink); color: var(--mb-ink); }
.study-preview-note { font-family: var(--mb-font-controls); }

/* Saved: calm, source-grouped collection; no seals. */
.saved-groups { gap: var(--mb-space-6); }
.saved-group { padding-top: var(--mb-space-4); border-top: 1px solid var(--mb-rule); }
.saved-group-title { font: 600 20px/1.35 var(--mb-font-heading); }
.saved-group-meta, .saved-meta { color: var(--mb-ink-muted); font: 400 13px/1.45 var(--mb-font-controls); font-variant-numeric: lining-nums tabular-nums; }
.saved-group-head { padding-bottom: var(--mb-space-2); border-bottom: 1px solid var(--mb-hairline-soft); }
/* Material without a source link is listed last under a quiet label, not a heading
   that outranks the learning material; each item keeps its own source line. */
.saved-group.is-ungrouped .saved-group-head { border-bottom: 0; padding-bottom: 0; }
.saved-group.is-ungrouped .saved-group-title { color: var(--mb-ink-muted); font: 400 14px/1.45 var(--mb-font-controls); letter-spacing: normal; text-transform: none; }
.saved-item { padding: 18px 0; border-top-color: var(--mb-hairline-soft); }
.saved-item:first-child { border-top: 0; }
.saved-surface { font: 500 28px/1.3 var(--mb-font-zh); }
.saved-item.is-line .saved-surface { font: 400 20px/1.6 var(--mb-font-zh); }
.saved-pinyin { color: var(--mb-ink-secondary); font: 400 16px/1.5 var(--mb-font-pinyin); }
.saved-meaning { margin-top: 2px; font: 400 17px/1.5 var(--mb-font-reading); }
.saved-context { margin-top: var(--mb-space-2); color: var(--mb-ink-secondary); font: 400 18px/1.7 var(--mb-font-zh); }
.saved-target { color: var(--mb-target); text-decoration-color: var(--mb-target); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.saved-remove { color: var(--mb-ink-muted); font: 400 14px/1.4 var(--mb-font-controls); text-decoration: underline; text-decoration-color: var(--mb-link-underline); }
.saved-remove:hover, .saved-remove:focus-visible { color: var(--mb-ink); text-decoration-color: currentColor; }
.learner-link, .learner-text-action { font: 600 14px/1.4 var(--mb-font-controls); color: var(--mb-ink); }
.learner-link:hover, .learner-text-action:hover { text-decoration-color: currentColor; }

/* Progress: factual counts in Alegreya lining figures; HSK is secondary. */
.portal-summary { border-block-color: var(--mb-rule); }
.portal-stat + .portal-stat { border-left-color: var(--mb-rule); }
.portal-stat strong { font: 500 56px/1 var(--mb-font-heading); font-variant-numeric: lining-nums tabular-nums; }
.portal-stat-label { font: 600 15px/1.4 var(--mb-font-controls); }
.portal-stat-detail { font: 400 13px/1.4 var(--mb-font-controls); }
.hsk-section h2 { font: 600 22px/1.3 var(--mb-font-heading); }
.hsk-table { font-family: var(--mb-font-controls); font-variant-numeric: lining-nums tabular-nums; }
.hsk-table thead th { font: 600 var(--r2-label-size)/1.4 var(--mb-font-controls); letter-spacing: var(--r2-label-tracking); text-transform: uppercase; color: var(--mb-ink-muted); }
.hsk-table th, .hsk-table td { border-bottom-color: var(--mb-hairline); }
.progress-steps li::before { color: var(--mb-ink); font: 500 26px/1 var(--mb-font-heading); font-variant-numeric: lining-nums; }

/* States: what happened, what still works, one action. Ink, never crimson. */
.learner-state h2 { font: 600 24px/1.25 var(--mb-font-heading); }
.learner-state[data-tone="attention"] { border-left-color: var(--mb-ink); }

@media (max-width: 680px) {
  .page-shell > .site-header { flex-wrap: nowrap; gap: 10px; padding-top: 14px; }
  .site-logo { height: 34px; }
  .site-nav { flex-wrap: nowrap; gap: 0 14px; font-size: 14.5px; }
  .site-nav a { padding-block: 12px 8px; }
  .learner-title, .study-landing .study-landing-title { font-size: 30px; }
  .study-complete h1, .study-complete h2 { font-size: 28px; }
  .study-landing,
  .study-card,
  .study-complete,
  .study-waiting { padding: 22px 20px 24px; border-radius: var(--r2-card-radius); }
  .study-topbar { margin: 0 0 10px; font-size: 14px; }
  .study-progress { gap: 10px; }
  .study-progress-track { width: 72px; }
  .study-card .study-prompt { font-size: 20px; }
  .study-zh { font-size: 32px; }
  .study-line.is-anchor .study-zh { font-size: 22px; }
  .study-headline-zh { font-size: 30px; }
  .study-note-text { font-size: 17px; }
  .study-attempt,
  .study-grade { margin: 22px -20px -24px; padding: 12px 20px max(14px, env(safe-area-inset-bottom)); }
  .study-grade { display: block; }
  /* The grading question stays readable at 375: it defines Got it as self-assessed recall. */
  .study-grade .study-section-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0 0 8px; font-size: 14px; }
  .study-grade-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .study-grade-buttons .btn { min-width: 0; min-height: 48px; }
  .study-attempt .btn { min-height: 48px; }
  .saved-surface { font-size: 26px; }
  .portal-stat strong { font-size: 48px; }
}
@media (max-width: 400px) {
  .site-logo { height: 32px; }
  .site-nav { gap: 0 12px; }
}

/* Approved v2.1 Study reading geometry. Shared owner wordmark/navigation retained. */
.page-shell:has(.study-shell) > .site-header { width: min(820px, 100%); height: 76px; padding: 0 40px; }
.study-main:has(.study-shell) { padding: 20px 40px 24px; }
.study-shell { width: min(740px, 100%); }
.study-shell .study-card { padding: 48px 48px 40px; border-radius: 8px; }
.study-card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.study-card-meta .study-family { margin: 0; font: 500 15px/1 var(--mb-font-controls); font-variant-caps: all-small-caps; letter-spacing: .05em; }
.study-source-cue { margin: 0; color: var(--mb-ink-muted); font: 400 13.5px/1.35 var(--mb-font-controls); text-align: right; }
.study-card .study-prompt { margin: 10px 0 26px; font: 500 23px/1.3 var(--mb-font-reading); }
.study-lines { margin-top: 0; }
.study-zh { font: 500 40px/1.3 var(--mb-font-zh); }
.study-line-pinyin { margin-top: 8px; font: 400 17px/1.4 var(--mb-font-pinyin); }
.study-topbar { margin-bottom: 22px; }
.study-progress { flex: 1; min-width: 0; gap: 12px; }
.study-progress-track { width: 220px; max-width: 220px; flex: 1; min-width: 0; height: 4px; }
.study-shell .study-attempt, .study-shell .study-grade { margin: 40px -48px -40px; padding: 16px 48px; }
.study-hint { font: 400 15px/1.3 var(--mb-font-controls); }
.study-answer { margin-top: 26px; padding-top: 26px; }
.study-headline-zh { font-size: 32px; line-height: 1.1; }
.study-source { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 16px; }
.study-source-main { font: 500 16px/1.35 var(--mb-font-controls); }
.saved-context { font-family: var(--mb-font-zh-sans); }
.progress-source-section { margin-top: 30px; }
.progress-source-section h2 { margin: 0 0 8px; font: 600 22px/1.2 var(--mb-font-heading); }
.progress-source-unavailable { margin: 0 0 8px; color: var(--mb-ink-secondary); font: 400 16px/1.45 var(--mb-font-reading); }
.progress-detail-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; margin-top: 16px; }
.progress-detail-links > details { margin: 0; }
.progress-detail-links summary { cursor: pointer; color: var(--mb-ink-secondary); font: 500 15px/1.4 var(--mb-font-controls); text-decoration: underline; text-decoration-color: var(--mb-control-border); text-underline-offset: 4px; }
.progress-detail-links > details[open] { flex-basis: 100%; }
.progress-detail-links > details[open] > summary { margin-bottom: 14px; }
@media (max-width: 680px) {
 .page-shell:has(.study-shell) > .site-header { height: 56px; padding: 0 16px; }
 .study-main:has(.study-shell) { padding: 4px 16px 100px; }
 .study-shell .study-card { padding: 20px 20px 22px; border-radius: 6px; }
 .study-card .study-prompt { font-size: 19px; margin-bottom: 18px; }
 .study-zh { font-size: 30px; }
 .study-line-pinyin { font-size: 15.5px; }
 .study-topbar { margin-bottom: 14px; }
 .study-headline-zh { font-size: 28px; }
 .study-source { grid-template-columns: 1fr; }
 .study-shell .study-attempt, .study-shell .study-grade { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; margin: 0; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); border-radius: 0; }
 .study-hint { display: none; }
 .study-grade .study-section-label { margin-bottom: 10px; }
 .page-shell:has(.study-active) > .site-footer { display: none; }
 html:has(.study-active) { scroll-padding-bottom: 110px; }
 .study-answer [tabindex] { scroll-margin-bottom: 110px; }
}

/* Exact source line flow and compact session row; key hints describe existing shortcuts. */
.study-topbar { height: 14px; margin-inline: 0; line-height: 1; }
.study-text-button { min-height: 0; height: 14px; line-height: 1; }
.study-card .study-target { white-space: normal; border-bottom: 2px solid var(--mb-target); padding-bottom: 1px; text-decoration: none; }
.study-key-hint { display: inline-flex; align-items: center; margin-left: 10px; padding: 2px 4px; border: 1px solid var(--mb-control-border); border-radius: 3px; color: var(--mb-ink-muted); font: 500 11px/1 var(--mb-font-controls); }
.study-attempt .study-key-hint { border-color: #6b6157; color: #cdbfa9; }
.study-grade-buttons .btn { min-width: 136px; }
@media (max-width: 680px) { .study-key-hint { display: none; } .study-grade-buttons .btn { min-width: 0; } }

/* Direct Study answer treatment from the approved recognition component. */
.study-source-cue { line-height: 1; }
.study-card .study-prompt, .study-zh { text-wrap: pretty; }
.study-card[data-activity-family="recognition_meaning"] .study-answer { display: flex; flex-direction: column; gap: 14px; }
.study-note.is-meaning > .study-note-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.study-card[data-activity-family="recognition_meaning"] .study-headline, .study-card[data-activity-family="recognition_meaning"] .study-note { margin: 0; }
.study-headline-pinyin { font: 400 17px/1 var(--mb-font-pinyin); }
.study-note.is-meaning .study-note-text { margin: 0; font: 500 21px/1.4 var(--mb-font-reading); text-wrap: pretty; }
.study-note.is-translation .study-note-label { margin: 0 0 5px; font: 500 14px/1 var(--mb-font-controls); }
.study-note.is-translation .study-note-text { margin: 0; font: italic 400 18px/1.45 var(--mb-font-reading); color: #3A332C; text-wrap: pretty; }
.study-card[data-activity-family="recognition_meaning"] .study-context { margin-top: 14px; padding-top: 14px; }
.study-source dt { padding: 0; font: 500 14px/1 var(--mb-font-controls); text-transform: none; letter-spacing: 0; }
.study-source-occurrence { margin-top: 2px; font: 400 14px/1.4 var(--mb-font-controls); }
@media (max-width: 680px) { .study-card[data-activity-family="recognition_meaning"] .study-answer { margin-top: 18px; padding-top: 18px; } .study-note.is-meaning .study-note-text { font-size: 18.5px; } .study-note.is-translation .study-note-text { font-size: 16.5px; } }

/* Saved/Progress native component metrics, separate from the Study column. */
.portal-main .portal-shell { width: min(860px, 100%); }
.portal-shell .learner-title { font: 600 40px/1.1 var(--mb-font-heading); }
.portal-shell .learner-page-sub { font: 400 17px/1.4 var(--mb-font-controls); color: var(--mb-ink-secondary); }
[data-learner-page="progress"] .learner-page-sub { font: 400 18px/1.4 var(--mb-font-reading); color: #3A332C; }
.saved-group-title { font: 600 24px/1.2 var(--mb-font-heading); }
.saved-group-meta { margin-top: 4px; font: 400 15px/1.4 var(--mb-font-controls); }
.saved-item { padding: 20px 0; }
.saved-surface { font: 500 28px/1.2 var(--mb-font-zh); }
.saved-item.is-line .saved-surface { font: 500 22px/1.4 var(--mb-font-zh); }
.saved-pinyin { font: 400 17px/1 var(--mb-font-pinyin); }
.saved-meaning { margin-top: 4px; font: 400 19px/1.45 var(--mb-font-reading); }
.saved-context { margin-top: 4px; font: 400 19px/1.5 var(--mb-font-zh); color: #3A332C; }
.saved-meta { margin-top: 4px; font: 400 14.5px/1.4 var(--mb-font-controls); }
.saved-remove { font: 500 15px/1 var(--mb-font-controls); }
.portal-stat-label { margin-top: 10px; font: 600 17px/1.3 var(--mb-font-controls); }
.portal-stat-detail { font: 400 15px/1.3 var(--mb-font-controls); }
@media(max-width:680px) { .portal-shell .learner-title { font-size: 30px; } }

body:has(.study-shell) { background: var(--mb-paper); }
body:has(.study-shell)::before { content: none; display: none; }
.portal-export::before { content: none; }

.page-shell:has(.portal-shell) > .site-header { width: min(1120px, 100%); max-width: none; height: 84px; padding: 0 40px; }
.page-shell:has(.portal-shell) .site-nav { gap: 30px; font: 500 16px/1 var(--mb-font-controls); }
.study-main.portal-main:has(.portal-shell) { padding: 0 40px 24px; }
.portal-shell .learner-page-head { margin: 30px 0 34px; }
[data-learner-page="progress"] .learner-page-head { margin-bottom: 30px; }
.saved-groups { gap: 34px; }
.saved-group { padding-top: 0; border-top: 0; }
.saved-group-head { align-items: baseline; padding-bottom: 10px; margin-bottom: 0; }
.saved-item { border-top: 0; border-bottom: 1px solid var(--mb-rule-soft); }
.portal-summary { margin: 0; }
.portal-stat { padding: 24px 24px 24px 0; }
.portal-stat + .portal-stat { padding: 24px 0 24px 28px; }
@media (max-width: 680px) { .page-shell:has(.portal-shell) > .site-header { height: 76px; padding: 0 16px; } .page-shell:has(.portal-shell) .site-nav { gap: 14px; font-size: 14.5px; } .study-main.portal-main:has(.portal-shell) { padding: 0 16px 24px; } }

.study-shell .study-grade-buttons button.btn.secondary { height: 44px; min-height: 44px; border: 1.5px solid var(--mb-ink); font: 600 16px/1 var(--mb-font-controls); }
.study-grade .study-section-label { font: 400 15px/1.3 var(--mb-font-controls); }
@media(max-width:680px) { .study-shell .study-grade-buttons button.btn.secondary { height: 48px; min-height: 48px; } .study-grade .study-section-label { font: 400 14px/1 var(--mb-font-controls); margin-bottom: 10px; } }

.progress-detail-links > details > summary { display: block; min-height: 0; height: auto; padding: 0; line-height: 1; }

.progress-source-table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 16px/1.4 var(--mb-font-controls); }
.progress-source-table th, .progress-source-table td { padding: 12px 8px; border-bottom: 1px solid var(--mb-rule-soft); text-align: right; overflow-wrap: anywhere; }
.progress-source-table th:first-child { width: 52%; text-align: left; padding-left: 0; font-weight: 500; }
.progress-source-meta { display: block; color: var(--mb-ink-secondary); font-size: 14px; font-weight: 400; }
.progress-source-note { margin: 14px 0; color: var(--mb-ink-secondary); font: 400 15px/1.4 var(--mb-font-controls); }
@media(max-width:680px) { .progress-source-table { font-size: 14px; } .progress-source-table th:first-child { width: 46%; } .progress-source-table th, .progress-source-table td { padding-right: 4px; } }