/* =========================================================================
   ranks.css — /ranks only
   =========================================================================
   Extends hub.css (style.css → hub.css → ranks.css, same load order as
   questions.css/insights.css). Reuses .etac-card/.etac-meter/.etac-notice
   wholesale; this file only covers what those primitives can't express —
   the 18-row ladder with tier banding, badge art, and a position marker.

   Tier color always arrives via the --tier custom property (rankFor()'s
   `color`, stamped inline per row), never a hardcoded hex — same idiom as
   the home hero (hub.css's .etac-rank-hero*) and friends.css's row badges.
   ========================================================================= */

/* ---------- Your standing — the home hero, reflowed ----------
   Reuses .etac-rank-hero wholesale (badge glow/sparkles, the meter,
   the standing column) — this block only overrides the geometry: no
   mascot slot, the badge sits on the LEFT (not centered) and bigger, and
   the label/meter/sub run left-aligned beside it instead of stacked
   under it, closing the loop with the ladder right below. */
.r-standing-hero {
  grid-template-columns: auto 1fr auto; max-width: 100%;
  padding: 8px clamp(8px, 3vw, 32px); margin: 0 0 22px;
}
.r-standing-hero__badge { width: 132px; height: 148px; flex: none; }
.r-standing-hero__main { align-items: flex-start; text-align: left; gap: 6px; width: 100%; }
.r-standing-hero__main .etac-rank-hero__label { font-size: 20px; }
/* Stretched to fill the flexible middle column — reaches toward the
   standing block on the right instead of stopping at a fixed width. */
.r-standing-hero__main .etac-rank-hero__meter { width: 100%; }
.r-standing-hero__peak { font: 600 11px var(--fmono); color: var(--text-dim); }
.r-standing-hero__peak b, .r-standing-hero__peak span { color: var(--text-dim); }
@media (max-width: 640px) {
  .r-standing-hero { grid-template-columns: auto 1fr; row-gap: 10px; }
  .r-standing-hero__standing {
    grid-column: 1 / -1; justify-self: stretch; align-items: flex-start;
    flex-direction: row; align-items: baseline; gap: 6px; border-top: 1px dashed var(--border);
    padding-top: 10px;
  }
}
@media (max-width: 420px) {
  .r-standing-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .r-standing-hero__main { align-items: center; text-align: center; }
  .r-standing-hero__standing { grid-column: 1; justify-items: center; }
}

/* ---------- The ladder ---------- */
.r-laddercard { padding: 8px; }
/* DOM order is already Obsidian III → Wood I (ranks.js reverses
   RANK_DIVISIONS before rendering), so this reads top-to-bottom with no
   flex-direction trick. */
.r-ladder { list-style: none; margin: 0; padding: 0; }
.r-ladder__loading { padding: 24px; text-align: center; font: 500 13px var(--fsans); color: var(--text-dim); }

.r-ladder__row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid transparent;
  transition: background .2s, border-color .2s, transform .3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.r-ladder__row:hover { background: var(--bg-elevated); }
/* Hover (or a tap on touch) grows the rung slightly — the anticipation beat
   before its card folds out half a second later. */
.r-ladder__row.is-hover {
  transform: scale(1.015);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  position: relative; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .r-ladder__row { transition: background .2s, border-color .2s; }
  .r-ladder__row.is-hover { transform: none; }
}
/* First rung of each new tier (ranks.js tags it — tier sizes aren't fixed,
   so this can't be done with :nth-of-type) gets a divider, so the six-tier
   grouping reads without a second nested list. Wood I (tierStart, but also
   the very last row — DOM order is Obsidian III → Wood I) is excluded so
   the ladder's bottom edge doesn't grow a stray top border. */
.r-ladder__row--tierstart:not(:last-child) {
  margin-top: 10px; padding-top: 14px; border-top: 1px dashed var(--border);
}

.r-ladder__icon {
  width: 40px; height: 45px; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}
.r-ladder__body { min-width: 0; }
.r-ladder__name { font: 700 14px var(--fsans); color: var(--text); }
.r-ladder__div { color: color-mix(in srgb, var(--tier, var(--text)) 80%, var(--text)); }
.r-ladder__meter { margin-top: 6px; max-width: 220px; }
.r-ladder__sub { margin-top: 4px; font: 600 10.5px var(--fmono); color: var(--text-dim); min-height: 13px; }
.r-ladder__min {
  text-align: right; font: 700 12.5px var(--fmono); color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.r-ladder__gap { display: block; font: 600 10px var(--fmono); color: var(--text-dim); margin-top: 2px; }

/* The reader's own rung — a soft tier-tinted highlight, not a full repaint
   (the badge art + color-mix glow already carry the tier identity). */
.r-ladder__row.is-you {
  background: color-mix(in srgb, var(--tier, var(--accent)) 12%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--tier, var(--accent)) 45%, transparent);
}
.r-ladder__row.is-you .r-ladder__icon {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3))
          drop-shadow(0 0 10px color-mix(in srgb, var(--tier, var(--accent)) 55%, transparent));
}
.r-ladder__row.is-you::after {
  content: '← you'; grid-column: 3; justify-self: end; margin-top: 2px;
  font: 700 10px var(--fmono); color: var(--tier, var(--accent)); letter-spacing: .02em;
}

