/* CodeShaala SI — Track B (Grades 6-8) lab styles. Shared tokens and classes live in si.css. */
.lm-lab { --lm-tap: 44px; }
.lm-lab .si-btn, .lm-lab .si-chip, .lm-lab select, .lm-lab .si-input { min-height: var(--lm-tap); }
.lm-lab .si-btn-sm { min-height: var(--lm-tap); }
.lm-svg { max-width: 560px; margin: 0 auto; touch-action: manipulation; }
.lm-tap { cursor: crosshair; }
.lm-controls { display: flex; flex-direction: column; gap: 10px; }
.lm-sub { font-size: 13.5px; color: var(--mut); }
.lm-chips { gap: 6px; }
.lm-tabs .si-chip { min-height: var(--lm-tap); }
.lm-result { font-size: 14.5px; line-height: 1.5; min-height: 1.5em; }
.lm-legend { gap: 6px 14px; font-size: 13px; color: var(--mut); }
.lm-leg { display: inline-flex; align-items: center; gap: 6px; }
.lm-legsvg { flex: none; }
.lm-chart { max-width: 420px; }

/* plot frame */
.lm-plotbg { fill: rgba(255,255,255,.025); stroke: rgba(255,255,255,.14); }
.lm-grid { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.lm-tick { fill: var(--mut); font-size: 10px; font-variant-numeric: tabular-nums; }
.lm-axlab { fill: #c4cdee; font-size: 11px; font-weight: 700; }

/* perceptron */
.lm-c1 { fill: var(--si-b); stroke: #0b1020; stroke-width: .8; }
.lm-c0 { fill: var(--si-c); stroke: #0b1020; stroke-width: .8; }
.lm-shade { fill: rgba(34,211,238,.13); }
.lm-shade-key { fill: rgba(34,211,238,.28); stroke: rgba(34,211,238,.6); }
.lm-decision { stroke: #fde68a; stroke-width: 3; stroke-linecap: round; }
.lm-wrongring { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 2.5 2; }

/* fill-in-the-blank code */
.lm-blankline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #070b18; border: 1px solid var(--line); color: #dbe4ff; }
.lm-blank { font: inherit; color: #fde68a; background: rgba(245,158,11,.1); border: 1px dashed rgba(245,158,11,.7); border-radius: 9px; padding: 6px 8px; min-height: var(--lm-tap); }
.lm-codebox summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: #c4b5fd; min-height: var(--lm-tap); display: flex; align-items: center; }
.lm-code { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; }

/* kNN */
.lm-f0 { fill: var(--si-c); stroke: #0b1020; stroke-width: .8; }
.lm-f1 { fill: var(--si-good); stroke: #0b1020; stroke-width: .8; }
.lm-f2 { fill: var(--si-b); stroke: #0b1020; stroke-width: .8; }
.lm-hollow { fill: none; stroke-width: 1.6; }
.lm-f0.lm-hollow { stroke: var(--si-c); } .lm-f1.lm-hollow { stroke: var(--si-good); } .lm-f2.lm-hollow { stroke: var(--si-b); }
.lm-mine { stroke: #fff; stroke-width: 1.6; }
.lm-q { fill: var(--si-a); stroke: #fff; stroke-width: 1.6; }
.lm-nnline { stroke: rgba(255,255,255,.75); stroke-width: 1.4; stroke-dasharray: 4 3; }
.lm-nnring { fill: none; stroke: #fde68a; stroke-width: 1.8; }
.lm-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 800; color: #0b1020; background: #e2e8f0; }
.lm-tag0 { background: var(--si-c); } .lm-tag1 { background: var(--si-good); } .lm-tag2 { background: var(--si-b); }
.lm-addrow { gap: 6px; }
.lm-acc caption, .si-table caption { caption-side: top; text-align: left; font-size: 13px; color: var(--mut); padding: 4px 0; }
.lm-best td { background: rgba(52,211,153,.12); font-weight: 700; }

/* three predictions */
.lm-dot { fill: #e2e8f0; stroke: #0b1020; stroke-width: .8; }
.lm-resid { stroke: var(--si-warm); stroke-width: 1.2; opacity: .75; }
.lm-fit { stroke: #fde68a; stroke-width: 3; stroke-linecap: round; }
.lm-knncurve { fill: none; stroke: var(--si-a); stroke-width: 2.5; stroke-linejoin: round; }
.lm-k0 { fill: var(--si-c); stroke: #0b1020; stroke-width: .8; } .lm-k0s { stroke: var(--si-c); } .lm-k0t { background: var(--si-c); }
.lm-k1 { fill: var(--si-b); stroke: #0b1020; stroke-width: .8; } .lm-k1s { stroke: var(--si-b); } .lm-k1t { background: var(--si-b); }
.lm-k2 { fill: var(--si-good); stroke: #0b1020; stroke-width: .8; } .lm-k2s { stroke: var(--si-good); } .lm-k2t { background: var(--si-good); }
.lm-k3 { fill: var(--si-warm); stroke: #0b1020; stroke-width: .8; } .lm-k3s { stroke: var(--si-warm); } .lm-k3t { background: var(--si-warm); }
.lm-assign { stroke-width: 1; opacity: .45; }
.lm-centre { stroke-width: 3.5; stroke-linecap: round; fill: none; }
.lm-centrelab { fill: #fff; font-size: 11px; font-weight: 800; }
.lm-group { font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* decision tree */
.lm-treewrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.lm-treesvg { min-width: 600px; max-width: none; }
.lm-treehint { fill: var(--mut); font-size: 14px; }
.lm-edge { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 2; }
.lm-edge.on { stroke: #fde68a; stroke-width: 3.5; }
.lm-edgelab { fill: var(--mut); font-size: 11px; font-weight: 700; }
.lm-node rect { fill: #182253; stroke: rgba(255,255,255,.25); stroke-width: 1.2; }
.lm-node.on rect { stroke: #fde68a; stroke-width: 2.5; }
.lm-node.leaf.out1 rect { fill: rgba(52,211,153,.22); stroke: var(--si-good); }
.lm-node.leaf.out0 rect { fill: rgba(251,113,133,.18); stroke: var(--si-warm); }
.lm-node.leaf.on rect { stroke: #fde68a; stroke-width: 3; }
.lm-nq { fill: #fff; font-size: 12px; font-weight: 800; }
.lm-ns { fill: #c4cdee; font-size: 10.5px; }

/* bigram */
.lm-start { width: 100%; max-width: 420px; margin-top: 4px; font-size: 17px; display: block; }
.lm-story { min-height: 64px; padding: 14px 16px; border-radius: 14px; background: #070b18; border: 1px solid var(--line); font-size: 19px; line-height: 1.7; word-break: break-word; }
.lm-given { color: #fde68a; font-weight: 700; }
.lm-gen { color: #e8ecf8; }
.lm-gen.new { color: var(--si-b); }
.lm-break { color: var(--mut); }
.lm-ghost { color: var(--mut); font-size: 14px; }
.lm-pieces { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 1em; }
.lm-piece { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 3px 8px; border-radius: 8px; border: 1px solid rgba(168,85,247,.5); background: rgba(168,85,247,.12); font-size: 18px; }
.lm-bgtable .lm-tok { font-size: 16px; font-weight: 700; }
.lm-pbar { position: relative; display: block; min-width: 110px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.06); overflow: hidden; }
.lm-pbar.wide { flex: 1 1 140px; }
.lm-pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(168,85,247,.75), rgba(34,211,238,.75)); }
.lm-pbar span { position: relative; padding-left: 8px; font-size: 12.5px; font-weight: 700; line-height: 22px; font-variant-numeric: tabular-nums; }

/* letter canvas */
.lm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lm-paint { max-width: 340px; touch-action: none; cursor: pointer; border-radius: 8px; }
.lm-paint:focus-visible { outline: 3px solid #fde68a; outline-offset: 3px; }
.lm-pix { fill: rgba(255,255,255,.035); }
.lm-pix.on { fill: #e8ecf8; }
.lm-cursor { fill: none; stroke: #fde68a; stroke-width: 2.5; pointer-events: none; }
.lm-results { display: flex; flex-direction: column; gap: 8px; }
.lm-match { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.lm-match.best { border-color: var(--si-good); background: rgba(52,211,153,.1); }
.lm-thumb { width: 40px; height: 40px; flex: none; background: rgba(255,255,255,.04); border-radius: 6px; }
.lm-thumbon { fill: #c4cdee; }
.lm-letter { font-size: 26px; width: 32px; text-align: center; font-family: 'Noto Sans Devanagari', 'Mangal', sans-serif; }
.lm-bestlab { font-size: 12px; color: #bbf7d0; white-space: nowrap; }
.lm-fsvg { max-width: 260px; }
.lm-fcell { fill: rgba(255,255,255,.03); cursor: pointer; }
.lm-kernel { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; }
.lm-kernel span { display: grid; place-items: center; height: 36px; border-radius: 8px; background: rgba(255,255,255,.06); font-weight: 800; }
.lm-kernel span.p { background: rgba(34,211,238,.22); color: #a5f3fc; }
.lm-kernel span.n { background: rgba(251,113,133,.22); color: #fecdd3; }
.lm-calc { font-size: 12.5px; line-height: 1.5; word-break: break-word; color: #dbe4ff; }

/* shared signed colours (filter output, Q heat map) */
.lm-pos { fill: var(--si-b); }
.lm-neg { fill: var(--si-warm); }

/* grid world */
.lm-gw { max-width: 440px; }
.lm-gwbase { fill: rgba(255,255,255,.03); }
.lm-wall { fill: #2a3366; stroke: #3b4685; }
.lm-pit { fill: #3b0d1a; stroke: var(--si-warm); stroke-width: 2; }
.lm-goal { fill: rgba(52,211,153,.25); stroke: var(--si-good); stroke-width: 2; }
.lm-gwicon { fill: var(--si-warm); font-size: 18px; font-weight: 900; pointer-events: none; }
.lm-gwicon.goal { fill: #fde68a; font-size: 22px; }
.lm-gwarrow { fill: #fff; font-size: 17px; font-weight: 900; pointer-events: none; }
.lm-gwval { fill: rgba(255,255,255,.85); font-size: 9px; font-variant-numeric: tabular-nums; pointer-events: none; }
.lm-gwstart { fill: #fde68a; font-size: 12px; font-weight: 900; pointer-events: none; }
.lm-gwpath { fill: none; stroke: #fde68a; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; opacity: .85; pointer-events: none; }
.lm-bot { fill: var(--si-a); stroke: #fff; stroke-width: 2.5; pointer-events: none; }
.lm-seed { width: 110px; }
.lm-cellsel { max-width: 180px; }

@media (max-width: 640px) {
  .lm-two { grid-template-columns: 1fr; }
  .lm-story { font-size: 17px; }
  .lm-lab .si-slider { grid-template-columns: minmax(90px, 38%) 1fr 48px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-lab * { transition: none !important; animation: none !important; }
}