/* ============================================================================
   TreeSelector.css (PUBLIC) — CLEAN REBUILD — EDGE-PINNED (FULL FILE)
   - NO ROUNDED CORNERS
   - NO pixel grids / no 3×3 overlay
   - Hover effect: FONT SCALE +10%
   - Active/Selected effect: FONT SCALE +20%
   - NO “silver/white board” after click
   - NO logo swaps on active (always keep idle logo assets visible)
   ========================================================================== */

/* ───────────────── TOKENS ───────────────── */
:root{
  --bg-page:#000;

  --text:#e5e7eb;
  --text-dim:#cbd5e1;
  --text-faint:#9ca3af;

  /* typography */
  --fs-base:14px;
  --fs-ui-sm:13px;
  --fs-meta:12px;
  --ui-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* chess geometry */
  --chess-tile:150px;
  --chess-sub-h: calc(var(--chess-tile) * .5);

  /* ROW1 scale (logos inside a 150px cell) */
  --row1-scale: 0.80;
  --row1-tile: calc(var(--chess-tile) * var(--row1-scale));

  /* rails */
  --shell-slug: var(--chess-tile);
  --left-rail-w: var(--chess-tile);
  --slug-pad-x: 4px;
  --shell-safe-pad: 0px; /* EDGE-PINNED */

  /* NONFIN sizing */
  --nonfin-tile: calc(var(--chess-tile) * 0.8);
  --nonfin-btn-h: calc(var(--nonfin-tile) * 0.5);

  /* TOP SAFE HEIGHT */
  --top-safe-h: max(
    var(--row1-tile),
    calc(var(--chess-sub-h) + var(--nonfin-btn-h))
  );

  /* label */
  --label-shadow: 0 2px 10px rgba(0,0,0,0.78);

  /* idle gradient (unselected) */
  --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);
  --idle-text: rgba(255,255,255,0.86);

  /* optional dim */
  --idle-opacity: 0.72;

  /* scrollbar */
  --sb-w: 8px;
  --sb-thumb: rgba(0,0,0,.25);
  --sb-border: rgba(255,255,255,.15);

  /* quick auth width */
  --quick-auth-w: calc(2 * var(--chess-tile));
}

/* ───────────────── RESET / BASE ───────────────── */
html, body{
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;

  scrollbar-width:thin;
  scrollbar-color:var(--sb-thumb) transparent;
  scrollbar-gutter: stable both-edges;
}
body{
  font-size:var(--fs-base);
  background:var(--bg-page);
  color:var(--text);
  font-family:var(--ui-font);
  line-height:1.5;
}

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

/* shared webkit scrollbars (only where overflow is enabled) */
body::-webkit-scrollbar,
.shell-main::-webkit-scrollbar,
.slug-shell.subsidebar::-webkit-scrollbar{ width:var(--sb-w); }

body::-webkit-scrollbar-track,
.shell-main::-webkit-scrollbar-track,
.slug-shell.subsidebar::-webkit-scrollbar-track{ background:transparent; }

body::-webkit-scrollbar-thumb,
.shell-main::-webkit-scrollbar-thumb,
.slug-shell.subsidebar::-webkit-scrollbar-thumb{
  background:var(--sb-thumb);
  border:1px solid var(--sb-border);
}

/* ───────────────── SHELL ROOT ───────────────── */
.shell-root{
  height:100vh;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
  font-family:var(--ui-font);
}

/* ───────────────── GRID (PUBLIC disables left sidebar placeholder) ───────────────── */
.shell-grid-3{
  flex:1 1 auto;
  display:grid !important;
  grid-template-columns: 0px 1fr 0px !important;
  column-gap:0;
  min-height:0;
  overflow:hidden;
  align-items:stretch;
  box-sizing:border-box;
}
.shell-grid-3 > *{ min-width:0; min-height:0; }
.shell-grid-3 > .left-shell{ grid-column:1 !important; }
.shell-grid-3 > .shell-main{ grid-column:2 !important; }
.shell-grid-3 > .slug-shell{ grid-column:3 !important; }

/* PUBLIC: left sidebar disabled */
.left-shell.sidebar{ display:none !important; }

