/* ==========================================================================
   Mobile Hamburger Modal — Grid-of-Icons Home Screen
   fluffy-puzzling-dongarra S3 (2026-05-10) — Issue #2 redesign.

   Replaces the 85vw left-sliding drawer (S1, harnessing-iphone-flotilla) with
   a full-screen icon-grid modal. Universal navigation hub; "user should be
   able to navigate pretty much anywhere from the Hamburger modal."

   Geometry: position:fixed; inset:0; full viewport. Slides up from bottom
   (translateY(100% → 0), 240ms cubic-ease). Body class `mobile-drawer-open`
   locks page scroll. Selectors retained for backward compat
   (.mobile-drawer-overlay, .mobile-drawer-panel) — semantics changed.

   Z-index 12000 — above TabBar (11000), above all modal-class surfaces.
   ========================================================================== */

/* Desktop: never render */
.mobile-drawer-overlay,
.mobile-hamburger-btn {
  display: none !important;
}

@media (max-width: 767px) {

  /* ── Hamburger button (top-left of nav, within safe-area-inset-top).
        closing-realization-gate S2 D1 (2026-05-13 PM) — Iron-Law H2 fix:
        color: inherit tracks .top-nav's color (cream #f5f5f7 via mobile.css base),
        eliminating need for 6 per-palette override rules + closing the
        cascade-default-base-rule trap that made hamburger invisible on
        'default' + 'settings' palettes ([[feedback_top_nav_white_smoking_gun]]). ── */
  .mobile-hamburger-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 4px 0 -4px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
  }
  .mobile-hamburger-btn:active {
    background: rgba(0, 0, 0, 0.06);
  }
  .mobile-hamburger-btn svg {
    width: 26px;
    height: 26px;
    display: block;
  }

  /* ── Modal overlay — covers viewport ABOVE the persistent TabBar.
        sweeping-unifying-canopy S2 D1 (Issue #3, 2026-05-11) — Joe directive
        /listen: "Bottom panel persists in Hamburger." The drawer used to inset:0
        full-viewport at z 12000, which painted on top of the TabBar (z 11000)
        and hid it. The Universal Modal Chrome Contract Phase 2 (bottom-band
        persistence) requires the TabBar to stay visible across every modal —
        the Hamburger is the last hold-out. Insetting the overlay's bottom by
        --mobile-tab-bar-total-height keeps the slide-up panel above the TabBar
        while leaving the TabBar mount fully visible + tappable below. The
        TabBar.js _handleTabClick already calls MobileDrawer.close() before
        navigating, so a tap on any TabBar item from inside the open drawer
        cleanly hands off the foreground. ── */
  .mobile-drawer-overlay {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--mobile-tab-bar-total-height, calc(var(--mobile-tab-bar-height, 48px) + env(safe-area-inset-bottom, 0px))); /* fallback: produced pages load no mobile.css (fable-mobile-toolkit B1) */
    z-index: 12000;
    pointer-events: none;
    visibility: hidden;
  }
  .mobile-drawer-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
  }

  /* ── Panel: full-screen, slide-up from bottom ── */
  .mobile-drawer-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }
  .mobile-drawer-overlay.is-open .mobile-drawer-panel {
    transform: translateY(0);
  }

  /* ── Modal-internal top-bar (mirrors global .top-nav contract:
        hamburger-left + title-center + Fergi AI icon-right). The underlying
        .top-nav is covered by the modal at inset:0; this internal top-bar
        carries the same chrome so the user sees a single coherent header. ── */
  .mobile-drawer-topbar {
    flex-shrink: 0;
    height: var(--mobile-top-bar-total-height, calc(56px + env(safe-area-inset-top, 0px)));
    padding-top: var(--mobile-safe-area-top, env(safe-area-inset-top, 0px));
    padding-left: max(12px, var(--mobile-safe-area-left, env(safe-area-inset-left, 0px)));
    padding-right: max(12px, var(--mobile-safe-area-right, env(safe-area-inset-right, 0px)));
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-sizing: border-box;
  }
  .mobile-drawer-topbar-left,
  .mobile-drawer-topbar-right {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-drawer-topbar-center {
    flex: 1 1 auto;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
  }
  /* 2026-07-10 — drawer is the mobile LANDING surface: brand title carries a
     small version line beneath it (single presentation of the version; the
     value is read from #heroVersion at render time, never hardcoded). */
  .mobile-drawer-topbar-version {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #6b7280;
  }
  .mobile-drawer-topbar-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #1f2937;
    cursor: pointer;
    border-radius: 22px;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  .mobile-drawer-topbar-btn:active {
    background: rgba(0, 0, 0, 0.06);
  }
  .mobile-drawer-topbar-btn--ai:active {
    background: rgba(124, 58, 237, 0.14);
    color: #7c3aed;
  }
  .mobile-drawer-topbar-btn svg {
    width: 26px;
    height: 26px;
    display: block;
  }

  /* ── Profile header (teal gradient — visual continuity with the legacy
        drawer's profile header, now load-bearing as the user's identity
        anchor since .nav-right's JF avatar was retired in S2 D1). ── */
  .mobile-drawer-profile {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #0a2e2e 0%, #134f4f 100%);
    color: #ffffff;
  }

  /* inaugural-kraken-sweep S4 D4.3 (2026-05-18) — identity-row BACK button.
     Prominent affordance per nailing-iphone-uiux Issue #4. Tap closes the
     drawer overlay; the underlying surface (whatever was foreground when the
     user tapped the hamburger) is restored intact. Sized at 44×44 minimum
     tap target per iOS HIG; visual weight matched to the profile-name row
     so users see it as the first affordance when scanning the modal. */
  .mobile-drawer-profile-back {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 56px;
    min-height: 44px;
    padding: 6px 12px 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease, border-color 120ms ease;
  }
  .mobile-drawer-profile-back:hover,
  .mobile-drawer-profile-back:active {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.36);
  }
  .mobile-drawer-profile-back svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
  }
  .mobile-drawer-profile-back-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .mobile-drawer-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    flex-shrink: 0;
    overflow: hidden;
  }
  .mobile-drawer-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mobile-drawer-profile-meta {
    min-width: 0;
    flex: 1 1 auto;
  }
  .mobile-drawer-profile-name {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-drawer-profile-role {
    font-size: 12px;
    opacity: 0.78;
    margin-top: 3px;
    letter-spacing: 0.02em;
  }

  /* ── Scrollable grid area ── */
  .mobile-drawer-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Section block ── */
  .mobile-drawer-section {
    padding: 0;
    border-bottom: 1px solid #f1f3f5;
  }
  .mobile-drawer-section:last-of-type {
    border-bottom: none;
  }
  .mobile-drawer-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6dd4d4;
    padding: 14px 20px 6px;
  }

  /* ── 3-column icon grid (the heart of the new design) ── */
  .mobile-drawer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px 8px 14px;
  }

  /* ── Grid cell: 88pt min touch target, vertical icon+label stack ── */
  .drawer-grid-cell {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 14px;
    color: #1f2937;
    text-align: center;
    transition: background-color 120ms ease, transform 120ms ease;
    box-sizing: border-box;
  }
  .drawer-grid-cell:active {
    background: #f3f4f6;
    transform: scale(0.96);
  }
  .drawer-grid-cell-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4338CA;
    flex-shrink: 0;
  }
  .drawer-grid-cell-icon svg {
    width: 26px;
    height: 26px;
  }
  .drawer-grid-cell-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    color: #1f2937;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Sign-out cell: warm-red tint to signal destructive affordance. */
  .drawer-grid-cell--signout .drawer-grid-cell-icon {
    color: #b91c1c;
  }
  .drawer-grid-cell--signout .drawer-grid-cell-label {
    color: #b91c1c;
  }

  /* ── crisp-anchoring-cradle S2 D2-C (2026-05-11) — 4×4 grid layout ──
     16-cell square-icon home screen (Issue #13). Icons sourced from
     prototype/assets/icons/hamburger-grid/<slug>.svg (ChatGPT R2 set, per
     research/icon_briefs/outputs/SELECTED.md). The grid replaces the prior
     section-based 3-col layout but the per-cell visuals + tap-target rules
     above still apply. */
  .mobile-drawer-grid-4x4 {
    /* minmax(0, 1fr), NOT 1fr (Greg, 2026-10-01). A bare `1fr` column cannot shrink below
       its content's min-content width, and the roomy cells' 68px icon + padding made each
       column 106px: 4 × 106 + gaps = 471px on a 390px phone, with no horizontal scroll, so
       Documentation and Portraits sat half off-screen (webkit-iphone, measured). Labels
       already ellipsize. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 18px 12px 14px;
  }
  .drawer-grid-cell--hamburger4x4 {
    min-height: 96px;
    padding: 12px 4px 10px;
    aspect-ratio: 1 / 1.05;
    gap: 6px;
  }
  .drawer-grid-cell--hamburger4x4 .drawer-grid-cell-icon {
    width: 56px;
    height: 56px;
    /* The ChatGPT R2 icons carry their own gradient palettes — no
       currentColor tint applied. The wrapper just centers the image. */
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
  }
  .drawer-grid-cell-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: transform 120ms ease;
    pointer-events: none;
  }
  .drawer-grid-cell--hamburger4x4:active .drawer-grid-cell-img {
    transform: scale(0.94);
  }
  /* ── S6 · LS3-8 "make it 4x2, bigger icons" ──────────────────────────────
     The family drawer is eight cells over two rows now, so the vertical room the
     old five-row grid did not have is exactly what pays for the bigger icons Joe
     asked for in the same breath. Scoped to --roomy (family tier only): the admin
     drawer carries fourteen cells and keeps the compact metrics, because the tier
     that asked for the working tiles is the tier that wants the density. */
  .mobile-drawer-grid--roomy {
    gap: 10px;
    padding: 22px 14px 18px;
  }
  .mobile-drawer-grid--roomy .drawer-grid-cell--hamburger4x4 {
    /* aspect-ratio: auto (Greg, 2026-10-01). With the base cell's aspect-ratio 1/1.05, a
       112px min-height DERIVES a 106.67px minimum WIDTH (112 ÷ 1.05), so four cells
       needed 471px on a 390px phone and the 4th column (Documentation, Portraits) hung
       off-screen with no scroll. The height stays 112px; the width now shares the row. */
    aspect-ratio: auto;
    min-height: 112px;
    padding: 14px 4px 12px;
  }
  .mobile-drawer-grid--roomy .drawer-grid-cell--hamburger4x4 .drawer-grid-cell-icon {
    width: 68px;
    height: 68px;
  }
  .mobile-drawer-grid--roomy .drawer-grid-cell--hamburger4x4 .drawer-grid-cell-label {
    font-size: 12px;
  }

  .drawer-grid-cell--hamburger4x4 .drawer-grid-cell-label {
    font-size: 11px;
    font-weight: 500;
    color: #1f2937;
    max-width: 88px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }

  /* Canonical illustrated tile cells (2026-08-05). The art is a full-bleed
     illustrated PLATE with its own board colour, unlike the transparent
     hamburger-grid SVGs, so it fills its slot and takes the slot's radius
     instead of floating inside it. `cover` (not `contain`) because the source
     is square and the slot is square — no crop happens, and it guarantees no
     letterbox stripe if that ever stops being true. */
  .drawer-grid-cell--art .drawer-grid-cell-icon {
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(0, 0, 0, 0.18);
  }
  .drawer-grid-cell--art .drawer-grid-cell-img {
    object-fit: cover;
  }

  /* Locked Fergi AI cell — canonical brand mark, gentle outline so it reads
     as a tile (the favicon SVG itself is a dark-teal square with the brain
     emoji centered). */
  .drawer-grid-cell--locked .drawer-grid-cell-icon {
    box-shadow: 0 0 0 1px rgba(10, 46, 46, 0.18);
    border-radius: 14px;
  }
  .drawer-grid-cell--locked .drawer-grid-cell-label {
    font-weight: 600;
    color: #0a2e2e;
  }

  /* Inert placeholder cells (used to preserve 4×4 geometry for guest tier). */
  .drawer-grid-cell--inert {
    background: transparent;
    pointer-events: none;
    visibility: hidden;
  }

  /* Sign-out row — outside the 4×4 grid, full-width pill (destructive
     affordance gets its own surface so it never competes visually with the
     16 launchers). */
  .mobile-drawer-signout-row {
    padding: 4px 16px 12px;
    display: flex;
    justify-content: center;
  }
  .mobile-drawer-signout-btn {
    appearance: none;
    background: rgba(185, 28, 28, 0.08);
    border: 1px solid rgba(185, 28, 28, 0.22);
    color: #b91c1c;
    border-radius: 999px;
    padding: 10px 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease, transform 120ms ease;
  }
  .mobile-drawer-signout-btn:active {
    background: rgba(185, 28, 28, 0.16);
    transform: scale(0.97);
  }
  .mobile-drawer-signout-icon {
    display: inline-flex;
    align-items: center;
  }
  .mobile-drawer-signout-icon svg {
    width: 18px;
    height: 18px;
  }

  /* Admin row — admin-only utilities below the 4×4 grid, before the
     sign-out row. Two horizontally-arranged pills. */
  .mobile-drawer-admin-row {
    display: flex;
    gap: 8px;
    padding: 4px 16px 8px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .mobile-drawer-admin-btn {
    appearance: none;
    background: rgba(67, 56, 202, 0.10);
    border: 1px solid rgba(67, 56, 202, 0.28);
    color: #4338CA;
    border-radius: 999px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease;
  }
  .mobile-drawer-admin-btn:active {
    background: rgba(67, 56, 202, 0.18);
  }
  .mobile-drawer-admin-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Body scroll lock when modal open. */
  body.mobile-drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Reduce motion: drop slide animation. */
  @media (prefers-reduced-motion: reduce) {
    .mobile-drawer-panel {
      transition: none;
    }
  }
}