/* charts-responsive.css
 * Loaded last. Responsive + scaling refinements: rail widths at common
 * breakpoints, chip wrapping behaviour, font-scale guard so dense rows
 * stay readable from 1280 to 1920+.
 *
 * Audit targets (desktop):
 *   1280 / 1440 / 1680 / 1920 / 2560+
 * Organised top-down by viewport range (narrow → ultrawide → 4K) and by
 * region (shell grid → MS strip → overlay-bar → orders-row → drawer →
 * rails → backdrop decorations).
 */

/* ───────────────────────────────────────────────────────────────────
   NARROW DESKTOP DEFENCE — 1280px and under (but above 1024 tablet)
   At 1280 the base 240+340 rails already eat ~580px, leaving ~700 for
   the chart. Tighten everything so the chart never drops below 800px.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1366px) {
  /* Slim the right rail; main grows. 1280px - 32px*2 padding - 200 left
     - 280 right = ~768px chart pane. Push right rail to 260 so we clear
     800px. */
  .charts-shell {
    grid-template-columns: minmax(200px, 220px) minmax(800px, 1fr) minmax(240px, 280px);
    gap: clamp(8px, 1.2vw, 12px);
    padding: clamp(12px, 2vw, 20px);
  }
  /* MS strip 6 cells get cramped — shrink the inter-segment padding
     before deciding to wrap (handled at 1400 below). */
  .ms-seg { padding: 4px 5px; }
  .ms-seg .ms-seg-lbl { font-size: 8.5px; letter-spacing: 0.4px; }
  .ms-seg .ms-seg-val { font-size: 11.5px; }
  /* Drawer search input shrinks before disappearing on mobile. */
  .charts-drawer-handle .cdh-search { flex: 0 1 120px; max-width: 140px; }
}

/* MS strip wrap-to-2-rows threshold — below 1200 effective width the
   6 equal cells start truncating the VERDICT/REGIME labels. Letting
   the strip wrap keeps each cell at a readable padding.
   Raised from 1400 → 1200 (2026-05-24): 6 cells × ~130px fit comfortably
   in the ~798px chart pane at 1280, so keep them on one row and avoid
   eating ~35px of vertical chart space. */
@media (max-width: 1200px) {
  .charts-ms-strip {
    flex-wrap: wrap;
  }
  .ms-seg {
    flex: 1 1 calc(33.333% - 1px);
    min-width: 0;
    border-right: 1px solid var(--border-subtle);
  }
  /* Re-establish the per-row right-border etiquette: cell 3 and 6 lose
     their trailing border once they wrap. */
  .ms-seg:nth-child(3n) { border-right: none; }
  .ms-seg:last-child    { border-right: none; }
}
/* Single-row MS strip on narrow desktops: tighten label/value font + cell
   padding so 6 segments fit in the ~760-800px chart pane. */
@media (min-width: 1201px) and (max-width: 1440px) {
  .ms-seg { padding: 3px 4px; }
  .ms-seg .ms-seg-lbl { font-size: 8px; letter-spacing: 0.35px; }
  .ms-seg .ms-seg-val { font-size: 11px; }
}

/* Overlay-bar 4 ov-groups — gap shrink + guaranteed wrap with row-gap.
   Below 1500 the four groups + "Overlays" label start clipping the
   right-most chips. flex-wrap already in base; we just need row-gap. */
@media (max-width: 1500px) {
  .charts-overlay-bar {
    row-gap: 4px;
    padding: 5px 8px;
  }
  .charts-overlay-bar .qf-chip {
    padding: 3px 7px;
    font-size: 10px;
  }
}

/* Narrow-desktop overlay bar collapse: at 1024-1600 the chart pane is
   ~700-920px and the 4 ov-groups + 4 "GROUP" ::before labels + Overlays
   prefix don't fit on one row, so the bar grows to 2 rows (53px) and
   steals chart height. Shrink chips, drop ::before group labels (kept
   accessible via aria-label), and tighten inter-group spacing so the
   four groups + their chips sit on a single 28-32px row. */
