/* CodeShaala SI - Track A labs (Grades 1-5). Lab-specific styles only; shared classes live in si.css.
   Every rule is scoped under .sij so nothing leaks into other modules. */
.sij {
  --j-panel: var(--panel, #1c1a3a);
  --j-panel2: var(--panel2, #24214a);
  --j-line: var(--line, #3b3770);
  --j-txt: var(--txt, #eef0ff);
  --j-mut: var(--mut, #a5a8d0);
  --j-a: var(--si-a, #a855f7);
  --j-b: var(--si-b, #22d3ee);
  --j-c: var(--si-c, #f59e0b);
  --j-good: var(--si-good, #34d399);
  --j-bad: var(--si-bad, #f87171);
  --j-r: var(--radius, 14px);
  --j-tap: 48px;
  color: var(--j-txt);
}
.sij.sij-g12 { --j-tap: 56px; }
.sij .si-btn, .sij .si-chip, .sij button { min-height: var(--j-tap); touch-action: manipulation; }
.sij.sij-g12 .si-btn { font-size: 1.05rem; }
.sij button:focus-visible, .sij .sij-tap:focus-visible, .sij input:focus-visible {
  outline: 3px solid var(--j-c); outline-offset: 2px;
}
.sij .sij-tap { cursor: pointer; outline: none; }
.sij .sij-tap:focus-visible > rect, .sij .sij-tap:focus-visible > path { stroke: var(--j-c); stroke-width: 4; }
.sij-svg { display: block; width: 100%; height: auto; max-width: 100%; }
.sij .si-stage { display: flex; justify-content: center; margin: 10px 0; }
.sij .sij-stage-sq .sij-svg { max-width: 380px; }
.sij-ico { display: block; flex: none; }
.sij-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sij .sij-h { font-weight: 700; margin: 12px 0 6px; font-size: .95rem; }
.sij .sij-ctrl { margin: 10px 0; gap: 10px; flex-wrap: wrap; }
.sij .sij-run { font-weight: 800; }
.sij .muted { color: var(--j-mut); }
.sij .sij-small { font-size: 11px; fill: var(--j-mut); }

/* Paper Robot speech line (instruction-style, live region) */
.sij-say { display: flex; align-items: center; gap: 10px; background: var(--j-panel2); border: 1px solid var(--j-line); border-radius: var(--j-r); padding: 8px 12px; margin: 10px 0; min-height: 56px; }
.sij-say-txt { font-size: 1rem; line-height: 1.4; }
.sij-g12 .sij-say-txt { font-size: 1.1rem; }
.sij-say-good { border-color: var(--j-good); box-shadow: inset 4px 0 0 var(--j-good); }
.sij-say-warn { border-color: var(--j-c); box-shadow: inset 4px 0 0 var(--j-c); }
.sij-beacon { animation: sij-blink 1.6s steps(2) infinite; }
@keyframes sij-blink { 50% { opacity: .35; } }

/* shared bars / rules / legends */
.sij-bar { display: grid; grid-template-columns: 7.5em 1fr 4em; align-items: center; gap: 8px; margin: 4px 0; font-size: .95rem; }
.sij-bar.on { font-weight: 800; }
.sij-bar-t { display: block; height: 14px; background: var(--j-panel2); border: 1px solid var(--j-line); border-radius: 8px; overflow: hidden; min-width: 60px; }
.sij-bar-t.sm { height: 10px; width: 90px; }
.sij-bar-t i { display: block; height: 100%; background: linear-gradient(90deg, var(--j-a), var(--j-b)); transition: width .4s; }
.sij-bar.on .sij-bar-t i { background: linear-gradient(90deg, var(--j-c), #fde047); }
.sij-rule { background: var(--j-panel2); border: 2px dashed var(--j-c); border-radius: var(--j-r); padding: 10px 12px; margin: 8px 0; font-size: 1.02rem; }
.sij-tag { color: var(--j-mut); font-size: .9rem; }
.sij-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--j-mut); margin: 6px 0; }
.sij-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 8px 0; }

/* ---------- robot ---------- */
.sij-levels { gap: 8px; }
.sij-lv { min-width: 64px; font-weight: 800; }
.sij-floor { fill: #2a2660; stroke: #3d3a7a; stroke-width: 1.5; }
.sij-floor-b { fill: #312d6e; }
.sij-wall { fill: none; stroke: #c2410c; stroke-width: 6; stroke-dasharray: 18 6; }
.sij-robot-g { transition: transform .45s cubic-bezier(.4, 1.3, .6, 1); }
.sij-robot-g.sij-noanim { transition: none; }
.sij-stars { animation: sij-spin 1s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sij-spin { to { transform: rotate(360deg); } }
.sij-slots { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.sij-slot { position: relative; width: 76px; height: 76px; border-radius: var(--j-r); border: 3px dashed var(--j-line); background: var(--j-panel2); display: flex; align-items: center; justify-content: center; color: var(--j-txt); cursor: pointer; }
.sij-slot.full { border-style: solid; border-color: var(--j-a); }
.sij-slot.now { border-color: var(--j-c); box-shadow: 0 0 0 4px rgba(245, 158, 11, .35); }
.sij-slot-n { position: absolute; top: 3px; left: 7px; font-size: .75rem; font-weight: 800; color: var(--j-mut); }
.sij-pad { display: grid; grid-template-columns: repeat(3, 72px); grid-template-areas: ". up ." "left . right" ". down ."; gap: 6px; justify-content: center; margin: 6px auto; }
.sij-pad.sm { grid-template-columns: repeat(3, 56px); }
.sij-arrow { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; border-radius: var(--j-r); background: var(--j-panel2); border: 2px solid var(--j-line); cursor: pointer; }
.sij-pad.sm .sij-arrow { min-height: 48px; }
.sij-arrow:active { transform: scale(.95); }
.sij-arrow-up { grid-area: up; } .sij-arrow-down { grid-area: down; } .sij-arrow-left { grid-area: left; } .sij-arrow-right { grid-area: right; }

/* ---------- baskets ---------- */
.sij-next { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 104px; background: var(--j-panel2); border-radius: var(--j-r); border: 1px solid var(--j-line); padding: 8px; }
.sij-next-l { font-weight: 800; color: var(--j-mut); }
.sij-next-n { font-weight: 700; font-size: 1.1rem; }
.sij-item { position: relative; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 50%; padding: 6px; animation: sij-pop .35s ease-out; }
.sij-item.sm { padding: 2px; }
@keyframes sij-pop { from { transform: scale(.6); opacity: 0; } }
.sij-baskets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.sij-bcol { display: flex; flex-direction: column; gap: 8px; }
.sij-basket { width: 100%; min-height: 110px; display: flex; align-items: center; justify-content: center; border-radius: var(--j-r); border: 3px solid var(--j-line); background: var(--j-panel2); cursor: pointer; }
.sij-basket-1 { border-color: var(--j-a); }
.sij-basket-2 { border-color: var(--j-b); }
.sij-basket:disabled { opacity: .75; cursor: default; }
.sij-in { display: flex; flex-wrap: wrap; gap: 6px; min-height: 60px; padding: 6px; border-radius: var(--j-r); background: rgba(255, 255, 255, .04); }
.sij-in-b { width: 56px; height: 56px; min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 2px solid var(--j-line); background: #f8fafc; cursor: pointer; }
.sij-in-m { position: relative; width: 56px; height: 64px; display: flex; flex-direction: column; align-items: center; border-radius: 12px; border: 2px dashed var(--j-c); background: #fff7ed; animation: sij-pop .35s ease-out; }
.sij-why { font-size: .68rem; font-weight: 800; color: #7c2d12; }
.sij-rulebox { margin-top: 8px; }

/* ---------- rangoli ---------- */
.sij-rang-bg { fill: #2b1d4f; stroke: #f59e0b; stroke-width: 2; stroke-dasharray: 2 6; }
.sij-petal path { stroke: #fde68a; stroke-width: 2; }
.sij-petal.empty path { stroke: #8b86c9; stroke-dasharray: 5 4; }
.sij-petal.mach path { stroke: #fff; stroke-width: 3; stroke-dasharray: 7 4; animation: sij-pop .3s ease-out; transform-box: fill-box; transform-origin: center; }
.sij-petal.next path { stroke: var(--j-c); stroke-width: 4; animation: sij-glow 1.2s ease-in-out infinite alternate; }
@keyframes sij-glow { from { fill: rgba(245, 158, 11, .05); } to { fill: rgba(245, 158, 11, .35); } }
.sij-petal-n { font-size: 11px; font-weight: 700; fill: var(--j-mut); }
.sij-palette { display: flex; gap: 10px; flex-wrap: wrap; }
.sij-sw { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid transparent; background: var(--j-panel2); cursor: pointer; padding: 0; }
.sij-sw.on { border-color: #fff; box-shadow: 0 0 0 3px var(--j-c); }
.sij-strip { margin-top: 8px; }
.sij-strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; background: var(--j-panel2); border-radius: var(--j-r); }
.sij-dot { display: inline-flex; padding: 2px; border-radius: 8px; border-bottom: 4px solid transparent; }
.sij-dot.blk { border-bottom-color: var(--j-c); }
.sij-dot.rep { border-bottom-color: var(--j-line); }
.sij-dot.brk { margin-left: 10px; }
.sij-dot.mach { outline: 2px dashed #fff; }
.sij-strip-q { font-weight: 800; padding: 0 6px; }
.sij-compare { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 1.05rem; }

/* ---------- mangoes ---------- */
.sij-key { display: flex; gap: 16px; color: var(--j-mut); font-size: .9rem; margin: 6px 0; }
.sij-mangos { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; margin: 8px 0; }
.sij-mango { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; min-height: 140px; border-radius: var(--j-r); background: var(--j-panel2); border: 2px solid var(--j-line); color: var(--j-txt); font: inherit; cursor: pointer; }
div.sij-mango { cursor: default; }
.sij-mango.mach { border-style: dashed; border-color: var(--j-c); animation: sij-pop .35s ease-out; }
.sij-mango.wait { opacity: .45; }
.sij-prow { display: flex; align-items: center; gap: 4px; font-size: .8rem; }
.sij-pips { display: inline-flex; gap: 2px; }
.sij-pips i { width: 9px; height: 9px; border-radius: 2px; background: #3f3b78; display: block; }
.sij-pips.y i.on { background: #facc15; }
.sij-pips.s i.on { background: #f9a8d4; }
.sij-badge { font-size: .82rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.sij-badge.q { color: var(--j-mut); border: 1px dashed var(--j-line); }
.sij-badge.ripe { background: #fde047; color: #422006; }
.sij-badge.raw { background: #14532d; color: #dcfce7; border: 1px solid #4ade80; }
.sij-badge.m { outline: 2px dashed var(--j-c); outline-offset: 1px; }
.sij-why2 { font-size: .72rem; color: var(--j-mut); text-align: center; }
.sij-zone { fill: rgba(245, 158, 11, .14); }
.sij-thresh { stroke: var(--j-c); stroke-width: 3; stroke-dasharray: 8 5; }
.sij-mk-ripe { fill: #fde047; stroke: #422006; stroke-width: 1.5; }
.sij-mk-raw { fill: none; stroke: #f8fafc; stroke-width: 2; }
.sij-odd { fill: none; stroke: #f8fafc; stroke-width: 2; stroke-dasharray: 3 3; }

/* ---------- greedy grid ---------- */
.sij-brick { fill: #9a3412; stroke: #431407; stroke-width: 2; }
.sij-mortar { stroke: #431407; stroke-width: 2; fill: none; pointer-events: none; }
.sij-startbox { fill: none; stroke: var(--j-b); stroke-width: 3; stroke-dasharray: 6 4; }
.sij-path-kid { fill: none; stroke: var(--j-b); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.sij-path-greedy { fill: none; stroke: var(--j-c); stroke-width: 5; stroke-dasharray: 2 9; stroke-linecap: round; stroke-linejoin: round; }
.sij-board { touch-action: none; }
.sij-kv-kid { box-shadow: inset 4px 0 0 var(--j-b); padding-left: 8px; }
.sij-kv-greedy { box-shadow: inset 4px 0 0 var(--j-c); padding-left: 8px; }

/* ---------- animal tree ---------- */
.sij-animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.sij-animal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 6px 4px; background: #f1f5f9; color: #0f172a; border-radius: var(--j-r); border-bottom: 5px solid var(--gc, #64748b); font-size: .85rem; }
.sij-animal small { font-weight: 700; }
.sij-animal.res { animation: sij-pop .35s ease-out; }
.sij-animal.res b { font-size: .78rem; }
.sij-animal.ok b { color: #047857; }
.sij-animal.no b { color: #b45309; }
.sij-animal.no { outline: 3px dashed #b45309; outline-offset: -3px; }
.sij-node { fill: var(--j-panel2); stroke: var(--j-a); stroke-width: 2.5; }
.sij-node-t { font-size: 13px; font-weight: 700; fill: var(--j-txt); }
.sij-node-t.muted { fill: var(--j-mut); font-weight: 500; }
.sij-leaf { fill: #f8fafc; stroke-width: 4; }
.sij-leaf + .sij-node-t, .sij-leaf ~ text { fill: #0f172a; }
.sij-leaf-hl .sij-leaf { fill: #fef3c7; filter: drop-shadow(0 0 6px rgba(245, 158, 11, .8)); }
.sij-edge { fill: none; stroke: var(--j-line); stroke-width: 3; }
.sij-edge.hl { stroke: var(--j-c); stroke-width: 5; }
.sij-edge-t { font-size: 11px; font-weight: 700; fill: var(--j-mut); }
.sij-test { margin-top: 8px; }

/* ---------- pixels ---------- */
.sij-pixwrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: center; }
.sij-pixwrap .si-stage { flex: 1 1 240px; max-width: 320px; margin: 0; }
.sij-pix { touch-action: none; }
.sij-pix-bg { fill: #1b1838; }
.sij-px { fill: #2e2a63; stroke: #3f3b80; stroke-width: 1; }
.sij-px.on { fill: #f8fafc; }
.sij-px.both { fill: #34d399; stroke: #064e3b; stroke-width: 2; }
.sij-px.extra { fill: #fb923c; stroke: #7c2d12; stroke-width: 2; }
.sij-px.miss { fill: #2e2a63; stroke: #34d399; stroke-width: 2.5; stroke-dasharray: 4 3; }
.sij-nums { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.25; background: var(--j-panel2); padding: 8px 10px; border-radius: var(--j-r); border: 1px solid var(--j-line); }
.sij-nrow { display: flex; gap: 6px; }
.sij-nrow span { width: 1ch; color: var(--j-mut); }
.sij-nrow span.one { color: #fde047; font-weight: 800; }
.sij-ncount { margin-top: 6px; font-size: .8rem; color: var(--j-mut); font-family: inherit; }
.sij-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.sij-tpl { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: var(--j-r); background: var(--j-panel2); border: 2px solid var(--j-line); }
.sij-tpl.on { border-color: var(--j-good); box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.sij-tpl-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sij-tpl-r small { color: var(--j-mut); font-size: .75rem; }
.sij-mini { background: #1b1838; border-radius: 6px; flex: none; }
.sij-mini-on { fill: #c4b5fd; }
.sij-legend .lg-both { color: #34d399; } .sij-legend .lg-extra { color: #fb923c; } .sij-legend .lg-miss { color: #6ee7b7; }

/* ---------- weights ---------- */
.sij-plotbox { fill: none; stroke: var(--j-line); stroke-width: 1.5; }
.sij-dline { stroke: var(--j-c); stroke-width: 4; stroke-linecap: round; }
.sij-zone-t { font-size: 13px; font-weight: 800; fill: var(--j-c); opacity: .75; letter-spacing: 1px; }
.sij-pt { stroke: #0f172a; stroke-width: 2; }
.sij-wrongring { fill: none; stroke: #fca5a5; stroke-width: 2.5; stroke-dasharray: 4 3; }
.sij-wrong-x { font-size: 13px; font-weight: 800; fill: #fca5a5; }
.sij-hot { fill: none; stroke: #fff; stroke-width: 3; animation: sij-ring 1s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sij-ring { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.3); } }
.sij-formula { text-align: center; font-size: 1rem; background: var(--j-panel2); border-radius: var(--j-r); padding: 8px; border: 1px solid var(--j-line); overflow-wrap: anywhere; }
.sij-sliders { display: grid; gap: 6px; margin: 8px 0; }
.sij .si-slider input[type=range] { min-height: 44px; width: 100%; }
.sij-log { font-size: .9rem; background: var(--j-panel2); border-radius: var(--j-r); padding: 0 10px; border-left: 4px solid var(--j-c); }
.sij-log:empty { display: none; }
.sij-log > div { padding: 6px 0; }
.sij-log .si-mono { font-size: .82rem; color: var(--j-mut); overflow-wrap: anywhere; }

/* ---------- proverbs ---------- */
.sij-prov { max-height: 230px; overflow-y: auto; background: var(--j-panel2); border: 1px solid var(--j-line); border-radius: var(--j-r); padding: 6px 8px; }
.sij-pline { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0; color: var(--j-mut); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.sij-pline.done { color: var(--j-txt); }
.sij-pline.now { background: rgba(245, 158, 11, .15); }
.sij-w { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.sij-pline.done .sij-w { background: rgba(168, 85, 247, .18); }
.sij-w.f, .sij-pline.done .sij-w.f { background: var(--j-c); color: #1f1300; font-weight: 700; }
.sij-counts { margin: 8px 0; width: 100%; max-width: 420px; }
.sij-counts caption { text-align: left; font-weight: 700; padding: 4px 0; }
.sij-counts tr.pick td { background: rgba(245, 158, 11, .25); font-weight: 800; }
.sij-sent { display: flex; flex-wrap: wrap; gap: 6px; min-height: 52px; align-items: center; font-size: 1.15rem; padding: 10px; margin: 8px 0; border-radius: var(--j-r); border: 2px dashed var(--j-a); }
.sij-gen { margin-top: 10px; }

/* ---------- treasure Q-table ---------- */
.sij-qcell { stroke: #1e1b4b; stroke-width: 2; transition: fill .25s; }
.sij-qv { font-size: 10px; fill: #e0e7ff; font-family: ui-monospace, Menlo, Consolas, monospace; }
.sij-qv.b { font-weight: 800; fill: #fff; text-decoration: underline; }
.sij-qv.strong { font-weight: 800; font-size: 12px; fill: #fff; }
.sij-qtable { font-size: .85rem; max-width: 420px; }
.sij-qtable td.best { background: rgba(245, 158, 11, .3); font-weight: 800; }
.sij-trainbox:empty { display: none; }

@media (max-width: 420px) {
  .sij-pad { grid-template-columns: repeat(3, 64px); }
  .sij-slot { width: 68px; height: 68px; }
  .sij-bar { grid-template-columns: 6.5em 1fr 3.4em; }
  .sij-nums { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .sij *, .sij *::before, .sij *::after { animation: none !important; transition: none !important; }
}