/* ───────────────── MAIN CONTENT ───────────────── */
.shell-main{
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;

  padding:
    calc(var(--shell-safe-pad) + var(--top-safe-h))
    calc(var(--shell-safe-pad) + var(--shell-slug))
    18px
    calc(var(--shell-safe-pad) + var(--left-rail-w));

  box-sizing:border-box;
  overscroll-behavior: contain;

  scrollbar-width:thin;
  scrollbar-color:var(--sb-thumb) transparent;
}

/* ───────────────── HOST MODE — keep inner apps full height ───────────────── */
/* NOTE: kept because you rely on it in Public shell */
.shell-main:has(.browser-ytb-root){
  overflow:hidden !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
.shell-main:has(.ytm-root),
.shell-main:has(.ytm-all-root),
.shell-main:has(.ytmPmain-root),
.shell-main:has(.browser-ytb-main-root),
.shell-main:has(.browser-ytb-root){
  overflow:hidden !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
.shell-main:has(.ytm-root) > *,
.shell-main:has(.ytm-all-root) > *,
.shell-main:has(.ytmPmain-root) > *,
.shell-main:has(.browser-ytb-main-root) > *,
.shell-main:has(.browser-ytb-root) > *{
  min-height:0 !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.shell-main .ytm-root,
.shell-main .ytm-all-root,
.shell-main .ytmPmain-root,
.shell-main .browser-ytb-main-root,
.shell-main .browser-ytb-root{
  min-height:0 !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  max-width:100% !important;
}

/* ───────────────── SLUG SIDEBAR (FIXED RIGHT RAIL) ───────────────── */
.slug-shell.subsidebar{
  position:fixed !important;
  right:0 !important;
  top: var(--top-safe-h) !important;

  width: var(--shell-slug) !important;
  min-width: var(--shell-slug) !important;
  max-width: var(--shell-slug) !important;

  height: calc(100vh - var(--top-safe-h)) !important;
  padding:8px var(--slug-pad-x) 10px;
  box-sizing:border-box;

  background:transparent;
  border:none;

  overflow-y:auto !important;
  overflow-x:hidden !important;
  z-index:650 !important;

  overscroll-behavior: contain;

  scrollbar-width:thin;
  scrollbar-color:var(--sb-thumb) transparent;
}

/* slug search (sticky) */
.slug-search-input{
  width:100%;
  margin:0 0 8px 0;
  padding:6px 8px;

  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.72);
  color:rgba(255,255,255,0.88);
  font-size:var(--fs-ui-sm);
  box-sizing:border-box;
  outline:none;
  font-family:var(--ui-font);
  font-weight:400;

  position:sticky;
  top:0;
  z-index:900;
}
.slug-search-input::placeholder{ color:rgba(255,255,255,0.35); }
.slug-search-input:focus{ border-color:rgba(255,255,255,0.22); }

/* tree layout */
.tree{ display:flex; flex-direction:column; gap:16px; }
.tree-card{ background:transparent; border:none; padding:0; margin:0; }
.tree-empty{ opacity:.7; font-size:var(--fs-meta); padding:8px 10px; color:var(--text-faint); }

.shell-root .slug-shell.subsidebar a.sub-link{
  display:block;
  width:100%;
  text-decoration:none;
  color:inherit;
  position:relative;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* slug button (base) */
.tree-btn{
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:center;

  font-family:var(--ui-font);
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(255,255,255,0.84);
  background:transparent !important;
  border:none;

  padding:10px 6px;
  margin:0;

  user-select:none;
  line-height:1.15;
  position:relative;
  z-index:5;

  font-size:12px !important;

  white-space: normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  hyphens:auto !important;

  /* scale-only interactions */
  transform: scale(1);
  transform-origin:center center;
  transition: transform .11s ease, color .11s ease, opacity .11s ease;
  will-change: transform;
}

/* hard lock spacing so it never "grows" from padding/font-size changes */
.shell-root .slug-shell.subsidebar :is(
  .tree-btn,
  a.sub-link:hover > .tree-btn,
  a.sub-link:focus-visible > .tree-btn,
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  padding:10px 6px !important;
  line-height:1.15 !important;
  font-size:12px !important;
  -webkit-text-size-adjust:100% !important;
  zoom:1 !important;
}

/* ───────────────── TOP UI SAFE BAR ───────────────── */
.top-chessboard{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;

  height: var(--top-safe-h) !important;
  z-index:2000 !important;

  overflow:visible !important;
  box-sizing:border-box;

  background-color: rgba(5,5,7,0.38) !important;
  background-image: linear-gradient(
    180deg,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.34) 55%,
    rgba(0,0,0,0.16) 100%
  ) !important;

  border:none !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.65) !important;
  outline:none !important;
}
.top-chessboard::before,
.top-chessboard::after{ content:none !important; display:none !important; }
.top-chessboard .chess-brand{ display:none !important; }

/* inner wrappers should not paint */
.top-chessboard :is(.chess-grid, .chess-grid-top, .chess-grid-sub, .top-nonfin-strip){
  background:transparent !important;
}

/* keep tiles above */
.top-chessboard > *{ position:relative; z-index:1; }

/* ───────────────── ROW1: VERTICAL LEFT RAIL ───────────────── */
.top-chessboard .chess-grid{
  position:absolute;
  margin:0;
  padding:0;
  overflow:visible !important;
}
.top-chessboard .chess-grid-top{
  top:0;
  left:0;

  display:grid !important;
  grid-template-columns: var(--chess-tile) !important;
  grid-auto-rows: var(--chess-tile) !important;
  grid-auto-flow: row !important;
  gap:0;

  width: var(--chess-tile) !important;
  max-width: var(--chess-tile) !important;
}

/* ───────────────── ROW2: TOP STRIP ───────────────── */
.top-chessboard .chess-grid-sub{
  top:0;
  left: var(--chess-tile);
  right: calc(var(--row1-tile) + var(--quick-auth-w)) !important;

  height: var(--chess-sub-h) !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:0 !important;

  align-items:stretch !important;
  justify-content:flex-start !important;

  overflow:hidden !important;
}

/* ───────────────── TILE BASE LOOK ───────────────── */
.chess-tile{
  width:var(--chess-tile);
  height:var(--chess-tile);
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;

  text-decoration:none;
  user-select:none;

  font-family:var(--ui-font);
  font-size:12px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--idle-text);

  background:
    linear-gradient(180deg,
      var(--idle-g-a) 0%,
      var(--idle-g-b) 48%,
      var(--idle-g-c) 100%
    ) !important;

  border:none;

  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 !important;

  position:relative;
  overflow:visible;
  isolation:isolate;

  transition: opacity .12s ease, box-shadow .12s ease, color .12s ease;
  pointer-events:auto !important;
}

