/*
 * 儀器場景（Anatomy 等角立體圖）共用 TC 外殼：圖表帶、收埋控制板、說明窗、「/」收埋介面、場景位、標籤 pill。
 * 第一個用：chemical-cell（2026-10-14）。新儀器場景 link 呢份，自己只加場景入面嘅樣式；唔好喺個別 sim 再抄。
 * 規則正本：workspace tc-teach-simulation skill references/design-kit.md 第 5b–7 節。
 */

/* 底部圖表帶（第三版，Ronald 2026-10-10：上堂唔切換，圖要大、同時睇到） */
:root { --strip-h: 0px; }
.sim-graphs { left: var(--gap); right: var(--gap); bottom: 16px; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 12px; transition: opacity .2s; }
.sim-graphs[hidden] { display: none; }
.gcard { background: var(--navy); color: var(--cream); border-radius: var(--radius); padding: 10px 14px 8px; box-shadow: var(--shadow); min-width: 0; }
.gcard[hidden] { display: none; }
.gcard figcaption { font-size: 10.5px; letter-spacing: .14em; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
/* 圖嘅高度跟畫面高度，闊度跟住比例；兩幅圖時每幅大約係舊版 1.6 倍 */
.gcard svg { display: block; width: 100%; height: var(--gh, 200px); }
.gcard .foot { display: flex; justify-content: flex-end; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--muted); margin-top: 2px; min-height: 20px; }
.gcard .foot b { color: var(--orange); font-variant-numeric: tabular-nums; }
.gcard .foot b.dim { color: var(--muted); }
.gcard .foot b.plain { color: var(--cream); }
/* 圖例同 SCHEMATIC MODEL 擺喺圖表帶上面 */
.sim-legend { bottom: calc(var(--strip-h) + 26px); }
@media (max-width: 1260px) { .sim-legend { bottom: calc(var(--strip-h) + 26px); } }
.chips button { font-size: 12px; }
.graphs-lbl { margin-top: 10px; }
@media (max-height: 760px) {
  .gcard { padding: 8px 12px 6px; }
}

/* 第三版排版收窄（Ronald 2026-10-10：「好鬼死多嘢」） */
.panel-pill { display: none; }
.sim-panel.collapsed { width: auto; padding: 0; background: transparent; box-shadow: none; }
.sim-panel.collapsed .panel-body { display: none; }
.sim-panel.collapsed .panel-pill { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; background: var(--navy); color: var(--cream); border-radius: 999px; padding: 8px 8px 8px 16px; box-shadow: var(--shadow); font-size: 14px; font-weight: 700; white-space: nowrap; }
.panel-pill #pillText { display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.panel-pill .pill-act { background: var(--navy-2); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 12px; }
.panel-pill kbd, .panel-hide kbd { font-family: inherit; color: var(--muted-2); margin-left: 6px; letter-spacing: .1em; }
.sim-lbl .lbl-r { display: flex; align-items: center; gap: 10px; }
.panel-hide { all: unset; cursor: pointer; font-size: 10.5px; letter-spacing: .14em; font-weight: 700; color: var(--muted); text-transform: uppercase; background: var(--navy-2); border-radius: 6px; padding: 2px 8px; }
.panel-hide:hover { color: var(--cream); }
.panel-pill:focus-visible, .panel-hide:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.sim-legend .grp:last-child { color: var(--muted-2); }
@media (max-width: 1100px) {
  /* iPad 闊度：圖例收窄，唔好撞到控制板 */
  .sim-legend { gap: 7px; padding: 6px 12px; font-size: 11.5px; }
  .sim-legend .grp { font-size: 9.5px; letter-spacing: .1em; }
  .sim-legend svg { transform: scale(.85); }
}

