/* ============================================================
   INVESTRA - RESPONSIVE FOUNDATION  (responsive.css, Round 16)
   Loaded LAST on every page, so it wins over dark.css / light.css / app.css
   in both themes. New stylesheets are linked immediately BEFORE this file.

   Breakpoints (the only widths new CSS and JS may use; JS: window.INV_BP / window.invMQ)
     phone-s  (max-width:389.98px)                 360/375 phones - densest grids only
     phone    (max-width:599.98px)                 all phones in portrait
     tablet   (min-width:600px) and (max-width:1023.98px)
                                                   small tablets, iPad portrait, landscape phones;
                                                   the sidebar is an overlay here
     md       (min-width:744px)                    2-column upgrades inside the tablet tier
     desktop  (min-width:1024px)                   permanent 240px sidebar
     wide     (min-width:1440px)                   large laptops
     xl       (min-width:1800px)                   1920+ monitors: centred, 1536px inner width
     short    (max-height:500px) and (orientation:landscape)   landscape phones
     coarse   (pointer:coarse)   /   hover  (hover:hover) and (pointer:fine)

   Rules: touch targets >= 44px below 1024 and on coarse pointers; text >= 11px below 1024;
   inputs 16px on touch; no hover-only information; grid children min-width:0; every table in
   a .table-wrap scroller (initTableCues); charts <= 320px tall on phones, <= 273px on short.
   Never style .sg-reveal / .sgr-* here (SANGRAM champion card is frozen), never bare
   element selectors such as button{} or a{}.
   ============================================================ */

/* ---------- 1. Tokens (theme-agnostic) ---------- */
:root {
  --pad-x: clamp(16px, 9.74px + 1.7392vw, 32px);
  --gap: clamp(14px, 10.09px + 1.087vw, 24px);
  --content-max: 1336px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 15px;
  --fs-h3: clamp(14px, 13.61px + .109vw, 15px);
  --fs-h2: clamp(16px, 15.22px + .217vw, 18px);
  --fs-h1: clamp(22px, 19.4px + .58vw, 29px);
  --fs-kpi: clamp(20px, 18.43px + .435vw, 24px);
  --fs-hero: clamp(26px, 22.87px + .87vw, 34px);
  --fs-display: clamp(32px, 28.87px + .87vw, 40px);
  --tap: 44px; --tap-chip: 32px;
  --topbar-h: 56px;
  --card-min: 260px; --card-min-chart: 320px; --card-min-kpi: 150px;
  --chart-max-phone: 320px; --chart-min: 220px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
}
@media (min-width:1800px) { :root { --content-max: 1536px; } }
@media (max-width:1023.98px), (pointer:coarse) { :root { --fs-2xs: 11px; } }
@media (max-height:500px) and (orientation:landscape) { :root { --topbar-h: 48px; } }

/* ---------- 2. Global ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.grid-2 > *, .grid-3 > *, .grid-1-2 > *, .grid-2-1 > *, .kpi-strip > *, .aura-strip > * { min-width: 0; }
.page-title { font-size: var(--fs-h1); }
.kpi-value { font-size: var(--fs-kpi); }
.r-auto { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr)); }

/* ---------- 3. Shell: phone + tablet (sidebar overlay, top bar) ---------- */
.m-topbar { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 190;
  height: calc(var(--topbar-h) + var(--safe-t)); padding-top: var(--safe-t);
  align-items: center; justify-content: center;
  background: var(--bg-base); background: color-mix(in srgb, var(--bg-base) 94%, transparent);
  border-bottom: 1px solid var(--border); transition: transform .28s var(--ease-out, ease); }
.m-topbar-name { font-family: var(--font-display, inherit); font-size: 15px; letter-spacing: .18em; color: var(--gold); }
.hamburger, .theme-toggle-fixed { transition: transform .28s var(--ease-out, ease); }

