/* ============================================================
   Evan's Food Guide — Apple/iOS design layer
   Loaded AFTER the page's own styles; overrides by specificity.
   Palette: the ORIGINAL Evan's Food Guide red/white (Yelp-style).
   Patterns: grouped inset cards, hairline separators, segmented
   controls, SF type scale. No glass material — solid red chrome.
   ============================================================ */

/* ---------- token remap: light ---------- */
/* Palette = the ORIGINAL evansfoodguide.com values.
   Scoped to plain :root only, so the site's own dark-mode rules
   (which are attribute-scoped and therefore more specific) still win
   when a visitor taps the Dark toggle. */
:root{
  color-scheme: light dark;
  --red:#d32323;
  --red-dark:#af0606;
  --red-tint:#fff4f4;
  --red-ring:rgba(211,35,35,.12);
  --text:#2b2b2b;
  --muted:#666666;
  --muted-2:#999999;
  --line:#e6e6e6;
  --line-2:#d8d8d8;
  --bg:#ffffff;
  --bg-2:#f7f7f7;
  --link:#0073bb;
  --star:#d32323;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue','Segoe UI',Roboto,sans-serif;
  /* layout-support tokens (structure only) */
  --card:#ffffff;
  --fill:#f0f0f0;
  --fill-2:#f7f7f7;
  --chrome:#ffffff;          /* sticky filter bar surface */
  --hover:#f1f1f1;           /* listing row hover */
  --ctl:#f2f2f3;             /* neutral control surface */
  --ctl-hi:#e7e7e9;
  --ctl-brd:rgba(0,0,0,.09);
  --ctl-spec:rgba(255,255,255,.95);
  --ctl-gloss:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.16) 55%,rgba(0,0,0,.035));
  --body-2:#4a4a4a;          /* secondary body copy (notes, hours) */
  --star-empty:#dcdcdc;      /* unfilled rating star */
  --btn-primary:#d32323;     /* filled primary action */
  --btn-primary-hi:#af0606;
  --glass-red:rgba(211,35,35,.84);      /* translucent brand red for the nav bar */
  --glass-chrome:rgba(255,255,255,.68); /* translucent filter bar */
  --glass-float:rgba(255,255,255,.72);  /* toast / back-to-top */
  --spec:inset 0 .5px 0 rgba(255,255,255,.55);   /* specular top edge */
  --spec-red:inset 0 .5px 0 rgba(255,255,255,.42);
  --glass-brd:rgba(0,0,0,.08);
  --blur:blur(24px) saturate(180%);
  --toast-bg:#2b2b2b;
  --toast-fg:#ffffff;
  --sub-wash:linear-gradient(135deg,#fff4f4,#fff);
  --radius:12px;
  --radius-sm:8px;
  --float-shadow:0 6px 22px rgba(0,0,0,.10);
}
/* Dark: only the tokens THIS file adds. --bg/--text/--red/--line/--link
   keep coming from the site's own dark rules. */
