/* =====================================================================
   DAILY-LEADERBOARD ROW — the ONE stylesheet for `.dcl-*`.

   Shared with feed.css and post.css — must stay an @import (same pattern and
   the same reason as feed/word-find.css, which sits beside it in both).

   WHY THIS FILE EXISTS. These ~110 lines lived duplicated in feed.css and
   post.css, with a handful of hand-tuned deltas in the post copy "scaled to
   this page's larger board type". Two problems with that:

     1. Every fix had to be made twice, and the post.css header already
        documents a past drift bug from exactly this.
     2. The deltas never actually applied. functions/_render.js emits
        `componentCss` (post.css) FIRST and then `headExtra`, which adds
        feed.css on any post page hosting a daily (`hasTail || needArtScript
        || needHistoryScript || isDailyChess || isDailyWord`). Equal
        specificity, so feed.css won — verified live on the daily-chess,
        daily-word and daily-history post pages, where post.css is at line 50
        and feed.css at line 129. The "larger" 23px avatar and 14px row type
        were dead code on precisely the pages that render boards.

   So there is now ONE ruleset, and it renders identically everywhere.
   Board markup comes from the four leaderboard modules; the per-row identity
   disc, standing line and win moment come from feed/board-avatar.js.

   Relies on the brand CSS variables (--crimson is rewritten by the player's
   equipped Vault scheme — see feed/xp.js applyTheme).
   ===================================================================== */
.dcl-status{ font-size:13px; color:var(--ink-soft); text-align:center; padding:10px 0 }
.dcl-status.dcl-err{ color:var(--crimson) }
.dcl-avg{ margin:7px 0 0; font-family:var(--ui); font-size:11.5px; color:var(--ink-soft);
  text-align:center; font-variant-numeric:tabular-nums }
.dcl-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px }
.dcl-row{ display:grid; grid-template-columns:4ch 1fr auto auto auto; align-items:center; gap:8px;
  padding:6px 10px; border-radius:8px; font-size:13.5px; background:color-mix(in srgb, var(--ink) 3%, transparent) }
/* YOUR ROW WEARS YOUR COLOUR, FULL WIDTH (owner ask 2026-08-03).
   The scheme picked in the Key Vault rewrites --crimson on :root (feed/xp.js
   applyTheme), so this tracks the profile choice everywhere with no plumbing —
   pick Royal Violet and your row goes violet on every board, instantly.
   It used to be a flat --gold wash, which was the same amber for everyone.
   Left-strong sweep so the row reads as flowing OUT of the accent bar rather
   than as a flat highlight, and so the time column at the right stays clean. */
.dcl-row.me,.dcl-row.dcl-mine{ font-weight:600;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--crimson) 26%, transparent),
    color-mix(in srgb, var(--crimson) 9%, transparent)) }
/* WHAT-IF ghost row (back-issue solves, feed/whatif-score.js): visibly "yours but
   not on the record" — dimmed, dashed left edge, small tag. Display-only. */
.dcl-row.dcl-whatif{ opacity:.72; font-style:italic; border-left:2px dashed color-mix(in srgb, var(--gold) 55%, var(--line)) }
.dcl-whatif-tag{ font-style:normal; font-weight:600; font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius:999px; padding:1px 6px; margin-left:5px }
/* RANK CELL — the medal and the number share ONE line. The column used to be
   2ch, which is narrower than "🥇 1", so the medal wrapped ABOVE the number
   (owner report 2026-08-03). The number is right-aligned inside a fixed column
   so ranks 4+ (no medal) still line up under the medalled top three. */
.dcl-rank{ display:flex; align-items:center; justify-content:flex-end; gap:.25em; white-space:nowrap;
  color:var(--ink-soft); font-variant-numeric:tabular-nums }
.dcl-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dcl-pen{ font-size:11px; color:var(--crimson) }
.dcl-time{ font-variant-numeric:tabular-nums; font-weight:600 }
/* PER-ROW IDENTITY DISC (feed/board-avatar.js) — your row wears your real
   avatar + equipped border; everyone else gets a quiet name-tinted monogram so
   the column stays aligned. The disc column only exists once JS decorates the
   row, so a board still lays out correctly if the module never loads. */
.dcl-row.dcl-hasav{ grid-template-columns:4ch 22px 1fr auto auto auto }
.dcl-av{ width:22px; height:22px; border-radius:50%; flex:0 0 auto }
.dcl-av-img{ display:block; object-fit:cover; background:color-mix(in srgb, var(--ink) 8%, transparent) }
.dcl-av-mono{ display:grid; place-items:center; font-family:var(--ui); font-size:10.5px; font-weight:700;
  color:var(--ink-soft); border:1px solid color-mix(in srgb, var(--ink) 10%, transparent) }
