/* Layout concept: a halal-cart menu board. Results come first; everything else waits below or in a sheet.
   Hot-sauce red is the brand and the main action, cart yellow is for votes, green / amber / grey carry halal trust. */
:root{
  --bg:#FFFFFF;--surface:#F5F4F1;--surface2:#ECEAE5;--ink:#141414;--muted:#5E5A55;--line:#E2DFD9;
  --red:#D22B2B;--red-ink:#FFFFFF;--red-soft:#FCEBE9;--yel:#FFC629;--on-yel:#141414;
  --green:#0E7A44;--green-bg:#DDF3E6;--amber:#7C5100;--amber-bg:#FFF0C2;--grey:#55514C;--grey-bg:#EEEDEA;
  --warn-bg:#FFF6DA;--warn-line:#E9B949;--shade:rgba(20,20,20,.45);
  --map-bg:#D7E5EC;--map-land:#FFFFFF;--map-city:#F6F2EA;--map-line:#CFC8BC;--map-hood:#E7E1D6;
  --pin-a:#0E7A44;--pin-b:#F2A900;--pin-c:#A39E96;--pin-edge:#FFFFFF;
  --display:'Archivo','Archivo Fallback','Arial Narrow',system-ui,sans-serif;--body:'Atkinson Hyperlegible','Atkinson Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:14px;--lift:0 1px 2px rgba(20,20,20,.06),0 4px 14px rgba(20,20,20,.06);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#121212;--surface:#1C1B1A;--surface2:#262523;--ink:#F5F2EC;--muted:#B0AAA1;--line:#34322F;--red:#FF5B4F;--red-ink:#121212;--red-soft:#3A1D1B;--yel:#FFD35C;--on-yel:#141414;--green:#5BD69A;--green-bg:#15301F;--amber:#FFD35C;--amber-bg:#3A2F12;--grey:#CFC9C0;--grey-bg:#2A2826;--warn-bg:#2E2611;--warn-line:#8C6C1F;--shade:rgba(0,0,0,.6);--map-bg:#0A0E11;--map-land:#1C1B1A;--map-city:#262523;--map-line:#3E3B37;--map-hood:#2F2D2A;--pin-a:#5BD69A;--pin-b:#FFD35C;--pin-c:#7E786F;--pin-edge:#121212;--lift:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121212;--surface:#1C1B1A;--surface2:#262523;--ink:#F5F2EC;--muted:#B0AAA1;--line:#34322F;--red:#FF5B4F;--red-ink:#121212;--red-soft:#3A1D1B;--yel:#FFD35C;--on-yel:#141414;--green:#5BD69A;--green-bg:#15301F;--amber:#FFD35C;--amber-bg:#3A2F12;--grey:#CFC9C0;--grey-bg:#2A2826;--warn-bg:#2E2611;--warn-line:#8C6C1F;--shade:rgba(0,0,0,.6);--map-bg:#0A0E11;--map-land:#1C1B1A;--map-city:#262523;--map-line:#3E3B37;--map-hood:#2F2D2A;--pin-a:#5BD69A;--pin-b:#FFD35C;--pin-c:#7E786F;--pin-edge:#121212;--lift:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:1100;background:var(--bg)}
h1,h2,h3,h4{font-family:var(--display);font-stretch:78%;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--red)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:1200;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
.js .list:not(.ready)>li:nth-child(n+13){display:none}
.wrap{max-width:1080px;margin:0 auto}

/* header */
/* side shadows fill the page gutters, so cards scrolling underneath never peek out beside the sticky bars */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:1000;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:-24px 0 0 var(--bg),24px 0 0 var(--bg)}
.bar{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-family:var(--display);font-stretch:72%;font-weight:900;font-size:1.65rem;letter-spacing:-.01em;line-height:1}
.brand svg{width:36px;height:36px;flex:none}
.brand b{color:var(--red);font-weight:900}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:999px;font-weight:700;font-size:.95rem}
.nav a:hover{background:var(--surface)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;cursor:pointer;background:var(--red);color:var(--red-ink);
  font-weight:700;padding:10px 18px;border-radius:999px;text-decoration:none;min-height:46px;font-size:1rem;white-space:nowrap}