/* IMPORTANT: remove ALL overlay/pixel pseudo-surfaces */
.top-chessboard .chess-tile::after{ content:none !important; display:none !important; background:none !important; }

.chess-tile.empty{
  visibility:hidden;
  pointer-events:none;
  box-shadow:none !important;
  background:transparent !important;
}

/* label baseline */
.chess-tile .tile-label{
  z-index:110;
  display:inline-block;
  text-shadow: var(--label-shadow);
  font-weight:400 !important;

  transform: scale(1);
  transform-origin:center center;
  transition: transform .11s ease;
  will-change: transform;
}

/* Dim idle items (optional) */
.top-chessboard .chess-tile:not(.empty):not(.active):not([aria-selected="true"]){
  opacity: var(--idle-opacity);
}
.top-chessboard .chess-tile:not(.empty):hover{ opacity:1; }
.top-chessboard .chess-tile:is(.active,[aria-selected="true"]){ opacity:1; }

/* ───────────────── ROW1 (logos) ───────────────── */
/* base logo layer (NEVER swapped) */
.top-chessboard .chess-grid-top .chess-tile::before{
  content:"";
  position:absolute;
  left:50%;
  top:38%;
  transform: translate(-50%, -50%);
  width:85%;
  height:85%;
  z-index:90;
  pointer-events:none;

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  opacity:0.40; /* idle default */
}

/* idle logos ONLY (no active variants) */
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo1"]::before{ background-image:url("/static/img/logo1at.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo2"]::before{ background-image:url("/static/img/logo2at.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo3"]::before{ background-image:url("/static/img/logo3at.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo4"]::before{ background-image:url("/static/img/logo4at.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo5"]::before{ background-image:url("/static/img/logo5art2.png") !important; }
.top-chessboard .chess-grid-top .chess-tile[data-logo="logo9"]::before{ background-image:url("/static/img/logo1client.png") !important; }

/* hover OR active => logo brighter (same effect) */
.top-chessboard .chess-grid-top .chess-tile:not(.empty):hover::before,
.top-chessboard .chess-grid-top .chess-tile:is(.active,[aria-selected="true"])::before{
  opacity:0.88 !important;
}

