/* Haber process 場景（外殼喺 ../_shared/apparatus-shell.css；2026-10-17 由抄 Collision Theory 轉用共用外殼） */

/* 場景入面嘅液體、氣體、催化劑 */
.liquid-fill { fill: var(--tc-liquid); fill-opacity: .75; stroke: none; }
.cavity-fill { fill: #3A4A66; }
.plant .bed .iso-solid { transition: opacity .4s; }
.plant.no-cat .bed { opacity: .35; }
.plant.no-cat .pellets { opacity: 0; }
.plant .pellets { transition: opacity .4s; }
.plant .pellets circle { fill: #F28900; opacity: .9; }
[data-part="gas"] circle { stroke: rgba(14,31,61,.5); stroke-width: .5; }
[data-part="gas"] .n2 { fill: #2D4185; }
[data-part="gas"] .h2 { fill: #7FA3C0; }
[data-part="gas"] .nh3 { fill: #FFD24A; }
.flow { fill: none; stroke: var(--cream); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 2 9; opacity: .9; }

/* 圖例色點 */
.ldot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ldot.n2 { background: #2D4185; } .ldot.h2 { background: #7FA3C0; } .ldot.nh3 { background: #FFD24A; border: 1px solid rgba(14,31,61,.25); }
.lbed { width: 16px; height: 8px; border-radius: 3px; background: #F9C98A; border: 1.2px solid #F28900; display: inline-block; }
.grid-presets { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); }
.grid-presets button { grid-column: span 2; padding-left: 4px !important; padding-right: 4px !important; }
.grid-presets button:nth-child(n+4) { grid-column: span 3; }

/* 圖表 */
.gcard svg text { font-family: inherit; fill: var(--muted); }
.gcard svg path, .gcard svg circle { vector-effect: non-scaling-stroke; }
.gcard svg .ax { stroke: rgba(251, 238, 218, .35); stroke-width: 1; fill: none; }
.gcard svg .eq { stroke: var(--cream); stroke-width: 2.2; fill: none; }
.gcard svg .pass { stroke: var(--orange); stroke-width: 2.6; fill: none; }
.gcard svg .ghost { stroke: var(--grey); stroke-width: 1.6; stroke-dasharray: 4 4; fill: none; }
.gcard svg .mark { fill: var(--orange); }
.gcard svg .mark-eq { fill: var(--cream); }
.gcard svg .key { font-weight: 800; letter-spacing: .01em; }
.gcard svg text { font-variant-numeric: tabular-nums; }

/* 逐站放大：唔係呢站嘅部件變淡 */
.plant svg [data-item] { transition: opacity .45s; }
.plant svg.staged [data-item]:not([data-on]) { opacity: .16; }
.plant svg.staged [data-item="deck"] { opacity: .5; }
.plant svg [data-item] { cursor: pointer; }
.stage-bar { z-index: 3; display: flex; align-items: center; gap: 6px; background: var(--navy); color: var(--cream); border-radius: 999px; padding: 5px; box-shadow: var(--shadow); transform: translate(0, -100%); }
.stage-bar button { all: unset; cursor: pointer; min-width: 36px; height: 36px; border-radius: 999px; background: var(--navy-2); color: var(--cream); font-size: 22px; font-weight: 700; text-align: center; line-height: 34px; }
.stage-bar button:hover { background: var(--navy-3); }
.stage-bar button.all { font-size: 12.5px; padding: 0 12px; line-height: 36px; display: none; }
.stage-bar.on button.all { display: block; }
.stage-bar kbd { font-family: inherit; color: var(--muted-2); margin-left: 6px; }
.stage-body { display: flex; flex-direction: column; padding: 0 8px; min-width: 0; }
.stage-body b { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
/* 句子太長就摺兩行，唔好截斷（iPad 闊度冷凝器、循環兩站會爆） */
.stage-body span { font-size: 15px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stage-bar.on { border-radius: 26px; }
.stage-bar:not(.on) .stage-body span { font-size: 13px; font-weight: 600; color: var(--muted); }

/* 剖開窗口入面嘅零件 */
.cutaway .liner { fill: #4A5A78; stroke: #98A3B7; stroke-width: .5; }
.cutaway .piston { fill: #E9D6B6; stroke: #0E1F3D; stroke-width: .5; }
.cutaway .ring { stroke: #4E5E7C; stroke-width: .35; }
.cutaway .rod { stroke: #E9D6B6; stroke-width: 1.6; stroke-linecap: round; }
.cutaway .crank { fill: #6B7891; stroke: #E9D6B6; stroke-width: .6; }
.cutaway .win-frame { fill: none; stroke: #0E1F3D; stroke-width: 1; }
.cutaway .coil { fill: none; stroke: #D5DBE5; stroke-width: 1.6; stroke-linejoin: round; }
.cutaway .pool { fill: var(--tc-liquid); }
[data-part="drops"] circle { fill: var(--tc-liquid); }
.hx-tube { fill: none; stroke: #7FA3C0; stroke-width: 1.4; }
[data-part="hxgas"] circle { stroke: rgba(14,31,61,.5); stroke-width: .5; }
[data-part="hxgas"] .n2 { fill: #2D4185; } [data-part="hxgas"] .h2 { fill: #7FA3C0; } [data-part="hxgas"] .nh3 { fill: #FFD24A; }

/* 後排學生睇得到嘅大數字（Ronald 2026-10-17 批：約 44–48px）；條件格維持細字 */
.sim-stat #statEq, .sim-stat #statPass { display: block; font-size: 48px; line-height: 1.05; letter-spacing: -.01em; margin-top: 2px; }

/* iPad 高度（≤ 800）：控制板收緊少少，圖例向下移，兩者唔好撞（版面矩陣 2026-10-17） */
@media (max-height: 800px) {
  .graphs-lbl, .play-lbl { margin-top: 6px; }
  #legend { bottom: calc(var(--strip-h) + 20px); }
}

/* A5 核對修正（2026-10-17） */
/* 數字格：講明係氣體入面 NH₃ 摩爾百分比（唔係 % yield），每次經過係示意值 */
.sim-stat .stat-note { display: block; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-top: 1px; white-space: nowrap; }
/* 圖例：液氨（無色液體用 tc-liquid）；熄催化劑時催化劑床轉灰 */
.ldrop { width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--tc-liquid); border: 1px solid rgba(14,31,61,.3); display: inline-block; }
#legendBed.off .lbed { background: #E3E5EA; border-color: #9AA3B2; }
#legendBed.off { color: var(--muted-2); }
/* 逐站句子入面嘅關鍵數字放大 */
.stage-body span em { font-style: normal; font-size: 22px; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
/* 圖表：灰虛線嘅標籤 */
.gcard svg .ghost-key { fill: var(--grey); font-weight: 700; }
.stage-bar button.all { white-space: nowrap; }
/* 逐站掣條：句子區佔晒剩低位、高度固定兩行，「›」同「All」唔會跳位 */
.stage-bar.on .stage-body { flex: 1; min-height: 58px; justify-content: center; }