/* LET'S BOX layout — landing poster, ring stack, chat, lists, drawers */

/* ── No-wiggle lock — native-feel standalone PWA ────────────────────
   Document is locked; .lb-app is the ONLY vertical scrollport.
   That keeps 3D card transforms from trapping iOS/Android page scroll. */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
/* Inner scrollers must not chain their overscroll to the page. */
.chat__log,
.lb-drawer,
.ptool-card__body,
.cornerman__log,
.cornerai__log,
.lb-app {
  overscroll-behavior: contain;
}

/* `--lb-ink` is referenced ~11× but never declared in the shared tokens; alias
   it to the canvas-ink token (which flips per theme) so intent is explicit and
   it can never fall back to an inherited/wrong color. Scoped here, not shared. */
:root {
  --lb-ink: var(--lb-ink-on-canvas);
  /* Brand wordmark = the LOGO's font. The logo sets "LETS BOX USA" in a heavy,
     wide navy grotesque (Arial Black family); Archivo Black is the web match,
     with Arial Black itself as a near-identical fallback. Scoped here (letzbox),
     never in shared/tokens.css. */
  --lb-font-wordmark: 'Archivo Black', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
}

/* Header wordmark — reads as the logo in clean type: same font, larger, and
   spaced "LETS BOX USA" (not condensed). Overrides shared/brand.css (loaded
   before app.css). Colour stays header-ink on the navy rail; USA in red. */
.lb-header__logo {
  font-family: var(--lb-font-wordmark);
  font-weight: 400; /* Archivo Black is already black at 400 */
  font-size: clamp(1.3rem, 5.2vw, 1.6rem);
  /* Archivo Black is a WIDE face — pull it tight so "LETS BOX USA" reads as one
     cohesive lockup, not scattered words. */
  letter-spacing: -0.015em;
  word-spacing: -0.12em;
  white-space: nowrap;
}
.lb-header__usa {
  font-weight: 400;
  letter-spacing: -0.005em;
  margin-left: 0.2em;
}

/* ── Landing: live boxing news + a static "Breaking" strip. No ticker, nothing
   animates at rest (calm-at-rest law); the strip just shows the newest headline
   and links into the news view. Colours are theme-aware tokens. */
.landing__breaking {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 0 auto var(--lb-space-4);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--lb-line);
  border-left: 3px solid var(--lb-accent);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-surface);
  text-decoration: none;
  text-align: left;
}
.landing__breaking-tag {
  flex: none;
  font-family: var(--lb-font-stats);
  font-weight: 700;
  font-size: max(var(--lb-text-xs), 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lb-accent);
}
.landing__breaking-text {
  min-width: 0;
  font-size: max(var(--lb-text-sm), 12px);
  color: var(--lb-ink-on-canvas);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing__news {
  max-width: 34rem;
  margin: var(--lb-space-5) auto 0;
  text-align: left;
}
.landing__news-list {
  list-style: none;
  margin: 0.5rem 0 0.75rem;
  padding: 0;
}
.landing__news-item {
  border-bottom: 1px solid var(--lb-line);
}
.landing__news-item:last-child {
  border-bottom: 0;
}
.landing__news-item a {
  display: block;
  padding: 0.6rem 0;
  text-decoration: none;
}
.landing__news-src {
  display: block;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-chalk-muted);
}
.landing__news-title {
  display: block;
  margin-top: 2px;
  font-size: max(var(--lb-text-sm), 13px);
  font-weight: 600;
  color: var(--lb-ink-on-canvas);
  line-height: 1.35;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: var(--lb-space-4);
  top: calc(var(--lb-header-h) + var(--lb-space-2));
  width: auto;
  height: auto;
  padding: var(--lb-space-2) var(--lb-space-3);
  background: var(--lb-accent);
  color: var(--lb-ink-on-accent);
  z-index: 200;
  font-size: var(--lb-text-sm);
}

/* ── Landing ───────────────────────────────────────────────── */

.landing {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-5);
  padding-block: var(--lb-space-4) var(--lb-space-6);
  max-width: 28rem;
  margin-inline: auto;
}

/* Atmosphere poster — real, moody boxing-ring photograph (vendored, CC0).
   Static at rest; the glow layer responds only to pointer movement. */
.landing__poster {
  position: relative;
  overflow: hidden;
  min-height: clamp(15rem, 46vh, 21rem);
  border-radius: var(--lb-radius-lg);
  border: 1px solid rgba(28, 20, 16, 0.55);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(90, 159, 214, 0.16), transparent 55%),
    url('./assets/hero-gym.jpg?v=33') center / cover no-repeat,
    #0f0b08;
  box-shadow: var(--lb-shadow-lg);
  display: flex;
  align-items: flex-end;
}

.landing__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    16rem circle at var(--mx, 50%) var(--my, 35%),
    rgba(90, 159, 214, 0.22),
    transparent 65%
  );
  transition: opacity 260ms var(--lb-ease);
}

.landing__poster-body {
  position: relative;
  width: 100%;
  padding: var(--lb-space-8) var(--lb-space-5) var(--lb-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 7, 5, 0.55) 42%,
    rgba(8, 6, 4, 0.92) 100%
  );
}

.landing__eyebrow {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: #8fb8e8;
}

.landing__value {
  margin: 0;
  max-width: 24rem;
  font-size: var(--lb-text-md);
  line-height: 1.5;
  color: #eaf1fb;
}

.landing__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}

.landing__bullets li {
  padding-left: var(--lb-space-4);
  position: relative;
  font-size: var(--lb-text-base);
}

.landing__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--lb-accent);
  transform: rotate(45deg);
}

.landing__logo {
  display: block;
  width: min(300px, 68%);
  height: auto;
  margin: var(--lb-space-3) auto var(--lb-space-4);
  cursor: default;
  /* One-shot entrance: the mark rises and blooms an accent glow, then SETTLES
     to a clean resting shadow (animation-fill: both locks the 100% frame).
     Nothing loops at idle — the calm-at-rest law holds; the glow returns on
     hover (interaction). */
  animation: lbLogoIn 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.landing__logo:hover {
  transform: translateY(-3px) scale(1.02);
  filter:
    drop-shadow(0 0 14px rgba(216, 31, 42, 0.48))
    drop-shadow(0 0 34px rgba(216, 31, 42, 0.24))
    drop-shadow(0 6px 14px rgba(10, 27, 51, 0.2));
}
@keyframes lbLogoIn {
  0% {
    /* Never fully transparent — a stalled animation must not blank the mark.
       The rise + glow bloom carry the entrance; the fade is only a lift. */
    opacity: 0.55;
    transform: translateY(12px) scale(0.95);
    filter: drop-shadow(0 0 0 rgba(216, 31, 42, 0));
  }
  55% {
    opacity: 1;
    filter:
      drop-shadow(0 0 20px rgba(216, 31, 42, 0.52))
      drop-shadow(0 0 40px rgba(216, 31, 42, 0.26));
  }
  100% {
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 4px 12px rgba(10, 27, 51, 0.18));
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing__logo {
    animation: none;
    filter: drop-shadow(0 4px 12px rgba(10, 27, 51, 0.18));
  }
}

.landing__actions {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}

@media (min-width: 420px) {
  .landing__actions {
    flex-direction: row;
    align-items: center;
  }
}

.landing__note {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  border-top: 1px solid var(--lb-line);
  padding-top: var(--lb-space-3);
}

.landing__signin {
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-faint);
  text-align: center;
  margin: calc(var(--lb-space-2) * -1) 0 0;
}
.landing__signin a {
  color: var(--lb-gold-ink);
  font-weight: 600;
}

/* ── Demo ⇄ Live ─────────────────────────────────────────────────
   Persistent banner under the header while the demo sandbox is live. No idle
   motion — the status dot is static, per the calm-at-rest law. Fixed under the
   header so it doesn't push .lb-app and break the Discover one-screen fit. */
.demo-banner {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-2) var(--lb-space-4);
  background: var(--lb-gold);
  color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.demo-banner:not([hidden]) {
  position: fixed;
  top: calc(var(--lb-header-h) + var(--lb-safe-top));
  left: 0;
  right: 0;
  z-index: 99;
}
body.has-demo-banner .lb-app {
  padding-top: calc(var(--lb-header-h) + var(--lb-safe-top) + 2.75rem);
}
.demo-banner[hidden] {
  display: none;
}
.demo-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.demo-banner__msg {
  flex: 1 1 auto;
  font-size: max(var(--lb-text-sm), 12px);
  line-height: 1.2;
}
.demo-banner__msg strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--lb-tracking-caps);
  font-size: max(var(--lb-text-xs), 11px);
}
.demo-banner__sub {
  opacity: 0.92;
}
@media (max-width: 400px) {
  .demo-banner__sub {
    display: none;
  }
}
.demo-banner__actions {
  display: flex;
  gap: var(--lb-space-2);
  flex: none;
}
.demo-banner__btn {
  font: inherit;
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--lb-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms var(--lb-ease);
}
.demo-banner__btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.demo-banner__btn--primary {
  background: #fff;
  color: var(--lb-gold);
  border-color: #fff;
}
.demo-banner__btn--primary:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* ── Sign in ─────────────────────────────────────────────────────── */
.auth {
  padding: var(--lb-space-6) var(--lb-space-4);
  display: flex;
  justify-content: center;
}
.auth__card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-lg);
  padding: var(--lb-space-5);
  box-shadow: var(--lb-shadow-lg);
}
/* Title + subtitle read as one header unit, tight to each other and cleanly
   separated from the form by the card's block gap. */
.auth__head {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-1);
}
.auth__title {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-lg);
  line-height: var(--lb-leading-tight);
  letter-spacing: var(--lb-tracking-display);
  margin: 0;
}
.auth__sub {
  color: var(--lb-chalk-faint);
  font-size: var(--lb-text-sm);
  line-height: var(--lb-leading-normal);
  margin: 0;
}
.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.auth__alt {
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-faint);
  text-align: center;
  margin: 0;
}
/* The "New here?" footer is a distinct account state — give it a hairline
   separator so returning-vs-new doesn't blur into one undifferentiated stack. */