/* ROW1 shrink inside 150px grid cell */
.top-chessboard .chess-grid-top .chess-tile:not(.empty){
  width:  var(--row1-tile) !important;
  height: var(--row1-tile) !important;
  justify-self:center !important;
  align-self:center !important;
  margin:auto !important;
}

/* ROW1 label: bottom centered (no plate) */
.top-chessboard .chess-grid-top .chess-tile .tile-label{
  position:absolute;
  left:50% !important;
  bottom:8px !important;
  transform: translateX(-50%) scale(1) !important;

  text-align:center !important;
  width: calc(100% - 14px) !important;

  background:transparent !important;
  padding:0 !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;

  font-size:15px !important;
  letter-spacing:.09em !important;
  line-height:1.06 !important;
  z-index:120 !important;
  transform-origin:center center !important;
}

/* ───────────────── ROW2 tiles: HALF HEIGHT, NO LOGOS ───────────────── */
.top-chessboard .chess-grid-sub .chess-tile{
  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-height: var(--chess-sub-h) !important;

  align-items:center;
  justify-content:center;

  font-size:12.9px !important;
  letter-spacing:.10em !important;

  box-shadow: 0 6px 14px rgba(0,0,0,0.50);
}
.top-chessboard .chess-grid-sub .chess-tile::before{ content:none !important; display:none !important; }

/* row2 label: ellipsis-safe */
.top-chessboard .chess-grid-sub .tile-label{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.05;
  padding:0 6px;
  text-align:right;
  text-shadow:none !important;
}

/* ───────────────── NONFIN STRIP (horizontal under ROW2) ───────────────── */
.top-chessboard .top-nonfin-strip{
  position:fixed !important;
  top: var(--chess-sub-h) !important;
  left: var(--chess-tile) !important;
  right: calc(var(--row1-tile) + (2 * var(--chess-tile))) !important;

  height: var(--nonfin-btn-h) !important;
  z-index:1600 !important;

  overflow:visible !important;
  pointer-events:auto !important;
  background:transparent !important;
}

/* container */
.top-chessboard .top-nonfin-strip :is(.nonfin-switch-wrap,.nonfin-switch){
  height:100% !important;
  width:100% !important;

  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:0 !important;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
  border:none !important;
}

/* button look */
.top-chessboard .top-nonfin-strip .nonfin-switch-btn{
  width: var(--nonfin-tile) !important;
  height: var(--nonfin-btn-h) !important;

  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-family:var(--ui-font) !important;
  font-size:12.9px !important;
  font-weight:400 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  line-height:1.05 !important;

  color:var(--idle-text) !important;
  background:
    linear-gradient(180deg,
      var(--idle-g-a) 0%,
      var(--idle-g-b) 48%,
      var(--idle-g-c) 100%
    ) !important;

  border:none !important;

  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 !important;

  position:relative !important;
  isolation:isolate !important;
  text-decoration:none !important;

  opacity: var(--idle-opacity);
  transition: transform .11s ease, opacity .12s ease, box-shadow .12s ease, color .12s ease !important;

  transform: scale(1);
  transform-origin:center center;
  will-change: transform;
}

/* no pseudo overlays */
.top-chessboard .top-nonfin-strip .nonfin-switch-btn::before,
.top-chessboard .top-nonfin-strip .nonfin-switch-btn::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* active/hover opacity */
.top-chessboard .top-nonfin-strip .nonfin-switch-btn:hover{ opacity:1; }
.top-chessboard .top-nonfin-strip .nonfin-switch-btn.is-active{ opacity:1; }

/* ───────────────── FONT SCALE HOVER/ACTIVE (ALL BUTTONS) ───────────────── */
@media (hover:hover){
  /* TOP tiles: scale label only */
  .top-chessboard .chess-tile:not(.empty):hover .tile-label,
  .top-chessboard .chess-tile:not(.empty):focus-visible .tile-label{
    transform: scale(1.10) !important;
  }

  /* NONFIN: scale whole button text (button itself) */
  .top-chessboard .top-nonfin-strip .nonfin-switch-btn:hover,
  .top-chessboard .top-nonfin-strip .nonfin-switch-btn:focus-visible{
    transform: scale(1.10) !important;
  }

  /* SLUG: scale button */
  .shell-root .slug-shell.subsidebar a.sub-link:hover > .tree-btn,
  .shell-root .slug-shell.subsidebar a.sub-link:focus-visible > .tree-btn,
  .shell-root .slug-shell.subsidebar .tree-btn:hover,
  .shell-root .slug-shell.subsidebar .tree-btn:focus-visible{
    transform: scale(1.10) !important;
  }
}

