/* Shared Tutor / Practice / Notes surfaces. The live classroom keeps its own layout. */
.dashboard-header .main-nav { gap: 4px; }
.dashboard-header .nav-link { min-width: 84px; padding: 12px 18px; border: 1px solid transparent; }
.dashboard-header .nav-link.active { color: var(--green); background: #fefcf7; border-color: #ded8cb; box-shadow: 0 2px 5px #173b2910; }
.tutor-subnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -26px 0 24px; }
.tutor-subnav > p { margin: 0; color: var(--ink-soft); font-size: 11px; letter-spacing: .01em; }
.tutor-subnav > p span { margin-left: 14px; color: var(--ink-faint); }
.tutor-subnav > button { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.tutor-subnav svg { width: 13px; height: 13px; }
.learning-view { width: min(1240px,calc(100% - 72px)); margin: 0 auto; padding: 26px 0 0; outline: none; }
.learning-view a { color: inherit; text-decoration: none; }
.learning-view button, .learning-view a, .learning-view input { transition: background .16s, color .16s, border-color .16s, box-shadow .16s; }
.learning-view .button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; text-align: center; min-height: 44px; font-size: 12px; white-space: normal; }
.learning-view .button.primary { color: var(--paper-bright); }
.learning-course { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 25px; font-size: 10px; color: var(--ink-soft); letter-spacing: .04em; }
.learning-course span:last-child { color: var(--ink-faint); }
.learning-preview { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 14px; padding: 13px 17px; margin-bottom: 20px; background: #f5eddc; color: #7d5928; border: 1px solid #e2cda6; border-radius: 9px; font-size: 11px; line-height: 1.6; }
.learning-preview strong { font-weight: 700; }
.learning-hero { display: grid; grid-template-columns: 1.2fr 1fr; position: relative; overflow: hidden; border-radius: 17px; }
.practice-hero { min-height: 335px; padding: 45px 56px 39px; color: #f6f3e8; background: #194b3b; }
.practice-hero:after { content: ''; width: 430px; height: 430px; border: 1px solid #f8f5ed0a; border-radius: 50%; position: absolute; top: -190px; right: -130px; pointer-events: none; }
.practice-hero .eyebrow { color: #d2d4ae; font-size: 9px; letter-spacing: .16em; }
.learning-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px,4.3vw,57px); line-height: 1.08; letter-spacing: -.038em; margin: 15px 0; }
.learning-hero > div > p:not(.eyebrow) { font-size: 12px; line-height: 1.85; color: #d7e0d7; }
.learning-hero-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 14px; font-size: 11px; font-weight: 650; }
.learning-hero-link:hover { color: #d8d998; }
.learning-hero-link span { font-size: 19px; }
.learning-hero-art { display: grid; align-items: center; justify-items: end; padding: 0 10px 0 20px; }
.learning-graph { width: 100%; max-width: 390px; max-height: 265px; }
.learning-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 37px 0 23px; }
.learning-section-heading .eyebrow { font-size: 9px; margin-bottom: 8px; }
.learning-section-heading h2 { font-size: 30px; font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; margin: 0; }
.learning-count { font-size: 10px; color: var(--ink-faint); white-space: nowrap; padding-bottom: 3px; }
.library-notice { display: flex; gap: 14px; align-items: start; padding: 18px 21px; margin-top: 22px; border: 1px solid #dfd9cc; background: #f2eee3; border-radius: 11px; }
.notice-marker { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border: 1px solid #adae95; border-radius: 50%; font-family: var(--serif); color: #70775b; font-size: 12px; }
.library-notice strong { display: block; color: #49523e; font-size: 11px; font-weight: 650; margin: 2px 0 5px; }
.library-notice p { margin: 0; color: #757966; font-size: 11px; line-height: 1.7; max-width: 800px; }
.learning-filterbar { display: grid; gap: 16px; margin-bottom: 28px; }
.learning-search { display: flex; align-items: center; gap: 9px; border: 1px solid #d9d4c7; border-radius: 8px; padding: 0 13px; background: #fffdf7; width: min(100%,415px); height: 43px; }
.learning-search:focus-within { outline: 2px solid #174f3b39; outline-offset: 2px; }
.learning-search svg { width: 17px; height: 17px; flex: 0 0 17px; color: #7c8475; }
.learning-search input { border: 0; outline: none; min-width: 0; width: 100%; height: 100%; color: var(--ink); background: transparent; font-size: 11px; }
.learning-search input:focus-visible { outline: none; }
.learning-search input::placeholder { color: #92968a; }
.search-shortcut { color: #858c7a; border: 1px solid #e3dfd4; font-size: 14px; padding: 0 5px; border-radius: 4px; }
.component-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.component-filters button { border: 1px solid transparent; border-radius: 6px; padding: 8px 11px; color: #7a8175; font-size: 10px; line-height: 1.3; }
.component-filters button:hover { background: #eee9dd; }
.component-filters button[aria-pressed="true"] { color: #244e3a; border-color: #bfcbb8; background: #e7eddf; font-weight: 600; }
.topic-group { margin: 0 0 34px; }
.topic-group-heading { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; }
.component-number { display: grid; place-items: center; width: 23px; height: 23px; background: #eae7da; border: 1px solid #d9d4c4; border-radius: 6px; color: #6d725d; font-family: var(--serif); font-size: 13px; }
.topic-group-heading h3 { font-size: 13px; font-weight: 650; margin: 0; }
.topic-group-heading > span:last-child { margin-left: auto; color: #8c9283; font-size: 10px; }
.topic-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.topic-card { display: flex; flex-direction: column; padding: 19px 20px 16px; min-height: 175px; border: 1px solid #dcd7ca; background: #fffcf6; border-radius: 10px; }
.topic-card:hover, .topic-card.selected { border-color: #91a68c; background: #fffef8; box-shadow: 0 5px 18px #183d2b09; }
.topic-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.topic-code { font-size: 10px; color: #7e8777; letter-spacing: .05em; }
.topic-arrow { color: #788872; font-size: 16px; }
.topic-card h4 { margin: 0 0 8px; color: #243d2e; font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: -.012em; line-height: 1.18; }
.topic-card > p { margin: 0 0 18px; font-size: 10px; line-height: 1.65; color: #85897b; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.topic-card-bottom { display: flex; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 11px; border-top: 1px solid #efeadf; color: #8a8c7e; font-size: 9px; }
.topic-card-bottom .available { color: #42754c; }
.learning-footer { display: flex; gap: 20px; justify-content: space-between; padding: 23px 0 29px; border-top: 1px solid #dcd6c8; color: #99998a; font-size: 9px; }
.practice-topic-detail { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 25px; border: 1px solid #bac9b3; background: #edf1e6; padding: 29px; border-radius: 12px; margin-bottom: 27px; scroll-margin-top: 105px; }
.practice-topic-detail h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; margin: 7px 0 10px; }
.practice-topic-detail p, .practice-topic-detail li { max-width: 660px; font-size: 11px; line-height: 1.75; color: #66745e; }
.practice-topic-detail ul { padding-left: 17px; margin-bottom: 0; }
.topic-detail-actions { display: flex; align-items: center; flex-direction: column; gap: 16px; }
.topic-detail-actions .text-link { color: var(--green); font-size: 11px; }
.learning-soon { padding: 11px 15px; border: 1px solid #cbd2bf; border-radius: 7px; font-size: 11px; color: #778368; }
.learning-focus-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.focus-topic { padding: 23px; border: 1px solid #d5dac9; border-radius: 11px; background: #f0f2e8; display: flex; flex-direction: column; }
.focus-reason { font-size: 9px; color: #7b875f; }
.focus-topic h3 { margin: 12px 0 9px; font-size: 24px; font-family: var(--serif); font-weight: 400; }
.focus-topic p { margin: 0 0 22px; color: #74816b; font-size: 11px; line-height: 1.7; }
.focus-footer { display: flex; gap: 10px; justify-content: space-between; margin-top: auto; font-size: 10px; color: #345d43; }
.practice-resume { display: flex; align-items: center; gap: 20px; margin-top: 23px; padding: 23px 25px; background: #fffdf7; border: 1px solid #dcd7ca; border-radius: 11px; }
.resume-mark { width: 45px; height: 45px; border-radius: 50%; color: var(--green); background: #eaf0e3; display: grid; place-items: center; font-size: 27px; }
.practice-resume .eyebrow { font-size: 9px; }
.practice-resume h3 { margin: 5px 0; font-size: 21px; font-family: var(--serif); font-weight: 400; }
.practice-resume p:not(.eyebrow) { font-size: 10px; color: #8b9081; margin: 0; }
.practice-resume .button { margin-left: auto; }
.learning-empty { text-align: center; padding: 38px 25px; border: 1px dashed #d3cebd; background: #f6f2e8; border-radius: 11px; margin: 20px 0; }
.learning-empty-icon { display: inline-flex; padding: 12px; border-radius: 50%; background: #ecebdc; color: #8a9773; }
.learning-empty-icon svg { width: 23px; height: 23px; }
.learning-empty h3 { margin: 16px 0 10px; font-family: var(--serif); font-size: 23px; font-weight: 400; }
.learning-empty p { margin: 0 auto 15px; max-width: 470px; font-size: 12px; line-height: 1.8; color: #858b7b; }
.learning-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 330px; font-family: var(--serif); font-size: 22px; color: #62755c; }
.learning-loading-mark { font-size: 35px; animation: learning-breathe 1.5s ease-in-out infinite alternate; }
@keyframes learning-breathe { to { opacity: .3; } }
.learning-error { max-width: 620px; margin: 60px auto; padding: 42px; border: 1px solid #e0caba; background: #fffcf6; border-radius: 13px; }
.learning-error h2 { font-family: var(--serif); font-size: 31px; font-weight: 400; }
.learning-error p:not(.eyebrow) { color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.learning-error .text-link { display: inline-block; margin-left: 18px; font-size: 12px; }
.learning-inline-error { margin-top: 15px; padding: 12px 15px; background: #f8ece5; color: #934f35; border: 1px solid #e5caba; border-radius: 7px; font-size: 12px; line-height: 1.7; }
.learning-inline-error button { text-decoration: underline; font-weight: 600; }
/* The reference shelf and long-form notes. */
.notes-layout { display: grid; grid-template-columns: 242px minmax(0,1fr); gap: 48px; }
.notes-sidebar { border-right: 1px solid #dcd7c9; padding: 17px 26px 28px 0; }
.notes-sidebar-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.notes-sidebar-title > span { color: #526e4b; display: inline-flex; }
.notes-sidebar-title svg { width: 21px; height: 21px; }
.notes-sidebar-title h2 { font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: -.025em; margin: 0; }
.notes-sidebar .learning-search { height: 37px; padding-inline: 10px; }
.notes-sidebar .learning-search input { font-size: 10px; }
#note-topic-results { margin-top: 24px; }
.note-component { margin-bottom: 20px; }
.note-component summary { display: flex; justify-content: space-between; list-style: none; cursor: pointer; font-size: 10px; font-weight: 650; color: #4e6449; margin-bottom: 7px; line-height: 1.4; }
.note-component summary::-webkit-details-marker { display: none; }
.note-component summary:focus-visible { outline: 2px solid #477a53; outline-offset: 4px; }
.note-component > div { display: flex; flex-direction: column; gap: 2px; }
.note-topic-link { display: flex; gap: 8px; align-items: baseline; border-radius: 6px; margin-left: -8px; padding: 8px; font-size: 10px; line-height: 1.55; color: #808a76 !important; }
.note-topic-code { flex: 0 0 21px; color: #a0a78f; font-size: 9px; }
.note-topic-link:hover { background: #efeee2; }
.note-topic-link.active { background: #e5eddc; color: #345b3c !important; }
.note-locked { margin-left: auto; padding-left: 2px; color: #b1b69f; }
.notes-sidebar-footer { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid #dfdccd; font-size: 9px; color: #9ba38c; line-height: 1.8; }
.notes-sidebar-footer strong { font-weight: 400; color: #78856a; }
.note-reader { min-width: 0; padding: 15px 0 60px; }
.notes-intro { padding: 19px 0 30px; }
.notes-intro .eyebrow { color: #82906a; font-size: 9px; }
.notes-intro h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(39px,4.6vw,58px); line-height: 1.1; letter-spacing: -.04em; margin: 18px 0; }
.notes-intro > p:not(.eyebrow) { color: #7f8872; max-width: 460px; font-size: 12px; line-height: 1.9; }
.notes-intro-equation { display: flex; gap: 24px; align-items: center; padding: 27px 28px; margin-top: 30px; background: #eeeee0; border: 1px solid #dddfca; border-radius: 10px; color: #506b3f; }
.notes-intro-equation .math-inline { font-size: 21px; }
.notes-intro-equation > span:last-child { margin-left: auto; font-family: var(--serif); font-style: italic; font-size: 14px; color: #8b9878; }
.notes-intro-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 1px 0 19px; gap: 12px; }
.notes-intro-heading h2 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.notes-intro-heading > span { font-size: 10px; color: #939b83; }
.notes-component-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.notes-component-card { min-height: 140px; position: relative; padding: 25px; border: 1px solid #dcd8c8; border-radius: 10px; background: #fffdf5; }
.notes-component-card:hover { background: #f3f5e8; border-color: #a3b497; }
.notes-component-kicker { color: #97a083; font-size: 9px; letter-spacing: .05em; }
.notes-component-card h3 { font-family: var(--serif); font-weight: 400; margin: 13px 0 10px; font-size: 23px; color: #334e31; }
.notes-component-card p { color: #a0a58f; font-size: 10px; margin: 0; }
.notes-component-arrow { position: absolute; right: 22px; top: 20px; color: #839771; font-size: 19px; }
.note-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; color: #95a086; font-size: 10px; line-height: 1.6; margin-bottom: 33px; }
.note-breadcrumb a { color: #627d51; }
.note-title .eyebrow { font-size: 9px; color: #8a9976; }
.note-title h1 { font-family: var(--serif); font-size: clamp(33px,4vw,48px); letter-spacing: -.035em; font-weight: 400; line-height: 1.15; margin: 14px 0; color: #243d29; }
.note-title > p:not(.eyebrow) { font-size: 13px; line-height: 1.8; color: #869277; }
.note-meta { display: flex; flex-wrap: wrap; gap: 18px; margin: 23px 0 27px; color: #97a083; font-size: 9px; }
.note-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 17px; margin: 27px 0 38px; padding: 17px 18px; background: #edeee1; border: 1px solid #dcdfca; border-radius: 8px; line-height: 1.4; }
.note-toc > span { font-size: 9px; text-transform: uppercase; letter-spacing: .09em; color: #879274; }
.note-toc a { font-size: 10px; color: #587146; }
.note-toc a:hover { text-decoration: underline; }
.note-body { max-width: 770px; }
.note-section { position: relative; padding: 6px 0 33px; margin-bottom: 24px; border-bottom: 1px solid #e0dfce; scroll-margin-top: 105px; }
.note-section-number { display: block; font-size: 10px; color: #a4ae8e; letter-spacing: .1em; margin-bottom: 10px; }
.note-section h2 { margin: 0 0 22px; font-family: var(--serif); font-size: 29px; font-weight: 400; line-height: 1.2; color: #344e2e; letter-spacing: -.025em; }
.note-section h3, .note-section h4, .note-section h5 { font-size: 16px; line-height: 1.6; color: #506542; font-weight: 600; margin: 25px 0 11px; }
.note-section p, .note-section li { color: #6f7c60; font-size: 13px; line-height: 1.95; overflow-wrap: anywhere; }
.note-section ul, .note-section ol { padding-left: 21px; }
.note-section li { padding-left: 4px; margin: 8px 0; }
.note-section strong { color: #405b36; font-weight: 600; }
.note-equation { overflow-x: auto; margin: 22px 0; padding: 18px 22px; border-radius: 9px; background: #eeefe2; color: #415e31; }
.note-equation .katex-display { margin: .2em 0; }
.note-worked-example { border: 1px solid #d9dfc8; border-radius: 10px; background: #f1f3e7; padding: 25px 29px 16px; margin: 20px 0; }
.note-worked-example > .eyebrow { font-size: 9px; margin: 0; }
.note-worked-example > h3 { font-family: var(--serif); font-size: 23px; font-weight: 400; margin-top: 9px; }
.note-tip { margin: 22px 0; padding: 16px 21px; border-left: 3px solid #b6bd83; background: #f1f0df; font-size: 13px; line-height: 1.9; color: #74805c; }
.note-practice-callout { padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #edf2dd; background: #264e37; border-radius: 11px; margin-top: 35px; }
.note-practice-callout .eyebrow { color: #b7c59c; font-size: 9px; }
.note-practice-callout h3 { font-family: var(--serif); font-size: 25px; font-weight: 400; margin: 9px 0; }
.note-practice-callout p:not(.eyebrow) { color: #b8c7a6; font-size: 11px; margin: 0; line-height: 1.6; }
.note-practice-callout .button.primary { border: 1px solid #8da678; background: #e8edd5; color: #375329; flex-shrink: 0; }
/* Focused practice never includes live-camera or conversation controls. */
.practice-session-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 6px 0 26px; margin-bottom: 10px; border-bottom: 1px solid #ddd8cb; font-size: 10px; color: #99a08b; }
.practice-back { color: #647b56 !important; display: flex; gap: 10px; }
.draft-status { color: #76866b; }
.practice-session-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 48px; padding-top: 28px; padding-bottom: 60px; }
.practice-session-sidebar .eyebrow { font-size: 9px; color: #839373; }
.practice-session-sidebar h1 { margin: 12px 0; font-family: var(--serif); font-weight: 400; font-size: 32px; letter-spacing: -.028em; color: #2d482c; }
.practice-session-description { font-size: 11px; color: #969e87; line-height: 1.8; }
.practice-session-progress { margin-top: 30px; }
.practice-session-progress > span { font-family: var(--serif); font-size: 30px; color: #47643a; }
.practice-session-progress small { font-size: 20px; color: #a2ae91; }
.practice-session-progress p { font-size: 9px; color: #949f84; margin: 5px 0 13px; }
.practice-progress-track { height: 4px; border-radius: 4px; background: #e1e4d2; overflow: hidden; }
.practice-progress-track i { height: 100%; display: block; background: #66894e; }
.practice-question-steps { display: flex; flex-direction: column; gap: 7px; list-style: none; padding: 0; margin: 27px 0; }
.practice-question-steps li { display: flex; gap: 11px; padding: 10px; margin-left: -10px; border: 1px solid transparent; border-radius: 7px; font-size: 10px; color: #8c9a7d; }
.practice-question-steps li > span { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #d4dcc4; border-radius: 50%; font-size: 9px; }
.practice-question-steps small { display: block; font-size: 9px; color: #a6af96; margin-top: 3px; }
.practice-question-steps li > button { display: grid; grid-template-columns: 23px 1fr; column-gap: 11px; align-items: center; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.practice-question-steps li > button > span { grid-column: 2; grid-row: 1; }
.practice-question-steps li > button > small { grid-column: 2; grid-row: 2; }
.practice-question-steps li > button::before { content: attr(data-question-number); grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #d4dcc4; border-radius: 50%; font-size: 9px; }
.practice-question-steps li > button:focus-visible { outline: 2px solid #5a7f44; outline-offset: 3px; border-radius: 5px; }
.practice-question-steps .current { background: #ebefdf; border-color: #d7dfc7; color: #476638; }
.practice-question-steps .correct > span { background: #5a7f44; color: #fff; border-color: #5a7f44; }
.practice-question-steps .revealed > span, .practice-question-steps .skipped > span { background: #e8e4d3; color: #a0986c; }
.practice-note-link { display: flex; align-items: center; gap: 9px; padding-top: 22px; border-top: 1px solid #dce1cc; font-size: 10px; color: #788c65 !important; }
.practice-note-link svg { width: 16px; height: 16px; }
.practice-question-main { min-width: 0; scroll-margin-top: 110px; }
.practice-question-card { padding: 36px 42px 25px; border: 1px solid #dcdcc8; background: #fffef8; border-radius: 13px; box-shadow: 0 7px 25px #224b2905; }
.question-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 25px; }
.question-meta .eyebrow { margin: 0; font-size: 9px; }
.question-meta > span:last-child { color: #97a587; font-size: 10px; max-width: 65%; }
.question-prompt { color: #33492b; line-height: 1.95; font-size: 15px; overflow-wrap: anywhere; }
.question-prompt > p { margin: 0 0 16px; }
.question-prompt h3 { font-size: 21px; font-family: var(--serif); font-weight: 400; }
.question-source { font-size: 9px; color: #a2ad94; margin-top: 20px; }
.practice-answer-form { margin-top: 30px; padding-top: 25px; border-top: 1px solid #e3e4d4; }
.answer-form-heading { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; margin-bottom: 19px; }
.answer-form-heading h2 { font-size: 13px; font-weight: 600; color: #607551; margin: 0; }
.answer-form-heading > span { font-size: 9px; color: #a2ac91; }
.answer-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.answer-field:only-child { grid-column: 1 / -1; }
.answer-field label { display: block; font-size: 11px; color: #748a62; margin-bottom: 8px; }
.answer-field input { display: block; width: 100%; min-width: 0; padding: 14px 15px; border: 1px solid #cbd6bc; border-radius: 7px; color: #425f35; background: #fffffb; font-size: 15px; }
.answer-field input::placeholder { color: #b1b8a0; font-size: 12px; }
.answer-field input[readonly] { background: #f3f5e9; }
.answer-field small { display: block; font-size: 9px; color: #98a383; margin-top: 6px; line-height: 1.6; }
.answer-symbols { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 12px 0 19px; }
.answer-symbols button { width: 30px; height: 28px; font-family: var(--serif); font-size: 14px; border: 1px solid #e0e5d1; border-radius: 5px; color: #7a8f67; background: #f5f7ec; }
.answer-symbols button:hover { background: #e9eedc; }
.answer-symbols > span { color: #a1ac91; font-size: 9px; margin-left: auto; }
.answer-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 17px; margin-bottom: 24px; min-height: 57px; border: 1px dashed #dce2ca; border-radius: 7px; color: #687f54; background: #f8faef; }
.answer-preview > span { text-transform: uppercase; letter-spacing: .08em; font-size: 8px; color: #a2ac8e; }
#practice-math-preview { min-width: 0; max-width: 100%; overflow-x: auto; }
.preview-placeholder { font-size: 11px; color: #a8b195; }
.preview-separator { margin: 0 15px; color: #b8c1a4; }
.answer-feedback { margin: 20px 0; padding: 18px 20px; border-radius: 8px; font-size: 12px; line-height: 1.75; }
.answer-feedback strong { font-size: 13px; }
.answer-feedback p { margin: 5px 0 0; }
.answer-feedback.correct { background: #e9f1df; border: 1px solid #c4d6b1; color: #54733c; }
.answer-feedback.review { background: #f5f0dd; border: 1px solid #e1d7b4; color: #8b7950; }
.practice-hints { border-left: 2px solid #bdc691; padding: 10px 0 8px 18px; margin: 23px 0; font-size: 12px; line-height: 1.8; color: #7b8866; }
.practice-hints > div { display: flex; align-items: baseline; gap: 12px; }
.practice-hints > div > span { font-size: 9px; color: #a1af83; }
.practice-hints p { margin: 5px 0; }
.practice-solution { padding: 25px; background: #eef2e2; border: 1px solid #d5dfbf; border-radius: 9px; margin: 23px 0; font-size: 12px; line-height: 1.9; color: #677f4f; }
.solution-disclosure { border-top: 1px solid #dbe3c8; padding-top: 15px; font-size: 10px; color: #9aaa80; }
.practice-question-actions { display: flex; gap: 11px; margin-top: 23px; }
.practice-secondary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 17px; margin-top: 20px; font-size: 9px; color: #a0ac8e; }
.practice-secondary-actions button { padding: 5px 0; font-size: 10px; color: #93a17e; }
.practice-secondary-actions button:hover { color: #54713e; }
.practice-secondary-actions > span { margin-left: auto; }
.practice-summary { padding: 60px 35px 45px; text-align: center; border: 1px solid #dbe0ca; border-radius: 13px; background: #fffef6; }
.summary-flower { font-size: 44px; display: block; color: #839e64; margin-bottom: 27px; }
.practice-summary .eyebrow { font-size: 9px; color: #98aa7c; }
.practice-summary h2 { margin: 16px 0; font-family: var(--serif); font-size: 43px; font-weight: 400; letter-spacing: -.035em; color: #486338; }
.practice-summary > p:not(.eyebrow) { max-width: 420px; margin-inline: auto; color: #91a07c; font-size: 12px; line-height: 1.8; }
.summary-counts { display: grid; grid-template-columns: repeat(3,1fr); margin: 35px 0 25px; gap: 15px; }
.summary-counts strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 38px; color: #6d8950; }
.summary-counts span { display: block; font-size: 10px; color: #9aa987; line-height: 1.6; }
.practice-summary > .summary-caption { font-size: 10px !important; color: #abb59b !important; }
.summary-actions { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.learning-view .math-display { max-width: 100%; overflow-x: auto; }
.learning-view .math-error { overflow-wrap: anywhere; font-size: 11px; }
.learning-view button:disabled { opacity: .55; cursor: default; }
@media (min-width: 1450px) { .learning-view { width: min(1320px,calc(100% - 100px)); } .practice-hero { min-height: 350px; } .topic-card { min-height: 184px; } }
@media (max-width: 1080px) {
  .dashboard-header { grid-template-columns: 200px 1fr 200px; }
  .learning-view { width: calc(100% - 48px); }
  .practice-hero { padding: 38px 38px 32px; min-height: 305px; }
  .topic-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .component-filters button { font-size: 9px; padding: 8px; }
  .notes-layout { grid-template-columns: 205px minmax(0,1fr); gap: 29px; }
  .notes-sidebar { padding-right: 20px; }
  .notes-intro-equation { flex-wrap: wrap; gap: 14px; }
  .notes-intro-equation > span:last-child { margin-left: 0; }
  .practice-session-layout { grid-template-columns: 205px minmax(0,1fr); gap: 28px; }
  .practice-question-card { padding: 28px; }
  .answer-symbols > span { width: 100%; margin-left: 0; margin-top: 4px; }
}
@media (max-width: 780px) {
  .dashboard-header { grid-template-columns: 1fr auto; padding: 0 22px; gap: 0 16px; min-height: 100px; }
  .dashboard-header .brand { grid-row: 1; grid-column: 1; font-size: 20px; padding-top: 10px; }
  .dashboard-header .brand img { width: 30px; height: 30px; }
  .dashboard-header .profile-button { grid-row: 1; grid-column: 2; }
  .dashboard-header .main-nav { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: center; align-self: end; padding: 5px 0 8px; }
  .dashboard-header .nav-link { padding: 8px 19px; font-size: 12px; min-width: 87px; }
  .tutor-subnav { margin-top: -10px; }
  .tutor-subnav > p span { display: none; }
  .learning-view { width: calc(100% - 40px); padding-top: 21px; }
  .learning-course { font-size: 9px; margin-bottom: 20px; }
  .practice-hero { padding: 32px; grid-template-columns: 1.2fr .8fr; min-height: 290px; }
  .learning-hero h1 { font-size: 40px; }
  .learning-hero-art { padding: 0; }
  .learning-graph { min-width: 240px; opacity: .85; }
  .learning-focus-grid { grid-template-columns: 1fr; }
  .learning-focus-grid .focus-topic { padding: 21px; }
  .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topic-card { min-height: 179px; }
  .learning-section-heading h2 { font-size: 28px; }
  .learning-count { font-size: 9px; white-space: normal; text-align: right; max-width: 115px; }
  .notes-layout { grid-template-columns: 175px minmax(0,1fr); gap: 24px; }
  .notes-sidebar { padding-right: 16px; }
  .notes-sidebar-title { gap: 8px; }
  .notes-sidebar-title h2 { font-size: 16px; }
  .notes-sidebar-title svg { width: 17px; height: 17px; }
  .notes-intro h1 { font-size: 40px; }
  .notes-component-grid { grid-template-columns: 1fr; }
  .notes-component-card { min-height: 124px; padding: 23px; }
  .notes-intro-heading { flex-direction: column; gap: 8px; }
  .note-practice-callout { flex-direction: column; align-items: start; padding: 24px; }
  .note-section h2 { font-size: 26px; }
  .note-section p, .note-section li { font-size: 12px; }
  .practice-topic-detail { grid-template-columns: 1fr; gap: 19px; }
  .topic-detail-actions { flex-direction: row; flex-wrap: wrap; }
  .practice-session-layout { grid-template-columns: 165px minmax(0,1fr); gap: 22px; }
  .practice-session-sidebar h1 { font-size: 27px; }
  .practice-question-card { padding: 24px 21px; }
  .answer-form-heading { flex-direction: column; gap: 6px; }
  .practice-question-actions { flex-wrap: wrap; }
  .answer-fields { grid-template-columns: 1fr; }
  .practice-summary { padding: 38px 22px; }
  .summary-counts { grid-template-columns: 1fr; gap: 18px; }
  .summary-actions { flex-direction: column; }
}
@media (max-width: 560px) {
  .dashboard-header { padding-inline: 18px; }
  .learning-view { width: calc(100% - 32px); padding-top: 18px; }
  .learning-course { font-size: 8px; gap: 8px; line-height: 1.5; }
  .learning-course span:last-child { max-width: 165px; text-align: right; }
  .learning-preview { font-size: 10px; padding: 12px 14px; }
  .practice-hero { grid-template-columns: 1fr; padding: 31px 26px 23px; min-height: 0; }
  .practice-hero .eyebrow { font-size: 8px; letter-spacing: .13em; }
  .learning-hero h1 { font-size: 40px; margin-top: 13px; }
  .learning-hero > div > p:not(.eyebrow) { font-size: 11px; }
  .learning-hero-art { display: none; }
  .learning-hero-link { font-size: 10px; padding-top: 8px; }
  .learning-section-heading { margin-top: 29px; gap: 13px; }
  .learning-section-heading .eyebrow { font-size: 8px; }
  .learning-section-heading h2 { font-size: 27px; }
  .learning-count { max-width: 70px; font-size: 8px; }
  .library-notice { padding: 16px 15px; gap: 11px; }
  .library-notice p { font-size: 10px; }
  .library-notice strong { font-size: 10px; }
  .learning-filterbar { gap: 13px; margin-bottom: 24px; }
  .learning-search { height: 41px; width: 100%; }
  .component-filters { gap: 5px; }
  .component-filters button { border-color: #dfdcd0; padding: 7px 9px; font-size: 9px; }
  .topic-group-heading h3 { font-size: 12px; }
  .topic-group-heading > span:last-child { font-size: 9px; }
  .topic-grid { gap: 9px; }
  .topic-card { padding: 15px 13px 13px; min-height: 180px; }
  .topic-card h4 { font-size: 17px; line-height: 1.18; }
  .topic-card-top { margin-bottom: 13px; }
  .topic-card > p { font-size: 9px; margin-bottom: 14px; }
  .topic-card-bottom { flex-direction: column; gap: 5px; font-size: 8px; }
  .topic-card-bottom > span:last-child { display: none; }
  .topic-group { margin-bottom: 25px; }
  .practice-topic-detail { padding: 23px; }
  .practice-topic-detail h3 { font-size: 28px; }
  .practice-topic-detail p, .practice-topic-detail li { font-size: 10px; }
  .learning-footer { font-size: 8px; line-height: 1.7; }
  .learning-footer span:last-child { display: none; }
  .practice-resume { flex-wrap: wrap; gap: 14px; padding: 20px; }
  .practice-resume > div { min-width: 0; flex: 1; }
  .practice-resume .button { width: 100%; }
  .notes-layout { display: flex; flex-direction: column; gap: 0; }
  .notes-sidebar { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid #dcd7c9; }
  .notes-sidebar-title { margin-bottom: 13px; }
  .notes-sidebar-title h2 { font-size: 18px; }
  .notes-sidebar .learning-search { height: 39px; }
  #note-topic-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; margin-top: 20px; max-height: 260px; overflow-y: auto; padding-right: 6px; }
  .note-component { margin-bottom: 15px; }
  .note-component summary { font-size: 9px; }
  .note-topic-link { font-size: 9px; padding-block: 7px; gap: 5px; }
  .note-topic-code { flex-basis: 18px; font-size: 8px; }
  .notes-sidebar-footer { display: none; }
  .note-reader { padding-top: 27px; }
  .notes-intro { padding-top: 5px; }
  .notes-intro h1 { font-size: 42px; }
  .notes-intro > p:not(.eyebrow) { font-size: 11px; }
  .notes-intro-equation { padding: 23px; margin-top: 25px; }
  .notes-intro-equation .math-inline { font-size: 20px; }
  .notes-intro-equation > span:last-child { font-size: 12px; }
  .notes-component-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .notes-component-card { padding: 19px 15px; min-height: 144px; }
  .notes-component-card h3 { font-size: 21px; line-height: 1.1; }
  .notes-component-arrow { right: 12px; top: 12px; font-size: 16px; }
  .notes-component-kicker { font-size: 8px; }
  .note-title h1 { font-size: 35px; }
  .note-title > p:not(.eyebrow) { font-size: 12px; }
  .note-meta { font-size: 8px; gap: 10px; }
  .note-breadcrumb { margin-bottom: 25px; font-size: 9px; }
  .note-toc { gap: 12px; padding: 16px; }
  .note-toc > span { width: 100%; }
  .note-toc a { font-size: 9px; }
  .note-worked-example { padding: 23px 20px 15px; }
  .note-worked-example > h3 { font-size: 22px; }
  .note-practice-callout h3 { font-size: 26px; }
  .practice-session-top { font-size: 9px; gap: 10px; padding-bottom: 19px; }
  .practice-session-top > span:not(.draft-status) { display: none; }
  .practice-session-layout { display: flex; flex-direction: column; gap: 23px; padding-top: 16px; }
  .practice-session-sidebar h1 { font-size: 30px; margin: 11px 0; }
  .practice-session-description, .practice-question-steps, .practice-note-link { display: none; }
  .practice-session-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 14px; margin-top: 17px; }
  .practice-session-progress > span { font-size: 20px; grid-row: 1 / 3; }
  .practice-session-progress small { font-size: 14px; }
  .practice-session-progress p { font-size: 8px; margin: 0 0 7px; }
  .practice-progress-track { height: 3px; }
  .practice-question-card { padding: 25px 20px 23px; }
  .question-prompt { font-size: 13px; }
  .question-meta > span:last-child { font-size: 9px; }
  .answer-symbols > span { font-size: 8px; }
  .practice-answer-form { padding-top: 21px; margin-top: 25px; }
  .practice-question-actions { gap: 8px; }
  .practice-question-actions .button { flex: 1; font-size: 11px; gap: 9px; padding: 12px; }
  .practice-secondary-actions { gap: 14px; font-size: 8px; }
  .practice-secondary-actions > span { width: 100%; margin-top: 4px; }
  .practice-summary h2 { font-size: 39px; }
  .summary-counts { grid-template-columns: repeat(3,1fr); gap: 7px; }
  .summary-counts strong { font-size: 32px; }
  .summary-counts span { font-size: 9px; }
  .summary-actions { flex-direction: column; }
  .learning-empty { padding: 29px 18px; }
  .learning-empty h3 { font-size: 24px; }
  .learning-empty p { font-size: 11px; }
  .learning-error { padding: 28px; margin: 35px auto; }
}
@media (prefers-reduced-motion: reduce) { .learning-view *, .learning-loading-mark { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* The persistent three-section header is additional to the live session bar. */
.app-shell[data-view="live"] .live-view { min-height: calc(100dvh - 76px); }
.app-shell[data-view="live"] .live-workspace { height: calc(100dvh - 144px); }
.focus-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.focus-links a { color: var(--green); text-decoration: none; font-size: 11px; font-weight: 600; }
.focus-links a:hover { text-decoration: underline; }
@media (max-width: 780px) {
  .app-shell[data-view="live"] .live-view { min-height: calc(100dvh - 100px); }
  .app-shell[data-view="live"] .live-workspace { height: calc(100dvh - 168px); }
}
/* Readability refinements shared by all three learning surfaces. */
.drawer[aria-hidden="true"] { visibility: hidden; box-shadow: none; }
.notes-browse-toggle { display: none; }
.learning-hero > div > p:not(.eyebrow) { font-size: 14px; }
.library-notice p, .library-notice strong { font-size: 12px; }
.learning-search input { font-size: 12px; }
.topic-card > p { font-size: 12px; color: #6f7565; }
.topic-card-bottom { font-size: 10px; color: #747965; }
.topic-code { color: #747d69; }
.component-filters button { font-size: 11px; color: #68725d; }
.notes-intro > p:not(.eyebrow) { font-size: 14px; color: #6a775d; }
.note-topic-link { font-size: 11px; color: #6b795c !important; }
.note-component summary { font-size: 11px; }
.note-section p, .note-section li { font-size: 14px; color: #5e6f51; }
.note-title > p:not(.eyebrow) { color: #6b7c5c; }
.notes-component-card p { color: #7c8869; }
.notes-intro-heading > span { color: #7c8869; }
.note-meta { color: #7c8869; }
.note-diagram { max-width: 100%; overflow-x: auto; border: 1px solid #d6ddc5; border-radius: 8px; margin: 22px 0; }
.note-diagram table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.7; color: #5b7048; }
.note-diagram th, .note-diagram td { padding: 13px 15px; border-bottom: 1px solid #dce2cd; text-align: center; }
.note-diagram th { font-weight: 600; background: #edf1e2; }
.note-diagram tbody tr:last-child th, .note-diagram tbody tr:last-child td { border-bottom: 0; }
.summary-counts { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 25px; }
@media (max-width: 1080px) { .component-filters button { font-size: 10px; } }
@media (max-width: 780px) { .note-topic-link { font-size: 10px; } .note-component summary { font-size: 10px; } }
@media (max-width: 560px) {
  .notes-browse-toggle { display: block; margin-left: auto; border: 1px solid #ccd5bb; padding: 8px 9px; border-radius: 6px; font-size: 10px; color: #587448; }
  .notes-sidebar-title { margin-bottom: 0; }
  .notes-sidebar:not(.mobile-collapsed) .notes-sidebar-title { margin-bottom: 14px; }
  .notes-sidebar.mobile-collapsed > .learning-search, .notes-sidebar.mobile-collapsed #note-topic-results { display: none; }
  .learning-hero > div > p:not(.eyebrow) { font-size: 12px; }
  .library-notice p, .library-notice strong { font-size: 11px; }
  .topic-card > p { font-size: 11px; }
  .topic-card-bottom { font-size: 9px; }
  .topic-card { min-height: 192px; }
  .learning-search input, .notes-sidebar .learning-search input { font-size: 16px; }
  .learning-search input::placeholder, .notes-sidebar .learning-search input::placeholder { font-size: 12px; }
  .component-filters button { font-size: 10px; }
  .note-topic-link { font-size: 11px; }
  .notes-intro > p:not(.eyebrow) { font-size: 13px; }
  .note-section p, .note-section li { font-size: 14px; }
  .note-section h2 { font-size: 28px; }
  .answer-field input { font-size: 16px; }
  .summary-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.question-meta > span:last-child, .question-source, .answer-form-heading > span,
.answer-field label, .answer-field small, .answer-symbols > span,
.practice-secondary-actions, .practice-secondary-actions button,
.practice-session-description, .practice-session-progress p, .practice-question-steps small,
.summary-counts span, .practice-summary > p:not(.eyebrow) { color: #657650; }
.practice-summary > .summary-caption { color: #71815c !important; }
@media (max-width: 780px) {
  .hero-camera-card { min-height: 350px; }
  .hero-paper { top: 64px; height: 205px; padding: 32px 28px; }
  .hero-paper span { height: 5px; margin-bottom: 12px; }
  .hero-paper span.equation { margin-top: 21px; font-size: 23px; }
  .hero-camera-label { bottom: 22px; }
  .hero-camera-label strong { font-size: 20px; }
}
@media (max-width: 480px) { .hero-camera-label strong { font-size: 17px; } }