/* ==========================================================================
   CityMETER · Shopping Centers & Retail Venues — layout, panel, map chrome, charts, table.
   Tokens come from assets/theme.css (exact LDS 0.9.7 values). This file only
   composes them. Sections:
     1. Base and typography      5. Map chrome (toolbar, legend, labels, pins)
     2. Controls                 6. Charts tray and table
     3. Layout                   7. Responsive and motion
     4. Reading panel
   ========================================================================== */

/* 1. Base and typography ------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  --panel-width: min(max(300px, 28%), 440px);
  --bottom-panel-height: 52px;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px;
  --font-body: "Bai Jamjuree", "IBM Plex Sans Thai", sans-serif;
  --font-display: "Arvo", "IBM Plex Sans Thai Looped", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Sans Thai", monospace;
}
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--surface-canvas); color: var(--text-primary); font: 400 14px/1.55 var(--font-body); -webkit-text-size-adjust: 100%; }
h1, h2, h3, p, ul, ol, dl { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
h1 { font-size: 26px; line-height: 1.35; }
h2 { font-size: 20px; line-height: 1.4; }
h3 { font-size: 14px; line-height: 1.4; font-weight: 600; }
a { color: var(--text-primary); text-underline-offset: 3px; }
strong, b, th { font-weight: 600; }
.data-number { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: normal; }
.eyebrow { font-size: 12px; letter-spacing: .06em; font-weight: 600; color: var(--text-metadata); margin-bottom: 4px; }
.hint, .small { font-size: 12px; line-height: 1.55; color: var(--text-metadata); }
.subtle { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.muted { color: var(--text-metadata); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: -80px; left: 16px; z-index: 100; background: var(--surface-card); padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--interaction-focus-ring); outline-offset: 2px; }

/* 2. Controls ------------------------------------------------------------- */
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button { border: 1px solid var(--border-default); background: var(--surface-raised); border-radius: 999px; min-height: 44px; padding: 8px 16px; white-space: nowrap; }
button:hover, select:hover { background: var(--surface-alt); }
button:disabled { opacity: .4; cursor: default; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; }
.btn.primary { background: var(--text-primary); color: var(--surface-canvas); border-color: var(--text-primary); }
.btn.primary:hover { background: var(--text-secondary); border-color: var(--text-secondary); }
.btn.quiet { background: transparent; }
.btn.quiet:hover { background: var(--surface-alt); }
.link-button { display: inline; border: 0; background: none; padding: 0; min-height: 0; border-radius: 2px; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: normal; text-align: left; }
.link-button:hover { background: var(--surface-alt); }
input, select { min-height: 44px; width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-raised); padding: 8px 12px; }
input { min-width: 0; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 3. Layout --------------------------------------------------------------- */
.topbar { height: 48px; position: relative; z-index: 20; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--surface-card); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; min-height: 44px; }
.brand-divider { color: var(--text-muted); }
.product-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.text-link { font-size: 12px; }
.theme-control select { font-size: 12px; border: 0; background: transparent; min-height: 44px; width: 80px; padding: 8px 4px; }

.workspace { height: calc(100dvh - 48px); position: relative; }
.map-column { position: absolute; inset: 0 var(--panel-width) 0 0; min-width: 0; container: map-column / inline-size; }
.map-panel { position: absolute; inset: 0; background: var(--surface-alt); isolation: isolate; overflow: hidden; container-type: inline-size; }
#map { position: absolute; inset: 0; }
/* .map-panel: the vendor stylesheet (loaded later by js/vendors.js) sets bottom: 0, which hid the credit behind the bar. */
.map-panel .maplibregl-ctrl-bottom-right, .map-panel .maplibregl-ctrl-bottom-left { bottom: var(--bottom-panel-height); }
/* Map credit (owner 2026-11-07 14:02: “โดน ป้าย ที่มาข้อมูล บังมากเกินไป แย่มาก ตัดออกให้หมด เอาไปซ่อนไว้ที่อื่น ให้เห็นแผนที่ใหญ่ๆ”):
   nothing on the map. MapLibre's control keeps collecting the credits but is not drawn; the short credit is one quiet line
   at the foot of the bottom bar, under the map (#map-credit, section 6), and the live list is in the help dialog
   (#map-credits; js/map-credits.js). */
.map-panel .maplibregl-ctrl.maplibregl-ctrl-attrib { display: none !important; }

/* 4. Reading panel -------------------------------------------------------- */
.panel { position: absolute; right: 0; top: 0; bottom: 0; width: var(--panel-width); background: var(--surface-card); border-left: 1px solid var(--border-default); overflow: auto; scrollbar-width: thin; z-index: 10; overscroll-behavior: contain; }
.panel-top { position: sticky; top: 0; z-index: 2; background: var(--surface-card); padding: 12px 16px 10px; border-bottom: 1px solid var(--border-hairline); }
.dataset-heading .intro { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
/* Top row: back (detail views) · breadcrumb · close (phones). Detail views put their own heading
   first, so the dataset title (kept for screen readers), search and filters step aside. */
.panel-nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.panel-nav .crumbs-nav { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.panel-nav .back { flex: 0 0 auto; min-height: 34px; padding: 4px 12px 4px 8px; font-size: 12px; }
.panel-nav .back[hidden] { display: none; }
.panel-nav + .dataset-heading { margin-top: 8px; }
.panel.is-detail .panel-top { padding-top: 8px; padding-bottom: 8px; }
.panel.is-detail .dataset-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.panel.is-detail .filters, .panel.is-detail #filter-chips { display: none; }

/* Breadcrumb — ประเทศไทย › จังหวัด › ย่าน › สถานที่ (province codes and venue ids as in CityMETER production) */
.crumbs-nav { margin-bottom: 8px; min-height: 28px; }
.crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 12px; line-height: 1.4; color: var(--text-metadata); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "›"; padding: 0 6px; color: var(--text-muted); }
.crumb { border: 0; background: none; padding: 4px 2px; min-height: 28px; border-radius: 4px; font: inherit; font-weight: 600; color: var(--text-secondary); white-space: normal; text-align: left; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-default); }
.crumb:hover { background: var(--surface-alt); }
.crumb.is-current { text-decoration: none; color: var(--text-primary); font-weight: 600; }
.crumb-more { text-decoration: none; letter-spacing: 1px; padding: 4px 6px; }
.crumbs .crumb-ellipsis { display: none; }
.crumbs.is-expanded .crumb-ellipsis { display: none; }
.filters { margin-top: 12px; display: grid; gap: 8px; }
.search-field input { padding-left: 14px; }
.filter-details summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.filter-details summary::-webkit-details-marker { display: none; }
.filter-details summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-left: 2px; }
.filter-details[open] summary::before { transform: rotate(45deg); }
.filter-count:not(:empty) { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--state-info-surface); color: var(--state-info-content); font-weight: 600; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 6px; }
.filter-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 0; }
.filter-grid select { font-size: 13px; padding: 8px 10px; min-height: 40px; }
.filter-grid label.filter-wide { grid-column: 1 / -1; }
.filter-actions { display: flex; justify-content: flex-end; padding-top: 8px; }
.filter-actions .btn { min-height: 36px; font-size: 12px; }
.filter-chips { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 12px; font-size: 12px; background: var(--surface-alt); border-color: var(--border-hairline); }
.filter-chip i { font-style: normal; font-size: 14px; line-height: 1; }
.filter-chip.clear-all { background: transparent; }