@media (max-width:1023.98px) {
  .sidebar { transform: translateX(-100%); z-index: 210; padding-top: var(--safe-t); padding-left: var(--safe-l); overscroll-behavior: contain; }
  .sidebar.open { transform: none; box-shadow: 12px 0 40px rgba(0,0,0,.45); }
  .sidebar-overlay.open { display: block; z-index: 205; }
  .hamburger { display: flex; width: 44px; height: 44px; top: calc(6px + var(--safe-t)); left: calc(12px + var(--safe-l)); }
  .theme-toggle-fixed { top: calc(8px + var(--safe-t)); right: calc(12px + var(--safe-r)); width: 40px; height: 40px; z-index: 200; box-shadow: none; }
  .content { margin-left: 0; padding: calc(var(--topbar-h) + var(--safe-t) + 12px) max(var(--pad-x), var(--safe-r)) calc(96px + var(--safe-b)) max(var(--pad-x), var(--safe-l)); }
  .content .page-header { padding-right: 0; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  html { scroll-padding-top: calc(var(--topbar-h) + var(--safe-t) + 8px); }
  html.nav-open, html.nav-open body { overflow: hidden; }
  html.nav-open .hamburger { left: calc(var(--sidebar-w, 240px) + 12px + var(--safe-l)); }
  .m-topbar { display: flex; }
  html.bar-hide .m-topbar, html.bar-hide .hamburger, html.bar-hide .theme-toggle-fixed { transform: translateY(calc(-100% - 20px - var(--safe-t))); }
}

/* ---------- 4. Shell: desktop (centred from 1640px up) ---------- */
@media (min-width:1024px) {
  .content { max-width: none;
    padding-left: max(var(--pad-x), calc((100% - var(--sidebar-w, 240px) - var(--content-max)) / 2));
    padding-right: max(var(--pad-x), calc((100% - var(--sidebar-w, 240px) - var(--content-max)) / 2)); }
}

/* ---------- 5. Floating buttons per tier ---------- */
@media (max-width:599.98px) {
  .astra-fab { width: 72px; height: 72px; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); }   /* R23: bigger on phones */
  .astra-fab img { width: 68px; height: 68px; }
  .dr-launch { right: calc(96px + var(--safe-r)); bottom: calc(28px + var(--safe-b)); padding: 0 6px; }
  .dr-launch-txt { display: none; }
  .guide-fab { left: calc(16px + var(--safe-l)); }
}
@media (min-width:600px) and (max-width:1023.98px) {
  .astra-fab { width: 64px; height: 64px; right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); }
  .astra-fab img { width: 60px; height: 60px; }
  .dr-launch { right: calc(92px + var(--safe-r)); bottom: calc(26px + var(--safe-b)); padding: 0 6px; }
  .dr-launch-txt { display: none; }
}
@media (min-width:744px) and (max-width:1023.98px) {
  .dr-launch { padding: 0 16px 0 6px; }
  .dr-launch-txt { display: inline; }
}
@media (max-height:500px) and (orientation:landscape) {
  .astra-fab { width: 52px; height: 52px; right: calc(12px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); }
  .astra-fab img { width: 48px; height: 48px; }
  .dr-launch { right: calc(76px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); padding: 0 6px; }
  .dr-launch-txt { display: none; }
  .guide-fab { bottom: calc(10px + var(--safe-b)); }
}

/* ---------- 6. Touch (coarse pointer at any width, and everything below 1024) ---------- */
@media (pointer:coarse), (max-width:1023.98px) {
  .nav-item, .tab-btn, .astra-tab, .sgw-tab, .psel-btn, .csv-btn, .aq-sort-b, .mm-mode, .cv-tabs button, .dr-tab, .btn { min-height: var(--tap); }
  .theme-toggle, .hamburger, .dr-tool, .dh-x { min-width: var(--tap); min-height: var(--tap); }
  .drishti-chip, .vf2-chip, .co-chip, .ck-chip, .gx-leg, .chip, .pickchip { min-height: var(--tap-chip); position: relative; }
  .drishti-chip::after, .vf2-chip::after, .co-chip::after, .ck-chip::after, .gx-leg::after, .chip::after, .pickchip::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .eq-chip, .ck-reset, .ck-seg button, .out-tag, .dr-mini { position: relative; }
  .eq-chip::after, .ck-reset::after, .ck-seg button::after, .out-tag::after, .dr-mini::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .ck-range { min-height: var(--tap); }
  .vf2-opt, #vBudget, .vh-search { min-height: var(--tap); }
  .rp .lq-range { min-height: var(--tap); min-width: var(--tap); }
  .rp .lq-kbtn { position: relative; }
  .rp .lq-kbtn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea { font-size: 16px; }
  input[type=range]::-webkit-slider-thumb { min-width: 28px; min-height: 28px; }
}
@media (hover:none) {
  .card:hover, .kpi-card:hover, .aura-card:hover, .guide-fab:hover, .dr-launch:hover, .dr-launch.on:hover { transform: none; }
}

