/*! mobile.css — responsive overrides for aura-coherence-demo-v2.html
 *
 * Covers viewport widths ≤ 768 px (phones + small tablets in portrait).
 * Fixes #1369: "Click Play to start simulation" cropped on mobile because
 * .qdash-footer was a single non-wrapping flex row wider than 375 px.
 *
 * Imported by aura-coherence-demo-v2.html after v2-styles.css.
 */

@media (max-width: 768px) {

  /* ── Navigation ──────────────────────────────────────────────── */
  .nav-inner {
    padding: 0 16px;
  }

  /* ── Page padding ─────────────────────────────────────────────── */
  .uc-wrap {
    padding: 0 12px 60px;
    overflow-x: hidden;
  }

  /* ── Dashboard (qdash) ────────────────────────────────────────── */

  /* Stack the three quadrant panels vertically so they're readable */
  .qdash-panels {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }
  body.standalone-dash .qdash-panels {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
    overflow-y: auto;
  }

  /* Give each panel a capped height so content doesn't overflow in inline mode */
  .qdash-panel {
    max-height: 240px;
  }
  /* Allow workflow panels to fully display their diagrams without crop or overlap in inline mode */
  .qdash-panel.tab-workflow,
  .qdash-panel.tab-gworkflow {
    max-height: none;
    min-height: 400px;
  }
  /* In expanded standalone mode, set concrete heights so diagrams render fully without collapsing */
  body.standalone-dash .qdash-panel {
    height: 340px;
    max-height: none;
  }
  body.standalone-dash .qdash-panel.tab-workflow,
  body.standalone-dash .qdash-panel.tab-gworkflow {
    height: 400px;
  }
  /* Prevent Influence SVGs from collapsing to 0 height on mobile */
  [data-panel="network"] svg,
  [data-panel="gnetwork"] svg {
    min-height: 180px;
  }

  /* ── Dashboard footer — the main #1369 fix ────────────────────── *
   *                                                                  *
   * Desktop layout (single row, left-to-right):                     *
   *   [▶ Play] [↺ Reset] │ t = 0.00 s   Click Play to start…       *
   *                                                                  *
   * On 375 px the row is ~420 px wide so the status text is         *
   * pushed off-screen. We split into two rows:                      *
   *   Row 1: [▶ Play] [↺ Reset]  t = 0.00 s                        *
   *   Row 2: Click Play to start simulation  (full width)           *
   * ─────────────────────────────────────────────────────────────── */
  .qdash-footer {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  /* Status text drops to its own row and spans the full width */
  .qf-status {
    flex-basis: 100%;
    text-align: left;
    font-size: 10px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Shrink time label slightly so row 1 fits at 375 px */
  .qf-time {
    font-size: 11px;
    min-width: 68px;
  }

  /* ── Comparison panel ─────────────────────────────────────────── */

  /* Remove the fixed 648 px height — let content drive the height */
  .cmp-panel {
    height: auto;
    min-height: 300px;
  }

  /* Stack the two comparison columns vertically */
  .cmp-cols {
    grid-template-columns: 1fr;
  }

  .cmp-header-bar {
    grid-template-columns: 1fr;
    height: auto;
  }

  .cmp-header-side {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 10px 16px;
  }

  .cmp-header-side:last-child {
    border-bottom: none;
  }

  .cmp-statusbar {
    grid-template-columns: 1fr;
  }

  .cmp-status-left {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* Gauge labels truncate less aggressively at narrow widths */
  .cmp-gauge-label {
    width: 120px;
    font-size: 9px;
  }

  /* ── Simulation control widget (.sim-ctrl) ────────────────────── */
  .sim-ctrl {
    min-width: unset;
    width: calc(100vw - 40px);
    padding: 12px 16px;
  }

  .sim-ctrl-row {
    gap: 12px;
  }

  .sim-ctrl-time {
    font-size: 13px;
    min-width: 80px;
  }

  /* Hint text below the controls */
  .sim-ctrl-hint {
    font-size: 10px;
    text-align: center;
  }

  /* ── Summary stats grid — 2 columns on mobile ────────────────── */
  .uc-summary-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .uc-summary-stat-n {
    font-size: 28px;
  }

  /* ── Hero section ─────────────────────────────────────────────── */
  .hero {
    margin-top: 40px;
    padding: 0 16px;
  }

  .hero p {
    font-size: 15px;
  }

  /* ── Scenario strip grid — single column on mobile ───────────── */
  .sc-strip {
    grid-template-columns: 1fr;
    padding: 0 16px;
    margin: 40px auto 60px;
  }

  /* ── #1369 round 2 — remaining horizontal-overflow offenders ──── */

  /* How It Works: the body row is `1fr 320px` on desktop; the fixed 320px
   * diagram column pushes the row ~200px past a 390px viewport. Stack it. */
  .hiw2-step-body-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* The 3-up stats row likewise stacks; drop the right borders/margins. */
  .hiw2-stats {
    grid-template-columns: 1fr;
    padding-top: 36px;
    margin-top: 32px;
  }
  .hiw2-stat {
    padding: 0 0 14px;
    margin-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* Dashboard status bar carries 4 stats (incl. Simulation Mode, #1834).
   * Four non-wrapping cells overflow 390px, so wrap them into a 2×2 grid. */
  .qdash-statusbar {
    height: auto;
    flex-wrap: wrap;
  }
  .qdash-stat {
    flex: 1 1 45%;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* Architecture/Whitepaper page uses inline multi-column grids (cards + "What Rainfall
   * Is Not"). Stack them to one column. !important is required to beat the
   * inline `style="…grid-template-columns:1fr 1fr…"`. */
  #page-whitepaper div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Closing page cost-comparison (#1792) is an inline two-column grid. */
  #page-closing div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Outcome comparison ("Without Rainfall" / "With Rainfall") two-up cards. */
  .diff-grid {
    grid-template-columns: 1fr;
  }

}