*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}

:root{
  --bg:#E9EEF7; --bg2:#DFE6F2;
  --surface:#FFFFFF; --surface2:#F5F8FC;
  --ink:#0E1930; --ink2:#31405C; --muted:#67758E;
  --line:#D2DAE9; --line2:#E5EAF4;
  --ribbon:#1B4BA0; --ribbon-ink:#1B4BA0; --ribbon-soft:#E3EAF9;
  --corn:#B87A08; --corn-bright:#E8A317; --corn-soft:#FBEFD4;
  --tomato:#B93A28; --tomato-soft:#FAE5E1;
  --good:#1F7A4D; --good-soft:#DFF1E7;
  --shadow-1:0 1px 2px rgba(14,25,48,.07);
  --shadow-2:0 2px 4px rgba(14,25,48,.05), 0 14px 34px -18px rgba(14,25,48,.38);
  --shadow-3:0 30px 80px -24px rgba(14,25,48,.5);
  --r:14px;
  --display:"Alfa Slab One",Georgia,serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --read:"Newsreader",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1120; --bg2:#0E1729;
    --surface:#141E34; --surface2:#1A2542;
    --ink:#E9EEF8; --ink2:#C2CCE0; --muted:#8896B2;
    --line:#26324C; --line2:#1C2740;
    --ribbon:#84A9F7; --ribbon-ink:#A8C3FA; --ribbon-soft:#182648;
    --corn:#F0B93F; --corn-bright:#F7CA5E; --corn-soft:#33280D;
    --tomato:#EE8873; --tomato-soft:#3A201B;
    --good:#5FD39B; --good-soft:#12301F;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 4px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.9);
    --shadow-3:0 30px 80px -24px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --bg:#0A1120; --bg2:#0E1729;
  --surface:#141E34; --surface2:#1A2542;
  --ink:#E9EEF8; --ink2:#C2CCE0; --muted:#8896B2;
  --line:#26324C; --line2:#1C2740;
  --ribbon:#84A9F7; --ribbon-ink:#A8C3FA; --ribbon-soft:#182648;
  --corn:#F0B93F; --corn-bright:#F7CA5E; --corn-soft:#33280D;
  --tomato:#EE8873; --tomato-soft:#3A201B;
  --good:#5FD39B; --good-soft:#12301F;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.9);
  --shadow-3:0 30px 80px -24px rgba(0,0,0,.85);
}

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--ui); font-size:15px; line-height:1.5;
  font-synthesis-weight:none;
  min-height:100vh;
}
:focus-visible{outline:2.5px solid var(--corn-bright); outline-offset:2px; border-radius:4px}
.wrap{max-width:1220px;margin:0 auto;padding:0 20px}

/* ---------- masthead ---------- */
.mast{
  background:var(--ribbon);
  color:#fff;
  border-bottom:4px solid var(--corn-bright);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 14px,transparent 14px 28px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mast{background-color:#12224A;border-bottom-color:var(--corn)}}
:root[data-theme="dark"] .mast{background-color:#12224A;border-bottom-color:var(--corn)}
.mast-in{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 32px;padding:26px 0 24px}
.brand{display:flex;flex-direction:column;gap:6px;min-width:0}
.eyebrow{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.72);
}
.wordmark{
  font-family:var(--display); font-weight:400; line-height:.95;
  font-size:clamp(30px,5.6vw,50px); letter-spacing:-.005em;
  color:#fff; text-wrap:balance;
}
.wordmark em{font-style:normal;color:var(--corn-bright)}
.mast-stats{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto;padding-bottom:4px}
.stat{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:8px 13px; min-width:82px;
}
.stat b{display:block;font-size:21px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.68)}

.subline{
  background:var(--bg2); border-bottom:1px solid var(--line);
  font-size:13.5px; color:var(--ink2);
}
.subline .wrap{padding-top:11px;padding-bottom:11px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.subline a{color:var(--ribbon-ink);text-decoration-color:color-mix(in srgb,var(--ribbon-ink) 40%,transparent);text-underline-offset:2px}

/* ---------- toolbar ---------- */
.tools{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tools-in{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 0}
.search{
  flex:1 1 220px; min-width:0; position:relative; display:flex; align-items:center;
}
.search svg{position:absolute;left:12px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.search input{
  width:100%; padding:9px 12px 9px 34px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.search input::placeholder{color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink2);font-size:13px;font-weight:500;
  white-space:nowrap;transition:background .12s,border-color .12s,color .12s;
}
.chip:hover{border-color:var(--ribbon)}
.chip[aria-pressed="true"]{background:var(--ribbon);border-color:var(--ribbon);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:#0A1120}}
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#0A1120}
.sortsel{
  padding:8px 11px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;
}

/* ---------- grid ---------- */
.count{padding:20px 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px;padding-bottom:56px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-1); text-align:left;
  display:flex; flex-direction:column; position:relative;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--ribbon) 45%,var(--line))}
.shot{position:relative;aspect-ratio:6/5;background:var(--surface2);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,12,26,.62),rgba(6,12,26,.06) 45%,transparent 70%)}
.rank{
  position:absolute;left:11px;top:11px;z-index:2;
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--corn-bright);color:#241703;font-family:var(--display);font-size:14px;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.newvendor{
  position:absolute;right:11px;top:11px;z-index:2;
  background:var(--tomato);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;
}
.card-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.vendor{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ribbon-ink)}
.card h3{font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.011em;text-wrap:balance}
.loc{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.tagrow{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:9px}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 7px;border-radius:5px;background:var(--good-soft);color:var(--good)}
.tag.b{background:var(--ribbon-soft);color:var(--ribbon-ink)}
.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;font-size:19px;color:var(--ink);font-weight:700;margin-bottom:5px}