:root[data-theme="dark"]{
  --red-tint:rgba(255,107,107,.14);
  --red-ring:rgba(255,107,107,.28);
  --card:#1f1f1f; --fill:#262626; --fill-2:#1f1f1f;
  --chrome:#161616;
  --hover:#262626;
  --ctl:#2b2b2d;
  --ctl-hi:#38383b;
  --ctl-brd:rgba(255,255,255,.11);
  --ctl-spec:rgba(255,255,255,.11);
  --ctl-gloss:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 55%,rgba(0,0,0,.12));
  --body-2:#b8b8be;
  --star-empty:#3c3c40;
  --btn-primary:#c23a3a;
  --btn-primary-hi:#d34a4a;
  --glass-red:rgba(255,107,107,.80);
  --glass-chrome:rgba(22,22,22,.66);
  --glass-float:rgba(47,47,47,.72);
  --spec:inset 0 .5px 0 rgba(255,255,255,.14);
  --spec-red:inset 0 .5px 0 rgba(255,255,255,.22);
  --glass-brd:rgba(255,255,255,.10);
  --toast-bg:#2f2f2f; --toast-fg:#eeeeee;
  --sub-wash:linear-gradient(135deg,#241a1a,#161616);
  --float-shadow:0 6px 22px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --red-tint:rgba(255,107,107,.14);
  --red-ring:rgba(255,107,107,.28);
  --card:#1f1f1f; --fill:#262626; --fill-2:#1f1f1f;
  --chrome:#161616;
  --hover:#262626;
  --ctl:#2b2b2d;
  --ctl-hi:#38383b;
  --ctl-brd:rgba(255,255,255,.11);
  --ctl-spec:rgba(255,255,255,.11);
  --ctl-gloss:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 55%,rgba(0,0,0,.12));
  --body-2:#b8b8be;
  --star-empty:#3c3c40;
  --btn-primary:#c23a3a;
  --btn-primary-hi:#d34a4a;
  --glass-red:rgba(255,107,107,.80);
  --glass-chrome:rgba(22,22,22,.66);
  --glass-float:rgba(47,47,47,.72);
  --spec:inset 0 .5px 0 rgba(255,255,255,.14);
  --spec-red:inset 0 .5px 0 rgba(255,255,255,.22);
  --glass-brd:rgba(255,255,255,.10);
  --toast-bg:#2f2f2f; --toast-fg:#eeeeee;
  --sub-wash:linear-gradient(135deg,#241a1a,#161616);
  --float-shadow:0 6px 22px rgba(0,0,0,.5);
}}

/* ---------- base ---------- */
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.47;
  letter-spacing:-.022em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* ---------- top bar: brand red rendered as glass ----------
   Translucent red + blur, so content refracts through it as it scrolls under.
   Navigation layer only — content below stays flat and opaque. */
.topbar,.top{background:var(--glass-red)!important;color:#fff!important;
  -webkit-backdrop-filter:var(--blur)!important;backdrop-filter:var(--blur)!important;
  border-bottom:0!important;box-shadow:var(--spec-red)!important;
  position:sticky;top:0;z-index:40;}
