/* ==========================================================================
   CityMETER · Pharmacy — 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); }
.btn.back::before { content: "←"; font-weight: 400; }
.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; }
/* Phone portrait only (see the media query): วิธีใช้ and the product statement at the top of the sheet. */
.sheet-links { display: none; }
/* The phone sheet's bar (back · grip · close) exists only in the phone-portrait sheet (see the media query). */
.sheet-bar { display: none; }
.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; }
.map-panel { position: absolute; inset: 0; background: var(--surface-alt); isolation: isolate; overflow: hidden; container-type: inline-size; }
#map { position: absolute; inset: 0; }
/* Map controls sit above the charts tray. Scoped under .map-panel so the lazily loaded MapLibre CSS (same
   specificity, later in the cascade) cannot pull them back under the tray: the attribution must stay visible. */
.map-panel .maplibregl-ctrl-bottom-right, .map-panel .maplibregl-ctrl-bottom-left { bottom: var(--bottom-panel-height); }
.maplibregl-ctrl-attrib { font: 11px/18px var(--font-body); }
/* Themed attribution: three classes so the vendor's compact rule (#fff on .maplibregl-ctrl-attrib.maplibregl-compact,
   loaded later) cannot leave light theme links on a white chip in the dark theme. */
.map-panel .maplibregl-ctrl.maplibregl-ctrl-attrib { background-color: color-mix(in srgb, var(--surface-card) 92%, transparent); color: var(--text-metadata); }
.map-panel .maplibregl-ctrl.maplibregl-ctrl-attrib a { color: var(--text-secondary); }
/* The vendor (i) glyph is black: invert it on the dark chip. */
:root[data-theme="dark"] .map-panel .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* 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); }

/* Breadcrumb — ประเทศไทย › จังหวัด › เขต/อำเภอ › แขวง/ตำบล (codes as in CityMETER production routes) */
.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-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); }
.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-personality { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-hairline); font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.aha-personality strong { color: var(--text-primary); }
.aha-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
/* Rail comparison as two bars (focus vs the rest of the province). */
.aha-rail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.aha-rail-title { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.aha-rail-title .pictogram, .aha-secondary .pictogram, .rank-line .pictogram, .eyebrow .pictogram { width: 16px; height: 16px; font-size: 16px; vertical-align: -3px; margin-right: 2px; }
.rail-compare li { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 44px; }
.rank-line { margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.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); }

/* 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; }
/* 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. */
@font-face {
  font-family: "LDS Material Symbols Rounded Pictogram";
  src: url("assets/icons/material-pictogram-300.woff2?v=baaf50d8") format("woff2");
  font-style: normal; font-weight: 300; font-display: block;
  unicode-range: U+E55B, U+E7F1, U+E72C, U+E65F, U+E56E, U+E0C8, U+EA40, U+EFDF, U+E570, U+F233, U+E915, U+F20C, U+E878, U+E41C, U+EA3C, U+F20E, U+E564, U+E548, U+F109, U+EF76, U+EA4B, U+E9F4, U+F1A9, U+E84F;
}
.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-area::before { content: "\E55B"; }
.pic-province::before { content: "\E7F1"; }
.pic-segment::before { content: "\E72C"; }
.pic-ai::before { content: "\E65F"; }
.pic-streetview::before { content: "\E56E"; }
.pic-maps::before { content: "\E0C8"; }
.pic-building::before { content: "\EA40"; }
.pic-beds::before { content: "\EFDF"; }
.pic-rail::before { content: "\E570"; }
.pic-meeting::before { content: "\F233"; }
.pic-compare::before { content: "\E915"; }
.pic-rank::before { content: "\F20C"; }
.pic-date::before { content: "\E878"; }
.pic-distance::before { content: "\E41C"; }
.pic-construction::before { content: "\EA3C"; }
.pic-dataset::before { content: "\F20E"; }
.pic-elevation::before { content: "\E564"; }
.pic-hospital::before { content: "\E548"; }
.pic-service::before { content: "\F109"; }
.pic-accredit::before { content: "\EF76"; }
.pic-lab::before { content: "\EA4B"; }
.pic-network::before { content: "\E9F4"; }
.pic-level::before { content: "\F1A9"; }
.pic-affiliation::before { content: "\E84F"; }
.pic-plain { display: none; }
.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: 8px; border-top: 1px solid var(--border-hairline); }
.provenance span { white-space: normal; }
.provenance a { color: inherit; }
/* Provenance (owner 2026-11-01, short copy): dataset · source · date · boundary as pictogram-led parts, then the method. */
.provenance .pictogram { width: 14px; height: 14px; font-size: 14px; vertical-align: -2px; margin-right: 3px; }
.provenance [data-prov="date"]::before, .provenance [data-prov="boundary"]::before, .provenance .prov-method::before { content: "·"; margin: 0 6px; color: var(--text-metadata); }
.provenance .prov-method { white-space: nowrap; }
.provenance .prov-method a { text-decoration: underline; text-underline-offset: 2px; }