.auth__card > .auth__alt:last-child {
  border-top: 1px solid var(--lb-line);
  padding-top: var(--lb-space-4);
}
.auth__alt a {
  color: var(--lb-gold-ink);
  font-weight: 600;
}

/* Photo attribution caption on a fighter profile (CC-licensed demo images). */
.fprofile__photocredit {
  margin: var(--lb-space-4) 0 0;
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-chalk-faint);
  font-style: italic;
  opacity: 0.85;
}

/* ── Gyms — local search ─────────────────────────────────────── */
.gyms-search {
  padding: var(--lb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.gyms-search__lede {
  color: var(--lb-chalk-faint);
  font-size: var(--lb-text-sm);
}
.gyms-search__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-3);
}
.gyms-search__field {
  flex: 1 1 150px;
}
.gyms-search__origin {
  font-size: var(--lb-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lb-chalk-faint);
  margin: 0;
}
.gym-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.gym-card {
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-lg);
  padding: var(--lb-space-3) var(--lb-space-4);
}
.gym-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lb-space-3);
}
.gym-card__name {
  font-size: var(--lb-text-md);
  font-weight: 700;
  margin: 0;
  color: var(--lb-ink);
}
.gym-card__dist {
  flex: none;
  font-size: var(--lb-text-sm);
  font-weight: 700;
  color: var(--lb-accent);
  white-space: nowrap;
}
.gym-card__loc {
  color: var(--lb-chalk-faint);
  font-size: var(--lb-text-sm);
  margin: 2px 0 var(--lb-space-2);
}
.gym-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
}
.gym-card__members {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
}

/* ── Division toggle (All / Men / Women) ─────────────────────── */
.division-toggle {
  display: flex;
  width: max-content;
  gap: 2px;
  padding: 3px;
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-pill);
}
.ring .division-toggle {
  /* .ring already gaps its children — zero the old margins so chrome doesn't
     steal card height on short phones. */
  margin: 0 auto;
  flex: 0 0 auto;
}

/* Discover tools — News · Rankings · Find · City · Filters.
   Search matches the squared sports-card chrome — no pill capsule. */
.ring__links {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto minmax(7.5rem, 1fr) auto auto;
  align-items: stretch;
  gap: 0.3rem;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  padding: 0;
}
.ring__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.4rem;
  text-align: center;
  text-decoration: none;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-chalk-muted);
  border-radius: 0;
  white-space: nowrap;
}
.ring__links a:hover,
.ring__links a:focus-visible {
  color: #fff;
  background: var(--lb-gold);
}
.ring__search {
  margin: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  /* Silver field + red tick — same DNA as the trading-card set bar. */
  background: linear-gradient(180deg, #f4f6f8 0%, #dfe4ea 100%);
  border: 1px solid #1d4e89;
  border-bottom: 2px solid #d81f2a;
  border-radius: 0;
}
.ring__search-label {
  display: inline-flex;
  align-items: center;
  padding: 0 0.45rem 0 0.55rem;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1d4e89;
  border-right: 1px solid rgba(29, 78, 137, 0.28);
  user-select: none;
}
.ring__search-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 1.85rem;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0a1b33;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.02em;
  outline: none;
  /* Kill WebKit's native search decorations (weird glyphs / clear X). */
  -webkit-appearance: none;
  appearance: none;
}
.ring__search-input::placeholder {
  color: rgba(10, 27, 51, 0.45);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}
.ring__search-input:focus {
  outline: none;
}
.ring__search:focus-within {
  border-color: #d81f2a;
  box-shadow: inset 0 0 0 1px rgba(216, 31, 42, 0.18);
}
.gyms-search .division-toggle {
  align-self: flex-start;
}
.division-toggle__opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--lb-chalk);
  font: inherit;
  font-weight: 600;
  font-size: var(--lb-text-sm);
  padding: 6px 18px;
  min-height: 34px;
  border-radius: var(--lb-radius-pill);
  cursor: pointer;
  transition: background 120ms var(--lb-ease), color 120ms var(--lb-ease);
}
.division-toggle__opt.is-active {
  background: var(--lb-accent);
  color: #fff;
}

/* ── Promoter tools ─────────────────────────────────────────── */
.ptools {
  padding: var(--lb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-6);
}
.ptools__lede {
  color: var(--lb-chalk-faint);
  font-size: var(--lb-text-sm);
  margin: 0;
}
.ptool-group {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.ptool-group__title {
  font-size: var(--lb-text-lg);
  font-weight: 800;
  margin: 0;
  color: var(--lb-ink);
}
.ptool-group__sub {
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-faint);
  margin: -4px 0 0;
}
.ptool-card {
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-lg);
  padding: var(--lb-space-3) var(--lb-space-4);
}
.ptool-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
}
.ptool-card__title {
  font-size: var(--lb-text-md);
  font-weight: 700;
  margin: 0;
  color: var(--lb-ink);
}
.ptool-card__meta {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  margin: 2px 0 var(--lb-space-2);
}
.ptool-card__body {
  font-family: inherit;
  font-size: var(--lb-text-sm);
  line-height: 1.5;
  color: var(--lb-chalk);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: var(--lb-space-3);
  border: 1px dashed var(--lb-line);
  border-radius: var(--lb-radius-md);
  max-height: 230px;
  overflow: auto;
}
.ptool-copy {
  flex: none;
}
.ptool-copy.is-copied {
  color: #fff;
  background: var(--lb-accent);
}
.ptool-checklist,
.ptool-tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}
.ptool-checklist li,
.ptool-tips li {
  position: relative;
  padding-left: 26px;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk);
  line-height: 1.45;
}
.ptool-checklist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 3px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--lb-accent);
  border-radius: 4px;
}
.ptool-tips li::before {
  content: '›';
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--lb-accent);
  font-weight: 800;
}
.ptool-support {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  margin: var(--lb-space-2) 0 0;
}

/* ── US Amateur Rankings ─────────────────────────────────────── */
.rankings {
  padding-bottom: var(--lb-space-6);
}
.rankings__hero {
  position: relative;
}
.rankings__hero img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.rankings__hero-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--lb-space-4);
  background: linear-gradient(to top, rgba(10, 27, 51, 0.92), rgba(10, 27, 51, 0));
}
.rankings__eyebrow {
  color: #fff;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-xl);
  letter-spacing: var(--lb-tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.rankings__sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--lb-text-sm);
  margin: 2px 0 0;
}
.rankings .division-toggle {
  margin: var(--lb-space-3) var(--lb-space-4) 0;
}
.rank-group {
  padding: var(--lb-space-3) var(--lb-space-4) 0;
}
.rank-group__title {
  font-size: var(--lb-text-md);
  font-weight: 800;
  color: var(--lb-ink);
  margin: var(--lb-space-3) 0 var(--lb-space-2);
}
.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rank-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: var(--lb-space-2);
  padding: 10px var(--lb-space-3);
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-md);
}
.rank-row__wt {
  font-size: var(--lb-text-xs);
  font-weight: 700;
  color: var(--lb-chalk-faint);
}
.rank-row__champ {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rank-row__name {
  font-size: var(--lb-text-sm);
  font-weight: 700;
  color: var(--lb-ink);
}
.rank-row__state {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
}
.rank-row__badge {
  font-size: var(--lb-text-xs);
  font-weight: 700;
  color: var(--lb-accent);
  white-space: nowrap;
}
.rankings__attr {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  padding: var(--lb-space-4);
  margin: 0;
  line-height: 1.5;
}
.rankings__attr a {
  color: var(--lb-accent);
}
.landing__rank-link {
  display: block;
  text-align: center;
  margin: 0 auto var(--lb-space-2);
  font-size: var(--lb-text-sm);
  font-weight: 600;
  color: var(--lb-accent);
  text-decoration: none;
}

/* ── Boxing news — flat editorial wire, hairline dividers, no pills ─── */
.news {
  padding: var(--lb-space-4) var(--lb-space-4) var(--lb-space-6);
}
.news__intro {
  margin: 0 0 var(--lb-space-3);
  font-size: var(--lb-text-sm);
  line-height: 1.5;
  color: var(--lb-chalk-faint);
}
.news__list {
  border-top: 1px solid var(--lb-line);
}
.news-row {
  display: block;
  padding: var(--lb-space-3) 0;
  border-bottom: 1px solid var(--lb-line);
  color: inherit;
  text-decoration: none;
  transition: opacity 140ms var(--lb-ease);
}
.news-row:active {
  opacity: 0.7;
}
.news-row__eyebrow {
  display: block;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-chalk-faint);
}
.news-row__head {
  display: block;
  margin-top: 4px;
  font-size: max(var(--lb-text-sm), 15px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--lb-ink);
}
.news-row__sum {
  display: block;
  margin-top: 3px;
  font-size: var(--lb-text-sm);
  line-height: 1.45;
  color: var(--lb-chalk-faint);
}
.news__attr {
  margin: var(--lb-space-3) 0 0;
}
.news__empty {
  margin: var(--lb-space-4) 0;
}
.news__attr,
.news__empty {
  font-size: var(--lb-text-xs);
  line-height: 1.5;
  color: var(--lb-chalk-faint);
}
@media (hover: hover) {
  .news-row:hover .news-row__head {
    color: var(--lb-accent);
  }
}

/* Empty-deck aside — quiet flat links to news + rankings (no pill). */
.empty-deck__aside {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-chalk-faint);
}
.empty-deck__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  justify-content: center;
}

