/* MIYTHAI — hand-rolled stylesheet for the static build.
   Mirrors the design tokens used by the Next app, without a CSS framework. */
:root{
  --navy-900:#071a2a;--navy-800:#0a2338;--navy-700:#14314b;
  --explore:#f83934;--move:#fca81c;--stay:#3fa34d;--eat:#17a2a2;--wellness:#7b5ea7;
  --learn:#2f6fed;--train:#f83934;--work:#2f6fed;--play:#d4359b;--services:#0a2338;--community:#6ab05e;
  --emergency:#e02d20;--warn:#b77500;--ok:#1e7b45;
  --ink:#0e1729;--muted:#5a6478;--line:#e4e7ee;--line-2:#c3c9d6;--sunken:#edeff3;--bg-muted:#f7f8fa;--cream:#fdfaf4;
  --card:0 1px 2px rgba(10,35,56,.05),0 4px 16px rgba(10,35,56,.05);
  --lift:0 8px 28px rgba(10,35,56,.13);
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans Thai",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
@media(min-width:768px){body{padding-bottom:32px}}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--learn);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1024px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.wrap{padding:0 24px}}
.display{font-size:clamp(1.65rem,5.2vw,2.45rem);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:0}
.lede{font-size:clamp(.95rem,2.6vw,1.075rem);line-height:1.55;color:var(--muted);margin:8px 0 0;max-width:65ch}
h2.sec{font-size:1.125rem;font-weight:800;color:var(--navy-800);margin:0}
.sub{font-size:.875rem;color:var(--muted);margin:2px 0 0}

.grad{background-image:linear-gradient(100deg,#f83934 0%,#fca81c 28%,#f5c518 45%,#6ab05e 68%,#17a2a2 88%)}
.rule{height:4px;border-radius:999px;width:64px;margin-top:10px}
.gtext{background-image:linear-gradient(100deg,#f83934,#fca81c 35%,#6ab05e 70%,#17a2a2);
  -webkit-background-clip:text;background-clip:text;color:transparent}

header.site{position:sticky;top:0;z-index:40;background:rgba(253,250,244,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
header.site img{height:32px;width:auto;display:block}
@media(min-width:640px){header.site img{height:36px}}
nav.top{display:none;align-items:center;gap:4px}
@media(min-width:768px){nav.top{display:flex}}
nav.top a{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.875rem;font-weight:700;color:var(--muted)}
nav.top a:hover{background:var(--bg-muted);color:var(--ink)}
nav.top a[aria-current]{background:var(--navy-800);color:#fff}
nav.top a.sos{background:var(--emergency);color:#fff}
.subtitle{flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
@media(min-width:768px){.subtitle{display:none}}

nav.tabs{position:fixed;inset-inline:0;bottom:0;z-index:50;padding-bottom:max(10px,env(safe-area-inset-bottom))}
@media(min-width:768px){nav.tabs{display:none}}
nav.tabs .inner{max-width:448px;margin:0 auto;padding:0 12px}
nav.tabs .pill{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.93);border:1px solid var(--line);
  border-radius:22px;padding:6px;box-shadow:0 10px 30px rgba(10,35,56,.16);backdrop-filter:blur(16px)}
nav.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:54px;border-radius:16px;font-size:10.5px;font-weight:700;color:var(--muted);-webkit-tap-highlight-color:transparent}
nav.tabs a[aria-current]{background:rgba(10,35,56,.07)}
nav.tabs a.sos{flex:0 0 58px;background:var(--emergency);color:#fff;box-shadow:0 4px 14px rgba(224,45,32,.4)}

.press{transition:transform .14s ease,box-shadow .14s ease;-webkit-tap-highlight-color:transparent}
.press:active{transform:scale(.97)}
.tile{position:relative;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--card);transition:transform .18s,box-shadow .18s;display:block}
.tile::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 90% at 100% 0%,var(--tint,transparent) 0%,transparent 62%)}
@media(hover:hover){.tile:hover{transform:translateY(-3px);box-shadow:var(--lift)}}
.tile:active{transform:scale(.985)}
.tile>*{position:relative}

.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;white-space:nowrap}
.chip.line{background:#fff;border:1px solid var(--line);color:var(--muted)}
.chip.muted{background:var(--bg-muted);color:var(--ink)}
.chip.ok{background:#e8f5ee;color:#166c3b;border:1px solid #bfe3ce}
.chip.warn{background:#fdf3e0;color:#8a5900;border:1px solid #f0dcb4}
.chip.info{background:#e9f1fb;color:#1b5c96;border:1px solid #c6dbf2}
.chip.dark{background:rgba(255,255,255,.14);color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;
  border-radius:16px;font-weight:700;border:0;cursor:pointer}
.btn.primary{background:var(--navy-800);color:#fff;box-shadow:0 6px 18px rgba(10,35,56,.22)}
.btn.ghost{background:#fff;color:var(--navy-800);border:1px solid var(--line-2)}
.btn.danger{background:var(--emergency);color:#fff}
.btn:disabled{opacity:.6;cursor:default}

.grid{display:grid;gap:10px}
.g2{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.g-sm3{grid-template-columns:repeat(3,1fr)}.g-sm2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.g-lg4{grid-template-columns:repeat(4,1fr)}.g-lg3{grid-template-columns:repeat(3,1fr)}}
.stack>*+*{margin-top:10px}

.icon-badge{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:16px}
@media(min-width:640px){.icon-badge{width:48px;height:48px}}

.field{width:100%;min-height:52px;border-radius:16px;border:1px solid var(--line-2);background:#fff;padding:0 14px;font-size:16px}
textarea.field{min-height:96px;padding:14px;resize:none;line-height:1.55}
select.field{min-height:50px}
label.small{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:4px}
.checks{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.checks label{display:flex;align-items:center;gap:8px;font-size:14px}

.notice{border-radius:16px;padding:14px;font-size:14px;line-height:1.55;border:1px solid}
.notice.info{background:#f2f7fd;border-color:#c6dbf2;color:#1b4a75}
.notice.warn{background:#fef9f0;border-color:#f0dcb4;color:#7a4e00}
.notice.emerg{background:#fdf2f1;border-color:#f5c6c0;color:#8e1a11}
.notice b{display:block;margin-bottom:3px}

.meter{height:6px;border-radius:999px;background:var(--sunken);overflow:hidden}
.meter>span{display:block;height:100%;border-radius:999px}

.panel{border-radius:24px;background:var(--navy-800);color:#fff;overflow:hidden}
.panel .body{padding:20px}
@media(min-width:640px){.panel .body{padding:26px}}
.panel h2{margin:0;font-size:1.25rem;font-weight:800}
.panel p{color:rgba(255,255,255,.75);font-size:.9rem;line-height:1.6}
.panel .box{background:rgba(255,255,255,.1);border-radius:16px;padding:14px}

.empty{border-radius:24px;border:1px dashed var(--line-2);background:#fff;padding:26px;text-align:center}
.empty h3{margin:12px 0 0;font-size:1rem;font-weight:800}
.empty p{margin:8px auto 0;max-width:34rem;font-size:.875rem;color:var(--muted)}

.scroll-x{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin:0 -16px;padding:2px 16px}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x>*{scroll-snap-align:start;flex:0 0 172px}
@media(min-width:640px){.scroll-x{display:grid;grid-template-columns:repeat(2,1fr);margin:0;padding:0}
  .scroll-x>*{flex:none}}
@media(min-width:1024px){.scroll-x{grid-template-columns:repeat(3,1fr)}}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:rise .42s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .tile:hover,.press:active{transform:none}}

footer.site{margin-top:40px;padding:24px 0 8px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}