/* Application frame
   -------------------------------------------------------------------------- */

:root {
  --layout-modal-max: 36rem;
  --layout-modal-wide-max: 52rem;
  --layout-grid-min: 17rem;
  --layout-active-indicator: var(--border-width-strong);
  --layout-safe-area-top: env(safe-area-inset-top, 0px);
  --layout-safe-area-right: env(safe-area-inset-right, 0px);
  --layout-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --layout-safe-area-left: env(safe-area-inset-left, 0px);
  --layout-topbar-block-size: calc(var(--layout-header-height) + var(--layout-safe-area-top));
  --layout-mobile-nav-block-size: calc(var(--layout-mobile-nav-height) + var(--layout-safe-area-bottom));
  --layout-tooltip-safe-top: var(--layout-topbar-block-size);
  --layout-tooltip-safe-right: var(--layout-safe-area-right);
  --layout-tooltip-safe-bottom: var(--layout-safe-area-bottom);
  --layout-tooltip-safe-left: var(--layout-safe-area-left);
  --layout-sticky-offset: calc(var(--layout-topbar-block-size) + var(--space-6));
}

.app-shell {
  min-block-size: 100dvh;
  padding-inline-start: var(--layout-sidebar-width);
  overflow-x: clip;
  color: var(--color-text);
  background: var(--gradient-page);
  isolation: isolate;
}

.app-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-inline-size: 0;
  min-block-size: 100dvh;
}

/* Desktop rail
   -------------------------------------------------------------------------- */

.sidebar {
  position: fixed;
  z-index: var(--z-sticky);
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  inline-size: var(--layout-sidebar-width);
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  background: #000000;
  border-inline-end: var(--border-strong);
}

/* Insights owns the persistent route rail. Keep the primary application
   navigation available as a modal drawer instead of stacking two rails. */
.app-shell[data-shell-section="insights"] {
  padding-inline-start: var(--space-0);
  background: var(--color-bg);
}

.app-shell[data-shell-section="insights"] .sidebar {
  z-index: var(--z-modal);
  inline-size: min(calc(var(--layout-sidebar-width) + var(--space-12)), calc(100vw - var(--space-12)));
  max-inline-size: calc(100vw - var(--space-12));
  visibility: hidden;
  box-shadow: var(--shadow-lg);
  transform: translate3d(-100%, 0, 0);
  transition:
    transform var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

.app-shell[data-shell-section="insights"] .sidebar.is-open,
.app-shell[data-shell-section="insights"][data-mobile-open="true"] .sidebar {
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.app-shell[data-shell-section="insights"] :is(.mobile-menu-toggle, .sidebar-close) {
  display: inline-grid;
}

.app-shell[data-shell-section="insights"] .sidebar-close {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-4);
}

.app-shell[data-shell-section="insights"] .sidebar__brand {
  padding-inline-end: calc(var(--size-touch-min) + var(--space-6));
}

.app-shell[data-shell-section="insights"] .mobile-nav__link {
  font-size: var(--text-xs);
}

.sidebar::after {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: var(--layout-active-indicator);
  pointer-events: none;
  content: "";
  background: var(--color-highlight);
  opacity: var(--opacity-muted);
}

.sidebar__brand {
  flex: none;
  padding: var(--space-10) var(--space-6) var(--space-8);
}

.sidebar__brand-link,
.brand-lockup {
  display: flex;
  align-items: center;
  min-block-size: var(--size-touch-min);
  color: var(--color-text);
  text-decoration: none;
}

.sidebar__brand-link {
  border-radius: var(--radius-md);
}

.brand-lockup {
  min-inline-size: 0;
  gap: var(--space-3);
}

.stockyield-mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--size-icon-xl);
  block-size: var(--size-icon-xl);
  color: var(--color-accent);
}

.stockyield-mark > svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.brand-copy {
  min-inline-size: 0;
}

.brand-name,
.brand-tagline {
  display: block;
}

.brand-name {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
}