/* ---------- detail ---------- */
.scrim{
  position:fixed;inset:0;z-index:100;background:rgba(6,11,24,.62);
  backdrop-filter:blur(3px);overflow-y:auto;overscroll-behavior:contain;
  padding:min(4vh,40px) 16px;
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.sheet{
  max-width:900px;margin:0 auto;background:var(--surface);border-radius:18px;
  box-shadow:var(--shadow-3);overflow:hidden;animation:rise .22s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion:reduce){.scrim,.sheet{animation:none}.card{transition:none}}
.sheet-hero{position:relative;aspect-ratio:16/9;background:var(--surface2)}
.sheet-hero img{width:100%;height:100%;object-fit:cover}
.sheet-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,12,26,.88),rgba(6,12,26,.15) 55%,rgba(6,12,26,.1))}
.sheet-title{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 26px;color:#fff}
.sheet-title .vendor{color:var(--corn-bright);margin-bottom:6px}
.sheet-title h2{font-family:var(--display);font-weight:400;font-size:clamp(23px,4.2vw,38px);line-height:1.05;letter-spacing:-.008em;text-wrap:balance}
.closeb{
  position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border-radius:10px;
  background:rgba(8,14,30,.6);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);font-size:19px;line-height:1;
}
.closeb:hover{background:rgba(8,14,30,.85)}
.sheet-body{padding:24px 26px 30px;display:grid;grid-template-columns:1fr 268px;gap:30px;align-items:start}
@media (max-width:760px){.sheet-body{grid-template-columns:1fr;gap:24px;padding:20px 18px 26px}.sheet-title{padding:16px 18px}}
.blurb{font-family:var(--read);font-size:17.5px;line-height:1.58;color:var(--ink2)}
.metarow{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line2);font-size:13px;color:var(--muted)}
.metarow b{color:var(--ink2);font-weight:600}
.sec{margin-top:26px}
.sec > h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px}

