/* dash/yt_forecast.css
   YT Forecast — MATCH YT BROWSER + MAIN (COOL SILVER / 90°)

   CONTRACT (DO NOT BREAK):
   ✅ Vertical scroll (ALL + SLUG): .ytf-vscroll-host
   ✅ SLUG horizontal scroll: .ytf-carousel (overflow-x:auto, overflow-y:hidden)
   ✅ INDEX horizontal scroll per row: .ytf-rowgrid (overflow-x:auto, overflow-y:hidden)
   ✅ No rounded corners
*/

/* ============ TOKENS (mirror yt_channel_browser.css) ============ */
:root{
  --ytf-seam: rgba(255,255,255,0.08);
  --ytf-a: rgba(255,255,255,0.03);
  --ytf-b: rgba(255,255,255,0.06);

  --ytf-text: rgba(255,255,255,0.92);
  --ytf-mute: rgba(255,255,255,0.62);

  --ytf-chip2: rgba(0,0,0,0.45);

  --ytf-pad: 14px;
  --ytf-rowgap: 16px;

  /* geometry */
  --ytf-card-w: 380px;            /* slug cards (carousel) */
  --ytf-tile-w: 240px;            /* index tiles (like browser cards) */

  /* thumb height follows MAIN if exists */
  --ytf-thumb-h: var(--ytm-thumb-h, 136px);

  --ytf-gap: 1px;

  /* typography */
  --ytf-fs-rowhead: 14px;
  --ytf-fs-title: 13px;
  --ytf-fs-meta: 12px;
  --ytf-fs-chip: 11px;

  --ytf-lh-title: 1.25;

  /* box spacing */
  --ytf-box-gap: 10px;
  --ytf-body-pad: 12px;

  /* evidence */
  --ytf-ev-ts-w: 64px;

  /* safety */
  --ytf-safe-bottom: 84px;
}

/* ============ HARD RESET (no radius, safe sizing) ============ */
.shell-main :where(.ytf-mount,
                   .ytf-vscroll-host,
                   .ytf-root,
                   .ytf-grid,
                   .ytf-row,
                   .ytf-rowgrid,
                   .ytf-carousel,
                   .ytf-card,
                   .ytf-tile,
                   .ytf-thumbwrap,
                   .ytf-head,
                   .ytf-box,
                   .ytf-tile-meta){
  border-radius: 0 !important;
  box-sizing: border-box;
  min-width: 0;
}

/* =========================================================
   ONE TRUE V-SCROLLER (works even if shell has overflow hidden)
   Requires renderer markup:
     <div class="ytf-mount">
       <div class="ytf-vscroll-host ..."> ... </div>
     </div>
   ========================================================= */

/* allow flex children to shrink (critical for scroll) */
.shell-main,
.shell-main > *{
  min-height: 0 !important;
}

/* mount: takes available height, does NOT scroll */
.shell-main .ytf-mount{
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;

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

  overflow: hidden !important;
}

/* vertical scroll owner */
.shell-main .ytf-vscroll-host{
  flex: 1 1 auto !important;
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;

  /* bottom safety so last content isn't clipped */
  padding-bottom: max(var(--ytf-safe-bottom), 24px) !important;
}

/* inner blocks must be allowed to shrink */
.shell-main .ytf-vscroll-host > *{
  min-height: 0 !important;
}

/* =========================================================
   ROOT (layout only; NEVER vertical-scroll here)
   ========================================================= */
.shell-main .ytf-root{
  width: 100%;
  max-width: calc(100vw - var(--rail-w) - var(--shell-slug) - 48px);
  margin: 0 auto;
  padding: 0;
  background: transparent;

  overflow: visible !important; /* never clip */
}

.shell-main .ytf-empty{
  color: var(--ytf-mute);
  padding: 14px;
  border-top: 1px solid var(--ytf-seam);
  border-bottom: 1px solid var(--ytf-seam);
  background: rgba(0,0,0,0.14);
}

/* =======================================================================
   SLUG VIEW — CAROUSEL (HORIZONTAL SCROLL) — HARD CONTRACT
   ======================================================================= */
.shell-main .ytf-carousel{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  gap: var(--ytf-gap);
  background: var(--ytf-seam);
  padding: var(--ytf-gap);

  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scrollbar-gutter: stable both-edges;
}

.shell-main .ytf-carousel::-webkit-scrollbar{ height: 10px; }
.shell-main .ytf-carousel::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); }
.shell-main .ytf-carousel::-webkit-scrollbar-track{ background: rgba(0,0,0,0.20); }

/* =======================================================================
   SLUG VIEW — CARD
   ======================================================================= */
.shell-main .ytf-card{
  flex: 0 0 auto;
  width: var(--ytf-card-w);
  min-width: var(--ytf-card-w);
  scroll-snap-align: start;

  border: 1px solid var(--ytf-seam) !important;
  background: rgba(0,0,0,0.22) !important;

  color: var(--ytf-text);
  position: relative;

  overflow: visible; /* details can grow */
}

