/* Inner learning surfaces. Loaded after the app and shared brand styles. */
.learning-workspace {
  --workspace-font: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  --workspace-soft: #f7f9fc;
  --workspace-border: #dfe7ef;
  --workspace-muted: #596b7e;
  color: var(--brand-ink);
  font-family: var(--workspace-font);
  line-height: 1.65;
}

.learning-workspace :is(.page-shell, .site-shell, .write-shell) {
  width: min(1200px, calc(100% - 48px));
  padding-top: 0;
}
.learning-workspace :is(.site-topbar, .topbar, .write-topbar) {
  margin-bottom: 0;
  border-bottom-color: var(--workspace-border);
}
.learning-workspace :is(.quick-nav, .nav, .write-nav) a {
  font-family: var(--workspace-font);
  font-weight: 650;
}
.learning-workspace :is(.quick-nav, .nav, .write-nav) a:hover {
  background: var(--brand-accent-soft);
}
.learning-workspace :is(.quick-nav, .nav, .write-nav) a.is-current {
  color: var(--brand-accent);
  background: var(--brand-accent-soft);
  box-shadow: inset 0 -2px var(--brand-accent);
}
.learning-workspace :is(.site-brand-copy, .write-brand-copy) > span,
.learning-workspace .brand small {
  color: var(--workspace-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}

.workspace-skip {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  color: #fff;
  background: #145b95;
  border-radius: 8px;
  transform: translateY(-160%);
}
.workspace-skip:focus { transform: translateY(0); }
.workspace-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 56px;
  padding: 8px 4px;
  color: var(--workspace-muted);
  font-size: 13px;
}
.workspace-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--workspace-muted);
  text-decoration: none;
}
.workspace-breadcrumb a:hover { color: var(--brand-accent); text-decoration: underline; }
.workspace-breadcrumb [aria-current] { color: var(--brand-ink); font-weight: 650; }
.learning-workspace #main-content { scroll-margin-top: 100px; }