/* YOUR row, in YOUR accent: the equipped colour scheme rewrites --crimson on
   :root (feed/xp.js applyTheme), so this follows the Vault choice for free.
   .dcl-mine is the REAL row; .dcl-mine-ghost is the display-only what-if row,
   which stays deliberately plain — two rows wearing your full treatment read
   as a double entry on the board rather than "this one didn't count". */
.dcl-row.dcl-mine{ box-shadow:inset 3px 0 0 var(--crimson) }
/* YOUR NAME STAYS INK. The row already declares itself four ways — the
   full-width wash, the inset accent bar, your avatar + border ring, and the
   bold weight — and tinting the text was the fifth signal AND the only one that
   cost legibility: accent-on-wash measured 4.2:1 in Rose Quartz light, i.e. the
   name that matters most was the least readable line on the board. Inheriting
   --ink puts it back at ~13:1 and the accent still owns the row. Don't re-add
   a colour here; if your row needs more presence, strengthen the WASH. */
.dcl-row.dcl-mine .dcl-name{ font-weight:700 }
/* The +N penalty is 11px, so it needs 4.5:1 unconditionally — raw var(--crimson)
   on the wash failed in four of six light schemes. Mixed halfway to ink it keeps
   the "this cost you" read and clears AA. */
.dcl-row.dcl-mine .dcl-pen{ color:color-mix(in srgb, var(--crimson) 45%, var(--ink)) }
/* accent ring when no border is equipped — an equipped one sets an INLINE
   box-shadow/outline (feed/cosmetics.js applyBorderTo), which wins over this */
.dcl-row.dcl-mine .dcl-av-img{ box-shadow:0 0 0 1.5px color-mix(in srgb, var(--crimson) 55%, transparent) }
.dcl-row.dcl-mine-ghost .dcl-av-img{ filter:grayscale(.55) }
/* THE STANDING LINE leads the board (board-avatar.js inserts it ABOVE the list),
   so it gets a real type step rather than the 1.5px wobble it had — at 12.5/14
   the bold ran read as a font-rendering glitch, not emphasis. It sits on plain
   paper, not the wash, so the accent mix is legible here (5.9–8.6:1). */
.dcl-you{ margin:0 0 9px; font-family:var(--ui); font-size:12.5px; font-weight:600;
  text-align:center; color:color-mix(in srgb, var(--crimson) 72%, var(--ink)) }
.dcl-you b{ font-size:16px }
/* THE WIN MOMENT. The first version scaled the row 3.5%, which on a 34px row is
   1.2px — invisible at 1x, and pointless besides, since the row is ALREADY
   permanently highlighted. Flashing the accent itself is the thing you can
   actually see, and it says "this is the colour that's yours" at the exact
   moment you earned the row. Durations now match the motion: the old keyframes
   were declared 1.5s but finished at 18%/60%, so most of each was a no-op. */
.dcl-row.dcl-justwon{ animation:dclWon .9s ease-out 1 }
@keyframes dclWon{
  0%{ box-shadow:inset 3px 0 0 var(--crimson), inset 0 0 0 999px transparent }
  35%{ box-shadow:inset 3px 0 0 var(--crimson),
       inset 0 0 0 999px color-mix(in srgb, var(--crimson) 22%, transparent) }
  100%{ box-shadow:inset 3px 0 0 var(--crimson), inset 0 0 0 999px transparent } }
/* !important is load-bearing: an equipped glow/halo/aurora/aether border sets
   `animation` INLINE on this img (feed/cosmetics.js applyBorderTo), and inline
   beats a stylesheet rule — so the players who paid the most Boss Keys were
   exactly the ones who never saw the pop. The override lasts only while
   .dcl-justwon is on the row (~0.9s); the border's own loop resumes after. */
