/* ============================================================
   rank-card.css — "Your standing" on #account (rank-card.js)
   ------------------------------------------------------------
   A compact cousin of the Snellen chart on #leaderboard: same paper,
   hairlines and the amber catch-light for "you", but dense rows and one
   large rank numeral. Logical properties only (RTL needs no overrides);
   motion plays once and never loops; nothing here scrolls sideways at
   360px.
   ============================================================ */

.rk {
  /* Medal tiers, harmonised with the brand's amber catch-light and teal ink. */
  --rk-gold-face: #f7c35a;   --rk-gold-rim: #d99a1e;   --rk-gold-ink: #3a2703;
  --rk-silver-face: #dfe5e6; --rk-silver-rim: #9fb0b2; --rk-silver-ink: #1f3a3b;
  --rk-bronze-face: #e3a57a; --rk-bronze-rim: #b8723f; --rk-bronze-ink: #3a1c08;
  --rk-ribbon: var(--acct-teal);
  --rk-row-h: 56px;
  display: grid; gap: 14px; min-width: 0;
  padding: clamp(18px, 2.6vw, 26px);
}
html[data-theme="dark"] .rk {
  --rk-gold-face: #e2ad45;   --rk-gold-rim: #b7821a;
  --rk-silver-face: #c3cdcf; --rk-silver-rim: #7f9294;
  --rk-bronze-face: #c98a5e; --rk-bronze-rim: #955a31;
}

/* Desktop: the card rides along beside the long profile column. The aside
   stretches to the column's height so sticky has room to travel; the
   sign-in/data cards below slide over it (higher z-index) and away, then
   the standing stays pinned. Only when the whole card fits the viewport
   (tallest measured state ≈ 800px + the 80px pin offset) — a sticky card
   taller than the screen would hide its own bottom. */
@media (min-width: 1024px) and (min-height: 940px) {
  .acct-col--side { align-self: stretch; align-content: start; }
  .acct-col--side > [data-rank] { position: sticky; top: calc(var(--shell-header-h, 64px) + 16px); z-index: 1; }
  .acct-col--side > [data-rank] ~ * { position: relative; z-index: 2; }
  /* Page-coloured backing that also fills the gap above each card, so the
     pinned standing tucks cleanly behind the stack instead of peeking
     through the gaps between the cards sliding over it. */
  .acct-col--side > [data-rank] ~ *::before {
    content: ''; position: absolute; z-index: -1; inset-inline: 0;
    inset-block: calc(-1 * clamp(20px, 3vw, 32px)) 0; background: var(--bg);
  }
}
/* Phone/tablet: the two columns stack, so flatten them and lift the card
   to sit directly under the hero (the page's first grid item). */
@media (max-width: 1023px) {
  .acct-columns > .acct-col { display: contents; }
  .acct-columns > .acct-col > [data-rank] { order: -1; }
}

/* ── Head ─────────────────────────────────────────────────── */
.rk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rk-title { margin: 0; }
.rk-all {
  display: inline-flex; align-items: center; gap: 2px; min-block-size: 44px;
  font-size: .84rem; font-weight: 600; color: var(--acct-teal-deep); text-decoration: none;
}
.rk-all svg { inline-size: 16px; block-size: 16px; }
html[dir="rtl"] .rk-all svg { transform: scaleX(-1); }
.rk-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.rk-all:focus-visible, .rk-tab:focus-visible, .rk-scope:focus-visible, .rk-act:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--acct-teal) 40%, transparent); outline-offset: 2px; border-radius: 10px;
}