.panel-view { padding: 16px; display: grid; gap: 20px; align-content: start; }
.panel-view:focus { outline: none; }

/* Aha */
.aha { padding: 18px 18px 16px; background: var(--surface-alt); border-radius: var(--radius-md); }
.aha h2 { display: grid; gap: 2px; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.aha-number { font-size: 44px; line-height: 1.05; font-family: var(--font-mono); font-weight: 400; }
.aha-headline { font-size: 17px; }
.aha-copy { margin-top: 10px; font-size: 13px; line-height: 1.65; color: var(--text-secondary); }
.aha-copy strong { color: var(--text-primary); }
/* D33 rail line: the focus districts' share within 500 m of a station against the rest of the province. */
.aha-rail { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-hairline); font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.aha-rail strong { color: var(--text-primary); }
.aha-secondary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-hairline); font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.aha-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.aha-actions .btn { flex: 1 1 auto; white-space: normal; }
.aha.is-focused { background: var(--state-info-surface); }
.aha.is-focused .eyebrow { color: var(--state-info-content); }
.aha-map-cue { margin-top: 10px; }
.metrics-note { margin-top: -8px; }

/* Metrics */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; padding: 14px 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.metrics strong { display: block; font-size: 24px; line-height: 1.2; font-weight: 400; }
.metrics span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.metrics.compact { grid-template-columns: repeat(4, 1fr); gap: 8px 6px; padding: 12px 0; margin-top: 12px; }
.metrics.compact strong { font-size: 20px; }
.metrics.compact span { font-size: 11px; }
/* Metric tiles carry the legend symbols so the label can stay one word (pin = สาขา, blue block = สถานที่, outline = ย่าน, ring = แบรนด์). */
/* Pictograms — Material Symbols Rounded subset (FILL 0 / wght 300 / GRAD 0 / opsz 24), Apache-2.0.
   Test exception to the LDS nav-7 rule approved by the owner 2026-10-22; nav-7 bytes unchanged.
   The glyph is decorative (aria-hidden); the text label carries the meaning. Hidden until the font loads. */
/* pictogram-glyphs:start (scripts/build-pictogram-font.py) */
@font-face {
  font-family: "LDS Material Symbols Rounded Pictogram";
  src: url("assets/icons/material-pictogram-300.woff2?v=b37834408479") format("woff2");
  font-style: normal; font-weight: 300; font-display: block;
  unicode-range: U+EAD5, U+EA12, U+E54C, U+E55B, U+E7F1, U+F09A, U+EA49, U+E72C, U+E80B, U+EFC9, U+EA3B, U+E8FD, U+E88E, U+E26B, U+F20C, U+E9E6, U+E7EE, U+F101, U+EF7A, U+E429, U+E5C4, U+E5CF, U+E5CE, U+F0D4, U+EFD6, U+EBCC, U+F1DB, U+E55C, U+E614, U+EA40, U+F0C5, U+F238, U+F08F, U+E90F, U+E53B, U+E5CB, U+E5CC, U+E40A, U+EACD, U+E913, U+E570, U+E65F, U+E56E;
}
.pic-brand::before { content: "\EAD5"; }
.pic-store::before { content: "\EA12"; }
.pic-venue::before { content: "\E54C"; }
.pic-area::before { content: "\E55B"; }
.pic-province::before { content: "\E7F1"; }
.pic-exclusive::before { content: "\F09A"; }
.pic-gla::before { content: "\EA49"; }
.pic-segment::before { content: "\E72C"; }
.pic-country::before { content: "\E80B"; }
.pic-view3d::before { content: "\EFC9"; }
.pic-architect::before { content: "\EA3B"; }
.pic-help::before { content: "\E8FD"; }
.pic-info::before { content: "\E88E"; }
.pic-chart::before { content: "\E26B"; }
.pic-rank::before { content: "\F20C"; }
.pic-mix::before { content: "\E9E6"; }
.pic-operator::before { content: "\E7EE"; }
.pic-table::before { content: "\F101"; }
.pic-search::before { content: "\EF7A"; }
.pic-filter::before { content: "\E429"; }
.pic-back::before { content: "\E5C4"; }
.pic-expand::before { content: "\E5CF"; }
.pic-collapse::before { content: "\E5CE"; }
.pic-contact::before { content: "\F0D4"; }
.pic-hours::before { content: "\EFD6"; }
.pic-opened::before { content: "\EBCC"; }
.pic-address::before { content: "\F1DB"; }
.pic-coordinate::before { content: "\E55C"; }
.pic-checked::before { content: "\E614"; }
.pic-building::before { content: "\EA40"; }
.pic-evidence::before { content: "\F0C5"; }
.pic-upcoming::before { content: "\F238"; }
.pic-closed::before { content: "\F08F"; }
.pic-idea::before { content: "\E90F"; }
.pic-layers::before { content: "\E53B"; }
.pic-prev::before { content: "\E5CB"; }
.pic-next::before { content: "\E5CC"; }
.pic-palette::before { content: "\E40A"; }
.pic-route::before { content: "\EACD"; }
.pic-touch::before { content: "\E913"; }
.pic-train::before { content: "\E570"; }
.pic-ai::before { content: "\E65F"; }
.pic-maps::before { content: "\F1DB"; }
.pic-streetview::before { content: "\E56E"; }
/* pictogram-glyphs:end */
.pictogram { display: inline-block; width: 20px; height: 20px; font: 300 20px/1 "LDS Material Symbols Rounded Pictogram"; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; letter-spacing: normal; text-transform: none; font-synthesis: none; vertical-align: -4px; visibility: hidden; color: var(--text-secondary); }
.pictograms-ready .pictogram { visibility: visible; }
.pictograms-unavailable .pictogram { display: none; }
.pic-plain { display: none; }
/* Pictogram colour follows the mark it stands for: store = pin, venue = host building, exclusive = series 7. */
.pic-store { color: var(--series-1-fill); }
.pic-venue { color: var(--map-active-layer); }
.pic-exclusive { color: var(--series-7-fill); }
.pic-area, .pic-province { color: var(--scale-count-4); }
.section-heading h3 .pictogram { width: 18px; height: 18px; font-size: 18px; margin-right: 6px; vertical-align: -3px; }
.metric { position: relative; padding-left: 26px; }
.metric-symbol { position: absolute; left: 0; top: 4px; }
.metrics.compact .metric-symbol { top: 2px; }
.metric-plain { padding-left: 0; }
/* Province drill-down list (country level) */
.province-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.province-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.province-row:hover { background: var(--surface-alt); border-color: var(--border-default); }
.province-row:focus-visible { outline: 2px solid var(--interaction-focus-ring); outline-offset: 1px; }
.province-swatch { display: block; width: 12px; height: 12px; border: 1px solid var(--border-default); border-radius: 2px; }
.province-name { font-weight: 600; }
.province-count { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; line-height: 1.1; }
.province-count small { font: 400 11px/1.2 var(--font-body); color: var(--text-secondary); }

