/* Stoichiometry Bakery: the order ticket + answer panel and the bakery scene inside the practice shell's stage. */
.sb { position: absolute; inset: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 10px; padding: 8px 12px; }
.sb-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 2px; }
.sb-ticket { padding: 6px 12px 8px; border-radius: var(--tlg-radius-lg); border: 2px dashed #c79a5a; background: #fff8ec; color: #2b2015; }
.sb-ticket-k { margin: 0 0 2px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tlg-tracking-caps); color: #a0461f; }
.sb-given { margin: 0; display: grid; gap: 2px; }
.sb-given div { display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 16px; line-height: 1.3; }
.sb-given dt { font-weight: 700; color: #6a5236; }
.sb-given dd { margin: 0; text-align: right; font-weight: 700; }
html[data-theme="dark"] .sb-ticket { background: #2a2118; color: #f3e7d4; border-color: #8a6a3e; }
html[data-theme="dark"] .sb-given dt { color: #d9c3a0; }
html[data-theme="dark"] .sb-ticket-k { color: #f0b48a; }
.sb-ctl { display: flex; flex-direction: column; gap: 8px; }
.sb-row-k { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.sb-chips { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.sb-chips--3.sb-chips { grid-template-columns: repeat(3, 1fr); }
.sb-row--pick .sb-chips { grid-template-columns: 1fr; }
.sb-chip { min-height: 44px; padding: 4px 8px; font-size: 16px; line-height: 1.2; border-radius: var(--tlg-radius-sm); white-space: normal; }
.sb-row--pick .sb-chip { text-align: left; justify-content: flex-start; }
.sb-step { display: flex; align-items: center; gap: 8px; }
.sb-step-b { min-width: 48px; min-height: 44px; font-size: 22px; }
.sb-step-v { min-width: 64px; text-align: center; font-size: 26px; font-weight: 800; padding: 4px 8px; border-radius: 8px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); }
.sb-step-v:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.sb-ovencount { margin: 0; font-size: 16px; }
.sb-tip { margin: 0; font-size: 16px; color: var(--tlg-text-muted); }
.sb-msg { margin: 0; min-height: 1.2em; font-size: 16px; font-weight: 700; color: var(--tlg-danger, #b42318); }
html[data-theme="dark"] .sb-msg { color: #ffb4a8; }
.sb-num .pn-key { min-height: 42px; }
.sb-num .pn-input { font-size: 26px; padding: 2px 0; }
.sb-ex { display: grid; gap: 4px; font-size: 16px; font-weight: 700; }
.sb-ex-in { min-height: 44px; font: inherit; font-size: 22px; padding: 4px 10px; border-radius: 8px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); }

.sb-view { position: relative; min-width: 0; min-height: 0; display: flex; align-items: flex-start; justify-content: center; }
.sb-scene { position: relative; width: 100%; aspect-ratio: 800 / 600; border-radius: var(--tlg-radius-lg); overflow: hidden; border: var(--tlg-border-width) solid var(--tlg-border); user-select: none; -webkit-user-select: none; }
.sb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sb-wall { fill: url(#sb-brick); }
html[data-theme="dark"] .sb-wall { fill: url(#sb-brick-dark); }
/* the chalkboard (scene units 800 × 600 → %) */
.sb-chalk { position: absolute; left: 1.5%; top: 1.6%; width: 72%; min-height: 18%; padding: 6px 14px 8px; border-radius: 10px; background: linear-gradient(#2f3d36, #23302a); border: 6px solid #8a5a33; color: #f4f1e6; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.sb-chalk-k { margin: 0; font-size: 16px; color: #cfe8d6; font-style: italic; }
.sb-eq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; font-family: var(--tlg-font, system-ui, sans-serif); font-size: 24px; line-height: 1.2; }
.sb-eq-term { display: inline-flex; flex-direction: column; align-items: center; }
.sb-eq-term > span:first-child { align-self: flex-start; }
.sb-eq-c { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border: 3px solid #ffd166; border-radius: 50%; color: #ffd166; font-weight: 800; font-size: 20px; margin-right: 2px; }
.sb-eq-term { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.sb-eq-f { font-weight: 700; }
.sb-eq-batch { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 0; }
.sb-eq-batch b { font-size: 16px; color: #ffd166; }
.sb-eq-arrow, .sb-eq-plus { align-self: center; }
.sb-batchmol { display: block; }
/* oven window, rack, mass bar */
.sb-ovenwin { position: absolute; z-index: 2; left: 77.5%; top: 36%; width: 19%; height: 24%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; pointer-events: none; }
.sb-ovenwin.is-flash { filter: brightness(1.8); }
.sb-ow-m { display: inline-block; }
.sb-rack { position: absolute; z-index: 2; left: 74%; top: 63.5%; width: 25%; height: 9%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0; }
.sb-rk-m { animation: sb-slide .45s ease-out both; }
@keyframes sb-slide { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.sb-massbar { position: absolute; left: 1.5%; right: 1.5%; bottom: 1.5%; display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 4px 12px; border-radius: 10px; background: rgba(255, 252, 244, .95); color: #2b2015; border: 2px solid #c79a5a; font-size: 16px; }
.sb-mb-bar { height: 10px; border-radius: 5px; background: #e9dcc4; overflow: hidden; }
.sb-mb-bar i { display: block; height: 100%; background: #2e8b57; animation: sb-grow .8s ease-out; }
@keyframes sb-grow { from { width: 0; } }
.sb-mb-ok { font-weight: 800; color: #1f6b3f; }
/* particles */
.sb-tray, .sb-ovenzone { position: absolute; border-radius: 14px; }
.sb-tray { left: 1.5%; top: 66%; width: 70%; height: 32.5%; background: rgba(255, 255, 255, .35); border: 2px dashed #8a6a3e; }
.sb-ovenzone { left: 75%; top: 25%; width: 24%; height: 42%; border: 3px dashed transparent; }
html.pdz-armed .sb-ovenzone, .sb-ovenzone.is-over { border-color: #ffd166; background: rgba(255, 209, 102, .18); }
.sb-zone-k { margin: 0; padding: 2px 8px; font-size: 16px; font-weight: 800; color: #3b2a12; }
.sb-ovenzone .sb-zone-k { color: #ffd166; text-align: center; }
.sb-tray-slot { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 6px; }
.sb-oven-slot { position: absolute; left: 6%; right: 6%; top: 26%; bottom: 14%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px; }
.sb-tok { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: 62px; padding: 2px; border-radius: 10px; background: rgba(255, 255, 255, .85); border: 2px solid #8a6a3e; cursor: grab; }
.sb-tok:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.sb-tok-f { font-size: 16px; font-weight: 800; color: #2b2015; line-height: 1; }
.sb-oven-slot .sb-tok { width: 44px; }
.sb-oven-slot .sb-tok svg { width: 38px; height: 30px; }
.sb-oven-slot .sb-tok-f { display: none; }
/* the train */
.sb-train { position: absolute; left: 1.5%; top: 25%; width: 72%; bottom: 2%; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; background: rgba(255, 252, 244, .93); border: 2px solid #c79a5a; overflow: hidden; }
.sb-train .pfc { --pfc-car-w: 104px; }
.sb-train .pfc-unit { white-space: normal; text-align: center; line-height: 1.1; }
.sb-train .pfc-tok { white-space: normal; }
/* train orders: the train takes the whole bench; the oven's output shows in a strip along the bottom */
.sb--train .sb-train { left: 1.5%; right: 1.5%; width: auto; top: 23.5%; bottom: 12.5%; gap: 2px; padding: 4px 6px; }
.sb--train .sb-mb-bar { display: none; }
.sb--train .sb-massbar { grid-template-columns: auto auto 1fr; padding: 2px 10px; }
.sb--train .sb-rack { height: 10%; }
.sb--train .sb-ovenwin { display: none; }
.sb--train .sb-rack { left: 1.5%; top: auto; bottom: 1.5%; width: 34%; height: 12%; justify-content: flex-start; padding: 0 8px; border-radius: 10px; background: rgba(255, 252, 244, .9); }
.sb--train .sb-rack:empty { display: none; }
.sb--train .sb-massbar { left: 37%; }
.sb-train-yard { border-top: 2px dashed #c79a5a; padding-top: 4px; }
.sb-scene.is-locked .sb-train-yard { display: none; }
/* limiting */
.sb-sacks { position: absolute; left: 4%; top: 30%; width: 66%; height: 52%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sb-sack { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; border: 3px solid transparent; cursor: pointer; background: rgba(255, 255, 255, .18); }
.sb-sack svg { width: 70%; height: auto; }
.sb-sack[aria-checked="true"] { border-color: #ffd166; background: rgba(255, 209, 102, .25); }
.sb-sack:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.sb-sack-g { font-size: 22px; font-weight: 800; color: #fff8ec; background: rgba(43, 32, 21, .75); padding: 2px 12px; border-radius: 8px; }
.sb-sack-left { font-size: 16px; font-weight: 800; color: #1f2a1c; background: #d7f5d0; padding: 2px 10px; border-radius: 8px; }
.sb-sack.is-empty svg { opacity: .45; }
/* bench: scale + bowl */
.sb-scale { position: absolute; left: 6%; top: 50%; width: 28%; height: 18%; border-radius: 12px; background: linear-gradient(#e9edf1, #b7c0c9); border: 3px solid #6d7680; display: grid; place-items: center; }
.sb-scale-face { display: flex; flex-direction: column; align-items: center; padding: 4px 14px; border-radius: 8px; background: #0f1a12; color: #7dff9b; font-family: ui-monospace, monospace; }
.sb-scale-k { font-size: 16px; color: #9fd7ad; }
.sb-scale-v { font-size: 24px; }
.sb-bowl { position: absolute; left: 40%; top: 52%; width: 30%; }
.sb-bowl svg { width: 100%; height: auto; display: block; }
.sb-example-svg { display: block; width: 100%; height: auto; max-height: 460px; }
@media (prefers-reduced-motion: reduce) { .sb-rk-m, .sb-mb-bar i { animation: none; } }
@media (max-width: 1100px) { .sb { grid-template-columns: 290px minmax(0, 1fr); } }
@media (max-width: 900px) { .sb { position: static; grid-template-columns: 1fr; } .sb-view { display: block; } .sb-scene { width: 100% !important; height: auto !important; } }