/* SIGA Workspace + activity engines — Learn By Doing (2026-10-19).
   The slide-over takes ~3/4 of the right side; the page slides left beneath it.
   Loaded only on pages that use the workspace (academies, chess, game rooms). */

/* ---------- page slide ---------- */
body > .hero, body > main, body > footer { transition: transform .38s cubic-bezier(.2,.8,.25,1); }
body.ws-open > .hero, body.ws-open > main, body.ws-open > footer { transform: translateX(-42px); }
@media (max-width: 900px) {
  body.ws-open > .hero, body.ws-open > main, body.ws-open > footer { transform: none; }
}

/* ---------- scrim + panel ---------- */
.ws-scrim { position: fixed; inset: 0; background: rgba(43,33,64,.48); opacity: 0; pointer-events: none; transition: opacity .32s ease; z-index: 148; }
.ws-scrim.open { opacity: 1; pointer-events: auto; }
.ws-panel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(75vw, 1180px);
  background: #fffdf6; border-left: 4px solid var(--ink, #2b2140); box-shadow: -18px 0 44px rgba(43,33,64,.35);
  transform: translateX(103%); transition: transform .38s cubic-bezier(.2,.8,.25,1);
  display: flex; flex-direction: column; z-index: 150; }
.ws-panel.open { transform: translateX(0); }
@media (max-width: 900px) { .ws-panel { width: 100vw; border-left: 0; } }

