/* screens-space-plan.css · SPACE ผังชั้นจาก CAD/BIM (M14 lane S5 · 07-space-netmon.md §5.7 · DESIGN-TOKENS.md)
   รายการชั้น · รุ่นของชั้น · ผัง 2 มิติ (SVG/ไทล์) · layer · วางผัง · ห้องที่เสนอ · งานใน worker
   สีจากตัวแปรของชุดสีเท่านั้น · โหมดมืด: ผัง CAD กลับสี (เส้นสว่างบนพื้นมืด) แทนสีที่เขียนตรง · เป้ากด ≥ 24px · จอ 375px ไม่เลื่อนแนวนอนทั้งหน้า */

.spp { display: block; min-width: 0; }
.spp-head { margin: 4px 0 12px; }
.spp-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; overflow-wrap: anywhere; }
.spp-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 16px; overflow-wrap: anywhere; }
.spp-h3 { margin: 12px 0 4px; font-size: 14px; }
.spp-inline-h { display: inline-flex; margin: 0; }
.spp-lede { margin: 4px 0 0; max-width: 80ch; }
.spp-wrap { overflow-wrap: anywhere; word-break: break-word; }
.spp-inline { display: inline; margin: 0; }
.spp-stack { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.spp-stack > label { margin-top: 4px; }
.spp-stack input[type="text"], .spp-stack input[type="number"], .spp-stack textarea, .spp-stack select { max-width: 100%; }
.spp .card { min-width: 0; }

/* ป้ายสถานะ */
.spp-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.spp-badge .ico { width: 14px; height: 14px; flex: none; }
.spp-b-ok { background: var(--teal-bg); color: var(--teal-fg); }
.spp-b-bad { background: var(--p1-bg); color: var(--p1-fg); }
.spp-b-warn { background: var(--p2-bg); color: var(--p2-fg); }
.spp-b-info { background: var(--p3-bg); color: var(--p3-fg); }
.spp-b-muted { background: var(--surf2); color: var(--ink2); }
.spp-fmt { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 12px; color: var(--ink2); }

/* สรุปบนหน้ารายการ */
.spp-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 12px; }
.spp-num { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.spp-num-l { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.spp-num-n { font-size: 28px; line-height: 1.1; color: var(--ink); }
.spp-formats .note { display: block; }
.spp-bldg { margin: 0 0 12px; }
.spp-table th[scope="row"] { font-weight: 600; }
.spp-table td a:not(.btn), .spp-files a, .spp-lede a { text-decoration: underline; text-underline-offset: 2px; }

/* ขั้นของรุ่น */
.spp-status { margin: 0 0 12px; }
.spp-status-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.spp-steps { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.spp-steps li { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.spp-steps li.done { color: var(--teal-fg); background: var(--teal-bg); border-color: transparent; }
.spp-steps li.cur { color: var(--ink); border-color: var(--brand); font-weight: 600; }
.spp-busy { color: var(--ink2); }

/* โครงหน้าผัง: ผังกว้าง + แผงข้าง */
.spp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.spp-wide { grid-column: 1 / -1; }
.spp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 12px; align-items: start; margin: 0 0 12px; }
.spp-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.spp-side .card { margin: 0; }
@media (max-width: 1024px) { .spp-layout { grid-template-columns: minmax(0, 1fr); } }

/* ตัวดูผัง · กระดาษของแบบ (พื้นผิวของการ์ด · โหมดมืดกลับสีเส้น) */
.spp-viewer { margin: 0; }
.spp-canvas { position: relative; height: min(62vh, 640px); min-height: 280px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surf); touch-action: none; cursor: grab; }
.spp-canvas:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.spp-canvas.picking { cursor: crosshair; outline: 2px dashed var(--brand); outline-offset: -2px; }
.spp-img, .spp-svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.spp-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.spp-stage img { position: absolute; display: block; max-width: none; image-rendering: auto; }
[data-mode="dark"] .spp-img, [data-mode="dark"] .spp-svg, [data-mode="dark"] .spp-stage { filter: invert(0.9) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  [data-mode="system"] .spp-img, [data-mode="system"] .spp-svg, [data-mode="system"] .spp-stage { filter: invert(0.9) hue-rotate(180deg); }
}
.spp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.spp-tools[hidden] { display: none; }
.spp-readout { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); }

/* layer */
.spp-layers { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; max-height: 320px; overflow: auto; }
.spp-check { display: flex; align-items: center; gap: 6px; min-height: 28px; overflow-wrap: anywhere; }
.spp-check input { flex: none; width: 18px; height: 18px; }
.spp-swatch { flex: none; width: 12px; height: 12px; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--surf2); }

/* วางผัง */
.spp-radios { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; }
.spp-radios label { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.spp-pts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.spp-pts fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
.spp-pts legend { padding: 0 4px; font-size: 13px; color: var(--ink2); }
.spp-pts [data-pick] { grid-column: 1 / -1; justify-self: start; }
.spp-pts label { display: flex; align-items: center; gap: 4px; min-width: 0; font-family: var(--font-mono); font-size: 13px; }
.spp-pts input { width: 100%; min-width: 0; }
.spp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 10px; }
.spp-grid2 label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spp-grid2 input { width: 100%; min-width: 0; }
.spp-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 8px; }
.spp-dl dt { color: var(--ink2); font-size: 13px; }
.spp-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ห้องที่เสนอ */
.spp-rowform { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.spp-rowform select { max-width: 100%; min-width: 0; }
.spp-new { flex-basis: 100%; }
.spp-new label { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.spp-files { margin: 0; padding-left: 18px; }
.spp-files li { margin: 4px 0; overflow-wrap: anywhere; }
.spp-limits { margin: 0; padding-left: 18px; }

@media (max-width: 480px) {
  .spp-canvas { height: 56vh; min-height: 240px; }
  .spp-pts fieldset { grid-template-columns: minmax(0, 1fr); }
}