/* 3.1（Ronald 2026-10-11 批，sael.net 研究）：預設情境、速度、說明窗、收埋介面 */
#presetBox[hidden], #speed[hidden] { display: none; }
.sim-seg.fit { grid-auto-columns: auto; }
.sim-seg.fit button { padding-left: 7px; padding-right: 7px; }
.play-lbl { margin-top: 10px; }
.sim-actions.three { grid-template-columns: 1fr auto 1fr; align-items: center; }
.sim-actions.three.two { grid-template-columns: 1fr 1fr; }
.sim-actions .sim-seg { margin: 0; }
.sim-actions .sim-seg button { padding: 6px 8px; }
/* 「/」收埋成個介面 */
.sim-toast { position: fixed; z-index: 5; left: 50%; top: 18px; transform: translateX(-50%); background: var(--navy); color: var(--cream); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow); }
.sim-toast[hidden] { display: none; }
/* 「?」說明窗：實色 navy 卡；底層淡化但唔模糊（品牌禁毛玻璃） */
.sim-modal { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(251, 238, 218, .78); padding: 24px; }
.sim-modal[hidden] { display: none; }
.sim-modal-card { border: 2px solid var(--navy-3); width: min(760px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--navy); color: var(--cream); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px 20px; }
.sim-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sim-modal-head h2 { font-size: 13px; letter-spacing: .14em; font-weight: 800; color: var(--muted); }
.sim-modal-head button { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 700; background: var(--navy-2); border-radius: 8px; padding: 5px 10px; }
.sim-modal-head kbd { font-family: inherit; color: var(--muted-2); margin-left: 6px; }
.sim-modal-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 26px; }
.sim-modal h3 { font-size: 10.5px; letter-spacing: .14em; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.sim-modal dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.sim-modal dt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-modal dd { color: var(--cream); opacity: .9; }
.sim-modal ul { padding-left: 18px; font-size: 14px; line-height: 1.5; }
.sim-modal li + li { margin-top: 6px; }
@media (max-width: 760px) { .sim-modal-cols { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  /* 控制板窄咗：預設情境四粒掣收細，唔好頂出格 */
  .sim-seg.fit button { font-size: 11px; padding-left: 5px; padding-right: 5px; }
}
.ui-off .sim-ui { display: none !important; }
#legend { left: auto; right: var(--gap); transform: none; }
@media (max-width: 1100px) { #legend { gap: 8px; padding: 6px 12px; font-size: 11.5px; } #legend .grp { font-size: 9.5px; letter-spacing: .1em; } }

/* 儀器場景：SVG 擺喺讓位之後嘅中間空間（app.js 計 left/top/width/height） */
.plant { position: fixed; z-index: 1; background: transparent; }
.plant svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.plant .iso-figure, .plant .iso-plate { all: unset; }
.plant-wires { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.plant-wires line { stroke: var(--navy); stroke-width: 1.2; }
.plant-wires circle { fill: var(--navy); }
.plant-wires .hot line { stroke: var(--orange); }
.plant-wires .hot circle { fill: var(--orange); }

/* 標籤 pill（品牌規格 5、5b）：navy 底 cream 字；重點 orange 底 navy 字；化學式唔轉大小寫 */
.plabel { position: fixed; z-index: 3; left: 0; top: 0; transform: translate(-50%, -50%); background: var(--navy); color: var(--cream); font-size: 13.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(14, 31, 61, .22); pointer-events: none; text-transform: none; transition: opacity .3s; }
.plabel.hot { background: var(--orange); color: var(--navy); }
.plabel em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 6px; }
.plabel.dim { opacity: .45; }
.ui-off #labels, .ui-off .plant-wires { display: none; }


.plabel small { display: block; font-size: 13px; font-weight: 700; color: var(--cream); opacity: .92; margin-top: 1px; text-align: center; }
.plabel:has(small) { border-radius: 14px; text-align: center; }

/* 控制板直位：圖表帶、圖例讓位（app.js 設 --panel-w） */
.sim-graphs { right: calc(var(--gap) + var(--panel-w, 0px)); }
#legend { right: calc(var(--gap) + var(--panel-w, 0px)); }