/* score panel */
.panel{background:var(--surface2);border:1px solid var(--line2);border-radius:14px;padding:18px}
.bigscore{display:flex;align-items:baseline;gap:5px}
.bigscore b{font-family:var(--display);font-weight:400;font-size:52px;line-height:.9;color:var(--corn);font-variant-numeric:tabular-nums}
.bigscore i{font-style:normal;font-size:19px;color:var(--muted);font-weight:600}
.bigscore.none b{font-size:30px;color:var(--muted);font-family:var(--ui);font-weight:700}
.scorenote{font-size:12.5px;color:var(--muted);margin-top:5px}
.dist{display:grid;gap:3px;margin-top:16px}
.distrow{display:grid;grid-template-columns:16px 1fr 22px;gap:8px;align-items:center;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{height:7px;border-radius:4px;background:var(--line2);overflow:hidden}
.bar span{display:block;height:100%;background:var(--corn-bright);border-radius:4px}

/* rate form */
.form{display:grid;gap:13px}
.field{display:grid;gap:5px}
.field label{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--ink2)}
.field label span{font-weight:500;color:var(--muted);letter-spacing:0}
.field input[type=email],.field textarea{
  width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
}
.field textarea{resize:vertical;min-height:74px;font-family:var(--ui);font-size:14px}
.hint{font-size:11.5px;color:var(--muted);line-height:1.45}
.tens{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.ten{
  aspect-ratio:1;border-radius:8px;border:1px solid var(--line);background:var(--surface);
  font-weight:700;font-size:14px;color:var(--ink2);display:grid;place-items:center;
  font-variant-numeric:tabular-nums;transition:background .1s,color .1s,border-color .1s,transform .1s;
}
.ten:hover{border-color:var(--corn-bright);transform:translateY(-1px)}
.ten[aria-pressed="true"]{background:var(--corn-bright);border-color:var(--corn-bright);color:#241703}
.ten.lit{background:var(--corn-soft);border-color:color-mix(in srgb,var(--corn-bright) 50%,var(--line))}
.filebtn{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filebtn input{display:none}
.btn{
  padding:10px 18px;border-radius:10px;font-weight:700;font-size:14px;
  background:var(--ribbon);color:#fff;transition:filter .12s,transform .1s;
}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--ink2);border:1px solid var(--line)}
.btn.sm{padding:7px 13px;font-size:13px}
.thumbprev{display:flex;align-items:center;gap:9px}
.thumbprev img{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.msg{font-size:13px;border-radius:9px;padding:10px 12px;line-height:1.45}
.msg.err{background:var(--tomato-soft);color:var(--tomato)}
.msg.ok{background:var(--good-soft);color:var(--good)}

/* reviews */
.reviews{display:grid;gap:14px}
.rev{display:grid;grid-template-columns:44px 1fr;gap:12px;padding-top:14px;border-top:1px solid var(--line2)}
.rev:first-child{border-top:0;padding-top:0}
.revscore{
  width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:var(--corn-soft);color:var(--corn);font-family:var(--display);font-size:17px;
  font-weight:400;font-variant-numeric:tabular-nums;
}
.revhead{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px;color:var(--muted)}
.revhead b{color:var(--ink2);font-weight:600;font-size:13px}
.revtext{font-family:var(--read);font-size:16px;line-height:1.55;color:var(--ink2);margin-top:5px}
.revimg{margin-top:9px;border-radius:10px;border:1px solid var(--line);max-width:260px;cursor:zoom-in}
.norev{font-size:13.5px;color:var(--muted);font-style:italic}

.foot{padding:34px 0 46px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.6}
.foot a{color:var(--ribbon-ink)}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;
  background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:11px;
  font-size:13.5px;font-weight:600;box-shadow:var(--shadow-3);max-width:min(92vw,440px);
}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

.foot2{margin-top:9px}
.sheettags{margin-top:14px;padding-top:0}
.card .tagrow:empty{display:none}
.rev .revscore{align-self:start}
select.sortsel{cursor:pointer}
@media (max-width:560px){
  .mast-in{padding:20px 0 18px;gap:14px}
  .mast-stats{margin-left:0}
  .stat{padding:7px 11px;min-width:72px}
  .stat b{font-size:18px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
  .card h3{font-size:15px}
  .card-body{padding:11px 12px 13px}
  .blurb{font-size:16.5px}
  .bigscore b{font-size:44px}
  .tens{gap:3px}
  .ten{font-size:13px;border-radius:7px}
}

/* ---------- two-up rating overlay on each card ---------- */
.ovl{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  padding:9px 10px;
}
.ovl-stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;min-width:0}
.ovl-stat.crit{justify-content:flex-end;text-align:right}
.ovl-stat > span{
  flex:0 0 100%;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.66);margin-bottom:1px;
}
.ovl-stat b{
  font-family:var(--display);font-weight:400;font-size:22px;line-height:1;
  color:var(--corn-bright);font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.ovl-stat.crit b{color:#9EC5FF}
.ovl-stat b.none{font-family:var(--ui);font-weight:700;font-size:17px;color:rgba(255,255,255,.5)}
.ovl-stat i{font-style:normal;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.55)}
.ovl-stat em{
  flex:0 0 100%;font-style:normal;font-size:10.5px;font-weight:600;
  color:rgba(255,255,255,.72);margin-top:2px;
}
.shot::after{background:linear-gradient(to top,rgba(6,12,26,.86),rgba(6,12,26,.32) 38%,transparent 68%)}

.factline{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;margin-top:3px;flex-wrap:wrap}
.factline .price{color:var(--ink);font-variant-numeric:tabular-nums}
.factline .wait{display:inline-flex;align-items:center;gap:4px;color:var(--corn);font-weight:600}
.factline .wait svg{width:13px;height:13px;flex:0 0 13px}
.factline .dot{color:var(--line);font-weight:700}
.pstat.facts{display:flex;gap:22px;flex-wrap:wrap}
.pstat.facts .fact b{display:block;font-size:20px;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.pstat.facts .fact span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--muted)}

