/* ============================================================
   PREDICTED — Mobile layer
   Ported from "predicted v3/mobile". Layers on top of styles.css
   (shares every design token) + extracted.css. Desktop is untouched
   above the breakpoint; below it the app gets a phone-style topbar,
   slide-out drawer and compacted content.
   ============================================================ */

/* breakpoint at which we swap the desktop header for the mobile chrome */
:root { --m-breakpoint: 860px; }

/* ---------- Mobile chrome (hidden on desktop) ---------- */
.m-topbar { display: none; }
.m-drawer-overlay { display: none; }
.m-drawer { display: none; }

/* ---------- Shared mobile component styles (safe at any width) ---------- */
.m-iconbtn {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  transition: transform .12s ease, background .15s;
}
.m-iconbtn:active { transform: scale(.93); }
.m-iconbtn .icon { width: 22px; height: 22px; }

.m-wallet-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 15px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: 13.5px;
  white-space: nowrap;
}
.m-wallet-pill .icon { width: 16px; height: 16px; }
.m-wallet-pill.ghost { background: var(--violet); color: #fff; box-shadow: var(--sh-violet); }

/* nav links inside drawer */
.m-nav-link {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; font-size: 16px; font-weight: 600; color: var(--ink-2);
  border-left: 3px solid transparent; transition: .15s; width: 100%;
}
.m-nav-link .m-nav-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-2);
}
.m-nav-link .m-nav-ico .icon { width: 20px; height: 20px; }
.m-nav-link.active {
  color: var(--violet-ink); background: var(--violet-soft-2); border-left-color: var(--violet);
}
.m-nav-link.active .m-nav-ico { background: var(--violet-soft); color: var(--violet); }
.m-nav-link:active { background: var(--surface-2); }

/* horizontal scroll row (categories) */
.m-hscroll {
  display: flex; gap: 9px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.m-hscroll::-webkit-scrollbar { display: none; }
.m-hscroll > * { flex-shrink: 0; }

/* pill tabs */
.m-pilltabs { display: flex; gap: 6px; flex-wrap: wrap; }
.m-pilltab {
  padding: 8px 15px; border-radius: 999px; font-weight: 700; font-size: 13px;
  background: var(--surface-2); color: var(--ink-3); border: 1px solid transparent;
}
.m-pilltab.on { background: var(--ink); color: var(--paper); }

/* stat tile */
.m-stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px;
  display: flex; flex-direction: column; gap: 3px;
}

/* ---------- Mobile hero floating scene (parying objects) ---------- */
/* Hidden on desktop (the desktop .hero-scene is used there); shown below the
   breakpoint. Reuses the floaty/objShadow/cardShadow keyframes from styles.css. */