@media (min-width: 1025px) and (max-width: 1600px) {
  .charts-overlay-bar {
    padding: 3px 6px;
    gap: 3px;
    column-gap: 3px;
    row-gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .charts-overlay-bar::-webkit-scrollbar { display: none; }
  .charts-overlay-bar .ov-group {
    gap: 2px;
    padding-right: 6px;
    margin-right: 2px;
  }
  .charts-overlay-bar .ov-group::before { display: none; }
  .charts-overlay-bar .qf-chip {
    padding: 2px 6px;
    font-size: 9.5px;
  }
}

/* Below-chart orders-row — stack vertically a touch earlier than the
   existing 900px breakpoint. At ~1280 with both rails visible the
   chart pane is ~700–760px and two side-by-side panels crush the
   row-pos line into 3-line wraps. Stack at 1280 and below to keep
   each row-pos one line. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .charts-orders-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Narrow-desktop vertical compression — give the chart back the pixels.
   The chart pane at 1280-1440 is only ~370-390px tall because MS strip +
   overlay bar + orders row + drawer collectively eat ~250px of vertical
   space. Trim each by 2-6px to recover 15-20px of chart height without
   making any single panel feel cramped. */
@media (min-width: 1025px) and (max-width: 1440px) {
  .charts-shell {
    padding: clamp(8px, 1.4vw, 14px);
    gap: clamp(6px, 0.9vw, 10px);
  }
  .charts-orders-row {
    margin-top: 4px;
    padding: 0 2px 6px;
    gap: 6px;
  }
  .charts-orders-panel h3 { padding: 4px 8px 4px 22px; font-size: 10px; }
  .charts-topbar { min-height: 46px; padding: 0 12px; }
  /* Right-rail section heads trim — applied to right rail only to keep
     left-rail instance list readable. */
  .charts-rail-right .charts-section { margin-bottom: 6px; }
  .charts-rail-right .charts-section h3 { padding: 4px 8px 4px 22px; font-size: 10px; }
  .charts-rail-right .charts-section-body { padding: 6px 8px; font-size: 11px; }
}

/* Rail-left 3px overflow fix: the left rail's intrinsic content (instance
   list rows with badge + name + P/L) is ~241px wide and the grid track at
   1280 is only 200-240px, producing a hairline horizontal scrollbar inside
   the rail. Clip horizontally — vertical scrolling is unaffected. */
.charts-rail-left { overflow-x: hidden; }

/* ───────────────────────────────────────────────────────────────────
   STANDARD HD — 1440px (no override needed; defaults are tuned here)
   1440 - 64 padding - 240 - 340 = 796 chart. Healthy.
   ─────────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────────
   WIDE — 1680px and up
   Grow rails so leaf-row right column (P/L + realized) doesn't have
   to fight TF chips for inline space at 240px width.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 1680px) {
  .charts-shell {
    --rail-left-w: 280px;
    --rail-right-w: 360px;
    max-width: 1920px;
  }
  /* Right-rail micro visualizations breathe better with a touch more
     padding at this width. */
  .charts-rail-right .charts-section { padding: 10px 12px; }
}

/* ───────────────────────────────────────────────────────────────────
   ULTRA — 1920px (Full HD primary monitors)
   Bump rails again; raise max-width so the shell uses the screen.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .charts-shell {
    --rail-left-w: 300px;
    --rail-right-w: 380px;
    max-width: 2100px;
    /* Slightly more comfortable padding tier — dense mode is for 1280–1680. */
    padding: clamp(20px, 2.2vw, 32px);
  }
  /* Leaf row at 300px: P/L pill + realized chip + TF chips fit on one
     line. Restore comfortable row height. */
  .charts-instance-list li { min-height: 36px; }
  /* MS strip cell text can grow safely. */
  .ms-seg .ms-seg-val { font-size: 13.5px; }
  .ms-seg .ms-seg-lbl { font-size: 9.5px; }
}

