/* Yomeru shared learning UI
   One visual language for Reading, Vocabulary, Materials, and Grammar.
   This layer consumes the global --polish-* design tokens and does not
   introduce module-specific colors, fonts, navigation, or branding. */

:root {
  --learning-surface: var(--color-paper);
  --learning-surface-solid: var(--color-paper);
  --learning-surface-soft: var(--color-primary-soft);
  --learning-surface-subtle: var(--color-paper);
  --learning-line: var(--polish-line, var(--color-border));
  --learning-line-accent: var(--polish-line-purple, color-mix(in srgb, var(--color-primary) 22%, var(--color-border)));
  --learning-ink: var(--polish-ink, var(--color-text));
  --learning-ink-soft: var(--color-text-soft);
  --learning-muted: var(--polish-muted, var(--color-text-soft));
  --learning-primary: var(--polish-primary, var(--color-primary));
  --learning-primary-hover: var(--polish-primary-hover, var(--color-primary-strong));
  --learning-primary-soft: var(--polish-primary-soft, var(--color-primary-soft));
  --learning-primary-chip: var(--polish-primary-chip, var(--color-primary-soft));
  --learning-radius-page: var(--radius-xl);
  --learning-radius-card: var(--polish-radius-card, var(--radius-lg));
  --learning-radius-panel: var(--polish-radius-panel, var(--radius-lg));
  --learning-radius-control: var(--radius-md);
  --learning-radius-pill: var(--polish-radius-pill, 999px);
  --learning-panel-gap: 20px;
  --learning-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Shared page templates */
.learning-shell {
  width: min(100%, var(--workspace-max));
  min-width: 0;
  max-width: var(--workspace-max);
  margin-inline: auto;
  box-sizing: border-box;
}

body[data-view="reading"] .reading-workbench.learning-shell,
body[data-view="vocab"] .vocab-section-page.learning-shell,
body[data-view="library"] .vocab-library-section.learning-shell,
body[data-view="discover"] .discover-section.learning-shell,
body[data-view="grammar"] .grammar-workspace-page.learning-shell,
body[data-view="history"] .history-section.learning-shell,
body[data-view="exam"] .exam-guide-section.learning-shell,
body[data-view="settings"] .settings-section.learning-shell,
body[data-view="account"] .account-center-section.learning-shell {
  padding: 0;
}

.learning-shell--single {
  display: block;
}

.workspace-content-rail {
  width: 100%;
  min-width: 0;
  margin-inline: auto;
}

.workspace-content-rail--compact {
  max-width: var(--workspace-compact-max);
}

/* Account Center participates in the same Workspace routing layer as other app pages. */
.account-center-section.learning-shell {
  display: none;
}

body[data-view="account"] .app-content {
  display: flex !important;
}

body[data-view="account"] .app-content > :not(.account-center-section) {
  display: none !important;
}

body[data-view="account"] .account-center-section.learning-shell {
  display: block !important;
}

.learning-shell--split {
  gap: 20px !important;
}

/* Shared landing pages for Vocabulary and Grammar. */
.vocabulary-center,
.learning-domain-home {
  display: none;
}

body[data-view="vocabulary"] .app-content > :not(.vocabulary-domain-home),
body[data-view="grammar-home"] .app-content > :not(.grammar-domain-home) {
  display: none !important;
}

body[data-view="vocabulary"] .vocabulary-domain-home,
body[data-view="grammar-home"] .grammar-domain-home {
  display: block !important;
  width: min(100%, var(--workspace-max));
  max-width: var(--workspace-max);
  margin-inline: auto;
  padding: 0;
  box-sizing: border-box;
}

@media (min-width: 721px) {
  body[data-view="vocabulary"] .vocabulary-domain-home,
  body[data-view="grammar-home"] .grammar-domain-home {
    display: grid !important;
    align-items: center;
    min-height: calc(100dvh - var(--workspace-top) - var(--workspace-bottom));
  }
}

body[data-view="vocab"] .vocabulary-center.learning-shell,
body[data-view="library"] .vocabulary-center.learning-shell {
  display: block;
  width: min(100%, var(--workspace-max));
  max-width: var(--workspace-max);
  margin-inline: auto;
  padding: 0;
  box-sizing: border-box;
}

body[data-view="vocab"] .vocabulary-center > .vocab-section-page.learning-shell,
body[data-view="library"] .vocabulary-center > .vocab-library-section.learning-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.learning-domain-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 760px);
  margin: 0 auto;
}

.learning-domain-entry-grid--single {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

.learning-domain-entry {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  min-height: 180px;
  padding: 28px 24px;
  border: 1px solid var(--learning-line);
  border-radius: var(--learning-radius-card);
  background: var(--learning-surface);
  color: var(--learning-ink);
  text-align: center;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms var(--learning-ease-out);
}

.learning-domain-entry--compact {
  min-height: 132px;
  padding-block: 22px;
}

.learning-domain-entry:hover,
.learning-domain-entry:focus-visible {
  border-color: var(--learning-line-accent);
  background: var(--learning-surface-soft);
}

.learning-domain-entry:active {
  transform: scale(.98);
}

.learning-domain-entry-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--learning-radius-control);
  background: var(--learning-primary-soft);
  color: var(--learning-primary);
}

.learning-domain-entry-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.learning-domain-entry strong {
  color: inherit;
  font-size: var(--type-size-section-title);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-heading);
}

.learning-path-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 3px 8px;
  border-radius: var(--radius-round);
  background: var(--learning-primary-soft);
  color: var(--learning-primary);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-compact);
}

.learning-parent-navigation {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 16px;
}

.learning-icon-back.btn-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--learning-radius-control);
  background: transparent;
  color: var(--learning-muted);
  box-shadow: none;
}

.learning-icon-back.btn-icon:hover,
.learning-icon-back.btn-icon:focus-visible {
  border-color: var(--learning-line-accent);
  background: var(--learning-surface-soft);
  color: var(--learning-ink);
}

.learning-icon-back.btn-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#grammarWorkspacePage > .learning-parent-navigation {
  display: none;
}

body[data-view="grammar"] #grammarWorkspacePage[data-grammar-view="home"] > .learning-parent-navigation,
body[data-view="grammar"] #grammarWorkspacePage[data-grammar-view="history"] > .learning-parent-navigation {
  display: flex;
}

@media (max-width: 720px) {
  .learning-domain-entry-grid,
  .learning-domain-entry-grid--single {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .learning-domain-entry {
    min-height: 132px;
    padding: 22px 18px;
  }
}

.learning-section {
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--learning-line);
}

/* Shared surfaces */
.learning-surface,
.learning-toolbar,
.learning-panel,
.learning-list-surface,
.learning-card {
  color: var(--learning-ink) !important;
  border-color: var(--learning-line) !important;
  background: var(--learning-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.learning-surface {
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-page) !important;
}

.learning-toolbar {
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-card) !important;
  background: var(--learning-surface) !important;
  box-shadow: none !important;
}

.learning-toolbar--filters {
  border-radius: var(--learning-radius-panel) !important;
}

.learning-panel {
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-card) !important;
  background: var(--learning-surface) !important;
  box-shadow: none !important;
}

.learning-panel--subtle {
  background: var(--learning-surface-subtle) !important;
}

.learning-list-surface {
  overflow: hidden;
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-card) !important;
  background: var(--learning-surface) !important;
  box-shadow: none !important;
}

.learning-card {
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-panel) !important;
  background: var(--learning-surface-solid) !important;
  box-shadow: none !important;
  transition: border-color 160ms var(--learning-ease-out), background-color 160ms ease, transform 140ms var(--learning-ease-out) !important;
}

.learning-card.is-primary {
  border-color: var(--learning-line-accent) !important;
  box-shadow: none !important;
}

.learning-card.is-secondary {
  background: var(--learning-surface-subtle) !important;
}

.learning-toolbar input,
.learning-toolbar select,
.learning-toolbar textarea {
  border-color: var(--learning-line) !important;
  background: var(--learning-surface-soft) !important;
}

/* Canonical search field: the shell owns the surface; the input stays transparent. */
.learning-search-field {
  min-width: 0;
  min-height: 44px;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 14px !important;
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-control) !important;
  background: var(--learning-surface-soft) !important;
  box-shadow: none !important;
}

.learning-search-field:focus-within {
  border-color: var(--learning-primary) !important;
  box-shadow: 0 0 0 3px var(--learning-primary-soft) !important;
}

.learning-search-field > svg,
.learning-search-field > span {
  width: 20px;
  height: 20px;
  color: var(--learning-muted);
}

body[data-view] .learning-search-field input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.learning-toolbar button,
.learning-panel button,
.learning-card,
.learning-card button {
  transition: color 160ms ease, border-color 160ms var(--learning-ease-out), background-color 160ms ease, transform 140ms var(--learning-ease-out) !important;
}

.learning-toolbar button:active,
.learning-panel button:active,
.learning-card:active,
.learning-card button:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .learning-card:hover {
    border-color: var(--learning-line-accent) !important;
    background: var(--learning-surface-soft) !important;
  }
}

/* Shared typography hierarchy */
.learning-section h2,
.learning-section h3,
body[data-view="discover"] .discover-panel-head h3,
body[data-view="grammar"] .grammar-view-heading h2,
body[data-view="grammar"] .grammar-detail-section h3 {
  color: var(--learning-ink) !important;
  font-family: var(--type-font-brand) !important;
  letter-spacing: -0.02em;
}

