/* CSC WORKSHOP SITE — additions layered on top of the shared website/css/style.css. */

/* STATUS BADGES */
.status-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:4px 12px;border-radius:var(--radius-pill);}
.status-ready{background:rgba(10,145,147,0.12);color:var(--slcce-teal);}
.status-progress{background:rgba(253,182,32,0.18);color:#8A5D0A;}
.status-tier3{background:var(--slcce-ink-10);color:var(--text-muted);}

/* WORKSHOP BLOCK */
.workshop-block{padding:40px 0;border-bottom:1px solid var(--border-subtle);}
.workshop-block:last-child{border-bottom:none;}
.workshop-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.workshop-head h2{font-size:22px;font-weight:700;color:var(--slcce-navy);margin:0;}
.workshop-meta{font-size:13px;color:var(--text-muted);margin:0 0 16px;}
.workshop-desc{font-size:15px;line-height:1.65;color:var(--text-secondary);margin:0 0 22px;max-width:640px;}

/* NOTEBOOK LIST */
.notebook-list{display:flex;flex-direction:column;gap:0;}
.notebook-item{display:flex;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid var(--border-subtle);}
.notebook-item:last-child{border-bottom:none;}
.notebook-item .nb-num{font-size:12px;font-weight:700;color:var(--text-muted);width:48px;flex-shrink:0;}
.notebook-item .nb-title{flex:1;font-size:14.5px;font-weight:600;color:var(--slcce-navy);min-width:0;}

/* ANSWER KEY NOTE */
.answer-key-note{margin-top:20px;padding-top:16px;border-top:1px dashed var(--border-strong);}
.answer-key-note .label{font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;}

/* FAQ */
.faq-item{padding:20px 0;border-bottom:1px solid var(--border-subtle);}
.faq-item:last-child{border-bottom:none;}
.faq-item h3{font-size:16px;font-weight:700;color:var(--slcce-navy);margin:0 0 8px;}
.faq-item p{font-size:14.5px;line-height:1.65;color:var(--text-secondary);margin:0;}

/* COMING SOON / TIER 3 PANEL */
.status-panel{background:var(--surface-card-alt);border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:22px 24px;font-size:14px;line-height:1.6;color:var(--text-secondary);}

/* INLINE CODE (Colab menu paths, keyboard shortcuts) */
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.9em;}
code:not(pre code){background:var(--slcce-ink-10);color:var(--slcce-navy);padding:2px 6px;border-radius:6px;}

/* FENCED CODE BLOCKS in rendered markdown (e.g. the ASCII art reference
   shapes in 5.3-Ascii-Art-Challenge). Own block-level treatment instead
   of inheriting the inline chip styling above: an inline <code> with a
   background that wraps across several lines paints a separate
   background segment per line instead of one clean rectangle, which is
   what was actually happening here. */
.reading-cell pre{background:var(--surface-card-alt);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px 16px;overflow-x:auto;margin:12px 0;color:var(--text-primary);}

/* EDUCATOR CALLOUT */
.educator-callout{background:var(--slcce-navy);color:rgba(255,255,255,0.92);border-radius:var(--radius-lg);padding:28px 30px;}
.educator-callout h2{color:#fff;font-size:20px;margin:0 0 10px;}
.educator-callout p{color:rgba(255,255,255,0.8);font-size:14.5px;line-height:1.7;margin:0 0 8px;}
.educator-callout p:last-child{margin-bottom:0;}
.educator-callout a{color:var(--slcce-yellow);font-weight:600;}

/* TIER 2 LESSON PAGE (Pyodide runner) */
.lesson-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 40px;max-width:900px;margin:0 auto;}
.lesson-top .back-link{font-size:13.5px;font-weight:600;color:var(--text-secondary);}
.pyodide-status{font-size:12.5px;color:var(--text-muted);font-style:italic;}

/* Prev/next nav between lessons within the same workshop, shown after the
   lesson content, "continue" style. Either side is simply absent for the
   first/last lesson in a workshop (no wraparound, no cross-workshop
   chaining, "Back to Workshop N" above already covers that). */
.lesson-bottom-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;max-width:900px;margin:0 auto;padding:32px 40px 56px;}
.lesson-bottom-nav .btn{max-width:100%;white-space:normal;text-align:center;}
.lesson-bottom-nav:has(> :only-child) .btn{margin-left:auto;}
/* .inner-section's default 56px top padding assumes it follows a page-hero;
   here it follows the much smaller .lesson-top bar instead, so it's cut
   down for every lesson page (all 40 share this #lesson-cells id). Zeroing
   this alone wasn't enough though: the first .lesson-cell still carries its
   own 28px top padding, and marked.parse()'s raw <h1> still carries the
   browser's default heading margin on top of that, both stack unless
   targeted directly. */
#lesson-cells{padding-top:0px;}
#lesson-cells .lesson-cell:first-child{padding-top:0;}
.reading-cell>*:first-child{margin-top:0;}

.lesson-cell{padding:28px 0;border-bottom:1px solid var(--border-subtle);}
.lesson-cell:last-child{border-bottom:none;}
.cell-label{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-primary);margin-bottom:10px;}
.cell-label.is-demo{color:var(--text-muted);}

.reading-cell p{font-size:15px;line-height:1.7;color:var(--text-secondary);margin:0 0 10px;}
.reading-cell p:last-child{margin-bottom:0;}

.code-editor{width:100%;min-height:90px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.55;color:#E7ECEE;background:var(--slcce-navy);border:1px solid var(--slcce-ink-60);border-radius:var(--radius-md);padding:14px 16px;resize:vertical;box-sizing:border-box;tab-size:4;}
.code-editor:focus{outline:2px solid var(--slcce-teal-light);outline-offset:1px;}

.cell-actions{display:flex;align-items:center;gap:12px;margin-top:10px;}

.output-panel{margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.6;color:var(--text-primary);background:var(--surface-card-alt);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px 16px;white-space:pre-wrap;word-break:break-word;min-height:20px;}
.output-panel:empty{display:none;}
.output-panel.output-error{color:var(--accent-primary-hover);border-color:var(--accent-primary);}

.check-result{margin-top:10px;font-size:13.5px;font-weight:700;padding:9px 14px;border-radius:var(--radius-md);}
.check-result:empty{display:none;}
.check-result.check-pass{background:rgba(10,145,147,0.12);color:var(--slcce-teal);}
.check-result.check-fail{background:rgba(207,35,88,0.1);color:var(--accent-primary-hover);}

.scratch-textarea{width:100%;min-height:70px;font-family:var(--font-sans);font-size:14px;color:var(--text-primary);background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px 14px;resize:vertical;box-sizing:border-box;margin-top:8px;}
.scratch-textarea::placeholder{color:var(--text-muted);}