/* ==========================================================================
   AVENLEO — UTILITIES + APP SHELL
   ==========================================================================
   Two things: a small set of layout helpers, and the chrome every signed-in
   screen sits inside — sidebar, topbar, page region, bottom bar.

   The shell is the first thing anybody sees and the thing they see on every
   screen after that, so it is where restraint pays the most. Three rules:

     • The chrome is quieter than the content. The sidebar and topbar share the
       page's colour rather than sitting on their own surface, separated by a
       single hairline. Chrome that competes with the screen it frames is the
       fastest way to make an app feel busy.

     • The active navigation item is marked ONCE. It used to have a tinted
       background, coloured text AND a coloured bar down its left edge. One
       signal is a decision; three is a page that could not choose.

     • The bottom bar is a native bar. Fixed height, four labelled targets, a
       real 44px hit area, safe-area inset honoured, and the active item marked
       by weight and colour rather than a pill.
   ========================================================================== */

/* ---- Containers ------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.container--wide  { max-width: var(--container-wide); }
.container--prose { max-width: var(--container-prose); }
@media (max-width: 640px) { .container { padding-inline: var(--space-4); } }

/* ---- Display ---------------------------------------------------------- */
.block { display: block; } .inline-block { display: inline-block; } .hidden { display: none !important; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; }

/* ---- Flex ------------------------------------------------------------- */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; }
.flex-1 { flex: 1 1 0%; } .flex-none { flex: none; } .flex-auto { flex: 1 1 auto; }
.grow { flex-grow: 1; } .shrink-0 { flex-shrink: 0; }

/* ---- Gap -------------------------------------------------------------- */
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .gap-7 { gap: var(--space-7); } .gap-8 { gap: var(--space-8); }

/* ---- Grid ------------------------------------------------------------- */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Spacing ---------------------------------------------------------- */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-inline: auto; }
.p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); }

/* ---- Text ------------------------------------------------------------- */
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
.text-2xs { font-size: var(--text-2xs); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-md { font-size: var(--text-md); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); }
.font-medium { font-weight: var(--weight-medium); } .font-semibold { font-weight: var(--weight-semibold); } .font-bold { font-weight: var(--weight-bold); }
.font-display { font-family: var(--font-display); } .font-mono { font-family: var(--font-mono); }
.text-primary { color: var(--color-primary-fg); } .text-accent { color: var(--color-accent-strong); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } .text-warning { color: var(--color-warning); }
/* Full-contrast text inside a muted paragraph — the figure in a sentence. */
.text-strong { color: var(--color-text); font-weight: var(--weight-medium); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase { text-transform: uppercase; }
.tracking-caps { letter-spacing: var(--tracking-caps); }

/* ---- Misc ------------------------------------------------------------- */
.w-full { width: 100%; } .h-full { height: 100%; }
.relative { position: relative; } .absolute { position: absolute; }
.rounded-full { border-radius: var(--radius-full); }
.pointer { cursor: pointer; }
.no-scroll { overflow: hidden !important; }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* One entrance, used sparingly. Opacity only — a transform here means every
   animated element gets its own compositing layer for the sake of 6px. */
.animate-in { animation: fade-in var(--dur-slow) var(--ease-out) both; }
.animate-in[style*="--d"] { animation-delay: var(--d); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }

/* ------------------------------------------------------------- SIDEBAR --- */
.sidebar {
  align-self: start;
  position: sticky; top: 0; height: 100dvh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  padding: var(--space-3);
  z-index: var(--z-sticky);
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--topbar-h);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
}
/* The level badge rides at the far end of the brand row. Positioned here
   rather than inline on the element, because core/subscription.js rewrites
   that element's class list on every repaint and would drop a utility. */
.sidebar__brand .badge { margin-left: auto; }
.sidebar__nav { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; }
.sidebar__section {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: var(--space-4) var(--space-2) var(--space-1);
}
.sidebar__section:first-child { padding-top: var(--space-1); }

.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  height: 34px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  position: relative;
}
.nav-item .icon { width: 17px; height: 17px; flex: none; color: var(--color-text-faint); transition: color var(--dur-fast) var(--ease-out); }
.nav-item:hover { background: var(--color-surface-2); color: var(--color-text); }
.nav-item:hover .icon { color: var(--color-text-muted); }
/* One signal: the row goes solid and the icon comes with it. No bar, no tint. */
.nav-item[aria-current="page"] { background: var(--color-surface-3); color: var(--color-text); font-weight: var(--weight-semibold); }
.nav-item[aria-current="page"] .icon { color: var(--color-text); }
.nav-item__badge { margin-left: auto; }
.nav-item--danger { color: var(--color-danger); }
.nav-item--danger .icon { color: var(--color-danger); }
.nav-item--danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }

