/* ==========================================================================
   VoidX Capital — Terminal layout
   Dense, Bloomberg-style dashboard. Layered on top of style.css, so it
   inherits every design token and the light/dark theming for free.
   ========================================================================== */

.term { padding: 0 0 18px; --tv-h: 420px; }

/* The terminal needs more width than the 1280px content pages, but the nav,
   ticker and footer are shared components — widen their containers to match
   so the page doesn't visibly step in and out at each boundary. */
body.terminal-page .nav .wrap,
body.terminal-page .footer .wrap {
  max-width: 1680px;
  padding-left: 14px;
  padding-right: 14px;
}
body.terminal-page .footer { margin-top: 18px; }

.term-wrap {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 14px;
}

/* --- Quote strip (below the nav) ---------------------------------------- */
.qstrip {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  scrollbar-width: none;
}
.qstrip::-webkit-scrollbar { display: none; }

.qs-item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border-right: 1px solid var(--line-soft);
  white-space: nowrap;
  font-size: .72rem;
  flex-shrink: 0;
}
.qs-item .n { font-weight: 700; letter-spacing: .04em; color: var(--text); }
.qs-item .p { font-family: var(--mono); color: var(--text); }
.qs-item .c { font-family: var(--mono); font-size: .68rem; }
.qs-clock {
  margin-left: auto;
  padding: 7px 13px;
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--text-mute);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Main grid ----------------------------------------------------------- */
/* Panels size to their content. Stretching them to equal column height was
   worse than ragged ends: News Sources holds 3–5 rows and the market table 7,
   so filling the centre column's height (video + news feed + charts) left both
   half empty. Columns simply start at the top and end where their content does. */
.term-grid {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 10px;
  padding-top: 10px;
  align-items: start;
}

/* Each grid child is a column of stacked panels */
.term-grid > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* .tp margin was handling the stacking; the gap does it now */
/* .tp + .tp adds a 10px top margin for vertically stacked panels, but it also
   catches the SECOND panel of any side-by-side row — which pushed the news
   panel and the Bank Nifty chart 10px below their siblings. Rows use `gap`
   for spacing, so clear the margin wherever panels sit in a row. */
.term-grid > div > .tp + .tp,
.tv-row > .tp + .tp,

/* --- Panel chrome ------------------------------------------------------- */
.tp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}
.tp + .tp { margin-top: 10px; }

.tp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-elev);
}
.tp-head h3 {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text);
}
.tp-head .more {
  margin-left: auto;
  font-size: .72rem;
  color: var(--blue-bright);
  font-weight: 600;
}
.tp-body { padding: 10px 11px; }
.tp-body.flush { padding: 0; }
.tp-body, .tp-body * { max-width: 100%; }

/* --- Tabs inside a panel head ------------------------------------------- */
.tp-tabs { display: flex; gap: 2px; margin-left: auto; }
.tp-tabs button {
  border: none;
  background: transparent;
  color: var(--text-mute);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
}
.tp-tabs button:hover { color: var(--text); }
.tp-tabs button.on {
  color: var(--blue-bright);
  border-bottom-color: var(--blue-bright);
}

/* --- Source list (left column) ------------------------------------------ */

/* --- Headline stream (centre, replaces the TV panel) -------------------- */
.stream { max-height: 430px; overflow-y: auto; }
.hl {
  display: block;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .14s;
}
.hl:last-child { border-bottom: none; }
.hl:hover { background: var(--surface-2); }

.hl-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  font-size: .6rem;
}
.hl-time { font-family: var(--mono); color: var(--text-mute); }
.hl-src {
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-bright);
}
.hl-title {
  font-size: .8rem;
  line-height: 1.38;
  color: var(--text);
  font-weight: 500;
}
.hl.lead { background: linear-gradient(90deg, rgba(234,57,67,.07), transparent 60%); }
.hl.lead .hl-title { font-size: .9rem; font-weight: 700; }

.hl-new {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--down);
  color: #fff;
}

/* --- Market table (right column) --------------------------------------- */
/* style.css sets `table { min-width: 480px }` so wide tables scroll on the
   other pages. Terminal panels are narrower than that, and min-width beats
   width:100%, which forced the table 480px wide inside a 456px panel and
   clipped the last column. Reset it here. */
