/* Discover · Activity tab (running contest + Leaderboard). Split out of discover.css on 2026-10-21 so
   the activity and book redesigns do not edit the same file; loaded only by discover.html.
   Direction A (Bella 2026-10-21; docs/plan-discover-visual-a-20261021.md §3, mockups
   docs/design-discover-visual/a-tidy/pc-activity*.html): the 1.0 layout and order with V3 execution —
   controls 40px, body text 16px, the poster's button the only filled green, the author's own row
   tinted, ratio-true covers, a standing card that docks only after scrolling past. Every rule hangs
   off #discoverActivities or a .dl-* class: discover.css is shared with the bookstore and creator pages,
   and contest-banner.css / contests.css with the contest pages. */
#discoverActivities { --dl-rank-col: 48px; --dl-actions-col: 208px; --dl-control-h: 40px; --dl-small-h: 36px; }
.dl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The history action has its own column. Only the cards move under the edge fade. */
.dl-subtabs { display: flex; align-items: stretch; gap: 16px; min-width: 0; margin: 0 0 24px; padding: 13px 14px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius-lg); background: var(--rk-paper); }
.dl-subtabs button { position: relative; height: auto; border: 1px solid var(--rk-line); background: var(--rk-surface); color: var(--rk-ink); font: inherit; cursor: pointer; }
.dl-contest-carousel { display: flex; align-items: center; flex: 1 1 auto; gap: 10px; min-width: 0; }
.dl-contest-track { position: relative; flex: 1 1 auto; min-width: 0; }
.dl-contest-carousel.has-more .dl-contest-track::after { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 30px; background: linear-gradient(to left, var(--rk-paper), transparent); pointer-events: none; }
.dl-contest-carousel:dir(rtl).has-more .dl-contest-track::after { background: linear-gradient(to right, var(--rk-paper), transparent); }
.dl-contest-strip { position: relative; display: flex; gap: 10px; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.dl-contest-strip::-webkit-scrollbar { display: none; }
.dl-contest-scroll:not([hidden]) { display: flex; flex: none; gap: 8px; }
.dl-contest-scroll button { display: grid; place-items: center; width: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.dl-contest-scroll button[aria-disabled=true] { color: var(--rk-ink-muted); background: transparent; cursor: default; }
.dl-contest-scroll button[aria-disabled=false]:hover { border-color: var(--rk-ink-soft); }
.dl-contest-scroll svg, .dl-contest-history svg { display: block; flex: none; width: 20px; height: 20px; }
.dl-contest-scroll:dir(rtl) svg { transform: scaleX(-1); }
.dl-contest-history { display: flex; align-items: center; flex: none; max-width: 34%; }
.dl-contest-carousel + .dl-contest-history { border-inline-start: 1px solid var(--rk-line); padding-inline-start: 16px; }
.dl-contest-history button { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 46px; padding: 8px 17px; border-color: var(--rk-emerald-ink); border-radius: var(--rk-radius-sm); color: var(--rk-emerald-ink); font-size: 17px; font-weight: 750; line-height: 1.2; text-align: start; overflow-wrap: anywhere; }
.dl-contest-history button:hover, .dl-contest-history [aria-selected=true] { background: var(--rk-emerald-soft); }
.dl-subtabs .dl-contest-card { display: flex; flex: 0 0 min(316px, 100%); flex-direction: column; justify-content: center; gap: 5px; min-width: 0; min-height: 84px; padding: 11px 21px; border-radius: var(--rk-radius); text-align: start; transition: border-color 150ms ease; }
.dl-subtabs .dl-contest-card:hover { border-color: var(--rk-card-hover-border); }
.dl-subtabs .dl-contest-card[aria-selected=true] { border-color: var(--rk-emerald-ink); box-shadow: inset 0 0 0 1px var(--rk-emerald-ink); background: color-mix(in srgb, var(--rk-emerald-soft) 70%, var(--rk-surface)); }
.dl-contest-card-name { min-width: 0; overflow: hidden; color: var(--rk-ink); font-size: 18px; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.dl-contest-card-line { display: flex; align-items: center; min-width: 0; gap: 10px; color: var(--rk-ink-soft); font-size: 16px; line-height: 1.25; }
.dl-contest-card-kind, .dl-contest-card-stage { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-contest-card-stage, .dl-contest-pending { border-radius: 999px; padding: 4px 11px; font-size: 14px; font-weight: 750; line-height: 1.2; }
.dl-contest-card-stage { flex: 0 0 auto; max-width: 76%; background: color-mix(in srgb, var(--rk-ink) 12%, var(--rk-paper)); color: var(--rk-ink); }
.dl-contest-card-stage.is-live { background: color-mix(in srgb, var(--rk-good) 19%, var(--rk-surface)); color: var(--rk-emerald-ink); }

.dl-contest-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block: 18px 14px; padding: 12px 20px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius-sm); background: color-mix(in srgb, var(--rk-paper-2) 55%, var(--rk-paper)); color: var(--rk-ink-soft); overflow-wrap: anywhere; }
.dl-contest-status-info { display: flex; flex: 1 1 280px; align-items: center; gap: 16px; min-width: 0; }
.dl-contest-status-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 100%; margin-inline-start: auto; }
.dl-contest-status-icon { display: grid; place-items: center; flex: none; align-self: stretch; padding-inline-end: 16px; border-inline-end: 1px solid var(--rk-line); color: var(--rk-emerald-ink); }
.dl-contest-status-icon svg { display: block; width: 38px; height: 38px; }
.dl-contest-status-copy { display: grid; gap: 3px; min-width: 0; }
.dl-contest-status-heading, .dl-contest-status-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.dl-contest-status-heading strong { color: var(--rk-ink); font-size: 23px; font-weight: 750; line-height: 1.2; }
.dl-contest-status-dates { font-size: 15px; line-height: 1.45; }
.dl-contest-pending { background: color-mix(in srgb, var(--rk-warn) 35%, var(--rk-paper)); color: color-mix(in srgb, var(--rk-warn) 25%, var(--rk-ink)); }

@media (max-width: 640px) {
  .dl-subtabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px; }
  .dl-contest-history { max-width: 100%; justify-content: flex-end; }
  .dl-contest-carousel + .dl-contest-history { border-inline-start: 0; border-block-start: 1px solid var(--rk-line); padding: 8px 0 0; }
  .dl-subtabs .dl-contest-card { min-height: 72px; padding-inline: 12px; }
  .dl-contest-card-name { font-size: 16px; }
  .dl-contest-card-line { gap: 6px; font-size: 13px; }
  .dl-contest-card-stage { padding-inline: 7px; font-size: 12px; }
  .dl-contest-scroll:not([hidden]) { gap: 4px; }
  .dl-contest-scroll button { width: 32px; min-height: 36px; }
  .dl-contest-status { padding: 10px 12px; }
  .dl-contest-status-info { gap: 10px; }
  .dl-contest-status-icon { padding-inline-end: 10px; }
  .dl-contest-status-icon svg { width: 27px; height: 27px; }
  .dl-contest-status-heading strong { font-size: 19px; }
}

