/* =====================================================================
   Cha Map — shared theme (desktop + mobile pages load this same file)
   ===================================================================== */
/* The palette is read off the logo rather than chosen: the amber of the
   wordmark, the red of the map pin, the navy of the outline and the cream
   the whole mark sits on. Nothing here is a colour the logo does not
   already contain, which is why the page and the mark look related. */
:root{
  --paper:#FDF7EC; --card:#FFFFFF; --ink:#17365D; --ink-soft:#6B7B90; --rule:#EADFC9; --shade:#F6EDDD;
  --chili:#E0402B; --chili-bg:#FDEBE7; --chili-dk:#BC2E1C;
  --amber:#F2A11C; --amber-dk:#D98708; --amber-bg:#FEF3DE;
  --navy:#17365D; --navy-soft:#2B4E77;
  --gold:#B0801A; --gold-bg:#FBF1DA;
  --open:#1E7A4C; --closed:#98908A;
  --display:"Bai Jamjuree","IBM Plex Sans Thai",system-ui,sans-serif;
  --body:"IBM Plex Sans Thai",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  /* the mark is round and bouncy, so the furniture around it is too */
  --r-sm:9px; --r:13px; --r-lg:20px;
  --head-h:120px;
}
@media(max-width:760px){:root{--head-h:112px}}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit;background:none;border:0;padding:0}
input,select,textarea{font-family:inherit;font-size:14.5px;padding:8px 10px;border:1px solid var(--rule);border-radius:4px;background:#FCFBF7;color:var(--ink);width:100%}
textarea{min-height:76px;resize:vertical}
:focus-visible{outline:2px solid var(--chili);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em;margin:0}
a{color:var(--chili)}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-soft)}
.small{font-size:13px}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.hide{display:none!important}

/* ============ header ============
   The masthead carries the whole painted logo — both cats, the map
   medallion and the wordmark — not a cropped mark. That costs height, so
   the header buys it back by holding everything else on the same line:
   nav in the middle, language and account on the right. */
