/* =====================================================================================================================
   Rankings page (/rankings). Prefix rk-. Builds on bf.css tokens and components; nothing here changes the shared system.
   Sections 1 to 11 are the prototype's rankings.css as it was reviewed; section 12 is the small set of additions the real data needed.
   Sections: 1 header  2 tabs and intro  3 format chips  4 top block (podium, reading card)  5 position and record heads
             6 toolbar  7 table cells  8 phone cards  9 records extras  10 method and states  11 the "Why this rank?" drawer  12 real-data additions
   ===================================================================================================================== */

/* 1 ---------- header */
.rk-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-5) var(--s-7); margin-bottom: var(--s-6); }
.rk-head__txt { max-width: 560px; }
.rk-head .bf-lead { margin-top: var(--s-4); }
.rk-pulse { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin: 0; padding: 0 0 6px; list-style: none; }
.rk-pulse li { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 2px solid var(--line-3); }
.rk-pulse b { font: 700 30px/1 var(--display); color: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rk-pulse span { font: 600 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rk-pulse .is-live { border-left-color: var(--cyan); }
.rk-pulse .is-live b { color: var(--cyan-hi); font-size: 22px; padding-top: 5px; }

/* 2 ---------- tabs and intro */
.rk .bf-tabs__list { margin-bottom: var(--s-4); }
.rk .bf-tab { min-height: 56px; padding-inline: 24px; font-size: 15px; }
.rk-intro { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--s-5); color: var(--text-2); font-size: 16px; line-height: 1.5; max-width: 80ch; }
.rk-intro__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--cyan-lo); background: var(--cyan-tint); color: var(--cyan-hi); }
.rk-intro__ico svg { width: 20px; height: 20px; }
.rk-itabs { margin-bottom: var(--s-4); }
.rk-itabs .bf-itab { min-width: 104px; min-height: 88px; }
.rk-filters { margin: var(--s-4) 0 var(--s-5); }

/* 3 ---------- format chips and the scope line */
.rk-fmt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--s-4); }
.rk-fmt { margin-bottom: var(--s-5); }
.rk-fmt__k { font: 600 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.rk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-chip { --cut: 7px; --edge: var(--line-3); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 16px 6px 14px; border: 1px solid var(--line-3); background-color: var(--panel-2); color: var(--text); text-align: left; transition: border-color .15s, background-color .15s; }
.rk-chip b { font: 600 14px/1.2 var(--body); white-space: nowrap; }
.rk-chip small { font: 500 12px/1 var(--mono); color: var(--muted); }
.rk-chip:hover { --edge: var(--cyan); border-color: var(--cyan); background-color: var(--cyan-tint); }
.rk-chip[aria-pressed="true"] { --edge: var(--cyan); border-color: var(--cyan); background-color: var(--cyan-tint); color: var(--cyan-hi); box-shadow: inset 0 -3px 0 var(--cyan), 0 0 20px rgba(60,198,244,.14); }
.rk-chip[aria-pressed="true"] small { color: var(--cyan-hi); }
.rk-chip--more b { color: var(--cyan); }
.rk-scope { margin: var(--s-4) 0 var(--s-5); font-size: 14px; line-height: 1.5; color: var(--muted); }
.rk-scope b { color: var(--text-2); font-weight: 600; }

/* 4 ---------- top block: podium and the reading card */
.rk-top { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-5); align-items: stretch; margin-bottom: var(--s-6); }
.rk-podium { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-3); min-width: 0; }
.rk-podium .bf-podium { gap: var(--s-4); }
.rk-podium .bf-podium__i { padding-bottom: var(--s-5); }
.rk-podium .bf-podium__v { font-size: 34px; }
.rk-podium .bf-podium__i[data-r="1"] .bf-podium__v { font-size: 42px; color: var(--gold); text-shadow: 0 0 24px rgba(253,192,76,.35); }
.rk-podium .bf-podium__n { font-size: 18px; }
.rk-podium .rk-scope { margin: 0 0 auto; padding-bottom: var(--s-4); }
.rk-tbl td .rk-link { color: var(--text-2); }
.rk-tbl td .rk-link:hover { color: var(--cyan-hi); }
.rk-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.rk-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.rk-pnote { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rk-pnote b { color: var(--text-2); font-weight: 600; }
.rk-read { align-self: start; width: 100%; }
.rk-read > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-block: -8px; font: 600 14px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--text); cursor: pointer; list-style: none; }
.rk-read > summary::-webkit-details-marker { display: none; }
.rk-read > summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); flex: none; }
.rk-read[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.rk-read > summary:focus-visible { outline-offset: 6px; }
.rk-read > *:not(summary) { margin-top: var(--s-3); }
.rk-read dl { display: grid; gap: var(--s-3); margin: 0; }
.rk-read dt { font: 600 13px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-hi); display: flex; align-items: center; gap: 6px; }
.rk-read dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rk-read__t { font: 600 14px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.rk-read__demo { padding: 4px 2px 2px; }
.rk-legend { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.rk-legend li { display: flex; align-items: center; gap: 10px; }
.rk-legend .bf-tag { flex: none; }
.rk-key { flex: none; display: inline-block; width: 26px; height: 8px; position: relative; background: var(--bg-2); border: 1px solid var(--line-2); }
.rk-key--mark::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.7); }
.rk-key--band::after { content: ""; position: absolute; left: 25%; right: 12%; top: -1px; bottom: -1px; background: var(--pc, var(--cyan)); opacity: .8; }
.rk-key--mid::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-3); }

