/* ─────────────────────────────────────────────────────────────────────────────
   AIC — aim-mobile.css
   3-tier responsive uplift (tablet 1024px · mobile 768px · small-mobile 390px)
   Per consumer-seo-mobile-doctrine.md §6 + BRIEF FE-3 §2.2
   Do NOT edit base.css — all mobile/tablet overrides live here.
   This file loads AFTER base.css, which is required for inline-style overrides.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Tablet (≤ 1024px) ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bandgrid,
  .cols { grid-template-columns: repeat(6, 1fr); }

  /* ── AIC inline-span override cure (doctrine §6.3) ──
     bandgrid children use inline style="grid-column:span N"
     which base.css cannot override. This file CAN because it loads after base.css.
  */
  .bandgrid > [style*="grid-column"] { grid-column: span 6 !important; }

  .pub-nav { gap: var(--space-3); }
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Grid reset — override inline span styles */
  .bandgrid,
  .grid,
  .cols { grid-template-columns: 1fr !important; }

  [class^="col-"],
  [style*="grid-column"] { grid-column: 1 / -1 !important; }

  /* ── AIC inline-span override cure — full reset at 768px ── */
  .bandgrid > [style*="grid-column"] { grid-column: 1 / -1 !important; }

  /* Table horizontal scroll — jurisdiction matrix + all tables */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .bcard table,
  .pub-wrap table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav collapse */
  .pub-nav { flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); }

  /* Typography scale */
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  .pub-mast { font-size: var(--text-xl); }
  .hero h1 { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* Hero CTA pair */
  .hero .pub-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-left: 0;
  }
  .hero .pub-cta + .pub-cta { margin-top: var(--space-3); }

  /* KPI band cards full-width */
  .bcard { padding: var(--space-4); }
  .bbig  { font-size: var(--text-3xl); }

  /* Feed list */
  .feeds { grid-template-columns: 1fr; }
  .feed  { padding: var(--space-3); }

  /* Pub-head — allow logo + nav to wrap */
  .pub-head__inner { flex-wrap: wrap; gap: var(--space-3); }
  .pub-nav         { flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); }

  /* Section padding */
  .section   { padding-block: var(--space-6); }
  .pub-wrap  { padding-inline: var(--space-4); }

  /* Hero CTA (generic) */
  .pub-cta                  { display: block; text-align: center; width: 100%; }
  .hero .pub-cta + .pub-cta { margin-top: var(--space-3); margin-left: 0; }
}

/* ── Small mobile (≤ 390px) ────────────────────────────────────────────────── */
@media (max-width: 390px) {
  .pub-head__inner { flex-direction: column; gap: var(--space-3); }
  .pub-mast        { font-size: 1.25rem; }
  .pub-nav a       { font-size: 0.75rem; }
  .hero h1         { font-size: clamp(1.375rem, 5vw, 1.75rem); }
  .bbig            { font-size: var(--text-2xl); }

  /* AI-UNVERIFIED badge — wrap without overflow */
  .pub-aiu { font-size: 0.65rem; white-space: normal; }
}

