/* Shared chrome of the three section pages (index / bkk / awards): reset, red header + section nav, view tabs, header
   search, map toast + locate control, list container. Byte-identical rules moved out of the pages on 2026-09-15 so they
   cannot drift; page-specific rules stay inline in each page. Bump ?v= on the <link> when this file changes. */
*{margin:0;padding:0;box-sizing:border-box}
header{background:var(--red);border-bottom:1px solid #731414;padding:0 24px;min-height:58px;display:flex;align-items:center;gap:22px;position:sticky;top:0;z-index:1000}
.logo{display:inline-flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer;text-decoration:none;transition:opacity .15s}
.logo:hover{opacity:.85}
.logo-mark{width:24px;height:24px;flex-shrink:0}
.logo span{display:inline-block;color:#fff;font-family:'Inter',sans-serif;font-weight:800;font-size:16px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.logo .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fff;border:0;box-shadow:none;opacity:.55;vertical-align:middle;position:relative;top:-1px;margin:0 2px}
.site-nav{display:inline-flex;gap:20px;flex-shrink:0}
.site-nav a{font-size:14px;font-weight:700;color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;transition:.15s;font-family:inherit}
.site-nav a:hover{color:#fff}
.site-nav a.on{color:#fff}
.site-nav a svg{width:16px;height:16px;margin-right:6px;flex:none;stroke-width:2.2}
.site-nav a.on svg{color:#fff}
.site-nav .nav-short{display:none}
.tab{padding:0 12px;font-size:13px;font-weight:700;cursor:pointer;border:none;background:none;color:rgba(255,255,255,.72);border-bottom:3px solid transparent;transition:.2s;display:inline-flex;align-items:center;gap:6px;font-family:inherit;margin-bottom:-1px}
.tab.active{color:#fff;border-bottom-color:#fff}
.tab:hover{color:#fff}
.tab svg{width:18px;height:18px}
.tab[data-tab="map"]{margin-left:8px;align-self:center;height:34px;padding:0 12px;border-radius:9px;background:rgba(255,255,255,.16);color:#fff;border-bottom:0;margin-bottom:0}
.tab[data-tab="map"] svg{stroke-width:2.3}
.tab[data-tab="map"]:hover{background:rgba(255,255,255,.26);color:#fff}
.tab[data-tab="map"].active{background:#fff;color:var(--red)}
.tab-content{display:none;flex:1;overflow:hidden}
.tab-content.active{display:flex;flex-direction:column}
.list-container{flex:1;overflow-y:auto;padding:14px 24px 48px}
.empty{padding:60px 20px;text-align:center;color:var(--text3);font-size:13px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--c);flex-shrink:0}
.locate-ctl a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;color:#333}
.locate-ctl a svg{width:17px;height:17px}
.locate-ctl a.busy svg{animation:spin 1s linear infinite}
.map-msg{position:absolute;left:50%;bottom:70px;transform:translate(-50%,8px);z-index:900;background:rgba(26,26,26,.92);color:#fff;font-size:12.5px;padding:8px 14px;border-radius:8px;opacity:0;pointer-events:none;transition:.2s;max-width:88%;text-align:center}
.map-msg.show{opacity:1;transform:translate(-50%,0)}
.leaflet-popup-content-wrapper{border-radius:10px}
.pop .pn{font-weight:700;font-size:13.5px;color:var(--text)}
.pop .ps{font-size:11.5px;color:var(--text3)}
.srch-btn{align-self:center;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;font-family:inherit;margin-right:4px;transition:.15s}
.srch-btn svg{width:18px;height:18px}
.srch-btn:hover{background:rgba(255,255,255,.26);color:#fff}
.srch-btn.has-q{background:#fff;color:var(--red)}
.hdr-search{display:none;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:9px;background:#fff;border:1px solid var(--red);margin-left:auto;width:360px;max-width:38vw;flex:none}
.hdr-search svg{width:17px;height:17px;color:var(--text3);flex:none}
.hdr-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--text);padding:0}
.hdr-search input::placeholder{color:var(--text3)}
.hdr-search input::-webkit-search-cancel-button{display:none}
.hs-cancel{border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--red);cursor:pointer;padding:0;white-space:nowrap}
body.search-open .hdr-search{display:flex}
body.search-open .tabs{margin-left:0}
body.search-open .srch-btn{display:none}

/* ── Native app (the Capacitor shell in app/) ────────────────────────────────────────────────────────────────
   site.js sets html.native when the Capacitor bridge is present (or ?native=1 for a browser preview). The
   section nav moves to an iOS-style bottom tab bar, the header runs under the status bar, detail pop-ups become
   bottom sheets, and text uses the system font (San Francisco / Roboto) instead of the Inter webfont. Safe areas: iOS
   reports env(safe-area-inset-*); on Android Capacitor's SystemBars plugin injects --safe-area-inset-* (config insetsHandling css). */
html.native{--sat:var(--safe-area-inset-top,env(safe-area-inset-top));--sab:var(--safe-area-inset-bottom,env(safe-area-inset-bottom));--tb:calc(56px + var(--sab));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}
html.native body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Noto Sans Thai',sans-serif;padding-bottom:var(--tb);overscroll-behavior-x:none}
html.native header{padding-top:var(--sat)}
html.native .site-nav{display:none}
/* One header row on a 375px phone even with the Awards page's four buttons (the web wraps the section nav under it) */
html.native header{gap:10px;padding-left:14px;padding-right:14px}
html.native .logo span{font-size:15px;letter-spacing:.6px}
html.native .tabs{padding-left:8px}
html.native .tab{padding-left:6px;padding-right:6px}
html.native .tab[data-tab="map"]{margin-left:4px}
html.native input,html.native select,html.native textarea{font-size:16px}   /* iOS zooms into any field under 16px */
html.native .map-msg{bottom:calc(var(--tb) + 14px)}
html.native .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1400;display:flex;height:var(--tb);padding:4px 0 var(--sab);background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid rgba(0,0,0,.12)}
html.native .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:#8e8e93;font-size:10.5px;font-weight:600;-webkit-user-select:none;user-select:none;transition:opacity .1s}
html.native .tabbar a svg{width:24px;height:24px;stroke-width:1.9;margin:0}
html.native .tabbar a.on{color:var(--red)}
html.native .tabbar a.on svg{stroke-width:2.3}
html.native .tabbar a:active{opacity:.55}
html.native .tab-content.active{padding-bottom:0}
@media(max-width:600px){
  html.native #map{height:calc(100dvh - 110px - var(--tb))}
  html.native body.filter-open .filter-pack{padding-bottom:calc(24px + var(--sab))}
  /* Detail pop-ups: a sheet that slides up from the bottom; a grabber on top, pull down to dismiss (site.js) */
  html.native .modal-overlay{align-items:flex-end;padding:0;overflow:hidden}
  html.native .modal{max-height:calc(100dvh - var(--sat) - 28px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:18px 18px 0 0;padding-bottom:calc(28px + var(--sab));animation:sheetUp .34s cubic-bezier(.2,.8,.2,1);will-change:transform}
  html.native .modal::before{content:'';position:absolute;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:rgba(120,120,128,.45);box-shadow:0 0 0 2px rgba(255,255,255,.55);z-index:3}
  html.native .modal.dragging{animation:none;transition:none}
  html.native .modal.settle{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
}