/* ── Tabs + scope chips ───────────────────────────────────── */
.rk-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-sunken); }
.rk-tab {
  flex: 1 1 0; min-width: 0; min-block-size: 44px; padding: 0 8px; border: 0; border-radius: 10px;
  background: transparent; font: inherit; font-size: .84rem; font-weight: 600; color: var(--acct-ink-soft);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.rk-tab[aria-selected="true"] { background: var(--surface); color: var(--acct-teal-deep); box-shadow: 0 1px 3px hsl(var(--shadow-color) / .14); }
.rk-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-scopes[hidden] { display: none; }
.rk-scope {
  min-block-size: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--acct-line-strong);
  background: var(--surface); font: inherit; font-size: .8rem; font-weight: 600; color: var(--acct-ink-soft); cursor: pointer;
}
.rk-scope[aria-pressed="true"] { border-color: var(--acct-teal); background: var(--acct-teal); color: #fff; }

/* ── Hero line ────────────────────────────────────────────── */
.rk-panel { display: grid; gap: 12px; min-width: 0; }
.rk-hero {
  display: grid; gap: 6px; min-block-size: 116px; align-content: start;
  padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--acct-amber) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acct-amber) 30%, var(--acct-line));
}
.rk-hero__label { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acct-ink-soft); }
html[dir="rtl"] .rk-hero__label { letter-spacing: 0; }
.rk-hero__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.rk-hero__rank {
  font-family: var(--acct-display); font-weight: 600; font-size: clamp(2.3rem, 1.8rem + 1.6vw, 2.9rem);
  line-height: 1; color: var(--acct-teal-deep); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.rk-hero__hash { font-size: .55em; margin-inline-end: 1px; vertical-align: .35em; color: var(--acct-ink-soft); }
.rk-hero__of { font-size: .9rem; color: var(--acct-ink-soft); }
.rk-hero__score {
  margin-inline-start: auto; font-family: var(--acct-mono); font-weight: 600; font-size: 1rem;
  color: var(--acct-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
html[dir="rtl"] .rk-hero__score, html[dir="rtl"] .rk-row__score { font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif; font-weight: 700; }
.rk-hero__gap { margin: 2px 0 0; font-size: .9rem; line-height: 1.5; color: var(--acct-ink); }
.rk-hero__gap bdi { font-weight: 700; }
.rk-bar { block-size: 6px; border-radius: 999px; background: color-mix(in srgb, var(--acct-amber) 20%, var(--surface-sunken)); overflow: hidden; }
.rk-bar > span {
  display: block; block-size: 100%; inline-size: calc(var(--rk-p, 0) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acct-amber) 70%, var(--acct-teal)), var(--acct-amber));
  transition: inline-size .6s var(--acct-ease);
}
html[dir="rtl"] .rk-bar > span { background: linear-gradient(270deg, color-mix(in srgb, var(--acct-amber) 70%, var(--acct-teal)), var(--acct-amber)); }
.rk-hero--note { background: var(--surface-sunken); border-color: var(--acct-line); gap: 10px; align-content: center; }
.rk-hero--note p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--acct-ink-soft); }
.rk-act { justify-self: start; min-block-size: 44px; }