/* ── Tap target enforcement ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pub-nav a,
  .pub-cta,
  .pub-cta--ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 2026-06-10 audit additions ─────────────────────────────────────────────
   Per BRIEF-AIC-2026-06-10 §3-E. Class-not-instance — touches shared classes
   only (no per-surface selectors). Each addition cites the original surface.
   ──────────────────────────────────────────────────────────────────────────── */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  /* Dashboard / subscriber surfaces: collapse aside.side from sidebar to top strip */
  aside.side { position: static; width: 100%; padding: var(--space-3); }
  aside.side nav.snav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  aside.side nav.snav a { white-space: nowrap; }

  /* Brief: 3-card grids (top-signals, material-signals, sources) → 2-col */
  .brief-body .top-signals-grid,
  .brief-body .material-signals-grid,
  .brief-body .sources-grid { grid-template-columns: repeat(2, 1fr); }

  /* Cockpit-data widgets ported into /brief: keep readable */
  .brief-body .concentration-card { padding: var(--space-4); }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  /* Dashboard KPI gauge text: scale down */
  .gauge .gnum { font-size: 2.4rem; }
  .gauge .gnum small { font-size: 1rem; }

  /* Subscriber subnav: stack to 1-col + reduce ic glyph weight */
  aside.side nav.snav { flex-direction: column; gap: var(--space-1); }
  aside.side nav.snav a { padding: var(--space-2); }
  aside.side nav.snav a .ic { opacity: 0.6; }

  /* Brief: all grids → 1-col */
  .brief-body .top-signals-grid,
  .brief-body .material-signals-grid,
  .brief-body .sources-grid { grid-template-columns: 1fr; }

  /* Topnav: theme toggle + sign-in stay visible; hide kicker on narrow */
  .pub-head .pub-kick { display: none; }

  /* Dashboard control-room widgets — defer to §3-F mobile behaviour */
}

/* Small mobile (≤ 390px) */
@media (max-width: 390px) {
  /* Topnav: nav links wrap, smaller font */
  .pub-nav { gap: 6px; font-size: var(--text-xs); }
  .pub-nav a { padding: 2px 4px; }

  /* Brief: tighter padding */
  .pub-wrap { padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   AIC — Hamburger nav + phone-tier breakpoint
   Engine mobile sprint BRIEF-AIC-MOBILE §3-A.2  authored: 2026-06-10
   Breakpoint: ≤640px (phone) — aligns to engine fleet standard.
   The existing 768px/1024px/390px tiers remain untouched above.
   Pattern: engine-wide fleet hamburger (consumes engine-wide fleet hamburger;
     AIC is the first consumer — nominated for asym-intel-internal:tools/partials
     per §3-B fleet escalation).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Phone tier (≤640px) ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hide inline desktop nav; show hamburger button */
  .pub-nav              { display: none !important; }
  .pub-nav-burger       { display: flex; align-items: center; justify-content: center;
                          width: 36px; height: 36px;
                          background: none; border: 1px solid var(--line);
                          border-radius: 7px; cursor: pointer;
                          color: var(--text-muted); flex-shrink: 0; margin-left: auto; }
  .pub-nav-burger:hover { border-color: var(--acc); color: var(--text); }
  .pub-nav-burger svg   { pointer-events: none; }

  /* Theme toggle stays visible — enforce min-height ≥44px */
  .pub-theme-toggle     { min-width: 44px; min-height: 44px; }

  /* Mobile drawer */
  .pub-nav-drawer {
    display: none;
    position: fixed;
    top: 56px; /* matches pub-head height */
    left: 0; right: 0;
    z-index: 199;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    flex-direction: column;
    padding: 8px 0 12px;
  }
  .pub-nav-drawer--open { display: flex; }

  .pub-nav-drawer a {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    padding: 12px 24px;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid var(--line-subtle, var(--line));
    transition: background 0.12s, color 0.12s;
    min-height: 44px; /* VP-005 tap target */
  }
  .pub-nav-drawer a:last-child  { border-bottom: none; }
  .pub-nav-drawer a:hover,
  .pub-nav-drawer a.on          { color: var(--text); background: var(--card); }

  /* Dark-mode drawer */
  [data-theme="dark"] .pub-nav-drawer         { background: var(--surface); border-color: var(--line); }
  [data-theme="dark"] .pub-nav-drawer a       { color: var(--text-muted); }
  [data-theme="dark"] .pub-nav-drawer a:hover { color: var(--text); background: var(--card); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pub-nav-drawer       { background: var(--surface); }
    :root:not([data-theme="light"]) .pub-nav-drawer a     { color: var(--text-muted); }
  }

  /* Masthead + kicker — VP-006 logo nowrap */
  .pub-mast  { white-space: nowrap; flex-shrink: 0; font-size: 1.1rem; }
  .pub-kick  { display: none; } /* already hidden at 768px; belt-and-suspenders */

  /* pub-head inner — don't let logo + burger stack */
  .pub-head__inner { flex-wrap: nowrap; gap: 12px; }
}

/* ── Desktop — hide hamburger elements (belt-and-suspenders for JS-off) ───── */
@media (min-width: 641px) {
  .pub-nav-burger  { display: none !important; }
  .pub-nav-drawer  { display: none !important; }
}

/* ── Dashboard 3-col → 1-col stack order (phone ≤640px) ─────────────────────
   Column order rationale:
     1. Central canvas (main) — primary value, above fold on phone
     2. North-rail / side-nav (aside.side) — secondary navigation context
     3. API panel (div.api-panel) — developer tool, lowest reader priority
   ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .app > main       { order: 1; }
  .app > aside.side { order: 2; }
  .app > .api-panel { order: 3; }

  /* Disable api-panel sticky on phone — sticky + full-height panel kills viewport */
  .api-panel {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Risk heatmap cells: reduce to 40px on phone (still readable; 44px enforced via padding) */
  .heatmap-cell { width: 40px; height: 40px; font-size: 9px; }

  /* Engine strip: allow wrap */
  .engine-strip { flex-wrap: wrap; gap: 6px; }

  /* Donut wrap: stack vertically */
  .donut-wrap { flex-direction: column; align-items: flex-start; }
}

/* ── Brief surface — phone ≤640px ───────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Signal cards: 1-col */
  .brief-body .top-signals-grid,
  .brief-body .material-signals-grid,
  .brief-body .sources-grid {
    grid-template-columns: 1fr;
  }
  /* Brief body prose: full bleed */
  .brief-body { padding-inline: 0; }
}

