/* ===========================================================================
   Lifehaki — Ranking detail page (/rankings/{slug}).
   Loaded only when bodyClass contains `lh-rank-detail` (see templates/layout.php).

   Everything is scoped under `body.lh-rank-detail` so it outranks the older
   flat `.rk-*` rules at the bottom of lifehaki-design.css without touching
   them. Class prefix stays `rk-*` per the project convention.
   =========================================================================== */

body.lh-rank-detail {
    --rk-paper: #f5f5f9;
    --rk-white: #fff;
    --rk-ink: #15171c;
    --rk-ink-2: #20242b;
    --rk-body: #3a3f47;
    --rk-muted: #767d89;
    --rk-faint: #9aa0ab;
    --rk-line: #e3e3ea;
    --rk-line-2: #eeeef3;
    --rk-red: #ca2128;
    --rk-red-dark: #a81a20;
    --rk-gold: #fdc949;
    --rk-gold-700: #c8951f;
    --rk-green: #2f8f5b;

    --rk-display: 'Fraunces', Georgia, serif;
    --rk-text: 'Urbanist', system-ui, sans-serif;
    --rk-cond: 'Barlow Condensed', sans-serif;
    --rk-mono: 'DM Mono', ui-monospace, monospace;

    background: var(--rk-paper);
}
body.lh-rank-detail main { overflow-x: hidden; }

/* --- header -------------------------------------------------------------
   There is no bespoke header here: the page includes the SAME transparent
   overlay nav as the homepage (templates/partials/home_nav.php, styles in
   lifehaki-home.css) and the route passes `chromeless` so the global `.nav`
   is not rendered at all. The wrapper just needs to sit above the hero art. */
body.lh-rank-detail .rk-hero > .lhh-navwrap { position: relative; z-index: 6; }

@keyframes rk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(47,143,91,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(47,143,91,0); }
    100% { box-shadow: 0 0 0 0 rgba(47,143,91,0); }
}
@keyframes rk-toast-in {
    from { transform: translate(-50%, 24px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* ---------------------------------------------------------------- HERO --- */
/* Column flow: overlay nav on top, hero copy pushed to the bottom by the
   `margin-top:auto` on .rk-hero-inner. */
body.lh-rank-detail .rk-hero {
    position: relative;
    min-height: 720px;
    padding: 0;
    overflow: hidden;
    background-color: var(--rk-ink);
    display: flex;
    flex-direction: column;
}
body.lh-rank-detail .rk-hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--rk-ink); }
body.lh-rank-detail .rk-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 1;
}
/* Two stacked scrims: a left-to-right darkening for text legibility, and a
   top/bottom fade so the nav and the section below both blend in. */
body.lh-rank-detail .rk-hero-scrim-x {
    position: absolute; inset: 0;
    background: linear-gradient(95deg, #0d0e11 0%, rgba(13,14,17,.88) 40%, rgba(20,9,9,.15) 100%);
}
body.lh-rank-detail .rk-hero-scrim-y {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,14,17,.6) 0%, rgba(13,14,17,0) 26%,
                                        rgba(13,14,17,0) 55%, rgba(13,14,17,.72) 100%);
}
body.lh-rank-detail .rk-hero-orb {
    position: absolute; border-radius: 50%; pointer-events: none;
}
body.lh-rank-detail .rk-hero-orb-gold {
    top: -170px; right: -120px; width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(253,201,73,.22), rgba(253,201,73,0) 70%);
}
body.lh-rank-detail .rk-hero-orb-red {
    bottom: -150px; left: -110px; width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(202,33,40,.24), rgba(202,33,40,0) 70%);
}

body.lh-rank-detail .rk-hero-inner {
    position: relative; z-index: 4;
    width: 100%; max-width: 1240px; margin: auto auto 0;
    padding: 44px 40px 76px;
}