/* Compact task introduction keeps the working area close to the top. */
.learning-workspace .page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  min-height: 0;
  gap: 6px 24px;
  padding: 24px 28px;
  border-radius: 16px;
}
.learning-workspace .page-intro > :is(.eyebrow, .section-kicker) {
  grid-column: 1;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.learning-workspace .page-intro h1 {
  grid-column: 1;
  margin: 0;
  font-family: var(--workspace-font);
  font-size: clamp(26px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.35;
}
.learning-workspace .page-intro > :is(p, .intro-text) {
  grid-column: 1;
  max-width: 64ch;
  margin: 0;
  color: var(--workspace-muted);
  font-size: 14px;
  line-height: 1.75;
}
.learning-workspace .page-intro .page-tools {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  justify-content: flex-end;
  max-width: 300px;
  gap: 8px;
  margin: 0;
}
.learning-workspace .page-tools > :is(a, button) {
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 650;
}
.learning-workspace :is(.main-layout, .page-main, .write-main) { gap: 20px; }
.learning-workspace .page-intro + main { margin-top: 20px; }
.learning-workspace :is(.section, .section-panel):not(.page-intro) {
  padding: 24px;
  border-radius: 16px;
  box-shadow: none;
}
.learning-workspace .section-head { gap: 12px 24px; margin-bottom: 20px; }
.learning-workspace .section-head h2 {
  font-family: var(--workspace-font);
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -.02em;
}
.learning-workspace .section-head p { max-width: 55ch; margin: 0; font-size: 14px; }
.learning-workspace :is(h2, h3, .feature-card strong, .stat-card strong) { font-family: var(--workspace-font); }
.learning-workspace :is(.muted, .mission-points, .detail-subtitle) { color: var(--workspace-muted); }
.learning-workspace :is(.card, .detail-card, .topic-detail, .lesson-detail, .composition-route-card, .composition-step-card, .story-section) {
  border-color: var(--workspace-border);
  border-radius: 12px;
  background-image: none;
  box-shadow: none;
}
.learning-workspace :is(.card-soft, .detail-card.soft, .detail-card.highlight) { background: var(--workspace-soft); }
.learning-workspace :is(.primary-button, .button-primary, .pill-button, .button.primary) { background: var(--brand-accent); color: #fff; }
.learning-workspace :is(.secondary-button, .button-secondary, .pill-button.ghost, .pill-button.neutral, .button.secondary, .tiny-button) {
  border: 1px solid var(--workspace-border);
  background: #fff;
  color: var(--brand-ink);
}
.learning-workspace :is(button, input, select, textarea) { font-family: var(--workspace-font); }
.learning-workspace :is(button, .button-primary, .button-secondary, .primary-button, .secondary-button, .pill-button) {
  min-height: 44px;
  font-weight: 650;
}
.learning-workspace :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 3px;
}

/* English: a quiet mission rail and a prominent, readable word card. */
.learning-workspace .study-grid {
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 0;
}
.learning-workspace #todayMission { padding: 20px; }
.learning-workspace #todayMission h3 { margin: 8px 0; font-size: 20px; line-height: 1.5; }
.learning-workspace #todayMission p,
.learning-workspace .mission-points { font-size: 14px; line-height: 1.8; }
.learning-workspace .study-card {
  display: block;
  min-width: 0;
  padding: 24px;
  background: #fff;
  border-top: 3px solid var(--brand-accent);
}
.learning-workspace .study-word {
  margin: 16px 0 8px;
  font-family: var(--workspace-font);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.learning-workspace .phonetic { color: var(--workspace-muted); font-size: 16px; font-weight: 500; }
.learning-workspace :is(.meaning-box, .sentence-box, .mini-meter, .quiz-card, .result-card, .progress-block) {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--workspace-border);
  border-radius: 10px;
  background: var(--workspace-soft);
  line-height: 1.7;
}
.learning-workspace .study-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.learning-workspace .study-actions [data-action="next-study"] { margin-left: auto; }
.learning-workspace :is(.progress-fill, .meter-fill) { background: var(--brand-accent); }
.learning-workspace :is(.library-toolbar, .practice-toolbar, .module-filter-bar, .group-filters) {
  padding: 12px;
  border: 1px solid var(--workspace-border);
  border-radius: 12px;
  background: var(--workspace-soft);
  gap: 8px;
}
.learning-workspace .library-toolbar { margin-bottom: 12px; }
.learning-workspace :is(.word-grid, .library-grid) { gap: 16px; }
.learning-workspace :is(.word-card, .library-card) { padding: 20px; }
.learning-workspace .word-card h3 { font-size: 23px; line-height: 1.4; overflow-wrap: anywhere; }
.learning-workspace :is(.filter-chip.active, .filter-pill.is-active, .chip.is-active) { color: #fff; background: var(--brand-accent); }
.learning-workspace :is(.quiz-root, .quiz-empty) { min-height: 0; }
.learning-workspace .quiz-title { font-size: 24px; line-height: 1.5; }
.learning-workspace :is(.stats-grid, .summary-grid, .progress-grid) { gap: 16px; }
.learning-workspace :is(.stat-card, .summary-card) { padding: 20px; }

/* Course workspaces: distinct directory, method, example, and practice surfaces. */
.learning-workspace :is(.study-layout, .lesson-layout) {
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.learning-workspace :is(.topic-list, .lesson-sidebar) { gap: 8px; min-width: 0; }
.learning-workspace .lesson-sidebar { position: static; }
.learning-workspace :is(.topic-list-item, .lesson-chip) {
  padding: 14px 16px;
  border: 1px solid var(--workspace-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
.learning-workspace :is(.topic-list-item.is-active, .lesson-chip.is-current) {
  border-color: var(--brand-accent);
  background: var(--brand-accent-soft);
  box-shadow: inset 3px 0 var(--brand-accent);
}
.learning-workspace .lesson-chip strong { margin: 8px 0; font-size: 16px; line-height: 1.5; }
.learning-workspace :is(.detail-head h2, .detail-top h2) { margin: 8px 0; font-size: 26px; line-height: 1.45; }
.learning-workspace :is(.detail-card, .example-block, .question-card, .practice-card, .homework-card) { padding: 20px; }
.learning-workspace :is(.example-block, .detail-card.highlight) { background: var(--brand-accent-soft); border-color: var(--workspace-border); }
.learning-workspace :is(.story-copy h3, .story-section h3, .detail-section h3) { font-size: 22px; line-height: 1.5; }
.learning-workspace :is(.story-section p, .story-copy p, .essay-paragraph, .question-prompt) { line-height: 1.9; }
.learning-workspace .question-card summary { display: list-item; color: var(--brand-accent); padding: 12px 0; }
.learning-workspace .question-card details[open] { border-top: 1px solid var(--workspace-border); }
.learning-workspace :is(.topic-progress-item, .progress-row) { min-width: 0; }

/* Composition reading has a narrower measure than tools and dashboards. */
.learning-workspace.composition-page .write-main { max-width: 1040px; margin-inline: auto; }
.learning-workspace .composition-tabs { padding-bottom: 16px; border-bottom: 1px solid var(--workspace-border); }
.learning-workspace .composition-tab { font-size: 14px; font-weight: 650; }
.learning-workspace :is(.composition-route-card, .composition-step-card) { padding: 24px; background: var(--workspace-soft); }
.learning-workspace :is(.composition-route-card h3, .composition-step-card strong) { font-size: 21px; line-height: 1.45; }
.learning-workspace :is(.composition-route-card p, .composition-step-card p, .essay-list, .essay-paragraph) { color: #344b61; font-size: 16px; line-height: 1.9; }
.learning-workspace .composition-demo-grid { align-items: start; }
.workspace-reading-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--workspace-border);
}
.workspace-reading-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-accent); text-decoration: none; font-weight: 650; }
.workspace-reading-nav .workspace-next { padding: 10px 16px; border-radius: 10px; background: var(--brand-accent-soft); }
.workspace-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  width: min(1200px, calc(100% - 48px));
  margin: 32px auto 0;
  padding: 24px 0 32px;
  border-top: 1px solid var(--workspace-border);
  color: var(--workspace-muted);
  font-size: 13px;
}
.workspace-footer a { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--workspace-muted); text-decoration: none; }
.workspace-footer img { display: block; width: 104px; height: 32px; object-fit: contain; }

@media (max-width: 1024px) {
  .learning-workspace .page-intro { grid-template-columns: 1fr; }
  .learning-workspace .page-intro .page-tools { grid-column: 1; grid-row: auto; max-width: none; justify-content: flex-start; margin-top: 8px; }
  .learning-workspace :is(.study-grid, .study-layout, .lesson-layout) { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
  .learning-workspace :is(.detail-two-column, .detail-grid, .story-checklist) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .learning-workspace :is(.page-shell, .site-shell, .write-shell), .workspace-footer { width: calc(100% - 32px); }
  .learning-workspace :is(.site-topbar, .topbar, .write-topbar) { position: static; flex-wrap: wrap; }
  .learning-workspace :is(.quick-nav, .nav, .write-nav) { flex: 1 0 100%; flex-wrap: wrap; overflow: visible; }
  .workspace-breadcrumb { min-height: 48px; gap: 4px 8px; font-size: 12px; }
  .learning-workspace #main-content { scroll-margin-top: 16px; }
  .learning-workspace .page-intro { padding: 20px; }
  .learning-workspace .page-intro .page-tools > a { flex: 0 1 auto; font-size: 13px; }
  .learning-workspace :is(.section, .section-panel):not(.page-intro) { padding: 20px; }
  .learning-workspace :is(.study-grid, .study-layout, .lesson-layout, .progress-grid) { grid-template-columns: minmax(0, 1fr); }
  .learning-workspace #todayMission { padding: 16px; }
  .learning-workspace #todayMission .mission-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .learning-workspace :is(.topic-list, .lesson-sidebar) { display: flex; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
  .learning-workspace :is(.topic-list-item, .lesson-chip) { flex: 0 0 min(240px, 75vw); padding: 12px; scroll-snap-align: start; }
  .learning-workspace .study-card { padding: 20px; }
  .learning-workspace .study-actions [data-action="next-study"] { margin-left: 0; }
  .learning-workspace :is(.detail-head, .detail-top) { flex-direction: column; }
  .learning-workspace :is(.detail-head h2, .detail-top h2) { font-size: 23px; }
  .learning-workspace :is(.lesson-detail, .detail-panel, .detail-card, .homework-card) { padding: 16px; }
  .learning-workspace :is(.composition-route-grid, .composition-content-grid, .composition-demo-grid, .composition-steps) { grid-template-columns: minmax(0, 1fr); }
  .workspace-footer { margin-top: 24px; padding-top: 20px; }
}
@media (max-width: 380px) {
  .learning-workspace :is(.section, .section-panel):not(.page-intro) { padding: 16px; }
  .learning-workspace .study-card { padding: 16px; }
  .learning-workspace #todayMission .mission-points { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .workspace-skip, .workspace-breadcrumb, .workspace-footer, .workspace-reading-nav { display: none; }
}