/* ACTIVE/SELECTED = +20% */
.top-chessboard .chess-tile:is(.active,[aria-selected="true"]) .tile-label{
  transform: scale(1.20) !important;
}

.top-chessboard .top-nonfin-strip .nonfin-switch-btn.is-active{
  transform: scale(1.20) !important;
}

.shell-root .slug-shell.subsidebar :is(
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  transform: scale(1.20) !important;
}

/* ───────────────── PINNED PUBLIC TILES — edge aligned (viewport) ───────────────── */
/* Dashboard pinned TOP-RIGHT — ONLY the USER TILE (logo9 / data-pin) */
.shell-root .top-chessboard :is(
  [data-pin="dashboard"],
  .chess-grid-top .chess-tile[data-logo="logo9"],
  a[href*="#/auth"]
){
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  margin:0 !important;

  width: var(--row1-tile) !important;
  height: var(--row1-tile) !important;

  z-index:2600 !important;

  display:flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* dashboard label: bottom centered */
.shell-root .top-chessboard :is(
  [data-pin="dashboard"],
  .chess-grid-top .chess-tile[data-logo="logo9"],
  a[href*="#/auth"]
) .tile-label{
  position:absolute !important;
  left:50% !important;
  bottom:8px !important;
  transform: translateX(-50%) scale(1) !important;
  width: calc(100% - 14px) !important;
  text-align:center !important;
  background: transparent !important;
  padding:0 !important;
  text-shadow: var(--label-shadow) !important;
  font-weight:400 !important;
}

/* About + Terms pinned BOTTOM-LEFT */
.shell-root .top-chessboard .public-about-terms{
  position:fixed !important;
  left:0 !important;
  bottom:0 !important;

  width: var(--chess-tile) !important;

  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;

  padding:0 !important;
  margin:0 !important;

  z-index:2500 !important;
  overflow:visible !important;
  pointer-events:auto !important;
}
.shell-root .top-chessboard .public-about-terms > *{
  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:none !important;
  text-decoration:none !important;
}

/* ───────────────── PUBLIC QUICK AUTH — dock next to My Dashboard ───────────────── */
/* reserve space so ROW2 normal tiles don't run under avatar + quick auth */
.top-chessboard .chess-grid-sub{
  right: calc(var(--row1-tile) + var(--quick-auth-w)) !important;
}

/* pin the wrapper directly left of avatar tile */
.shell-root .top-chessboard .public-quick-auth{
  position:fixed !important;
  top:0 !important;
  right: var(--row1-tile) !important;
  left:auto !important;

  width: var(--quick-auth-w) !important;
  height: var(--chess-sub-h) !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:0 !important;

  z-index:2555 !important;
  pointer-events:auto !important;
}

/* make the two tiles inside behave like ROW2 tiles */
.shell-root .top-chessboard .public-quick-auth > a.chess-tile{
  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-height: var(--chess-sub-h) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  position:relative !important;
}

/* center labels (Offer/Google) */
.shell-root .top-chessboard .public-quick-auth > a.chess-tile .tile-label{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  height:100% !important;

  padding:0 !important;
  margin:0 !important;

  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  text-shadow:none !important;
  line-height:1 !important;
}

/* neutralize any older rules pinned offer/google by href elsewhere */
.shell-root .top-chessboard :is(
  a[href*="/offer"], a[href*="/pricing"], a[href*="/google"], a[href*="/accounts/google/login"]
){
  left:auto !important;
}

/* ───────────────── SEO iframe host mode ───────────────── */
.shell-main:has(.seo-embed-iframe){
  overflow:hidden !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
.seo-embed-host{
  flex:1 1 auto !important;
  min-height:0 !important;
  min-width:0 !important;
  width:100% !important;
  height:100% !important;
}
.seo-embed-iframe{
  flex:1 1 auto !important;
  min-height:0 !important;
  min-width:0 !important;
}

/* ───────────────── KEYBOARD FOCUS BASELINE ───────────────── */
.top-chessboard .chess-tile:focus-visible,
.top-chessboard .top-nonfin-strip .nonfin-switch-btn:focus-visible,
.shell-root .slug-shell.subsidebar a.sub-link:focus-visible > .tree-btn,
.shell-root .slug-shell.subsidebar .tree-btn:focus-visible{
  outline: 1px solid rgba(255,255,255,0.22) !important;
  outline-offset: -2px !important;
}

/* ───────────────── HOMEPAGE: hide right slug rail ───────────────── */
/* Trigger: .shell-root.is-homepage (set in public_shell_base.py callback) */
.shell-root.is-homepage .slug-shell{ display:none !important; }
.shell-root.is-homepage .left-shell.sidebar{ display:none !important; }

/* collapse 3-column grid -> single column */
.shell-root.is-homepage .shell-grid-3{
  display:grid !important;
  grid-template-columns: 1fr !important;
}

/* remove reserved space for right rail but KEEP scroll */
.shell-root.is-homepage .shell-main{
  padding-right: 10px !important;
  margin-right: 0 !important;
  overflow:auto !important;
  min-width: 0 !important;
}

/* optional hard-hide by body class */
body.hp-hide-slugrail .slug-shell.subsidebar{
  position:absolute !important;
  right:-99999px !important;
}

/* scrollbar gutter tweaks */
html, body{ scrollbar-gutter: auto !important; }
.shell-main,
.slug-shell.subsidebar{ scrollbar-gutter: stable !important; }


/* =========================
   FONT SCALE (2× stronger)
   - Hover: was 1.10 -> now 1.20
   - Active: was 1.20 -> now 1.40
   Paste at END of TreeSelector.css
   ========================= */

@media (hover:hover){
  /* TOP tiles */
  .top-chessboard .chess-tile:not(.empty):hover .tile-label,
  .top-chessboard .chess-tile:not(.empty):focus-visible .tile-label{
    transform: scale(1.15) !important;
  }

  /* NONFIN */
  .top-chessboard .top-nonfin-strip .nonfin-switch-btn:hover,
  .top-chessboard .top-nonfin-strip .nonfin-switch-btn:focus-visible{
    transform: scale(1.15) !important;
  }

  /* SLUG */
  .shell-root .slug-shell.subsidebar a.sub-link:hover > .tree-btn,
  .shell-root .slug-shell.subsidebar a.sub-link:focus-visible > .tree-btn,
  .shell-root .slug-shell.subsidebar .tree-btn:hover,
  .shell-root .slug-shell.subsidebar .tree-btn:focus-visible{
    transform: scale(1.15) !important;
  }
}

/* ACTIVE/SELECTED */
.top-chessboard .chess-tile:is(.active,[aria-selected="true"]) .tile-label{
  transform: scale(1.30) !important;
}

.top-chessboard .top-nonfin-strip .nonfin-switch-btn.is-active{
  transform: scale(1.30) !important;
}

.shell-root .slug-shell.subsidebar :is(
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  transform: scale(1.30) !important;
}



/* ============================================================================
   PUBLIC SHELL — SEO-like cluster next to Dashboard (Offer + About + Terms)
   - No bottom-left about/terms
   - No Google
   - Uses existing DOM: .public-about-terms + .public-quick-auth
   ========================================================================== */

/* 1) Cluster sizing: reserve 3 tiles next to avatar */
:root{
  --public-cluster-count: 3;
  --public-cluster-w: calc(var(--public-cluster-count) * var(--chess-tile));
}

/* Row2 must not run under avatar + cluster */
.shell-root .top-chessboard .chess-grid-sub{
  right: calc(var(--row1-tile) + var(--public-cluster-w)) !important;
}

/* 2) ABOUT+TERMS: move from bottom-left to top-right cluster (LEFT part) */
.shell-root .top-chessboard .public-about-terms{
  position:fixed !important;
  top:0 !important;
  right: calc(var(--row1-tile) + var(--chess-tile)) !important; /* sits left of Offer tile */
  left:auto !important;
  bottom:auto !important;

  width: calc(2 * var(--chess-tile)) !important;
  height: var(--chess-sub-h) !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:0 !important;

  z-index:2555 !important;
  pointer-events:auto !important;
}

/* make both tiles behave like ROW2 tiles */
.shell-root .top-chessboard .public-about-terms > a.chess-tile{
  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-height: var(--chess-sub-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* center labels (row2 style) */
.shell-root .top-chessboard .public-about-terms > a.chess-tile .tile-label{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  padding:0 10px !important;
  margin:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-shadow:none !important;
  line-height:1 !important;
}

/* 3) OFFER: keep pinned next to avatar (RIGHT part) */
.shell-root .top-chessboard .public-quick-auth{
  position:fixed !important;
  top:0 !important;
  right: var(--row1-tile) !important;
  left:auto !important;

  width: var(--chess-tile) !important; /* only Offer tile */
  height: var(--chess-sub-h) !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:0 !important;

  z-index:2555 !important;
  pointer-events:auto !important;
}

.shell-root .top-chessboard .public-quick-auth > a.chess-tile{
  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-height: var(--chess-sub-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.shell-root .top-chessboard .public-quick-auth > a.chess-tile .tile-label{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  padding:0 10px !important;
  margin:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-shadow:none !important;
  line-height:1 !important;
}

/* 4) kill any legacy "bottom-left" feel (safety) */
.shell-root .top-chessboard .public-about-terms{
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
}



/* SLUG (right rail): brighter text for active item */
.shell-root .slug-shell.subsidebar :is(
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  color: rgba(255,255,255,0.98) !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.18), var(--label-shadow) !important;
  opacity: 1 !important;
}

/* SLUG (right rail): dim text for non-active items */
.shell-root .slug-shell.subsidebar a.sub-link > .tree-btn{
  color: rgba(255,255,255,0.52) !important;
  opacity: 0.85 !important;
  text-shadow: none !important;
}

/* keep active bright (leave as-is if you already pasted it) */
.shell-root .slug-shell.subsidebar :is(
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  color: rgba(255,255,255,0.98) !important;
  opacity: 1 !important;
}



/* ============================================================================
   EXTENDED — pin "My Channels" + "Watchlist" next to "My Dashboard"
   - fixed tiles, ROW2-size (half height)
   - hard size lock (no shrink / no growth)
   - reserves space so subrow doesn't go underneath
   ========================================================================== */

/* reserve ROW2 space for 2 pinned tiles next to avatar */
:root{
  --dash-tools-count: 2;
  --dash-tools-w: calc(var(--dash-tools-count) * var(--chess-tile));
}

/* make normal subrow stop before pinned block (avatar + tools) */
.shell-root .top-chessboard .chess-grid-sub{
  right: calc(var(--row1-tile) + var(--dash-tools-w)) !important;
}

/* PIN: Watchlist (closest to avatar) */
.shell-root .top-chessboard .chess-grid-sub a.chess-tile[href^="#/watchlist"]{
  position:fixed !important;
  top:0 !important;
  right: var(--row1-tile) !important;

  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-width: var(--chess-tile) !important;
  max-width: var(--chess-tile) !important;
  min-height: var(--chess-sub-h) !important;
  max-height: var(--chess-sub-h) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  z-index:2555 !important;
  flex:0 0 auto !important;
}

/* PIN: My Channels (left of Watchlist) */
.shell-root .top-chessboard .chess-grid-sub a.chess-tile[href^="#/my_channels"]{
  position:fixed !important;
  top:0 !important;
  right: calc(var(--row1-tile) + var(--chess-tile)) !important;

  width: var(--chess-tile) !important;
  height: var(--chess-sub-h) !important;
  min-width: var(--chess-tile) !important;
  max-width: var(--chess-tile) !important;
  min-height: var(--chess-sub-h) !important;
  max-height: var(--chess-sub-h) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  z-index:2555 !important;
  flex:0 0 auto !important;
}

/* labels: center + no resizing jitter */
.shell-root .top-chessboard .chess-grid-sub :is(
  a.chess-tile[href^="#/my_channels"],
  a.chess-tile[href^="#/watchlist"]
) .tile-label{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  height:100% !important;

  padding:0 10px !important;
  margin:0 !important;

  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-shadow:none !important;

  /* hard lock typography so hover/active doesn't reflow */
  font-size:12.9px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

/* keep them from scaling themselves (only text scaling elsewhere) */
.shell-root .top-chessboard .chess-grid-sub :is(
  a.chess-tile[href^="#/my_channels"],
  a.chess-tile[href^="#/watchlist"]
){
  transform:none !important;
}










/* ===========================
   DASH LOADING OVERLAY (inside iframe)
   - no rounded corners
   - no full blackout
   =========================== */

/* output container MUST be relative */
#content.shell-main{
  position: relative;
  min-height: 100%;
}

/* overlay plane */
#content.shell-main[data-dash-is-loading="true"]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 9999;
  pointer-events:none;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.10);
}

/* spinner + label */
#content.shell-main[data-dash-is-loading="true"]::after{
  content:"LOADING…";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  z-index: 10000;
  pointer-events:none;

  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.82);
  color: rgba(255,255,255,0.86);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;

  /* minimalist "pulse" (no colors) */
  animation: aaPulse 0.85s ease-in-out infinite;
}

@keyframes aaPulse{
  50%{ opacity:0.55; }
}




/* dcc.Loading overlay tuning */
.dash-loading{
  opacity: 1 !important;
}
.dash-loading *{
  border-radius: 0 !important;
}







/* =============================================================================
FIX: DETAIL VIEW scroll on SHELL-MAIN (so wheel works over fixed top UI)
Trigger: when DETAIL stack is mounted (.ytd-root exists)

Effect:
- shell-main becomes the single vertical scroller
- ytd-root stops being a scroller (no nested Y scroll)
- keeps left/right rail padding + top-safe padding
============================================================================= */

/* 1) In DETAIL mode: allow shell-main to scroll vertically again */
.shell-main:has(.ytd-root){
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* keep your rails + top safe space */
  padding-top: calc(var(--shell-safe-pad) + var(--top-safe-h)) !important;
  padding-right: calc(var(--shell-safe-pad) + var(--shell-slug)) !important;
  padding-bottom: 18px !important;
  padding-left: calc(var(--shell-safe-pad) + var(--left-rail-w)) !important;

  display: block !important;  /* kill flex host assumptions for this mode */
  min-height: 0 !important;
}

/* 2) In DETAIL mode: ytd-root must NOT be a vertical scroller */
.shell-main:has(.ytd-root) .ytd-root{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;    /* <-- critical */
  padding: 14px !important;        /* keep your inner spacing */
}

/* 3) Make sure nothing forces ytd-root back to 100% height */
.shell-main:has(.ytd-root) :is(.ytd-root, .ytd-container, .ytd-tab-body){
  min-height: 0 !important;
}

/* 4) Safety: if some old host rules set overflow:hidden on shell-main, neutralize them for DETAIL */
.shell-main:has(.ytd-root).ytm-host,
.shell-main:has(.ytd-root).ytm-host.ytm-mounted{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: calc(var(--shell-safe-pad) + var(--top-safe-h)) !important;
  padding-right: calc(var(--shell-safe-pad) + var(--shell-slug)) !important;
  padding-left: calc(var(--shell-safe-pad) + var(--left-rail-w)) !important;
}


/* =============================================================================
FIX: ALL VIEW scroll on SHELL-MAIN (so bottom isn't clipped + wheel works over top UI)
Trigger: when ALL overview is mounted (.ytm-all-root exists)

Effect:
- shell-main becomes the single vertical scroller
- ytm-all-root stops being a scroller (no nested Y scroll)
- keeps left/right rail padding + top-safe padding
============================================================================= */

/* 1) In ALL mode: allow shell-main to scroll vertically again */
.shell-main:has(.ytm-all-root){
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* keep your rails + top safe space */
  padding-top: calc(var(--shell-safe-pad) + var(--top-safe-h)) !important;
  padding-right: calc(var(--shell-safe-pad) + var(--shell-slug)) !important;
  padding-bottom: 18px !important;
  padding-left: calc(var(--shell-safe-pad) + var(--left-rail-w)) !important;

  display: block !important; /* neutralize flex host-mode for this view */
  min-height: 0 !important;
}

/* 2) In ALL mode: ytm-all-root must NOT be a vertical scroller */
.shell-main:has(.ytm-all-root) .ytm-all-root{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important; /* <-- critical */
  padding: 0 !important;        /* ytm-all-root already has inner padding in its own CSS */
}

/* 3) Safety: if some old host rules set overflow:hidden on shell-main, neutralize them for ALL */
.shell-main:has(.ytm-all-root).ytm-host,
.shell-main:has(.ytm-all-root).ytm-host.ytm-mounted{
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding-top: calc(var(--shell-safe-pad) + var(--top-safe-h)) !important;
  padding-right: calc(var(--shell-safe-pad) + var(--shell-slug)) !important;
  padding-left: calc(var(--shell-safe-pad) + var(--left-rail-w)) !important;
  padding-bottom: 18px !important;

  display: block !important;
}