.brand-tagline {
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.sidebar__nav {
  flex: 1 1 auto;
  min-block-size: 0;
  padding: var(--space-2) var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

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

.nav-item {
  min-inline-size: 0;
}

.sidebar .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: var(--size-control-md);
  padding-inline: var(--space-4);
  gap: var(--space-3);
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  text-decoration: none;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.sidebar .nav-link::before {
  display: none;
}

.sidebar .nav-link:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  background: transparent;
}

.sidebar .nav-link.is-active,
.sidebar .nav-link[aria-current="page"] {
  color: var(--color-text);
  border-color: transparent;
  border-inline-start-color: var(--color-text);
  border-radius: var(--space-0);
  background: transparent;
  box-shadow: none;
}

.sidebar .nav-link.is-active::before,
.sidebar .nav-link[aria-current="page"]::before {
  opacity: 1;
  transform: scaleY(1);
}

.nav-link__icon {
  display: inline-grid;
  flex: none;
  inline-size: var(--size-icon-lg);
  block-size: var(--size-icon-lg);
  place-items: center;
}

.nav-link__icon svg {
  inline-size: 100%;
  block-size: 100%;
}

.nav-link__label {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.sidebar__footer {
  flex: none;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-block-start: var(--border-subtle);
}



/* Top bar and page viewport
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  z-index: var(--z-header);
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-inline-size: 0;
  min-block-size: var(--layout-topbar-block-size);
  padding-block-start: var(--layout-safe-area-top);
  padding-inline:
    max(var(--layout-page-gutter), var(--layout-safe-area-left))
    max(var(--layout-page-gutter), var(--layout-safe-area-right));
  gap: var(--space-6);
  background: rgb(0 0 0 / 0.9);
  border-block-end: var(--border-default);
  backdrop-filter: blur(var(--blur-glass));
}

.topbar__left,
.topbar__actions {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  gap: var(--space-3);
}

.topbar__left {
  flex: 1 1 auto;
}

.topbar__actions {
  flex: none;
  justify-content: flex-end;
}

.topbar__title {
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-none);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar__status {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-touch-min);
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-none);
}


.topbar__wallet {
  flex: none;
}

.mobile-menu-toggle,
.sidebar-close {
  display: none;
  inline-size: var(--size-touch-min);
  min-inline-size: var(--size-touch-min);
  block-size: var(--size-touch-min);
  padding: 0;
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  place-items: center;
}

.mobile-menu-toggle:hover,
.sidebar-close:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}

.page-main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: calc(100dvh - var(--layout-topbar-block-size));
}

.page-content {
  flex: 1 0 auto;
  inline-size: 100%;
  max-inline-size: var(--layout-content-max);
  padding: var(--space-6) var(--layout-page-gutter) var(--space-16);
  margin-inline: auto;
}

.page-content--wide {
  max-inline-size: none;
}

/*
 * Full-width pages opt out at the frame boundary rather than compensating with
 * viewport math or negative gutters. The page and each major direct section
 * fill the app frame; readable copy remains bounded by its own inner rules.
 */
.page-content:has(> [data-page-width="full"]) {
  max-inline-size: none;
  margin-inline: 0;
}

.page-content > [data-page-width="full"],
.page-content > [data-page-width="full"] > * {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.page-content--reading {
  max-inline-size: calc(var(--layout-readable-max) + (var(--layout-page-gutter) * 2));
}

.page-content [id] {
  scroll-margin-block-start: var(--layout-sticky-offset);
}

/* Breadcrumbs and reusable header bands
   -------------------------------------------------------------------------- */

.breadcrumb,
.breadcrumbs,
.breadcrumb-row,
.detail-breadcrumb {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  min-block-size: var(--size-touch-min);
  margin-block-end: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-none);
}

.breadcrumb ol,
.breadcrumb ul,
.breadcrumbs ol,
.breadcrumbs ul {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
}

.breadcrumb li,
.breadcrumbs li {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.breadcrumb li + li::before,
.breadcrumbs li + li::before {
  flex: none;
  margin-inline: var(--space-2);
  color: var(--color-border-strong);
  content: "/";
}

.breadcrumb a,
.breadcrumbs a,
.breadcrumb-row a,
.detail-breadcrumb a {
  overflow: hidden;
  color: var(--color-text-secondary);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb a:hover,
.breadcrumbs a:hover,
.breadcrumb-row a:hover,
.detail-breadcrumb a:hover {
  color: var(--color-text);
}

.breadcrumb__current,
.breadcrumbs [aria-current="page"],
.detail-breadcrumb [aria-current="page"] {
  overflow: hidden;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb__separator,
.detail-breadcrumb > [aria-hidden="true"] {
  flex: none;
  margin-inline: var(--space-2);
  color: var(--color-border-strong);
}

.page-header,
.header-band {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-inline-size: 0;
  margin-block-end: var(--space-8);
  gap: var(--space-8);
}

.page-header__content,
.header-band__content {
  min-inline-size: 0;
  max-inline-size: var(--layout-readable-max);
}

.page-header__actions,
.header-band__actions {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  min-block-size: var(--size-touch-min);
  gap: var(--space-3);
}

.page-header h1,
.header-band h1 {
  text-wrap: balance;
}

/* Shared page grids
   -------------------------------------------------------------------------- */

.content-grid,
.page-grid,
.split-grid,
.auto-grid,
.sidebar-layout {
  display: grid;
  min-inline-size: 0;
  gap: var(--space-6);
}

.content-grid > *,
.page-grid > *,
.split-grid > *,
.auto-grid > *,
.sidebar-layout > * {
  min-inline-size: 0;
}

.content-grid--dense,
.page-grid--dense {
  gap: var(--space-4);
}

.content-grid--spacious,
.page-grid--spacious {
  gap: var(--space-8);
}

.content-grid--2,
.split-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.auto-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--layout-grid-min)), 1fr)
  );
}