/* 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 minmax(64px, max-content); 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 (district / area / building / 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; }
.store-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.brand-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 2px; font-size: 13px; }
.brand-card { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-hairline); }
.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); color: var(--text-primary); }
.status-pill.tone-listed { background: var(--state-success-surface); color: var(--state-success-content); }
.status-pill.tone-announced { background: var(--state-info-surface); color: var(--state-info-content); }
.status-pill.tone-closed { background: var(--state-danger-surface); color: var(--state-danger-content); border-style: dashed; border-color: currentColor; }
.status-pill.tone-review { background: var(--state-pending-surface); color: var(--state-pending-content); }
.company-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.company-list li { line-height: 1.5; }
.company-list small { color: var(--text-secondary); }
.company-role { color: var(--text-metadata); font-size: 12px; }
.company-sub { margin-top: 8px; font-size: 12px; color: var(--text-metadata); }
.status-others { margin-top: 8px; }
.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; }


/* Mix bars */
.mix-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.mix-list li { display: grid; grid-template-columns: minmax(0, 168px) minmax(0, 1fr) minmax(56px, max-content); align-items: center; gap: 8px; font-size: 12px; }
.mix-label { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.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; }

/* Pharmacy lists */
.outlet-list { list-style: none; padding: 0; display: grid; }
.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); }

/* 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:hover { background: var(--surface-alt); }

/* 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:disabled { opacity: .5; }
#mobile-panel { display: none; }

.map-legend { position: absolute; left: 8px; bottom: calc(var(--bottom-panel-height) + 34px); 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; flex-wrap: wrap; align-items: flex-end; gap: 4px; }
.legend-step { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; line-height: 1.2; min-width: 40px; color: var(--text-metadata); white-space: nowrap; }
.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); }
/* EVID-05 no_data: 135° hatch on the no-data ground with an emphasis border — never a zero. */
/* 41-sample ramp legend (js/scales.js#rampLegendHTML): every LDS sample in order, value ticks at their own samples. */
.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; }
/* A tick whose label would touch its neighbour on this ramp's actual width steps aside (js/app.js#spaceTicks). */
.ramp-tick.is-crowded { visibility: hidden; }
.chart-legend .legend-ramp { margin-top: 2px; }
.legend-step .legend-nodata, .legend-nodata { background: repeating-linear-gradient(135deg, var(--border-emphasis) 0 1.5px, var(--data-no-data) 1.5px 5px); border-color: var(--border-emphasis); }
.legend-marks span { display: inline-flex; align-items: center; gap: 6px; }
.legend-context { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.map-panel.is-province-zoom .legend-context-item, .map-panel.is-province-zoom .legend-massing-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; }
.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 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)); }
/* Categorical cue (LDS DATAVIZ-05): series fill + the series shape, outlined; the text label beside it carries the meaning. */
.cue-shape { display: inline-block; width: 12px; height: 12px; flex: 0 0 12px; fill: var(--pin-fill, var(--text-muted)); stroke: var(--map-marker-stroke); stroke-width: 1; stroke-linejoin: round; paint-order: stroke; vector-effect: non-scaling-stroke; overflow: visible; vertical-align: -1px; }
.mix-label .cue-shape, .matrix-col .cue-shape, #category-key .cue-shape, .legend-marks .cue-shape { margin-right: 1px; }
.eyebrow-cue { display: flex; align-items: center; gap: 6px; }
.map-status { position: absolute; left: 8px; bottom: calc(var(--bottom-panel-height) + 8px); z-index: 4; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-metadata); background: color-mix(in srgb, var(--surface-card) 85%, transparent); padding: 2px 8px; border-radius: 6px; pointer-events: 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 (0.3.5) holds the Aha card and the legend; on wider screens it adds no box (each keeps its place). */
.map-dock { display: contents; }