body[data-view="grammar"] .grammar-detail-title-row h2[lang="ja"],
body[data-view="grammar"] .grammar-continue-name,
body[data-view="grammar"] .grammar-native-title {
  font-family: var(--type-font-content-ja) !important;
}

/* Reading template */
body[data-view="reading"] .reading-workbench.learning-shell {
  align-items: start;
}

body[data-view="reading"] .reading-main.learning-surface {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-view="reading"] .learning-side-panel.learning-surface {
  border-radius: var(--learning-radius-page) !important;
  background: var(--learning-surface) !important;
}

body[data-view="reading"] .reading-main > .card-pad {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-view="reading"] .learning-side-panel > .learning-side-panel-body {
  padding: 20px;
}

body[data-view="reading"] .learning-side-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 32px;
  margin: 0 0 var(--space-3);
}

body[data-view="reading"] .reader-toolbar.learning-toolbar {
  min-height: 52px;
  padding: 8px 10px !important;
  margin-bottom: 16px;
  border-radius: var(--learning-radius-card) !important;
}

body[data-view="reading"] #readerToolbar.reader-toolbar.learning-toolbar {
  border-radius: var(--learning-radius-card) !important;
}

body[data-view="reading"] .reading-output {
  border-radius: var(--learning-radius-card) !important;
}

body[data-view="reading"] .reading-side {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--learning-panel-gap) !important;
  min-width: 0;
}

/* Vocabulary template */
body[data-view="vocab"] .vocab-section-page.learning-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-view="vocab"] .vocab-section-page.learning-shell > .vocab-book-body {
  display: grid;
  gap: 16px;
  padding: 0 !important;
  background: transparent !important;
}

/* Materials template */
body[data-view="discover"] .discover-section.learning-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-view="discover"] .discover-section.learning-shell > .card-pad {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: 0 !important;
  background: transparent !important;
}

body[data-view="discover"] .discover-panel.learning-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 22px !important;
}

body[data-view="discover"] .discover-panel-head {
  min-width: 0;
  max-width: 100%;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--learning-line);
}

body[data-view="discover"] .graded-reading-section > .discover-panel-head,
body[data-view="discover"] .graded-reading-section > .discover-filter-panel,
body[data-view="discover"] .graded-reading-section > .graded-material-grid,
body[data-view="discover"] .graded-material-grid > .graded-material-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

body[data-view="exam"] .app-content > :not(.exam-guide-section) {
  display: none !important;
}

.exam-guide-section {
  display: none;
}

body[data-view="exam"] .exam-guide-section {
  display: block !important;
}

body[data-view="exam"] .exam-guide-article {
  padding: var(--space-6);
}

body[data-view="exam"] .exam-guide-header {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--learning-line);
}

body[data-view="exam"] .exam-guide-header h1,
body[data-view="exam"] .exam-guide-article-section h2,
body[data-view="exam"] .exam-guide-article-section h3,
body[data-view="exam"] .exam-guide-article-section p {
  margin: 0;
}

body[data-view="exam"] .exam-guide-header h1 {
  color: var(--learning-ink);
  font-size: var(--type-size-page-title);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-compact);
}

body[data-view="exam"] .exam-guide-article-section > p,
body[data-view="exam"] .exam-guide-topic-group p,
body[data-view="exam"] .exam-guide-registration-group > p,
body[data-view="exam"] .exam-guide-resource-row p,
body[data-view="exam"] .exam-guide-type-preview p,
body[data-view="exam"] .exam-guide-key-note p {
  color: var(--learning-muted);
  font-size: var(--type-size-body);
  line-height: var(--type-line-body);
}

body[data-view="exam"] .exam-guide-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

body[data-view="exam"] .exam-guide-toc button {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--learning-line-accent) !important;
  border-radius: var(--learning-radius-control) !important;
  background: var(--learning-primary-soft) !important;
  color: var(--learning-primary) !important;
  box-shadow: none !important;
}

body[data-view="exam"] .exam-guide-toc button:hover,
body[data-view="exam"] .exam-guide-toc button:focus-visible {
  border-color: var(--learning-primary) !important;
  background: var(--learning-primary-soft) !important;
  color: var(--learning-primary-hover) !important;
}

body[data-view="exam"] .exam-guide-article-section {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  scroll-margin-top: var(--space-5);
  border-bottom: 1px solid var(--learning-line);
  outline: none;
}

body[data-view="exam"] .exam-guide-article-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

body[data-view="exam"] .exam-guide-article-section h2 {
  color: var(--learning-ink);
  font-size: var(--type-size-section-title);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-compact);
}

body[data-view="exam"] .exam-guide-section-heading {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
}

body[data-view="exam"] .exam-guide-section-number {
  color: var(--learning-primary);
  font-size: var(--type-size-section-title);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-compact);
  font-variant-numeric: tabular-nums;
}

body[data-view="exam"] .exam-guide-article-section h3 {
  color: var(--learning-ink);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-body);
}

body[data-view="exam"] .exam-guide-article-section:focus-visible {
  box-shadow: inset 3px 0 0 var(--learning-primary);
}

body[data-view="exam"] .exam-guide-action-link {
  justify-self: start;
  min-height: 40px;
  text-decoration: none;
  border-radius: var(--learning-radius-control) !important;
  color: var(--learning-primary) !important;
  font-size: var(--type-size-body) !important;
}

body[data-view="exam"] .exam-guide-action-link:hover,
body[data-view="exam"] .exam-guide-action-link:focus-visible {
  background: var(--learning-primary-soft) !important;
  color: var(--learning-primary-hover) !important;
}

body[data-view="exam"] .exam-guide-topic-groups,
body[data-view="exam"] .exam-guide-registration-groups,
body[data-view="exam"] .exam-guide-resource-groups,
body[data-view="exam"] .exam-guide-type-preview {
  display: grid;
  gap: var(--space-4);
}

body[data-view="exam"] .exam-guide-topic-groups--compact {
  gap: var(--space-3);
}

body[data-view="exam"] .exam-guide-topic-group,
body[data-view="exam"] .exam-guide-registration-group,
body[data-view="exam"] .exam-guide-resource-row,
body[data-view="exam"] .exam-guide-type-preview > div {
  display: grid;
  gap: var(--space-2);
}

body[data-view="exam"] .exam-guide-level-stack {
  display: grid;
  gap: var(--space-4);
}

body[data-view="exam"] .exam-guide-level-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding-block: var(--space-1);
}

body[data-view="exam"] .exam-guide-level-fields,
body[data-view="exam"] .exam-guide-key-values {
  display: grid;
  gap: var(--space-2);
}

body[data-view="exam"] .exam-guide-level-fields p,
body[data-view="exam"] .exam-guide-key-values p {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  min-width: 0;
}

body[data-view="exam"] .exam-guide-level-fields span,
body[data-view="exam"] .exam-guide-key-values span,
body[data-view="exam"] .exam-guide-date-grid span,
body[data-view="exam"] .exam-guide-note {
  color: var(--learning-muted);
  font-size: var(--type-size-body);
  line-height: var(--type-line-body);
}

body[data-view="exam"] .exam-guide-level-fields strong,
body[data-view="exam"] .exam-guide-key-values strong {
  color: var(--learning-ink);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-line-body);
}

body[data-view="exam"] .exam-guide-date-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-4);
}

body[data-view="exam"] .exam-guide-date-grid > div {
  display: grid;
  gap: var(--space-1);
}

body[data-view="exam"] .exam-guide-date-grid strong {
  color: var(--learning-ink);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
}

body[data-view="exam"] .exam-guide-registration-groups {
  gap: var(--space-5);
}

body[data-view="exam"] .exam-guide-registration-group {
  gap: var(--space-3);
}

body[data-view="exam"] .exam-guide-key-note {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--learning-radius-card);
  background: var(--learning-surface-soft);
}

body[data-view="exam"] .exam-guide-key-note > strong {
  color: var(--learning-ink);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
}

body[data-view="exam"] .exam-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

body[data-view="exam"] .exam-guide-actions a,
body[data-view="exam"] .exam-guide-resource-row a {
  text-decoration: none;
}

body[data-view="exam"] .exam-guide-type-preview {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-4) var(--space-5);
}

body[data-view="exam"] .exam-guide-type-preview strong {
  color: var(--learning-ink);
  font-weight: var(--type-weight-semibold);
}

body[data-view="exam"] .exam-guide-resource-groups {
  gap: var(--space-4);
}

body[data-view="exam"] .exam-guide-resource-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  body[data-view="exam"] .exam-guide-article {
    padding: var(--space-4);
  }

  body[data-view="exam"] .exam-guide-action-link {
    min-height: 44px;
  }

  body[data-view="exam"] .exam-guide-level-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-2);
  }

  body[data-view="exam"] .exam-guide-level-fields p,
  body[data-view="exam"] .exam-guide-key-values p {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  body[data-view="exam"] .exam-guide-date-grid,
  body[data-view="exam"] .exam-guide-type-preview {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  body[data-view="exam"] .exam-guide-registration-groups {
    gap: var(--space-4);
  }

  body[data-view="exam"] .exam-guide-resource-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  body[data-view="exam"] .exam-guide-resource-row a {
    justify-self: start;
  }
}

body[data-view="discover"] .discover-filter-panel {
  padding: 12px !important;
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-panel) !important;
  background: var(--learning-surface-soft) !important;
  box-shadow: none !important;
}