.mtable, .cal {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.mtable { font-size: .72rem; }
/* Under border-collapse, cell padding is added OUTSIDE the column width, so
   percentage columns summing to 100% overflow by the total padding. border-box
   folds the padding back inside. */
.mtable td, .cal td { box-sizing: border-box; }
.mtable td {
  padding: 5px 7px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.mtable tr:last-child td { border-bottom: none; }
.mtable tr { transition: background .14s; }
.mtable tr:hover { background: var(--surface-2); }
.mtable .sym { font-weight: 700; color: var(--text); letter-spacing: .02em; }
.mtable .sym small { font-weight: 500; color: var(--text-mute); font-size: .86em; }
.mtable .spark { padding: 3px 4px; }
/* Fixed layout needs explicit widths, or the last column gets squeezed out */
.mtable col.c-sym   { width: 34%; }
.mtable col.c-spark { width: 18%; }
.mtable col.c-last  { width: 27%; }
.mtable col.c-chg   { width: 21%; }
/* Last column must never be clipped — it carries the headline number */
.mtable td:last-child { padding-right: 11px; }
.mtable .spark canvas { display: block; height: 18px; width: 100%; }
.mtable .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mtable .chg { text-align: right; font-family: var(--mono); font-size: .68rem; }

/* --- Mini chart pair ---------------------------------------------------- */
/* The centre column ran ~110px short of the side columns. Give that space to
   the charts — extra chart height is useful, unlike a stretched list which
   would only add blank space. */
@media (min-width: 1500px) {
}

/* --- Economic calendar -------------------------------------------------- */
.cal { width: 100%; border-collapse: collapse; font-size: .68rem; }
.cal td {
  padding: 5px 7px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.cal tr:last-child td { border-bottom: none; }
.cal .t { font-family: var(--mono); color: var(--text-mute); white-space: nowrap; }
.cal .ccy {
  font-family: var(--mono); font-weight: 700; font-size: .68rem;
  color: var(--text-dim);
}
.cal .ev { color: var(--text); }
.cal .n { font-family: var(--mono); text-align: right; color: var(--text-dim); white-space: nowrap; }
.cal col.k-t   { width: 13%; }
.cal col.k-ccy { width: 10%; }
.cal col.k-ev  { width: 60%; }
.cal col.k-imp { width: 17%; }
.cal .ev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal td:last-child { padding-right: 11px; text-align: right; }
.imp {
  display: inline-block;
  font-size: .6rem; font-weight: 800; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 4px; border: 1px solid;
}
.imp-high { color: var(--down); border-color: rgba(234,57,67,.4); background: var(--down-soft); }
.imp-med  { color: var(--warn); border-color: rgba(240,185,11,.4); background: rgba(240,185,11,.09); }
.imp-low  { color: var(--text-mute); border-color: var(--line); background: var(--surface-2); }

/* --- Bottom intelligence bar ------------------------------------------- */

.intel-label {
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 700;
  margin-bottom: 7px;
}

.fg-val { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.fg-lab { font-size: .74rem; font-weight: 600; }

/* Sector heat grid, compact */

/* World clocks */

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1420px) {
  .term-grid { grid-template-columns: 520px minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .term-grid { grid-template-columns: minmax(0,1fr) 380px; }
  .term-grid > .col-sources { display: none; }
}
@media (max-width: 900px) {
  .term-grid { grid-template-columns: minmax(0,1fr); }

  .tv-row .stream { max-height: 340px; }
}
@media (max-width: 600px) {
  .term-wrap { padding: 0 10px; }
}

/* ==========================================================================
   Live TV panel
   --------------------------------------------------------------------------
   Embeds publishers' OWN official YouTube livestreams via YouTube's player,
   so their ads and attribution stay intact — that is the publisher's own
   distribution channel and is what the embed API is for. We do not proxy,
   re-host or restream any broadcast feed; doing so without a distribution
   agreement would be infringement.

   Click-to-load: nothing from youtube.com is requested until the user asks
   for it, so no third-party cookies are set on arrival and the page stays
   light. The player itself uses youtube-nocookie.com.
   ========================================================================== */

.tv-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #05070c;
  overflow: hidden;
}
.tv-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Placeholder shown before the user clicks */
.tv-poster {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  cursor: pointer;
  background:
    radial-gradient(ellipse 70% 90% at 50% 40%, rgba(10,132,255,.13), transparent 70%),
    var(--bg-elev);
  text-align: center;
  padding: 20px;
}
.tv-poster:hover .tv-play { transform: scale(1.06); border-color: var(--blue); }

.tv-play {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,132,255,.14);
  border: 2px solid rgba(10,132,255,.5);
  transition: transform .18s, border-color .18s;
}
.tv-play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 17px solid var(--blue-bright);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.tv-poster b { font-size: .92rem; color: var(--text); }
.tv-poster span { font-size: .72rem; color: var(--text-mute); max-width: 340px; line-height: 1.5; }

/* Channel picker */
.tv-bar {
  display: flex;
  gap: 5px;
  padding: 9px 11px;
  flex: 0 0 auto;      /* never squeezed by the fixed-height panel */
  overflow-x: auto;
  border-top: 1px solid var(--line-soft);
  scrollbar-width: none;
}
.tv-bar::-webkit-scrollbar { display: none; }
.tv-ch {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.tv-ch:hover { background: var(--surface-2); color: var(--text); }
.tv-ch.on {
  background: rgba(10,132,255,.12);
  border-color: var(--blue);
  color: var(--blue-bright);
}
.tv-ch .rg {
  font-size: .58rem;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: .06em;
}

/* Off-air channels stay visible but unclickable — better than a dead player */
.tv-ch.off,
.tv-ch[disabled] {
  opacity: .38;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--text-mute);
}
.tv-ch[disabled]:hover { background: transparent; color: var(--text-dim); }

.dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--down);
  flex-shrink: 0;
  animation: pulse-live 2s infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Centre column becomes video + news side by side on wide screens.
   The row itself grows so the video/news block absorbs the column's slack,
   and its children stretch to equal height. */
/* Video + news side by side. Both panels get the SAME fixed height rather
   than stretching to each other — `align-items: stretch` with an uncapped
   news list made the two inflate each other until the row ran ~1400px tall. */
.tv-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

@media (min-width: 1500px) {
  .tv-row { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }

  /* 16:9 video in the left cell sets the row height; the news panel matches. */
  .tv-row > .tp { display: flex; flex-direction: column; min-height: var(--tv-h); max-height: 790px; }
  .tv-row > .tp > .tp-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
  .tv-row .stream { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }

  /* Fade the cut-off edge so a clipped headline reads as "scroll for more"
     rather than a rendering fault */
  .tv-row > .tp > .tp-body::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
    background: linear-gradient(transparent, var(--surface));
    pointer-events: none;
  }

  /* Keep the player 16:9 within that fixed height */
  .tv-row .tv-wrap { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
}

/* --- Short viewports -----------------------------------------------------
   On a laptop screen the grid is taller than the window, so the page scrolls.
   The news feed's own internal scrollbar then keeps it full while the side
   columns have already ended, leaving voids either side of it. Below this
   height the whole grid collapses to a single flowing column, so everything
   scrolls together and no column outlives its neighbours. */
@media (max-height: 900px) and (min-width: 1180px) {
  /* Shorter TV row and charts so the whole grid fits a laptop screen better */
  .term { --tv-h: 340px; }

  /* Columns must still finish together. Options Snapshot is the shortest
     panel, so let it take the leftover height in the left column, and the
     calendar do the same on the right. */
  .term-grid { align-items: stretch; }
  .term-grid > div { display: flex; flex-direction: column; }
  .col-sources > .tp:last-child,
  .term-grid > div:nth-child(3) > .tp:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .col-sources > .tp:last-child > .tp-body,
  .term-grid > div:nth-child(3) > .tp:last-child > .tp-body {
    flex: 1 1 auto;
  }
  /* Calendar rows spread into the extra space rather than leaving it blank */
  .term-grid > div:nth-child(3) > .tp:last-child .cal { height: 100%; }

  /* Centre column: the charts row takes the leftover height, so the charts
     grow instead of leaving a gap beneath them. */
}

/* --- Tighter page tail on the terminal ----------------------------------
   The terminal is a dense dashboard; the content-page footer spacing (56px
   top padding, 40px/26px internal margins, 444px total) left a large empty
   band under the intelligence bar. Compress it here only — the editorial
   pages keep the roomier footer. */
body.terminal-page .footer { padding: 26px 0 16px; margin-top: 12px; }
body.terminal-page .footer-grid { gap: 24px; margin-bottom: 20px; }
body.terminal-page .footer .about { margin-top: 10px; font-size: .8rem; }
body.terminal-page .footer ul { gap: 6px; }
body.terminal-page .footer ul a { font-size: .8rem; }
body.terminal-page .footer h5 { margin-bottom: 9px; }
body.terminal-page .footer-risk { padding: 11px 13px; margin-bottom: 14px; font-size: .7rem; }
body.terminal-page .footer-bot { padding-top: 14px; font-size: .72rem; }

/* The page-level disclaimer repeats the footer's risk notice almost verbatim.
   Keep the terminal-specific parts (sources, composites, live TV) but let it
   sit tighter against the bar above it. */
body.terminal-page .disclaimer-bar { margin-top: 10px; padding: 12px 15px; font-size: .72rem; }
body.terminal-page .term { padding-bottom: 0; }

/* --- Column balance after removing the charts and breadth panel ----------
   The centre column now holds only Live TV, so it ended far above the
   others. Let each column's last panel take the leftover height: the news
   list and calendar gain usable rows, and the TV player grows rather than
   leaving a void beneath it. */
.term-grid { align-items: stretch; }
.term-grid > div { display: flex; flex-direction: column; }
.term-grid > div > .tp:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.term-grid > div > .tp:last-child > .tp-body { flex: 1 1 auto; min-height: 0; }

/* The centre column holds Live TV and the news feed side by side in .tv-row,
   so `:last-child` above only reaches the news panel. Stretch the row itself
   and let both panels fill it. */
.term-grid > div > .tv-row {
  flex: 1 1 auto;
  min-height: 0;
  /* Cap the row: an uncapped news list drove the grid to ~2900px once the
     charts were removed. The list scrolls inside its panel instead. */
  max-height: 790px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.tv-row > .tp { display: flex; flex-direction: column; min-height: 0; }
.tv-row > .tp > .tp-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tv-row .tv-wrap { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; max-height: none; }
.tv-row .tv-bar { flex: 0 0 auto; }
.tv-row .stream { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }

/* News list and calendar fill their share instead of capping short */
.term-grid > div > .tp:last-child .stream { max-height: none; height: 100%; }

/* --- Right rail after removing Options Snapshot --------------------------
   News Sources is now the only panel in that column. The `:last-child`
   stretch rule made it fill the full height, leaving ~500px empty below its
   five rows, so exempt a lone panel from stretching and let the column end
   at its content. */
.term-grid > div > .tp:only-child { flex: 0 0 auto; }
.term-grid > div > .tp:only-child > .tp-body { flex: 0 0 auto; }


/* --- Source filter chips -------------------------------------------------
   The news sources were a separate panel, but they only ever acted as a
   filter for the feed. They now sit as a chip row directly under that
   panel's header, which removes a card and keeps the control beside what it
   controls. */
.src-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.src-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-mute);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.src-chip:hover { color: var(--text); background: var(--surface-2); }
.src-chip.on {
  background: rgba(10, 132, 255, .12);
  border-color: var(--blue);
  color: var(--blue-bright);
}
.src-chip .n {
  font-family: var(--mono);
  font-size: .6rem;
  opacity: .75;
}


/* --- Three equal-weight columns, centre dominant -------------------------
   Live TV and the news feed sit inside a .tv-row wrapper nested in the
   second grid column, so the outer grid could only size two tracks.
   `display: contents` dissolves both wrappers so all three panels become
   direct children of .term-grid — then one template controls every width.

   Market data and the news feed share an identical narrow track; Live TV
   takes the wide centre. */
@media (min-width: 1180px) {
  .term-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr) 380px;
    align-items: stretch;
  }
  .term-grid > div,
  .term-grid > div > .tv-row { display: contents; }

  /* Market data still needs its two panels stacked in one track */
  .term-grid > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  /* Live TV: the wide centre panel */
  .tv-row > .tp:nth-child(1) {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-height: var(--tv-h);
    max-height: 790px;
  }
  /* News feed: matches the market column's width on the right */
  .tv-row > .tp:nth-child(2) {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    min-height: var(--tv-h);
    max-height: 790px;
  }
}


/* Narrower side columns: keep the panel title on one line and let the tab
   row shrink rather than pushing the heading to wrap. */
@media (min-width: 1180px) {
  .tp-head h3 { white-space: nowrap; }
  .tp-tabs button { padding: 5px 7px; letter-spacing: .05em; }

  /* News feed sat 10px below its neighbours because the market column's
     flex gap did not apply to it once the wrappers were dissolved. */
  /* `.tp + .tp` adds a 10px top margin for stacked panels. With the wrappers
     dissolved these two are adjacent siblings, so the news panel inherited it
     and started 10px below Live TV. */
  .tv-row > .tp + .tp { margin-top: 0; }

  /* Keep the cap — without it the news list runs unbounded and the page
     goes to ~2900px. Both media panels share one fixed height so they end
     level with the market column. */
  .tv-row > .tp:nth-child(1),
  .tv-row > .tp:nth-child(2) { height: 100%; max-height: 800px; }

  /* All three tracks share one row, so give the row an explicit height and
     let each column fill it. Chasing the difference by nudging pixel values
     never converged: the market column grows with whatever it is compared
     against. */
  .term-grid { grid-auto-rows: 800px; }
  .term-grid > div:first-child { height: 100%; }
}