.page-grid--aside,
.sidebar-layout {
  grid-template-columns: minmax(0, 1fr) minmax(var(--layout-grid-min), 24rem);
  align-items: start;
  gap: var(--space-10);
}

.page-grid--aside-reverse {
  grid-template-columns: minmax(var(--layout-grid-min), 24rem) minmax(0, 1fr);
}

.grid-full {
  grid-column: 1 / -1;
}

/* Disclosure footer
   -------------------------------------------------------------------------- */

.site-disclosure {
  display: block;
  inline-size: 100%;
  padding-block: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  border-block-start: var(--border-subtle);
}

.site-disclosure p {
  margin: 0;
}

.site-disclosure p + p {
  margin-block-start: var(--space-3);
}

.site-disclosure a {
  color: var(--color-text-secondary);
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: var(--space-1);
  transition:
    color var(--duration-fast) var(--ease-out),
    text-decoration-color var(--duration-fast) var(--ease-out);
}

.site-disclosure a:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
}

.site-disclosure__inner {
  display: flex;
  justify-content: space-between;
  max-inline-size: var(--layout-content-max);
  padding-inline: var(--layout-page-gutter);
  margin-inline: auto;
  gap: var(--space-8);
}

.site-disclosure__legal {
  max-inline-size: var(--layout-readable-max);
}

.site-disclosure__links {
  display: flex;
  flex: none;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.sidebar .site-disclosure {
  padding-block: var(--space-4) 0;
}

.sidebar .site-disclosure__inner {
  display: block;
  padding: 0;
}

/* Mobile navigation and drawer overlay
   -------------------------------------------------------------------------- */

.mobile-nav {
  display: none;
}

.sidebar-backdrop {
  position: fixed;
  z-index: var(--z-overlay);
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  cursor: pointer;
  background: var(--color-backdrop);
  border: 0;
  backdrop-filter: blur(var(--space-1));
  animation: layout-backdrop-in var(--duration-base) var(--ease-out) both;
}

.sidebar-backdrop[hidden] {
  display: none;
}

/* Modal and overlay shells
   -------------------------------------------------------------------------- */

.modal-root:empty {
  display: none;
}

.modal-backdrop,
.trade-review-backdrop,
.app-overlay {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-backdrop);
  backdrop-filter: blur(var(--space-2));
  animation: layout-backdrop-in var(--duration-base) var(--ease-out) both;
}

.modal-backdrop[hidden],
.trade-review-backdrop[hidden],
.app-overlay[hidden] {
  display: none;
}

.modal,
.trade-review-modal {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  inline-size: min(100%, var(--layout-modal-max));
  max-block-size: calc(100dvh - (var(--space-6) * 2));
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: layout-modal-in var(--duration-base) var(--ease-out) both;
}

