/* SAVRN shell universal mobile rules — extracted from _shell.html.j2 (2026-06-10).
   Loads AFTER per-page CSS so these win at narrow viewports. */

  /* ===========================================
     UNIVERSAL MOBILE RULES — apply to every page.
     Loaded after page_css so they win at narrow viewports.
     Targets the common class names used across v1.3 → v1.5 templates:
       .topline      — dashboard stat strips (investor digest, runtime, CRM)
       .stats-strip  — CRM dashboard stat strip
       .channel-grid — CRM dashboard channel cards
       .channel-cards— deal-new channel picker (visual radio group)
       .grid-3       — 3-column dashboard panel grids
       .kv-grid      — read-only key/value grids (user detail page)
       .check-grid   — checkbox grids (compliance, token tier)
       .row, .row3   — 2-col & 3-col form rows
       .form-grid    — full form (card) stacks
       .card-grid    — multi-card grids
     Tables: wrap individual <table> elements in
       <div class="table-scroll">...</div> in the page template to get
       horizontal-swipe behavior on phone.
     =========================================== */
  @media (max-width: 600px) {
    /* Topline / stats strips: stack to 1 column */
    .topline, .stats-strip {
      grid-template-columns: 1fr !important;
      padding: 16px 18px !important;
    }
    .topline .cell, .stats-strip .cell {
      border-right: none !important;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      padding: 12px 0 !important;
    }
    .topline .cell:last-child, .stats-strip .cell:last-child {
      border-bottom: none;
    }

    /* CRM dashboard channel cards & runtime tool grid */
    .channel-grid, .grid-3, .channel-cards {
      grid-template-columns: 1fr !important;
    }

    /* Form rows: stack paired & triplet fields to single column */
    .row, .row3, .row-1-2 {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    /* Key/value grids on read-only detail pages */
    .kv-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }

    /* Checkbox grids (compliance, token tier, etc.) — 2-up at phone */
    .check-grid {
      grid-template-columns: 1fr 1fr !important;
    }

    /* Card stacks: less side padding so content has room */
    .card { padding: 18px 16px !important; }
    .form-grid, .card-grid { gap: 18px !important; }

    /* Action bars: wrap so buttons don't overflow */
    .actions { flex-wrap: wrap !important; }
    .actions .btn, .actions .btn-secondary { flex: 1 1 auto; }

    /* Crumbs / breadcrumbs — tighter spacing */
    .crumbs { font-size: 10px !important; }

    /* h1 / hero title on detail pages */
    .hero { padding: 18px 16px !important; }
  }

  /* Universal helper: wrap a wide table in <div class="table-scroll"> to
     get horizontal swipe on mobile rather than overflow. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
                   border-radius: var(--radius, 10px); }
  .table-scroll table { min-width: 640px; }
  @media (max-width: 600px) {
    .table-scroll { border: 1px solid var(--rule, #D9DCE0); }
  }

  /* Auto-scroll for naked tables inside .main (so we don't have to wrap
     every <table> in a div across 20+ templates). At <=600px, every
     <table> inside .main becomes its own horizontal-scroll container. */
  @media (max-width: 600px) {
    .main table {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;   /* let cells keep their width; user scrolls */
    }
    .main table thead, .main table tbody, .main table tfoot, .main table tr {
      /* preserve table-like rendering inside the scroll container */
      display: table;
      width: max-content;
      min-width: 100%;
      table-layout: auto;
    }
  }

  /* Tighten the at-a-glance topline cell typography on phone */
  @media (max-width: 600px) {
    .topline .val, .stats-strip .val { font-size: 22px !important; }
    .topline .lab, .stats-strip .lab { font-size: 10px !important; }
  }

  /* ════════════════════════════════════════════════════════════════
     MOBILE RULES for "website-home-page" hybrid landings
     (project home, CRM dashboard, ops dashboard, account health,
      proposal-new, document-detail, deal-dispatch).

     Each landing uses a prefixed class system:
       project home page   →  .ph-*  (hero, totals-strip, pillar-grid)
       CRM dashboard       →  .ch-*  (hero, channels, grid, pillar)
       Ops dashboard       →  .op-*  (hero, grid, pillar, quicklinks)
       Account health      →  .topline + custom cards
       Document detail     →  .gate-strip
       Proposal new        →  .chain (4-step release-chain visualizer)
     Apply identical mobile treatment to all of them in one place.
     ════════════════════════════════════════════════════════════════ */

  /* ── Heroes: tighter padding + remove the round orange bloom on phone ── */
  @media (max-width: 720px) {
    .ph-hero, .ch-hero, .op-hero {
      padding: 28px 20px 24px !important;
      border-radius: var(--radius) !important;
    }
    .ph-hero h1, .ch-hero h1, .op-hero h1 {
      font-size: clamp(24px, 6vw, 32px) !important;
    }
    .ph-hero .tagline, .ch-hero .tagline, .op-hero .tagline {
      font-size: 13.5px !important;
    }
    /* Stacked hero stats: each cell becomes a horizontal row with bottom border */
    .ph-hero .hero-stats, .ch-hero .hero-stats, .op-hero .hero-stats {
      grid-template-columns: 1fr !important;
    }
    .ph-hero .hero-stats .cell,
    .ch-hero .hero-stats .cell,
    .op-hero .hero-stats .cell {
      border-right: none !important;
      border-bottom: 1px solid rgba(255,255,255,0.10) !important;
      padding: 12px 0 !important;
    }
    .ph-hero .hero-stats .cell:last-child,
    .ch-hero .hero-stats .cell:last-child,
    .op-hero .hero-stats .cell:last-child {
      border-bottom: none !important;
    }
    /* Hide the bloom on mobile — kills horizontal overflow */
    .ph-hero::after, .ch-hero::after, .op-hero::after { display: none !important; }
  }

  /* ── Pillar grids stack to 1 col on phone ── */
  @media (max-width: 600px) {
    .pillar-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    /* Pillar inner stats: smaller numbers so they fit one row */
    .pillar-card .pc-stats, .ch-pillar .pc-stats, .op-pillar .pc-stats {
      gap: 14px !important;
    }
    .pillar-card .pc-stats .stat .v,
    .ch-pillar .pc-stats .stat .v,
    .op-pillar .pc-stats .stat .v { font-size: 17px !important; }
  }

  /* ── KPI strips with right-border separators: convert to bottom-border stack ── */
  @media (max-width: 600px) {
    .ph-totals-strip, .ch-channels {
      grid-template-columns: 1fr !important;
      padding: 14px 18px !important;
    }
    .ph-totals-strip .cell, .ch-channels .cell {
      border-right: none !important;
      border-bottom: 1px solid var(--rule, #D9DCE0) !important;
      padding: 10px 0 !important;
    }
    .ph-totals-strip .cell:last-child, .ch-channels .cell:last-child {
      border-bottom: none !important;
    }
  }

  /* ── Two-column "operational view" panels stack to 1 col ── */
  @media (max-width: 600px) {
    .ch-grid, .op-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  }

  /* ── Quick-link footers: tighter spacing + smaller text on phone ── */
  @media (max-width: 600px) {
    .ph-quicklinks, .ch-quicklinks, .op-quicklinks {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }
    .ql { padding: 10px 14px !important; }
    .ql .nm { font-size: 12.5px !important; }
  }

  /* ── Section header dividers: tighter ── */
  @media (max-width: 600px) {
    .ph-section-h, .ch-section-h, .op-section-h {
      font-size: 10.5px !important;
      gap: 10px !important;
    }
    .ph-section-intro, .ch-section-intro, .op-section-intro {
      font-size: 13px !important;
    }
    .ph-divider, .ch-divider, .op-divider { font-size: 10px !important; margin: 8px 0 18px !important; }
    .ph-divider::before, .ch-divider::before, .op-divider::before { width: calc(50% - 70px) !important; }
    .ph-divider::after,  .ch-divider::after,  .op-divider::after  { width: calc(50% - 70px) !important; }
  }

  /* ── Document-detail release-gate strip: 3 cards → stack ── */
  @media (max-width: 720px) {
    .gate-strip { grid-template-columns: 1fr !important; gap: 10px !important; }
  }

  /* ── Proposal-new chain visualizer: 4 steps in a row → stack on phone ── */
  @media (max-width: 720px) {
    .chain {
      grid-template-columns: 1fr 1fr !important;
      gap: 14px !important;
    }
    .chain .step:not(:last-child)::after { display: none !important; }
  }
  @media (max-width: 480px) {
    .chain { grid-template-columns: 1fr !important; }
  }

  /* ── Doc-type radio grid on proposal-new: stack at very narrow ── */
  @media (max-width: 500px) {
    .doctype-grid { grid-template-columns: 1fr !important; }
    .priority-row { flex-direction: column !important; }
  }

  /* ── Per-pillar SPV detail rows on project home: shrink to compact mobile ── */
  @media (max-width: 600px) {
    .spv-row { grid-template-columns: 42px 1fr !important; gap: 10px !important; }
    .spv-row .side { grid-column: 1 / -1 !important; text-align: left !important; }
    .spv-row .specs { font-size: 11px !important; }
  }

  /* ── Health workspace: risk-item cards + telemetry placeholders ── */
  @media (max-width: 600px) {
    .placeholder-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .renewal-hero .days { font-size: 28px !important; }
  }

  /* ── Account-detail tabs row: stack the action buttons on phone ── */
  @media (max-width: 600px) {
    .tabs { flex-wrap: wrap !important; gap: 8px !important; }
  }

  /* ── User-detail hero (avatar + meta + actions): already handled in template
        with @media 720px. Just defensive padding here. ── */
  @media (max-width: 600px) {
    .doc-card .body { padding: 18px 18px !important; }
    .doc-card .body pre.md { font-size: 13px !important; }
  }
<script>
// P233 — guide on/off toggle hooked to user menu
(function(){
  function updateLabel(enabled) {
    var el = document.getElementById("guide-state-label");
    if (el) el.textContent = enabled ? "On" : "Off";
  }
  function getPrefs() {
    return fetch("/api/me/preferences", {credentials:"same-origin"})
      .then(function(r){ return r.ok ? r.json() : null; });
  }
  window.SAVRN_toggleGuide = function() {
    getPrefs().then(function(p) {
      if (!p) return;
      var newState = !p.guide_enabled;
      fetch("/api/me/preferences", {
        method: "PUT", credentials: "same-origin",
        headers: {"Content-Type":"application/json"},
        body: JSON.stringify({guide_enabled: newState})
      }).then(function(r){ return r.json(); }).then(function(p){
        updateLabel(p.guide_enabled);
      });
    });
  };
  document.addEventListener("DOMContentLoaded", function(){
    getPrefs().then(function(p){ if (p) updateLabel(p.guide_enabled); });
  });
})();
</script>