body[data-view="discover"] .graded-material-card,
body[data-view="discover"] .source-directory-item,
body[data-view="discover"] .reading-queue-item,
body[data-view="discover"] .content-feed-card {
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-panel) !important;
  background: var(--learning-surface-solid) !important;
  box-shadow: none !important;
}

/* Course and settings pages share the same flat Workspace frame. */
body[data-view="library"] .vocab-library-section.learning-shell,
body[data-view="settings"] .settings-section.learning-shell {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-view="settings"] .settings-layout,
body[data-view="settings"] .settings-main-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

body[data-view="settings"] .settings-page-card.learning-card {
  padding: 20px 22px;
  border-radius: var(--learning-radius-card) !important;
  background: var(--learning-surface-solid) !important;
  transition: none !important;
}

body[data-view="settings"] .settings-page-card.learning-card:hover,
body[data-view="settings"] .settings-page-card.learning-card:active {
  border-color: var(--learning-line) !important;
  background: var(--learning-surface-solid) !important;
  transform: none !important;
}

.workspace-section-head,
body[data-view="settings"] .settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--learning-line);
}

.workspace-section-kicker,
body[data-view="settings"] .settings-kicker {
  display: block;
  margin: 0;
  color: var(--learning-primary);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-compact);
}

.workspace-action-item,
body[data-view="settings"] .settings-action-item {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--learning-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-view="settings"] .settings-action-item:first-of-type,
body[data-view="settings"] .settings-section-head + .settings-action-item {
  border-top: 0;
}

.workspace-action-item strong,
body[data-view="settings"] .settings-action-item strong {
  display: block;
  margin: 0;
  color: var(--learning-ink);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-heading);
}

.workspace-action-item p,
body[data-view="settings"] .settings-action-item p {
  margin: 4px 0 0;
  color: var(--learning-muted);
  font-size: var(--type-size-meta);
  line-height: var(--type-line-body);
}

.workspace-action-item > .btn-primary,
.workspace-action-item > .btn-secondary,
body[data-view="settings"] .settings-action-item > .btn-primary,
body[data-view="settings"] .settings-action-item > .btn-secondary,
body[data-view="settings"] .settings-inline-actions {
  justify-self: end;
}

body[data-view="settings"] .settings-action-item--info {
  grid-template-columns: minmax(0, 1fr);
}

body[data-view="settings"] .settings-action-item--tts {
  grid-template-columns: minmax(180px, 1fr) minmax(320px, 400px);
}

body[data-view="settings"] .settings-tts-controls,
body[data-view="settings"] .settings-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

body[data-view="settings"] .settings-tts-controls {
  width: 100%;
  min-width: 0;
  justify-self: end;
  flex-wrap: nowrap;
}

body[data-view="settings"] .settings-inline-actions {
  flex-wrap: wrap;
}

