/* The ranking: the countries, each a strip of its passport's cover as long as its score, then the
   collectors, the first three on plinths and the others in rows under them. */
.ranking-page { max-width: 1080px; }
.ranking-page .social-hero { margin-bottom: 30px; }
.ranking-section { margin: 0 0 56px; }
.ranking-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0 0 18px; }
.ranking-head h2 { margin: 0 auto 0 0; font-size: 1.8rem; letter-spacing: -.02em; }
.ranking-status { margin: 0; color: var(--text-muted); font-weight: 700; text-align: center; }
.ranking-status:empty { display: none; }
.ranking-actions { justify-content: center; }

/* What a ranking is ranked by: one of these is pressed at a time. */
.ranking-switch { display: flex; max-width: 100%; overflow-x: auto; padding: 3px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); box-shadow: 3px 3px 0 var(--ink-shadow); scrollbar-width: none; }
.ranking-switch button { flex: none; min-height: 34px; margin: 0; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--text-dark); font: inherit; font-size: .78rem; font-weight: 800; white-space: nowrap; cursor: pointer; transform: none; transition: background .15s, color .15s; }
.ranking-switch button:hover { background: var(--muted-gray); box-shadow: none; transform: none; }
.ranking-switch button[aria-pressed="true"] { background: #25252d; color: #fff; }
/* "Only secret" (#1125), on its own line under the switch, while the badge score is pressed. */
.ranking-only-secret { display: flex; flex-basis: 100%; justify-content: flex-end; align-items: center; gap: 6px; margin-top: -6px; font-size: .8rem; font-weight: 800; cursor: pointer; }
.ranking-only-secret[hidden] { display: none; }
.ranking-only-secret input { width: 16px; height: 16px; margin: 0; accent-color: #25252d; }
.ranking-switch button:focus-visible, .ranking-search:focus-visible, .ranking-jump:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
.ranking-search { box-sizing: border-box; width: 190px; min-height: 44px; padding: 8px 16px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); box-shadow: 3px 3px 0 var(--ink-shadow); color: var(--text-dark); font: inherit; font-size: .82rem; font-weight: 700; }
.ranking-search::placeholder { color: var(--text-muted); }
.ranking-jump { min-height: 44px; margin: 0; padding: 8px 16px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--pastel-yellow); box-shadow: 3px 3px 0 var(--ink-shadow); color: var(--text-dark); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.ranking-jump[hidden] { display: none; }

/* A country is a strip of its cover (`country-cover`, wallet.css), dark where it has not reached and
   lit as far as its score goes next to the leader's, with its rank, emblem and name in the cover's foil. */
.country-league { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.country-row { overflow: hidden; border: 3px solid var(--cover-deep); border-radius: 14px; background: var(--paper), #fffdf9; box-shadow: 5px 5px 0 var(--cover-deep); }
.country-row .country-row-cover { isolation: isolate; display: grid; grid-template-columns: 42px 48px minmax(0, 1fr) auto 14px; align-items: center; gap: 16px; box-sizing: border-box; width: 100%; min-height: 88px; margin: 0; padding: 12px 20px 20px; border: 0; border-radius: 0; background: color-mix(in srgb, var(--cover-deep) 58%, #000); box-shadow: none; color: var(--foil); font: inherit; text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer; transform: none; }
.country-row .country-row-cover:hover { box-shadow: none; transform: none; }
.country-row .country-row-cover:focus-visible { outline: 3px solid var(--foil); outline-offset: -6px; }
.country-row-cover::after { bottom: 6px; }
.country-row-fill { position: absolute; inset: 0 auto 0 0; z-index: -1; box-sizing: border-box; width: calc(var(--share, 0) * 100%); border-right: 2px solid var(--foil); background: linear-gradient(100deg, var(--cover-deep), var(--cover) 60%, color-mix(in srgb, var(--cover) 78%, var(--white))); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.country-row-cover:hover .country-row-fill { filter: brightness(1.12); }
.country-row-rank { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--foil); border-radius: 50%; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.country-row.is-leading .country-row-rank { background: var(--foil); color: var(--cover-deep); }
.country-row-emblem .bouzopp-passport-emblem { display: block; width: 48px; height: 48px; filter: drop-shadow(0 1px 0 rgb(0 0 0 / 45%)); }
.country-row-name { display: grid; gap: 4px; min-width: 0; }
.country-row-name b { color: color-mix(in srgb, var(--foil) 45%, #fff); font-size: 1.08rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; text-shadow: 0 1px 0 rgb(0 0 0 / 35%); }
.country-row.is-pedalistan .country-row-name b { font-style: italic; font-weight: 900; }
.country-row.is-andasmas .country-row-name b { font-family: Georgia, "Times New Roman", serif; }
.country-row-name small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.country-row-name small > :first-child { letter-spacing: .26em; }
.country-row-name em { padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--foil); color: var(--cover-deep); font-size: .6rem; font-style: normal; }
.country-row-score { display: grid; gap: 3px; text-align: right; text-shadow: 0 1px 0 rgb(0 0 0 / 40%); }
.country-row-score b { color: color-mix(in srgb, var(--foil) 35%, #fff); font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.country-row-score small { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.country-row-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.country-row-cover[aria-expanded="true"] .country-row-chevron { transform: translateY(2px) rotate(225deg); }
/* The one in front catches the light now and then. */
.country-row.is-leading .country-row-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--foil) 38%, transparent) 50%, transparent 58%) 0 0 / 300% 100% no-repeat; animation: ranking-shine 5.5s ease-in-out 1.2s infinite; }
@keyframes ranking-shine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
/* Its citizens, on its paper. */
.country-row-sheet { padding: 16px 20px 20px; border-top: 3px solid var(--cover-deep); color: var(--text-dark); }
.country-row-sheet[hidden] { display: none; }
.country-row-motto { margin: 0 0 14px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-style: italic; }
.country-row-motto::before { content: '“'; }
.country-row-motto::after { content: '”'; }
.country-row-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; overflow: hidden; margin: 0 0 16px; border: 1px solid color-mix(in srgb, var(--ink) 26%, #e6e1eb); border-radius: 12px; background: color-mix(in srgb, var(--ink) 26%, #e6e1eb); }
.country-row-scores > div { display: grid; gap: 2px; padding: 9px 12px; background: var(--white); }
.country-row-scores > .is-ranked { background: color-mix(in srgb, var(--ink) 11%, #fffdf9); }
/* By night a country's row is read by lamplight, as a citizen's card is (docs/design-system.md, Themes): its night
   paper, printed in its night ink (#1214). */
html[data-theme="dark"] :is(.country-row, .district-standing, .district-league) { --ink: var(--ink-night, var(--text-dark)); background: var(--paper, none), var(--paper-night, var(--white)); }
html[data-theme="dark"] .country-row-scores { border-color: color-mix(in srgb, var(--ink) 26%, var(--muted-gray)); background: color-mix(in srgb, var(--ink) 26%, var(--muted-gray)); }
html[data-theme="dark"] .country-row-scores > .is-ranked { background: color-mix(in srgb, var(--ink) 14%, var(--paper-night, var(--white))); }
.country-row-scores dt { order: 2; color: var(--text-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.country-row-scores dd { margin: 0; color: var(--ink); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.country-row-note { margin: 0; color: color-mix(in srgb, var(--ink) 70%, #25252d); font-size: .8rem; font-weight: 700; }
.country-citizens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 0; padding: 0; list-style: none; }
.country-citizens .collector-avatar { border-color: var(--cover-deep); }
/* By district (#1005): the country's districts stand where its citizens do, each under its seal, on the
   country's metric at what its members add up to. */
.ranking-grouping { margin-right: auto; }
.country-districts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.country-districts > .country-row-note { padding: 4px 8px 0; }
.country-district { display: grid; grid-template-columns: 26px 46px minmax(0, 1fr) minmax(80px, .8fr) 150px; align-items: center; gap: 12px; padding: 6px 12px 6px 8px; border: 1px solid color-mix(in srgb, var(--ink) 30%, #e6e1eb); border-radius: 10px; background: rgb(255 255 255 / 55%); color: #25252d; }
.country-district.is-own { border: 2px solid var(--ink-border); background: var(--tint-yellow); box-shadow: 3px 3px 0 var(--ink-shadow); }
.country-district-seal { display: block; width: 46px; height: 46px; color: var(--ink); rotate: -6deg; }
.country-district-seal .district-seal { display: block; width: 100%; height: 100%; }
.country-district-rank { color: var(--text-muted); font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.country-district-name { display: grid; gap: 2px; min-width: 0; }
.country-district-name > a { color: var(--text-dark); font-size: .98rem; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.country-district-name > a:hover { text-decoration: underline; }
.country-district-name small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--text-muted); font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.country-district-name small > span { display: inline-flex; align-items: center; gap: 5px; }
.country-district-name em { padding: 1px 7px; border-radius: 999px; background: var(--foil, #e4d5f7); color: var(--cover-deep, var(--text-dark)); font-size: .6rem; font-style: normal; font-weight: 800; }
.country-district .ranking-row-meter i { background: linear-gradient(90deg, var(--cover-deep), var(--cover)); }
.country-district .ranking-row-score b { color: var(--ink); }
.country-district .ranking-row-score small { display: block; color: var(--text-muted); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* The first three, the leader in the middle and highest. A citizen's plinth is a block of their
   country's cover; a collector with no country stands on a plain one. */
.ranking-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 0 16px; max-width: 720px; margin: 10px auto 30px; padding: 0 12px; border-bottom: 3px solid var(--ink-border); list-style: none; }
.ranking-podium[hidden] { display: none; }
.ranking-place { --plinth: 78px; --metal: #c98a5a; --shine: #ffd9b8; --edge: #6e3d1c; order: 3; display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; }
.ranking-place.is-place-1 { --plinth: 132px; --metal: #e5b75c; --shine: #fff1b3; --edge: #8c5b23; order: 2; }
.ranking-place.is-place-2 { --plinth: 104px; --metal: #b7c2ce; --shine: #eff6ff; --edge: #566276; order: 1; }
.ranking-place-collector { display: grid; justify-items: center; gap: 6px; max-width: 100%; }
.ranking-place-collector .collector { --collector-size: 84px; flex-direction: column; gap: 10px; max-width: 100%; }
.ranking-place.is-place-1 .ranking-place-collector .collector { --collector-size: 112px; }
.ranking-place-collector .collector-text { justify-items: center; }
.ranking-place-collector .collector-line { max-width: 100%; font-size: 1.05rem; white-space: normal; overflow-wrap: anywhere; }
.ranking-place.is-place-1 .collector-line { font-size: 1.25rem; }
.ranking-place.country-paper .collector-avatar { border-color: #fffdf9; box-shadow: 0 0 0 2px var(--foil), 0 0 0 4px var(--cover-deep); }
.ranking-place em, .ranking-row em { padding: 2px 8px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--pastel-yellow); color: var(--text-dark); font-size: .6rem; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ranking-place-score { margin: 0; }
.ranking-place-score b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ranking-place.is-place-1 .ranking-place-score b { font-size: 1.7rem; }
.ranking-place-score small, .ranking-row small { color: var(--text-muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ranking-plinth { --frame: #25252d; position: relative; overflow: hidden; display: grid; place-items: center; box-sizing: border-box; width: 100%; height: var(--plinth); border: 3px solid var(--frame); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--white); box-shadow: 5px 0 0 var(--frame); }
.ranking-plinth.country-cover { --frame: var(--cover-deep); }
.ranking-plinth::after { top: 7px; }
.ranking-plinth-emblem { position: absolute; right: -14px; bottom: -22px; opacity: .3; }
.ranking-plinth-emblem .bouzopp-passport-emblem { display: block; width: 104px; height: 104px; }
.ranking-medal { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--edge); border-radius: 50%; background: linear-gradient(135deg, var(--shine), var(--metal) 48%, var(--edge)); box-shadow: inset 0 0 0 2px var(--shine), 0 3px 0 var(--edge); color: var(--edge); font-size: 1.25rem; font-weight: 800; text-shadow: 0 1px 0 var(--shine); }
.ranking-place.is-place-1 .ranking-medal { width: 56px; height: 56px; font-size: 1.6rem; }

/* Everyone else, a row each. */
.ranking-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ranking-row { display: grid; grid-template-columns: 36px minmax(0, 1.25fr) 78px minmax(90px, 1fr) 150px; align-items: center; gap: 14px; padding: 9px 18px 9px 12px; border: 1px solid #dedbd6; border-radius: 12px; background: var(--white); color: var(--text-dark); }
.ranking-row[hidden], .ranking-list:not(.is-searching) .ranking-row.is-on-podium { display: none; }
.ranking-row:hover { border-color: var(--ink-border); }
.ranking-row.is-own { border: 2px solid var(--ink-border); background: var(--tint-yellow); box-shadow: 4px 4px 0 var(--ink-shadow); }
.ranking-row-rank { color: var(--text-muted); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.ranking-row-collector { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ranking-row-collector .collector { min-width: 0; }
.ranking-row-country { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: .66rem; font-weight: 800; letter-spacing: .16em; }
.ranking-row-country .bouzopp-passport-emblem { display: block; flex: none; width: 26px; height: 26px; stroke-width: 3; }
.ranking-row-meter { overflow: hidden; height: 8px; border-radius: 999px; background: var(--tint-yellow); }
.ranking-row-meter i { display: block; width: calc(var(--share, 0) * 100%); height: 100%; border-radius: inherit; background: #25252d; }
.ranking-row.country-paper .ranking-row-meter i { background: linear-gradient(90deg, var(--cover-deep), var(--cover)); }
.ranking-row-score { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking-row-score b { font-size: 1.05rem; font-weight: 800; }
/* The score's name sits under the number: beside it, "collection value" ran out of the row (#1035). */
.ranking-row-score small { display: block; white-space: normal; line-height: 1.2; }

@media (max-width: 860px) {
    .ranking-row { grid-template-columns: 32px minmax(0, 1fr) 70px 110px; }
    .country-district { grid-template-columns: 22px 38px minmax(0, 1fr) 100px; gap: 8px; }
    .country-district-seal { width: 38px; height: 38px; }
    .country-district .ranking-row-meter { grid-column: 1 / -1; grid-row: 2; height: 5px; }
    .ranking-row-meter { grid-column: 1 / -1; grid-row: 2; height: 5px; }
}
@media (max-width: 560px) {
    .ranking-head h2 { flex-basis: 100%; }
    .ranking-switch { flex-wrap: wrap; border-radius: 20px; }
    .ranking-switch button { flex: auto; }
    .ranking-search { flex: 1; width: auto; min-width: 0; }
    .country-row .country-row-cover { grid-template-columns: 30px 34px minmax(0, 1fr) auto; gap: 10px; min-height: 76px; padding: 10px 12px 18px; }
    .country-row-rank { width: 28px; height: 28px; font-size: .9rem; }
    .country-row-emblem .bouzopp-passport-emblem { width: 34px; height: 34px; }
    .country-row-name b { font-size: .84rem; }
    .country-row-name small { gap: 3px 8px; font-size: .56rem; }
    .country-row-score b { font-size: 1.2rem; }
    .country-row-score small { font-size: .5rem; }
    .country-row-chevron { display: none; }
    .country-row-sheet { padding: 14px 12px 16px; }
    .ranking-podium { gap: 0 8px; padding: 0 2px; }
    .ranking-place { --plinth: 58px; }
    .ranking-place.is-place-1 { --plinth: 100px; }
    .ranking-place.is-place-2 { --plinth: 78px; }
    .ranking-place-collector .collector { --collector-size: 60px; }
    .ranking-place.is-place-1 .ranking-place-collector .collector { --collector-size: 78px; }
    .ranking-place-collector .collector-line, .ranking-place.is-place-1 .collector-line { font-size: .88rem; }
    .ranking-place-score b, .ranking-place.is-place-1 .ranking-place-score b { font-size: 1.05rem; }
    .ranking-plinth-emblem .bouzopp-passport-emblem { width: 72px; height: 72px; }
    .ranking-row { grid-template-columns: 26px minmax(0, 1fr) 26px auto; gap: 8px 10px; padding: 9px 12px 9px 8px; }
    .ranking-row-country b { display: none; }
}

/* The three pages (#1005): World, My circle, District. A page a visitor has not got is shut. */
.ranking-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -10px 0 34px; }
.ranking-pages a { min-height: 40px; padding: 8px 20px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); box-shadow: 3px 3px 0 var(--ink-shadow); color: var(--text-dark); font-size: .9rem; font-weight: 800; text-decoration: none; }
.ranking-pages a[aria-current="page"] { background: #25252d; color: #fff; }
.ranking-pages a.is-shut { opacity: .5; box-shadow: none; }
.ranking-pages a:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
/* The viewer's district: its seal, its name and where it stands among the country's, on the country's paper. */
.district-standing { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0 0 22px; padding: 16px 22px; border: 3px solid var(--cover-deep); border-radius: 14px; background: var(--paper), #fffdf9; box-shadow: 5px 5px 0 var(--cover-deep); color: #25252d; }
.district-standing[hidden] { display: none; }
.district-standing-seal { display: block; width: 84px; height: 84px; color: var(--ink); rotate: -7deg; }
.district-standing-seal .district-seal { display: block; width: 100%; height: 100%; }
.district-standing-name { display: grid; gap: 4px; min-width: 0; }
.district-standing-name a { color: var(--ink); font-size: 1.4rem; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.district-standing-name a:hover { text-decoration: underline; }
.district-standing-name small { color: var(--text-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.district-standing-rank { display: grid; gap: 2px; text-align: right; }
.district-standing-rank b { color: var(--ink); font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.district-standing-rank small { color: var(--text-muted); font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.district-standing-rank em { display: block; margin-top: 4px; color: var(--text-muted); font-size: .74rem; font-style: normal; font-weight: 700; }
.ranking-row-note em, .ranking-place-note { padding: 2px 8px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--pastel-yellow); font-size: .6rem; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* The country's districts, on the country's paper, each under its seal. */
.district-league { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--ink, #25252d) 30%, #e6e1eb); border-radius: 14px; background: var(--paper, none), #fffdf9; }
.district-league .country-districts { gap: 10px; }
.district-league .country-row-note { padding: 6px 4px 0; }
.ranking-status a { color: inherit; }
@media (max-width: 560px) {
    .district-standing { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
    .district-standing-seal { width: 56px; height: 56px; }
    .district-standing-rank { grid-column: 1 / -1; text-align: left; }
}