/* Neighborhood labels */
.area-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.neighborhood-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: 204px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.neighborhood-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, .province-label .label-name { overflow: hidden; text-overflow: ellipsis; }
.neighborhood-label .label-count, .province-label .label-count { font: 400 11px/1.3 var(--font-mono); flex: 0 0 auto; 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, .province-label.is-zero .label-count { background: transparent; color: var(--area-label-ink); border: 1.5px solid var(--data-zero-outline); }
.neighborhood-label:hover, .province-label:hover { border-color: var(--map-hover-stroke); }
.neighborhood-label.is-selected, .province-label.is-selected { border: 2px solid var(--map-selected-stroke); }
.neighborhood-label:focus-visible, .province-label:focus-visible { outline: 2px solid var(--interaction-focus-ring); outline-offset: 2px; }
.neighborhood-label.is-quiet, .province-label.is-quiet { font-weight: 600; font-size: 11px; opacity: .72; box-shadow: none; }
.neighborhood-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, .province-label.is-quiet .label-count { background: transparent; color: var(--area-label-ink); border: 1px solid var(--area-label-ink); opacity: .8; }
/* เขต/อำเภอ chips: the swatch is the area's 41-sample count ramp colour (the legend link). Areas outside the
   focus get a light chip so the focused areas keep the ink. */
.neighborhood-label::before { background: var(--label-swatch, transparent); border: 1px solid var(--area-label-ink); opacity: 1; }
.neighborhood-label.is-quiet { background: color-mix(in srgb, var(--surface-card) 94%, transparent); color: var(--text-secondary); border-color: var(--border-default); opacity: 1; font-weight: 600; }
.neighborhood-label.is-quiet::before { border-color: var(--border-emphasis); opacity: 1; }
.neighborhood-label.is-quiet .label-count { color: var(--text-secondary); border-color: var(--border-default); opacity: 1; }

/* 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, 8px); height: var(--pin-size, 8px); min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: auto; line-height: 0; --pin-fill: var(--text-muted); }
.pin-dot { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--pin-fill); box-shadow: 0 0 0 1px var(--map-marker-stroke), 0 0 0 2px var(--map-marker-halo); }
.store-pin .pin-dot { background: none; box-shadow: none; border-radius: 0; filter: drop-shadow(0 0 1px var(--map-marker-halo)); }
.pin-dot .cue-shape { display: block; width: 100%; height: 100%; }
/* Unknown beds (EVID-05 no_data): the same shape as an open outline in the series fill, never a filled small mark. */
.store-pin.is-unknown-beds .cue-shape { fill: none; stroke: var(--pin-fill); stroke-width: 2.2; paint-order: normal; filter: drop-shadow(0 0 .6px var(--map-marker-stroke)); }
.store-pin.is-selected, .store-pin:hover, .store-pin:focus-visible { z-index: 5; outline: 2px solid var(--interaction-focus-ring); outline-offset: 3px; }
/* Quiet context: observations outside the focused part stay on the map as small
   neutral dots — one per record, no logo, no category colour, no keyboard stop. */
.store-pin.is-context, .store-pin-overlay .store-pin.is-context[data-category] { --pin-fill: var(--text-disabled); width: max(3px, calc(var(--pin-size, 8px) * .55)); height: max(3px, calc(var(--pin-size, 8px) * .55)); }
.store-pin.is-context .pin-dot { box-shadow: 0 0 0 .6px var(--map-marker-halo); }
.store-pin.is-context:hover { outline-color: var(--border-emphasis); }

/* 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 .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 10px; z-index: 6; display: flex; flex-direction: column; }
.insights.is-collapsed { height: 52px; padding-bottom: 0; }
.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; }
.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.is-share { grid-template-columns: minmax(90px, 170px) minmax(0, 1fr) 92px; }
.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-label small { display: block; font-size: 11px; font-weight: 400; color: var(--text-metadata); overflow: hidden; text-overflow: ellipsis; }
.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); }
.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; }
/* Column heads wrap to two lines instead of truncating a food-type name (Thai breaks at word boundaries). */
.matrix thead th:not(.matrix-corner) { white-space: normal; overflow: visible; }
.matrix-col { align-items: flex-start; }
.matrix-col > span { white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.matrix-col .cue-shape { flex: none; margin-top: 2px; }
.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); }
/* Numbers on the samples neither foundation ink reads on (4.5:1) sit on a neutral plate; the cell keeps its data colour. */
.matrix-cell .on-plate { background: var(--surface-card); color: var(--text-primary); padding: 0 4px; border-radius: 3px; }
.matrix tr.is-selected .matrix-cell { outline: 2px solid var(--map-selected-stroke); outline-offset: -2px; }
/* Empty selection note (no_data vs measured_zero): neutral surface, no coloured rail. */
.empty-note { display: grid; gap: 6px; justify-items: start; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-alt); font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.empty-note strong { color: var(--text-primary); font-weight: 600; }
.empty-note .btn { min-height: 36px; font-size: 12px; padding: 5px 12px; }
.chart-empty { display: grid; place-items: center; gap: 10px; min-height: 120px; text-align: center; color: var(--text-metadata); font-size: 13px; }