/* Sections */
.panel-section { display: grid; gap: 10px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.section-heading .hint { white-space: nowrap; }
.panel-foot { padding-top: 6px; border-top: 1px solid var(--border-hairline); }

/* Ranking list (panel) */
.rank-list { list-style: none; padding: 0; display: grid; gap: 4px; }
.rank-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 72px 36px; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; text-align: left; white-space: normal; }
.rank-row:hover { background: var(--surface-alt); }
.rank-row[aria-pressed="true"], .rank-row.is-selected { background: var(--surface-alt); border-color: var(--border-default); }
.rank-index { font-size: 12px; color: var(--text-metadata); }
.rank-name { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.rank-name small { display: block; font-size: 11px; font-weight: 400; color: var(--text-metadata); }
.rank-track { height: 10px; background: var(--surface-soft); border-radius: 3px; overflow: hidden; border: 1px solid var(--border-hairline); }
.rank-fill { display: block; height: 100%; }
.rank-value { font-size: 15px; text-align: right; }

/* Detail head (neighborhood / venue / store) */
.detail-head { display: grid; gap: 6px; }
.detail-head .back { justify-self: start; min-height: 36px; padding: 4px 12px 4px 10px; font-size: 12px; margin-bottom: 4px; }
.detail-head h2 { font-size: 22px; overflow-wrap: anywhere; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.detail-actions .btn { min-height: 40px; font-size: 12px; }
.detail-logo { width: 140px; height: auto; max-height: 70px; margin: 4px 0 10px; aspect-ratio: var(--logo-ratio); }
.store-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.facts { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 10px; font-size: 13px; margin-top: 10px; }
.facts dt { color: var(--text-metadata); font-size: 12px; padding-top: 1px; }
.facts dd { margin: 0; overflow-wrap: anywhere; line-height: 1.5; }
.links { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; margin-top: 4px; }
.source-link { font-size: 12px; }

.status-pill { display: inline-flex; align-items: center; white-space: nowrap; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border-hairline); background: var(--surface-alt); }
.status-pill.tone-closed { background: var(--state-danger-surface); color: var(--state-danger-content); border-style: dashed; border-color: currentColor; }
.status-pill.tone-pending { background: var(--state-pending-surface); color: var(--state-pending-content); }
.status-pill.tone-listed { background: var(--state-success-surface); color: var(--state-success-content); }
.status-pill.tone-neutral { background: var(--state-neutral-surface); color: var(--state-neutral-content); }

/* Mix bars */
.mix-list { list-style: none; padding: 0; display: grid; gap: 2px; }
.mix-row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 70px; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 3px 6px; font-size: 12px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; text-align: left; white-space: normal; }
.mix-row:hover { background: var(--surface-alt); }
.mix-label { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.mix-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-track { height: 10px; background: var(--surface-soft); border-radius: 3px; overflow: hidden; border: 1px solid var(--border-hairline); }
.mix-fill { display: block; height: 100%; background: var(--pin-fill, var(--series-9-fill)); }
.mix-value { text-align: right; font-size: 13px; }
.mix-value small { color: var(--text-metadata); font-size: 11px; }

/* Venue list */
.venue-list, .outlet-list { list-style: none; padding: 0; display: grid; }
/* Venue (host) logos — identity support next to the venue name; the backplate colour comes from the registry
   (stone for transparent marks, dark for light marks, white for opaque files); artwork bytes are unchanged. */
.venue-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; padding: 3px 6px; background: var(--venue-logo-bg, #E5E9E6); border: 1px solid var(--border-hairline); border-radius: 4px; overflow: hidden; }
.venue-logo img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.venue-logo-sm { width: 56px; height: 28px; }
.venue-logo-md { width: 64px; height: 36px; vertical-align: middle; margin-right: 8px; }
.venue-logo-lg { width: auto; max-width: 180px; height: 56px; padding: 6px 10px; margin: 4px 0 10px; }
.venue-row.has-logo { grid-template-columns: auto minmax(0, 1fr) auto; }
.venue-row .cue-swatch, .venue-row .pending-swatch { margin: 0 4px; }
.venue-row em { font-style: normal; color: var(--state-warning-content); }
.fact-venue { display: flex; align-items: center; gap: 2px; }
.venue-logo-role { color: var(--text-metadata); }
.detail-head.venue .detail-venue-logo { display: inline-flex; justify-self: start; }
/* Venue: logo and name first, then status, key figures, contact chips and a short fact list. */
.venue-hero { display: flex; align-items: center; gap: 12px; min-width: 0; }
.venue-hero .detail-venue-logo { margin: 0; max-width: 132px; height: 52px; flex: 0 0 auto; }
.venue-hero-mark { display: inline-flex; flex: 0 0 auto; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-alt); }
.venue-hero-mark .cue-swatch { width: 24px; height: 24px; flex-basis: 24px; }
.venue-title { display: grid; gap: 2px; min-width: 0; }
.venue-title .eyebrow { margin: 0; }
.venue-title h2 { font-size: 22px; line-height: 1.25; }
.venue-title .subtle { font-size: 13px; line-height: 1.4; }
.detail-head.venue .store-status { margin-top: 6px; }
.detail-head.venue .venue-logo-role { font-size: 12px; }
.metrics.compact.venue-metrics { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); margin-top: 6px; }
.venue-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* LDS CTRL-01: every direct control at least 44 × 44 css px (0.1.25; the chips were 36 px). */
.chip-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 13px; line-height: 1.3; text-decoration: none; color: var(--text-primary); background: var(--surface-card); }
.chip-link:hover { background: var(--surface-alt); }
.chip-link:focus-visible { outline: 3px solid var(--interaction-focus-ring); outline-offset: 2px; }
.chip-link.is-text { cursor: default; }
.chip-link.is-text:hover { background: var(--surface-card); }
.chip-link .pictogram { width: 16px; height: 16px; font-size: 16px; flex: 0 0 16px; }
/* D37: next steps in Google (AI Mode, Google Maps, Street View facing the building) under the venue's own links. */
.look-links { margin-top: 6px; }
.venue-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 8px; border: 0; border-bottom: 1px solid var(--border-hairline); border-radius: 0; background: transparent; text-align: left; white-space: normal; }
.venue-row:hover { background: var(--surface-alt); }
.venue-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.venue-name small { display: block; font-size: 11px; font-weight: 400; color: var(--text-metadata); }
.venue-count { font-size: 15px; text-align: right; }
.venue-count small { display: block; font-size: 10px; color: var(--text-metadata); font-family: var(--font-body); }
.outlet-list li { border-bottom: 1px solid var(--border-hairline); }
.outlet-list .brand-row { width: 100%; border: 0; background: none; padding: 8px 4px; white-space: normal; text-align: left; min-height: 48px; border-radius: 0; }
.outlet-list .brand-row:hover { background: var(--surface-alt); }