/* ── Rows ─────────────────────────────────────────────────── */
.rk-rows { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.rk-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-block-size: var(--rk-row-h); padding: 6px 8px; border-block-end: 1px dotted var(--acct-line-strong);
  min-width: 0;
}
.rk-row:last-child { border-block-end: 0; }
.rk-row__rank {
  display: grid; place-items: center; inline-size: 32px; block-size: 32px;
  font-family: var(--acct-mono); font-weight: 600; font-size: .9rem; color: var(--acct-ink-soft); font-variant-numeric: tabular-nums;
}
.rk-row__who { display: grid; gap: 2px; min-width: 0; }
.rk-row__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: .95rem; color: var(--acct-ink); }
.rk-row__name bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row__name.is-alias { font-style: italic; color: var(--acct-ink-soft); }
.rk-row__you {
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--acct-amber); color: #2b2007;
}
html[dir="rtl"] .rk-row__you { letter-spacing: 0; }
.rk-row__meta { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.rk-row__place {
  min-width: 0; font-size: .76rem; line-height: 1.35; color: var(--acct-ink-faint);
  /* Two lines, not one: long college names would otherwise hide the university and stage. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.rk-chip { padding: 1px 8px; border-radius: 999px; background: var(--acct-tint); color: var(--acct-teal-deep); font-size: .7rem; font-weight: 600; white-space: nowrap; }
.rk-chip--plain { background: transparent; padding-inline: 2px; color: var(--acct-ink-faint); }
.rk-row__score { font-family: var(--acct-mono); font-weight: 600; font-size: .86rem; color: var(--acct-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Your row: the amber catch-light, fading in once. */
.rk-row.is-mine {
  border-radius: 12px; border-block-end-color: transparent;
  background: color-mix(in srgb, var(--acct-amber) 14%, var(--surface));
  box-shadow: inset 4px 0 0 var(--acct-amber);
  animation: rk-glow .5s var(--acct-ease) both;
}
html[dir="rtl"] .rk-row.is-mine { box-shadow: inset -4px 0 0 var(--acct-amber); }
@keyframes rk-glow { from { background: transparent; box-shadow: inset 0 0 0 transparent; } }

/* "…" between the top 3 and the window around you */
.rk-gap { display: flex; justify-content: center; gap: 5px; padding: 6px 0; border-block-end: 1px dotted var(--acct-line-strong); }
.rk-gap span { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--acct-ink-faint); }

/* Medals */
.rk .rk-medal { inline-size: 30px; block-size: 30px; overflow: visible; }  /* beats .acct svg (1.1em) */
.rk-medal__ribbon { fill: var(--rk-ribbon); opacity: .85; }
.rk-medal__num { font-family: var(--acct-mono); font-size: 10px; font-weight: 700; }
.rk-medal--gold .rk-medal__rim { fill: var(--rk-gold-rim); }
.rk-medal--gold .rk-medal__face { fill: var(--rk-gold-face); }
.rk-medal--gold .rk-medal__num { fill: var(--rk-gold-ink); }
.rk-medal--silver .rk-medal__rim { fill: var(--rk-silver-rim); }
.rk-medal--silver .rk-medal__face { fill: var(--rk-silver-face); }
.rk-medal--silver .rk-medal__num { fill: var(--rk-silver-ink); }
.rk-medal--bronze .rk-medal__rim { fill: var(--rk-bronze-rim); }
.rk-medal--bronze .rk-medal__face { fill: var(--rk-bronze-face); }
.rk-medal--bronze .rk-medal__num { fill: var(--rk-bronze-ink); }

/* ── States ───────────────────────────────────────────────── */
/* Static placeholders sized like the real content (no shimmer: nothing loops). */
.rk-skel { display: block; border-radius: 8px; background: var(--surface-sunken); }
.rk-hero--skel { background: var(--surface); border-color: var(--acct-line); gap: 10px; }
.rk-skel--rank { inline-size: 96px; block-size: 40px; }
.rk-skel--line { inline-size: 70%; block-size: 14px; }
.rk-skel--bar { inline-size: 100%; block-size: 6px; }
.rk-skel--dot { inline-size: 28px; block-size: 28px; border-radius: 50%; }
.rk-skel--name { inline-size: calc(80% - var(--i, 0) * 7%); block-size: 14px; }
.rk-skel--score { inline-size: 48px; block-size: 14px; }
.rk-state { display: grid; justify-items: center; gap: 8px; padding: 22px 8px; text-align: center; color: var(--acct-ink-soft); }
.rk-state p { margin: 0; max-width: 40ch; font-size: .88rem; line-height: 1.55; }
.rk-state > svg { inline-size: 24px; block-size: 24px; color: var(--acct-danger); }
.rk-state__title { font-weight: 700; color: var(--acct-ink); }

.rk-foot { display: grid; gap: 6px; }
.rk-foot:empty { display: none; }
.rk-foot p { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--acct-ink-faint); }
.rk-foot__rule { display: flex; gap: 6px; align-items: flex-start; }
.rk-foot__rule svg { flex: none; inline-size: 14px; block-size: 14px; margin-block-start: 2px; color: var(--acct-teal); }

.rk-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 400px) {
  .rk-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding-inline: 4px; }
  .rk-scope { padding: 0 11px; }
  .rk-tab { padding: 0 4px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rk-row.is-mine { animation: none; }
  .rk-bar > span, .rk-tab { transition: none; }
}