/* mobile.css — container-query responsive rules for the LIGHT Aperture
   variant only. We set container-type: inline-size on the artboard root so
   layout reacts to the artboard's width (375/390/etc.), not the viewport. */

.dir-aperture-light.artboard-root {
  container-type: inline-size;
  container-name: aplight;
}

/* =============== TABLET (≤900px) — early grid collapses ================= */

@container aplight (max-width: 900px) {
  /* hero split → 1 col */
  [data-ap="hero-split"] { grid-template-columns: 1fr !important; }
  [data-ap="hero-split"] > div {
    border-right: none !important;
  }
  [data-ap="hero-split"] > div + div {
    border-top: 1px solid var(--line);
  }
  /* hero data → 1 col */
  [data-ap="hero-data"] { grid-template-columns: 1fr !important; }
  [data-ap="hero-data"] > div:first-child { border-right: none !important; border-bottom: 1px solid var(--line); }

  /* trending: 4 → 2 */
  [data-trending-grid] { grid-template-columns: repeat(2, 1fr) !important; }
  /* how top: 2 → 1 */
  [data-how-top] { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* creator: 2 → 1 */
  [data-creator-grid] { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* roadmap: 4 → 2 */
  [data-roadmap-grid] { grid-template-columns: repeat(2, 1fr) !important; }
  /* footer columns: 5 → 3 */
  [data-footer-grid] { grid-template-columns: 1fr 1fr 1fr !important; }

  /* Train tablet — 2col → 1 + drop sticky */
  [data-screen="train"] [data-train-grid] {
    grid-template-columns: 1fr !important;
  }
  [data-screen="train"] [data-train-aside] {
    position: static !important;
    border-left: none !important;
    border-top: 1px solid var(--line) !important;
  }
}

/* =============== MOBILE (≤640px) — full single-column ================== */

@container aplight (max-width: 640px) {

  /* ===== Nav ===== */
  [data-ap="nav"] {
    padding: 14px 18px !important;
  }
  [data-ap="nav"] nav {
    display: none !important;
  }
  /* hide the inline block-num indicator on mobile to keep nav clean */
  [data-ap="nav"] > div:last-child > div:first-child {
    display: none !important;
  }

  /* ===== Hero (split — primary) ===== */
  [data-ap="hero-split"] > div {
    padding: 40px 20px !important;
  }
  [data-ap="hero-split"] h1 {
    font-size: 44px !important;
    letter-spacing: -1.4px !important;
  }
  [data-ap="hero-split"] p {
    font-size: 15px !important;
  }
  /* the right column "trending now" list — make rows fit */
  [data-ap="hero-split"] > div:last-child > div:nth-child(2) > div {
    grid-template-columns: 30px 1fr auto !important;
    padding: 12px 12px !important;
    gap: 10px !important;
  }
  /* hide the % and the sparkline (cols 4,5) on tiny — keep mcap */
  [data-ap="hero-split"] > div:last-child > div:nth-child(2) > div > *:nth-child(4),
  [data-ap="hero-split"] > div:last-child > div:nth-child(2) > div > *:nth-child(5) {
    display: none !important;
  }
  /* stat row at bottom of hero — wrap */
  [data-ap="hero-split"] > div:first-child > div:last-child {
    flex-wrap: wrap !important;
    gap: 18px !important;
  }

  /* ===== Hero centered ===== */
  [data-ap="hero-centered"] {
    padding: 80px 20px 64px !important;
  }
  [data-ap="hero-centered"] h1 {
    font-size: 48px !important;
    letter-spacing: -1.5px !important;
  }
  [data-ap="hero-centered"] p {
    font-size: 15px !important;
  }
  /* buttons stack */
  [data-ap="hero-centered"] > div:last-child > div:last-child {
    flex-direction: column !important;
    width: 100%;
  }
  [data-ap="hero-centered"] > div:last-child > div:last-child > button {
    width: 100%;
  }

  /* ===== Hero data table ===== */
  [data-ap="hero-data"] > div:first-child {
    padding: 56px 20px !important;
  }
  [data-ap="hero-data"] h1 { font-size: 38px !important; letter-spacing: -1px !important; }
  /* hide some columns of the data table — keep agent / mcap / 24h */
  [data-ap="hero-data"] > div:last-child > div {
    grid-template-columns: 30px 1fr 60px 50px !important;
    padding: 10px 16px !important;
  }
  [data-ap="hero-data"] > div:last-child > div > *:nth-child(4),
  [data-ap="hero-data"] > div:last-child > div > *:nth-child(6),
  [data-ap="hero-data"] > div:last-child > div > *:nth-child(7) {
    display: none !important;
  }

  /* ===== Stats (blue strip): 5 → 2, last full ===== */
  [data-ap="stats"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [data-ap="stats"] > div {
    padding: 22px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  }
  [data-ap="stats"] > div:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.18) !important;
  }
  [data-ap="stats"] > div:nth-child(5) {
    grid-column: 1 / -1 !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  [data-ap="stats"] > div > div:nth-child(2) {
    font-size: 22px !important;
  }

  /* ===== Trending: → 1 col ===== */
  [data-ap="trending"] {
    padding: 56px 18px !important;
  }
  [data-trending-grid] {
    grid-template-columns: 1fr !important;
  }
  [data-trending-header] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  [data-trending-header] h2 {
    font-size: 32px !important;
  }
  /* tab strip: horizontal scroll on mobile */
  [data-trending-header] > div:last-child {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  [data-trending-header] > div:last-child::-webkit-scrollbar {
    display: none;
  }

  /* ===== How it works ===== */
  [data-ap="how"] {
    padding: 56px 18px !important;
  }
  [data-ap="how"] h2 { font-size: 30px !important; letter-spacing: -1px !important; }
  /* steps 3 → 1 */
  [data-how-steps] {
    grid-template-columns: 1fr !important;
  }
  [data-how-steps] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    min-height: 0 !important;
    padding: 20px !important;
  }
  [data-how-steps] > div:last-child {
    border-bottom: none;
  }

  /* ===== Creator royalty ===== */
  [data-ap="creator"] {
    padding: 64px 18px !important;
  }
  [data-ap="creator"] h2 {
    font-size: 36px !important;
    letter-spacing: -1.2px !important;
  }
  [data-creator-counter] {
    font-size: 38px !important;
    letter-spacing: -1.2px !important;
  }
  [data-creator-grid] > div:last-child {
    padding: 22px !important;
  }

  /* ===== Roadmap (blue): → 1 col, tighter ===== */
  [data-ap="roadmap"] {
    padding: 64px 18px !important;
  }
  [data-roadmap-header] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  [data-roadmap-header] h2 {
    font-size: 32px !important;
    letter-spacing: -1px !important;
  }
  [data-roadmap-grid] {
    grid-template-columns: 1fr !important;
  }
  [data-roadmap-grid] > div {
    min-height: 0 !important;
    padding: 20px !important;
  }

  /* ===== Footer ===== */
  [data-footer-grid] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    padding: 0 18px 32px !important;
  }
  [data-footer-grid] > div:first-child {
    grid-column: 1 / -1 !important;
  }
  [data-footer-bottom] {
    padding: 16px 18px 24px !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  [data-agent-blocks] {
    padding: 0 12px 20px !important;
  }
  /* shrink AGENT letters so they fit at 390px without clipping */
  [data-agent-blocks] svg {
    height: 72px !important;
  }
  /* override the inline gap so 5 letters fit edge-to-edge */
  [data-agent-blocks] > div {
    gap: 6px !important;
  }
}


/* =============== Full-flow screens (LIGHT) — mobile ===================== */

/* Set container on the light flow-screen roots. The screens themselves use
   the same .dir-aperture-light class, so they pick up the rules above. We
   add a few extra overrides for screen-only layouts here. */

@container aplight (max-width: 640px) {

  /* ===== Launch wizard: 260 / 1fr / 360 → stacked ===== */
  [data-screen="launch"] { overflow-x: hidden; }
  [data-screen="launch"] [data-launch-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }
  [data-screen="launch"] [data-launch-grid] > * { min-width: 0; }
  [data-screen="launch"] [data-launch-rail] {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 20px 18px !important;
  }
  [data-screen="launch"] [data-launch-rail] ol {
    flex-direction: row !important;
    overflow-x: visible !important;
    scrollbar-width: none;
    gap: 6px !important;
  }
  [data-screen="launch"] [data-launch-rail] ol::-webkit-scrollbar { display: none; }
  [data-screen="launch"] [data-launch-rail] ol li {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px !important;
    gap: 6px !important;
  }
  [data-screen="launch"] [data-launch-rail] ol li > span:last-child {
    font-size: 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-screen="launch"] [data-launch-rail] > div:last-child { display: none !important; } /* help card */
  [data-screen="launch"] [data-launch-main] {
    padding: 24px 18px !important;
  }
  [data-screen="launch"] [data-launch-main] h2 { font-size: 24px !important; }
  [data-screen="launch"] [data-launch-aside] {
    border-left: none !important;
    border-top: 1px solid var(--line) !important;
    padding: 24px 18px !important;
  }
  /* Field rows: 220 / 1fr → 1fr */
  [data-screen="launch"] [data-launch-main] [data-field] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px 0 !important;
  }
  [data-screen="launch"] [data-launch-main] [data-field] > * { min-width: 0; }
  [data-screen="launch"] [data-launch-header-pad] {
    padding: 24px 18px 14px !important;
  }
  [data-screen="launch"] [data-launch-header-pad] h1 {
    font-size: 28px !important;
    letter-spacing: -0.8px !important;
  }

  /* ===== Agent detail: 1fr / 360 → stacked ===== */
  [data-screen="detail"] { overflow-x: hidden; }
  [data-screen="detail"] [data-detail-header] { padding: 24px 18px !important; }
  [data-screen="detail"] [data-detail-header] h1 { font-size: 28px !important; }
  [data-screen="detail"] [data-detail-headertop] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  [data-screen="detail"] [data-detail-headertop] > * { min-width: 0; }
  [data-screen="detail"] [data-detail-headertop] > div:last-child {
    text-align: left !important;
  }
  [data-screen="detail"] [data-detail-ministats] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [data-screen="detail"] [data-detail-ministats] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  [data-screen="detail"] [data-detail-ministats] > div:nth-child(odd) {
    border-right: 1px solid var(--line) !important;
  }
  [data-screen="detail"] [data-detail-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-screen="detail"] [data-detail-grid] > * { min-width: 0; }
  [data-screen="detail"] [data-detail-main] {
    border-right: none !important;
    padding: 20px 18px !important;
  }
  [data-screen="detail"] [data-detail-aside] {
    border-top: 1px solid var(--line) !important;
    padding: 20px 18px !important;
  }
  [data-screen="detail"] [data-detail-secondary] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  [data-screen="detail"] [data-detail-secondary] > * { min-width: 0; }
  [data-screen="detail"] [data-detail-trades] > div {
    grid-template-columns: 60px 50px 1fr 80px !important;
    gap: 4px;
  }
  [data-screen="detail"] [data-detail-trades] > div > span:last-child {
    display: none !important;  /* hide wallet col */
  }

  /* ===== Portfolio ===== */
  [data-screen="portfolio"] { overflow-x: hidden; }
  [data-screen="portfolio"] [data-port-header] { padding: 24px 18px !important; }
  [data-screen="portfolio"] [data-port-header] h1 { font-size: 28px !important; }
  [data-screen="portfolio"] [data-port-stats] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [data-screen="portfolio"] [data-port-stats] > div {
    padding: 18px !important;
  }
  [data-screen="portfolio"] [data-port-stats] > div:first-child {
    grid-column: 1 / -1 !important;
  }
  /* Table → cards: hide cols, make each row a stacked block */
  [data-screen="portfolio"] [data-port-table] [data-port-thead] {
    display: none !important;
  }
  [data-screen="portfolio"] [data-port-table] [data-port-row] {
    grid-template-columns: 36px 1fr auto !important;
    gap: 12px !important;
    padding: 14px 14px !important;
  }
  /* hide qty/cost/price/value/action cells, keep ticker + pnl */
  [data-screen="portfolio"] [data-port-table] [data-port-row] > *:nth-child(3),
  [data-screen="portfolio"] [data-port-table] [data-port-row] > *:nth-child(4),
  [data-screen="portfolio"] [data-port-table] [data-port-row] > *:nth-child(5),
  [data-screen="portfolio"] [data-port-table] [data-port-row] > *:nth-child(8) {
    display: none !important;
  }
  /* Secondary cards stack */
  [data-screen="portfolio"] [data-port-main] {
    padding: 18px !important;
  }
  [data-screen="portfolio"] [data-port-cards] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-screen="portfolio"] [data-port-cards] > * { min-width: 0; }
  [data-screen="portfolio"] [data-port-tabs] {
    padding: 0 18px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  [data-screen="portfolio"] [data-port-tabs]::-webkit-scrollbar { display: none; }

  /* ===== Leaderboard ===== */
  [data-screen="leaderboard"] { overflow-x: hidden; }
  [data-screen="leaderboard"] [data-lb-header] {
    padding: 28px 18px 24px !important;
  }
  [data-screen="leaderboard"] [data-lb-header] h1 {
    font-size: 30px !important;
    letter-spacing: -0.9px !important;
  }
  /* hide subscribe action on mobile */
  [data-screen="leaderboard"] [data-lb-header] > div:nth-child(1) > div:nth-child(2) {
    display: none !important;
  }
  [data-screen="leaderboard"] [data-lb-summary] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [data-screen="leaderboard"] [data-lb-summary] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  [data-screen="leaderboard"] [data-lb-summary] > div:nth-child(odd) {
    border-right: 1px solid var(--line) !important;
  }
  [data-screen="leaderboard"] [data-lb-summary] > div:nth-child(3),
  [data-screen="leaderboard"] [data-lb-summary] > div:nth-child(4) {
    border-bottom: none;
  }
  /* podium 3 → 1 col */
  [data-screen="leaderboard"] [data-lb-podium-section] {
    padding: 28px 18px !important;
  }
  [data-screen="leaderboard"] [data-lb-podium] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  [data-screen="leaderboard"] [data-lb-podium] > div {
    transform: none !important;
  }
  /* table → cards. Stack each row vertically. */
  [data-screen="leaderboard"] [data-lb-table-section] {
    padding: 28px 14px !important;
  }
  [data-screen="leaderboard"] [data-lb-table-section] > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  [data-screen="leaderboard"] [data-lb-filters] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 10px !important;
  }
  [data-screen="leaderboard"] [data-lb-thead] {
    display: none !important;
  }
  [data-screen="leaderboard"] [data-lb-tbody] {
    border-radius: 12px !important;
  }
  [data-screen="leaderboard"] [data-lb-row] {
    grid-template-columns: 32px 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 10px 12px !important;
    padding: 14px 14px !important;
  }
  /* rank · agent · 30d PnL (right) — show on row 1.
     hide balance, 24h, 7d PnL, all-time, sharpe, subs, action — these aren't critical at 390px */
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(3),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(4),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(5),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(7),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(8),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(9),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(10) {
  /* hide balance, 24h, 7d PnL, all-time, sharpe, subs, action — these aren't critical at 390px */
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(3),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(4),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(5),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(7),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(8),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(9),
  [data-screen="leaderboard"] [data-lb-row] > *:nth-child(10) {
    display: none !important;
  }

  [data-screen="train"] { overflow-x: hidden; }
  [data-screen="train"] [data-train-header] {
    padding: 24px 18px 18px !important;
  }
  [data-screen="train"] [data-train-header] h1 { font-size: 24px !important; }
  /* header actions wrap below + buttons go full width */
  [data-screen="train"] [data-train-header] > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 12px !important;
  }
  [data-screen="train"] [data-train-header] > div:last-child > div:last-child {
    flex-direction: column !important;
    width: 100%;
  }
  [data-screen="train"] [data-train-header] > div:last-child > div:last-child > button {
    width: 100%;
  }
  /* preset chips wrap onto multiple rows so they don't overflow */
  [data-screen="train"] [data-train-presets] {
    padding: 14px 18px !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  [data-screen="train"] [data-train-presets] > * {
    flex: 0 0 auto;
  }
  /* main grid → 1 col + sticky off */
  [data-screen="train"] [data-train-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-screen="train"] [data-train-main] {
    padding: 20px 14px !important;
    gap: 16px !important;
  }
  [data-screen="train"] [data-train-aside] {
    position: static !important;
    padding: 24px 18px !important;
    border-left: none !important;
    border-top: 1px solid var(--line) !important;
  }

  /* ===== AGENT footer — shrink letterblocks at the bottom of each screen ===== */
  [data-screen="launch"] [data-agent-footer],
  [data-screen="detail"] [data-agent-footer],
  [data-screen="train"] [data-agent-footer] {
    padding-top: 56px;
  }
}