body[data-view="settings"] .settings-choice-menu {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

body[data-view="settings"] .settings-tts-controls > .btn-secondary {
  flex: 0 0 auto;
}

body[data-view="settings"] .settings-page-card--compact .settings-action-item {
  min-height: 60px;
  padding-block: 10px;
}

@media (max-width: 900px) {
  body[data-view="settings"] .settings-action-item--tts {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body[data-view="settings"] .settings-tts-controls {
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  body[data-view="settings"] .settings-page-card.learning-card {
    padding: 18px 16px;
  }

  .workspace-action-item,
  body[data-view="settings"] .settings-action-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .workspace-action-item > .btn-primary,
  .workspace-action-item > .btn-secondary,
  body[data-view="settings"] .settings-action-item > .btn-primary,
  body[data-view="settings"] .settings-action-item > .btn-secondary,
  body[data-view="settings"] .settings-inline-actions,
  body[data-view="settings"] .settings-tts-controls {
    justify-self: stretch;
    justify-content: flex-start;
  }

  body[data-view="settings"] .settings-tts-controls {
    flex-wrap: wrap;
  }

  body[data-view="settings"] .settings-choice-menu,
  body[data-view="settings"] .settings-tts-controls > .btn-secondary {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* Grammar consumes the same templates and tokens. */
body[data-view="grammar"] .grammar-workspace-page.learning-shell {
  --grammar-canvas: var(--color-bg);
  --grammar-paper: var(--color-paper);
  --grammar-soft: var(--learning-surface-soft);
  --grammar-line: var(--learning-line);
  --grammar-muted: var(--learning-muted);
  --grammar-success: var(--color-success);
  --grammar-success-soft: var(--color-success-soft);
  --grammar-error: var(--color-danger);
  --grammar-error-soft: var(--color-danger-soft);
}

body[data-view="grammar"] .grammar-dashboard,
body[data-view="grammar"] .grammar-native-view,
body[data-view="grammar"] .grammar-history-view {
  width: 100%;
  max-width: 100%;
}

body[data-view="grammar"] .grammar-workspace-header.learning-toolbar {
  min-height: 68px;
  padding: 10px 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--learning-line) !important;
}

body[data-view="grammar"] .grammar-workspace-tabs {
  gap: 6px;
}

body[data-view="grammar"] .grammar-workspace-tabs button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--learning-radius-pill);
  color: var(--learning-muted);
  background: transparent;
}

body[data-view="grammar"] .grammar-workspace-tabs button::after {
  display: none;
}

body[data-view="grammar"] .grammar-workspace-tabs button.is-active {
  border-color: var(--learning-line-accent);
  background: var(--learning-primary-soft);
  color: var(--learning-ink);
}

body[data-view="grammar"] .grammar-header-search {
  min-height: 44px;
  border-radius: var(--learning-radius-pill);
  background: var(--learning-surface-soft);
}

body[data-view="grammar"] .grammar-home-section.learning-section {
  padding-bottom: 36px;
  margin-bottom: 36px;
}

body[data-view="grammar"] .grammar-section-heading {
  margin-bottom: 18px;
}

body[data-view="grammar"] .grammar-section-heading h2,
body[data-view="grammar"] .grammar-view-heading h2 {
  color: var(--learning-ink);
  font-size: var(--type-size-feature-title);
}

body[data-view="grammar"] .grammar-section-heading p,
body[data-view="grammar"] .grammar-view-heading p {
  color: var(--learning-muted);
}

/* Home: clear next-step hierarchy using shared cards. */
body[data-view="grammar"] .grammar-continue-list {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 14px;
  overflow: visible;
  border: 0;
  background: transparent;
}

body[data-view="grammar"] .grammar-continue-row.learning-card {
  grid-template-columns: minmax(0, 1fr) auto 20px;
  grid-template-rows: auto auto minmax(42px, auto);
  gap: 9px 12px;
  min-height: 148px;
  padding: 20px;
  border-bottom: 1px solid var(--learning-line) !important;
}

body[data-view="grammar"] .grammar-continue-kicker {
  grid-column: 1;
  grid-row: 1;
  color: var(--learning-primary);
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-inline-level {
  grid-column: 2;
  grid-row: 1;
  min-width: 36px;
  min-height: 24px;
  border-radius: var(--learning-radius-pill);
  background: var(--learning-primary-chip);
  color: var(--learning-primary);
}

body[data-view="grammar"] .grammar-continue-name {
  grid-column: 1 / span 2;
  grid-row: 2;
  overflow: visible;
  font-size: var(--type-size-feature-title);
  white-space: normal;
}

body[data-view="grammar"] .grammar-continue-summary {
  display: -webkit-box;
  grid-column: 1 / span 2;
  grid-row: 3;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: var(--type-size-body);
  line-height: var(--type-line-body);
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="grammar"] .grammar-continue-row > .grammar-row-chevron {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  color: var(--learning-primary);
}

body[data-view="grammar"] .grammar-level-primary {
  gap: 14px;
}

body[data-view="grammar"] .grammar-level-primary-card.learning-card {
  min-height: 106px;
  padding: 18px;
}

body[data-view="grammar"] .grammar-level-primary-head strong,
body[data-view="grammar"] .grammar-level-primary-action {
  color: var(--learning-primary);
}

body[data-view="grammar"] .grammar-level-upcoming {
  border-color: var(--learning-line);
  border-radius: var(--learning-radius-card);
  background: var(--learning-surface);
}

body[data-view="grammar"] .grammar-level-upcoming button {
  border-color: var(--learning-line);
}

body[data-view="grammar"] .grammar-history-row {
  border-color: var(--learning-line);
  border-radius: var(--learning-radius-panel);
  background: var(--learning-surface-subtle);
  box-shadow: none;
}

/* Browse: same table/list rhythm as the vocabulary library. */
body[data-view="grammar"] .grammar-view-heading {
  min-height: 50px;
  margin-bottom: 16px;
}

body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
  grid-template-columns: minmax(230px, 1.45fr) repeat(4, minmax(108px, 0.65fr));
  gap: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

body[data-view="grammar"] .grammar-filter-search,
body[data-view="grammar"] .grammar-filter-toolbar select {
  min-height: 42px;
  border-color: transparent;
  border-radius: var(--learning-radius-control);
  background: var(--learning-surface-soft);
}

body[data-view="grammar"] .grammar-list-columns {
  display: grid;
  grid-template-columns: 52px minmax(180px, 0.8fr) minmax(230px, 1.25fr) minmax(180px, 0.9fr) 84px 24px;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  color: var(--learning-muted);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.04em;
}

body[data-view="grammar"] .grammar-native-list.learning-list-surface {
  border-radius: var(--learning-radius-card) !important;
}

body[data-view="grammar"] .grammar-native-row {
  grid-template-columns: 52px minmax(0, 1fr) 84px 24px;
  min-height: 82px;
  padding-inline: 14px;
  border-bottom-color: var(--learning-line);
  transition: background-color 150ms ease;
}

body[data-view="grammar"] .grammar-native-main {
  grid-template-columns: minmax(180px, 0.8fr) minmax(230px, 1.25fr) minmax(180px, 0.9fr);
  gap: 18px;
  padding: 14px 12px;
}

body[data-view="grammar"] .grammar-native-title {
  color: var(--learning-ink);
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-native-summary {
  color: var(--learning-muted);
}

body[data-view="grammar"] .grammar-native-pattern {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--learning-muted);
  font-size: var(--type-size-meta);
}

body[data-view="grammar"] .grammar-native-progress {
  min-height: 32px;
  border-color: var(--learning-line);
  border-radius: var(--learning-radius-pill);
  background: rgba(255, 255, 255, 0.76);
  color: var(--learning-muted);
}

body[data-view="grammar"] .grammar-native-row > .grammar-row-chevron {
  align-self: center;
  justify-self: end;
  color: var(--learning-muted);
  font-size: var(--type-size-subtitle);
}

@media (hover: hover) and (pointer: fine) {
  body[data-view="grammar"] .grammar-native-row:hover {
    background: var(--learning-surface-soft);
  }

  body[data-view="grammar"] .grammar-native-main:hover {
    background: transparent;
  }
}

/* Detail: article-like content with shared utility surfaces. */
body[data-view="grammar"] .grammar-detail-hero {
  padding-bottom: 26px;
  margin-bottom: 32px;
  border-bottom-color: var(--learning-line);
}

body[data-view="grammar"] .grammar-detail-title-row h2 {
  color: var(--learning-ink);
  font-size: var(--type-size-display);
  font-weight: var(--type-weight-semibold);
  letter-spacing: -0.02em;
}

body[data-view="grammar"] .grammar-detail-hero > p {
  max-width: 720px;
  color: var(--learning-muted);
}

body[data-view="grammar"] .grammar-detail-actions.learning-toolbar {
  width: fit-content;
  padding: 12px 14px;
  margin-top: 22px;
  align-items: end;
  gap: 24px;
}

body[data-view="grammar"] .grammar-detail-status-group,
body[data-view="grammar"] .grammar-detail-practice-group {
  display: grid;
  gap: 7px;
}

body[data-view="grammar"] .grammar-detail-status-group > span,
body[data-view="grammar"] .grammar-detail-practice-group > span {
  color: var(--learning-muted);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-detail-practice-group {
  padding-left: 24px;
  border-left: 1px solid var(--learning-line);
}

body[data-view="grammar"] .grammar-progress-segment {
  border-color: var(--learning-line);
  border-radius: var(--learning-radius-pill);
}

body[data-view="grammar"] .grammar-progress-segment button.is-active {
  background: var(--learning-primary-soft);
  color: var(--learning-ink);
}

body[data-view="grammar"] .grammar-detail-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
  gap: 42px;
}

body[data-view="grammar"] .grammar-detail-main {
  gap: 36px;
}

body[data-view="grammar"] .grammar-detail-side {
  gap: 18px;
}

body[data-view="grammar"] .grammar-detail-side .grammar-detail-section.learning-panel {
  padding: 20px;
  border-radius: var(--learning-radius-card) !important;
}

body[data-view="grammar"] .grammar-detail-side .grammar-detail-section:first-child {
  border-color: var(--learning-line-accent) !important;
}

body[data-view="grammar"] .grammar-connection-list span {
  border-left-color: var(--learning-primary);
  border-radius: var(--learning-radius-control);
  background: var(--learning-surface-soft);
}

body[data-view="grammar"] .grammar-example-list,
body[data-view="grammar"] .grammar-example-list article,
body[data-view="grammar"] .grammar-review-note {
  border-color: var(--learning-line);
}

/* Practice: one shared panel, one primary action. */
body[data-view="grammar"] .grammar-practice-setup.learning-panel {
  display: grid;
  gap: 22px;
  width: 100%;
  padding: 24px;
  border-bottom: 1px solid var(--learning-line) !important;
}

body[data-view="grammar"] .grammar-practice-setup legend {
  color: var(--learning-ink);
  font-size: var(--type-size-control);
}

body[data-view="grammar"] .grammar-choice-grid span,
body[data-view="grammar"] .grammar-type-options span {
  border-color: var(--learning-line);
  border-radius: var(--learning-radius-pill);
  background: rgba(255, 255, 255, 0.76);
  color: var(--learning-muted);
}

body[data-view="grammar"] .grammar-choice-grid input:checked + span {
  border-color: var(--learning-line-accent);
  background: var(--learning-primary-soft);
  color: var(--learning-ink);
}

body[data-view="grammar"] .grammar-type-options input:checked + span {
  border-color: var(--learning-primary);
  background: var(--learning-surface-solid);
  color: var(--learning-ink);
}

body[data-view="grammar"] .grammar-type-actions {
  top: -3px;
  right: auto;
  left: 52px;
}

body[data-view="grammar"] .grammar-type-actions button {
  color: var(--learning-primary);
}

body[data-view="grammar"] .grammar-practice-start {
  justify-self: end;
  width: 188px;
}

body[data-view="grammar"] .grammar-builder-inline.learning-panel {
  width: 100%;
  padding: 20px 22px;
  margin-top: 18px;
}

body[data-view="grammar"] .grammar-builder-action {
  border-color: var(--learning-line);
  border-radius: var(--learning-radius-pill);
  background: rgba(255, 255, 255, 0.76);
  color: var(--learning-muted);
}

/* Responsive templates */
@media (max-width: 1120px) {
  body[data-view="grammar"] .grammar-list-columns {
    display: none;
  }

  body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-view="grammar"] .grammar-filter-search {
    grid-column: 1 / -1;
  }

  body[data-view="grammar"] .grammar-native-main {
    grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1.2fr);
  }

  body[data-view="grammar"] .grammar-native-pattern {
    grid-column: 1 / span 2;
  }
}

@media (max-width: 900px) {
  body[data-view="grammar"] .grammar-continue-list {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="grammar"] .grammar-continue-row.learning-card {
    min-height: 128px;
  }

  body[data-view="grammar"] .grammar-detail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  body[data-view="grammar"] .grammar-detail-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body:not(.first-visit) .app-interface {
    display: block !important;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: calc(var(--workspace-mobile-header-height) + var(--workspace-mobile-header-gap)) !important;
  }

  body:not(.first-visit) .app-sidebar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 220 !important;
    width: 100% !important;
    height: var(--workspace-mobile-header-height) !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--learning-line) !important;
    background: color-mix(in srgb, var(--color-paper) 96%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px);
    transform: none !important;
  }

  body:not(.first-visit) .sidebar-brand {
    height: var(--workspace-mobile-header-height) !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 var(--workspace-mobile-gutter) !important;
    border: 0 !important;
  }

  body:not(.first-visit) .app-sidebar .global-search,
  body:not(.first-visit) .app-sidebar .sidebar-nav,
  body:not(.first-visit) .app-sidebar .sidebar-footer,
  body:not(.first-visit) .sidebar-toggle-button,
  body:not(.first-visit) .sidebar-restore-button {
    display: none !important;
  }

  body[data-view="reading"] .learning-side-panel > .learning-side-panel-body {
    padding: 16px;
  }

  body[data-view="reading"] .reading-main > .card-pad {
    padding: 0 !important;
  }

  body[data-view="reading"] #readerToolbar.reader-toolbar {
    gap: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    border-radius: var(--learning-radius-card) !important;
  }

  body[data-view="reading"] #readerToolbar .reader-tool-group,
  body[data-view="reading"] #readerToolbar .reader-tool-group-end {
    gap: 8px !important;
    padding: 2px 0 !important;
  }

  body[data-view="reading"] #readerToolbar .reader-tool-group-end {
    padding-top: 8px !important;
    margin-top: 6px !important;
    border-top: 1px solid var(--learning-line) !important;
  }

  body[data-view="discover"] .discover-panel.learning-panel {
    padding: 18px !important;
  }

  body[data-view="discover"] .discover-panel-head {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  body[data-view="discover"] .reading-queue-head-actions,
  body[data-view="discover"] .graded-material-summary {
    min-width: 0;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  body[data-view="discover"] .discover-selects-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body[data-view="discover"] .discover-selects-row #gradedLevelFilters,
  body[data-view="discover"] .discover-selects-row #gradedTopicFilters,
  body[data-view="discover"] .discover-selects-row #gradedSourceFilters,
  body[data-view="discover"] .discover-select-control,
  body[data-view="discover"] .discover-filter-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-view="reading"] .reader-tool,
  body[data-view="reading"] .detail-panel-toggle,
  body[data-view="reading"] .detail-icon-button,
  body[data-view="reading"] .detail-reading-edit {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body[data-view="grammar"] .grammar-workspace-header.learning-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    margin-bottom: 24px;
  }

  body[data-view="grammar"] .grammar-workspace-tabs {
    width: 100%;
  }

  body[data-view="grammar"] .grammar-workspace-tabs button {
    flex: 1;
  }

  body[data-view="grammar"] .grammar-continue-row.learning-card {
    grid-template-columns: minmax(0, 1fr) auto 18px;
    min-height: 0;
    padding: 18px;
  }

  body[data-view="grammar"] .grammar-level-primary-card.learning-card {
    min-height: 102px;
  }

  body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  body[data-view="grammar"] .grammar-native-row {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    padding-inline: 8px;
  }

  body[data-view="grammar"] .grammar-native-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 14px 10px;
  }

  body[data-view="grammar"] .grammar-native-progress {
    grid-column: 2;
    justify-self: start;
    margin: 0 0 12px 10px;
  }

  body[data-view="grammar"] .grammar-native-row > .grammar-row-chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  body[data-view="grammar"] .grammar-detail-actions.learning-toolbar {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  body[data-view="grammar"] .grammar-detail-practice-group {
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid var(--learning-line);
    border-left: 0;
  }

  body[data-view="grammar"] .grammar-detail-side {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="grammar"] .grammar-practice-setup.learning-panel {
    padding: 20px 16px;
  }

  body[data-view="grammar"] .grammar-practice-start {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 430px) {
  body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="grammar"] .grammar-choice-grid,
  body[data-view="grammar"] .grammar-choice-grid.is-count {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="grammar"] .grammar-type-actions {
    left: auto;
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-toolbar *,
  .learning-panel *,
  .learning-card,
  .learning-card * {
    transition-duration: 0.01ms !important;
  }
}

/* Grammar Information Architecture V3 */
body[data-view="grammar"] .grammar-ia-navigation {
  min-height: 0;
  padding: 0 0 10px !important;
  margin-bottom: 30px;
  border: 0 !important;
  border-bottom: 1px solid var(--learning-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-view="grammar"] .grammar-workspace-tabs {
  gap: 22px;
}

body[data-view="grammar"] .grammar-workspace-tabs button {
  min-height: 42px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}

body[data-view="grammar"] .grammar-workspace-tabs button.is-active {
  border-color: var(--learning-primary);
  background: transparent;
  color: var(--learning-primary);
}

body[data-view="grammar"] .grammar-header-search {
  display: none !important;
}

body[data-view="grammar"] .grammar-home-section.learning-section {
  padding-bottom: 30px;
  margin-bottom: 30px;
}

body[data-view="grammar"] .grammar-continue-list {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  gap: 10px;
}

body[data-view="grammar"] .grammar-next-primary {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto;
  min-height: 0;
  padding: 22px 24px;
}

body[data-view="grammar"] .grammar-next-primary .grammar-continue-kicker {
  grid-column: 1;
  grid-row: 1;
}

body[data-view="grammar"] .grammar-next-primary .grammar-inline-level {
  grid-column: 2;
  grid-row: 1;
}

body[data-view="grammar"] .grammar-next-primary .grammar-continue-name {
  grid-column: 1 / -1;
  grid-row: 2;
}

body[data-view="grammar"] .grammar-next-primary .grammar-continue-summary {
  grid-column: 1 / -1;
  grid-row: 3;
}

body[data-view="grammar"] .grammar-continue-action {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: start;
  margin-top: 5px;
  color: var(--learning-primary);
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-next-secondary {
  display: grid;
  grid-template-columns: 110px minmax(150px, 0.55fr) minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--learning-radius-control);
  background: transparent;
  color: var(--learning-ink);
  text-align: left;
  cursor: pointer;
}

body[data-view="grammar"] .grammar-next-secondary > span,
body[data-view="grammar"] .grammar-next-secondary > b {
  color: var(--learning-primary);
}

body[data-view="grammar"] .grammar-next-secondary > strong {
  font-family: var(--type-font-content-ja);
  font-size: var(--type-size-subtitle);
}

body[data-view="grammar"] .grammar-next-secondary > small {
  overflow: hidden;
  color: var(--learning-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="grammar"] .grammar-level-list {
  display: block !important;
  overflow: hidden;
  border: 1px solid var(--learning-line);
  border-radius: var(--learning-radius-card);
  background: var(--learning-surface);
}

body[data-view="grammar"] .grammar-level-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 72px;
  padding: 10px 18px;
  border: 0;
  border-bottom: 1px solid var(--learning-line);
  background: transparent;
  color: var(--learning-ink);
  text-align: left;
  cursor: pointer;
}

body[data-view="grammar"] .grammar-level-row:last-child {
  border-bottom: 0;
}

body[data-view="grammar"] .grammar-level-identity,
body[data-view="grammar"] .grammar-level-copy {
  display: grid;
  gap: 2px;
}

body[data-view="grammar"] .grammar-level-identity strong {
  color: var(--learning-primary);
  font-size: var(--type-size-feature-title);
}

body[data-view="grammar"] .grammar-level-identity small,
body[data-view="grammar"] .grammar-level-copy small {
  color: var(--learning-muted);
}

body[data-view="grammar"] .grammar-level-row-action,
body[data-view="grammar"] .grammar-level-row-chevron {
  color: var(--learning-primary);
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-level-upcoming {
  display: none !important;
}

body[data-view="grammar"] .grammar-history-row {
  min-height: 66px;
  border-radius: var(--learning-radius-control);
  background: transparent;
}

body[data-view="grammar"] .grammar-detail-actionbar {
  display: flex;
  align-items: end;
  gap: 20px;
  width: min(100%, 720px);
  padding: 0;
  margin-top: 22px;
  border: 0;
  background: transparent;
}

body[data-view="grammar"] .grammar-detail-actionbar .grammar-detail-practice-group {
  padding-left: 20px;
  border-left: 1px solid var(--learning-line);
}

body[data-view="grammar"] .grammar-detail-main .grammar-detail-comparisons {
  padding-top: 32px;
  border-top: 1px solid var(--learning-line);
}

body[data-view="grammar"] .grammar-detail-side .grammar-detail-section.learning-panel {
  padding: 20px;
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-control) !important;
  background: var(--learning-surface-soft) !important;
}

body[data-view="grammar"] .grammar-practice-setup.learning-panel {
  gap: 0;
  padding: 8px 24px 0;
}

body[data-view="grammar"] .grammar-practice-step {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--learning-line) !important;
}

body[data-view="grammar"] .grammar-practice-step legend {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  margin: 8px 0 0;
  color: var(--learning-ink);
  font-size: var(--type-size-control);
}

body[data-view="grammar"] .grammar-practice-step legend > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--learning-primary-soft);
  color: var(--learning-primary);
  font-size: var(--type-size-caption);
}

