/* LEVERCAT — rank.css: styles used only by /rank (the Hylo rank checker).
   Loaded after styles.css, which supplies the palette, the nav, the footer, .btn, .check__* and the .air page shell. */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.rank__form { margin-top: 2rem; }
.rank__nosign { margin: 1rem 0 0; max-width: 68ch; font-size: .85rem; color: var(--steel); }
.rank__empty { max-width: 68ch; }
.rank__empty .intro { margin-bottom: 1rem; }
.rank__fine { font-size: .85rem; color: var(--cream-dim); max-width: 72ch; margin: 0; }

/* ---------- the result card ---------- */
/* One accent colour per tier, walking from the plain cream of No Size up to the gold of Great Hylord, so the
   card reads as a rank at a glance. Set on the card as --tint and used by the badge glow, tier name and bars. */
/* the site nav is sticky at top:0, so a card scrolled to "start" would slide under it */
.rk { --tint: var(--cream-dim); border: 1px solid var(--line); border-radius: 18px; background: var(--ink); overflow: hidden; scroll-margin-top: 5rem; }
.rk[data-tier="2"] { --tint: #8fd6a8; }
.rk[data-tier="3"] { --tint: #67c8e8; }
.rk[data-tier="4"] { --tint: #7f9cf5; }
.rk[data-tier="5"] { --tint: #b98af2; }
.rk[data-tier="6"] { --tint: var(--pink); }
.rk[data-tier="7"] { --tint: var(--amber); }
.rk[data-tier="8"] { --tint: #ffd75e; }

.rk__top { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.75rem; align-items: center; padding: 1.5rem 1.75rem; background: linear-gradient(100deg, color-mix(in srgb, var(--tint) 12%, transparent), transparent 62%); border-bottom: 1px solid var(--line); }
.rk__badge { width: clamp(78px, 11vw, 116px); height: auto; flex: 0 0 auto; filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--tint) 45%, transparent)); }
.rk__id { min-width: 0; }
.rk__for { margin: 0 0 .35rem; font-size: .8rem; color: var(--cream-dim); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rk__for code { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--cream); font-size: .9rem; }
.rk__copy { font: inherit; font-size: .72rem; padding: .12rem .45rem; color: var(--cream-dim); background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.rk__copy:hover { color: var(--cream); border-color: var(--cream-dim); }
.rk__tier { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.2rem); line-height: .95; text-transform: uppercase; letter-spacing: .01em; color: var(--tint); margin: 0; }
.rk__lvl { margin: .35rem 0 0; display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.rk__lvl-n { font-family: var(--display); font-size: 1.2rem; letter-spacing: .04em; color: var(--cream); }
.rk__crowns { font-size: .85rem; color: var(--cream-dim); }
.rk__xp { text-align: right; display: flex; flex-direction: column; gap: .15rem; }
.rk__xp-label { font-size: .74rem; color: var(--cream-dim); text-transform: uppercase; letter-spacing: .06em; }
.rk__xp-n { font-family: var(--display); font-size: clamp(1.8rem, 4.4vw, 3rem); line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.rk__xp-sub { font-size: .85rem; color: var(--cream-dim); }
.rk__xp-sub b { color: var(--cream); }
.rk__xp-sub.is-muted { color: var(--steel); font-style: italic; }

/* ---------- progress bars ---------- */
.rk__bars { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--line); }
.rk__bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 .45rem; font-size: .82rem; color: var(--cream-dim); }
.rk__bar-head b { color: var(--cream); font-variant-numeric: tabular-nums; font-weight: 600; }
.rk__track { height: 8px; border-radius: 99px; background: var(--ink-3); overflow: hidden; }
.rk__track i { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: var(--green); transition: width .7s cubic-bezier(.22, 1, .36, 1); }
.rk__track--tier i { background: var(--tint); }

.rk__stats { padding: 1.25rem 1.75rem; gap: .8rem 2.5rem; justify-self: start; }
.rk__stats dd { color: var(--cream); }
.rk__of { font-family: var(--body); font-size: .78rem; font-weight: 400; color: var(--cream-dim); }

/* ---------- the two lower boxes ---------- */
.rk__split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.rk__box { padding: 1.35rem 1.75rem; background: var(--ink); }
.rk__box--cat { background: var(--ink-2); }
.rk__h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; color: var(--cream-dim); margin: 0 0 .9rem; }
.rk__note { margin: .9rem 0 0; font-size: .85rem; color: var(--cream-dim); line-height: 1.55; }
.rk__note b { color: var(--cream); }
.rk__stats--cat { padding: 0; }

/* one row per asset. Named .xpr, not .tok: styles.css already uses .tok for the home page's tokenomics
   section, padding-block and all, which stretched every row here by the height of a page section. */
.rk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-content: start; }
.xpr { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: .75rem; font-size: .88rem; }
.xpr__name { color: var(--cream-dim); }
.xpr__bar { height: 6px; border-radius: 99px; background: var(--ink-3); overflow: hidden; }
.xpr__bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: var(--steel); }
.xpr__xp { font-variant-numeric: tabular-nums; color: var(--cream); }
.xpr.is-xsol .xpr__name { color: var(--green); font-weight: 600; }
.xpr.is-xsol .xpr__bar i { background: var(--green); }