/* ── City boxing scene (region → city → gyms/stores/fighters) ─── */
.scene {
  padding: var(--lb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
}
.scene__lede {
  color: var(--lb-chalk-faint);
  font-size: var(--lb-text-sm);
  margin: 0;
}
.scene__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-3);
}
.scene__field {
  flex: 1 1 140px;
}
.scene__field select.field__input {
  appearance: auto;
  cursor: pointer;
}
.scene__eyebrow {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lb-ink);
  margin: var(--lb-space-2) 0 0;
}
.scene-group {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}
.scene-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
  flex-wrap: wrap;
}
.scene-group__title {
  font-size: var(--lb-text-md);
  font-weight: 800;
  color: var(--lb-ink);
  margin: var(--lb-space-2) 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scene-count {
  font-size: var(--lb-text-xs);
  font-weight: 700;
  color: #fff;
  background: var(--lb-accent);
  border-radius: var(--lb-radius-pill);
  padding: 1px 9px;
}
.scene-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scene-item {
  display: flex;
  flex-direction: column;
  padding: 10px var(--lb-space-3);
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-md);
}
a.scene-item--link {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 120ms var(--lb-ease), background 120ms var(--lb-ease);
}
a.scene-item--link:hover,
a.scene-item--link:focus-visible {
  border-color: #d81f2a;
  background: linear-gradient(180deg, #f4f6f8 0%, #e8edf3 100%);
}
.scene-item__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.scene-item__go {
  flex: 0 0 auto;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1d4e89;
}
.scene-item__name {
  font-size: var(--lb-text-sm);
  font-weight: 700;
  color: var(--lb-ink);
}
.scene-item__sub {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  margin-top: 1px;
}
.gym-detail {
  max-width: 28rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.gym-detail__head {
  padding: var(--lb-space-4);
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-bottom: 3px solid #d81f2a;
}
.gym-detail__name {
  margin: 0;
  font-family: var(--lb-font-display, var(--lb-font-stats));
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lb-ink);
  line-height: 1.15;
}
.gym-detail__place {
  margin: 0.55rem 0 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lb-chalk-muted);
}
.gym-detail__blurb {
  margin: 0.85rem 0 0;
  font-size: var(--lb-text-sm);
  line-height: 1.45;
  color: var(--lb-ink);
}
.gym-detail__source {
  margin: 0.75rem 0 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-chalk-faint);
}
.gym-detail__map {
  border: 1px solid var(--lb-line);
  border-bottom: 3px solid #1d4e89;
  background: var(--lb-surface);
  overflow: hidden;
  min-height: 12rem;
}
.gym-detail__map-frame {
  display: block;
  width: 100%;
  height: 14rem;
  border: 0;
}
.scene__attr {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  margin: var(--lb-space-2) 0 0;
  line-height: 1.5;
}
.scene .division-toggle {
  margin: 0;
}

/* ── Ring ──────────────────────────────────────────────────── */

/* Discover — lock the scrollport and flex-fill so the card + details fit one
   screen with no page scroll and no bottom cut-off. Height comes from the
   padded .lb-app box (header/tabs/safe-area already accounted for), not a
   fragile 100dvh re-calc that drifts when chrome (demo banner, etc.) changes. */
.lb-app:has(.ring) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lb-app:has(.ring) .lb-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-block: var(--lb-space-2);
}
.lb-app:has(.ring) #view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ring {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-space-1);
  overflow: hidden;
}

.ring__stack {
  width: 100%;
  max-width: 22rem;
  transform: rotate(-0.5deg);
}

.ring__stack .fighter-card {
  box-shadow: var(--lb-shadow-lg);
}

.ring__actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--lb-space-3);
  width: 100%;
  max-width: 22rem;
  align-items: center;
}

.ring__actions .btn-primary {
  grid-column: 3;
  justify-self: end;
}

.ring__actions .btn-pass {
  justify-self: start;
}

.ring__count {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-muted);
}

/* ── Filters drawer (slides over the Ring) ─────────────────── */

.lb-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 150;
}

.lb-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 11, 8, 0.55);
  opacity: 0;
  transition: opacity var(--lb-duration) var(--lb-ease);
}

.lb-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(22rem, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--lb-surface);
  border-left: 3px solid var(--lb-accent);
  box-shadow: var(--lb-shadow-lg);
  transform: translateX(100%);
  transition: transform 240ms var(--lb-ease);
  overflow-y: auto;
  padding: var(--lb-space-4);
  padding-top: calc(var(--lb-safe-top) + var(--lb-space-4));
  padding-bottom: calc(var(--lb-safe-bottom) + var(--lb-space-4));
}

.lb-drawer-root.open .lb-drawer__backdrop {
  opacity: 1;
}

.lb-drawer-root.open .lb-drawer {
  transform: translateX(0);
}

.lb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
  margin-bottom: var(--lb-space-4);
  padding-bottom: var(--lb-space-3);
  border-bottom: 2px solid var(--lb-line);
}

.lb-drawer__title {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-lg);
  text-transform: uppercase;
  color: var(--lb-chalk);
}

/* ── Onboarding ────────────────────────────────────────────── */

.onboard__steps {
  display: flex;
  gap: var(--lb-space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--lb-space-5);
  overflow-x: auto;
}

/* ── Onboarding photo step ─────────────────────────────────── */
.onboard-photo {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
  align-items: center;
  text-align: center;
}
.onboard-photo__empty {
  width: 8rem;
  height: 10rem;
  border-radius: var(--lb-radius-lg);
  border: 2px dashed var(--lb-border-strong);
  display: grid;
  place-items: center;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-3xl);
  color: var(--lb-muted);
  background: var(--lb-canvas-deep);
}
.onboard-photo__thumbs {
  display: flex;
  gap: var(--lb-space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.onboard-photo__thumb {
  position: relative;
  width: 7rem;
  height: 9rem;
  border-radius: var(--lb-radius-md);
  background-size: cover;
  background-position: center top;
  box-shadow: var(--lb-shadow);
}
.onboard-photo__rm {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: none;
  background: var(--lb-accent);
  color: #fff;
  font-size: var(--lb-text-base);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--lb-shadow-soft);
}
.onboard-photo .btn {
  max-width: 18rem;
}

.onboard__steps li {
  flex: 1;
  min-width: 4.5rem;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding: var(--lb-space-2);
  border-bottom: 2px solid var(--lb-line);
  color: var(--lb-muted);
}

.onboard__steps li.active {
  border-color: var(--lb-accent);
  color: var(--lb-chalk);
  font-weight: 600;
}

.onboard__steps li.done {
  border-color: var(--lb-gold);
  color: var(--lb-gold-ink);
}

.onboard__form {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
}

.onboard__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--lb-space-3);
  margin-top: var(--lb-space-5);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lb-space-3);
}

.form-errors {
  border: 1px solid var(--lb-danger);
  border-left: 4px solid var(--lb-danger);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-surface-raised);
  padding: var(--lb-space-3);
  margin-bottom: var(--lb-space-4);
}

.form-errors ul {
  margin: 0;
  padding-left: var(--lb-space-4);
  color: var(--lb-danger-ink);
  font-size: var(--lb-text-sm);
}

/* ── Lists ─────────────────────────────────────────────────── */

.list-screen__heading {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lb-muted);
  margin: var(--lb-space-4) 0 var(--lb-space-2);
}

.thread-list,
.request-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.thread-row {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--lb-line);
  transition: background var(--lb-t-fast);
}

.thread-row:hover,
.thread-row:focus-visible {
  background: var(--lb-surface-2);
}

.thread-row--unread {
  background: var(--lb-accent-soft);
}

.thread-row__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--lb-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-base);
  color: var(--lb-ink-on-accent);
  flex-shrink: 0;
  border: 1px solid rgba(28, 20, 16, 0.3);
  box-shadow:
    inset 0 -12px 16px rgba(28, 20, 16, 0.35),
    inset 0 2px 6px rgba(255, 248, 246, 0.2);
  text-shadow: 0 1px 3px rgba(28, 20, 16, 0.5);
}

.thread-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.thread-row__body strong {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-base);
}

.thread-row__meta {
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--lb-space-3);
  border-bottom: 1px solid var(--lb-line);
  font-size: var(--lb-text-base);
}

/* ── Own profile — "my corner" ─────────────────────────────── */

.me {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-space-4);
  padding-top: var(--lb-space-4);
  text-align: center;
  max-width: 26rem;
  margin-inline: auto;
}

.me__avatar {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--lb-surface-raised);
  box-shadow:
    0 2px 6px rgba(28, 20, 16, 0.2),
    0 10px 26px rgba(28, 20, 16, 0.22);
}

.me__avatar b {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-2xl);
  font-weight: 400;
  color: rgba(255, 248, 246, 0.94);
  text-shadow: 0 2px 8px rgba(28, 20, 16, 0.5);
}

.me__name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--lb-space-2);
  margin: 0;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-xl);
  text-transform: uppercase;
  color: var(--lb-chalk);
}

.me__name .deck-card__verified {
  align-self: center;
  color: var(--lb-gold-ink);
  filter: none;
}

.me__weight {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-lg);
  font-weight: 500;
  color: var(--lb-muted);
}

.me__meta {
  margin: calc(-1 * var(--lb-space-2)) 0 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-muted);
}

/* Settings / Add Photos / Edit Info — circular controls, center large. */
.me__actions {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--lb-space-6);
  margin-top: var(--lb-space-2);
}

.me__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-space-2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--lb-chalk-muted);
  text-decoration: none;
}

.me__action-circle {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lb-surface-raised);
  border: 1px solid var(--lb-border);
  box-shadow:
    0 1px 2px rgba(28, 20, 16, 0.18),
    0 4px 10px rgba(28, 20, 16, 0.16),
    0 10px 24px rgba(28, 20, 16, 0.12);
  transition: transform var(--lb-duration) var(--lb-ease);
}

.me__action:hover .me__action-circle {
  transform: translateY(-1px);
}
.me__action:active .me__action-circle {
  transform: translateY(1px) scale(0.96);
}