/* Venue tenant roster only: incremental rows, neutral backing for unchanged brand artwork. */
.tenant-list { list-style: none; padding: 0; margin: 8px 0; display: grid; }
.tenant-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 10px 0; border-bottom: 1px solid var(--border-hairline); }
.tenant-row:focus { outline: 2px solid var(--interaction-focus-ring); outline-offset: 2px; }
.tenant-logo { display: flex; align-items: center; justify-content: center; position: relative; width: 56px; height: 36px; border: 1px solid var(--border-hairline); border-radius: 4px; background: var(--surface-soft); color: var(--text-metadata); overflow: hidden; }
.tenant-logo .pictogram { font-size: 20px; }
.tenant-logo img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 4px; object-fit: contain; background: var(--tenant-logo-bg, var(--surface-soft)); }
.tenant-logo img[hidden] { display: none; }
.tenant-name { min-width: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.tenant-name strong { font-weight: 600; }
.tenant-name small { display: block; color: var(--text-metadata); font-size: 11px; line-height: 1.5; }
.tenant-source { font-size: 11px; padding: 8px 0 8px 4px; }
.tenant-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.tenant-pagination .btn { min-height: 40px; }
.tenant-datasets { margin-top: 12px; font-size: 11px; }
/* D39: the first view's line about the other types; its button keeps a touch-sized hit area inside the sentence. */
.other-types .link-button { padding: 4px 0; }
/* D41: which sub-areas' shops the list holds (each shop row also names its sub-area). */
.tenant-subareas { margin: 6px 0 2px; font-size: 13px; overflow-wrap: anywhere; }
/* D40: brands with a counter inside the centre's department stores — folded under the shops, never a shop row. */
.counter-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.counter-store-name { margin: 8px 0 4px; font-size: 13px; font-weight: 600; }
.counter-floor { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
.counter-floor strong { color: var(--text-primary); font-weight: 600; }
/* Shop mix chips (one role of the list), nearby centres and brand lists: neutral tokens only, no data colour. */
.tenant-mix { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.mix-chip { color: var(--text-primary); }
.mix-chip .data-number { color: var(--text-metadata); font-size: 11px; }
.mix-chip[aria-pressed="true"] .data-number { color: var(--text-primary); }
.mix-chip:focus-visible, .brand-pill:focus-visible, .brand-row:focus-visible { outline: 3px solid var(--interaction-focus-ring); outline-offset: 2px; }
.peer-list { margin-top: 6px; }
.peer-label { margin: 14px 0 6px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--text-secondary); }
.peer-label .hint { font-weight: 400; }
.peer-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.peer-role { display: inline-flex; align-items: baseline; gap: 4px; min-height: 30px; padding: 4px 10px; font-size: 12px; border: 1px solid var(--border-hairline); border-radius: 999px; background: var(--surface-soft); }
.peer-role small { color: var(--text-metadata); font-size: 10px; }
.brand-list { list-style: none; padding: 0; display: grid; }
.brand-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--border-hairline); border-radius: 0; background: transparent; text-align: left; white-space: normal; }
.brand-row:hover { background: var(--surface-alt); }
.brand-row .pictogram { width: 18px; height: 18px; font-size: 18px; color: var(--text-metadata); }
.brand-name { font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.brand-name small { display: block; font-size: 11px; font-weight: 400; color: var(--text-metadata); }
.brand-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.brand-pill { min-height: 32px; padding: 3px 10px; font-size: 12px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); color: var(--text-primary); white-space: normal; text-align: left; }
.brand-pill:hover { background: var(--surface-alt); }
.brand-head .metrics.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 280px; }
.brand-groups { margin-top: 4px; }
.map-card-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-soft); }
.map-card-mark .pictogram { width: 22px; height: 22px; font-size: 22px; }

/* Brand chips */
.chip-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.brand-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 10px 3px 6px; font-size: 12px; border-radius: 999px; background: var(--surface-raised); white-space: normal; text-align: left; }
.brand-chip .chip-logo { width: 34px; height: 17px; border-radius: 2px; }
.brand-chip.chip-exclusive { border-color: var(--border-emphasis); }
.brand-chip:hover { background: var(--surface-alt); }


/* Lists, facts and evidence (shopping centers) */
.plain-list { list-style: none; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.plain-list li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 2px; border-bottom: 1px solid var(--border-hairline); }
.size-line { display: block; }
.size-line + .size-line { margin-top: 4px; }
.size-line .hint { display: block; }
.estimate { color: var(--text-secondary); }
code { font-family: var(--font-mono); font-size: 11px; padding: 0 3px; border-radius: 3px; background: var(--surface-alt); overflow-wrap: anywhere; }
.evidence details summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.evidence-list { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 6px; }
.evidence-list li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border-hairline); }
.ev-label { color: var(--text-metadata); }
.ev-text { color: var(--text-secondary); overflow-wrap: anywhere; }
.ev-links { display: inline-flex; gap: 6px; }
.ids { margin-top: 8px; overflow-wrap: anywhere; }
.strong-link { font-weight: 600; }
.detail-head .eyebrow .cue-swatch { margin-right: 2px; }
.detail-head.pending .eyebrow { display: flex; align-items: center; gap: 6px; }
.bar-row.operator { grid-template-columns: minmax(110px, 220px) minmax(0, 1fr) 76px; }
.bar-row.operator:disabled { opacity: 1; cursor: default; }
.bar-row.operator:disabled:hover { background: transparent; }
.bar-row.is-quiet .bar-label { color: var(--text-metadata); font-weight: 400; }
.operator-fill { background: var(--series-9-fill); }

/* 5. Map chrome ----------------------------------------------------------- */
.map-toolbar { position: absolute; left: 8px; top: 8px; right: 52px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; z-index: 5; }
.map-toolbar button { pointer-events: auto; font-size: 13px; padding: 7px 13px; min-height: 40px; background: color-mix(in srgb, var(--surface-card) 92%, transparent); }
.map-toolbar button[aria-pressed="false"] { color: var(--text-metadata); text-decoration: line-through; text-decoration-color: var(--text-muted); }
.map-toolbar button#toggle-3d { font-family: var(--font-mono); font-weight: 400; letter-spacing: .02em; }
.map-toolbar button#toggle-eye[aria-pressed="false"] { text-decoration: none; }
.map-toolbar button#toggle-eye[aria-pressed="true"] { border-color: var(--map-selected-stroke); color: var(--text-primary); }
.map-toolbar button:disabled { opacity: .5; }
#mobile-panel { display: none; }

