/* Classroom redesign: quiet reading canvas, pinned lesson rail, tool dock.
   Warm diagram paper is dictated by the provided whatis skill. */
:root { --class-ink:#23352f; --class-muted:#65716b; --class-accent:#3d6959; --class-paper:#faf7ef; --class-border:#d8dfd9; --dock-width:420px; --header-height:150px; }
html { scroll-padding-top:calc(var(--header-height) + 22px); }
body { margin:0; min-width:0; background:#edf0ec; color:var(--class-ink); font:18px/1.75 "PingFang SC","Microsoft YaHei",sans-serif; }
body .app-shell { display:block; max-width:none; margin:0; }
body .rail { display:none; }
body .main-content { width:100%; max-width:none; min-width:0; margin:0; padding:0; }
button, input, textarea, select { font:inherit; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline:3px solid var(--class-accent); outline-offset:4px; }
.lesson-sticky.topbar { position:sticky; top:0; z-index:40; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 24px; margin:0; padding:14px 28px 12px; border:0; border-bottom:1px solid var(--class-border); background:#fafcf9; box-shadow:0 4px 15px #23352f09; }
.lesson-sticky .eyebrow { display:none; }
.lesson-sticky .breadcrumb { margin:0; color:var(--class-muted); font-size:13px; line-height:1.5; }
.lesson-sticky h1 { margin:2px 0 0; font:700 27px/1.4 "Songti SC","STSong",serif; color:var(--class-ink); letter-spacing:.02em; }
.lesson-sticky .top-actions { align-self:start; display:flex; flex-wrap:wrap; gap:8px; margin:5px 0 0; }
body .ghost-btn, body .secondary-btn { border:1px solid #b9cbc0; border-radius:7px; color:var(--class-accent); background:#fff; padding:8px 12px; font-size:15px; line-height:1.4; }
body .primary-btn { background:var(--class-accent); color:#fff; border:1px solid var(--class-accent); border-radius:7px; padding:10px 15px; font-size:16px; line-height:1.4; }
body .icon-btn { color:var(--class-accent); background:#fff; border:1px solid #b9cbc0; border-radius:7px; width:38px; height:38px; }
.lesson-sticky .progress-strip { grid-column:1/-1; border:0; border-radius:0; margin:0; padding:0; background:transparent; box-shadow:none; }
.lesson-sticky .progress-head { margin:0 0 5px; display:flex; justify-content:space-between; }
.lesson-sticky .progress-head > div { display:none; }
.lesson-sticky .progress-score { color:var(--class-muted); font-size:12px; font-weight:500; margin-left:auto; }
.lesson-sticky .progress-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.lesson-sticky .track-line { display:none; }
.lesson-sticky .progress-node { display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; min-width:0; padding:8px 12px; border:1px solid var(--class-border); border-radius:6px; background:#f2f5f0; color:var(--class-muted); text-align:left; }
.lesson-sticky .progress-node span { display:grid; place-items:center; width:24px; height:24px; min-width:24px; margin:0; padding:0; border:1px solid #ccd5cd; border-radius:50%; background:transparent; color:inherit; font:13px ui-monospace,monospace; }
.lesson-sticky .progress-node b { color:inherit; font-size:15px; line-height:1.4; font-weight:600; }
.lesson-sticky .progress-node small { display:none; }
.lesson-sticky .progress-node.current { color:var(--class-accent); border-color:var(--class-accent); box-shadow:inset 0 -3px var(--class-accent); background:#e8efe8; }
.lesson-sticky .progress-node.done span { background:var(--class-accent); color:#fff; border-color:var(--class-accent); }
body .workspace-grid { display:block; padding:28px; margin:0 calc(var(--dock-width) + 22px) 0 0; }
body .lesson-column { width:100%; min-width:0; }
.lesson-column > .module-heading { margin:0 0 18px; }
body .module-heading h2 { color:var(--class-ink); font:700 27px/1.5 "Songti SC","STSong",serif; margin:7px 0; }
body .module-heading .source-tag { display:none; }
body .section-kicker { color:var(--class-accent); font-size:13px; letter-spacing:.07em; }
body .concept-card, body .learning-module, body .note-card { margin:0 0 26px; padding:30px; border:1px solid var(--class-border); border-radius:12px; background:var(--class-paper); box-shadow:none; scroll-margin-top:20px; }
.learning-module .module-heading { border-left-color:var(--class-accent); }
body .concept-card h3 { font:700 25px/1.5 "Songti SC","STSong",serif; color:var(--class-ink); }
body .card-copy, .module-goal { color:var(--class-ink); font-size:18px; line-height:1.85; }
.module-goal { max-width:42em; }
.evidence-caption { color:var(--class-muted); font-size:13px; line-height:1.8; margin:12px 0 20px; }
.whatis-figure { margin:24px 0; padding:0; width:100%; }
.whatis-figure svg { display:block; width:100%; height:auto; overflow:visible; }
.whatis-figure figcaption { color:var(--class-accent); font-size:18px; text-align:center; margin-top:12px; }
body .code-snippet, .lesson-code { background:#eff2eb; color:var(--class-ink); border:1px solid var(--class-border); border-radius:7px; padding:18px; overflow:auto; font:16px/1.8 ui-monospace,"SFMono-Regular",Consolas,monospace; }
.syntax-var,.syntax-string,.syntax-number,.syntax-comment { color:var(--class-ink); }
body .concept-tags { margin:16px 0; }
body .concept-tags span { background:#e8eee4; color:var(--class-accent); border-color:#d2dfd3; font-size:13px; }
body .self-check, .quick-check { border-top:1px solid var(--class-border); margin-top:25px; padding-top:20px; }
.quick-check h3 { font-size:20px; margin:8px 0 12px; font-weight:600; }
.quick-source { font-size:12px; color:var(--class-muted); line-height:1.7; }
body .choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
body .choice { min-width:0; padding:13px 16px; text-align:left; background:#fff; color:var(--class-ink); border:1px solid #c7d2c8; border-radius:7px; font-size:17px; overflow-wrap:anywhere; }
body .choice.correct { border:2px solid var(--class-accent); background:#e9f1e8; }
body .choice.wrong { border:2px dashed #856c4f; background:#f1eadd; }
body .feedback-box { display:block; padding:15px; margin:12px 0 0; border:1px solid #ccd8cd; border-radius:6px; color:var(--class-ink); background:#eef2e9; font-size:16px; line-height:1.8; }
.quick-check[data-status="error"] .feedback-box { border-style:dashed; }
.slice-playground { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.slice-cell { display:grid; place-items:center; min-width:66px; border:1px solid #a9bdb0; border-radius:6px; color:var(--class-ink); background:white; padding:8px 17px; font:22px/1.5 ui-monospace,monospace; }
.slice-cell small { font:12px/1.5 ui-monospace,monospace; color:var(--class-muted); }
.slice-cell[aria-pressed="true"] { background:var(--class-accent); color:#fff; border-color:var(--class-accent); }
.slice-cell[aria-pressed="true"] small { color:#e0eae3; }
#sliceFeedback, .module-evidence { font-size:16px; color:var(--class-accent); }
body .note-layout { display:block; }
body .note-layout textarea { width:100%; box-sizing:border-box; min-height:160px; margin:15px 0; font-size:18px; background:white; color:var(--class-ink); border-color:#bdcdbf; }
body .note-prompt strong { color:var(--class-ink); font-size:20px; }
body .note-prompt small { color:var(--class-muted); font-size:14px; }
body .page-footer { margin:0 calc(var(--dock-width) + 22px) 0 0; padding:10px 28px 30px; font-size:12px; color:var(--class-muted); display:flex; flex-wrap:wrap; gap:12px; }
/* Dock: always available; reading scroll and tool scroll are independent. */
body .assistant-column { position:fixed; top:calc(var(--header-height) + 18px); bottom:18px; right:22px; width:var(--dock-width); display:flex; flex-direction:column; gap:14px; min-width:0; z-index:20; }
body .catalog-card, body .insight-card { display:none; }
body .assistant-card { flex:0 0 auto; border:1px solid #c8d5cb; border-radius:10px; background:#fff; padding:17px; margin:0; box-shadow:none; overflow:hidden; }
.assistant-card .assistant-header { margin:0; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.assistant-card .assistant-header h2 { font-size:21px; color:var(--class-ink); margin:0; }
.assistant-card .assistant-header .section-kicker { display:none; }
.assistant-card .ai-status { display:block; color:var(--class-muted); font-size:12px; margin:5px 0 0; }
#aiPanelBody { margin-top:10px; }
.assistant-card .assistant-intro { color:var(--class-muted); font-size:13px; line-height:1.6; margin:0 0 8px; }
.assistant-card .suggestion-list { display:none; }
.assistant-card .suggestion-list button { flex-shrink:0; border:1px solid #c8d5cb; background:#f4f7f1; color:var(--class-accent); font-size:12px; padding:5px 8px; white-space:nowrap; }
.assistant-card .chat-log { height:78px; min-height:0; max-height:160px; overflow-y:auto; margin:10px 0; padding-right:5px; }
.assistant-card .chat-message { font-size:14px; padding:9px 11px; margin:7px 0; }
.assistant-card .chat-message.ai { background:#eff4ed; color:var(--class-ink); }
.assistant-card .chat-message.user { background:#e6eee8; color:var(--class-ink); }
.assistant-card .chat-message p { font-size:14px; line-height:1.6; }
.assistant-card .chat-form { display:flex; gap:5px; }
.assistant-card .chat-form input { min-width:0; width:100%; background:#fff; color:var(--class-ink); font-size:15px; border:1px solid #c8d5cb; padding:9px; }
.assistant-card .chat-form button { background:var(--class-accent); color:white; }
.assistant-card .guardrail-note { display:none; }
body .task-card { flex:1 1 auto; display:flex; flex-direction:column; min-height:90px; margin:0; border:1px solid #c8d5cb; border-radius:10px; background:#10243a; padding:0; overflow:hidden; }
.task-card > .card-topline { display:none; }
.python-panel-title { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; padding:12px 14px; gap:10px; background:#f7faf5; border-bottom:1px solid #c8d5cb; }
.python-panel-title h2 { color:var(--class-ink); margin:0; font-size:21px; }
.python-panel-title > div { display:flex; gap:6px; }
#pythonPanelBody { flex:1; min-height:0; overflow:auto; padding:14px; }
.task-card .task-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:12px; margin:0; }
.task-card .task-layout > div { min-width:0; }
.task-card .task-layout h3, .task-card .task-layout > div:first-child > p:first-of-type { display:none; }
.task-card .lab-libraries { font-size:10px; gap:3px; margin:0 0 8px; flex-wrap:wrap; }
.task-card .lab-libraries code { font-size:10px; padding:3px; }
.task-card .runtime-status { font-size:11px; line-height:1.5; margin:4px 0 9px; color:#bdcddd; }
.task-card .lab-toolbar { padding:7px; gap:7px; margin:0; }
.task-card .lab-file { font-size:12px; width:100%; }
.task-card .lab-setup { margin-bottom:12px; }
.task-card .lab-setup .lab-libraries { font-size:12px; }
.task-card .lab-setup .lab-libraries code { font-size:12px; }
.task-card .lab-setup .runtime-status { font-size:12px; }
.task-card .lab-setup .lab-toolbar { padding:8px; gap:6px; }
.task-card .lab-setup .lab-file { width:auto; flex:1 0 auto; }
.task-card .lab-setup .lab-file-actions { flex:0 0 auto; }
.task-card .lab-setup .lab-tool-btn { font-size:12px; padding:6px; }
.task-card .lab-setup .lab-example-select { flex:1; width:calc(100% - 85px); min-width:130px; font-size:13px; }
.task-card .lab-setup .lab-example-btn { font-size:13px; padding:7px; }
.task-card .lab-setup #preflightBtn { flex-basis:100%; width:100%; margin:0; padding:5px; font-size:12px; }
.task-card .lab-file-actions { gap:3px; }
.task-card .lab-tool-btn { font-size:11px; padding:5px; }
.task-card .lab-example-select { width:100%; max-width:none; margin:0; font-size:12px; }
.task-card .lab-example-btn { margin:0; font-size:12px; padding:6px; }
.task-card .CodeMirror { height:260px; width:100%; min-width:0; font-size:16px; line-height:1.7; }
.task-card .CodeMirror-scroll { overflow:auto !important; min-height:0; }
.task-card .lab-input-grid { grid-template-columns:1fr; gap:9px; margin-top:12px; }
.task-card .lab-field-label { font-size:12px; }
.task-card .lab-field-label span { display:block; font-size:10px; }
.task-card .lab-test-input { height:65px; min-height:65px; font-size:13px; }
.task-card .lab-test-result { font-size:12px; }
.task-card .run-panel { padding:0; border:0; background:transparent; min-width:0; }
.task-card .run-panel button { width:100%; margin:0 0 7px; padding:8px 5px; font-size:13px; }
.task-card .run-label { font-size:12px; margin-bottom:9px; }
.task-card .step-note { font-size:11px; line-height:1.6; margin:9px 0; }
.task-card .output-box { min-width:0; min-height:140px; max-height:260px; overflow:auto; padding:10px; font-size:13px; }
.task-card .output-box code { white-space:pre; font:14px/1.8 ui-monospace,monospace; }
.task-card .trace-box { max-height:270px; overflow:auto; margin-top:10px; padding:10px; }
.task-card .trace-row { font-size:12px; }
.task-card .python-artifacts { margin-top:12px; min-width:0; }
.task-card .python-artifacts img { max-width:100%; }
.task-card .python-shell { margin-top:15px; }
.task-card .shell-heading { flex-wrap:wrap; gap:5px; padding:8px; }
.task-card .shell-heading span { display:none; }
.task-card .shell-compose { display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px; padding:8px; }
.task-card .shell-compose .primary-btn { grid-column:2; padding:6px; font-size:12px; }
.task-card .shell-log { min-height:70px; max-height:160px; font-size:13px; padding:8px; }
.task-card .linked-viz-heading { flex-direction:column; align-items:start; }
.task-card.python-collapsed { flex:0 0 auto; min-height:0; }
.task-card.python-expanded { position:fixed; top:calc(var(--header-height) + 18px); bottom:18px; right:22px; width:min(1100px, calc(100vw - 44px)); z-index:60; box-shadow:0 15px 80px #152f3655; }
.task-card.python-expanded .CodeMirror { height:360px; font-size:18px; }
.task-card.python-expanded .lab-input-grid { grid-template-columns:1fr 1fr; }
.task-card.python-expanded .run-panel .output-box { min-height:250px; max-height:400px; }
.task-card.python-expanded .task-layout { gap:24px; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.task-card.python-expanded .shell-compose { grid-template-columns:auto minmax(0,1fr) auto; }
.task-card.python-expanded .shell-compose .primary-btn { grid-column:auto; }
/* Directory popover uses native details for real, keyboard-operable levels. */
#courseIndexDrawer.modal-backdrop { display:block; position:fixed; inset:auto 22px auto auto; top:calc(var(--header-height) + 10px); width:min(530px,calc(100vw - 44px)); height:auto; background:none; z-index:100; padding:0; }
#courseIndexDrawer.hidden, .hidden { display:none !important; }
#courseIndexDrawer .course-index-drawer { width:100%; max-width:none; max-height:calc(100dvh - var(--header-height) - 30px); margin:0; padding:22px; overflow-y:auto; border:1px solid #c5d3c8; border-radius:10px; background:#fff; box-shadow:0 10px 45px #23352f22; box-sizing:border-box; }
#courseIndexDrawer h2 { font-size:23px; color:var(--class-ink); margin:6px 0 10px; }
#courseIndexDrawer .section-kicker { font-size:12px; }
#courseIndexDrawer .drawer-intro { font-size:13px; line-height:1.7; margin:0 0 16px; }
#courseIndexDrawer .drawer-tree { margin:0; padding:0; border:0; }
#courseIndexDrawer .catalog-scroll { max-height:none; overflow:visible; }
#courseIndexDrawer .catalog-title-row { display:none; }
.book-tree, .chapter-tree, .vault-folder { margin:7px 0; }
.book-tree > summary, .chapter-tree > summary, .vault-folder > summary { color:var(--class-ink); font-size:16px; padding:9px 3px; cursor:pointer; background:#f6f8f3; border-radius:4px; }
.book-tree > summary small, .vault-folder > summary small { float:right; font-size:11px; color:var(--class-muted); margin:4px 8px 0; }
.chapter-tree { padding-left:18px; }
#courseIndexDrawer .catalog-row { width:100%; display:grid; grid-template-columns:40px minmax(0,1fr) 44px; gap:7px; padding:9px 6px; margin:2px 0; font-size:13px; border-radius:5px; color:var(--class-ink); }
#courseIndexDrawer .catalog-row strong { color:inherit; font-size:13px; line-height:1.6; font-weight:500; }
#courseIndexDrawer .catalog-row span { color:inherit; font-size:13px; }
#courseIndexDrawer .catalog-row.current { background:#e6eee3; border-color:var(--class-accent); }
#courseIndexDrawer .catalog-row.locked { color:#7f8b81; opacity:.8; }
.directory-tabs { display:flex; gap:8px; margin:12px 0; }
.directory-tabs button[aria-selected="true"] { background:var(--class-accent); color:#fff; }
#vaultTree { font-size:13px; }
.vault-children { margin-left:16px; border-left:1px solid #dce3d9; padding-left:10px; }
.vault-item { display:flex; justify-content:space-between; gap:8px; padding:7px 4px; color:var(--class-muted); font-size:12px; border-bottom:1px solid #eef1eb; overflow-wrap:anywhere; }
.vault-item small { flex-shrink:0; color:var(--class-muted); }
.vault-folder > summary { font-size:14px; }
.catalog-note { font-size:13px; color:var(--class-muted); line-height:1.7; }
#teacherModal .class-stats { grid-template-columns:repeat(3,1fr); }
@media (min-width:1700px) { :root { --dock-width:510px; }.workspace-grid { padding:35px 45px; }.learning-module { padding:40px; } }
@media (max-width:1250px) { :root { --dock-width:405px; }body .workspace-grid { padding:22px; }.learning-module,body .concept-card { padding:24px; }.task-card .task-layout { gap:9px; } }
@media (max-width:1000px) { :root { --dock-width:345px; }.task-card .task-layout { grid-template-columns:1fr; }.task-card .CodeMirror { height:240px; }.task-card.python-expanded .task-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.lesson-sticky h1 { font-size:24px; }.lesson-sticky .progress-node { gap:5px; padding:7px; }.lesson-sticky .progress-node b { font-size:13px; }.choice-grid { grid-template-columns:1fr; } }
@media (max-width:780px) { body .workspace-grid { margin:0; padding:18px; }body .assistant-column { position:static; width:auto; margin:0 18px 20px; max-height:none; }body .page-footer { margin:0; }.lesson-sticky.topbar { padding:10px 14px; gap:8px; }.lesson-sticky .top-actions { gap:4px; }.lesson-sticky h1 { font-size:21px; }.lesson-sticky .top-actions #teacherViewBtn, .lesson-sticky .top-actions #resetBtn { display:none; }.lesson-sticky .progress-node { justify-content:center; flex-direction:column; gap:4px; padding:7px 3px; }.lesson-sticky .progress-node span { width:21px; height:21px; min-width:21px; }.lesson-sticky .progress-node b { font-size:11px; }body .learning-module, body .concept-card { padding:18px; }body .module-heading h2 { font-size:24px; }.task-card .task-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }#pythonPanelBody { max-height:650px; }.task-card.python-expanded { right:12px; width:calc(100vw - 24px); }.task-card.python-expanded .task-layout { grid-template-columns:1fr; }.task-card.python-expanded .lab-input-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }