/* ==========================================================================
   FlowDesk — Responsive hardening layer
   --------------------------------------------------------------------------
   Loaded LAST (after v6-business.css) so it wins without !important wars.

   WHY THIS FILE EXISTS
   --------------------
   The app shell (.fd-content-inner > .fd-app) is a flex column. `.fd-app` was
   a flex item with the CSS default `min-width: auto`, so it refused to shrink
   below its widest descendant's min-content width. On narrow viewports the
   shell sized itself to content instead of the viewport, and the upstream
   `overflow-x: hidden` hid the overflow instead of fixing it.

   Measured before the fix, at a 360px viewport:
     /earnings   .fd-app = 1352px
     /search     .fd-app =  952px
     /screener   .fd-app =  915px
     /about      .fd-app =  788px

   The desk family (/desk, /list, /markets, /news) was unaffected, which is why
   the bug looked random and page-specific.

   THE FIX, in layers:
     1. Reset the intrinsic-sizing trap on the shell (the root cause).
     2. Make every grid/flex child shrinkable so the trap can't re-form.
     3. Make the layout grids actually collapse at mobile widths.
     4. Contain genuinely unshrinkable content (tables, code, long strings)
        in their own scrollers instead of letting it push the page.
     5. Fluid type + spacing so the scale is continuous, not stepped.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT CAUSE — the intrinsic-sizing trap
   -------------------------------------------------------------------------- */

