/* ============================================================================
   responsive.css — adaptive layer for Tradoor
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css. Everything here lives inside a media query, so the
   desktop rendering above 1280px is untouched by design.

   Breakpoints (matching the cascade already in styles.css):
     <= 1440px   ultra-wide clamp / large desktop
     <= 1024px   tablet landscape, small desktop
     <=  860px   the point where the header nav no longer fits  -> burger
     <=  720px   phone landscape / large phone
     <=  480px   phone portrait
     <=  380px   small android
     landscape phones handled separately via (max-height: 500px)

   Conventions kept from styles.css: orange accent rgb(255,140,60),
   cubic-bezier(0.22, 1, 0.36, 1) easing, dashed borders on panels.
   ========================================================================== */

:root {
  /* Height reserved by the sticky header once the burger layout kicks in. */
  --mobile-header-h: 56px;
  /* Minimum comfortable touch target (WCAG 2.5.8 / Apple HIG). */
  --touch-min: 44px;
}

/* ==========================================================================
   0. Foundations — apply at every width
   ========================================================================== */

/* Media must never force the page wider than the viewport. Scoped away from
   the decorative canvases, which are intentionally oversized. */
img:not(.title-fill-image),
svg:not(.ts-badge-arc),
video {
  max-width: 100%;
}

/* Full-screen decorative layers are sized in JS (canvas width/height attributes)
   and briefly raced ahead of the CSS during boot, widening the layout viewport
   on phones. They are meant to be exactly one viewport wide, so clamping them
   is a no-op in steady state and closes the race. */
#galaxy-bg-canvas,
#boot_loader,
#boot_scanlines,
#boot_exit_sweep,
#click-spark-canvas {
  max-width: 100vw;
  overflow: hidden;
}

/* Long addresses / hashes / token names must wrap instead of stretching a
   grid track. */