/* The table sits on top of the charts tray: never taller than the map space left above the tray (it scrolls inside). */
.results { position: absolute; left: 0; right: 0; bottom: var(--bottom-panel-height); max-height: min(72%, calc(100% - var(--bottom-panel-height) - 12px)); 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; }
.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 9px; flex: 0 0 auto; }
  .map-toolbar button#mobile-panel { display: inline-flex; }
  /* Six buttons need 372 px of a 330 px row: วิธีใช้ (and the product statement link) move into the sheet. */
  .map-toolbar button#open-help { display: none; }
  .sheet-links { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin: 0 0 6px; font-size: 12px; }
  .sheet-links .link-button, .sheet-links .text-link { display: inline-flex; align-items: center; min-height: 32px; font-size: 12px; }
  /* Map dock (0.3.5, owner 2026-11-02 “ในมือถือ เหลือพื้นที่ map น้อยมาก ช่วยปรับปรุงด้วย”): the Aha line and the
     legend read as one compact card at the foot of the map. While the attribution is open (on load) the dock sits
     above it (--attrib-height, app.js); once it folds to its (i) button the dock drops to the tray and leaves the
     button its corner. */
  .map-dock { position: absolute; left: 8px; right: 8px; bottom: calc(var(--bottom-panel-height) + var(--attrib-height, 32px) + 4px); z-index: 5; display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }
  .map-panel.is-attrib-compact .map-dock { right: 46px; bottom: calc(var(--bottom-panel-height) + 8px); }
  .map-panel.is-detail-zoom .map-dock:has(> .map-aha[hidden]), .map-panel.is-tight .map-dock:has(> .map-aha[hidden]) { display: none; }
  .map-dock .map-legend { position: static; max-width: none; padding: 6px 10px 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); }
  /* Legend in one row: the measure switch, then the level (with the zero swatch at its end) over the ramp. */
  .map-dock #legend-areas { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 8px; }
  .map-dock .metric-switch { grid-row: 1 / span 2; grid-column: 1; }
  .map-dock .metric-switch button { min-height: 34px; padding: 2px 10px; }
  .map-dock .legend-title { grid-row: 1; grid-column: 2; font-size: 11px; line-height: 1.25; font-weight: 600; color: var(--text-secondary); margin: 0; }
  .map-dock .legend-steps { display: contents; }
  .map-dock .legend-ramp { grid-row: 2; grid-column: 2 / -1; width: 100%; min-width: 0; max-width: 280px; }
  .map-dock .ramp-zero { grid-row: 1; grid-column: 3; flex-direction: row; gap: 4px; min-width: 0; }
  .map-dock .ramp-zero i { width: 18px; height: 10px; }
  .map-dock .legend-steps > .hint { grid-row: 2; grid-column: 2 / -1; }
  .legend-marks { display: none; }
  .map-status { display: none; }
  .map-aha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; }
  .map-aha h2 { font-size: 13px; line-height: 1.35; font-family: var(--font-body); font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  /* The province and the district names are on the map (crumb chips, district labels): the dock keeps the finding. */
  .map-aha p, .map-aha .map-aha-crumb { display: none; }
  .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; }
  .map-aha .btn { min-height: 36px; font-size: 12px; padding: 4px 12px; }
  /* The sheet (0.7.0, owner 2026-11-11 20:38: “เหลือพื้นที่ให้ดูแผนที่น้อยมาก info panel กินพื้นที่หน้าจอไปหมด แถมใน panel
     ก็จัดวางข้อมูลโล่งๆ”): a stay, a building, a station or an area opens short (data-sheet="peek": its name, key facts
     and actions, nothing else), the grip or a swipe up opens the rest (full, 88 % of the screen), a swipe down closes;
     the overview opens at 56 % as before (half). Measured on Hotel at 393 × 659 with a stay open (โฮเทล โคลเวอร์ ป่าตอง):
     free map below the toolbar 194 px → 297 px. */
  .panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 56dvh; 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, max-height .2s ease; z-index: 12; padding-bottom: env(safe-area-inset-bottom); }
  .panel.is-open { transform: none; visibility: visible; transition: transform .2s ease, max-height .2s ease; }
  .panel[data-sheet="peek"] { max-height: 56dvh; }
  /* Open, the sheet stops under the map's toolbar (top bar 48 + toolbar 48 + 8): at 88 % of a short screen it cut the
     toolbar's buttons in half. */
  .panel[data-sheet="full"] { max-height: min(88dvh, calc(100dvh - 104px)); }
  .sheet-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(44px, max-content) minmax(0, 1fr) minmax(44px, max-content); grid-template-areas: "back grip close"; align-items: center; column-gap: 4px; padding: 2px 8px 0; background: var(--surface-card); border-radius: var(--radius-md) var(--radius-md) 0 0; touch-action: none; }
  .sheet-bar .sheet-back { grid-area: back; justify-self: start; min-height: 36px; padding: 4px 12px 4px 10px; font-size: 12px; }
  .sheet-bar .sheet-back[hidden] { display: none; }
  .sheet-grip { grid-area: grip; min-height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; display: flex; align-items: center; justify-content: center; }
  .sheet-grip::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--border-emphasis); }
  .sheet-grip:hover { background: none; }
  .panel button.mobile-close { grid-area: close; justify-self: end; display: inline-flex; width: 44px; min-height: 44px; padding: 0; border: 0; background: none; }
  .panel button.mobile-close:hover { background: var(--surface-alt); }
  .panel-top { position: static; padding: 0 14px 8px; }
  /* The sheet of a stay, building, station or area: no help links (they stay in the overview's sheet) and no second
     back button; short, it shows the card's head alone. */
  .panel:not([data-mode="overview"]) .sheet-links, .panel:not([data-mode="overview"]) .detail-head .back { display: none; }
  .panel[data-sheet="peek"] .panel-top, .panel[data-sheet="peek"] .panel-view > :not(.detail-head),
  .panel[data-sheet="peek"] .detail-head .source-details, .panel[data-sheet="peek"] .detail-head .detail-actions .source-link { display: none; }
  .panel[data-sheet="peek"] { overflow-y: auto; }
  .map-toolbar button#mobile-panel { order: -1; }
  .dataset-heading h1 { font-size: 20px; }
  .dataset-heading .intro { display: none; }
  /* A stay, a building, a station or an area (0.3.5): the sheet (56 % of the screen, was 64 %) opens on it, not on the
     dataset heading and the search, which return with the overview; the heading stays for screen readers. */
  .panel:not([data-mode="overview"]) .dataset-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .panel:not([data-mode="overview"]) .filters { display: none; }
  .panel-view { padding: 2px 14px 16px; gap: 14px; }
  .panel[data-mode="overview"] .panel-view { padding-top: 12px; }
  .insights { max-height: 56%; height: 340px; padding: 0 10px 8px; }
  .insights.is-collapsed { height: 48px; }
  .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: min(75%, calc(100% - var(--bottom-panel-height) - 8px)); }
  .results-heading h2 { font-size: 14px; }
  .neighborhood-label, .province-label { max-width: 196px; font-size: 12px; }
  .bar-row { grid-template-columns: 16px minmax(70px, 110px) minmax(0, 1fr) 70px; gap: 6px; }
  .bar-row.is-share { grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) 64px; }
  .mix-list li { grid-template-columns: minmax(0, 132px) minmax(0, 1fr) minmax(56px, max-content); }
  .quality-bar { grid-template-columns: minmax(0, 1fr) 64px; }
  .quality-bar .mix-track { grid-column: 1 / -1; grid-row: 2; }
  .map-failure { inset: 25% 12px; }
}
/* Phones zoom with two fingers: the zoom buttons step aside for the map; the compass (north, tilt) stays (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; }
  /* The attribution wraps upward on the right instead of running under the legend on the left. */
  /* 100cqw = the map panel's width (container on .map-panel); 470px = legend (8 + 380) + gap + the attribution's own padding/margin. */
  .map-panel .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { max-width: max(200px, calc(100cqw - 470px)); }
}
.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; }
@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; }
}
/* Areas below the eligibility threshold are listed without a rank (density on a handful of rows is not a finding). */
.rank-row.is-unranked .rank-name { font-weight: 400; color: var(--text-secondary); }
.rank-row.is-unranked .rank-value { color: var(--text-metadata); }