body[data-view="grammar"] .grammar-choice-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body[data-view="grammar"] .grammar-choice-grid.is-count {
  grid-template-columns: repeat(3, minmax(0, 180px));
  max-width: none;
}

body[data-view="grammar"] .grammar-type-fieldset {
  grid-template-columns: 150px minmax(0, 1fr) auto;
}

body[data-view="grammar"] .grammar-type-actions {
  position: static;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  margin-top: 4px;
}

body[data-view="grammar"] .grammar-type-options {
  display: grid;
  grid-column: 2 / -1;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

body[data-view="grammar"] .grammar-type-options span {
  justify-content: flex-start;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: var(--learning-radius-control);
}

body[data-view="grammar"] .grammar-practice-commit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0 22px;
}

body[data-view="grammar"] .grammar-practice-commit p {
  display: grid;
  gap: 3px;
  margin: 0;
}

body[data-view="grammar"] .grammar-practice-commit p > span {
  color: var(--learning-muted);
  font-size: var(--type-size-caption);
}

body[data-view="grammar"] .grammar-practice-commit p > strong {
  color: var(--learning-ink);
  font-size: var(--type-size-control);
}

body[data-view="grammar"] .grammar-practice-commit .grammar-practice-start {
  justify-self: auto;
  width: 190px;
}

body[data-view="grammar"] .grammar-builder-inline.learning-panel {
  min-height: 82px;
  padding: 16px 20px;
}

body[data-view="grammar"] .grammar-practice-history {
  margin-top: 24px;
}

body[data-view="grammar"] .grammar-practice-empty {
  min-height: 0;
  padding: 12px 0;
}

@media (hover: hover) and (pointer: fine) {
  body[data-view="grammar"] .grammar-next-secondary:hover,
  body[data-view="grammar"] .grammar-level-row:hover {
    background: var(--learning-surface-soft);
  }
}

