/* Uses the shared observatory tokens and semantic tables. */
#classroom-live { min-width: 0; }
body:has(#classroom-live:not([hidden])) main { padding-top:22px; }
body:has(#classroom-live:not([hidden])) .hero { align-items:center; gap:18px; margin-bottom:18px; }
body:has(#classroom-live:not([hidden])) .hero h1 { font-size:clamp(28px,3vw,38px); }
body:has(#classroom-live:not([hidden])) .hero p { margin-top:8px; font-size:14px; }
body:has(#classroom-live:not([hidden])) .hero-note { max-width:280px; padding:10px 12px; }
.class-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.class-controls p { margin:0; font-size:13px; }
.class-control-actions { display:flex; flex-wrap:wrap; gap:8px; }
.class-control-actions a { display:inline-flex; align-items:center; text-decoration:none; }
.class-freshness,.class-scope { color:var(--muted); font-size:13px; line-height:1.7; }
.class-freshness { margin:6px 0 20px; font-size:12px; }
.class-freshness strong { color:var(--amber); }
.class-priorities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#class-priorities { padding:20px; }
#class-priorities .section-head { margin-bottom:12px; }
.class-insight { display:flex; flex-direction:column; min-width:0; padding:16px 18px 4px; border:1px solid var(--line); border-top:3px solid var(--yellow); border-radius:12px; background:var(--paper); }
.class-insight[data-class-card=failure] { border-top-color:var(--red); }
.class-insight[data-class-card=latency] { border-top-color:var(--blue); }
.class-insight h3 { margin:0; font-size:14px; }
.class-insight-total { margin:10px 0; color:var(--muted); font-size:12px; }
.class-insight-total>strong { margin-right:3px; font-size:32px; line-height:1.2; color:var(--ink); }
.class-insight-list { margin:0; padding:0; list-style:none; }
.class-insight-list li { display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:13px; }
.class-insight-row { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; border:0; background:none; font-size:13px; text-align:left; }
.class-insight-row>strong { white-space:nowrap; font-size:16px; }
.class-insight-row:hover { color:var(--blue); }
.class-insight-empty,.class-insight-note { margin:8px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.class-insight-note { margin-top:auto; padding-top:10px; }
.class-insight-link { min-height:44px; display:block; width:100%; padding:6px 0; border:0; background:none; font-size:12px; color:var(--blue); text-align:left; font-weight:700; }
.class-insight-link:hover { text-decoration:underline; text-underline-offset:4px; }
.class-flow { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.class-flow.class-flow-lesson { grid-template-columns:repeat(2,minmax(0,1fr)); }
.class-flow .flow-node { width:100%; min-width:0; padding:12px; }
.class-flow .step-index { margin-bottom:12px; }
.class-flow .step-name { font-size:14px; min-height:38px; }
.class-node-note { display:block; color:var(--muted); font-size:12px; margin-top:10px; }
.class-scope-strip { margin-top:12px; color:var(--muted); font-size:12px; }
.class-scope-strip strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.class-text-button { min-height:44px; padding:5px 0; border:0; background:none; font:inherit; color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.class-groups { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.class-groups [aria-pressed=true] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.class-analysis { scroll-margin-top:145px; background:#fafbf9; }
.class-analysis h2 { margin:3px 0 0; font-size:22px; }
.class-analysis>.board-section { border:0; padding:12px 0 0; }
.class-label { font-size:12px; color:var(--muted); }
#class-unresolved { scroll-margin-top:145px; }
.class-quality { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.class-quality h3 { margin:0 0 8px; font-size:14px; }
.class-quality p { margin:0 0 8px; font-size:13px; color:var(--muted); }
.class-boundary { margin:20px 0; padding:18px; background:var(--blue-soft); border:1px solid var(--line); border-radius:12px; }
.class-boundary h3 { font-size:15px; margin:0 0 8px; }
.class-boundary p { font-size:13px; margin:0; line-height:1.7; }
.class-disclosure { margin:18px 0; }
.class-disclosure>summary,#classroom-live td summary { cursor:pointer; min-height:44px; padding:10px 0; font-size:13px; font-weight:700; }
#classroom-live table { width:100%; }
#classroom-live th[scope=row] { text-align:left; }
#classroom-live td { font-variant-numeric:tabular-nums; }
#classroom-live td,#classroom-live th { white-space:normal; overflow-wrap:anywhere; min-width:85px; max-width:330px; }
#classroom-live td:last-child { min-width:70px; }
#classroom-live small { display:block; color:var(--muted); margin-top:5px; font-size:12px; }
#classroom-live .metric-value { font-size:clamp(22px,2vw,30px); }
#classroom-live button:disabled { opacity:.55; cursor:not-allowed; }
#classroom-live .table-shell { overflow-x:auto; }
.class-buckets { list-style:none; padding:0; min-width:200px; }
.class-buckets li { display:flex; justify-content:space-between; gap:16px; padding:6px 0; }
.class-definitions td:last-child { min-width:240px; }
.class-chart { display:flex; height:170px; gap:8px; align-items:end; overflow-x:auto; padding:8px 0; }
.class-day { flex:1 0 28px; display:flex; flex-direction:column; gap:7px; height:100%; min-width:0; font-size:10px; text-align:center; color:var(--muted); }
.class-bars { height:126px; display:flex; align-items:end; justify-content:center; gap:2px; border-bottom:1px solid var(--line); }
.class-bar { width:40%; max-width:22px; background:var(--line-strong); border-radius:3px 3px 0 0; }
.class-bar-success { background:var(--ink-soft); }
.class-legend { display:flex; flex-wrap:wrap; gap:20px; font-size:12px; color:var(--muted); }
.class-raw-reason summary { color:var(--muted); font-weight:400!important; }
@media(max-width:1020px) {
 .class-flow { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .class-insight { padding:14px 12px 4px; }
}
@media(max-width:680px) {
 .class-priorities { grid-template-columns:1fr; gap:12px; }
 .class-insight { padding:14px 16px 4px; }
 .class-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .class-flow .flow-node { min-height:150px; }
 .class-groups .clear-button { flex:1 1 120px; }
 #classroom-live .board-section { padding:22px 16px; }
 .class-analysis>.board-section { padding:18px 0!important; }
 .class-controls { align-items:flex-start; }
 .class-quality { grid-template-columns:1fr; gap:18px; }
}

#classroom-live .metrics-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
#classroom-live .class-cards-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:800px) { #classroom-live .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:440px) { #classroom-live .metrics-grid { grid-template-columns:1fr; } }