/* Hallmark · genre: editorial · macrostructure: Map / Diagram (3D river scene) · design-system: DESIGN.md (case file) · enrichment: Tier D three.js scene · designed-as-app
 * หน้าทางเลือกจัดการน้ำเหมือง: ฉาก 3 มิติเต็มความกว้าง ปุ่มมุมมอง และคำอธิบายของทางเลือกที่เลือก */

.mw-sim { padding-top: var(--space-xl); }
.mw-views { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.mw-views button {
    min-height: 44px; padding: 0 var(--space-sm); white-space: nowrap; cursor: pointer;
    font: 600 var(--text-sm) var(--font-body); color: var(--color-ink); background: var(--color-paper);
    border: 1.5px solid var(--color-rule-strong); border-radius: var(--radius-btn);
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.mw-views button:hover { background: var(--color-paper-2); }
.mw-views button:active { transform: translateY(1px); }
.mw-views button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

.mw-stage { position: relative; height: clamp(26rem, 68vh, 46rem); overflow: hidden; background: var(--color-paper-3); border-block: var(--rule-hair) solid var(--color-rule-strong); }
.mw-canvas, .mw-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mw-canvas canvas { cursor: grab; touch-action: none; }
.mw-canvas canvas:active { cursor: grabbing; }
.mw-labels { position: absolute; inset: 0; pointer-events: none; }
.mw-label {
    position: absolute; left: 0; top: 0; padding: 0 var(--space-2xs); white-space: nowrap;
    font-weight: 600; font-size: var(--text-xs); color: var(--color-ink); background: color-mix(in oklch, var(--color-paper) 88%, transparent); border-radius: 2px;
}
.mw-marker {
    position: absolute; left: 0; top: 0; width: 40px; height: 40px; pointer-events: auto; cursor: pointer;
    font: 700 var(--text-md) var(--font-display); color: var(--color-ink); background: var(--color-paper);
    border: 2px solid var(--color-ink); border-radius: 50%;
}
.mw-marker:hover { background: var(--color-paper-2); }
.mw-marker.is-on { background: var(--color-accent); border-color: var(--color-accent-strong); color: var(--color-accent-ink); }
.mw-hint {
    position: absolute; right: var(--space-sm); bottom: var(--space-xs); margin: 0; padding: 0 var(--space-2xs);
    font-size: var(--text-xs); color: var(--color-ink-2); background: color-mix(in oklch, var(--color-paper) 85%, transparent); border-radius: 2px;
}
.mw-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--color-ink-2); font-weight: 600; }
.mw-stage.is-ready .mw-loading { display: none; }
.mw-stage .mw-fallback { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--color-paper); }
.mw-stage.is-fallback .mw-fallback { display: block; }
.mw-stage.is-fallback .mw-loading, .mw-stage.is-fallback .mw-hint, .mw-stage.is-fallback .mw-canvas { display: none; }

.mw-detail { padding-top: var(--space-md); }
.mw-detail article { max-width: var(--measure); }
.mw-detail h3 { font-size: var(--text-xl); }
.mw-where { margin: 0 0 var(--space-3xs); font-weight: 700; font-size: var(--text-sm); color: var(--color-silt); }
.mw-weigh { padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }

.mw-n {
    display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; margin-right: var(--space-3xs); border-radius: 50%;
    font-family: var(--font-display); color: var(--color-paper); background: var(--color-ink);
}
.mw-table tbody th { width: 34%; }

.mw-figure { margin: 0; }
.mw-figure img { width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule); }
.mw-figure figcaption { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }

@media (max-width: 640px) {
    .mw-stage { height: 30rem; }
    .mw-views button { flex: 1 1 auto; }
    .mw-hint { left: var(--space-sm); right: auto; }
}