.map-legend { position: absolute; left: 8px; bottom: calc(var(--bottom-panel-height) + 8px); z-index: 4; display: grid; gap: 8px; max-width: min(380px, calc(100% - 24px)); padding: 10px 12px; background: color-mix(in srgb, var(--surface-card) 94%, transparent); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; pointer-events: none; }
.map-legend > * { pointer-events: auto; }
.legend-block { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.legend-title { font-weight: 600; margin-right: 2px; }
.legend-steps { display: flex; align-items: flex-start; gap: 10px; }
.legend-step { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; line-height: 1.2; min-width: 34px; color: var(--text-metadata); }
.legend-step i { display: block; width: 100%; height: 10px; border: 1px solid var(--border-default); }
.legend-step .legend-zero { background: var(--scale-count-1); box-shadow: inset 0 0 0 2px var(--data-zero-outline); }
.legend-ramp { position: relative; display: inline-flex; flex-direction: column; width: 204px; max-width: 100%; padding-bottom: 15px; }
.ramp-bar { display: flex; height: 12px; border: 1px solid var(--border-default); }
.ramp-bar i { flex: 1 1 0; min-width: 0; }
.ramp-ticks { position: absolute; left: 1px; right: 1px; top: 14px; height: 15px; }
.ramp-tick { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; line-height: 1.2; color: var(--text-metadata); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ramp-tick::before { content: ''; position: absolute; left: 50%; top: -4px; width: 1px; height: 4px; background: var(--border-emphasis); }
.ramp-tick.is-start { transform: translateX(-2px); }
.ramp-tick.is-start::before { left: 2px; }
.ramp-tick.is-end { transform: translateX(calc(-100% + 2px)); }
.ramp-tick.is-end::before { left: auto; right: 2px; }
.ramp-zero i { height: 12px; }
.matrix-cell .on-plate { background: var(--surface-card); color: var(--text-primary); padding: 0 4px; border-radius: 3px; }
.chart-legend .legend-ramp { margin-top: 2px; }
.legend-marks span { display: inline-flex; align-items: center; gap: 6px; }
.legend-pin { width: 10px; height: 10px; border-radius: 50%; background: var(--series-1-fill); border: 1px solid var(--map-marker-stroke); box-shadow: 0 0 0 1.5px var(--map-marker-halo); }
.legend-pending, .pending-swatch { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--border-default); box-shadow: 0 0 0 .8px var(--text-disabled); }
.legend-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 8px; font-size: 12px; border-radius: 999px; background: transparent; }
.legend-toggle[aria-pressed="false"] { color: var(--text-metadata); text-decoration: line-through; text-decoration-color: var(--text-muted); }
.legend-toggle[aria-pressed="false"] .legend-pending { opacity: .35; }
.pending-marker { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--map-selected-stroke); box-shadow: 0 0 0 2px var(--map-marker-halo); background: transparent; pointer-events: none; }
/* Shape + colour swatch used in legends, lists, charts and tables. */
.cue-swatch { display: inline-flex; width: 12px; height: 12px; flex: 0 0 12px; vertical-align: -1px; }
.cue-swatch svg { width: 100%; height: 100%; fill: var(--pin-fill); stroke: var(--map-marker-stroke); stroke-width: .9; stroke-linejoin: round; }
.legend-building { width: 12px; height: 12px; background: var(--map-active-layer); border: 1px solid var(--map-selected-stroke); transform: skewY(-12deg); }
/* Rail stations of CityMETER · Transit (context marks in foundation colours, as CityMETER · Hotel). */
.legend-station { box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-card); border: 1.6px solid var(--text-secondary); }
.map-panel.is-province-zoom .legend-station-item { display: none; }
.legend-massing { width: 12px; height: 12px; border: 1px solid var(--border-default); transform: skewY(-12deg); border-radius: 2px; }
.legend-massing.is-focus { background: var(--basemap-massing-focus); }
.legend-massing.is-quiet { background: var(--basemap-massing-quiet); }
.legend-massing-item { gap: 5px; }
/* Terrain mode key: a hillshade swatch in the basemap's foundation tones (never a data colour). */
.legend-terrain-item { gap: 5px; }
.legend-terrain { width: 14px; height: 12px; border: 1px solid var(--border-default); border-radius: 2px; background: linear-gradient(135deg, var(--basemap-halo) 0 30%, var(--basemap-label-quiet) 65%, var(--basemap-label) 100%); }
.map-panel:not(.is-3d) .legend-terrain-item { display: none; }
.map-panel:not(.is-3d) .legend-massing-item.is-quiet-item { display: none; }
#category-key summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; display: inline-flex; align-items: center; }
#category-key > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding-top: 8px; }
#category-key > div span { min-width: 0; }
#category-key span { display: inline-flex; align-items: center; gap: 6px; }
.category-swatch { display: inline-block; width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid var(--map-marker-stroke); border-radius: 50%; background: var(--pin-fill, var(--text-muted)); }
/* The pin and logo counter is a diagnostic, not a reading: kept in the page (data-* for checks), never drawn over the map
   (owner 2026-11-07 14:02, “ให้เห็นแผนที่ใหญ่ๆ”). */
.map-status { display: none; }
.map-failure { position: absolute; inset: 25%; z-index: 8; padding: 20px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); display: grid; gap: 12px; align-content: center; justify-items: center; text-align: center; }

/* Compact Aha on the map (mobile only; see responsive section) */
.map-aha { display: none; }
/* The phone dock (card + legend in one box) adds no box on wider screens. */
.map-dock { display: contents; }

/* Neighborhood labels */
.area-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.neighborhood-label, .district-label, .province-label { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 0; padding: 4px 5px 4px 10px; font: 700 12px/1.3 var(--font-display); letter-spacing: 0; color: var(--area-label-ink); background: var(--area-label-bg); border: 1px solid var(--area-label-border); border-radius: 6px; max-width: 200px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.neighborhood-label::before, .district-label::before, .province-label::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border: 1.5px solid var(--area-label-ink); border-radius: 2px; opacity: .85; }
.neighborhood-label .label-name, .district-label .label-name, .province-label .label-name { overflow: hidden; text-overflow: ellipsis; }
.neighborhood-label .label-count, .district-label .label-count, .province-label .label-count { font: 400 11px/1.3 var(--font-mono); min-width: 22px; padding: 1px 6px; border-radius: 4px; background: var(--area-label-ink); color: var(--area-label-bg); text-align: center; }
.neighborhood-label.is-zero .label-count, .district-label.is-zero .label-count, .province-label.is-zero .label-count { background: transparent; color: var(--area-label-ink); border: 1.5px solid var(--data-zero-outline); }
.neighborhood-label:hover, .district-label:hover, .province-label:hover { border-color: var(--map-hover-stroke); }
.neighborhood-label.is-selected, .district-label.is-selected, .province-label.is-selected { border: 2px solid var(--map-selected-stroke); }
.neighborhood-label:focus-visible, .district-label:focus-visible, .province-label:focus-visible { outline: 2px solid var(--interaction-focus-ring); outline-offset: 2px; }
.neighborhood-label.is-quiet, .district-label.is-quiet, .province-label.is-quiet { font-weight: 600; font-size: 11px; opacity: .72; box-shadow: none; }
.neighborhood-label.is-quiet::before, .district-label.is-quiet::before, .province-label.is-quiet::before { opacity: .6; }
.province-label::before { border-radius: 50%; }
.province-label { padding-left: 9px; }
.pictograms-ready .province-label::before { content: "\E7F1"; width: 14px; height: 14px; flex-basis: 14px; border: 0; border-radius: 0; font: 300 14px/1 "LDS Material Symbols Rounded Pictogram"; opacity: 1; }
.neighborhood-label.is-quiet .label-count, .district-label.is-quiet .label-count, .province-label.is-quiet .label-count { background: transparent; color: var(--area-label-ink); border: 1px solid var(--area-label-ink); opacity: .8; }