/* 8. Pharmacy additions ---------------------------------------------------- */
/* Group identity (LDS DATAVIZ-05, js/cues.js#GROUP_SERIES): the series fill is read through --pin-fill by the
   cue shapes, pins and part-of-whole bars; the shape cue and the text label carry the meaning too. */
.store-pin[data-category="1"], .category-1 { --pin-fill: var(--series-1-fill); }
.store-pin[data-category="2"], .category-2 { --pin-fill: var(--series-2-fill); }
.store-pin[data-category="3"], .category-3 { --pin-fill: var(--series-3-fill); }
.store-pin[data-category="4"], .category-4 { --pin-fill: var(--series-4-fill); }
.store-pin[data-category="5"], .category-5 { --pin-fill: var(--series-5-fill); }
.store-pin[data-category="6"], .category-6 { --pin-fill: var(--series-6-fill); }
.store-pin[data-category="7"], .category-7 { --pin-fill: var(--series-7-fill); }
.store-pin[data-category="8"], .category-8 { --pin-fill: var(--series-8-fill); }
.store-pin[data-category="9"], .category-9 { --pin-fill: var(--series-9-fill); }
.store-pin[data-category="10"], .category-10 { --pin-fill: var(--series-10-fill); }
.mix-fill[class*="category-"], .bar-fill[class*="category-"], .quality-fill { background: var(--pin-fill); }
.bar-label .cue-shape { margin-right: 5px; }
.brand-row { display: flex; align-items: center; gap: 10px; white-space: normal; }
.brand-row > span { min-width: 0; overflow-wrap: anywhere; }
.row-name.brand-row { max-width: 340px; }
.row-cue { width: 13px; height: 13px; flex-basis: 13px; }
.nowrap { white-space: nowrap; }
.brand-chip { padding-left: 10px; }
.chip-cue { width: 11px; height: 11px; flex-basis: 11px; }
/* Quality list: a part-of-whole bar; the plain track is the rest (not on the list). */
.quality-bar { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 72px; align-items: center; gap: 8px; font-size: 12px; }
.quality-bar .mix-label { white-space: normal; overflow: visible; }
.legend-track { display: inline-block; background: var(--surface-soft) !important; border: 1px solid var(--border-hairline) !important; border-radius: 2px; }
.chart-legend .legend-step .cue-shape { width: 12px; height: 12px; }
/* Province list beyond the first eight. */
.more-provinces summary { cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.more-provinces .province-list { margin-top: 4px; }
/* The open building (or the building the open store's point falls in) is drawn in the data colour. */
.map-panel:not(.has-open-building) .legend-building-item { display: none; }
.legend-building { width: 12px; height: 12px; background: var(--map-active-layer); border: 1px solid var(--map-selected-stroke); transform: skewY(-12deg); }
.legend-marks #legend-pin .cue-shape { width: 11px; height: 11px; }

/* ---------- Rows, identity, fact chips and contextual actions (from Fitness 0.3.0) ---------- */
.outlet-list .brand-row { display: flex; gap: 10px; align-items: flex-start; }
.row-cue { margin-top: 3px; }
.row-text { display: grid; gap: 1px; min-width: 0; }
.row-text strong { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.row-branch { font-size: 13px; line-height: 1.4; color: var(--text-primary); overflow-wrap: anywhere; }
.row-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.45; color: var(--text-metadata); }
.row-meta:empty { display: none; }
.row-cue-inline { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; vertical-align: -1px; margin-right: 4px; }
.row-pic { width: 22px; height: 22px; font-size: 22px; flex: 0 0 22px; }
.identity { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.identity > div { min-width: 0; }
.identity .eyebrow { margin-bottom: 2px; }
.identity-pic { width: 46px; height: 46px; font-size: 42px; flex: 0 0 46px; }
.branch-name { font-size: 15px; line-height: 1.45; color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
/* The register's own name under the name the facility is listed under: a quiet word, then the name. */
.recorded-label { font-size: 0.86em; font-weight: 600; color: var(--text-metadata); white-space: nowrap; margin-right: 2px; }
.title-link { font: inherit; color: inherit; padding: 0; min-height: 0; border: 0; background: none; text-align: left; white-space: normal; text-decoration: none; }
.title-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.store-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 13px; }
.chip-link { font-size: 12px; }
.fact-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fact-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px 3px 6px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-raised); color: var(--text-primary); font: 400 12px/1.3 var(--font-body); text-align: left; white-space: normal; }
.fact-chip .pictogram { width: 16px; height: 16px; font-size: 16px; vertical-align: 0; }
button.fact-chip { cursor: pointer; }
button.fact-chip:hover { background: var(--surface-alt); }
.fact-chip.is-quiet { color: var(--text-metadata); background: transparent; border-style: dashed; }
.fact-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
/* Comparison-set rule as chips (type · beds · radius) and the list's “ดูทั้งหมด” link. */
.rule-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.rule-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid var(--border-hairline); border-radius: 999px; font-size: 12px; color: var(--text-secondary); }
.rule-chip .pictogram, .hint-pic { width: 14px; height: 14px; font-size: 14px; vertical-align: -2px; }
.list-more { margin-top: 8px; font-size: 12px; }
.fact-icon { width: 16px; height: 16px; font-size: 16px; vertical-align: -3px; }
.ask-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ask-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 8px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-raised); color: var(--text-primary); font-size: 12px; font-weight: 600; text-decoration: none; }
.ask-link:hover { background: var(--surface-alt); border-color: var(--border-emphasis); }
.ask-link .pictogram { width: 18px; height: 18px; font-size: 18px; vertical-align: 0; color: var(--interaction-accent); }
.pictograms-unavailable .ask-link { padding-left: 12px; }
.source-details { margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--border-hairline); }
.source-details summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-secondary); list-style: none; }
.source-details summary::-webkit-details-marker { display: none; }
.source-details summary::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin: 0 10px 0 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.source-details[open] summary::before { transform: rotate(45deg); }
.source-details .facts { margin-top: 4px; }
.popup-identity { display: flex; gap: 10px; align-items: center; margin-right: 28px; }
.map-panel .maplibregl-popup-content .popup-identity h3 { margin-right: 0; }
.map-panel .maplibregl-popup-content .popup-branch { margin-top: 0; color: var(--text-primary); }
.map-panel .maplibregl-popup-content .popup-meta { font-size: 12px; }
#result-rows .row-name { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
#result-rows td small { display: flex; align-items: center; gap: 4px; }
@media (max-width: 760px) and (orientation: portrait) {
  .ask-link { min-height: 40px; }
}