.me__action svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}

.me__action--lg .me__action-circle {
  width: 4.25rem;
  height: 4.25rem;
  color: var(--lb-accent);
}
.me__action--lg svg {
  width: 1.9rem;
  height: 1.9rem;
}
.me__action[aria-disabled='true'] .me__action-circle {
  opacity: 0.45;
}

.me__action-label {
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.me__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lb-space-2);
}

.me__strip {
  display: flex;
  justify-content: center;
  gap: var(--lb-space-3);
}

.me__thumb {
  position: relative;
  width: 3.5rem;
  height: 4.4rem;
  border-radius: var(--lb-radius-sm);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid var(--lb-border-strong);
  box-shadow: var(--lb-shadow-soft);
}

.me__thumb-x {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lb-chalk);
  color: var(--lb-canvas);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.me__thumb-x svg {
  width: 0.7rem;
  height: 0.7rem;
  display: block;
}

.me__hint {
  margin: 0;
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-danger-ink);
}

.me__preview {
  width: 100%;
}

/* ── Chat ──────────────────────────────────────────────────── */

.chat {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
  min-height: calc(100dvh - var(--lb-header-h) - var(--lb-tabs-h) - 4rem);
}

/* Matched thread header — their photo, their name, their card line. */
.chat__head {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
}

.chat__head-avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  flex-shrink: 0;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-sm);
  color: var(--lb-ink-on-accent);
  border: 1px solid var(--lb-border-strong);
  text-shadow: 0 1px 3px rgba(28, 20, 16, 0.5);
}

.chat__head-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat__head-name {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-md);
  font-weight: 700;
  color: var(--lb-chalk);
}
.chat__head-name .deck-card__verified {
  color: var(--lb-gold-ink);
}

.chat__head-sub {
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Matched Jun 12" — system line pinned at the top of the log. */
.chat__system {
  align-self: center;
  margin: var(--lb-space-1) 0 var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-muted);
}

.chat__log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
  padding: var(--lb-space-2);
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-md);
  min-height: 12rem;
}

.chat-bubble {
  max-width: 85%;
  padding: var(--lb-space-2) var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  font-size: var(--lb-text-base);
}

.chat-bubble--them {
  align-self: flex-start;
  background: var(--lb-surface-2);
  border: 1px solid var(--lb-line);
}

.chat-bubble--me {
  align-self: flex-end;
  background: var(--lb-chalk);
  color: var(--lb-canvas);
}

.chat__proposals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.chat__compose {
  display: flex;
  gap: var(--lb-space-2);
}

.chat__compose .field__input {
  flex: 1;
}

/* ── Empty states ──────────────────────────────────────────── */

.empty-deck,
.empty-state {
  text-align: center;
  padding: var(--lb-space-6) var(--lb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
  align-items: center;
}

.empty-deck h2,
.empty-state h2 {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-xl);
  color: var(--lb-chalk);
}

.empty-inline {
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
  padding: var(--lb-space-4);
}

/* ── Safety prose ──────────────────────────────────────────── */

.safety.prose {
  font-size: var(--lb-text-base);
  line-height: 1.55;
}

.safety h2 {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-lg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--lb-space-5) 0 var(--lb-space-2);
  color: var(--lb-chalk);
}

.safety ul {
  padding-left: var(--lb-space-4);
}

.safety li {
  margin-bottom: var(--lb-space-2);
}

/* ── Profile / settings ────────────────────────────────────── */

.profile-view__hint {
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
  margin-bottom: var(--lb-space-3);
}

.profile-view__actions {
  display: flex;
  gap: var(--lb-space-3);
  margin-top: var(--lb-space-4);
}

.settings {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
  max-width: 24rem;
}

.settings__heading {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lb-muted);
  margin-top: var(--lb-space-3);
}

.settings__heading:first-child {
  margin-top: 0;
}

/* Branded confirm strip (replaces confirm()) */
.confirm-strip[hidden] {
  display: none;
}

.confirm-strip {
  border: 1px solid var(--lb-danger);
  border-left: 4px solid var(--lb-danger);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-surface-raised);
  padding: var(--lb-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}

.confirm-strip__msg {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-ink-on-canvas);
}

.confirm-strip__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--lb-space-3);
}

.fighter-detail .btn-block {
  margin-top: var(--lb-space-4);
}

.filters__form {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
  max-width: 24rem;
}

@media (min-width: 480px) {
  .ring__stack {
    max-width: 24rem;
  }
}

/* ── Fighter card — fight-poster treatment ─────────────────── */

.fighter-card {
  position: relative;
  background: var(--lb-surface-raised);
  border: 2px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-md);
  overflow: hidden;
  box-shadow: var(--lb-shadow);
}

.fighter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lb-accent), var(--lb-gold));
  z-index: 2;
}

/* photoColor arrives inline; pseudo layers turn the flat block into a
   duotone plate: lamp-light from the upper left, vignette at the edges,
   woven-canvas texture. All CSS, no assets. */
.fighter-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.fighter-card__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 100% at 50% 22%, transparent 42%, rgba(28, 20, 16, 0.55) 100%),
    linear-gradient(165deg, transparent 30%, rgba(28, 20, 16, 0.38) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.fighter-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgba(255, 248, 246, 0.5) 0%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(255, 248, 246, 0.14) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(28, 20, 16, 0.1) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.fighter-card__initials {
  position: relative;
  z-index: 1;
  font-family: var(--lb-font-display);
  font-size: clamp(3rem, 22vw, 4.25rem);
  letter-spacing: 0.06em;
  color: rgba(255, 248, 246, 0.94);
  text-shadow:
    0 2px 0 rgba(28, 20, 16, 0.35),
    0 6px 22px rgba(28, 20, 16, 0.6);
}

/* Scrim carries the readability fade AND the corner-post band:
   red-to-gold rail down the left edge — fight-poster, not placeholder. */
.fighter-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--lb-accent) 0%, var(--lb-gold) 100%) left top / 5px 100% no-repeat,
    linear-gradient(180deg, transparent 45%, rgba(28, 20, 16, 0.82) 100%);
  pointer-events: none;
}

.fighter-card__top {
  position: absolute;
  left: var(--lb-space-3);
  right: var(--lb-space-3);
  bottom: var(--lb-space-3);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--lb-space-2);
  z-index: 2;
}

.fighter-card__body {
  padding: var(--lb-space-4);
}

.fighter-card__name {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-xl);
  text-transform: uppercase;
  color: var(--lb-chalk);
  margin: 0 0 var(--lb-space-1);
}

.fighter-card__gym {
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
  margin: 0 0 var(--lb-space-3);
}

.fighter-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  margin-bottom: var(--lb-space-3);
}

.fighter-card__bio {
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
  margin: 0 0 var(--lb-space-3);
  border-left: 3px solid var(--lb-gold);
  padding-left: var(--lb-space-3);
}

.fighter-card__compat {
  display: flex;
  justify-content: center;
}

.fighter-card__dist {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  color: var(--lb-ink-on-accent);
  background: rgba(28, 20, 16, 0.55);
  padding: var(--lb-space-1) var(--lb-space-2);
  border-radius: var(--lb-radius-sm);
}

.weight-badge {
  display: inline-flex;
  padding: var(--lb-space-1) var(--lb-space-2);
  background: var(--lb-chalk);
  color: var(--lb-gold-on-chalk);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--lb-radius-sm);
}

.record-pill {
  display: inline-flex;
  padding: var(--lb-space-1) var(--lb-space-2);
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  font-weight: 700;
  border-radius: var(--lb-radius-pill);
}

.chip {
  display: inline-flex;
  padding: var(--lb-space-1) var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--lb-radius-pill);
  border: 1px solid var(--lb-line);
}

.chip--muted {
  background: var(--lb-surface);
  color: var(--lb-muted);
}

.chip--accent {
  background: var(--lb-accent-soft);
  color: var(--lb-link);
  border-color: var(--lb-accent);
}

.chip--warn {
  background: var(--lb-gold-soft);
  color: var(--lb-gold-ink);
}

/* PRO gild — the "top of the sport" chip. Soft gold fill, gilded hairline,
   the laurel victor's mark leading the label. Material gold from a subtle
   soft→sheen wash; the label stays --lb-gild-ink for AA. */
.chip--pro {
  align-items: center;
  gap: var(--lb-space-1);
  color: var(--lb-gild-ink);
  background:
    linear-gradient(135deg, var(--lb-gild-soft), rgba(240, 221, 154, 0.16));
  border-color: var(--lb-gild-line);
}
.chip--pro svg {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
  flex-shrink: 0;
}

.compat-meter {
  position: relative;
  width: 5rem;
  text-align: center;
}

.compat-meter__svg {
  width: 100%;
  height: auto;
}

.compat-meter__track {
  fill: none;
  stroke: var(--lb-line);
  stroke-width: 6;
}

.compat-meter__fill {
  fill: none;
  stroke: var(--lb-accent);
  stroke-width: 6;
  stroke-linecap: butt;
}

.compat-meter--high .compat-meter__fill {
  stroke: var(--lb-gold);
}

.compat-meter--mid .compat-meter__fill {
  stroke: var(--lb-gold-deep);
}

.compat-meter--low .compat-meter__fill {
  stroke: var(--lb-muted);
}

.compat-meter__score {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-lg);
  font-weight: 700;
  color: var(--lb-chalk);
}

.compat-meter__label {
  display: block;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lb-muted);
}

