/* Grammar Journey. Layout and components follow the Word Game: a gray page, and every piece of
   readable content inside a white, bordered card. Nothing is set directly on the gray.

   Spacing uses one 4-point scale: --s1 4, --s2 8, --s3 12, --s4 16, --s5 24.
     between cards ............... --s3
     card padding ................ --pad (16, or 24 on wide screens)
     label to the content it names  --s2
     between related controls .... --s2
     between a heading and what follows --s2; between sections inside a card --s4 */
body.grammar-mode #search-container { display: none; }
body.grammar-mode #results-container { box-sizing: border-box; display: block; width: min(720px, 100%); margin: 0 auto; padding: 16px 12px 120px; }
/* While a lesson step is on screen the bottom tab bar steps aside (as in a Word Game round) so the
   action bar can sit at the bottom edge. */
@media (max-width: 1024px) {
  body.grammar-mode.grammar-lesson #mode-nav { display: none; }
  body.grammar-mode.grammar-lesson { padding-bottom: 0; }
  body.grammar-mode.grammar-lesson #results-container { padding-bottom: 24px; }
}

.grammar-app {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --pad: 16px;
  --g-ink: var(--color-ink, #0d3a69);
  --g-text: var(--color-text);
  --g-muted: var(--color-text-muted);
  --g-line: var(--color-border);
  --g-line-soft: var(--color-border);
  --g-accent: var(--color-ink);
  --g-wash: var(--color-wash-blue, #eaf1fb);
  --g-radius: var(--radius-card);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); color: var(--g-text); text-align: left;
  font-family: 'Source Sans 3', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', 'Noto Sans', sans-serif;
  font-size: 17px; line-height: 1.55; overflow-wrap: anywhere;
}
@media (min-width: 701px) { .grammar-app { --pad: 24px; } }
.grammar-app *, .grammar-app *::before, .grammar-app *::after { box-sizing: border-box; }
/* The shell styles a bare <label> as an absolutely positioned input overlay; undo that inside Grammar. */
.grammar-app label { position: static; top: auto; left: auto; transform: none; pointer-events: auto; color: inherit; }
.grammar-app [hidden] { display: none !important; }
.grammar-app h1, .grammar-app h2, .grammar-app h3, .grammar-app p, .grammar-app ul, .grammar-app ol, .grammar-app dl, .grammar-app dd { margin: 0; text-align: left; }
.grammar-app h1, .grammar-app h2, .grammar-app h3 { font-family: inherit; font-weight: 600; color: var(--g-ink); line-height: 1.25; }
.grammar-app h1 { font-size: 26px; }
.grammar-app h2 { font-size: 22px; }
.grammar-app h3 { font-size: 19px; }
.grammar-app h1 em { color: var(--g-accent); font-weight: 400; }
.grammar-app p + p { margin-top: var(--s2); }
.grammar-app h2:focus, .grammar-app h1:focus { outline: none; }
.grammar-caption { font-size: 15px; color: var(--g-muted); }
.grammar-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Cards */
.grammar-home-card, .grammar-course-card, .grammar-unit, .grammar-notebook, .grammar-samples, .grammar-glossary,
.grammar-panel, .grammar-complete, .grammar-progress-card, .grammar-goals, .grammar-activity, .grammar-display, .grammar-alert, .grammar-audio-note, .grammar-loading {
  background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius); padding: var(--pad);
}
.grammar-audio-note { padding: var(--s3) var(--s4); font-size: 15px; color: var(--g-muted); }
.grammar-audio-note:empty, .grammar-alert-slot:empty { display: none; }
.grammar-alert { border-left: 6px solid var(--color-danger); border-color: var(--color-danger-border) var(--color-danger-border) var(--color-danger-border) var(--color-danger); color: var(--color-danger-text); }

/* Tags */
.grammar-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.grammar-tag { display: inline-block; font: 600 13px/1.2 'Source Sans 3', sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 6px var(--s3); border-radius: 6px; background: var(--color-surface-subtle); color: var(--color-text-strong); }
.grammar-tag.is-topic { background: var(--g-wash); color: var(--g-ink); }