/* Pins */
.store-pin-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.pin-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.pin-leaders line { stroke: var(--text-primary); stroke-opacity: .8; stroke-width: 1; }
.pin-leaders circle { fill: var(--surface-card); stroke: var(--text-primary); stroke-width: 1.5; }
.store-pin { position: absolute; transform: translate(-50%, -50%); width: var(--pin-size, 10px); height: var(--pin-size, 10px); min-height: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; pointer-events: auto; line-height: 0; --pin-fill: var(--text-muted); }
.pin-dot { display: block; width: 100%; height: 100%; }
/* Venue pins: group colour AND group shape (LDS series cue), a thin marker stroke and a halo. */
.pin-shape { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--pin-fill); stroke: var(--map-marker-stroke); stroke-width: .9; stroke-linejoin: round; filter: drop-shadow(0 0 1.1px var(--map-marker-halo)) drop-shadow(0 0 .6px var(--map-marker-halo)); }
.venue-pin.is-planned .pin-shape { fill: var(--surface-card); stroke: var(--text-primary); stroke-dasharray: 1.6 1.2; stroke-width: 1.3; }
.venue-pin.is-closed .pin-shape { fill: var(--surface-card); stroke: var(--text-secondary); stroke-width: 1.3; }
.store-pin.is-selected, .store-pin:hover, .store-pin:focus-visible { z-index: 5; outline: 2px solid var(--interaction-focus-ring); outline-offset: 3px; }
.store-pin-overlay.is-overview .pin-shape { stroke-width: .6; }
.pin-brand-label { display: block; position: absolute; transform: translate(-50%, -50%); border-radius: 3px; background: var(--map-marker-halo); box-shadow: 0 0 0 1px var(--border-hairline); overflow: hidden; pointer-events: auto; }
.pin-brand-label .venue-logo { width: 100%; height: 100%; border: 0; border-radius: 3px; padding: 2px 4px; }
.store-pin.is-selected .pin-brand-label, .store-pin:hover .pin-brand-label { box-shadow: 0 0 0 2px var(--interaction-focus-ring); }

/* Popup (scoped above lazy vendor CSS) */
.maplibregl-popup { z-index: 7; }
.map-panel .maplibregl-popup-content { background: var(--surface-card); color: var(--text-primary); font: 400 14px/1.6 var(--font-body); padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: none; }
.map-panel .maplibregl-popup-content h3 { color: var(--text-primary); font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.45; margin-right: 28px; }
.map-panel .maplibregl-popup-content p { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.map-panel .maplibregl-popup-content .popup-logo { width: 104px; height: auto; max-height: 52px; margin: 0 28px 10px 0; aspect-ratio: var(--logo-ratio); }
.map-panel .maplibregl-popup-content .maplibregl-popup-close-button { color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 999px; font: 400 20px/1 var(--font-body); top: 7px; right: 7px; width: 32px; height: 32px; min-height: 32px; padding: 0; }
.map-panel .maplibregl-popup-content .maplibregl-popup-close-button:hover { background: var(--surface-alt); }
.map-panel .maplibregl-popup-anchor-top .maplibregl-popup-tip, .map-panel .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .map-panel .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface-card); }
.map-panel .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .map-panel .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .map-panel .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface-card); }
.map-panel .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface-card); }
.map-panel .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface-card); }

