/* The spelling application lives inside the course shell.  Keep its dense
   reading rhythm, controls and cards aligned with the course views. */
.learning-components{
  --accent:var(--green);
  --accent-soft:var(--soft);
  --warn:var(--orange);
  --shadow:none;
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.6;
}
.learning-components .spelling-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:0 0 6px;
}
.learning-components .spelling-heading h1{font-size:27px;line-height:1.3;letter-spacing:-.6px}
.learning-components .spelling-summary{color:var(--muted);font-size:12px;white-space:nowrap}
.learning-components .tabs{
  width:100%;
  gap:25px;
  margin:0 0 13px;
  border-bottom:1px solid var(--line);
}
.learning-components .tab{
  min-width:0;
  min-height:37px;
  padding:7px 1px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}
.learning-components .tab.active{border-color:var(--green);color:var(--green)}
.learning-components .section-title{
  display:block;
  margin:0 0 10px;
}
.learning-components .section-title h2{font-size:20px;line-height:1.45}
.learning-components .section-title p{margin:2px 0 0;max-width:none;font-size:12px;line-height:1.6}
.learning-components .subsection-title{margin:15px 0 7px}
.learning-components .subsection-title h3{font-size:17px}
.learning-components .subsection-title p{font-size:12px}
.learning-components .study-card,
.learning-components .source-panel,
.learning-components .quiz-panel,
.learning-components .practice-subpanel,
.learning-components .quiz-detail-card{
  border-radius:6px;
  box-shadow:none;
}
.learning-components .source-panel{margin-bottom:12px;padding:10px 12px;font-size:12px}

/* Progress: a compact course-like list instead of a second, large dashboard. */
.learning-components .syllabus-summary{
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  margin-bottom:12px;
  padding:9px 12px;
  border-left-width:3px;
  border-radius:6px;
}
.learning-components .syllabus-summary > div{display:flex;align-items:baseline;gap:7px;min-width:0}
.learning-components .syllabus-summary strong{font-size:16px}
.learning-components .syllabus-summary small,.learning-components .syllabus-summary p{font-size:12px}
.learning-components .syllabus-timeline{margin-bottom:13px}
.learning-components .timeline-step{padding:9px 8px 9px 13px}
.learning-components .timeline-step::before{top:15px;width:6px;height:6px}
.learning-components .timeline-step span{font-size:10px}.learning-components .timeline-step strong{margin:1px 0 2px;font-size:12px}
.learning-components .timeline-step p{font-size:11px;line-height:1.45}
.learning-components .syllabus-node-list{gap:13px}
.learning-components .syllabus-unit{border-top-width:2px;border-radius:0;background:transparent}
.learning-components .syllabus-unit-heading{padding:9px 12px;background:var(--panel)}
.learning-components .syllabus-unit-heading > div:first-child > span{font-size:10px}
.learning-components .syllabus-unit-heading h3{font-size:16px}.learning-components .syllabus-unit-heading p{font-size:12px}
.learning-components .syllabus-unit-meta strong{font-size:11px}
.learning-components .syllabus-unit-toggle{width:31px;height:31px;flex-basis:31px;border-radius:5px}
.learning-components .syllabus-node{gap:10px;padding:9px 12px}
.learning-components .syllabus-node-copy{gap:1px}.learning-components .syllabus-node-title{gap:6px}
.learning-components .syllabus-node-title > span,.learning-components .syllabus-status{font-size:10px}
.learning-components .syllabus-node-title h4{font-size:15px}.learning-components .syllabus-node-copy p{font-size:12px}
.learning-components .syllabus-node-copy small{font-size:11px}.learning-components .syllabus-node-actions{gap:6px}
.learning-components .syllabus-node-actions .text-button{min-height:31px;padding:0 9px;font-size:11px}
.learning-components .syllabus-routine{gap:10px;padding:10px 12px}.learning-components .syllabus-routine strong{font-size:14px}
.learning-components .syllabus-routine p,.learning-components .syllabus-routine small{font-size:12px}
.learning-components .syllabus-routine .text-button{min-width:92px;min-height:32px;font-size:11px}

