/* CX-3: mobile-responsive pass, global layer.
   Applies to every Ops Centre page via shared_nav head injection.
   Strategy at <=640px: nav becomes a horizontal scroll strip (cleaner with
   the existing token system than a hamburger; zero JS), tables scroll in
   their own container, the CX-1 drawer goes full screen (in amc_drawer.css),
   44px touch targets, and no horizontal body scroll anywhere. */

@media (max-width: 640px) {
  html, body { overflow-x: hidden !important; max-width: 100vw; }

  /* --- top nav: horizontal scroll strip --- */
  .amc-nav {
    flex-wrap: nowrap !important;
    padding-left: 8px !important; padding-right: 8px !important;
    gap: 6px !important;
  }
  .amc-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
  }
  .amc-tabs::-webkit-scrollbar { display: none; }
  .amc-tab, .amc-subtab {
    min-height: 44px !important;
    display: inline-flex !important; align-items: center;
    flex: 0 0 auto;
  }
  .amc-brand { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }
  /* meta cluster: keep the clock off phones, keep spend pill tappable */
  .amc-clock { display: none !important; }
  .amc-meta { flex: 0 0 auto; }
  .amc-spend { min-height: 32px; }

  /* --- shell rail collapses --- */
  .amc-shell { flex-direction: column !important; }
  .amc-rail {
    position: static !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: 34vh;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  }
  .amc-main { width: 100% !important; min-width: 0 !important; }

  /* --- tables: scroll inside their own container --- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* --- generic width offenders --- */
  img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* --- touch targets --- */
  button, .act, .lr-btn, .rail-link, input[type="checkbox"] + label {
    min-height: 44px;
  }
  input, select, textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */

  /* --- common grid layouts stack --- */
  .counts-row, .queue-row, .list-row { max-width: 100%; }
  .container, .wrap, .page, .content { max-width: 100vw !important; box-sizing: border-box; }
}

/* --- page-specific 390px fixes (CX-3 sweep findings) --- */
@media (max-width: 640px) {
  /* project page: stack the section rail above the content */
  body[data-amc-page="project"] .layout { grid-template-columns: 1fr !important; }
  body[data-amc-page="project"] .rail {
    position: static !important; height: auto !important; max-height: 32vh;
    border-right: none !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
  }
  body[data-amc-page="project"] .main { padding: 18px 14px 48px !important; }

  /* filings: fixed-width calendar grid scrolls inside its panel */
  .panel { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* shell rail: padding must not push past the viewport */
  .amc-rail, .amc-rail > * { box-sizing: border-box; }
}

/* --- round 2 sweep fixes: dashboard nav meta, briefing toolbar, live lists --- */
@media (max-width: 640px) {
  .amc-meta { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .amc-spend .fc, #amc-spend-cap { display: none !important; }
  .live-toolbar { flex-wrap: wrap; max-width: 100%; }
  .last-refresh { display: none !important; }
  .section, .section-head { max-width: 100%; min-width: 0; }
  .list-card { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- round 3: dashboard utility tiles --- */
@media (max-width: 640px) {
  .utility-tiles { grid-template-columns: 1fr !important; max-width: 100%; }
  .util-tile { min-width: 0; max-width: 100%; overflow: hidden; }
  .util-tile .ut-label, .util-tile .ut-headline, .util-tile .ut-foot,
  .util-tile .ut-spend-row { min-width: 0; white-space: normal; word-break: break-word; }
}

/* --- round 4: dashboard panels / issue rows --- */
@media (max-width: 640px) {
  body[data-amc-page="dashboard"] .grid { grid-template-columns: 1fr !important; min-width: 0; }
  body[data-amc-page="dashboard"] .panel { min-width: 0; }
  .issue-row, .issue-row * { min-width: 0 !important; white-space: normal !important; }
}

/* --- round 5: tighter main padding + hard wrap on issue rows --- */
@media (max-width: 640px) {
  .amc-main { padding-left: 10px !important; padding-right: 10px !important; }
  .issue-row, .issue-row * { overflow-wrap: anywhere !important; }
  .panel h2 { overflow-wrap: anywhere; }
}

/* --- round 6: sessions page wrapper (CX-2 page, fixed via global layer) --- */
@media (max-width: 640px) {
  .sess-wrap { max-width: 100% !important; width: auto !important; box-sizing: border-box; }
}

/* --- round 7: shell main must include padding in its width --- */
@media (max-width: 640px) {
  .amc-shell, .amc-main { box-sizing: border-box !important; max-width: 100vw !important; min-width: 0 !important; }
}

/* --- round 8: clip stray sub-pixel overflow inside the shell --- */
@media (max-width: 640px) {
  .amc-shell { overflow-x: hidden !important; }
}