.modal--wide {
  inline-size: min(100%, var(--layout-modal-wide-max));
}

.modal__header,
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-inline-size: 0;
  padding: var(--space-6);
  gap: var(--space-5);
  border-block-end: var(--border-subtle);
}

.modal__heading,
.modal-heading {
  min-inline-size: 0;
}

.modal__title,
.modal-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.modal__subtitle,
.modal-subtitle {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.modal__body,
.modal-body {
  min-block-size: 0;
  padding: var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.modal__footer,
.modal-footer,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-5) var(--space-6) var(--space-6);
  gap: var(--space-3);
  background: var(--color-surface);
  border-block-start: var(--border-subtle);
}

.modal__close,
.modal-close {
  display: inline-grid;
  flex: none;
  inline-size: var(--size-touch-min);
  min-inline-size: var(--size-touch-min);
  block-size: var(--size-touch-min);
  padding: 0;
  color: var(--color-text-secondary);
  cursor: pointer;
  background: transparent;
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  place-items: center;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.modal__close:hover,
.modal-close:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}

body.has-modal,
body:has([data-page="insights"][data-drawer-open="true"]),
html:has(.modal-backdrop:not([hidden])),
html:has(.trade-review-backdrop),
html:has(.app-shell[data-mobile-open="true"]),
html:has([data-page="insights"][data-drawer-open="true"]) {
  overflow: hidden;
}

/* Shared interactive focus treatment for frame controls. */
.sidebar__brand-link:focus-visible,
.sidebar .nav-link:focus-visible,
.sidebar-close:focus-visible,
.mobile-nav__link:focus-visible,
.mobile-menu-toggle:focus-visible,
.modal__close:focus-visible,
.modal-close:focus-visible,
.breadcrumb a:focus-visible,
.breadcrumbs a:focus-visible,
.breadcrumb-row a:focus-visible,
.detail-breadcrumb a:focus-visible,
.site-disclosure a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

@keyframes layout-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes layout-modal-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Structural breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 79.9375rem) {
  :root {
    --layout-page-gutter: var(--space-8);
  }

  .content-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .app-shell[data-shell-section="insights"] .page-content {
    padding-inline: var(--space-0);
  }

  .app-shell[data-shell-section="insights"] .page-main {
    padding-block-end: var(--space-0);
  }

  .app-shell[data-shell-section="insights"] .mobile-nav {
    display: none;
  }
}

@media (min-width: 64rem) and (max-width: 64rem) {
  .app-shell[data-shell-section="insights"] .mobile-menu-toggle {
    display: none;
  }
}

@media (min-width: 64.0625rem) {
  .app-shell:not([data-shell-section="insights"]) .sidebar-backdrop {
    display: none;
  }
}