body.lh-rank-detail .rk-ribbon {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 26px;
}
body.lh-rank-detail .rk-ribbon-live {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(253,201,73,.14); border: 1px solid rgba(253,201,73,.35);
    font: 700 14px/1 var(--rk-cond);
    letter-spacing: .14em; text-transform: uppercase; color: var(--rk-gold);
}
body.lh-rank-detail .rk-dot-live {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--rk-green); animation: rk-pulse 2.2s infinite;
}
body.lh-rank-detail .rk-ribbon-note {
    font: 600 13px/1 var(--rk-cond);
    letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
body.lh-rank-detail .rk-ghost-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #fff; font: 700 13px/1 var(--rk-text); cursor: pointer;
    text-decoration: none;
}
body.lh-rank-detail .rk-ghost-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

body.lh-rank-detail .rk-hero-copy { max-width: 760px; }
body.lh-rank-detail .rk-hero-title {
    font: 900 clamp(30px, 6.4vw, 64px)/.98 var(--rk-display);
    letter-spacing: -.025em; color: #fff; margin: 0 0 18px;
}
body.lh-rank-detail .rk-hero-title em { color: var(--rk-gold); font-style: italic; }
body.lh-rank-detail .rk-hero-tagline,
body.lh-rank-detail .rk-hero-desc {
    font: 500 19px/1.55 var(--rk-text);
    color: rgba(255,255,255,.82); margin: 0 0 20px; max-width: 620px;
}
body.lh-rank-detail .rk-hero-desc { font-size: 17px; color: rgba(255,255,255,.72); }

body.lh-rank-detail .rk-hero-stats {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin-top: 14px;
}
body.lh-rank-detail .rk-stat { display: flex; align-items: center; gap: 9px; }
body.lh-rank-detail .rk-stat-num { font: 500 15px/1 var(--rk-mono); color: #fff; }
body.lh-rank-detail .rk-stat-label { font: 500 15px/1 var(--rk-text); color: rgba(255,255,255,.7); }
body.lh-rank-detail .rk-stat-label--mono { font-family: var(--rk-mono); font-weight: 400; color: rgba(255,255,255,.82); }
body.lh-rank-detail .rk-stat-sep {
    width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4);
}

/* --------------------------------------------------------- BOARD SHELL --- */
body.lh-rank-detail .rk-section { background: var(--rk-paper); padding: 64px 0 30px; }
body.lh-rank-detail .rk-section--talk { padding: 40px 0 90px; }
body.lh-rank-detail .rk-container { max-width: 1000px; margin: 0 auto; padding: 0 40px; }

