/* BUILD-MARKER: docs-mobile-reflow */
/* ============================================================
   RESPONSIVE / MOBILE LAYER
   Mobile-only adaptations. Loaded last (layer "responsive") so
   these rules win the cascade without touching desktop styles.
   Desktop (>980px) is intentionally left untouched: every rule
   here lives inside a max-width media query, except the
   .nav-toggle / .mobile-nav base styles which are hidden by
   default and only revealed on mobile.
   ============================================================ */

/* ── Hamburger toggle (hidden on desktop) ─────────────────── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(230, 236, 245, 0.92);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-toggle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(111, 195, 255, 0.5);
}

/* ── Mobile drawer (hidden until JS/media query reveals it) ── */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 12, 0.6);
  backdrop-filter: blur(2px);
  animation: mobile-nav-fade 0.18s ease;
}

.mobile-nav__panel {
  position: relative;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(82vw, 320px);
  height: 100%;
  padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
  background: rgba(12, 17, 28, 0.99);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  animation: mobile-nav-slide 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes mobile-nav-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mobile-nav-slide {
  from { transform: translateX(16px); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mobile-nav__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(230, 236, 245, 0.78);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-nav__close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.mobile-nav__close:focus-visible,
.mobile-nav__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(111, 195, 255, 0.5);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  color: rgba(230, 236, 245, 0.88);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: transparent;
  border: 1px solid transparent;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.mobile-nav__link:hover {
  color: #ffffff;
  background: rgba(111, 195, 255, 0.1);
}

.mobile-nav__link.is-active {
  color: #ffffff;
  background: rgba(111, 195, 255, 0.14);
  border-color: rgba(111, 195, 255, 0.3);
}

.mobile-nav__link--sub {
  min-height: 40px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(165, 172, 188, 0.85);
}

.mobile-nav__link--upgrade {
  color: rgba(251, 191, 36, 0.85);
}

.mobile-nav__link--upgrade.is-active {
  color: rgba(251, 191, 36, 0.95);
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
}

.mobile-nav__link--logout {
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: rgba(255, 138, 138, 0.92);
}

.mobile-nav__link--logout:hover {
  background: rgba(255, 122, 122, 0.1);
  color: #ff9c9c;
}

.mobile-nav__divider {
  height: 1px;
  margin: 8px 6px;
  background: rgba(255, 255, 255, 0.07);
}

.mobile-nav__logout-form {
  margin: 0;
}

/* Truncated wallet address — desktop shows the full .account-address;
   the short form is revealed only on phones (≤640px). */
.account-address-short {
  display: none;
}

/* ============================================================
   ≤980px — reveal hamburger + drawer, slim the top bar down to
   [hamburger] [logo] [notifications]. The desktop nav is already
   hidden at this width (layout.css); we move Settings + Logout
   into the drawer to honour the mobile top-bar requirement.
   ============================================================ */
@media (max-width: 980px) {
  /* Stop any wide element (chart cards, DeFi tables, etc.) from bleeding past
     the viewport — most noticeable in landscape, where the width lands between
     the desktop layout and the phone breakpoints. */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* ── Notifications menu ─────────────────────────────────────
     The bell is in the mobile top bar from ≤980 (where the hamburger takes
     over). Anchoring the menu to it with the desktop absolute position pushes
     it past the screen edge, so pin it to the viewport instead. */
  .notifications-menu {
    position: fixed;
    top: 64px;
    right: 10px;
    left: auto;
    /* border-box so the 12px padding + 1px border are inside the width — else
       the menu's true width exceeds 100vw-20 and spills past the left edge. */
    box-sizing: border-box;
    width: min(360px, calc(100vw - 20px));
  }

  .notifications-menu::before {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Mobile top bar order: logo (left) · notifications (right) · menu.
     Reorder the flex children; the desktop DOM order is untouched. */
  .header .logo {
    order: 1;
    flex: 0 1 auto;
  }

  .header .header-right {
    order: 2;
  }

  .nav-toggle {
    order: 3;
    margin: 0 -6px 0 2px;
  }

  /* Settings + Logout live in the drawer on mobile.
     The logout <form> carries an inline `display:flex`, so we need
     !important to override it. */
  .header-right .btn-settings,
  .header-right form,
  .header-right .header-action-divider {
    display: none !important;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ============================================================
   ≤768px — phone / small-tablet content safeguards.
   Targeted, additive fixes to prevent horizontal overflow and
   keep things tappable. Avoids touching desktop layout.
   ============================================================ */
@media (max-width: 768px) {
  /* Media should never push the page wider than the viewport. */
  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  /* Tighter page gutters on phones. */
  .page-container {
    padding: 12px;
  }

  /* Portfolio: the per-wallet "prices refreshed" note is noise on a
     phone — hide it (the data itself is unchanged). */
  .account-refresh-message {
    display: none;
  }

  /* Portfolio chart header: keep the value, drop the "Total:" label. */
  .portfolio-total-label {
    display: none;
  }

  /* Keep the total at its full desktop size for normal balances; only very
     large ones (>50M, flagged with .is-huge by JS) get clipped, so scale just
     those down — but only moderately, so the total stays clearly larger than
     the per-wallet totals and the 24h change beneath it. */
  .portfolio-total-value { white-space: nowrap; }
  .portfolio-total-value.is-huge { font-size: 24px; }
  .portfolio-overlay-top:has(.portfolio-total-value.is-huge) {
    gap: 10px;
  }
  .portfolio-overlay-top:has(.portfolio-total-value.is-huge) .portfolio-title {
    font-size: 28px;
  }
}

/* ============================================================
   ≤480px — small phones. Final overflow guard + readability.
   ============================================================ */
@media (max-width: 480px) {
  .page-container {
    padding: 10px;
  }

  /* Narrowest phones: tighten the huge-balance case a touch more (still
     larger than the per-wallet totals below). */
  .portfolio-total-value.is-huge { font-size: 21px; }
  .portfolio-overlay-top:has(.portfolio-total-value.is-huge) .portfolio-title {
    font-size: 23px;
  }

  /* Header logo a touch smaller so the 3-item bar never wraps. */
  .header .logo-img {
    height: 26px;
  }

  /* Keep the top bar gutters modest at the narrowest widths. */
  .header .container {
    gap: 10px;
    padding: 0 12px;
  }
}

/* ============================================================
   ≤640px — phone-specific component fixes for dense pages.
   ============================================================ */
@media (max-width: 640px) {
  /* NOTE: Overview "Top Holdings" + hero chart mobile rules live in
     overview.css, not here — overview.css is an unlayered <link> and
     beats this layered stylesheet. See overview.css ≤640px block. */

  /* ── Settings segmented controls ────────────────────────────
     inline-flex + min-width:64px segments overflow the card edge
     when there are several options. Let them wrap and share width. */
  .settings-segmented {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .settings-segment {
    flex: 1 1 auto;
    min-width: 56px;
  }

  /* ── Discovery market table → grid card rows ────────────────
     A fixed-width <table> can't both fit a phone AND reorder columns. Each row
     becomes a 4-column grid (Rank · Coin · 24h · Price) so the coin name always
     keeps the leftover space — a flex row collapsed it to zero width, which is
     what pushed the % on top of the icon. Headers stay visible and share the
     same grid so the labels line up over the values. Column index of 24h
     differs by category:
       Coins:    1=Rank 2=Coin 3=Price 4=1h 5=24h 6=7d 7=Vol 8=MCap 9=Spark
       Ordinals: 1=Rank 2=Coin 3=Price 4=24h 5=7d 6=30d 7=Vol 8=MCap 9=Spark */
  .discovery-table-shell {
    overflow-x: hidden;
    /* border-box so width:100% includes the padding — otherwise the card is
       100% + 20px and spills past the right edge. */
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }

  .discovery-table { min-width: 0; display: block; width: 100%; }
  .discovery-table thead,
  .discovery-table tbody { display: block; }

  /* Fixed column widths (not auto): each <tr> is its own grid, so only fixed
     tracks line up vertically across rows AND under the headers. */
  .discovery-table tr {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 54px 90px;
    align-items: center;
    gap: 4px 5px;
  }

  .discovery-table th,
  .discovery-table td {
    display: block;
    border: none;
    padding: 8px 2px;
    min-width: 0;
  }
  .discovery-table thead th {
    padding: 2px 2px 6px;
    font-size: 11px;
    background: transparent;
    border-bottom: 0;
  }
  /* Continuous header bar: paint the header ROW (which fills behind the grid
     gaps too) instead of the individual cells, so the gaps don't break it up. */
  .discovery-table thead tr {
    background: rgba(12, 17, 27, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  }

  .discovery-table .discovery-rank-col {
    order: 0;
    width: auto;   /* desktop pins this to 64px, which inflated the grid track */
    text-align: left;
    color: rgba(230, 236, 245, 0.5);
    font-size: 12px;
    white-space: nowrap;
  }
  /* Shrink the "Rank" header (and drop its sort arrow) so the auto-sized rank
     column hugs the number instead of inflating to the header width — that
     header width was the big empty gap between "#1" and the coin icon. */
  .discovery-table thead .discovery-rank-col .discovery-sort-btn {
    font-size: 10px;
  }
  .discovery-table thead .discovery-rank-col .discovery-sort-indicator {
    display: none;
  }

  .discovery-table tr > :nth-child(2) {   /* coin */
    order: 1;
    min-width: 0;
  }

  .discovery-coin { min-width: 0; width: 90%; }
  .discovery-coin-text { min-width: 0; }
  .discovery-coin-text strong,
  .discovery-coin-text small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Right-side numeric cells (and their headers) align right. */
  .discovery-table td.is-numeric,
  .discovery-table th.is-numeric { text-align: right; }

  /* Coins: show 24h(5) + price(3); hide 1h(4), 7d/Vol/MCap/Spark(6-9). */
  .discovery-table--coins tr > :nth-child(4),
  .discovery-table--coins tr > :nth-child(n+6) { display: none; }
  .discovery-table--coins tr > :nth-child(5) { order: 2; }   /* 24h */
  .discovery-table--coins tr > :nth-child(3) { order: 3; }   /* price */

  /* Ordinals: show 24h(4) + price(3); hide 7d/30d/Vol/MCap/Spark(5-9). */
  .discovery-table--ordinals tr > :nth-child(n+5) { display: none; }
  .discovery-table--ordinals tr > :nth-child(4) { order: 2; }   /* 24h */
  .discovery-table--ordinals tr > :nth-child(3) { order: 3; }   /* price */

  /* ── Portfolio: wallet header ───────────────────────────────
     Show a truncated address (0x1234…ABCD) instead of the full one;
     the full address is still copyable via the button. */
  /* Show the FULL address on its own row under the name, drop the "-", and
     indent it to line up with where the wallet name starts (past the copy
     button). The short form isn't used in this layout. */
  .account-card { overflow: visible; }
  .account-summary-left { flex-wrap: wrap; overflow: visible; }
  .account-summary-left .account-sep { display: none; }
  .account-summary-left .account-address-short { display: none !important; }
  .account-summary-left .account-address {
    display: block !important;
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 1px;
    padding-left: 27px;
    font-size: 11px;
    font-weight: 400;
    color: rgba(230, 236, 245, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── In-wallet tables → full-width flex rows ────────────────
     The <table> renders shrink-to-fit on phones no matter how widths are
     pinned, so every in-wallet table (assets, dust, collectibles, ordinals,
     runes, brc-20) becomes flex rows. Header row is kept so labels stay.
       Assets:       1=Token 2=Chain 3=Price 4=Amount 5=Total value
       Collectibles: 1=NFT   2=Collection 3=Floor 4=Total value
       Ordinals:     1=Ordinal 2=Collection 3=Floor 4=Total value
       Runes:        1=Rune 2=Price 3=Amount
       BRC-20:       1=Asset 2=Price 3=Available 4=Transferable            */
  .asset-table,
  .asset-table thead,
  .asset-table tbody {
    display: block;
    width: 100%;
  }

  .asset-table tr {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  /* Collapsed NFT-group children / "show more" rows use the [hidden] attribute;
     our flex rule above would otherwise force them visible. */
  .asset-table tr[hidden] {
    display: none;
  }

  .asset-table th,
  .asset-table td {
    display: block;
    min-width: 0;
    padding: 9px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* First column grows in every variant; numeric columns hug the right. */
  .asset-table th:first-child,
  .asset-table td:first-child { flex: 1 1 auto; }

  /* Assets: Token (grow) · Chain icon · [Price hidden] · Amount · Value */
  .asset-table:not(.bitcoin-meta-table) .chain-cell {
    flex: 0 0 28px;
    display: flex;
    justify-content: center;
    overflow: visible;
  }
  .asset-table:not(.bitcoin-meta-table) th:nth-child(2) {
    flex: 0 0 28px;
    font-size: 0;  /* hide the cramped "Chain" label over the icon column */
  }
  .asset-table:not(.bitcoin-meta-table) .chain-cell .chain-name { display: none; }
  .asset-table:not(.bitcoin-meta-table) .price-cell,
  .asset-table:not(.bitcoin-meta-table) th:nth-child(3) { display: none; }
  .asset-table:not(.bitcoin-meta-table) .amount-cell,
  .asset-table:not(.bitcoin-meta-table) th:nth-child(4) { flex: 0 0 20%; text-align: right; }
  .asset-table:not(.bitcoin-meta-table) .usd-cell,
  .asset-table:not(.bitcoin-meta-table) th:nth-child(5) { flex: 0 0 21%; text-align: right; }

  /* Collectibles + Ordinals: keep col 1 + Total value(4); hide Collection + Floor */
  .bitcoin-meta-table--collectibles th:nth-child(2),
  .bitcoin-meta-table--collectibles td:nth-child(2),
  .bitcoin-meta-table--collectibles th:nth-child(3),
  .bitcoin-meta-table--collectibles td:nth-child(3),
  .bitcoin-meta-table--btc-ordinals th:nth-child(2),
  .bitcoin-meta-table--btc-ordinals td:nth-child(2),
  .bitcoin-meta-table--btc-ordinals th:nth-child(3),
  .bitcoin-meta-table--btc-ordinals td:nth-child(3) { display: none; }
  .bitcoin-meta-table--collectibles th:nth-child(4),
  .bitcoin-meta-table--collectibles td:nth-child(4),
  .bitcoin-meta-table--btc-ordinals th:nth-child(4),
  .bitcoin-meta-table--btc-ordinals td:nth-child(4) { flex: 0 0 40%; text-align: right; }

  /* Runes (Rune · Price · Amount · Total Value): hide Price, keep the rest. */
  .bitcoin-meta-table--runes th:nth-child(2),
  .bitcoin-meta-table--runes td:nth-child(2) { display: none; }
  .bitcoin-meta-table--runes th:nth-child(3),
  .bitcoin-meta-table--runes td:nth-child(3),
  .bitcoin-meta-table--runes th:nth-child(4),
  .bitcoin-meta-table--runes td:nth-child(4) { flex: 0 0 30%; text-align: right; }

  /* BRC-20 (Asset · Price · Available · Transferable · Total Value):
     hide Price + Transferable; keep Asset · Available · Total Value. */
  .bitcoin-meta-table--brc20 th:nth-child(2),
  .bitcoin-meta-table--brc20 td:nth-child(2),
  .bitcoin-meta-table--brc20 th:nth-child(4),
  .bitcoin-meta-table--brc20 td:nth-child(4) { display: none; }
  .bitcoin-meta-table--brc20 th:nth-child(3),
  .bitcoin-meta-table--brc20 td:nth-child(3),
  .bitcoin-meta-table--brc20 th:nth-child(5),
  .bitcoin-meta-table--brc20 td:nth-child(5) { flex: 0 0 30%; text-align: right; }

  /* One continuous divider under the header row (per-cell borders left a
     notch where the short chain header sits). */
  .asset-table thead th { border-bottom: none; }
  .asset-table thead tr { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

  .asset-table th,
  .asset-table td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .asset-table {
    font-size: 13px;
  }
}

/* ============================================================
   ≤980px — in-wallet DeFi detail. The phone breakpoint (≤640)
   reflows these, but at landscape / small-tablet widths the
   desktop DeFi grids overflow the wallet card. Apply the same
   compact flex treatment all the way up to where the desktop nav
   takes over (980), so DeFi blocks never bleed past the card.
   (Asset/collectible tables fit at these widths, so they stay
   on the ≤640 phone breakpoint and keep the desktop table.)
   ============================================================ */
@media (max-width: 980px) {
  /* ── Portfolio: DeFi positions must not exceed the card width ─
     The LP/lending grid variants (e.g. .defi-position-line-lp--with-status)
     have higher specificity than the existing ≤900px collapse rule, so they
     never collapsed and ran past the card edge. This `responsive` layer wins
     by layer order — stack every position line into one readable column. */
  .defi-groups,
  .defi-block {
    max-width: 100%;
    min-width: 0;
  }

  /* LP positions ONLY: turn each line into a simple flex row (identity left,
     total right) and hide the cramped breakdown cells. Lending/staking lines
     keep their grid so their data stays aligned under the column headers. */
  /* LP: FLEXBOX (not grid — the grid-template-columns gets overridden by the
     ≤720 collapse). Pair name + total on row 1; status badge on row 2 right. */
  .defi-position-line-lp {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 2px 10px;
  }
  .defi-position-line-lp.defi-position-head { display: none !important; }
  .defi-position-line-lp .defi-lp-col-position {
    order: 0;
    flex: 1 1 0 !important;
    min-width: 0;
    text-align: left;
  }
  .defi-position-line-lp .defi-lp-col-total {
    order: 1;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    text-align: right;
  }
  /* Range badge ("In range" / "Out of range") is hidden on mobile. */
  .defi-position-line-lp .defi-lp-col-status,
  .defi-position-line-lp .defi-lp-col-range {
    display: none !important;
  }
  .defi-position-line-lp .defi-lp-col-split,
  .defi-position-line-lp .defi-lp-col-weight,
  .defi-position-line-lp .defi-lp-col-apy,
  .defi-position-line-lp .defi-lp-col-rewards {
    display: none !important;
  }
  .defi-position-line-lp .defi-lp-label { min-width: 0; overflow: hidden; }
  .defi-position-line-lp .defi-lp-label .defi-asset-symbol {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Lending / staking / yield (Benqi, Pendle, Hyperliquid, Ethena, Morpho)
     Use FLEXBOX with fixed-width cells + explicit `order` so the header and the
     data rows line up — flex isn't affected by the grid-template overrides that
     were defeating the grid approach. Cells: asset(grow) · Amount · APY · Total */
  /* Keep the DeFi boxes inside the wallet card (no horizontal overflow). */
  .defi-block,
  .defi-groups,
  .defi-split-grid,
  .defi-split-col,
  .defi-subsection,
  .defi-position-list,
  .defi-position-item {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .defi-split-col,
  .defi-subsection {
    overflow: hidden;
  }

  .defi-split-title-row,
  .defi-position-line-lending {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 6px !important;
  }

  .defi-split-col-heads { display: contents !important; }

  .defi-split-title-row .defi-split-title,
  .defi-position-line-lending .defi-position-left {
    order: 0; flex: 1 1 auto !important; min-width: 0; overflow: hidden;
  }
  /* Truncate long titles / asset / pool names so they never run into columns. */
  .defi-split-title-row .defi-split-title,
  .defi-position-line-lending .defi-asset-symbol {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }

  /* Amount · APY · Total — fixed widths, padding reset (desktop rules add
     padding-right:80px etc. which bloats the cell and overlaps the asset). */
  .defi-split-col-heads .defi-split-col-head:first-child,
  .defi-position-line-lending .defi-position-amount {
    order: 1; flex: 0 0 58px !important;
    width: 58px !important; max-width: 58px !important; padding: 0 !important;
    text-align: right !important;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11px; line-height: 1.2;
  }
  .defi-split-col-heads .defi-split-col-head:nth-child(2),
  .defi-position-line-lending .defi-position-center {
    order: 2; flex: 0 0 44px !important;
    width: 44px !important; max-width: 44px !important; padding: 0 !important;
    text-align: right !important;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11px; line-height: 1.2;
  }
  .defi-split-title-row .defi-split-total,
  .defi-position-line-lending .defi-position-right {
    order: 3; flex: 0 0 72px !important; text-align: right;
    padding: 0 !important; min-width: 0; overflow: hidden;
  }

  /* Yearn: drop the "Pool assets" column — keep Pool · APY · Total. */
  .defi-block--yearn .defi-position-amount,
  .defi-block--yearn .defi-split-col-heads .defi-split-col-head:first-child {
    display: none !important;
  }

  /* Perps (Drift / Hyperliquid): name truncates (above); Details then PnL get
     fixed columns aligned under their headers. PnL shows only the % change
     (no $ value, no parentheses) — the $ value and the "( )" are hidden so the
     name gets more room. */
  .defi-position-line-lending--perp .defi-position-center,
  .defi-split-title-row-apy--perp .defi-split-col-heads .defi-split-col-head:first-child {
    order: 1 !important; flex: 0 0 40px !important;
    width: 40px !important; max-width: 40px !important;
  }
  .defi-position-line-lending--perp .defi-position-amount,
  .defi-split-title-row-apy--perp .defi-split-col-heads .defi-split-col-head:nth-child(2) {
    order: 2 !important; flex: 0 0 56px !important;
    width: 56px !important; max-width: 56px !important;
  }
  /* PnL: drop the $ value and the parentheses, keep just the % change. */
  .defi-position-line-lending--perp .defi-net-change .js-money-usd,
  .defi-position-line-lending--perp .defi-net-change .defi-net-paren {
    display: none !important;
  }
  .defi-position-line-lending--perp .defi-net-change,
  .defi-position-line-lending--perp .defi-net-change .defi-net-pct {
    font-size: 11px !important; white-space: nowrap;
  }

  /* Abbreviate the side: LONG → L, SHORT → S (leverage "· 3x" stays). */
  .defi-position-line-lending--perp .defi-perp-side { font-size: 0 !important; }
  .defi-position-line-lending--perp .defi-perp-side--long::after {
    content: "L"; font-size: 11px;
  }
  .defi-position-line-lending--perp .defi-perp-side--short::after {
    content: "S"; font-size: 11px;
  }

  /* Rewards (Benqi, Compound, …): drop the empty "—" middle column — the
     claimable asset, amount and total are enough. */
  .defi-block--type-rewards .defi-position-center,
  .defi-block--type-rewards .defi-split-col-heads .defi-split-col-head:nth-child(2) {
    display: none !important;
  }

  /* Section totals: the right-hand label duplicates the section heading
     ("Assets", "DeFi", "Collectibles"/"Ordinals"/"Runes"/"BRC-20"). Hide the
     label word via font-size:0 on the container but keep the value (the
     <strong> total is restored to a readable size). */
  .section-total,
  .bitcoin-meta-panel__total {
    font-size: 0 !important;
  }
  .section-total strong,
  .section-total .js-money-usd,
  .bitcoin-meta-panel__total strong,
  .bitcoin-meta-panel__total .js-money-usd {
    font-size: 14px !important;
  }

  /* Polymarket: market name on its own row; then answer (left) · PnL (middle)
     · value (right) on one row. Drop headers + Deposited. */
  .poly-pred-head { display: none; }
  .poly-pred-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 10px;
  }
  .poly-pred-market { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
  .poly-pred-market .poly-pred-symbol { white-space: normal; }
  .poly-pred-details { grid-column: 1; grid-row: 2; text-align: left; }
  .poly-pred-pnl { grid-column: 2; grid-row: 2; text-align: center; font-size: 12px; }
  .poly-pred-total { grid-column: 3; grid-row: 2; text-align: right; font-weight: 700; }
  .poly-pred-deposited { display: none; }

  /* Centre the per-wallet sync status line (kills its inline left margin). */
  .account-sync-status { margin-left: 0 !important; }

  /* DeFi KPI summary (Health factor / Net worth / Leverage …): inline
     "Label Value" pairs, aligned to the right above the position block. */
  .defi-kpi-grid {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 16px;
  }

  .defi-kpi-card {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    text-align: left;
  }

  .defi-kpi-label {
    margin-bottom: 0;
    text-align: left;
  }

  /* ── Portfolio: chain & protocol filters → native dropdowns ──
     The tile bars are too wide for a phone. Hide them and show the
     compact <select> menus instead (wired in portfolio.html). */
  .chain-bar-wrap,
  .defi-filter-wrap .defi-filter-bar,
  .defi-filter-wrap .defi-filter-toggle {
    display: none !important;
  }

  .chain-filter,
  .defi-filter-select {
    display: block !important;
    width: 100%;
    min-height: 40px;
    margin: 4px 0 10px;
    padding: 8px 12px;
    font-size: 14px;
    color: #fff;
    background: rgba(8, 11, 17, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    appearance: auto;
  }
}

/* ============================================================
   ≤560px — alerts rule row. The row's actions wrap below at this
   width (alerts.css); pin the delete button to the card's
   bottom-right corner, leaving the toggle in the wrapped row.
   ============================================================ */
@media (max-width: 560px) {
  .alerts-rule {
    position: relative;
  }

  /* Move the on/off toggle to the left of the row (before the icon) so every
     row's switch lines up on the same side. The delete button stays pinned
     bottom-right and is taken out of flow. */
  .alerts-rule__actions {
    order: -1;
    align-self: center;
  }

  .alerts-rule__actions .alerts-rule__form:last-child {
    position: absolute;
    right: 12px;
    bottom: 10px;
  }
}

/* ============================================================
   361–768px — roomier side gutters so content isn't flush to the
   screen edge on mid-size phones (375, 425, …). The narrowest
   phones (≤360) keep the tight 10px gutter to preserve width.
   ============================================================ */
@media (min-width: 361px) and (max-width: 768px) {
  .page-container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ============================================================
   641–1280px — discovery desktop table at tablet/laptop widths.
   The full table is fixed-layout with a 260px coin column and
   min-width:1060, so the coin balloons and the table scrolls.
   Keep ALL columns but make them fit: a small fixed Rank + Coin
   column, then let the numeric columns share the remaining width
   equally (width:auto in a fixed layout). This caps the coin and
   fills the row without horizontal scroll.
   (≤640 uses the mobile card grid, so this doesn't touch it.)
   ============================================================ */
@media (min-width: 641px) and (max-width: 1280px) {
  .discovery-table {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
  }

  .discovery-table th,
  .discovery-table td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .discovery-col-rank { width: 48px; }
  .discovery-col-coin { width: 165px; }

  /* Numeric columns (price, 1h/24h/7d, volume, market cap, sparkline) split the
     leftover width equally. */
  .discovery-col-price,
  .discovery-col-change,
  .discovery-col-volume,
  .discovery-col-market-cap,
  .discovery-col-sparkline {
    width: auto;
  }

  .discovery-coin-text strong,
  .discovery-coin-text small {
    max-width: 120px;
  }
}

/* Tablet (641–980): drop the 24h change and 24h Volume columns to de-clutter
   the narrower table. The table uses <colgroup>/<col>, so the matching <col>
   must be hidden too — hiding only the cells leaves the <col> reserving width,
   which shifted the cells left and left empty space on the right. */
@media (min-width: 641px) and (max-width: 980px) {
  /* Coins: 1=Rank 2=Coin 3=Price 4=1h 5=24h 6=7d 7=Vol 8=MCap 9=Spark */
  .discovery-table--coins col:nth-child(5),
  .discovery-table--coins col:nth-child(7),
  .discovery-table--coins th:nth-child(5),
  .discovery-table--coins td:nth-child(5),
  .discovery-table--coins th:nth-child(7),
  .discovery-table--coins td:nth-child(7) {
    display: none;
  }

  /* Ordinals: 1=Rank 2=Coin 3=Price 4=24h 5=7d 6=30d 7=Vol 8=MCap 9=Spark */
  .discovery-table--ordinals col:nth-child(4),
  .discovery-table--ordinals col:nth-child(7),
  .discovery-table--ordinals th:nth-child(4),
  .discovery-table--ordinals td:nth-child(4),
  .discovery-table--ordinals th:nth-child(7),
  .discovery-table--ordinals td:nth-child(7) {
    display: none;
  }
}

/* ============================================================
   Docs page (≤980px) — keep everything inside the card and the
   viewport. The grid columns already collapse to 1 (docs.css),
   but the DeFi protocol-coverage table carries min-width:900px,
   which stretched the whole card past the screen edge (the intro
   section got clipped as a result). Let the containers shrink so
   the table scrolls inside its own wrapper instead.
   ============================================================ */
@media (max-width: 980px) {
  .docs-page,
  .docs-segment-card,
  .docs-section,
  .docs-table-wrap {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .docs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ≤768px — phones. Tighten the card gutters/title and reflow the
   wide protocol table into stacked, labelled rows so it reads
   top-to-bottom with no horizontal scroll. Column order is
   1=Protocol · 2=Type · 3=Chains · 4=What we show. */
@media (max-width: 768px) {
  .docs-title { font-size: 23px; }
  .docs-card { padding: 16px; }

  .docs-table { min-width: 0; }
  .docs-table thead { display: none; }
  .docs-table,
  .docs-table tbody,
  .docs-table tr,
  .docs-table td {
    display: block;
  }

  .docs-table tr {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .docs-table tbody tr:last-child { margin-bottom: 0; }

  .docs-table tbody td {
    border: none;
    padding: 2px 0;
    font-size: 13px;
  }
  .docs-table tbody td:first-child {
    font-size: 15px;
    font-weight: 700;
    padding-bottom: 6px;
  }

  /* Field labels for the stacked rows (the header row is hidden above). */
  .docs-table tbody td:nth-child(2)::before { content: "Type — "; }
  .docs-table tbody td:nth-child(3)::before { content: "Chains — "; }
  .docs-table tbody td:nth-child(4)::before { content: "Shows — "; }
  .docs-table tbody td:nth-child(n+2)::before {
    color: rgba(230, 236, 245, 0.55);
    font-weight: 600;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__backdrop,
  .mobile-nav__panel {
    animation: none;
  }
}