@media (max-width: 900px){
  .shell-main .ytf-card{
    width: 78vw;
    min-width: 78vw;
  }
}

.shell-main .ytf-card:hover{
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(0,0,0,0.28) !important;
}

/* =======================================================================
   SLUG VIEW — HEADER
   ======================================================================= */
.shell-main .ytf-head{
  padding: 10px;
  border-bottom: 1px solid var(--ytf-seam);
  background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.14));
}

/* link stack: thumb + channel/date row */
.shell-main .ytf-thumbstack-link{
  display: flex;
  flex-direction: column;
  gap: 8px;

  width: 240px;     /* matches index tile width */
  max-width: 100%;
  flex: 0 0 auto;

  text-decoration: none !important;
  color: inherit !important;

  overflow: visible; /* never clip glass title */
}

/* thumb */
.shell-main .ytf-thumbwrap{
  position: relative;
  width: 100%;
  height: var(--ytf-thumb-h);

  border: 1px solid var(--ytf-seam) !important;
  background: rgba(0,0,0,0.22) !important;

  overflow: hidden; /* clip only image */
}

/* tile thumb variant keeps same geometry */
.shell-main .ytf-thumbwrap--tile{
  height: var(--ytf-thumb-h);
  border-bottom: 1px solid var(--ytf-seam) !important;
}

/* image */
.shell-main .ytf-thumb-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
}

.shell-main .ytf-thumb-img--empty{
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.06);
}

/* GLASS title at bottom edge (ON THUMB) */
.shell-main .ytf-title-glass{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  /* title touches bottom edge; add internal bottom breathing room */
  padding: 10px 12px 14px;

  background: rgba(0,0,0,0.55);
  border-top: 1px solid rgba(255,255,255,0.10);

  color: rgba(255,255,255,0.92);
  font-weight: 950;
  font-size: 13px;
  line-height: 1.24;
  box-sizing: border-box;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  /* glass (optional) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transform: none; /* prevent subpixel clipping */
}

/* CHANNEL glass chip on thumb (ALL index tiles) */
.shell-main .ytf-chan-glass{
  position: absolute;
  left: 8px;
  top: 8px;

  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.45);

  color: rgba(255,255,255,0.88);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;

  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* under-thumb meta row: CHANNEL • DATE */
.shell-main .ytf-chan-under{
  font-size: var(--ytf-fs-meta);
  color: var(--ytf-mute);

  display: flex;
  gap: 8px;
  align-items: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1.25;
  padding: 0 2px;
}

