/* Readable course typography and a quiet, problem-first practice view. */
:root {
  --practice-ink: #1c3853;
  --practice-muted: #5f6e7a;
  --practice-paper: #fff9ed;
  --practice-line: #d9ddd8;
}

body { font-size: 16px; color: var(--practice-ink); background: var(--practice-paper); }
.app-header { height: 60px; min-height: 60px; padding: 0 28px; gap: 24px; }
.brand { font-size: 21px; letter-spacing: -.4px; }
.header-tag { font-size: 15px; color: var(--practice-muted); }
#primary-nav { gap: 23px; margin-left: 18px; }
#primary-nav a { font-size: 15px; padding: 17px 0; color: #526575; }
.header-progress { font-size: 14px; }

/* Keep the lesson navigation familiar without repeating score information. */
body:not(.hub-mode) #overview-button,
body:not(.hub-mode) .lesson-badges,
body:not(.hub-mode) .lesson-heading .eyebrow,
body:not(.hub-mode) .task-label,
body:not(.hub-mode) .expected-result-label,
body:not(.hub-mode) .sidebar-heading .eyebrow { display: none; }
body:not(.hub-mode) #primary-nav a { display: none; }
body:not(.hub-mode) #primary-nav a[data-hub-nav="dashboard"],
body:not(.hub-mode) #primary-nav a[href="#dashboard"] { display: inline-block; }
body:not(.hub-mode) #primary-nav { margin-left: auto; }