.rk__actions { padding: 1.25rem 1.75rem; margin: 0; border-top: 1px dashed var(--line); }
.rk__stamp { margin: 0; padding: 0 1.75rem .5rem; font-size: .78rem; color: var(--steel); }
/* Hylo, not this page, is authoritative; said next to the numbers rather than only in the fine print. */
.rk__disc { margin: 0; padding: 0 1.75rem 1.35rem; font-size: .78rem; color: var(--steel); max-width: 88ch; }
.rk__disc a { color: var(--cream-dim); }
.rk__note--sum { padding-top: .75rem; border-top: 1px dashed var(--line); }

/* ---------- the ladder ---------- */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: rung; }
.rung { display: grid; grid-template-columns: 44px 1fr 5rem 7rem 7rem; align-items: center; gap: 1rem; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.rung__badge { width: 44px; height: 44px; }
.rung__name { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; color: var(--cream); }
.rung__lvl, .rung__xp, .rung__crowns { font-size: .85rem; color: var(--cream-dim); font-variant-numeric: tabular-nums; }
.rung__xp { text-align: right; }
.rung__crowns { text-align: right; }
.rung__you { grid-column: 2 / -1; font-size: .78rem; color: var(--green); letter-spacing: .05em; text-transform: uppercase; }
.rung.is-you { border-color: rgba(25, 214, 124, .5); background: linear-gradient(90deg, rgba(25, 214, 124, .12), transparent 70%); }
.rung.is-you .rung__name { color: var(--green); }

@media (max-width: 900px) {
  .rk__top { grid-template-columns: auto 1fr; }
  .rk__xp { grid-column: 1 / -1; text-align: left; border-top: 1px dashed var(--line); padding-top: .9rem; }
  .rk__bars, .rk__split { grid-template-columns: 1fr; }
  .rk__bars { gap: 1.1rem; }
  .rung { grid-template-columns: 40px 1fr auto; row-gap: .25rem; }
  .rung__lvl { text-align: right; }
  .rung__xp, .rung__crowns { grid-column: 2 / -1; text-align: left; }
}
@media (max-width: 560px) {
  .rk__top, .rk__bars, .rk__box, .rk__actions { padding-inline: 1.1rem; }
  .rk__stats { padding-inline: 1.1rem; }
  .rk__stamp, .rk__disc { padding-inline: 1.1rem; }
  .rk__actions .btn { flex: 1 1 auto; text-align: center; }
  .xpr { grid-template-columns: 4.5rem 1fr auto; gap: .5rem; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .rk__track i { transition: none; } }

/* A lookup for a second wallet leaves the first wallet's card on screen; dimming it while the new one is
   fetched stops the old numbers being read as the new wallet's. */
.rk.is-loading { opacity: .45; pointer-events: none; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .rk.is-loading { transition: none; } }

/* The card carries a shortened wallet by default; this turns it off for anyone who would rather post
   a rank without anything traceable on it. The choice is remembered per browser. */
.share__opt { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; font-size: .88rem; color: var(--cream-dim); cursor: pointer; }
.share__opt input { width: 1.05rem; height: 1.05rem; accent-color: var(--green); cursor: pointer; }
.share__opt:hover { color: var(--cream); }
.share__hint code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .95em; color: var(--cream-dim); }