/* Coding Classroom v0.8.6 — Round 6: lesson color + workspace UI polish */

/* Coding Lab: compact IDE-style mode switcher */
#view-lab .program-panel{padding-top:14px}
#view-lab .editor-toolbar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px;margin-bottom:8px}
#view-lab .editor-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;width:100%;min-width:0;margin:0;padding:3px;border:1px solid #d6e2ef;border-radius:9px;background:#edf3f9;flex:none}
#view-lab .editor-modes button{min-width:0;min-height:36px;padding:6px 9px;border-radius:6px;white-space:nowrap;font-size:.82rem;font-weight:700}
#view-lab .editor-modes button[aria-pressed=true]{background:#fff;color:#155db7;box-shadow:0 1px 4px rgba(28,72,122,.12),inset 0 0 0 1px rgba(75,125,190,.08)}
#view-lab .lab-save-state{justify-self:end;max-width:190px;min-height:30px;padding:4px 9px;font-size:.71rem;white-space:nowrap}
#view-lab #blocksEditor>.panel-title-row{margin-top:3px}
#view-lab .panel-title-row{margin-bottom:5px}
#view-lab .insert-target-bar{margin-top:8px}
#view-lab .paired-mode #codePreview{border-color:#cbdced;background:#f7faff}
#view-lab .paired-mode #codePreview summary{padding:9px 10px;min-height:40px}
#view-lab .paired-mode #codePreview .code-explanation{padding:8px 10px;line-height:1.6}
#view-lab .paired-mode #codePreview pre{max-height:360px;overflow:auto;padding:11px 12px!important;font-size:.82rem;line-height:1.7}

/* Lesson page: restrained coding color language */
#view-lessons{--lesson-blue:#2f7fd5;--lesson-blue-soft:#eaf4ff;--lesson-purple:#7862c8;--lesson-purple-soft:#f0edff;--lesson-orange:#c66b27;--lesson-orange-soft:#fff1e5;--lesson-pink:#b6417d;--lesson-pink-soft:#fdebf4;--lesson-teal:#148875;--lesson-teal-soft:#e8f8f4;--lesson-indigo:#5b5fc7;--lesson-indigo-soft:#eeefff}

/* Track cards */
#view-lessons .track-tab{position:relative;overflow:hidden;border-width:1px;background:#fff;box-shadow:0 4px 14px rgba(26,65,107,.035)}
#view-lessons .track-tab::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--track-accent,#4a86c9)}
#view-lessons .track-tab .age-icon{background:var(--track-soft,#edf4ff);color:var(--track-accent,#3574bd);border:1px solid color-mix(in srgb,var(--track-accent,#3574bd) 18%,transparent)}
#view-lessons .track-tab.gold{--track-accent:#c99515;--track-soft:#fff5d9}
#view-lessons .track-tab.green{--track-accent:#239673;--track-soft:#e7f8f1}
#view-lessons .track-tab.coral{--track-accent:#d06a42;--track-soft:#fff0e9}
#view-lessons .track-tab.blue{--track-accent:#2f7fd5;--track-soft:#eaf4ff}
#view-lessons .track-tab.purple{--track-accent:#755fc8;--track-soft:#f0edff}
#view-lessons .track-tab:hover{border-color:color-mix(in srgb,var(--track-accent) 55%,#d5e1ec);box-shadow:0 8px 20px rgba(31,67,111,.07)}
#view-lessons .track-tab.selected{background:linear-gradient(180deg,#fff,var(--track-soft));border-color:color-mix(in srgb,var(--track-accent) 58%,#bfcfe0);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--track-accent) 10%,transparent),0 7px 20px rgba(31,67,111,.055)}

/* Course summary bar */
#view-lessons .map-summary{position:relative;overflow:hidden;background:linear-gradient(90deg,#f8fbff,#fff);border-color:#cfdeed;box-shadow:0 6px 18px rgba(27,69,113,.045)}
#view-lessons .map-summary::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--summary-accent,#2f7fd5)}
#view-lessons .map-summary.gold{--summary-accent:#c99515}
#view-lessons .map-summary.green{--summary-accent:#239673}
#view-lessons .map-summary.coral{--summary-accent:#d06a42}
#view-lessons .map-summary.blue{--summary-accent:#2f7fd5}
#view-lessons .map-summary.purple{--summary-accent:#755fc8}
#view-lessons .map-summary .path-label{border:1px solid color-mix(in srgb,var(--summary-accent) 22%,transparent);background:color-mix(in srgb,var(--summary-accent) 11%,white);color:color-mix(in srgb,var(--summary-accent) 88%,#17385d)}
#view-lessons .map-summary .stars{color:#b97800;font-weight:750}
#view-lessons .map-summary .meter{background:#e7edf5}
#view-lessons .map-summary .meter>span{background:linear-gradient(90deg,var(--summary-accent),#6cc6ed)}