/* ── Form fields ───────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}

.field__label,
.field legend {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lb-muted);
}

.field__input {
  min-height: 2.75rem;
  padding: var(--lb-space-2) var(--lb-space-3);
  border: 1px solid var(--lb-glass-border);
  border-radius: var(--lb-radius-sm);
  font-family: var(--lb-font-body);
  font-size: var(--lb-text-base);
  background: var(--lb-surface);
  backdrop-filter: blur(var(--lb-glass-blur));
  -webkit-backdrop-filter: blur(var(--lb-glass-blur));
  color: var(--lb-chalk);
  color-scheme: light;
  transition: border-color var(--lb-duration) var(--lb-ease),
    background-color var(--lb-duration) var(--lb-ease);
}

.field__input:focus {
  outline: none;
  border-color: var(--lb-accent);
  background: var(--lb-surface-raised);
}

.field__input::placeholder {
  color: var(--lb-chalk-faint);
}

.field__textarea {
  min-height: 6rem;
  resize: vertical;
}

.field__hint {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  margin: 0;
}

.field--check {
  flex-direction: row;
  align-items: center;
  gap: var(--lb-space-2);
  font-size: var(--lb-text-base);
}

.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
  margin: var(--lb-space-1) var(--lb-space-2) var(--lb-space-1) 0;
  font-size: var(--lb-text-sm);
  cursor: pointer;
}

.chip-toggle input {
  accent-color: var(--lb-accent);
}

.proposal-chip {
  padding: var(--lb-space-2) var(--lb-space-3);
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-pill);
  background: var(--lb-surface-raised);
  color: var(--lb-ink-on-canvas);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--lb-t-fast);
}

.proposal-chip:hover {
  background: var(--lb-accent-soft);
  border-color: var(--lb-accent);
}

/* ── Star rating — marketplace credibility device ──────────────
   The filled star flips per theme so it always reads on the CARD surface:
   RED on white (light — a white star would vanish), WHITE on the near-black
   glass (dark). The over-photo variant (.lb-stars--onphoto) stays white in
   BOTH themes — it sits on a dark-scrimmed photo, handled below. */
:root {
  --lb-star: #d81f2a;                  /* filled — red, on the white card */
  --lb-star-empty: var(--lb-border-strong);

  /* ── PRO gild — the symbolic victor's tier ─────────────────────
     A GENUINE gilded gold set, letzbox-local (the portfolio --lb-gold*
     tokens are actually navy). Restrained: on a navy/red/white USA-boxing
     brand a little real gold reads as "top of the sport" without going
     gaudy. --lb-gild-ink is the only token used AS TEXT and clears WCAG AA
     (≈5.4:1 on the soft fill / ≈6.1:1 on white). */
  --lb-gild-ink: #7a5e18;              /* gold text — AA on white/soft fill */
  --lb-gild-grad-a: #caa53f;           /* material gradient — bright edge */
  --lb-gild-grad-b: #9a7521;           /* material gradient — deep edge */
  --lb-gild-sheen: #f0dd9a;            /* static highlight band (no motion) */
  --lb-gild-soft: rgba(180, 137, 43, 0.12);   /* pale gold fill */
  --lb-gild-line: rgba(154, 117, 33, 0.55);   /* gilded hairline */

  /* ── Trading-card "card stock" — the tale-of-the-tape inset ─────
     The tape panel sits on the NAVY card field (--lb-gold) in BOTH themes,
     so these stay stable across light/dark rather than flipping. Warm
     off-white paper + deep-navy ink. --lb-tape-ink on --lb-tape-stock
     clears WCAG AA with margin (≈14.5:1). */
  --lb-tape-stock: #f6f3ec;            /* warm card-stock panel */
  --lb-tape-ink: #12233b;              /* deep-navy ink — labels + values */
  --lb-tape-line: rgba(18, 35, 59, 0.16);  /* hairline between cells */
}

.lb-stars {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
}

.lb-stars__svg {
  height: 0.95rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.lb-stars--compact .lb-stars__svg {
  height: 0.8rem;
}
.lb-stars__empty use {
  fill: var(--lb-star-empty);
}
.lb-stars__fill use {
  fill: var(--lb-star);
}

.lb-stars__num {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lb-chalk);
}
.lb-stars__count {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-muted);
}

/* Over-photo variant — light stars on a dark pill so they always read,
   matching the compat-pill treatment on the card. */
.lb-stars--onphoto {
  background: rgba(14, 26, 43, 0.55);
  padding: 3px var(--lb-space-2);
  border-radius: var(--lb-radius-pill);
  backdrop-filter: blur(2px);
}
.lb-stars--onphoto .lb-stars__empty use {
  fill: rgba(255, 255, 255, 0.45);
}
.lb-stars--onphoto .lb-stars__fill use {
  fill: #fff;
}
.lb-stars--onphoto .lb-stars__svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.lb-stars--onphoto .lb-stars__num {
  color: #fff8f6;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.lb-stars--onphoto .lb-stars__count {
  color: rgba(255, 248, 246, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Unrated — a quiet "New" chip, no stars. */
.lb-stars__new {
  display: inline-flex;
  padding: 0.1rem var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--lb-radius-pill);
  border: 1px solid var(--lb-border-strong);
  color: var(--lb-muted);
  background: var(--lb-surface);
}
.lb-stars--onphoto .lb-stars__new {
  color: #fff8f6;
  border-color: rgba(255, 248, 246, 0.4);
  background: rgba(20, 14, 11, 0.5);
}

/* ── Preferences — division segment + advanced (PRO) section ─── */

.pref-seg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.pref-adv {
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-md);
  padding: var(--lb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
  background: var(--lb-canvas);
}
.pref-adv--locked {
  background: var(--lb-canvas-deep);
}
.pref-adv--locked .field__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pref-adv__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
}
.pref-adv__head .eyebrow {
  margin: 0;
}

.pref-adv__badge {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.1rem var(--lb-space-2);
  border-radius: var(--lb-radius-pill);
}
.pref-adv__badge--on {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  color: var(--lb-gild-ink);
  background:
    linear-gradient(135deg, var(--lb-gild-soft), rgba(240, 221, 154, 0.16));
  border: 1px solid var(--lb-gild-line);
}
.pref-adv__badge--on svg {
  width: 0.85rem;
  height: 0.85rem;
  display: block;
  flex-shrink: 0;
}

.pref-adv__unlock {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
  padding: var(--lb-space-1) var(--lb-space-3);
  border: 1px solid var(--lb-accent);
  border-radius: var(--lb-radius-pill);
  background: var(--lb-accent-soft);
  color: var(--lb-accent);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.pref-adv__unlock:hover {
  background: var(--lb-accent);
  color: var(--lb-ink-on-accent);
}
.pref-adv__lock svg {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
}

/* ── LET'S BOX PRO screen ──────────────────────────────────────── */

.pro-screen {
  max-width: 26rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
}

.pro-hero {
  text-align: center;
  padding: var(--lb-space-5) var(--lb-space-4);
  border-radius: var(--lb-radius-lg);
  background: var(--lb-header-bg);
  color: var(--lb-header-ink);
  border-bottom: 3px solid var(--lb-accent);
}
.pro-hero__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  padding: 0.6rem;
  border-radius: 50%;
  color: var(--lb-header-gold);
  /* Framed on the always-dark hero: a gilded ring + soft gold glow. Fixed
     light-gold values (not --lb-gild-ink, which flips dark in light mode). */
  border: 1px solid rgba(240, 221, 154, 0.5);
  background: radial-gradient(circle at 50% 42%, rgba(202, 165, 63, 0.22), rgba(202, 165, 63, 0) 72%);
}
.pro-hero__mark svg {
  width: 100%;
  height: 100%;
}
.pro-hero__eyebrow {
  margin: var(--lb-space-2) 0 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-gold-on-chalk);
}
.pro-hero__lead {
  margin: var(--lb-space-2) 0 0;
  font-size: var(--lb-text-md);
  color: #eaf1fb;
}

.pro-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-space-2);
  text-align: center;
  padding: var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  border: 1px solid var(--lb-gild-line);
  background: var(--lb-gild-soft);
}
/* The "you've arrived" badge — fullest gild. Soft gold field, gilded
   hairline, a STATIC diagonal sheen band (fixed gradient, no animation —
   honours the no-idle-motion law) and a whisper of gold glow. The laurel
   leads; the label stays --lb-gild-ink for AA. */
.pro-active__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem var(--lb-space-3);
  border-radius: var(--lb-radius-pill);
  color: var(--lb-gild-ink);
  border: 1px solid var(--lb-gild-line);
  background:
    linear-gradient(115deg, transparent 38%, rgba(240, 221, 154, 0.45) 50%, transparent 62%),
    linear-gradient(135deg, var(--lb-gild-soft), rgba(240, 221, 154, 0.2));
  box-shadow: 0 1px 8px rgba(154, 117, 33, 0.22);
}
.pro-active__badge svg {
  width: 1rem;
  height: 1rem;
  display: block;
  flex-shrink: 0;
}
.pro-active__copy {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}

.pro-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}
.pro-feature {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-2) var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  font-size: var(--lb-text-base);
  color: var(--lb-ink-on-canvas);
}
.pro-feature__check {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--lb-ink-on-accent);
  background: var(--lb-accent);
}
.pro-feature__check svg {
  width: 0.85rem;
  height: 0.85rem;
}

.pro-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lb-space-3);
}
.pro-plan {
  position: relative;
  text-align: center;
  padding: var(--lb-space-4) var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  border: 1px solid var(--lb-border-strong);
  background: var(--lb-surface);
}
.pro-plan--best {
  border-color: var(--lb-accent);
  box-shadow: var(--lb-shadow-soft);
}
.pro-plan__flag {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem var(--lb-space-2);
  border-radius: var(--lb-radius-pill);
  color: var(--lb-ink-on-accent);
  background: var(--lb-accent);
  white-space: nowrap;
}
.pro-plan__name {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.pro-plan__price {
  margin: var(--lb-space-1) 0 0;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-2xl);
  color: var(--lb-chalk);
}
.pro-plan__per {
  margin: 0;
  font-size: var(--lb-text-xs);
  color: var(--lb-muted);
}
.pro-plan__note {
  margin: var(--lb-space-2) 0 0;
  font-size: var(--lb-text-xs);
  color: var(--lb-gold-ink);
}

