/* Curriculum class view under #studio: TOC | page | lab dock. Scoped to .class-view, .class-ring and the Studio curriculum card. */
.class-view{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr) minmax(320px,420px);gap:20px;align-items:start;min-width:0}
.class-view h1{font:500 clamp(1.6rem,2.6vw,2.2rem)/1.15 Georgia,serif;margin:6px 0 4px;overflow-wrap:anywhere}
.class-view .eyebrow{color:var(--green)}
.class-meta{color:var(--muted);font-size:13px;margin:0 0 12px}
.class-error{color:var(--red);font-weight:700}

/* Progress ring (small; the landing header uses .large) */
.class-ring{--value:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;position:relative;flex:none;background:conic-gradient(var(--green) calc(var(--value)*1%),var(--line) 0)}
.class-ring::before{content:"";position:absolute;inset:6px;background:var(--surface);border-radius:50%}
.class-ring span{position:relative;font-size:12px;font-weight:800}
.class-ring.large{width:120px;height:120px}
.class-ring.large::before{inset:12px}
.class-ring.large span{font:500 26px Georgia,serif}

/* Table of contents */
.class-toc{position:sticky;top:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:13px;max-height:calc(100vh - 32px);overflow:auto}
.class-toc-title{display:block;font-weight:800;color:var(--ink);text-decoration:none;margin-bottom:10px}
.class-toc-progress{display:flex;align-items:center;gap:10px;color:var(--muted);margin-bottom:12px}
.class-toc-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.class-toc-list a{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:8px;color:var(--ink);text-decoration:none}
.class-toc-list a:hover{background:var(--paper)}
.class-toc-list .active a{background:var(--green);color:#fff}
.class-toc-list .tick{width:14px;flex:none;color:var(--green);font-weight:900}
.class-toc-list .active .tick{color:#fff}
.class-toc-text{display:flex;flex-direction:column;min-width:0}
.class-toc-text small{color:var(--muted);font-size:11px}
.class-toc-list .active small{color:rgba(255,255,255,.75)}

/* Page */
.class-page{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,32px)}
.class-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.class-head>div{min-width:0}
.class-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.class-body{line-height:1.65}
.class-body h2{font:500 1.4rem Georgia,serif;margin:28px 0 10px}
.class-body h3{font-size:1.05rem;margin:22px 0 8px}
.class-body pre{background:#111816;color:#e8efe9;padding:12px 14px;border-radius:10px;overflow:auto;font:13px/1.5 ui-monospace,Menlo,monospace;direction:ltr;text-align:left}
.class-body code{font:.92em ui-monospace,Menlo,monospace}
.class-body :not(pre)>code{background:var(--paper);padding:1px 5px;border-radius:5px}
.class-body table{border-collapse:collapse;width:100%;font-size:14px;margin:12px 0}
.class-body th,.class-body td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.class-body blockquote{margin:12px 0;padding:8px 14px;border-inline-start:4px solid var(--sand);background:var(--paper);border-radius:0 10px 10px 0}
.class-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.class-card{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;background:var(--surface);min-height:100%}
.class-card:hover{border-color:var(--green)}
.class-card.done{border-inline-start:4px solid var(--green)}
.class-card-n{color:var(--green);font-weight:850;font-size:12px;letter-spacing:.08em}
.class-card small{color:var(--muted)}

/* Try-it / Check-it cards emitted by the markdown renderer */
.example{margin:18px 0;padding:14px 16px;border:1px solid var(--line);border-inline-start:4px solid var(--green);border-radius:10px;background:var(--paper)}
.example.check{border-inline-start-color:var(--blue)}
.example-head{display:flex;gap:10px;align-items:baseline;margin-bottom:8px}
.example-kind{text-transform:uppercase;font-size:11px;letter-spacing:.14em;font-weight:800;color:var(--green)}
.example.check .example-kind{color:var(--blue)}
.example pre{margin:0 0 10px}
.example-hint{margin:0 0 10px;color:var(--muted)}
.example-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.example-actions button{padding:8px 14px;font-size:13px}
.example-result{font-weight:700;font-size:13px}
.example-result.ok{color:var(--green)}
.example-result.bad{color:var(--red)}

/* Lab dock */
.lab-dock{position:sticky;top:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px;min-width:0}
.lab-dock-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lab-dock-actions{margin-inline-start:auto;display:flex;gap:6px}
.lab-dock-actions button{padding:7px 12px;font-size:13px}
.lab-chip{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--paper);color:var(--muted)}
.lab-chip.online{background:#e2efe9;color:var(--green)}
.lab-chip.connecting{background:var(--sand-soft);color:#644f22}
.lab-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:#f6e4df;color:var(--red);font-size:13px;font-weight:700}
.lab-banner button{margin-inline-start:auto;padding:6px 12px;font-size:13px}
.lab-term{min-height:320px;border-radius:10px;background:#111816;overflow:hidden}
.lab-xterm{width:100%;height:320px;min-height:160px;resize:vertical;overflow:hidden;padding:6px;box-sizing:border-box;background:#111816}
.lab-xterm .xterm{height:100%}
.lab-help{margin:0;font-size:12px;color:var(--muted)}

/* Teacher matrix */
.class-matrix{overflow-x:auto}
.class-matrix table{border-collapse:collapse;font-size:12px;white-space:nowrap}
.class-matrix th,.class-matrix td{border:1px solid var(--line);padding:4px 6px;text-align:center}
.class-matrix th abbr{text-decoration:none;cursor:help}
.class-matrix tbody th{text-align:start;position:sticky;left:0;background:var(--surface)}

/* Curriculum card in the Studio library */
.st-curriculum{margin-bottom:28px}
.st-curriculum h2{font-size:1.1rem;margin:0 0 12px}
.st-curriculum .st-class-card{border-top-color:var(--green)}
.st-curriculum .st-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.st-curriculum a.st-btn{text-decoration:none}
.st-curriculum .st-ring-row{display:flex;align-items:center;gap:12px}

@media (max-width:900px){
 .class-view{grid-template-columns:1fr}
 .class-toc{position:static;max-height:none}
 .class-toc-list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
 .lab-dock{position:sticky;top:auto;bottom:0;order:3;box-shadow:0 -10px 30px rgba(30,42,37,.12);z-index:2}
 .lab-term{min-height:220px}
 .lab-xterm{height:220px}
}