.dl-empty.dl-ranking-empty { min-height: 0; padding-block: 16px 36px; }
.dl-ranking-empty svg { width: 62px; height: 48px; margin-block-end: 8px; color: var(--rk-ink-muted); }
#discoverActivities .dl-ranking-empty .dl-empty-title { font-size: 21px; font-weight: 750; }

/* Let the empty ranking fill the space below its tabs on desktop. On short windows it still takes
   up its natural height, so the notice stays readable and the page can scroll. */
@media (min-width: 681px) {
  :is(.rk-main, .rk-content, .discover-page):has(#discoverActivities:not([hidden]) .dl-ranking-empty),
  #discoverActivities:not([hidden]):has(.dl-ranking-empty),
  #discoverActivities .dl-panel:has(> .dl-ranking-empty) {
    display: flex;
    flex-direction: column;
  }
  .rk-content:has(#discoverActivities:not([hidden]) .dl-ranking-empty) { flex: 1; width: 100%; }
  .discover-page:has(#discoverActivities:not([hidden]) .dl-ranking-empty),
  #discoverActivities:not([hidden]):has(.dl-ranking-empty),
  #discoverActivities .dl-panel:has(> .dl-ranking-empty),
  #discoverActivities .dl-ranking-empty { flex: 1 0 auto; }
  .discover-page:has(#discoverActivities:not([hidden]) .dl-ranking-empty),
  #discoverActivities .dl-panel:has(> .dl-ranking-empty):not(:has(.dl-standing.is-docked)) { padding-block-end: 0; }
  #discoverActivities .dl-panel:has(> .dl-ranking-empty) > .dl-contest-status:has(+ .dl-standing-slot:not(.is-invite)) { margin-block-end: 0; }
  #discoverActivities .dl-ranking-empty { margin-block: 0; padding-block: 16px; }
}

/* Leaderboard season row: content-wide segmented control that scrolls sideways */
.dl-seasons { display: inline-flex; max-width: 100%; margin: 0 0 24px; padding: 2px; overflow-x: auto; border-radius: var(--rk-radius-sm); background: var(--rk-paper-2); scrollbar-width: none; }
.dl-seasons::-webkit-scrollbar { display: none; }
.dl-seasons button { flex: 0 0 auto; height: var(--dl-control-h); max-width: 288px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--rk-ink-soft); font: inherit; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.dl-seasons [aria-selected=true] { border-color: var(--rk-line); background: var(--rk-surface); color: var(--rk-ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--rk-ink) 10%, transparent); }
.dl-subtabs button:focus-visible, .dl-seasons button:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 2px; border-radius: 4px; }

/* Poster: shared renderContestBanner with Discover's opt-ins (actionsInCopy, a live deadline). The ID
   scope outranks `.contest-banner.is-compact .contest-banner-copy`, which loads later. */
#discoverActivities .contest-banner { border-radius: var(--rk-radius); }
#discoverActivities .contest-banner .contest-banner-copy { min-height: 220px; max-width: 640px; padding: 28px 40px; }
#discoverActivities .contest-banner-title { font-size: clamp(26px, 3.2cqw, 38px); line-height: 1.2; letter-spacing: -.01em; }
#discoverActivities .contest-banner-dates { gap: 2px; margin-block-start: 10px; color: var(--rk-ink-soft); font-size: 16px; font-weight: 400; }
#discoverActivities .contest-banner-dates .is-live { color: var(--rk-ink); font-weight: 600; }
#discoverActivities .contest-banner-actions { gap: 12px; }
#discoverActivities .contest-banner-actions:empty { display: none; }
#discoverActivities .contest-banner-button { height: var(--dl-control-h); min-height: var(--dl-control-h); gap: 8px; padding: 0 18px; border-radius: var(--rk-radius-sm); font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: none; }
#discoverActivities .dl-contest-status-actions .contest-banner-button { flex: 0 1 auto; max-width: 100%; min-width: 0; min-height: 44px; height: auto; padding: 8px 16px; line-height: 1.25; text-align: center; white-space: normal; }
#discoverActivities .contest-banner-button svg { width: 18px; height: 18px; flex: none; }
#discoverActivities .contest-banner-button:not(.is-primary):hover { border-color: var(--rk-ink-muted); }
/* A narrow poster (by its own width, so the 768px window counts too) puts the copy over faded art. */
@container (max-width: 640px) {
  #discoverActivities .contest-banner .contest-banner-copy { max-width: none; min-height: 0; padding: 24px 20px; }
  #discoverActivities .contest-banner-media { opacity: .14; }
}

.dl-ranking, .dl-skeletons, .dl-panel > .dl-empty { margin-block: 16px 0; }

/* Covers: ratio-true, fitted inside a fixed stage (.dl-cover-slot, .dl-podium-cover, .dl-standing-art) that is a size
   container; --book-ratio is corrected by bindBookCoverImages from the real image. */
.dl-cover-slot, .dl-podium-cover, .dl-standing-art { display: flex; flex: none; align-items: center; justify-content: center; container-type: size; }
.dl-cover { position: relative; display: block; flex: none; width: min(100cqw, calc(100cqh * var(--book-ratio, .75))); height: min(100cqh, calc(100cqw / var(--book-ratio, .75))); overflow: hidden; border-radius: 6px; border-start-start-radius: 4px; border-end-start-radius: 4px; background: var(--rk-paper-2); }
.dl-cover.is-film { border-radius: 8px; }
.dl-cover-play { position: absolute; left: 50%; top: 50%; width: 22%; min-width: 22px; max-width: 44px; height: auto; transform: translate(-50%, -50%); pointer-events: none; }
.dl-cover img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dl-cover:not(.is-film)::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 5px; width: 1px; background: color-mix(in srgb, var(--rk-ink) 16%, transparent); box-shadow: 1px 0 0 color-mix(in srgb, var(--rk-surface) 40%, transparent); }
[dir="rtl"] .dl-cover:not(.is-film)::after { box-shadow: -1px 0 0 color-mix(in srgb, var(--rk-surface) 40%, transparent); }
/* Table covers: a 4:3 stage for books (the same as the podium), a 16:9 one for animations, so titles line up whatever the shape. */
.dl-cover-slot { width: 88px; height: 66px; }
.dl-list.is-film .dl-cover-slot { width: 112px; height: 63px; }

