/* Solution Smoothie Bar: the order ticket + answers panel, the bench scene and its dials, inside the practice shell's
 * stage. Scene colors are --ssb-* tokens (dark mode below); the chart paper, labels and devices keep their own light
 * faces in both themes, like real lab equipment. */
:root {
  --ssb-wall: #dff1ee; --ssb-tile: #c3e0db; --ssb-ink: #1f3a4d;
  --ssb-ticket: #effaf8; --ssb-ticket-ink: #12312f; --ssb-ticket-line: #6fb3ab; --ssb-ticket-k: #1f6f6b;
}
html[data-theme="dark"] {
  --ssb-wall: #1d3236; --ssb-tile: #2a454a; --ssb-ink: #dbe9ef;
  --ssb-ticket: #15302d; --ssb-ticket-ink: #e3f4f1; --ssb-ticket-line: #3f8a82; --ssb-ticket-k: #8fe0d4;
}

.ssb { position: absolute; inset: 0; display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 12px; padding: 8px 12px; }
.ssb-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 2px; }
.ssb-right { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; min-height: 0; }

/* order ticket */
.ssb-ticket { padding: 6px 12px 8px; border-radius: var(--tlg-radius-lg); border: 2px dashed var(--ssb-ticket-line); background: var(--ssb-ticket); color: var(--ssb-ticket-ink); }
.ssb-ticket-k { display: flex; align-items: center; justify-content: space-between; margin: 0 0 2px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tlg-tracking-caps); color: var(--ssb-ticket-k); }
.ssb-ticket-lv { padding: 0 10px; border-radius: 999px; background: var(--ssb-ticket-k); color: var(--ssb-ticket); font-size: 16px; letter-spacing: 0; text-transform: none; }
.ssb-given { margin: 0; display: grid; gap: 2px; }
.ssb-given div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; font-size: 16px; line-height: 1.3; }
.ssb-given dt { font-weight: 700; opacity: .85; }
.ssb-given dd { margin: 0; font-weight: 700; }

