/* Student interpreter demo — Google Colab-style notebook (light), real Pyodide.
   Code + Markdown cells, autosave, and a right-side Sessions switcher.
   No grading, no tests, no submission. */

.cb-body { background: #f8f9fa; }

/* App bar */
.cb-appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ec-s4); padding: 8px 16px; background: var(--ec-surface); border-bottom: 1px solid var(--ec-line); position: sticky; top: 0; z-index: 40; }
.cb-appbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cb-home img { height: 42px; width: auto; display: block; }
.cb-titlewrap { min-width: 0; }
.cb-title { font-size: 1rem; font-weight: 600; color: var(--ec-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-subtitle { font-size: .8rem; color: var(--ec-muted); margin-top: 1px; }
.cb-appbar-right { display: flex; align-items: center; gap: 12px; }
.cb-runtime { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--ec-line-strong); border-radius: var(--ec-r-pill); font-size: .82rem; color: var(--ec-ink-soft); background: var(--ec-surface); }
.cb-rt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ec-warn); }
.cb-rt-dot.is-ready { background: var(--ec-run); }
.cb-rt-dot.is-busy { background: var(--ec-info); animation: cb-pulse 1s ease-in-out infinite; }
.cb-rt-dot.is-error { background: var(--ec-danger); }
@keyframes cb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.cb-iconbtn { font-size: .85rem; color: var(--ec-primary); font-weight: 560; }

/* Toolbar */
.cb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ec-s4); padding: 6px 16px; background: var(--ec-surface); border-bottom: 1px solid var(--ec-line); position: sticky; top: 59px; z-index: 39; }
.cb-toolbar-left { display: flex; align-items: center; gap: 6px; }
.cb-tbtn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; border-radius: var(--ec-r-sm); padding: 6px 10px; font: inherit; font-size: .86rem; color: var(--ec-ink-soft); cursor: pointer; }
.cb-tbtn:hover { background: var(--ec-surface-alt); color: var(--ec-ink); }
.cb-tbtn:disabled { opacity: .45; cursor: not-allowed; }
.cb-plus { font-size: 1.05rem; line-height: 1; }
.cb-tsep { width: 1px; height: 20px; background: var(--ec-line); margin: 0 6px; }
.cb-timer { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--ec-muted); margin-right: 12px; }
.cb-timer strong, .cb-timer #cb-timer { font-variant-numeric: tabular-nums; color: var(--ec-ink, #1c2733); font-weight: 600; }
.cb-save { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--ec-muted); }
.cb-save-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ec-run); }
.cb-save.is-saving .cb-save-dot { background: var(--ec-warn); }

/* Shell: notebook (left, wide) + sessions (right) */
.cb-shell { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 24px; max-width: 1500px; margin: 0 auto; padding: 0 16px; align-items: start; }
.cb-notebook { padding: 24px 4px 64px; min-width: 0; }