.pro-fineprint {
  margin: 0;
  text-align: center;
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
}

/* ── Founders First 50 ─────────────────────────────────────────── */

.chip--founder {
  align-items: center;
  gap: var(--lb-space-1);
  color: var(--lb-ink-on-accent);
  background: var(--lb-accent);
  border-color: var(--lb-accent-dark, var(--lb-accent));
}

/* Launch offer callout on the PRO screen — a single quiet line, not a banner. */
.pro-founders {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3) var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  background: var(--lb-header-bg);
  color: #eaf1fb;
  border-left: 3px solid var(--lb-accent);
  text-decoration: none;
}
.pro-founders__tag {
  flex-shrink: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-header-gold);
}
.pro-founders__copy {
  font-size: var(--lb-text-sm);
}

.founders {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
}
.founders__hero {
  text-align: center;
  padding: var(--lb-space-5) var(--lb-space-4);
  border-radius: var(--lb-radius-lg);
  background: var(--lb-header-bg);
  color: var(--lb-header-ink);
  border-bottom: 3px solid var(--lb-accent);
}
.founders__eyebrow {
  display: inline-block;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-header-gold);
}
.founders__lead {
  margin: var(--lb-space-2) 0 0;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-2xl);
  line-height: 1.05;
  color: #ffffff;
}
.founders__sub {
  margin: var(--lb-space-3) auto 0;
  max-width: 30rem;
  font-size: var(--lb-text-sm);
  color: #cdd9ea;
}
.founders__ref {
  margin: var(--lb-space-3) 0 0;
  font-size: var(--lb-text-xs);
  color: #9fb2ca;
}
.founders__ref strong {
  color: var(--lb-header-gold);
}
.founders__perks {
  margin: 0;
}

.founders-redeem {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}
.founders-redeem__label {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.founders-redeem__row {
  display: flex;
  gap: var(--lb-space-2);
}
.founders-redeem__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  border: 1px solid var(--lb-border-strong);
  background: var(--lb-surface);
  color: var(--lb-chalk);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-md);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.founders-redeem__input:focus-visible {
  outline: 2px solid var(--lb-accent);
  outline-offset: 1px;
}
.founders-redeem__row .btn {
  flex: 0 0 auto;
}
.founders-redeem__msg {
  margin: 0;
  font-size: var(--lb-text-xs);
  color: var(--lb-accent);
}

.founder-state {
  text-align: center;
  padding: var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  border: 1px solid var(--lb-border-strong);
  background: var(--lb-surface);
}
.founder-state--claimed {
  border-color: var(--lb-accent);
}
.founder-state__badge {
  display: inline-block;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  padding: 0.15rem var(--lb-space-2);
  border-radius: var(--lb-radius-pill);
  color: var(--lb-ink-on-accent);
  background: var(--lb-accent);
}
.founder-state__copy {
  margin: var(--lb-space-2) 0 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
}
.founder-state--closed {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
}

/* ── Called-you-out — banner, locked teaser, list ──────────────── */

.me__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lb-space-2);
}

.list-screen__lede {
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
  margin: 0 0 var(--lb-space-3);
}

.callout-banner {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3);
  margin-bottom: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  border: 1px solid var(--lb-accent);
  background: var(--lb-accent-soft);
  text-decoration: none;
  color: var(--lb-ink-on-canvas);
}
.callout-banner--locked {
  border-color: var(--lb-border-strong);
  background: var(--lb-canvas-deep);
}
.callout-banner__icon {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  color: var(--lb-accent);
}
.callout-banner--locked .callout-banner__icon {
  color: var(--lb-muted);
}
.callout-banner__icon svg {
  width: 100%;
  height: 100%;
}
.callout-banner__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.callout-banner__body strong {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-base);
}
.callout-banner__sub {
  font-size: var(--lb-text-xs);
  color: var(--lb-muted);
}
.callout-banner__chev {
  font-size: var(--lb-text-lg);
  color: var(--lb-muted);
}

.callout-locked {
  max-width: 24rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-5) var(--lb-space-4);
}
.callout-locked__stack {
  display: flex;
  gap: var(--lb-space-2);
}
.callout-locked__tile {
  width: 3.5rem;
  height: 4.4rem;
  border-radius: var(--lb-radius-sm);
  background-position: center top;
  background-size: cover;
  filter: blur(7px) saturate(0.85);
  border: 1px solid var(--lb-border);
}
.callout-locked__lock {
  display: inline-flex;
  width: 2.2rem;
  height: 2.2rem;
  color: var(--lb-accent);
  margin-top: calc(-1 * var(--lb-space-6));
}
.callout-locked__lock svg {
  width: 100%;
  height: 100%;
}
.callout-locked__count {
  margin: 0;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-xl);
  text-transform: uppercase;
  color: var(--lb-chalk);
}
.callout-locked__copy {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
}

.callout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.callout-card {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  border: 1px solid var(--lb-line);
  background: var(--lb-surface);
}
.callout-card__avatar {
  width: 3rem;
  height: 3.75rem;
  border-radius: var(--lb-radius-sm);
  flex-shrink: 0;
  background-position: center top;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lb-border-strong);
}
.callout-card__avatar b {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-lg);
  color: rgba(255, 248, 246, 0.94);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.callout-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.callout-card__name {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-base);
  font-weight: 700;
  color: var(--lb-chalk);
}
.callout-card__flag {
  font-size: var(--lb-text-xs);
}
.callout-card__meta {
  margin: 0;
  font-size: var(--lb-text-xs);
  color: var(--lb-muted);
}
.callout-card__cta {
  flex-shrink: 0;
}

/* ── Promoters ─────────────────────────────────────────────────── */

.promoters,
.promoter-detail {
  max-width: 28rem;
  margin-inline: auto;
}
.promoters__lede {
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
  margin: 0 0 var(--lb-space-4);
}

.promoter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.promoter-card {
  display: block;
  padding: var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  border: 1px solid var(--lb-line);
  background: var(--lb-surface);
  box-shadow: var(--lb-shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--lb-t-fast), box-shadow var(--lb-t-fast);
}
.promoter-card:hover,
.promoter-card:focus-visible {
  border-color: var(--lb-accent);
  box-shadow: var(--lb-shadow);
}
.promoter-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-2);
}
.promoter-card__org {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
  margin: 0;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-lg);
  text-transform: uppercase;
  color: var(--lb-chalk);
}
.promoter-card__person {
  margin: var(--lb-space-1) 0 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}
.promoter-card__loc {
  margin: 2px 0 var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.promoter-card__rating {
  margin-bottom: var(--lb-space-2);
}
.promoter-card__blurb {
  margin: 0 0 var(--lb-space-3);
  font-size: var(--lb-text-sm);
  line-height: 1.5;
  color: var(--lb-ink-on-canvas);
}
.promoter-card__events {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.promoter-card__events span {
  color: var(--lb-accent);
  font-weight: 700;
}

.promoters__cta {
  margin-top: var(--lb-space-5);
  padding: var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  border: 1px dashed var(--lb-border-strong);
  background: var(--lb-canvas);
  text-align: center;
}
.promoters__cta .eyebrow {
  margin-bottom: var(--lb-space-1);
}
.promoters__cta-copy {
  margin: 0 0 var(--lb-space-3);
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}

/* Promoter detail */
.promoter-detail__head {
  padding-bottom: var(--lb-space-4);
  margin-bottom: var(--lb-space-4);
  border-bottom: 2px solid var(--lb-line);
}
.promoter-detail__org {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
  margin: 0;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-2xl);
  text-transform: uppercase;
  color: var(--lb-chalk);
}
.promoter-detail__person {
  margin: var(--lb-space-1) 0 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-base);
  color: var(--lb-chalk-muted);
}
.promoter-detail__loc {
  margin: 2px 0 var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.promoter-detail__rating {
  margin-bottom: var(--lb-space-2);
}
.promoter-detail__blurb {
  margin: 0;
  font-size: var(--lb-text-base);
  line-height: 1.55;
  color: var(--lb-ink-on-canvas);
}

.event-list {
  list-style: none;
  margin: var(--lb-space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.event-row {
  padding: var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  border: 1px solid var(--lb-line);
  background: var(--lb-surface);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}
.event-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lb-space-3);
}
.event-row__title {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-md);
  font-weight: 700;
  color: var(--lb-chalk);
}
.event-row__date {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-accent);
  white-space: nowrap;
}
.event-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}
.event-row__loc {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}
.event-row__note {
  margin: 0;
  font-size: var(--lb-text-sm);
  line-height: 1.5;
  color: var(--lb-muted);
}
.event-row__apply {
  align-self: flex-start;
  margin-top: var(--lb-space-1);
}
.event-row__sent {
  font-size: var(--lb-text-xs);
  color: var(--lb-gold-ink);
}

/* Five-tab bottom rail */
.lb-tabs {
  grid-template-columns: repeat(5, 1fr);
}
.lb-tab__badge {
  right: calc(50% - 1.15rem);
}

/* ── Dark glass pass — frost the card & panel surfaces on the near-black canvas ── */
.promoter-card,
.callout-card,
.event-row,
.pro-feature,
.pro-plan,
.pref-adv,
.chat__log,
.callout-banner {
  backdrop-filter: blur(var(--lb-glass-blur));
  -webkit-backdrop-filter: blur(var(--lb-glass-blur));
}

