/* static/dash/TreeSelectorMobileNew.css
   MOBILE PUBLIC nav — CLEAN REBUILD (single source of truth)
   - Mobile hides desktop chessboard + rails
   - Mobile nav is fixed; content starts under nav stack (once)
   - Slug panel has its own scroll
   - HOME can hide slug via .m-public-nav.is-home (class from callback)

   Contracts:
   - No rounded corners
   - YTM host (.shell-main.ytm-host) keeps its own scroll contract (no page scroll)
   - Finance panels scroll inside .finance-full/.finance-fx-full under fixed nav
*/

:root{
  /* fixed mobile stack */
  --m-h: 54px;                 /* topbar */
  --m-nonfin-h: 34px;          /* nonfin strip */
  --m-slug-h: 62px;            /* slug header block height (toggle+search area approx) */
  --m-stack-h: calc(var(--m-h) + var(--m-nonfin-h) + var(--m-slug-h));

  /* spacing */
  --m-pad: 10px;
  --m-gap: 8px;

  /* text */
  --m-text: rgba(255,255,255,0.92);
  --m-dim: rgba(255,255,255,0.70);

  /* active cool silver */
  --silver-a: rgba(255,255,255,0.98);
  --silver-b: rgba(244,247,252,0.96);
  --silver-c: rgba(228,234,244,0.92);
  --silver-d: rgba(206,214,228,0.90);
  --active-text: rgba(0,0,0,0.92);

  /* idle gradient */
  --idle-g-a: rgba(0,0,0,0.78);
  --idle-g-b: rgba(0,0,0,0.54);
  --idle-g-c: rgba(0,0,0,0.34);

  /* panels */
  --glass-top: rgba(5,5,7,0.50);
  --panel-bg: rgba(0,0,0,0.86);
  --shadow-1: 0 12px 28px rgba(0,0,0,0.65);
  --shadow-2: 0 18px 40px rgba(0,0,0,0.72);
}

/* hard rule: never round */
*{ border-radius:0 !important; }

/* desktop default (mobile nav hidden) */
.m-public-nav-host{ display:none; }

/* =============================================================================
   MOBILE BREAKPOINT — GLOBAL UNLOCK + DESKTOP KILL + FULL BLEED
============================================================================= */
@media (max-width: 920px){

  /* (A) page can scroll by default (unless YTM host overrides) */
  html, body{
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    scrollbar-gutter: auto !important; /* kill desktop stable-gutter */
  }

  /* (B) HARD KILL: desktop top UI */
  #top-nav,
  .top-chessboard{
    display:none !important;
  }

  /* (C) HARD KILL: desktop rails & variants */
  .slug-shell.subsidebar,
  #left-panel,
  #slug-panel,
  .nonfin-rail,
  .nonfin-shell,
  .nonfin-sidebar,
  .left-rail,
  .shell-left-rail,
  .shell-rail-left{
    display:none !important;
  }

  /* (D) kill 3-col layout leftovers (grid -> block) */
  .shell-grid-3{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow: visible !important;
    box-sizing:border-box !important;
  }

  /* zero out desktop padding math vars used in TreeSelector.css */
  :root{
    --shell-slug: 0px !important;
    --left-rail-w: 0px !important;
    --slug-pad-x: 0px !important;
    --shell-safe-pad: 0px !important;
  }

  /* (E) full bleed content chain */
  .shell-root,
  #content,
  #content.shell-main,
  #content > .shell-main{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
    overflow: visible !important; /* do not trap scroll */
  }

  /* (F) show mobile nav */
  .m-public-nav-host{ display:block !important; }
  .m-public-nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:3000;
    pointer-events:auto;
  }

  /* (G) apply "under fixed nav" offset ONLY ONCE (outermost shell-main) */
  #content > .shell-main{
    padding: var(--m-stack-h) 0 18px 0 !important;
    transform:none !important;
  }

  /* (H) prevent nested shell-main re-renders from adding extra top padding */
  .shell-main .shell-main{
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* (I) defensive: kill centered containers that squeeze width */
  #content > .shell-main > *{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }

  /* (J) YTM contract: if YTM mounted, do NOT add top padding; keep host mode */
  #content > .shell-main.ytm-host{
    padding-top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
  }
}

/* =============================================================================
   TOPBAR (mobile)
============================================================================= */
.m-topbar{
  height: var(--m-h);
  display:grid;
  grid-template-columns: var(--m-h) 1fr 90px;
  align-items:stretch;

  background-color: var(--glass-top);
  background-image: linear-gradient(
    180deg,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.35) 55%,
    rgba(0,0,0,0.18) 100%
  );
  box-shadow: var(--shadow-1);
  border:none;
}