/* ---------- detail panel stats ---------- */
.panel{display:grid;gap:0;padding:0;overflow:hidden}
.pstat{padding:17px 18px;border-bottom:1px solid var(--line2)}
.pstat:last-child{border-bottom:0}
.plabel{
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin-bottom:7px;
}
.pstat.crit .bigscore b{color:var(--ribbon-ink)}
.pstat.wait{display:flex;align-items:center;gap:11px;color:var(--corn)}
.pstat.wait svg{width:22px;height:22px;flex:0 0 22px}
.pstat.wait b{display:block;font-size:19px;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.pstat.wait span{font-size:12px;color:var(--muted);font-weight:500}
.bigscore.none b{font-size:19px}

/* ---------- review tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tab{
  padding:9px 14px;font-size:13px;font-weight:600;color:var(--muted);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0;
}
.tab:hover{color:var(--ink2);background:var(--surface2)}
.tab[aria-selected="true"]{color:var(--ribbon-ink);border-bottom-color:var(--ribbon)}
.revscore.crit{background:var(--ribbon-soft);color:var(--ribbon-ink)}
.verdict{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--surface2);
  border:1px solid var(--line);color:var(--ink2);
}
.revlink{
  display:inline-block;margin-top:7px;font-size:12.5px;font-weight:600;
  color:var(--ribbon-ink);text-decoration:none;
}
.revlink:hover{text-decoration:underline}
.rev .revtext{text-wrap:pretty}

/* On a phone the food row's fixed columns leave the name almost no width,
   so the photo and both score blocks give some back. */
@media (max-width:560px){
  /* "2026 New Foods" wraps mid-phrase on a narrow tab, so break it after the
     year deliberately rather than wherever the words happen to run out. */
  .tabbtn.yeartab .yr{display:block}
  .frow{gap:10px;padding:10px 11px}
  .fstat{flex-basis:48px}
  .fstat.crit{flex-basis:52px}
  .fscore{height:40px;font-size:15.5px}
  .fsub{font-size:9.5px}
  .fthumb{flex-basis:64px;width:64px;height:64px}
}
@media (max-width:560px){
  .ovl{padding:7px 8px}
  .ovl-stat b{font-size:18px}
  .ovl-stat > span{font-size:8.5px;letter-spacing:.1em}
  .ovl-stat em{font-size:9.5px}
  .tab{padding:8px 10px;font-size:12.5px}
}

.rank.crit{background:var(--ribbon);color:#fff}
.rank.cont{background:var(--tomato);color:#fff}
.held{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:5px}
.revnolink{display:inline-block;margin-top:7px;font-size:12px;color:var(--muted);font-style:italic}

/* day + hour selects that appear once a wait is entered */
.hide{display:none !important}
.when{display:flex;gap:6px;margin-top:7px}
.when select{
  flex:1 1 0;min-width:0;padding:8px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:13px;cursor:pointer;
}
.namefield{animation:slidein .16s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.namefield{animation:none}}

/* the wait stat is a button that opens a breakdown */
button.fact{text-align:left;padding:0;background:none;border:0}
.waitfact{display:block}
.waitfact span{display:block}
.waitfact em{
  display:inline-block;margin-top:4px;font-style:normal;font-size:11px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--corn);
  border-bottom:1.5px dotted color-mix(in srgb,var(--corn) 55%,transparent);
}
.waitfact:hover b{color:var(--corn)}
.waitfact:hover em{border-bottom-color:var(--corn)}
.waitfact[aria-expanded="true"] em{color:var(--ink2);border-bottom-color:var(--line)}
.waitbreak{padding:0 18px 17px}
.waitbreak h5{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:12px 0 7px;
}
.bd{display:grid;gap:4px}
.bdrow{display:grid;grid-template-columns:38px 1fr 34px 18px;gap:7px;align-items:center;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bdk{font-weight:700;color:var(--ink2)}
.bdbar{height:7px;border-radius:4px;background:var(--line2);overflow:hidden}
.bdbar span{display:block;height:100%;background:var(--corn-bright);border-radius:4px}
.bdv{font-weight:700;color:var(--ink2);text-align:right}
.bdn{text-align:right;opacity:.65}
.nobreak{font-size:12.5px;color:var(--muted);font-style:italic;padding-top:10px}

/* diet + allergen multi-select */
.dd{position:relative}
.dd summary{
  list-style:none;cursor:pointer;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink2);
  font-size:13px;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:7px;
}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:"\25be";font-size:11px;color:var(--muted)}
.dd summary:hover{border-color:var(--ribbon)}
.dd[open] summary{border-color:var(--ribbon);background:var(--ribbon-soft);color:var(--ribbon-ink)}
.dd summary b{
  background:var(--ribbon);color:#fff;font-size:11px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;padding:0 5px;
}
.ddpanel{
  position:absolute;z-index:60;top:calc(100% + 7px);left:0;width:min(300px,88vw);
  background:var(--surface);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--shadow-2);padding:14px;max-height:min(60vh,460px);overflow-y:auto;
}
.ddpanel h5{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:0 0 7px;
}
.ddpanel h5 + .ddrow{margin-top:0}
.ddpanel h5 ~ h5{margin-top:15px;padding-top:13px;border-top:1px solid var(--line2)}
.ddrow{display:flex;align-items:center;gap:9px;padding:6px 2px;cursor:pointer;font-size:14px}
.ddrow input{width:17px;height:17px;accent-color:var(--ribbon);cursor:pointer;flex:0 0 17px}
.ddrow:hover span{color:var(--ribbon-ink)}
.ddnote{
  font-size:11.5px;line-height:1.45;color:var(--muted);
  margin:0 0 14px;padding:9px 11px;border-radius:9px;
  background:var(--surface2);border:1px solid var(--line2);
}
.ddpanel h5:first-of-type{margin-top:0}
#ddclear{margin-top:11px;width:100%}
/* On a narrow screen the button can sit anywhere in the wrapped toolbar, so
   anchoring the panel to it (either edge) pushes the panel off screen. Drop it
   out of the button's positioning entirely and span the toolbar instead. */
@media (max-width:700px){
  .tools-in{position:relative}
  .dd{position:static}
  .ddpanel{left:0;right:0;width:auto;top:calc(100% + 9px);max-height:min(64vh,430px)}
}

/* ============ /all : stands and full menu ============ */
.booting{padding:22vh 20px;text-align:center;color:var(--muted)}
.booting p{margin-top:16px;font-size:15px}
.spin.big{width:26px;height:26px;border-width:3px;border-color:var(--line);border-top-color:var(--ribbon)}

