/* One shared surface for scope, mode and navigation across study pages. */
/* Keep quiz continuation reachable while reading long answer explanations. */
main[data-view="practice"] .quiz-shell { overflow:visible; }
main[data-view="practice"] .quiz-bottom {
 position:sticky; bottom:12px; z-index:5; background:var(--surface);
 border:1px solid var(--line); border-radius:12px; padding:12px 16px;
 margin-top:20px; box-shadow:0 4px 20px #0002; gap:12px;
}
@media(max-width:680px) {
 main[data-view="practice"] .quiz-bottom { bottom:max(8px,env(safe-area-inset-bottom)); padding:10px 12px; }
 main[data-view="practice"] .quiz-bottom .btn { flex-shrink:0; }
}
main[data-view="vocab"] .study-context-bar :is(.btn,.segment) {
 box-sizing:border-box; min-height:44px; height:44px; font-weight:600;
 border:1px solid var(--line); margin:0; transform:none; box-shadow:none;
}
main[data-view="vocab"] .study-context-bar .segment { border-color:transparent; }
main[data-view="vocab"] .study-context-bar .btn[aria-pressed="true"] {
 background:var(--surface-soft); color:var(--green); border-color:var(--green);
 box-shadow:inset 0 0 0 1px var(--green);
}
main[data-view="vocab"] .study-context-bar .segment.selected { border-color:var(--line); }
main[data-view="vocab"] .rating-row .btn[aria-pressed="true"] { font-weight:600; }
.vocab-rating-status { margin:12px 0 0; color:var(--muted); text-align:center; font-size:.875rem; line-height:1.6; }
main[data-view="vocab"] .vocab-stepper.deck-navigation { justify-content:flex-start; background:transparent; border:0; padding:0; margin:0 0 10px; }
main[data-view="vocab"] .vocab-stepper .btn { box-shadow:none; padding:8px 12px; }
main[data-view="vocab"] .vocab-stepper .inline-controls { display:flex; align-items:center; gap:7px; }
main[data-view="vocab"] .vocab-stepper .deck-counter { color:var(--muted); }
main[data-view="vocab"] .card-track { width:100%; gap:2px; }
main[data-view="vocab"] .card-track .track { min-width:0; }
main[data-view="vocab"] .vocab-stepper,main[data-view="cards"] .deck-navigation { margin:0 0 12px; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
/* Inline lesson navigation preserves the full reading width. */
main[data-view="learn"] .learning-layout,
main[data-view="learn"] .learning-layout[data-lesson-nav="collapsed"] {
 position:relative; display:block; transition:none;
}
main[data-view="learn"] .lesson-content { grid-column:auto; width:100%; }
main[data-view="learn"] .lesson-nav:not([hidden]) {
 position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
 width:100%; max-height:none; overflow:visible; gap:6px 16px;
 margin:0 0 28px; padding:0 0 20px; background:transparent;
 border:0; border-bottom:1px solid var(--line);
 border-radius:0; box-shadow:none; animation:none;
}
main[data-view="learn"] .lesson-nav-title { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; border:0; padding:0; margin:0 0 8px; }
main[data-view="learn"] .lesson-nav-title > span { margin:0; }
main[data-view="learn"] .lesson-nav > .small-note { display:none; }
main[data-view="learn"] .lesson-link { margin:0; border:0; border-radius:0; padding:10px; gap:10px; font-size:14px; line-height:1.45; }
main[data-view="learn"] .lesson-link.selected { background:var(--surface-soft); box-shadow:inset 3px 0 var(--green); }
main[data-view="learn"] .lesson-link small { display:block; font-size:12px; }
main[data-view="learn"] .lesson-content { background:transparent; }
@media(max-width:1100px) { main[data-view="learn"] .lesson-nav:not([hidden]) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px) { main[data-view="learn"] .lesson-nav:not([hidden]) { grid-template-columns:1fr; gap:2px; } }
main[data-view] .study-context-bar {
 display:flex; align-items:center; flex-wrap:wrap; gap:12px;
 padding:14px; margin:0 0 24px; background:var(--surface);
 border:1px solid var(--line); border-radius:16px;
}
main[data-view] .study-context-bar :is(.btn,.icon-button,.segment) { box-shadow:none; transform:none; }
main[data-view] .study-context-bar .btn { white-space:nowrap; }
main[data-view] .study-context-bar :is(select,input) { margin:0; min-height:44px; }
main[data-view] .study-context-bar label { min-width:0; }
main[data-view] .study-context-bar .vocab-search { flex:1 1 280px; }
main[data-view] .study-context-bar :is(.vocab-stepper,.deck-navigation,.vocab-deck-navigation,.concept-stepper,.context-pagination) {
 display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap;
 gap:10px; width:auto; margin:0 0 0 auto; min-height:44px; padding:0;
}
main[data-view] .study-context-bar :is(.inline-controls,.context-pagination) { gap:10px; }
main[data-view] .study-context-bar .deck-counter { min-width:3.5rem; }
main[data-view] .study-context-bar .segmented { margin:0; padding:3px; }
main[data-view] .study-context-bar .save-star { min-width:0; }
main[data-view] .study-context-bar .guided-select-label { margin:0; padding:0; border:0; background:transparent; box-shadow:none; flex:1; }
main[data-view] .study-context-bar .filter-select { max-width:100%; }
/* Explicit tracks keep related controls together instead of orphaning navigation. */
main[data-view="vocab"] .study-context-bar {
 display:grid; grid-template-columns:minmax(150px,220px) minmax(145px,180px) auto auto auto;
 gap:8px; padding:10px;
}
main[data-view="vocab"] .study-context-bar .vocab-search { min-width:0; }
main[data-view="vocab"] .study-context-bar .vocab-search input { width:100%; }
main[data-view="vocab"] .study-context-bar .segmented { grid-column:auto; justify-self:end; }
main[data-view="vocab"] .study-context-bar :is(.btn,.segment) { padding:8px 10px; white-space:nowrap; }
@media(min-width:681px) and (max-width:1250px) {
 main[data-view="vocab"] .study-context-bar { grid-template-columns:minmax(150px,220px) minmax(145px,180px) auto auto; }
 main[data-view="vocab"] .study-context-bar .segmented { grid-column:1 / -1; justify-self:start; }
}
main[data-view="vocab"] .study-context-bar .vocab-stepper { grid-column:3 / 5; flex-wrap:nowrap; }
main[data-view="cards"] .study-context-bar {
 display:grid; grid-template-columns:minmax(140px,180px) minmax(100px,125px) auto minmax(0,1fr);
 gap:10px; padding:12px;
}
main[data-view="cards"] .study-context-bar select { width:100%; }
main[data-view="cards"] .study-context-bar .deck-navigation { flex-wrap:nowrap; }
main[data-view="cards"] .study-context-bar .deck-navigation { background:transparent; border:0; border-radius:0; padding:0; margin:0 0 0 auto; }
main[data-view="cards"] .study-context-bar .inline-controls { flex-wrap:nowrap; }
main[data-view="cards"] .study-context-bar .btn { padding-inline:12px; }
@media(max-width:1200px) and (min-width:681px) {
 main[data-view="cards"] .study-context-bar { grid-template-columns:minmax(140px,1fr) minmax(120px,1fr) auto; }
 main[data-view="cards"] .study-context-bar .deck-navigation { grid-column:1 / -1; width:100%; justify-content:space-between; }
}
@media(max-width:680px) {
 main[data-view] .study-context-bar { gap:10px; padding:12px; }
 main[data-view] .study-context-bar .vocab-search { flex-basis:100%; }
 main[data-view] .study-context-bar :is(.vocab-stepper,.deck-navigation,.vocab-deck-navigation,.concept-stepper,.context-pagination) { width:100%; justify-content:space-between; }
 main[data-view] .study-context-bar .btn { padding:10px 12px; }
 main[data-view] .study-context-bar .inline-controls { display:flex; flex-wrap:wrap; }
 main[data-view="vocab"] .study-context-bar,main[data-view="cards"] .study-context-bar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 main[data-view="vocab"] .study-context-bar .vocab-search { grid-column:1 / -1; }
 main[data-view="vocab"] .study-context-bar > label:nth-child(2) { grid-column:1 / -1; }
 main[data-view="vocab"] .study-context-bar .segmented { grid-column:1 / -1; width:100%; justify-self:stretch; }
 main[data-view="vocab"] .study-context-bar .vocab-stepper { grid-column:1 / -1; }
 main[data-view="cards"] .study-context-bar > [data-action="shuffle"] { grid-column:1 / -1; justify-self:start; }
 main[data-view="cards"] .study-context-bar .deck-navigation { grid-column:1 / -1; flex-wrap:wrap; }
 main[data-view="cards"] .study-context-bar .inline-controls { width:100%; justify-content:space-between; }
}