/* Deep-link flash (hash target, e.g. /ranks#stone-2) — one soft pulse. */
.r-ladder__row.is-flash { animation: r-flash 1.4s ease-out; }
@keyframes r-flash {
  0% { background: color-mix(in srgb, var(--tier, var(--accent)) 30%, var(--bg-elevated)); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .r-ladder__row.is-flash { animation: none; }
}

@media (max-width: 480px) {
  .r-ladder__row { grid-template-columns: 36px 1fr auto; gap: 9px; padding: 9px 8px; }
  .r-ladder__icon { width: 32px; height: 36px; }
  .r-ladder__meter { max-width: 140px; }
}

/* ---------- The hover card ----------
   Folds out under a rung 500ms into a hover/tap (ranks.js owns the delay via
   is-hover → is-card; this file only owns how the fold looks). Spans the
   full row width (grid-column: 1 / -1) rather than living in the __min
   column, since "required / still need / surpassed-by" needs breathing room
   — and, soon, a rewards line (data-card-rewards, reserved but hidden). */
.r-ladder__card {
  grid-column: 1 / -1; overflow: hidden;
  max-height: 0; opacity: 0; margin-top: 0;
  transform: scaleY(.85) translateY(-6px); transform-origin: top;
  transition: max-height .45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity .3s cubic-bezier(0.22, 1, 0.36, 1),
              transform .4s cubic-bezier(0.22, 1, 0.36, 1),
              margin-top .45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.r-ladder__row.is-card .r-ladder__card {
  max-height: 220px; opacity: 1; margin-top: 10px; transform: scaleY(1) translateY(0);
  transition: max-height .5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity .4s cubic-bezier(0.22, 1, 0.36, 1) .06s,
              transform .5s cubic-bezier(0.22, 1, 0.36, 1),
              margin-top .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.r-ladder__card-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 4px; font: 600 12px var(--fmono); color: var(--text-dim);
  border-top: 1px solid var(--border);
}
.r-ladder__card-row:first-child { border-top: none; }
.r-ladder__card-row b { font: 700 12.5px var(--fmono); color: var(--text); font-variant-numeric: tabular-nums; }
/* Per-rank rewards (RANK_REWARDS, api/_lib/progress.js) — a chip row, filled
   by ranks.js's rewardsHtml(). Stays hidden and takes no space on a rung
   with no payout (Wood I). */
.r-ladder__card-rewards {
  padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--border);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.r-ladder__reward-lab {
  font: 700 9px var(--fmono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); margin-right: 2px;
}
.r-ladder__reward-chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px;
  font: 700 10.5px var(--fmono); color: var(--text);
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.r-ladder__reward-chip--banner {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  background: linear-gradient(135deg, var(--c1), var(--c2, var(--c1))); border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .r-ladder__card { transition: none; }
  .r-ladder__row.is-card .r-ladder__card { transition: none; }
}

/* ---------- Rank vs Level vs Mastery % ---------- */
.r-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.r-compare__col { min-width: 0; }
.r-compare__h { font: 700 14.5px var(--fsans); color: var(--text); margin-bottom: 6px; }
.r-compare__sub { font: 600 11px var(--fmono); color: var(--text-dim); }
.r-compare__col p { margin: 0 0 10px; font: 400 12.5px/1.55 var(--fsans); color: var(--text-muted); }
.r-compare__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.r-compare__facts li {
  font: 600 11.5px var(--fmono); color: var(--text-dim); padding-left: 14px; position: relative;
}
.r-compare__facts li::before { content: '✦'; position: absolute; left: 0; color: var(--accent); }

/* ---------- Projector ---------- */
.r-projector__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.r-projector__lab { font: 700 13px var(--fsans); color: var(--text); }
.r-projector__select {
  font: 600 13px var(--fmono); padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text);
}
.r-projector__out { margin: 12px 0 0; }
/* The pace breakdown — what the projection below is actually built off,
   spelled out before the date so "your pace" never reads as a black box. */
.r-projector__pace {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  font: 600 12px var(--fmono); color: var(--text-dim);
}
.r-projector__pace b { font: 700 12.5px var(--fmono); color: var(--text); }
.r-projector__pace-sep { color: var(--border); }
.r-projector__sentence { margin: 8px 0 0; font: 500 13px/1.55 var(--fsans); color: var(--text-muted); }
.r-projector__note { margin: 8px 0 0; font: 500 11.5px/1.5 var(--fsans); color: var(--text-dim); }
.r-projector__note b { color: var(--text-muted); }