/* ============================================================
   account/account-hub.css — Account Hub: inner tab strip
   ------------------------------------------------------------
   A 3-tab segmented control that connects directly to the hero
   card's bottom edge, visually anchoring "Progress · Leaderboard
   · Profile" as part of a unified card UI.

   Design language:
   • The strip feels like a second "floor" of the hero card:
     same border-radius family, a subtle frosted background.
   • Active tab = solid teal fill + white text; the slab rises
     slightly with a shadow so it clearly reads as "selected".
   • Inactive tabs are muted; hover gives a soft teal tint.
   • Icons sit to the left of the label; a badge (rank #) floats
     to the right when supplied.
   • The entire strip is sticky so it stays visible on long panels.

   Architecture:
     .acct-hub                  — wrapping section
     .acct-hub__strip           — sticky tab bar (tablist)
     .acct-hub__tab             — individual pill button (tab role)
     .acct-hub__tab--active     — selected state
     .acct-hub__badge           — rank badge (#1)
     .acct-hub__panel           — one content panel per tab
     .acct-hub__panel--active   — visible panel
     [data-hub-panel="progress" | "leaderboard" | "profile"]

   RTL: logical properties throughout.
   Motion: panel slides in; prefers-reduced-motion removes it.
   ============================================================ */

/* ── Strip container ────────────────────────────────────────── */
.acct-hub__strip {
  position: sticky;
  top: calc(var(--shell-header-h, 64px) + 8px);
  z-index: 20;

  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* equal thirds always */
  gap: 6px;
  padding: 6px;

  /* Frosted glass card — sits visually between the hero and content */
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);

  border-radius: 20px;
  border: 1px solid var(--acct-line);
  box-shadow:
    0 1px 3px hsl(var(--shadow-color) / .06),
    0 10px 28px -8px hsl(var(--shadow-color) / .16);

  /* Gap between hero card and the strip */
  margin-block: 4px 24px;
}

/* ── Individual tab button ──────────────────────────────────── */
.acct-hub__tab {
  /* Equal thirds, center-aligned content */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 52px;
  padding: 0 20px;
  border: none;
  border-radius: 14px;

  /* Typography */
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;

  /* Default (inactive) state */
  background: transparent;
  color: var(--acct-ink-soft);
  cursor: pointer;

  /* Smooth everything */
  transition:
    background   .22s var(--acct-ease),
    color        .22s var(--acct-ease),
    box-shadow   .22s var(--acct-ease),
    transform    .14s var(--acct-ease);
}

/* Icon inside the tab */
.acct-hub__tab svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  opacity: .65;
  transition: opacity .22s ease, transform .22s ease;
}

/* ── Active (selected) state ────────────────────────────────── */
.acct-hub__tab--active {
  background: var(--acct-teal, #1a7a6a);
  color: #ffffff;
  /* Slight elevation to "lift" the selected slab */
  box-shadow:
    0 2px 6px -2px color-mix(in srgb, var(--acct-teal) 55%, transparent),
    0 1px 2px hsl(var(--shadow-color) / .1);
  transform: translateY(-1px);
}
.acct-hub__tab--active svg {
  opacity: 1;
  /* Icon pops on active */
  transform: scale(1.08);
}

/* ── Hover (inactive only) ──────────────────────────────────── */
.acct-hub__tab:hover:not(.acct-hub__tab--active) {
  background: color-mix(in srgb, var(--acct-teal) 9%, transparent);
  color: var(--acct-teal-deep, #155f52);
}
.acct-hub__tab:hover:not(.acct-hub__tab--active) svg {
  opacity: .9;
}

/* ── Focus ring ─────────────────────────────────────────────── */
.acct-hub__tab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--acct-teal) 50%, transparent);
  outline-offset: 3px;
}

/* ── Badge (rank number on the Leaderboard tab) ─────────────── */
.acct-hub__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--acct-teal) 15%, transparent);
  color: var(--acct-teal-deep, #155f52);
  font-family: var(--acct-mono, monospace);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  transition: background .22s ease, color .22s ease;
}
/* On the active tab the badge becomes amber so it stands out on teal */
.acct-hub__tab--active .acct-hub__badge {
  background: var(--acct-amber, #f5a623);
  color: #2b1f00;
}

/* ── Label text ─────────────────────────────────────────────── */
.acct-hub__label {
  min-width: 0;
  /* Allow slight shrink on mid-size screens before hiding */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Small screens: icon-only, label hidden at ≤ 430px ─────── */
@media (max-width: 430px) {
  .acct-hub__strip {
    gap: 4px;
    padding: 5px;
    border-radius: 16px;
  }
  .acct-hub__tab {
    padding: 0 10px;
    gap: 0;
    min-height: 48px;
    border-radius: 11px;
  }
  .acct-hub__label { display: none; }
  .acct-hub__tab svg {
    width: 22px;
    height: 22px;
    opacity: 1;
  }
  .acct-hub__badge { display: none; }
}

/* ── Medium screens: tighten label ─────────────────────────── */
@media (min-width: 431px) and (max-width: 640px) {
  .acct-hub__tab { padding: 0 12px; font-size: .83rem; }
}

/* ── Panels ─────────────────────────────────────────────────── */
.acct-hub__panels { display: contents; }

.acct-hub__panel {
  display: none;
  animation: acct-hub-in .35s var(--acct-ease, ease) both;
}

.acct-hub__panel--active {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

@keyframes acct-hub-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ── Two-column panels (Progress & Profile) ─────────────── */
.acct-hub__panel--progress,
.acct-hub__panel--profile {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .acct-hub__panel--progress,
  .acct-hub__panel--profile {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    align-items: start;
  }
}
.acct-hub__col-main { display: grid; gap: clamp(20px, 3vw, 32px); min-width: 0; }
.acct-hub__col-side { display: grid; gap: clamp(20px, 3vw, 32px); min-width: 0; }

/* ── Leaderboard panel: full width ─────────────────────────── */
.acct-hub__panel--leaderboard {
  grid-template-columns: 1fr;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .acct-hub__panel { animation: none !important; }
  .acct-hub__tab   { transition: none !important; transform: none !important; }
}