/* Cha-Map identity shared by every page. Map-specific composition lives in theme-map.css. */
:root{
  --paper:#fff9ed;--card:#fff;--ink:#123b63;--ink-soft:#61758a;
  --rule:#e6dfd2;--shade:#f8f0e1;--navy:#123b63;--navy-soft:#274b71;
  --chili:#ef4938;--chili-dk:#d83b2b;--chili-bg:#fff0eb;--chili-ink:#b92e22;
  --amber:#f5a623;--amber-dk:#e99514;--amber-bg:#fff0d4;--amber-ink:#805000;
  --gold:#ae7513;--gold-bg:#fff0d6;--gold-ink:#805000;
  --open:#269b69;--closed:#706a65;
  --body:"Anuphan","IBM Plex Sans Thai",system-ui,sans-serif;
  --display:"Bai Jamjuree","Anuphan",system-ui,sans-serif;
  --mono:"Anuphan",system-ui,sans-serif;
  --r-sm:10px;--r:16px;--r-lg:22px
}
body{background:var(--paper);color:var(--ink);font-family:var(--body)}
button,input,select,textarea{font-family:var(--body)}
.mono,.dist,.fcount,.lbl,.vstamp{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--amber-dk);outline-offset:3px}
input,select,textarea{background:#fff;border-color:#d9dfdf;border-radius:12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,166,35,.18)}

/* Interior pages keep a quieter header than the illustrated map. */
.head:not(.stacked){background:linear-gradient(180deg,#e9f5ff 0%,#fff9ed 100%);border-bottom:1px solid #e5ded0;box-shadow:0 2px 8px rgba(18,59,99,.07)}
.head:not(.stacked) .brand img{filter:drop-shadow(0 2px 3px rgba(18,59,99,.15))}
.head:not(.stacked) .brandline{display:none}
.head:not(.stacked) .nav button{font-family:var(--display);font-weight:700;color:var(--navy)}
.head:not(.stacked) .nav button.on{background:var(--navy);color:#fff}
.head:not(.stacked) .nav button:hover:not(.on){background:rgba(255,255,255,.72);color:var(--navy)}
.head:not(.stacked) .langsw,.head:not(.stacked) .acct{background:rgba(255,255,255,.8)}

.page h1{font-family:var(--display);font-weight:700;color:var(--navy);line-height:1.25}
.page>p.lead,.cathead .lead{font-size:16px;line-height:1.7;color:var(--ink-soft)}
.card,.provcard{border-radius:16px;border-color:var(--rule);box-shadow:0 2px 9px rgba(18,59,99,.045)}
.btn{background:var(--navy);color:#fff;border-radius:22px;box-shadow:0 2px 5px rgba(18,59,99,.1)}
.btn:hover{background:#204f7a;box-shadow:0 4px 10px rgba(18,59,99,.14)}
.btn.amber{background:var(--amber);color:var(--navy)}
.btn.amber:hover{background:var(--amber-dk)}
.btn.ghost{color:var(--navy);background:#fff;border-color:var(--rule)}
.btn.ghost:hover{background:var(--amber-bg);border-color:var(--amber)}
.chip.on,.chbtn.on{background:var(--amber-bg);border-color:var(--amber);color:var(--navy)}
.sect>h3,.secth{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--navy)}
.provcard:hover,.whocard:hover{border-color:#efc27e;box-shadow:0 5px 16px rgba(18,59,99,.1)}
.provcard:nth-child(3n+2){background:linear-gradient(145deg,#fff,#f5faff)}
.provcard:nth-child(3n+3){background:linear-gradient(145deg,#fff,#fff9ec)}
.whocard{background:linear-gradient(150deg,#fff,#f9fbff)}
/* Repeat the province-card treatment in collections across interior pages. */
.vcard,.ppb,.pkg,.catpick{border-color:var(--rule);box-shadow:0 2px 9px rgba(18,59,99,.045)}
.grid3>.card:nth-child(3n+2),.pp-grid>.ppb:nth-child(3n+2),.votegrid>.vcard:nth-child(3n+2),.pkgs>.pkg:nth-child(3n+2),.catgrid>.catpick:nth-child(3n+2):not(.on),.sgrid>.card:nth-child(2n){background:linear-gradient(145deg,#fff,#f5faff)}
.grid3>.card:nth-child(3n+3),.pp-grid>.ppb:nth-child(3n+3),.votegrid>.vcard:nth-child(3n+3),.pkgs>.pkg:nth-child(3n+3),.catgrid>.catpick:nth-child(3n+3):not(.on){background:linear-gradient(145deg,#fff,#fff9ec)}
.foot{background:linear-gradient(180deg,var(--paper),#eaf4fa);border-top-color:var(--rule)}
.foot-brand b{color:var(--navy)}

@media(max-width:760px){
  .head:not(.stacked) .head-in{min-height:76px}
  .head:not(.stacked) .brand img{width:132px;height:auto;max-width:none;max-height:none}
  .page{padding:22px 14px 180px}
  .page h1{font-size:26px}
  .page>p.lead,.cathead .lead{font-size:15px}
  .card,.provcard{border-radius:16px}
  .dt-grid{grid-template-columns:minmax(0,1fr)}
  .dt-grid>*,.dt-head,.dt-head>div{min-width:0;max-width:100%}
  .dt-acts .btn{white-space:normal}
}