.mono,
.addr,
.wallet-addr,
.stat-value,
.hv-stat-value {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   1. Ultra-wide — keep line lengths readable past 1900px
   ========================================================================== */

@media (min-width: 1900px) {
  body.main-space .app,
  .landing-section > .landing-inner {
    max-width: 1760px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   2. <= 1024px — tablet landscape / small desktop
   ========================================================================== */

@media (max-width: 1024px) {
  .app {
    padding: 18px;
  }
  .dex-card {
    min-width: 0;
    flex: 1 1 0;
    padding: 14px 18px;
  }
}

/* Between 721 and 1024px styles.css collapses the positions table to 2 columns,
   which breaks the header/body alignment. Seven tracks still fit comfortably at
   this width, so keep the real table; below 720px it switches to h-scroll. */
@media (min-width: 721px) and (max-width: 1024px) {
  .row:not(.row-history) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* ==========================================================================
   3. <= 860px — header collapses to a burger + slide-down drawer
   --------------------------------------------------------------------------
   The nav markup is reused as-is: .header-dropdown keeps its JS-driven .open
   class and simply renders as an inline accordion instead of a popover.
   ========================================================================== */

@media (max-width: 860px) {
  /* --- header shell --- */
  body.main-space .header:not(.row) {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 12px;
    min-height: var(--mobile-header-h);
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(10, 11, 15, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  body.main-space .hero-box {
    margin-right: auto;
    flex: 0 1 auto;
    min-width: 0;
  }
  .header-logo-svg {
    height: 22px;
    width: auto;
  }

  /* Burger button — hidden above this breakpoint. */
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mobile-nav-toggle:hover,
  body.mobile-nav-open .mobile-nav-toggle {
    border-color: rgba(255, 140, 60, 0.55);
    background: rgba(255, 140, 60, 0.12);
  }
  /* Burger -> X */
  .mobile-nav-toggle span {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.18s ease;
  }
  .mobile-nav-toggle span::before,
  .mobile-nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mobile-nav-toggle span::before { transform: translateY(-6px); }
  .mobile-nav-toggle span::after  { transform: translateY(6px); }
  body.mobile-nav-open .mobile-nav-toggle span { background: transparent; }
  body.mobile-nav-open .mobile-nav-toggle span::before { transform: rotate(45deg); }
  body.mobile-nav-open .mobile-nav-toggle span::after  { transform: rotate(-45deg); }

  /* --- the drawer itself ---
     Deliberately not scoped to body.main-space: that class is applied by JS a
     moment after boot, and until then the nav would render inline and overflow.
     `body.landing .header-nav { display: none }` in styles.css is more specific,
     so the landing state still hides it. */
  .header-nav {
    position: fixed;
    top: var(--mobile-header-h);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--mobile-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    padding: 12px 12px 24px;
    margin: 0;

    /* Fully opaque, and deliberately WITHOUT backdrop-filter: .header (the
       ancestor) already sets one, which makes it the backdrop root. The drawer
       extends past the 56px header, so outside it there is no valid backdrop
       and the panel paints through. An opaque panel is also cheaper on mobile. */
    background: #0b0d12;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);

    /* Hidden state — kept in the DOM so the JS dropdown logic still works. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease,
                visibility 0s linear 0.26s;
    z-index: 55;
  }

  body.mobile-nav-open .header-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease,
                visibility 0s;
  }

  /* Scrim behind the drawer. A real element, not body::after — that pseudo is
     already used by the starfield background. */
  .mobile-nav-scrim {
    position: fixed;
    inset: var(--mobile-header-h) 0 0 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 54;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  body.mobile-nav-open .mobile-nav-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
  }

  /* Stop the page scrolling behind the open drawer. */
  body.mobile-nav-open {
    overflow: hidden;
  }

  /* --- nav items inside the drawer --- */
  .header-nav-item {
    width: 100%;
  }
  .header-nav-btn {
    /* `all: unset` upstream resets box-sizing to content-box. */
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: var(--touch-min);
    padding: 10px 14px;
    font-size: 14px;
    letter-spacing: 0.02em;
    border-radius: 10px;
  }
  /* Only the section chevron is pushed to the far edge. */
  .header-nav-btn .nav-chevron {
    margin-left: auto;
  }
  .header-nav-divider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 6px 0;
    background: rgba(255, 255, 255, 0.08);
  }

  /* Dropdowns become inline accordions: no absolute positioning, no clipping. */
  .header-nav .header-dropdown {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    margin: 2px 0 6px;
    transform: none;
    opacity: 1;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.03);
  }
  .header-nav .header-dropdown.open {
    display: flex;
    flex-direction: column;
    transform: none;
    opacity: 1;
  }
  .header-nav .menu-item-btn {
    width: 100%;
    text-align: left;
    min-height: var(--touch-min);
  }

  /* Mode selector (Market Making / Outcomes / HIP-4) leads the drawer. */
  .mode-selector {
    order: -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
    padding: 0 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mode-sel-btn {
    /* .mode-sel-btn uses `all: unset`, which resets box-sizing to content-box:
       width:100% + padding would overflow the drawer. */
    box-sizing: border-box;
    width: 100%;
    min-height: var(--touch-min);
    font-size: 16px !important;
    padding: 10px 14px;
    border-radius: 10px;
    text-align: left;
  }

  /* --- header actions stay on the top bar --- */
  body.main-space .header-actions {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  /* Secondary icons move into the drawer's reach; keep the bar to the
     essentials: trading score, wallet/connect, burger. */
  .header-actions .header-icon-btn {
    display: none;
  }
  .header-connect-btn,
  .header-wallet-btn {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
  /* The profile dropdown is anchored to the bar, not the drawer. */
  .header-dropdown--profile {
    position: absolute;
    right: 0;
    left: auto;
    min-width: 200px;
  }
}

/* Above the burger breakpoint neither the toggle nor the scrim may show. */
@media (min-width: 861px) {
  .mobile-nav-toggle,
  .mobile-nav-scrim {
    display: none !important;
  }
}

/* ==========================================================================
   4. <= 720px — phones
   ========================================================================== */

@media (max-width: 720px) {
  .app {
    padding: 12px;
  }
  .panel {
    padding: 12px;
    margin-bottom: 12px;
  }

  /* --- single column everywhere --- */
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* --- venue / dex cards --- */
  .dex-selector {
    gap: 8px;
  }
  .dex-card {
    min-width: 0;
    flex: 1 1 0;
    padding: 12px 10px;
  }
  .dex-card-logo {
    height: 18px;
  }

  /* --- source segmented control --- */
  .source-selector {
    gap: 6px;
    padding: 4px;
  }
  .source-option {
    min-height: var(--touch-min);
  }
  .source-slider {
    /* Track the reduced padding/gap so the pill stays under the active tab. */
    top: 4px;
    left: 4px;
    width: calc((100% - 20px) / 3);
    height: calc(100% - 8px);
  }
  .source-selector.mode-hip3 .source-slider {
    transform: translateX(calc(100% + 6px));
  }
  .source-selector.mode-xyz .source-slider {
    transform: translateX(calc(200% + 12px));
  }

  /* --- trading account tabs --- */
  .trading-account-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .ta-option {
    min-height: var(--touch-min);
    padding: 8px 6px;
    font-size: 12px;
  }

  /* --- tables: scroll horizontally rather than crushing 7 columns --- */
  .table {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* Overrides the 2-column fallback in styles.css, which misaligned the
     header row from the body rows. */
  .table > .row:not(.row-history) {
    grid-template-columns: repeat(7, minmax(72px, 1fr));
    min-width: 560px;
    row-gap: 0;
  }
  .table > .row-history {
    min-width: 620px;
  }

  /* --- dashboard tabs --- */
  /* 3 x min-width:120px + gaps = 376px, wider than a 360px screen. */
  .dashboard-tabs {
    gap: 6px;
  }
  .tab-btn {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 6px;
    letter-spacing: 0.6px;
  }

  /* --- stat cards --- */
  .stat {
    padding: 12px;
  }
  .stat-value {
    font-size: 18px;
  }

  /* --- controls: touch sizing --- */
  button,
  .btn,
  input[type="text"],
  input[type="number"],
  select {
    min-height: var(--touch-min);
  }
  /* iOS zooms the page when a focused field is under 16px. */
  input,
  select,
  textarea {
    font-size: 16px;
  }
  .action-btn {
    width: 100%;
    min-height: 52px;
  }

  /* --- risk / engine option grids --- */
  .risk-mode-wrap .preset-row,
  .quote-mode-grid,
  .manual-modes-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .stop-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* --- sliders + their value box stack --- */
  .range-row,
  .hv-slider-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hv-slider-row .hv-value-box {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  /* --- modals and drawers go full-bleed --- */
  .stats-drawer,
  .kpoints-drawer,
  .wallets-drawer {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }
  .referral-modal,
  .my-stats-modal,
  .telegram-modal,
  .connect-modal,
  .pnl-share-modal,
  .venue-choice-modal,
  .dn-token-modal,
  .points-live-modal,
  .wp-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 16px;
  }

  /* --- token picker dropdown --- */
  .token-picker-menu {
    max-height: 55dvh;
  }
  .token-picker-list {
    max-height: 40dvh;
  }
}

/* ==========================================================================
   5. <= 480px — phone portrait
   ========================================================================== */

@media (max-width: 480px) {
  .app {
    padding: 10px;
  }
  .panel {
    padding: 10px;
    border-radius: 12px;
  }
  .panel-title {
    font-size: 12px;
  }
  .stat-value {
    font-size: 16px;
  }
  .stat-label {
    font-size: 9px;
    letter-spacing: 0.8px;
  }
  .dex-card-logo {
    height: 15px;
  }
  .venue-beta-badge {
    font-size: 8px;
    padding: 1px 4px;
  }
  .ta-option {
    font-size: 11px;
    padding: 8px 4px;
  }
  .stop-mode-tabs {
    grid-template-columns: 1fr;
  }
  /* Keep the primary CTA thumb-reachable and unmistakable. */
  .action-btn {
    font-size: 16px;
    letter-spacing: 0.04em;
  }
}

/* ==========================================================================
   6. <= 380px — small android (360px class)
   ========================================================================== */

@media (max-width: 380px) {
  .app {
    padding: 8px;
  }
  .header-logo-svg {
    height: 19px;
  }
  .header-connect-btn,
  .header-wallet-btn {
    padding: 7px 9px;
    font-size: 11px;
  }
  .stat-value {
    font-size: 15px;
  }
  .source-option img {
    max-height: 18px;
  }
}

/* ==========================================================================
   7. Landscape phones — vertical space is the scarce axis
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Full-height heroes would hide the content entirely. */
  .landing-manifesto,
  .landing-hero {
    min-height: auto;
    padding-block: 32px;
  }
  .scroll-hint {
    display: none;
  }
  /* Drawers/modals must scroll rather than overflow off-screen. */
  .header-nav,
  .stats-drawer,
  .kpoints-drawer,
  .wallets-drawer {
    max-height: 100dvh;
    overflow-y: auto;
  }
  .referral-modal,
  .my-stats-modal,
  .connect-modal,
  .telegram-modal,
  .venue-choice-modal {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }
  #connect_page {
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}

/* ==========================================================================
   8. Coarse pointers — no hover-only affordances
   ========================================================================== */

@media (hover: none) {
  /* Row actions revealed on hover would be unreachable by touch. */
  .row-history .history-share-btn,
  .slot-card .slot-actions-row {
    opacity: 1 !important;
  }
  /* Hover lifts leave elements stuck in the raised state after a tap. */
  .stat:hover,
  .dex-card:hover {
    transform: none;
  }
}