/* CodeShaala SI: Track C (Grades 9-12) lab-specific styles. Shared classes live in si.css. */
.sis-lab { max-width: 760px; }
.sis-lab .si-btn, .sis-lab .si-chip, .sis-lab select, .sis-lab .si-input { min-height: 44px; }
.sis-lab .si-btn-sm { min-height: 44px; min-width: 44px; }
.sis-lab select, .sis-lab .si-input { font: inherit; color: var(--txt); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; max-width: 100%; }
.sis-lab .si-input { width: 100%; box-sizing: border-box; }
.sis-lab textarea:not(.sis-code) { font: inherit; color: var(--txt); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; width: 100%; min-height: 90px; box-sizing: border-box; }
.sis-h4 { margin: 8px 0 0; font-size: 15px; color: #dfe5ff; }
.sis-pick { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.sis-readout { margin: 0; min-height: 1.4em; overflow-x: auto; white-space: nowrap; }
.sis-chartwrap { max-width: 520px; }
.sis-two { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 560px) { .sis-two { grid-template-columns: 1fr; } }

/* charts */
.sis-plotbg { fill: rgba(255,255,255,.03); stroke: var(--line); }
.si-line.sis-s1 { stroke: var(--si-b); }
.si-line.sis-s2 { stroke: var(--si-c); stroke-dasharray: 6 4; }
.sis-mark { stroke: #fde68a; stroke-width: 1.5; stroke-dasharray: 3 3; }
.sis-small { fill: #c4cdee; font-size: 10px; }
.sis-tiny { font-size: 8px; }
.sis-warn-t { fill: #fde68a; font-size: 12px; font-weight: 700; }

/* gradient descent */
.sis-curve { fill: none; stroke: var(--si-b); stroke-width: 2.5; }
.sis-contour { fill: none; stroke: rgba(34,211,238,.45); stroke-width: 1.2; }
.sis-trail { fill: none; stroke: var(--si-c); stroke-width: 1.8; stroke-dasharray: 4 3; }
.sis-dot { fill: var(--si-c); }
.sis-ball { fill: #fde68a; stroke: #0b1020; stroke-width: 2; }
.sis-gd { cursor: crosshair; }

/* xor network */
.sis-edge.pos { stroke: var(--si-a); opacity: .85; }
.sis-edge.neg { stroke: var(--si-c); stroke-dasharray: 5 3; opacity: .85; }
.sis-node { stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.sis-nodet { font-size: 10px; font-weight: 800; }
.sis-pt { fill: none; stroke: #fff; stroke-width: 2.2; }
.sis-pt.on { stroke: #fde68a; stroke-width: 3.2; }

/* confusion */
.sis-mk { stroke-width: 1.8; }
.sis-mk.fl { stroke: var(--si-c); }
.sis-mk:not(.fl) { stroke: var(--si-b); }
.sis-mk.alert.fl { fill: var(--si-c); }
.sis-mk.alert:not(.fl) { fill: var(--si-b); }
.sis-mk.quiet { fill: transparent; }
.sis-th { stroke: #fde68a; stroke-width: 2; }
.sis-cm td { font-weight: 800; font-variant-numeric: tabular-nums; }
.sis-cm td.good { background: rgba(52,211,153,.12); }
.sis-cm td.bad { background: rgba(248,113,113,.10); }

/* embeddings */
.sis-vec { font-size: 11px; }
.sis-vec th, .sis-vec td { padding: 4px 5px; text-align: center; white-space: nowrap; }
.sis-cosbar { height: 12px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; max-width: 420px; }
.sis-cosbar i { display: block; height: 100%; background: var(--si-grad); }
.sis-wpt { fill: var(--si-b); }
.sis-wpt.hi { fill: var(--si-c); }
.sis-wpt.on { fill: #fde68a; stroke: #0b1020; stroke-width: 1.5; }
.sis-wlab { fill: #c4cdee; font-size: 9px; }
.sis-wlab.on { fill: #fde68a; font-size: 11px; font-weight: 800; }
.sis-ab { stroke: #fde68a; stroke-width: 1.5; stroke-dasharray: 4 3; }
.sis-map { cursor: pointer; }

/* attention */
.sis-qk { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .sis-qk { grid-template-columns: 1fr; } }
.sis-qk .si-slider { grid-template-columns: minmax(80px, auto) 1fr 44px; font-size: 13px; }
.sis-tokl { fill: #dfe5ff; font-size: 11px; }
.sis-tokl.on { fill: #fde68a; font-weight: 800; }
.sis-cellt { font-size: 11px; font-weight: 700; }
rect.sis-selrow { stroke: #fde68a; stroke-width: 1.5; }
.sis-bars { display: grid; gap: 6px; max-width: 460px; }
.sis-barrow { display: grid; grid-template-columns: minmax(64px, auto) 1fr 72px; gap: 8px; align-items: center; font-size: 13px; }
.sis-bar { height: 12px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.sis-bar i { display: block; height: 100%; background: var(--si-b); }

/* tiny cnn */
.sis-px { image-rendering: pixelated; image-rendering: crisp-edges; width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--line); display: block; }
.sis-px.big { width: 96px; height: 96px; }
.sis-px.fm { width: 42px; height: 42px; }
.sis-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.sis-thumb { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: #c4cdee; }
.sis-thumb figcaption { font-variant-numeric: tabular-nums; }
.sis-tbtn { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 4px; cursor: pointer; color: #bbf7d0; font: inherit; font-size: 12px; min-width: 44px; min-height: 44px; }
.sis-tbtn.wrong { color: #fecaca; border-color: rgba(248,113,113,.55); }
.sis-tbtn.on { border-color: #fde68a; box-shadow: 0 0 0 2px rgba(253,230,138,.5); }
.sis-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.sis-filter { width: 72px !important; }
.sis-fmaps { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }

/* tiny gpt */
.sis-details summary { cursor: pointer; color: #c4b5fd; font-size: 14px; min-height: 32px; }
.sis-corpus { max-height: 220px; overflow: auto; white-space: pre-wrap; font-size: 12px; }
.sis-cpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sis-cp { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sis-sample { white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; }

/* agent loop */
.sis-floor { fill: rgba(255,255,255,.05); stroke: var(--line); }
.sis-shelf { fill: #475569; stroke: #64748b; }
.sis-item { fill: #fde68a; font-size: 10px; font-weight: 800; }
.sis-item.got { fill: var(--si-good); }
.sis-bot { fill: var(--si-b); stroke: #0b1020; stroke-width: 1.5; }
.sis-boteye { fill: #0b1020; }
.sis-trace { max-height: 320px; overflow: auto; }
.sis-trace td { font-size: 12.5px; }
.sis-trace tr.sis-cur td { background: rgba(253,230,138,.12); }
.sis-ok { color: #bbf7d0; }
.sis-err { color: #fecaca; }
.sis-logs:empty { display: none; }
.sis-logs { max-height: 160px; overflow: auto; font-size: 12px; }
textarea.sis-code { font-size: 12.5px; line-height: 1.45; tab-size: 2; min-height: 200px; box-sizing: border-box; }

/* activation viewer */
.sis-heatt { border-collapse: collapse; font-size: 11px; }
.sis-heatt th { padding: 2px 4px; color: #c4cdee; font-weight: 700; text-align: center; }
.sis-heatt tbody th { text-align: right; white-space: nowrap; }
.sis-heatt td.sis-hc { width: 16px; min-width: 16px; height: 14px; border: 1px solid rgba(11,16,32,.6); padding: 0; }
.sis-heatt tr.sis-selrow th { color: #fde68a; }
.sis-heatt tr.sis-selrow td { outline: 1px solid #fde68a; }
.sis-chars { display: flex; flex-wrap: wrap; gap: 3px; }
.sis-ch { display: inline-flex; flex-direction: column; align-items: center; min-width: 26px; padding: 3px 2px; border-radius: 6px; border: 1px solid var(--line); font-family: ui-monospace, Menlo, Consolas, monospace; }
.sis-ch b { font-size: 15px; }
.sis-ch small { font-size: 10px; }
.sis-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .sis-cmp { grid-template-columns: 1fr; } }
.sis-cmp .si-card { padding: 12px; }

@media (prefers-reduced-motion: reduce) { .sis-lab * { transition: none !important; } }