/* MU Equity Research Dashboard, stylesheet part 3/7: 03-responsive.css
   Files load in numeric order; the cascade relies on source order. */
/* ============= MOBILE / TABLET RESPONSIVE ============= */
.menu-toggle {
  display: none;
  position: fixed;
  top: 8px;
  left: 8px;
  width: 44px;
  height: 44px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  z-index: 250;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  font-family: inherit;
}
.menu-toggle:hover { background: var(--accent-deep); }
@media (max-width: 900px) {
  .layout { flex-direction: column; padding: 12px 14px; gap: 12px; }
  nav.side {
    position: fixed; top: 0; left: -260px; width: 240px;
    height: 100vh;        /* fallback for older browsers */
    max-height: 100vh;
    z-index: 240; transition: left 0.25s ease; border-radius: 0;
    padding-top: 56px;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 4px 0 16px rgba(0,0,0,0.15); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  @supports (height: 100dvh) {
    nav.side { height: 100dvh; max-height: 100dvh; }
  }
  body.nav-open nav.side { left: 0; }
  body.nav-open { overflow: hidden; }
  body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 235; }
  /* Larger TOC tap targets regardless of pointer reporting */
  nav.side a {
    padding: 12px 18px;
    font-size: 14px;
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  /* Tighter brand block reclaims vertical budget for the 22-entry TOC */
  .side-brand { padding: 8px 16px; }
  .side-brand .sb-name { font-size: 18px; }
  /* Visual dividers between major sections (purely CSS, no markup change) */
  nav.side a[href="#business"],
  nav.side a[href="#financials"],
  nav.side a[href="#valuation"],
  nav.side a[href="#catalysts"],
  nav.side a[href="#risks"],
  nav.side a[href="#flow"],
  nav.side a[href="#tools"],
  nav.side a[href="#glossary"],
  nav.side a[href="#sources"] {
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 14px;
  }
  .menu-toggle { display: flex; }
  header.top { padding: 6px 14px 6px 56px; gap: 8px 14px; }
  .ticker { font-size: 14px; }
  .company { display: none; }
  .stamp { font-size: 10px; }
  .ribbon .kv:nth-child(n+5) { display: none; }
  .hero { padding: 36px 16px 28px; }
  .hero h1 { font-size: 28px; }
  .hero .lede { font-size: 14px; }
  .hero-stats { gap: 14px; margin-top: 24px; padding-top: 18px; }
  .hero-stat .num { font-size: 18px; }
  .slide-mode-toggle { top: 50px; right: 10px; padding: 5px 10px; font-size: 9px; }
}
@media (max-width: 600px) {
  .ribbon .kv:nth-child(n+3) { display: none; }
  .hero h1 { font-size: 22px; }
  .hero .lede { font-size: 13px; line-height: 1.45; }
  .hero-stat .num { font-size: 15px; }
  .hero-stat .lbl { font-size: 10px; letter-spacing: .8px; }
  /* Eyebrow: tighten tracking + shrink to avoid awkward two-line wraps */
  .hero .eyebrow { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 10px; text-wrap: balance; padding: 0 4px; }
  .hero .cta { padding: 9px 18px; font-size: 13px; }
  .hero-stats { gap: 10px; }
  section.block { padding: 14px 14px 10px; margin-bottom: 12px; border-radius: 6px; }
  section.block h2 { font-size: 17px; }
  section.block h3 { font-size: 12px; margin: 12px 0 6px; }
  p, li { font-size: 13px; }
  .kpi { padding: 8px 10px; }
  .kpi .val { font-size: 16px; }
  .kpi .lbl { font-size: 10px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .chart-row { grid-template-columns: 1fr; gap: 12px; }
  .chart-wrap { height: 200px !important; }
  body.slide-mode .chart-wrap { height: 180px !important; }
  .chart-card { padding: 10px; }
  .chart-card h4 { font-size: 11px; }
  table.fin { font-size: 11px; }
  table.fin th, table.fin td { padding: 5px 6px; white-space: nowrap; }
  /* Wrap-tables in scrollable container - set max-width and let it scroll */
  section.block table.fin {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  /* Show a styled scrollbar so users see the table scrolls */
  section.block table.fin::-webkit-scrollbar { height: 6px; }
  section.block table.fin::-webkit-scrollbar-track { background: var(--bg); }
  section.block table.fin::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
  .calc { padding: 12px; }
  .calc h4 { font-size: 14px; }
  .calc-row { flex-wrap: wrap; gap: 6px; }
  .calc-row label { min-width: 100%; font-size: 12px; }
  .calc-row input[type="range"] { flex: 1; min-width: 0; }
  .calc-row input[type="number"] { width: 80px; }
  .calc-output .pt-val { font-size: 28px; }
  .rr-grid { gap: 6px; }
  .rr-cell { padding: 6px 8px; }
  .rr-cell .val { font-size: 14px; }
  .rr-cell .lbl { font-size: 9px; }
  .thesis-grid { grid-template-columns: 1fr; }
  .thesis { padding: 10px 12px; }
  .thesis h4 { font-size: 15px; }
  .thesis .pt { font-size: 18px; }
  .risk-grid { grid-template-columns: 1fr; }
  .prob-card .pct { font-size: 22px; }
  .prob-card .case { font-size: 10px; }
  .roadmap { padding: 10px; }
  .twocol { grid-template-columns: 1fr; gap: 12px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; padding: 7px 12px; font-size: 12px; }
  .slide-nav { padding: 5px 10px; gap: 8px; padding-bottom: max(5px, env(safe-area-inset-bottom)); }
  .slide-nav-btn { padding: 6px 10px; min-width: 70px; font-size: 11px; }
  .slide-nav-info { font-size: 11px; gap: 6px; min-width: 0; overflow: hidden; }
  .slide-nav-info .counter { font-size: 13px; }
  .slide-nav-info .title { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  footer.site-footer { padding: 24px 16px 16px; }
  /* AI widget, bigger Submit tap target and stop iOS focus-zoom on text inputs */
  .ai-widget textarea, .ai-widget .ai-ex, .ai-widget .ai-submit { font-size: 16px; }
  .ai-widget .ai-row { gap: 10px; row-gap: 8px; }
  .ai-widget .ai-submit { min-height: 44px; padding: 12px 20px; }
  .ai-widget .ai-hint { margin-left: 0; }
  /* Status / AI tag badges, borderline 10px → 11px with tightened tracking */
  .ai-badge, .ai-tag { font-size: 11px; letter-spacing: .6px; }
  /* Inline citation pills, larger tap surface without bumping line height */
  sup.fn a { padding: 2px 6px; min-width: 18px; box-sizing: border-box; display: inline-block; text-align: center; }
  /* Calc number inputs, iOS focus-zoom guard */
  .calc-row input[type="number"] { font-size: 16px; }
}
@media (max-width: 400px) {
  .ai-widget .ai-submit { flex: 1 1 100%; order: -1; min-height: 48px; }
  .ai-widget .ai-cnt, .ai-widget .ai-hint { width: 100%; }
}
@media (max-width: 380px) {
  .ribbon .kv:nth-child(n+4) { display: none; }
  .hero h1 { font-size: 19px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .slide-nav-info .title { display: none; }
}
@media (hover: none) and (pointer: coarse) {
  .slide-nav-btn { min-height: 44px; padding: 10px 14px; }
  .tab-btn { min-height: 44px; padding: 10px 14px; }
  .toggle-btn { min-height: 36px; padding: 8px 14px; }
  nav.side a { padding: 12px 18px; font-size: 14px; }
  .menu-toggle { width: 44px; height: 44px; }
  /* Inline citation pills, meet 24×24 WCAG floor on touch devices */
  sup.fn a { padding: 4px 9px; min-width: 24px; min-height: 24px; line-height: 16px; }
}
/* Mobile-only AI status badge legibility (also catches coarse-pointer tablets) */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
  .ai-badge, .ai-tag { font-size: 11px; letter-spacing: .6px; }
}


/* Global guard: sections should never horizontally overflow viewport */
section.block, section.sources {
  overflow-x: hidden;
  max-width: 100%;
}
/* Tables: enable horizontal scroll on ALL viewport sizes when needed */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 8px 0;
}
.table-scroll table.fin { margin: 0; min-width: 100%; }
/* Make sure existing chart-cards with tables inside scroll properly */
.chart-card { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* Body never horizontally scrolls */
body { overflow-x: hidden; max-width: 100vw; }


/* Sensitivity-grid heatmap colors, shared across DCF (#dcfSens) and EV/Sales (#modelSens) tbodies */
#dcfSens td.hm-1, #modelSens td.hm-1 { background: #b71c1c; color: #fff; }
#dcfSens td.hm-2, #modelSens td.hm-2 { background: #d84545; color: #fff; }
#dcfSens td.hm-3, #modelSens td.hm-3 { background: #ec7070; color: #fff; }
#dcfSens td.hm-4, #modelSens td.hm-4 { background: #f3a3a3; color: #15171a; }
#dcfSens td.hm-5, #modelSens td.hm-5 { background: #fad8d8; color: #15171a; }
#dcfSens td.hm-6, #modelSens td.hm-6 { background: #fae8c8; color: #15171a; }
#dcfSens td.hm-7, #modelSens td.hm-7 { background: #d4e6c8; color: #15171a; }
#dcfSens td.hm-8, #modelSens td.hm-8 { background: #9fd5a3; color: #15171a; }
#dcfSens td.hm-9, #modelSens td.hm-9 { background: #5bb368; color: #fff; }
#dcfSens td.hm-10, #modelSens td.hm-10 { background: #2e8542; color: #fff; }
#dcfSens td.hm-mark, #modelSens td.hm-mark { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
#dcfSens td:first-child, #modelSens td:first-child { background: var(--ink); color: var(--bg); font-weight: 600; }
#dcfSens td, #modelSens td { text-align: center; font-variant-numeric: tabular-nums; padding: 9px 6px; }


.print-btn { background: #16130E !important; color: var(--accent-bright) !important; border: 1px solid var(--accent-bright) !important; min-width: 70px !important; margin: 0 6px; }
.print-btn:hover { background: var(--accent) !important; color: var(--on-accent) !important; }
/* Mobile: keep the Print/PDF button reachable as a compact icon-only control
   so the canvas-snapshot print flow stays accessible from phones. */
@media (max-width: 600px) {
  .print-btn {
    min-width: 36px !important;
    padding: 6px 8px !important;
    margin: 0 2px !important;
    font-size: 0 !important;
  }
  .print-btn::before { content: "🖨"; font-size: 14px; }
}
/* Priority-based column hide for tables annotated with data-priority */
@media (max-width: 600px) {
  table.fin th[data-priority="3"],
  table.fin td[data-priority="3"] { display: none; }
}
@media (max-width: 380px) {
  table.fin th[data-priority="2"],
  table.fin td[data-priority="2"] { display: none; }
}