.m-hero-scene { display: none; }
.m-float-anchor { position: absolute; transform: translate(-50%, -50%); }
.m-float-obj {
  will-change: transform;
  animation: floaty var(--d, 6.5s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
.m-float-obj img {
  display: block; width: 100%; height: auto;
  animation: objShadow var(--d, 6.5s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
/* The shared .urn-obj keeps the shadow on a separate layer so the artwork stays
   unfiltered at mobile sizes, where its fine details are easiest to lose. */
.m-float-obj img.urn-float {
  animation: none;
  position: relative;
  z-index: 1;
  filter: none;
  image-rendering: -webkit-optimize-contrast;
}
.m-mkt-up {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 9px 11px 8px; width: 116px;
  animation: cardShadow var(--d, 6.5s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
.m-mkt-up .l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--ink-2); font-weight: 700; }
.m-mkt-up .r { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: 4px; }
.m-mkt-up .p { font-weight: 800; font-size: 13px; color: var(--yes-ink); letter-spacing: -.02em; }

/* ============================================================
   MOBILE LAYOUT — everything below the breakpoint
   ============================================================ */
@media (max-width: 860px) {

  /* swap headers */
  .app-header { display: none !important; }
  .m-topbar { display: flex; }
  .m-drawer-overlay { display: block; }
  .m-drawer { display: flex; }

  /* ---------- Topbar ---------- */
  .m-topbar {
    position: sticky; top: 0; z-index: 60;
    align-items: center; justify-content: space-between; gap: 10px;
    padding: max(12px, env(safe-area-inset-top)) 14px 12px;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .m-topbar-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
  .m-topbar-logo .logo-mark { height: 30px; width: auto; }
  .m-topbar-logo .logo-text { font-family: var(--font-display); font-size: 19px; }

  /* ---------- Drawer ---------- */
  .m-drawer-overlay {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(20,22,34,.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .28s ease;
  }
  .m-drawer-overlay.open { opacity: 1; pointer-events: auto; }
  .m-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
    width: 80%; max-width: 320px;
    background: var(--surface); border-right: 1px solid var(--line);
    box-shadow: 24px 0 60px rgba(20,22,34,.22);
    transform: translateX(-104%);
    transition: transform .32s cubic-bezier(.3,.9,.25,1);
    flex-direction: column;
    padding: max(18px, env(safe-area-inset-top)) 0 22px;
  }
  .m-drawer.open { transform: translateX(0); }
  .m-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px 16px;
  }
  .m-drawer-foot { padding: 14px 22px 0; margin-top: auto; }
  body.m-drawer-open { overflow: hidden; }

  /* ---------- Generic content compaction ---------- */
  .wrap { padding: 0 16px; }
  .card-pad { padding: 16px; }
  .section-title { font-size: 19px; }
  .app-search { display: none; }
  .home-search-mobile {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 46px; margin-bottom: 16px; padding: 6px 6px 6px 13px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
    color: var(--ink-3);
  }
  .home-search-mobile input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    color: var(--ink); font-size: 16px;
  }
  .search-page { padding-top: 24px; padding-bottom: 48px; }
  .search-page-form { width: 100%; }
  .market-search-suggestions { position: fixed; top: 74px; left: 12px; right: 12px; max-height: 65vh; }

  /* hero */
  .hero-home .wrap { padding: 16px 16px 26px; }
  .hero-title { font-size: 34px; line-height: 1.08; }
  /* desktop floating scene stays hidden; the mobile-tuned one takes over */
  .hero-scene { display: none; }
  .m-hero-scene {
    display: block; position: relative;
    width: 100%; height: 250px; margin: 2px 0 6px;
    pointer-events: none;
  }
  .row.mobile-col { flex-direction: column; align-items: stretch; }
  .hero-home .btn-lg { width: 100%; }

  /* one-column grids */
  .hero-grid, .detail-grid, .create-grid, .mod-grid,
  .market-grid-design, .trend-grid, .info-grid, .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---------- Home market cards: compact ---------- */
  .market-card .market-thumb { height: 104px !important; }
  .market-card-body { padding: 14px; gap: 12px; }
  .market-card-title { font-size: 16px; }
  .candidate-list-head .tag { flex: 1 0 100%; }

  /* category filter row scrolls horizontally instead of wrapping */
  .cat-scroller {
    flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .cat-scroller::-webkit-scrollbar { display: none; }
  .cat-scroller > * { flex-shrink: 0; }

  /* trust strip → stacked */
  .trust-strip { flex-direction: column; align-items: stretch; gap: 16px; text-align: center; }
  .trust-strip .col.center { align-items: center; }

  /* ---------- Detail page ---------- */
  /* bring the trade ticket up near the top on phones */
  .detail-grid { display: flex; flex-direction: column; }
  .detail-grid > aside { order: -1; }
  .trading-sticky, .create-preview, .mod-review { position: static !important; }
  .detail-header-row { flex-direction: column; }
  .detail-thumb { width: 100%; }
  .detail-thumb .market-thumb { height: 200px !important; }
  .detail-title { font-size: 24px; }
  /* order book side-by-side -> stacked */
  .e-display-grid-grid-template-columns-1fr-1fr-gap-1 { grid-template-columns: 1fr !important; }

  /* make primary actions easy to tap */
  .btn-lg { padding: 14px 22px; }

  /* tables scroll instead of overflowing */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* footer */
  .footer-grid { gap: 22px; }
}

/* very small phones */
@media (max-width: 380px) {
  .m-wallet-pill { padding: 0 12px; font-size: 12.5px; }
  .hero-title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-drawer, .m-drawer-overlay { transition: none; }
  .m-float-obj, .m-float-obj img, .m-mkt-up { animation: none; }
  .m-float-obj img { filter: drop-shadow(0 calc(16px * var(--shd, 1)) calc(18px * var(--shd, 1)) rgba(48,26,92, calc(.22 * var(--shd, 1)))); }
  .m-mkt-up { box-shadow: var(--sh-lg); }
}