/* answers */
.ssb-answers { display: flex; flex-direction: column; gap: 7px; }
.ssb-answers-k { margin: 0; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tlg-tracking-caps); color: var(--tlg-text-muted); }
.ssb-num { display: grid; grid-template-columns: minmax(0, 1fr) 156px; gap: 8px; align-items: center; font-size: 16px; font-weight: 700; line-height: 1.2; }
.ssb-num-box { display: flex; align-items: center; min-height: 44px; border: 2px solid var(--tlg-border-strong); border-radius: 10px; background: var(--tlg-surface); overflow: hidden; }
.ssb-num-box:focus-within { outline: var(--tlg-focus-width, 3px) solid var(--tlg-focus); outline-offset: 2px; }
.ssb-num-in { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tlg-text); font: inherit; font-size: 20px; font-weight: 700; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.ssb-num-u { flex: none; padding: 0 8px; align-self: stretch; display: flex; align-items: center; background: var(--tlg-surface-2); color: var(--tlg-text-muted); font-size: 16px; font-weight: 700; }
.ssb-num-in:disabled { color: var(--tlg-text); -webkit-text-fill-color: var(--tlg-text); opacity: 1; }
.ssb-q-k { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.ssb-chips { display: grid; gap: 5px; }
.ssb-chips--state { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssb-chips--state .ssb-chip { padding: 2px 6px; hyphens: manual; -webkit-hyphens: manual; }
.ssb-chip { min-height: 44px; padding: 3px 12px; font-size: 16px; line-height: 1.2; border-radius: 10px; white-space: normal; text-align: left; }
.ssb-chips--state .ssb-chip { text-align: center; border-radius: 12px; }
.ssb-chip:focus-visible { outline: var(--tlg-focus-width, 3px) solid var(--tlg-focus); outline-offset: 2px; }
.ssb-chip:disabled { cursor: default; opacity: 1; }
.ssb-chip:disabled:not([aria-checked="true"]) { opacity: .7; }
.ssb-msg { margin: 0; min-height: 1.2em; font-size: 16px; font-weight: 700; color: var(--tlg-danger, #b42318); }
html[data-theme="dark"] .ssb-msg { color: #ffb4a8; }

/* the scene */
.ssb-view { position: relative; flex: 0 1 auto; min-height: 0; display: flex; align-items: flex-start; justify-content: center; }
.ssb-scene { position: relative; width: 100%; aspect-ratio: 800 / 500; border-radius: var(--tlg-radius-lg); overflow: hidden; border: var(--tlg-border-width) solid var(--tlg-border); user-select: none; -webkit-user-select: none; }
.ssb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; font-family: var(--tlg-font, system-ui, sans-serif); }
.ssb-wall { fill: var(--ssb-wall); }
.ssb-tile { stroke: var(--ssb-tile); stroke-width: 2; fill: none; }
.ssb-wallshade { fill: #000; opacity: .05; }
.ssb-neon-t { font-size: 25px; font-weight: 800; fill: #ffe3f2; letter-spacing: .5px; }
.ssb-chalk-h { font-size: 22px; font-weight: 800; fill: #ffd166; font-style: italic; }
.ssb-chalk-t { font-size: 20px; fill: #f4f1e6; white-space: pre; }
.ssb-chalk-t.is-note { fill: #ffb4a8; font-weight: 700; }
.ssb-grad-t { font-size: 20px; font-weight: 700; fill: var(--ssb-ink); }
.ssb-grad-u { font-weight: 800; }
.ssb-lbl { font-size: 20px; font-weight: 800; fill: var(--ssb-ink); }
.ssb-btl-t { font-size: 20px; font-weight: 800; fill: #2b2015; }
.ssb-bal-read, .ssb-plate-read { font-size: 21px; font-weight: 800; fill: #7cffb2; font-variant-numeric: tabular-nums; }
.ssb-plate-read { fill: #9fe3ff; font-size: 20px; }
.ssb-led { fill: #7cffb2; }
.ssb-meter-read { font-size: 31px; font-weight: 800; fill: #7cffb2; font-variant-numeric: tabular-nums; }
.ssb-meter-u { font-size: 20px; font-weight: 700; fill: #bfe9db; }
.ssb-meter-l { font-size: 20px; font-weight: 800; fill: #ffffff; }
.ssb-stock-m { font-size: 24px; font-weight: 800; fill: #1d2433; }
.ssb-stock-t { font-size: 20px; font-weight: 700; fill: #3d3428; }
.ssb-fill-line { stroke: #d2362f; stroke-width: 3.5; stroke-dasharray: 9 6; }
.ssb-fill-lead { stroke: #d2362f; stroke-width: 2.5; stroke-dasharray: 3 5; }
.ssb-fill-tag { fill: #fff; stroke: #d2362f; stroke-width: 2.5; }
.ssb-fill-t { font-size: 21px; font-weight: 800; fill: #9b1c15; }
.ssb-stream { stroke: #cfe8f7; stroke-width: 7; stroke-dasharray: 12 7; stroke-linecap: round; }
.ssb-grains { stroke: #ffffff; stroke-width: 6; stroke-dasharray: 1 10; stroke-linecap: round; }
.ssb-tag { fill: #ffffff; stroke: #8aa0b0; stroke-width: 2; }
.ssb-thermo-t { font-size: 22px; font-weight: 800; fill: #8a1f19; }
.ssb-chart-h { font-size: 22px; font-weight: 800; fill: #3d3428; }
.ssb-chart-t { font-size: 20px; fill: #3d3428; }
.ssb-chart-k { font-weight: 800; }
.ssb-chart-v { font-weight: 800; fill: #8a2a0c; }
.ssb-curve { fill: none; stroke: #b3261e; stroke-width: 3.5; stroke-linejoin: round; }
.ssb-pt { fill: #b3261e; stroke: #fff; stroke-width: 1.5; }
.ssb-start-line { stroke: #8a7f6a; stroke-width: 2.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.ssb-tline { stroke: #1d4ed8; stroke-width: 3; stroke-dasharray: 8 5; }
.ssb-tdot { fill: #1d4ed8; stroke: #ffffff; stroke-width: 2; }
.ssb-tval-bg { fill: #ffffff; stroke: #1d4ed8; stroke-width: 2; }
.ssb-tval-t { font-size: 20px; font-weight: 800; fill: #1d4ed8; }
.ssb-ex-t { font-size: 20px; font-weight: 700; fill: var(--tlg-text, #15191f); font-family: var(--tlg-font, system-ui, sans-serif); }
.ssb-ex-t.is-k { fill: var(--ssb-ticket-k); font-weight: 800; }
.ssb-ex { width: 100%; height: auto; display: block; }

/* overlays: dots key + model label, About, the result ledger */
.ssb-key { position: absolute; left: 1.2%; bottom: 1.6%; max-width: 70%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 2px 10px; border-radius: 10px; background: rgba(9, 33, 31, .78); color: #f2fbf9; font-size: 16px; line-height: 1.3; }
.ssb-key b { color: #ffd166; }
.ssb-key-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; vertical-align: -1px; border: 1px solid rgba(255, 255, 255, .6); }
.ssb-key-dot.is-na { background: radial-gradient(circle at 35% 30%, #fff, #a77be8 35%, #5b3b9a); width: 11px; height: 11px; }
.ssb-key-dot.is-cl { background: radial-gradient(circle at 35% 30%, #fff, #3cc35a 35%, #1c7a33); }
.ssb-key-dot.is-k { background: radial-gradient(circle at 35% 30%, #fff, #c58af0 35%, #7a3fae); width: 11px; height: 11px; }
.ssb-key-dot.is-no3 { background: radial-gradient(circle at 35% 30%, #fff, #f6a540 35%, #b8650f); }
.ssb-key-xtal { display: inline-block; width: 8px; height: 15px; background: linear-gradient(135deg, #fff, #b9d3e3); border: 1px solid #7fa6bd; clip-path: polygon(0 100%, 0 20%, 50% 0, 100% 20%, 100% 100%); vertical-align: -2px; }
.ssb-about { position: absolute; right: 1.2%; bottom: 1.6%; z-index: 3; font-size: 16px; }
.ssb-about summary { list-style: none; cursor: pointer; padding: 3px 12px; min-height: 32px; display: flex; align-items: center; border-radius: 999px; background: #ffffff; color: #12312f; font-weight: 800; border: 2px solid #1f6f6b; }
.ssb-about summary::-webkit-details-marker { display: none; }
.ssb-about summary:focus-visible { outline: var(--tlg-focus-width, 3px) solid var(--tlg-focus); outline-offset: 2px; }
.ssb-about-b { position: absolute; right: 0; bottom: calc(100% + 6px); width: min(440px, 90vw); padding: 8px 14px; border-radius: 12px; background: var(--tlg-surface); color: var(--tlg-text); border: 2px solid var(--tlg-border-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); line-height: 1.35; }
.ssb-about-b p { margin: 4px 0; }
.ssb-ledger { position: absolute; left: 1.2%; right: 1.2%; bottom: calc(1.6% + 36px); z-index: 2; padding: 5px 12px 6px; border-radius: 12px; background: rgba(255, 253, 247, .97); color: #1d2433; border: 2px solid #1f6f6b; font-size: 16px; line-height: 1.3; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); animation: ssb-rise .35s ease-out both; }
.ssb-ledger p { margin: 0; }
.ssb-ledger-b { margin-top: 4px !important; display: flex; flex-wrap: wrap; gap: 6px; }
.ssb-badge { display: inline-flex; gap: 4px; align-items: center; padding: 1px 10px; border-radius: 999px; font-weight: 800; border: 2px solid; }
.ssb-badge.is-ok { background: #e3f4ea; color: #155c33; border-color: #3a9a63; }
.ssb-badge.is-bad { background: #fde8e6; color: #8a1f19; border-color: #d2362f; }
.ssb-mass { display: flex; margin-top: 4px; height: 30px; border-radius: 8px; overflow: hidden; border: 2px solid #36556b; }
.ssb-mass span { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; white-space: nowrap; overflow: hidden; font-size: 16px; color: #12212c; }
.ssb-mass-d { background: #9fcde9; flex: none; min-width: 0; animation: ssb-grow .7s ease-out both; }
.ssb-mass-s { flex: 1 1 auto; background: repeating-linear-gradient(135deg, #ffffff 0 6px, #dbe7ef 6px 12px); border-left: 2px solid #36556b; }
@keyframes ssb-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ssb-grow { from { max-width: 0; } to { max-width: 100%; } }

/* bench dials */
.ssb-dials { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ssb-dials > .ssb-dial { flex: 1 1 0; min-width: 250px; }
.ssb-dials > .ssb-dial--wide { flex-grow: 1.7; }
.ssb-dials > .ssb-dial--fixed { flex-grow: .6; min-width: 180px; }
.ssb-dial { padding: 6px 10px 4px; border-radius: var(--tlg-radius-lg, 12px); border: var(--tlg-border-width, 1px) solid var(--tlg-border); background: var(--tlg-surface); }
.ssb-dial--fixed { background: var(--tlg-surface-2); }
.ssb-dial-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.ssb-dial-l { font-size: 16px; font-weight: 800; min-width: 0; }
.ssb-dial-v { flex: none; padding: 1px 12px; border-radius: 999px; background: #1f6f6b; color: #fff; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ssb-dial-v.is-unset { background: var(--tlg-surface-2); color: var(--tlg-text-muted); font-size: 16px; font-weight: 700; border: 2px dashed var(--tlg-border-strong); }
.ssb-dial-note { margin: 4px 0 4px; font-size: 16px; color: var(--tlg-text-muted); }
.ssb-dial-c { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; margin-top: 2px; }
.ssb-dial-c.is-big { grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px; }
.ssb-step { min-width: 44px; min-height: 44px; padding: 0; border-radius: 12px; border: var(--tlg-border-width, 1px) solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); font: inherit; font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer; }
.ssb-step:hover:not(:disabled) { background: var(--tlg-surface-2); }
.ssb-step:disabled { opacity: .4; cursor: default; }
.ssb-step:focus-visible { outline: var(--tlg-focus-width, 3px) solid var(--tlg-focus); outline-offset: 2px; }
.ssb-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; font-size: 16px; }
.ssb-range:disabled { cursor: default; }
.ssb-range::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #1f6f6b var(--pct, 0%), var(--tlg-border, #d3d9df) var(--pct, 0%)); }
.ssb-range::-moz-range-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #1f6f6b var(--pct, 0%), var(--tlg-border, #d3d9df) var(--pct, 0%)); }
.ssb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -10px; border-radius: 50%; background: #ffffff; border: 4px solid #1f6f6b; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.ssb-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #ffffff; border: 4px solid #1f6f6b; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.ssb-range:focus-visible { outline: var(--tlg-focus-width, 3px) solid var(--tlg-focus); outline-offset: 2px; border-radius: 8px; }
.ssb-dial-ticks { position: relative; height: 20px; margin: -4px 66px 2px; font-size: 16px; line-height: 20px; color: var(--tlg-text-muted); }
.ssb-dial-c.is-big + .ssb-dial-ticks { margin: -4px 116px 2px; }
.ssb-dial-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
html[data-theme="dark"] .ssb-dial-v:not(.is-unset) { background: #2a8f88; }

@media (max-width: 1100px) { .ssb { grid-template-columns: 300px minmax(0, 1fr); } .ssb-num { grid-template-columns: minmax(0, 1fr) 132px; } }
@media (max-width: 900px) {
  .ssb { position: static; grid-template-columns: 1fr; }
  .ssb-panel { overflow: visible; }
  .ssb-view { display: block; }
  .ssb-scene { width: 100% !important; height: auto !important; aspect-ratio: auto; overflow: visible; display: flex; flex-direction: column; }
  .ssb-svg { position: relative; inset: auto; height: auto; aspect-ratio: 800 / 500; }
  .ssb-key, .ssb-ledger, .ssb-about { position: static; max-width: none; margin: 6px; }
  .ssb-ledger { order: 2; }
  .ssb-key { order: 3; }
  .ssb-about { order: 4; }
  .ssb-about-b { position: static; width: auto; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .ssb-ledger, .ssb-mass-d { animation: none; } }