/* Chapter sections */
#view-lessons .world-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,var(--chapter-soft,#f4f8fd) 100%);border-color:color-mix(in srgb,var(--chapter-accent,#4f83c2) 20%,#dbe5ee)}
#view-lessons .world-section::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--chapter-accent,#4f83c2)}
#view-lessons .world-heading{position:relative;padding:2px 0 4px}
#view-lessons .world-number{background:var(--chapter-soft,#edf4fb);color:var(--chapter-accent,#3d6fae);border:1px solid color-mix(in srgb,var(--chapter-accent,#3d6fae) 16%,transparent);font-weight:750}
#view-lessons .chapter-tone-sequence{--chapter-accent:var(--lesson-blue);--chapter-soft:var(--lesson-blue-soft)}
#view-lessons .chapter-tone-trace{--chapter-accent:var(--lesson-purple);--chapter-soft:var(--lesson-purple-soft)}
#view-lessons .chapter-tone-debug{--chapter-accent:var(--lesson-orange);--chapter-soft:var(--lesson-orange-soft)}
#view-lessons .chapter-tone-apply{--chapter-accent:#d28a21;--chapter-soft:#fff5df}
#view-lessons .chapter-tone-loop{--chapter-accent:var(--lesson-pink);--chapter-soft:var(--lesson-pink-soft)}
#view-lessons .chapter-tone-condition{--chapter-accent:var(--lesson-teal);--chapter-soft:var(--lesson-teal-soft)}
#view-lessons .chapter-tone-python{--chapter-accent:var(--lesson-indigo);--chapter-soft:var(--lesson-indigo-soft)}

/* Lesson cards */
#view-lessons .lesson-node{--lesson-accent:var(--lesson-blue);--lesson-soft:var(--lesson-blue-soft);overflow:hidden;border-color:color-mix(in srgb,var(--lesson-accent) 22%,#d1dfed);background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--lesson-soft) 58%,white) 100%);box-shadow:0 5px 15px rgba(30,68,110,.035)}
#view-lessons .lesson-node::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--lesson-accent)}
#view-lessons .lesson-tone-sequence{--lesson-accent:var(--lesson-blue);--lesson-soft:var(--lesson-blue-soft)}
#view-lessons .lesson-tone-trace{--lesson-accent:var(--lesson-purple);--lesson-soft:var(--lesson-purple-soft)}
#view-lessons .lesson-tone-debug{--lesson-accent:var(--lesson-orange);--lesson-soft:var(--lesson-orange-soft)}
#view-lessons .lesson-tone-apply{--lesson-accent:#d28a21;--lesson-soft:#fff5df}
#view-lessons .lesson-tone-loop{--lesson-accent:var(--lesson-pink);--lesson-soft:var(--lesson-pink-soft)}
#view-lessons .lesson-tone-condition{--lesson-accent:var(--lesson-teal);--lesson-soft:var(--lesson-teal-soft)}
#view-lessons .lesson-tone-python{--lesson-accent:var(--lesson-indigo);--lesson-soft:var(--lesson-indigo-soft)}
#view-lessons .lesson-node .node-index{background:var(--lesson-soft);color:var(--lesson-accent);border:1px solid color-mix(in srgb,var(--lesson-accent) 15%,transparent)}
#view-lessons .lesson-node .node-concept{display:inline-flex;align-self:flex-start;width:max-content;max-width:100%;padding:3px 8px;border-radius:999px;background:var(--lesson-soft);color:color-mix(in srgb,var(--lesson-accent) 88%,#243e5d);font-weight:700;letter-spacing:.01em}
#view-lessons .lesson-node .node-bottom small{color:color-mix(in srgb,var(--lesson-accent) 70%,#65778b);font-weight:650}
#view-lessons .lesson-node.available:hover,#view-lessons .lesson-node.completed:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--lesson-accent) 60%,#c9d7e5);box-shadow:0 11px 24px rgba(31,67,111,.075)}
#view-lessons .lesson-node.completed .node-state{background:#e4f7ef;color:#20785b;border:1px solid #c7eadc}
#view-lessons .lesson-node.completed .node-index{background:#ddf6eb;color:#138067;border-color:#c4eadb}
#view-lessons .lesson-node.locked{opacity:1;filter:saturate(.45);background:#f5f7fa;border-color:#dde3ea;color:#637287}
#view-lessons .lesson-node.locked::before{background:#aeb9c6}
#view-lessons .lesson-node.locked .node-concept{background:#edf0f4;color:#718091}
#view-lessons .lesson-node.locked .node-index,#view-lessons .lesson-node.locked .node-state{background:#e9edf2;color:#69788a;border-color:#dde3ea}
#view-lessons .lesson-node .stars{color:#b97800;font-weight:700}

/* Responsive */
@media (min-width:1025px) and (max-width:1280px){#view-lab .editor-toolbar-row{grid-template-columns:minmax(0,1fr)}#view-lab .lab-save-state{justify-self:start;max-width:none}}
@media (max-width:1024px){#view-lab .editor-toolbar-row{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:700px){#view-lab .program-panel{padding-top:12px}#view-lab .editor-toolbar-row{grid-template-columns:1fr;gap:6px}#view-lab .lab-save-state{justify-self:start;width:auto;max-width:100%;white-space:normal}#view-lab .editor-modes button{min-height:38px;font-size:.8rem}#view-lessons .world-section::before{width:4px}#view-lessons .lesson-node::before{height:3px}}
@media (max-width:430px){#view-lessons .lesson-path{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#view-lessons .lesson-node,#view-lessons .track-tab{transition:none!important}#view-lessons .lesson-node:hover,#view-lessons .track-tab:hover{transform:none!important}}