/* 6. Charts tray and table ----------------------------------------------- */
.insights { position: absolute; left: 0; right: 0; bottom: 0; height: 360px; max-height: 58%; background: var(--surface-card); border-top: 1px solid var(--border-default); padding: 0 14px 6px; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head" "content" "credit"; }
.insights.is-collapsed { height: auto; }
.insight-heading { grid-area: head; }
#insight-content { grid-area: content; }
/* The map credit: running text with inline links (LDS CTRL-01 inline-link branch), caption size, metadata colour, no box;
   under the bar's heading, or beside it where the map column is wide (container query on .map-column). */
.map-credit { grid-area: credit; margin: -4px 0 0; font-size: 12px; line-height: 16px; color: var(--text-metadata); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-credit a { color: var(--text-secondary); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
.map-credit a:hover { color: var(--text-primary); }
@container map-column (min-width: 900px) {
  .insights { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head credit" "content content"; }
  .insights.is-collapsed { padding-bottom: 0; }
  .map-credit { align-self: center; margin: 0 0 0 16px; }
}
.insight-heading { display: flex; align-items: center; gap: 12px; min-height: 51px; flex-shrink: 0; }
.insight-heading h2 { font-size: 15px; white-space: nowrap; }
.insight-heading .hint { margin-right: auto; }
.insight-heading button { font-size: 12px; min-height: 36px; padding: 5px 12px; }
#insight-content { min-height: 0; display: flex; flex: 1; flex-direction: column; gap: 6px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; flex-shrink: 0; }
.tabs button { min-height: 36px; padding: 5px 12px; border-color: transparent; background: transparent; font-size: 13px; }
.tabs button[aria-selected="true"] { background: var(--surface-alt); font-weight: 600; border-color: var(--border-default); }
.chart { flex: 1; min-height: 90px; overflow: auto; padding-right: 4px; }
.chart-caption { font-size: 12px; color: var(--text-metadata); margin-bottom: 8px; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--text-metadata); margin-top: 8px; }
.chart-legend .legend-step { flex-direction: row; gap: 5px; min-width: 0; }
.chart-legend .legend-step i { width: 14px; height: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cue { display: inline-flex; width: 14px; height: 14px; border-radius: 3px; align-items: center; justify-content: center; border: 1px solid var(--border-default); }
.cue svg { width: 10px; height: 10px; fill: var(--chart-on-fill); }
.chart-bars { list-style: none; padding: 0; display: grid; gap: 2px; }
.bar-row { display: grid; grid-template-columns: 20px minmax(90px, 150px) minmax(0, 1fr) 92px; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; text-align: left; white-space: normal; }
.bar-row.stacked { grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 70px; }
.bar-row:hover { background: var(--surface-alt); }
.bar-row.is-selected { background: var(--surface-alt); border-color: var(--border-default); }
.bar-rank { font-size: 11px; color: var(--text-metadata); }
.bar-label { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { display: flex; height: 16px; background: var(--surface-soft); border: 1px solid var(--border-hairline); border-radius: 3px; overflow: hidden; }
.bar-fill { display: block; height: 100%; box-shadow: inset -1px 0 0 var(--border-default); }
.bar-fill span { display: inline-block; padding: 0 5px; font: 400 11px/16px var(--font-mono); color: var(--chart-on-fill); }
.seg-exclusive { background: var(--series-7-fill); }
.seg-shared { background: var(--series-9-fill); }
.bar-value { display: grid; justify-items: end; line-height: 1.15; }
.bar-value b { font-size: 15px; font-weight: 400; }
.bar-value small { font-size: 11px; color: var(--text-metadata); }
/* Matrix: a fixed table layout gives every value cell the same width — the header
   text never sizes a column, so cell size cannot be misread as a magnitude. */
.matrix-scroll { overflow: auto; }
.matrix { table-layout: fixed; width: max(100%, calc(150px + var(--matrix-columns, 8) * 60px)); border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.matrix col.matrix-head-col { width: 150px; }
.matrix col.matrix-cell-col { width: calc((100% - 150px) / var(--matrix-columns, 8)); }
.matrix th { font-weight: 600; color: var(--text-secondary); text-align: left; padding: 2px 4px; background: transparent; position: static; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matrix thead th { vertical-align: bottom; text-align: center; }
.matrix thead th.matrix-corner { text-align: left; }
.matrix-corner { color: var(--text-metadata); font-weight: 400; }
.matrix-col { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.matrix-col > span, .matrix-col { overflow: hidden; text-overflow: ellipsis; }
.matrix td { padding: 0; }
.matrix-row { border: 0; background: transparent; padding: 2px 6px 2px 2px; min-height: 34px; border-radius: 6px; text-align: left; font-weight: 600; display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; }
.matrix-row small { font-weight: 400; color: var(--text-metadata); }
.matrix-row[aria-pressed="true"] { background: var(--surface-alt); }
.matrix-cell { display: block; width: 100%; min-width: 0; height: 36px; min-height: 36px; padding: 0 4px; border: 1px solid var(--border-default); border-radius: 6px; font-size: 13px; text-align: center; }
.matrix-cell.is-measured_zero { color: var(--text-metadata); }
.matrix tr.is-selected .matrix-cell { outline: 2px solid var(--map-selected-stroke); outline-offset: -2px; }
.chart-empty { display: grid; place-items: center; gap: 10px; min-height: 120px; text-align: center; color: var(--text-metadata); font-size: 13px; }

.results { position: absolute; left: 0; right: 0; bottom: var(--bottom-panel-height); max-height: 72%; z-index: 8; background: var(--surface-card); padding: 12px 14px; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; }
.results-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.results-heading h2 { font-size: 15px; }
.results-heading button { font-size: 12px; min-height: 36px; padding: 5px 12px; }
#table-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.table-scroll { flex: 1 1 auto; overflow: auto; margin-top: 8px; min-height: 0; }
table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; min-width: 820px; }
th { position: sticky; top: 0; font-size: 12px; color: var(--text-metadata); padding: 8px 10px; background: var(--surface-alt); white-space: nowrap; z-index: 1; }
td { padding: 8px 10px; border-bottom: 1px solid var(--border-hairline); vertical-align: top; }
td small { display: block; color: var(--text-metadata); font-size: 12px; margin-top: 2px; }
.row-name { border: 0; background: transparent; padding: 0; white-space: normal; text-align: left; min-height: 40px; border-radius: 0; font-weight: 600; }
.row-name { display: inline-flex; align-items: center; gap: 8px; }
.row-name .venue-logo { width: 48px; height: 24px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 8px; font-size: 12px; flex-shrink: 0; }
.pagination button { font-size: 12px; min-height: 36px; }

/* 7. Responsive and motion ------------------------------------------------ */
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --panel-width: min(max(280px, 32%), 400px); }
  .insight-heading .hint { display: none; }
  .filter-grid { grid-template-columns: 1fr; }
  .metrics.compact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) and (orientation: landscape) {
  :root { --panel-width: min(max(280px, 42%), 440px); }
  .text-link { display: none; }
  .insight-heading h2 { display: none; }
  .map-legend { display: none; }
  .filter-grid { grid-template-columns: 1fr; }
  .metrics.compact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) and (orientation: portrait) {
  :root { --panel-width: 0px; }
  .topbar { gap: 8px; padding: 0 10px; }
  .brand { font-size: 14px; gap: 6px; }
  .brand img { width: 22px; height: 22px; }
  .top-actions a.text-link { display: none; }
  .product-name { font-size: 12px; }
  .theme-visible-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .theme-control select { width: 66px; }
  .map-column { right: 0; }
  .map-toolbar { gap: 5px; right: 52px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .map-toolbar::-webkit-scrollbar { display: none; }
  .map-toolbar button { font-size: 12px; min-height: 38px; padding: 6px 10px; flex: 0 0 auto; }
  .map-toolbar button#mobile-panel { display: inline-flex; }
  .legend-marks { display: none; }
  .map-status { display: none; }
  /* Map dock (D33 declutter, owner 2026-11-07 11:56 “หน้าจอ … รกมาก”; the pattern of CityMETER · Hotel 0.3.5): the card
     of the current level and the area legend read as one compact card at the foot of the map, just above the bottom bar
     (the map credit is a line in that bar, not on the map: owner 14:02). */
  .map-dock { position: absolute; left: 8px; right: 8px; bottom: calc(var(--bottom-panel-height) + 8px); z-index: 5; display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; transition: bottom .2s ease; }
  /* Map card: the reading of the current level; its primary button opens the sheet. The province is in the toolbar and
     the district names are on the map (labels with counts), so the card keeps the finding and one line under it. */
  .map-dock .map-aha { display: grid; gap: 6px; position: static; padding: 9px 10px 8px 12px; background: transparent; border: 0; border-radius: 0; }
  .map-dock .map-aha[hidden] { display: none; }
  .map-dock .map-legend { position: static; max-width: none; padding: 6px 12px 6px; gap: 4px; border: 0; border-radius: 0; background: transparent; }
  .map-dock .map-aha:not([hidden]) + .map-legend { border-top: 1px solid var(--border-hairline); }
  .map-panel:is([data-card="venue"], [data-card="pending"], [data-card="brand"], [data-card="station"]) .map-legend { display: none; }
  /* Legend in one row: the level and unit, then the 41-sample ramp with its ticks (and the zero swatch). */
  .map-dock #legend-areas { flex-wrap: nowrap; gap: 8px; }
  .map-dock .legend-title { flex: 0 1 auto; min-width: 0; font-size: 11px; line-height: 1.3; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-dock .legend-steps { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .map-dock .legend-ramp { width: auto; flex: 1 1 auto; min-width: 120px; max-width: 220px; }
  .map-dock .ramp-tick:not(.is-start):not(.is-end) { display: none; }
  .map-card-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .map-card-text { min-width: 0; flex: 1 1 auto; }
  .map-aha h2 { font-size: 14px; line-height: 1.35; font-family: var(--font-body); font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .map-aha[data-kind="aha"] .map-aha-crumb { display: none; }
  .map-aha p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
  .map-card-text p:not(.map-aha-crumb) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-aha .map-aha-crumb { font-size: 11px; color: var(--text-metadata); margin: 0 0 2px; }
  .map-aha .venue-logo-md { margin-right: 0; }
  .map-card-actions { display: flex; gap: 8px; }
  .map-card-actions .btn { min-height: 44px; font-size: 13px; padding: 6px 12px; }
  .map-card-actions .btn.primary { flex: 1 1 auto; }
  .map-card-actions .btn .pictogram { width: 18px; height: 18px; font-size: 18px; flex: 0 0 18px; }
  .crumbs-nav { margin-bottom: 4px; }
  .crumbs.is-collapsible:not(.is-expanded) .is-collapsible { display: none; }
  .crumbs.is-collapsible:not(.is-expanded) .crumb-ellipsis { display: inline-flex; }
  .crumbs.is-collapsible:not(.is-expanded) .crumb-ellipsis::before { content: none; padding: 0; }
  .panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 64dvh; border-left: 0; border-top: 1px solid var(--border-default); border-radius: var(--radius-md) var(--radius-md) 0 0; transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; z-index: 12; padding-bottom: env(safe-area-inset-bottom); }
  .panel.is-open { transform: none; visibility: visible; transition: transform .2s ease; }
  .panel-top { position: static; padding: 8px 14px; }
  .panel.is-detail .panel-top { position: sticky; top: 0; }
  .panel button.mobile-close { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto; min-height: 36px; padding: 4px 10px; font-size: 12px; border-radius: 999px; background: var(--surface-card); }
  .map-toolbar button#mobile-panel { order: -1; }
  .dataset-heading h1 { font-size: 20px; }
  .dataset-heading .intro { display: none; }
  .panel-view { padding: 12px 14px 20px; gap: 16px; }
  .insights { max-height: 56%; height: 340px; padding: 0 10px 8px; }
  .insights.is-collapsed { padding-bottom: 4px; }
  .insight-heading { gap: 6px; min-height: 47px; }
  .insight-heading h2 { font-size: 14px; margin-right: auto; }
  .insight-heading .hint { display: none; }
  .insight-heading button { padding: 5px 9px; }
  .results { padding: 8px 10px; max-height: 75%; }
  .results-heading h2 { font-size: 14px; }
  .neighborhood-label, .district-label, .province-label { max-width: 150px; font-size: 11px; }
  .bar-row { grid-template-columns: 16px minmax(70px, 110px) minmax(0, 1fr) 70px; gap: 6px; }
  .bar-row.stacked { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 54px; }
  .map-failure { inset: 25% 12px; }
}
@media (max-width: 760px) and (orientation: portrait) {
}
/* Phones zoom with two fingers: the zoom buttons step aside for the map; the compass (north, tilt) stays (as CityMETER ·
   Hotel 0.3.5). */
@media (max-width: 760px) and (orientation: portrait) and (pointer: coarse) {
  .map-panel .maplibregl-ctrl-zoom-in, .map-panel .maplibregl-ctrl-zoom-out { display: none; }
}
@media (min-width: 761px), (orientation: landscape) {
  .panel button.mobile-close, .map-toolbar button#mobile-panel { display: none; }
}
.map-panel.is-tight .map-legend, .map-panel.is-tight .map-status { display: none; }
/* At detail zoom the choropleth is off, so its legend steps step aside; pins and buildings remain explained. */
.map-panel.is-detail-zoom #legend-areas { display: none; }
/* A venue or record is read at building scale from the first frame: the area ramp steps aside at once,
   so the free map box measured for the two-point fit is the box the camera ends in. */
.map-panel:is([data-card="venue"], [data-card="pending"], [data-card="station"]) #legend-areas { display: none; }
@media (max-width: 760px) and (orientation: portrait) { .map-panel.is-detail-zoom .map-legend { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* LDS icons next to labels (owner instruction 2026-10-25: icon styling per LDS to keep labels short).
   Material Symbols Rounded subset, FILL 0 / wght 300; decorative, the text carries the meaning. */
.map-toolbar button, .insight-heading button, .tabs button, .pagination button, .results-heading button { display: inline-flex; align-items: center; gap: 6px; }
.map-toolbar .pictogram, .insight-heading .pictogram, .tabs .pictogram, .btn .pictogram, .pagination .pictogram, .results-heading .pictogram { width: 18px; height: 18px; font-size: 18px; vertical-align: 0; flex: 0 0 18px; color: currentColor; }
.insight-heading h2 { display: inline-flex; align-items: center; gap: 6px; }
.insight-heading h2 .pictogram { color: var(--text-secondary); }
.search-field { position: relative; display: block; }
.search-field .pictogram { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; font-size: 18px; pointer-events: none; }
.search-field input { padding-left: 38px; }
.filter-details summary .pictogram { width: 18px; height: 18px; font-size: 18px; vertical-align: 0; }
.eyebrow .pictogram { width: 16px; height: 16px; font-size: 16px; margin-right: 5px; vertical-align: -3px; color: currentColor; }
.facts dt { display: flex; align-items: flex-start; gap: 6px; }
.facts dt .pictogram { width: 16px; height: 16px; font-size: 16px; flex: 0 0 16px; vertical-align: 0; margin-top: 1px; }
.evidence summary .pictogram { width: 18px; height: 18px; font-size: 18px; margin-right: 6px; vertical-align: -4px; }
.help-steps strong { display: inline-flex; align-items: center; gap: 6px; }
.help-steps strong .pictogram { width: 18px; height: 18px; font-size: 18px; vertical-align: 0; }
.store-number { font-size: 20px; }
.metric-operator .metric-symbol, .pic-operator { color: var(--text-secondary); }

/* amCharts views (vendor/amcharts5, free licence: the amCharts logo stays) */
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 4px; }
.chart-head .chart-caption { margin: 0; }
.chart-controls, .chart-key { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chart-key { margin: 2px 0 6px; }
.chip-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px; font-size: 12px; border: 1px solid var(--border-default); border-radius: 999px; background: transparent; color: var(--text-secondary); }
.chip-toggle[aria-pressed="true"] { background: var(--surface-alt); color: var(--text-primary); font-weight: 600; }
.chip-toggle.key-item[aria-pressed="false"] { color: var(--text-metadata); text-decoration: line-through; text-decoration-color: var(--text-muted); }
.chip-toggle.key-item[aria-pressed="false"] .cue-swatch { opacity: .35; }
.chip-toggle:focus-visible { outline: 3px solid var(--interaction-focus-ring); outline-offset: 2px; }
.am-chart { width: 100%; min-height: 160px; }
.chart-note { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 3px 4px; font-size: 12px; color: var(--text-metadata); }
.am-chart [role="button"]:focus-visible, .am-chart [tabindex]:focus-visible, .am5-focus-container [tabindex]:focus-visible { outline: 3px solid var(--interaction-focus-ring); outline-offset: 2px; }
@media (max-width: 760px) and (orientation: portrait) {
  .map-toolbar button#open-help span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabs .tab-label { font-size: 12px; }
}

/* Map credits (#map-credits): the full, live list behind the bar's “ที่มา” (js/map-credits.js). Moved here from
   navigation.css in release 0.2.0, when that file became the shared citymeter-shell bytes (js/shell/manifest.json);
   the help dialog opens at this section from the link's data-open-help (js/shell/navigation.js). */
.help-credits { margin: 0 0 16px; padding-top: 16px; border-top: 1px solid var(--border-hairline); scroll-margin-top: 8px; }
.help-credits h3 { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.4; }
.help-credits h3 .pictogram { width: 18px; height: 18px; font-size: 18px; color: var(--text-secondary); }
.help-credits p, .help-credits li { color: var(--text-secondary); font-size: 13px; }
.help-credits p { margin-top: 4px; }
.credit-list { margin: 8px 0; padding-left: 20px; }
.credit-list li { margin: 0 0 4px; }