.head{position:sticky;top:0;z-index:600;
  background:linear-gradient(180deg,#FFFCF5 0%,var(--paper) 100%);
  border-bottom:1px solid var(--rule);box-shadow:0 1px 0 rgba(23,54,93,.04)}
.head-in{display:flex;align-items:center;gap:16px;min-height:110px;padding:4px 18px 4px 14px;max-width:1480px;margin:0 auto}
.brand{display:flex;align-items:center;flex:0 0 auto;padding:0;transition:transform .18s ease}
.brand img{height:100px;width:auto;display:block;
  filter:drop-shadow(0 3px 7px rgba(23,54,93,.16))}
.brand:hover{transform:translateY(-1px) scale(1.02)}
.head-col{flex:1 1 auto;min-width:0}
.head-top{display:flex;align-items:center;gap:14px;min-height:46px}

/* ---- the map view: the logo becomes a column ----
   Three control rows stack to its right — nav, the category rail, the
   filter bar — and the logo spans all of them. It ends up bigger than it
   was when it had a line to itself, and the page still starts ~70px
   higher up, because the height it needs was already being spent. */
.head.stacked .head-in{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:stretch;gap:0 14px;min-height:0;padding:0 16px 0 0}
.head.stacked .brand{grid-row:1/-1;align-self:stretch;padding:6px 0;margin-left:-8px}
.head.stacked .brand img{height:auto;width:auto;max-height:min(100%,164px);max-width:222px}
.head.stacked .head-col{display:flex;flex-direction:column;min-width:0}
.head.stacked .head-top{flex:0 0 auto}
/* inside the header the rows lose their own frames — the header's own
   bottom border closes the block, and stacked rules would read as clutter */
.head.stacked .catrail{background:none;border-bottom:0;border-top:1px solid var(--rule);flex:0 0 auto}
.head.stacked .fbar{background:none;border-bottom:0;border-top:1px solid var(--rule);position:static;flex:0 0 auto}
.head.stacked .catrail-in{padding:5px 26px 5px 0;gap:3px}
.head.stacked .fbar-row{padding:8px 0}
.head.stacked .fdrawer{padding:0 16px 10px 0}
/* the logo takes ~250px off the rail's width, so the bubbles tighten to
   keep all sixteen categories reachable without a scroll on a normal
   laptop. The picture stays the biggest thing in them. */
.head.stacked .catbub{width:64px;padding:3px 2px 4px}
.head.stacked .catbub img{width:42px;height:42px}
.head.stacked .catbub b{font-size:9.5px;max-width:62px}
.head.stacked .catbub.all{width:54px}
/* the strapline is the first thing to go when the row runs short — the
   logo right beside it already says what the site is called */
@media(max-width:1240px){.head.stacked .brandline{display:none}}
@media(max-width:1020px){.head.stacked .brand img{max-width:180px}}
.head.stacked .catbub.all .glyph{width:42px;height:42px;font-size:21px}
/* and when it does scroll, say so rather than ending on a hard edge */
.head.stacked .catrail{position:relative}
.head.stacked .catrail:after{content:"";position:absolute;right:0;top:1px;bottom:0;width:26px;
  pointer-events:none;background:linear-gradient(90deg,rgba(253,247,236,0),var(--paper))}
/* the strapline explains the logo without repeating the name in type */
.brandline{flex:0 1 auto;min-width:0;line-height:1.35;padding-left:2px;border-left:2px solid var(--amber);padding-left:11px}
.brandline b{display:block;font-family:var(--display);font-size:14.5px;color:var(--navy)}
.brandline span{display:block;font-size:11.5px;color:var(--ink-soft)}
.nav{display:flex;gap:3px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{padding:8px 13px;border-radius:var(--r-lg);color:var(--navy-soft);font-size:14px;white-space:nowrap;font-weight:500}
.nav button:hover{background:var(--amber-bg);color:var(--navy)}
.nav button.on{color:#fff;background:var(--navy);font-weight:600}
.head-r{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* ---- the account button ---- */
.acct{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);background:var(--card);
  border-radius:var(--r-lg);padding:4px 12px 4px 5px;height:34px;font-size:13px;white-space:nowrap;font-weight:600;color:var(--navy)}
.acct:hover{border-color:var(--amber);background:var(--amber-bg)}
.acct .av{width:25px;height:25px;border-radius:50%;flex:0 0 auto;object-fit:cover;object-position:50% 8%;
  background:var(--shade);border:1.5px solid var(--amber);display:grid;place-items:center;font-size:13px}
.acct.anon{color:var(--ink-soft);font-weight:500}
.acct.anon .av{border-color:var(--rule)}

/* ============ buttons / chips ============ */
.btn{border-radius:var(--r-lg);padding:9px 17px;font-weight:600;background:var(--chili);color:#fff;font-size:14px;white-space:nowrap;
  box-shadow:0 2px 0 rgba(23,54,93,.10);transition:transform .12s ease,background .12s ease}
.btn:hover{background:var(--chili-dk);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.amber{background:var(--amber);color:var(--navy)}
.btn.amber:hover{background:var(--amber-dk)}
.btn.ghost{background:var(--card);color:var(--navy);border:1px solid var(--rule);font-weight:500;box-shadow:none}
.btn.ghost:hover{border-color:var(--amber);background:var(--amber-bg);color:var(--navy)}
.btn.sm{padding:6px 13px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:var(--card);border-radius:var(--r-lg);padding:5px 13px;font-size:13.5px;color:var(--navy-soft);white-space:nowrap}
.chip:hover{border-color:var(--amber);background:var(--amber-bg)}
.chip.on{border-color:var(--chili);color:var(--chili);background:var(--chili-bg);font-weight:600}
.chip.on:hover{border-color:var(--chili);background:var(--chili-bg)}
.chip.dim{opacity:.5;cursor:default}
.tag{display:inline-block;font-size:11.5px;border:1px solid var(--rule);padding:2px 8px;border-radius:20px;color:var(--ink-soft);background:var(--card);white-space:nowrap}
.tag.gold{color:var(--gold);border-color:#DDC98E;background:var(--gold-bg)}
.tag.open{color:var(--open);border-color:#A9CDBB}
.tag.closed{color:var(--closed)}

/* ============ the category rail ============
   Sixteen painted dishes, one per category, sitting above the map. It is
   the fastest filter on the page because nobody has to read it: you point
   at the noodles. The same painting is used on the card and on the shop
   page, so the picture you tapped is the picture you arrive at. */
.catrail{background:linear-gradient(180deg,#FFFCF4,var(--paper));border-bottom:1px solid var(--rule);position:relative}
.catrail-in{display:flex;gap:5px;align-items:stretch;padding:7px 14px;overflow-x:auto;scrollbar-width:thin;scroll-behavior:smooth}
.catrail-in::-webkit-scrollbar{height:5px}
.catrail-in::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.catbub{flex:0 0 auto;width:74px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:4px 2px 5px;border-radius:var(--r);border:1.5px solid transparent;background:none;transition:background .14s,border-color .14s,transform .14s}
.catbub img{width:46px;height:46px;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 4px rgba(23,54,93,.18));transition:transform .14s ease}
.catbub b{font-size:10px;font-weight:600;line-height:1.2;color:var(--navy-soft);text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-width:72px;min-height:2.4em;word-break:break-word}
.catbub:hover{background:var(--amber-bg);border-color:var(--amber)}
.catbub:hover img{transform:translateY(-2px) scale(1.07)}
.catbub.on{background:var(--chili-bg);border-color:var(--chili)}
.catbub.on b{color:var(--chili)}
.catbub.all{width:62px}
.catbub.all .glyph{width:46px;height:46px;display:grid;place-items:center;font-size:24px}

/* ============ filter bar — A2: two rows only ============ */
.fbar{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:var(--head-h);z-index:500}
.fbar-row{display:flex;gap:8px;align-items:center;padding:9px 16px;overflow-x:auto;scrollbar-width:none;cursor:grab}
.fbar-row.dragging{cursor:grabbing;user-select:none}
.fbar-row::-webkit-scrollbar{display:none}
.fbar-row select{width:auto;flex:0 0 auto}
/* ---- the filter block: laid out, not hidden ----
   Every group is on screen at once, side by side, so narrowing by two
   things at a time needs no clicks to set up. The one switch on the bar
   folds the whole block away for people who want the map back. */
.fpill{cursor:pointer;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-weight:600}
.fpill.open{border-color:var(--navy);background:var(--navy);color:#fff}
.fcount{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--chili);color:#fff;font-size:10.5px;font-family:var(--mono);font-weight:600}
.fpill.open .fcount{background:var(--amber);color:var(--navy)}
.fdrawer{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px;align-items:flex-start}
.fsect{flex:0 1 auto;min-width:0;max-width:250px;max-height:min(22vh,132px);overflow:auto;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:6px 9px 8px}
/* the short groups keep to their content; the awards list is the long
   one, so it takes whatever is left and scrolls past its cap */
.fsect.w-sm{max-width:200px}
.fsect.w-lg{flex:1 1 260px;max-width:none}
.fsect .chip{padding:4px 10px;font-size:12.5px}
.fsect .lbl{font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}
.fsect-h{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.fsect .radwrap{margin-top:7px;border:0;padding:0;height:auto}
.searchwrap{position:relative;min-width:210px;flex:0 0 auto}
.searchwrap input{padding-left:30px;border-radius:20px;height:34px;padding-top:4px;padding-bottom:4px}
.searchwrap span{position:absolute;left:11px;top:7px;color:var(--ink-soft);font-size:13px}
.radwrap{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--card);border-radius:20px;padding:0 13px;height:34px;flex:0 0 auto}
.radwrap input[type=range]{width:104px;accent-color:var(--chili);padding:0;border:0;background:none;height:20px}
.radwrap b{font-family:var(--mono);font-size:12px;font-weight:500;min-width:44px;text-align:right}
.fcount{font-family:var(--mono);font-size:11px;color:var(--chili);background:var(--chili-bg);border-radius:10px;padding:1px 6px;margin-left:2px}

/* ============ layout ============ */
.stage{display:grid;grid-template-columns:clamp(360px,34vw,470px) 1fr;height:calc(100vh - var(--head-h) - 96px);min-height:420px}
.listcol{overflow-y:auto;border-right:1px solid var(--rule);background:var(--paper);padding-bottom:120px}
.mapcol{position:relative;background:#E8E4DA}
#map{position:absolute;inset:0}
.leaflet-container{background:#E8E4DA;font-family:var(--body)}
.listhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px 9px;position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--rule);z-index:5;flex-wrap:wrap}
.listhead h2{font-size:15px}

/* ============ restaurant card ============ */
.rcard{display:grid;grid-template-columns:92px 1fr;gap:13px;padding:14px 16px;border-bottom:1px solid var(--rule);cursor:pointer;text-align:left;width:100%;align-items:start;background:none}
.rcard:hover{background:var(--card)}
.rcard:hover .thumb img{transform:scale(1.06)}
.rcard.act{background:var(--card);box-shadow:inset 3px 0 0 var(--chili)}
.thumb{height:86px;border-radius:var(--r-sm);position:relative;overflow:hidden;border:1px solid var(--rule)}
.thumb em{position:absolute;left:0;bottom:0;right:0;font-family:var(--mono);font-size:8.5px;font-style:normal;background:rgba(255,255,255,.86);padding:1px 4px;color:#4A423A;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the painted dish, not a photograph and not an emoji */
.thumb img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;
  display:block;filter:drop-shadow(0 2px 4px rgba(23,54,93,.16));transition:transform .18s ease}
.thumb .dish{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;filter:saturate(.9)}
/* a grid/flex child defaults to min-width:auto, so one nowrap line in
   here would push the whole card wider than the phone instead of
   ellipsing. Every link in the chain has to be allowed to shrink. */
.rcard>div{min-width:0}
.rc-top{display:flex;gap:8px;align-items:flex-start;min-width:0}
.rcard h3,.rc-dish b,.rc-dish i,.rc-meta>span{min-width:0}
.rcard h3{font-size:16px;line-height:1.3;flex:1}
.rc-meta{font-size:12.5px;color:var(--ink-soft);margin:3px 0 6px;display:flex;flex-wrap:wrap;gap:4px 7px;align-items:center}
.dot{opacity:.4}
.srcline{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);margin-top:6px}
.srcpill{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--rule);border-radius:20px;padding:1px 8px 1px 2px;background:var(--card);font-size:11.5px;max-width:100%}
.srcpill i{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:700;color:#fff;font-family:var(--display);flex:0 0 auto}
.savebtn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--ink-soft);flex:0 0 auto}
.savebtn:hover{background:var(--shade)}
.savebtn.on{color:var(--chili)}
.dist{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);white-space:nowrap}

/* ============ map bits ============ */
.pinmark{background:none;border:0}
.pinbub.gold{border-color:var(--gold);color:var(--gold)}
.pinbub.gold:after{border-color:var(--gold)}
.pinbub.act{background:var(--chili);border-color:var(--chili);color:#fff;z-index:800!important}
.pinbub.act:after{background:var(--chili);border-color:var(--chili)}
.pinbub.saved{box-shadow:0 0 0 3px rgba(192,57,43,.25),0 1px 4px rgba(0,0,0,.25)}
.pindot.act{transform:translate(-50%,-100%) scale(1.3)}
.homemark{transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.4);display:grid;place-items:center;color:#fff;font-size:12px}
/* C3: one row, bottom-left, out of the pins' way */
/* the tool row is wider than a narrow map column, and absolutely
   positioned children still push the page's scroll width, so it is capped
   and allowed to wrap rather than hang off the right edge */
.maptools{position:absolute;left:10px;bottom:14px;right:10px;z-index:420;display:flex;flex-direction:row;
  gap:6px;align-items:center;flex-wrap:wrap}
.maptools button{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:6px 11px;font-size:13px;box-shadow:0 1px 3px rgba(0,0,0,.12);white-space:nowrap}
.maptools button.on{background:var(--chili);color:#fff;border-color:var(--chili)}
/* the random-pick button gets to be louder than its neighbours — it's
   the one thing here that's fun rather than utility */
.maptools button.dicebtn,.btn.dicebtn{background:linear-gradient(135deg,var(--amber),var(--chili));
  border-color:transparent;color:#fff;font-weight:700;padding:8px 15px;font-size:14px;
  box-shadow:0 3px 10px rgba(224,64,43,.35);animation:dicepulse 2.4s ease-in-out infinite}
.maptools button.dicebtn:hover,.btn.dicebtn:hover{animation-play-state:paused;filter:brightness(1.06)}
@keyframes dicepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.mapnote{position:absolute;right:10px;bottom:14px;z-index:420;background:rgba(255,255,255,.92);border:1px solid var(--rule);border-radius:6px;padding:5px 10px;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
/* B3: appears after the map is panned; searches the visible box */
.searchhere{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:430;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:7px 16px;font-size:13.5px;font-weight:600;box-shadow:0 2px 10px rgba(23,54,93,.18);max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchhere:hover{border-color:var(--chili);color:var(--chili)}
.fallmap{position:absolute;inset:0;background:
  radial-gradient(circle at 30% 20%,rgba(190,205,185,.5),transparent 55%),
  repeating-linear-gradient(0deg,transparent 0 47px,rgba(0,0,0,.05) 47px 48px),
  repeating-linear-gradient(90deg,transparent 0 47px,rgba(0,0,0,.05) 47px 48px),#E8E4DA;overflow:hidden}
.fallmap .fpin{position:absolute;transform:translate(-50%,-100%)}
.fallwarn{position:absolute;left:10px;top:10px;background:#FDF3D6;border:1px solid #E0C983;border-radius:6px;padding:6px 11px;font-size:12px;max-width:270px}

/* ============ generic page ============ */
/* the cats stand in the bottom-right corner on every screen, so every
   scrolling page ends with enough room to scroll its last paragraph out
   from behind them */
.page{max-width:1080px;margin:0 auto;padding:26px 20px 210px}
.page h1{font-size:29px;margin-bottom:8px}
.page>p.lead{color:var(--ink-soft);max-width:66ch;margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.sect{border-top:1px solid var(--rule);padding:18px 0}
.sect>h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin-bottom:11px}
.back{font-family:var(--mono);font-size:12px;color:var(--chili);letter-spacing:.04em;margin-bottom:12px;display:inline-block}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th,table.tbl td{border-bottom:1px solid var(--rule);padding:8px 6px;text-align:left;vertical-align:top}
table.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}

/* ============ detail page ============ */
.dt-hero{display:grid;grid-template-columns:1fr 1fr;gap:6px;height:230px;border-radius:8px;overflow:hidden;margin-bottom:18px}
.dt-hero>div{position:relative}
.dt-hero .sub{display:grid;grid-template-rows:1fr 1fr;gap:6px}
/* E1: the source video, embedded officially, replaces the placeholder */
/* A 16:9 clip across a 1,040px column is 585px tall, which pushed the
   shop's own name off the first screen. Cap it by height so the page still
   opens on the restaurant rather than on a black rectangle. */
.vidwrap{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;margin:0 auto 8px;background:#000;position:relative;
  max-width:min(100%,calc(52vh * 16 / 9))}
.vidwrap iframe{width:100%;height:100%;border:0;display:block}
.vidcredit{font-size:12px;color:var(--ink-soft);margin:0 0 18px}
.dt-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
.dt-title{font-size:30px;line-height:1.2}
.factlist{display:grid;grid-template-columns:86px 1fr;gap:7px 12px;font-size:14px;margin:0}
.factlist dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.factlist dd{margin:0}
.side{position:sticky;top:calc(var(--head-h) + 16px)}
/* E2: navigate / call / watch — always one row, always first */
.actrow{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.actrow .btn{text-align:center;text-decoration:none;padding:9px 6px;font-size:13.5px}
.actrow .btn.off{opacity:.45;pointer-events:none}
/* F3: anything kept in localStorage says so */
.localtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--ink-soft);border:1px dashed var(--rule);border-radius:9px;padding:1px 7px;white-space:nowrap}

/* menu block — the good part */
.menu{border:1px solid var(--rule);border-radius:8px;background:var(--card);overflow:hidden}
.mrow.sig{background:linear-gradient(90deg,var(--gold-bg),transparent 70%)}
.mrow.sig .nm:after{content:"pick";font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--gold);border:1px solid #DDC98E;border-radius:3px;padding:1px 4px;margin-left:6px;vertical-align:2px}

/* source / credit cards */
.srccard{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);align-items:start}
.srccard:last-child{border-bottom:0}
.srcav{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:15px}
.srccard h4{font-size:14.5px}
.srccard p{margin:2px 0 0;font-size:13.5px;color:var(--ink-soft)}
.srccard .st{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:4px;display:flex;gap:9px;flex-wrap:wrap}
.awardbox{display:flex;gap:12px;align-items:center;border:1px solid #DDC98E;background:var(--gold-bg);border-radius:8px;padding:12px 14px;margin-bottom:14px}
.awardbox .m{font-size:26px;line-height:1}
.awardbox b{font-family:var(--display);font-size:15px}
.awardbox p{margin:0;font-size:13px;color:#6E5514}
.check{display:flex;align-items:center;gap:8px;color:var(--ink-soft)}
.check input{width:auto;padding:0;accent-color:var(--chili)}
code{font-family:var(--mono);font-size:12.5px;background:var(--shade);padding:1px 5px;border-radius:3px}

/* ============ english layer ============ */
:root{--cath:168px}  /* resting height of the cat portraits. They sit at this size before the cursor goes anywhere near them — the whole point is that you can read who is who without hovering. 68px originally, then 100px, 132px, now 168px. Same corner, more presence. */
@media(max-width:760px){:root{--cath:132px}}
.rc-top h3 .thname{display:block;font-weight:500;font-size:13.5px;color:var(--navy-soft);margin-top:1px;letter-spacing:0}
.dt-th{margin:2px 0 0;font-size:15px;color:var(--ink-soft)}
.factlist dd .thsub{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.showcard{margin-top:14px;padding:11px 12px;border:1px dashed var(--rule);border-radius:9px;background:var(--paper);text-align:center}
.showcard .lbl{display:block;margin-bottom:5px}
.showcard b{display:block;font-size:19px;line-height:1.35}
.showcard .mono{display:block;margin-top:3px;color:var(--ink-soft)}

/* ============ back navigation ============ */
.backbar{position:sticky;top:calc(var(--head-h) - 1px);z-index:30;display:flex;align-items:center;gap:12px;
  margin:0 0 14px;padding:9px 0;background:var(--paper);border-bottom:1px solid var(--rule)}
.backbar .back{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);
  border:1px solid var(--rule);background:var(--card);border-radius:9px;padding:8px 14px;line-height:1}
.backbar .back:hover{border-color:var(--chili);color:var(--chili)}
.backhint{font-size:11.5px;color:var(--ink-soft)}
.backhint kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--rule);border-bottom-width:2px;
  border-radius:4px;padding:1px 5px;background:var(--card)}

/* ============ mascot : Charlie & Charlotte ============ */
/* G1: the dock sits bottom-LEFT over the list column, never over the map.
   G2: portraits are 68px; the talking cat grows to full height. */
.masc{position:fixed;right:16px;bottom:16px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:none;width:min(392px,calc(100vw - 24px))}
.masc>*{pointer-events:auto}
#bubzone{display:flex;flex-direction:column;align-items:flex-end;gap:7px;width:100%;pointer-events:none}
#bubzone>*{pointer-events:auto}
#bubzone:empty{display:none}
.bubwrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:100%}
.bubble{max-width:100%;background:var(--card);border:1.5px solid var(--ink);border-left-width:5px;border-radius:13px;padding:8px 12px;font-size:14px;line-height:1.5;box-shadow:0 4px 16px rgba(0,0,0,.14);animation:pop .22s ease-out;transform-origin:bottom left}
.bubble.c{border-left-color:#E08A3C}
.bubble.l{border-left-color:#D98A96}
.bubble.d{border-left-color:#7A5FA8;background:var(--shade)}
.bubble .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--ink-soft);display:block;margin-bottom:2px}
.bubble.c .who{color:#B96A18}
.bubble.l .who{color:#B25E6C}
.bubble.d .who{color:#6A4E9A}
.bubx{position:absolute;right:-5px;top:-11px;width:21px;height:21px;border-radius:50%;background:var(--card);border:1px solid var(--rule);font-size:12px;color:var(--ink-soft);line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.15);z-index:3}
@keyframes pop{from{transform:scale(.82) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.qbox{width:100%;background:var(--card);border:1.5px solid var(--ink);border-radius:13px;padding:10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.16);animation:pop .22s ease-out}
.qbox.ok{border-color:var(--open)}
.qbox.no{border-color:var(--chili)}
.qhead{font-size:13px;font-weight:600;line-height:1.45;margin-bottom:7px}
.qopt{display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:7px 10px;font-size:13.5px;margin-bottom:5px;line-height:1.4}
.qopt:hover{border-color:var(--chili);background:var(--chili-bg)}
.qfact{margin:0;font-size:12.5px;line-height:1.65;color:var(--ink-soft)}
.cats{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-top:0}
.epchip{display:flex;align-items:center;gap:5px;background:var(--ink);color:#F4F1E8;font-size:10.5px;font-family:var(--mono);border-radius:20px;padding:3px 10px;box-shadow:0 2px 8px rgba(0,0,0,.22);max-width:210px}
.epchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.epchip:hover{background:var(--chili)}
.catrow{display:flex;align-items:flex-end;position:relative;gap:2px}
.catbtn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;
  filter:drop-shadow(0 5px 11px rgba(0,0,0,.18));animation:bob 4.6s ease-in-out infinite}
.catbtn+.catbtn{animation-delay:-2.3s}
.fig{position:relative;display:block;height:var(--cath);transition:height .18s ease}
.catbtn .fig img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.16))}
.fig img{height:100%;width:auto;display:block}
.catbtn:hover .fig,.catbtn.talk .fig{height:272px}
.catbtn .plate{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--navy);white-space:nowrap;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:3px 10px;line-height:1.35;
  box-shadow:0 1px 4px rgba(23,54,93,.14);text-align:center}
.catbtn .plate i{font-style:normal;display:block;font-size:9px;color:var(--ink-soft)}
.catbtn:hover{animation-play-state:paused}
.catbtn:hover .plate{border-color:var(--chili);color:var(--chili)}
.catbtn.talk{animation:none;z-index:2}
.catbtn.talk .plate{border-color:#C8A24A;background:var(--gold-bg);font-weight:700}
.catbtn.talk .fig:after{content:"";position:absolute;left:-4%;right:-4%;bottom:-3%;height:9%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(233,196,106,.55),rgba(233,196,106,0) 70%)}
.bubble{display:flex;gap:9px;align-items:flex-start}
.bubble .av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  border:2px solid #C8A24A;background:#F2ECDF;display:block}
.bubble .av.paint{object-position:50% 6%}
.bubble .gv{display:grid;place-items:center;color:var(--gold);font-size:15px;border-style:dashed}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes talkbob{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-5px) rotate(2.5deg)}}
.catrow .badge{position:absolute;top:-4px;right:-8px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:9px;border-radius:9px;padding:1px 5px}
.mascpanel{position:fixed;right:16px;bottom:222px;z-index:901;width:min(340px,calc(100vw - 32px));max-height:min(72vh,640px);overflow-y:auto;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 8px 30px rgba(23,54,93,.22);padding:14px}
.pnhead{display:flex;justify-content:space-between;align-items:center}
.epcard{background:var(--shade);border-radius:10px;padding:10px 11px}
.eptop{display:flex;gap:9px;align-items:flex-start;margin-bottom:7px}
.epicon{font-size:20px;line-height:1.1}
.eptop b{display:block;font-size:13.5px;line-height:1.35}
.eptop .small{display:block;line-height:1.45}
.roleline{font-size:12.5px;line-height:1.65;color:var(--ink-soft)}
.roleline i{font-style:normal;font-weight:600;color:var(--ink)}
.hbox{margin-top:10px;border:1px solid var(--rule);border-radius:10px;padding:10px}
.hnow{display:flex;gap:9px;align-items:center;border-left:4px solid var(--hc);padding-left:8px;margin-bottom:8px}
.hnow>span{font-size:20px}
.hnow b{display:block;font-size:13.5px}
.hnow .small{display:block;line-height:1.45}
.ptsline{font-size:12.5px;color:var(--ink-soft)}
.ptsline b{color:var(--chili);font-size:15px}
.cosrow{margin-top:8px}
.cosname{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:4px}
.cosname .fur{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  border-radius:9px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.cosname .fur.g{background:#F6E2CE;color:#8A4A0E}
.cosname .fur.w{background:#EDEAE2;color:#5D5348}
.costumes{display:flex;gap:6px;flex-wrap:wrap}
.costumes button{display:flex;align-items:center;gap:4px;border:1px solid var(--rule);border-radius:8px;padding:4px 7px;background:var(--paper);font-size:11.5px;line-height:1.25}
.costumes button i{font-style:normal;font-size:13px;line-height:1}
.costumes button b{font-weight:500}
.costumes button.on b{font-weight:700}
.costumes button.on{border-color:var(--chili);background:var(--chili-bg)}
.pnbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pnbtns .btn{flex:1 1 auto}

/* ============ modal ============ */
.scrim{position:fixed;inset:0;background:rgba(24,20,16,.5);z-index:1000;display:grid;place-items:center;padding:18px}
.modal{background:var(--card);border-radius:12px;width:min(430px,100%);padding:22px;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h2{font-size:21px;margin-bottom:5px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 18px;border-radius:22px;font-size:13.5px;z-index:1100;box-shadow:0 4px 18px rgba(0,0,0,.3)}

/* ============ language switch ============ */
.langsw{display:flex;align-items:stretch;border:1px solid var(--rule);border-radius:20px;overflow:hidden;background:var(--card);height:30px;flex:0 0 auto}
.langsw button{padding:0 11px;font-size:12.5px;color:var(--ink-soft);line-height:1;display:grid;place-items:center}
.langsw button[lang="en"]{font-family:var(--mono);letter-spacing:.04em}
.langsw button:hover{color:var(--ink);background:var(--shade)}
.langsw button.on{background:var(--ink);color:#fff;font-weight:600}
.langsw button.on:hover{background:var(--ink);color:#fff}

/* Thai sits taller than Latin — the marks above and below the line need
   the room, or a heading clips its own vowels */
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3,html[lang="th"] h4{line-height:1.45}
html[lang="th"] .dt-title{line-height:1.4}
html[lang="th"] .rcard h3{line-height:1.4}
html[lang="th"] .lbl{letter-spacing:.04em}
html[lang="th"] .provcard h3{line-height:1.35}
/* Thai does not put spaces between words, so a sentence is one
   unbreakable run as far as min-content sizing is concerned, and a long
   line quietly pushes a grid column wider than the phone. Let it break
   anywhere — which is how Thai is set on the web — but leave the runs
   that must stay whole (prices, distances, chips) alone. */
html[lang="th"] body{overflow-wrap:anywhere;word-break:break-word}
html[lang="th"] .mono,html[lang="th"] .tag,html[lang="th"] .dist,html[lang="th"] .vstamp,
html[lang="th"] .chip,html[lang="th"] .chbtn,html[lang="th"] .lbl,html[lang="th"] kbd{overflow-wrap:normal;word-break:normal}

/* ============ map shell + channel rail ============ */
.mapshell{display:flex;flex-direction:column;height:calc(100vh - var(--head-h))}
.mapshell>.catrail,.mapshell>.fbar{flex:0 0 auto}
.mapshell .fbar{position:static}
.mapshell .stage{flex:1 1 auto;min-height:0;height:auto}
.facepile{display:flex;align-items:center;flex:0 0 auto}
.facepile .fp{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:11px;border:2px solid var(--paper);margin-left:-8px;flex:0 0 auto;transition:transform .12s}
.facepile button.fp:hover{transform:translateY(-3px) scale(1.08);z-index:2;border-color:var(--chili)}
.facepile .fp:first-child{margin-left:0}
.facepile b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-soft);margin-left:11px;line-height:1.45}
.chbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:var(--card);border-radius:20px;padding:3px 12px 3px 3px;font-size:12.5px;white-space:nowrap;flex:0 0 auto;height:30px}
.chbtn.plain{padding-left:12px}
.chbtn i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:700;font-family:var(--display);font-style:normal;flex:0 0 auto}
.chbtn u{text-decoration:none;font-family:var(--mono);font-size:10.5px;color:var(--ink-soft)}
.chbtn.on{border-color:var(--chili);background:var(--chili-bg);color:var(--chili);font-weight:600}
.chbtn.on u{color:var(--chili)}
.chbtn:hover{border-color:var(--ink-soft)}

/* ============ freshness + status ============ */
.tag.warn{color:var(--gold);border-color:#DDC98E;background:var(--gold-bg)}
.tag.dead{color:#fff;background:var(--closed);border-color:var(--closed)}
.vstamp{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);letter-spacing:.02em;white-space:nowrap}
.vstamp.demo{color:#A08415}
.statusbar{display:flex;gap:10px;align-items:flex-start;border-radius:8px;padding:11px 13px;margin-bottom:14px;font-size:13.5px}
.statusbar.unsure{background:#FDF3D6;border:1px solid #E0C983}
.statusbar.closed{background:#F1EDE6;border:1px solid var(--rule)}
.statusbar b{font-family:var(--display)}
.statusbar p{margin:2px 0 0;color:var(--ink-soft);font-size:12.5px}
/* E3: the three-state stamp, big enough to be read before the drive */
.statusline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.statusline .st-open{color:var(--open);border-color:#A9CDBB;background:#EDF6F1}
.statusline .st-unsure{color:#8A6D1A;border-color:#E0C983;background:#FDF3D6}
.statusline .st-closed{color:#fff;background:var(--closed);border-color:var(--closed)}
.statusline .tag{font-size:12.5px;padding:4px 11px}

/* ============ the one dish, on the card ============ */
.rc-dish{background:var(--shade);border-radius:5px;padding:6px 9px;margin:7px 0 6px;display:flex;gap:8px;align-items:baseline;min-width:0}
.rc-dish .lbl{flex:0 0 auto}
.rc-dish b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-dish i{font-style:normal;font-size:11.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ province hub ============ */
.provgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.provcard{text-align:left;background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:16px;display:block;width:100%}
.provcard:hover{border-color:var(--chili)}
.provcard h3{font-size:18px}
.provcard .thn{font-size:12.5px;color:var(--ink-soft);margin:1px 0 9px}
.provcard .cnt{font-family:var(--mono);font-size:12px;color:var(--ink-soft);display:flex;gap:11px;flex-wrap:wrap;align-items:baseline;margin-bottom:9px}
.provcard .cnt b{color:var(--chili);font-weight:600;font-size:15px}
.provcard .picks{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:9px 0 0}
.provhead{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.provstat{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:13px 0;margin:16px 0 20px}
.provstat>div{min-width:74px}
.provstat b{display:block;font-family:var(--display);font-size:23px;line-height:1.15}
.provstat .lbl{display:block;margin-top:2px}
.menu-locked .lbl{display:block;margin-bottom:5px}
.menu-locked .thn{color:var(--ink-soft);font-size:13px;margin:1px 0 0}

/* ============ the shareable toy ============ */
.toybox{width:min(560px,100%);position:relative}
.toybox.wide{width:min(640px,100%);padding:18px}
.toyx{position:absolute;right:12px;top:10px;width:26px;height:26px;border-radius:50%;color:var(--ink-soft);font-size:14px;line-height:1;z-index:2}
.toyx:hover{background:var(--shade);color:var(--ink)}
.toyhead{display:flex;gap:14px;align-items:flex-end;margin-bottom:14px}
.toycat{height:118px;width:auto;flex:0 0 auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));margin-bottom:-4px}
.toyhead h2{font-size:23px;line-height:1.2;margin-top:2px}
.reelbox{border:1px dashed var(--rule);background:var(--paper);border-radius:10px;padding:20px 16px;text-align:center;min-height:104px;display:grid;align-content:center;gap:6px}
#reel{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.35;color:var(--chili);min-height:2.7em;display:grid;place-items:center}
.toypick{display:grid;grid-template-columns:74px 1fr;gap:13px;border:1px solid var(--rule);background:var(--card);border-radius:10px;padding:13px}
.toyemo{height:74px;border-radius:8px;display:grid;place-items:center;font-size:34px;border:1px solid rgba(0,0,0,.08)}
.toypick h3{font-size:18px;line-height:1.25}
.toypick .thn{margin:1px 0 0;font-size:12.5px;color:var(--ink-soft)}
.toybtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.toybtns .btn{flex:1 1 auto}
.cardcv{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.18);background:var(--paper)}
@media(max-width:520px){
  .toycat{height:92px}
  .toyhead h2{font-size:20px}
  .toybtns .btn{flex:1 1 100%}
}

/* ============ responsive ============ */
.mobtabs{display:none}
@media(max-width:900px){
  .dt-grid{grid-template-columns:1fr;gap:20px}
  .side{position:static}
  .dt-hero{grid-template-columns:1fr;height:180px}
  .dt-hero .sub{display:none}
}
@media(max-width:760px){
  .mapshell{display:block;height:auto}
  .chrail{padding:7px 12px}
  .chrail .lbl{display:none}
  .stage{grid-template-columns:1fr;height:auto;min-height:0}
  .listcol{border-right:0;overflow:visible;height:auto}
  .page{padding-bottom:180px}
  .mapcol{height:calc(100vh - var(--head-h) - 54px);position:sticky;top:var(--head-h)}
  body.m-list .mapcol{display:none}
  body.m-map .listcol{display:none}
  body.m-map .mapcol{height:calc(100vh - var(--head-h))}
  .mobtabs{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:880;background:var(--ink);border-radius:22px;padding:3px;box-shadow:0 4px 18px rgba(0,0,0,.3)}
  .mobtabs button{color:#CFC7BB;padding:6px 18px;border-radius:20px;font-size:13.5px}
  .mobtabs button.on{background:#fff;color:var(--ink);font-weight:600}
  .masc{bottom:76px;right:12px;width:min(340px,calc(100vw - 20px))}
  .backbar{top:0}
  .backhint{display:none}
  /* On a narrow screen it is the name plate that overflows, not the cat:
     it is one nowrap line and it is wider than the drawing above it. So
     the pair is pinned to the right edge and each half is capped at a
     little under half the viewport. */
  .masc{width:calc(100vw - 20px)}
  .cats{width:100%;align-items:flex-end}
  .catrow{width:100%;justify-content:flex-end}
  /* No percentage width anywhere on the figure: the portrait is sized by
     its height and the box takes its width from the aspect ratio, so a
     max-width:100% on the image would make the box depend on the image
     and the image on the box — a cycle the engine resolves to zero, which
     is what let the second cat wander off the right edge. */
  .catbtn{min-width:0;max-width:47vw}
  .catbtn .plate{font-size:9px;padding:2px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .catbtn .plate i{display:block;overflow:hidden;text-overflow:ellipsis}
  .catbtn:hover .fig,.catbtn.talk .fig{height:206px}
  .epchip{max-width:168px;font-size:10px}
  .mascpanel{bottom:236px}
  /* ---- the header on a phone ----
     The logo keeps its column, but a 222px column out of a 375px screen
     would leave the controls nowhere to go, so it comes down to about a
     third of the width. The rows beside it scroll sideways instead of
     wrapping, which is the normal way to read a strip on a phone. */
  .head-in{gap:10px;padding:5px 10px;min-height:0}
  .brandline{display:none}
  .brand img{height:72px}
  .head-top{gap:8px;min-height:42px}
  .nav{gap:2px}
  .nav button{padding:6px 10px;font-size:13px}
  .head.stacked .head-in{gap:0 8px;padding:0 8px 0 0}
  .head.stacked .brand{padding:4px 0}
  .head.stacked .brand img{max-height:min(100%,124px);max-width:112px}
  .head.stacked .catrail-in{padding:4px 20px 4px 0}
  .head.stacked .fbar-row{padding:6px 0}
  .head.stacked .catbub{width:58px}
  .head.stacked .catbub img{width:36px;height:36px}
  .head.stacked .catbub b{font-size:9px;max-width:56px}
  .maptools button{padding:5px 9px;font-size:12px}
  .fbar-row{padding:7px 12px;gap:6px}
  .catrail-in{padding:6px 10px}
  .catbub{width:64px}
  .catbub img{width:40px;height:40px}
}

/* ============ the two-part pin ============
   Middle = what kind of food. Shoulder disc = who vouched for it.
   Colour is spent only on the disc, so scanning the map for "where are
   the guides" works without reading a single label. */
.pin2{position:relative;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50% 50% 50% 4px;
  background:var(--card);border:2px solid var(--navy);
  box-shadow:0 2px 6px rgba(23,54,93,.32);
  transform:translate(-50%,-100%) rotate(-45deg);cursor:pointer}
.pin2>*{transform:rotate(45deg)}
.pin2 .pf{font-size:17px;line-height:1;filter:saturate(.95)}
.pin2.solo .pf{font-size:18px}
.pin2.filled .pf{color:#fff;font-family:var(--display);font-size:13px;font-weight:700}
/* the painted dish rides inside the pin, same artwork as everywhere else */
.pin2 img.pfa{width:29px;height:29px;object-fit:contain;display:block;transform:rotate(45deg)}
.pin2.solo img.pfa{width:31px;height:31px}
.pin2 .pb{position:absolute;top:-5px;right:-5px;transform:rotate(45deg);
  min-width:16px;height:16px;padding:0 3px;border-radius:9px;
  display:grid;place-items:center;color:#fff;font-style:normal;
  font-family:var(--display);font-size:9px;font-weight:700;line-height:1;
  border:1.5px solid var(--card);box-shadow:0 1px 2px rgba(23,54,93,.34)}
.pin2.k-award{border-color:var(--gold)}
.pin2.act{background:var(--chili);border-color:var(--chili);z-index:800!important;
  transform:translate(-50%,-100%) rotate(-45deg) scale(1.16)}
.pin2.saved{box-shadow:0 0 0 3px rgba(224,64,43,.30),0 2px 5px rgba(23,54,93,.28)}
/* zoomed out: the credential colour survives, the food does not */
.pindot2{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--card);
  transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(23,54,93,.35);cursor:pointer}

/* ---- clusters, wearing the dish they are mostly made of ---- */
.clmark{background:none;border:0}
/* zoomed right out, a hundred dishes stacked over a province is wallpaper,
   not information — so far out the cluster is just a count again */
.cl2.plain{background:var(--navy);border-color:#fff;box-shadow:0 2px 7px rgba(23,54,93,.34)}
.cl2.plain b{position:static;right:auto;bottom:auto;background:none;border:0;box-shadow:none;
  color:#fff;font-size:13px;min-width:0;height:auto;padding:0}
.cl2{position:relative;border-radius:50%;background:rgba(255,255,255,.95);
  border:2px solid var(--navy);box-shadow:0 3px 10px rgba(23,54,93,.28);
  display:grid;place-items:center;cursor:pointer;transition:transform .12s ease}
.cl2:hover{transform:scale(1.07)}
.cl2 img{width:66%;height:66%;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 2px rgba(23,54,93,.22))}
.cl2 .glyph{font-size:20px;line-height:1}
.cl2 b{position:absolute;right:-5px;bottom:-3px;min-width:21px;height:21px;padding:0 5px;
  border-radius:11px;background:var(--chili);color:#fff;font-family:var(--display);
  font-size:11.5px;font-weight:700;line-height:1;display:grid;place-items:center;
  border:2px solid var(--card);box-shadow:0 1px 3px rgba(23,54,93,.3)}

/* the pin-mode switch, sitting with the other map tools */
.pinmode{display:inline-flex;border:1px solid var(--rule);border-radius:20px;
  overflow:hidden;background:var(--card)}
.pinmode button{padding:4px 9px;font-size:12px;border:0;background:none;
  color:var(--ink-soft);white-space:nowrap;border-right:1px solid var(--rule)}
.pinmode button:last-child{border-right:0}
.pinmode button.on{background:var(--chili);color:#fff;font-weight:600}

/* ============ list card thumbnail ============ */
.thumb{background:linear-gradient(155deg,#FFFBF2,var(--shade))}
.thumb.k-award{background:linear-gradient(155deg,#FDF6E2,#F2E6C8)}
.thumb.k-yt{background:linear-gradient(155deg,#FDEDE6,#F7DCD2)}
.thumb.k-src{background:linear-gradient(155deg,#EFF4FA,#DFE8F2)}
.thumb .tb{position:absolute;right:5px;top:5px;min-width:18px;height:18px;padding:0 4px;
  border-radius:10px;display:grid;place-items:center;color:#fff;font-style:normal;
  font-family:var(--display);font-size:10px;font-weight:700;line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.srcpill u{text-decoration:none;font-family:var(--mono);opacity:.6;font-size:10.5px}

/* ============ detail hero when there is no clip ============
   The same painted dish as the card and the rail, at full size. A shop
   page that opens on a grey box reads as broken; one that opens on the
   dish you were looking for reads as arrival. */
.dt-hero.flat{display:block;position:relative;height:230px;border:1px solid var(--rule);
  background:linear-gradient(150deg,#FFFBF2,var(--shade))}
.dt-hero.flat.k-award{background:linear-gradient(150deg,#FDF6E2,#F0E3C2)}
.dt-hero.flat.k-yt{background:linear-gradient(150deg,#FDEDE6,#F6DAD0)}
.dt-hero.flat.k-src{background:linear-gradient(150deg,#F1F5FB,#DEE8F3)}
.dt-hero.flat .dish{position:absolute;inset:0;display:grid;place-items:center;font-size:76px}
.dt-hero.flat img.dishart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:90%;width:auto;max-width:74%;object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(23,54,93,.22))}
.dt-hero.flat .hb{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;
  gap:5px;padding:5px 13px;border-radius:var(--r-lg);color:#fff;font-size:12px;font-weight:600;
  box-shadow:0 2px 6px rgba(23,54,93,.22)}
.dt-hero.flat .catname{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.9);
  border:1px solid var(--rule);border-radius:var(--r-lg);padding:4px 12px;font-size:12.5px;font-weight:600;color:var(--navy)}

/* ============ what the filter drawer is made of ============ */
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.bdot{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-style:normal;font-size:8.5px;font-weight:700;
  font-family:var(--display);flex:0 0 auto}
.radwrap{display:flex;align-items:center;gap:9px;margin-top:9px}
.radwrap input[type=range]{flex:1}

/* ============ bar controls ============ */
.selbox{width:auto;flex:0 0 auto;height:34px;padding:0 9px;font-size:13px;
  border-radius:20px;border:1px solid var(--rule);background:var(--card);
  max-width:150px}
.fbtn{height:34px}
.fbtn .fcount{background:var(--chili);color:#fff;border-radius:10px;padding:0 6px;
  font-size:11px;font-family:var(--mono);margin-left:2px}
.chip.clr{height:34px;color:var(--chili)}
.secth{font-size:13px;font-family:var(--mono);color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
@media(max-width:760px){.lbl-wide{display:none}.selbox{max-width:110px}}

/* ============ the vote page ============ */
.votenote{border-color:#CBD9E8;background:#EEF3FA;margin:16px 0 22px}
.votegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.vcard{border:1px solid var(--rule);border-radius:10px;background:var(--card);padding:13px 15px}
.vcard.mine{border-color:var(--chili);box-shadow:0 0 0 1px var(--chili) inset}
.vtop{display:flex;align-items:flex-start;gap:9px;margin-bottom:8px}
.vtag{font-size:20px;line-height:1.2;flex:0 0 auto}
.vnames{flex:1;min-width:0;display:flex;flex-direction:column}
.vnames b{font-size:14.5px;line-height:1.4}
.vnames i{font-style:normal;font-size:11.5px;color:var(--ink-soft)}
.vcount{font-size:13px;color:var(--ink-soft);flex:0 0 auto}
.vbar{height:5px;border-radius:3px;background:var(--shade);overflow:hidden;margin-bottom:9px}
.vbar i{display:block;height:100%;background:var(--chili);border-radius:3px;transition:width .3s ease}
.vline{margin:0 0 11px;font-size:13px;color:var(--ink-soft);line-height:1.6;min-height:2.6em}
.vpicked{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--chili)}

/* =====================================================================
   Account — a name, a home, and a list that survives a refresh
   ---------------------------------------------------------------------
   There is no server behind this site, so "signing in" means claiming a
   name on this device and getting your own drawer in localStorage. Two
   people on one laptop get two drawers; the same person on two laptops
   gets two, as well. The panel says so rather than implying a cloud.
   ===================================================================== */
.acctpanel{width:min(430px,100%);position:relative}
.acctpanel .who{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.acctpanel .who img,.acctpanel .who .ph{width:62px;height:62px;border-radius:50%;object-fit:cover;object-position:50% 8%;
  border:2.5px solid var(--amber);background:var(--shade);flex:0 0 auto;display:grid;place-items:center;font-size:26px}
.acctpanel .who h2{font-size:21px;line-height:1.3}
.acctpanel .who p{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft)}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field .lbl{margin-bottom:1px}
.field input{border-radius:var(--r-sm)}
/* pick a cat as your face — the same paintings the mascots wear */
.avpick{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.avpick button{width:52px;height:52px;border-radius:50%;overflow:hidden;border:2px solid var(--rule);background:var(--shade);padding:0;flex:0 0 auto}
.avpick button img{width:100%;height:100%;object-fit:cover;object-position:50% 6%;display:block}
.avpick button:hover{border-color:var(--amber)}
.avpick button.on{border-color:var(--chili);box-shadow:0 0 0 3px var(--chili-bg)}
.homebox{border:1px solid var(--rule);border-radius:var(--r);padding:12px 13px;background:var(--shade);margin-bottom:12px}
.homebox b{display:block;font-family:var(--display);font-size:14.5px;color:var(--navy)}
.homebox p{margin:3px 0 9px;font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.homebox .row{display:flex;gap:7px;flex-wrap:wrap}
.homebox .row .btn{flex:1 1 auto}
.homeset{display:flex;gap:9px;align-items:center;background:var(--amber-bg);border:1px solid #F0D9A4;
  border-radius:var(--r);padding:9px 12px;margin-bottom:12px;font-size:13px}
.homeset span{font-size:19px;line-height:1}
.homeset b{font-family:var(--display);color:var(--navy)}
/* the home button in the filter bar */
.homebtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:var(--card);
  border-radius:var(--r-lg);padding:5px 13px;font-size:13.5px;height:34px;white-space:nowrap;color:var(--navy);flex:0 0 auto}
.homebtn:hover{border-color:var(--amber);background:var(--amber-bg)}
.homebtn.on{border-color:var(--chili);background:var(--chili-bg);color:var(--chili);font-weight:600}

/* =====================================================================
   The random picker, with its dials showing
   ---------------------------------------------------------------------
   "Surprise me" is useless if the surprise can be an hour away or four
   times your budget. So the wheel takes conditions first — price, how far,
   what kind — and only then spins. The conditions are remembered, because
   the same person tends to want the same constraints tomorrow.
   ===================================================================== */
.rndopts{border:1px solid var(--rule);border-radius:var(--r);padding:13px;background:var(--shade);margin-bottom:13px}
.rndrow{margin-bottom:11px}
.rndrow:last-child{margin-bottom:0}
.rndrow>.lbl{display:block;margin-bottom:6px}
.rndrow .chiprow{gap:5px}
.rndrow .chip{font-size:12.5px;padding:4px 11px;background:var(--card)}
.distwrap{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:4px 14px;height:38px}
.distwrap input[type=range]{flex:1;accent-color:var(--chili);padding:0;border:0;background:none;height:20px;width:auto}
.distwrap b{font-family:var(--mono);font-size:12.5px;font-weight:600;min-width:62px;text-align:right;color:var(--navy)}
.rndcount{font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-align:center;margin:0 0 11px}
.rndcount b{color:var(--chili)}
/* a tiny painted dish next to the winner */
.toypick .dishart{width:74px;height:74px;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 7px rgba(23,54,93,.2))}

/* =====================================================================
   Category chips carrying their painting
   ===================================================================== */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.catpick{display:flex;flex-direction:column;align-items:center;gap:3px;border:1.5px solid var(--rule);
  border-radius:var(--r);padding:8px 4px 7px;background:var(--card);text-align:center}
.catpick img{width:44px;height:44px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(23,54,93,.16))}
.catpick b{font-size:11.5px;font-weight:600;line-height:1.3;color:var(--navy-soft)}
.catpick:hover{border-color:var(--amber);background:var(--amber-bg)}
.catpick.on{border-color:var(--chili);background:var(--chili-bg)}
.catpick.on b{color:var(--chili)}

/* =====================================================================
   Odds and ends the new palette touches
   ===================================================================== */
.card{border-radius:var(--r)}
.modal{border-radius:var(--r-lg)}
.searchwrap input,.selbox,.chip{border-radius:var(--r-lg)}
.provcard{border-radius:var(--r)}
.provcard:hover{border-color:var(--amber);box-shadow:0 3px 12px rgba(23,54,93,.08)}
.rc-dish{background:var(--amber-bg);border-radius:var(--r-sm)}
.awardbox{border-radius:var(--r);border-color:#EFD9A6;background:var(--gold-bg)}
.srcav{box-shadow:0 2px 5px rgba(23,54,93,.18)}
.vcard{border-radius:var(--r)}
.toybox{border-radius:var(--r-lg)}
.qbox,.bubble{border-color:var(--navy)}
.bubble.c{border-left-color:var(--amber)}
.bubble.l{border-left-color:#D98A96}
.epchip{background:var(--navy)}
.epchip:hover{background:var(--chili)}
.tag.open{color:var(--open);border-color:#A9CDBB;background:#EDF6F1}
.mobtabs{background:var(--navy)}
.toast{background:var(--navy);border-radius:var(--r-lg)}
/* the signature dish gets to look like a recommendation, not a field */
.sigline{display:inline-flex;align-items:center;gap:6px;background:var(--amber-bg);border:1px solid #F2DFB2;
  border-radius:var(--r-lg);padding:2px 11px;font-size:12.5px;color:#8A5E07;max-width:100%}
.sigline b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the credit page groups guides, channels and publications */
.srcgroup{margin-bottom:6px}
.emptybox{text-align:center;padding:34px 20px}

/* =====================================================================
   Quietening the basemap
   ---------------------------------------------------------------------
   OpenStreetMap's house style is built to be read on its own: parks are
   green, main roads are red, every shop gets a purple icon. Underneath a
   map whose whole point is the painted dishes, that is two things
   shouting. Rather than trade down to a duller, older basemap, the tile
   pane is desaturated here — the data stays current, the colour stops
   competing, and switching styles costs one class instead of a refetch.
   ===================================================================== */
.bm-quiet{filter:saturate(.42) brightness(1.05) contrast(.94)}
/* Satellite is the opposite problem: it is dark and busy, so the pins get
   lifted off it instead, and the imagery is knocked back a little. */
.bm-sat{filter:saturate(.86) brightness(1.08)}
.bm-sat + .leaflet-pane .pin2,
.leaflet-tile-pane.bm-sat ~ .leaflet-pane .pin2{box-shadow:0 2px 10px rgba(0,0,0,.5)}
.leaflet-tile-pane.bm-sat ~ .leaflet-pane .cl2{box-shadow:0 3px 12px rgba(0,0,0,.45)}
/* the attribution line has to stay legible over imagery */
.leaflet-control-attribution{background:rgba(255,255,255,.86)!important;font-size:10.5px}

/* ============ what the cats say about one shop ============
   Their corner dock is a running commentary; this is the opposite —
   a fixed three-line write-up that belongs to the restaurant itself.
   Same two voices, so the same two colours, but laid out as a script
   rather than as speech bubbles floating over the page. */
.catsect .catsay{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  padding:14px 15px;display:grid;gap:10px;position:relative;overflow:hidden}
.catsect .catsay::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--amber) 0%,var(--amber) 62%,#C9CDD4 62%,#C9CDD4 100%)}
.csrow{display:flex;gap:11px;align-items:flex-start;padding-left:8px}
.csav{width:38px;height:38px;flex:0 0 38px;border-radius:50%;object-fit:cover;object-position:top center;
  background:var(--shade);border:1px solid var(--rule)}
.csbub{flex:1;font-size:15px;line-height:1.55}
.cswho{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:1px}
.csrow.c .cswho{color:var(--amber-dk)}
.csrow.l .cswho{color:var(--navy-soft)}
.csrow.punch .csbub{font-weight:600}
.csrow.punch{margin-top:1px;padding-top:9px;border-top:1px dashed var(--rule)}

/* This box used to hold the guide's own paragraph, set in quotation marks
   so it could never be mistaken for something Cha-Map.com wrote. The
   paragraph is gone — we do not reprint other people's reviews — and the
   opening quote mark went with it, because nothing here is a quote now. */
.descbox{padding:15px 17px}
.descq{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.descby{margin:11px 0 0}

/* the dishes the source pointed at */
.menuchips{display:flex;flex-wrap:wrap;gap:7px}
.mchip{display:inline-flex;align-items:center;border:1px solid var(--rule);background:var(--card);
  border-radius:var(--r-lg);padding:6px 13px;font-size:13.5px;color:var(--navy)}
.mchip::before{content:"🥢";margin-right:6px;font-size:12px}

/* one line of them on the list card — the punchline only */
.rc-cat{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--navy-soft);
  display:flex;gap:6px;align-items:flex-start}
.rc-catpaw{flex:0 0 auto;font-size:10px;line-height:1.7}

/* ============ ปุ่มปิด/เปิดแมว ============ */
/* both states get to be a real button now — easy to spot, not a tiny ✕
   that reads as chrome rather than a control */
.catbar{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.catoff{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;border-radius:var(--r-lg);
  border:1px solid var(--rule);background:var(--card);color:var(--ink);font-size:13px;font-weight:600;
  padding:6px 13px 6px 6px;line-height:1;box-shadow:0 2px 10px rgba(23,54,93,.14)}
/* the ✕ is a disc of its own inside the pill: at a glance it reads as the
   close control even before the words beside it are read */
.catoff i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--chili);color:#fff;font-size:12px;line-height:1;flex:0 0 auto}
.catoff:hover{border-color:var(--chili);color:var(--chili-dk);background:var(--chili-bg)}
.masc.off .cats{align-items:flex-end}
.catwake{display:inline-flex;align-items:center;gap:7px;border:1.5px solid transparent;background:var(--amber);
  border-radius:var(--r-lg);padding:10px 18px;font-size:14.5px;font-weight:700;color:var(--navy);
  box-shadow:0 3px 10px rgba(242,161,28,.4)}
.catwake:hover{background:var(--amber-dk)}

/* ============ ชื่อร้าน ไทยกับอังกฤษน้ำหนักพอกัน ============ */
.dt-en{margin:1px 0 0;font-family:var(--display);font-size:24px;line-height:1.25;
  font-weight:600;color:var(--navy-soft);letter-spacing:-.01em}
@media(max-width:760px){.dt-en{font-size:20px}}

/* ============ ป้ายเครดิต — รางวัลกับช่อง เด่นรองจากชื่อร้าน ============ */
.creds{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.cred{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 9px;border-radius:var(--r-lg);
  font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:var(--cc,#666);
  box-shadow:0 2px 7px color-mix(in srgb,var(--cc,#666) 34%,transparent);white-space:nowrap}
.cred i{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 5px;border-radius:50px;background:rgba(255,255,255,.24);font-style:normal;
  font-size:12px;font-weight:700}
.cred b{font-size:12px;opacity:.85;margin-left:1px}
a.cred:hover{filter:brightness(1.08);transform:translateY(-1px)}
a.cred{text-decoration:none;transition:transform .12s,filter .12s}

/* ============ แถบข้อมูลที่คนถามก่อนเสมอ ============ */
.qfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 0}
.qf{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);padding:11px 13px;
  display:flex;flex-direction:column;gap:1px}
.qfk{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.qfv{font-size:17px;line-height:1.3;color:var(--navy)}
.qfs{font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.qfs.hot{color:var(--gold);font-weight:600}
.qf.open{border-color:color-mix(in srgb,var(--open) 45%,var(--rule))}
.qf.open .qfv{color:var(--open)}
.qf.closed .qfv{color:var(--closed)}
.qf.warn .qfv{font-size:15px;color:var(--ink-soft)}

/* ============ กระโดดไปดูร้านอื่นของแหล่งเดียวกัน ============ */
.srcjump{display:flex;flex-wrap:wrap;gap:8px}
.sjump{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--card);
  border-radius:var(--r-lg);padding:7px 14px 7px 8px;font-size:13.5px;font-weight:500;color:var(--navy)}
.sjump i{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;
  border-radius:50px;background:var(--cc,#666);color:#fff;font-style:normal;font-size:11px;font-weight:700}
.sjump:hover{border-color:var(--cc,var(--chili));color:var(--cc,var(--chili))}

/* ============ ช่อง "แมวว่า" — ที่ที่เคยเป็นดาว Google ============ */
.qf.cv{border-color:color-mix(in srgb,var(--amber) 42%,var(--rule));
  background:linear-gradient(180deg,#FFFDF7 0%,var(--card) 60%)}
.qf.cv .qfk{color:var(--amber-dk)}
.qf.cv .qfv{font-size:14.5px;font-weight:600;line-height:1.45;color:var(--navy)}
.qf.cv .qfk::after{content:" 🐾";letter-spacing:0}

/* ============ contribute & support ============
   Two ordinary pages: a form, some cards, a footer. They borrow the
   card, field and button furniture above and add only what they need. */
/* --- the kind-of-message tabs --- */
.ctabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.ctab{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--card);border-radius:var(--r-lg);padding:8px 14px 8px 10px;font-size:13.5px;color:var(--navy-soft)}
.ctab i{font-style:normal;font-size:17px;line-height:1}
.ctab b{font-weight:500}
.ctab:hover{border-color:var(--amber);background:var(--amber-bg)}
.ctab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ctab.on b{font-weight:600}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.cform{padding:20px 22px}
.cintro{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.cintro .cico{font-size:26px;line-height:1;flex:0 0 auto;margin-top:2px}
.cintro b{font-family:var(--display);font-size:17px;display:block}
.cintro p{margin:2px 0 0}
/* --- the "and then what?" panel above the fields --- */
.cnote{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);padding:13px 15px;margin:0 0 16px}
.cnote>b{font-family:var(--display);font-size:14.5px;display:block;margin-bottom:8px}
.cnote>p{margin:0 0 10px}
.cnote .cfoot{margin:11px 0 0;padding-top:9px;border-top:1px solid var(--rule)}
.csteps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.csteps li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.csteps li i{font-style:normal;font-size:15px;line-height:1.35;flex:0 0 auto;width:19px;text-align:center}
.ccredit{display:flex;flex-direction:column;gap:3px;margin-top:11px;padding:8px 11px;
  border:1px dashed color-mix(in srgb,var(--amber) 62%,var(--rule));background:var(--amber-bg);border-radius:var(--r-sm)}
.ccredit em{font-style:normal;font-size:13px;color:var(--navy-soft)}
.ccredit em b{font-weight:600;color:var(--navy)}
/* --- the packages, pickable inside the form --- */
.pkpick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pkopt{display:flex;gap:9px;align-items:flex-start;text-align:left;border:1px solid var(--rule);
  background:var(--card);border-radius:var(--r-sm);padding:9px 11px}
.pkopt i{font-style:normal;font-size:18px;line-height:1.2;flex:0 0 auto}
.pkopt>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pkopt b{font-size:13.5px;font-weight:600;color:var(--navy)}
.pkopt em{font-style:normal;font-size:12px;line-height:1.45;color:var(--ink-soft)}
.pkopt:hover{border-color:var(--amber);background:var(--amber-bg)}
.pkopt.on{border-color:var(--navy);background:var(--amber-bg);box-shadow:inset 0 0 0 1px var(--navy)}
.pkopt.on em{color:var(--navy-soft)}
.ctwo{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.cform textarea{min-height:130px;border-radius:var(--r-sm);line-height:1.55}
.cform input,.cform select{border-radius:var(--r-sm)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cfbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.shoppick{display:flex;gap:8px}
.shoppick input{flex:1 1 auto}
.shopchip{display:flex;align-items:center;gap:9px;border:1px solid var(--amber);background:var(--amber-bg);border-radius:var(--r-sm);padding:6px 8px 6px 8px}
.shopchip img{width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.shopchip b{font-size:14px}
.shopchip button{margin-left:auto;color:var(--ink-soft);padding:2px 6px;border-radius:6px}
.shopchip button:hover{background:#fff;color:var(--chili)}
.sentbox{border:1.5px solid var(--rule);border-radius:var(--r);padding:14px 16px;margin:8px 0 12px;background:var(--paper)}
.sentbox.ok{border-color:var(--open);background:#EDF6F1}
.sentbox.no{border-color:var(--chili);background:var(--chili-bg)}
.sentbox b{font-family:var(--display);font-size:16px}
.sentbox p{margin:4px 0 10px;font-size:13.5px}
.cside{display:grid;gap:12px}
.cwhy ul,.sfree ul{margin:8px 0 0;padding-left:18px}
.cwhy li,.sfree li{margin-bottom:5px}
/* --- channels --- */
.chancard b{font-family:var(--display);font-size:15px}
.chans{display:grid;gap:7px;margin-top:10px}
.chan{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:var(--r-sm);padding:7px 10px;background:var(--paper);color:var(--ink);text-decoration:none}
.chan:hover{border-color:var(--amber);background:var(--amber-bg)}
.chan i{font-style:normal;font-size:18px;line-height:1;width:24px;text-align:center}
.chan span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.chan b{font-size:13px}
.chan em{font-style:normal;font-size:12px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbtn{color:var(--chili);text-decoration:underline}
/* --- support page --- */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.shead{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.shead .sico{font-size:28px;line-height:1;flex:0 0 auto}
.shead h2{font-size:19px}
.shead p{margin:2px 0 0}
.ppbox{display:flex;gap:18px;align-items:center;border:1px solid var(--rule);border-radius:var(--r);padding:14px;background:var(--paper);margin-bottom:12px}
.ppqr,.ppimg{width:196px;height:196px;flex:0 0 auto;background:#fff;border-radius:8px;padding:6px;display:grid;place-items:center;border:1px solid var(--rule)}
.ppqr img,.ppqr canvas{display:block;max-width:100%;height:auto}
.ppimg{object-fit:contain}
.ppinfo{display:grid;gap:5px;min-width:0}
.ppinfo b{font-family:var(--display);font-size:16px}
.ppinfo .mono{font-size:15px;letter-spacing:.04em}
.ppinfo .btn{justify-self:start}
.ppinfo p{margin:2px 0 0}
.cardpay{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.cardpay .btn{text-decoration:none}
.sfree{border-top:1px solid var(--rule);padding-top:12px;margin-top:4px}
.sfree b{font-family:var(--display);font-size:14.5px}
.pkgs{display:grid;gap:10px}
.pkg{border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px;background:var(--paper)}
.pkgtop{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.pkgico{font-size:20px;line-height:1}
.pkgtop b{font-family:var(--display);font-size:15px}
.pkgprice{margin-left:auto;font-size:11.5px;color:var(--gold);background:var(--gold-bg);border:1px solid #DDC98E;border-radius:20px;padding:1px 9px;white-space:nowrap}
.pkg p{margin:0 0 9px}
.sabout p{margin:0 0 8px}
/* --- footer --- */
.foot{border-top:1px solid var(--rule);background:linear-gradient(180deg,var(--paper),#FAF1E0);margin-top:-150px;position:relative;padding-bottom:110px}
.foot-in{max-width:1080px;margin:0 auto;padding:26px 20px 0;display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:center}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{width:auto;height:44px;object-fit:contain}
.foot-brand b{font-family:var(--display);font-size:16px;display:block;line-height:1.2}
.foot-brand span{font-size:12px;color:var(--ink-soft)}
.foot-nav{display:flex;gap:2px 4px;flex-wrap:wrap;justify-self:end}
.foot-nav button{font-size:13px;color:var(--navy-soft);padding:4px 9px;border-radius:var(--r-lg)}
.foot-nav button:hover{background:var(--amber-bg);color:var(--navy)}
.foot-note{grid-column:1/-1;font-size:12.5px;color:var(--ink-soft);margin:6px 0 0;max-width:78ch}
.foot-copy{grid-column:1/-1;font-size:11px;color:var(--ink-soft);margin:0;letter-spacing:.04em}
@media(max-width:900px){
  .cgrid,.sgrid{grid-template-columns:1fr}
  .ppbox{flex-direction:column;align-items:flex-start}
}
@media(max-width:760px){
  .ctwo{grid-template-columns:1fr}
  .pkpick{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .foot-nav{justify-self:start}
  /* the nav is a strip that scrolls; on a phone it needs to look like one.
     The fade says "there is more" where a hidden scrollbar could not. */
  .nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);padding-right:26px}
  .acct{padding:4px 6px 4px 5px;gap:0}
  .acct .acctlbl{display:none}
}
@media(max-width:520px){
  /* a phone in portrait: the logo gives up a little height so the nav
     strip beside it can show three entries instead of two */
  .head:not(.stacked) .brand img{height:58px}
  .head:not(.stacked) .head-in{gap:6px;padding:4px 8px}
}

/* ============ the phone ============
   Everything above assumes a laptop. Below 760px the header used to be
   taller than the screen — logo column, nav strip, category rail and an
   open filter drawer all stacked — so the map never showed at all.
   On a phone the header is three short rows, the nav folds into ☰ and
   a sheet, and the filters open as a sheet from the bottom instead of
   living inside the header. */
.menubtn{display:none}
.fscrim,.fdrawer-h{display:none}
@media(max-width:760px){
  /* --- header: one row of logo + buttons, then the rail, then the bar --- */
  .menubtn{display:grid;place-items:center;width:38px;height:36px;border:1px solid var(--rule);background:var(--card);border-radius:var(--r-lg);font-size:18px;color:var(--navy);flex:0 0 auto}
  .head .nav,.head .langsw{display:none}
  .head-in{gap:8px;padding:5px 8px 5px 8px;min-height:0}
  .brand img{height:44px}
  .head-top{min-height:36px}
  .head-r{margin-left:auto}
  /* the map view: the logo stops being a column. head-col dissolves so
     its three rows become grid rows of their own, and the logo shares
     the first one with the buttons. */
  .head.stacked .head-in{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;gap:0 8px;padding:0 8px;align-items:center}
  .head.stacked .brand{grid-row:1;grid-column:1;padding:4px 0;margin-left:0;align-self:center}
  .head.stacked .brand img{height:44px;max-height:none;max-width:none;width:auto}
  .head.stacked .head-col{display:contents}
  .head.stacked .head-top{grid-row:1;grid-column:2;min-height:44px}
  .head.stacked .catrail{grid-row:2;grid-column:1/-1;margin:0 -8px}
  .head.stacked .fbar{grid-row:3;grid-column:1/-1;margin:0 -8px}
  .head.stacked .catrail-in{padding:4px 20px 4px 8px}
  .head.stacked .fbar-row{padding:6px 8px}
  .head.stacked .catbub{width:58px}
  .head.stacked .catbub img{width:36px;height:36px}
  .head.stacked .catbub b{font-size:9px;max-width:56px}
  .head.stacked .catbub.all{width:50px}
  .searchwrap{min-width:0;flex:1 1 150px}
  /* --- the filter drawer becomes a sheet from the bottom --- */
  .fscrim{display:block;position:fixed;inset:0;background:rgba(24,20,16,.45);z-index:890}
  .head.stacked .fdrawer{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:895;
    max-height:78vh;max-height:78dvh;overflow-y:auto;overscroll-behavior:contain;
    background:var(--paper);border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);
    display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px;padding:0 12px 24px;animation:sheetup .22s ease-out}
  .fdrawer-h{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:2;background:var(--paper);
    padding:12px 2px 8px;border-bottom:1px solid var(--rule);margin-bottom:2px}
  .fdrawer-h b{font-family:var(--display);font-size:17px;flex:1 1 auto;display:flex;align-items:center;gap:7px}
  .fdrawer-h .fcount{background:var(--chili);color:#fff;font-size:11px;border-radius:10px;padding:1px 7px}
  .fsect{max-width:none;max-height:none;overflow:visible;flex:0 0 auto}
  .fsect.w-sm,.fsect.w-lg{max-width:none;flex:0 0 auto}
  .fsect .chip{padding:6px 12px;font-size:13.5px}
  /* the map below a header that is finally short: use the real screen
     height on phones whose browser bar comes and goes */
  .mapcol{height:calc(100vh - var(--head-h) - 54px);height:calc(100dvh - var(--head-h) - 54px)}
  body.m-map .mapcol{height:calc(100vh - var(--head-h));height:calc(100dvh - var(--head-h))}
}
@keyframes sheetup{from{transform:translateY(28px)}to{transform:none}}
/* --- the ☰ sheet --- */
.sheetscrim{align-items:end;padding:0}
.sheet{background:var(--card);width:100%;max-width:520px;margin:0 auto;border-radius:20px 20px 0 0;padding:10px 16px 26px;max-height:88vh;overflow-y:auto;box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:sheetup .22s ease-out}
.sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet-h img{height:40px;width:auto}
.sheet-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;color:var(--ink-soft);font-size:15px}
.menulist{display:grid;gap:4px}
.menulist button{display:flex;align-items:center;gap:12px;text-align:left;padding:11px 12px;border-radius:var(--r);font-size:15.5px;font-weight:500;color:var(--navy)}
.menulist button i{font-style:normal;width:26px;text-align:center;font-size:18px}
.menulist button:hover{background:var(--amber-bg)}
.menulist button.on{background:var(--navy);color:#fff;font-weight:600}
.menufoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.menufoot .langsw{display:flex}
@media(max-width:760px){
  /* the header is its own stacking layer (z 600), so a sheet drawn
     inside it can never rise above the bottom pill (880) or the cats
     (900) — unless the header itself is lifted while the sheet is open */
  .head.stacked:has(.fdrawer){z-index:950}
  /* three things used to share the bottom 40px of the map: the tool
     row, the list/map pill and the cat button. Stack them instead. */
  .mobtabs{bottom:12px}
  .maptools{bottom:58px}
  .masc{bottom:104px}
}

/* ============ the cats, tidied ============
   Three changes live here. The dock leans left over the list while the
   map is up, so the map keeps its own bottom-right corner. It vanishes
   entirely on a phone, where the cats have a page instead. And the map
   gets a "near me" control loud enough to compete with a cartoon cat. */
#mascot.gone{display:none}
/* the pair stands smaller on the map than on a page of its own — it is
   company in the corner, not a billboard across the bottom of the map */
#mascot.onmap .catrow{--cath:120px}
#mascot.onmap .catbtn:hover .fig,#mascot.onmap .catbtn.talk .fig{height:210px}

/* ---- my location ---- */
.homebtn.busy{opacity:.65;pointer-events:none}

/* ---- the cats' own page ---- */
.cathead{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.cathead .btn{flex:0 0 auto;margin-top:4px}
.catstage{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:radial-gradient(ellipse at 50% 100%,var(--amber-bg),var(--paper) 68%);
  border:1px solid var(--rule);border-radius:var(--r-lg);padding:18px 16px 10px;margin-bottom:16px;min-height:300px;
  justify-content:flex-end}
.catpage .catbubs{display:flex;flex-direction:column;align-items:center;gap:7px;width:min(560px,100%)}
.catpage .catbubs:empty{display:none}
.catpage .catbubs .bubwrap{align-items:flex-start;width:100%}
.catpage .catrow{--cath:230px;justify-content:center;gap:14px}
.catpage .catbtn:hover .fig,.catpage .catbtn.talk .fig{height:290px}
.catpage .cattip{margin:0;text-align:center}
/* one column, not two: whether the sorting hat is in today's episode
   decides how many blocks there are, and a grid that changes shape with
   the cast reads as a bug rather than a layout */
.catctl{display:grid;gap:14px;max-width:760px;margin:0 auto}
.catctl>.epcard{margin:0}
.catctl>.hbox{margin:0}
.catctl>.pnbtns{margin-top:0}
.cosbox,.catset{border:1px solid var(--rule);border-radius:var(--r);padding:11px 13px;background:var(--card)}
.catset .check{display:flex;gap:9px;align-items:center;margin-top:8px;line-height:1.4}
.catset .check input{width:auto;flex:0 0 auto}
.catpage .pnbtns .btn{flex:1 1 190px}

/* ---- phone ---- */
@media(max-width:760px){
  /* the dock is gone here: 132px of cat plus a bright pill used to sit on
     the bottom third of the map, which is the part people are reading */
  #mascot{display:none}
  /* the strip clears the list/map pill below it */
  .maptools{bottom:60px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:4px}
  .maptools::-webkit-scrollbar{display:none}
  .maptools>*{flex:0 0 auto}
  .mapnote{display:none}
  .catctl{grid-template-columns:1fr}
  .catctl>.hbox{grid-column:1;grid-row:auto}
  .catpage .catrow{--cath:150px}
  .catstage{min-height:0;padding:14px 10px 8px}
  .cathead .btn{width:100%}
}

/* The strapline used to disappear only on the map view, where the logo
   stands as a column. On every other page it stayed until 760px and
   squeezed the nav into two lines on any tablet-width window. */
@media(max-width:1180px){.brandline{display:none}}
/* .page reserves 210px at the foot so the fixed cats never cover the last
   card. Where the dock is stood down — the cats' own page, and every page
   on a phone — that reservation is just a hole above the footer. */
body:has(#mascot.gone) .page{padding-bottom:44px}
body:has(#mascot.gone) .foot{margin-top:0;padding-bottom:28px}
@media(max-width:760px){
  .page{padding-bottom:44px}
  .foot{margin-top:0;padding-bottom:28px}
  /* the map view keeps its clearance: the list scrolls under the tab pill */
  .listcol{padding-bottom:96px}
}
/* the dock is 120px of cat plus a name plate and a control bar; the list
   reserves that much so its last card is never trapped underneath */
.listcol{padding-bottom:210px}
/* the corner dock is a desktop affordance; on a phone the toggle for it
   would be a switch with nothing on the other end */
.phoneonly{display:none}
@media(max-width:760px){
  .catset .dockrow{display:none}
  .phoneonly{display:block;margin:8px 0 0}
}
/* ...but on a phone the dock is gone, so the list only has to clear the
   list/map pill. This has to come after the rule above to win. */
@media(max-width:760px){.listcol{padding-bottom:96px}}

/* ============ the sixteen dishes: rail or sheet, never both ============
   Wide enough for the rail, and the rail is the better control: the
   pictures are the point and they are always in view. Narrow, and the
   rail is a row of header the map cannot afford, so the same sixteen
   ride inside the filter sheet as chips. */
.fsect.cu-sect{display:none}
.cuchip{display:inline-flex;align-items:center;gap:6px}
.cuchip img{width:22px;height:22px;object-fit:contain;display:block}
@media(max-width:760px){
  .head.stacked .catrail{display:none}
  /* first group in the sheet, but still under the sheet's own title bar */
  .fdrawer-h{order:-2}
  .fsect.cu-sect{display:block;order:-1}
  .fsect.cu-sect .chip{padding:5px 11px 5px 6px}
  .fsect.cu-sect .cuchip img{width:26px;height:26px}
}

/* ============ the phone, finished ============
   The layout above stops things overlapping; this block is what makes it
   feel like it was built for the hand rather than shrunk for it. */
button,a,.chip,.catbub{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.lbl-narrow{display:none}
/* the wrapper exists only so the phone can hide both selects with one
   rule; on a laptop it dissolves and they stay flex items of the bar */
.barsel{display:contents}
.fsect.sel-sect{display:none}
.seltwo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seltwo .selbox{width:100%;max-width:none;height:40px;font-size:15px}
@media(max-width:760px){
  /* --- iOS zooms into any field smaller than 16px the moment it is
     tapped, which is the "the page jumped out of its frame" people see
     when they start typing. 16px is the threshold; nothing else stops it. --- */
  input,select,textarea{font-size:16px}
  .searchwrap input{height:38px;font-size:16px}
  .lbl-narrow{display:inline}
  /* --- the bar never scrolls sideways again: search grows, the two
     buttons keep their size, the two selects have moved into the sheet --- */
  .fbar-row{overflow-x:visible;flex-wrap:nowrap;cursor:default}
  .searchwrap{flex:1 1 auto;min-width:0}
  .homebtn,.fpill,.clr{flex:0 0 auto}
  .barsel{display:none}
  .fsect.sel-sect{display:block}
  /* --- every modal becomes a sheet from the bottom, sized to the real
     screen (dvh follows the browser bar), with its buttons pinned where
     the thumb already is --- */
  .scrim{align-items:end;padding:0}
  .modal{width:100%;max-width:none;border-radius:20px 20px 0 0;max-height:92vh;max-height:92dvh;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));animation:sheetup .22s ease-out}
  .toybox,.toybox.wide,.acctpanel{width:100%}
  .toybtns{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));background:var(--card);
    padding:10px 0 calc(6px + env(safe-area-inset-bottom));margin:10px -2px 0;z-index:2;
    box-shadow:0 -10px 14px -8px rgba(23,54,93,.15)}
  .toybtns .btn{min-height:44px}
  .sheet{max-height:92vh;max-height:92dvh;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  html.boxopen{overflow:hidden}
  html.boxopen .mobtabs,html.boxopen .maptools{display:none}
  /* --- the bottom edge respects the home indicator --- */
  .mobtabs{bottom:calc(12px + env(safe-area-inset-bottom))}
  .maptools{bottom:calc(60px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(112px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);text-align:center;line-height:1.4}
  .fdrawer{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  /* --- targets a thumb can hit --- */
  .chip{min-height:36px}
  .btn{min-height:40px}
  .leaflet-control-attribution{font-size:9px;padding:1px 4px}
  .leaflet-control-attribution a[href*="leafletjs"],.leaflet-control-attribution span[aria-hidden]{display:none}
}

/* ============ map tools, cut down for a phone ============
   Five controls used to share one bottom strip: what a pin shows, which
   basemap to draw, the dice, the radius toggle, and fit-to-screen. On a
   phone that strip is wider than the screen and the strip scrolled
   sideways to reach anything past the second button.

   A phone keeps two of the five: what a pin shows (a real choice worth
   making) and the dice (the reason this page exists). The rest go:
   satellite needs a switcher a phone has no room for, so it is dropped
   entirely rather than half-offered; fit-to-screen duplicates what a
   pinch-zoom already does; and the radius toggle lives one tap away
   inside the filter sheet already, so it does not need a second entrance
   at the one part of the screen already fighting for space. */
@media(max-width:760px){
  .maptools .basemapsw,.maptools .radiusbtn,.maptools .fitbtn{display:none}
}

/* the "show more" slot under a long list — see PAGE in index.html */
.pagemore{display:flex;justify-content:center;padding:14px 18px 4px}
.pagemore .btn{min-width:min(320px,70%)}

/* ---- the "who found it" cards ----
   These used to be one big button whose only job was to filter. Once each
   one had to explain what Thai SELECT actually is, a paragraph and a link
   out could not live inside a <button>, so the card became a plain card
   with its actions at the foot. margin-top:auto on the action row keeps
   those buttons on one line across the grid when one guide needs three
   lines of explanation and its neighbour needs one. */
.whocard{display:flex;flex-direction:column;gap:11px}
.whocard-h{display:flex;gap:11px;align-items:center}
.whocard-h h3{font-size:15.5px;line-height:1.25}
.whocard-h .srcav{width:38px;height:38px;font-size:13px;flex:0 0 auto}
.whoabout{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink-soft)}
.whocard-a{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.whocard-a .btn{white-space:nowrap}

/* Charlie's line, given the room the guide's paragraph used to take.
   It is one sentence, so it is set large and let alone. */
.verdictbox{display:flex;gap:14px;align-items:center;padding:15px 17px}
.vdav{width:52px;height:52px;flex:0 0 auto;object-fit:contain}
.vdq{margin:0;font-size:16px;line-height:1.62;color:var(--navy);font-weight:500}

/* LINE: the button is the primary path (a phone cannot scan its own
   screen), the code is there for whoever is reading on a desktop. */
.linebox{display:flex;gap:16px;align-items:center;border:1px solid var(--rule);
  border-radius:var(--r);padding:14px;background:var(--paper);margin-bottom:12px}
.lineqr{width:150px;height:150px;flex:0 0 auto;background:#fff;border-radius:8px;
  padding:6px;display:grid;place-items:center;border:1px solid var(--rule)}
.lineqr img,.lineqr canvas{display:block;max-width:100%;height:auto}
.lineinfo{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lineinfo .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}
.lineinfo p{margin:0}
@media(max-width:520px){.linebox{flex-direction:column;align-items:stretch;text-align:center}
  .lineqr{margin:0 auto}.lineinfo{align-items:center}}