/* 5 ---------- position head and record head */
.rk-phead { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; margin-bottom: 0; overflow: visible; }
.rk-phead__map { padding: var(--s-4); border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(6,10,16,.5), transparent); }
.rk-phead__body { padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5); min-width: 0; }
.rk-phead__k { color: var(--pc); }
.rk-phead__a { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.rk-phead .bf-map { pointer-events: none; }
.rk-phead .bf-map__dot::before { animation: none; opacity: .9; inset: 0; }
.rk-phead .bf-map__pt { transform: scale(1.5); }
.rk-rhead { padding: var(--s-5); }
.rk-rhead__top { display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-5); }
.rk-rhead__img { flex: none; width: 72px; height: 72px; object-fit: contain; padding: 6px; background: var(--bg); border: 1px solid var(--line-3); box-shadow: 0 0 28px rgba(60,198,244,.14); }
.rk-rhead .bf-h2 { margin-bottom: 4px; }
.rk-rhead .bf-caption { max-width: 78ch; }
.rk-rtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 6 ---------- toolbar: search, find me, sort, count */
.rk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 var(--s-3); }
.rk-search.bf-onebox { flex: 1 1 260px; min-width: 200px; max-width: 400px; }
.rk-search .bf-onebox__form { height: 48px; }
.rk-search__x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: var(--muted); }
.rk-search__x:hover { color: var(--cyan-hi); }
.rk-search__x svg { width: 18px; height: 18px; }
.rk-select { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 14px; border: 1px solid var(--line-3); background: var(--panel-2); }
.rk-select span { font: 600 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rk-select select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 26px 0 0; border: 0; background: transparent; color: var(--text); font: 600 14px/1.2 var(--body); cursor: pointer; }
.rk-select select option { background: var(--panel); color: var(--text); }
.rk-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.rk-select:focus-within { border-color: var(--cyan); outline: 2px solid var(--focus); outline-offset: 2px; }
.rk-select select:focus-visible { outline: none; }
.rk-count { margin-left: auto; font: 500 13px/1.3 var(--mono); color: var(--muted); }
.rk-you { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 var(--s-3); padding: 10px 14px; border: 1px solid var(--cyan-lo); background: linear-gradient(90deg, rgba(60,198,244,.16), rgba(60,198,244,.03) 70%); box-shadow: inset 3px 0 0 var(--cyan); font-size: 15px; line-height: 1.5; }
.rk-you[hidden] { display: none; }
.rk-you__tag { padding: 1px 8px; background: var(--cyan); color: var(--on-cyan); font: 700 12px/1.6 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.rk-you__t { flex: 1 1 280px; min-width: 0; color: var(--text); }
.rk-you__t b { color: #fff; }

/* 7 ---------- table cells (desktop) */
.rk-tblhost { min-width: 0; }
@media (min-width: 761px) {
  .rk-tbl td { padding: 9px 10px; }
  .rk-tbl th { padding-inline: 10px; letter-spacing: .08em; }
  .rk-tbl td.c-rank, .rk-tbl th:first-child { width: 1%; padding-left: 14px; padding-right: 4px; }
}
.rk-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.rk-name .bf-ec { max-width: 100%; }
.rk-u { display: none; }
.rk-tbl .c-metaall .rk-u { display: inline; }
.rk-n { white-space: nowrap; }
.rk-links { display: inline-flex; gap: 14px; font: 600 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rk-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.rk-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rk-val__k { display: block; margin-top: 3px; font: 500 12px/1.2 var(--body); color: var(--muted); letter-spacing: 0; text-align: right; }
.rk-rng { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rk-rng__bar { position: relative; flex: 1 1 90px; min-width: 70px; height: 8px; background: var(--bg-2); border: 1px solid var(--line-2); }
.rk-rng__bar::after { content: ""; position: absolute; left: var(--mid, 50%); top: -4px; bottom: -4px; width: 1px; background: var(--line-3); }
.rk-rng__bar.is-nomid::after { display: none; }
.rk-rng__bar i { position: absolute; top: -1px; bottom: -1px; left: calc(var(--lo) * 100%); width: calc((var(--hi) - var(--lo)) * 100%); background: var(--pc, var(--cyan)); opacity: .8; }
.rk-rng__bar b { position: absolute; z-index: 1; top: -5px; bottom: -5px; left: calc(var(--sc) * 100% - 1px); width: 3px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.75); }
.rk-rng__t { flex: none; font: 500 13px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.rk-rng--big .rk-rng__bar { height: 12px; }
.rk-rng--big .rk-rng__bar b { top: -7px; bottom: -7px; }
.rk-tbl--pos td.c-range { min-width: 220px; }
.rk-tbl--pos td.c-name { min-width: 235px; }
.rk-tbl--pos .rk-name { flex-wrap: nowrap; }
.rk-tbl--pos .rk-name .bf-ec { flex: 0 1 auto; min-width: 0; }
.rk-tbl--pos .rk-close { flex: none; }
.rk-close { cursor: help; }
.rk-ev { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.rk-trend { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--mono); color: var(--muted); white-space: nowrap; }
.rk-trend--up, .rk-trend--down { color: var(--cyan-hi); }
.rk-trend--up::before, .rk-trend--down::before { content: ""; width: 0; height: 0; border: 5px solid transparent; }
.rk-trend--up::before { border-bottom: 7px solid var(--cyan); border-top: 0; }
.rk-trend--down::before { border-top: 7px solid var(--cyan); border-bottom: 0; }
.rk-why-btn { white-space: nowrap; padding-inline: 6px 0; font-size: 12px; }
.rk-why-btn svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.rk-pos { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; color: var(--text-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.rk-pos:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pc); }
.rk-flash { animation: rk-flash 2.2s ease-out; }
.rk-flash td { animation: rk-flash-td 2.2s ease-out; }
@keyframes rk-flash { 0%, 30% { background-color: rgba(60,198,244,.4); } 100% { background-color: transparent; } }
@keyframes rk-flash-td { 0%, 30% { background-color: rgba(60,198,244,.28); } 100% { background-color: transparent; } }

/* footer of the list */
.rk-foot { margin-top: var(--s-4); }
.rk-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); }
.rk-end { padding: var(--s-5) var(--s-5) var(--s-4); text-align: center; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.rk-end b { color: var(--text); font-weight: 600; }
.rk-foot .bf-needs { margin-top: var(--s-4); }

/* 9 ---------- records extras */
.rk-gap { display: inline-flex; align-items: center; gap: 10px; }
.rk-gap__t { min-width: 48px; text-align: right; }
.rk-gap__bar { display: block; width: 90px; height: 6px; background: var(--bg-2); border: 1px solid var(--line-2); position: relative; }
.rk-gap__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--cyan-lo), var(--cyan)); }
.rk-fastest { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--gold); background: rgba(253,192,76,.1); color: var(--gold); font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.rk-replay { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font: 600 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.rk-replay::after { content: "\2197"; font-size: 15px; transition: transform .2s var(--ease); }
.rk-replay:hover::after { transform: translate(2px, -2px); }
.rk-ctx { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.35; color: var(--text-2); }
.rk-ctx small { font-size: 12px; color: var(--muted); }
.rk-fast { align-self: stretch; padding: var(--s-4) 0 var(--s-3); }
.rk-fast__h { padding: 0 var(--s-4) var(--s-3); }
.rk-fast__l { display: grid; grid-template-columns: 1fr 1fr; }
.rk-fast__i { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 50px; padding: 4px var(--s-4); border: 0; border-top: 1px solid var(--line); background: none; color: var(--text-2); text-align: left; transition: background .15s; }
.rk-fast__i:nth-child(even) { border-left: 1px solid var(--line); }
.rk-fast__i:hover { background: rgba(60,198,244,.08); color: #fff; }
.rk-fast__i.is-on { background: linear-gradient(90deg, rgba(60,198,244,.2), rgba(60,198,244,.04)); box-shadow: inset 3px 0 0 var(--pc); color: #fff; }
.rk-fast__n { min-width: 0; font: 600 14px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-fast__n small { display: block; margin-top: 1px; font: 400 12px/1.2 var(--body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.rk-fast__i b { font: 700 16px/1 var(--mono); color: var(--cyan-hi); letter-spacing: -.02em; }
.rk-fast__i.is-best b { color: var(--gold); }
.rk-fast__f { margin: 0; padding: var(--s-3) var(--s-4) 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.rk-how { margin-top: var(--s-5); align-self: auto; }
.rk-how ul { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding-left: 18px; list-style: disc; font-size: 14px; line-height: 1.55; color: var(--text-2); max-width: 90ch; }
.rk-how li::marker { color: var(--cyan); }

/* 10 ---------- method card and states */
.rk-method { margin-top: var(--s-6); }
.rk-method__h { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-3); }
.rk-method__ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--line-3); background: var(--panel-3); color: var(--cyan-hi); }
.rk-method__ico svg { width: 18px; height: 18px; }
.rk-method__t { font: 600 15px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.rk-method__d { margin-left: auto; font: 500 12px/1.3 var(--mono); color: var(--muted); text-align: right; }
.rk-method__b { max-width: 96ch; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.rk-method__b b { color: var(--text); font-weight: 600; }
.rk-method__f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.rk-method__f code { color: var(--text-2); font-size: 12px; }
.rk-needs { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-5) var(--s-6); text-align: center; }
.rk-needs .bf-caption { max-width: 56ch; }
.rk-needs__k { justify-content: center; margin: 0; }
.rk-needs__a { margin-top: var(--s-2); }
.rk-ghost { display: flex; flex-direction: column; gap: 12px; width: min(560px, 100%); margin-top: var(--s-5); opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.rk-ghost i { display: block; height: 14px; width: var(--w); background: var(--panel-3); }
.rk-ghost i:nth-child(odd) { margin-left: 0; }

/* 11 ---------- the "Why this rank?" drawer */
.rk-why { display: flex; flex-direction: column; gap: var(--s-3); }
.rk-why__id { display: flex; align-items: center; gap: 12px; }
.rk-why__id .bf-rank { flex: none; width: 44px; height: 44px; font-size: 20px; }
.rk-why__n { display: block; font: 700 22px/1.2 var(--display); overflow-wrap: anywhere; }
.rk-why__s { margin-top: 2px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rk-why__score { display: flex; align-items: baseline; gap: 10px; margin-top: var(--s-2); }
.rk-why__score b { font: 700 56px/1 var(--display); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rk-why__score span { color: var(--muted); font-size: 14px; }
.rk-why__rng { margin: 0; font-size: 14px; color: var(--text-2); }
.rk-why__rng b { color: #fff; }
.rk-why__ev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--text-2); }
.rk-why__h { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); font: 600 13px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.rk-why p { margin: 0; }
.rk-parts { display: grid; gap: var(--s-4); }
.rk-part__top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 12px; }
.rk-part__l { font: 600 15px/1.3 var(--body); color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.rk-part__w { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.rk-part__top b { min-width: 3.4em; text-align: right; font: 700 20px/1 var(--display); color: #fff; }
.rk-part__bar { position: relative; height: 10px; margin-top: 6px; background: var(--bg-2); border: 1px solid var(--line-2); }
.rk-part__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--cyan-lo), var(--cyan)); }
.rk-part__mid { position: absolute; z-index: 1; left: 50%; top: -4px; bottom: -4px; width: 1px; background: #fff; opacity: .55; }
.rk-part__d { margin-top: 5px !important; font-size: 13px; line-height: 1.4; color: var(--muted); }
.rk-sum { padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); background: var(--panel-2); font-size: 14px; line-height: 1.55; color: var(--text-2); }
.rk-sum b { color: #fff; }
.rk-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.rk-phase { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line-2); }
.rk-phase span { font: 600 12px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rk-phase b { font: 700 24px/1.1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.rk-phase small { font: 500 12px/1.2 var(--mono); color: var(--muted); }
.rk-phase.is-none b { font-size: 15px; color: var(--faint); padding-block: 5px; }
.rk-cap { font-size: 12px; line-height: 1.4; color: var(--faint); }
.rk-rivals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rk-rival { min-height: 44px; padding: 0 14px; cursor: pointer; }
.rk-ex { padding: var(--s-5) var(--s-4) var(--s-3); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rk-ex p + p { margin-top: 6px; }
.rk-why__a { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* 8 ---------- phone: cards instead of tables, sideways tabs, compact blocks */
@media (max-width: 1100px) and (min-width: 761px) {
  .rk-tbl--pos th:nth-child(6), .rk-tbl--pos td:nth-child(6) { display: none; }
  .rk-tbl--pos td.c-range { min-width: 170px; }
  .rk-tbl--pos td.c-name { min-width: 150px; }
  .rk-tbl--pos .rk-name { flex-wrap: wrap; }
  .rk-md-hide { display: none; }
  .rk-tbl--rec th:nth-child(8), .rk-tbl--rec td:nth-child(8) { display: none; }
  .rk-tbl--ov th:nth-child(7), .rk-tbl--ov td:nth-child(7) { display: none; }
}
@media (max-width: 1100px) {
  .rk-top { grid-template-columns: minmax(0, 1fr); }
  .rk-phead { grid-template-columns: 240px minmax(0, 1fr); }
  .rk-read { align-self: stretch; }
}
@media (max-width: 760px) {
  .rk-head { margin-bottom: var(--s-6); gap: var(--s-4); }
  .rk-pulse { gap: var(--s-4) var(--s-5); }
  .rk-pulse b { font-size: 24px; }
  .rk-pulse .is-live b { font-size: 18px; padding-top: 5px; }
  .rk .bf-tab { min-height: 52px; padding-inline: 18px; font-size: 14px; flex: 1 1 auto; justify-content: center; }
  .rk-intro { font-size: 15px; align-items: flex-start; }
  .rk-fmt { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rk-chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--gutter)); margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); padding-bottom: 6px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .rk-chips::-webkit-scrollbar { display: none; }
  .rk-chip { flex: none; scroll-snap-align: start; }
  .rk-scope { margin-block: var(--s-3) var(--s-4); }
  .rk-top { gap: var(--s-4); margin-bottom: var(--s-5); }
  .rk-podium .bf-podium { gap: 6px; }
  .rk-podium .bf-podium__v { font-size: 22px; }
  .rk-podium .bf-podium__i[data-r="1"] .bf-podium__v { font-size: 28px; }
  .rk-podium .bf-podium__n { font-size: 14px; }
  .rk-podium .bf-podium__s { font-size: 12px; line-height: 1.35; }
  .rk-podium .bf-podium__i { padding-bottom: var(--s-4); }
  .rk-itabs .bf-itab { min-width: 92px; min-height: 80px; }
  .rk-phead { grid-template-columns: minmax(0, 1fr); }
  .rk-phead__map { padding: var(--s-3) var(--s-4) 0; border: 0; background: none; }
  .rk-phead__map .bf-map { max-width: 210px; margin-inline: auto; }
  .rk-phead__body { padding: var(--s-4); }
  .rk-phead__a .bf-btn { width: 100%; white-space: normal; text-align: center; }
  .rk-rhead { padding: var(--s-4); }
  .rk-rhead__top { gap: var(--s-4); margin-bottom: var(--s-4); align-items: flex-start; }
  .rk-rhead__img { width: 56px; height: 56px; }
  .rk-rtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-rtiles .bf-tile:first-child { grid-column: 1 / -1; }
  .rk-filters { margin-block: var(--s-3) var(--s-4); }
  .rk-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .rk-search.bf-onebox { grid-column: 1 / -1; max-width: none; flex: none; }
  .rk-select { justify-content: space-between; }
  .rk-select select { flex: 1; min-width: 0; }
  .rk-bar .bf-btn { width: 100%; padding-inline: 10px; }
  .rk-count { grid-column: 1 / -1; margin-left: 0; }
  .rk-you { font-size: 14px; }
  .rk-end { padding: var(--s-4); }
  .rk-method__h { flex-wrap: wrap; }
  .rk-method__d { margin-left: 0; flex-basis: 100%; text-align: left; }
  .rk-why__score b { font-size: 48px; }
  .rk-tbl td.c-rank { align-self: start; margin-top: 2px; }
  .rk-tbl .rk-name { gap: 4px 6px; }
  .rk-tbl--pos td.c-name { min-width: 0; }
  .rk-tbl--pos .rk-name { flex-wrap: wrap; }
  .rk-tbl--pos tr { grid-template-areas: "rank name val" "rank meta val" "rank range range" "rank ev ev"; }
  .rk-tbl--pos td.c-range { grid-area: range; min-width: 0; margin-top: 8px; }
  .rk-tbl--pos td.c-ev { grid-area: ev; align-self: center; justify-self: start; }
  .rk-md-hide { display: inline; }
  .rk-tbl--pos td.c-act { grid-area: ev; align-self: center; justify-self: end; margin-right: -8px; }
  .rk-tbl--pos .rk-ev { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .rk-tbl--pos .rk-val__k { display: none; }
  .rk-tbl--ov tr, .rk-tbl--rec tr { grid-template-areas: "rank name val" "rank meta meta"; }
  .rk-tbl--rec td.c-metaall { line-height: 1.7; }
  .rk-tbl--rec .rk-replay { min-height: 44px; margin: -12px 0; }
  .rk-tbl--rec .rk-gap { gap: 8px; }
  .rk-tbl--rec .rk-gap__t { min-width: 0; }
  .rk-tbl--rec .rk-gap__bar { display: none; }
  .rk-tbl .rk-pos { min-height: 44px; margin-block: -12px; }
  .rk-tbl--cards .rk-links { gap: 20px; }
  .rk-tbl .c-metaall > span { white-space: nowrap; }
  .rk-tbl .c-metaall .bf-rowtoggle { margin: -12px 0 -12px 2px; vertical-align: middle; }
  .rk-fast__i { min-height: 52px; padding-inline: 12px; gap: 8px; }
  .rk-fast__n { white-space: normal; line-height: 1.15; }
  .rk-fast__n small { display: none; }
  .rk-fast__i b { font-size: 15px; }
  .rk-fast__h, .rk-fast__f { padding-inline: 12px; }
  .rk-needs { padding: var(--s-7) var(--s-4) var(--s-5); }
  .rk-how { margin-top: var(--s-4); }
  .rk-phases { gap: 6px; }
  .rk-phase { padding: 8px 10px; }
  .rk-phase b { font-size: 20px; }
}
@media (max-width: 760px) { .rk-tbl td.c-x .rk-u { display: inline; } }
@media (prefers-reduced-motion: reduce) { .rk-flash, .rk-flash td { animation: none; } }

/* 12 ---------- additions for the real data (the prototype had none of these) */
[data-filter-menu] { max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; }            /* the Map and Game version pills list every map and every version */
[data-rk-note] .bf-mapnote { margin: 0 0 var(--s-4); }                                                          /* "the link asked for ... so it was ignored" */
[aria-busy="true"] > .rk-tblhost { opacity: .5; transition: opacity .15s; }                                     /* a list is reading its next block from the server */
.rk-pos--static { cursor: default; }
.rk-pos--static:hover { color: var(--text-2); text-decoration: none; }
.rk-phead__map .rk-mini--tall { max-width: 190px; margin-inline: auto; }                                        /* a tall map picture in the head card */
.rk-cap--b { font-size: 13px; line-height: 1.5; color: var(--muted); }
[data-why-extra] { display: flex; flex-direction: column; gap: var(--s-3); }                                     /* the real detail, loaded after the drawer opens */
.rk-calc { font-size: 14px; }
.rk-calc th, .rk-calc td { padding: 9px 10px; }
.rk-calc thead th { padding-block: 8px; white-space: normal; }
.rk-calc tbody th { position: static; background: none; border-bottom: 1px solid var(--line); color: var(--text); font: 600 14px/1.3 var(--body); letter-spacing: 0; text-transform: none; white-space: normal; }
.rk-calc .num { font-size: 14px; }
.rk-eg { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.rk-eg li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); background: var(--panel-2); font-size: 14px; color: var(--text-2); }
.rk-eg__m { font: 500 13px/1.3 var(--mono); color: var(--muted); }
.rk-eg .rk-cap, .rk-eg .rk-fold { flex-basis: 100%; }
.rk-fold > summary { display: flex; align-items: center; min-height: 44px; font: 600 13px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-hi); cursor: pointer; }
.rk-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rk-fold[open] > summary { margin-bottom: var(--s-2); }

/* 13 ---------- the page drawn by the server, then taken over by the script (nothing here changes the finished page) */
/* The server cannot see #records or #position, so it draws all three panels and hides two. A link that names a tab (the hash, or one of its older spellings: .rk-at is an empty anchor
   per spelling) keeps that panel on screen until the script has picked the tab itself and removed the anchors (tabFor in rankings.js): no other tab shows first. */
.rk-at--rec:target ~ #rk-root .bf-tabpanel[data-panel="records"], .rk-at--pos:target ~ #rk-root .bf-tabpanel[data-panel="position"] { display: block; }
.rk-at--rec:target ~ #rk-root .bf-tabpanel:not([data-panel="records"]), .rk-at--pos:target ~ #rk-root .bf-tabpanel:not([data-panel="position"]) { display: none; }
.rk-at--rec:target ~ #rk-root .bf-tab[data-tab="records"], .rk-at--pos:target ~ #rk-root .bf-tab[data-tab="position"] { color: var(--cyan-hi); background: linear-gradient(180deg, rgba(60,198,244,.12), rgba(60,198,244,0)); }
.rk-at--rec:target ~ #rk-root .bf-tab[data-tab="records"]::after, .rk-at--pos:target ~ #rk-root .bf-tab[data-tab="position"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--cyan); box-shadow: 0 0 14px rgba(60,198,244,.7); }
.rk-at--rec:target ~ #rk-root .bf-tab[data-tab="overall"], .rk-at--pos:target ~ #rk-root .bf-tab[data-tab="overall"] { color: var(--muted); background: none; }
.rk-at--rec:target ~ #rk-root .bf-tab[data-tab="overall"]::after, .rk-at--pos:target ~ #rk-root .bf-tab[data-tab="overall"]::after { content: none; }
/* The server draws a wide window: 15 rows and the reading card open. Until the script has settled the page to this screen, a phone shows 10 rows and a narrow window a closed card, as the
   finished page does (the script removes both marks). Scripts off: the whole window and the open card stay. */
@media (scripting: enabled) and (max-width: 760px) { .rk-tbl[data-ssr-trim] tbody tr:nth-child(n+11) { display: none; } }
@media (scripting: enabled) and (max-width: 1099px) {
  .rk-read[data-ssr-open] > :not(summary) { display: none; }
  .rk-read[data-ssr-open] > summary::after { transform: rotate(45deg) translateY(-2px); }
}