/* MU Equity Research Dashboard, stylesheet part 7/7: 07-tables-and-harmonization.css
   Files load in numeric order; the cascade relies on source order. */
/* ============================================================
   AUTHORITATIVE TABLE RESPONSIVENESS (last rule = wins all conflicts)
   One coherent system: tables scroll themselves by default;
   tables inside .chart-card defer scroll to the card wrapper.
   No double-scroll, no gradient hacks.
   ============================================================ */

/* Default, every financial table is its own horizontal scroll container */
table.fin {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  white-space: nowrap;
  background-image: none !important;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}
/* Keep header/body columns aligned inside a display:block table */
table.fin > thead { display: table-header-group; }
table.fin > tbody { display: table-row-group; }
table.fin > thead > tr,
table.fin > tbody > tr { display: table-row; }

/* Exception, tables inside a chart-card let the CARD do the scrolling
   (the card already wraps charts + tables cleanly) */
.chart-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  background-image: none !important;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}
.chart-card table.fin {
  display: table;
  width: auto;
  min-width: 100%;
  overflow: visible;
}
.calc { background-image: none !important; }

/* Page must never scroll horizontally */
section.block, section.sources, body { overflow-x: hidden; max-width: 100%; }
/* A few px can still escape body{overflow-x:hidden} via the transformed
   slide-active section in slide mode (e.g. ai-dashboard's summary slide sat a
   few px past the viewport, giving a tiny horizontal page-scroll on phones).
   Clip it on <main>, which holds the slides. main is a SIBLING of the sticky
   header.top and the sidebar nav.side, not an ancestor, so clipping it can't
   break their position:sticky. Scoped to mobile slide-mode where the overflow
   actually occurs. `clip` (not `hidden`) avoids creating a scroll container. */
@media (max-width: 900px) {
  body.slide-mode .layout > main { overflow-x: clip; }
}

/* Consistent thin scrollbar across the scrolling elements */
table.fin::-webkit-scrollbar,
.chart-card::-webkit-scrollbar { height: 7px; }
table.fin::-webkit-scrollbar-track,
.chart-card::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
table.fin::-webkit-scrollbar-thumb,
.chart-card::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

/* On phones, tighten the wide DCF/valuation tables so more fits before scroll kicks in */
@media (max-width: 600px) {
  #dcf table.fin, #valuation table.fin, #financials table.fin { font-size: 10.5px; }
  #dcf table.fin th, #dcf table.fin td,
  #valuation table.fin th, #valuation table.fin td,
  #financials table.fin th, #financials table.fin td { padding: 5px 7px; }
  /* DCF inputs + forecast cards stack and fill width */
  #dcf .calc-grid { grid-template-columns: 1fr; }
  #dcf .calc { width: 100%; }
}


/* ============================================================
   /* TYPO-SPACING-HARMONIZATION */
   Authoritative typography + spacing pass (appended last so it
   resolves all earlier duplicate/conflicting rules). Uses the
   --fs-* type scale and --sp-* spacing tokens for consistency.
   #dcf keeps its denser sizing via higher (id) specificity.
   ============================================================ */

/* --- Section container: one consistent padding + vertical rhythm --- */
section.block{
  padding: 14px 14px 10px;                   /* restored to original */
  margin-bottom: 12px;
}
body.slide-mode section.block{
  padding: 16px 22px 14px;                   /* restored to original */
}

/* --- Section title (h2): serif, consistent size --- */
section.block h2{
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);                  /* 22 */
  font-weight: 600;
  letter-spacing: -.2px;
  line-height: 1.15;
  margin: 0 0 var(--sp-1);                   /* 4 */
  color: var(--accent);
}
body.slide-mode section.block h2{ font-size: 20px; margin-bottom: var(--sp-1); }

/* --- Eyebrow / sub label --- */
section.block .sub{
  font-size: var(--fs-2xs);                  /* 10 */
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin: 0 0 var(--sp-4);                   /* 16 */
}

/* --- Sub-section header (h3): consistent, with breathing room above --- */
section.block h3{
  font-size: var(--fs-sm);                   /* 12 */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink);
  margin: var(--sp-4) 0 var(--sp-2);         /* 16 top / 8 bottom */
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
}
/* First header right under the title shouldn't carry the big top gap */
section.block h2 + h3,
section.block .sub + h3,
section.block h3:first-child{ margin-top: var(--sp-2); }