/* ───────────────────────────────────────────────────────────────────
   4K / 2560px+ — comfortable density, scaled typography
   At 2560 the default 13px/1.4 body is uncomfortably small. Use a
   modest base bump (still anchored to design tokens). max-width grows
   substantially so the chart fills the screen.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 2560px) {
  .charts-shell {
    --rail-left-w: 340px;
    --rail-right-w: 420px;
    max-width: 2560px;
    /* Comfortable padding at 4K — dense mode artefacts (4–5px row gaps)
       become invisible at this pixel density. */
    padding: clamp(28px, 1.5vw, 40px);
    gap: clamp(14px, 1vw, 20px);
    font-size: 14px;
    line-height: 1.45;
  }
  /* Topbar + section heads scale via clamp so they don't blow up on
     6K secondary monitors. */
  .charts-topbar { min-height: 60px; }
  .charts-instance-title { font-size: clamp(14px, 0.95vw, 17px); }
  .charts-topbar .charts-meta { font-size: clamp(12px, 0.7vw, 14px); }
  /* Comfortable row height on instance list — undo dense compression. */
  .charts-instance-list li { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
  /* MS strip — restore generous padding now that 6 cells have room. */
  .ms-seg { padding: 7px 10px; }
  .ms-seg .ms-seg-lbl { font-size: clamp(10px, 0.55vw, 12px); }
  .ms-seg .ms-seg-val { font-size: clamp(13px, 0.78vw, 16px); }
  /* Drawer rows + log lines stay readable at viewing distance. */
  .charts-drawer-handle .cdh-label { font-size: clamp(13px, 0.72vw, 15px); }
  .charts-drawer-body { font-size: clamp(12px, 0.7vw, 14px); }
  /* Right-rail section cards get a comfortable padding bump. */
  .charts-rail-right .charts-section { padding: 12px 14px; }
  .charts-rail-right .charts-section h3 { font-size: clamp(11px, 0.62vw, 13px); }
}

/* ───────────────────────────────────────────────────────────────────
   ULTRAWIDE 3440px+ — sane cap so content stays a readable column
   The shell is already clamped via max-width; ensure that on 3440/5K
   the chart pane doesn't stretch past usable eye-scan width.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 3200px) {
  .charts-shell {
    max-width: 2880px;
    --rail-left-w: 360px;
    --rail-right-w: 460px;
  }
}

/* ───────────────────────────────────────────────────────────────────
   ACCESSIBILITY FLOOR — no text below 10px anywhere
   The dense .ms-seg .ms-seg-lbl, .qf-chip, and tier-pill rules drop to
   9px in places. Guard against the worst at the narrow end.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .ms-seg .ms-seg-lbl { font-size: max(9px, 0.6vw); }
  .ms-seg .ms-seg-val { font-size: max(11px, 0.75vw); }
  .charts-overlay-bar .qf-chip { font-size: max(10px, 0.7vw); }
}

/* ───────────────────────────────────────────────────────────────────
   GRID-CHILD MIN-WIDTH GUARDS
   Flex/grid children with potentially long content (instance titles,
   meta strings, log message text) need min-width:0 to allow shrink.
   Cheap insurance against weird overflow at any viewport.
   ─────────────────────────────────────────────────────────────────── */
.charts-instance-list li > .rail-right { min-width: 0; }
.charts-instance-list li .charts-instance-name { min-width: 0; }
.charts-topbar-left, .charts-topbar-right { min-width: 0; }
.charts-orders-panel .row-pos-mid { min-width: 0; }
.ms-seg, .ms-seg .ms-seg-val { min-width: 0; }

/* ───────────────────────────────────────────────────────────────────
   BACKDROP DECORATIONS — keep orbs/particles off the chart
   `.charts-bg .gradient-orb` and `.particle` are positioned for ~1440
   viewports. At narrow widths they bleed into the chart canvas; at
   ultrawide they sit in the empty gutter (fine). Defensive pointer
   guard plus a narrow-viewport dim. */
@media (max-width: 1366px) {
  .charts-bg .gradient-orb { opacity: 0.35; }
  .charts-bg .particle { opacity: 0.25; }
}
@media (max-width: 1024px) {
  .charts-bg .gradient-orb,
  .charts-bg .particle { display: none; }
}
.charts-bg, .charts-bg * { pointer-events: none; }

/* ───────────────────────────────────────────────────────────────────
   PRINT — minimal sanity (in case anyone PDF-exports a chart view)
   ─────────────────────────────────────────────────────────────────── */
@media print {
  .charts-rail-left, .charts-rail-right, .charts-drawer,
  .charts-bg, .charts-overlay-bar, .charts-rail-toggle { display: none !important; }
  .charts-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; padding: 0; }
}