@media (max-width: 900px) {
  body[data-view="grammar"] .grammar-next-primary {
    width: 100%;
  }

  body[data-view="grammar"] .grammar-practice-step,
  body[data-view="grammar"] .grammar-type-fieldset {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  body[data-view="grammar"] .grammar-type-actions {
    grid-column: 2;
  }

  body[data-view="grammar"] .grammar-type-options {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  body[data-view="grammar"] .grammar-ia-navigation {
    flex-direction: row;
    align-items: center;
    padding: 0 0 8px !important;
  }

  body[data-view="grammar"] .grammar-next-secondary {
    grid-template-columns: 90px minmax(0, 1fr) 18px;
  }

  body[data-view="grammar"] .grammar-next-secondary > small {
    display: none;
  }

  body[data-view="grammar"] .grammar-level-row {
    grid-template-columns: 72px minmax(0, 1fr) 18px;
    gap: 10px;
    min-height: 68px;
    padding-inline: 14px;
  }

  body[data-view="grammar"] .grammar-level-row-action {
    display: none;
  }

  body[data-view="grammar"] .grammar-detail-actionbar {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  body[data-view="grammar"] .grammar-detail-actionbar .grammar-detail-practice-group {
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--learning-line);
    border-left: 0;
  }

  body[data-view="grammar"] .grammar-practice-setup.learning-panel {
    padding-inline: 16px;
  }

  body[data-view="grammar"] .grammar-practice-step,
  body[data-view="grammar"] .grammar-type-fieldset {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body[data-view="grammar"] .grammar-practice-step legend,
  body[data-view="grammar"] .grammar-type-actions,
  body[data-view="grammar"] .grammar-type-options {
    grid-column: 1;
  }

  body[data-view="grammar"] .grammar-type-actions {
    grid-row: 1;
    justify-self: end;
  }

  body[data-view="grammar"] .grammar-type-options {
    grid-row: 2;
  }

  body[data-view="grammar"] .grammar-practice-commit {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-view="grammar"] .grammar-practice-commit .grammar-practice-start {
    width: 100%;
  }
}

@media (max-width: 430px) {
  body[data-view="grammar"] .grammar-choice-grid,
  body[data-view="grammar"] .grammar-choice-grid.is-count,
  body[data-view="grammar"] .grammar-type-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Grammar embedded practice — practice is a section of the Grammar home. */
body[data-view="grammar"] .grammar-embedded-practice-section {
  --grammar-practice-stage-max: 860px;
  --grammar-practice-reading-stage-max: 960px;
  scroll-margin-top: 18px;
}

body[data-view="grammar"] .grammar-embedded-practice-section > .grammar-section-heading {
  align-items: end;
  width: min(100%, var(--grammar-practice-stage-max));
  margin-inline: auto;
}

body[data-view="grammar"] .grammar-embedded-practice-section > .grammar-section-heading > span {
  color: var(--learning-muted);
  font-size: var(--type-size-meta);
}

body[data-view="grammar"] .grammar-practice-embedded-form {
  display: grid;
  align-content: center;
  gap: 24px;
  width: min(100%, var(--grammar-practice-stage-max));
  min-height: min(620px, 62vh);
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-view="grammar"] .grammar-embedded-practice-section[data-practice-phase="session"] > .grammar-section-heading,
body[data-view="grammar"] .grammar-embedded-practice-section[data-practice-phase="result"] > .grammar-section-heading {
  display: none;
}

body[data-view="grammar"] .grammar-practice-embedded-form[hidden],
body[data-view="grammar"] .grammar-builder-compact[hidden],
body[data-view="grammar"] .grammar-practice-session[hidden],
body[data-view="grammar"] .grammar-practice-result[hidden] {
  display: none !important;
}

body[data-view="grammar"] .grammar-practice-embedded-form fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

body[data-view="grammar"] .grammar-practice-level-step {
  display: block !important;
  padding-bottom: 18px !important;
}

body[data-view="grammar"] .grammar-practice-level-step > legend {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  color: var(--learning-ink);
}

body[data-view="grammar"] .grammar-practice-level-step > legend > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--learning-primary-soft);
  color: var(--learning-primary);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-semibold);
}

/* Shared JLPT course level entry for Vocabulary and Grammar. */
body[data-view="library"] .learning-course-level-section,
body[data-view="grammar"] .learning-course-level-section {
  width: min(100%, var(--workspace-max));
  min-height: 0;
  padding: 0;
  margin: 0 auto;
  border: 0;
  background: transparent;
}

body[data-view="library"] .vocab-library-level-selection {
  padding-top: 18px;
}

body[data-view="library"] .learning-course-level-grid,
body[data-view="grammar"] .learning-course-level-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-view="library"] .learning-course-level-card,
body[data-view="grammar"] .learning-course-level-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  justify-items: center;
  min-height: 150px;
  padding: 20px 16px;
  border: 1px solid var(--learning-line);
  border-radius: var(--learning-radius-card);
  background: var(--learning-surface);
  color: var(--learning-ink);
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms var(--learning-ease-out);
}

body[data-view="library"] .learning-course-level-card:active,
body[data-view="grammar"] .learning-course-level-card:active {
  transform: scale(.98);
}

body[data-view="library"] .learning-course-level-card--compact {
  min-height: 126px;
  grid-template-rows: auto 1fr;
  padding: 18px 14px;
}

body[data-view="library"] .learning-course-level-card--compact .learning-course-level-count {
  margin-top: 12px;
}

body[data-view="library"] .learning-course-level-name,
body[data-view="grammar"] .learning-course-level-name {
  color: var(--learning-primary);
  font-size: var(--type-size-page-title);
  font-weight: var(--type-weight-bold);
  line-height: 1;
}

body[data-view="library"] .learning-course-level-label,
body[data-view="grammar"] .learning-course-level-label {
  margin-top: 8px;
  color: var(--learning-ink);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
}

body[data-view="library"] .learning-course-level-count,
body[data-view="grammar"] .learning-course-level-count {
  align-self: end;
  margin-top: 18px;
  color: var(--learning-muted);
  font-size: var(--type-size-control);
}

body[data-view="library"] .learning-course-level-status,
body[data-view="grammar"] .learning-course-level-status {
  margin-top: 5px;
  color: var(--learning-muted);
  font-size: var(--type-size-caption);
}

body[data-view="library"] .learning-course-level-card.is-planned,
body[data-view="grammar"] .learning-course-level-card.is-planned {
  cursor: default;
  opacity: .62;
}

body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
  grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(120px, .65fr));
}

body[data-view="grammar"] .grammar-native-row {
  grid-template-columns: 56px minmax(0, 1fr) 28px;
  align-items: start;
  min-height: 112px;
}

body[data-view="grammar"] .grammar-native-level {
  align-self: start;
  margin-top: 20px;
  color: var(--learning-primary);
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-native-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 18px 16px 17px 8px;
}

body[data-view="grammar"] .grammar-native-title {
  font-family: var(--type-font-content-ja);
  font-size: var(--type-size-feature-title);
  line-height: var(--type-line-title);
}

body[data-view="grammar"] .grammar-native-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--learning-ink-soft);
  font-size: var(--type-size-body);
  line-height: var(--type-line-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="grammar"] .grammar-native-pattern {
  display: flex;
  gap: 8px;
  align-items: baseline;
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--learning-muted);
  font-family: var(--type-font-ui-ja);
  font-size: var(--type-size-caption);
  text-overflow: clip;
  white-space: normal;
}

body[data-view="grammar"] .grammar-native-pattern b {
  flex: 0 0 auto;
  color: var(--learning-primary);
  font-family: var(--type-font-ui);
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-row-chevron {
  align-self: center;
  color: var(--learning-primary);
  font-size: 22px;
}

body[data-view="grammar"] .grammar-native-detail {
  width: min(100%, 860px);
}

body[data-view="grammar"] .grammar-detail-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

body[data-view="grammar"] .grammar-detail-flow .grammar-detail-comparisons {
  padding-top: var(--space-6);
}

body[data-view="grammar"] .grammar-usage-note.learning-panel {
  padding: 20px 22px;
  border: 1px solid var(--learning-line) !important;
  border-radius: var(--learning-radius-control) !important;
  background: var(--learning-surface-soft) !important;
}

body[data-view="grammar"] .grammar-usage-note > h3 {
  font-size: var(--type-size-subtitle);
}

@media (hover: hover) and (pointer: fine) {
  body[data-view="library"] .learning-course-level-card:not(:disabled):hover,
  body[data-view="grammar"] .learning-course-level-card:not(:disabled):hover {
    border-color: var(--learning-line-accent);
    background: var(--learning-surface-soft);
  }
}

@media (max-width: 900px) {
  body[data-view="library"] .learning-course-level-grid,
  body[data-view="grammar"] .learning-course-level-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="grammar"] .grammar-filter-search {
    grid-column: 1 / -1;
  }

  body[data-view="grammar"] .grammar-native-row {
    grid-template-columns: 46px minmax(0, 1fr) 24px;
  }

  body[data-view="grammar"] .grammar-native-main {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }

  body[data-view="grammar"] .grammar-native-title,
  body[data-view="grammar"] .grammar-native-summary,
  body[data-view="grammar"] .grammar-native-pattern {
    grid-column: 1 !important;
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="grammar"] .grammar-filter-search {
    grid-column: auto;
  }

  body[data-view="grammar"] .grammar-native-row {
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    min-height: 0;
    padding-inline: 0;
  }

  body[data-view="grammar"] .grammar-native-level {
    margin-top: 18px;
  }

  body[data-view="grammar"] .grammar-native-main {
    gap: 6px;
    padding: 16px 8px;
  }

  body[data-view="grammar"] .grammar-native-title {
    font-size: var(--type-size-subtitle);
  }

  body[data-view="grammar"] .grammar-native-pattern {
    display: block;
  }

  body[data-view="grammar"] .grammar-native-pattern b {
    margin-right: 6px;
  }

  body[data-view="grammar"] .grammar-usage-note.learning-panel {
    padding: 17px 18px;
  }
}

body[data-view="grammar"] .grammar-practice-level-step > legend > strong {
  font-size: var(--type-size-control);
}

body[data-view="grammar"] .grammar-practice-level-step > legend > small {
  color: var(--learning-muted);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-regular);
}

body[data-view="grammar"] .grammar-practice-level-step .grammar-choice-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(88px, 1fr));
  gap: 8px;
  width: 100%;
}

body[data-view="grammar"] .grammar-practice-mode-step .grammar-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-view="grammar"] .grammar-embedded-practice-section[data-practice-purpose^="jlpt-"] .grammar-practice-mode-step .grammar-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-view="grammar"] .grammar-embedded-practice-section[data-practice-purpose^="jlpt-"] .grammar-practice-level-step .grammar-choice-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body[data-view="grammar"] .grammar-practice-embedded-form .grammar-choice-grid label,
body[data-view="grammar"] .grammar-practice-embedded-form .grammar-type-options label {
  min-width: 0;
}