body.lh-rank-detail .rk-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 38px;
}
body.lh-rank-detail .rk-kicker {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
body.lh-rank-detail .rk-kicker::before {
    content: ''; display: inline-flex; width: 26px; height: 3px;
    background: var(--rk-red); border-radius: 2px;
}
body.lh-rank-detail .rk-kicker--gold::before { background: var(--rk-gold); }
body.lh-rank-detail .rk-kicker span {
    font: 700 14px/1 var(--rk-cond);
    letter-spacing: .14em; text-transform: uppercase; color: var(--rk-red);
}
body.lh-rank-detail .rk-kicker--gold span { color: var(--rk-gold-700); }
body.lh-rank-detail .rk-h2 {
    font: 900 clamp(28px, 4vw, 38px)/1 var(--rk-display);
    letter-spacing: -.02em; color: var(--rk-ink); margin: 0;
}
body.lh-rank-detail .rk-h2 em { color: var(--rk-red); font-style: italic; }
body.lh-rank-detail .rk-hint {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: 999px;
    background: var(--rk-white); border: 1px solid var(--rk-line);
    box-shadow: 0 2px 14px rgba(21,23,40,.06);
    font: 600 14px/1 var(--rk-text); color: #565d68;
}

/* ------------------------------------------------------------ ROW LIST --- */
/* One list for everything — #1–#3 are marked with a trophy in the rank slot
   instead of a separate podium. */
body.lh-rank-detail .rk-list { display: flex; flex-direction: column; gap: 12px; }
body.lh-rank-detail .rk-row {
    display: flex; align-items: center; gap: 18px;
    background: var(--rk-white); border: 1px solid var(--rk-line);
    border-radius: 16px; padding: 14px 20px 14px 16px;
    box-shadow: 0 2px 14px rgba(21,23,40,.05);
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
body.lh-rank-detail .rk-row:hover {
    transform: translateY(-2px); box-shadow: 0 10px 26px rgba(21,23,40,.1);
}
body.lh-rank-detail .rk-row.is-medal { border-color: var(--rk-ink); box-shadow: 3px 3px 0 var(--rk-line); }
body.lh-rank-detail .rk-row[data-rank="1"] { box-shadow: 3px 3px 0 var(--rk-gold); }
body.lh-rank-detail .rk-row-rank {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font: 900 30px/1 var(--rk-display); color: #c4c8d0;
    width: 44px; text-align: center; flex-shrink: 0;
}
body.lh-rank-detail .rk-row.is-medal .rk-row-rank { color: var(--rk-ink); font-size: 20px; }
body.lh-rank-detail .rk-trophy { display: block; width: 30px; height: 30px; }
body.lh-rank-detail .rk-trophy svg { width: 100%; height: 100%; display: block; }
body.lh-rank-detail .rk-trophy.is-gold   { color: var(--rk-gold); }
body.lh-rank-detail .rk-trophy.is-silver { color: #a9adb8; }
body.lh-rank-detail .rk-trophy.is-bronze { color: #c07f45; }
body.lh-rank-detail .rk-row-art {
    display: block; width: 84px; aspect-ratio: 3 / 4; flex-shrink: 0;
    border-radius: 9px; overflow: hidden; background: var(--rk-line-2);
}
body.lh-rank-detail .rk-row-art img,
body.lh-rank-detail .rk-row-art .art { width: 100%; height: 100%; object-fit: cover; display: block; }
body.lh-rank-detail .rk-row-meta { flex: 1; min-width: 0; }
body.lh-rank-detail .rk-row-meta h3 { margin: 0 0 3px; }
body.lh-rank-detail .rk-row-name {
    font: 800 20px/1.1 var(--rk-display);
    letter-spacing: -.01em; color: var(--rk-ink); text-decoration: none;
}
body.lh-rank-detail .rk-row-name:hover { color: var(--rk-red); }
/* Editor's note on the pick — capped at 160 chars server-side, clamped to two
   lines so a long one can't stretch the row. */
body.lh-rank-detail .rk-row-blurb {
    margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font: 500 14px/1.45 var(--rk-text); color: var(--rk-muted);
}
body.lh-rank-detail .rk-row-score { text-align: right; flex-shrink: 0; }
body.lh-rank-detail .rk-row-score div { font: 500 17px/1.2 var(--rk-mono); color: var(--rk-ink); }
body.lh-rank-detail .rk-row-score small { font: 500 12px/1 var(--rk-text); color: var(--rk-faint); }
/* Vote pad — shared by podium + rows. */
body.lh-rank-detail .rk-votepad {
    display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0;
}
body.lh-rank-detail .rk-vote {
    width: 38px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--rk-line); background: var(--rk-white);
    color: var(--rk-faint); cursor: pointer; padding: 0;
    transition: border-color .15s ease, color .15s ease, transform .1s ease;
}
body.lh-rank-detail .rk-vote svg { width: 20px; height: 20px; }
body.lh-rank-detail .rk-vote-up   { border-radius: 10px 10px 6px 6px; }
body.lh-rank-detail .rk-vote-down { border-radius: 6px 6px 10px 10px; }
body.lh-rank-detail .rk-vote-up:hover   { border-color: var(--rk-red); color: var(--rk-red); }
body.lh-rank-detail .rk-vote-down:hover { border-color: #565d68; color: var(--rk-ink); }
body.lh-rank-detail .rk-vote:active { transform: translateY(1px) scale(.94); }
body.lh-rank-detail .rk-vote-up.is-on   { border-color: var(--rk-red); color: var(--rk-red); background: #fbe4e2; }
body.lh-rank-detail .rk-vote-down.is-on { border-color: var(--rk-ink); color: var(--rk-ink); background: #ececf1; }
body.lh-rank-detail .rk-row .rk-vote { width: 36px; height: 32px; }
body.lh-rank-detail .rk-row .rk-vote-up   { border-radius: 10px 10px 5px 5px; }
body.lh-rank-detail .rk-row .rk-vote-down { border-radius: 5px 5px 10px 10px; }
body.lh-rank-detail .rk-row .rk-vote svg { width: 18px; height: 18px; }

body.lh-rank-detail .rk-empty {
    background: var(--rk-white); border: 1px dashed var(--rk-line);
    border-radius: 16px; padding: 40px; text-align: center;
    font: 500 16px/1.5 var(--rk-text); color: var(--rk-muted);
}
body.lh-rank-detail .rk-link { color: var(--rk-red); font-weight: 700; }
body.lh-rank-detail .rk-signin-nudge {
    margin-top: 22px; text-align: center;
    font: 500 15px/1.5 var(--rk-text); color: var(--rk-muted);
}

/* ---------------------------------------------------------- DISCUSSION --- */
body.lh-rank-detail .rk-rule { height: 1px; background: var(--rk-line); margin-bottom: 44px; }
body.lh-rank-detail .rk-h2-count {
    font: 500 24px/1 var(--rk-mono); color: var(--rk-muted);
}
body.lh-rank-detail .rk-sortpad {
    display: inline-flex; padding: 4px; border-radius: 999px;
    background: #ececf1; gap: 4px;
}
body.lh-rank-detail .rk-sort {
    padding: 8px 18px; border-radius: 999px; border: none; cursor: pointer;
    font: 700 14px/1 var(--rk-text); background: transparent; color: #565d68;
}
body.lh-rank-detail .rk-sort.is-on {
    background: var(--rk-ink); color: #fff; box-shadow: 0 2px 8px rgba(21,23,40,.18);
}

body.lh-rank-detail .rk-comment-form {
    display: flex; gap: 14px;
    background: var(--rk-white); border: 2px solid var(--rk-ink);
    border-radius: 14px; box-shadow: 4px 4px 0 var(--rk-ink);
    padding: 16px; margin-bottom: 30px;
}
body.lh-rank-detail .rk-op {
    font: 700 11px/1 var(--rk-cond); letter-spacing: .12em; text-transform: uppercase;
    color: var(--rk-gold-700); background: #fef4d6; padding: 3px 7px; border-radius: 999px;
}
body.lh-rank-detail .rk-comment-form-main { flex: 1; min-width: 0; }
body.lh-rank-detail .rk-comment-form textarea {
    width: 100%; min-height: 52px; resize: vertical;
    border: none; outline: none; background: transparent;
    font: 500 16px/1.5 var(--rk-text); color: var(--rk-ink-2); padding: 8px 2px;
}
body.lh-rank-detail .rk-comment-form textarea::placeholder { color: var(--rk-faint); }
body.lh-rank-detail .rk-comment-form-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 6px;
    border-top: 1px solid var(--rk-line-2); padding-top: 12px;
}
body.lh-rank-detail .rk-comment-form-foot .rk-muted { font: 400 12px/1 var(--rk-mono); color: var(--rk-faint); }
body.lh-rank-detail .rk-post-btn {
    background: var(--rk-red); color: #fffdf8; border: none;
    font: 700 15px/1 var(--rk-text); padding: 11px 22px; border-radius: 999px;
    cursor: pointer; box-shadow: 0 6px 16px rgba(202,33,40,.32);
}
body.lh-rank-detail .rk-post-btn:hover { background: var(--rk-red-dark); transform: translateY(-1px); }

body.lh-rank-detail .rk-reply-banner {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    font: 600 13px/1 var(--rk-text); color: var(--rk-muted);
}
body.lh-rank-detail .rk-reply-banner button {
    background: none; border: none; cursor: pointer;
    color: var(--rk-red); font: 700 13px/1 var(--rk-text); padding: 0;
}

body.lh-rank-detail .rk-comments { list-style: none; margin: 0; padding: 0; }
body.lh-rank-detail .rk-comment-thread { border-top: 1px solid var(--rk-line-2); }
body.lh-rank-detail .rk-comment-thread:first-child { border-top: none; }
body.lh-rank-detail .rk-comment {
    display: flex; gap: 13px; padding: 16px 0; list-style: none;
}
body.lh-rank-detail .rk-comment-reply {
    margin-left: 30px; border-left: 2px solid var(--rk-line); padding-left: 18px;
}
body.lh-rank-detail .rk-comment-av {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: #fbe4e2; color: var(--rk-red);
    display: flex; align-items: center; justify-content: center;
    font: 800 15px/1 var(--rk-display);
}
body.lh-rank-detail .rk-comment-av img { width: 100%; height: 100%; object-fit: cover; }
body.lh-rank-detail .rk-comment-form .rk-comment-av { width: 44px; height: 44px; font-size: 17px; }
body.lh-rank-detail .rk-comment-main { flex: 1; min-width: 0; }
body.lh-rank-detail .rk-comment-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 5px;
}
body.lh-rank-detail .rk-comment-head a { text-decoration: none; }
body.lh-rank-detail .rk-comment-head strong { font: 800 15px/1 var(--rk-text); color: var(--rk-ink); }
body.lh-rank-detail .rk-comment-head .rk-muted { font: 400 12px/1 var(--rk-mono); color: var(--rk-faint); }
body.lh-rank-detail .rk-comment-del {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--rk-faint); font-size: 18px; line-height: 1; padding: 0 4px;
}
body.lh-rank-detail .rk-comment-del:hover { color: var(--rk-red); }
body.lh-rank-detail .rk-comment-body {
    margin: 0 0 10px; font: 400 15px/1.55 var(--rk-text); color: var(--rk-ink-2);
    overflow-wrap: anywhere;
}
body.lh-rank-detail .rk-comment-actions { display: flex; align-items: center; gap: 18px; }
body.lh-rank-detail .rk-c-like,
body.lh-rank-detail .rk-c-reply {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--rk-muted); font: 700 13px/1 var(--rk-text);
}
body.lh-rank-detail .rk-c-like:hover,
body.lh-rank-detail .rk-c-reply:hover { color: var(--rk-red); }
body.lh-rank-detail .rk-c-like.is-on { color: var(--rk-red); }
body.lh-rank-detail .rk-c-like-count { font: 500 13px/1 var(--rk-mono); }
body.lh-rank-detail .rk-c-like:disabled { cursor: default; opacity: .55; }

/* ----------------------------------------------------------- CTA BAND --- */
body.lh-rank-detail .rk-cta {
    position: relative; background: var(--rk-ink); overflow: hidden;
}
body.lh-rank-detail .rk-cta::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 640px; height: 640px; transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(253,201,73,.2), rgba(253,201,73,0) 68%);
}
body.lh-rank-detail .rk-cta-inner {
    position: relative; z-index: 2; max-width: 820px; margin: 0 auto;
    padding: 78px 40px; text-align: center;
}
body.lh-rank-detail .rk-cta h2 {
    font: 900 clamp(30px, 5vw, 44px)/1.02 var(--rk-display);
    letter-spacing: -.02em; color: #fff; margin: 0 0 16px;
}
body.lh-rank-detail .rk-cta h2 em { color: var(--rk-gold); font-style: italic; }
body.lh-rank-detail .rk-cta p {
    font: 500 18px/1.55 var(--rk-text); color: rgba(255,255,255,.8); margin: 0 0 30px;
}
body.lh-rank-detail .rk-cta-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--rk-red); color: #fffdf8;
    font: 700 17px/1 var(--rk-text); text-decoration: none;
    padding: 15px 30px; border-radius: 999px;
    box-shadow: 0 10px 26px rgba(202,33,40,.4);
}
body.lh-rank-detail .rk-cta-btn:hover {
    background: var(--rk-red-dark); color: #fffdf8; transform: translateY(-2px);
}