.app-layout { grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.course-sidebar { max-height: calc(100vh - 60px); padding: 24px 15px 18px; }
.sidebar-heading { padding: 0 10px 18px; }
.sidebar-heading h2 { font-size: 23px; margin: 0 0 8px; }
.sidebar-heading p { font-size: 15px; line-height: 1.5; color: var(--practice-muted); }
.lesson-search { font-size: 16px; padding: 10px; margin-bottom: 12px; }
.course-sidebar #lesson-nav .lesson-link { min-height: 59px; padding: 11px 10px; gap: 12px; }
.lesson-link-text { font-size: 17px; font-weight: 500; line-height: 1.4; }
body:not(.hub-mode) .lesson-link small { display: none; }
.lesson-number { width: 29px; height: 29px; font-size: 14px; }
.lesson-category-label { font-size: 12px; }
.sidebar-footer { font-size: 13px; line-height: 1.5; }

main { max-width: 1400px; width: 100%; margin: 0 auto; padding: 24px 30px 135px; }
.breadcrumb, .breadcrumb button { font-size: 15px; }
.breadcrumb { margin-bottom: 20px; }
.lesson-heading h1 { font-size: 32px; line-height: 1.25; font-weight: 600; margin: 0 0 16px; color: var(--practice-ink); }
.lesson-heading .text-button { font-size: 15px; }
.lesson-progress { margin-bottom: 22px; }
.lesson-progress > span { font-size: 15px; color: var(--practice-muted); }
.practice-save-status { display: flex; align-items: center; gap: 9px; font-size: 16px; line-height: 1.5; color: var(--practice-muted); margin: -8px 0 19px; }
.practice-save-status .save-dot { flex: 0 0 7px; }
.practice-save-status[data-status="offline"] { color: #815811; }
.practice-save-status[data-status="offline"] .save-dot { background: #a56b0b; }
.practice-save-status[data-status="syncing"] .save-dot { background: #73818b; }
.practice-panel .instruction-heading h2 { margin: 0; font: inherit; color: inherit; scroll-margin-top: 90px; }
.practice-panel .instruction-heading h2:focus-visible { outline: 2px solid #217346; outline-offset: 5px; border-radius: 2px; }
#sheet-grid > .worksheet-row { display: grid; grid-template-columns: var(--worksheet-tracks); grid-column: 1 / -1; min-width: 0; }
#sheet-grid > .worksheet-column-headings { position: sticky; top: 0; z-index: 4; }
.progress-track { height: 5px; }

/* One white panel holds both the written task and its working spreadsheet. */
.practice-panel { background: #fff; border: 1px solid var(--practice-line); border-radius: 6px; padding: 25px 27px 22px; min-width: 0; }
.practice-panel .instruction-card,
.practice-panel .instruction-card:has(.step-directions:not([hidden])) { padding: 0 0 20px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.practice-panel .instruction-heading { font-size: 22px; font-weight: 600; color: var(--practice-ink); }
.practice-panel #step-explanation { font-size: 20px; line-height: 1.6; color: #43566a; max-width: none; margin: 13px 0 18px; }
.practice-panel .step-directions { margin: 12px 0 17px; padding-left: 27px; gap: 10px; }
.practice-panel .step-directions > li { font-size: 20px; line-height: 1.6; color: #233f57; padding-left: 7px; }
.practice-panel .step-directions > li::marker { font-size: 17px; font-weight: 650; color: #217346; }
.practice-panel .step-directions code { font-size: 1em; line-height: inherit; padding: 3px 7px; }
.practice-panel .expected-result { font-size: 18px; line-height: 1.6; color: #3e634c; border-top: 1px solid #e4e9e2; margin-top: 15px; padding-top: 13px; gap: 0; }
.practice-panel #expected-result-text, .practice-panel .expected-result code { font-size: 18px; }
.practice-panel .instruction-tools { margin-top: 13px; gap: 20px; align-items: baseline; flex-wrap: wrap; }
.practice-panel .hint-button, .practice-panel .instruction-tools .text-button { font-size: 16px; color: #4b755a; line-height: 1.5; }
.practice-panel #hint-status { font-size: 14px; color: var(--practice-muted); }
.practice-panel .hint-content { font-size: 18px; line-height: 1.65; padding: 14px 17px; }
.practice-panel .excel-window { box-shadow: none; border-radius: 0; border-color: #bdc7c9; }
.practice-panel .practice-caption { font-size: 14px; color: var(--practice-muted); margin-bottom: 0; }

/* Early tasks use Excel's cells and formula bar without unrelated chrome. */
body[data-workbook-mode="focused"] .excel-titlebar,
body[data-workbook-mode="focused"] .excel-tabs,
body[data-workbook-mode="focused"] .excel-ribbon,
body[data-workbook-mode="focused"] .sheet-tabs,
body[data-workbook-mode="focused"] .excel-statusbar,
body[data-workbook-mode="focused"] .practice-caption { display: none !important; }
body[data-workbook-mode="sheets"] .excel-titlebar,
body[data-workbook-mode="sheets"] .excel-tabs,
body[data-workbook-mode="sheets"] .excel-ribbon,
body[data-workbook-mode="sheets"] .excel-statusbar,
body[data-workbook-mode="sheets"] .practice-caption { display: none !important; }
body[data-workbook-mode="sheets"] .sheet-tabs > button { font-size: 16px; }
.lesson-bottom { gap: 18px; flex-wrap: wrap; }
.learning-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0 0 28px; }
.essentials-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.prerequisite-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.project-prerequisites { margin-bottom: 24px; }
@media(max-width:700px) { .essentials-list { grid-template-columns: 1fr; } }
body[data-workbook-mode="focused"] .practice-panel .excel-window { margin-top: 4px; }
.formula-bar { height: 40px; }
.formula-bar > input { height: 29px; font-size: 16px; }
#name-box { width: 92px; }
.name-chevron { left: 78px; }
.column-header, .row-header, .grid-corner { font-size: 16px; }
.grid-cell, .cell-editor { line-height: 1.25; }

/* Ribbon lessons keep the complete practice workbook, with legible controls. */
body[data-workbook-mode="full"] .excel-titlebar { height: 36px; font-size: 13px; }
body[data-workbook-mode="full"] .workbook-title { font-size: 13px; }
body[data-workbook-mode="full"] .excel-tabs { height: 35px; }
body[data-workbook-mode="full"] .excel-tabs > button { font-size: 13px; height: 35px; padding: 8px 10px; }
body[data-workbook-mode="full"] .excel-ribbon { height: 119px; padding-top: 7px; }
body[data-workbook-mode="full"] .ribbon-controls { height: 83px; }
body[data-workbook-mode="full"] .ribbon-group-label { font-size: 12px; height: 22px; }
body[data-workbook-mode="full"] .excel-ribbon button { font-size: 12px; min-height: 25px; }
body[data-workbook-mode="full"] .excel-ribbon select { font-size: 13px; height: 27px; }
body[data-workbook-mode="full"] .ribbon-tall { height: 76px; }
body[data-workbook-mode="full"] .ribbon-stack button { height: 25px; }
body[data-workbook-mode="full"] .sheet-tabs > button { font-size: 14px; }
body[data-workbook-mode="full"] .excel-statusbar,
body[data-workbook-mode="full"] #selection-stats { font-size: 12px; }

.feedback-bar { left: 280px; padding: 15px 30px; min-height: 85px; }
.feedback-content strong { font-size: 17px; }
.feedback-content p { font-size: 16px; line-height: 1.5; }
.feedback-content { min-width: 0; }
.primary-button { font-size: 16px; min-height: 46px; padding: 12px 20px; }
.lesson-bottom, .lesson-bottom > button { font-size: 14px; }
.toast { font-size: 15px; line-height: 1.5; }

/* Bring the dashboard, library, flashcards, and project pages up to readable sizes. */
.hub-mode { background: var(--practice-paper); }
#hub-root { color: var(--practice-ink); min-height: calc(100vh - 60px); }
.hub-container { max-width: 1250px; padding: 34px 30px 60px; font-size: 16px; }
.hub-heading h1 { font-size: 32px; line-height: 1.3; color: var(--practice-ink); }
.hub-heading p, .hub-card p, .daily-practice p { font-size: 16px; line-height: 1.65; color: #5a6d72; }
.card-kicker, .hub-container .eyebrow { font-size: 12px; letter-spacing: .8px; }
.hub-card h2, .daily-practice h2 { font-size: 23px; }
.hub-button { font-size: 16px; min-height: 46px; padding: 12px 17px; }
.hub-text-link, .hub-breadcrumb, .section-heading > a, .section-heading > span { font-size: 15px; }
.mastery-footer p, .recommendation-number, .recommendation-card > small, .score-baseline { font-size: 14px; }
.score-number { font-size: 46px; }
.score-number small { font-size: 16px; }
.category-card h3, .project-card strong { font-size: 18px; }
.category-card p, .project-card p { font-size: 15px; line-height: 1.6; color: #5f7271; }
.category-card > small, .project-meta, .project-meta span { font-size: 14px; }
.project-level { font-size: 12px; top: 20px; max-width: 120px; }
.project-card { min-height: 250px; }
.section-heading h2 { font-size: 24px; }
.hub-footnote { font-size: 14px; color: #64756c; }
.library-toolbar label, .library-toolbar > span, .reference-search { font-size: 15px; }
.library-toolbar input, .reference-search input, .profile-form input, .profile-form select, .flash-settings-bar select { font-size: 16px; }
.library-number { font-size: 16px; }
.library-row strong { font-size: 19px; }
.library-row p { font-size: 15px; line-height: 1.6; color: #64766f; }
.library-row small, .library-accuracy, .status-chip { font-size: 14px; }
.library-accuracy small { font-size: 12px; }
.empty-state, .empty-state.small { font-size: 16px; }
.project-page-grid .project-card strong { font-size: 24px; }
.project-page-grid .project-card p { font-size: 16px; }
.project-page-grid .project-meta, .project-downloads p, .project-chart p { font-size: 14px; }
.project-downloads .hub-button { font-size: 15px; }
.project-how ol, .project-step ol { font-size: 17px; line-height: 1.75; }
.project-step h3 { font-size: 20px; line-height: 1.5; }
.project-step-title > span { font-size: 14px; }
.project-expected, .project-check { font-size: 15px; line-height: 1.6; }
.project-progress-title span, .skill-tags > span, .project-skills .hub-text-link { font-size: 14px; }
.mini-chart small { font-size: 11px; }
.data-preview-scroll table { font-size: 14px; }
.flash-settings-bar, .flash-settings-bar select, .checkbox-label { font-size: 15px; }
.flash-layout { grid-template-columns: 240px minmax(0, 1fr); }
.flash-score-column { display: none; }
.suggested-card > p, .suggested-card li, .suggested-card li button { font-size: 15px; }
.suggested-card li small, .flash-session-stats span { font-size: 13px; }
.flash-question-card h2 { font-size: 24px; }
.flash-question-card > p { font-size: 20px; line-height: 1.6; color: #3c5662; }
.flash-question-card .flash-target-note { font-size: 16px !important; }
#flash-answer { font-size: 18px; padding: 13px 15px; }
.flash-feedback, .flash-card-actions .hub-text-link { font-size: 16px; }
.flash-sheet { font-size: 16px; }
.flash-sheet th { font-size: 15px; height: 29px; }
.flash-sheet td { font-size: 16px; height: 32px; }
.reference-card h2 { font-size: 21px; }
.reference-card p, .reference-card code { font-size: 16px; }
.profile-form > label, .form-save-message, .reset-card .danger-button { font-size: 16px; }
.activity-bars small, .score-table > div { font-size: 14px; }

@media (max-width: 1100px) {
  #primary-nav { gap: 16px; margin-left: 6px; }
  #primary-nav a { font-size: 14px; }
  .header-tag { display: none; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-detail-grid { grid-template-columns: 280px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .app-header { height: auto; min-height: 60px; padding: 12px 18px; flex-wrap: wrap; gap: 12px 20px; }
  .brand { font-size: 20px; }
  #primary-nav { margin-left: 0; gap: 17px; flex-wrap: wrap; }
  #primary-nav a { padding: 5px 0; font-size: 15px; }
  .app-layout { grid-template-columns: minmax(0, 1fr); }
  .course-sidebar { position: relative; top: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--practice-line); padding: 11px 17px; overflow: visible; }
  .sidebar-heading, .sidebar-footer { display: none; }
  .lesson-search { max-width: 100%; margin-bottom: 9px; }
  #lesson-nav { flex-direction: row; overflow-x: auto; gap: 6px; }
  .course-sidebar #lesson-nav .lesson-link { width: auto; flex-shrink: 0; max-width: 290px; min-height: 48px; padding: 7px 11px; }
  .lesson-link-text { font-size: 17px; }
  main { padding: 22px 18px 145px; }
  .practice-panel { padding: 22px; }
  .feedback-bar { left: 0; padding: 13px 18px; }
  .feedback-content { flex-basis: auto; min-width: 0; }
  .feedback-bar .primary-button { min-width: 130px; }
  .project-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .project-detail-grid > div:first-child { display: grid; grid-template-columns: 1fr 1fr; }
  .flash-layout { grid-template-columns: minmax(0, 1fr); }
  .flash-question-card { order: 1; }
  .suggested-card { order: 2; }
}

@media (max-width: 600px) {
  .brand { font-size: 18px; }
  .app-header { gap: 10px 15px; }
  .lesson-heading h1, .hub-heading h1 { font-size: 28px; }
  .lesson-heading .text-button { font-size: 14px; }
  .lesson-heading #restart-lesson span { display: none; }
  .breadcrumb, .breadcrumb button { font-size: 14px; }
  main { padding: 18px 12px 155px; }
  .practice-panel { padding: 18px 15px; }
  .practice-panel .instruction-heading { font-size: 20px; }
  .practice-panel #step-explanation, .practice-panel .step-directions > li { font-size: 17px; line-height: 1.6; }
  .practice-panel .step-directions { padding-left: 23px; }
  .practice-panel .expected-result, .practice-panel #expected-result-text, .practice-panel .expected-result code { font-size: 16px; }
  .practice-panel .hint-content { font-size: 17px; }
  .practice-panel .instruction-tools { gap: 12px 18px; }
  .practice-panel .instruction-tools .quiet { margin-left: 0; }
  .feedback-bar { gap: 12px; }
  .feedback-content { flex-basis: 100%; }
  .feedback-content p { font-size: 15px; }
  .feedback-bar .primary-button { margin-left: auto; }
  .hub-container { padding: 27px 17px 45px; }
  .hub-heading { gap: 15px; }
  .hub-card { padding: 20px; }
  .project-grid, .category-grid, .reference-grid { grid-template-columns: minmax(0, 1fr); }
  .project-detail-grid > div:first-child { display: flex; }
  .project-level { font-size: 12px; max-width: 120px; }
  .library-row { padding: 18px 14px; gap: 12px; }
  .library-row strong { font-size: 18px; }
  .status-chip { font-size: 12px; }
  .library-accuracy { min-width: 38px; }
  .flash-question-card { padding: 20px; }
  .flash-question-card > p { font-size: 17px; }
  .flash-settings-bar select { min-width: 0; max-width: 100%; }
  .hub-footnote { flex-direction: column; gap: 10px; }
}