/* pages/trainer/skin-league.css — what the Dojo's ladder gained when the
   league became real (decisions 0017 and 0018): the XP column, the climb
   line the Sunday cycle promotes from, the claim card, the once-only Sunday
   banner and the folded tiers. Layout and a few structural touches only;
   every colour is a var() reference (decision 0008). Loads after
   skin-playful-shell.css, which owns the rest of the Dojo, so nothing here
   re-declares a selector it already has. */

/* The row's currency. Weight because the eye ranks on it. */
.lg-xp{white-space:nowrap;font-weight:700}

/* The climb line sits between the last promoting seat and the next: the
   rule made visible, in the accent because it is the one thing on the
   board that moves people. */
.lg-line{display:flex;align-items:center;gap:8px;padding:2px 14px;border-bottom:1px solid var(--play-track)}
.lg-line::after{content:"";flex:1;border-top:2px dashed var(--play-accent)}

/* A seat that drops when the week closes. Frame 7a drew a demote line, but
   0018's rule is "no XP", not "bottom N", and a ladder sorted by XP puts
   every dropping seat at the bottom — so the boundary would land on the
   climb line's own in any tier with five or fewer scorers. The seats carry
   it instead: a dashed edge and a word, distinct without colour. */
.lg-row.is-dropping{border-left:3px dashed var(--play-soft)}
.lg-drops{color:var(--play-mute)}
.lg-row.is-me .lg-drops{color:var(--play-accent-ink)}

/* The learner's own seat when it falls below the rows shown: a glyph for
   the eye, a sentence for the screen reader. */
.lg-gap{justify-content:center;padding:2px 14px;letter-spacing:.3em;color:var(--play-mute)}
.lg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The claim card: the tanuki, one sentence, one chunky button. */
.lg-claim{align-items:center;gap:8px}
.lg-claim .p-btn{margin-top:4px}

.lg-cycle{margin-top:10px}

/* The Sunday banner: the tanuki, the new tier, one button. Up and down
   differ by the mascot's mood and the copy, never by a second colour; the
   raised edge is the kit's own. Motion is the kit's p-pop, and only where
   the reader has not asked for less. */
.lg-moved{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.lg-moved-text{flex:1;min-width:160px;display:flex;flex-direction:column;gap:2px}
.lg-moved-text b{font-family:var(--play-display);font-size:1.25rem;line-height:1.15}
.lg-moved .p-gbtn{padding:4px 14px}
@media (prefers-reduced-motion: no-preference){
  .lg-moved.is-up{animation:p-pop .25s ease-out both}
}

/* The ladders: the reader's tier open, the other two folded under their
   names — the rail's disclosure pattern (a button that says what it opens,
   aria-expanded, the panel hidden until then). */
.lg-ladders{display:flex;flex-direction:column;gap:10px;min-width:0}
.lg-fold{display:flex;flex-direction:column;gap:6px}
.lg-foldbtn{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px;border:2px dashed var(--play-soft);border-radius:12px;background:var(--play-paper);color:var(--play-ink);font-family:var(--play-display);font-size:1rem;cursor:pointer;text-align:left}
.lg-foldbtn:hover{border-style:solid}
.lg-foldbtn[aria-expanded="true"]{border-style:solid;border-color:var(--play-ink)}
.lg-foldbtn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.lg-foldbtn .p-tag{flex:1}
.lg-foldcaret{color:var(--play-mute);font-size:.9rem}
.lg-board[hidden]{display:none}

/* Hindi carries no case and reads badly tracked out — the same override
   every other Hindi-bearing .tag/.p-tag in the app gets. */
:root[lang="hi"] .lg-tierlabel,:root[lang="hi"] .lg-line,:root[lang="hi"] .lg-cycle,
:root[lang="hi"] .lg-claim .p-tag,:root[lang="hi"] .dj-goal .p-tag,
:root[lang="hi"] .lg-moved .p-tag,:root[lang="hi"] .lg-fold .p-tag{text-transform:none;letter-spacing:0}

/* Under 480px the row is rank, name, XP; the streak flame would push the
   XP off the edge, and the head pill already carries the streak. */
@media (max-width:479px){
  .lg-row .dj-days,.lg-row .lg-drops{display:none}
}