/* --- Card / panel headings (h4/h5): consistent --- */
.chart-card h4{
  font-size: var(--fs-xs);                   /* 11 */
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin: 0 0 var(--sp-2);
}
.calc h4{
  font-family: var(--font-serif);
  font-size: var(--fs-lg);                   /* 16 */
  color: var(--accent);
  margin: 0 0 var(--sp-1);
}
.thesis h4{
  font-family: var(--font-serif);
  font-size: var(--fs-lg);                   /* 16 */
  margin: 0 0 var(--sp-1);
}
.risk-card h5{ font-size: var(--fs-base); margin: var(--sp-1) 0; }  /* 13 */

/* --- Body copy: consistent size + comfortable line-height --- */
section.block p,
section.block li{ font-size: var(--fs-base); line-height: 1.55; }   /* 13 */
section.block p{ margin: var(--sp-2) 0; }                            /* 8 */
section.block ul,
section.block ol{ margin: var(--sp-1) 0 var(--sp-3) var(--sp-5); }   /* 4 0 12 20 */
section.block li{ margin-bottom: var(--sp-1); }                      /* 4 */
.footnote{ font-size: var(--fs-2xs); color: var(--muted); line-height: 1.5; }

/* (No extra margins added to grid children/containers, they rely on
   their own grid gaps, so we leave .chart-card/.chart-row/.kpi-grid/
   .twocol spacing exactly as originally tuned to avoid doubled gaps.) */

/* --- Re-assert phone values LAST so the harmonized desktop block
       above does not clobber the mobile breakpoint --- */
@media (max-width: 600px){
  section.block{ padding: var(--sp-3) var(--sp-3) var(--sp-2); margin-bottom: var(--sp-3); }
  body.slide-mode section.block{ padding: var(--sp-3) var(--sp-3) var(--sp-2); }
  section.block h2{ font-size: 17px; }
  section.block h3{ font-size: 12px; margin: var(--sp-3) 0 var(--sp-2); }
  section.block p, section.block li{ font-size: 13px; }
  .chart-card h4{ font-size: 11px; }
}


/* ============================================================
   /* COMPS-CARD-MOBILE */ , detailed comparable-company table
   The card owns the horizontal scroll; the table keeps a sensible
   floor width so columns never crush, and font matches sibling
   DCF tables on every breakpoint (no inline overrides).
   ============================================================ */
#dcf .comps-card{
  padding: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
#dcf .comps-card > table.fin{
  display: table;
  width: auto;
  min-width: 720px;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 600px){
  #dcf .comps-card{ padding: 8px; }
  #dcf .comps-card > table.fin{ font-size: 10.5px; min-width: 600px; }
  #dcf .comps-card > table.fin th,
  #dcf .comps-card > table.fin td{ padding: 5px 7px; }
}
@media (max-width: 380px){
  #dcf .comps-card > table.fin{ font-size: 10px; min-width: 560px; }
}


/* ============================================================
   DCF-SLIDE-TABLES, keep real table layout so header & body
   columns stay aligned; the wrapping card/.calc owns the
   horizontal scroll on small screens (same pattern as comps).
   Fixes the forecast table + sensitivity heatmap on mobile.
   ============================================================ */
#dcf .calc, #dcf .chart-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#dcf .calc > table.fin,
#dcf .chart-card > table.fin {
  display: table;
  width: auto;
  min-width: 520px;
  margin: 0;
  white-space: nowrap;
}
/* the comps table keeps its wider floor (re-asserted via higher specificity) */
#dcf .comps-card > table.fin { min-width: 720px; }
/* min-width now lives on the table itself, not the tbody */
#dcfSegTable { min-width: 0; }
@media (max-width: 600px) {
  #dcf .calc > table.fin,
  #dcf .chart-card > table.fin { min-width: 480px; }
  #dcf .comps-card > table.fin { min-width: 600px; }
}