.fd-app,
.fd-content-inner,
.fd-workspace,
.stock-page.fd-sk {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* The shell is a flex/grid item chain; every level must be allowed to shrink.
   Without this, a single wide child re-inflates the whole page. */
.fd-shell-v2,
.fd-shell-body,
.fd-main,
.fd-content,
.fd-content-inner,
.fd-workspace,
.fd-app,
.fd-page,
.fd-panel,
.fd-card,
.fd-component,
.fd-brief,
.fd-metric-strip,
.fd-brief-strip,
.fd-tab-pane,
.fd-desk-grid,
.fd-desk-msg,
.page-header,
.fd-page-header,
.fd-page-header-text,
.fd-section,
.fd-stack,
.fd-row,
.stock-page,
.stock-hero,
.stock-body,
.screener-form,
.table-wrap,
.fd-table-wrap {
  min-width: 0 !important;
}

/* Grid + flex children must be allowed to go below their content's
   min-content size. This is the single most effective anti-overflow rule. */
.fd-grid,
.fd-grid > *,
.fd-desk-grid > *,
.fd-metric-strip > *,
.fd-brief-strip > *,
.fd-card-grid,
.fd-card-grid > *,
.screener-form > *,
.fd-form-grid,
.fd-form-grid > *,
.fd-page-header > *,
.fd-panel > *,
.fd-card > *,
.fd-tabs > *,
.fd-tab-row > * {
  min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   2. LAYOUT GRIDS — collapse on the way down
   -------------------------------------------------------------------------- */

.fd-grid--2,
.fd-grid--3,
.fd-grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .fd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .fd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .fd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Forms: stack on phones, widen progressively. */
.screener-form,
.fd-form-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 700px) {
  .screener-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fd-form-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 1100px) {
  .screener-form { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .fd-form-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Form controls must never be wider than their cell. */
.screener-form input,
.screener-form select,
.screener-form button,
.fd-form-grid input,
.fd-form-grid select,
.fd-form-grid textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Page headers: title above actions on small screens. */
.fd-page-header {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

@media (min-width: 760px) {
  .fd-page-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
}

.fd-page-actions,
.fd-page-header .fd-btn,
.fd-page-header .fd-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 520px) {
  .fd-page-actions .fd-btn,
  .fd-page-header .fd-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   3. UNSHRINKABLE CONTENT — contain it, don't let it push the page
   -------------------------------------------------------------------------- */

/* Tables get their own horizontal scroller. Already the case for
   .table-wrap, but pinned here so nothing upstream can undo it. */
.table-wrap,
.fd-table-wrap,
.fd-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}

table {
  max-width: 100%;
}

/* Long unbreakable strings: URLs, hashes, tickers, class names, JSON. */
code,
pre,
kbd,
samp,
.mono,
.fd-mono,
[data-mono],
.fd-hash,
.fd-ticker {
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

a {
  overflow-wrap: anywhere;
}

/* Headings and paragraphs never force a wide min-content. */
h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, label, figcaption {
  min-width: 0;
  overflow-wrap: break-word;
}

/* SVG icons must not dictate intrinsic width. */
svg {
  max-width: 100%;
}

img, video, canvas, svg {
  height: auto;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   4. FLUID TYPE + SPACING — continuous scale, not stepped
   -------------------------------------------------------------------------- */

:root {
  --fd-fluid-pad: clamp(12px, 3.2vw, 28px);
  --fd-fluid-gap: clamp(10px, 1.8vw, 18px);
  --fd-fluid-gap-sm: clamp(6px, 1.4vw, 12px);
  --fd-radius-flow: clamp(10px, 1.2vw, 16px);
}

.fd-main,
main.fd-content {
  padding-left: var(--fd-fluid-pad) !important;
  padding-right: var(--fd-fluid-pad) !important;
}

.fd-panel-body,
.fd-card-body,
.fd-panel-head,
.fd-card-head {
  padding-left: clamp(12px, 2.2vw, 18px);
  padding-right: clamp(12px, 2.2vw, 18px);
}

.fd-grid,
.fd-card-grid,
.fd-metric-strip,
.fd-brief-strip,
.screener-form,
.fd-form-grid {
  gap: var(--fd-fluid-gap-sm) !important;
}

.fd-panel,
.fd-card,
.ui-panel,
.fd-metric,
.fd-brief-card {
  border-radius: var(--fd-radius-flow);
  min-width: 0;
}

/* Metric tiles: 2-up on phones reads better than 1-up for short numbers. */
.fd-metric-strip,
.fd-brief-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important;
}

/* --------------------------------------------------------------------------
   5. TOUCH + POINTER
   -------------------------------------------------------------------------- */

/* Comfortable tap targets on coarse pointers, without bloating desktop. */
@media (pointer: coarse) {
  .fd-btn,
  button.fd-btn,
  a.fd-btn,
  .fd-sidebar-link,
  .fd-globalnav-link {
    min-height: 44px;
  }
  .fd-sidebar-link { padding-block: 10px !important; }
}

/* Hover-only affordances must not stick on touch devices. */
@media (hover: none) {
  .fd-card:hover,
  .fd-panel:hover,
  tr:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   6. ACCESSIBILITY
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Honour the OS light/dark preference when the user hasn't chosen. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme-set="1"]) {
    color-scheme: light;
  }
}

/* Visible focus for keyboard users, everywhere. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fd-accent, #2dd4bf);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   7. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .fd-app,
  .fd-content-inner {
    max-width: none !important;
    width: 100% !important;
  }
  .table-wrap,
  .fd-table-wrap {
    overflow: visible !important;
  }
}

/* --------------------------------------------------------------------------
   8. VERY NARROW / ZOOMED VIEWPORTS
   --------------------------------------------------------------------------
   At 320px (iPhone SE) and at 200% browser zoom on a 375px phone, the
   effective viewport is ~187px. Text must not be pushed below legibility
   just to avoid a scrollbar.
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
  :root {
    --fd-fluid-pad: 10px;
  }
  .fd-page-title {
    font-size: 1.2rem !important;
  }
  .fd-metric-strip,
  .fd-brief-strip {
    grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   9. ICON RAIL LABELS
   --------------------------------------------------------------------------
   The desktop rail was pinned to 72px with 8px of padding, leaving 56px for
   an uppercase label. "FORECAST TRADE" needs ~91px at 0.62rem, so the two
   longest nav labels rendered clipped mid-word ("FORECAST TRAC",
   "THE SCORE W"). Widening the rail and letting labels wrap to two lines
   keeps every destination name readable instead of truncating the two that
   happen to be longest.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
  body.fd-page.fd-shell-v5 .fd-sidebar {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
  }

  body.fd-page.fd-shell-v5 .fd-sidebar-link {
    font-size: 0.58rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: none;
  }

  /* The label is often a bare text node or an unclassed span inside the
     anchor — target both so the wrap actually applies. */
  body.fd-page.fd-shell-v5 .fd-sidebar-link > span:not([class*="icon"]) {
    white-space: normal !important;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
}

/* The rail is hidden below 900px, so these only ever apply on pointer-sized
   screens; keep the touch target rule consistent with the taller rail. */
@media (min-width: 901px) and (pointer: coarse) {
  body.fd-page.fd-shell-v5 .fd-sidebar-link { min-height: 56px !important; }
}

/* --------------------------------------------------------------------------
   10. DOC LISTS
   -------------------------------------------------------------------------- */

.cs-doc-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-doc-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.5;
}

.cs-doc-list > li > code {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fd-subhead {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--fd-text);
}