/* ---------- 7. Type floor (below 1024 and on touch; desktop keeps its micro sizes) ---------- */
@media (max-width:1023.98px), (pointer:coarse) {
  .seg-tag, .sgp-tk, .aura-gap em, .nav-section, .sidebar-version, .sidebar-sub, .drishti-tag, .drishti-status-txt,
  .vf2-opt i, .ck-sl-t span, .cv-then small, .kpi-label, .section-meta, .cv-stamp, .toc-label, .sg-sublabel,
  .rp-chip, .ck-lab, .disc-copy, .aura-sub, .kpi-change, .aura-ring-txt, .bm-seg em, .bm-ghead small { font-size: 11px; }
  .live-pill { font-size: 10px; }
}

/* ---------- 8. Chart heights ---------- */
@media (max-width:599.98px) {
  .chart-canvas-wrap { max-height: var(--chart-max-phone); }
}
@media (max-height:500px) and (orientation:landscape) {
  .chart-canvas-wrap { max-height: max(var(--chart-min), 70svh); }
  .seg-perf-card .seg-perf-canvas { min-height: 0; }
  .galaxy-hero .galaxy-stage { height: min(440px, calc(100svh - var(--topbar-h) - 24px)); }
  .umap-host, .mm-wrap { max-height: 80svh; }
}

/* ---------- 9. Tables (initTableCues toggles .is-scroll / .can-r / .can-l) ---------- */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; position: relative; }
.table-wrap table { font-variant-numeric: tabular-nums; }
.table-wrap.is-scroll table thead th:first-child, .table-wrap.is-scroll table tbody td:first-child { position: sticky; left: 0; z-index: 2; }
.table-wrap.is-scroll table thead th:first-child { background: var(--bg-input); }
.table-wrap.is-scroll table tbody td:first-child { background: var(--bg-card); }
.table-wrap.is-scroll table tbody tr:hover td:first-child { background: var(--bg-hover, var(--bg-card)); }
.table-wrap.can-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
@media (max-width:599.98px) {
  .t-stack, .t-stack tbody { display: block; width: 100%; min-width: 0 !important; }
  .t-stack thead { display: none; }
  .t-stack tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .t-stack td { display: block; border: 0; padding: 4px 0; min-width: 0 !important; white-space: normal !important; text-align: left; overflow-wrap: anywhere; }
  .t-stack td * { white-space: normal !important; }
  .t-stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-muted); font-size: 11px; }
  .table-wrap:has(> .t-stack) { overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 10. Landscape phones (short) ---------- */
@media (max-height:500px) and (orientation:landscape) {
  .content { padding-left: max(var(--pad-x), var(--safe-l)); padding-right: max(var(--pad-x), var(--safe-r)); }
  .sidebar { overscroll-behavior: contain; }
}

/* ---------- 11. Print ---------- */
@media print {
  .m-topbar, .hamburger, .theme-toggle-fixed, .astra-fab, .fab-fire-canvas, .dr-launch, .guide-fab, .ember-canvas, .device-hint { display: none !important; }
}

/* ---------- 12. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-topbar, .hamburger, .theme-toggle-fixed { transition: none; }
}

/* R16 WP-14: the quarter brief notes wrap on phones instead of being cut */
.cv-qb-chip > small { white-space: normal; }
/* R16 WP-14: a chart canvas must never hold its grid column open (grid items default to min-width:auto) */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.chart-canvas-wrap > canvas { max-width: 100%; }
/* macro KPI source date wraps on phones instead of being cut */
@media (max-width:599.98px) { .kpi-src-date { white-space: normal !important; overflow: visible !important; } }
/* gauges shrink with a narrow card instead of overrunning it */
.gauge-row > * { min-width: 0; }
.gauge-svg { max-width: 100%; height: auto; aspect-ratio: 142 / 138; }
/* R19: a slightly larger wordmark in the sidebar */
.sidebar .sidebar-wordmark { font-size: 24px; letter-spacing: 1.8px; }