/* base-soft token (cream neutral) with a dark-mode variant for callout/card backgrounds */
:root { --base-soft: #f0e9e0; }
body.dark { --base-soft: #2a2620; }

/* ============================================================
   SLIDE-21-22-FIX, Glossary tables + Sources typography (mobile)
   ============================================================ */
/* Glossary Term/Definition tables hold prose, not numbers, let definitions
   wrap and fit the viewport instead of forcing nowrap horizontal scroll. */
#glossary table.fin { display: table; width: 100%; min-width: 0; white-space: normal; }
#glossary table.fin th, #glossary table.fin td { white-space: normal; vertical-align: top; }
#glossary table.fin td:first-child, #glossary table.fin th:first-child { width: 30%; }

/* Sources slide isn't a section.block, align its heading + body type scale,
   and give it the same mobile padding/font scaling as the other slides. */
.sources h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.2px; line-height: 1.15; }
.sources, .sources li, .sources p, .sources ol { font-size: var(--fs-base); line-height: 1.55; }
@media (max-width: 600px) {
  .sources { padding: var(--sp-3) var(--sp-3) var(--sp-2); }
  .sources h2 { font-size: 17px; }
  .sources, .sources li, .sources p, .sources ol { font-size: 13px; }
  #glossary table.fin th, #glossary table.fin td { padding: 6px 8px; }
}


/* ============================================================
   STICKY FIRST COLUMN on horizontally-scrolling financial tables
   so the label column stays visible while the user scrubs right
   to compare numeric columns. Mobile-only, desktop layout
   (1280px+) is byte-identical.
   ============================================================ */
@media (max-width: 600px) {
  section.block table.fin tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 2px 0 0 var(--line);
  }
  section.block table.fin thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--ink);
    box-shadow: 2px 0 0 var(--line);
  }
  /* Sensitivity heatmaps paint their first column dark, preserve that fill
     when sticky positioning is applied. */
  #dcfSens tbody td:first-child,
  #modelSens tbody td:first-child {
    background: var(--ink);
    color: var(--bg);
  }
  /* Glossary tables wrap prose and don't scroll, so the sticky rule is a
     no-op there, but make the override explicit. */
  #glossary table.fin tbody td:first-child,
  #glossary table.fin thead th:first-child {
    position: static;
    box-shadow: none;
  }
  /* DCF segment table, explicit sticky with zebra-stripe preservation */
  #dcf .calc > table.fin thead th:first-child,
  #dcf .calc > table.fin tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--line);
    z-index: 2;
  }
  #dcf .calc > table.fin tbody tr:nth-child(even) td:first-child {
    background: #faf8f3;
  }
  body.dark #dcf .calc > table.fin thead th:first-child,
  body.dark #dcf .calc > table.fin tbody td:first-child {
    background: var(--panel);
  }
  body.dark #dcf .calc > table.fin tbody tr:nth-child(even) td:first-child {
    background: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)), var(--panel);
  }
  /* Preserve inline accent-soft emphasis row (Unlevered FCF) on sticky cell */
  #dcf .calc > table.fin tbody tr[style*="accent-soft"] td:first-child {
    background: var(--accent-soft);
  }
}

/* ============================================================
   PROSE CELLS, opt-in via .prose class. Numeric cells keep
   nowrap so column alignment is preserved; prose cells wrap.
   Desktop only activates on cells explicitly marked.
   ============================================================ */
table.fin th.prose, table.fin td.prose {
  white-space: normal;
  min-width: 160px;
  vertical-align: top;
}
@media (max-width: 600px) {
  table.fin th.prose, table.fin td.prose {
    min-width: 140px;
    max-width: 240px;
  }
}

/* ============================================================
   MOBILE / TABLET TABLE WRAP-TO-FIT  (<=900px), loads LAST, authoritative.
   The default nowrap + horizontal-scroll makes prose/label-heavy tables
   unusable on small screens: the first column fills the viewport and the
   data columns scroll off-screen with no visible affordance on touch
   (every .fin table that isn't all-short-numbers reads as "broken").
   On stacked-layout widths, switch every .fin table to WRAP-TO-FIT so all
   columns stay visible with no horizontal scroll. Short numeric cells stay
   tight; long label/prose cells wrap. !important is used deliberately to
   beat the higher-specificity nowrap-scroll rules in 03-responsive and the
   inline width/font-size on the SOTP + sensitivity tables.
   ============================================================ */