.ws-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(90deg, var(--purple-deep, #4527a0), var(--purple, #6c3ce9)); color: #fff; }
.ws-titlebox { flex: 1; min-width: 0; }
.ws-title { margin: 0; font-size: 21px; line-height: 1.15; color: #fff; }
.ws-sub { margin: 2px 0 0; font-size: 13.5px; opacity: .92; }
.ws-xp { flex: none; }
.ws-x { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; font-weight: 900; cursor: pointer; }
.ws-backbtn { flex: none; }

.ws-progress { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #efe9ff; border-bottom: 2px solid rgba(43,33,64,.12); }
.ws-progbar { flex: 1; height: 12px; background: #fff; border: 2px solid var(--ink, #2b2140); border-radius: 999px; overflow: hidden; }
.ws-progbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #12c98d, #2fb9f0); transition: width .3s ease; }
.ws-progtext { font-size: 13px; font-weight: 800; white-space: nowrap; }

.ws-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
.ws-notes { padding: 0 16px; }
.ws-notes-details { background: #fff; border: 3px solid var(--ink, #2b2140); border-radius: 16px; padding: 10px 14px; margin-bottom: 12px; }
.ws-notes-details summary { font-weight: 900; font-size: 16px; cursor: pointer; padding: 6px 0; }
.ws-notes-steps { margin: 8px 0; padding-left: 22px; font-size: 15.5px; line-height: 1.45; }
.ws-notes-steps li { margin: 5px 0; }
.ws-notes-tip { background: #241b3a; color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 15px; }

.ws-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 3px solid var(--ink, #2b2140); background: #fff; min-height: 70px; }
.ws-foot-spacer { flex: 1; }
.ws-done-banner { font-weight: 900; font-size: 17px; color: #0a7a52; }
.ws-alldone { font-weight: 900; font-size: 15.5px; }
.ws-node-hint { font-size: 14px; font-weight: 700; }
.ws-node-wrap { max-width: 860px; margin: 0 auto; }
.ws-goal { font-size: 18.5px; font-weight: 800; line-height: 1.35; margin: 2px 0 12px; }

/* ---------- lesson cards (track.js) ---------- */
.ws-do { width: 100%; font-size: 19px; min-height: 60px; }
.ws-undo { font-size: 13.5px; min-height: 40px; padding: 8px 14px; }
article.card.nextup { outline: 5px solid var(--sun, #ffc21c); outline-offset: 2px; }
.badge-next { background: var(--sun, #ffc21c); color: var(--ink, #2b2140); font-weight: 900; }
.ws-cardnotes { margin: 10px 0; }
.ws-cardnotes summary { font-weight: 800; cursor: pointer; padding: 6px 0; }

/* ---------- shared engine chrome ---------- */
.act-feedback { min-height: 30px; margin: 10px 0; padding: 9px 13px; border-radius: 12px; background: #eafaf3; border: 2px solid #12c98d; font-weight: 800; font-size: 16px; line-height: 1.35; }
.act-feedback:empty { background: transparent; border-color: transparent; }
.act-feedback.bad { background: #fdeceb; border-color: #f4502f; }
.act-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.act-tool { min-height: 52px; padding: 10px 14px; font-size: 16.5px; }
.act-tool.sel { outline: 4px solid var(--purple, #6c3ce9); outline-offset: 1px; }
.act-chip { min-height: 52px; padding: 10px 16px; font-size: 16.5px; font-weight: 800; }
.act-chip.sel { outline: 4px solid var(--purple, #6c3ce9); outline-offset: 1px; }
.act-chip.placed { opacity: .45; pointer-events: none; }
.act-big { min-height: 60px; font-size: 19px; padding: 14px 24px; }
.act-shake { animation: act-shake .3s ease; }
@keyframes act-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.act-pop { animation: act-pop .25s ease; }
@keyframes act-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* grids (sim-build / race / pixel) */
.act-grid { display: grid; gap: 5px; margin: 10px 0; max-width: 560px; }
.act-cell { position: relative; aspect-ratio: 1; border: 2.5px solid rgba(43,33,64,.35); border-radius: 10px; background: #fdf3d8; font-size: clamp(17px, 3.4vw, 26px); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; min-height: 44px; }
.act-cell.platform { background: #b07a4f; border-color: #7c4a21; }
.act-cell.lava { background: #ff7043; border-color: #c62828; }
.act-cell.goal { background: #ffe082; border-color: #f9a825; }
.act-cell.road { background: #cfd8dc; border-color: #78909c; }
.act-cell.gate { background: #a5d6a7; border-color: #2e7d32; }
.act-cell.path { background: #fff3c4; }
.act-cell.litpath { background: #ffe082; }
.act-cell.dropped { opacity: .35; }
.act-cell .act-token { font-size: 1.25em; line-height: 1; pointer-events: none; }
.act-cell .act-anchor { position: absolute; top: 1px; right: 3px; font-size: 12px; pointer-events: none; }
.act-cell .act-chk { position: absolute; bottom: 1px; left: 3px; font-size: 12px; pointer-events: none; }

/* circuit */
.act-circuit { display: flex; align-items: stretch; gap: 8px; margin: 12px 0; overflow-x: auto; padding-bottom: 6px; }
.act-station { flex: none; width: 96px; border: 3px solid var(--ink, #2b2140); border-radius: 14px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px; text-align: center; font-weight: 800; font-size: 14px; }
.act-station .act-bigicon { font-size: 38px; line-height: 1; }
.act-station.on { background: #fff59d; box-shadow: 0 0 0 4px #ffc21c, 0 0 26px #ffc21c; }
.act-station.open { background: #c8e6c9; }
.act-station.ring { animation: act-shake .4s ease; background: #ffe0b2; }
.act-track { display: flex; align-items: center; gap: 4px; flex: 1; }
.act-slot { position: relative; flex: 1; min-width: 40px; height: 64px; border: 2.5px dashed rgba(43,33,64,.4); border-radius: 10px; background: #f7f1de; font-size: 21px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.act-slot.wire { border-style: solid; background: #ef9a9a; border-color: #c62828; }
.act-slot.booster { border-style: solid; background: #ce93d8; border-color: #6a1b9a; }
.act-slot.lit { background: #ffc21c !important; border-color: #ff8f00; box-shadow: 0 0 12px #ffc21c; }
.act-slot .act-str { position: absolute; bottom: 1px; right: 4px; font-size: 11.5px; font-weight: 900; color: #6a1b9a; }
.act-levers { display: flex; gap: 8px; justify-content: center; margin: 6px 0; }
.act-lever.on { outline: 4px solid #12c98d; }

/* code-play */
.act-code { background: #241b3a; color: #d7f9e3; border-radius: 14px; padding: 13px 15px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin: 10px 0; border: 3px solid var(--ink, #2b2140); }
.act-code .act-blank { background: #ffc21c; color: #241b3a; border-radius: 6px; padding: 0 7px; font-weight: 900; }
.act-output { background: #141021; color: #7dffb0; border-radius: 12px; padding: 11px 13px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; min-height: 52px; white-space: pre-wrap; margin: 10px 0; border: 3px solid var(--ink, #2b2140); }
.act-stage { position: relative; border: 3px solid var(--ink, #2b2140); border-radius: 16px; min-height: 190px; margin: 10px 0; padding: 12px; background: linear-gradient(180deg, #bfe3f7 0%, #dff3d8 78%); overflow: hidden; }
.act-stage.night { background: linear-gradient(180deg, #26355e 0%, #4a639f 78%); color: #fff; }
.act-stage.sunset { background: linear-gradient(180deg, #ff9e57 0%, #ffd97a 78%); }
.act-stage.rain { background: linear-gradient(180deg, #90a4ae 0%, #b0bec5 78%); }
.act-actor { font-size: 42px; line-height: 1.1; display: inline-block; transition: transform .3s ease, margin .3s ease; }
.act-bubble { display: inline-block; background: #fff; border: 2.5px solid var(--ink, #2b2140); border-radius: 14px; padding: 7px 12px; font-weight: 800; font-size: 16.5px; margin: 6px; }
.act-health { height: 18px; background: #fff; border: 2.5px solid var(--ink, #2b2140); border-radius: 999px; overflow: hidden; max-width: 320px; }
.act-health i { display: block; height: 100%; background: #e53935; transition: width .5s ease; }
.act-part { width: 92px; height: 92px; border: 3.5px solid var(--ink, #2b2140); border-radius: 14px; margin: 8px 0; }
.act-stepper { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 800; font-size: 16.5px; }
.act-queue { display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px; margin: 8px 0; }
.act-qchip { background: #fff; border: 2.5px solid var(--ink, #2b2140); border-radius: 10px; padding: 7px 11px; font-weight: 800; font-size: 15.5px; }
.act-slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.act-slotbox { border: 2.5px dashed rgba(43,33,64,.5); border-radius: 10px; padding: 9px 13px; font-weight: 800; min-width: 120px; text-align: center; background: #fff; }
.act-slotbox.filled { border-style: solid; background: #eafaf3; }
.act-target { font-size: 44px; min-width: 84px; min-height: 84px; border-radius: 50%; }
.act-kit { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* spot-fix */
.act-scene { position: relative; border: 3px solid var(--ink, #2b2140); border-radius: 16px; min-height: 300px; margin: 10px 0; background: linear-gradient(180deg, #cfe8f7, #eef9e4); overflow: hidden; }
.act-scene-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; opacity: .16; pointer-events: none; }
.act-scene-label { position: absolute; left: 10px; top: 8px; font-weight: 900; font-size: 14.5px; background: rgba(255,255,255,.85); border-radius: 8px; padding: 3px 9px; }
.act-spot { position: absolute; transform: translate(-50%,-50%); width: 62px; height: 62px; border-radius: 50%; border: 3.5px solid var(--ink, #2b2140); background: #fff; font-size: 27px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(43,33,64,.4); z-index: 2; }
.act-spot.fixed { background: #c8e6c9; border-color: #2e7d32; }
.act-spot.seen { background: #e3f2fd; border-color: #1565c0; }
.act-spot-label { position: absolute; transform: translate(-50%, 0); font-size: 12px; font-weight: 800; background: rgba(255,255,255,.9); border-radius: 6px; padding: 1px 6px; white-space: nowrap; z-index: 2; }

/* do-along */
.act-dots { display: flex; gap: 7px; margin: 10px 0; font-size: 15px; }
.act-dots .on { color: var(--purple, #6c3ce9); }
.act-dots .off { color: rgba(43,33,64,.3); }
.act-docard { background: #fff; border: 3.5px solid var(--ink, #2b2140); border-radius: 20px; padding: 24px 20px; margin: 10px 0; box-shadow: 0 6px 0 rgba(43,33,64,.25); }
.act-docard .act-action { font-size: 23px; font-weight: 900; line-height: 1.3; margin: 0 0 8px; }
.act-docard .act-sub { font-size: 16px; margin: 0; }
.act-next { width: 100%; margin-top: 8px; }
.act-next[disabled] { opacity: .45; pointer-events: none; }

/* launcher tiles (game rooms) */
.ws-launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.ws-launch-tile { background: #fff; border: 3px solid var(--ink, #2b2140); border-radius: 18px; padding: 16px; text-align: left; cursor: pointer; box-shadow: 0 5px 0 rgba(43,33,64,.3); font-family: inherit; }
.ws-launch-tile .ws-launch-icon { font-size: 38px; display: block; margin-bottom: 6px; }
.ws-launch-tile .ws-launch-name { font-weight: 900; font-size: 18px; display: block; }
.ws-launch-tile .ws-launch-sub { font-size: 13.5px; display: block; margin: 3px 0 10px; }
.ws-launch-tile .ws-launch-play { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .ws-panel, .ws-scrim, body > .hero, body > main, body > footer { transition: none; }
}