/* ============================================================================
 * layout/responsive.css — shared responsive layout primitives
 * ============================================================================
 * Depends on: core/tokens.css
 *
 * Platform rule: fx-env-std-web-mobile-ux-directive.md §10.5
 *   "No layout cell should render below its readable minimum width."
 *
 * Breakpoint: 768px (shared with account page).
 * Validation viewport: 390px (iPhone 14 class).
 *
 * Metric grids use auto-fit/minmax for progressive anti-squeeze collapse.
 * Content splits use hard 768px breakpoint collapse.
 * Tables use min-width floors inside scroll wrappers.
 *
 * Naming: fx- prefix. Platform-wide — not surface-specific.
 * ========================================================================== */

/* ── Live-indicator pulse dot ──────────────────────────────────────────── */
@keyframes fx-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Grid/flex children: prevent min-content resistance ───────────────── */
.fx-page-header > *,
.fx-title-row > *,
.fx-metrics-3 > *,
.fx-metrics-4 > *,
.fx-metrics-5 > *,
.fx-metrics-6 > *,
.fx-split-2 > *,
.fx-split-3 > *,
.panel-header > * {
  min-width: 0;
}

/* ── Page header: title area + sidebar ────────────────────────────────── */
.fx-page-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: start;
}

/* ── Title row: icon + heading ────────────────────────────────────────── */
.fx-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ── Sidebar (quality panel, filters, etc.) ───────────────────────────── */
.fx-sidebar {
  min-width: 280px;
}

/* ── Metric grids: auto-fit with min-width floors (anti-squeeze §10.5) ── */
.fx-metrics-3 {
  display: grid;
  /* Floor at 260px: 2-up needs 260+260+16=536px (tablet+), phones go 1-up.
     Prevents the 2+1 orphan layout on 400-450px viewports. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.fx-metrics-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.fx-metrics-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}
.fx-metrics-6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
}

/* ── Content splits: hard breakpoint collapse ─────────────────────────── */
.fx-split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.fx-split-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}

/* ── Value safety classes ─────────────────────────────────────────────── */
.fx-value {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.fx-hash-full {
  font-family: var(--font-mono);
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ── Table scroll wrapper ─────────────────────────────────────────────── */
.fx-table-wrap {
  width: 100%;
}
.fx-table-wrap table {
  min-width: 640px;
}
.fx-table-wide table {
  min-width: 780px;
}

/* ── Mobile: 768px breakpoint ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Page header: stack title + sidebar */
  .fx-page-header {
    grid-template-columns: 1fr;
  }
  .fx-sidebar {
    min-width: 0;
    width: 100%;
  }

  /* Title row: stack icon + heading vertically */
  .fx-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .fx-title-row svg,
  .fx-title-row img {
    width: 36px;
    height: 36px;
  }

  /* Content splits: single column */
  .fx-split-2 {
    grid-template-columns: 1fr;
  }
  .fx-split-3 {
    grid-template-columns: 1fr;
  }

  /* Table wrapper: enable horizontal scroll */
  .fx-table-wrap,
  .fx-table-wide {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Panel headers: allow title + action button to wrap */
  .panel-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Search nav: wrap links + search onto separate rows */
  .fx-nav {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .fx-search-form {
    margin-left: 0;
    width: 100%;
  }
  .fx-search-input {
    width: 100%;
    max-width: none;
  }

  /* Show More / full-width CTA buttons */
  .fx-show-more {
    width: 100%;
    min-width: 0;
  }

  /* Prev/next navigation: wrap */
  .fx-prev-next {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}