:root {
  color-scheme: light;
  --surface: #ffffff;
  --background: #f3f6f4;
  --text: #1f2937;
  --muted: #667085;
  --primary: #166534;
  --primary-soft: #dcfce7;
  --border: #dbe3dc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Noto Sans Thai", "Sarabun", "Segoe UI", sans-serif;
}

.app-shell {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1rem;
}

.brand { display: grid; gap: .2rem; margin-bottom: 2rem; }
.brand-title { font-size: 1.35rem; font-weight: 700; color: var(--primary); }
.brand-subtitle { color: var(--muted); font-size: .85rem; }

.sidebar nav ul,
.sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.sidebar a {
  display: block;
  padding: .7rem .85rem;
  border-radius: .55rem;
  color: var(--text);
  text-decoration: none;
}
.sidebar a:hover, .sidebar a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.content { padding: clamp(1rem, 4vw, 2.5rem); }
.page-header h1 { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.page-content { max-width: 72rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .8rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}
.card h3, .card p { margin: 0; }
.card-value { color: var(--primary); font-size: 2rem; font-weight: 700; margin-top: .5rem; }
.card-description { color: var(--muted); font-size: .9rem; margin-top: .4rem; }

.table-wrapper { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); text-align: left; }
th { background: #eef5ef; color: var(--primary); }
tbody tr:last-child td { border-bottom: 0; }
.empty { color: var(--muted); }
.map-placeholder {
  min-height: 28rem;
  display: grid;
  place-items: center;
  background: #dbeafe;
  border-radius: .8rem;
  color: #1e40af;
}

/* ---------- 3D map: cozy game HUD ---------- */
.map3d-root {
  --hud-bg: rgb(255 250 238 / 92%);
  --hud-ink: #3a2f25;
  --hud-muted: #7a6a55;
  --hud-line: #e3d4b4;
  --hud-accent: #4f8a3c;
  --hud-shadow: 0 6px 0 rgb(122 95 60 / 18%), 0 14px 30px rgb(60 45 25 / 16%);
  position: relative;
  width: 100%;
  height: clamp(36rem, calc(100vh - 9rem), 62rem);
  overflow: hidden;
  border: 3px solid #e7d6b2;
  border-radius: 1.4rem;
  background: linear-gradient(#a8d6f0, #fbe7c6);
  box-shadow: 0 18px 40px rgb(60 45 25 / 16%);
  color: var(--hud-ink);
  font-family: "Noto Sans Thai", "Sarabun", "Segoe UI", sans-serif;
}
.map3d-stage { position: absolute; inset: 0; z-index: 0; outline: none; isolation: isolate; }
.map3d-stage canvas { display: block; touch-action: none; }
.map3d-stage:focus-visible { box-shadow: inset 0 0 0 3px #f2b134; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.map3d-labels { position: absolute; inset: 0; pointer-events: none; }
.hide-labels .map3d-labels { display: none; }

.tambon-banner {
  display: grid;
  justify-items: center;
  padding: .25rem .75rem .3rem;
  border: 2px solid #8a6242;
  border-radius: .55rem;
  background: #fff4d8;
  box-shadow: 0 3px 0 #8a6242;
  color: var(--hud-ink);
  line-height: 1.15;
  pointer-events: none; /* let drags/clicks reach the 3D canvas (ground click selects the tambon) */
  transition: transform .15s ease, opacity .2s ease;
  white-space: nowrap;
}
.tambon-banner:hover, .tambon-banner.is-selected { transform: translateY(-3px) scale(1.06); background: #ffe7a8; }
.tambon-banner-name { font-weight: 800; font-size: .95rem; }
.tambon-banner-meta { font-size: .66rem; color: var(--hud-muted); }
.is-zoomed.has-selection .tambon-banner:not(.is-selected) { opacity: .45; }

.landmark-label {
  position: relative;
  display: grid;
  gap: .1rem;
  max-width: 17rem;
  padding: .18rem .55rem;
  border-radius: .7rem;
  border: 2px solid var(--accent, #8a6242);
  background: #fffaf0;
  color: var(--hud-ink);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 3px 0 rgb(0 0 0 / 14%);
  pointer-events: none;
  transform: translateY(-50%);
  animation: lm-pop .25s ease-out;
}
.landmark-label::after { /* little pointer down to the building */
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--accent, #8a6242); border-bottom: 0;
}
.lm-head { display: flex; align-items: center; gap: .3rem; }
.lm-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* full name, max 2 lines */
.lm-icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--accent, #8a6242); }
.lm-detail { display: none; font-weight: 500; font-size: .66rem; color: var(--hud-muted); white-space: normal; }
.lm-type { color: var(--accent, #8a6242); font-weight: 700; }
.lm-products { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .15rem; }
.lm-products i { font-style: normal; padding: 0 .35rem; border-radius: 999px; background: #f1e6cf; color: var(--hud-ink); }
.landmark-label.is-detailed { padding: .35rem .6rem; }
.landmark-label.is-detailed .lm-detail { display: block; }
.landmark-label.is-detailed .lm-head { white-space: normal; }
@keyframes lm-pop { from { opacity: 0; transform: translateY(-40%) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .landmark-label { animation: none; } }

/* resource bar */
.game-hud-top {
  position: absolute;
  top: .75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: .5rem;
  max-width: calc(100% - 1.5rem);
  z-index: 3;
  pointer-events: none;
}
.game-scope, .game-resources {
  pointer-events: auto;
  background: var(--hud-bg);
  border: 2px solid var(--hud-line);
  border-radius: 1rem;
  box-shadow: var(--hud-shadow);
}
.game-scope { display: grid; align-content: center; padding: .35rem .85rem; min-width: 8.5rem; }
.game-scope-kicker { font-size: .66rem; color: var(--hud-muted); }
.game-scope strong { font-size: 1.02rem; }
.game-resources { display: flex; gap: .15rem; margin: 0; padding: .3rem .4rem; list-style: none; overflow-x: auto; }
.game-resource { display: flex; align-items: center; gap: .4rem; padding: .15rem .55rem; border-right: 1px dashed var(--hud-line); }
.game-resource:last-child { border-right: 0; }
.game-resource-icon img { display: block; }
.game-resource-text { display: grid; line-height: 1.1; }
.game-resource-label { font-size: .64rem; color: var(--hud-muted); white-space: nowrap; }
.game-resource strong { font-size: .98rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-resource small { font-size: .6rem; color: var(--hud-muted); white-space: nowrap; }

/* buttons */
.map3d-back, .game-chip, .map3d-control-button, .game-speed button {
  font: inherit;
  cursor: pointer;
  border-radius: .7rem;
}
.map3d-back {
  position: absolute;
  top: 5.2rem;
  left: .75rem;
  z-index: 3;
  min-height: 2.4rem;
  padding: .35rem .9rem;
  border: 2px solid #3f6f2f;
  background: #5c9a45;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 0 #3f6f2f;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.has-selection .map3d-back { opacity: 1; pointer-events: auto; }
.map3d-back:active, .map3d-control-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #3f6f2f; }
.game-chip {
  min-height: 1.9rem;
  padding: .15rem .6rem;
  border: 2px solid var(--hud-line);
  background: #fff;
  color: var(--hud-ink);
  font-size: .72rem;
  font-weight: 700;
}
.game-chip[aria-pressed="false"] { background: #f1e6cf; color: var(--hud-muted); }

/* legend */
.game-legend {
  position: absolute;
  top: 8.1rem;
  left: .75rem;
  bottom: 13.4rem;
  z-index: 2;
  width: min(19.5rem, 34%);
  display: flex;
  flex-direction: column;
  padding: .7rem .75rem;
  background: var(--hud-bg);
  border: 2px solid var(--hud-line);
  border-radius: 1rem;
  box-shadow: var(--hud-shadow);
  overflow: hidden;
}
.has-selection .game-legend { top: 8.1rem; }
.map3d-root:not(.has-selection) .game-legend { top: 5.2rem; }
.game-legend.is-collapsed { bottom: auto; }
.game-legend.is-collapsed .game-legend-body { display: none; }
.game-legend-body { overflow: auto; margin-top: .4rem; padding-right: .2rem; scrollbar-width: thin; }
.map3d-legend-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.map3d-legend-header h3 { margin: 0; font-size: .86rem; }
.game-legend-body .map3d-legend-header { margin: 0 0 .4rem; }
.game-legend-body .map3d-legend-header .legend-scope { margin: 0; }
.game-tabs { display: flex; gap: .3rem; margin-top: .5rem; }
.game-tabs button { flex: 1; font: inherit; font-size: .74rem; font-weight: 800; min-height: 2rem; border: 2px solid var(--hud-line); border-radius: .7rem .7rem .3rem .3rem; background: #f1e6cf; color: var(--hud-muted); cursor: pointer; }
.game-tabs button[aria-selected="true"] { background: #fff; color: var(--hud-ink); border-color: #d9c39a; }
[role="tabpanel"][hidden] { display: none; }
.legend-scope { margin: 0 0 .35rem; font-size: .72rem; color: var(--hud-muted); }
#legend-units ul, .legend-buildings { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.legend-unit { display: flex; gap: .45rem; align-items: flex-start; padding: .25rem .35rem; border-radius: .6rem; background: #fff; border: 1px solid #efe3c8; font-size: .74rem; line-height: 1.25; }
.legend-unit.is-estimated { border-style: dashed; background: #fbf6ea; }
.legend-unit img { flex: 0 0 auto; }
.legend-unit small { display: block; color: var(--hud-muted); font-size: .66rem; }
.legend-note { margin: .35rem 0 0; font-size: .66rem; color: var(--hud-muted); }
.legend-buildings li { display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: center; gap: .45rem; padding: .15rem .35rem; border-radius: .6rem; background: #fff; border: 1px solid #efe3c8; font-size: .74rem; line-height: 1.2; }
.legend-buildings li.is-civic { background: #f7f1e3; }
.legend-buildings small { display: block; color: var(--hud-muted); font-size: .64rem; }
.legend-buildings em { font-style: normal; font-weight: 800; color: var(--hud-accent); font-size: .9rem; min-width: 1.2rem; text-align: right; }
.legend-thumb { width: 2.75rem; height: 2.75rem; object-fit: contain; }

/* selected card */
.map3d-panel {
  position: absolute;
  top: 5.2rem;
  right: .75rem;
  z-index: 2;
  width: min(21rem, 34%);
  max-height: calc(100% - 13.6rem);
  overflow: auto;
  padding: .9rem 1rem;
  background: var(--hud-bg);
  border: 2px solid var(--hud-line);
  border-radius: 1rem;
  box-shadow: var(--hud-shadow);
  font-size: .86rem;
  scrollbar-width: thin;
}
.map3d-panel-body { display: grid; gap: .55rem; }
.map3d-panel-body h2, .map3d-panel-body h3 { margin: 0; }
.map3d-panel-body h2 { font-size: 1.12rem; }
.map3d-panel-body h3 { margin-top: .3rem; font-size: .92rem; }
.map3d-panel-body p, .map3d-panel-body ul { margin: 0; }
.map3d-panel-body ul { padding-left: 1.15rem; font-size: .82rem; }
.map3d-list { display: grid; gap: .3rem; }
.map3d-metrics { display: grid; gap: .4rem; margin: 0; }
.map3d-metrics div { display: flex; justify-content: space-between; gap: .8rem; padding-bottom: .25rem; border-bottom: 1px dashed var(--hud-line); }
.map3d-metrics dt { color: var(--hud-muted); }
.map3d-metrics dd { margin: 0; font-weight: 700; text-align: right; }
.map3d-note { color: #7c6440; font-size: .76rem; }
.card-head { display: flex; gap: .6rem; align-items: center; }
.card-kicker { font-size: .7rem; color: var(--hud-muted); }
.card-extra { padding-top: .5rem; border-top: 2px dashed var(--hud-line); }

/* minimap */
.game-minimap {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  z-index: 2;
  width: 11.5rem;
  height: 11.5rem;
  padding: .35rem;
  background: #cfe8f2;
  border: 3px solid #e7d6b2;
  border-radius: 1rem;
  box-shadow: var(--hud-shadow);
}
.game-minimap canvas { width: 100%; height: 100%; cursor: crosshair; display: block; }

/* time bar */
.map3d-controls {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  left: 13.2rem;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem .6rem;
  padding: .5rem .65rem;
  background: var(--hud-bg);
  border: 2px solid var(--hud-line);
  border-radius: 1rem;
  box-shadow: var(--hud-shadow);
  font-size: .78rem;
}
.map3d-control-button {
  min-height: 2.2rem;
  padding: .25rem .8rem;
  border: 2px solid #3f6f2f;
  background: #5c9a45;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 3px 0 #3f6f2f;
}
.is-paused .map3d-control-button { background: #e3a43a; border-color: #a56f17; box-shadow: 0 3px 0 #a56f17; }
.game-speed { display: inline-flex; border: 2px solid var(--hud-line); border-radius: .75rem; overflow: hidden; }
.game-speed button { min-height: 2rem; padding: 0 .6rem; border: 0; border-radius: 0; background: #fff; color: var(--hud-ink); font-weight: 700; }
.game-speed button[aria-pressed="true"] { background: #f2cf62; }
.game-clock { display: grid; line-height: 1.15; padding: .1rem .7rem; border-radius: .7rem; background: #2f3b4a; color: #fdf3d8; min-width: 9.5rem; }
#game-clock { font-weight: 800; font-variant-numeric: tabular-nums; }
#game-season { font-size: .66rem; color: #f2cf62; }
.map3d-control-field { display: inline-flex; align-items: center; gap: .3rem; }
.map3d-control-field span { color: var(--hud-muted); font-weight: 700; }
.map3d-control-field select { min-height: 2rem; border: 2px solid var(--hud-line); border-radius: .6rem; background: #fff; font: inherit; padding: 0 .3rem; }
.map3d-layer-controls { position: relative; }
.map3d-layer-controls summary { cursor: pointer; padding: .3rem .6rem; border: 2px solid var(--hud-line); border-radius: .6rem; background: #fff; font-weight: 700; list-style: none; }
.map3d-layer-controls[open] > label { display: flex; }
.map3d-layer-controls > label { display: none; align-items: center; gap: .3rem; }
.map3d-layer-controls[open] {
  display: grid;
  gap: .25rem;
}
.map3d-layer-controls[open] summary { margin-bottom: .2rem; }

/* tooltip */
.game-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  max-width: 17rem;
  padding: .5rem .65rem;
  background: #fffaf0;
  border: 2px solid #8a6242;
  border-radius: .8rem;
  box-shadow: 0 4px 0 rgb(138 98 66 / 35%);
  font-size: .76rem;
  line-height: 1.35;
  pointer-events: none;
}
.game-tooltip[hidden] { display: none; }
.game-tooltip p { margin: .1rem 0 0; }
.tip-head { display: flex; align-items: center; gap: .4rem; font-size: .84rem; }
.tip-meta { color: var(--hud-muted); font-size: .68rem; }

/* onboarding */
.game-onboarding { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgb(47 42 36 / 28%); }
.game-onboarding[hidden] { display: none !important; pointer-events: none; }
.onboard-card { width: min(24rem, 90%); padding: 1.1rem 1.2rem; background: #fffaf0; border: 3px solid #8a6242; border-radius: 1.2rem; box-shadow: 0 6px 0 #8a6242; }
.onboard-card span { font-size: .72rem; font-weight: 800; color: var(--hud-accent); }
.onboard-card h3 { margin: .2rem 0 .4rem; }
.onboard-card p { margin: 0 0 .8rem; font-size: .9rem; }
.onboard-card div { display: flex; justify-content: flex-end; gap: .5rem; }
.onboard-card button { font: inherit; color: var(--hud-ink); min-height: 2.3rem; padding: 0 1rem; border-radius: .7rem; border: 2px solid var(--hud-line); background: #fff; cursor: pointer; }
.onboard-card button.primary { background: #5c9a45; border-color: #3f6f2f; color: #fff; font-weight: 800; }

.is-error .map3d-stage { background: #f6efe0; }

@media (max-width: 1100px) {
  .game-resource-label { display: none; }
  .game-resource small { display: none; }
  .game-legend { width: 16rem; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .map3d-root { height: 78vh; border-radius: 1rem; }
  .game-hud-top { left: .5rem; right: .5rem; transform: none; max-width: none; }
  .game-scope { display: none; }
  .game-resources { width: 100%; }
  .game-resource { padding: .1rem .35rem; }
  .game-legend, .game-minimap { display: none; }
  .map3d-back { top: 4.4rem; left: .5rem; }
  .map3d-panel { top: auto; bottom: 7.4rem; left: .5rem; right: .5rem; width: auto; max-height: 30%; }
  .map3d-controls { left: .5rem; right: .5rem; bottom: .5rem; justify-content: center; }
  .map3d-control-field span { display: none; }
  .map3d-control-button, .map3d-back { min-height: 2.75rem; }
}

@media (pointer: coarse) {
  .map3d-control-button, .map3d-back, .game-speed button { min-height: 2.75rem; }
  .map3d-control-field select { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tambon-banner, .map3d-back { transition: none; }
}

*:focus-visible {
  outline: 3px solid #059669;
  outline-offset: 2px;
  border-radius: .25rem;
}

.map-table-section { margin-top: 1.25rem; }
.map-table-section summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--primary);
}

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
.kpi-grid.compact { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.stat-card { min-height: 8.5rem; display: flex; flex-direction: column; justify-content: center; }
.stat-card h3 { font-size: .92rem; color: var(--muted); }
.stat-card .unit { font-size: .85rem; color: var(--muted); font-weight: 500; }
.card-description { color: var(--muted); }
.card-description.delta-up, .delta-up { color: #b45309; font-weight: 600; }
.card-description.delta-down, .delta-down { color: #dc2626; font-weight: 600; }
.delta.neutral, .card-footnote { color: var(--muted); font-size: .82rem; }
.card-footnote { margin-top: .25rem; }

.filter-bar {
  display: grid; grid-template-columns: minmax(11rem, 18rem) minmax(8rem, 10rem) auto;
  gap: .75rem; align-items: end; background: var(--surface); border: 1px solid var(--border);
  border-radius: .8rem; padding: 1rem; margin-bottom: 1.5rem;
}
.filter-bar.grow, .filter-field.grow { grid-column: auto / span 2; }
.filter-field { display: grid; gap: .35rem; }
.filter-field label { font-size: .86rem; font-weight: 600; }
select, input, button {
  min-height: 2.5rem; border: 1px solid #b9c4ba; border-radius: .55rem; background: white;
  color: var(--text); font: inherit; padding: 0 .7rem;
}
select:focus, input:focus { border-color: var(--primary); }
button {
  border: 0; background: var(--primary); color: white; font-weight: 650; cursor: pointer;
  padding-inline: 1.1rem;
}
button:hover { background: #14532d; }
.button-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.3rem;
  margin-top: auto; border-radius: .55rem; padding: .4rem .8rem; background: var(--primary-soft);
  color: var(--primary); font-weight: 650; text-decoration: none;
}

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; padding: 1rem; box-shadow: 0 1px 2px rgb(15 23 42 / 5%); }
.chart-heading h2 { margin: 0; font-size: 1.05rem; }
.chart-heading p { margin: .3rem 0 1rem; color: var(--muted); font-size: .86rem; }
.chart-canvas { position: relative; height: 19rem; }
.chart-error::after { content: "ไม่สามารถโหลดแผนภูมิได้"; color: #b91c1c; font-weight: 600; }

.card-grid, .organization-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.area-card, .organization-card, .content-section { display: flex; flex-direction: column; gap: .65rem; }
.area-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.area-card h2, .organization-card h2, .content-section h2 { margin: 0; font-size: 1.05rem; }
.area-card-facts { display: grid; gap: .4rem; margin: 0; }
.area-card-facts div { display: flex; justify-content: space-between; gap: 1rem; }
.area-card-facts dt, .detail-grid dt { color: var(--muted); }
.area-card-facts dd, .detail-grid dd { margin: 0; font-weight: 650; text-align: right; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 1rem 0 0; }
.detail-grid dt { font-size: .85rem; }
.detail-grid a { color: var(--primary); }
.chip-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { display: inline-flex; align-items: center; border-radius: 999px; background: #edf3ee; color: #36514a; padding: .25rem .6rem; font-size: .76rem; }
.chip.kind-mou_group, .chip.kind-tambon { background: var(--primary-soft); color: var(--primary); }
.chip.kind-enterprise { background: #dbeafe; color: #1d4ed8; }
.chip.product { background: #f3f4f6; }
.muted { color: var(--muted); margin: 0; }

.page-intro { margin-bottom: 1.5rem; }
.page-intro h2, section > h2 { margin-top: 0; }
section { scroll-margin-top: 1rem; }
.content-section { margin-bottom: 1rem; overflow-wrap: anywhere; }
.content-table { margin-top: .75rem; border: 1px solid var(--border); }
.breadcrumb { margin-bottom: 1rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; color: var(--muted); }
.breadcrumb a { color: var(--primary); }

.village-filter { grid-template-columns: minmax(14rem, 1fr) minmax(11rem, 15rem) auto; }
.empty { padding: 1.25rem; color: var(--muted); }

@media (max-width: 560px) {
  .filter-bar, .village-filter { grid-template-columns: 1fr; }
  .filter-bar.grow, .filter-field.grow { grid-column: auto; }
  .chart-canvas { height: 15rem; }
  .detail-grid dd, .area-card-facts dd { text-align: left; }
}

.map3d canvas, .map3d-canvas canvas { touch-action: none; }

/* ===================================================================
   Infographic system (T10) — cozy cartoon palette shared with /map
   =================================================================== */
:root {
  --ink: #3a2f25;
  --paper: #fffaf0;
  --paper-2: #fbf3e3;
  --sand: #efe3c1;
  --grass: #6fae5a;
  --gold: #e7b941;
  --sky: #8cc8ec;
}
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: none; overflow: visible; }
.unit-key {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem;
  border: 1.5px dashed #c7b183; border-radius: 999px; background: var(--paper);
  font-size: .85rem; color: var(--ink); white-space: nowrap;
}
.unit-key .ico { font-size: 1.25rem; }
.unit-keys { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .9rem; }

.info-hero {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #e7f3fb 0%, #fbe7c6 100%);
  border: 2px solid var(--ink); border-radius: 1.2rem; padding: 1rem 1.4rem; margin-bottom: 1rem;
  box-shadow: 0 4px 0 var(--ink);
}
.info-hero h2 { margin: .1rem 0; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink); }
.info-hero .muted { margin: 0; max-width: 46rem; }
.eyebrow { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: #94583f; }
.map-link, .print-button { display: inline-flex; align-items: center; gap: .4rem; }
.map-link .ico, .print-button .ico { font-size: 1.2rem; }

.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.kpi-tile {
  display: flex; gap: .8rem; align-items: center; background: var(--surface);
  border: 2px solid var(--ink); border-radius: 1rem; padding: .85rem 1rem;
  box-shadow: 0 3px 0 var(--accent, var(--ink));
}
.kpi-icon {
  font-size: 2.6rem; width: 3.6rem; height: 3.6rem; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--accent) 18%, white); border-radius: 50%;
}
.kpi-body { min-width: 0; }
.kpi-body h3 { margin: 0; font-size: .88rem; color: var(--muted); font-weight: 600; }
.kpi-value { margin: .1rem 0; font-size: 1.65rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.kpi-value .unit { font-size: .85rem; color: var(--muted); font-weight: 600; }
.kpi-caption { font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .2rem; align-items: center; }
.kpi-caption .ico { font-size: 1rem; }

.info-grid { columns: 2 30rem; column-gap: var(--gap, 1rem); }
.info-grid > .info-panel { break-inside: avoid; margin: 0 0 var(--gap, 1rem); display: block; width: 100%; box-sizing: border-box; }
.info-panel {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 1.1rem;
  padding: 1.1rem 1.2rem; box-shadow: 0 4px 0 #d8c497; min-width: 0;
}
.info-panel.wide { grid-column: 1 / -1; }
.info-head { display: flex; gap: .75rem; align-items: flex-start; list-style: none; cursor: pointer; }
.info-head::-webkit-details-marker { display: none; }
.info-title { flex: 1; min-width: 0; }
.info-chevron { font-size: 1.1rem; color: var(--hud-muted, #7a6a55); transition: transform .2s; padding-top: .3rem; }
details.info-panel:not([open]) .info-chevron { transform: rotate(-90deg); }
details.info-panel:not([open]) .info-caption { display: none; }
.info-body { margin-top: .5rem; }
.info-head h2 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.info-badge {
  width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center; flex: none;
  font-size: 1.6rem; border: 2px solid var(--ink);
}
.info-caption { margin: .2rem 0 0; color: #5b4a39; font-size: .92rem; }
.info-caption strong { color: var(--ink); }

.pic-block { display: grid; gap: .45rem; }
.pic-row { display: grid; grid-template-columns: minmax(4.5rem, 7rem) 1fr auto; gap: .6rem; align-items: center; }
.pic-label { font-weight: 600; color: var(--ink); font-size: .9rem; }
.pic-icons { display: flex; flex-wrap: wrap; gap: 1px; font-size: 1.15rem; line-height: 1; min-width: 0; }
.pic-block.big .pic-icons { font-size: 1.5rem; }
.pic-value { font-weight: 700; color: var(--ink); white-space: nowrap; }
.pic-value small { font-weight: 500; color: var(--muted); }
.pic { display: inline-flex; position: relative; }
.pic.partial .pic-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; display: inline-flex; }

.multiples { display: grid; gap: 0; }
.multiple { display: grid; grid-template-columns: minmax(6.5rem, 9.5rem) 1fr; gap: .5rem; align-items: center; padding: .15rem 0; border-bottom: 1px dotted #d8c497; }
.multiple-name { color: var(--ink); font-weight: 600; font-size: .85rem; text-decoration: none; }
.multiple-name:hover { text-decoration: underline; }
.multiple-icons { display: grid; grid-template-columns: 1fr 2.8rem 1fr 2.4rem; gap: .35rem; align-items: center; }
.multiple-icons .mi { flex-wrap: nowrap; overflow: hidden; }
.mi { display: flex; flex-wrap: wrap; gap: 1px; font-size: 1rem; line-height: 1; }
.mi-num { font-size: .8rem; font-weight: 700; color: var(--ink); text-align: right; }

.income-avg { background: var(--paper-2); border-radius: .8rem; padding: .6rem .8rem; margin-bottom: .6rem; }
.income-change { margin: 0; font-size: .9rem; }
.income-list { display: grid; gap: 0; }
.income-row { display: grid; grid-template-columns: minmax(6.5rem, 9.5rem) 1fr 4.2rem 4.6rem; gap: .5rem; align-items: center; border-bottom: 1px dotted #d8c497; padding: .2rem 0; }
.coin-line { flex-wrap: nowrap; font-size: 1.05rem; }
.pic.ghost { opacity: .45; }
.pic.gained { border-radius: 50%; box-shadow: 0 0 0 1.5px #3fa65a; }
.cmp { display: inline-flex; align-items: center; gap: .15rem; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.cmp.up { color: #2f7d45; }
.cmp.down { color: #b23b37; }
.cmp.neutral { color: var(--muted); }

.staircase { display: grid; gap: .35rem; }
.stair { display: grid; grid-template-columns: 8.5rem 1fr 3.6rem; gap: .5rem; align-items: center; }
.stair-icons {
  display: flex; flex-wrap: wrap; gap: 1px; font-size: 1.1rem; line-height: 1;
  padding-left: calc(var(--step) * .55rem); border-left: 3px solid #d8c497; min-height: 1.3rem;
}
.stair-label { font-size: .85rem; color: var(--ink); text-align: right; }
.stair-pct { font-weight: 700; text-align: right; }
.stair.zero { opacity: .4; }
.stair.zero .stair-icons { min-height: .6rem; }
.staircase { gap: .5rem; }
.stair-icons { font-size: 1.3rem; }

.waffle-wrap { display: grid; grid-template-columns: minmax(12rem, 17rem) 1fr; gap: 1rem; align-items: start; }
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; aspect-ratio: 1; background: var(--paper-2); padding: 4px; border-radius: .6rem; border: 1.5px solid #d8c497; }
.waffle-cell { display: grid; place-items: center; font-size: clamp(.9rem, 1.6vw, 1.35rem); }
.waffle-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .85rem; }
.waffle-legend li { display: grid; grid-template-columns: 1.3rem 1fr auto auto; gap: .4rem; align-items: center; }
.waffle-legend li.tiny { opacity: .7; }
.waffle-legend .ico { font-size: 1.2rem; }
.waffle-legend .muted { font-size: .75rem; min-width: 4.2rem; text-align: right; }

.type-totals { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.type-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; background: var(--paper-2); border: 1.5px solid #e3d4b4; border-radius: .8rem; padding: .55rem .7rem; text-decoration: none; color: var(--ink); height: 100%; box-sizing: border-box; }
.type-tile:hover, .type-tile:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, white); }
.type-icon { grid-row: 1 / 3; font-size: 2.3rem; line-height: 1; }
.type-count { font-size: 1.35rem; line-height: 1.1; }
.type-name { font-size: .78rem; color: #5b4a39; line-height: 1.25; }
.chip-link { align-self: end; padding: .45rem .8rem; border-radius: 999px; background: var(--paper-2); border: 1.5px solid #e3d4b4; color: var(--ink); text-decoration: none; font-size: .85rem; }
.tally { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1px; font-size: 1.15rem; }
.tally-num, .tally-more { font-size: .8rem; font-weight: 700; margin-left: .25rem; color: var(--ink); }
.matrix-wrap { margin-bottom: .6rem; }
.icon-matrix { border-collapse: collapse; font-size: .8rem; }
.icon-matrix caption { text-align: left; font-weight: 700; padding-bottom: .3rem; }
.icon-matrix th, .icon-matrix td { border: 1px dotted #d8c497; padding: .25rem .35rem; text-align: center; }
.icon-matrix thead .ico { font-size: 1.4rem; }
.icon-matrix th[scope=row] { text-align: left; white-space: nowrap; }
.icon-matrix .tally { font-size: .95rem; justify-content: center; }

.spk-row.selected { background: #e6f2d8; border-radius: .5rem; outline: 2px solid var(--grass); }

.project-info { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: 1rem; align-items: start; margin-bottom: .8rem; }
.gauge { margin: 0; text-align: center; }
.gauge svg { width: 100%; max-width: 12rem; }
.gauge figcaption { display: grid; }
.gauge figcaption strong { font-size: 1.5rem; color: var(--ink); }
.gauge figcaption span { font-size: .8rem; color: var(--muted); }
.flag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.flag-list li { display: flex; gap: .5rem; align-items: flex-start; }
.flag-list > li > .ico { font-size: 2rem; }
.flag-body a { font-weight: 600; color: var(--ink); }
.flag-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .82rem; }
.coin-pile { display: inline-flex; flex-wrap: wrap; font-size: 1.1rem; gap: 0; }
.roi-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; border: 1px solid var(--ink); vertical-align: -1px; }

details.as-table { margin-top: .7rem; }
details.as-table summary { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--primary); }
details.as-table table { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .85rem; background: var(--surface); }
details.as-table th, details.as-table td { border-bottom: 1px solid var(--border); padding: .35rem .5rem; text-align: left; }

/* tambon profile cards */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.profile-card { background: var(--paper); border: 2px solid var(--ink); border-radius: 1.1rem; padding: 1rem; box-shadow: 0 4px 0 #d8c497; display: grid; gap: .6rem; }
.profile-card h2 { margin: 0; font-size: 1.2rem; color: var(--ink); display: flex; gap: .4rem; align-items: center; }
.profile-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.profile-facts div { background: var(--paper-2); border-radius: .7rem; padding: .45rem .4rem; text-align: center; }
.profile-facts dt { font-size: .72rem; color: var(--muted); }
.profile-facts dd { margin: 0; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.profile-facts .ico { font-size: 1.6rem; display: block; margin: 0 auto .1rem; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.org-type-icon { font-size: 1.8rem; }
.org-card-head { display: flex; gap: .5rem; align-items: center; }

@media (max-width: 760px) {
  .waffle-wrap, .project-info { grid-template-columns: 1fr; }
  .waffle { max-width: 20rem; }
  .multiple { grid-template-columns: 1fr; }
  .income-row { grid-template-columns: 1fr auto auto; }
  .income-row .coin-line { grid-column: 1 / -1; grid-row: 2; }
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .kpi-tile { flex-direction: column; align-items: flex-start; gap: .35rem; padding: .6rem .7rem; }
  .kpi-icon { font-size: 1.6rem; width: 2.4rem; height: 2.4rem; }
  .info-grid { columns: 1; }
  .info-panel { padding: .7rem .8rem; }
  .stair { grid-template-columns: 6.5rem 1fr 3rem; }
  .pic-row { grid-template-columns: 4.5rem 1fr auto; }
  .kpi-value { font-size: 1.35rem; }
}

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body { background: #fff; font-size: 10pt; }
  .app-shell { display: block; }
  .sidebar, .no-print, .filter-bar, .print-button, .map-link, .button-link, .project-toolbar, details.as-table summary { display: none !important; }
  details.as-table:not([open]) { display: none; }
  .content { padding: 0; }
  .page-content { max-width: none; }
  .page-header h1 { margin-bottom: 4mm; }
  .info-grid { columns: 2; --gap: 4mm; }
  .info-chevron { display: none; }
  .kpi-strip { grid-template-columns: repeat(4, 1fr); gap: 3mm; }
  .info-panel, .kpi-tile, .profile-card, .info-hero { break-inside: avoid; box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.org-summary { margin-bottom: 1rem; }
.org-summary > .muted { margin: .4rem .2rem 0; }
.project-roi-info { margin: 1rem 0; }
.org-type { margin: .1rem 0 0; font-size: .82rem; font-weight: 700; }
.pic-col { min-width: 12rem; }
.pic-col .mi { font-size: .85rem; }
@media (max-width: 760px) {
  .content, .page-content, .infographic { min-width: 0; max-width: 100%; }
  .info-panel { padding: .8rem; }
  .profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-matrix { font-size: .7rem; }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .content { overflow-x: hidden; }
}

/* ---- T11: dockable map HUD + slimmer top bar ---- */
.game-hud-top { top: .5rem; gap: .35rem; }
.game-scope { padding: .2rem .7rem; min-width: 7rem; border-radius: .8rem; }
.game-scope-kicker { font-size: .6rem; }
.game-scope strong { font-size: .92rem; }
.game-resources { padding: .15rem .3rem; border-radius: .8rem; }
.game-resource { padding: .05rem .45rem; gap: .3rem; }
.game-resource-icon img { width: 20px; height: 20px; }
.game-resource-label { font-size: .58rem; }
.game-resource strong { font-size: .86rem; }
.game-resource small { font-size: .56rem; }
.map3d-back { top: 3.9rem; min-height: 2rem; padding: .2rem .75rem; font-size: .82rem; }
.map3d-root:not(.has-selection) .game-legend { top: 3.9rem; }
.has-selection .game-legend { top: 6.5rem; }
.map3d-panel { top: 3.9rem; max-height: calc(100% - 9.5rem); }
.game-legend { bottom: 4.5rem; }
.game-legend:has(~ .game-minimap:not(.is-collapsed)) { bottom: 13.4rem; }

.dock-toggle { flex: none; }
.dock-corner { position: absolute; top: .45rem; right: .45rem; z-index: 1; }
.map3d-panel .map3d-panel-body { padding-right: 2.6rem; }
.game-legend.is-collapsed { width: auto; padding: .35rem .45rem .35rem .7rem; }
.game-legend.is-collapsed .game-tabs { display: none; }
.map3d-panel.is-collapsed { width: auto; max-height: none; padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; }
.map3d-panel.is-collapsed .map3d-panel-body { display: none; }
.map3d-panel.is-collapsed .dock-corner, .game-minimap.is-collapsed .dock-corner { position: static; box-shadow: var(--hud-shadow); }
.game-minimap .dock-corner { top: .3rem; right: .3rem; }
.game-minimap.is-collapsed { width: auto; height: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.game-minimap.is-collapsed canvas { display: none; }
.map3d-root:has(.game-minimap.is-collapsed) .map3d-controls { left: 7.5rem; }
.tour-help { width: 1.9rem; padding: 0; font-size: .9rem; border-radius: 50%; }
@media (max-width: 760px) {
  .map3d-back { top: 3.6rem; }
  .map3d-panel { top: auto; bottom: 7.4rem; max-height: 30%; }
  .map3d-panel.is-collapsed { left: auto; right: .5rem; }
}

/* ---------- Real map (แผนที่จริง / Leaflet) ---------- */
.geomap-intro { margin: 0 0 .75rem; color: var(--hud-muted, #6b5d4f); }
.geomap-note { font-size: .85em; }
.geomap-wrap { position: relative; }
.geomap { height: calc(100vh - 220px); min-height: 480px; border-radius: 1rem; border: 3px solid #e8d9b8; box-shadow: 0 4px 0 #d9c49a; overflow: hidden; }
.geomap-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-top: .6rem; font-size: .85rem; }
.geomap-legend .gm-ico { width: 1rem; height: 1rem; vertical-align: -3px; }
.gm-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid #5b4632; margin: 0 .15rem 0 .35rem; vertical-align: -1px; }
.gm-pin { background: none; border: 0; }
.gm-pin-body { display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); border: 2px solid #fff; box-shadow: 0 2px 4px rgb(0 0 0 / 35%); }
.gm-pin-body .gm-ico { transform: rotate(45deg); width: 58%; height: 58%; color: #fff; }
.gm-ico { width: 1.1rem; height: 1.1rem; flex: none; }
.gm-tambon-label { background: rgb(255 248 230 / 85%); border: 1.5px solid #8a6242; border-radius: .4rem; font-weight: 700; color: #4a3a2a; box-shadow: none; padding: 0 .35rem; }
.gm-tambon-label::before { display: none; }
.gm-pop { display: grid; gap: .2rem; font-family: "Noto Sans Thai", sans-serif; font-size: .85rem; }
.gm-pop-head { display: flex; gap: .35rem; align-items: center; font-size: .95rem; }
.gm-pop-type { font-weight: 700; }
.gm-pop-addr { color: #6b5d4f; font-size: .78rem; }
.gm-chips { display: flex; flex-wrap: wrap; gap: .2rem; }
.gm-chips span { background: #f1e6cf; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; }
.gm-link { font-weight: 700; }
.gm-approx { color: #9a8a76; }
.gm-error { padding: 1rem; }
.leaflet-control-layers-overlays label .gm-ico { width: .95rem; height: .95rem; vertical-align: -2px; }
@media (max-width: 700px) { .geomap { height: 70vh; } }