/* Chloro-alkali 場景（外殼喺 ../_shared/apparatus-shell.css；真實儀器同物質用真色：品牌規格 §2，2026-10-14）。
   逐站掣條照抄 haber-process/style.css；電線、接線柱照抄 porous-pot-salt-bridge/style.css。 */
.plant svg [data-item] { cursor: default; }
.plant svg.staged [data-item] { transition: opacity .35s; opacity: .28; }
.plant svg.staged [data-item][data-on] { opacity: 1; }

/* 槽身：鋼（灰藍）；剖開面入面嘅內壁、槽底淡色 */
.steel { --anatomy-paper: #C3CAD3; --anatomy-top: #D9DEE5; --anatomy-shade-0: #9CA6B3; --anatomy-shade-1: #A9B2BE; --anatomy-shade-2: #B5BDC8; --anatomy-shade-3: #C0C7D0; }
.tank-inner { --anatomy-paper: #E3E7EC; --anatomy-top: #EEF1F4; --anatomy-shade-0: #CBD2DA; --anatomy-shade-1: #D3D9E0; --anatomy-shade-2: #DBE0E6; --anatomy-shade-3: #E2E6EB; }
.tank-floor { fill: #B5BDC8; stroke: none; }
.cut-edge { stroke-width: 2.2 !important; }
.glass-shine { stroke-width: 1 !important; }

/* 電極：graphite（深灰）、titanium（淺灰銀）、steel/nickel（灰）；bus bar 銅 */
.graphite { --anatomy-paper: #4A4D52; --anatomy-top: #5F6369; --anatomy-shade-0: #2F3236; --anatomy-shade-1: #383B40; --anatomy-shade-2: #414449; --anatomy-shade-3: #484B50; --anatomy-hi: #1C1F23; }
.ti { --anatomy-paper: #B9BEC6; --anatomy-top: #D3D7DD; --anatomy-shade-0: #8E959F; --anatomy-shade-1: #9CA2AB; --anatomy-shade-2: #A9AFB7; --anatomy-shade-3: #B4B9C1; }
.ni { --anatomy-paper: #8F959D; --anatomy-top: #A9AEB5; --anatomy-shade-0: #6A7078; --anatomy-shade-1: #767C84; --anatomy-shade-2: #81878F; --anatomy-shade-3: #8B9199; }
.copper { --anatomy-paper: #C77A4F; --anatomy-top: #DB9670; --anatomy-shade-0: #9C5534; --anatomy-shade-1: #AB613E; --anatomy-shade-2: #B86D48; --anatomy-shade-3: #C47952; }
.brass { --anatomy-paper: #D9B86A; --anatomy-top: #EBD08E; --anatomy-shade-0: #B08F45; --anatomy-shade-1: #BE9C50; --anatomy-shade-2: #CAA85C; --anatomy-shade-3: #D4B366; }
/* membrane：淡琥珀色薄膜（離子交換膜）；拎走時收埋 */
.membrane { --anatomy-paper: #E9C98C; --anatomy-top: #F2DAA8; --anatomy-shade-0: #D9B26C; --anatomy-shade-1: #DFBB78; --anatomy-shade-2: #E4C383; --anatomy-shade-3: #E8C88A; }
.membrane .iso-fill, .membrane .iso-shade, .membrane .iso-top { fill-opacity: .8; }
.no-membrane [data-part="membrane-sheet"] { display: none; }

/* 電源、泵 */
.psu { --anatomy-paper: #DCE1E8; --anatomy-top: #EEF1F5; --anatomy-shade-0: #B7BFCA; --anatomy-shade-1: #C3CAD3; --anatomy-shade-2: #CED4DC; --anatomy-shade-3: #D7DCE3; }
.psu-face { fill: #22324F; stroke: #0E1F3D; stroke-width: .8; }
.psu-text { font-size: 13px; font-weight: 900; fill: #FFD24A; font-family: inherit; }
.psu-vent { fill: none; stroke: #98A3B7; stroke-width: .6; }
.psu-slot { stroke: #98A3B7; stroke-width: .6; }
.pumpbody { --anatomy-paper: #8FA6BF; --anatomy-top: #A9BCD0; --anatomy-shade-0: #6D849E; --anatomy-shade-1: #7A90A9; --anatomy-shade-2: #869BB3; --anatomy-shade-3: #8FA4BC; }
.term-red { --anatomy-paper: #D64541; --anatomy-top: #E8706C; --anatomy-shade-0: #A8302D; --anatomy-shade-1: #B73733; --anatomy-shade-2: #C53D39; --anatomy-shade-3: #D0423E; }
.term-black { --anatomy-paper: #2E3238; --anatomy-top: #4A4F57; --anatomy-shade-0: #1C1F23; --anatomy-shade-1: #23262B; --anatomy-shade-2: #2A2D32; --anatomy-shade-3: #30343A; }

/* 喉管（鋼）、電線 */
.pipe { --anatomy-shade-2: #B9C1CC; --anatomy-top: #E3E7EC; --anatomy-shade-0: #8E98A6; --anatomy-paper: #C3CAD3; --anatomy-shade-1: #A3ACB8; --anatomy-shade-3: #C9CFD7; }
.wire-red { --anatomy-shade-2: #D64541; --anatomy-top: #EE8682; --anatomy-shade-0: #A8302D; }
.wire-black { --anatomy-shade-2: #33373E; --anatomy-top: #5C626B; --anatomy-shade-0: #1C1F23; }

/* 剖面入面（app.js 畫） */
.xs .brine { fill: #C9D9E6; fill-opacity: .55; }
.xs .brine.dec { fill: #D6E3EC; }
.xs .surf { stroke: rgba(14, 31, 61, .35); stroke-width: .8; fill: none; }
.xs .hg { fill: url(#hgGrad); }
.xs .hg-line { stroke: #FFFFFF; stroke-opacity: .7; stroke-width: .9; stroke-linecap: round; }
.xs .gasspace { fill: #FFFFFF; fill-opacity: .25; }

/* 離子同粒子（抽象粒子色；Cl₂ 用真色淡黃綠，H₂ 無色） */
.ion circle { stroke: #0E1F3D; stroke-width: .7; }
.ion text { font-family: "Noto Sans HK", sans-serif; font-weight: 900; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ion.na circle { fill: #2D4185; } .ion.na text { fill: #FBEEDA; }
.ion.cl circle { fill: #7FA3C0; } .ion.cl text { fill: #0E1F3D; }
.ion.oh circle { fill: #FBEEDA; } .ion.oh text { fill: #0E1F3D; }
.ion.h circle { fill: #FFFFFF; } .ion.h text { fill: #0E1F3D; }
.ion.ocl circle { fill: #0E1F3D; stroke: #FBEEDA; } .ion.ocl text { fill: #FBEEDA; }
.ion.naatom circle { fill: #2D4185; stroke: #E9ECEF; stroke-width: 1.4; }
.h2o { fill: #E3EEF6; stroke: #4E5E7C; stroke-width: .6; }
.bub.cl2 { fill: #E4EAA2; stroke: #8C9440; stroke-width: .7; }
.bub.h2 { fill: #FFFDF7; stroke: #6B7891; stroke-width: .7; }
.flash { fill: #F28900; }
.electron { fill: #FFD24A; stroke: #0E1F3D; stroke-width: .5; }
.puff.cl2 { fill: #DDE48E; stroke: #8C9440; stroke-width: .5; }
.puff.h2 { fill: #FFFFFF; stroke: #6B7891; stroke-width: .5; }
.puff.hg { fill: #D7DCE2; stroke: #6B7891; stroke-width: .4; }
.puff.naoh, .puff.brine { fill: #C9D9E6; stroke: #6B7891; stroke-width: .4; }

/* 圖例 */
.ldot { width: 12px; height: 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; line-height: 1; border: 1px solid rgba(14, 31, 61, .6); }
.ldot.na { background: #2D4185; color: #FBEEDA; }
.ldot.cl { background: #7FA3C0; color: #0E1F3D; }
.ldot.oh { background: #FBEEDA; color: #0E1F3D; }
.ldot.h { background: #FFFFFF; color: #0E1F3D; }
.ldot.ocl { background: #0E1F3D; color: #FBEEDA; border-color: #FBEEDA; }
.ldot.naatom { background: #2D4185; border: 2px solid #E9ECEF; }
.ldot.e { background: #FFD24A; }
.ldot.cl2 { background: #E4EAA2; border-color: #8C9440; }
.ldot.h2 { background: #FFFDF7; }

/* 圖表 */
.gcard svg text { font-family: inherit; fill: var(--muted); font-variant-numeric: tabular-nums; }
.gcard svg path, .gcard svg circle, .gcard svg line { vector-effect: non-scaling-stroke; }
.gcard svg .ax { stroke: rgba(251, 238, 218, .35); stroke-width: 1; fill: none; }
.gcard svg .l-nacl { stroke: var(--cream); stroke-width: 2.4; fill: none; }
.gcard svg .l-naoh { stroke: var(--orange); stroke-width: 2.6; fill: none; }
.gcard svg .l-nocl { stroke: #7FA3C0; stroke-width: 2.2; fill: none; stroke-dasharray: 5 4; }
.gcard svg .k-nacl { fill: var(--cream); font-weight: 800; }
.gcard svg .k-naoh { fill: var(--orange); font-weight: 800; }
.gcard svg .k-nocl { fill: #7FA3C0; font-weight: 800; }

/* 逐站掣條（照抄 haber-process） */
.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: 44px; height: 44px; border-radius: 999px; background: var(--navy-2); color: var(--cream); font-size: 24px; font-weight: 700; text-align: center; line-height: 42px; }
.stage-bar button:hover { background: var(--navy-3); }
.stage-bar button.all { font-size: 12.5px; padding: 0 14px; display: none; white-space: nowrap; }
.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 10px; min-width: 0; }
.stage-body b { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
.stage-body span { font-size: 17px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-body b { white-space: nowrap; }
.stage-bar:not(.on) .stage-body span { font-size: 13px; font-weight: 600; color: var(--muted); }
.stage-bar.on .stage-body { flex: 1; }

/* 標題：化學式唔准轉大小寫 */
.sim-head h1 { text-transform: none; }
.plabel.eq { background: var(--orange); color: var(--navy); font-size: 15px; }
#noMembrane[hidden] { display: none; }
.plabel .eqline { display: block; text-align: center; }
/* 圖例靠右、逐站掣條靠左（照 haber-process） */
.sim-legend { right: auto !important; transform: none !important; gap: 9px; padding: 7px 13px; font-size: 12px; }
.sim-legend .grp { font-size: 9.5px; letter-spacing: .1em; }
.xs .hg { stroke: #4E5E7C; stroke-width: .7; }

/* 第二版（Ronald 2026-10-25：要睇到 Na⁺、Cl⁻，要睇到出 Cl₂）：離子寫名、原子、分子、電子、收集容器 */
.ion text { font-weight: 800; letter-spacing: -.02em; }
.ion.clatom circle { fill: #B8C46A; stroke: #4F5A12; } .ion.clatom text { fill: #2D3308; }
.ion.naatom circle { fill: #2D4185; stroke: #E9ECEF; stroke-width: 1.2; } .ion.naatom text { fill: #FBEEDA; }
.mol circle { stroke-width: .8; }
.mol.cl2 circle { fill: #D3DC6E; stroke: #5F6A14; }
.mol.h2 circle { fill: #FFFFFF; stroke: #4E5E7C; }
.mol .bubble { fill: #FFFFFF; fill-opacity: .35 !important; stroke: #6B7891 !important; stroke-width: .6 !important; }
.mol.cl2 .bubble { fill: #EEF2C2; }
.mol text { font-family: "Noto Sans HK", sans-serif; font-weight: 900; text-anchor: middle; dominant-baseline: central; fill: #0E1F3D; }
.water .o { fill: #D9E6F0; stroke: #4E5E7C; stroke-width: .6; }
.water .hh { fill: #FFFFFF; stroke: #4E5E7C; stroke-width: .5; }
.water text { font-family: "Noto Sans HK", sans-serif; font-weight: 800; text-anchor: middle; fill: #0E1F3D; }
.e-t { font-family: "Noto Sans HK", sans-serif; font-size: 4.6px; font-weight: 900; fill: #8A6400; }
.xs .gas.cl2 { fill: #DDE58A; }
.xs .brine.naoh { fill: #C9D9E6; fill-opacity: .7; }
.glass-tint { fill: #FFFFFF; fill-opacity: .25; stroke: none; }
.glass-foot { --anatomy-paper: #E8ECF0; --anatomy-top: #F5F7F9; --anatomy-shade-0: #C9D0D8; --anatomy-shade-1: #D2D8DF; --anatomy-shade-2: #DBE0E6; --anatomy-shade-3: #E2E6EB; }
.stopper { --anatomy-paper: #4A4F57; --anatomy-top: #626873; --anatomy-shade-0: #2E3238; --anatomy-shade-1: #363A41; --anatomy-shade-2: #3E434A; --anatomy-shade-3: #454A52; }

/* 第三版（Ronald 2026-10-25：標籤貼喺物件上、唔好拉線；少啲標籤；再 3D 啲） */
.plabel { padding: 4px 11px; text-align: center; line-height: 1.15; }
.plabel small { font-size: 11.5px; font-weight: 700; opacity: .8; margin-top: 0; }
.ion .shine, .mol .shine { fill: url(#ionShine); stroke: none !important; pointer-events: none; }
.xs3 .liq-top { fill: #C9D9E6; fill-opacity: .45; stroke: rgba(14, 31, 61, .35); stroke-width: .8; }
.xs3 .hg-top { fill: #D3D9E0; stroke: #4E5E7C; stroke-width: .7; }
.xs3 .hg-line { stroke: #FFFFFF; stroke-opacity: .85; stroke-width: 1.1; stroke-linecap: round; fill: none; }
.xs3 .surf { stroke: rgba(14, 31, 61, .45); stroke-width: 1; }
#stageEq { display: block; font-style: normal; margin-top: 3px; }
#stageEq[hidden] { display: none; }
#stageEq i { display: block; font-style: normal; font-size: 16px; font-weight: 800; color: var(--orange); white-space: nowrap; line-height: 1.3; }
.stage-bar.on { border-radius: 22px; }

/* 核對修正（2026-10-25）：方程式要後排都讀到（≥ 20px、太長就換行）；Hg 層要一眼係銀色液態金屬 */
#stageEq i { font-size: 20px; white-space: normal; line-height: 1.25; }
.stage-bar.on .stage-body span { font-size: 16px; }
.xs3 .hg-top { fill: #F2F4F7; stroke: #2F3A4E; stroke-width: 1.1; }
.xs .hg { stroke: #2F3A4E; stroke-width: 1.1; }
.xs3 .hg-line { stroke: #8E98A6; stroke-opacity: .9; stroke-width: 1.4; }
.tank-floor { fill: #7F8A98; }
.electron { stroke-width: .8; }