/* ── Discover — secondary utility row (Rewind / Boost) above the deck ── */
.ring__utility {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}
.ring__util {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
  padding: 0.35rem 0.8rem;
  border-radius: var(--lb-radius-pill);
  background: var(--lb-surface);
  backdrop-filter: blur(var(--lb-glass-blur));
  -webkit-backdrop-filter: blur(var(--lb-glass-blur));
  border: 1px solid var(--lb-glass-border);
  color: var(--lb-chalk-muted);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--lb-t-fast), border-color var(--lb-t-fast);
}
.ring__util:hover:not(:disabled) {
  color: var(--lb-chalk);
  border-color: var(--lb-border-strong);
}
.ring__util:disabled,
.ring__util.is-dim {
  opacity: 0.5;
  cursor: not-allowed;
}
.ring__util.is-on {
  color: var(--lb-link);
  border-color: var(--lb-gold);
}
.ring__util-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
}
.ring__util-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Challenge hub (#/challenge centre tab) ─────────────────── */
.challenge-hub {
  max-width: 26rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
}
.challenge-hub__cta {
  text-align: center;
  padding: var(--lb-space-6) var(--lb-space-4);
  border-radius: var(--lb-radius-lg);
  background: var(--lb-surface);
  backdrop-filter: blur(var(--lb-glass-blur));
  -webkit-backdrop-filter: blur(var(--lb-glass-blur));
  border: 1px solid var(--lb-glass-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-space-3);
}
.challenge-hub__glove,
.challenge-hub__glove.lbx-mark {
  width: auto;
  height: 2.35rem;
  max-width: 3.5rem;
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.challenge-hub__glove svg {
  width: 1.9rem;
  height: 1.9rem;
}
.challenge-hub__glove img {
  width: auto;
  height: 2.35rem;
  max-width: 3.5rem;
  object-fit: contain;
  display: block;
}
.challenge-hub__title {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-xl);
  text-transform: uppercase;
  color: var(--lb-chalk);
}
.challenge-hub__copy {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}
.challenge-hub__cta .btn {
  width: 100%;
}
.callout-locked--inline {
  padding: var(--lb-space-4);
}

/* ── Filters bottom-sheet — glass-dark, slides up from the bottom ── */
.lb-fsheet-root {
  position: fixed;
  inset: 0;
  z-index: 150;
}
.lb-fsheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--lb-duration) var(--lb-ease);
}
.lb-fsheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(30rem, 100%);
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  padding: var(--lb-space-3) var(--lb-space-4) calc(var(--lb-space-5) + var(--lb-safe-bottom));
  background: var(--lb-surface-raised);
  backdrop-filter: blur(calc(var(--lb-glass-blur) + 4px));
  -webkit-backdrop-filter: blur(calc(var(--lb-glass-blur) + 4px));
  border: 1px solid var(--lb-glass-border);
  border-bottom: 0;
  border-radius: var(--lb-radius-lg) var(--lb-radius-lg) 0 0;
  box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  transition: transform 260ms var(--lb-ease);
}
.lb-fsheet-root.open .lb-fsheet__backdrop {
  opacity: 1;
}
.lb-fsheet-root.open .lb-fsheet {
  transform: translate(-50%, 0);
}
.lb-fsheet__grab {
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--lb-border-strong);
  align-self: center;
  margin-bottom: var(--lb-space-2);
}
.lb-fsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
  margin-bottom: var(--lb-space-3);
  padding-bottom: var(--lb-space-3);
  border-bottom: 1px solid var(--lb-line);
}
.lb-fsheet__title {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-lg);
  text-transform: uppercase;
  color: var(--lb-chalk);
}

/* Distance slider */
.pref-range {
  width: 100%;
  accent-color: var(--lb-accent);
  color-scheme: light;
}

/* ── Toggle switch (Verified only) ─────────────────────────── */
.lb-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface);
  backdrop-filter: blur(var(--lb-glass-blur));
  -webkit-backdrop-filter: blur(var(--lb-glass-blur));
  border: 1px solid var(--lb-glass-border);
  cursor: pointer;
}
.lb-toggle__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-toggle__title {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lb-chalk);
}
.lb-toggle__sub {
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-muted);
}
.lb-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lb-toggle__track {
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 1.6rem;
  border-radius: var(--lb-radius-pill);
  background: var(--lb-surface-2);
  border: 1px solid var(--lb-border-strong);
  transition: background-color var(--lb-t-fast), border-color var(--lb-t-fast);
}
.lb-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--lb-chalk);
  transition: transform var(--lb-duration) var(--lb-ease);
}
.lb-toggle input:checked + .lb-toggle__track {
  background: var(--lb-accent);
  border-color: var(--lb-accent-dark);
}
.lb-toggle input:checked + .lb-toggle__track .lb-toggle__knob {
  transform: translateX(1.1rem);
}
.lb-toggle input:focus-visible + .lb-toggle__track {
  outline: 2px solid var(--lb-accent);
  outline-offset: 2px;
}

/* ── Homepage — how-it-works steps + content blocks ─────────────── */
.landing__sub {
  margin: var(--lb-space-1) 0 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}

.howto {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.howto__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.howto__step {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface);
  backdrop-filter: blur(var(--lb-glass-blur));
  -webkit-backdrop-filter: blur(var(--lb-glass-blur));
  border: 1px solid var(--lb-glass-border);
}
.howto__num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lb-accent);
  color: var(--lb-ink-on-accent);
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-md);
  line-height: 1;
}
.howto__title {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-base);
  font-weight: 700;
  color: var(--lb-chalk);
}
.howto__copy {
  margin: 2px 0 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}

.landing__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
}
.landing__block {
  padding: var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface);
  border: 1px solid var(--lb-glass-border);
  border-left: 3px solid var(--lb-accent);
}
.landing__block:nth-child(2) {
  border-left-color: var(--lb-gold);
}
/* Section titles — restrained, NOT a giant display headline. */
.landing__block-title {
  margin: 0 0 var(--lb-space-2);
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-lg);
  letter-spacing: var(--lb-tracking-display);
  text-transform: uppercase;
  color: var(--lb-chalk);
}
.landing__block-copy {
  margin: 0;
  font-size: var(--lb-text-sm);
  line-height: 1.55;
  color: var(--lb-chalk-muted);
}

.safety__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-3);
  margin-top: var(--lb-space-5);
}

/* ── Profile verify banner ──────────────────────────────────────── */
.me__verify {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  width: min(100%, 24rem);
  margin: var(--lb-space-2) auto 0;
  padding: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  background: var(--lb-gold-soft);
  border: 1px solid var(--lb-gold-dark);
  text-decoration: none;
  color: var(--lb-chalk);
  transition: border-color var(--lb-duration) var(--lb-ease);
}
.me__verify:hover {
  border-color: var(--lb-gold);
}
.me__verify-icon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--lb-gold-ink);
}
.me__verify-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.me__verify-text {
  flex: 1;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}
.me__verify-text strong {
  color: var(--lb-chalk);
}
.me__verify-chev {
  color: var(--lb-gold-ink);
  font-size: var(--lb-text-lg);
}

/* ── Settings — emergency contact ───────────────────────────────── */
.settings__emergency {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
  padding: var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface);
  border: 1px solid var(--lb-glass-border);
}
.settings__emergency-lede {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}
.settings__saved {
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-gold-ink);
  text-align: center;
}
.settings__saved[hidden] {
  display: none;
}

/* ── Settings drawer (collapsible — Telegram link, etc.) ────────── */
.settings__drawer {
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-surface);
  margin: var(--lb-space-2) 0;
  overflow: hidden;
}
.settings__drawer-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--lb-space-2) var(--lb-space-3);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-sm), 11px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lb-ink-on-canvas);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-2);
}
.settings__drawer-summary::-webkit-details-marker {
  display: none;
}
.settings__drawer-summary::after {
  content: '+';
  color: var(--lb-muted);
  font-weight: 700;
}
.settings__drawer[open] .settings__drawer-summary::after {
  content: '\2212'; /* minus */
}
.settings__drawer-body {
  padding: 0 var(--lb-space-3) var(--lb-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}
.settings__badge {
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  letter-spacing: 0.04em;
  color: var(--lb-ink-on-accent, #fff);
  background: var(--lb-red, #e11d2a);
  border-radius: var(--lb-radius-sm);
  padding: 2px 8px;
}

/* ── Verify screen ──────────────────────────────────────────────── */
.verify {
  max-width: 26rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
}
.verify__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-space-1);
}
.verify__mark {
  width: 3rem;
  height: 3rem;
  color: var(--lb-border-strong);
  margin-bottom: var(--lb-space-1);
}
.verify__mark--on {
  color: var(--lb-gold);
}
.verify__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.verify__eyebrow {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-muted);
}
.verify__lead {
  margin: 0;
  max-width: 22rem;
  font-size: var(--lb-text-base);
  color: var(--lb-chalk-muted);
}
.verify__progress {
  margin: var(--lb-space-1) 0 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-gold-ink);
}
.verify-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.verify-step {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface);
  backdrop-filter: blur(var(--lb-glass-blur));
  -webkit-backdrop-filter: blur(var(--lb-glass-blur));
  border: 1px solid var(--lb-glass-border);
}
.verify-step--done {
  border-color: var(--lb-gold-dark);
  background: var(--lb-gold-soft);
}
.verify-step__icon {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--lb-gold-ink);
}
.verify-step__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.verify-step__body {
  flex: 1;
  min-width: 0;
}
.verify-step__label {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-base);
  font-weight: 700;
  color: var(--lb-chalk);
}
.verify-step__desc {
  margin: 2px 0 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}
.verify-step__badge {
  flex-shrink: 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-gold-ink);
}
.verify__note {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-faint);
  text-align: center;
}
.verify__confirm[hidden] {
  display: none;
}
.verify__done {
  margin: 0;
  padding: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  background: var(--lb-gold-soft);
  border: 1px solid var(--lb-gold-dark);
  font-size: var(--lb-text-sm);
  color: var(--lb-gold-ink);
  text-align: center;
}

.standards__lede {
  font-size: var(--lb-text-base);
  color: var(--lb-chalk-muted);
  margin-bottom: var(--lb-space-3);
}