/* ---------- carried over from Hotel 0.1.0 ---------- */
/* Measure switch (เตียง | สถานพยาบาล): a two-option radio group in the legend; the checked option carries the text
   colour fill, the other stays quiet. Keyboard: arrows switch (js/app.js#wireEvents). */
.metric-switch { display: inline-flex; flex: 0 0 auto; padding: 2px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-raised); }
.metric-switch button { min-height: 30px; padding: 2px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.metric-switch button[aria-checked="true"] { background: var(--text-primary); color: var(--surface-canvas); }
.metric-switch button:focus-visible { outline: 2px solid var(--interaction-focus-ring); outline-offset: 2px; }
.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; }
/* Group bars are buttons (filter to that group); the row keeps the mix grid. */
.mix-list li:has(> .mix-row) { display: block; }
.mix-row { display: grid; grid-template-columns: minmax(0, 168px) minmax(0, 1fr) minmax(56px, max-content); align-items: center; gap: 8px; width: calc(100% + 8px); min-height: 32px; margin: 0 -4px; padding: 2px 4px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: 12px; text-align: left; white-space: normal; }
.mix-row:hover { background: var(--surface-alt); }
/* Ordinal size bands, station ranks and affiliations are not categories of the map: one neutral foundation fill. */
.size-fill, .rail-fill, .aff-fill { background: var(--border-emphasis); }
.size-list .mix-label { font-variant-numeric: tabular-nums; }
.chip-pic { width: 16px; height: 16px; font-size: 16px; vertical-align: 0; }
.brand-chip.is-static { border: 1px solid var(--border-hairline); cursor: default; }
.brand-chip.is-static:hover { background: var(--surface-raised); }
.identity-cue { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid var(--border-hairline); border-radius: 12px; background: var(--surface-raised); }
.identity-cue .cue-shape { width: 22px; height: 22px; }
.aha-personality .pictogram, .fact-line .pictogram { flex: 0 0 auto; }
.compset .row-meta { flex-wrap: wrap; }
td.num, th.num { text-align: right; }
@media (max-width: 760px) and (orientation: portrait) {
  .mix-row { grid-template-columns: minmax(0, 132px) minmax(0, 1fr) minmax(56px, max-content); }
  .rank-row { grid-template-columns: 22px minmax(0, 1fr) 44px minmax(64px, max-content); }
  .metric-switch button { min-height: 36px; }
}

