/* Hot & Cold Pack Co. — test-bench scene, pack recipe / bond ledger, energy diagram. Scene colours are tokens so dark
   mode gets a dusk workshop; paper, glass and chemicals keep their real colours. */
:root {
  --hc-wall-1: #f3ede2; --hc-wall-2: #e6dccb; --hc-wainscot: #d8c8ae; --hc-trim: #b79f7c; --hc-wall-ink: #3b3127;
  --hc-board: #fffaf0; --hc-board-edge: #c9b48f; --hc-board-ink: #33414a; --hc-ghost: #7b6a55;
  --hc-warm: #c2410c; --hc-cool: #1c6fb5; --hc-ok: #1f7a3f; --hc-bad: #b42318;
}
html[data-theme="dark"] {
  --hc-wall-1: #33404a; --hc-wall-2: #27313a; --hc-wainscot: #303b45; --hc-trim: #4d5d6a; --hc-wall-ink: #e7edf2;
  --hc-board: #f3eee3; --hc-board-edge: #8e7c5e; --hc-ghost: #c9d4dc;
  --hc-warm: #ff9a62; --hc-cool: #7cc4ff; --hc-ok: #6fd99a; --hc-bad: #ff8a80;
}

.hc { position: absolute; inset: 0; padding: 10px; display: grid; grid-template-rows: 240px minmax(0, 1fr); gap: 10px; color: var(--tlg-text); font-size: 16px; }
.hc-scene { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid var(--tlg-border); background: var(--hc-wall-2); min-width: 0; }
.hc-svg { display: block; width: 100%; height: 100%; font-family: var(--tlg-font-body, var(--tlg-font)); }
.hc-low { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 10px; min-height: 0; }
.hc-panel { background: var(--tlg-surface); border: 2px solid var(--tlg-border); border-radius: 14px; padding: 8px 12px 10px; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.hc-phead h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.hc-psub { margin: 0; font-size: 16px; color: var(--tlg-text-muted); line-height: 1.25; }
.hc-phead--line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hc-phead--row { display: flex; align-items: center; gap: 10px; }
.hc-phead--row > div { flex: 1; min-width: 0; }

/* scene text (viewBox ≈ CSS px at 1366×768) */
.hc-t-banner { font-size: 18px; font-weight: 800; fill: #ffffff; letter-spacing: .06em; }
.hc-t-order { font-size: 16px; font-weight: 800; fill: #a8432b; letter-spacing: .08em; }
.hc-t-line { font-size: 17px; fill: #24323b; }
.hc-t-big { font-size: 21px; font-weight: 800; }
.hc-t-strong { font-weight: 800; }
.hc-t-small { font-size: 16px; fill: #4a5961; }
.hc-t-ghost { font-size: 16px; font-weight: 700; fill: var(--hc-ghost); }
.hc-t-jar { font-size: 16px; font-weight: 800; fill: #24323b; }
.hc-t-bench { font-size: 16px; font-weight: 800; fill: #fff8ee; }
.hc-t-scale { font-size: 16px; font-weight: 700; fill: var(--hc-board-ink); }
.hc-t-mark { font-size: 16px; font-weight: 700; fill: var(--hc-board-ink); }
.hc-t-mark--req { fill: #1b5468; font-weight: 800; }
.hc-t-lcdk { font-size: 16px; fill: #d7e6ec; }
.hc-t-lcd { font-size: 26px; font-weight: 800; fill: #13301c; font-variant-numeric: tabular-nums; }
.hc-t-under { font-size: 16px; font-weight: 700; fill: var(--hc-wall-ink); }
.hc-t-atom { font-size: 16px; font-weight: 800; fill: #10202a; }
.hc-t-pill { font-size: 16px; font-weight: 800; fill: #ffffff; }
.hc-t-cham { font-size: 16px; font-weight: 800; fill: #36515e; }
.hc-t-charth { font-size: 17px; font-weight: 800; fill: #24323b; }
.hc-t-chartk { font-size: 16px; fill: #55636b; }
.hc-t-chart { font-size: 20px; font-weight: 800; fill: #24323b; }
.hc-t-num { font-variant-numeric: tabular-nums; }
.hc-t-net { font-size: 16px; font-weight: 800; fill: #24323b; }
.hc-wainscot { fill: var(--hc-wainscot); }
.hc-trim { stroke: var(--hc-trim); stroke-width: 3; }
.hc-liquid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s var(--tlg-ease, ease); }

/* groups and marks */
.hc-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hc-ghead { display: flex; align-items: baseline; gap: 8px; }
.hc-k { margin: 0; font-size: 16px; font-weight: 800; }
.hc-out { margin-left: auto; font-size: 18px; font-weight: 800; color: var(--ps-accent); font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .hc-out { color: #8fd6ec; }
.hc-mark { min-width: 0; font-size: 18px; font-weight: 900; line-height: 1; }
.hc-mark.is-ok, .hc-mark.is-bad { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; flex: none; }
.hc-mark.is-ok { background: var(--hc-ok); }
.hc-mark.is-bad { background: var(--hc-bad); border-radius: 6px; }
html[data-theme="dark"] .hc-mark.is-ok, html[data-theme="dark"] .hc-mark.is-bad { color: #10161b; }

/* salt jars */
.hc-jars { display: flex; flex-direction: column; gap: 6px; }
.hc-jarbtn { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 48px; padding: 3px 10px; border: 2px solid var(--tlg-border-strong); border-radius: 12px; background: var(--tlg-surface-2, var(--tlg-surface)); color: var(--tlg-text); font: inherit; text-align: left; cursor: pointer; }
.hc-jarbtn:hover:not(:disabled) { border-color: var(--ps-accent); }
.hc-jarbtn[aria-checked="true"] { border-color: var(--ps-accent); border-width: 3px; padding: 2px 9px; background: color-mix(in srgb, var(--ps-accent) 10%, var(--tlg-surface)); }
.hc-jarbtn:focus-visible, .hc-step:focus-visible, .hc-num:focus-visible, .hc-pick:focus-visible { outline: 3px solid var(--tlg-focus); outline-offset: 2px; }
.hc-jarbtn:disabled { cursor: default; opacity: 1; }
.hc-jarsvg { width: 32px; height: 40px; }
.hc-jartext { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hc-jarl1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.hc-jarl2 { display: flex; justify-content: space-between; gap: 8px; }
.hc-jarsub { font-size: 16px; color: var(--tlg-text-muted); }
.hc-jardh { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-jardh sub { font-size: 13px; }
.hc-chosen { visibility: hidden; font-size: 16px; font-weight: 800; color: var(--ps-accent); white-space: nowrap; }
html[data-theme="dark"] .hc-chosen { color: #8fd6ec; }
.hc-jarbtn[aria-checked="true"] .hc-chosen { visibility: visible; }

/* amount dial */
.hc-dialrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; align-items: start; height: 62px; }
.hc-step { width: 44px; height: 44px; border: 2px solid var(--tlg-border-strong); border-radius: 10px; background: var(--tlg-surface); color: var(--tlg-text); font: inherit; font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer; }
.hc-step:hover:not(:disabled) { border-color: var(--ps-accent); }
.hc-step:disabled { opacity: .55; cursor: default; }
.hc-rangewrap { min-width: 0; }
.hc-range { --fill: 0%; font: inherit; font-size: 16px; display: block; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.hc-range::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; border: 2px solid var(--tlg-border-strong); background: linear-gradient(90deg, var(--ps-accent) var(--fill), var(--tlg-bg-band) var(--fill)); }
.hc-range::-moz-range-track { height: 12px; border-radius: 6px; border: 2px solid var(--tlg-border-strong); background: linear-gradient(90deg, var(--ps-accent) var(--fill), var(--tlg-bg-band) var(--fill)); }
.hc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 3px solid var(--ps-accent); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.hc-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--ps-accent); }
.hc-range:focus-visible { outline: 3px solid var(--tlg-focus); outline-offset: 2px; border-radius: 8px; }
.hc-range:disabled { cursor: default; }
.hc-ticks { display: flex; justify-content: space-between; margin-top: -10px; line-height: 1.2; font-size: 16px; color: var(--tlg-text-muted); font-variant-numeric: tabular-nums; }

/* typed numbers */
.hc-numrow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 28px; align-items: center; gap: 8px; }
.hc-numk { display: flex; flex-direction: column; line-height: 1.2; }
.hc--pack .hc-numsub { font-size: 16px; }
.hc-numsub { font-size: 16px; color: var(--tlg-text-muted); }
.hc-numfield { display: flex; align-items: center; gap: 6px; }
.hc-num { width: 100%; min-width: 0; min-height: 44px; padding: 6px 10px; border: 2px solid var(--tlg-border-strong); border-radius: 10px; background: var(--tlg-surface); color: var(--tlg-text); font: inherit; font-size: 18px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hc-num:disabled { opacity: 1; background: var(--tlg-surface-2, var(--tlg-surface)); }
.hc-unit { font-size: 16px; font-weight: 700; color: var(--tlg-text-muted); white-space: nowrap; }
.hc--bonds .hc-controls { gap: 12px; }
.hc--bonds .hc-numrow { padding: 8px 0; border-top: 1px dashed var(--tlg-border); }

/* energy diagram */
.hc-diagram { gap: 6px; }
.hc-readout { margin: 0; padding: 4px 10px; border-radius: 999px; border: 2px dashed var(--tlg-border-strong); font-size: 16px; font-weight: 700; color: var(--tlg-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hc-readout.is-set { border-style: solid; color: var(--tlg-text); }
.hc-pickwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: minmax(0, 1fr); gap: 8px; align-items: center; }
.hc-pick { position: relative; min-width: 0; min-height: 0; height: 100%; border-radius: 10px; cursor: ns-resize; touch-action: none; color: var(--tlg-text); }
.hc-pick.is-locked { cursor: default; }
.hc-dsvg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hc-lvlbtns { display: flex; flex-direction: column; gap: 10px; }
.hc-axis { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hc-d-axis, .hc-d-tick, .hc-d-lvl, .hc-d-name, .hc-d-sp, .hc-d-grip, .hc-d-ans, .hc-d-ok { font-family: var(--tlg-font-body, var(--tlg-font)); fill: currentColor; }
.hc-d-axis { font-size: 16px; font-weight: 700; }
.hc-d-tick { font-size: 16px; font-weight: 700; }
.hc-d-lvl { font-size: 16px; fill: var(--tlg-text-muted); font-variant-numeric: tabular-nums; }
.hc-d-lvl.is-on { fill: var(--tlg-text); font-weight: 800; }
.hc-d-name { font-size: 16px; font-weight: 800; }
.hc-d-sp { font-size: 16px; }
.hc-d-grip { font-size: 20px; font-weight: 800; }
.hc-guide { stroke: var(--tlg-border-strong); stroke-width: 1.2; stroke-dasharray: 2 5; }
.hc-rail { stroke: var(--tlg-border-strong); stroke-width: 3; stroke-linecap: round; }
.hc-railtick { stroke: var(--tlg-border-strong); stroke-width: 2; }
.hc-railtick--long { stroke-width: 1; stroke-dasharray: 2 3; }
.hc-rbar { stroke: currentColor; stroke-width: 7; stroke-linecap: round; }
.hc-pline { stroke: var(--ps-accent); stroke-width: 8; stroke-linecap: round; }
html[data-theme="dark"] .hc-pline { stroke: #8fd6ec; }
.hc-pbar { transition: transform .15s ease-out; }
.hc-pick.is-drag .hc-pbar { transition: none; }
.hc-pbar.is-ghost .hc-pline { stroke: var(--tlg-text-muted); stroke-width: 5; stroke-dasharray: 10 8; }
.hc-pbar.is-ghost .hc-pname { fill: var(--tlg-text-muted); }
.hc-conn { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .7; }
.hc-dharrow { fill: none; stroke: currentColor; stroke-width: 3; }
.hc-ansline { stroke: var(--hc-ok); stroke-width: 5; stroke-dasharray: 10 6; stroke-linecap: round; }
.hc-d-ans, .hc-d-ok { font-size: 16px; font-weight: 800; fill: var(--hc-ok); }
.hc-cap { margin: 0; font-size: 16px; color: var(--tlg-text-muted); }
.hc-pick:hover:not(.is-locked) .hc-pline { stroke-width: 10; }

/* Briefing example */
.hc-ex-t, .hc-ex-s { font-size: 17px; fill: currentColor; font-family: var(--tlg-font-body, var(--tlg-font)); }
.hc-ex-b { font-weight: 800; }
.hc-ex-s { opacity: .8; }

/* phones / tablets: stack */
@media (max-width: 900px) {
  .hc { position: static; grid-template-rows: auto auto; }
  .hc-scene { aspect-ratio: 1046 / 236; }
  .hc-low { grid-template-columns: 1fr; }
  .hc-panel { overflow: visible; }
  .hc-pickwrap { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-liquid, .hc-pbar { transition: none; }
}