/* ============================================================
   NEXORA · Mobile Shared (0–767px) — Premium thumb-first
   Upgraded to cover all command-center screens: Home/Learn/
   Playground/Skills/Community/Opportunities/Build/Settings.
   Single column, 44px targets, safe-area, bottom nav clearance.
   ============================================================ */

:root{
  --mobile-pad: max(.85rem, env(safe-area-inset-left));
  --mobile-pad-right: max(.85rem, env(safe-area-inset-right));
  --mobile-bottom: max(.85rem, env(safe-area-inset-bottom));
  /* Mobile density tokens (Phase: evolutionary compaction) */
  --mobile-card-pad: 1rem;
  --mobile-stack-gap: .95rem;
}

@media (max-width:767px){
  html{ scrollbar-gutter:auto; overflow-x:hidden }
  body{ overflow-x:hidden; max-width:100vw }
  :root{ --sb-slot:0px; --sb-w:0px }
  /* --tb-h / --content-gutter / --h-page-size mobile overrides live in
     theme/global.css (loaded after this file — cascade order). */

  /* Content fills viewport with safe margins and bottom nav clearance */
  .app-content{
    margin-left: var(--mobile-pad) !important;
    margin-right: var(--mobile-pad-right) !important;
    margin-bottom: calc(70px + var(--mobile-bottom) + var(--tb-top)) !important;
    max-width: calc(100vw - (var(--mobile-pad) + var(--mobile-pad-right))) !important;
    width:auto !important; box-sizing:border-box !important; overflow-x:hidden;
  }
  #app-topdock{ left:var(--mobile-pad) !important; right:var(--mobile-pad-right) !important; max-width:none !important; }

  /* Cards */
  .card{ border-radius:16px !important; padding:var(--mobile-card-pad) !important; box-sizing:border-box !important; max-width:100% !important; min-width:0 !important; overflow:hidden }
  .side-dock{ display:flex !important }

  /* Grids → single column on mobile (cover all new screens) */
  .home-grid, .account-grid, .settings-grid, .u-cards-2, .u-cards-3,
  .audience-grid, .discovery-results, .rooms-layout, .ai-grid,
  .learn-split, .playground-grid, .community-layout, .community-grid,
  .opps-hero-grid, .opps-deadlines, .feed-skeleton, .build-templates,
  .build-discovery, .skills-hero-grid, .skills-section-grid,
  .pg-rec-grid, .pg-tools-grid, .pg-stats, .opps-hero-grid,
  .build-quick-grid, .settings-layout{
    grid-template-columns:1fr !important; max-width:100% !important; min-width:0 !important;
  }
  /* keep stats 2-col where useful but ensure tappable */
  .snapshot-grid, .learn-stats, .hero-stat{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .pg-quick-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:.6rem !important; }
  .quick-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  .rec-grid, .pg-rec-grid{ grid-template-columns:1fr !important; }
  .u-cards-3{ grid-template-columns:1fr !important; }

  /* Chips: horizontal scroll, snap, 44px */
  .chip-row, .community-categories, .discovery-scroll,
  .settings-nav, #o-filters, #o-extended-filters, #pg-filter,
  #s-filter, #b-filter, #c-categories{
    display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; gap:.45rem !important; padding-bottom:.4rem;
  }
  .chip-row::-webkit-scrollbar, .community-categories::-webkit-scrollbar,
  .discovery-scroll::-webkit-scrollbar{ display:none }
  .chip, .cat-chip, .filter-chip, .sheet-chip, .chip-row .btn,
  .discovery-chip, .composer-chip, .pg-ai-chip{
    flex:none; scroll-snap-align:start; min-height:36px; white-space:nowrap;
  }
  .chip{ padding:.5rem .85rem !important; font-size:.78rem !important; }

  /* Tap targets 44px */
  .btn, .side-link, .td-icon-btn, .theme-toggle,
  .settings-nav-item, .opps-tab, .cat-chip, .filter-chip,
  .pg-quick, .build-quick, .qa-btn, .mission-task, .mission-row,
  .row-item, .pg-item, .post-card, .room-tile, .skill-card{
    min-height:44px;
  }
  .btn{ max-width:100%; box-sizing:border-box }
  .settings-nav-item{ min-height:44px; padding:.6rem .9rem !important; }
  .post-action{ min-height:36px; padding:.45rem .7rem !important; }

  /* Popups anchored below top dock */
  .ai-dock{ left:0 !important; right:0 !important; width:auto !important; border-radius:20px 20px 0 0 !important; max-height:78vh }
  .td-pop, .td-results, .community-results, .opps-results, .settings-search-results,
  .pg-results, .lh-results{ position:fixed !important; top:calc(var(--tb-top) + var(--tb-h) + .55rem) !important; left:var(--mobile-pad) !important; right:var(--mobile-pad-right) !important; width:auto !important; max-width:none !important; }

  /* Drawers → bottom sheets on mobile */
  .skills-drawer, .community-drawer, .opps-drawer, .build-drawer{
    top:auto !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important; max-height:84dvh !important; height:auto !important;
    border-radius:24px 24px 0 0 !important; border-left:0 !important; border-top:1px solid var(--border-strong) !important;
    animation: sheet-in .28s var(--ease-out) both !important;
  }
  .skills-drawer-backdrop, .community-drawer-backdrop, .opps-drawer-backdrop, .build-drawer-backdrop{
    background:rgba(0,0,0,.42) !important;
  }

  /* Sheets already bottom, keep */
  .settings-sheet, .community-drawer, .opps-sheet, .build-sheet{
    max-height:84dvh !important; border-radius:24px 24px 0 0 !important;
  }

  /* Search bars compress */
  .pg-search, .community-search, .opps-search, .settings-search, .build-search, .lh-search{
    padding:.7rem .9rem !important; gap:.5rem !important;
  }
  .pg-search input, .community-search input, .opps-search input, .settings-search input, .build-search input{
    font-size:.95rem !important;
  }
  .pg-search kbd, .community-search kbd, .opps-search kbd, .settings-search kbd{ display:none !important; }

  /* Composer entry stacks */
  .composer-entry{ flex-wrap:wrap !important; gap:.6rem !important }
  .composer-placeholder{ width:100% !important; flex:none !important; }
  .composer-actions{ width:100% !important; justify-content:flex-start !important; overflow-x:auto; flex-wrap:nowrap !important; scrollbar-width:none }
  .composer-actions::-webkit-scrollbar{ display:none }

  /* Home move panel */
  .move-panel{ padding:1rem !important; max-width:100% !important; box-sizing:border-box !important }
  .move-grid, .move-main, .move-side{ max-width:100% !important; min-width:0 !important; box-sizing:border-box !important }
  .move-grid{ grid-template-columns:1fr !important; gap:1.1rem !important }
  .move-side{ grid-template-columns:auto 1fr !important; justify-items:start !important; align-items:center !important; gap:.7rem 1rem !important; padding:.9rem 1rem !important }
  .ring-lg{ width:86px !important; height:86px !important; grid-row:1 / span 2; }
  .ring-lg .ring-text b{ font-size:1.4rem !important }
  .streak-chip{ align-self:flex-end !important; font-size:.8rem !important }
  .streak-sub{ grid-column:2; text-align:left !important; align-self:flex-start !important; margin-top:-.2rem }

  /* Rows */
  .row-item{ max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; padding:.7rem .8rem !important }
  .row-item .icon-tile{ width:34px !important; height:34px !important }
  .row-body{ min-width:0 !important }
  .row-body b{ white-space:normal !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

  /* Hero stacks */
  .hero-inner{ grid-template-columns:1fr !important }
  .hero-stage{ min-height:420px !important; overflow:hidden !important }
  .float-move{ width:min(236px, calc(100% - 1rem)) !important; left:0 !important }
  .float-proof, .float-match{ right:0 !important; max-width:calc(100% - 1rem) }

  /* Top dock hide chip */
  .td-screen{ display:none }

  /* Section heads prevent overflow + compact on phones */
  .section-head{ word-break:break-word; margin-bottom:clamp(1.75rem, 1.25rem + 2.5vw, 3rem) !important }
  .eyebrow{ margin-bottom:var(--space-4) !important }

  /* Playground & skills hero stack */
  .id-hero{ grid-template-columns:1fr !important; justify-items:center; text-align:center }
  .id-person{ flex-direction:column; text-align:center }
  .id-totals{ padding-inline:0; justify-content:center; flex-wrap:wrap }
  .skills-hero-grid{ grid-template-columns:1fr !important; justify-items:center; text-align:center; gap:1rem !important }
  .skills-radar{ width:150px !important; height:150px !important }
  .skills-toolbar{ flex-direction:column !important; align-items:stretch !important; gap:.6rem !important }
  .skills-toolbar-actions{ flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; gap:.4rem !important }
  .skills-toolbar-actions::-webkit-scrollbar{ display:none }
  .view-toggle{ flex:none }

  /* Build templates & quick */
  .build-templates{ grid-template-columns:1fr !important }
  .build-ai-input{ flex-direction:column !important; align-items:stretch !important }
  .build-ai-input textarea{ min-width:0 !important; width:100% !important }

  /* Profile hero mobile */
  .profile-hero-main{ grid-template-columns:1fr !important; justify-items:center; text-align:center; gap:1rem !important }
  .profile-hero-main .avatar{ justify-self:center }
  .profile-completion{ max-width:100% !important; width:100% !important }
  .profile-hero-actions{ width:100% !important; display:flex !important; gap:.5rem; justify-content:center; flex-wrap:wrap }

  /* Post cards */
  .post-card{ padding:.9rem !important; gap:.6rem !important }
  .post-actions{ flex-wrap:wrap !important; gap:.4rem !important }
  .post-actions .post-action{ padding:.4rem .6rem !important; font-size:.68rem !important }

  /* ---------- Evolutionary density (compact, dense-but-comfortable) -------
     Global shared-component compaction so every screen gets the same tighter
     rhythm on mobile. Targets the shared components at the source (cards,
     rows, panel heads, buttons, type, charts, stats) — not per-screen hacks. */

  /* Typography hierarchy on mobile */
  .h-page{ font-size:var(--h-page-size) !important }
  .screen-desc{ font-size:.88rem !important; line-height:1.5 !important }
  .greet-line{ font-size:.64rem !important }
  .panel-head{ margin-bottom:.85rem !important; gap:.6rem !important }
  .panel-head h3{ font-size:1rem !important }
  .panel-head .sub{ font-size:.62rem !important; letter-spacing:.06em !important }

  /* Spacing rhythm */
  .u-stack{ gap:.65rem !important }
  .u-stack-lg{ gap:var(--mobile-stack-gap) !important }
  .row-stack{ gap:.6rem !important }
  .home-screen, .build-screen, .settings-screen,
  .skills-screen, .opps-screen, .community-screen, .playground-screen{
    gap:.95rem !important;
  }
  .screen-head{ gap:.6rem !important }
  .home-welcome .welcome-meta{ margin-top:.7rem !important }

  /* Buttons — compact but tappable */
  .btn{ padding:.72rem 1.2rem !important; font-size:.9rem !important }
  .btn-sm{ padding:.5rem .95rem !important; font-size:.8rem !important }
  .link-arrow{ font-size:.88rem !important }

  /* Empty states, stats, goals */
  .empty-state{ padding:1.05rem .9rem !important; gap:.35rem !important }
  .empty-state p{ font-size:.85rem !important }
  .empty-state span{ font-size:.74rem !important }
  .snap-kpi{ padding:.75rem .85rem !important; gap:.3rem !important }
  .snap-kpi b{ font-size:1.2rem !important }
  .goal-wrap{ gap:.7rem !important }
  .goal-bar{ height:7px !important }

  /* Home details */
  .mv-title{ font-size:1.3rem !important }
  .mv-why{ padding:.7rem .85rem !important; margin-bottom:.9rem !important }
  .mv-meta{ margin-bottom:.75rem !important }
  .mv-skills{ margin-bottom:1rem !important }
  .mission-grid{ margin-top:.8rem !important; gap:.5rem !important }
  .mission-task{ padding:.75rem .85rem !important }
  .rec-card{ padding:.85rem .95rem !important; gap:.55rem !important }
  .rec-card h4{ font-size:.9rem !important }
  .streak-week{ margin-top:.15rem !important }
  .streak-dot{ width:26px !important; height:26px !important; font-size:.58rem !important }
  .id-verified{ margin-top:.9rem !important; padding-top:.85rem !important; gap:.5rem !important }

  /* Dashboard charts — shorter on phones, same look */
  .chart-wrap{ min-height:72px !important }
  .chart-bars{ height:72px !important }
  .chart-line{ height:72px !important }
  .chart-donut{ width:110px !important; height:110px !important }

  /* Cross-screen grid gaps */
  .account-screen .ac-content{ gap:1.4rem !important }
  .account-screen .ac-summary-grid{ gap:.65rem !important }
  .settings-grid{ gap:.9rem !important }
  .learn-split{ gap:1.1rem !important }
  .playground-grid{ gap:1rem !important }
  .opps-hero-grid{ gap:.7rem !important }
  .opps-deadlines{ gap:.7rem !important }
  .feed-skeleton{ gap:.7rem !important }
  .skills-section-grid{ gap:.7rem !important }
  .build-templates{ gap:.65rem !important }
  .build-quick-grid{ gap:.6rem !important }
  .community-layout{ gap:1rem !important }
  .profile-hero-main{ gap:.85rem !important }

  /* Status icons slightly tighter on phones */
  .ms-ic{ width:32px !important; height:32px !important; min-width:32px !important; min-height:32px !important }
  .ms-ic .icon{ width:16px !important; height:16px !important }

  /* Lesson screen */
  .lsn-head{ padding-bottom:1rem !important; margin-bottom:1.2rem !important }
  .lsn-head h1{ font-size:1.45rem !important }
  .lsn-summary{ font-size:.95rem !important }
  .lsn-crumbs{ margin-bottom:.7rem !important }
  .lsn-review-check{ padding:.9rem 1rem !important; margin-top:1rem !important }
}

@supports (height:100dvh){
  @media (max-width:767px){
    .ai-dock{ height:78dvh }
    .skills-drawer, .community-drawer, .opps-drawer, .build-drawer{ max-height:84dvh }
  }
}