/* ── Chat — trust button, compatibility card, session, actions ──── */
.chat__head {
  position: relative;
}
.chat__head-trust {
  margin-left: auto;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--lb-glass-border);
  border-radius: 50%;
  background: var(--lb-surface);
  color: var(--lb-chalk-faint);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--lb-duration) var(--lb-ease),
    border-color var(--lb-duration) var(--lb-ease);
}
.chat__head-trust:hover {
  color: var(--lb-danger-ink);
  border-color: var(--lb-border-strong);
}
.chat__head-trust svg {
  width: 1.1rem;
  height: 1.1rem;
}

.compat-card {
  padding: var(--lb-space-3) var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface-raised);
  border: 1px solid var(--lb-glass-border);
  border-left: 3px solid var(--lb-gold);
}
.compat-card__eyebrow {
  margin: 0 0 var(--lb-space-1);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-gold-ink);
}
.compat-card__headline {
  margin: 0 0 var(--lb-space-1);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-md);
  font-weight: 700;
  color: var(--lb-chalk);
}
.compat-card__detail {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}

.session {
  padding: var(--lb-space-3) var(--lb-space-4) var(--lb-space-4);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface);
  border: 1px solid var(--lb-glass-border);
  border-left: 3px solid var(--lb-gold);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.session__head {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
}
.session__head-icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--lb-gold-ink);
}
.session__head-icon svg,
.session__pace-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.session__title {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb-chalk);
}
.session__label {
  margin: 0 0 var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.session__pace {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}
.session__pace--set {
  flex-direction: row;
  align-items: center;
  gap: var(--lb-space-2);
}
.session__pace-icon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--lb-gold-ink);
}
.session__pace-msg {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
}
.session__pace-msg strong {
  color: var(--lb-chalk);
}
.session__seg {
  display: flex;
  gap: var(--lb-space-2);
}
.session__seg-btn {
  flex: 1;
  padding: var(--lb-space-2);
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-surface);
  color: var(--lb-chalk-muted);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--lb-duration) var(--lb-ease),
    color var(--lb-duration) var(--lb-ease);
}
.session__seg-btn.is-on {
  border-color: var(--lb-accent);
  color: var(--lb-chalk);
  background: var(--lb-accent-soft);
}
.session__checks {
  display: flex;
  gap: var(--lb-space-2);
}
.session__check {
  flex: 1;
  min-height: 2.5rem;
  padding: var(--lb-space-2);
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-surface);
  color: var(--lb-chalk);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--lb-duration) var(--lb-ease),
    border-color var(--lb-duration) var(--lb-ease);
}
.session__check:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.session__check.is-done {
  background: var(--lb-gold);
  border-color: var(--lb-gold-dark);
  color: var(--lb-ink-on-gold);
}
.session__hint,
.session__gymrec {
  margin: 0;
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-chalk-faint);
}
.session__gymrec {
  padding-left: var(--lb-space-3);
  border-left: 2px solid var(--lb-gold-dark);
}
.session__noshow {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lb-chalk-faint);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--lb-duration) var(--lb-ease);
}
.session__noshow:hover {
  color: var(--lb-danger-ink);
}
.session__noshow-done {
  margin: 0;
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-danger-ink);
}
.session__confirm[hidden] {
  display: none;
}
.session__confirm {
  border: 1px solid var(--lb-danger);
  border-radius: var(--lb-radius-sm);
  padding: var(--lb-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
  background: var(--lb-surface-raised);
}

/* Structured action chips + inline picker below the log. */
.chat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}
.chat-action {
  padding: var(--lb-space-2) var(--lb-space-3);
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-pill);
  background: var(--lb-surface-raised);
  color: var(--lb-chalk);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--lb-duration) var(--lb-ease),
    border-color var(--lb-duration) var(--lb-ease);
}
.chat-action:hover {
  background: var(--lb-accent-soft);
  border-color: var(--lb-accent);
}
.chat__picker {
  flex-basis: 100%;
  padding: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface);
  border: 1px solid var(--lb-glass-border);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}
.chat__picker[hidden] {
  display: none;
}
.chat__picker-title {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.chat__picker-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

/* ── Backend wiring: account fields, member tags, gym signup, flash ─────── */

/* Optional-field marker in a field label. */
.field__opt {
  font-weight: 500;
  color: var(--lb-chalk-faint);
  text-transform: none;
  letter-spacing: 0;
}

/* Account block inside onboarding step 2 — set off from the fight fields. */
.onboard-account {
  margin-top: var(--lb-space-2);
  padding-top: var(--lb-space-3);
  border-top: 1px solid var(--lb-line);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}

/* "LETSBOX" chip beside a real member gym in the city scene. */
.scene-item__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  font-size: max(0.625rem, 10px);
  font-weight: 700;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--lb-accent);
  border-radius: var(--lb-radius-pill);
  vertical-align: middle;
}

.join-gym .onboard-account {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* Self-dismissing status banner (account feedback). Above the sticky header. */
#lb-flash {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
  width: min(92vw, 420px);
  pointer-events: none;
}
.lb-flash__item {
  padding: 10px var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  background: var(--lb-ink-on-canvas);
  color: var(--lb-surface);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--lb-t-fast, 160ms) ease, transform var(--lb-t-fast, 160ms) ease;
}
.lb-flash__item.is-in {
  opacity: 1;
  transform: translateY(0);
}
.lb-flash__item--success {
  background: var(--lb-success);
  color: #fff;
}

/* ── Motion — alive on interaction, scroll & entrance; STILL at rest ───────
   Reconciles "the site felt too static" with the calm-at-idle law: every bit
   of motion here is a one-shot triggered by navigation, scroll, or hover and
   settles immediately. Nothing loops or drifts at rest. prefers-reduced-motion
   turns it all off. */

/* Each routed view rises + fades in when it renders (triggered on navigation). */
@keyframes lbViewIn {
  from {
    /* Opacity floored so a stalled view animation can never blank the app. */
    opacity: 0.4;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#view.view-enter {
  animation: lbViewIn 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Scroll-reveal — elements tagged .reveal ease up into place as they enter the
   viewport (motion on scroll). A staggered variant animates direct children. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}
.reveal--stagger.is-revealed > * {
  animation: lbViewIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.reveal--stagger.is-revealed > *:nth-child(2) {
  animation-delay: 0.07s;
}
.reveal--stagger.is-revealed > *:nth-child(3) {
  animation-delay: 0.14s;
}
.reveal--stagger.is-revealed > *:nth-child(4) {
  animation-delay: 0.21s;
}
.reveal--stagger.is-revealed > *:nth-child(5) {
  animation-delay: 0.28s;
}

/* Primary CTA lifts and blooms the accent glow on hover (canonical glow). */
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(216, 31, 42, 0.32);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(216, 31, 42, 0.28);
}
.landing__rank-link {
  transition: transform 0.2s ease, color 0.2s ease;
}
.landing__rank-link:hover {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  #view.view-enter {
    animation: none;
  }
  .reveal,
  .reveal--stagger.is-revealed > * {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .btn-primary:hover:not(:disabled) {
    transform: none;
  }
}

/* ── Pro rankings — mode toggle, champion cards, pound-for-pound ─────────── */
.rank-mode {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: var(--lb-space-3) 0 var(--lb-space-2);
  background: var(--lb-surface-2);
  border-radius: var(--lb-radius-pill);
}
.rank-mode__opt {
  flex: 1;
  padding: 7px var(--lb-space-3);
  border: 0;
  border-radius: var(--lb-radius-pill);
  background: transparent;
  color: var(--lb-chalk-faint);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--lb-t-fast, 160ms), color var(--lb-t-fast, 160ms);
}
.rank-mode__opt.is-active {
  background: var(--lb-accent);
  color: #fff;
}

.champ-grid {
  list-style: none;
  margin: 0 0 var(--lb-space-3);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lb-space-2);
}
@media (min-width: 560px) {
  .champ-grid { grid-template-columns: 1fr 1fr; }
}
.champ-card {
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-md);
  padding: var(--lb-space-3);
}
.champ-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lb-space-2);
  margin-bottom: 6px;
}
.champ-card__div {
  font-family: var(--lb-font-stats);
  font-weight: 800;
  font-size: var(--lb-text-sm);
  color: var(--lb-ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.champ-card__limit {
  font-size: max(0.625rem, 10px);
  color: var(--lb-chalk-faint);
  white-space: nowrap;
}
.champ-card__note {
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  margin: 0 0 6px;
  line-height: 1.4;
}
.champ-belts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.champ-belt {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: var(--lb-space-2);
  padding: 5px 0;
  border-top: 1px solid var(--lb-line);
}
.champ-belt:first-child { border-top: 0; }
.champ-belt__org {
  font-family: var(--lb-font-stats);
  font-size: max(0.625rem, 10px);
  font-weight: 800;
  color: #fff;
  background: var(--lb-ink-on-canvas);
  text-align: center;
  padding: 2px 0;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.champ-belt__name {
  font-size: var(--lb-text-sm);
  font-weight: 600;
  color: var(--lb-ink);
}
.champ-belt__rec {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  white-space: nowrap;
}
.champ-belt--vacant .champ-belt__org { background: var(--lb-chalk-faint); }
.champ-belt--vacant .champ-belt__name { color: var(--lb-chalk-faint); font-style: italic; }

.p4p-list {
  list-style: none;
  margin: 0 0 var(--lb-space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.p4p-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: var(--lb-space-2);
  padding: 8px var(--lb-space-3);
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-radius-md);
}
.p4p-row__rank {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-base);
  font-weight: 800;
  color: var(--lb-accent);
  text-align: center;
}
.p4p-row__id { display: flex; flex-direction: column; }
.p4p-row__name { font-size: var(--lb-text-sm); font-weight: 700; color: var(--lb-ink); }
.p4p-row__div { font-size: max(0.625rem, 10px); color: var(--lb-chalk-faint); }
.p4p-row__rec {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  color: var(--lb-chalk-faint);
  white-space: nowrap;
}