.m-left{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* LOGO */
.m-brand-tile{
  width: calc((var(--m-h) - 8px) * 1.5);
  height: calc((var(--m-h) - 8px) * 1.5);
  transform: scale(0.78);
  transform-origin:center;

  background: linear-gradient(180deg, var(--idle-g-a) 0%, var(--idle-g-b) 48%, var(--idle-g-c) 100%);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.72),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset;
  position:relative;
}
.m-brand-tile[data-logo="logo1"]::before{
  content:"";
  position:absolute;
  inset:10%;
  background:url("/static/img/logo1at.png") center/contain no-repeat;
  opacity:0.92;
}

/* title */
.m-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  user-select:none;
}
.m-title-main{
  color: var(--m-text);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:13px;
  line-height:1.1;
}
.m-title-sub{
  color: var(--m-dim);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:10.5px;
  line-height:1.1;
}

/* menu button */
.m-menu-toggle{
  border:none;
  background: linear-gradient(180deg, var(--idle-g-a) 0%, var(--idle-g-b) 48%, var(--idle-g-c) 100%);
  color: var(--m-text);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12.5px;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.72),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset;
}

/* =============================================================================
   MENU PANEL
============================================================================= */
.m-menu-panel{
  display:none;
  background: var(--panel-bg);
  box-shadow: var(--shadow-2);
  max-height: calc(100dvh - var(--m-h) - var(--m-nonfin-h) - 70px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.m-menu-panel.is-open{ display:block; }

.m-menu-inner{
  padding: var(--m-pad);
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.m-menu-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--m-gap);
}
.m-menu-grid--secondary{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.m-menu-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 8px;
  text-decoration:none;

  color: var(--m-text);
  background: linear-gradient(180deg, var(--idle-g-a) 0%, var(--idle-g-b) 48%, var(--idle-g-c) 100%);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.72),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset;

  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  line-height:1.05;
  transition: background .12s ease, box-shadow .12s ease, color .12s ease;
}
.m-menu-btn:hover{
  background: rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 12px 26px rgba(0,0,0,0.70);
}
.m-menu-btn.is-active{
  color: var(--active-text);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.26) 0%,
      rgba(255,255,255,0.10) 28%,
      rgba(0,0,0,0.00) 66%
    ),
    linear-gradient(135deg,
      var(--silver-a) 0%,
      var(--silver-b) 32%,
      var(--silver-c) 68%,
      var(--silver-d) 100%
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.16) inset,
    0 12px 26px rgba(0,0,0,0.70);
}
.m-menu-btn.is-active:hover{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.34) 0%,
      rgba(255,255,255,0.14) 28%,
      rgba(0,0,0,0.00) 66%
    ),
    linear-gradient(135deg,
      var(--silver-a) 0%,
      var(--silver-b) 32%,
      var(--silver-c) 68%,
      var(--silver-d) 100%
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 14px 30px rgba(0,0,0,0.72);
}

/* =============================================================================
   NONFIN STRIP
============================================================================= */
.m-nonfin-strip{
  background: var(--panel-bg);
  box-shadow: 0 12px 26px rgba(0,0,0,0.65);
  padding: 8px 10px;

  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--m-gap);
}

.m-nonfin-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height: var(--m-nonfin-h);
  text-decoration:none;

  color: var(--m-text);
  background: linear-gradient(180deg, var(--idle-g-a) 0%, var(--idle-g-b) 48%, var(--idle-g-c) 100%);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.72),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset;

  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  line-height:1;
}
.m-nonfin-btn:hover{
  background: rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 12px 26px rgba(0,0,0,0.70);
}
.m-nonfin-btn.is-active{
  color: var(--active-text);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.26) 0%,
      rgba(255,255,255,0.10) 28%,
      rgba(0,0,0,0.00) 66%
    ),
    linear-gradient(135deg,
      var(--silver-a) 0%,
      var(--silver-b) 32%,
      var(--silver-c) 68%,
      var(--silver-d) 100%
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.16) inset,
    0 12px 26px rgba(0,0,0,0.70);
}
.m-nonfin-btn.is-active:hover{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.34) 0%,
      rgba(255,255,255,0.14) 28%,
      rgba(0,0,0,0.00) 66%
    ),
    linear-gradient(135deg,
      var(--silver-a) 0%,
      var(--silver-b) 32%,
      var(--silver-c) 68%,
      var(--silver-d) 100%
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 14px 30px rgba(0,0,0,0.72);
}