/* Buttons */
.grammar-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s4); border-radius: var(--radius-control); border: 1px solid var(--color-border); background: var(--color-surface-hover); color: var(--color-ink); font: 600 16px/1.25 'Source Sans 3', sans-serif; text-align: center; cursor: pointer; }
.grammar-button:hover { background: var(--color-wash-blue); border-color: var(--color-border); }
.grammar-button.grammar-primary { background: var(--g-ink); border-color: var(--g-ink); color: #fff; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); font-size: 14px; border-radius: var(--radius-control); }
.grammar-button.grammar-primary:hover { background: var(--color-ink-active, #092c50); }
.grammar-button.grammar-wide { width: 100%; min-height: 56px; }
.grammar-button:disabled, .grammar-button.grammar-primary:disabled { background: #e4e9ee; border-color: #d3dbe2; color: var(--color-text-muted); cursor: not-allowed; }
.grammar-button svg { flex: none; }
.grammar-button[aria-pressed='true'] { background: var(--g-wash); border-color: var(--g-ink); color: var(--g-ink); }
.grammar-app a:focus-visible, .grammar-app button:focus-visible, .grammar-app input:focus-visible, .grammar-app select:focus-visible, .grammar-app summary:focus-visible { outline: 3px solid var(--color-interactive); outline-offset: 2px; }
.grammar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }

/* Audio buttons sit directly beside the text they play */
.grammar-speak { appearance: none; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-control); border: 0; background: var(--color-surface-subtle); color: var(--color-text-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); cursor: pointer; padding: 0; transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease; }
.grammar-speak:hover { background: var(--color-surface-strong); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transform: translateY(-1px); }
.grammar-speak.is-speaking, .grammar-button.is-speaking { background: var(--g-accent); border-color: var(--g-accent); color: #fff; }

/* Overview: one recommended action, compact review, then the course map.
   Structure and state treatments follow the Word Game's practice dashboard. */
.grammar-heading h1, .grammar-next h2, .grammar-course-heading h2, .grammar-unit-heading h3 { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
.grammar-heading h1 { font-size: clamp(28px, 5vw, 34px); margin: var(--s2) 0; }
.grammar-heading > p { color: var(--g-muted); max-width: 60ch; }
.grammar-eyebrow { color: var(--color-text-slate); font-size: 13px; font-weight: 600; letter-spacing: var(--letter-spacing-caps-heading); text-transform: uppercase; }
.grammar-home-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s1) var(--s3); }
.grammar-home-meta > span { font-size: 13px; color: var(--g-muted); }
.grammar-home-progress { margin-top: var(--s4); }
.grammar-progress-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-size: 14px; color: var(--color-text-slate); }
.grammar-progress-heading strong { color: var(--g-ink); font-weight: 600; }
.grammar-course-progress { height: 6px; background: var(--color-surface-strong); border-radius: 99px; overflow: hidden; margin: var(--s2) 0; }
.grammar-course-progress > span { display: block; height: 100%; background: var(--color-success); }
.grammar-home-progress .grammar-caption { font-size: 13px; }
.grammar-next { padding: 18px; margin-top: var(--s4); background: var(--color-wash-blue-pale); border: 1px solid var(--color-wash-blue-border); border-radius: var(--radius-card); }
.grammar-next h2 { font-size: 24px; margin: var(--s1) 0 var(--s2); }
.grammar-next > p:not(.grammar-eyebrow) { color: var(--color-text-slate); }
.grammar-next .grammar-caption { display: block; font-size: 14px; margin-top: var(--s2); }
.grammar-next .grammar-button { margin: var(--s4) 0 0; }
.grammar-review-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); border-top: 1px solid var(--g-line); padding-top: var(--s4); margin-top: var(--s4); }
.grammar-review-copy { min-width: 0; }
.grammar-review-copy h2 { font-size: 18px; margin: 0 0 var(--s1); }
.grammar-review-copy p { color: var(--g-muted); font-size: 14px; }
.grammar-review-card .grammar-button { flex: none; font-size: 14px; background: var(--color-surface); }
.grammar-course-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.grammar-course-heading h2 { font-size: 22px; }
.grammar-course-heading > span { font-size: 14px; color: var(--g-muted); }
.grammar-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: var(--s4) 0 var(--s3); }
.grammar-levels .grammar-button { min-width: 0; min-height: 48px; padding: var(--s2) 4px; background: var(--color-surface); border-color: var(--color-border); }
.grammar-levels .grammar-cefr { gap: 4px; }
.grammar-levels .fa-signal { width: 14px; height: 14px; }
.grammar-levels .cefr-value { min-width: 16px; padding: 3px 5px; }
.grammar-levels .grammar-button:hover { background: var(--color-wash-blue); border-color: var(--color-interactive-muted); }
.grammar-levels .grammar-button[aria-pressed='true'] { background: var(--color-wash-blue-active); color: var(--g-ink); border-color: var(--color-wash-blue-active-border); box-shadow: inset 0 0 0 1px var(--color-wash-blue-active-border); }
.grammar-course-card > p { font-size: 15px; color: var(--g-muted); }
.grammar-course-card > .grammar-caption { margin-top: var(--s2); font-size: 13px; }
.grammar-units { display: grid; gap: var(--s3); }
.grammar-planned-units { background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius); padding: var(--s4); }
.grammar-planned-units summary { min-height: 44px; cursor: pointer; font-weight: 600; color: var(--g-ink); }
.grammar-planned-units .grammar-unit { margin-top: var(--s3); }
.grammar-unit { padding: var(--s2) var(--s2) var(--s1); }
.grammar-unit-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s3) var(--s4); }
.grammar-unit-heading h3 { margin-top: var(--s1); }
.grammar-unit-heading .grammar-unit-count { flex: none; font-size: 13px; color: var(--g-muted); white-space: nowrap; }
.grammar-unit ol { list-style: none; padding: 0; }
.grammar-lesson-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--s4); width: 100%; min-height: 76px; padding: var(--s3); text-align: left; background: #fff; border: 0; border-top: 1px solid var(--g-line-soft); border-radius: 0; color: var(--g-text); font: inherit; cursor: pointer; }
.grammar-lesson-row.has-status { grid-template-columns: 44px minmax(0, 1fr) auto; }
.grammar-lesson-row:hover { background: var(--color-surface-hover); }
.grammar-lesson-text { display: grid; gap: var(--s1); min-width: 0; }
.grammar-lesson-text strong { font-size: 17px; color: var(--g-ink); }
.grammar-lesson-text small { font-size: 14px; color: var(--g-muted); line-height: 1.4; }
.grammar-number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-control); background: var(--color-surface-subtle); color: var(--color-text-strong); font-weight: 700; font-size: 15px; }
.grammar-status { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; font-weight: 500; color: var(--g-muted); white-space: nowrap; }
.grammar-status.is-complete { color: var(--color-success-text); font-weight: 600; }
.grammar-status.is-started { color: var(--g-ink); font-weight: 600; }
.grammar-completed-icon { display: inline-flex; flex: none; }
.grammar-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; list-style: none; }
.grammar-fold > summary::-webkit-details-marker { display: none; }
.grammar-fold > summary::after { content: '+'; flex: none; font-size: 22px; font-weight: 400; color: var(--g-muted); }
.grammar-fold[open] > summary::after { content: '−'; }
.grammar-notebook summary, .grammar-samples summary, .grammar-glossary summary, .grammar-planned-focus summary, .grammar-why summary { cursor: pointer; font-weight: 600; color: var(--g-ink); min-height: 32px; }
.grammar-notebook summary span { font-weight: 400; color: var(--g-muted); margin-left: var(--s2); }
.grammar-notebook > p, .grammar-samples > p { margin-top: var(--s2); color: var(--g-muted); }
.grammar-notebook label { display: block; margin-top: var(--s4); font-weight: 600; }
.grammar-reference-search, .grammar-support select { display: block; width: 100%; font: inherit; min-height: 44px; padding: var(--s2) var(--s3); margin-top: var(--s2); border: 1px solid var(--color-border-input); border-radius: var(--radius-control); background: #fff; color: var(--g-text); }
.grammar-point-list { display: grid; margin-top: var(--s3); }
.grammar-point { padding: var(--s3) 0; border-top: 1px solid var(--g-line-soft); }
.grammar-point summary { min-height: 44px; cursor: pointer; }
.grammar-point-title { font-weight: 600; color: var(--g-ink); }
.grammar-point summary .grammar-caption { display: block; padding-left: 20px; }
.grammar-point[open] > .grammar-explanation, .grammar-point[open] > .grammar-button { margin-top: var(--s3); }
.grammar-point > .grammar-button { justify-self: start; }
.grammar-reference-filter { font: inherit; width: 100%; min-height: 44px; padding: var(--s2); border: 1px solid var(--color-border-input); border-radius: var(--radius-control); color: var(--g-text); background: #fff; }
.grammar-search-status { min-height: 27px; margin-top: var(--s3) !important; }
.grammar-point strong { display: block; color: var(--g-ink); }
.grammar-point small { color: var(--g-muted); font-size: 14px; }

/* Lesson player: progress card */
.grammar-quiet-btn { min-height: 44px; padding: var(--s2) var(--s3); }
.grammar-icon-btn { appearance: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-control); border: 1px solid var(--color-border); background: var(--color-surface-hover); color: var(--color-ink); cursor: pointer; }
.grammar-icon-btn:hover, .grammar-icon-btn[aria-expanded='true'] { background: var(--g-wash); }
.grammar-step { appearance: none; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--g-ink); font: 600 22px/1 'Source Sans 3', sans-serif; cursor: pointer; }
.grammar-step:hover:not(:disabled) { background: var(--g-wash); }
.grammar-step:disabled { color: var(--color-text-faint); cursor: default; }
.grammar-step[data-action='forward']:disabled { visibility: hidden; }
.grammar-progress { height: 6px; background: var(--color-surface-strong); border-radius: 99px; overflow: hidden; }
.grammar-progress > span { display: block; height: 100%; background: var(--g-accent); transition: width .3s ease; }
.grammar-display { padding: var(--s3) var(--s4); }
.grammar-support { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); font-size: 16px; }
.grammar-support label { display: flex; align-items: center; gap: var(--s3); min-height: 44px; cursor: pointer; }
.grammar-support select { width: auto; min-width: 190px; margin-top: 0; }
.grammar-support input[type='checkbox'] { accent-color: var(--g-accent); width: 20px; height: 20px; margin: 0; }
.grammar-goals h2 { font-size: 19px; margin-bottom: var(--s2); }
.grammar-goals ul { padding-left: 22px; }
.grammar-goals li + li { margin-top: var(--s1); }
.grammar-goals .grammar-button { margin-top: var(--s4); }

/* Lesson player: the activity card */
.grammar-activity h2 { font-size: clamp(22px, 4.5vw, 28px); margin-bottom: var(--s2); line-height: 1.3; }
.grammar-explanation { color: var(--color-text); }
.grammar-dialogue { display: grid; gap: var(--s1); }
.grammar-speaker { display: block; margin-top: var(--s3); font-size: 14px; font-weight: 700; color: var(--g-accent); text-align: center; }
.grammar-example { border: 1px solid var(--g-line-soft); border-radius: var(--radius-card); padding: var(--s3) var(--s4); margin-top: var(--s2); text-align: center; background: #fff; }
.grammar-example p { text-align: center; margin: var(--s1) 0 0; }
.grammar-example > .grammar-pinyin, .grammar-example > .grammar-zhuyin, .grammar-example > .grammar-kana, .grammar-example > .grammar-romaji { display: block; text-align: center; margin-top: var(--s1); }
.grammar-reading-guide { display: block; }
.grammar-reading-guide .grammar-pinyin, .grammar-reading-guide .grammar-zhuyin, .grammar-reading-guide .grammar-kana, .grammar-reading-guide .grammar-romaji { display: block; font: 14px/1.4 'Source Sans 3', sans-serif; color: var(--g-muted); margin-top: 4px; }
.grammar-choice-mark { flex: none; width: 28px; min-height: 28px; }
.grammar-answer-audio { display: inline-flex; margin-left: auto; width: 44px; min-height: 44px; }
.grammar-audio-placeholder { display: block; width: 44px; height: 44px; visibility: hidden; }
.grammar-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.grammar-chinese { font-size: clamp(26px, 6vw, 34px); line-height: 1.5; color: var(--g-ink); }
.grammar-pinyin, .grammar-zhuyin, .grammar-kana, .grammar-romaji { color: var(--g-muted); font-size: 17px; }
.grammar-zhuyin { letter-spacing: .08em; }
.grammar-translation { color: var(--g-text); font-size: 17px; }

.grammar-listen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s4); padding: var(--s5) var(--s3); border: 1px solid var(--g-line-soft); border-radius: var(--radius-card); }
.grammar-speak i, .grammar-nav i, .grammar-save i, .grammar-button i { font-size: 16px; line-height: 1; }
.grammar-save i { font-size: 20px; }