.shell-main .ytf-chan-under :where(.ytf-chan, .ytf-date){
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-main .ytf-dot{ opacity: 0.55; }

/* =======================================================================
   DETAILS BOXES
   ======================================================================= */
.shell-main .ytf-box{
  margin: var(--ytf-box-gap) 10px 0 10px;
  border: 1px solid var(--ytf-seam) !important;
  background: rgba(0,0,0,0.22) !important;
  overflow: visible;
}

.shell-main .ytf-box--actual{ background: rgba(0,0,0,0.28) !important; }

.shell-main .ytf-box--history{
  background: rgba(0,0,0,0.26) !important;
  border-color: rgba(255,90,90,0.28) !important;
}

/* summary */
.shell-main .ytf-sum{
  list-style: none;
  cursor: pointer;
  user-select: none;

  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border-bottom: 1px solid var(--ytf-seam);
  background: rgba(0,0,0,0.14);
}
.shell-main .ytf-sum::-webkit-details-marker{ display:none; }

.shell-main .ytf-sum-left{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.shell-main .ytf-label{
  font-size: var(--ytf-fs-chip);
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}

.shell-main .ytf-mini{
  font-size: var(--ytf-fs-meta);
  color: var(--ytf-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-main .ytf-caret{
  font-size: var(--ytf-fs-chip);
  font-weight: 950;
  letter-spacing: 0.02em;

  padding: 4px 8px;
  border: 1px solid var(--ytf-seam);
  background: linear-gradient(180deg, var(--ytf-chip2), rgba(0,0,0,0.25));
  color: rgba(255,255,255,0.88);

  white-space: nowrap;
  flex: 0 0 auto;
}

.shell-main .ytf-body{
  padding: var(--ytf-body-pad);
  overflow: visible;
}

/* forecast list */
.shell-main .ytf-ul{
  margin: 0;
  padding-left: 20px;
  color: rgba(255,255,255,0.86);
  font-size: var(--ytf-fs-title);
  line-height: 1.28;
}
.shell-main .ytf-ul li{ margin: 0 0 10px 0; }
.shell-main .ytf-ul li:last-child{ margin-bottom: 0; }

.shell-main .ytf-miniline{
  color: rgba(255,255,255,0.80);
  font-size: var(--ytf-fs-meta);
  line-height: 1.28;
}

/* evidence */
.shell-main .ytf-ev{
  margin-top: 12px;
  border: 1px solid var(--ytf-seam);
  background: rgba(0,0,0,0.14);
  padding: 10px;
  overflow: visible;
}

.shell-main .ytf-ev-row{
  display: grid;
  grid-template-columns: var(--ytf-ev-ts-w) 1fr;
  gap: 12px;

  padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.shell-main .ytf-ev-row:first-child{ border-top: 0; }

.shell-main .ytf-ev-ts{
  font-size: var(--ytf-fs-meta);
  font-weight: 850;
  color: rgba(255,255,255,0.75);
}

.shell-main .ytf-ev-quote{
  font-size: var(--ytf-fs-meta);
  color: rgba(255,255,255,0.86);
  line-height: 1.30;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =======================================================================
   EMPTY BOX blackout
   ======================================================================= */
.shell-main .ytf-box.is-empty{
  background: rgba(0,0,0,0.62) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.shell-main .ytf-box.is-empty .ytf-label{ color: rgba(255,255,255,0.55); }
.shell-main .ytf-box.is-empty .ytf-mini,
.shell-main .ytf-box.is-empty .ytf-miniline,
.shell-main .ytf-box.is-empty .ytf-ev-quote{
  color: rgba(255,255,255,0.35);
}
.shell-main .ytf-box.is-empty .ytf-caret{
  opacity: 0.55;
  border-color: rgba(255,255,255,0.08);
}

/* =======================================================================
   INDEX / ALL VIEW (ytf-grid) — browser overview look
   ======================================================================= */
.shell-main .ytf-grid{
  display: flex;
  flex-direction: column;
  gap: var(--ytf-rowgap);
  padding: var(--ytf-pad) var(--ytf-pad) var(--ytf-safe-bottom) var(--ytf-pad);

  overflow: visible;
}

/* each slug row like browser section */
.shell-main .ytf-row{
  border: 1px solid var(--ytf-seam);
  background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.14));
  padding: 10px;

  overflow: visible;
}

/* row title like browser */
.shell-main .ytf-rowhead{
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--ytf-seam);

  color: var(--ytf-text);
  font-size: var(--ytf-fs-rowhead);
  letter-spacing: 0.10em;
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70vw;
}

/* per-row horizontal scroll */
.shell-main .ytf-rowgrid{
  display: flex !important;
  gap: 10px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding-bottom: 6px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-gutter: stable both-edges;
}

.shell-main .ytf-rowgrid::-webkit-scrollbar{ height: 10px; }
.shell-main .ytf-rowgrid::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); }
.shell-main .ytf-rowgrid::-webkit-scrollbar-track{ background: rgba(0,0,0,0.20); }

/* tile like browser card */
.shell-main .ytf-tile{
  flex: 0 0 auto !important;
  width: var(--ytf-tile-w) !important;
  min-width: var(--ytf-tile-w) !important;

  border: 1px solid var(--ytf-seam) !important;
  background: rgba(0,0,0,0.22) !important;

  text-decoration: none !important;
  color: var(--ytf-text) !important;

  scroll-snap-align: start;

  display: flex;
  flex-direction: column;

  overflow: visible;
}

.shell-main .ytf-tile:hover{
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(0,0,0,0.28) !important;
}

/* meta wrapper under thumb prevents baseline cutoff */
.shell-main .ytf-tile-meta{
  display: flex;
  flex-direction: column;
  gap: 6px;

  padding: 8px 10px 10px 10px;

  line-height: 1.25;
  overflow: visible;
}

/* title in tiles (2 lines) */
.shell-main .ytf-tile .ytf-title{
  padding: 0 !important;
  font-size: var(--ytf-fs-title) !important;
  line-height: var(--ytf-lh-title) !important;
  font-weight: 950;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: calc(var(--ytf-lh-title) * 2 * 1em);
}

/* meta row in tiles (CHANNEL • DATE) */
.shell-main .ytf-tile .ytf-meta{
  padding: 0 !important;
  font-size: var(--ytf-fs-meta) !important;
  color: var(--ytf-mute) !important;

  display: flex;
  gap: 8px;
  align-items: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1.25;
}

/* preview in tiles (3 lines) */
.shell-main .ytf-preview{
  padding: 0 !important;
  font-size: var(--ytf-fs-meta);
  color: var(--ytf-mute);
  line-height: 1.22;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =======================================================================
   Remove legacy badge styling (renderer no longer uses ytf-kind)
   ======================================================================= */
.shell-main .ytf-kind{ display:none !important; }

/* =======================================================================
   Mobile tweaks (no behavioral changes; only sizing)
   ======================================================================= */
@media (max-width: 900px){
  .shell-main .ytf-root{
    max-width: 100%;
  }
}


.shell-main .nonfin-operator{
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.shell-main .nonfin-operator .nonfin-switch-wrap{
  flex: 0 0 auto !important;
}

.shell-main .nonfin-operator .nonfin-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}


/* =============================================================================
   FIX: Forecast vertical scroll (requires .ytf-host on mount)
   Put at VERY END of dash/yt_forecast.css
============================================================================= */
.shell-main .ytf-host{
  min-height: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.shell-main .ytf-host .ytf-vscroll-host{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}