@media (max-width: 900px) {
  section.block table.fin,
  section.sources table.fin,
  .calc table.fin,
  .chart-card table.fin,
  body.slide-mode section.block table.fin {
    display: block !important;          /* horizontal scroll container */
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: normal !important;     /* cells wrap at spaces (see below) */
    border: 0;
    font-size: 11px;
    /* Scroll-shadow affordance (panel-coloured "covers" ride the content via
       background-attachment:local and hide the dark edge "shadows" fixed to the
       scroller; when there's more content to a side, the cover scrolls away and
       the shadow shows). Overrides the base `background-image:none`. */
    background:
      linear-gradient(to right, var(--panel), rgba(0,0,0,0)) 0 0 / 26px 100% no-repeat,
      linear-gradient(to left, var(--panel), rgba(0,0,0,0)) 100% 0 / 26px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.32), rgba(0,0,0,0)) 0 0 / 13px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.32), rgba(0,0,0,0)) 100% 0 / 13px 100% no-repeat !important;
    background-attachment: local, local, scroll, scroll !important;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--chip);
  }
  section.block table.fin::-webkit-scrollbar,
  .calc table.fin::-webkit-scrollbar,
  .chart-card table.fin::-webkit-scrollbar { height: 8px; -webkit-appearance: none; }
  section.block table.fin::-webkit-scrollbar-thumb,
  .calc table.fin::-webkit-scrollbar-thumb,
  .chart-card table.fin::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
  section.block table.fin th, section.block table.fin td,
  section.sources table.fin th, section.sources table.fin td,
  .calc table.fin th, .calc table.fin td,
  .chart-card table.fin th, .chart-card table.fin td {
    /* Wrap at spaces but NEVER break mid-word. Columns take their natural
       (longest-word) width: most tables then fit the phone, and only genuinely
       dense ones exceed it and scroll, with clean, un-broken cells either way. */
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    padding: 6px 7px;
    vertical-align: top;
  }
  /* Numeric SOTP + sensitivity grids: smaller so 5-6 columns fit cleanly */
  #sotp table.fin, #sotp table.fin th, #sotp table.fin td,
  #sotpSensTable, #sotpSensTable th, #sotpSensTable td {
    font-size: 10px !important;
    padding: 4px 3px !important;
  }
}
@media (max-width: 380px) {
  section.block table.fin, .calc table.fin { font-size: 10px !important; }
  #sotp table.fin th, #sotp table.fin td,
  #sotpSensTable th, #sotpSensTable td { font-size: 9.5px !important; }
}

/* ============================================================
   CHART SCREEN-READER DATA TABLES, overflow guard.
   charts-core.js injects a visually-hidden <table class="mu-sr-only">
   of each chart's data using width:1px;clip. But width:1px does NOT
   constrain a <table> (auto table-layout sizes to its content ~400px),
   so on narrow screens these hidden tables stay wide and push the page
   sideways in reading mode (all sections visible). Park them fully
   off-screen-left so they never extend the page width, while remaining
   in the accessibility tree. table.mu-sr-only (0,1,1) outranks the
   JS-injected .mu-sr-only (0,1,0), so this wins regardless of load order.
   ============================================================ */
table.mu-sr-only {
  left: -9999px !important;
  top: 0 !important;
  max-width: 1px !important;
  max-height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================
   CHART ROWS, restore responsive auto-fit on phones/tablets.
   The dashboards set an inline grid-template-columns (1fr 1fr or 1fr 1fr 1fr)
   on .chart-row, which overrides the base auto-fit grid, so on phones the
   2-up / 3-up chart grids stayed side-by-side and the canvases were squished
   to ~115px wide (axis/legend labels cut off). Re-assert an auto-fit grid at
   <=900px so charts go full-width on phones and 2-up on tablets. !important is
   required to beat the inline grid; min(100%, 320px) avoids overflow on the
   narrowest phones. Desktop (>900px) keeps the inline 2-up/3-up layout.
   ============================================================ */
@media (max-width: 900px) {
  .chart-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; }
}