/* ============================================================
   FOUNDERS — shared responsive layer  (Stage 2 / Cowork)
   The approved screens are desktop-first. This makes them usable
   on iPad + phone by fitting wide containers and stacking the
   recurring DNA card grids. Full per-screen polish is a Stage-3 task.
   Loaded on every screen; only acts below the breakpoints.
   ============================================================ */

/* ---------- tablet & below ---------- */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* wide window / page containers fit the viewport */
  .macbook, .win, .os-mockup, .container, .nav-inner, .wrap,
  .results-preview-grid, .desk-page, .winbar { max-width: 100% !important; }

  /* two-column splits stack */
  .opening-inner, .os-grid, .results-preview-grid, .wizard-grid,
  .concept-grid, .brain-grid, .split, .two-col, .cols { grid-template-columns: 1fr !important; }

  /* 3–5 column card grids → 2 columns */
  .agents-buckets, .howit-grid, .pricing-grid, .paywall-features, .trust-logos,
  .os-folders-grid, .folders-zone, .cards, .card-grid, .util-grid, .grid,
  .sector-grid, .stats, .cstrip { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  /* nearly everything to a single column */
  .agents-buckets, .howit-grid, .pricing-grid, .paywall-features, .trust-logos,
  .os-folders-grid, .folders-zone, .cards, .card-grid, .util-grid, .grid,
  .sector-grid, .stats, .roles-list { grid-template-columns: 1fr !important; }

  /* collapse desktop nav link bars (keep the action buttons) */
  .nav-links, .menu-items { display: none !important; }

  /* shrink big display headings so they don't overflow */
  .opening-title { font-size: 32px !important; }
  .hero-headline, .greeting-title, .hero-split-amount { font-size: 30px !important; }

  /* tighten wide horizontal padding */
  .container, .wrap, .desk-page, .section, .hero-section, .paywall-section { padding-left: 16px !important; padding-right: 16px !important; }

  /* soften the window chrome so it fits the screen edge */
  .macbook, .win, .os-mockup { border-radius: 10px !important; }
  body { padding-left: 0 !important; padding-right: 0 !important; }

  /* pill bars, docks and area grids wrap instead of overflowing */
  .emirate-bar, .dock, .area-grid, .lang-switch { flex-wrap: wrap !important; }

  /* wizard: sidebar sits above the question on phone */
  .sidebar { border-right: none !important; border-bottom: 0.5px solid rgba(31,27,22,0.12) !important; }

  /* keep the prototype's own pills out of each other's way */
  #fr-cmt-panel, #fa-panel { max-width: 94vw !important; }
}

/* ============================================================
   DEEP RESPONSIVE PASS (Stage 2.1)
   Extends the basic shim above. Layout-only — no colors touched.
   Tiers: 1024px (iPad) and 640px (phone). Desktop unchanged.
   ============================================================ */

/* === iPad tier (max-width: 1024px) === */
@media (max-width: 1024px) {

  /* --- OS desktop (os.html): the absolutely-positioned widget rail
         reserved 320px of right margin; reclaim it and let the
         widgets flow inline under the folders --- */
  .desk-page .section-head, .folders-zone { margin-right: 0 !important; }
  .widget-welcome, .widget-today {
    position: static !important;
    top: auto !important; right: auto !important; left: auto !important;
    width: 100% !important; max-width: 440px;
    margin: 16px 0 0 !important;
    animation: none !important;
  }

  /* --- Staff dashboard (staff.html has no media queries of its own):
         5 KPI tiles → 3 across on iPad --- */
  .kpis { grid-template-columns: repeat(3, 1fr) !important; }
}

/* === Phone tier (max-width: 640px) === */
@media (max-width: 640px) {

  /* --- Mac window chrome: keep the chrome, drop the fake URL,
         condense the in-window OS menu bar to logo + status pill --- */
  .win-url, .wu { display: none !important; }
  .menubar { overflow-x: auto; }
  .menubar .mb-item, .mb-item { display: none !important; }

  /* === App windows (app-crm / crm-business / app-projects) === */
  .app { height: auto !important; min-height: 540px; }
  .app > .side { display: none !important; }          /* nav sidebar: phone hides it (matches the other app screens) */
  .tb-top { flex-wrap: wrap !important; }
  .tb-actions { margin-left: 0 !important; width: 100%; flex-wrap: wrap !important; justify-content: flex-start !important; }
  .tabs { overflow-x: auto !important; }
  /* kanban columns slightly narrower so 1.5 columns peek (scroll affordance) */
  #board .col, .scroll > .col { width: 218px !important; }
  /* CRM list rows: drop the fixed-width company column */
  .lrow { flex-wrap: wrap !important; }
  .lrow .lco { width: auto !important; }
  /* CRM table view: keep columns readable, scroll sideways */
  #table table { min-width: 600px; }

  /* === Comparison matrices (pricing.html, concept-benchmark.html) === */
  .matrix, .matrix-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .matrix table { min-width: 540px; }
  .matrix .mrow { min-width: 520px; }

  /* === Wizard (stages 1–13): option/compare grids stack === */
  .bank-specs, .bank-proscons, .reco-body, .fz-compare,
  .downstream-grid, .total-bar { grid-template-columns: 1fr !important; }
  .areas-grid, .sectors-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* === Plan report (plan-full / plan-free): remaining 2-col card
         rows go single column === */
  .cards4, .cards2, .phases, .streams, .mitems, .becards,
  .cards3 { grid-template-columns: 1fr !important; }

  /* === Staff dashboard === */
  .kpis { grid-template-columns: 1fr 1fr !important; }
  .cstrip { grid-template-columns: 1fr !important; }

  /* === OS hub === */
  .primary-stats { grid-template-columns: 1fr !important; }

  /* === Oversized display type → fluid clamp() === */
  .h1 { font-size: clamp(24px, 7.5vw, 28px) !important; }
  .big { font-size: clamp(36px, 12vw, 48px) !important; }
  .page-title { font-size: clamp(26px, 8vw, 32px) !important; }
  .greeting-title { font-size: clamp(26px, 8vw, 30px) !important; }

  /* === Dock: condense so all apps fit a phone width === */
  .dock { padding: 6px 8px !important; gap: 4px !important; max-width: 96vw; overflow-x: auto; }
  .dock-app { width: 40px !important; height: 40px !important; }

  /* === Marketing footer: five columns → two === */
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}