/* NÜXGROW · วงข้อมูล NÜX Ecology v0.1.0 — คู่กับ /qp/sim/sim-ecology.js · สีจาก --qp-* + --sim-spec-* ของหน้า · ตัวอักษร --qp-t-* / --dt-fs-*
   ฉบับเต็ม: จอกว้าง ภาพซ้าย + แผงขวา · จอแคบ ภาพบน แผงล่าง · data-layout="mini" = กล่อง Bento (เต็มกล่องแม่) */
.sim-eco { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); gap: var(--qp-s-5, 24px); align-items: center; color: var(--qp-ink); font-family: var(--qp-font-sans); }
.sim-eco *, .sim-eco *::before, .sim-eco *::after { box-sizing: border-box; }
.sim-eco:empty { min-height: 320px; background: radial-gradient(ellipse 60% 60% at 50% 50%, color-mix(in srgb, var(--qp-green) 14%, transparent), transparent 70%); }
.sim-eco__stage { position: relative; height: clamp(320px, calc(60svh - 20px), 520px); }
.sim-eco__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sim-eco__node {
  position: absolute; font: inherit; font-size: var(--qp-t-13, 13px); line-height: 1.3; white-space: nowrap;
  padding: 4px 10px; border-radius: var(--qp-r-pill, 999px); border: 1px solid var(--qp-line-strong); background: var(--qp-surface); color: var(--qp-ink-2); cursor: pointer;
}
.sim-eco__node b { font-family: var(--qp-font-mono); font-weight: 500; color: var(--qp-ink-2); margin-right: 2px; }
.sim-eco__node:hover, .sim-eco__node[aria-pressed="true"] { color: var(--qp-ink); border-color: var(--qp-green); }
.sim-eco__node[aria-pressed="true"] b { color: var(--qp-ink); }
.sim-eco__pill { position: absolute; left: 0; top: 0; font-size: var(--qp-t-12, 12px); line-height: 1.5; padding: 0 9px; border-radius: var(--qp-r-pill, 999px); color: var(--qp-ink-2); border: 1px solid var(--qp-src-sim); background: var(--qp-surface); white-space: nowrap; pointer-events: none; }
.sim-eco__panel { display: flex; flex-direction: column; gap: var(--qp-s-3, 12px); min-width: 0; font-size: var(--qp-t-15, 15px); line-height: 1.65; color: var(--qp-ink-2); }
.sim-eco__info { min-height: 12em; }
.sim-eco__info h3 { margin: 0 0 6px; font-size: var(--dt-fs-h, 19px); line-height: 1.4; font-weight: 600; color: var(--qp-ink); }
.sim-eco__info h3 b { font-family: var(--qp-font-mono); font-weight: 500; margin-right: 4px; }
.sim-eco__info p { margin: 0 0 6px; }
.sim-eco__info p > span { display: block; font-size: var(--qp-t-12, 12px); line-height: 1.5; color: var(--qp-ink-2); font-weight: 600; }
.sim-eco__info p b { color: var(--qp-ink); font-weight: 600; }
.sim-eco__st { display: inline-block; font-size: var(--qp-t-12, 12px); line-height: 1.5; padding: 0 9px; border-radius: var(--qp-r-pill, 999px); border: 1px solid var(--qp-green); color: var(--qp-ink); }
.sim-eco__st.is-soon { border-style: dashed; border-color: var(--qp-line-strong); color: var(--qp-ink-2); }
.sim-eco__in, .sim-eco__out { padding-left: 12px; border-left: 2px solid var(--qp-line-strong); }
.sim-eco__out { border-left-color: var(--qp-green); }
.sim-eco__go { display: inline-block; margin-top: 4px; font-size: var(--qp-t-13, 13px); color: var(--qp-ink); text-decoration: underline; text-underline-offset: 3px; }
.sim-eco__acts { display: flex; flex-wrap: wrap; gap: var(--qp-s-2, 8px); }
.sim-eco__btn { font: inherit; font-size: var(--qp-t-13, 13px); min-height: 34px; padding: 4px 14px; border-radius: var(--qp-r-pill, 999px); border: 1px solid var(--qp-line-strong); background: transparent; color: var(--qp-ink); cursor: pointer; }
.sim-eco__btn:hover { border-color: var(--qp-ink-2); }
.sim-eco__legend { margin: 0; font-size: var(--qp-t-12, 12px); line-height: 1.6; color: var(--qp-ink-2); }
.sim-eco__legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--qp-ink-2); vertical-align: middle; margin: 0 6px 0 0; }
.sim-eco__legend i.is-in { border-top-color: var(--qp-green); margin-left: 10px; }
.sim-eco button:focus-visible, .sim-eco a:focus-visible { outline: 2px solid var(--qp-green); outline-offset: 2px; }
@media (pointer: coarse) { .sim-eco__btn { min-height: var(--dt-tap, 44px); } .sim-eco__node { padding: 6px 10px; } }
@media (max-width: 860px) {
  .sim-eco { grid-template-columns: 1fr; gap: var(--qp-s-3, 12px); }
  .sim-eco__stage { height: clamp(280px, 82vw, 380px); }
  .sim-eco__node { font-size: var(--qp-t-12, 12px); padding: 3px 8px; }
  .sim-eco__info { min-height: 9em; font-size: var(--qp-t-13, 13px); }
}
/* กล่องเล็ก (Bento) */
.sim-eco--mini { display: flex; flex-direction: column; align-items: stretch; height: 100%; min-height: 220px; gap: 0; }
.sim-eco--mini .sim-eco__stage { flex: 1 1 auto; height: auto; min-height: 140px; }
.sim-eco--mini .sim-eco__node { font-size: var(--qp-t-12, 12px); padding: 2px 8px; }
.sim-eco--mini .sim-eco__node b { display: none; }
.sim-eco__bar { padding-top: var(--qp-s-2, 8px); border-top: 1px solid var(--qp-line); }
.sim-eco__cap { margin: 0; min-height: 3em; font-size: var(--qp-t-12, 12px); line-height: 1.5; color: var(--qp-ink-2); }
.sim-eco__cap b { color: var(--qp-ink); font-weight: 600; }