/* Learning and knowledge use the same narrow controls and hairline cards. */
.learning-components .learn-section-tabs{width:100%;gap:5px;margin-bottom:8px;grid-template-columns:repeat(8,minmax(0,1fr))}
.learning-components .mode-button{min-height:34px;border-radius:5px;font-size:12px}
.learning-components .learn-toolbar{width:100%;gap:6px;margin-bottom:11px;padding:7px 9px;border-radius:6px}
.learning-components .learn-toolbar-label,.learning-components .small-label{font-size:10px}
.learning-components .toggle-control{min-height:32px;padding:0 8px;font-size:12px}.learning-components .toggle-control input{width:15px;height:15px}
.learning-components .segmented-control{min-height:32px;border-radius:5px}.learning-components .segmented-button{min-width:56px;font-size:12px}
.learning-components .card-grid,.learning-components .vowel-grid{gap:9px}.learning-components .study-card{border-radius:6px}
.learning-components .vowel-card{min-height:170px}.learning-components .vocabulary-title{margin-top:20px}
.learning-components .vocabulary-grid{gap:8px}.learning-components .vocabulary-card{gap:5px;padding:9px}
.learning-components .vocabulary-tibetan{font-size:29px}.learning-components .vocabulary-pronunciation{font-size:12px}
.learning-components .vocabulary-meaning{min-height:31px;font-size:12px}.learning-components .vocabulary-audio-button{min-height:29px;font-size:11px}
.learning-components .knowledge-grid{gap:13px}.learning-components .knowledge-group{gap:6px}
.learning-components .knowledge-group > h3{font-size:16px}.learning-components .knowledge-card-list{gap:9px}
.learning-components .knowledge-card{padding:12px}.learning-components .knowledge-card h4{margin-bottom:4px;font-size:16px}
.learning-components .knowledge-card p{font-size:12px;line-height:1.65}

/* Practice remains a focused exercise panel, with course-scale spacing. */
.learning-components .quiz-panel{gap:14px;padding:19px}.learning-components .practice-control-group{gap:6px}
.learning-components .practice-subpanel{gap:9px;padding:10px 12px;border-left-width:3px}.learning-components .practice-subpanel-title strong{font-size:14px}
.learning-components .practice-subpanel-title span{font-size:12px}.learning-components .practice-pane.active{gap:14px}
.learning-components .flashcard{min-height:220px;padding:20px}.learning-components .quiz-letter{min-height:190px;padding:20px 0 8px}
.learning-components .option-button,.learning-components .text-button,.learning-components .audio-button{min-height:34px;border-radius:5px;font-size:12px}
.learning-components .streak-row{gap:8px;font-size:12px}.learning-components .streak-row span{min-width:0;padding:6px 8px}

#practice-sources{display:flex;gap:6px;align-items:center;margin:-8px 0 12px}
#practice-sources .chip{margin:0;padding:4px 10px;font-size:12px}

@media(max-width:900px){
  .learning-components .learn-section-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .learning-components .syllabus-timeline{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .learning-components{font-size:13px}
  .learning-components .spelling-heading{align-items:flex-start;margin-bottom:4px}
  .learning-components .spelling-heading h1{font-size:23px}.learning-components .spelling-summary{font-size:11px;text-align:right}
  .learning-components .tabs{gap:20px;margin-bottom:10px}.learning-components .tab{min-height:35px;font-size:13px}
  .learning-components .section-title{margin-bottom:8px}.learning-components .section-title h2{font-size:18px}
  .learning-components .syllabus-summary{display:block;padding:8px 10px}.learning-components .syllabus-summary p{margin-top:3px}
  .learning-components .syllabus-timeline{display:flex;margin-bottom:10px;overflow-x:auto}.learning-components .timeline-step{flex:0 0 140px}
  .learning-components .syllabus-node-list{gap:10px}.learning-components .syllabus-unit-heading{padding:8px 10px}
  .learning-components .syllabus-unit-heading h3{font-size:15px}.learning-components .syllabus-unit-heading-side{gap:8px}
  .learning-components .syllabus-node{grid-template-columns:1fr;gap:5px;padding:8px 10px}.learning-components .syllabus-node-index{display:none}
  .learning-components .syllabus-node-actions{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .learning-components .syllabus-routine{grid-template-columns:1fr;padding:9px 10px}.learning-components .syllabus-routine .text-button{width:100%}
  .learning-components .learn-section-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.learning-components .mode-button{min-height:32px;font-size:11px}
  .learning-components .learn-toolbar{padding:6px;gap:5px}.learning-components .card-grid,.learning-components .vowel-grid{gap:7px}
  .learning-components .knowledge-card-list{grid-template-columns:1fr}.learning-components .quiz-panel{padding:14px}
  #practice-sources{margin:-5px 0 9px}
}