.btn:hover{filter:brightness(1.06)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.line:hover{border-color:var(--ink)}
.btn.yel{background:var(--yel);color:var(--on-yel)}
.btn[disabled]{opacity:.55;cursor:default}
.addtop{margin-left:8px;min-height:40px;padding:6px 14px}

/* hero + finder */
.hero{padding:26px 0 8px;display:grid;gap:14px}
.hero h1{font-weight:900;font-size:clamp(2.1rem,6.4vw,3.6rem);letter-spacing:-.015em;max-width:18ch}
.hero h1 span{color:var(--red)}
.lead{color:var(--muted);max-width:60ch}
.finder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;background:var(--surface);border-radius:20px;padding:10px}
.fld{display:flex;align-items:center;gap:8px;background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:0 6px 0 12px;min-height:54px;min-width:0}
.fld:focus-within{border-color:var(--ink)}
.fld svg{width:20px;height:20px;flex:none;color:var(--muted)}
.fld input[type=text],.fld input[type=search]{border:0;background:transparent;flex:1;min-width:0;min-height:0;padding:12px 4px;font-size:1.05rem;border-radius:0}
.fld input:focus{outline:none}
.fld .ico{border:0;background:var(--surface);border-radius:10px;min-height:40px;padding:0 12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:.92rem}
.fld .ico:hover{background:var(--surface2)}
.spotnote{font-size:.92rem;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-height:1.5em;padding:0 4px}
.spotnote b{color:var(--ink)}
.linkbtn{background:none;border:0;padding:4px 2px;min-height:44px;color:var(--red);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.quick{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;margin-inline:-2px}
.quick::-webkit-scrollbar{display:none}
.qc{flex:none;border:2px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 15px;font-weight:700;font-size:.95rem;cursor:pointer;min-height:44px;white-space:nowrap}
.qc:hover{border-color:var(--ink)}
.qc[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.qc small{font-weight:400;opacity:.75;margin-left:4px;font-variant-numeric:tabular-nums}
.rowlbl{flex:none;align-self:center;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);min-width:4.6em}
#types{flex-wrap:wrap;overflow:visible}
.spotnote:empty{display:none}
@media (max-width:760px){#types .qc{padding:6px 12px;font-size:.92rem;min-height:40px}#types .rowlbl{min-width:auto;margin-right:4px}}
.quick.cuis .qc{min-height:40px;padding:6px 13px;font-size:.9rem;border-width:1.5px}

/* results */
.reshead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 10px;position:sticky;top:calc(60px + env(safe-area-inset-top,0px));z-index:900;background:var(--bg);padding:8px 0;box-shadow:-24px 0 0 var(--bg),24px 0 0 var(--bg)}
.reshead h2{font-size:1.45rem;font-weight:900}
.count{color:var(--muted);font-size:.9rem;margin-top:2px}
.tools{display:flex;gap:8px;align-items:center}
.seg{display:inline-flex;background:var(--surface);border-radius:999px;padding:4px}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 16px;font-weight:700;cursor:pointer;min-height:44px}
.seg button[aria-pressed="true"]{background:var(--bg);box-shadow:var(--lift)}
.fbtn{position:relative}
.fbtn .n{background:var(--red);color:var(--red-ink);border-radius:999px;font-size:.75rem;padding:1px 7px;margin-left:2px}
.rankline{font-size:.9rem;color:var(--muted);margin:-2px 0 10px;max-width:70ch}
.list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"rank info yum" "acts acts acts";gap:4px 12px;align-items:start;box-shadow:var(--lift);min-width:0}
/* Named areas keep the Yum button in its own column whatever is hidden, so long text can never push it over the card edge. */
.card>.rank{grid-area:rank}.card>.info{grid-area:info;min-width:0}.card>.yum{grid-area:yum;justify-self:end}.card>.acts{grid-area:acts}
.card.flash{animation:flash 1.6s}
@keyframes flash{0%,40%{box-shadow:0 0 0 4px var(--yel)}}
.rank{font-family:var(--display);font-stretch:72%;font-weight:900;font-size:1.35rem;min-width:1.4ch;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px}
.rank.top{color:var(--red)}
.rank:empty{display:none}
.card.norank{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info yum" "acts acts"}
.card.norank>.rank{display:none}
.name{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:1.3rem;line-height:1.1;overflow-wrap:anywhere}
.name a{color:inherit;text-decoration:none;display:inline-block;padding-block:11px;margin-block:-11px}
.name a:hover{text-decoration:underline;text-underline-offset:3px}
.meta{color:var(--muted);font-size:.92rem;margin-top:3px}
.meta .dist{color:var(--ink);font-weight:700;white-space:nowrap}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.trust{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:2px 8px;font-size:.8rem;font-weight:700;white-space:nowrap}
.trust svg{width:13px;height:13px}
.t-A{background:var(--green-bg);color:var(--green)}
.t-B{background:var(--amber-bg);color:var(--amber)}
.t-C{background:var(--grey-bg);color:var(--grey)}
.fact{display:inline-flex;border-radius:6px;padding:2px 8px;font-size:.8rem;font-weight:700;background:var(--surface);color:var(--ink);white-space:nowrap}
.fact.warn{background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn-line)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.act{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.9rem;text-decoration:none;color:var(--ink);cursor:pointer;min-height:40px}
.act:hover{border-color:var(--ink)}
.act svg{width:16px;height:16px}
.act.main{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.yum{display:grid;justify-items:center;gap:0;border:2px solid var(--line);background:var(--bg);border-radius:14px;padding:6px 10px 5px;cursor:pointer;min-width:62px;min-height:58px;line-height:1.1}
.yum:hover{border-color:var(--yel)}
.yum svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.yum .n{font-family:var(--display);font-stretch:72%;font-weight:900;font-size:1.15rem;font-variant-numeric:tabular-nums}
.yum .yl{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.yum[aria-pressed="true"]{background:var(--yel);border-color:var(--yel);color:var(--on-yel)}
.yum[aria-pressed="true"] .yl{color:var(--on-yel)}
.yum.bump .n{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.45)}}
.part{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:1300}
.more{display:flex;justify-content:center;margin:16px 0 4px}
.empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--muted);border:2px dashed var(--line);border-radius:var(--r);display:grid;gap:10px;justify-items:center}
.mapbox{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
#map{height:min(66vh,600px);min-height:360px;background:var(--map-bg)}
.maptip{position:absolute;left:10px;bottom:10px;z-index:500;background:var(--bg);border-radius:10px;padding:6px 10px;font-size:.85rem;color:var(--muted);box-shadow:var(--lift);max-width:calc(100% - 20px)}
.leaflet-container{background:var(--map-bg);font-family:var(--body);color:var(--ink)}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--bg);color:var(--ink);border-bottom-color:var(--line)}
.leaflet-control-attribution{background:var(--bg)!important;color:var(--muted)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--red)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--bg);color:var(--ink)}
.leaflet-popup-content-wrapper{border-radius:12px}
.leaflet-popup-content{margin:12px 14px;font-size:.92rem;line-height:1.4;display:grid;gap:4px}
.leaflet-popup-content b{font-family:var(--display);font-stretch:80%;font-size:1.1rem}
.maplbl{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:12px;color:var(--muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;pointer-events:none}
.youpin{width:18px;height:18px;border-radius:50%;background:var(--red);border:3px solid var(--pin-edge);box-shadow:0 0 0 5px rgba(210,43,43,.25)}

/* sheets (filters, place details) */
dialog.sheet{border:0;padding:0;background:var(--bg);color:var(--ink);width:min(640px,100vw);max-width:100vw;max-height:min(88vh,860px);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.sheet::backdrop{background:var(--shade)}
@media (max-width:640px){dialog.sheet{margin:auto 0 0;width:100vw;border-radius:20px 20px 0 0;max-height:90vh}}
.sh-head{position:sticky;top:0;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px max(18px,env(safe-area-inset-left,0px)) 10px;border-bottom:1px solid var(--line);z-index:2}
.sh-head h3{font-size:1.5rem;font-weight:900;overflow-wrap:anywhere}
.x{border:0;background:var(--surface);border-radius:999px;width:42px;height:42px;font-size:1.4rem;line-height:1;cursor:pointer;flex:none}
.sh-body{padding:16px max(18px,env(safe-area-inset-left,0px)) calc(20px + env(safe-area-inset-bottom,0px));display:grid;gap:18px}
.sh-body h4{font-size:1.05rem;font-weight:800;margin-bottom:6px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:5px;min-width:0}
.field>span{font-weight:700;font-size:.92rem}
.field small{color:var(--muted);font-weight:400}
select,input[type=text],input[type=search],textarea{width:100%;background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:10px 12px;min-height:48px}
select:focus,input:focus,textarea:focus{border-color:var(--ink);outline:none}
textarea{resize:vertical}
.toggles{display:grid;gap:8px}
.tg{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;background:var(--surface);border-radius:12px;cursor:pointer}
.tg input{width:22px;height:22px;accent-color:var(--red);flex:none}
.tg small{display:block;color:var(--muted);font-size:.85rem}
.legend{display:grid;gap:8px;font-size:.92rem;color:var(--muted)}
.legend .trust{margin-right:6px}
.sh-foot{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.pd-top{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pd-yum{white-space:normal;text-align:left}
.said{font-size:1rem}
.src{font-size:.88rem;color:var(--muted);margin-top:6px}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0;font-size:.95rem;background:var(--surface);border-radius:12px;padding:12px 14px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:700}
.facts dd.unk{font-weight:400;color:var(--muted)}
.headsup{background:var(--warn-bg);border-left:4px solid var(--warn-line);border-radius:8px;padding:10px 12px;font-size:.95rem}
.headsup b{display:block}
.links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.contact{font-weight:700;user-select:all}
.tray{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:2px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.88rem;cursor:pointer;min-height:40px}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.vform{display:grid;gap:10px;background:var(--surface);border-radius:12px;padding:12px}
.radios{display:flex;gap:6px;flex-wrap:wrap}
.radios label{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.9rem;cursor:pointer;background:var(--bg)}
.radios input{accent-color:var(--red);margin:0}
.copyrow input{min-height:40px;font-size:.9rem}
.clist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.clist li{background:var(--surface);border-radius:12px;padding:10px 12px;font-size:.95rem}
.clist .who{font-weight:700}
.clist .when{color:var(--muted);font-size:.82rem;margin-left:6px}
.clist .pend{font-size:.75rem;font-weight:700;color:var(--amber);background:var(--amber-bg);border-radius:6px;padding:1px 7px;margin-left:6px}
.clist .none{color:var(--muted);background:none;padding:0}
.cform{display:grid;gap:8px}
.crow{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.fine{font-size:.85rem;color:var(--muted)}

/* sections below results */
.sec{padding:44px 0 8px}
.sec>h2{font-size:clamp(1.7rem,4.4vw,2.4rem);font-weight:900;letter-spacing:-.01em}
.sec>p.sub{color:var(--muted);margin-top:6px;max-width:62ch}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.panel{background:var(--surface);border-radius:20px;padding:18px;min-width:0}
.panel h3{font-size:1.45rem;font-weight:900}
.hint{color:var(--muted);font-size:.92rem;margin-top:4px}
.fo{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin-top:14px}
.fo-vs{align-self:center;font-family:var(--display);font-weight:900;color:var(--muted)}
.pick{border:2px solid var(--line);background:var(--bg);border-radius:14px;padding:12px;text-align:left;cursor:pointer;min-width:0;display:grid;gap:5px;align-content:start}
.pick:hover{border-color:var(--ink)}
.pick.won{border-color:var(--yel);background:var(--warn-bg)}
.pick .pn{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:1.15rem;line-height:1.1;overflow-wrap:anywhere}
.pick .pm{color:var(--muted);font-size:.85rem}
.streak{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.streak b{color:var(--ink);font-variant-numeric:tabular-nums}
.fo-res{min-height:1.5em;font-size:.95rem;margin-top:10px}
.sel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.spin-out{margin-top:12px;border-radius:14px;background:var(--bg);padding:16px;min-height:132px;display:grid;gap:6px;align-content:center}
.spin-name{font-family:var(--display);font-stretch:78%;font-weight:900;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.05;overflow-wrap:anywhere}
.spin-name.rolling{color:var(--muted)}
.spin-meta{color:var(--muted);font-size:.92rem}
.spin-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.level{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:12px}
.level b{font-family:var(--display);font-stretch:78%;font-size:1.6rem;font-weight:900}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:14px}
.stamp{border:2px dashed var(--line);border-radius:14px;padding:12px 8px;text-align:center;background:transparent;cursor:pointer;display:grid;gap:3px;min-width:0}
.stamp .sn{font-family:var(--display);font-stretch:80%;font-weight:800;line-height:1.1}
.stamp .sc{font-size:.8rem;color:var(--muted)}
.stamp.got{border:2px solid var(--red);background:var(--red-soft)}
.stamp.got .sc{color:var(--red);font-weight:700}
.ring{width:32px;height:32px;margin:0 auto 2px;color:var(--line)}
.stamp.got .ring{color:var(--red)}
.promise{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.promise li{background:var(--surface);border-radius:14px;padding:14px}
.promise b{font-family:var(--display);font-stretch:80%;font-size:1.15rem;font-weight:800;display:block;margin-bottom:3px}
.promise p{color:var(--muted);font-size:.93rem}
.ledger{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:.92rem}
.ledger b{display:block;font-family:var(--display);font-stretch:72%;font-weight:900;font-size:1.8rem;color:var(--ink);font-variant-numeric:tabular-nums}
.sgform{display:grid;gap:12px;margin-top:16px}
.sgrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:8px;align-items:center;font-size:.95rem}
.check input{accent-color:var(--red);width:20px;height:20px}
.status{font-size:.88rem;color:var(--muted)}
.safe{font-size:.88rem;background:var(--bg);border-radius:10px;padding:10px 12px}
.inbox-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.inbox-list li{background:var(--surface);border-radius:14px;padding:12px 14px;display:grid;gap:6px}
.inbox-list .k{font-family:var(--display);font-weight:800}
.inbox-list .done{opacity:.6}
details{border-bottom:1px solid var(--line);padding:14px 2px}
summary{cursor:pointer;font-weight:700;font-size:1.05rem}
details p{margin-top:8px;color:var(--muted);max-width:70ch}
footer{margin:52px 0 calc(90px + env(safe-area-inset-bottom,0px));padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem;display:grid;gap:10px}
footer .brand{font-size:1.4rem}
footer nav{display:flex;gap:14px;flex-wrap:wrap}
footer nav a{color:var(--ink);font-weight:700}

/* bottom bar on phones */
.dock{display:none}
@media (max-width:760px){
  body{font-size:16px}
  .nav{display:none}
  .addtop{margin-left:auto}
  .finder{grid-template-columns:minmax(0,1fr)}
  .list{grid-template-columns:minmax(0,1fr)}
  .grid2,.sgrow,.fgrid{grid-template-columns:minmax(0,1fr)}
  .fo{grid-template-columns:1fr}
  .fo-vs{text-align:center}
  .dock{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--bg);border-top:1px solid var(--line);
    padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px))}
  .dock button{border:0;background:transparent;display:grid;justify-items:center;gap:2px;font-size:.75rem;font-weight:700;padding:6px 0;min-height:52px;cursor:pointer;color:var(--muted)}
  .dock button svg{width:22px;height:22px}
  .dock button[aria-current="true"]{color:var(--red)}
}
#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:1400;max-width:calc(100vw - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:761px){#toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}}
/* very narrow phones (iPhone SE, folded Galaxy Fold): long buttons wrap, the logo stays on one line,
   and the header Add button hides because the bottom bar already has Add place */
@media (max-width:360px){.btn{white-space:normal;text-align:center}.brand{white-space:nowrap;font-size:1.45rem}.top .addtop{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* sub pages */
.sub main{padding-top:18px;max-width:820px}
.crumbs{font-size:.92rem;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.crumbs a{color:var(--muted)}
.pp h1{font-size:clamp(2rem,6vw,3rem);font-weight:900}
.pp h2{font-size:1.4rem;font-weight:900;margin:26px 0 8px}
.pp .meta{font-size:1rem}
.pp .links{margin-top:14px}
.pp .facts{margin-top:12px}
.near{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.near a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:12px 14px;background:var(--surface);border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700}
.near span{color:var(--muted);font-weight:400;white-space:nowrap}
.cta-box{margin-top:22px;background:var(--surface);border-radius:16px;padding:16px;display:grid;gap:10px}
.legal h1{font-size:clamp(2rem,6vw,2.8rem);font-weight:900}
.legal h2{font-size:1.35rem;font-weight:900;margin:24px 0 6px}
.legal p,.legal li{max-width:68ch;color:var(--ink)}
.legal p+p{margin-top:10px}
.legal ul{padding-left:1.2em;display:grid;gap:6px}
.sub footer{margin-bottom:40px}