/* --------------------------------------------------------- JOIN TOAST --- */
body.lh-rank-detail .rk-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    z-index: 1000; display: flex; align-items: center; gap: 16px;
    background: var(--rk-ink); border: 2px solid var(--rk-gold);
    border-radius: 16px; box-shadow: 6px 6px 0 rgba(253,201,73,.35);
    padding: 16px 20px; max-width: min(520px, calc(100vw - 32px));
    animation: rk-toast-in .3s cubic-bezier(.16,1,.3,1);
}
body.lh-rank-detail .rk-toast[hidden] { display: none; }
body.lh-rank-detail .rk-toast-icon {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    background: rgba(253,201,73,.16); color: var(--rk-gold);
    display: flex; align-items: center; justify-content: center;
}
body.lh-rank-detail .rk-toast-copy { flex: 1; }
body.lh-rank-detail .rk-toast-copy b {
    display: block; font: 800 17px/1.2 var(--rk-display); color: #fff; margin-bottom: 2px;
}
body.lh-rank-detail .rk-toast-copy span {
    font: 400 14px/1.4 var(--rk-text); color: rgba(255,255,255,.72);
}
body.lh-rank-detail .rk-toast-actions {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
body.lh-rank-detail .rk-toast-dismiss {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.6); font: 700 14px/1 var(--rk-text); padding: 8px;
}
body.lh-rank-detail .rk-toast-join {
    background: var(--rk-red); color: #fffdf8; text-decoration: none;
    font: 700 14px/1 var(--rk-text); padding: 10px 18px; border-radius: 999px;
    box-shadow: 0 6px 16px rgba(202,33,40,.4);
}
body.lh-rank-detail .rk-toast-join:hover { background: var(--rk-red-dark); color: #fffdf8; }

/* -------------------------------------------------------- RESPONSIVE ---- */
@media (max-width: 900px) {
    body.lh-rank-detail .rk-hero { min-height: 620px; }
    body.lh-rank-detail .rk-hero-inner { padding: 32px 20px 52px; }
    body.lh-rank-detail .rk-container { padding: 0 20px; }
    body.lh-rank-detail .rk-cta-inner { padding: 56px 20px; }
}
@media (max-width: 620px) {
    body.lh-rank-detail .rk-hero { min-height: 540px; }
    /* Stats wrap to their own lines here, so the inline dot separators just
       dangle at the end of each row. */
    body.lh-rank-detail .rk-hero-stats { gap: 8px 14px; }
    body.lh-rank-detail .rk-stat-sep { display: none; }
    body.lh-rank-detail .rk-section { padding: 40px 0 24px; }
    body.lh-rank-detail .rk-section-head { margin-bottom: 26px; }
    body.lh-rank-detail .rk-hint { display: none; }

    body.lh-rank-detail .rk-row { gap: 10px; padding: 10px 12px; }
    body.lh-rank-detail .rk-row-rank { width: 28px; font-size: 22px; }
    body.lh-rank-detail .rk-row.is-medal .rk-row-rank { font-size: 16px; }
    body.lh-rank-detail .rk-trophy { width: 24px; height: 24px; }
    body.lh-rank-detail .rk-row-art { width: 63px; }
    body.lh-rank-detail .rk-row-name { font-size: 16px; }
    body.lh-rank-detail .rk-row-blurb { font-size: 12.5px; }
    body.lh-rank-detail .rk-row-score div { font-size: 14px; }

    body.lh-rank-detail .rk-comment-reply { margin-left: 12px; padding-left: 12px; }
    body.lh-rank-detail .rk-comment-form { padding: 12px; box-shadow: 3px 3px 0 var(--rk-ink); }
    body.lh-rank-detail .rk-toast { flex-wrap: wrap; gap: 10px; }
}
/* Very narrow phones: the vote count leaves before the name or blurb does. */
@media (max-width: 380px) {
    body.lh-rank-detail .rk-row-score { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.lh-rank-detail * { animation: none !important; }
    body.lh-rank-detail .rk-row:hover { transform: none; }
}