/* T-PIE Digital Twin dashboard — command-center grid (mockup rebuild, Phase 0+1). */ :root { --bg: #070b12; --bg-2: #0b1119; --panel: #0e1622; --panel-2: #121c2b; --text: #e7edf3; --muted: #8ba0b6; --faint: #64748b; --border: #1c2735; --border-2: #263346; --accent: #35c5f0; --accent-dim: #1f6f8a; --good: #2ecc71; --danger: #e74c3c; --warn: #e67e22; /* PM2.5 display bands (matches mockup legend) */ --b1: #3b82f6; --b2: #2ecc71; --b3: #f1c40f; --b4: #e67e22; --b5: #e74c3c; --b6: #9b2530; /* height of the shared top bar (topbar.js) — the same on every page, so every page's grid must take its first row from this token rather than hard-coding a number */ --top-h: 56px; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { /* the typeface is §09's (ตัวอักษรของเว็บ) — theme.js writes --ui-font, this is the fallback for a browser that has never opened the settings page */ font-family: var(--ui-font, "Segoe UI", "Noto Sans Thai", system-ui, sans-serif); color: var(--text); background: var(--bg); overflow: hidden; font-size: 13px; } /* The UA rule for [hidden] is `display: none`, which ANY author `display` declaration outranks -- so a component styled `display: flex` renders wide open on load despite its `hidden` attribute. That is exactly what `.why-drawer` did: it is `position: fixed` and parked at `translateX(102%)`, so a closed drawer sat 560px off the right edge of every page that carries it (index, source), still laid out and still counted by scripts/check_layout_fit.py as an overflow. Make the attribute win for every page built on this stylesheet -- impact.css already does the same for the war-room shell (`.ia [hidden]`), and this is the other half of that rule. Safe with the slide-in drawers: openWhy() clears `hidden` and only adds `.show` on the NEXT frame (requestAnimationFrame), so the transition still has a frame to start from; closeWhy() sets `hidden` back only after the 380ms transition has run. */ #app [hidden] { display: none !important; } /* ============ GRID SHELL ============ */ /* minmax(0, …) on the flexible column + min-width:0 on the children lets tracks shrink below their content's intrinsic width — without it a wide child (map, charts) forces the grid past the viewport and clips the right rail. The bottom strip spans the full width (as in the mockup) so its four charts stay roomy. */ #app { display: grid; width: 100%; height: 100vh; grid-template-columns: 300px minmax(0, 1fr) 300px; grid-template-rows: var(--top-h) minmax(0, 1fr) 190px; grid-template-areas: "top top top" "left center right" "bottom bottom bottom"; gap: 8px; padding: 8px; background: radial-gradient(1200px 600px at 50% -10%, #0d1826 0%, var(--bg) 60%); } #topbar { grid-area: top; } #left-rail { grid-area: left; } #center { grid-area: center; } #right-rail { grid-area: right; } #bottom-strip { grid-area: bottom; } #left-rail, #center, #right-rail, #bottom-strip { min-width: 0; } #left-rail, #right-rail { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* Keep each rail panel at its natural (content) height. Without this the panels inherit flex-shrink:1 and, on short viewports, get squashed below their content height — the content then spills past the panel border and overlaps the next panel. Pinning flex to 0 0 auto makes the rail scroll instead of squashing. */ #left-rail > .panel, #right-rail > .panel { flex: 0 0 auto; } #bottom-strip { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1.2fr; gap: 8px; min-height: 0; } #bottom-strip > .panel { min-width: 0; overflow: hidden; } /* ============ PANEL ============ */ .panel { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-height: 0; min-width: 0; display: flex; flex-direction: column; } .panel h2 { font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--accent); margin: 0; text-transform: uppercase; } .sub-th { font-size: 11px; color: var(--muted); margin: 2px 0 10px; } .prov-tag { font-size: 9px; color: var(--warn); border: 1px solid var(--warn); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: middle; opacity: .8; } .unit-tag { float: right; font-size: 10px; color: var(--faint); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 6px; } /* ============ TOP BAR ============ */ #topbar { display: flex; align-items: center; gap: 20px; background: linear-gradient(180deg, #0d1826, var(--bg-2)); border: 1px solid var(--border); border-radius: 10px; padding: 0 18px; } .brand h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: .01em; } .brand .accent, .accent { color: var(--accent); } .brand .sub { font-size: 10px; color: var(--muted); letter-spacing: .02em; } /* Top-bar menu — markup comes from topbar.js, so these rules cover ,