.sidebar__foot { padding-top: var(--space-2); border-top: 1px solid var(--color-border); margin-top: var(--space-2); }

/* Phone-only entries in the drawer — see the media query at the bottom. */
.sidebar [data-nav-mobile] { display: none; }

/* -------------------------------------------------------------- TOPBAR --- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--topbar-h); padding: 0 var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.topbar__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.topbar__spacer { flex: 1; }
.topbar__menu { display: none; }   /* hamburger: tablet and below */

/* The wallet readout in the topbar. Two figures, a hairline between them, no
   panel around it — it is information, not a widget. */
.wallet-chip {
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-3); height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
}
.wallet-chip__block { display: flex; align-items: baseline; gap: 6px; }
.wallet-chip__label { font-size: var(--text-2xs); color: var(--color-text-faint); font-weight: var(--weight-medium); }
.wallet-chip__value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-snug);
}
.wallet-chip__value--earn { color: var(--color-accent-strong); }
.wallet-chip__divider { width: 1px; height: 16px; background: var(--color-border); }

/* ---------------------------------------------------------------- PAGE --- */
.main { display: flex; flex-direction: column; min-width: 0; }
.page { padding: var(--space-6) var(--space-5) var(--space-9); flex: 1; width: 100%; max-width: var(--container-wide); margin-inline: auto; }
.page__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap;
}
.page__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
}
.page__sub { color: var(--color-text-muted); margin-top: 2px; font-size: var(--text-sm); }

/* A card's own title row. */
.card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-title h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}
.card-title__link { font-size: var(--text-xs); color: var(--color-primary-fg); font-weight: var(--weight-medium); }
.card-title__link:hover { text-decoration: underline; }

/* Section rule — a labelled divider between blocks on a long page. */
.section-rule {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-4);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-text-faint);
}
.section-rule::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* ------------------------------------------------------ USER MENU BUTTON --- */
.user-btn {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-2);
  border: 0; background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.user-btn:hover { background: var(--color-surface-2); }
.user-btn__id { min-width: 0; flex: 1; line-height: 1.25; }
.user-btn__name {
  display: block; font-weight: var(--weight-medium); font-size: var(--text-sm);
  color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-btn__handle {
  display: block; font-size: var(--text-2xs); color: var(--color-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------- BOTTOM NAV --- */
.bottom-nav { display: none; }
.sidebar-scrim { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .topbar__menu { display: inline-flex; }
  .sidebar {
    position: fixed; left: 0; top: 0; width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    box-shadow: var(--shadow-xl);
  }
  .sidebar[data-open="true"] { transform: none; }
  .sidebar-scrim {
    display: block; position: fixed; inset: 0;
    z-index: calc(var(--z-sticky) - 1);
    background: var(--color-scrim);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base), visibility var(--dur-base);
  }
  .sidebar-scrim[data-open="true"] { opacity: 1; visibility: visible; }
}

@media (max-width: 640px) {
  .page { padding: var(--space-4) var(--space-4) calc(var(--bottomnav-h) + var(--space-7)); }
  .topbar { padding: 0 var(--space-4); }

  .bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: var(--z-header);
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }
  .bottom-nav__item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    color: var(--color-text-faint);
    font-size: 10px;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    transition: color var(--dur-fast) var(--ease-out);
    /* A real target, whatever the label does. */
    min-height: 44px;
  }
  .bottom-nav__item .icon { width: 20px; height: 20px; }
  .bottom-nav__item:active { color: var(--color-text-muted); }
  .bottom-nav__item[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-semibold); }

  /* The drawer swaps roles on phones: it drops what the bottom bar already
     shows and picks up the account entries in return. */
  .sidebar [data-nav-desktop] { display: none; }
  .sidebar .nav-item[data-nav-mobile] { display: flex; }
  .sidebar .sidebar__section[data-nav-mobile] { display: block; }
}

@media (max-width: 480px) {
  /* The topbar is the tightest row in the product. Compact it before it
     squeezes: the labels go, the figures stay. */
  .topbar .wallet-chip__label { display: none; }
  .topbar .wallet-chip { gap: var(--space-3); padding: 0 var(--space-2); }
  .topbar__title { font-size: var(--text-sm); }
}

/* ---- Responsive safety (all pages) ------------------------------------- */
img, video { max-width: 100%; height: auto; }
.main, .page, .page__header { min-width: 0; }
/* Long crypto strings wrap; they never force the page sideways. */
.address__text, .hash, .addr-box__text { overflow-wrap: anywhere; word-break: break-word; }