/* Keep grid children inside the screen; wide tables scroll in their own panel. */
.advanced-site main .grid > *,
.advanced-site main .panel { min-width: 0; }

@media (max-width: 760px) {
  .advanced-site header { position: relative; top: auto; }
  .advanced-site header > div { padding: 8px 12px; gap: 8px 12px; }
  .advanced-site header nav { padding: 0 8px; overflow: visible; }
  .advanced-site header nav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; gap: 4px; }
  .advanced-site header nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 2px; }
  .advanced-site header nav a > span { bottom: 0; left: 15%; right: 15%; }
  .advanced-site header .fana-affiliation a { min-height: 44px; }

  /* Show every status without requiring a second horizontal swipe area. */
  .advanced-site header + .border-b > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 10px 12px; overflow: visible; }
  .advanced-site header + .border-b > div > span { display: grid; grid-template-columns: 6px minmax(0, 1fr); align-items: baseline; gap: 2px 6px; min-width: 0; font-size: 12px; }
  .advanced-site header + .border-b > div > span > span:last-child { grid-column: 2; overflow-wrap: anywhere; }
}

@media (max-width: 1023px) {
  .fana-affiliation a { min-height: 44px; }
  .advanced-site main { padding-left: 12px; padding-right: 12px; }
  .advanced-site main .panel { overflow-wrap: anywhere; }
  .advanced-site main .panel > .flex:has(> h2) { flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
  .advanced-site main .panel > .flex:has(> h2) > h2 { flex: 1 1 200px; }
  .advanced-site main .panel > .flex:has(> p) { flex-wrap: wrap; }
  .advanced-site main .text-xs { font-size: 13px; line-height: 1.5; }
  .advanced-site main [class~="text-[11px]"] { font-size: 12px; line-height: 1.5; }
  .advanced-site main [class~="text-[10px]"] { font-size: 12px; line-height: 1.5; }
  .advanced-site main button { min-height: 44px; min-width: 44px; font-size: 13px; }
  .advanced-site main summary { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .advanced-site main input:not([type="range"]),
  .advanced-site main select { min-height: 44px; }
  .advanced-site main input:not([type="range"]):not(#trade-amount),
  .advanced-site main select { font-size: 16px; }
  .advanced-site main input[type="range"] { height: 44px; padding: 19px 0; background-clip: content-box; }
  .advanced-site main .overflow-x-auto { max-width: 100%; overscroll-behavior-x: contain; }

  /* Put legends above the plot so they cannot cover narrow chart axes. */
  .advanced-site main .relative.w-full:has(> .pointer-events-none.absolute) { display: flex; flex-direction: column; height: auto; }
  .advanced-site main .relative.w-full:has(> .pointer-events-none.absolute) > .absolute.inset-0 { position: relative; order: 1; height: 240px; }
  .advanced-site main .relative.w-full > .pointer-events-none.absolute { position: relative; left: auto; top: auto; margin-bottom: 8px; gap: 4px 12px; }

  /* Balance shortcuts need their own rows on a phone. */
  .advanced-site main .flex:has(> .normal-case.tracking-normal) { flex-wrap: wrap; gap: 8px; }
  .advanced-site main .normal-case.tracking-normal:has(> button) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex-basis: 100%; gap: 6px; min-width: 0; }
  .advanced-site main .normal-case.tracking-normal:has(> button) > span { grid-column: 1 / -1; }

  #fana-wallet-dialog { padding: 18px; max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
  #fana-wallet-dialog header { position: sticky; top: 0; z-index: 2; background: var(--wallet-bg); }
  #fana-wallet-dialog header button { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  #fana-wallet-dialog .fana-wallet-heading { gap: 8px; }
  #fana-wallet-dialog h2 { font-size: 22px; }
  #fana-wallet-dialog .fana-wallet-choice { gap: 8px; padding: 10px; }
  #fana-wallet-dialog .fana-wallet-choice small { font-size: 11px; }
  #fana-wallet-more, #fana-wallet-guide a { min-height: 44px; }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .advanced-site header nav a { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 690px) {
  [data-coast-theme] .fana-affiliation { left: max(20px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); }
  [data-coast-theme] .fana-affiliation a { min-height: 44px; }
}

/* Short landscape screens need room for the page below the navigation. */
@media (max-height: 500px) and (max-width: 1023px) {
  .advanced-site header { position: relative; top: auto; }
}

/* Phone layout: preserve readable type while bringing the trade form up. */
@media (max-width: 690px) {
  .v3-module__MvjfCG__page { padding: 8px 12px calc(80px + env(safe-area-inset-bottom)); }
  .v3-module__MvjfCG__header { min-height: 56px; padding: 4px 6px; flex-wrap: wrap; }
  .v3-module__MvjfCG__brand { min-height: 44px; }
  .v3-module__MvjfCG__main { padding: 14px 0 18px; gap: 16px; }
  .v3-module__MvjfCG__identity { min-height: 108px; padding-right: 96px; }
  .v3-module__MvjfCG__identity h1 { font-size: 32px; }
  .v3-module__MvjfCG__intro { font-size: clamp(16px, 4.6vw, 20px); margin-top: 6px; }
  .v3-module__MvjfCG__logoStage { width: 96px; right: 0; }
  .v3-module__MvjfCG__motionControl { min-height: 44px; right: max(20px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (max-width: 1023px) {
  .v3-module__MvjfCG__advancedMode, .v3-module__MvjfCG__motionControl { min-height: 44px; }
}

/* Comfortable phone controls without the desktop card's extra whitespace. */
@media (max-width: 690px) {
  .simple-trade-module__VHYPEG__card { padding: 16px; border-radius: 22px; }
  .simple-trade-module__VHYPEG__topline { font-size: 13px; margin-bottom: 12px; }
  .simple-trade-module__VHYPEG__tabs { padding: 4px; margin-bottom: 12px; }
  .simple-trade-module__VHYPEG__tabs button { min-height: 44px; padding: 10px; }
  .simple-trade-module__VHYPEG__amountBox { padding: 10px 12px; }
  .simple-trade-module__VHYPEG__amountRow { min-height: 44px; margin-top: 4px; }
  .simple-trade-module__VHYPEG__amountRow input, .simple-trade-module__VHYPEG__output { font-size: 28px; line-height: 1.2; }
  .simple-trade-module__VHYPEG__amountRow input { min-height: 44px; }
  .simple-trade-module__VHYPEG__notice { padding: 8px 12px; margin-top: 12px; }
  .simple-trade-module__VHYPEG__notice p { margin: 3px 0; }
  .simple-trade-module__VHYPEG__notice button, .simple-trade-module__VHYPEG__refresh, .simple-trade-module__VHYPEG__wallet, .simple-trade-module__VHYPEG__fieldHeading button, .simple-trade-module__VHYPEG__claims button { min-height: 44px; min-width: 44px; }
  .simple-trade-module__VHYPEG__details { margin: 6px 0 8px; }
  .simple-trade-module__VHYPEG__details summary { min-height: 44px; align-items: center; }
  .simple-trade-module__VHYPEG__detailsBody > div { flex-wrap: wrap; gap: 8px; }
  .simple-trade-module__VHYPEG__slippage input { min-height: 44px; width: 64px; font-size: 16px; }
  .simple-trade-module__VHYPEG__submit { min-height: 48px; padding: 10px 12px; }
  .simple-trade-module__VHYPEG__walletNote { margin-top: 8px; font-size: 13px; }
}
@media (min-width: 691px) and (max-width: 1023px) {
  .simple-trade-module__VHYPEG__notice button, .simple-trade-module__VHYPEG__refresh, .simple-trade-module__VHYPEG__wallet, .simple-trade-module__VHYPEG__fieldHeading button, .simple-trade-module__VHYPEG__claims button { min-height: 44px; min-width: 44px; }
  .simple-trade-module__VHYPEG__details summary { min-height: 44px; align-items: center; }
  .simple-trade-module__VHYPEG__slippage input { min-height: 44px; width: 64px; font-size: 16px; }
  .simple-trade-module__VHYPEG__amountRow input { min-height: 44px; }
}