/* Town rankings (/rankings, /<st>/rankings, /<st>/rankings/<metric>). Loaded only on
   those views (see index.php). The page frame + breadcrumbs come from hubs.css (.hub,
   .hub-crumbs, .hub-h1, .hub-lede); this file styles the lists. Tokens fall back so it
   works with either skin. */

.rk{max-width:1080px;container-type:inline-size}
.rk-kicker{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green,#0e9f57)}
.rk-flag{display:inline-grid;place-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--green-bg,rgba(14,159,87,.10))}
.rk-h1{font-size:34px;letter-spacing:-.03em}
.rk-lede{max-width:70ch;font-size:16px;margin-bottom:10px}
.rk-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 18px;font-size:13px;color:var(--faint,#98a0ab)}
.rk-fine{font-size:13px;color:var(--muted,#5c6674)}
.rk-back{margin-top:18px}
.rk-back a{color:var(--green,#0e9f57);font-weight:600;text-decoration:none}

/* Scope's rankings as pills */
.rk-nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:0 0 20px;scrollbar-width:none}
.rk-nav::-webkit-scrollbar{display:none}
.rk-pill{flex:0 0 auto;display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2,#e2e6ea);background:var(--surface,#fff);font-size:14px;font-weight:600;color:var(--copy,#37414d);text-decoration:none;white-space:nowrap}
.rk-pill:hover{border-color:var(--green-line,rgba(14,159,87,.3))}
.rk-pill.on{background:var(--text,#1d2733);border-color:var(--text,#1d2733);color:var(--surface,#fff)}

/* Thumbnails: photo → locator map → tinted initial */
.rk-thumb{position:relative;display:grid;place-items:center;overflow:hidden;width:52px;height:52px;flex:none;border-radius:12px;background:var(--green-bg,rgba(14,159,87,.10));color:var(--green,#0e9f57);font-family:var(--display,Figtree,sans-serif);font-weight:800;font-size:20px}
.rk-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent}
.rk-thumb.is-map{background:var(--surface-2,#f6f8f9)}
.rk-thumb.is-map img{object-fit:contain;padding:6%}
.rk-thumb.is-none{background-color:var(--green-bg,rgba(14,159,87,.10));background-image:linear-gradient(var(--green-line,rgba(14,159,87,.25)) 1px,transparent 1px),linear-gradient(90deg,var(--green-line,rgba(14,159,87,.25)) 1px,transparent 1px);background-size:12px 12px}

/* Top three */
.rk-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.rk-pod{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line,#eef1f3);border-radius:16px;background:var(--surface,#fff);color:var(--text,#1d2733);text-decoration:none;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);transition:border-color .12s,transform .12s}
.rk-pod:hover{border-color:var(--green-line,rgba(14,159,87,.3));transform:translateY(-1px)}
.rk-pod .rk-pod-img{width:100%;height:auto;aspect-ratio:16/10;border-radius:0;font-size:44px}
.rk-pod .rk-pod-img.is-none{background-size:22px 22px}
.rk-pod .rk-pod-img.is-none b{display:none}
.rk-pod-rank{position:absolute;top:12px;left:12px}
.rk-pod-rank i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green,#0e9f57);color:#fff;font-style:normal;font-family:var(--display,Figtree,sans-serif);font-weight:800;font-size:15px;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.rk-pod:not(:first-child) .rk-pod-rank i{background:#fff;color:var(--green,#0e9f57)}
.rk-pod-body{display:flex;flex-direction:column;padding:13px 16px 16px}
.rk-pod-name{font-family:var(--display,Figtree,sans-serif);font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.rk-pod-body small{font-size:12.5px;color:var(--muted,#5c6674)}
.rk-pod-val{margin-top:12px;font-family:var(--display,Figtree,sans-serif);font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1}
.rk-pod-sub{margin-top:5px}

/* Full list */
.rk-table{border:1px solid var(--line,#eef1f3);border-radius:16px;background:var(--surface,#fff);overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06)}
.rk-row{display:grid;grid-template-columns:34px 52px minmax(0,1.5fr) minmax(0,1.2fr) 108px 108px;gap:14px;align-items:center;min-height:72px;padding:0 18px;border-bottom:1px solid var(--line,#eef1f3)}
.rk-row:last-child{border-bottom:0}
.rk-row:not(.rk-hd):hover{background:var(--surface-2,#f6f8f9)}
.rk-hd{min-height:40px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint,#98a0ab)}
.rk-n{font-family:var(--display,Figtree,sans-serif);font-weight:800;font-size:17px;color:var(--faint,#98a0ab)}
.rk-town{min-width:0}
.rk-town a{display:block;font-weight:700;font-size:15.5px;color:var(--text,#1d2733);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-town a:hover{color:var(--green,#0e9f57);text-decoration:underline;text-underline-offset:3px}
.rk-town small{display:block;font-size:12.5px;color:var(--muted,#5c6674);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-bar{display:flex;align-items:center;gap:10px}
.rk-track{display:block;flex:1;height:8px;border-radius:99px;background:var(--surface-hi,#eef1f3);overflow:hidden}
.rk-track span{display:block;height:100%;border-radius:99px;background:var(--green,#0e9f57)}
.rk-bar b{min-width:70px;text-align:right;font-family:var(--display,Figtree,sans-serif);font-weight:800;font-size:15.5px;white-space:nowrap}
.rk-num{text-align:right;font-size:14px;font-variant-numeric:tabular-nums;color:var(--copy,#37414d)}
.rk-hd .rk-num{font-size:inherit;color:inherit}
.rk-empty{padding:18px 20px;border:1px dashed var(--line-2,#e2e6ea);border-radius:14px;color:var(--copy,#37414d);font-size:15px}
.rk-empty a{color:var(--green,#0e9f57)}

/* Method + links */
.rk-card{margin-top:18px;padding:20px 22px;border:1px solid var(--line,#eef1f3);border-radius:16px;background:var(--surface,#fff)}
.rk-card h2{margin:0 0 10px;font-family:var(--display,Figtree,sans-serif);font-size:18px;font-weight:700}
.rk-method p{max-width:76ch;margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--copy,#37414d)}
.rk-method p:last-child{margin-bottom:0}
.rk-states{display:flex;flex-wrap:wrap;gap:6px}
.rk-states a{display:inline-grid;place-items:center;min-width:40px;height:32px;padding:0 9px;border-radius:8px;background:var(--surface-2,#f6f8f9);font-size:13px;font-weight:700;color:var(--copy,#37414d);text-decoration:none}
.rk-states a:hover,.rk-states a.on{background:var(--green,#0e9f57);color:#fff}
.rk-states-wide a{font-weight:600}

/* Hub cards (/rankings, /<st>/rankings) */
.rk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.rk-hc{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--line,#eef1f3);border-radius:16px;background:var(--surface,#fff);color:var(--text,#1d2733);text-decoration:none;transition:border-color .12s}
.rk-hc:hover{border-color:var(--green-line,rgba(14,159,87,.3))}
.rk-hc .rk-hc-img{width:92px;height:92px;border-radius:12px}
.rk-hc-body{min-width:0}
.rk-hc-grp{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green,#0e9f57)}
.rk-hc-body b{display:block;margin:3px 0 8px;font-family:var(--display,Figtree,sans-serif);font-size:16.5px;line-height:1.25}
.rk-hc ol{margin:0;padding-left:18px;font-size:13.5px;color:var(--copy,#37414d)}
.rk-hc li em{font-style:normal;color:var(--muted,#5c6674)}

@container (max-width:700px){
  .rk-row{grid-template-columns:30px 48px minmax(0,1.4fr) minmax(0,1fr) 96px;gap:12px}
  .rk-c2{display:none}
}
@container (max-width:560px){
  .rk-podium{grid-template-columns:minmax(0,1fr);gap:10px}
  .rk-pod:not(:first-child){flex-direction:row;align-items:center}
  .rk-pod:not(:first-child) .rk-pod-img{width:104px;aspect-ratio:1;flex:none}
  .rk-pod:not(:first-child) .rk-pod-rank{top:8px;left:8px}
  .rk-pod:not(:first-child) .rk-pod-rank i{width:26px;height:26px;font-size:13px}
  .rk-pod:not(:first-child) .rk-pod-val{margin-top:6px;font-size:22px}
  .rk-row{grid-template-columns:24px 44px minmax(0,1fr) 88px;gap:10px;padding:0 14px}
  .rk-thumb{width:44px;height:44px}
  .rk-c1,.rk-c2,.rk-track{display:none}
  .rk-bar b{min-width:0}
  .rk-card{padding:16px}
}
@media (max-width:760px){
  .rk-h1{font-size:27px}
  .rk-lede{font-size:15px}
}

/* Focused list (/<st>/rankings/<metric>/<town>): the town's rank, its share card + share buttons. */
.rk-focus{margin:0 0 20px;padding:18px;border:1px solid var(--green-line,rgba(14,159,87,.3));border-radius:16px;background:linear-gradient(180deg,var(--green-bg,rgba(14,159,87,.10)),var(--surface,#fff) 70%)}
.rk-focus-top{display:flex;gap:14px;align-items:center}
.rk-focus .rk-focus-img{width:72px;height:72px;border-radius:14px}
.rk-focus h2{margin:2px 0 4px;font-family:var(--display,Figtree,sans-serif);font-size:24px;font-weight:800;letter-spacing:-.02em}
.rk-focus h2 b{color:var(--green,#0e9f57)}
.rk-focus p{margin:0;font-size:14px;color:var(--copy,#37414d)}
.rk-focus p a{color:var(--green,#0e9f57);font-weight:700;text-decoration:none}
.rk-card-img{display:block;width:100%;height:auto;margin-top:16px;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.35)}
.rk-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rk-sbtn{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2,#e2e6ea);background:var(--surface,#fff);font:inherit;font-size:13.5px;font-weight:600;color:var(--text,#1d2733);text-decoration:none;cursor:pointer}
.rk-sbtn:first-child{background:var(--text,#1d2733);border-color:var(--text,#1d2733);color:var(--surface,#fff)}
.rk-sbtn:hover{border-color:var(--green-line,rgba(14,159,87,.3))}
.rk-row.rk-row-focus{background:var(--green-bg,rgba(14,159,87,.10));box-shadow:inset 4px 0 0 var(--green,#0e9f57)}
.rk-row.rk-row-focus .rk-n{color:var(--green,#0e9f57)}
#focus{scroll-margin-top:140px}