/* Shared layout and interaction language for every study mode. */
:root {
  --content-width: 1360px;
  --page-gutter: clamp(20px, 3.2vw, 48px);
  --space-panel: clamp(22px, 2.3vw, 32px);
  --surface-shadow: 0 2px 3px #142b2b04, 0 12px 32px -20px #142b2b35;
  --control-shadow: 0 1px 2px #142b2b0d, 0 3px 6px -4px #142b2b30;
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-move: cubic-bezier(.25, .8, .25, 1);
}
.workspace { min-height: 100dvh; display: flex; flex-direction: column; }
main[data-view], main[data-view="path"][data-guided="true"] {
  width: 100%; max-width: var(--content-width); margin: 0 auto;
  padding: 36px var(--page-gutter) 48px;
  flex: 1; overflow-anchor: none;
}
.topbar { padding-inline: var(--page-gutter); min-height: 76px; }
.topbar { position: sticky; top: 0; z-index: 30; box-shadow: 0 3px 14px -12px #142b2b55; }
html { scroll-padding-top: calc(var(--topbar-height, 76px) + 20px); }
main { scroll-margin-top: calc(var(--topbar-height, 76px) + 20px); }
.workspace > footer { max-width: var(--content-width); width: 100%; margin: auto auto 0; padding: 0 var(--page-gutter) 28px; }
.page-heading, main[data-view="learn"] .page-heading {
  align-items: flex-start; gap: 24px; margin-bottom: 32px;
}
.page-heading > div { min-width: 0; }
.page-heading > .btn { flex-shrink: 0; margin-top: 18px; }
h1 { font-size: clamp(1.8rem, 2.4vw, 2.25rem); line-height: 1.25; letter-spacing: -.045em; }
.sub { font-size: 1rem; line-height: 1.7; margin-top: 10px; max-width: 70ch; }
.eyebrow { line-height: 1.5; }
.study-grid, .vocab-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.study-aside, .vocab-aside { display: grid; gap: 20px; }
.study-aside .side-panel, .vocab-aside .side-panel { margin: 0; }
.panel, .side-panel, .account-panel, .map-card, .stat-card {
  padding: var(--space-panel); border-radius: 20px; box-shadow: var(--surface-shadow);
}
.path-unit, .tutor-main, .guided-study-frame, .lesson-definitions, .vocab-card, .compare-card {
  box-shadow: var(--surface-shadow);
}
.card-face { box-shadow: 0 2px 3px #142b2b08, 0 18px 36px -24px #142b2b55; }
.path-next, .guide-hero { padding: var(--space-panel); margin-bottom: 28px; border-radius: 20px; }
.path-sequence { max-width: none; }
.quiz-setup, .account-layout, .tutor-layout, .map-grid { gap: 28px; }
.quiz-shell { max-width: 900px; margin-inline: auto; }
.quiz-shell { scroll-margin-top: calc(var(--topbar-height, 76px) + 24px); }
.lab-stage { position: relative; overflow: clip; overflow-clip-margin: 12px; }
.lab-slide { display: flow-root; }
.lab-outgoing { position: absolute; inset: 0 0 auto; pointer-events: none; }
.lab-tabs .segment:hover, .lab-tabs .segment:active { transform: none; }
.section-line { min-height: 44px; margin-bottom: 16px; flex-wrap: wrap; }
.btn, .icon-button, .sidebar-toggle, .segment, .filter-select, .select-full,
.vocab-search input, .tutor-context select, .account-form input, .tutor-form textarea {
  min-height: 44px; border-radius: 12px;
}
.btn, .icon-button, .sidebar-toggle, .segment, .answer-option, .path-step, .lesson-link,
.nav-link, .study-context-step, .tutor-prompts button, .domain-tile {
  transition: transform 220ms var(--ease-settle), background-color 180ms ease,
    border-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
}
.btn:not(.ghost), .icon-button, .sidebar-toggle { box-shadow: var(--control-shadow); }
.btn { padding: 12px 18px; line-height: 1.4; }
.btn:disabled { transform: none; box-shadow: none; }
.btn:active:not(:disabled), .icon-button:active:not(:disabled), .sidebar-toggle:active,
.segment:active:not(:disabled), .answer-option:active:not(:disabled), .path-step:active,
.tutor-prompts button:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.nav-link { position: relative; min-height: 46px; border-radius: 12px; }
.nav-link.active { box-shadow: 0 3px 12px #00000018, inset 0 1px 0 #ffffff60; }
.nav-link:active { transform: scale(.98); }
.segmented, .lab-tabs { padding: 5px; gap: 5px; border: 1px solid var(--line); border-radius: 15px; background: #eaf0ed; }
.segment { background: transparent; padding: 10px 16px; font-size: .875rem; }
.segment.selected { background: white; color: var(--ink); box-shadow: var(--control-shadow); }
.filter-select { background: white; border: 1px solid var(--line); padding: 10px 12px; max-width: 100%; }
.select-full, .vocab-search input { border-color: #cad7d1; }
.deck-navigation { min-height: 44px; margin-bottom: 16px; }
.deck-counter, .source-tag, .study-stage-count { font-variant-numeric: tabular-nums; }
.rating-row { min-height: 48px; margin-top: 20px; }
.answer-option { border-width: 2px; padding: 15px; }
.answer-option.correct, .answer-option.wrong { padding: 15px; opacity: 1; }
.answer-option:disabled:not(.correct):not(.wrong) { opacity: .7; }
.feedback { animation: feedback-arrive 260ms var(--ease-settle); }
.quiz-progress > span, .meter > span { transition: width 380ms var(--ease-settle); }
.definition-toggle, .sidebar-toggle .icon { transition: transform 320ms var(--ease-settle); }
details > summary { min-height: 44px; }
details[open] > :not(summary) { animation: feedback-arrive 240ms var(--ease-settle); }
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #8670db; outline-offset: 4px;
}
main:focus-visible { outline: none; }
main[data-view="learn"] .learning-layout { gap: 28px; }
main[data-view="learn"] .lesson-title { font-size: clamp(1.6rem, 2vw, 2rem); line-height: 1.4; }
main[data-view="learn"] .lesson-intro { font-size: 1.0625rem; line-height: 1.8; max-width: 76ch; }
main[data-view="learn"] .compare-pair { margin: 28px 0; gap: 24px; }
main[data-view="learn"] .compare-card { padding: var(--space-panel); }
main[data-view="learn"] .compare-card h3 { font-size: 1.3rem; line-height: 1.45; }
main[data-view="learn"] .compare-card p { font-size: 1rem; line-height: 1.8; }
main[data-view="learn"] .lesson-word-section { margin-top: 32px; }
.lesson-layout-toolbar { margin-bottom: 28px; padding-bottom: 24px; }
.guided-study-frame { padding: var(--space-panel); border-radius: 20px; min-height: 620px; }
.study-stage-content { max-width: 100%; }
.study-stage-content > h1 { font-size: clamp(1.8rem, 2.4vw, 2.25rem); line-height: 1.3; }
.guided-word-card, .guided-concept-card, .guided-question { max-width: 820px; padding: var(--space-panel); }
.vocab-deck-navigation, .concept-stepper { max-width: 820px; }
.guided-word-card { min-height: 500px; }
.guided-stage-actions { min-height: 72px; }
.guided-inline-help { margin-top: 28px; }
.study-context-menu { top: calc(var(--topbar-height, 76px) + 16px); padding: 12px; margin-bottom: 24px; gap: 12px; grid-template-columns: minmax(200px,1fr) minmax(340px,1.8fr) auto; }
.study-context-step { min-height: 44px; }
.study-context-primary .study-exit { min-height: 44px; }
.study-context-step.current { box-shadow: var(--control-shadow); }
.pill { white-space: normal; line-height: 1.5; }
.card-top { align-items: flex-start; }
.card-code { flex-shrink: 0; }
.topbar-account { min-width: 0; }
.toast { transition: opacity 220ms ease, transform 360ms var(--ease-settle); }
@keyframes feedback-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (hover:hover) {
  .btn:hover:not(:disabled), .icon-button:hover:not(:disabled), .sidebar-toggle:hover,
  .path-step:hover, .tutor-prompts button:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px #142b2b70; }
  .answer-option:hover:not(:disabled) { transform: translateX(3px); border-color: #8eaea0; }
  .nav-link:hover:not(.active) { transform: translateX(3px); }
}
@media (min-width:681px) {
  .sidebar { transition: width 360ms var(--ease-settle), padding 360ms var(--ease-settle); }
  .workspace { transition: margin-left 360ms var(--ease-settle), width 360ms var(--ease-settle); }
  .sidebar .brand, .sidebar .nav-link { white-space: nowrap; }
}
@media (min-width:1051px) {
  main[data-view="learn"] .learning-layout {
    grid-template-columns: 290px minmax(0,1fr);
    transition: grid-template-columns 360ms var(--ease-settle), gap 360ms var(--ease-settle);
  }
  main[data-view="learn"] .learning-layout[data-lesson-nav="collapsed"] { grid-template-columns: 0 minmax(0,1fr); gap: 0; }
  main[data-view="learn"] .lesson-content { grid-column: 2; }
  main[data-view="learn"] .lesson-nav:not([hidden]) { animation: feedback-arrive 300ms var(--ease-settle); }
  main[data-view="learn"] .lesson-nav { top: calc(var(--topbar-height, 76px) + 16px); max-height: calc(100dvh - var(--topbar-height, 76px) - 32px); }
}
@media (max-width:1180px) {
  .study-context-menu { grid-template-columns: minmax(0,1fr) auto; }
  .study-context-steps { grid-column: 1/-1; grid-row: 2; }
  .study-context-best { grid-column: 2; grid-row: 1; }
  .study-context-primary select { max-width: none; }
}
@media (max-width:1050px) {
  .study-grid, .vocab-layout { grid-template-columns: minmax(0,1fr); }
  .study-aside, .vocab-aside { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  :root { --page-gutter: 18px; --space-panel: 22px; }
  main[data-view], main[data-view="path"][data-guided="true"] { padding: 28px var(--page-gutter) 36px; }
  .topbar { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px var(--page-gutter); min-height: 64px; }
  .topbar-start { width: auto; }
  .topbar-account { display: contents; }
  .topbar #account-link { grid-column: 2; grid-row: 1; }
  .topbar #save-status { grid-column: 1/-1; grid-row: 2; max-width: none; }
  .sidebar { position: relative; padding-inline: var(--page-gutter); }
  #navigation { padding-bottom: 8px; scroll-snap-type: x proximity; }
  .nav-link { scroll-snap-align: start; border-radius: 10px; min-height: 44px; }
  .page-heading, main[data-view="learn"] .page-heading { flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
  .page-heading > .btn { margin: 0; font-size: .875rem; padding: 12px 16px; }
  .sub { font-size: 1rem; }
  .study-aside, .vocab-aside { grid-template-columns: minmax(0,1fr); }
  .study-grid, .vocab-layout, .quiz-setup, .account-layout, .tutor-layout, .map-grid { gap: 24px; }
  .card-area-select { flex: 1; }
  .card-area-select .filter-select { width: 100%; max-width: none; }
  .section-line > label { min-width: 0; }
  .filter-select { font-size: .875rem; }
  .rating-row .btn { font-size: .875rem; padding: 10px; }
  .rating-row .mini-tag { display: none; }
  .study-context-menu { position: relative; top: auto; gap: 8px; padding: 10px; }
  .study-context-primary { grid-column: 1/-1; }
  .study-context-best { grid-column: 1/-1; grid-row: auto; }
  .study-context-steps { grid-row: 2; }
  .study-context-step { flex-direction: column; font-size: .75rem; }
  .guided-study-frame { padding: 22px 16px; min-height: 560px; }
  .guided-word-card, .guided-concept-card, .guided-question { padding: 20px 16px; }
  .guided-word-card .rating-row, .guided-concept-card .rating-row { flex-wrap: wrap; }
  .guided-word-card .rating-row .btn, .guided-concept-card .rating-row .btn { min-width: 130px; }
  .guided-stage-actions { min-height: 0; }
  .lab-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lab-tabs .segment { font-size: .875rem; }
  .guide-nums { flex-wrap: wrap; }
  .quiz-bottom { flex-wrap: wrap; }
  .topbar .local-badge { font-size: .8125rem; }
  .vocab-layout .section-line { align-items: center; }
  .vocab-layout .source-tag { padding: 0; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Lesson changes stay inside a stable reading pane. */
main[data-view="learn"] .lesson-nav:not([hidden]) { animation: none; }
.lesson-content { height: min(760px, 72dvh); min-height: 360px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: 4px 18px 24px 4px; }
@media (max-width: 700px) { .lesson-content { height: 70dvh; padding-inline: 2px 10px; } }
.tutor-widget { white-space: normal; margin: 20px 0 12px; padding: clamp(16px,3vw,24px); background: #f4f7f1; border: 1px solid #d5e1cc; border-radius: 18px; color: var(--ink); }
.widget-heading { margin-bottom: 20px; }
.widget-heading h3 { margin-top: 6px; }
.widget-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.widget-controls label { display: block; font-size: .875rem; font-weight: 600; }
.widget-controls output { float: right; color: #176a58; font-variant-numeric: tabular-nums; }
.widget-controls input[type=range] { display:block; width:100%; margin:12px 0 0; accent-color:#176a58; }
.widget-toggle { grid-column: 1/-1; }
.widget-result { margin: 20px 0; padding: 20px; background: #1b302e; color:#edf4ec; border-radius:14px; }
.chat-message .widget-value { display:block; color:#d3fa68; font-size:clamp(1.6rem,4vw,2.2rem); margin:8px 0; font-variant-numeric:tabular-nums; }
.widget-result .eyebrow,.widget-result .small-note { color:#c2d5c8; }
.widget-result p { margin-top:12px; }
.widget-formula { font-family: monospace; font-size:.85rem; overflow-wrap:anywhere; }
.widget-meter { height:5px; border-radius:8px; background:#52675c; overflow:hidden; }
.widget-meter span { display:block; height:100%; background:#d3fa68; transition:width 120ms ease-out; }
.chat-prose { white-space:pre-wrap; }
.tutor-content-links { display:flex; gap:8px; flex-wrap:wrap; white-space:normal; margin-top:16px; }
.tutor-content-links .btn { white-space:normal; text-align:left; }
@media(max-width:600px) { .widget-controls { grid-template-columns:1fr; } .tutor-widget { padding:14px; } .widget-result { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .widget-meter span { transition:none; } }
/* Conversation gets the full column; reference tools follow below it. */
main[data-view="assistant"] { max-width: 1240px; }
.tutor-layout { grid-template-columns: minmax(0,1fr); }
.tutor-main { width:100%; }
.tutor-context { padding:18px 32px; }
.tutor-context label { grid-template-columns:auto minmax(180px,360px); align-items:center; gap:18px; }
.chat-log { position:relative; height:clamp(520px,65dvh,820px); padding:36px clamp(20px,4vw,56px); scroll-behavior:auto; }
.chat-message { background:transparent; padding:0; margin:0 0 40px; max-width:780px; white-space:normal; }
.chat-message>strong { color:var(--green); margin-bottom:16px; }
.chat-message.user { width:fit-content; max-width:85%; margin:0 0 36px auto; padding:18px 24px; border-radius:20px 20px 5px 20px; background:#edf2e8; color:var(--ink); }
.chat-message.user>strong { color:var(--muted); margin-bottom:8px; }
.chat-prose { white-space:normal; font-size:1.0625rem; line-height:1.85; max-width:66ch; }
.chat-prose p { margin:0 0 20px; line-height:1.85; }
.chat-prose p:last-child { margin-bottom:0; }
.chat-prose strong { font-weight:700; }
.tutor-form { padding:20px 32px; background:#fafcf9; }
.tutor-form textarea { min-height:72px; }
.tutor-aside { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.tutor-followups { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.tutor-followups button { border:1px solid var(--line); background:#fff; padding:10px 15px; border-radius:22px; font-size:.875rem; }
.tutor-followups button:hover { background:#edf5df; border-color:#bed495; }
.chat-pending { display:flex; align-items:center; gap:14px; min-height:60px; padding:12px 0; }
.tutor-thinking { display:flex; gap:5px; }
.tutor-thinking i { width:6px; height:6px; background:#507969; border-radius:50%; animation:tutor-think 1.2s ease-in-out infinite; }
.tutor-thinking i:nth-child(2) { animation-delay:.15s; }
.tutor-thinking i:nth-child(3) { animation-delay:.3s; }
@keyframes tutor-think { 0%,80%,100% { opacity:.35; } 40% { opacity:1; } }
@media(max-width:700px) { .tutor-aside { grid-template-columns:1fr; } .tutor-context label { grid-template-columns:1fr; gap:8px; } .tutor-context,.tutor-form { padding:18px; } .chat-log { height:62dvh; min-height:380px; padding:24px 18px; } .chat-prose { font-size:1rem; } .chat-message.user { max-width:92%; padding:14px 18px; } }
@media(prefers-reduced-motion:reduce) { .tutor-thinking i { animation:none; } }
/* Viewport chat: only the transcript scrolls; composer stays in view. */
body:has(main[data-view="assistant"]) { overflow:hidden; }
.workspace:has(main[data-view="assistant"]) { height:100dvh; min-height:0; overflow:hidden; }
.workspace:has(main[data-view="assistant"]) > .topbar { flex-shrink:0; }
.workspace:has(main[data-view="assistant"]) > footer { display:none; }
main[data-view="assistant"] { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; padding:12px var(--page-gutter) 16px; max-width:1240px; }
.chat-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; padding:0 0 12px; }
.chat-toolbar h1 { font-size:1.125rem; letter-spacing:-.02em; }
.chat-toolbar .btn { min-height:36px; padding:8px 12px; font-size:.8125rem; }
main[data-view="assistant"] > .account-notice { flex-shrink:0; margin:0 0 8px; padding:10px 16px; }
main[data-view="assistant"] .tutor-layout { display:flex; flex:1; min-height:0; gap:0; }
main[data-view="assistant"] .tutor-main { display:flex; flex-direction:column; min-height:0; height:100%; }
main[data-view="assistant"] .tutor-aside { display:none; }
main[data-view="assistant"] .tutor-context { flex-shrink:0; padding:10px 20px; }
main[data-view="assistant"] .tutor-context label { display:flex; justify-content:space-between; font-size:.8125rem; gap:12px; }
main[data-view="assistant"] .tutor-context select { width:auto; max-width:65%; padding:8px 10px; font-size:.875rem; }
main[data-view="assistant"] .chat-log { flex:1; height:auto; min-height:0; padding:24px clamp(18px,3vw,40px); overflow-y:auto; }
main[data-view="assistant"] .chat-empty { display:flex; flex-direction:column; justify-content:center; min-height:100%; padding:16px 0; max-width:620px; margin:auto; }
main[data-view="assistant"] .chat-empty .eyebrow { display:none; }
main[data-view="assistant"] .chat-empty h2 { font-size:1.4rem; margin-bottom:12px; }
main[data-view="assistant"] .tutor-form { flex-shrink:0; padding:12px 20px; gap:8px; }
main[data-view="assistant"] .tutor-form textarea { min-height:52px; max-height:110px; resize:none; padding:10px 14px; }
main[data-view="assistant"] .tutor-form-footer { align-items:center; gap:12px; }
main[data-view="assistant"] .tutor-form-footer>span { font-size:.7rem; line-height:1.4; }
main[data-view="assistant"] .tutor-form-footer .btn { padding:9px 16px; min-height:38px; white-space:nowrap; }
@media(max-width:700px) {
 main[data-view="assistant"] { padding:8px 10px max(8px,env(safe-area-inset-bottom)); }
 main[data-view="assistant"] .tutor-context { padding:8px 12px; }
 main[data-view="assistant"] .tutor-context label { font-size:0; gap:0; }
 main[data-view="assistant"] .tutor-context select { max-width:100%; width:100%; }
 main[data-view="assistant"] .tutor-form { padding:10px 12px; }
 main[data-view="assistant"] .tutor-form-footer { flex-direction:row; }
 main[data-view="assistant"] .chat-log { padding:20px 16px; }
 .chat-toolbar { padding-bottom:8px; }
}
.app-shell:has(main[data-view="assistant"]) { height:100dvh; min-height:0; overflow:hidden; }
.workspace:has(main[data-view="assistant"]) { flex:1; height:auto; min-width:0; }
.workspace:has(main[data-view="assistant"]) { height:var(--chat-workspace-height,100dvh); flex:none; }
main[data-view="assistant"] .tutor-main { height:auto; flex:1; }
@media(max-width:700px) { .workspace:has(main[data-view="assistant"]) { max-height:calc(100dvh - 80px); } }
main[data-view="assistant"] .tutor-layout { align-items:stretch; }
/* Chat is the workspace; individual replies and widgets are the surfaces. */
main[data-view="assistant"] { max-width:none; margin:0; padding:0; }
main[data-view="assistant"] .chat-toolbar { padding:12px var(--page-gutter); border-bottom:1px solid var(--line); background:white; }
main[data-view="assistant"] > .account-notice { margin:8px var(--page-gutter); }
main[data-view="assistant"] .tutor-main { border:0; border-radius:0; box-shadow:none; background:transparent; }
main[data-view="assistant"] .tutor-context { padding:10px var(--page-gutter); background:transparent; }
main[data-view="assistant"] .tutor-context label { justify-content:flex-start; }
main[data-view="assistant"] .chat-log { padding:28px var(--page-gutter); }
main[data-view="assistant"] .chat-message:not(.user) { max-width:1100px; width:100%; padding:24px 28px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 3px 14px -12px #142b2b40; }
main[data-view="assistant"] .chat-message.user { max-width:min(75%,720px); }
main[data-view="assistant"] .chat-prose { max-width:76ch; }
main[data-view="assistant"] .tutor-widget { max-width:none; margin-top:24px; }
main[data-view="assistant"] .tutor-form { padding:12px var(--page-gutter) max(12px,env(safe-area-inset-bottom)); background:white; }
main[data-view="assistant"] .tutor-form textarea { border-radius:16px; }
main[data-view="assistant"] .chat-empty { max-width:760px; width:100%; }
@media(min-width:1100px) {
 main[data-view="assistant"] .tutor-widget { display:grid; grid-template-columns:minmax(220px,1fr) minmax(280px,1.2fr); gap:16px 28px; }
 main[data-view="assistant"] .widget-heading { grid-column:1/-1; margin-bottom:0; }
 main[data-view="assistant"] .widget-controls { grid-column:1; align-content:start; grid-template-columns:1fr; }
 main[data-view="assistant"] .widget-result { grid-column:2; grid-row:2/4; margin:0; }
 main[data-view="assistant"] .tutor-widget>[data-widget-explain] { grid-column:1; justify-self:start; align-self:end; }
}
@media(max-width:700px) {
 main[data-view="assistant"] { padding:0; }
 main[data-view="assistant"] .chat-toolbar,main[data-view="assistant"] .tutor-context { padding:10px 14px; }
 main[data-view="assistant"] .chat-log { padding:18px 12px; }
 main[data-view="assistant"] .chat-message:not(.user) { padding:18px 16px; border-radius:14px; }
 main[data-view="assistant"] .chat-message.user { max-width:90%; }
 main[data-view="assistant"] .tutor-form { padding:10px 14px max(10px,env(safe-area-inset-bottom)); }
}
/* Lessons flow with the document, without nested scroll panes. */
main[data-view="learn"] .lesson-content { height:auto; min-height:0; max-height:none; overflow:visible; overscroll-behavior:auto; scrollbar-gutter:auto; padding:4px 0 24px; }
main[data-view="learn"] .lesson-nav { max-height:none; overflow:visible; overscroll-behavior:auto; position:static; }
html,body,.sidebar,.chat-log { scrollbar-width:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.chat-log::-webkit-scrollbar { display:none; width:0; height:0; }
/* Keep lesson navigation alongside the article, bounded by its section. */
@media(min-width:901px) {
 main[data-view="learn"] .lesson-nav { position:sticky; top:var(--lesson-nav-top,calc(var(--topbar-height,76px) + 16px)); align-self:start; }
}
.path-picker { margin-bottom:22px; }
.path-picker .path-section-title { margin-bottom:12px; }
.path-picker .guided-select-label { margin-bottom:0; max-width:600px; }
.path-picker + .path-next { margin-bottom:24px; }
main[data-view="path"] .path-sequence { width:100%; max-width:none; padding:0; margin:0 0 24px; grid-template-columns:repeat(4,minmax(0,1fr)); }
main[data-view="path"] .path-sequence .path-step { min-width:0; }
@media(max-width:900px) { main[data-view="path"] .path-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { main[data-view="path"] .path-sequence { grid-template-columns:1fr; } }
/* One page title, one clear picker, one changing lesson preview. */
.path-picker { margin-bottom:20px; }
.path-picker .guided-select-label { max-width:720px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:18px; padding:12px 16px; border:1px solid #cbd9cc; border-radius:16px; background:#eaf0e6; box-shadow:0 3px 12px -10px #142b2b50; }
.path-picker .guided-select-label>span { color:#426358; font-size:.8125rem; font-weight:600; }
.path-picker select { appearance:none; width:100%; min-width:0; padding:14px 44px 14px 16px; border:1px solid #d5dfd4; border-radius:11px; background-color:white; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23176a58' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position:right 16px center; background-repeat:no-repeat; color:var(--ink); font:inherit; font-weight:600; cursor:pointer; transition:border-color 180ms,box-shadow 180ms,background-color 180ms; }
.path-picker select:hover { border-color:#7c9c71; background-color:#fcfff7; }
.path-picker select:focus-visible { outline:2px solid #73935f; outline-offset:3px; box-shadow:0 0 0 5px #d3fa6833; }
main[data-view="path"][data-guided="false"] .path-next .eyebrow { display:none; }
main[data-view="path"][data-guided="false"] .path-next h2 { margin-top:0; }
@media(max-width:600px) { .path-picker .guided-select-label { grid-template-columns:1fr; gap:8px; padding:12px; } }
/* Compact learning surface with an always-readable progress overview. */
.lesson-workspace { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:24px; align-items:start; }
.lesson-workspace .guided-study-frame { min-height:0; padding:24px; }
.lesson-workspace .study-stage-content>h1 { font-size:1.5rem; margin-bottom:10px; }
.lesson-workspace .study-intro { margin:8px 0 18px; font-size:.9375rem; line-height:1.65; }
.lesson-workspace .guided-word-card,.lesson-workspace .guided-concept-card,.lesson-workspace .guided-question { max-width:none; width:100%; min-height:0; margin:12px 0; padding:22px; }
.lesson-workspace .vocab-deck-navigation,.lesson-workspace .concept-stepper { max-width:none; margin:12px 0; }
.lesson-workspace .guided-word-card>h2 { margin:14px 0; }
.lesson-workspace .guided-definition,.lesson-workspace .guided-definition-example { padding:16px; margin:12px 0; }
.lesson-workspace .guided-stage-actions { margin-top:18px; padding-top:16px; gap:12px; }
.lesson-progress-panel { position:sticky; top:calc(var(--topbar-height,76px) + 100px); padding:22px; border:1px solid var(--line); border-radius:18px; background:#edf3e5; }
.lesson-progress-panel h2 { font-size:1rem; line-height:1.5; margin:8px 0 22px; }
.lesson-progress-panel h3 { font-size:.875rem; margin:20px 0 12px; }
.lesson-meter { margin-bottom:18px; }
.lesson-meter>div { display:flex; justify-content:space-between; gap:8px; font-size:.8125rem; margin-bottom:8px; }
.lesson-meter progress { appearance:none; display:block; width:100%; height:8px; border:0; border-radius:8px; background:#d7e2d0; accent-color:#39795a; }
.lesson-meter progress::-webkit-progress-bar { background:#d7e2d0; border-radius:8px; }
.lesson-meter progress::-webkit-progress-value { background:#39795a; border-radius:8px; }
.lesson-progress-stats { display:grid; gap:10px; font-size:.8125rem; }
.lesson-progress-dots { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.lesson-dot { height:32px; border:1px solid #c9d6c3; border-radius:8px; background:white; font-size:.75rem; }
.lesson-dot.rated { background:#cce6c7; border-color:#a2c79a; }
.lesson-dot.again { background:#f7dfba; border-color:#dab77d; }
.lesson-dot.current { outline:2px solid #176a58; outline-offset:2px; font-weight:700; }
.lesson-progress-panel .small-note { margin-top:16px; font-size:.75rem; }
@media(max-width:1050px) { .lesson-workspace { grid-template-columns:minmax(0,1fr); } .lesson-progress-panel { position:static; } }
@media(max-width:600px) { .lesson-workspace .guided-study-frame { padding:18px 14px; } .lesson-workspace .guided-word-card,.lesson-workspace .guided-concept-card { padding:16px; } }
.topbar { gap:12px; }
#study-back { white-space:nowrap; min-height:36px; padding:8px 12px; font-size:.8125rem; }
.study-rewards { display:grid; gap:5px; text-decoration:none; font-size:.75rem; color:#37634e; min-width:150px; margin-right:auto; }
.study-rewards progress { width:100%; height:5px; accent-color:#648b38; }
@media(max-width:800px) { .topbar { flex-wrap:wrap; } .study-rewards { min-width:110px; font-size:.6875rem; } .topbar-account { margin-left:auto; } }
/* Directional card changes stay clipped to their study surface. */
.guided-study-frame,.flip-stage,.lesson-content,.quiz-shell { overflow-x:clip; }
/* Leave room on both sides for vocabulary card travel and its shadow. */
#vocab-results { overflow:visible; }
.rating-row .btn[aria-pressed="true"] { outline:2px solid currentColor; outline-offset:3px; font-weight:750; }
.lesson-workspace .vocab-deck-navigation,.lesson-workspace .concept-stepper { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; margin:14px 0 10px; }
.lesson-workspace .vocab-deck-navigation .btn,.lesson-workspace .concept-stepper .btn { min-height:40px; padding:9px 14px; }
/* Retain the same compositing layer before, during and after a card slide. */
.guided-word-card,.guided-concept-card,.guided-question { transform:translate3d(0,0,0); backface-visibility:hidden; }
.lesson-dot { position:relative; }
.lesson-dot:hover,.lesson-dot:focus-visible { z-index:3; }
.lesson-dot[title]:hover::after,.lesson-dot[title]:focus-visible::after { content:attr(title); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); width:max-content; max-width:220px; padding:10px 12px; border-radius:9px; background:#142b2b; color:white; font-size:.75rem; font-weight:400; line-height:1.5; box-shadow:0 5px 20px #142b2b25; pointer-events:none; text-align:left; }
.lesson-dot:nth-child(5n+1)::after { left:0; transform:none; }
.lesson-dot:nth-child(5n)::after { left:auto; right:0; transform:none; }
.lesson-settings { margin:-6px -6px 20px; padding:12px; border:1px solid #d2dec9; border-radius:12px; background:#fff; }
.lesson-settings label { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.lesson-settings strong { display:block; font-size:.8125rem; }
.lesson-settings small { display:block; font-size:.6875rem; color:var(--muted); margin-top:4px; line-height:1.5; }
.lesson-settings input { width:32px; height:20px; flex-shrink:0; accent-color:#39795a; cursor:pointer; }
.study-rewards { min-width:200px; padding:10px 16px; border-radius:14px; background:linear-gradient(110deg,#d3fa68,#c6efbf 55%,#d8ccff); border:1px solid #b4d57e; color:#183c2b; box-shadow:0 3px 10px #61872e18; font-size:.875rem; font-weight:750; }
.study-rewards span::before { content:'★ '; color:#6550a4; font-size:1rem; }
.study-rewards progress { height:7px; border:0; border-radius:8px; overflow:hidden; accent-color:#7555c8; background:#ffffff90; }
.study-rewards progress::-webkit-progress-bar { background:#ffffff90; border-radius:8px; }
.study-rewards progress::-webkit-progress-value { background:linear-gradient(90deg,#7555c8,#467d60); border-radius:8px; }
@media(max-width:800px) { .study-rewards { min-width:135px; padding:8px 10px; font-size:.75rem; } }
/* Rewards use the same green and lime language as the study workspace. */
.study-rewards { background:#eaf2dd; border-color:#d1dfb9; color:#234638; box-shadow:none; }
.study-rewards span::before { color:#39795a; }
.study-rewards progress { accent-color:#39795a; background:#d5e1c9; }
.study-rewards progress::-webkit-progress-bar { background:#d5e1c9; }
.study-rewards progress::-webkit-progress-value { background:#39795a; }
.study-rewards progress::-moz-progress-bar { background:#39795a; }
/* Navigation above; quiet, integrated learning progress beneath. */
.topbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding-top:12px; padding-bottom:0; }
.topbar .topbar-start { flex:0 0 auto; }
.topbar .topbar-account { margin-left:auto; }
.topbar-progress-row { flex:0 0 calc(100% + 2 * var(--page-gutter)); margin-inline:calc(-1 * var(--page-gutter)); padding:8px var(--page-gutter); border-top:1px solid var(--line); background:#f4f7f2; }
.topbar-progress-row .study-rewards { display:flex; justify-content:space-between; align-items:center; gap:24px; min-width:0; width:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#466456; font-size:.75rem; font-weight:600; }
.topbar-progress-row .study-rewards span::before { content:none; }
.topbar-progress-row .study-rewards progress { width:clamp(100px,22vw,300px); height:5px; flex-shrink:0; }
@media(max-width:800px) { .topbar { gap:8px; } .topbar-progress-row { padding-block:7px; } .topbar-progress-row .study-rewards { font-size:.6875rem; gap:12px; } }
/* Menu controls belong to the menu, with a stable centered brand tile. */
.sidebar .brand-mark { display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; padding:0; line-height:1; letter-spacing:-1px; text-indent:-1px; }
.sidebar-controls { margin-top:18px; }
.sidebar-controls .sidebar-toggle { width:100%; color:#dce9df; background:#284440; border-color:#45625a; box-shadow:none; }
.sidebar-controls .sidebar-toggle:hover { background:#35584e; }
.sidebar .side-label { margin-top:24px; }
.topbar-start:has(>span:only-child) { display:none; }
@media(min-width:681px) {
 html[data-sidebar="collapsed"] .sidebar .brand-mark { width:44px; height:44px; flex-basis:44px; }
 html[data-sidebar="collapsed"] .sidebar-controls .sidebar-toggle { width:44px; padding:10px; margin-inline:auto; }
 html[data-sidebar="collapsed"] .sidebar-toggle-label { display:none; }
 html[data-sidebar="collapsed"] .sidebar-controls { display:flex; justify-content:center; }
 html[data-sidebar="collapsed"] #navigation { margin-top:22px; }
}
@media(max-width:680px) { .sidebar-controls { margin-top:0; margin-left:auto; } .sidebar-controls .sidebar-toggle { width:auto; } .sidebar-toggle-label { min-width:0; } }
/* Compact guided lessons while keeping text comfortably readable. */
main[data-view="path"][data-guided="true"] { padding-top:20px; padding-bottom:24px; }
.lesson-workspace { gap:20px; }
.lesson-workspace .guided-study-frame { padding:20px; }
.lesson-workspace .study-stage-content>h1 { font-size:1.3rem; margin:8px 0; }
.lesson-workspace .study-intro { margin:6px 0 12px; line-height:1.55; }
.lesson-workspace .concept-stepper,.lesson-workspace .vocab-deck-navigation { margin:10px 0 8px; }
.lesson-workspace .guided-concept-card,.lesson-workspace .guided-word-card,.lesson-workspace .guided-question { padding:18px 20px; margin:8px 0; }
.lesson-workspace .guided-concept-card>.section-line,.lesson-workspace .guided-word-card>.section-line { margin-bottom:12px; }
.lesson-workspace .guided-correct-answer { margin:12px 0 16px; padding:16px 18px; font-size:1.2rem; line-height:1.45; }
.lesson-workspace .guided-concept-explanation { font-size:1rem; line-height:1.65; margin:12px 0; }
.lesson-workspace .memory-hook { margin:12px 0; padding-block:0; }
.lesson-workspace .guided-prerequisites { padding:0; margin:14px 0; }
.lesson-workspace .guided-prerequisites>summary { padding:14px 18px; margin:0; line-height:1.5; }
.lesson-workspace .guided-prerequisites>dl { margin:0; padding:0 18px 14px; }
.lesson-workspace .guided-prerequisites dl>div { padding:12px 0; }
.lesson-workspace .rating-row { margin-top:16px; padding:0; gap:12px; }
.lesson-workspace .rating-row .btn { padding:11px 16px; min-height:42px; }
.lesson-workspace .guided-stage-actions { min-height:0; padding-top:12px; margin-top:14px; font-size:.8125rem; }
.lesson-progress-panel { padding:18px; }
.lesson-settings { margin-bottom:16px; }
.lesson-progress-panel h2 { margin-bottom:16px; }
.lesson-progress-panel .small-note { margin-top:12px; }

/* Vocabulary follows the compact lesson-card rhythm; only the card travels. */
main[data-view="vocab"] { padding-top:24px; }
main[data-view="vocab"] .page-heading { margin-bottom:22px; }
.vocab-toolbar { margin-bottom:16px; }
.vocab-layout { gap:20px; }
.vocab-study { min-width:0; }
.vocab-study>.section-line { margin-bottom:10px; }
.vocab-stepper { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:10px 0; }
.vocab-stepper>span { color:var(--muted); font-size:.875rem; }
.vocab-stepper .btn { min-height:40px; padding:9px 14px; }
.vocab-study .vocab-card { min-height:0; padding:20px; border-radius:18px; transform:translate3d(0,0,0); backface-visibility:hidden; }
.vocab-card>.section-line { margin-bottom:12px; }
.vocab-card .vocab-term { margin:12px 0 16px; }
.vocab-card .vocab-term h2 { font-size:1.5rem; line-height:1.35; }
.vocab-card .vocab-meaning,.vocab-card .vocab-example { padding:14px 18px; border-radius:12px; }
.vocab-card .vocab-example { margin-top:12px; background:#f3f6ef; }
.vocab-card .vocab-example .eyebrow { color:var(--green); }
.vocab-card .vocab-meaning p,.vocab-card .vocab-example p { font-size:1rem; line-height:1.65; }
.vocab-card .vocab-memory { margin-top:14px; padding-top:12px; }
.vocab-study>.rating-row { margin-top:14px; gap:12px; padding:0; }
.vocab-study>.rating-row .btn { min-height:42px; padding:11px 16px; }
.vocab-aside .side-panel { padding:20px; margin-bottom:14px; }
.vocab-aside .learning-steps { margin:12px 0; }
.vocab-aside .learning-steps li { margin:12px 0; }
@media(max-width:680px) {
 .vocab-study .vocab-card { padding:16px; }
 .vocab-stepper .btn { padding:9px 11px; }
 .vocab-card .vocab-meaning,.vocab-card .vocab-example { padding:12px 14px; }
}