@media (max-width: 64rem) {
  :root {
    --layout-page-gutter: var(--space-6);
    --layout-sticky-offset: calc(var(--layout-topbar-block-size) + var(--space-4));
    --layout-tooltip-safe-bottom: var(--layout-mobile-nav-block-size);
  }

  .app-shell {
    padding-inline-start: 0;
  }

  .sidebar {
    z-index: var(--z-modal);
    inline-size: min(calc(var(--layout-sidebar-width) + var(--space-12)), calc(100vw - var(--space-12)));
    max-inline-size: calc(100vw - var(--space-12));
    visibility: hidden;
    box-shadow: var(--shadow-lg);
    transform: translate3d(-100%, 0, 0);
    transition:
      transform var(--duration-base) var(--ease-out),
      visibility 0s linear var(--duration-base);
  }

  .sidebar.is-open,
  .app-shell[data-mobile-open="true"] .sidebar {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .mobile-menu-toggle,
  .sidebar-close {
    display: inline-grid;
  }
  .sidebar-close {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-4);
  }
  .sidebar__brand {
    padding-inline-end: calc(var(--size-touch-min) + var(--space-6));
  }

  .page-main {
    padding-block-end: var(--layout-mobile-nav-block-size);
  }

  .mobile-nav {
    position: fixed;
    z-index: var(--z-header);
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    min-block-size: var(--layout-mobile-nav-block-size);
    padding:
      var(--space-2)
      max(var(--space-3), var(--layout-safe-area-right))
      calc(var(--space-2) + var(--layout-safe-area-bottom))
      max(var(--space-3), var(--layout-safe-area-left));
    background: var(--color-surface-glass);
    border-block-start: var(--border-subtle);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(var(--blur-glass));
  }

  .mobile-nav__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    min-inline-size: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .mobile-nav__item {
    min-inline-size: 0;
  }

  .mobile-nav__link {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    min-inline-size: 0;
    min-block-size: var(--size-touch-min);
    padding: var(--space-2) var(--space-1);
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    text-align: center;
    text-decoration: none;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    transition:
      color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out);
  }

  .mobile-nav__link:hover {
    color: var(--color-text-secondary);
    background: var(--color-surface-hover);
  }

  .mobile-nav__link.is-active,
  .mobile-nav__link[aria-current="page"] {
    border-color: #ffffff;
    background: #ffffff;
    color: #000000;
  }

  .mobile-nav__icon,
  .mobile-nav__link .nav-link__icon {
    display: inline-grid;
    inline-size: var(--size-icon-lg);
    block-size: var(--size-icon-lg);
    place-items: center;
  }
  .mobile-nav__icon svg {
    inline-size: 100%;
    block-size: 100%;
  }
  .mobile-nav__label {
    max-inline-size: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .page-grid--aside,
  .page-grid--aside-reverse,
  .sidebar-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 22.5rem) {
  .mobile-nav {
    padding-inline: var(--layout-safe-area-left) var(--layout-safe-area-right);
  }

  .mobile-nav__link {
    padding-inline: var(--space-0);
    font-size: var(--text-2xs);
    letter-spacing: -0.01em;
  }
}

@media (min-width: 64rem) {
  :root {
    --layout-tooltip-safe-bottom: var(--layout-safe-area-bottom);
  }
}

@media (max-width: 47.9375rem) {
  :root {
    --layout-page-gutter: var(--space-4);
  }

  .topbar {
    gap: var(--space-3);
  }

  .topbar__actions {
    gap: var(--space-2);
  }

  .topbar__status {
    display: none;
  }

  .page-content {
    padding-block: var(--space-6) var(--space-12);
  }

  .page-header,
  .header-band {
    align-items: flex-start;
    flex-direction: column;
    margin-block-end: var(--space-6);
    gap: var(--space-4);
  }

  .page-header__actions,
  .header-band__actions {
    flex-wrap: wrap;
    inline-size: 100%;
    justify-content: flex-start;
  }

  .content-grid--2,
  .content-grid--3,
  .content-grid--4,
  .split-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-disclosure__inner {
    flex-direction: column;
    gap: var(--space-4);
  }

  .site-disclosure__links {
    inline-size: 100%;
  }

  .modal-backdrop,
  .trade-review-backdrop,
  .app-overlay {
    align-items: end;
    padding: 0;
  }

  .modal,
  .trade-review-modal {
    inline-size: 100%;
    max-block-size: calc(100dvh - var(--space-4));
    border-inline: 0;
    border-block-end: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .modal__header,
  .modal-header,
  .modal__body,
  .modal-body {
    padding: var(--space-5);
  }

  .modal__footer,
  .modal-footer,
  .modal-actions {
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  .modal__footer > *,
  .modal-footer > *,
  .modal-actions > * {
    flex: 1 1 auto;
  }
}

@media (max-width: 29.9375rem) {
  .topbar .wallet-details,
  .topbar .wallet-avatar {
    display: none;
  }

  .topbar__title {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar .nav-link,
  .sidebar .nav-link::before,
  .mobile-nav__link,
  .modal__close,
  .modal-close,
  .breadcrumb a,
  .breadcrumbs a,
  .breadcrumb-row a,
  .detail-breadcrumb a,
  .site-disclosure a {
    transition-duration: 0.01ms;
  }

  .sidebar {
    transition-delay: 0s;
  }

  .sidebar-backdrop,
  .modal-backdrop,
  .trade-review-backdrop,
  .app-overlay,
  .modal,
  .trade-review-modal {
    animation: none;
  }
}