/* ── Signal-feed surface — phone ≤640px ─────────────────────────────────────── */
@media (max-width: 640px) {
  .feeds        { grid-template-columns: 1fr; }
  .feed         { padding: var(--space-3); }
  .feed-meta    { flex-wrap: wrap; gap: 4px; }
}

/* ── Methodology surface — phone ≤640px ─────────────────────────────────────── */
@media (max-width: 640px) {
  /* Methodology sub-nav (if present) — stack vertically */
  .methodology-nav,
  .method-nav { flex-direction: column; gap: 6px; }
  .methodology-nav a,
  .method-nav a { min-height: 44px; display: flex; align-items: center; } /* VP-005 */
}

/* ── Jurisdiction + risk-vectors + concentration — phone ≤640px ─────────────── */
@media (max-width: 640px) {
  /* 9-column matrix: enforce horizontal scroll; min-width prevents collapse */
  .matrix-9col { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .matrix-9col table { min-width: 560px; }

  /* Jurisdiction tabs: scrollable row */
  .jur-tabs, .tab-row { overflow-x: auto; -webkit-overflow-scrolling: touch;
                         display: flex; flex-wrap: nowrap; gap: 6px; }
  .jur-tab, .tab { flex-shrink: 0; min-height: 44px; display: flex; align-items: center;
                   padding-inline: 12px; } /* VP-005 */
}

/* ── Tablet tier (641–1024px) — hamburger off, nav visible ──────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Reaffirm desktop nav visible at tablet */
  .pub-nav { display: flex !important; }
  /* Dashboard: api-panel top-span already handled by existing 1100px rule */
}

/* ── COCKPIT SHELL — phone ≤640px [DASHBOARD-V2 2026-06-10-1441] ───────────
   .app--cockpit mobile restack: main (1), subnav (2), code-panel (3)
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app--cockpit {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .app--cockpit > main            { order: 1; }
  .app--cockpit > .cockpit-subnav { order: 2; }
  .app--cockpit > .code-panel     { order: 3;
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* Past issues grid — BRIEF-AIC-COMMONS-PARITY-1 §3-D */
@media (max-width: 1024px) {
  .past-issues-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .past-issues-grid { grid-template-columns: 1fr; }
}