/* Rankings shares the recipe viewers' glass, type and warm gold accents. */
.rankings-trigger { display:inline-flex; align-items:center; gap:9px; border:0; padding:10px 0 10px 10px; background:transparent; white-space:nowrap; }
.rankings-trigger svg { width:18px; height:18px; color:var(--gold); }
.rankings-trigger:hover { color:var(--text); }
#rankings { width:min(680px,calc(100% - 32px)); max-height:90dvh; border:1px solid #cde8ec38; border-radius:22px; padding:0; background:#08151ee6; box-shadow:0 24px 80px #02091180,inset 0 1px 0 #f3fbff1a; }
#rankings[open] { display:flex; flex-direction:column; overflow:hidden; }
#rankings::backdrop { background:#030907bf; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.rankings-content { position:relative; z-index:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:30px 30px 24px; }
.rankings-heading { display:flex; align-items:center; gap:14px; padding-right:32px; }
.rankings-heading > svg { width:30px; height:34px; flex-shrink:0; color:var(--gold); }
.rankings-heading h2 { margin:0; font:normal 34px/1.15 Georgia,serif; }
#rankings-title:focus { outline:none; }
.rankings-kicker { margin:20px 0 9px; color:var(--gold); font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.rankings-description { margin:0 0 10px; font-size:14px; color:var(--muted); }
.ranking-list { margin:0; padding:0; list-style:none; }
.ranking-entry + .ranking-entry { border-top:1px solid #d4e7e71c; }
.ranking-row { display:grid; grid-template-columns:28px 48px minmax(0,1fr) auto; align-items:center; gap:16px; width:100%; border:0; border-radius:12px; padding:17px 2px; color:var(--text); background:transparent; text-align:left; }
.ranking-row:hover { background:#d9f4ff08; }
.ranking-row:focus-visible { outline-offset:0; }
.ranking-place { color:var(--gold); font:italic 23px Georgia,serif; opacity:.85; }
.ranking-glass .art { width:48px; height:62px; padding:0; background:transparent; }
.ranking-glass .art svg,.ranking-glass .art svg.rocks,.ranking-glass .art svg.wine,.ranking-glass .art svg.coupe,.ranking-glass .art svg.flute { width:42px; height:56px; }
.ranking-name { min-width:0; }
.ranking-name > small { display:block; margin-bottom:4px; color:var(--accent); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.ranking-name > strong { display:block; font:normal 23px/1.2 Georgia,serif; overflow-wrap:anywhere; }
.ranking-count { min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }
.ranking-count strong { display:block; color:var(--gold); font-size:22px; line-height:1.2; font-weight:400; }
.ranking-count small { color:var(--muted); font-size:11px; }
.ranking-meter { display:block; height:2px; margin-top:10px; border-radius:2px; overflow:hidden; background:#d4e7e70d; }
.ranking-meter::before { content:""; display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 25%,transparent)); transform:scaleX(var(--rank-strength)); transform-origin:left; }
.ranking-since { margin:10px 0 0; padding-top:16px; border-top:1px solid #d4e7e71c; color:var(--muted); font-size:12px; line-height:1.5; }
.ranking-state { padding:45px 16px; text-align:center; }
.ranking-state h3 { margin:0 0 10px; font:normal 25px/1.25 Georgia,serif; }
.ranking-state p { margin:0 auto; max-width:310px; color:var(--muted); font-size:14px; }
.ranking-state .reset-filters { margin-top:20px; }
.ranking-state[hidden],#ranking-retry[hidden] { display:none; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #rankings,#rankings > .motion-plane { background:transparent; -webkit-backdrop-filter:var(--overlay-glass-filter); backdrop-filter:var(--overlay-glass-filter); }
  #rankings::backdrop { background:transparent; }
}
@media (max-width:600px) {
  .rankings-trigger { gap:6px; font-size:13px; }
  #rankings { width:calc(100% - 28px); max-height:90dvh; border-radius:20px; }
  .rankings-content { padding:23px 18px 18px; }
  .rankings-heading { gap:10px; }
  .rankings-heading h2 { font-size:28px; }
  .rankings-heading > svg { width:25px; height:30px; }
  .rankings-description { font-size:13px; }
  .ranking-row { grid-template-columns:22px 35px minmax(0,1fr) auto; gap:10px; padding-block:14px; }
  .ranking-glass .art { width:35px; }
  .ranking-glass .art svg,.ranking-glass .art svg.rocks,.ranking-glass .art svg.wine,.ranking-glass .art svg.coupe,.ranking-glass .art svg.flute { width:32px; height:48px; }
  .ranking-name > strong { font-size:20px; }
  .ranking-count strong { font-size:20px; }
  .ranking-since { font-size:11px; }
}
@media (prefers-reduced-transparency:reduce), (forced-colors:active) {
  #rankings,#rankings > .motion-plane { background:var(--panel); -webkit-backdrop-filter:none; backdrop-filter:none; }
  #rankings::backdrop { background:#030907bf; -webkit-backdrop-filter:none; backdrop-filter:none; }
}