/* =====================================================
   MOBILE PRODUCT SHELL
   Loaded after feature styles so phone layout has one owner.
   ===================================================== */
.mobile-appbar,
.mobile-bottom-nav,
.mobile-more-sheet,
.mobile-more-backdrop{display:none}

@media(max-width:820px){
  body.ui-redesign-v2{
    --mobile-appbar-h:58px;
    --mobile-nav-h:72px;
    overflow:hidden;
    overscroll-behavior:none;
    background:var(--bg);
  }

  .ui-redesign-v2 .sidebar{display:none}
  .ui-redesign-v2 .app-shell{
    display:block;
    height:100dvh;
    min-height:0;
    padding:var(--mobile-appbar-h) 0 0;
    box-sizing:border-box;
  }
  .ui-redesign-v2 .shell{
    width:100%;
    height:calc(100dvh - var(--mobile-appbar-h));
    min-height:0;
    overflow:hidden;
  }

  /* Compact app chrome */
  .ui-redesign-v2 .mobile-appbar{
    display:flex;
    position:fixed;
    inset:0 0 auto;
    z-index:180;
    height:calc(var(--mobile-appbar-h) + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 14px 0;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    box-sizing:border-box;
    border-bottom:1px solid var(--border);
    background:color-mix(in srgb,var(--bg-topbar) 88%,transparent);
    box-shadow:0 8px 30px rgba(15,23,42,.07);
    backdrop-filter:blur(20px) saturate(1.25);
    -webkit-backdrop-filter:blur(20px) saturate(1.25);
  }
  .ui-redesign-v2 .mobile-appbar-brand{
    min-width:0;
    height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0;
    border:0;
    color:var(--text-bright);
    background:none;
    text-align:left;
    box-shadow:none;
  }
  .ui-redesign-v2 .mobile-appbar-brand::after{display:none}
  .ui-redesign-v2 .mobile-appbar-brand img{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 7px 18px rgba(15,23,42,.10);
  }
  .ui-redesign-v2 .mobile-appbar-brand>span{
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
  }
  .ui-redesign-v2 .mobile-appbar-brand strong{
    max-width:180px;
    overflow:hidden;
    color:var(--text-bright);
    font-size:16px;
    font-weight:820;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .ui-redesign-v2 .mobile-appbar-brand small{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--score-high);
    font-size:10px;
    font-weight:800;
    letter-spacing:0;
  }
  .ui-redesign-v2 .mobile-appbar-brand small i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--score-high);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--score-high) 14%,transparent);
  }
  .ui-redesign-v2 .mobile-appbar-search{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text-secondary);
    background:var(--bg-card);
    box-shadow:var(--shadow-card);
  }
  .ui-redesign-v2 .mobile-appbar-search svg{width:20px;height:20px}
  .ui-redesign-v2 .mobile-appbar-search:active{transform:scale(.95)}

  /* Desktop topbar becomes a focused search overlay only. */
  .ui-redesign-v2 .topbar{display:none}
  body.ui-redesign-v2.mobile-search-open .topbar{
    display:flex;
    position:fixed;
    z-index:175;
    top:calc(var(--mobile-appbar-h) + env(safe-area-inset-top));
    left:10px;
    right:10px;
    height:62px;
    padding:8px;
    border:1px solid var(--border-glow);
    border-radius:14px;
    background:color-mix(in srgb,var(--bg-card) 94%,transparent);
    box-shadow:0 20px 50px rgba(15,23,42,.18);
  }
  body.ui-redesign-v2.mobile-search-open .topbar::after,
  body.ui-redesign-v2.mobile-search-open .topbar-right{display:none}
  body.ui-redesign-v2.mobile-search-open .topbar-search-wrap{
    width:100%;
    height:44px;
    max-width:none;
    border:0;
    box-shadow:none;
  }
  body.ui-redesign-v2.mobile-search-open .topbar-kb{display:none}

  /* Bottom navigation */
  .ui-redesign-v2 .mobile-bottom-nav{
    display:grid;
    position:fixed;
    z-index:180;
    left:10px;
    right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    height:64px;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    padding:5px;
    border:1px solid var(--border);
    border-radius:18px;
    background:color-mix(in srgb,var(--bg-topbar) 90%,transparent);
    box-shadow:0 18px 44px rgba(15,23,42,.18),inset 0 1px rgba(255,255,255,.28);
    backdrop-filter:blur(22px) saturate(1.3);
    -webkit-backdrop-filter:blur(22px) saturate(1.3);
  }
  .ui-redesign-v2 .mobile-bottom-nav button{
    min-width:0;
    min-height:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:4px 2px;
    border:0;
    border-radius:13px;
    color:var(--text-muted);
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .ui-redesign-v2 .mobile-bottom-nav button::after{display:none}
  .ui-redesign-v2 .mobile-bottom-nav button svg{width:21px;height:21px;transition:transform .18s ease}
  .ui-redesign-v2 .mobile-bottom-nav button span{font-size:10px;font-weight:700;line-height:1.1;white-space:nowrap}
  .ui-redesign-v2 .mobile-bottom-nav button.active{
    color:var(--accent);
    background:var(--accent-dim);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);
  }
  .ui-redesign-v2 .mobile-bottom-nav button.active svg{transform:translateY(-1px)}
  .ui-redesign-v2 .mobile-bottom-nav button:active{transform:scale(.94)}

  /* More destinations as a bottom sheet instead of another crowded row. */
  .ui-redesign-v2 .mobile-more-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:190;
    border:0;
    background:rgba(3,10,18,.48);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }
  .ui-redesign-v2 .mobile-more-backdrop[hidden],
  .ui-redesign-v2 .mobile-more-sheet[hidden]{display:none!important}
  .ui-redesign-v2 .mobile-more-sheet{
    display:block;
    position:fixed;
    z-index:200;
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    padding:8px 14px 18px;
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--bg-card);
    box-shadow:0 28px 80px rgba(3,10,18,.30);
    transform:translateY(18px);
    opacity:0;
    transition:transform .22s ease,opacity .18s ease;
  }
  .ui-redesign-v2 .mobile-more-sheet.is-open{transform:translateY(0);opacity:1}
  .ui-redesign-v2 .mobile-more-handle{
    width:38px;
    height:4px;
    margin:0 auto 10px;
    border-radius:999px;
    background:var(--border-strong,var(--border));
  }
  .ui-redesign-v2 .mobile-more-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 2px 12px;
  }
  .ui-redesign-v2 .mobile-more-head small{display:block;color:var(--accent);font-size:10px;font-weight:800}
  .ui-redesign-v2 .mobile-more-head h2{margin:2px 0 0;color:var(--text-bright);font-size:20px;letter-spacing:0}
  .ui-redesign-v2 .mobile-more-close{
    width:38px;
    height:38px;
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text-secondary);
    background:var(--bg-card-2);
    font-size:24px;
    line-height:1;
  }
  .ui-redesign-v2 .mobile-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ui-redesign-v2 .mobile-more-grid button{
    min-height:78px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:4px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    color:var(--text-bright);
    background:var(--bg-card-2);
    text-align:left;
  }
  .ui-redesign-v2 .mobile-more-grid button strong{font-size:14px}
  .ui-redesign-v2 .mobile-more-grid button span{color:var(--text-muted);font-size:11px;line-height:1.35}
  .ui-redesign-v2 .mobile-more-grid button:active{border-color:var(--accent);background:var(--accent-dim);transform:scale(.98)}

  /* One scroll owner per route. */
  .ui-redesign-v2 .db-home,
  .ui-redesign-v2 .plain-section{
    width:100%;
    max-width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:12px 12px;
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
    box-sizing:border-box;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    scroll-padding-bottom:100px;
  }
  .ui-redesign-v2 .plain-section{overflow-x:hidden}
  .ui-redesign-v2 :is(.db-home,.plain-section)>*{max-width:100%;box-sizing:border-box}
  .ui-redesign-v2 :is(img,video,canvas,svg){max-width:100%}

  /* Dashboard: same intelligence density, mobile reading order. */
  .ui-redesign-v2 .db-home{gap:10px}
  .ui-redesign-v2 .db-hero{
    min-height:82px;
    grid-template-columns:1fr;
    gap:0;
    padding:14px 16px;
    border-radius:14px;
    background:var(--bg-card);
    box-shadow:var(--shadow-card);
  }
  .ui-redesign-v2 .db-hero::before{
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px);
    background-size:26px 100%;
    mask-image:linear-gradient(90deg,transparent,black 38%,transparent);
  }
  .ui-redesign-v2 .db-hero::after{right:14px;top:14px;width:6px;height:6px}
  .ui-redesign-v2 .db-hero-text{padding-right:24px}
  .ui-redesign-v2 .db-hero-title{margin:0 0 5px;font-size:19px;line-height:1.22;letter-spacing:0}
  .ui-redesign-v2 .db-hero-sub{font-size:11.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ui-redesign-v2 .db-hero-art{display:none}

  .ui-redesign-v2 .db-kpi-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .ui-redesign-v2 .db-kpi-row .stat-card{
    width:auto;
    min-width:0;
    min-height:116px;
    padding:13px 13px 11px;
    border-radius:14px;
    box-shadow:var(--shadow-card);
  }
  .ui-redesign-v2 .db-kpi-row .stat-card:last-child:nth-child(odd){grid-column:1/-1;min-height:102px}
  .ui-redesign-v2 .stat-card::before{width:3px}
  .ui-redesign-v2 .db-kpi-row .stat-label{font-size:11px}
  .ui-redesign-v2 .db-kpi-row .stat-value{font-size:25px;line-height:1.15}
  .ui-redesign-v2 .db-kpi-row .stat-sub{font-size:10.5px}
  .ui-redesign-v2 .db-kpi-row .stat-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
  .ui-redesign-v2 .db-kpi-row .stat-meta{min-width:0;overflow:hidden;font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}
  .ui-redesign-v2 .db-kpi-row .stat-trend{justify-self:end}

  .ui-redesign-v2 .dashboard-top-row{grid-template-columns:1fr;gap:10px}
  .ui-redesign-v2 .dashboard-side-synced{height:auto;min-height:0;max-height:none}
  .ui-redesign-v2 #hotTopicsWrap{order:1}
  .ui-redesign-v2 #bolePicksWrap{order:2}
  .ui-redesign-v2 .db-panel-ai-stream{order:3}
  .ui-redesign-v2 .db-panel{
    min-width:0;
    padding:14px;
    gap:8px;
    border-radius:14px;
    box-shadow:var(--shadow-card);
  }
  .ui-redesign-v2 .db-panel-hd{align-items:flex-start;gap:8px}
  .ui-redesign-v2 .db-panel-title{font-size:15px}
  .ui-redesign-v2 .db-inline-tabs,
  .ui-redesign-v2 .filter-tabs{
    width:100%;
    max-width:100%;
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .ui-redesign-v2 .db-inline-tabs::-webkit-scrollbar,
  .ui-redesign-v2 .filter-tabs::-webkit-scrollbar{display:none}
  .ui-redesign-v2 .filter-tab{min-height:36px;flex:0 0 auto;scroll-snap-align:start}
  .ui-redesign-v2 .hot-topics-list{gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
  .ui-redesign-v2 .hot-topic-card{
    margin:0;
    padding:12px;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    box-shadow:none;
    background:transparent;
  }
  .ui-redesign-v2 .hot-topic-card:last-child{border-bottom:0}
  .ui-redesign-v2 .ai-mini-list,
  .ui-redesign-v2 #bolePicksWrap .bole-board,
  .ui-redesign-v2 #bolePicksWrap #bolePicksList{max-height:none;overflow:visible!important}
  .ui-redesign-v2 .ai-mini-item,
  .ui-redesign-v2 .priority-compact-item{min-height:58px;padding:10px;border-radius:10px}
  .ui-redesign-v2 .db-bottom-3col{grid-template-columns:1fr;gap:10px}
  .ui-redesign-v2 .db-bottom-3col>.db-panel{height:auto;min-height:0}

  /* Route headers and dense feeds */
  .ui-redesign-v2 .plain-section>.section-head,
  .ui-redesign-v2 #aiRadarWrap>.section-head{
    position:relative;
    width:100%;
    margin:0 0 10px;
    padding:12px 2px;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .ui-redesign-v2 .plain-section>.section-head h2{font-size:20px;line-height:1.25}
  .ui-redesign-v2 .section-eyebrow{font-size:9px}
  .ui-redesign-v2 .plain-section-desc{font-size:11px;line-height:1.5}
  .ui-redesign-v2 :is(.news-card,.story-card,.ai-card,.tl-card,.daily-report-card,.source-nav-card,.sr-card){
    min-width:0;
    padding:13px;
    border-radius:13px;
    box-shadow:var(--shadow-card);
  }
  .ui-redesign-v2 :is(.news-card .title,.story-card-title,.ai-card-title,.tl-card-title,.sr-card h3){
    font-size:15px;
    line-height:1.48;
  }
  .ui-redesign-v2 :is(.card-summary,.item-summary,.ai-item-summary,.tl-card .item-summary){
    font-size:12px;
    line-height:1.65;
    -webkit-line-clamp:3;
  }
  .ui-redesign-v2 :is(.tl-card-top,.news-card-top,.ai-card-head){align-items:flex-start;gap:8px;flex-wrap:wrap}
  .ui-redesign-v2 .tl-card-score-wrap{margin-left:0}
  .ui-redesign-v2 :is(.news-list,.timeline-list,.ai-intel-list,.daily-report-list,.sr-card-grid){gap:8px}
  .ui-redesign-v2 :is(.coverage-grid,.insight-grid,.agent-actions-grid,.about-capability-grid,.workbench-grid){grid-template-columns:1fr}
  .ui-redesign-v2 :is(.sr-toolbar,.calendar-controls,.featured-category-bar,.ai-tab-bar){max-width:100%;overflow-x:auto;scrollbar-width:none}
  .ui-redesign-v2 .ai-tab-bar{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start}
  .ui-redesign-v2 .ai-tab-bar>*{flex:0 0 auto}

  .ui-redesign-v2 .tl-filter-bar{gap:4px;padding:8px 10px;border-radius:13px}
  .ui-redesign-v2 .tl-filter-group,
  .ui-redesign-v2 .tl-filter-group--cats{
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    max-width:100%;
    padding:2px 0;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .ui-redesign-v2 .tl-filter-group::-webkit-scrollbar{display:none}
  .ui-redesign-v2 .tl-filter-label{
    position:sticky;
    left:0;
    z-index:2;
    min-width:40px;
    padding:6px 8px 6px 2px;
    background:var(--bg-card);
  }
  .ui-redesign-v2 .tl-filter-btn{min-height:30px;flex:0 0 auto;padding:4px 10px;white-space:nowrap}

  /* Calendar stays feature-complete while becoming a vertical work surface. */
  .ui-redesign-v2 .hot-calendar-section{padding:0!important;overflow-x:hidden}
  .ui-redesign-v2 .hot-calendar-official{min-width:0!important;padding:0 0 12px!important}
  .ui-redesign-v2 :is(.hc-official-hero,.hc-hero-main,.hc-dashboard-grid,.hc-overview-grid,.hc-main-grid,.hc-strategy-grid,.hc-drawer-grid){grid-template-columns:1fr!important}
  .ui-redesign-v2 :is(.hc-official-hero,.hc-panel,.hc-month-card,.hc-phase-card){border-radius:14px!important}
  .ui-redesign-v2 :is(.hc-toolbar,.hc-filter-row,.hc-chip-row){max-width:100%;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}

  /* Touch feedback replaces desktop hover lift. */
  .ui-redesign-v2 :where(button,a,[role="button"]){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .ui-redesign-v2 :where(.news-card,.story-card,.ai-card,.tl-card,.priority-compact-item,.daily-report-card,.source-nav-card,.sr-card,.hot-topic-card):active{
    transform:scale(.992);
    border-color:var(--border-glow);
    background:var(--bg-card-2);
  }
}

@media(max-width:430px){
  .ui-redesign-v2 .mobile-appbar-brand strong{max-width:145px}
  .ui-redesign-v2 .db-home,
  .ui-redesign-v2 .plain-section{padding-left:10px;padding-right:10px}
  .ui-redesign-v2 .db-kpi-row .stat-card{min-height:112px;padding:12px}
  .ui-redesign-v2 .mobile-bottom-nav{left:8px;right:8px}
}

@media(max-width:360px){
  .ui-redesign-v2 .mobile-appbar-brand strong{max-width:118px;font-size:15px}
  .ui-redesign-v2 .mobile-appbar-brand>span{gap:6px}
  .ui-redesign-v2 .mobile-bottom-nav button span{font-size:9px}
  .ui-redesign-v2 .mobile-more-grid{grid-template-columns:1fr}
}

@media(max-width:820px) and (hover:none){
  .ui-redesign-v2 :where(.db-panel,.stat-card,.news-card,.story-card,.ai-card,.tl-card,.priority-compact-item,.daily-report-card,.source-nav-card,.sr-card,.hot-topic-card):hover{
    transform:none;
    border-color:var(--border);
    box-shadow:var(--shadow-card);
  }
}

@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .ui-redesign-v2 .mobile-more-sheet,
  .ui-redesign-v2 .mobile-bottom-nav button,
  .ui-redesign-v2 .mobile-appbar-search{transition:none!important}
}
