/* Collision Theory 專用：Slow-mo 結果標籤入面嘅能量條 */
.sim-tag { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sim-tag .ebar { position: relative; display: block; width: 116px; height: 6px; border-radius: 3px; background: rgba(14, 31, 61, .22); overflow: visible; }
.sim-tag.cold .ebar { background: rgba(251, 238, 218, .2); }
.sim-tag .ebar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--navy); }
.sim-tag.cold .ebar i { background: var(--grey); }
.sim-tag .ebar u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: currentColor; }
#nextBox { margin-bottom: 2px; }
#nextBox[hidden] { display: none; }
/* 第三版：Slow-mo 能量條上嘅 Ea、Ea′ 標記 */
.sim-tag .ebar { width: 150px; margin-bottom: 11px; }
.sim-tag .ebar u s { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.sim-tag .ebar u.cat { background: currentColor; opacity: .75; }
.sim-tag .ebar u[hidden] { display: none; }
/* 比較模式：左右箱嘅色點、箱頂名牌、雙數字 */
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex: none; }
.sdot.l { background: #FBEEDA; }
.sdot.r { background: #7FA3C0; }
.sdot[hidden] { display: none; }
.sim-boxtag { position: fixed; z-index: 2; left: 0; top: 0; transform: translate(-50%, -100%); background: var(--navy); color: var(--cream); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(14, 31, 61, .25); pointer-events: none; display: flex; align-items: center; }
.sim-boxtag b { letter-spacing: .12em; font-size: 10.5px; }
.sim-boxtag[hidden] { display: none; }
.sim-stat .dual { display: flex; align-items: center; line-height: 1.15; }
.is-compare .sim-stat span.dual { font-size: 17px; }
.is-compare .sim-stat { min-width: 96px; }
/* 控制板 */
#cmpBox[hidden], #cmpVarBox[hidden], .sim-row[hidden], .sim-toggle[hidden] { display: none; }
#cmpBox { margin: -4px 0 6px; }
#cmpVarBox .sim-seg { margin: 4px 0 10px; }
.sim-toggle.first { border-top: 0; padding-top: 2px; }
.sim-toggle.static { cursor: default; }
.sim-toggle .cmpval { display: flex; align-items: center; font-weight: 700; font-size: 12.5px; color: var(--cream); }
.sim-seg.grid2 .span2 { grid-column: span 2; }
/* 比較模式控制板多咗掣：收窄行距，iPad 橫放唔好掂到右下圖表 */
.is-compare .sim-row { margin-bottom: 8px; }
.is-compare .sim-row .top { margin-bottom: 5px; }
.is-compare .sim-toggle { padding: 6px 0; }
.is-compare .sim-lbl { margin-bottom: 5px; }
.is-compare #cmpVarBox .sim-seg { margin: 2px 0 8px; }
@media (max-height: 760px) {
  .is-compare .sim-panel { padding-top: 11px; padding-bottom: 10px; }
  .is-compare .sim-seg { margin-bottom: 8px; }
  .is-compare .sim-row { margin-bottom: 5px; }
  .is-compare .sim-row .top { margin-bottom: 3px; font-size: 12.5px; }
  .is-compare .sim-toggle { padding: 4px 0; font-size: 12.5px; }
  .is-compare .sim-actions { margin-top: 5px; }
  .is-compare .sim-actions button { padding: 6px 0; }
}
.sim-legend .sep { width: 1px; height: 16px; background: rgba(14, 31, 61, .18); }

/* 底部圖表帶（第三版，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); }
.gcard .foot .sdot { margin: 0 4px 0 8px; }
/* 圖例同 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-boxtag em { font-style: normal; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; display: inline-block; min-width: 2.4em; text-align: right; }
/* 「/」收埋成個介面 */
.ui-off .sim-ui, .ui-off .sim-boxtag { display: none !important; }
.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; }
}