/* =============================================================================
   SLUG BLOCK
============================================================================= */
.m-slug-wrap{
  background: var(--panel-bg);
  box-shadow: 0 12px 26px rgba(0,0,0,0.65);
  padding: var(--m-pad);

  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* HOME: hide slug (callback adds .is-home on .m-public-nav) */
.m-public-nav.is-home .m-slug-wrap{ display:none !important; }

.m-slug-toggle{
  height: 44px;
  border:none;
  text-align:left;
  padding: 0 12px;

  color: var(--m-text);
  background: linear-gradient(180deg, var(--idle-g-a) 0%, var(--idle-g-b) 48%, var(--idle-g-c) 100%);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.72),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset;

  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
}

.m-slug-panel{ display:none; }
.m-slug-panel.is-open{ display:block; }

.m-slug-search{
  width:100%;
  height: 40px;
  padding: 0 10px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.72);
  color: var(--m-text);
  outline:none;
}

.m-slug-list{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-top: 8px;

  max-height: calc(100dvh - var(--m-stack-h) - 98px); /* safe-ish */
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.m-slug-item{
  display:block;
  text-decoration:none;
  padding: 10px 10px;

  color: var(--m-text);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;

  letter-spacing:.09em;
  text-transform:uppercase;
  font-size:12px;
}
.m-slug-item:hover{
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset;
}
.m-slug-item.is-active{
  color: var(--active-text);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.26) 0%,
      rgba(255,255,255,0.10) 28%,
      rgba(0,0,0,0.00) 66%
    ),
    linear-gradient(135deg,
      var(--silver-a) 0%,
      var(--silver-b) 32%,
      var(--silver-c) 68%,
      var(--silver-d) 100%
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.16) inset,
    0 12px 26px rgba(0,0,0,0.70);
}

/* =============================================================================
   MAIN wrapper toggles
============================================================================= */
.nonfin-main-mobile{ display:none; }
.nonfin-main-desktop{ display:block; }
@media (max-width: 920px){
  .nonfin-main-mobile{ display:block; }
  .nonfin-main-desktop{ display:none; }
}

/* =============================================================================
   MOBILE ALL layout helper (nonfin “ALL”)
============================================================================= */
@media (max-width: 920px){
  .ytm-mall-root{
    padding: var(--m-pad);
    display:block;
    box-sizing:border-box;
  }

  .ytm-mall-section{ margin: 0 0 14px 0; }

  .ytm-mall-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    text-decoration:none;
    color: inherit;
    margin: 0 0 8px 0;
  }

  .ytm-mall-title{
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.92;
  }

  .ytm-mall-sub{
    font-size: 12px;
    opacity: 0.65;
  }

  .ytm-mall-rowstrip{
    display:flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .ytm-mall-rowstrip .ytm-row{
    flex: 0 0 auto;
    min-width: 280px;
    max-width: 320px;
  }
}

/* =============================================================================
   FINANCE — ONE scroller under fixed nav (NO :has)
   Applies to: .finance-full or .finance-fx-full
============================================================================= */
@media (max-width: 920px){

  /* parent shells must not trap scroll */
  .shell-root,
  .shell-grid-3,
  #content,
  .shell-main{
    overflow: visible !important;
  }

  /* finance becomes the scroll surface under the fixed nav stack
     IMPORTANT: shell-main already has padding-top (outermost), so finance margin-top=0 */
  .finance-full,
  .finance-fx-full{
    margin-top: 0 !important;

    height: calc(100dvh - var(--m-stack-h)) !important;
    max-height: calc(100dvh - var(--m-stack-h)) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    padding: 10px 10px 18px 10px !important;
    box-sizing: border-box !important;

    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.25) transparent;
  }

  .finance-full::-webkit-scrollbar,
  .finance-fx-full::-webkit-scrollbar{ width: 8px; }
  .finance-full::-webkit-scrollbar-track,
  .finance-fx-full::-webkit-scrollbar-track{ background: transparent; }
  .finance-full::-webkit-scrollbar-thumb,
  .finance-fx-full::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.15);
  }

  /* AT stacking on mobile */
  .finance-full .chart-toprow,
  .finance-fx-full .chart-toprow{ display:block !important; }

  .finance-full .chart-side,
  .finance-fx-full .chart-side{
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 10px !important;
  }

  /* Plotly sometimes eats touch scroll */
  .finance-full .js-plotly-plot,
  .finance-full .plot-container,
  .finance-fx-full .js-plotly-plot,
  .finance-fx-full .plot-container{
    touch-action: pan-y !important;
  }
}