/* Podium (only above three works; Kim 2026-10-31 reference): rank order in the DOM, shown 2nd · 1st · 3rd. First place is
   a little wider, a little raised and warm; each card wears a ribbon over its top edge. Covers are ratio-true on a plain
   stage whose height comes out the same in all three cards. Votes and Vote sit on the bottom edge. Text and controls grow
   with the window between a laptop and a wide monitor, so the cards keep the proportions of the reference. */
.dl-podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr); gap: 16px; width: 92%; margin: 28px auto 20px; padding: 0; list-style: none; }
.dl-podium-item { --dl-medal: #8a9099; display: flex; min-width: 0; margin-block-start: 9px; }
.dl-podium-item:nth-child(1) { --dl-medal: #b8860b; order: 2; margin-block-start: 0; }
.dl-podium-item:nth-child(2) { order: 1; }
.dl-podium-item:nth-child(3) { --dl-medal: #a8612f; order: 3; }
.dl-podium-card { position: relative; display: flex; flex: 1; min-width: 0; flex-direction: column; padding: 40px 20px 18px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow-card); cursor: pointer; transition: border-color 150ms ease; }
.dl-podium-card:hover { border-color: var(--rk-card-hover-border); }
.dl-podium-item:nth-child(1) .dl-podium-card { padding: 49px 20px 18px; border-color: color-mix(in srgb, var(--dl-medal) 38%, var(--rk-line)); background: color-mix(in srgb, var(--dl-medal) 5%, var(--rk-surface)); box-shadow: var(--rk-shadow-card), 0 8px 24px color-mix(in srgb, var(--dl-medal) 12%, transparent); }
.dl-podium-cover { aspect-ratio: 16 / 9; }
.dl-podium-item:nth-child(1) .dl-podium-cover { aspect-ratio: 1.9; }
.dl-podium-cover .dl-cover { border-radius: 8px; box-shadow: 0 4px 14px color-mix(in srgb, var(--rk-ink) 16%, transparent); }
.dl-podium-cover .dl-cover::after { content: none; }
/* The ribbon: a swallow-tailed body and a darker fold where it wraps the card's top edge. */
.dl-podium-rank { position: absolute; z-index: 1; top: -15px; left: 50%; display: grid; width: 46px; height: 56px; padding-block-end: 8px; box-sizing: border-box; place-items: center; transform: translateX(-50%); color: #fff; font-family: var(--rk-font-display); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--rk-ink) 28%, transparent)); }
.dl-podium-rank::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--dl-medal) 82%, #fff), var(--dl-medal)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
.dl-podium-rank::after { content: ''; position: absolute; z-index: -1; top: 0; left: -5px; right: -5px; height: 8px; background: color-mix(in srgb, var(--dl-medal) 78%, #000); clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 100%, 0 100%); }
.dl-podium-head { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 2px; }
.dl-podium-title { display: -webkit-box; min-width: 0; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--rk-ink); font-size: clamp(18px, 1vw, 21px); font-weight: 700; line-height: 1.3; text-align: match-parent; text-align: -webkit-match-parent; overflow-wrap: anywhere; }
.dl-podium-title a, .dl-row-title a { color: inherit; text-decoration: none; }
.dl-podium-title a:hover, .dl-row-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dl-podium-author { overflow: hidden; margin: 0; color: var(--rk-ink-soft); font-size: clamp(15px, .76vw, 16px); line-height: 1.4; text-align: match-parent; text-align: -webkit-match-parent; text-overflow: ellipsis; white-space: nowrap; }
.dl-podium-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: var(--dl-control-h); margin-block-start: auto; padding-block-start: 12px; }
.dl-podium-foot .dl-votes.is-total { font-size: clamp(14px, .86vw, 18px); }
.dl-podium-foot .dl-votes.is-total strong { font-family: var(--rk-font-display); font-size: clamp(22px, 1.52vw, 32px); font-weight: 800; line-height: 1; }
.dl-podium-foot .dl-row-actions { min-width: 0; flex: none; margin-inline-start: auto; }
.dl-podium-foot .dl-vote, .dl-podium-foot .dl-voted { min-width: clamp(88px, 5.4vw, 114px); height: clamp(36px, 2.1vw, 44px); font-size: clamp(15px, .85vw, 18px); }

/* Ranking table: one card, a header line, hairlines between rows. Rank · 8-column grid (entry 4 · author 3 · votes 1) · actions */
.dl-list { overflow: hidden; border: 1px solid var(--rk-line); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow-card); }
.dl-list:empty { display: none; }
.dl-list-head, .dl-row { display: flex; align-items: center; gap: 16px; padding-inline: 24px; }
.dl-list-head { min-height: 44px; border-block-end: 1px solid var(--rk-line); color: var(--rk-ink-soft); font-size: 14px; font-weight: 600; }
.dl-rank { width: var(--dl-rank-col); flex: 0 0 var(--dl-rank-col); color: var(--rk-ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.dl-list-head .dl-rank { color: inherit; font-size: inherit; }
.dl-grid { display: grid; flex: 1; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: center; gap: 0 16px; min-width: 0; }
.dl-col-title { grid-column: span 4; display: flex; align-items: center; gap: 16px; min-width: 0; }
.dl-col-author { grid-column: span 3; min-width: 0; }
.dl-col-votes { grid-column: span 1; min-width: 0; }
.dl-rows { margin: 0; padding: 0; list-style: none; }
.dl-row { position: relative; min-height: 80px; padding-block: 8px; cursor: pointer; transition: background-color 150ms ease; }
.dl-row + .dl-row { border-block-start: 1px solid var(--rk-line); }
.dl-row:hover { background: color-mix(in srgb, var(--rk-paper-2) 50%, var(--rk-surface)); }
/* Titles and names keep dir="auto" for their punctuation but align to the page's start (the cover side).
   Chrome only knows the prefixed -webkit-match-parent; the plain value is for the other engines. */
.dl-row-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl-row-title { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--rk-ink); font-size: 16px; font-weight: 600; line-height: 1.3; text-align: match-parent; text-align: -webkit-match-parent; overflow-wrap: anywhere; }
/* At least the mockup's column; long-locale labels widen it rather than clip */
.dl-row-actions { display: flex; min-width: var(--dl-actions-col); flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; }

.dl-author { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--rk-ink); font-size: 16px; }
.dl-avatar { display: grid; width: 28px; height: 28px; flex: none; overflow: hidden; place-items: center; border: 1px solid var(--rk-line); border-radius: 50%; background: var(--rk-paper-2); color: var(--rk-ink-soft); font-size: 13px; font-weight: 700; line-height: 1; }
.dl-avatar.is-large { width: 56px; height: 56px; font-size: 20px; }
.dl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dl-author-name { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.dl-you { display: inline-grid; height: 24px; flex: none; place-items: center; padding: 0 8px; border-radius: 6px; background: var(--rk-emerald-soft); color: var(--rk-emerald-ink); font-size: 13px; font-weight: 700; }
.dl-votes { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--rk-ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-votes.is-total { font-size: 15px; }
.dl-votes.is-total > span { color: var(--rk-ink-soft); font-weight: 500; }
.dl-votes.is-total strong { color: var(--rk-ink); font-weight: 600; }

/* Buttons: Vote is filled on the podium and outlined in the table; Voted is a tinted label; the author's own work
   gets an outlined Watch and an emerald-outlined Share. */
.dl-vote, .dl-preview, .dl-standing-button, .dl-share-labelled { display: inline-flex; height: var(--dl-control-h); flex: none; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius-sm); background: var(--rk-surface); color: var(--rk-ink); font: inherit; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.dl-vote { min-width: 110px; height: var(--dl-small-h); padding: 0 14px; font-size: 15px; }
.dl-vote:hover:not(:disabled), .dl-preview:hover { border-color: var(--rk-ink-muted); }
.dl-vote:disabled { opacity: .5; cursor: default; }
.dl-vote.is-primary { border-color: var(--rk-emerald-ink); background: var(--rk-emerald-ink); color: var(--rk-surface); }
.dl-vote.is-primary:hover:not(:disabled) { border-color: var(--rk-emerald-ink-hover); background: var(--rk-emerald-ink-hover); }
.dl-voted { display: inline-flex; min-width: 110px; height: var(--dl-small-h); align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: var(--rk-radius-sm); background: var(--rk-emerald-soft); color: var(--rk-emerald-ink); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: default; }
.dl-voted svg { width: 18px; height: 18px; flex: none; }
.dl-preview svg { width: 16px; height: 16px; flex: none; }
.dl-share-labelled { border-color: var(--rk-emerald-ink); color: var(--rk-emerald-ink); }
.dl-share-labelled:hover { background: var(--rk-emerald-soft); }
.dl-share-labelled svg { width: 18px; height: 18px; flex: none; }
.dl-standing-button { border-color: transparent; background: var(--rk-emerald-ink); color: var(--rk-surface); }
.dl-standing-button:hover { background: var(--rk-emerald-ink-hover); }
.dl-row-actions .dl-preview, .dl-row-actions .dl-share-labelled { height: var(--dl-small-h); padding: 0 12px; font-size: 14px; }
.dl-vote:focus-visible, .dl-preview:focus-visible, .dl-standing-button:focus-visible, .dl-share-labelled:focus-visible, .dl-podium-title a:focus-visible, .dl-row-title a:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 2px; }

/* Loading, empty and failed: same sizes as the rest of the tab */
.dl-skeletons { display: grid; gap: 12px; }
.dl-skeleton { display: block; height: 80px; border-radius: var(--rk-radius); background: linear-gradient(90deg, var(--rk-paper-2), var(--rk-surface), var(--rk-paper-2)); background-size: 200% 100%; animation: dl-shimmer 1.4s ease infinite; }
#discoverActivities .dl-empty p, #discoverActivities .dl-more { font-size: 16px; }
#discoverActivities .contest-button { min-height: var(--dl-control-h); padding-block: 0; font-size: 16px; }

/* The author's own entry: rests in a slot under the poster and docks to the window bottom once the slot has scrolled
   off the top. discover-contests.js copies the slot's box onto the docked card and lifts it clear of the bottom nav
   and the task float. No ancestor of the card may get transform / filter / contain / container-type: that would trap
   the fixed card inside it. */
.dl-standing-slot { min-height: 108px; margin-block-start: 16px; }
.dl-standing { box-sizing: border-box; display: flex; align-items: center; gap: 20px; min-height: 108px; padding: 12px 20px 12px 12px; border: 1px solid color-mix(in srgb, var(--rk-emerald) 24%, var(--rk-line)); border-radius: var(--rk-radius); background: color-mix(in srgb, var(--rk-emerald-soft) 60%, var(--rk-surface)); }
[dir="rtl"] .dl-standing { padding: 12px 12px 12px 20px; }
.dl-standing-slot.is-invite { height: 1px; min-height: 1px; margin-block: 0 -1px; }
.is-invite > .dl-standing:not(.is-docked) { display: none; }
/* A slim bar: it floats over the ranking, so it should cover as little of it as it can. */
.is-invite > .dl-standing { gap: 14px; min-height: 64px; padding: 10px 16px; }
.is-invite .dl-avatar.is-large { width: 40px; height: 40px; margin-inline-start: 4px; font-size: 16px; }
.is-invite .dl-standing-title { font-size: 16px; }
.is-invite .dl-standing-message { font-size: 15px; }
.dl-standing > .dl-avatar { margin-inline-start: 8px; }
.dl-standing-art { width: 148px; height: 84px; }
.dl-standing-who { display: grid; flex: 1 1 0; gap: 4px; min-width: 120px; }
.dl-standing-label { color: var(--rk-emerald-ink); font-size: 14px; font-weight: 600; }
.dl-standing-title { overflow: hidden; color: var(--rk-ink); font-size: 20px; font-weight: 700; line-height: 1.3; text-align: match-parent; text-align: -webkit-match-parent; text-overflow: ellipsis; white-space: nowrap; }
.dl-standing-name { overflow: hidden; color: var(--rk-ink-soft); font-size: 14px; text-align: match-parent; text-align: -webkit-match-parent; text-overflow: ellipsis; white-space: nowrap; }
.dl-standing-stats { display: flex; flex: none; align-self: stretch; }
.dl-stat { display: grid; align-content: center; gap: 4px; padding-inline: 24px; border-inline-start: 1px solid var(--rk-line); white-space: nowrap; }
.dl-stat-label { color: var(--rk-ink-soft); font-size: 13px; }
.dl-stat-value { color: var(--rk-ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-stat-value strong { margin-inline: 2px; font-family: var(--rk-font-display); font-size: 28px; font-weight: 800; line-height: 1; }
.dl-standing-message { flex: 1 1 0; min-width: 160px; color: var(--rk-ink); font-size: 16px; line-height: 1.4; }
.dl-standing-actions { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 8px; margin-inline-start: auto; }
.dl-standing-actions:empty { display: none; }
.dl-standing.is-docked { position: fixed; z-index: 20; inset-block-end: var(--dl-dock-offset, 16px); box-shadow: var(--rk-shadow-card), var(--rk-shadow-panel); }
.dl-standing.is-docking { animation: dl-dock-in 180ms ease-out; }
/* Keyboard focus never lands behind the docked card (WCAG 2.4.11): a link or button that Tab scrolls
   into view stops above it. --dl-dock-offset is set on #discoverActivities while the card is docked. */
#discoverActivities:has(.dl-standing.is-docked) .dl-panel :is(a[href], button):not(.dl-standing *) { scroll-margin-block-end: calc(var(--dl-standing-h, 108px) + var(--dl-dock-offset, 16px) + 16px); }
/* Room under the list for the docked card: the last row and the load-more retry are never hidden (the
   page and main paddings below the panel add about 80px more). */
.dl-panel:has(.dl-standing-slot) { padding-block-end: max(16px, calc(var(--dl-standing-h, 108px) - 24px)); }

@keyframes dl-shimmer { to { background-position: -200% 0; } }
@keyframes dl-dock-in { from { opacity: 0; transform: translateY(12px); } }

/* ≤1100: the own-entry card has no room for one line, so its stats and actions take a second one. */
@media (max-width: 1100px) {
  .dl-standing { flex-wrap: wrap; gap: 12px 16px; padding-inline-end: 12px; }
  .dl-standing-who, .dl-standing-message { flex-basis: calc(100% - 180px); }
  .dl-standing-stats { align-self: auto; }
  .dl-stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
  #discoverActivities { --dl-actions-col: 176px; }
  .dl-list-head, .dl-row { padding-inline: 12px; }
  .dl-list.is-film .dl-cover-slot { width: 88px; height: 50px; }
  .dl-col-title { gap: 12px; }
  .dl-podium { width: 100%; }
  .dl-podium-card { padding-inline: 14px; }
  .dl-podium-item:nth-child(1) .dl-podium-card { padding-inline: 16px; }
}
/* ≤900: two-line rows (cover · title, then author · votes) with the actions at the end. */
@media (max-width: 900px) {
  #discoverActivities { --dl-rank-col: 28px; }
  .dl-list-head { display: none; }
  .dl-row { gap: 12px; padding-inline: 16px; padding-block: 12px; }
  .dl-row .dl-grid { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cover title title" "cover author votes"; gap: 4px 12px; }
  .dl-row .dl-col-title { display: contents; }
  .dl-row .dl-cover-slot { grid-area: cover; }
  .dl-row .dl-row-name { grid-area: title; }
  .dl-row .dl-col-author { grid-area: author; }
  .dl-row .dl-col-votes { grid-area: votes; }
  .dl-row-actions { min-width: 0; }
  .dl-vote, .dl-voted { min-width: 0; padding-inline: 12px; }
  .dl-podium { gap: 12px; }
}
/* ≤640: one podium card per line, table rows on three lines (title, author · votes, actions), and the own-entry card
   stacked. */
@media (max-width: 640px) {
  .dl-podium { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dl-podium-item:nth-child(n) { order: 0; margin-block-start: 0; }
  .dl-podium-item:nth-child(n) .dl-podium-cover { aspect-ratio: 16 / 9; }
  .dl-row { display: grid; grid-template-columns: minmax(var(--dl-rank-col), auto) 64px minmax(0, 1fr) auto; grid-template-areas: "rank cover title title" "rank cover author votes" "rank cover actions actions"; align-items: center; gap: 4px 12px; }
  .dl-row:not(:has(> .dl-row-actions)) { grid-template-areas: "rank cover title title" "rank cover author votes"; }
  .dl-row > .dl-grid { display: contents; }
  .dl-row > .dl-rank { grid-area: rank; width: auto; }
  .dl-row > .dl-row-actions { grid-area: actions; justify-content: flex-start; margin-block-start: 4px; }
  .dl-row > .dl-row-actions:empty { display: none; }
  .dl-cover-slot, .dl-list.is-film .dl-cover-slot { width: 64px; height: 48px; }
  .dl-standing-art { width: 96px; height: 54px; }
  .dl-standing-who, .dl-standing-message { flex-basis: calc(100% - 112px); }
  .dl-standing-title { font-size: 16px; }
  .dl-stat-value strong { font-size: 22px; }
  .dl-stat { padding-inline: 16px; }
  .dl-standing-actions { margin-inline-start: 0; flex-wrap: wrap; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-skeleton { animation: none; }
  .dl-row, .dl-podium-card { transition: none; }
  .dl-standing.is-docking { animation: none; }
}

/* One contest feature (Kim 2026-10-30): the Ranking | Rules and prizes switch, the line shown when nothing runs,
   and prize labels in a finished ranking. */
.dl-panes { display: flex; gap: 8px 28px; margin-block: 0; overflow-x: auto; border-block-end: 1px solid var(--rk-line); scrollbar-width: none; }
.dl-standing-slot:not(.is-invite) + .dl-panes { margin-block-start: 24px; }
.dl-panes::-webkit-scrollbar { display: none; }
.dl-panes button { position: relative; flex: none; height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--rk-ink-soft); font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.dl-panes [aria-selected=true] { color: var(--rk-ink); font-weight: 700; }
.dl-panes [aria-selected=true]::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; border-radius: 2px; background: var(--rk-emerald-ink); }
.dl-panes button:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: -2px; border-radius: 4px; }
.dl-panes + .contest-rules-pane { margin-block-start: 24px; }
.dl-none-running { margin: 0 0 20px; color: var(--rk-ink-soft); font-size: 16px; }
.dl-prize { color: var(--rk-emerald-ink); font-size: 16px; font-weight: 700; }
.dl-podium-card .dl-prize { margin: 8px 0 0; }
.dl-row-actions.dl-prize { justify-content: center; font-size: 15px; }
#discoverActivities .contest-banner-eyebrow { margin-block-end: 8px; }
/* Discover keeps the two buttons on the poster, at the lower left where the copy used to end. */
#discoverActivities .contest-banner.is-image-only .contest-banner-actions { position: absolute; inset-block-end: 24px; inset-inline-start: 40px; inset-block-start: auto; inset-inline-end: auto; display: flex; width: auto; padding: 0; justify-content: flex-start; }
#discoverActivities .contest-banner.is-image-only .contest-banner-media { opacity: 1; }
@media (max-width: 760px) {
  /* A 6:1 strip this narrow is shorter than the buttons, so they drop below it. */
  #discoverActivities .contest-banner.is-image-only .contest-banner-actions { position: static; padding-block-start: 12px; }
}

/* Contest share window (lib/contest-share-dialog.js, Kim 2026-11-07) reuses the film share window styles;
   only the card differs: the full cover sits over its own faded copy instead of a per-platform card. */
.dl-share-card > img:not(.dl-share-card-cover) { filter: blur(10px); transform: scale(1.12); }
.dl-share-card > img.dl-share-card-cover { z-index: 2; opacity: 1; object-fit: contain; padding: 12px; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--rk-ink) 28%, transparent)); }