/* NÜXGROW · ตัวจำลอง "ห้องปลูก 1 ต้น 1 รอบ + กราฟ SPD" v0.1.4 — คู่กับ /qp/sim/sim-onecycle.js · ต้องมี quiet-precision.css ก่อน
   ใช้: <div id="…" data-sim="onecycle"></div> หลัง sim-core.js · กล่องกำหนดความสูงเอง (ห้องปลูก 16/11 · จอแคบ 4/5 + กราฟ SPD ~124px)
   สีหน้าจอทั้งหมดอ่านจาก --qp-* · สีสเปกตรัมตามความยาวคลื่น: ใช้ --sim-spec-* ของหน้าก่อน ไม่มี = ชุด --simoc-d/l-* ด้านล่าง (d = ธีมมืด · l = ธีมสว่าง · สคริปต์เลือกเองจากความสว่างของ --qp-bg) */
.oc {
  --simoc-d-400: #a07bff; --simoc-d-450: #4f86ff; --simoc-d-500: #2fd0e8; --simoc-d-550: #86e05a;
  --simoc-d-600: #ffb43c; --simoc-d-660: #ff4d4d; --simoc-d-730: #b3264a; --simoc-d-glow: var(--qp-green);
  --simoc-l-400: #6a3fd0; --simoc-l-450: #2152d0; --simoc-l-500: #0b8aa6; --simoc-l-550: #3a8f1c;
  --simoc-l-600: #c47400; --simoc-l-660: #cf2b2b; --simoc-l-730: #7a1631; --simoc-l-glow: #22b45e;
  position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--qp-line); background: var(--qp-surface); color: var(--qp-ink); font-family: var(--qp-font-sans);
}
.oc *, .oc *::before, .oc *::after { box-sizing: border-box; }
.oc__sim { position: relative; aspect-ratio: 16 / 11; min-height: 0; }
.oc__sim canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.oc__cv { z-index: 2; }
.oc__rays { z-index: 1; filter: blur(4px); mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.5) 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.5) 82%, transparent 100%); }
[data-qp-theme="light"] .oc__rays { mix-blend-mode: multiply; filter: blur(5px); }
.oc__lab, .oc__hud, .oc__foot { position: absolute; z-index: 3; }
.oc__lab { left: 12px; top: 10px; font-size: var(--qp-t-12, 12px); line-height: 1.5; color: var(--qp-muted); display: flex; gap: 8px; align-items: center; letter-spacing: 0; }
.oc__lab b { color: var(--qp-ink-2); font-weight: 500; }
.oc__tag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: var(--qp-r-pill, 999px); border: 1px solid var(--qp-src-sim); color: var(--qp-ink-2); font-size: var(--qp-t-12, 12px); letter-spacing: 0; white-space: nowrap; }
.oc__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--qp-src-sim); }
.oc__hud { right: 12px; top: 10px; display: grid; gap: 6px; }
.oc__hud div { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--qp-line); background: color-mix(in srgb, var(--qp-surface) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: var(--qp-t-12, 12px); line-height: 1.5; color: var(--qp-ink-2); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 150px; }
.oc__hud b { font: 500 13px var(--qp-font-mono); color: var(--qp-ink); white-space: nowrap; }
.oc__foot { left: 12px; right: 12px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--qp-t-12, 12px); line-height: 1.5; color: var(--qp-ink-2); pointer-events: none; }
.oc__msg { margin-left: auto; text-align: right; }
.oc__btn { pointer-events: auto; flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid var(--qp-line-strong); background: color-mix(in srgb, var(--qp-surface) 82%, transparent); color: var(--qp-ink-2); cursor: pointer; }
.oc__btn:hover { color: var(--qp-ink); border-color: var(--qp-ink-2); }
.oc__btn:focus-visible { outline: 2px solid var(--qp-green); outline-offset: 2px; }
.oc__btn svg { fill: currentColor; display: block; }
.oc__btn .oc__ico-play { display: none; }
.oc.is-paused .oc__btn .oc__ico-pause { display: none; }
.oc.is-paused .oc__btn .oc__ico-play { display: block; }
/* กราฟ SPD: หัว + แคนวาส + แกน nm เป็น DOM เรียงลง (ตัวหนังสือไม่ทับแคนวาส · อ่านสี token · ไม่มีตัวอักษรในแคนวาส) */
.oc__spd { position: relative; border-top: 1px solid var(--qp-line); background: var(--qp-surface); padding: 6px 0 2px; }
.oc__spdhead { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 0 12px; font-size: var(--qp-t-12, 12px); line-height: 1.5; color: var(--qp-muted); }
.oc__spdlab b, .oc__spdlab span { color: var(--qp-ink-2); font-weight: 500; }
.oc__cvS { display: block; width: 100%; height: 74px; margin-top: 2px; }
.oc__axis { position: relative; height: 18px; }
.oc__axis span { position: absolute; top: 1px; left: calc(50% - var(--oc-lampw, 60%) / 2 + var(--oc-lampw, 60%) * var(--k, 0)); transform: translateX(-50%); font: 400 10px var(--qp-font-mono); line-height: 1.6; color: var(--qp-ink-2); letter-spacing: 0; }
.oc--nograph .oc__spd { display: none; }
/* โหมดภาพล้วน data-chrome="off" (หน้าแรก): ไม่มีป้าย/การ์ด/บรรทัดสถานะ/ปุ่ม/หัวกราฟ/เลขแกน · DOM ยังอยู่ให้ aria + event · ไม่มีตัวเลขบนจอ */
.oc--bare .oc__lab, .oc--bare .oc__hud, .oc--bare .oc__foot, .oc--bare .oc__spdhead, .oc--bare .oc__axis { display: none; }
.oc--bare { max-width: var(--oc-max, 640px); margin-inline: auto; }   /* ภาพล้วน: กรอบกระชับ กว้างกว่าโคมไฟนิดเดียว (หน้าตั้งทับได้ด้วย --oc-max) */
.oc--bare .oc__spd { padding: 4px 0 4px; }
.oc--bare .oc__cvS { height: 86px; margin-top: 0; }
/* จอแคบ (≤ 600px): ฉากสูงขึ้น · การ์ดเป็นแถวล่าง · ซ่อนข้อความสถานะยาว (สถานะไฟอยู่ในการ์ด/หน้าอยู่แล้ว) · หลอดและกระถางขยับใน JS */
@media (max-width: 600px) {
  .oc__sim { aspect-ratio: 4 / 5; }
  .oc--bare .oc__sim { aspect-ratio: 1 / 1; }   /* ภาพล้วนไม่มีแถวการ์ด = ไม่ต้องสูงเท่าแบบมีป้าย */
  .oc__hud { top: auto; bottom: 44px; left: 10px; right: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .oc__hud div { min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 7px; }
  .oc__hud b { font-size: 12px; }
  .oc__foot { bottom: 8px; }
  .oc__msg { display: none; }
}