/* Rankings UI: the home city panel (city.js), the stats page (stats.js) and the leaderboard privacy switch (settings.html).
   Built from Halite/Tokay tokens only (see DESIGN.md). Orange is not used here: nothing on these screens is a "spotted" signal.
   Class names start with tkr- (ad blockers hide anything named ad-*). Motion is a progressive extra: reduced motion shows the final state. */
:root{--tkr-ease:cubic-bezier(.3,1.3,.5,1)}

/* ---------- LIVE dot ---------- */
.tkr-live{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--h-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--h-brand)}
.tkr-live[hidden]{display:none}
.tkr-live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--h-brand);flex:none}
.tkr-live i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--h-brand);animation:tkr-pulse 1.6s ease-out infinite}
@keyframes tkr-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}

/* ---------- people: avatar tile, name, title, rows ---------- */
.tkr-av{width:36px;height:36px;flex:none;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--h-brand);color:var(--h-brand-ink);font-size:15px}
.tkr-av b{font-weight:600}
.tkr-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tkr-av.is-lg{width:72px;height:72px;font-size:30px}
.tkr-av.is-hidden{background:var(--h-line-strong)}
.tkr-note{margin:0;font-size:13px;line-height:1.45;color:var(--h-muted)}
.tkr-ttl{display:block;font-size:13px;line-height:1.35;color:var(--h-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkr-k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--h-muted)}
.tkr-list{list-style:none;margin:0;padding:0}
.tkr-row{border-top:1px solid var(--h-line)}
.tkr-row:first-child{border-top:0}
.tkr-rowa{display:grid;grid-template-columns:28px 36px minmax(0,1fr) auto 40px;align-items:center;gap:10px;min-height:56px;padding:8px 2px;color:inherit;text-decoration:none}
a.tkr-rowa:hover{background:var(--h-brand-soft)}
a.tkr-rowa:focus-visible{outline:2px solid var(--h-brand);outline-offset:-2px}
.tkr-row.is-you{background:var(--h-brand-soft)}
.tkr-rk{font:500 14px/1 var(--h-mono);color:var(--h-muted);text-align:right}
.tkr-who{min-width:0;display:flex;flex-direction:column;gap:1px}
.tkr-name{font-weight:600;font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkr-you{display:inline;margin-left:6px;font:500 11px/1 var(--h-mono);letter-spacing:.06em;color:var(--h-brand)}
.tkr-who .tkr-name{display:block}
.tkr-pts{font:600 15px/1 var(--h-mono);text-align:right;color:var(--tk-gold-text,var(--h-text))}
.tkr-mvw{display:flex;justify-content:flex-end}
.tkr-mv{display:inline-flex;align-items:center;gap:2px;font:500 12px/1 var(--h-mono);color:var(--h-muted)}
.tkr-mv.is-up{color:var(--h-ok)}
.tkr-mv.is-new{font-size:11px;letter-spacing:.06em;border:1px solid var(--h-line-strong);padding:3px 5px}
.tkr-mv-ic{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
.tkr-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.tkr-sub .h-label{margin:0}
.tkr-h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--h-muted)}