.topbar .brand,.topbar .brand a,.top .brand,.top .brand a{color:#fff!important;font-weight:800;letter-spacing:-.02em;}
.topbar nav a,.top nav a,.topbar a,.top a{color:#fff!important;}
.topbar nav a,.top nav a{opacity:.92;font-weight:600;font-size:13px;letter-spacing:0;}
.topbar nav a:hover,.top nav a:hover{opacity:1;text-decoration:underline;}
.brand .brandimg{border:3px solid rgba(255,255,255,.9)!important;box-shadow:none!important;}
.vip{color:#fff!important;background:rgba(0,0,0,.16)!important;
  border:1px solid rgba(255,255,255,.55)!important;border-radius:10px!important;}
.vip:hover,.vip:focus{background:rgba(0,0,0,.3)!important;}
.vip-top{font-weight:600;letter-spacing:-.01em;}
.vip-sub{font-weight:400;opacity:.9;}

/* ---------- intro / hero ---------- */
.intro{background:var(--bg-2)!important;border-bottom:1px solid var(--line)!important;}
.intro h1{font-size:clamp(28px,6.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.08;}
.intro p{color:var(--muted);font-size:17px;letter-spacing:-.02em;}
.intro .stat{background:var(--card)!important;border:0!important;border-radius:9px!important;
  font-size:13px;font-weight:500;color:var(--muted);}
.intro .stat b{color:var(--red);font-weight:600;}

/* ---------- sticky filter chrome: glass ---------- */
.controls,.controls.efg-glass{background:var(--glass-chrome)!important;
  -webkit-backdrop-filter:var(--blur)!important;backdrop-filter:var(--blur)!important;
  border-bottom:.5px solid var(--glass-brd)!important;
  box-shadow:var(--spec), 0 .5px 0 var(--glass-brd)!important;}
.search{background:var(--card)!important;border:1px solid var(--line-2)!important;border-radius:6px!important;}
.search:focus-within{box-shadow:0 0 0 3px var(--red-ring)!important;border:1px solid var(--red)!important;}
.search input{font-size:17px;letter-spacing:-.022em;color:var(--text);}
.search svg{color:var(--muted-2);}

/* jump links → iOS pill filters */
.jump a{background:var(--card)!important;border:1px solid var(--line-2)!important;border-radius:16px!important;
  font-size:13.5px;font-weight:500;color:var(--text)!important;letter-spacing:-.01em;}
.jump a:hover,.jump a:focus{background:var(--red)!important;color:#fff!important;}

/* ---------- grouped cards: the core move ---------- */
main.wrap{max-width:720px;}
.card{background:var(--card);border-bottom:1px solid var(--line);
  transition:background-color .13s ease;}
.card:hover{background-color:var(--hover)!important;}
/* wrap consecutive cards into one rounded group */
.section-head{border-bottom:0!important;margin-top:26px;padding-bottom:6px;}
.section-head h2{font-size:22px;font-weight:700;letter-spacing:-.026em;}
.section-head .cnt{font-size:13px;color:var(--muted);font-weight:400;}
.card h3{font-size:18px;font-weight:600;letter-spacing:-.024em;}
.card h3 a{color:var(--text);}
.card h3 a:hover{color:var(--red);}
.card .num{font-size:15px;font-weight:600;color:var(--muted-2);font-variant-numeric:tabular-nums;}
.card p.note{font-size:15px;color:var(--muted);letter-spacing:-.016em;line-height:1.45;}

/* badges + tags → iOS filled labels */
.badge{background:var(--red);color:#fff;border-radius:7px!important;font-size:11.5px;font-weight:600;letter-spacing:-.005em;}
.badge.hon{background:var(--card)!important;color:var(--red)!important;border:1px solid var(--red)!important;}
.tag.cat{background:var(--fill-2)!important;border:0!important;border-radius:7px!important;
  color:var(--muted)!important;font-size:12.5px;font-weight:500;}

/* chips: shape + type only. Brand colours come from the site's own rules. */
.chip{border:0!important;border-radius:9px!important;font-size:13px;font-weight:600;
  letter-spacing:-.01em;text-decoration:none!important;}
.chip:not(.colored):not(.menu):not(.ig):not(.tiktok):not(.fb):not(.yelp):not(.maps):not(.gmap):not(.web):not(.sub){background:var(--fill-2)!important;color:var(--link)!important;}
.chip:not(.colored):not(.menu):not(.ig):not(.tiktok):not(.fb):not(.yelp):not(.maps):not(.gmap):not(.web):not(.sub):hover,.chip:not(.colored):not(.menu):not(.ig):not(.tiktok):not(.fb):not(.yelp):not(.maps):not(.gmap):not(.web):not(.sub):focus{background:var(--fill)!important;}
.chip svg{color:currentColor;}

/* ---------- coloured brand buttons rendered as glass ----------
   Keep every brand colour exactly as it was; add the material on top:
   a specular top edge, a soft downward gloss, and a lift shadow. The
   backdrop-filter matters where these sit over photography. */
.chip.colored,.chip.menu,.chip.ig,.chip.tiktok,.chip.fb,.chip.yelp,.chip.maps,.chip.gmap,.chip.web,.chip.sub,.soc{
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 52%,rgba(0,0,0,.07))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.10),
             0 1px 3px rgba(0,0,0,.16)!important;
  border:0!important;color:#fff!important;}
.chip.colored svg,.chip.menu svg,.chip.ig svg,.chip.tiktok svg,.chip.fb svg,.chip.yelp svg,.chip.maps svg,.chip.gmap svg,.chip.web svg,.chip.sub svg,.soc svg{color:#fff!important;}
/* Brand colours stated explicitly rather than inherited from the page.
   The homepage and the spot page use two different class schemes
   (.c-yelp vs .yelp), and in dark mode something upstream repaints the
   base .chip — so both schemes are pinned here and nothing can flatten them. */
.chip.c-menu,.chip.menu{background-color:var(--red)!important;}
.chip.c-yelp,.chip.yelp{background-color:#d32323!important;}
.chip.c-fb,.chip.fb,.soc.fb{background-color:#1877f2!important;}
.chip.c-tiktok,.chip.tiktok,.soc.tt{background-color:#000000!important;}
.chip.c-maps,.chip.maps,.chip.c-gmap,.chip.gmap{background-color:#1a73e8!important;}
.chip.c-web,.chip.web{background-color:#3b3b3b!important;}
.chip.c-sub,.chip.sub,.soc.sub{background-color:#ff6719!important;}
.chip.c-ig,.chip.ig,.soc.ig{background-color:#cc2366!important;}
.soc.grp{background-color:#385898!important;}
.soc.venmo{background-color:#008cff!important;}
.soc.suggest{background-color:#127a52!important;}

/* Instagram keeps its gradient — the gloss is composited above it, not instead of it. */
.chip.c-ig,.chip.ig,.soc.ig{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 52%,rgba(0,0,0,.07)),
    linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)!important;}
.chip.colored:hover,.chip.menu:hover,.chip.ig:hover,.chip.tiktok:hover,.chip.fb:hover,.chip.yelp:hover,.chip.maps:hover,.chip.gmap:hover,.chip.web:hover,.chip.sub:hover,.chip.colored:focus,.chip.menu:focus,.chip.ig:focus,.chip.tiktok:focus,.chip.fb:focus,.chip.yelp:focus,.chip.maps:focus,.chip.gmap:focus,.chip.web:focus,.chip.sub:focus,.soc:hover,.soc:focus{
  filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.20)!important;}

/* Live pages hardcode #444 / #555 on notes and hours, which disappears
   against the dark background. Route both through a token instead. */
.note,.card p.note,.hrs,.hours .hrs,.hrs *{color:var(--body-2)!important;}
/* hardcoded-grey body copy that predates the token system */
.closing,form label,.modal label,.overlay label{color:var(--body-2)!important;}
.closing b,.closing a{color:var(--red)!important;}
:root[data-theme="dark"] .pricetag{color:#6cbc6c!important;}

/* ---------- action buttons ----------
   Same glass language as the brand chips, minus the brand colour: a neutral
   tile with a specular top edge, a gloss falling down the face and a small
   lift. One filled primary per row so the eye has somewhere to land. */
.btn,.distbtn{
  background-color:var(--ctl)!important;
  background-image:var(--ctl-gloss)!important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  border:.5px solid var(--ctl-brd)!important;border-radius:10px!important;
  box-shadow:inset 0 1px 0 var(--ctl-spec), 0 1px 2px rgba(0,0,0,.06)!important;
  color:var(--link)!important;font-size:13.5px;font-weight:600;
  font-family:var(--sans);text-decoration:none!important;
  transition:background-color .13s ease, box-shadow .13s ease;}
.distbtn{font-size:14px;color:var(--text)!important;}
.btn:hover,.btn:focus,.distbtn:hover,.distbtn:focus{
  background-color:var(--ctl-hi)!important;
  box-shadow:inset 0 1px 0 var(--ctl-spec), 0 3px 8px rgba(0,0,0,.13)!important;}

/* Primary: "Rate your visit" and "Find nearest" — filled, glossed like a chip. */
.btn.feedback,.distbtn.primary{
  background-color:var(--btn-primary)!important;color:#fff!important;border:0!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 52%,rgba(0,0,0,.07))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.10),
             0 1px 3px rgba(0,0,0,.16)!important;}
.btn.feedback:hover,.btn.feedback:focus,.distbtn.primary:hover,.distbtn.primary:focus{
  background-color:var(--btn-primary-hi)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.10),
             0 3px 8px rgba(0,0,0,.22)!important;}

/* Tertiary: "Report closed" recedes until you reach for it. */
.btn.closed{color:var(--muted)!important;}
.btn.closed:hover,.btn.closed:focus{color:var(--red)!important;background-color:var(--ctl-hi)!important;}
.btn[disabled]{opacity:.4;box-shadow:none!important;}

/* ---------- panels ---------- */
.mapwrap,.distbar,.substrip,footer{background:transparent!important;border:0!important;}
#map{border-radius:var(--radius)!important;border:0!important;}
.mapnote{border-radius:var(--radius)!important;border:0!important;background:var(--card)!important;color:var(--muted);}
.maphead h2{font-size:20px;font-weight:700;letter-spacing:-.026em;}
.maphead span{font-size:13px;color:var(--muted);}
#addrInput,#radiusSel{background:var(--fill)!important;border:0!important;border-radius:11px!important;
  font-family:var(--sans);color:var(--text);font-size:16px;}
#addrInput:focus{box-shadow:0 0 0 3px var(--red-ring)!important;border-color:var(--red)!important;}
.diststatus{color:var(--muted);font-weight:400;font-size:14px;}
.distclear{color:var(--link);font-weight:500;}
.distbadge{background:var(--red)!important;border-radius:7px!important;font-weight:600;font-size:11.5px;}

/* social buttons keep their brand colors, iOS radius */
.soc{border-radius:11px!important;font-weight:700;font-size:13.5px;letter-spacing:-.01em;
  font-family:var(--sans);text-decoration:none!important;}

/* subscribe block — the original soft red wash */
.subscribe{background:var(--sub-wash)!important;
  border-top:1px solid var(--line)!important;border-radius:0!important;}

/* ---------- floating chrome: this is where blur belongs ---------- */
.modal{background:var(--card)!important;border-radius:20px!important;border:0!important;box-shadow:var(--float-shadow);}
.overlay{background:rgba(0,0,0,.5)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}

/* theme toggle */
.efg-theme-btn{background:var(--fill)!important;border:0!important;color:var(--text)!important;
  border-radius:999px!important;font-weight:500;font-size:13px;}
.efg-theme-btn:hover,.efg-theme-btn:focus{background:var(--fill-2)!important;}

/* skeletons in the new neutrals */
.efg-skeleton{background:linear-gradient(90deg,var(--fill-2) 25%,var(--fill) 37%,var(--fill-2) 63%)!important;
  background-size:400% 100%;border-radius:8px!important;}
.efg-skel-card{border-bottom:1px solid var(--line)!important;}
.efg-skel-thumb{border-radius:11px!important;}

/* related cards */
.efg-related{border-top:1px solid var(--line)!important;}
.efg-related-card{background:var(--card)!important;border:0!important;border-radius:14px!important;color:var(--text)!important;}
.efg-related-card:hover{box-shadow:var(--float-shadow)!important;}
.efg-related-name{font-weight:600;font-size:13.5px;letter-spacing:-.015em;}
.efg-related-rating{color:var(--star)!important;font-weight:600;}

/* thumbs */
.thumb,.hero{border-radius:12px!important;}

/* focus ring */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--red-ring);outline-offset:2px;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* brand mark — original circular photo */
.brand .brandimg{width:88px!important;height:88px!important;border-radius:50%!important;object-fit:cover;}
@media(max-width:600px){.brand .brandimg{width:66px!important;height:66px!important;}}
.topbar .brand{gap:13px;}

/* ============================================================
   Structure block (Yelp palette — no glass material anywhere)
   ============================================================ */

/* 1. Glass is the navigation + control layer only. Content stays opaque. */
.top a,.top .brand,.top .brand a{color:#fff!important;}
.top a{font-weight:700;letter-spacing:-.01em;}
.controls,.controls.efg-glass{position:sticky;top:0;z-index:30;}
/* Content must pass UNDER the bars so the material has something to refract. */
.topbar,.top{position:sticky;top:0;z-index:40;}

/* 1b. Floating chrome is glass too. */
.toast{background:var(--glass-float)!important;color:var(--text)!important;
  -webkit-backdrop-filter:var(--blur)!important;backdrop-filter:var(--blur)!important;
  border:.5px solid var(--glass-brd)!important;border-radius:999px!important;
  border-left:4px solid var(--red)!important;box-shadow:var(--spec), var(--float-shadow)!important;}
.totop{background:var(--glass-red)!important;color:#fff!important;
  -webkit-backdrop-filter:var(--blur)!important;backdrop-filter:var(--blur)!important;
  border:0!important;border-radius:50%!important;
  box-shadow:var(--spec-red), var(--float-shadow)!important;}
.overlay{-webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important;
  background:rgba(0,0,0,.34)!important;}

/* 1c. Never stack glass inside glass — nested controls use flat fills. */
.topbar .vip,.top .vip,.controls .search,.controls .jump a,.controls .fbtn,.controls .fsel{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;}

/* 2. Concentric corner radii — kept from the cleaner layout. */
.card,.evcard,.modal,.mapnote,#map{border-radius:var(--radius)!important;}
.card .thumb,.hero,.efg-related-card{border-radius:calc(var(--radius) - 4px)!important;}
.chip,.tag.cat,.badge,.btn,.distbtn{border-radius:calc(var(--radius) - 6px)!important;}
.search,#addrInput,#radiusSel{border-radius:calc(var(--radius) - 6px)!important;}

/* 3. Controls sit on fill, not paint. */
.jump a,.btn,.distbtn{background-image:none!important;}

/* 4. Accessibility. Apple requires the material to fall back to a solid
      surface when the user asks for less transparency or more contrast. */
@media (prefers-reduced-transparency: reduce){
  .topbar,.top,.totop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:var(--red)!important;}
  .controls,.controls.efg-glass,.toast{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:var(--chrome)!important;}
  .overlay{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
}
@media (prefers-contrast: more){
  .topbar,.top,.totop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:var(--red)!important;}
  .controls,.controls.efg-glass,.toast{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:var(--chrome)!important;}
  :root:not([data-theme="dark"]){--line:#c9c9c9;--line-2:#b4b4b4;--muted:#4a4a4a;--muted-2:#6a6a6a;}
  .chip:not(.colored),.btn,.distbtn,.tag.cat{border:1px solid var(--line-2)!important;}
}

/* breadcrumbs + spot hero */
.crumbs,.breadcrumb{font-size:13.5px;color:var(--muted);}

/* ---------- rating stars in the "Rate your visit" modal ----------
   Scoped to #stars on purpose: the card rating readout uses the same
   .stars class with no id, and must not pick any of this up.
   No JS involved — the page already toggles .on; this only reacts. */
#stars{gap:7px;}
#stars button{
  color:var(--star-empty);
  transform-origin:50% 58%;
  transition:color .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color:transparent;}

/* Hover preview: fill every star up to the one under the cursor.
   :has() does the "and everything before it" part; browsers without it
   simply drop this block and fall back to click-only feedback. */
#stars:has(button:nth-child(1):hover) button:nth-child(-n+1),
#stars:has(button:nth-child(2):hover) button:nth-child(-n+2),
#stars:has(button:nth-child(3):hover) button:nth-child(-n+3),
#stars:has(button:nth-child(4):hover) button:nth-child(-n+4),
#stars:has(button:nth-child(5):hover) button:nth-child(-n+5){color:var(--star);}
#stars button:hover{transform:scale(1.16) rotate(-5deg);}
#stars button:active{transform:scale(.9) rotate(0deg);transition-duration:.08s;}

/* The lock-in. Only newly-lit stars replay the keyframes, so raising a
   3-star rating to 5 pops just the two new ones — which is the point. */
#stars button.on{color:var(--star);animation:efgStarPop .44s cubic-bezier(.34,1.56,.64,1) both;}
#stars button.on:nth-child(2){animation-delay:.045s}
#stars button.on:nth-child(3){animation-delay:.09s}
#stars button.on:nth-child(4){animation-delay:.135s}
#stars button.on:nth-child(5){animation-delay:.18s}
@keyframes efgStarPop{
  0%{transform:scale(.55) rotate(-20deg);opacity:.55;}
  55%{transform:scale(1.3) rotate(7deg);opacity:1;}
  100%{transform:scale(1) rotate(0);opacity:1;}
}
#stars button:focus-visible{outline:3px solid var(--red-ring);outline-offset:3px;border-radius:8px;}

@media (prefers-reduced-motion:reduce){
  #stars button,#stars button.on{
    animation:none!important;transform:none!important;transition:color .12s ease!important;}
}