.viewtog{display:flex;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.vt{padding:6px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.vt[aria-pressed="true"]{background:var(--ribbon);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vt[aria-pressed="true"]{color:#0A1120}}
:root[data-theme="dark"] .vt[aria-pressed="true"]{color:#0A1120}

.card.stand .shot{aspect-ratio:16/10;background:var(--surface2)}
.shot .noshot,.shot.noimg{background:
  repeating-linear-gradient(135deg,var(--surface2) 0 10px,var(--bg2) 10px 20px);
  width:100%;height:100%}
.card.stand h3{font-size:17px}
.pill{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:5px;
  background:var(--ribbon-soft);color:var(--ribbon-ink);
}
.pill.new{background:var(--corn-soft);color:var(--corn)}
.pill.deal{background:var(--good-soft);color:var(--good)}

/* flat food list - see the block further down, which wins */
.more{width:100%;margin:14px 0 40px}

/* stand sheet extras */
.sheet-hero.plain{aspect-ratio:auto;min-height:132px;background:var(--ribbon)}
.backb{
  position:absolute;top:14px;left:14px;z-index:3;max-width:52%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  background:rgba(8,14,30,.6);backdrop-filter:blur(6px);color:#fff;
  border:1px solid rgba(255,255,255,.18);border-radius:10px;
  padding:8px 13px;font-size:13px;font-weight:600;
}
.backb:hover{background:rgba(8,14,30,.85)}
.dietnote{
  margin-top:14px;padding:11px 13px;border-radius:10px;background:var(--good-soft);
  color:var(--good);font-size:13px;line-height:1.5;
}
.offer{
  margin-top:12px;padding:12px 14px;border-radius:11px;
  background:var(--corn-soft);border:1px solid color-mix(in srgb,var(--corn) 28%,transparent);
}
.offer b{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--corn);margin-bottom:5px}
.offer ul{display:grid;gap:4px}
.offer li{font-size:14px;color:var(--ink2);line-height:1.45}
.locs{display:grid;gap:9px}
.locs li{font-size:14px;color:var(--ink2);line-height:1.45;padding-left:16px;position:relative}
.locs li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--tomato)}
.locs em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.locs a{color:var(--ribbon-ink);font-size:12.5px;font-weight:600}

.menuhead{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:16px 0 8px}
.menu{display:grid;gap:2px}
.mrow{
  display:grid;grid-template-columns:44px 1fr 40px;gap:11px;align-items:center;
  text-align:left;padding:9px 11px;border-radius:10px;border:1px solid transparent;
}
.mrow:hover{background:var(--surface2);border-color:var(--line2)}
.mscore{
  height:36px;border-radius:8px;display:grid;place-items:center;
  background:var(--corn-soft);color:var(--corn);font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;
}
.mscore.none{background:var(--surface2);color:var(--muted)}
.mname{font-size:14.5px;font-weight:600;line-height:1.3}
.mname em{display:block;font-style:normal;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.mcrit{text-align:right;font-size:13px;font-weight:700;color:var(--ribbon-ink)}
.mcrit.dim{color:var(--line);font-weight:400;font-size:18px}
.tag.warn{background:var(--tomato-soft);color:var(--tomato)}
@media (max-width:560px){
  .frow{grid-template-columns:44px 1fr;gap:10px;padding:10px 12px}
  .fmeta{display:none}
  .mrow{grid-template-columns:38px 1fr 22px;gap:9px}
}

.crosslink{
  display:inline-block;margin-top:14px;align-self:flex-start;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  color:#fff;text-decoration:none;font-size:13.5px;font-weight:600;
  padding:9px 16px;border-radius:999px;
}
.crosslink:hover{background:rgba(255,255,255,.22)}

/* ---------- the three boards ---------- */
.tabrow{display:flex;gap:8px;padding:14px 0 0;flex-wrap:wrap}
.tabbtn{
  flex:1 1 0;min-width:132px;text-align:left;
  padding:11px 15px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);transition:border-color .12s,background .12s;
}
.tabbtn b{display:block;font-size:14px;font-weight:700;color:var(--ink2);line-height:1.25}
.tabbtn > span{
  display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;
}
.tabbtn:hover{border-color:var(--ribbon)}
.tabbtn[aria-pressed="true"]{background:var(--ribbon);border-color:var(--ribbon)}
.tabbtn[aria-pressed="true"] b{color:#fff}
.tabbtn[aria-pressed="true"] > span{color:rgba(255,255,255,.72)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tabbtn[aria-pressed="true"] b{color:#0A1120}
  :root:not([data-theme="light"]) .tabbtn[aria-pressed="true"] > span{color:rgba(10,17,32,.66)}
}
:root[data-theme="dark"] .tabbtn[aria-pressed="true"] b{color:#0A1120}
:root[data-theme="dark"] .tabbtn[aria-pressed="true"] > span{color:rgba(10,17,32,.66)}
.tools-in{padding-top:12px}

/* ---------- stands ---------- */
.booting{padding:16vh 20px;text-align:center;color:var(--muted)}
.booting p{margin-top:14px;font-size:14.5px}
.spin.big{width:24px;height:24px;border-width:3px;border-color:var(--line);border-top-color:var(--ribbon)}
.card.stand .shot{aspect-ratio:16/10;background:var(--surface2)}
.shot .noshot{width:100%;height:100%;
  background:repeating-linear-gradient(135deg,var(--surface2) 0 10px,var(--bg2) 10px 20px)}
.shot.noimg img{display:none}
.shot.noimg{background:repeating-linear-gradient(135deg,var(--surface2) 0 10px,var(--bg2) 10px 20px)}
.card.stand h3{font-size:16.5px}
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:5px;
  background:var(--ribbon-soft);color:var(--ribbon-ink)}
.pill.new{background:var(--corn-soft);color:var(--corn)}
.pill.deal{background:var(--good-soft);color:var(--good)}

/* ---------- flat food list ---------- */
.flist{display:grid;gap:2px;padding-bottom:8px}
.frow{display:flex;gap:13px;align-items:center;
  text-align:left;padding:11px 14px;border-radius:11px;background:var(--surface);
  border:1px solid var(--line2)}
.frow:hover{border-color:var(--ribbon);background:var(--surface2)}
/* A score and its count, stacked. Two per row: users on the left, critics
   on the right, so the two verdicts read as a pair. */
.fstat{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;gap:4px}
.fstat.crit{flex-basis:62px}
.fscore{width:100%;height:44px;border-radius:9px;display:grid;place-items:center;
  background:var(--corn-soft);color:var(--corn);font-family:var(--display);
  font-size:17px;font-variant-numeric:tabular-nums}
.fscore.crit{background:var(--ribbon-soft);color:var(--ribbon-ink)}
.fscore.none{background:var(--surface2);color:var(--muted);font-family:var(--ui);font-weight:700;font-size:15px}
.fsub{font-size:10.5px;line-height:1.2;color:var(--muted);text-align:center;white-space:nowrap}
/* Photo sits right after the user score, and is what makes the row tall. */
.fthumb{flex:0 0 88px;width:88px;height:88px;border-radius:9px;object-fit:cover;
  background:var(--surface2);display:block}
.frow.pic{padding:12px 14px}
.fmain{flex:1 1 auto;min-width:0}
.fname{display:block;font-size:15px;font-weight:600;line-height:1.3}
.fstand{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.more{width:100%;margin:14px 0 10px}
.genbox{margin:6px 0 44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.genbox summary{cursor:pointer;padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--ink2);list-style:none}
.genbox summary::-webkit-details-marker{display:none}
.genbox summary::before{content:"▸ ";color:var(--muted)}
.genbox[open] summary::before{content:"▾ "}
.genlist{padding:0 16px 14px;display:grid;gap:5px}
.genrow{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:5px 0;border-top:1px solid var(--line2)}
.genrow b{font-weight:600;color:var(--ink2)}
.genrow span{color:var(--muted);white-space:nowrap}

/* ---------- stand sheet ---------- */
.sheet-hero.plain{aspect-ratio:auto;min-height:128px;background:var(--ribbon)}
.backb{position:absolute;top:14px;left:14px;z-index:3;max-width:52%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;background:rgba(8,14,30,.6);backdrop-filter:blur(6px);
  color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px 13px;
  font-size:13px;font-weight:600}
.backb:hover{background:rgba(8,14,30,.85)}
.dietnote{margin-top:14px;padding:11px 13px;border-radius:10px;background:var(--good-soft);
  color:var(--good);font-size:13px;line-height:1.5}
.offer{margin-top:12px;padding:12px 14px;border-radius:11px;background:var(--corn-soft);
  border:1px solid color-mix(in srgb,var(--corn) 28%,transparent)}
.offer b{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--corn);margin-bottom:5px}
.offer ul{display:grid;gap:4px}
.offer li{font-size:14px;color:var(--ink2);line-height:1.45}
.locs{display:grid;gap:9px}
.locs li{font-size:14px;color:var(--ink2);line-height:1.45;padding-left:16px;position:relative}
.locs li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--tomato)}
.locs em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.locs a{color:var(--ribbon-ink);font-size:12.5px;font-weight:600}
.menuhead{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:16px 0 8px}
.menu{display:grid;gap:2px}
.mrow{display:grid;grid-template-columns:44px 1fr 40px;gap:11px;align-items:center;
  text-align:left;padding:9px 11px;border-radius:10px;border:1px solid transparent;width:100%}
.mrow:hover{background:var(--surface2);border-color:var(--line2)}
.mrow.flat{opacity:.62;cursor:default}
.mrow.flat:hover{background:none;border-color:transparent}
.mscore{height:36px;border-radius:8px;display:grid;place-items:center;background:var(--corn-soft);
  color:var(--corn);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.mscore.none{background:var(--surface2);color:var(--muted)}
.mname{font-size:14.5px;font-weight:600;line-height:1.3}
.mname em{display:block;font-style:normal;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.mcrit{text-align:right;font-size:13px;font-weight:700;color:var(--ribbon-ink)}
.mcrit.dim{color:var(--line);font-weight:400;font-size:18px}
.tag.warn{background:var(--tomato-soft);color:var(--tomato)}
@media (max-width:560px){
  .tabbtn{min-width:0;padding:9px 11px}
  .tabbtn b{font-size:12.5px}
  .tabbtn > span{font-size:10px;letter-spacing:.06em}
  .frow{grid-template-columns:44px 1fr;gap:10px;padding:10px 12px}
  .fmeta{display:none}
  .mrow{grid-template-columns:38px 1fr 22px;gap:9px}
}

/* stand cards put the qualifier under the number instead of a label above */
.ovl.bare .ovl-stat > span{display:none}
.ovl.bare .ovl-stat{align-content:flex-end}
/* one line, always: if this wraps the overlay grows and collides with the
   rank badge above it */
.ovl.bare .ovl-stat em{
  margin-top:3px;font-size:11px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.ovl.bare .ovl-stat.crit em{text-align:right}
.ovl.bare .ovl-stat.crit:empty{min-height:1px}

/* the separator travels with the wait time so it is never left stranded at
   the end of a wrapped line */
.factline{gap:6px}
.factline .menucount{color:var(--ink2);font-weight:600;white-space:nowrap}
.factline .wait{white-space:nowrap}
.factline .wait::before{content:"·";margin-right:7px;color:var(--line);font-weight:700}
.factline .dot{display:none}

@media (max-width:620px){
  .ovl.bare .ovl-stat em{font-size:9.5px;letter-spacing:-.01em}
  .ovl.bare .ovl-stat b{font-size:19px}
  .ovl.bare .ovl-stat i{font-size:10px}
}

/* on a stand card both numbers are the crowd's, so both are gold */
.ovl-stat.food{justify-content:flex-end;text-align:right}
.ovl-stat.food b{color:var(--corn-bright)}
.ovl-stat.food i{font-style:normal;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.55)}
.ovl-stat.food b.none{font-family:var(--ui);font-weight:700;font-size:17px;color:rgba(255,255,255,.5)}
.ovl.bare .ovl-stat.food em{text-align:right}

.ovl.bare .ovl-stat.wide{grid-column:1 / -1}
.ovl.bare .ovl-stat.wide b.none{font-family:var(--ui);font-weight:700;font-size:13px;
  letter-spacing:.02em;color:rgba(255,255,255,.72)}
.ovl.bare .ovl-stat b.none{font-size:20px}

/* rate the stand and everything you ate, in one pass */
.submitrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.submitrow .btn{flex:0 0 auto}
.picker{
  margin-top:16px;padding:14px;border-radius:13px;
  background:var(--surface2);border:1px solid var(--line2);
}
.picker h5{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:0 0 10px;
}
.picklist{
  display:grid;gap:1px;max-height:190px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:5px;
}
.pickrow{
  display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;
  cursor:pointer;font-size:14px;color:var(--ink2);
}
.pickrow:hover{background:var(--surface2)}
.pickrow.on{background:var(--ribbon-soft);color:var(--ribbon-ink);font-weight:600}
.pickrow input{width:16px;height:16px;accent-color:var(--ribbon);cursor:pointer;flex:0 0 16px}
.pickrow em{font-style:normal;font-size:11px;color:var(--muted);margin-left:4px}
.xcards{display:grid;gap:10px;margin-top:12px}
.xcard{
  padding:12px;border-radius:11px;background:var(--surface);
  border:1px solid var(--line);
}
.xhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.xhead b{font-size:14.5px;font-weight:700;color:var(--ink)}
.xdrop{
  width:26px;height:26px;border-radius:7px;color:var(--muted);font-size:13px;
  flex:0 0 26px;display:grid;place-items:center;
}
.xdrop:hover{background:var(--tomato-soft);color:var(--tomato)}
.xnote{
  width:100%;margin-top:9px;padding:8px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface2);color:var(--ink);
  font-family:var(--ui);font-size:13.5px;resize:vertical;min-height:38px;
}
.xcard .tens{grid-template-columns:repeat(10,1fr);gap:3px}
.xcard .ten{font-size:13px;border-radius:7px}
@media (max-width:560px){
  .submitrow{flex-direction:column;align-items:stretch}
  .submitrow .btn{width:100%}
  .picklist{max-height:160px}
}

/* the display name field travels to whichever review box is being typed in,
   so inside a food card it needs the card's own spacing */
.xcard > .namefield{margin-top:10px}
.xcard > .namefield label{font-size:11.5px}
.xcard > .namefield input{
  padding:8px 10px;border-radius:8px;background:var(--surface2);font-size:13.5px;
}

/* Ingredient list on an item sheet, straight from the fair's menu page. */
.ingr{margin:0;padding-left:18px;display:grid;gap:3px}
.ingr li{font-size:14px;line-height:1.45}
.ingrnote{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
/* A hedged diet chip: nothing in the ingredients conflicts, nobody confirmed it. */
.tag.soft{background:var(--line);color:var(--muted)}
/* Standalone omission note, outside the ingredient block it usually follows. */
.ingrnote.omit{margin:14px 0 0}
/* Tapped-open explanation of a diet chip. Named apart from .dietnote, which is
   the stand sheet's "From the vendor" callout. */
.chipnote{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
/* Only the diet chips are buttons; allergen chips stay plain text. */
.tagrow button.tag{border:0;font:inherit;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.tagrow button.tag:hover{filter:brightness(.95)}
.tagrow button.tag[aria-expanded="true"]{outline:2px solid currentColor;outline-offset:1px}

/* "Your ratings" button and the list behind it. */
.mast-side{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.minebtn{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:11px;
  cursor:pointer;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28)}
.minebtn:hover{background:rgba(255,255,255,.22)}
.minebtn b{font-size:12px;padding:1px 6px;border-radius:6px;background:var(--corn);color:#231703}
.minelist{display:grid;gap:2px}
.minelist .frow{width:100%}
.minerev{display:block;font-size:12.5px;color:var(--ink2);margin-top:4px;
  font-style:italic;line-height:1.4}
.minehold{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
@media (max-width:560px){
  .mast-side{width:100%;justify-content:space-between}
}

/* "you rated this" marker in any list, and the edit hint on the profile page. */
.mineedit{display:block;font-size:11.5px;font-weight:700;color:var(--ribbon-ink);margin-top:4px}
.ratednote{margin:0 0 14px;padding:10px 12px;border-radius:9px;background:var(--corn-soft);
  color:var(--ink2);font-size:13px;line-height:1.5}
.ratednote b{color:var(--corn)}

/* The "?" beside "You rated this 9/10", and the line it reveals. */
.whyb{font:inherit;font-size:11px;font-weight:800;line-height:1;width:17px;height:17px;
  padding:0;margin-left:6px;border-radius:50%;cursor:pointer;vertical-align:middle;
  border:1px solid var(--corn);background:transparent;color:var(--corn)}
.whyb:hover{background:var(--corn);color:#231703}
.whynote{margin:-6px 0 14px;padding:0 12px 11px;font-size:12.5px;line-height:1.5;
  color:var(--ink2);background:var(--corn-soft);border-radius:0 0 9px 9px}
.ratednote:has(+ .whynote){border-radius:9px 9px 0 0;margin-bottom:0}

/* ---------- past years ---------- */
/* The new-foods tab and its year caret share one grid cell. The caret is a
   sibling of the tab button, not a child - a control inside a button is both
   invalid and easy to hit by mistake. */
.tabcell{position:relative;flex:1 1 0;min-width:132px;display:flex}
.tabcell .tabbtn{flex:1 1 auto;min-width:0;padding-right:42px}
.yeartoggle{position:absolute;right:5px;top:5px;bottom:5px;width:32px;padding:0;
  display:grid;place-items:center;cursor:pointer;border:0;border-radius:9px;
  background:transparent;color:var(--muted)}
.yeartoggle svg{width:17px;height:17px}
.yeartoggle:hover{background:var(--surface2);color:var(--ink2)}
.tabbtn[aria-pressed="true"]+.yeartoggle{color:rgba(255,255,255,.8)}
.tabbtn[aria-pressed="true"]+.yeartoggle:hover{background:rgba(255,255,255,.16);color:#fff}
.yeartoggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.yearmenu{position:absolute;z-index:40;top:calc(100% + 6px);right:0;min-width:118px;
  padding:5px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 12px 30px rgba(10,17,32,.18)}
.yearopt{display:block;width:100%;text-align:left;font:inherit;font-size:14px;
  font-weight:700;color:var(--ink2);padding:8px 11px;border:0;border-radius:8px;
  background:transparent;cursor:pointer;font-variant-numeric:tabular-nums}
.yearopt:hover{background:var(--surface2)}
.yearopt[aria-current="true"]{background:var(--ribbon);color:#fff}
/* A food the fair no longer sells. Deliberately quiet - it is a note, not a joke. */
.ripmark{position:absolute;top:10px;right:10px;font-family:var(--display);font-size:13px;
  letter-spacing:.1em;padding:3px 9px;border-radius:6px;background:rgba(12,18,32,.78);
  color:#e6ebf6;border:1px solid rgba(255,255,255,.3)}
.card.rip .shot img{filter:grayscale(.55) contrast(.95)}
.card.rip:hover .shot img{filter:none}
.shot.plain{background:var(--surface2)}
.yearline{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.yearline.rip b{color:var(--tomato)}

/* The year is part of the tab's label, not its count. */
.tabbtn.yeartab .yr{font-variant-numeric:tabular-nums}
/* "Open its page" reads as a link but is a button, so it cannot navigate. */
.golink{font:inherit;font-size:inherit;padding:0;border:0;background:none;cursor:pointer;
  color:var(--ribbon-ink);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--ribbon-ink) 40%,transparent);
  text-underline-offset:2px}
.golink:hover{text-decoration-color:currentColor}
/* Stands in place of the "open its page" link when the vendor has left. */
.vendorrip{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);
  font-size:11.5px;letter-spacing:.09em;padding:3px 9px;border-radius:6px;
  background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
/* A dish showing its stand's photo rather than its own. */
.sheet-hero img.borrowed{opacity:.92}
/* Diet marks on a stand's menu, shown only while a diet filter is on. */
.mdiet{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:5px;
  background:var(--good-soft);color:var(--good);vertical-align:middle;white-space:nowrap}
.mdiet.soft{background:var(--line);color:var(--muted)}
/* Credit on a hero photo taken by a visitor. */
.shotby{position:absolute;top:12px;left:14px;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;padding:4px 9px;border-radius:6px;
  background:rgba(12,18,32,.66);color:#e6ebf6;backdrop-filter:blur(3px)}
/* Packaged-drink rows are buttons now, and the block can open on a search. */
.genbox.open{margin:6px 0 44px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);overflow:hidden}
.genhead{padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--ink2);
  border-bottom:1px solid var(--line)}
button.genrow{width:100%;text-align:left;font:inherit;border:0;background:none;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
button.genrow:hover{background:var(--surface2)}

/* The /tags mirror: same board, every diet verdict drawn. */
.tagsbar{margin:0 0 4px;padding:11px 15px;border-radius:12px;font-size:13px;
  line-height:1.5;color:var(--ink2);background:var(--surface);
  border:1px solid var(--line)}
.tagsbar a{color:var(--accent);font-weight:600}
.tagsum{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:7px;
  font-size:12px;color:var(--muted)}
.tagsum b{color:var(--ink2)}

/* A new item the fair flags on its own stand listing but never put on the
   official new-foods page. */
.newvendor.unoff{background:var(--ribbon-soft);color:var(--ribbon-ink)}