body[data-view="grammar"] .grammar-practice-embedded-form .grammar-choice-grid span,
body[data-view="grammar"] .grammar-practice-embedded-form .grammar-type-options span {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  white-space: nowrap;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

body[data-view="grammar"] .grammar-practice-embedded-form .grammar-choice-grid input:checked + span {
  border-color: var(--learning-primary) !important;
  background: var(--learning-primary) !important;
  color: #ffffff !important;
}

body[data-view="grammar"] .grammar-practice-embedded-form .grammar-choice-grid input:checked + span small {
  color: rgba(255, 255, 255, 0.78) !important;
}

body[data-view="grammar"] .grammar-practice-options {
  border-top: 1px solid var(--learning-line);
  border-bottom: 1px solid var(--learning-line);
}

body[data-view="grammar"] .grammar-practice-options > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 10px 2px;
  color: var(--learning-ink);
  cursor: pointer;
  list-style: none;
}

body[data-view="grammar"] .grammar-practice-options > summary::-webkit-details-marker {
  display: none;
}

body[data-view="grammar"] .grammar-practice-options > summary > span {
  display: grid;
  gap: 2px;
}

body[data-view="grammar"] .grammar-practice-options > summary small {
  color: var(--learning-muted);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-regular);
}

body[data-view="grammar"] .grammar-practice-options > summary > b {
  color: var(--learning-primary);
  font-size: var(--type-size-meta);
  font-weight: var(--type-weight-semibold);
  white-space: nowrap;
}

body[data-view="grammar"] .grammar-practice-options > summary > b::after {
  display: inline-block;
  margin-left: 9px;
  content: '⌄';
  transition: transform 160ms ease;
}

body[data-view="grammar"] .grammar-practice-options[open] > summary > b::after {
  transform: rotate(180deg);
}

body[data-view="grammar"] .grammar-practice-options-body {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 8px 0 18px;
}

body[data-view="grammar"] .grammar-practice-options-body fieldset > legend,
body[data-view="grammar"] .grammar-practice-option-title {
  display: block;
  margin-bottom: 10px;
  color: var(--learning-ink);
  font-size: var(--type-size-meta);
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-practice-options-body .grammar-choice-grid.is-count {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(74px, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
  max-width: none !important;
}

body[data-view="grammar"] .grammar-practice-option-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-view="grammar"] .grammar-practice-option-heading .grammar-practice-option-title {
  margin-bottom: 10px;
}

body[data-view="grammar"] .grammar-practice-option-heading .grammar-type-actions {
  position: static !important;
  display: flex;
  gap: 12px;
  margin: 0 0 10px;
}

body[data-view="grammar"] .grammar-practice-option-heading .grammar-type-actions button {
  min-height: 28px;
  color: var(--learning-primary);
}

body[data-view="grammar"] .grammar-practice-options-body .grammar-type-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-view="grammar"] .grammar-practice-options-body .grammar-type-options span {
  justify-content: flex-start;
  border-radius: var(--learning-radius-control);
}

body[data-view="grammar"] .grammar-practice-commit {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 18px 0 0 !important;
}

body[data-view="grammar"] .grammar-practice-commit .grammar-practice-start {
  width: 190px !important;
  flex: 0 0 190px;
  border-color: var(--learning-primary) !important;
  background: var(--learning-primary) !important;
}

body[data-view="grammar"] .grammar-builder-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  padding: 16px 2px 0;
  margin-top: 18px;
  border-top: 1px solid var(--learning-line);
  background: transparent !important;
}

body[data-view="grammar"] .grammar-builder-compact .grammar-builder-play {
  grid-column: 1 / -1;
}

body[data-view="grammar"] .grammar-embedded-practice-shell > .grammar-practice-session,
body[data-view="grammar"] .grammar-embedded-practice-shell > .grammar-practice-result {
  width: min(100%, var(--grammar-practice-stage-max));
  min-height: min(680px, 68vh);
  margin-inline: auto;
}

body[data-view="grammar"] .grammar-embedded-practice-shell > .grammar-practice-session {
  display: grid;
  grid-template-rows: auto 1fr;
}

body[data-view="grammar"] .grammar-embedded-practice-shell > .grammar-practice-session > .grammar-question-card {
  align-self: center;
}

body[data-view="grammar"] .grammar-embedded-practice-shell > .grammar-practice-result {
  display: grid;
  align-content: center;
}

body[data-view="grammar"] .grammar-embedded-practice-section[data-practice-purpose="jlpt-text-grammar"] .grammar-embedded-practice-shell > .grammar-practice-session {
  width: min(100%, var(--grammar-practice-reading-stage-max));
}

@media (max-width: 900px) {
  body[data-view="grammar"] .grammar-practice-level-step .grammar-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-view="grammar"] .grammar-practice-options-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

@media (max-width: 720px) {
  body[data-view="grammar"] .grammar-practice-embedded-form,
  body[data-view="grammar"] .grammar-embedded-practice-shell > .grammar-practice-session,
  body[data-view="grammar"] .grammar-embedded-practice-shell > .grammar-practice-result {
    min-height: 0;
  }

  body[data-view="grammar"] .grammar-embedded-practice-section > .grammar-section-heading {
    align-items: start;
  }

  body[data-view="grammar"] .grammar-practice-level-step > legend {
    flex-wrap: wrap;
  }

  body[data-view="grammar"] .grammar-practice-level-step > legend > small {
    width: 100%;
    padding-left: 35px;
  }

  body[data-view="grammar"] .grammar-practice-options > summary {
    align-items: flex-start;
  }

  body[data-view="grammar"] .grammar-practice-options > summary > b {
    padding-top: 2px;
  }

  body[data-view="grammar"] .grammar-practice-options-body .grammar-type-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-view="grammar"] .grammar-practice-commit {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body[data-view="grammar"] .grammar-practice-commit .grammar-practice-start {
    width: 100% !important;
    flex-basis: auto;
  }

  body[data-view="grammar"] .grammar-builder-compact {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="grammar"] .grammar-builder-compact .grammar-builder-action {
    justify-self: start;
  }
}

@media (max-width: 430px) {
  body[data-view="grammar"] .grammar-practice-level-step .grammar-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-view="grammar"] .grammar-practice-options > summary {
    gap: 10px;
  }

  body[data-view="grammar"] .grammar-practice-options > summary > b {
    max-width: 46%;
    text-align: right;
    white-space: normal;
  }
}

/* Grammar Core Learning Flow V4.1 */
body[data-view="grammar"] .grammar-native-detail {
  width: min(100%, 820px);
  margin-inline: auto;
}

body[data-view="grammar"] .grammar-browse-heading {
  align-items: center;
  min-height: 48px;
  margin-bottom: 18px;
}

body[data-view="grammar"] .grammar-browse-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--learning-line-accent);
  border-radius: var(--learning-radius-pill);
  background: var(--learning-primary-soft);
  color: var(--learning-primary) !important;
  font-family: var(--type-font-ui) !important;
  font-size: var(--type-size-control);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0;
  line-height: 1;
}

body[data-view="grammar"] .grammar-browse-pill > span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
}

body[data-view="grammar"] .grammar-browse-pill > span + span {
  border-left: 1px solid var(--learning-line-accent);
}

body[data-view="grammar"] .grammar-browse-pill b {
  margin-right: 2px;
  font-size: inherit;
}

body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(160px, .42fr) minmax(180px, .5fr);
  gap: 10px;
  padding: 0 0 18px !important;
  margin-bottom: 0;
  border: 0 !important;
  border-bottom: 1px solid var(--learning-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-view="grammar"] .grammar-filter-toolbar > label {
  min-width: 0;
}

body[data-view="grammar"] .grammar-filter-toolbar input,
body[data-view="grammar"] .grammar-filter-toolbar select {
  min-height: 46px;
  border-radius: var(--learning-radius-control) !important;
}

body[data-view="grammar"] .grammar-native-list.learning-list-surface {
  margin-top: 14px;
  border-radius: var(--learning-radius-panel) !important;
}

body[data-view="grammar"] .grammar-native-row {
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  min-height: 102px;
  padding: 0 16px;
}

body[data-view="grammar"] .grammar-native-level {
  margin-top: 20px;
}

body[data-view="grammar"] .grammar-native-main {
  gap: 6px;
  padding: 18px 8px 17px;
}

body[data-view="grammar"] .grammar-native-summary {
  max-width: 760px;
}

body[data-view="grammar"] .grammar-native-pattern {
  margin-top: 1px;
}

body[data-view="grammar"] .grammar-detail-hero {
  padding: 10px 0 30px;
  margin: 0;
  border-bottom: 1px solid var(--learning-line);
}

body[data-view="grammar"] .grammar-detail-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

body[data-view="grammar"] .grammar-detail-title-row h2 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding-inline-end: 2px;
  margin: 0;
  color: var(--learning-ink);
  font-family: var(--type-font-ui-zh);
  font-size: var(--type-size-display);
  font-weight: var(--type-weight-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-all;
}

body[data-view="grammar"] .grammar-detail-title-row h2[lang="ja"] {
  font-family: var(--type-font-content-ja);
  letter-spacing: -0.02em;
}

