/*
 * ARISAN 3D — 樣式
 *
 * 全部 class 都有 a3- 前綴，且顏色變數宣告在 .a3-root 上而不是 :root，
 * 所以整包可以直接放進現有頁面而不會污染主站的樣式。
 *
 * 字型刻意只寫 font-family 繼承鏈、不 @import 任何字型：
 * 主站已經載了 Noto Sans TC，這裡不要再多要求一次。
 */

.a3-root {
  --a3-bg:#070b13; --a3-card:#0c1220; --a3-line:rgba(140,180,225,.16);
  --a3-fg:#eaf1fb; --a3-dim:#94a8c5; --a3-dim2:#6c7f9b; --a3-warn:#ff7a6b;
  color: var(--a3-fg);
  font-family: "Noto Sans TC", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.a3-root *, .a3-root *::before, .a3-root *::after { box-sizing: border-box; }

/* ---- 分頁 / 情境切換 ---- */
.a3-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.a3-tabs button {
  background:rgba(255,255,255,.04); border:1px solid var(--a3-line); color:var(--a3-dim);
  padding:9px 16px; border-radius:10px; font:inherit; font-size:13.5px; cursor:pointer; transition:.16s;
}
.a3-tabs button:hover { color:var(--a3-fg); }
.a3-tabs button.on { background:#17253d; border-color:#4d86c8; color:#dcecff; }

.a3-chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.a3-chips button {
  background:transparent; border:1px solid var(--a3-line); color:var(--a3-dim);
  padding:7px 13px; border-radius:999px; font:inherit; font-size:12.5px; cursor:pointer; transition:.16s;
}
.a3-chips button:hover { color:var(--a3-fg); border-color:rgba(140,180,225,.45); }
.a3-chips button.on { background:rgba(57,208,255,.12); border-color:#39d0ff; color:#cdefff; }

.a3-view { display:none; }
.a3-view.on { display:block; }

/* ---- 版面 ---- */
.a3-split { display:grid; grid-template-columns:1fr 348px; gap:16px; align-items:start; }
@media (max-width: 960px) { .a3-split { grid-template-columns:1fr; } }

/* aspect-ratio + contain 是為了避免 CLS：版位在 JS 載入前就已經確定 */
.a3-stage {
  position:relative; border:1px solid var(--a3-line); border-radius:14px; overflow:hidden;
  background:#070c16; aspect-ratio:16/10; min-height:380px; contain:layout paint;
}
.a3-stage canvas { display:block; width:100%; height:100%; cursor:grab; }
.a3-stage canvas:active { cursor:grabbing; }
.a3-leads { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.a3-lays  { position:absolute; inset:0; pointer-events:none; z-index:3; }

/* ---- 標籤（DOM 文字，不畫進 canvas）---- */
.a3-tag {
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
  font-size:11.5px; line-height:1.35; padding:5px 9px; border-radius:7px;
  background:rgba(7,12,22,.92); border:1px solid var(--a3-line); color:#e6f0fb;
  box-shadow:0 2px 12px rgba(0,0,0,.6); transition:opacity .2s;
}
.a3-tag i { font-style:normal; display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:6px; vertical-align:1px; }
.a3-tag em { font-style:normal; color:var(--a3-dim2); font-size:10.5px; margin-left:6px; }
.a3-tag.warn { border-color:rgba(255,122,107,.55); }

.a3-hint { position:absolute; left:12px; bottom:10px; z-index:4; font-size:11px; color:rgba(190,212,240,.38); }

.a3-steps { position:absolute; left:12px; top:12px; z-index:5; display:flex; gap:6px; flex-wrap:wrap; max-width:76%; }
.a3-steps button {
  background:rgba(7,12,22,.92); border:1px solid var(--a3-line); color:var(--a3-dim);
  padding:6px 11px; border-radius:8px; font:inherit; font-size:11.5px; cursor:pointer;
}
.a3-steps button.on { background:#17253d; border-color:#4d86c8; color:#dcecff; }

/* ---- 場景是示意圖 ---- */
/* 固定在左上角、永遠顯示。滑桿拉過上限之後場景就不再增加，
   如果只在超過時才冒出提示，使用者會先讀到「壞掉」再讀到解釋；
   一直都在，「示意」才會被讀成這張圖本來的性質。 */
.a3-scale {
  position:absolute; left:12px; top:12px; z-index:5; max-width:54%;
  background:rgba(7,12,22,.92); border:1px solid var(--a3-line); border-radius:8px;
  padding:6px 10px; font-size:10.5px; line-height:1.65; color:var(--a3-dim2);
}
.a3-scale b { display:block; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--a3-dim); }
.a3-scale span { display:block; font-variant-numeric:tabular-nums; }
.a3-scale i { font-style:normal; color:rgba(190,212,240,.45); margin-right:6px; }

/* ---- 剖半切換 ---- */
/* 放在畫布右上角，跟左上角的步驟列分開——它不是敘事的一部分，是觀看方式。 */
.a3-cut { position:absolute; right:12px; top:12px; z-index:5; display:none; }
.a3-cut.show { display:block; }
.a3-cut button {
  background:rgba(7,12,22,.92); border:1px solid var(--a3-line); color:var(--a3-dim);
  padding:6px 11px; border-radius:8px; font:inherit; font-size:11.5px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.a3-cut button:hover { border-color:#4d86c8; color:#dcecff; }
.a3-cut button.on { background:#17253d; border-color:#4d86c8; color:#dcecff; }
.a3-cut button i {
  width:11px; height:11px; border:1.5px solid currentColor; border-radius:2px;
  display:inline-block; position:relative; opacity:.85;
}
.a3-cut button.on i { border-right-style:dashed; border-top-style:dashed; }

/* ---- 點設備跳出的說明 ---- */
.a3-pop {
  position:absolute; z-index:8; max-width:230px; transform:translate(-50%,-118%);
  background:rgba(9,15,27,.97); border:1px solid #3d5a80; border-radius:10px; padding:9px 11px;
  box-shadow:0 6px 24px rgba(0,0,0,.7); display:none;
}
.a3-pop b { display:block; font-size:12.5px; margin-bottom:3px; }
.a3-pop span { font-size:11.5px; color:var(--a3-dim); line-height:1.65; display:block; }
.a3-pop u {
  display:inline-block; margin-top:6px; font-size:10.5px; text-decoration:none; cursor:pointer;
  color:#9fd8ff; border:1px solid rgba(57,208,255,.4); border-radius:5px; padding:2px 7px;
}

/* ---- 右側面板 ---- */
.a3-panel { border:1px solid var(--a3-line); border-radius:14px; background:var(--a3-card); padding:15px 16px; }
.a3-panel h3 { margin:0 0 4px; font-size:15px; }
.a3-panel h4 { margin:15px 0 8px; font-size:10.5px; letter-spacing:.14em; color:var(--a3-dim2); }
.a3-panel h4:first-child { margin-top:0; }
.a3-pain { margin:0 0 12px; font-size:12.5px; color:var(--a3-dim); line-height:1.7; }
.a3-lay { font-size:10px; color:var(--a3-dim2); font-weight:400; }

.a3-plist { display:flex; flex-direction:column; gap:6px; }
.a3-pitem {
  border:1px solid var(--a3-line); border-left-width:3px; border-radius:8px; padding:8px 10px;
  background:rgba(255,255,255,.015); transition:.15s;
}
.a3-pitem:hover { background:rgba(255,255,255,.06); }
.a3-pitem.off { opacity:.42; filter:saturate(.2); }
.a3-pitem b { display:block; font-size:13px; margin-bottom:2px; cursor:pointer; }
.a3-pitem b.static { cursor:default; }
.a3-pitem b:not(.static):hover { text-decoration:underline; }
.a3-pitem span { font-size:11.5px; color:var(--a3-dim); line-height:1.6; }
.a3-row { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.a3-rm {
  background:transparent; border:1px solid var(--a3-line); color:var(--a3-dim2);
  font:inherit; font-size:10px; padding:2px 7px; border-radius:5px; cursor:pointer; white-space:nowrap;
}
.a3-rm:hover { color:var(--a3-warn); border-color:rgba(255,122,107,.5); }
.a3-go {
  font-size:10px; color:#9fd8ff; border:1px solid rgba(57,208,255,.35); border-radius:5px;
  padding:2px 7px; cursor:pointer; background:transparent; font-family:inherit;
}
.a3-lost {
  display:none; margin-top:7px; padding-top:7px; border-top:1px dashed rgba(255,122,107,.3);
  font-size:11.5px; color:#ffb3a8; line-height:1.6;
}
.a3-pitem.off .a3-lost { display:block; }

/* ---- 規模試算 ---- */
.a3-vars { display:flex; flex-direction:column; gap:11px; }
.a3-vrow label { display:flex; justify-content:space-between; font-size:11.5px; color:var(--a3-dim); margin-bottom:5px; }
.a3-vrow label b { color:#dbe9fb; font-weight:600; }
.a3-vrow label b em { font-style:normal; font-weight:400; font-size:10px; color:var(--a3-dim2); margin-left:6px; }
.a3-root input[type=range] { width:100%; accent-color:#39d0ff; height:3px; display:block; }

/* 上限記號。畫成一個「⌐」括號：直的那一豎是上限，橫的那一畫一路延伸到
   軌道右端，也就是「這一段只有右邊的數字會動，畫面不會再增加」。
   不用單純一個刻度點，是因為多數情境的上限落在整段行程的 1%~5%（例如
   車輛 5/300），一個點會貼在最左端看不出來；括號反而剛好把那件事講出來——
   幾乎整根滑桿都超出了畫得下的範圍。
   7px 是把手半徑的近似值：把手中心的行程比軌道兩端各短這麼多。 */
.a3-vtrack { position:relative; padding-bottom:7px; }
.a3-vcap {
  position:absolute; bottom:0; height:6px; pointer-events:none;
  left:calc(7px + (100% - 14px) * var(--capf)); right:7px;
  border-left:1px solid rgba(140,180,225,.55);
  border-bottom:1px solid rgba(140,180,225,.22);
}
.a3-vnote { margin-top:5px; font-size:10px; color:var(--a3-dim2); line-height:1.6; }
/* 10px 而不是 2px：最後一根滑桿底下可能有上限說明，貼太近會讀成試算表的第一列 */
.a3-mtable { display:grid; grid-template-columns:1fr auto; gap:5px 10px; font-size:12px; margin-top:10px; }
.a3-mtable div:nth-child(odd) { color:var(--a3-dim); }
.a3-mtable div:nth-child(even) { color:#dff0ff; font-variant-numeric:tabular-nums; font-weight:600; }
.a3-mnote { font-size:10.5px; color:var(--a3-dim2); margin-top:7px; line-height:1.6; }

/* ---- 說明區塊 ---- */
.a3-note {
  margin:15px 0 0; font-size:12.5px; color:var(--a3-dim); line-height:1.85;
  border-left:2px solid #2b3d5a; padding-left:12px; max-width:1000px;
}
.a3-note b { color:#cfe2fa; }

/* ---- 靜態回退（WebGL 不可用 / 低階裝置 / 減少動態偏好）---- */
.a3-fallback { display:block; margin:0; }
/* 必須明確寫，否則上面那條 display:block 會蓋掉瀏覽器對 [hidden] 的預設 display:none */
.a3-fallback[hidden] { display:none; }
.a3-fallback img { display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--a3-line); }
.a3-fallback figcaption { margin-top:8px; font-size:12px; color:var(--a3-dim); line-height:1.7; }

@media (prefers-reduced-motion: reduce) {
  .a3-root * { transition: none !important; animation: none !important; }
}