/* ---------- home: the city panel ---------- */
.tkr-city[hidden]{display:none}
.tkr-card{background:var(--h-surface);border:1px solid var(--h-line);padding:16px;display:flex;flex-direction:column;gap:16px}
.tkr-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tkr-h2{margin:0;font-size:18px;font-weight:600;line-height:1.25;min-width:0}
.tkr-prog{display:flex;flex-direction:column;gap:8px}
.tkr-prog[hidden]{display:none}
.tkr-prog-top{display:flex;flex-direction:column;gap:4px}
.tkr-prog-h{font-size:17px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums} /* a sentence: body face, not the mono used for bare numbers */
.tkr-prog-top b{font:600 15px/1.3 var(--h-mono)}
.tkr-segs{list-style:none;margin:0;padding:0;display:flex;gap:3px}
.tkr-segs li{position:relative;flex:1;height:8px;background:var(--h-line)}
.tkr-segs li::after{content:"";position:absolute;inset:0;background:var(--h-brand);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--tkr-ease) calc(var(--i,0) * 70ms)}
.tkr-segs li.on::after{transform:scaleX(1)}
.tkr-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--h-line);border:1px solid var(--h-line)}
.tkr-stats>div{background:var(--h-surface);padding:10px 12px;min-width:0}
.tkr-stats dt{font-size:12px;color:var(--h-muted);margin:0 0 4px}
.tkr-stats dd{margin:0;font:600 20px/1.2 var(--h-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#c-fresh{font-size:15px;line-height:1.6;white-space:normal}
.tkr-empty[hidden],.tkr-list[hidden]{display:none}
.tkr-pin{border-top:1px solid var(--h-line);padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.tkr-pin>.tkr-note{flex:1 1 200px}
.tkr-pin-row{flex:1 1 240px;min-width:0;display:grid;grid-template-columns:auto 36px minmax(0,1fr) auto;align-items:center;gap:10px}
.tkr-pin .tkr-ttl{white-space:normal}
.tkr-pin>.h-button{margin-left:auto}

/* phone and tablet: the panel sits under the hero, above the stores */
#city{margin-top:24px}
@media (min-width:600px) and (max-width:899px){
  .tkr-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* desktop: stores and latest on the left, the city panel stays beside them (sticky) while you scroll */
@media (min-width:900px){
  .tk-hero:not(.compact)+.tk-wrap:has(#city:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,30vw,400px);column-gap:clamp(24px,3vw,48px);align-items:start}
  .tk-hero:not(.compact)+.tk-wrap:has(#city:not([hidden]))>#city{grid-column:2;grid-row:1 / span 4;margin-top:clamp(44px,5vw,64px)}
  .tk-hero:not(.compact)+.tk-wrap:has(#city:not([hidden]))>:not(#city){grid-column:1}
  .tk-hero:not(.compact)+.tk-wrap:has(#city:not([hidden])) .tk-sgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
.tk-hero.compact+.tk-wrap>#city{display:none}

/* ---------- the stats page ---------- */
.tkr-page{padding-top:24px;padding-bottom:48px}
.tkr-center{max-width:520px;margin:24px auto 0;text-align:center}
.tkr-actions{display:flex;justify-content:center;margin-top:16px}
.tkr-shead{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 16px;align-items:center}
.tkr-shead .tk-h1{margin:0;overflow-wrap:anywhere}
.tkr-shead .tkr-ttl{white-space:normal;margin-top:2px;font-size:14px}
.tkr-lv{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.tkr-lv b{font-size:14px}
.tkr-lvbar{position:relative;height:8px;flex:1 1 120px;min-width:100px;max-width:320px;background:var(--h-line)}
.tkr-lvbar i{position:absolute;inset:0;background:var(--h-brand);transform-origin:left;transform:scaleX(var(--share,0));transition:transform .7s var(--tkr-ease)}
.tkr-shead-pts{grid-column:1 / -1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tkr-shead-pts b{font:600 28px/1.1 var(--h-mono)}
/* Points are gold wherever they are a score (the gold tokens in tokay.css, never --tokay-spot): the big total gets the coin mark and larger tabular figures */
#pf-total,#pf-all,#pf-wk,#st-total,#st-all,#st-wk{color:var(--tk-gold-text);font-variant-numeric:tabular-nums}
.tkr-gold{display:inline-flex;align-items:center;gap:10px;max-width:100%}
.tkr-gold .tk-coin{width:28px;height:28px}
.tkr-gold .tk-coin i{left:8px;top:5px;width:3px;height:13px}
.tkr-gold .tk-coin::after{inset:5px}
.tkr-shead-pts .tkr-gold b{display:inline-block;font:700 clamp(34px,9vw,44px)/1.05 var(--h-mono);letter-spacing:-.02em;text-align:start}
.tkr-seg{display:flex;width:100%;margin:20px 0 4px}
.tkr-seg .tk-tog{flex:1 1 0;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px}
.tkr-seg .tk-tog span{font-weight:600}
.tkr-seg .tk-tog small{max-width:100%;font-size:12px;color:var(--h-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.tkr-seg .tk-tog:disabled{opacity:.45;cursor:default}
.tkr-seg-sm .tk-tog{min-height:44px;padding:0 12px}
.tkr-grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(24px,3vw,48px);align-items:start}
.tkr-col{min-width:0}
.tkr-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:20px;background:var(--h-line);border:1px solid var(--h-line)}
.tkr-tile{background:var(--h-surface);padding:14px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tkr-tile b{font:600 clamp(24px,5vw,32px)/1.1 var(--h-mono)}
.tkr-tile small,.tkr-counts small{font-size:12px;color:var(--h-muted);line-height:1.35}
.tkr-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--h-line);border:1px solid var(--h-line)}
.tkr-counts>div{background:var(--h-surface);padding:12px;min-width:0;display:flex;flex-direction:column;gap:4px}
.tkr-counts dt{font-size:13px;color:var(--h-muted);margin:0}
.tkr-counts dd{margin:0;font:600 22px/1.2 var(--h-mono)}
.tkr-chart{display:block;width:100%;height:auto;max-height:260px;background:var(--h-surface);border:1px solid var(--h-line);padding:8px 8px 0}
.tkr-bar{fill:var(--h-brand);opacity:.55;transform-box:fill-box;transform-origin:50% 100%;transition:transform .55s var(--tkr-ease)}
.tkr-bar.is-now{opacity:1}
.tkr-chart.no-motion .tkr-bar{transition:none}
.tkr-med{fill:var(--h-text)}
.tkr-axis{stroke:var(--h-line-strong);stroke-width:1}
.tkr-axl{fill:var(--h-muted);font:400 10px var(--h-font)}
.tkr-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:8px 0 0;font-size:13px;color:var(--h-muted)}
.tkr-key-bar,.tkr-key-med{display:inline-block;flex:none}
.tkr-key-bar{width:12px;height:12px;background:var(--h-brand);margin-right:-6px}
.tkr-key-med{width:16px;height:2px;background:var(--h-text);margin-right:-6px}
.tkr-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tkr-badge{display:flex;align-items:center;gap:12px;padding:12px;background:var(--h-surface);border:1px solid var(--h-line);min-width:0}
.tkr-badge>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.tkr-badge b{font-size:14px;line-height:1.3}
.tkr-badge small{font-size:12px;color:var(--h-muted)}
.tkr-badge-ic{width:44px;height:44px;flex:none;display:grid;place-items:center}
.tkr-badge:not(.is-on) b{color:var(--h-muted)}
@media (max-width:480px){.tkr-tile:first-child{grid-column:1 / -1}.tkr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:600px){
  .tkr-counts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tkr-shead{grid-template-columns:72px minmax(0,1fr) auto}
  .tkr-shead-pts{grid-column:auto;flex-direction:column;align-items:flex-end;gap:2px}
  .tkr-shead-pts .tkr-gold b{font-size:48px;text-align:end}
}
@media (min-width:900px){
  .tkr-page{padding-top:40px}
  .tkr-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .tkr-shead{grid-template-columns:96px minmax(0,1fr) auto;gap:8px 24px}
  .tkr-av.is-lg{width:96px;height:96px;font-size:40px}
  .tkr-seg{width:auto;max-width:640px}
  .tkr-grid .tkr-col+.tkr-col>.tk-sec:first-child{margin-top:20px}
}

/* ---------- account: the leaderboard privacy switch ---------- */
.tkr-privacy{display:flex;align-items:flex-start;gap:14px;min-height:56px;cursor:pointer}
.tkr-privacy-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.tkr-privacy-text b{font-size:15px;line-height:1.3}
.tkr-sw{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:48px;height:28px;margin:2px 0 0;background:var(--h-line-strong);border:1px solid var(--h-line-strong);cursor:pointer}
.tkr-sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;background:var(--h-surface);transition:transform .2s var(--tkr-ease)}
.tkr-sw:checked{background:var(--h-brand);border-color:var(--h-brand)}
.tkr-sw:checked::after{transform:translateX(20px);background:var(--h-brand-ink)}
.tkr-sw:focus-visible{outline:2px solid var(--h-brand);outline-offset:2px}
.tkr-sw:disabled{opacity:.5;cursor:default}

@media (prefers-reduced-motion:reduce){
  .tkr-live i::after{animation:none;opacity:0}
  .tkr-segs li::after,.tkr-lvbar i,.tkr-bar,.tkr-sw::after{transition:none}
}

/* ---------- "taken by" under a photo ---------- */
.tkr-by{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:14px;line-height:1.35;min-width:0}
.tkr-by-t{min-width:0}
.tkr-by-t a{color:inherit;font-weight:600}
.tkr-by-ttl{color:var(--h-muted)}
.tkr-row .tkr-ttl{white-space:normal}
.tkr-row .tkr-rowa,.tkr-row a.tkr-rowa:visited{color:var(--h-text)}
.tkr-by-t a{color:var(--h-text)}
.tkr-nm{display:flex;align-items:baseline;gap:6px;min-width:0}
.tkr-you{margin-left:0}
.h-root a.tkr-rowa:not(.h-button),.h-root .tkr-by-t a:not(.h-button){color:var(--h-text)}
.tkr-gem{display:inline-flex;vertical-align:-3px;margin-right:6px}
.tkr-by-card{margin:2px 0 0;font-size:13px;color:var(--h-muted);display:block}
.tkr-by-card .tkr-by-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- leaderboard: podium and points units (owner, 2026-10-21: "make the leader look important with gold") ---------- */
.tkr-row{--pod:transparent}
.tkr-row.is-p1{--pod:#D4A62A;--pod-ink:#4A3600;--pod-edge:#A47A0C}
.tkr-row.is-p2{--pod:#B9C2CC;--pod-ink:#2B323A;--pod-edge:#8B96A2}
.tkr-row.is-p3{--pod:#C98A55;--pod-ink:#3D2210;--pod-edge:#9A5F2E}
.tkr-rowa{padding:10px 12px;grid-template-columns:32px 36px minmax(0,1fr) auto 44px}
.tkr-rk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.tkr-row.is-p1 .tkr-rkn,.tkr-row.is-p2 .tkr-rkn,.tkr-row.is-p3 .tkr-rkn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pod);color:var(--pod-ink);border:1px solid var(--pod-edge);font:700 13px/1 var(--h-mono)}
.tkr-crown{width:18px;height:12px;fill:var(--pod);stroke:var(--pod-edge);stroke-width:1;stroke-linejoin:round;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--pod) 70%,transparent))}
.tkr-row.is-p1{background:color-mix(in srgb,var(--pod) 6%,var(--h-surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pod) 70%,transparent),0 0 18px -6px color-mix(in srgb,var(--pod) 60%,transparent)}
.tkr-row.is-p1 .tkr-name{white-space:normal;overflow:visible}
.tkr-row.is-p1 .tkr-rowa{min-height:68px;padding-block:12px}
.tkr-row.is-p1 .tkr-name{font-size:17px}
.tkr-row.is-p1 .tkr-pts{font-size:20px;color:var(--tk-gold-text,var(--h-text))}
.tkr-row.is-p1 .tk-av,.tkr-row.is-p1 .tkr-av{box-shadow:0 0 0 2px var(--pod)}
.tkr-row.is-p1.is-you{background:color-mix(in srgb,var(--pod) 9%,var(--h-surface))}
.tkr-ptsw{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.tkr-ptu{font-size:11px;line-height:1;color:var(--h-muted)}
.tkr-card{padding:20px}
.tkr-pin{padding-top:16px}
.tkr-pin>.tkr-note{margin:0}
@media (prefers-reduced-motion:no-preference){
  .tkr-row.is-p1 .tkr-crown{animation:tkr-crown 3.2s ease-in-out infinite}
  @keyframes tkr-crown{0%,80%,100%{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--pod) 70%,transparent))}88%{filter:drop-shadow(0 0 8px var(--pod))}}
}

/* The earned title ("Most bakery items in Lviv") on its own full-width line under the row, so it never squeezes the name column */
.tkr-earn{grid-column:3 / -1;grid-row:2;margin-top:-4px;color:var(--h-text-2);font-size:13px;line-height:1.35}
.tkr-earn:empty{display:none}
/* "Taken by [photo][gem] Name": the person's photo and gem sit in front of their name, inline with the words */
.tkr-av.is-xs{width:22px;height:22px;font-size:11px}
.tkr-by-who{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin-left:4px;max-width:100%}
.tkr-by-who .tkr-by-ttl{display:inline-flex;line-height:0}
.tkr-by-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}