/* 9. Carried over from Hotel 0.2.0 — symbols sized by the measure, names near the middle of the view, terrain at
   hilly sites, and symbols/icons instead of long text on the map. ---------------------------------------------- */
.map-panel:not(.is-3d) .legend-massing.is-quiet { display: none; }
.legend-massing-item .legend-massing + .legend-massing { margin-left: -3px; }
/* Size key: the symbol sizes at the current zoom (area ∝ beds); the hollow mark = unknown beds. */
.size-key { display: inline-flex; align-items: center; gap: 7px; }
.size-step { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.size-dot { display: inline-block; flex: none; width: var(--d, 8px); height: var(--d, 8px); border-radius: 50%; background: var(--text-muted); border: 1px solid var(--map-marker-stroke); box-sizing: border-box; }
.size-dot.is-hollow { background: transparent; border: 2px solid var(--text-muted); }
.size-key .pictogram, .legend-terrain-item .pictogram, .map-status .pictogram { width: 15px; height: 15px; font-size: 15px; vertical-align: 0; }
.size-key > .pictogram { margin-left: -4px; }
.legend-terrain-item { gap: 4px; }
.category-cues { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.category-cues .cue-shape { width: 10px; height: 10px; flex-basis: 10px; margin: 0; }
/* Area chips: the measure's pictogram stands for the unit (bed = เตียง, hospital = แห่ง); the title says it in words. */
.pictograms-ready .area-label .label-count::before { content: "\EFDF"; display: inline-block; margin-right: 3px; font: 300 12px/1 "LDS Material Symbols Rounded Pictogram"; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20; vertical-align: -2px; }
.pictograms-ready .map-panel[data-metric="count"] .area-label .label-count::before { content: "\E548"; }
/* Facility names near the middle of the view (js/labels.js). */
.fac-labels { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.fac-label { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; max-width: 230px; min-height: 0; padding: 3px 7px 3px 4px; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 6px; font: 600 12px/1.25 var(--font-body); white-space: nowrap; pointer-events: auto; cursor: pointer; opacity: 0; transition: opacity .18s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.fac-label.is-on { opacity: 1; }
.fac-label::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: var(--surface-card); border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); transform: translateX(-50%) rotate(45deg); }
.fac-label.is-below::after { bottom: auto; top: -5px; transform: translateX(-50%) rotate(225deg); }
.fac-label .hl-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.fac-label .hl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-label .hl-cue { display: inline-flex; padding-left: 3px; }
.fac-label .hl-cue .cue-shape { width: 11px; height: 11px; flex-basis: 11px; }
.fac-label .hl-beds { display: inline-flex; align-items: center; gap: 1px; flex: none; font: 400 11px/1 var(--font-mono); color: var(--text-secondary); }
.fac-label .hl-beds .pictogram { width: 14px; height: 14px; font-size: 14px; vertical-align: 0; }
.fac-label:hover { border-color: var(--map-hover-stroke); }
.fac-label:focus-visible { outline: 2px solid var(--interaction-focus-ring); outline-offset: 2px; opacity: 1; }
@media (max-width: 760px) and (orientation: portrait) { .fac-label { max-width: 160px; font-size: 11px; } }
/* Hover card: icon chips; the sentences live in the chip titles. */
.fac-card { position: absolute; left: 0; top: 0; z-index: 6; width: max-content; max-width: 300px; padding: 10px 12px; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 6px; font: 400 12px/1.45 var(--font-body); pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.fac-card .hc-head { display: flex; align-items: center; gap: 8px; }
.fac-card .hc-head strong { display: block; font: 700 14px/1.35 var(--font-display); }
.fac-card .hc-sub { display: block; color: var(--text-secondary); font-size: 11px; }
.fac-card .hc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.fac-card .hc-chips:empty { display: none; }
.fac-card .hc-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 5px; border: 1px solid var(--border-default); border-radius: 999px; white-space: nowrap; font-size: 12px; }
.fac-card .hc-chip .pictogram { width: 15px; height: 15px; font-size: 15px; vertical-align: 0; }
.fac-card .hc-chip .cue-shape { width: 11px; height: 11px; flex-basis: 11px; margin-right: 3px; }

/* 10. Hospital 0.1.0 — lab prices, services, the affiliation card. ---------------------------------------------- */
/* Lab basket (DIT): the sum, its level as a five-step meter (the level's own step filled; never a colour scale), then
   the six items with their prices. */
.price-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; font-size: 13px; }
.price-head strong { font: 600 20px/1.2 var(--font-mono); }
.price-level { font-weight: 600; color: var(--text-secondary); }
.level-meter { display: inline-flex; gap: 3px; }
.level-meter i { display: block; width: 14px; height: 8px; border-radius: 2px; border: 1px solid var(--border-emphasis); }
.level-meter i.is-below { background: var(--border-default); border-color: var(--border-default); }
.level-meter i.is-on { background: var(--text-primary); border-color: var(--text-primary); }
.price-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.price-items li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border-hairline); }
.price-items .data-number { font-family: var(--font-mono); }
.service-kind { display: flex; align-items: center; gap: 4px; margin: 8px 0 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip-list .brand-chip { min-height: 28px; padding: 2px 10px; }
.more-services { margin-top: 6px; font-size: 12px; }
.more-services summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--text-secondary); }
.mix-pic { width: 15px; height: 15px; font-size: 15px; vertical-align: -2px; margin-right: 4px; }
.size-rest { gap: 6px; }
.nodata-swatch { display: inline-block; width: 14px; height: 10px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--border-emphasis); border-radius: 2px; }
@media (max-width: 760px) and (orientation: portrait) { .price-items { grid-template-columns: minmax(0, 1fr); } }