body[data-view="grammar"] .grammar-detail-lead {
  max-width: 720px;
  margin-top: 16px !important;
  color: var(--learning-ink-soft) !important;
  line-height: var(--type-line-body);
}

body[data-view="grammar"] .grammar-detail-flow {
  display: block;
  padding-top: var(--space-6);
}

body[data-view="grammar"] .grammar-detail-section {
  padding: 0 0 var(--space-4);
  margin: 0;
  border: 0;
}

body[data-view="grammar"] .grammar-detail-section + .grammar-detail-section {
  padding-top: var(--space-4);
  border-top: 1px solid var(--learning-line);
}

body[data-view="grammar"] .grammar-detail-section:last-child {
  padding-bottom: 0;
}

body[data-view="grammar"] .grammar-detail-section-heading {
  margin-bottom: var(--space-3);
}

body[data-view="grammar"] .grammar-detail-section-heading h3 {
  margin: 0 !important;
  color: var(--learning-ink);
  font-family: var(--type-font-brand);
  font-size: var(--type-size-subtitle);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-heading);
}

body[data-view="grammar"] .grammar-meaning-list,
body[data-view="grammar"] .grammar-connection-list {
  display: grid;
  gap: var(--space-2);
}

body[data-view="grammar"] .grammar-meaning-list p,
body[data-view="grammar"] .grammar-connection-item p,
body[data-view="grammar"] .grammar-example-list article > div > p,
body[data-view="grammar"] .grammar-usage-list p,
body[data-view="grammar"] .grammar-error-expression p,
body[data-view="grammar"] .grammar-error-reason p,
body[data-view="grammar"] .grammar-detail-comparisons h4,
body[data-view="grammar"] .grammar-detail-comparisons p,
body[data-view="grammar"] .grammar-detail-comparisons li,
body[data-view="grammar"] .grammar-related-confusion-item strong {
  margin: 0;
  color: var(--learning-ink);
  font-family: var(--type-font-ui-zh);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-line-body);
}

body[data-view="grammar"] .grammar-detail-comparisons h4,
body[data-view="grammar"] .grammar-related-confusion-item strong {
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-connection-item.is-numbered {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--space-3);
}

body[data-view="grammar"] .grammar-connection-item > span {
  padding-top: 2px;
  color: var(--learning-muted);
  font-family: var(--type-font-ui-zh);
  font-size: var(--type-size-control);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-body);
}

body[data-view="grammar"] .grammar-connection-item p,
body[data-view="grammar"] .grammar-example-list article > div > p,
body[data-view="grammar"] .grammar-error-expression p,
body[data-view="grammar"] .grammar-related-confusion-item strong[lang="ja"] {
  font-family: var(--type-font-content-ja);
}

body[data-view="grammar"] .grammar-example-list {
  display: grid;
  gap: var(--space-5);
}

body[data-view="grammar"] .grammar-example-list article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

body[data-view="grammar"] .grammar-example-number {
  display: block;
  width: auto;
  height: auto;
  padding-top: 2px;
  border-radius: 0;
  background: transparent;
  color: var(--learning-muted);
  font-family: var(--type-font-ui-zh);
  font-size: var(--type-size-control);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-body);
  text-align: left;
}

body[data-view="grammar"] .grammar-example-list article > div {
  min-width: 0;
}

body[data-view="grammar"] .grammar-example-list article > div > p {
  margin: 0 0 7px;
}

body[data-view="grammar"] .grammar-example-list article > div > span,
body[data-view="grammar"] .grammar-example-list article > div > .grammar-example-note,
body[data-view="grammar"] .grammar-related-confusion-item .grammar-related-summary {
  display: block;
  color: var(--learning-muted);
  font-family: var(--type-font-ui-zh);
  font-size: var(--type-size-control);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-line-body);
}

body[data-view="grammar"] .grammar-error-expression > span,
body[data-view="grammar"] .grammar-error-reason > span {
  color: var(--learning-muted);
  font-family: var(--type-font-ui-zh);
  font-size: var(--type-size-control);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-body);
}

body[data-view="grammar"] .grammar-error-list,
body[data-view="grammar"] .grammar-comparison-list {
  display: grid;
  gap: 14px;
}

body[data-view="grammar"] .grammar-error-list > article {
  margin: 0;
}

body[data-view="grammar"] .grammar-comparison-list > article {
  padding: 0;
  border: 0;
}

body[data-view="grammar"] .grammar-comparison-notes {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

body[data-view="grammar"] .grammar-detail-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 28px;
}

body[data-view="grammar"] .grammar-detail-next button {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 14px 18px;
  border: 1px solid var(--learning-line);
  border-radius: var(--learning-radius-control);
  background: var(--learning-surface-subtle);
  color: var(--learning-ink);
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms var(--learning-ease-out), background-color 160ms ease, transform 140ms var(--learning-ease-out);
}

body[data-view="grammar"] .grammar-detail-next button > span {
  color: var(--learning-muted);
  font-size: var(--type-size-caption);
}

body[data-view="grammar"] .grammar-detail-next button > strong {
  padding-right: 20px;
  font-weight: var(--type-weight-semibold);
}

body[data-view="grammar"] .grammar-detail-next button > b {
  position: absolute;
  right: 18px;
  top: 50%;
  color: var(--learning-primary);
  transform: translateY(-50%);
}

body[data-view="grammar"] .grammar-detail-next button:active {
  transform: scale(0.98);
}

body[data-view="grammar"] .grammar-review-note {
  margin-top: 18px;
}

@media (hover: hover) and (pointer: fine) {
  body[data-view="grammar"] .grammar-detail-next button:hover {
    border-color: var(--learning-line-accent);
    background: var(--learning-surface-soft);
  }
}

@media (max-width: 900px) {
  body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="grammar"] .grammar-filter-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  body[data-view="library"] .vocab-library-level-selection {
    padding-top: 8px;
  }

  body[data-view="library"] .learning-course-level-grid,
  body[data-view="grammar"] .learning-course-level-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body[data-view="library"] .learning-course-level-card,
  body[data-view="grammar"] .learning-course-level-card {
    grid-template-columns: 64px minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: start;
    min-height: 76px;
    padding: 13px 16px;
    text-align: left;
  }

  body[data-view="library"] .learning-course-level-name,
  body[data-view="grammar"] .learning-course-level-name {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body[data-view="library"] .learning-course-level-label,
  body[data-view="grammar"] .learning-course-level-label {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  body[data-view="library"] .learning-course-level-count,
  body[data-view="grammar"] .learning-course-level-count {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 2px;
  }

  body[data-view="library"] .learning-course-level-status,
  body[data-view="grammar"] .learning-course-level-status {
    display: none;
  }


  body[data-view="grammar"] .grammar-browse-heading {
    align-items: flex-start;
    gap: 14px;
  }

  body[data-view="grammar"] .grammar-filter-toolbar.learning-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="grammar"] .grammar-filter-search {
    grid-column: auto;
  }

  body[data-view="grammar"] .grammar-meaning-list,
  body[data-view="grammar"] .grammar-detail-next {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="grammar"] .grammar-detail-section {
    padding: var(--space-5) 0;
  }

  body[data-view="grammar"] .grammar-connection-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  body[data-view="grammar"] .grammar-usage-note.learning-panel {
    padding: 20px !important;
  }
}


/* B.1 tablet containment: keep the sidebar while allowing learning workspaces to reflow. */
@media (min-width: 721px) and (max-width: 1024px) {
  body:not(.first-visit) .app-interface {
    display: block !important;
    padding-top: 0 !important;
  }

  body:not(.first-visit) .app-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: var(--space-5) var(--space-4) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body:not(.first-visit) .app-sidebar .sidebar-brand,
  body:not(.first-visit) .app-sidebar .global-search {
    flex: 0 0 auto !important;
  }

  body:not(.first-visit) .app-sidebar .sidebar-nav {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
  }

  body:not(.first-visit) .app-sidebar .sidebar-footer {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 16px 4px 0 !important;
    border-top: 1px solid var(--learning-line) !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  body:not(.first-visit) .app-sidebar .sidebar-utility-button {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  body:not(.first-visit) .app-content {
    width: calc(100% - var(--sidebar-width)) !important;
    min-width: 0 !important;
    margin-left: var(--sidebar-width) !important;
    overflow-x: clip;
  }

  body.sidebar-collapsed:not(.first-visit) .app-content {
    width: 100% !important;
    margin-left: 0 !important;
  }

  body[data-view="reading"] .reading-workbench.learning-shell,
  body[data-view="reading"] .reading-workbench.learning-shell--split {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    padding-top: 0 !important;
  }

  body[data-view="reading"] .reading-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body[data-view="reading"] .reading-side {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: static !important;
    gap: var(--learning-panel-gap) !important;
  }

  body[data-view="reading"] .reading-grammar-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-view="reading"] .reading-main,
  body[data-view="reading"] .reading-side,
  body[data-view="reading"] .reading-output,
  body[data-view="vocab"] .vocab-section-page.learning-shell,
  body[data-view="vocab"] .vocab-section-page.learning-shell > .card-pad {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body[data-view="vocab"] .vocab-workbar.learning-toolbar,
  body[data-view="vocab"] .vocab-page-list.learning-list-surface {
    min-width: 0 !important;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-card,
  .learning-toolbar button,
  .learning-panel button,
  .learning-card button,
  body[data-view="grammar"] .grammar-detail-next button {
    transition-duration: 0.01ms !important;
  }
}