.dcl-row.dcl-justwon .dcl-av{ animation:dclWonAv .7s cubic-bezier(.22,1,.36,1) 1 !important }
@keyframes dclWonAv{ 0%{ transform:scale(.55) rotate(-16deg); opacity:0 } 100%{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .dcl-row.dcl-justwon,.dcl-row.dcl-justwon .dcl-av{ animation:none !important } }
/* ⚔️ per-row challenge affordance (feed/challenge-row.js). Standing fixture on
   every board: signed-out it IS the sign-in CTA addressed to that player, signed
   in it copies an addressed challenge link. Quiet until hover/focus so it never
   competes with the times, but always present (a hidden-until-hover control is
   invisible on touch, where most solves happen). */
.dcl-chal{ position:relative; border:0; background:none; cursor:pointer; padding:2px 4px; border-radius:6px;
  font-size:15px; line-height:1; opacity:.82; transition:opacity .12s, transform .12s, background .12s }
/* The glyph is 28.6x19 — under half the 44px touch minimum, on a control whose
   own comment argues it must be always-visible because most solves happen on
   touch. Grow the HIT AREA, not the glyph: enlarging the button would break the
   34px row rhythm. Target becomes ~44x43; the row stays 34px. */
.dcl-chal::after{ content:""; position:absolute; inset:-12px -8px }
.dcl-chal:hover,.dcl-chal:focus-visible{ opacity:1; transform:scale(1.15);
  background:color-mix(in srgb, var(--crimson) 14%, transparent) }
.dcl-chal:focus-visible{ outline:2px solid var(--crimson); outline-offset:1px }
.dcl-chal-flash{ display:block; grid-column:1/-1; margin-top:4px; font-size:11.5px;
  font-weight:600; color:var(--crimson) }
/* THE TEMP-NAME SIGN-IN LINE (see addSignInLine in feed/board-avatar.js).
   Sits under the player's OWN row, full width, so it reads as part of their
   result rather than as an ad bolted onto the board. Anonymous solvers only. */
.dcl-signin{ display:flex; grid-column:1/-1; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap; margin-top:6px; padding:7px 10px; border-radius:8px; text-decoration:none;
  background:color-mix(in srgb, var(--crimson) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--crimson) 26%, transparent) }
.dcl-signin-say{ font-size:11.5px; font-weight:600; color:color-mix(in srgb, var(--crimson) 78%, var(--ink)) }
.dcl-signin-say b{ font-weight:800 }
.dcl-signin-go{ flex:0 0 auto; font-size:12px; font-weight:800; color:var(--crimson); white-space:nowrap }
.dcl-signin:hover{ background:color-mix(in srgb, var(--crimson) 16%, transparent) }
.dcl-signin:hover .dcl-signin-go{ text-decoration:underline }
.dcl-signin:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px }

/* THE ATTENTION BEAT (owner ask 2026-08-05: "make it wiggle... when the player
   is ready to see it"). Deliberately FINITE — three beats and it stops. A
   permanently animating CTA stops reading as urgency and starts reading as
   decoration, and it would pull the eye away from the board the player came to
   read. Applied only when the player has just solved (feed/board-avatar.js
   gates it on their own row existing), never on a board peek.
   transform/opacity only, so it stays on the compositor. */
@keyframes fb-ss-attn{
  0%,100%{ transform:none }
  15%{ transform:translateX(-3px) rotate(-.7deg) }
  30%{ transform:translateX(3px) rotate(.7deg) }
  45%{ transform:translateX(-2px) rotate(-.4deg) }
  60%{ transform:translateX(2px) rotate(.4deg) }
  75%{ transform:none }
}
.fb-ss-attn{ animation:fb-ss-attn 1.15s ease-in-out 3; animation-delay:.35s }
@keyframes fb-signin-in{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
.dcl-signin{ animation:fb-signin-in .28s ease-out both }
/* Motion is the whole point of the beat, so honour the OS setting completely —
   the CTA and the line still appear, they just don't move. */
@media (prefers-reduced-motion: reduce){
  .fb-ss-attn, .dcl-signin{ animation:none }
}

/* "A LIL SUS" EYE — tap the 👀 beside an implausibly fast time (Morning Mystery
   under 15s) for the punchline. See feed/board-avatar.js SUS_FLOOR_MS for why
   this is a joke and not an accusation: the MM clock starts on first
   interaction, so a fast time can be perfectly honest.
   Lives INSIDE .dcl-time so the 5-column row grid is untouched; the reply is a
   direct row child so it can span the full width. */
.dcl-sus{ position:relative; border:0; background:none; cursor:pointer; padding:0 2px; margin-left:4px;
  font-size:13px; line-height:1; opacity:.75; transition:opacity .12s, transform .12s }
/* same reasoning as .dcl-chal: grow the HIT AREA to ~44px, never the glyph, or
   the 34px row rhythm breaks. */
.dcl-sus::after{ content:""; position:absolute; inset:-14px -10px }
.dcl-sus:hover,.dcl-sus:focus-visible{ opacity:1; transform:scale(1.18) }
.dcl-sus:focus-visible{ outline:2px solid var(--crimson); outline-offset:1px; border-radius:6px }
.dcl-sus-say{ display:block; grid-column:1/-1; margin-top:4px; font-size:11.5px; font-weight:600;
  font-style:italic; color:color-mix(in srgb, var(--crimson) 72%, var(--ink)) }

/* compact-board "See full board" expander (Anagram Ladder / Daily Decode top-3) */
.dcl-more{ display:block; margin:8px auto 0; padding:4px 6px; border:0; background:none; cursor:pointer;
  font-family:var(--ui); font-size:12.5px; font-weight:600; color:var(--crimson) }
.dcl-more:hover{ text-decoration:underline }
.dcl-more:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; border-radius:6px }