/* Cells (Colab look) — wide, left-aligned */
.cb-cell { display: grid; grid-template-columns: 52px minmax(0, 1fr); margin: 0 0 8px; border: 1px solid transparent; border-radius: var(--ec-r-md); }
.cb-cell:hover { border-color: var(--ec-line); }
.cb-cell.is-focused { border-color: var(--ec-line-strong); box-shadow: var(--ec-shadow-sm); }
.cb-gutter { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; }
.cb-run { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ec-ink-soft); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.cb-cell:hover .cb-run, .cb-cell.is-focused .cb-run { background: var(--ec-run); color: #fff; }
.cb-run:hover { background: var(--ec-run-hover) !important; color: #fff; }
.cb-run:disabled { opacity: .4; cursor: not-allowed; background: transparent !important; color: var(--ec-muted); }
.cb-run.is-running { background: var(--ec-info) !important; color: #fff; }
.cb-count { font-family: var(--ec-mono); font-size: .72rem; color: var(--ec-muted); }
.cb-textmark { font-family: var(--ec-mono); font-size: 1rem; color: var(--ec-line-strong); padding-top: 6px; }
.cb-cellmain { position: relative; border: 1px solid var(--ec-line); border-radius: var(--ec-r-md); background: var(--ec-surface); overflow: hidden; }
.cb-cell.is-focused .cb-cellmain { border-color: var(--ec-primary); }
.cb-celltoolbar { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-r-sm); padding: 2px; z-index: 2; }
.cb-cell:hover .cb-celltoolbar, .cb-cell.is-focused .cb-celltoolbar { display: flex; }
.cb-cellact { border: 0; background: transparent; width: 26px; height: 24px; border-radius: 4px; cursor: pointer; color: var(--ec-muted); font-size: .8rem; }
.cb-cellact:hover { background: var(--ec-surface-alt); color: var(--ec-ink); }
.cb-editor { width: 100%; border: 0; resize: none; padding: 12px 14px; font-family: var(--ec-mono); font-size: .85rem; line-height: 1.55; color: #0c2530; background: #fbfdfd; tab-size: 4; white-space: pre; overflow-wrap: normal; overflow-x: auto; display: block; }
.cb-editor:focus { outline: none; background: #fff; }
.cb-output { border-top: 1px solid var(--ec-line); padding: 10px 14px; font-family: var(--ec-mono); font-size: .8rem; white-space: pre-wrap; word-break: break-word; color: var(--ec-ink-soft); }
.cb-output:empty { display: none; }
.cb-output.is-error { color: var(--ec-danger); background: var(--ec-danger-soft); }
.cb-plots { padding: 0 14px 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.cb-plots:empty { display: none; }
.cb-plots img { border: 1px solid var(--ec-line); border-radius: var(--ec-r-sm); background: #fff; max-width: 100%; }

/* Text (Markdown) cells */
.cb-cell-text .cb-cellmain { border-color: transparent; background: transparent; }
.cb-cell-text.is-focused .cb-cellmain { border-color: var(--ec-primary); background: var(--ec-surface); }
.cb-cell-text:hover .cb-cellmain { border-color: var(--ec-line); }
.cb-md { padding: 6px 14px; color: var(--ec-ink); font-size: .96rem; line-height: 1.6; cursor: text; }
.cb-md:empty::before { content: "Empty text cell — double-click to edit"; color: var(--ec-muted); font-style: italic; }
.cb-md h1, .cb-md h2, .cb-md h3 { margin: .4em 0 .3em; line-height: 1.25; }
.cb-md h1 { font-size: 1.5rem; } .cb-md h2 { font-size: 1.25rem; } .cb-md h3 { font-size: 1.08rem; }
.cb-md p { margin: .4em 0; color: var(--ec-ink-soft); }
.cb-md ul, .cb-md ol { margin: .4em 0; padding-left: 22px; color: var(--ec-ink-soft); }
.cb-md li { margin: 2px 0; }
.cb-md code { font-family: var(--ec-mono); font-size: .86em; background: var(--ec-surface-alt); padding: 1px 5px; border-radius: 5px; }
.cb-md a { color: var(--ec-primary-600); text-decoration: underline; }
.cb-md strong { font-weight: 600; color: var(--ec-ink); }
.cb-mdeditor { width: 100%; border: 0; resize: none; padding: 12px 14px; font-family: var(--ec-mono); font-size: .85rem; line-height: 1.55; color: #0c2530; background: #fff; display: block; }
.cb-mdeditor:focus { outline: none; }

.cb-addbar { display: flex; justify-content: center; gap: 10px; padding: 6px 0 var(--ec-s5); }
.cb-addbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--ec-line-strong); background: var(--ec-surface); border-radius: var(--ec-r-pill); padding: 6px 16px; font: inherit; font-size: .85rem; color: var(--ec-ink-soft); cursor: pointer; }
.cb-addbtn:hover { border-color: var(--ec-primary); color: var(--ec-primary); }
.cb-integrity { font-size: .8rem; color: var(--ec-muted); border-top: 1px solid var(--ec-line); padding-top: var(--ec-s4); margin-top: var(--ec-s4); }

/* Sessions rail (right) */
.cb-rail { position: sticky; top: 112px; padding: 24px 0; }
.cb-rail-head { display: flex; align-items: center; justify-content: space-between; }
.cb-rail-head h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ec-muted); margin: 0; }
.cb-newsession { background: transparent; border: 1px solid var(--ec-line-strong); border-radius: var(--ec-r-pill); padding: 3px 10px; font: inherit; font-size: .8rem; color: var(--ec-primary); cursor: pointer; }
.cb-newsession:hover { border-color: var(--ec-primary); background: var(--ec-surface); }
.cb-rail-note { font-size: .8rem; color: var(--ec-muted); margin: var(--ec-s3) 0 var(--ec-s4); }
.cb-session-list { list-style: none; padding: 0; margin: 0; }
.cb-session { display: block; width: 100%; text-align: left; border: 1px solid var(--ec-line); background: var(--ec-surface); border-radius: var(--ec-r-md); padding: 11px 13px; margin-bottom: 8px; cursor: pointer; font: inherit; }
.cb-session:hover { border-color: var(--ec-line-strong); }
.cb-session.is-active { border-color: var(--ec-primary); background: #f3f9fa; box-shadow: inset 3px 0 0 var(--ec-primary); }
.cb-session-name { font-size: .92rem; font-weight: 600; color: var(--ec-ink); display: flex; align-items: center; gap: 8px; }
.cb-session-name .cb-active-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ec-run); flex: none; }
.cb-session-meta { margin-top: 4px; display: flex; flex-direction: column; gap: 1px; }
.cb-session-meta span { font-size: .76rem; color: var(--ec-muted); font-family: var(--ec-mono); }
.cb-session-updated { color: var(--ec-ink-soft) !important; }
.cb-session-preview { font-family: var(--ec-mono); font-size: .74rem; color: var(--ec-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ec-line); }

.cb-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ec-ink); color: #fff; padding: 10px 18px; border-radius: var(--ec-r-pill); font-size: .9rem; box-shadow: var(--ec-shadow-lg); z-index: 120; }
.cb-toast[hidden] { display: none; }

@media (max-width: 960px) {
    .cb-shell { grid-template-columns: 1fr; }
    .cb-rail { position: static; order: -1; border-bottom: 1px solid var(--ec-line); padding: 16px 0; }
}
@media (max-width: 560px) {
    .cb-cell { grid-template-columns: 40px minmax(0, 1fr); }
    .cb-appbar-right .cb-iconbtn { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cb-rt-dot.is-busy { animation: none; } }