/* The phone card (0.7.0, owner 2026-11-11 20:38: “ใน panel ก็จัดวางข้อมูลโล่งๆ ควรจะจัดได้ดีกว่านี้มาก”): after every
   base rule of the card, so these win. The head reads as one block — mark and name, the facts, the actions in one row
   — and the short sheet shows whole rows only. */
@media (max-width: 760px) and (orientation: portrait) {
  .detail-head { gap: 4px; }
  .detail-head h2 { font-size: 20px; line-height: 1.3; }
  .detail-head .subtle { font-size: 13px; }
  .identity { gap: 10px; margin-top: 0; }
  .identity-cue, .identity-pic { width: 40px; height: 40px; flex-basis: 40px; }
  .identity-cue { border-radius: 10px; }
  .identity-cue .cue-shape { width: 20px; height: 20px; }
  .identity-pic { font-size: 36px; }
  .branch-name { font-size: 13px; margin-top: 0; }
  .fact-chips { margin-top: 8px; }
  .rank-line { margin-top: 2px; }
  .detail-head .metrics.compact { margin-top: 8px; padding: 8px 0; }
  /* One row where the three fit (a stay); a longer label (“Street View ใกล้สถานี”) takes a row of its own. */
  .ask-bar { margin-top: 10px; }
  .ask-link { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding: 4px 10px 4px 8px; }
  .detail-actions { margin-top: 8px; }
  /* Short: an area keeps its two own actions (the list, the comparison); the outside links wait in the open sheet,
     as do a stay's chain logo (its brand is named in the facts) and the lines under the facts. */
  .panel[data-sheet="peek"][data-mode="area"] .ask-bar, .panel[data-sheet="peek"] .identity-logo, .panel[data-sheet="peek"] .detail-head > .fact-line { display: none; }
  /* The overview's sheet opens on the place, the search and the finding. The top bar names the product and the
     dataset, so the heading stays for screen readers alone, and the two links share the breadcrumb's row. Measured on
     Hotel at 393 × 659, where the sheet is 369 px: the finding's figure ended 374 px under the sheet's top (416 px
     with a province chosen) — cut by the fold, or under it; now 279 px (321 px). */
  .panel[data-mode="overview"] .panel-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
  .panel[data-mode="overview"] .panel-top > * { grid-column: 1 / -1; min-width: 0; }
  .panel[data-mode="overview"] .panel-top > .crumbs-nav { grid-column: 1; grid-row: 1; margin: 0; }
  .panel[data-mode="overview"] .panel-top > .sheet-links { grid-column: 2; grid-row: 1; margin: 0; gap: 14px; }
  .panel .dataset-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .panel[data-mode="overview"] .filters { margin-top: 4px; }
  /* A card's figures share one row (four equal columns pushed “40,620” into its neighbour's mark). Up to three:
     each as wide as it needs. Four: each takes what its number needs and the rest is shared, so a long label
     (“ของกรุงเทพมหานคร”) breaks onto two lines before a figure drops to a row of its own — that row cost 51 px of map. */
  .metrics.compact { display: flex; flex-wrap: wrap; gap: 8px 6px; }
  .metrics.compact > .metric { flex: 1 1 auto; }
  /* Four figures share the row by what each has to say (2026-11-12): a long label takes the room a short one leaves
     and no figure moves to a second row. Equal quarters broke Office's rent label into five lines once the labels
     took the caption size (0.75rem, LDS type scale; navigation.css). */
  .metrics.compact:has(> .metric:nth-child(4)) { display: grid; grid-template-columns: repeat(4, minmax(min-content, auto)); justify-content: space-between; }
}