.grammar-choices { display: grid; gap: var(--s2); margin-top: var(--s4); }
.grammar-choice-row { display: flex; align-items: center; gap: var(--s2); min-height: 64px; padding: var(--s1) var(--s3) var(--s1) var(--s2); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.grammar-choice-row:hover { background: var(--color-surface-hover); }
.grammar-choice-row.is-selected { border-color: var(--g-ink); background: var(--g-wash); box-shadow: inset 0 0 0 1px var(--g-ink); }
.grammar-choice-row.is-wrong { border-color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger); background: #fff; }
.grammar-choice-row.is-right { border-color: var(--color-success); box-shadow: inset 0 0 0 2px var(--color-success); background: #fff; }
.grammar-choice { appearance: none; flex: 1; min-width: 0; min-height: 52px; padding: var(--s3) var(--s2); background: transparent; border: 0; border-radius: var(--radius-control); color: var(--g-text); font: 500 18px/1.4 'Source Sans 3', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; text-align: left; cursor: pointer; }
.grammar-choice:disabled { color: var(--g-text); cursor: default; }
.grammar-choice-row.is-wrong .grammar-choice { text-decoration: line-through; text-decoration-color: var(--color-danger); }
.grammar-choice [lang='zh-TW'] { font-size: 22px; }

.grammar-build-answer.is-wrong { border: 2px solid var(--color-danger); }
.grammar-placeholder { color: var(--g-muted); font-size: 16px; }
.grammar-tiles { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.grammar-build-answer button:not(.grammar-speak), .grammar-tiles button { appearance: none; background: #fff; color: var(--g-ink); font: 24px/1.4 'Source Sans 3', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', 'Noto Sans', sans-serif; padding: var(--s2) var(--s4); min-width: 52px; min-height: 52px; border: 1px solid var(--color-border-input); border-radius: var(--radius-control); cursor: pointer; }
.grammar-build-answer button:not(.grammar-speak):hover, .grammar-tiles button:hover:not(:disabled) { background: var(--g-wash); }
.grammar-tiles button:disabled { background: #fff; color: transparent; border: 2px dashed var(--color-border); cursor: default; }
.grammar-tiles button:disabled .grammar-reading-guide { visibility: hidden; }
.grammar-build-answer button:disabled { color: var(--g-ink); cursor: default; }
.grammar-build-answer .grammar-speak { margin-left: var(--s1); }
.grammar-tiles + .grammar-button { margin-top: var(--s3); }

.grammar-cloze { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--g-line-soft); border-radius: var(--radius-card); font-size: clamp(26px, 6vw, 32px); line-height: 1.5; color: var(--g-ink); font-family: 'Source Sans 3', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', 'Noto Sans', sans-serif; }
.grammar-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: 52px; padding: 2px var(--s4); border: 2px dashed var(--color-border-input); border-radius: var(--radius-control); background: #fff; color: var(--color-text-muted); font: inherit; }
.grammar-slot.is-filled { border-style: solid; border-color: var(--g-ink); background: var(--g-wash); color: var(--g-ink); cursor: pointer; }
.grammar-slot.is-filled.is-wrong { border-color: var(--color-danger); background: #fff; }
.grammar-slot:disabled { cursor: default; }

.grammar-activity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.grammar-activity-actions:empty { display: none; margin: 0; min-height: 0; }
.grammar-activity-actions > span { color: var(--g-muted); font-size: 15px; }

/* Action bar: stays at the bottom of the screen so the answer button and the feedback never scroll away */
.grammar-feedback { display: flex; align-items: flex-start; gap: var(--s2); background: #fff; border: 1px solid var(--color-danger-border); border-left: 6px solid var(--color-danger); border-radius: var(--radius-control); padding: var(--s3) var(--s4); color: var(--color-danger-text); }
.grammar-feedback.is-correct { border-color: var(--color-success-border); border-left-color: var(--color-success); color: var(--color-success-text); font-weight: 600; }
.grammar-feedback:empty { display: none; }
/* The status line and the feedback share one slot and one geometry (52px, the height of "Correct."), so answering swaps
   text in place. Longer messages (a first-miss reason, a hint) grow the slot downward only. */
.grammar-hint-line[hidden] { display: none; }
/* Hint buttons and the explanation take turns in one cell, so the page never shifts when a question is answered. */
/* Reserve invisible space in ready activities. Skeleton bars belong only to actual loading frames. */
.grammar-why h3 { font-size: 17px; }
.grammar-support select { max-width: 100%; }
.grammar-primary { width: 100%; }
.grammar-speaking { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--g-line); }
.grammar-speaking ul { padding-left: 24px; margin: var(--s2) 0; }
.grammar-why p { margin-top: var(--s2); color: var(--color-text); }

.grammar-glossary h2 { font: 600 22px/1.25 'Source Serif 4', Georgia, serif; }
.grammar-glossary dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); margin-top: var(--s3); }
.grammar-glossary .grammar-vocabulary-row { min-width: 0; border: 0; border-top: 1px solid var(--g-line); border-radius: 0; padding: var(--s2) 0 var(--s3); }
.grammar-glossary dt { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: 24px; color: var(--g-ink); }
.grammar-word-controls { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-left: auto; }
.grammar-glossary dd { display: grid; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--g-muted); margin-top: 0; }
.grammar-gloss-sound { color: var(--color-text-slate); }
.grammar-glossary .grammar-word-link { min-width: 44px; padding: 0; color: var(--g-ink); text-align: left; text-decoration: none; }
.grammar-glossary .grammar-word-link:hover { color: var(--color-interactive); }
.grammar-glossary .grammar-speak, .grammar-glossary .grammar-save { width: 44px; height: 44px; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); box-shadow: none; transform: none; }
.grammar-glossary .grammar-speak:hover, .grammar-glossary .grammar-save:hover { background: var(--color-wash-blue); }
.grammar-glossary .grammar-speak.is-speaking { background: var(--g-ink); color: var(--color-surface); }
.grammar-glossary .grammar-save[aria-pressed='true'] { color: var(--color-favorite); }
.grammar-glossary .grammar-speak svg, .grammar-glossary .grammar-save svg { width: 20px; height: 20px; }
.grammar-glossary .grammar-speak i, .grammar-glossary .grammar-save i { font-size: 18px; }
.grammar-save-placeholder { display: block; flex: none; width: 44px; height: 44px; }

/* Panels and completion */
.grammar-panel h1, .grammar-complete h1 { font-size: clamp(26px, 5vw, 34px); margin: var(--s3) 0 var(--s2); }
.grammar-panel p, .grammar-complete p { color: var(--color-text); }
.grammar-note { background: #fff; border: 1px solid var(--g-line-soft); border-left: 6px solid var(--g-accent); border-radius: var(--radius-control); padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.grammar-planned-focus { margin: var(--s3) 0; }
.grammar-planned-focus p { margin-top: var(--s2); color: var(--g-muted); }
.grammar-complete { padding: var(--s5); }
.grammar-complete-seal { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--g-accent); color: var(--g-accent); font-size: 26px; margin-bottom: var(--s3); }
.grammar-cando-title { margin-top: var(--s4); font-size: 20px; }
.grammar-cando { list-style: none; padding: 0; margin-top: var(--s2); display: grid; gap: var(--s2); }
.grammar-cando li { display: flex; gap: var(--s3); align-items: baseline; }
.grammar-complete .grammar-caption { margin-top: var(--s3); }

@media (max-width: 700px) {
  .grammar-tags { display: none; }
  .grammar-glossary dl { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .grammar-lesson-row, .grammar-lesson-row.has-status { grid-template-columns: 40px minmax(0, 1fr); }
  .grammar-lesson-row .grammar-status { grid-column: 2; justify-self: start; }
  .grammar-support select { width: 100%; }
  .grammar-quiet-btn { padding: var(--s2); }
  .grammar-review-card { align-items: stretch; flex-direction: column; gap: var(--s3); }
  .grammar-review-card .grammar-button { width: 100%; }
  .grammar-home-meta { align-items: flex-start; flex-direction: column; }
  .grammar-next { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) { .grammar-progress > span { transition: none; } }

/* Missions sit between lessons in the course map */
.grammar-lesson-row.is-mission { border-top-style: dashed; margin-top: var(--s2); }
.grammar-lesson-row.is-mission:hover { background: #eaf1fb; }
.grammar-lesson-row.is-mission .grammar-number { border-radius: var(--radius-control); background: var(--g-ink); color: #fff; }
.grammar-partbreak h1 { margin-top: var(--s3); }

/* Before the player starts (grammarBoot.js adds html.grammar-boot on a Grammar address): hide the dictionary's landing card and
   search bar, and lay out the results area exactly as the finished page will. */
html.grammar-boot #landing-card, html.grammar-boot #search-container { display: none; }
html.grammar-boot #results-container { box-sizing: border-box; display: block; width: min(720px, 100%); margin: 0 auto; padding: 16px 12px 120px; }
@media (max-width: 1024px) {
  html.grammar-boot-lesson #mode-nav { display: none; }
  html.grammar-boot-lesson body { padding-bottom: 0; }
  html.grammar-boot-lesson #results-container { padding-bottom: 24px; }
}

/* Skeleton frames: gray placeholders sized like the real cards so nothing moves when the content arrives. */
.grammar-skeleton .sk { display: block; border-radius: var(--radius-control); background: linear-gradient(90deg, #eaeff4 25%, #f6f8fb 37%, #eaeff4 63%); background-size: 400% 100%; animation: grammar-shimmer 1.4s ease infinite; }
@keyframes grammar-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .grammar-skeleton .sk { animation: none; } }
.sk-card { box-sizing: border-box; display: grid; align-content: start; gap: var(--s3); background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius); padding: var(--pad); overflow: hidden; }
.sk-tag { height: 25px; width: 260px; max-width: 80%; } .sk-title { height: 40px; width: 78%; } .sk-line { height: 20px; width: 100%; }
.sk-h2 { height: 30px; width: 100%; } .sk-btn { height: 46px; width: 170px; border-radius: var(--radius-control); } .sk-pill { height: 44px; width: 76px; border-radius: var(--radius-control); }
.sk-dot { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.sk-w20 { width: 20%; } .sk-w30 { width: 30%; } .sk-w45 { width: 45%; } .sk-w60 { width: 60%; } .sk-w70 { width: 70%; } .sk-w80 { width: 80%; }
.sk-units { display: grid; gap: var(--s3); } .sk-unit { height: 604px; gap: 0; padding: var(--s2); }
.sk-unit-head { height: 44px; display: flex; align-items: center; padding: 0 var(--s3); }
.sk-row { display: flex; align-items: center; gap: var(--s4); height: 76px; padding: var(--s3); border-top: 1px solid var(--g-line-soft); }
.sk-lines { flex: 1; display: grid; gap: var(--s2); }
.sk-progress { height: 188px; } .sk-topbar { display: flex; align-items: center; gap: var(--s2); height: 44px; }
.sk-goals { height: 158px; }
.sk-feedback { min-height: 84px; display: grid; gap: var(--s2); align-content: center; }
.sk-chip { flex: none; width: 86px; height: 44px; border-radius: var(--radius-control); } .sk-chip.sk-square { width: 44px; } .sk-mid { flex: 1; margin: 0 auto; }
.sk-labelrow { display: flex; justify-content: space-between; align-items: center; height: 20px; margin-top: var(--s1); }
.sk-barline { height: 8px; border-radius: 99px; }
.sk-activity { min-height: 560px; display: flex; flex-direction: column; }
.sk-tags { display: flex; gap: var(--s2); } .sk-choice { height: 64px; border-radius: var(--radius-control); } .sk-grow { flex: 1; } .sk-wide { height: 56px; width: 100%; border-radius: var(--radius-control); }
@media (max-width: 700px) {
  .sk-unit { height: 898px; } .sk-progress { height: 174px; } .sk-activity { min-height: 590px; }
  .sk-goals { height: 177px; }
}

/* The dictionary's own loading spinner flashes in above the results while it loads in the background; Grammar has its own frames. */
html.grammar-boot #loading-spinner, body.grammar-mode #loading-spinner { display: none !important; }

.sk-fold { height: 82px; align-content: center; }
@media (max-width: 700px) { .sk-fold { height: 66px; } }

/* Grammar consumes the app's existing CEFR signal icon and badge classes. */
.grammar-cefr { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: 14px; }
.grammar-cefr .cefr-value { box-sizing: content-box; display: inline-block; width: auto; min-width: 18px; }
.grammar-cefr .fa-signal { color: var(--color-text-strong); }
.grammar-actions > .grammar-primary, .grammar-next > .grammar-primary { width: 100%; }
.grammar-word-link { appearance: none; background: transparent; border: 0; border-radius: var(--radius-control); padding: 4px 0; min-width: 44px; min-height: 44px; color: var(--color-interactive); font: inherit; text-decoration: none; cursor: pointer; }
.grammar-save { appearance: none; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); font-size: 20px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.grammar-save[aria-pressed='true'] { color: var(--color-favorite); }
.grammar-save:hover { background: rgba(28, 104, 181, .1); }
.grammar-save-status:empty { display: none; }
.grammar-dictionary { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 32px); box-sizing: border-box; margin: auto; padding: var(--pad); overflow-y: auto; border: 1px solid var(--g-line); border-radius: var(--g-radius); background: var(--color-surface); color: var(--g-text); font: inherit; }
.grammar-dictionary::backdrop { background: rgba(0,0,0,.45); }
.grammar-dictionary h2 { font-size: 28px; }
.grammar-dictionary > p, .grammar-dictionary > .grammar-dictionary-meta { margin-top: var(--s3); }
.grammar-dictionary .grammar-dictionary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.grammar-dictionary .grammar-button { text-decoration: none; }
.grammar-dictionary > .grammar-wide { margin-top: var(--s4); }
.grammar-dictionary .grammar-line { font-size: 22px; }
.grammar-dictionary [role='status']:empty { display: none; }

/* Loading mirrors the new overview hierarchy, including the narrow-screen stack. */
.sk-home { gap: var(--s4); }
.sk-home-heading { display: grid; gap: var(--s2); }
.sk-home-heading .sk-title { height: 42px; }
.sk-home-progress { display: grid; gap: var(--s2); }
.sk-home-next { height: 214px; padding: 18px; gap: var(--s2); }
.sk-home-next .sk-wide { margin-top: auto; min-height: 44px; height: 44px; }
.sk-home-review { display: flex; align-items: center; gap: var(--s4); border-top: 1px solid var(--g-line); padding-top: var(--s4); min-height: 64px; }
.sk-home-review .sk-btn { height: 44px; width: 196px; }
.sk-course { height: 156px; }
.sk-pills { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.sk-pills .sk-pill { width: 100%; height: 48px; }
@media (max-width: 520px) {
  .sk-home-heading { min-height: 137px; align-content: start; }
  .sk-home-review { flex-direction: column; align-items: stretch; min-height: 122px; }
  .sk-home-review .sk-lines { width: 100%; }
  .sk-home-review .sk-btn { width: 100%; }
  .sk-home-next { padding: var(--s4); }
}
@media (max-width: 360px) { .grammar-levels .fa-signal { display: none; } }

/* Lesson layouts reserve only the space needed by the current activity. */
.grammar-build-answer .grammar-speak { margin-left: 0; }
.grammar-feedback .grammar-completed-icon { margin-top: 1px; }
.grammar-choice-mark { width: 24px; min-height: 24px; }
.grammar-choice-row.is-right { border-color: var(--color-success-border); box-shadow: inset 0 0 0 1px var(--color-success-border); }
.grammar-activity[data-type='notice'] .grammar-activity-actions:empty { display: none; }

.grammar-feedback.is-support { border-color: var(--color-wash-blue-border); border-left-color: var(--color-interactive); color: var(--color-text-slate); }
.grammar-complete-seal { width: auto; height: auto; border: 0; border-radius: 0; margin-bottom: var(--s4); }
.grammar-complete-seal .game-teaching-outcome-icon { flex: 0 0 42px; width: 42px; height: 42px; }
.grammar-complete-seal svg { width: 22px; height: 22px; }
.grammar-cando li { align-items: flex-start; }
.grammar-cando .grammar-completed-icon { margin-top: 1px; }

/* Completion screen: one clear next step, a secondary exit, then quiet tertiary actions centered below. */
.grammar-complete .grammar-actions { flex-direction: column; align-items: stretch; gap: var(--s3); margin-top: var(--s5); }
.grammar-complete .grammar-actions > .grammar-button { width: 100%; min-height: 52px; }
.grammar-actions-minor { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s4); padding-top: var(--s3); border-top: 1px solid var(--g-line); }
.grammar-button.grammar-quiet { background: transparent; border-color: transparent; color: var(--g-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding-inline: var(--s3); }
.grammar-button.grammar-quiet:hover { background: var(--color-wash-blue); }

/* Six destinations must remain visible when Grammar joins the mobile tab bar. */
@media (max-width: 1024px) {
  #mode-nav:has([data-mode="grammar"]) .mode-tab {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 2px;
    padding-right: 2px;
  }
  #mode-nav:has([data-mode="grammar"]) .mode-tab-label {
    align-items: center;
    display: flex;
    font-size: 11.5px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.15;
    min-height: 26px;
    text-align: center;
    white-space: normal;
    width: 100%;
  }
}


/* ==========================================================================
   Lesson player. The same screen as a Word Game round: a row of outlined small-caps buttons, the
   Step | progress | To go stats row with the instruction under the bar, a lesson card, a result card
   (the Word Game's reveal shelf, reserved from the first frame so grading never moves the page), and
   one navy primary button. Lessons add back and forward arrows beside that button. On phones the
   site header and tab bar step aside, the page never scrolls, and the stage scrolls between the
   stats and a floating bottom dock. On desktop the page scrolls normally in one 633px column.
   Fonts follow the rest of the app: Source Sans 3 for controls and labels, and --g-font-text
   (Source Serif 4; the CJK layer switches it to sans) for sentences and prose.
   ========================================================================== */
.grammar-app {
  --g-font-ui: 'Source Sans 3', 'Noto Sans', sans-serif;
  --g-font-text: 'Source Serif 4', 'Noto Serif', serif;
  --g-prompt: #173a5e;
}
@media (max-width: 1024px) {
/* Like a Word Game round: the tab bar and footer step aside, and the site header goes only on phones (see below). */
html.grammar-boot-lesson footer, html.grammar-boot-lesson #mode-nav,
body.grammar-mode.grammar-lesson footer, body.grammar-mode.grammar-lesson #mode-nav { display: none !important; }
html.grammar-boot-lesson, html:has(body.grammar-lesson), body.grammar-mode.grammar-lesson { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
body.grammar-mode.grammar-lesson { padding: 0; }
html.grammar-boot-lesson #results-container, body.grammar-mode.grammar-lesson #results-container { width: 100%; max-width: none; height: calc(100dvh - 65px); margin: 0; padding: 0; }
body.grammar-lesson .grammar-app { display: flex; flex-direction: column; gap: 0; width: min(680px, 100%); height: 100%; margin: 0 auto; }
}
@media (max-width: 600px) {
html.grammar-boot-lesson header, body.grammar-mode.grammar-lesson header { display: none !important; }
html.grammar-boot-lesson #results-container, body.grammar-mode.grammar-lesson #results-container { height: 100dvh; }
}

/* Toolbar: the Word Game's button band. A full-width white strip with a bottom border under the site header (the Word Game's
   #search-container), the buttons inside it. Up to 1024px the buttons share the row equally (38px, plain labels); from 1025px they are
   the small-caps 44px buttons. The strip is the toolbar itself, widened past the column with a pseudo-element. */
.grammar-toolbar { position: relative; z-index: 100; flex: none; display: flex; justify-content: center; gap: 6px; padding: 10px 12px; }
.grammar-toolbar::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vmax; right: -100vmax; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.grammar-toolbar { position: sticky; top: 0; }
body.grammar-lesson { overflow-x: clip; }
.grammar-toolbar .game-end-session-btn { flex: 1 1 0; min-width: 0; max-width: none; height: 38px; min-height: 0; padding: 4px 6px; box-sizing: border-box; border: 1px solid #d8e1e8; border-radius: 10px; background: #f8fafc; color: #4e6986; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.2; }
.grammar-toolbar .game-end-session-btn:hover { background: #f3f7fb; border-color: #b8c8d6; }

/* Head: the Word Game's stats row, at every width (box sizes and number sizes come from the Word Game's own rules). */
.grammar-head { flex: none; display: grid; gap: var(--s3); padding: var(--s3) var(--s3) 0; }
.grammar-stats { margin: 0; gap: 10px; }
.grammar-app .grammar-stats p, .grammar-app .grammar-stats .game-stat-label { text-align: center; }
.grammar-stat-num { margin: 0; font: 400 24px/1.3 var(--g-font-ui); color: #20364d; user-select: none; }
.grammar-stats .game-stats-correct-box, .grammar-stats .game-stats-incorrect-box { color: #20364d; }
.grammar-stats .game-stats-progress-wrapper { min-width: 0; }
.grammar-stats .game-progress-heading { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grammar-stats .grammar-progress { height: 10px; border-radius: 99px; background: #e4ebf1; }
.grammar-stats .grammar-progress > span { background: var(--g-prompt); }
@media (max-width: 1024px) { .grammar-stat-num { font-size: 16px; } }
.grammar-step-count { white-space: nowrap; }

.grammar-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: var(--s3); padding: var(--s3) var(--s3); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.grammar-stage > * { min-width: 0; }
.grammar-alert-slot:empty, .grammar-audio-note:empty { display: none; }
.grammar-display { padding: var(--s3) var(--s4); }
.grammar-display-title { display: grid; gap: 2px; margin-bottom: var(--s2) !important; }
.grammar-display-title span { color: var(--g-muted); font-size: 14px; }
.grammar-support label { min-height: 40px; }

.grammar-activity { padding: var(--s4); border-color: #cfd9e2; border-radius: 14px; }
.grammar-tags { align-items: center; margin-bottom: var(--s2); }
.grammar-activity h2 { font-family: var(--g-font-text); font-weight: 500; color: var(--g-prompt); font-size: clamp(20px, 5vw, 26px); line-height: 1.3; margin-bottom: var(--s2); }
.grammar-explanation, .grammar-activity > p, .grammar-why p { font-family: var(--g-font-text); font-size: 17px; line-height: 1.55; }
.grammar-chinese { font-family: var(--g-font-text); }
.grammar-translation { font-family: var(--g-font-text); }
.grammar-pinyin, .grammar-zhuyin, .grammar-kana, .grammar-romaji, .grammar-reading-guide .grammar-pinyin, .grammar-reading-guide .grammar-zhuyin, .grammar-reading-guide .grammar-kana, .grammar-reading-guide .grammar-romaji { font-family: var(--g-font-text); font-size: 14px; }
.grammar-choice, .grammar-cloze, .grammar-build-answer button:not(.grammar-speak), .grammar-tiles button { font-family: var(--g-font-text); }

/* Build a sentence: the answer line is as tall as one row of tiles and grows with the sentence. */
.grammar-build-answer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: 66px; margin-top: var(--s3); padding: var(--s2); border: 1px dashed var(--color-border-input); border-radius: var(--radius-card); position: relative; }
.grammar-build-answer.is-wrong { border: 1px solid var(--color-danger); }
.grammar-build-answer:has(.grammar-answer-audio), .grammar-cloze:has(.grammar-answer-audio) { padding-right: 60px; }
.grammar-answer-audio { position: absolute; top: 50%; right: var(--s2); margin: 0; transform: translateY(-50%); }
.grammar-cloze { position: relative; }
.grammar-build-answer .grammar-placeholder { padding: 0 var(--s2); font: 15px/1.4 var(--g-font-ui); }
.grammar-build-answer button:not(.grammar-speak), .grammar-tiles button { font-size: 22px; min-width: 48px; min-height: 48px; padding: 4px var(--s3); line-height: 1.25; border-color: #c9d5df; border-radius: 10px; }
.grammar-tiles { margin-top: var(--s3); }
.grammar-tiles + .grammar-button { margin-top: var(--s2); min-height: 44px; }
.grammar-cloze { margin-top: var(--s3); padding: var(--s3); font-size: clamp(22px, 5.5vw, 28px); }
.grammar-slot { min-height: 48px; }

/* Choices and listening: the Word Game's answer cards (same border, hover and result colors). */
.grammar-choices { gap: var(--s2); margin-top: var(--s3); }
.grammar-choice-row { min-height: 64px; border-color: #c9d5df; border-radius: 10px; transition: background-color 160ms ease, border-color 160ms ease; }
.grammar-choice-row:hover { background: #f3f7fb; border-color: #9fb5c8; }
.grammar-choice-row.is-selected { background: var(--g-wash); border-color: var(--g-prompt); box-shadow: inset 0 0 0 1px var(--g-prompt); }
.grammar-choice-row.is-right, .grammar-choice-row.is-right:hover { background: #dce9d8; border-color: #7d9e73; box-shadow: none; }
.grammar-choice-row.is-wrong, .grammar-choice-row.is-wrong:hover { background: #f2deda; border-color: #b9867d; box-shadow: none; }
.grammar-choice-row.is-right .grammar-choice { color: #294622; }
.grammar-choice-row.is-wrong .grammar-choice { color: #682f27; }
.grammar-choice { min-height: 48px; padding: var(--s2); font-size: 18px; }
.grammar-listen { margin-top: var(--s3); padding: var(--s4); }

/* The result card: the Word Game's reveal shelf. It is on screen from the first frame (a hint and the help
   buttons before an answer), so checking only changes its text and border color. */
.grammar-reveal { display: grid; align-items: center; min-height: 120px; padding: var(--s3) var(--s4); background: #f8fafc; border: 1px solid #d8e1e8; border-radius: 12px; font-family: var(--g-font-ui); transition: border-color 160ms ease; }
.grammar-reveal[data-state='correct'] { border-color: var(--color-success-border); }
.grammar-reveal[data-state='incorrect'] { border-color: var(--color-danger-border); }
.grammar-reveal[data-state='support'] { border-color: var(--color-wash-blue-border); }
.grammar-reveal > * { grid-area: 1 / 1; min-width: 0; }
.grammar-reveal-ghost, .grammar-reveal-live { display: flex; flex-direction: column; gap: var(--s2); }
.grammar-reveal-live { align-self: start; }
.grammar-reveal[data-state='idle'] .grammar-reveal-live { align-self: center; }
.grammar-reveal-ghost { visibility: hidden; pointer-events: none; align-self: stretch; }
.grammar-reveal .grammar-feedback, .grammar-reveal .grammar-ghost-feedback { display: flex; align-items: flex-start; gap: var(--s2); border: 0; border-radius: 0; background: none; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.4; font-family: var(--g-font-ui); }
.grammar-reveal .grammar-feedback.is-incorrect { color: var(--color-danger-text); }
.grammar-reveal .grammar-feedback.is-support { color: var(--color-text-slate); font-weight: 500; }
.grammar-reveal .grammar-hint-line { margin: 0; text-align: center; font-size: 15px; color: var(--g-muted); }
.grammar-reveal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.grammar-reveal-actions .grammar-button { min-height: 44px; padding: 0 var(--s4); font-size: 14px; }
.grammar-reveal .grammar-why { margin: 0; padding-top: var(--s2); }
.grammar-reveal .grammar-why p { font-size: 16px; }

/* The dock: back and forward arrows beside the one main button, which matches the Word Game's primary button.
   On phones it floats at the bottom like the Word Game's Next card. */
.grammar-bar { flex: none; padding: 0 var(--s3) max(var(--s2), env(safe-area-inset-bottom)); }
.grammar-bar-actions { display: flex; align-items: stretch; gap: var(--s2); padding: 7px; background: rgba(255, 255, 255, .97); border: 1px solid #d8e1e8; border-radius: 12px; box-shadow: 0 8px 24px rgba(20, 38, 58, .16); }
.grammar-nav { appearance: none; flex: none; display: grid; place-items: center; width: 52px; min-height: 52px; padding: 0; border: 1px solid #d8e1e8; border-radius: 9px; background: #f8fafc; color: #35516d; cursor: pointer; }
.grammar-nav:hover:not(:disabled) { background: var(--color-wash-blue); }
.grammar-nav:disabled { opacity: .4; cursor: default; }
.grammar-bar-actions .grammar-primary { flex: 1; min-width: 0; min-height: 52px; background: var(--g-prompt); border-color: var(--g-prompt); border-radius: 9px; font: 550 14px/1.25 var(--g-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.grammar-bar-actions .grammar-primary:disabled { background: #e4e9ee; border-color: #d3dbe2; color: var(--color-text-muted); }

/* Notice: examples read as one list, not a stack of boxes. */
.grammar-activity[data-type='notice'] .grammar-example { margin-top: 0; padding: var(--s2) 60px var(--s2) 0; border: 0; border-top: 1px solid var(--g-line-soft); border-radius: 0; }
.grammar-activity[data-type='notice'] .grammar-after { margin-top: var(--s3); }
.grammar-after:empty { display: none; }
.grammar-why { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--g-line-soft); }
.grammar-why h3 { font: 600 15px/1.3 var(--g-font-ui); margin-bottom: var(--s1); }
.grammar-goals { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--g-line-soft); }
.grammar-glossary { padding: var(--s2) var(--s4); }
.grammar-glossary > summary h2 { font-size: 17px; display: inline; }
.grammar-glossary[open] > summary { margin-bottom: var(--s2); }
.grammar-activity[data-type='notice'] .grammar-line { justify-content: space-between; flex-wrap: nowrap; gap: var(--s2); }
.grammar-activity[data-type='notice'] .grammar-chinese { font-size: clamp(20px, 5.4vw, 24px); line-height: 1.4; text-align: left; }
.grammar-activity[data-type='notice'] .grammar-example, .grammar-activity[data-type='notice'] .grammar-example p, .grammar-activity[data-type='notice'] .grammar-example > span { text-align: left; }
.grammar-activity[data-type='notice'] .grammar-example .grammar-translation { margin-top: 2px; }

/* Settings drop down over the lesson instead of pushing it. */
body.grammar-lesson .grammar-app { position: relative; }
body.grammar-lesson .grammar-display { position: absolute; z-index: 20; top: 62px; left: var(--s3); right: var(--s3); box-shadow: 0 8px 24px rgba(13, 58, 105, .16); }
body.grammar-lesson .grammar-stage .grammar-display[hidden] { display: none !important; }

/* The same primary button as the Word Game's. */
.grammar-button.grammar-primary { background: var(--g-prompt); border-color: var(--g-prompt); border-radius: 9px; font-weight: 550; letter-spacing: .06em; }
.grammar-button.grammar-primary:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* Part break, completion and other lesson-flow screens: one card in the same frame, its actions pinned to the bottom of it. */
body.grammar-lesson .grammar-app > .grammar-complete, body.grammar-lesson .grammar-app > .grammar-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 12px; overflow-y: auto; }
body.grammar-lesson .grammar-complete > *, body.grammar-lesson .grammar-panel > * { flex: none; }
body.grammar-lesson .grammar-complete .grammar-actions, body.grammar-lesson .grammar-panel .grammar-actions { margin-top: auto; }
body.grammar-lesson .grammar-app > .grammar-alert-slot { margin: 12px 12px 0; }
body.grammar-lesson .grammar-complete .grammar-actions, body.grammar-lesson .grammar-panel .grammar-actions { position: sticky; bottom: calc(-1 * var(--pad)); margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); margin-bottom: calc(-1 * var(--pad)); padding: var(--s3) var(--pad); background: #fff; border-top: 1px solid var(--g-line); }
body.grammar-lesson .grammar-complete h1, body.grammar-lesson .grammar-panel h1 { font-family: var(--g-font-text); font-weight: 500; color: var(--g-prompt); }
.grammar-app h1 { white-space: normal; overflow: visible; text-overflow: clip; }
.grammar-complete { padding: var(--s4); }
.grammar-complete-seal { margin-bottom: var(--s2); }
.grammar-complete .grammar-actions { gap: var(--s2); margin-top: var(--s4); }
.grammar-complete .grammar-actions > .grammar-button { min-height: 48px; }
.grammar-actions-minor { padding-top: 0; border-top: 0; gap: 0 var(--s4); }
.grammar-actions-minor .grammar-button { min-height: 36px; font-size: 14px; }

/* Loading frames for the lesson mirror the same pieces. */
.sk-activity { min-height: 0; }
.grammar-skeleton .sk-num { width: 18px; height: 20px; margin: 2px auto 0; } .grammar-skeleton .sk-cap { width: 34px; height: 10px; margin: 6px auto 2px; }
.grammar-skeleton .sk-hd { width: 55%; height: 12px; margin: 5px auto 8px; } .grammar-skeleton .sk-ins { width: 40%; height: 12px; margin: 10px auto 0; }
.grammar-skeleton .grammar-toolbar button, .grammar-skeleton .grammar-nav, .grammar-skeleton .grammar-primary { cursor: default; opacity: 1; }
.grammar-skeleton .grammar-toolbar button { color: #8da0b3; }
.sk-activity .sk-h2 { height: 24px; } .sk-activity .sk-tag { height: 22px; width: 220px; } .sk-activity .sk-choice { height: 56px; }
.sk-reveal { min-height: 96px; }

/* ==========================================================================
   Desktop (from 1025px): the site header and tab bar stay, the page scrolls normally, and everything
   sits in one 633px column with the main button directly under the content.
   ========================================================================== */
@media (min-width: 1025px) {
  body.grammar-mode.grammar-lesson #results-container, html.grammar-boot-lesson #results-container { width: min(633px, 100%); max-width: none; height: auto; margin: 0 auto; padding: 0 0 48px; }
  body.grammar-lesson .grammar-app { height: auto; width: 100%; gap: var(--s3); }
  .grammar-toolbar { gap: 8px; padding: 12px 24px; }
  .grammar-toolbar .game-end-session-btn { flex: 0 0 auto; height: 44px; padding: 0 14px; border-color: #d8e1e8; color: #35516d; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
  .grammar-toolbar .game-end-session-btn:hover { background: var(--color-wash-blue); border-color: #d8e1e8; }
  .grammar-head { padding: 0; }
  .grammar-stats .grammar-progress { height: 14px; }
  .grammar-stats .game-instruction { margin-top: 10px; font-size: 15px; }
  .grammar-stage { display: grid; overflow: visible; padding: 0; gap: var(--s3); }
  .grammar-activity { padding: var(--s5); }
  .grammar-activity h2 { font-size: 28px; }
  .grammar-reveal { min-height: 132px; }
  body.grammar-lesson .grammar-display { top: 72px; left: 0; right: 0; }
  .grammar-bar { padding: 0; }
  .grammar-bar-actions { padding: 0; background: none; border: 0; box-shadow: none; }
  .grammar-bar-actions .grammar-primary { min-height: 56px; padding: 17px 15px; }
  .grammar-nav { width: 56px; min-height: 56px; }
  body.grammar-lesson .grammar-app > .grammar-complete, body.grammar-lesson .grammar-app > .grammar-panel { margin: 0; flex: none; }
  body.grammar-lesson .grammar-complete .grammar-actions, body.grammar-lesson .grammar-panel .grammar-actions { position: static; margin: var(--s4) 0 0; padding: 0; border: 0; background: none; }
  .sk-reveal { min-height: 104px; }
}

/* From 601px the Word Game's Next button is a plain inline button, not a floating card: the dock goes flat there too. */
@media (min-width: 601px) and (max-width: 1024px) {
  .grammar-bar-actions { padding: 0; background: none; border: 0; box-shadow: none; }
  .grammar-bar-actions .grammar-primary { min-height: 56px; padding: 17px 15px; }
  .grammar-nav { width: 56px; min-height: 56px; }
}

/* Notebook and previews: grouped by level, then unit. */
.grammar-notebook-level { margin-top: var(--s3); border-top: 1px solid var(--g-line); }
.grammar-notebook-level > summary { display: flex; align-items: center; gap: var(--s2); min-height: 48px; cursor: pointer; list-style: none; }
.grammar-notebook-level > summary::-webkit-details-marker { display: none; }
.grammar-notebook-level > summary::after { content: '+'; margin-left: var(--s2); font-size: 22px; color: var(--g-muted); }
.grammar-notebook-level[open] > summary::after { content: '−'; }
.grammar-notebook-level-name { font-weight: 600; color: var(--g-ink); }
.grammar-notebook-count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--g-muted); white-space: nowrap; }
.grammar-notebook-level > summary .grammar-notebook-count { margin-left: auto; }
.grammar-notebook-unit { margin-top: var(--s3); }
.grammar-notebook-unit > h4 { display: flex; align-items: baseline; gap: var(--s2); margin: 0; font: 600 13px/1.4 var(--g-font-ui); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-text-slate); }
.grammar-notebook-unit > h4 .grammar-notebook-level-name { text-transform: none; letter-spacing: 0; font-size: 15px; }
.grammar-notebook-unit .grammar-point-list { margin-top: var(--s1); }
.grammar-notebook-unit .grammar-actions { margin-top: var(--s2); }
.grammar-completed-icon { flex: none; }
.grammar-status .grammar-completed-icon { margin-right: 0; }
/* The 120px of bottom padding clears the phone tab bar; on desktop there is none. */
@media (min-width: 1025px) {
  body.grammar-mode:not(.grammar-lesson) #results-container, html.grammar-boot:not(.grammar-boot-lesson) #results-container { padding-bottom: 40px; }
}

/* Every spoken example: the speaker sits at the middle of the right edge, and the text keeps clear of it. */
.grammar-example { position: relative; padding-inline: 60px; }
.grammar-example > .grammar-line > .grammar-speak { position: absolute; top: 50%; right: var(--s2); transform: translateY(-50%); }
.grammar-example > .grammar-line > .grammar-speak:hover { transform: translateY(calc(-50% - 1px)); }
.grammar-activity[data-type='notice'] .grammar-example { padding-inline: 0 60px; }
.grammar-activity[data-type='notice'] .grammar-example > .grammar-line > .grammar-speak { right: 0; }

/* ==========================================================================
   Lesson type scale and rhythm, taken from the Word Game's card (15px serif sentences, 14px sans translations and notes,
   16-18px sans titles, a 28px word as the one large element). Chinese and Japanese run a few pixels larger in the lesson
   because the characters need it. Vertical rhythm on the 4-point scale: 8 between a heading and what follows, 12 between
   blocks in a card, 16 between sections; paragraphs read at 15px / 1.55 and never wider than about 60 characters.
   ========================================================================== */
.grammar-activity { padding: var(--s4); }
@media (min-width: 1025px) { .grammar-activity { padding: 20px; } }
.grammar-tags { margin-bottom: var(--s3); }
.grammar-tag { font-size: 12px; padding: 4px var(--s2); }
.grammar-activity h2 { font-size: clamp(18px, 4.5vw, 20px); font-weight: 600; line-height: 1.35; margin-bottom: var(--s2); }
@media (min-width: 1025px) { .grammar-activity h2 { font-size: 20px; } }
.grammar-explanation, .grammar-activity > p, .grammar-why p { font-size: 15px; line-height: 1.55; }
.grammar-explanation { margin-bottom: var(--s3); }
.grammar-explanation:last-child { margin-bottom: 0; }
.grammar-explanation + .grammar-dialogue, .grammar-explanation + .grammar-example, .grammar-explanation + .grammar-examples { margin-top: var(--s3); }

/* Spoken examples: the target sentence is the content (18px), the translation and reading lines are quiet 14px. */
.grammar-chinese { font-size: 18px; line-height: 1.4; }
.grammar-translation { font: 14px/1.4 var(--g-font-ui); color: var(--color-text-slate); }
.grammar-pinyin, .grammar-zhuyin, .grammar-kana, .grammar-romaji { font-size: 14px; }
:lang(zh) .grammar-chinese, :lang(ja) .grammar-chinese, .grammar-chinese:lang(zh), .grammar-chinese:lang(ja) { font-size: 22px; line-height: 1.45; }
.grammar-example { padding-block: var(--s2); margin-top: var(--s2); }
.grammar-example p { margin-top: 2px; }
.grammar-activity[data-type='notice'] .grammar-example { padding: var(--s3) 52px var(--s3) 0; }
.grammar-activity[data-type='notice'] .grammar-chinese { font-size: 18px; line-height: 1.4; }
.grammar-activity[data-type='notice'] .grammar-chinese:lang(zh), .grammar-activity[data-type='notice'] .grammar-chinese:lang(ja) { font-size: 22px; }
.grammar-activity[data-type='notice'] .grammar-explanation { padding-bottom: var(--s3); }
.grammar-example > .grammar-line > .grammar-speak, .grammar-speak { width: 40px; height: 40px; }
.grammar-example { padding-inline: 52px; }
.grammar-activity[data-type='notice'] .grammar-example { padding-inline: 0 52px; }
.grammar-speaker { font-size: 13px; margin-top: var(--s2); }

/* Answers: choices 16px, tiles and blanks 20px (CJK 22px). */
.grammar-choice { font-size: 16px; min-height: 44px; }
.grammar-choice-row { min-height: 56px; }
.grammar-choice [lang='zh-TW'], .grammar-choice [lang='ja'] { font-size: 20px; }
.grammar-build-answer button:not(.grammar-speak), .grammar-tiles button { font-size: 18px; min-width: 44px; min-height: 44px; padding: 4px var(--s3); }
.grammar-build-answer { min-height: 56px; }
.grammar-cloze { font-size: 18px; padding: var(--s3); }
.grammar-cloze:lang(zh), .grammar-cloze:lang(ja), .grammar-build-answer :lang(zh), .grammar-tiles :lang(zh), .grammar-tiles :lang(ja) { font-size: 20px; }
.grammar-slot { min-height: 44px; min-width: 64px; }
.grammar-listen { padding: var(--s4); }

/* The result card and settings follow the Word Game's reveal shelf: 14-15px sans. */
.grammar-reveal .grammar-feedback, .grammar-reveal .grammar-ghost-feedback { font-size: 15px; }
.grammar-reveal .grammar-why p { font-size: 14px; line-height: 1.5; }
.grammar-reveal .grammar-why h3 { font-size: 14px; }
.grammar-reveal .grammar-hint-line { font-size: 14px; }
.grammar-display-title span, .grammar-caption { font-size: 14px; }
.grammar-support { font-size: 15px; }
.grammar-why { margin-top: var(--s3); padding-top: var(--s3); }
.grammar-goals h2 { font-size: 17px; }
.grammar-goals li { font-size: 15px; }
.grammar-complete h1, .grammar-panel h1 { font-size: clamp(22px, 4.5vw, 26px); }
.grammar-complete p, .grammar-panel p { font-size: 15px; max-width: 60ch; }
.grammar-cando-title { font-size: 17px; }
.grammar-stats .game-progress-heading { font-size: 13px; }
@media (min-width: 1025px) { .grammar-stats .game-progress-heading { font-size: 14px; } }

/* ==========================================================================
   Small refinements (Word Game alignment and spacing).
   ========================================================================== */
/* Result card: a compact shelf. It reserves room for the status line and one row of help buttons; the explanation is not
   reserved, so a long one grows the card downward instead of every step carrying 80px of empty space. */
.grammar-reveal { min-height: 96px; padding: var(--s3) var(--s4); align-items: start; }
@media (min-width: 1025px) { .grammar-reveal { min-height: 104px; } }
.grammar-reveal-ghost .grammar-why { display: none; }
.grammar-reveal[data-state='idle'] .grammar-reveal-live { align-self: start; }
.grammar-reveal .grammar-hint-line { text-align: left; }
.grammar-reveal-actions { justify-content: flex-start; gap: var(--s2); }
.grammar-reveal-actions .grammar-button { min-height: 40px; padding: 0 var(--s3); }

/* Audio buttons that sit inside a bordered box keep an even inset from every edge of it: box padding of 12px, button 40px. */
.grammar-example { min-height: 64px; padding-block: var(--s3); display: flex; flex-direction: column; justify-content: center; }
.grammar-example > .grammar-line > .grammar-speak { right: var(--s3); }
.grammar-activity[data-type='notice'] .grammar-example { min-height: 0; padding-block: var(--s3); }
.grammar-activity[data-type='notice'] .grammar-example > .grammar-line > .grammar-speak { right: 0; }
.grammar-answer-audio { right: var(--s3); }
.grammar-build-answer:has(.grammar-answer-audio), .grammar-cloze:has(.grammar-answer-audio) { padding-right: 64px; }
.grammar-choice-row { padding: var(--s1) var(--s3); }
.grammar-listen { gap: var(--s3); }
.grammar-dialogue .grammar-example { margin-top: var(--s1); }
.grammar-choices, .grammar-tiles { margin-top: var(--s4); }
.grammar-tiles + .grammar-button { margin-top: var(--s3); }
.grammar-activity h2 + .grammar-example, .grammar-activity h2 + .grammar-dialogue, .grammar-activity h2 + .grammar-listen { margin-top: var(--s3); }

/* ==========================================================================
   Listening prompt: the Word Game's own play button. The markup carries the Word Game's classes (.game-word-audio on the
   button, .game-listening-icon on the glyph), so the circle, shadow, pulse, hover and press states all come from the Word
   Game's stylesheet; this block only removes the button's own chrome and keeps the Word Game's responsive sizes.
   ========================================================================== */
.grammar-play { appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; color: inherit; cursor: pointer; }
.grammar-play .game-listening-icon { font-size: clamp(28px, 8vw, 40px); height: clamp(64px, 20vw, 88px); width: clamp(64px, 20vw, 88px); }
@media (min-width: 1025px) { .grammar-play .game-listening-icon { font-size: 2.25rem; height: 5.5rem; width: 5.5rem; } }
.grammar-play:hover .game-listening-icon { background-color: var(--color-interactive); box-shadow: 0 6px 14px rgba(13, 58, 105, .45); }
.grammar-play:active .game-listening-icon { transform: scale(.94); }
.grammar-play:focus-visible { outline: none; }
.grammar-play:focus-visible .game-listening-icon { outline: 3px solid var(--color-interactive); outline-offset: 3px; }
.grammar-play.is-speaking .game-listening-icon { background-color: var(--color-interactive); }
.grammar-listen { padding: var(--s5) var(--s4); }

/* ==========================================================================
   "Words for this lesson", set like a dictionary entry: the word in the page's text font (serif; sans for Chinese and Japanese, as in the dictionary) medium navy, its meaning in 14px
   (the dictionary's own .english line, scaled down), the audio button as the dictionary's light square chip, and the save star beside it.
   ========================================================================== */
.grammar-glossary dl { column-gap: var(--s5); }
.grammar-glossary .grammar-vocabulary-row { padding: var(--s3) 0; }
.grammar-glossary dt { display: flex; align-items: center; gap: var(--s2); font-family: var(--g-font-text); font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--g-ink); }
.grammar-glossary .grammar-word-link { min-height: 40px; padding: 0; font-weight: 500; }
.grammar-glossary .grammar-word-link span, .grammar-glossary .grammar-word { font-family: inherit; }
.grammar-glossary .grammar-word-link:hover { color: var(--color-interactive); }
.grammar-glossary dd { gap: 2px; font-family: var(--g-font-text); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--color-text-strong); }
.grammar-glossary .grammar-gloss-sound { font-size: 14px; color: var(--color-text-muted); }
.grammar-glossary .grammar-word-controls { gap: var(--s2); }
.grammar-glossary .grammar-speak { width: 40px; height: 40px; border-radius: 6px; background: var(--color-surface-subtle); color: var(--color-text-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.grammar-glossary .grammar-speak:hover { background: var(--color-surface-strong); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.grammar-glossary .grammar-speak.is-speaking { background: var(--g-ink); color: var(--color-surface); }
.grammar-glossary .grammar-speak i { font-size: 14px; }
.grammar-glossary .grammar-save { width: 40px; height: 40px; }
.grammar-glossary .grammar-save-placeholder { width: 40px; height: 40px; }

.grammar-glossary > summary h2 { font-family: var(--g-font-text); }
.grammar-glossary dt [lang='zh-TW'], .grammar-glossary dt [lang='ja'] { font-size: 24px; font-weight: 400; }

/* Glossary polish: smaller chips (the dictionary's 38x34 scaled down), and clear space between the controls and the meaning. */
.grammar-glossary .grammar-vocabulary-row { padding: var(--s3) 0 var(--s3); }
.grammar-glossary dt { min-height: 36px; }
.grammar-glossary .grammar-word-link { min-height: 36px; }
.grammar-glossary .grammar-speak { width: 34px; height: 30px; border-radius: 5px; }
.grammar-glossary .grammar-speak i { font-size: 13px; }
.grammar-glossary .grammar-save, .grammar-glossary .grammar-save-placeholder { width: 34px; height: 34px; }
.grammar-glossary .grammar-save i, .grammar-glossary .grammar-save svg { font-size: 16px; width: 16px; height: 16px; }
.grammar-glossary .grammar-word-controls { gap: 6px; margin-bottom: var(--s1); }
.grammar-glossary dd { margin-top: var(--s2); }