/* Class board lives inside the existing teacher cockpit and shares its palette. */
.teacher-session #teacherCockpit.ta-cockpit { display:grid; }
.ta-cockpit.ta-board-open { grid-template-rows:54px minmax(0,1fr); }
.ta-board-open>.ta-kpis,.ta-board-open>.ta-main { display:none; }
.ta-cockpit:not(.ta-board-open)>.tcb-board { display:none; }
.tcb-board,.tcb-board * { box-sizing:border-box; }
.tcb-board { --tcb-line:#245878;--tcb-ink:#e5f8ff;--tcb-muted:#8cb5ca;min-height:0;overflow:auto;padding:4px 6px 12px;color:var(--tcb-ink);background:radial-gradient(ellipse at 52% 22%,#0b3348 0,#041422 48%,#020b16 100%);font-family:inherit; }
.tcb-top { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:4px 0 11px; }
.tcb-top span,.tcb-chart-panel header span,.tcb-side header span { color:#5fd9ea;font-size:10px;letter-spacing:1.8px; }
.tcb-top h1 { margin:3px 0;font-size:clamp(21px,2vw,29px);letter-spacing:1px; }
.tcb-top p { margin:0;color:#99bdd0;font-size:12px; }
.tcb-demo-mark { padding:7px 12px;border:1px solid #50d3d050;border-radius:16px;background:#0a343f9c;color:#8ceddf!important;font-size:11px!important;letter-spacing:0!important;white-space:nowrap; }
.tcb-kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:11px; }
.tcb-kpis>div { min-width:0;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:11px 15px;border:1px solid var(--tcb-line);border-radius:10px;background:linear-gradient(130deg,#0d2b40e8,#071a2dc9);box-shadow:inset 0 1px #ffffff16; }
.tcb-kpis strong { grid-row:1/3;color:#6cf2dd;font-size:clamp(25px,2.5vw,36px);line-height:1; }
.tcb-kpis span { align-self:end;font-size:13px;font-weight:700; }
.tcb-kpis small { align-self:start;color:var(--tcb-muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tcb-kpis>div:last-child strong { color:#ffbb7b; }
.tcb-main { display:grid;grid-template-columns:minmax(0,1fr) clamp(270px,24vw,360px);gap:11px;min-height:calc(100% - 145px); }
.tcb-chart-panel,.tcb-side>section { position:relative;min-width:0;border:1px solid var(--tcb-line);border-radius:12px;background:linear-gradient(145deg,#0a273bdc,#051525e8);box-shadow:inset 0 1px #ffffff10,0 12px 35px #0003; }
.tcb-chart-panel { display:flex;flex-direction:column;min-height:490px;padding:17px 18px 12px;overflow:hidden; }
.tcb-chart-panel>header { display:flex;justify-content:space-between;align-items:end;gap:15px; }
.tcb-chart-panel h2,.tcb-side h2 { margin:3px 0 0;font-size:19px; }
.tcb-legend { display:flex;flex-wrap:wrap;gap:12px; }
.tcb-legend span { display:flex;align-items:center;gap:5px;color:#a3c7d7!important;letter-spacing:0!important;white-space:nowrap; }
.tcb-legend i { width:9px;height:9px;border-radius:2px;background:var(--c);box-shadow:0 0 10px var(--c); }
.tcb-tools { display:flex;align-items:center;gap:14px;min-height:47px;color:#a5cadb;font-size:11px; }
.tcb-tools label { white-space:nowrap; }
.tcb-tools select { max-width:210px;margin-left:6px;padding:5px 8px;border:1px solid #367496;border-radius:5px;background:#082538;color:#daf7fb; }
.tcb-tools p { margin:0;flex:1; }
.tcb-tools>div { display:flex;align-items:center;gap:8px;white-space:nowrap; }
.tcb-tools button { width:28px;height:26px;border:1px solid #3b7890;border-radius:5px;background:#0c3242;color:#adf5e9; }
.tcb-tools button:disabled { opacity:.4;cursor:default; }
.tcb-chart { display:flex;flex:1;min-height:280px;padding-top:10px; }
.tcb-axis { display:flex;flex-direction:column;justify-content:space-between;width:38px;padding:0 4px 27px 0;color:#76a2b7;font-size:10px;text-align:right; }
.tcb-chart-scroll { position:relative;flex:1;min-width:0;overflow-x:auto; }
.tcb-grid { position:absolute;inset:0 0 27px;pointer-events:none;background:repeating-linear-gradient(to top,#45adcb2c 0 1px,transparent 1px 25%);border-bottom:1px solid #58adbd6e; }
.tcb-bars { position:relative;z-index:1;display:flex;align-items:stretch;gap:5px;min-width:660px;height:100%; }
.tcb-cluster { display:flex;flex:1;min-width:48px;flex-direction:column;text-align:center;color:#bde2e8; }
.tcb-cluster-bars { display:flex;align-items:flex-end;justify-content:center;gap:3px;flex:1;min-height:0;padding:0 3px; }
.tcb-bar { width:28%;height:calc(var(--value) * 1%);min-height:2px;padding:0;border:1px solid #ffffff38;border-radius:4px 4px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--c),white 27%),var(--c) 45%,color-mix(in srgb,var(--c),black 45%));box-shadow:0 0 15px color-mix(in srgb,var(--c),transparent 65%);transform-origin:center bottom;animation:tcb-grow .75s cubic-bezier(.2,.8,.2,1) var(--delay) both;transition:filter .2s,box-shadow .2s;cursor:pointer; }
.tcb-bar:hover,.tcb-bar:focus-visible,.tcb-cluster.is-selected .tcb-bar { filter:brightness(1.4);box-shadow:0 0 20px var(--c); }
.tcb-cluster>span { padding-top:7px;font-size:11px;font-weight:700; }
.tcb-cluster>small { color:#6f9bab;font-size:9px; }
.tcb-chart-panel>footer { padding-top:8px;color:#7da8ba;font-size:10px; }
.tcb-side { display:flex;flex-direction:column;gap:11px;min-height:0; }
.tcb-side>section { padding:15px; }
.tcb-side>section:first-child { flex:1;min-height:0; }
.tcb-side>section:last-child { flex:0 0 auto; }
.tcb-group-list { display:grid;gap:6px;margin-top:13px; }
.tcb-group-list button { display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px;padding:7px;border:1px solid #285570;border-radius:7px;background:#0922369e;color:#c9e9ef;text-align:left;cursor:pointer; }
.tcb-group-list button:hover { border-color:#57d5ca;background:#104155; }
.tcb-group-list span { display:flex;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px; }
.tcb-group-list b { color:#68ebdc;font-size:11px; }
.tcb-group-list strong { color:#bcf5e8;font-size:13px; }
.tcb-group-list i { grid-column:1/-1;height:4px;border-radius:5px;background:#1b4052; }
.tcb-group-list em { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3fb6d9,#6feacb); }
.tcb-focus p { color:#c9e5ec;font-size:12px;line-height:1.65; }
.tcb-focus small { display:block;margin-top:8px;color:#7baabd;font-size:10px;line-height:1.5; }
.tcb-detail { position:absolute;z-index:5;top:65px;right:18px;bottom:15px;width:min(360px,47%);overflow:auto;padding:15px;border:1px solid #77e9e0a8;border-radius:12px;background:linear-gradient(145deg,#09283be8,#041827ee);box-shadow:0 12px 55px #0009,0 0 30px #41d1d329;backdrop-filter:blur(16px);animation:tcb-in .25s ease-out; }
.tcb-detail header { display:flex;justify-content:space-between;gap:8px; }
.tcb-detail header small { color:#62d4e3;font-size:9px;letter-spacing:1px; }
.tcb-detail h3 { margin:3px 0;font-size:22px; }
.tcb-detail h3 span { color:#96bed0;font-size:12px;font-weight:400; }
.tcb-detail header button { align-self:start;width:27px;height:27px;border:1px solid #59c5d3;border-radius:6px;background:#0c3543;color:#d8fcff;font-size:20px;cursor:pointer; }
.tcb-status { display:flex;justify-content:space-between;gap:8px;margin:10px 0;padding:8px 10px;border-radius:6px;background:#2152627e;color:#8cf4dc;font-size:11px;font-weight:700; }
.tcb-status small { color:#b6d7e0;font-size:10px;font-weight:400; }
.tcb-detail-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:11px; }
.tcb-detail-metrics div { display:grid;gap:2px;padding:7px 4px;border:1px solid #3b778c;border-radius:6px;background:#092a3da6;text-align:center; }
.tcb-detail-metrics strong { color:#73f0df;font-size:19px; }
.tcb-detail-metrics span { color:#92bfd0;font-size:10px; }
.tcb-detail section { border-top:1px solid #3c79843d;padding-top:8px; }
.tcb-detail h4 { display:flex;justify-content:space-between;margin:0;color:#e4f8fb;font-size:12px; }
.tcb-detail h4 small { color:#8ab4c5;font-weight:400; }
.tcb-radar { display:block;width:100%;height:135px; }
.tcb-radar-grid polygon { fill:none;stroke:#5abdd36b; }
.tcb-radar-fill { fill:#49ead747;stroke:#69f8e1;stroke-width:2;animation:tcb-radar .7s ease-out;transform-origin:110px 104px; }
.tcb-radar circle,.tcb-trend-svg circle { fill:#a8fff1; }
.tcb-domain-labels { display:flex;flex-wrap:wrap;gap:4px 9px;color:#9bc9d2;font-size:9px; }
.tcb-trend-svg { width:100%;height:83px; }
.tcb-trend-svg .tcb-grid-line { stroke:#42788965;stroke-width:1; }
.tcb-trend-svg polyline { stroke-dasharray:400;animation:tcb-line 1s ease-out both; }
.tcb-teaching { margin-top:8px;padding:9px;border-left:3px solid #65e7cc;background:#13435666; }
.tcb-teaching b { color:#77f6dd;font-size:12px; }
.tcb-teaching p { margin:5px 0;font-size:11px;line-height:1.5; }
.tcb-teaching small { color:#a4cad3;font-size:10px; }
.tcb-board button:focus-visible,.tcb-board select:focus-visible { outline:2px solid #b5fff2;outline-offset:2px; }
@keyframes tcb-grow { from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes tcb-in { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes tcb-radar { from{opacity:0;transform:scale(.4)} to{opacity:1;transform:scale(1)} }
@keyframes tcb-line { from{stroke-dashoffset:400} to{stroke-dashoffset:0} }
.ta-cockpit[data-paused="true"] .tcb-board *, .ta-cockpit[data-paused="true"] .tcb-board *::before { animation-play-state:paused!important; }
@media (max-width:1100px) { .tcb-main { grid-template-columns:minmax(0,1fr) 270px; }.tcb-legend { gap:5px; }.tcb-legend span { font-size:9px; } }
@media (max-width:1250px) { .ta-board-open .ta-header .ta-identity { display:none; }.ta-board-open .ta-header>div { flex:1;overflow:hidden; }.ta-board-open .ta-header>div strong { overflow:hidden;text-overflow:ellipsis; }.ta-board-open .ta-header>div span { display:none; } }
@media (max-width:900px) { .ta-cockpit.ta-board-open { min-height:100dvh;height:auto;grid-template-rows:auto 1fr; }.tcb-board { overflow:visible; }.tcb-top { align-items:start; }.tcb-kpis { grid-template-columns:repeat(2,1fr); }.tcb-main { display:flex;flex-direction:column; }.tcb-chart-panel { min-height:440px; }.tcb-side { display:grid;grid-template-columns:1fr 1fr; }.tcb-detail { width:min(360px,80%); }.tcb-tools { flex-wrap:wrap; } }
@media (max-width:600px) { .tcb-top { display:block; }.tcb-demo-mark { display:inline-block;margin-top:8px; }.tcb-kpis { gap:5px; }.tcb-kpis>div { padding:8px;column-gap:6px; }.tcb-kpis strong { font-size:22px; }.tcb-kpis span { font-size:10px; }.tcb-kpis small { font-size:8px; }.tcb-side { display:block; }.tcb-side>section { margin-top:10px; }.tcb-detail { position:fixed;inset:10px;width:auto;z-index:30; }.tcb-chart-panel>header { display:block; }.tcb-legend { margin-top:7px; } }
@media (prefers-reduced-motion:reduce) { .tcb-board *, .tcb-board *::before { animation:none!important;transition:none!important; } }

/* Equal vertical scales with decorative top and side faces. */
.tcb-chart { min-height:360px;padding-top:34px; }
.tcb-chart-scroll { padding-top:30px;margin-top:-30px; }
.tcb-axis { padding-bottom:68px; }
.tcb-grid { top:30px;bottom:68px; }
.tcb-bars { min-width:750px;gap:12px; }
.tcb-cluster { position:relative;min-width:112px;padding:0 7px 8px;border:1px solid transparent;border-radius:10px;transition:background .2s,border-color .2s; }
.tcb-cluster-bars { gap:10px;padding:0 7px 33px 0; }
.tcb-bar { position:relative;flex:1;width:auto;max-width:34px;min-width:23px;border:1px solid color-mix(in srgb,var(--c),white 30%);border-radius:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c),black 16%),var(--c));box-shadow:none;overflow:visible; }
.tcb-bar::before { content:"";position:absolute;left:-1px;right:-1px;top:-8px;height:8px;background:color-mix(in srgb,var(--c),white 40%);transform:skewX(-38deg);transform-origin:bottom; border:1px solid #ffffff70;pointer-events:none; }
.tcb-bar::after { content:"";position:absolute;top:-1px;bottom:-1px;right:-7px;width:6px;background:color-mix(in srgb,var(--c),black 45%);transform:skewY(-52deg);transform-origin:left; border:1px solid color-mix(in srgb,var(--c),black 25%);pointer-events:none; }
.tcb-bar-value { position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);color:#f3fbff;font-size:12px;font-weight:750;white-space:nowrap;line-height:1.2;text-shadow:0 2px 4px #000;pointer-events:none; }
.tcb-bar-value small { margin-left:1px;color:#aec9d7;font-size:9px; }
.tcb-bar-title { position:absolute;top:calc(100% + 11px);left:50%;transform:translateX(-50%);color:var(--c);font-size:9px;line-height:1.1;white-space:nowrap;pointer-events:none; }
.tcb-cluster>span { min-height:21px;padding-top:2px;font-size:11px; }
.tcb-selected-tag { display:none; }
.tcb-bars.has-selection .tcb-cluster:not(.is-selected) { opacity:.5; }
.tcb-bars.has-selection .tcb-bar { animation:none; }
.tcb-cluster.is-selected { background:linear-gradient(180deg,#2d657435,#2b796d47);border-color:#99f8e8;box-shadow:inset 0 0 20px #68f5d412; }
.tcb-cluster.is-selected .tcb-bar { filter:none;box-shadow:none; }
.tcb-cluster.is-selected>span { color:#bcfff0; }
.tcb-cluster.is-selected .tcb-selected-tag { display:inline-block;margin-left:4px;padding:2px 3px;background:#b1fce7;color:#123d38;border-radius:3px;font-size:8px; }
.tcb-cluster .tcb-bar.is-picked { outline:2px solid #fff;outline-offset:3px;filter:brightness(1.13);box-shadow:0 0 18px color-mix(in srgb,var(--c),transparent 35%); }
.tcb-bar.is-picked .tcb-bar-value { padding:3px 4px;border-radius:4px;background:var(--c);color:#111f2e;text-shadow:none; }
.tcb-bar.is-picked .tcb-bar-value small { color:#253a48; }
.tcb-bar:hover,.tcb-bar:focus-visible { filter:brightness(1.2)!important; }
.tcb-side { position:relative; }
.tcb-side>.tcb-detail { top:0;bottom:0;right:0;width:100%; }
@media(max-width:900px) { .tcb-side:has(.tcb-detail) { min-height:630px; }.tcb-side>.tcb-detail { width:100%; }.tcb-chart { min-height:360px; } }
@media(max-width:600px) { .tcb-side>.tcb-detail { position:fixed;inset:12px;width:auto; }.tcb-side:has(.tcb-detail) { min-height:0; } }
@media(prefers-reduced-motion:reduce) { .tcb-cluster { transition:none; } }
/* Keep percentage bar heights tied to a definite plot height. */
.tcb-chart { flex:0 0 auto;height:clamp(360px,46vh,560px); }
.tcb-cluster-bars { position:relative;flex:none;height:calc(100% - 68px);margin-bottom:33px;padding-bottom:0; }