/* mobile.css - additive phone/small-tablet layer for homeaglow-admin. Loaded LAST in every host (after theme.css, components.css, nav.css, base.css, app.css, yelp.css, crunchbase.css), so where it overlaps an earlier rule it wins by source order at equal specificity. It introduces NO new colors and consumes only the existing semantic tokens. Scope: a single `@media (max-width: 640px)` block. Desktop (>640px) is byte- unchanged — every rule below is gated by the breakpoint. The companion js/mobile-nav.js injects the .hg-mobile-topbar + .hg-scrim and toggles body.nav-open; this file styles them. THE ONE CATASTROPHIC FIX: nav.css pins a 248px fixed rail and pads the body left by 248px, which eats a 390px phone. Here the rail becomes an off-canvas drawer, the body padding drops to 0, and a fixed top bar (hamburger + section label) takes over navigation. Breakpoints to verify: 390px (iPhone) and 360px (small Android). Tablet (641-1024px) is intentionally left on the desktop rail; the catastrophe only bites below ~640px where the rail leaves too little content width. The .hg-mobile-topbar and .hg-scrim are display:none by default (this rule, outside the media query) so they never appear on desktop even though the JS always injects them. */ .hg-mobile-topbar { display: none; } .hg-scrim { display: none; } @media (max-width: 640px) { /* ========================================================================== 1. SHELL — drop the body offset, turn the rail into an off-canvas drawer ========================================================================== */ /* The rail no longer reserves horizontal space; content goes full width. Both the expanded and collapsed body classes reset to 0. */ body.has-nav-rail, body.has-nav-rail-collapsed { padding-left: 0; } /* A fixed top bar takes the place of the rail for navigation, so make room for it at the top of the authed shell. The login / invite screens live outside #app-shell, so they get no top bar and no padding (correct). */ #app-shell { padding-top: calc(52px + env(safe-area-inset-top, 0px)); } /* The rail becomes a fixed off-canvas drawer that slides in over a scrim. Both body classes are matched so a persisted desktop "collapsed" preference can't shrink the drawer — on mobile the drawer is always full/expanded. */ body.has-nav-rail .hg-rail, body.has-nav-rail-collapsed .hg-rail { width: 284px; max-width: 84vw; transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); box-shadow: var(--shadow-lg); z-index: 1200; /* above the top bar (1100) and scrim (1150) */ padding-top: env(safe-area-inset-top, 0px); /* keep nav.css's own background/border/flex column */ } body.nav-open .hg-rail { transform: translateX(0); } /* The in-rail collapse toggle is meaningless on mobile (the drawer is always expanded); hide it and reclaim the space. */ .hg-rail-collapse { display: none; } /* Force the EXPANDED drawer layout even if the persisted desktop preference is collapsed. Each override matches the collapsed selector's specificity and wins by source order — no !important needed. */ body.has-nav-rail-collapsed .hg-rail-views { display: flex; } body.has-nav-rail-collapsed .hg-rail-product { margin-bottom: var(--space-2); } body.has-nav-rail-collapsed .hg-rail-product-head { justify-content: flex-start; gap: 10px; margin: 0 var(--space-2); padding: 7px 10px 6px; } body.has-nav-rail-collapsed .hg-rail-product-head .hg-rail-label, body.has-nav-rail-collapsed .hg-rail-view .hg-rail-label, body.has-nav-rail-collapsed .hg-rail-email-text { display: inline; } body.has-nav-rail-collapsed .hg-rail-footer { padding: var(--space-3) var(--space-3) var(--space-4); } body.has-nav-rail-collapsed .hg-rail-email { justify-content: flex-start; gap: 10px; } body.has-nav-rail-collapsed .hg-rail-settings-menu { position: absolute; left: var(--space-3); right: var(--space-3); bottom: calc(100% - 4px); width: auto; } /* Generous touch targets on the drawer rows (>=44px). The product head is already a flex row; the view rows are display:block, so make them flex so min-height can center the label. */ .hg-rail-product-head { min-height: 44px; } .hg-rail-view { display: flex; align-items: center; min-height: 44px; } .hg-rail-email { min-height: 44px; } /* ========================================================================== 2. MOBILE TOP BAR + SCRIM (injected by js/mobile-nav.js) ========================================================================== */ .hg-mobile-topbar { display: flex; align-items: center; gap: var(--space-2); position: fixed; top: 0; left: 0; right: 0; height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--space-3) 0; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 1100; font-family: var(--font-sans); } /* Hamburger — a 44px ghost icon button on the left. */ .hg-mobile-menu-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text); cursor: pointer; transition: background var(--dur) var(--ease); } .hg-mobile-menu-btn:hover { background: var(--surface-hover); } .hg-mobile-menu-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; } .hg-mobile-menu-btn svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* Center label = current section. Flex-1 + centered, ellipsizes. */ .hg-mobile-title { flex: 1 1 auto; min-width: 0; text-align: center; font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A spacer mirrors the hamburger so the title stays optically centered. */ .hg-mobile-topbar-spacer { flex-shrink: 0; width: 40px; height: 40px; } /* Scrim behind the open drawer. */ .hg-scrim { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 1150; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } body.nav-open .hg-scrim { opacity: 1; pointer-events: auto; } /* Lock background scroll while the drawer is open. */ body.nav-open { overflow: hidden; } /* ========================================================================== 3. CONTENT GUTTERS — 16px, safe-area aware ========================================================================== */ .content { padding: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } /* The Yelp + Crunchbase sections nest their own .content inside the host .content (double gutter on desktop, by design). On mobile collapse the inner one so the gutter is a single 16px. */ #sec-yelp > .content, #sec-crunchbase > .content { padding-left: 0; padding-right: 0; } /* Horizontal-scroll safety net: clip stray overflow at the scroll root. html stays the vertical scroller and fixed elements (top bar) are unaffected. */ html { overflow-x: hidden; } /* ========================================================================== 4. FILTER / TOOLBAR BARS — wrap, let date inputs shrink ========================================================================== */ .filters { gap: var(--space-2); margin-bottom: var(--space-3); } .toolbar-date-input { min-width: 0; } .daterange-inputs { flex-wrap: wrap; } /* ========================================================================== 5. TABLES — momentum scroll inside their existing overflow-x wrappers ========================================================================== */ .cov-table-wrap, .results-table-wrap, .users-table-wrap, .dtable-scroll, #sec-yelp .feed-body, #sec-crunchbase .dtable-scroll { -webkit-overflow-scrolling: touch; } /* ========================================================================== 6. CHAT — stack the split panel, neutralize its desktop edge-bleed margin (which assumes 32px content padding and would overflow against 16px) ========================================================================== */ .chat-layout { flex-direction: column; height: auto; margin: -16px; } .chat-left { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 65vh; } .chat-right { width: 100%; min-height: 220px; } .chat-input-wrap { padding: var(--space-2); } /* Chat's own history drawer sits inside .chat-left (absolute); widen-cap it. */ .chat-sidebar { width: min(280px, 86vw); } /* ========================================================================== 7. MODALS / OVERLAYS — full-width sheets, scrollable, above the top bar. Every dialog must clear the fixed top bar (z 1100) and drawer (z 1200), and never force horizontal scroll. ========================================================================== */ .board-modal-backdrop, .gift-modal-backdrop, .modal-backdrop, .screenshot-overlay, .export-modal, #sec-crunchbase .ovl { z-index: 2000; } /* Generic component modal + crunchbase modal: full width within a 16px gutter. */ .modal { max-width: none; } #sec-crunchbase .ovl { padding: 12px; } #sec-crunchbase .modal { max-width: none; width: 100%; max-height: 88vh; } /* Invite User modal */ .invite-card { width: 100%; max-width: none; margin: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; } .invite-card .invite-grid { grid-template-columns: 1fr; } /* Change Password modal (centered in .board-modal-backdrop) */ .change-password-modal { width: 100%; max-width: none; margin: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } /* Export CSV confirm modal */ .export-modal-body { min-width: 0; width: 100%; max-width: none; margin: 16px; } /* Export progress chip: clear the fixed top bar so it isn't hidden under it. */ .export-chip { top: calc(52px + env(safe-area-inset-top, 0px) + 8px); right: 12px; } /* Screenshot lightbox: fill the screen, no min-width, flush corners. */ .screenshot-overlay-content { min-width: 0; width: 100%; max-width: 100vw; max-height: 100vh; border-radius: 0; padding: 8px; } .ss-overlay-nav { font-size: 11px; } .ss-overlay-nav-hint { display: none; } /* Confirm dialog already uses width:min(92vw,430px) — fine as-is. */ /* ========================================================================== 8. FORM CONTROLS — 16px font kills iOS focus-zoom; selectors are specific enough to beat the compact app.css <=480 rules (e.g. .filters select). Visual size grows a touch on phones, but no jarring page zoom. ========================================================================== */ .filters select, .filters input, .toolbar-date-input, .auth-card .auth-field input, .invite-card .auth-field input, .invite-card .auth-field select, .change-password-modal .form-field input, #chat-input, .settings-card textarea, .settings-card input, #sec-crunchbase .txt, #sec-crunchbase select { font-size: 16px; } /* Low-specificity catch-all for any control not named above. */ input, select, textarea { font-size: 16px; } /* Bigger primary buttons for thumbs (>=44px tall). */ .auth-btn, .invite-btn, .invite-cancel-btn, .export-btn, .settings-save, .chat-send-btn { min-height: 44px; } /* ========================================================================== 9. AUTH SCREENS — single column card with comfortable gutters ========================================================================== */ .auth-screen { padding: 16px; } .auth-card { width: 100%; max-width: 420px; } } /* ============================================================================ TRACKED-URLS SETTINGS TABLE — stacked-card layout (<=768px). The desktop table is a 4-column grid (URL / Type / Status / actions) with white-space:nowrap, so the Status column — which carries the live backfill bar — gets clipped off-canvas on a phone (the feature becomes invisible). Here each collapses into a card and each into a label:value row, so URL + the progress bar + Type + Edit/Delete all stack VERTICALLY and the bar sits in the first viewport with no horizontal scroll. The breakpoint is 768px (one step above the 640px shell block) so small tablets get the stack too. ============================================================================ */ @media (max-width: 768px) { /* The wrap no longer needs to scroll — the cards fit the viewport width. */ #sec-reports .rep-table-wrap { overflow-x: visible; } #sec-reports .rep-settings-table, #sec-reports .rep-settings-table tbody, #sec-reports .rep-settings-table tr, #sec-reports .rep-settings-table td { display: block; width: 100%; } /* Hide the now-meaningless header row (each cell labels itself via ::before). */ #sec-reports .rep-settings-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Each row becomes a calm, warm-light card. */ #sec-reports .rep-settings-table tr { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); } #sec-reports .rep-settings-table tbody tr:hover { background: var(--surface); } /* Each cell is a label:value row; the generated label comes from data-label. */ #sec-reports .rep-settings-table td { border-bottom: none; white-space: normal; padding: var(--space-2) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } #sec-reports .rep-settings-table td + td { border-top: 1px solid var(--border); } #sec-reports .rep-settings-table td::before { content: attr(data-label); flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* A cell with an empty data-label (the actions cell) shows no label gutter. */ #sec-reports .rep-settings-table td[data-label=""]::before { content: none; } /* The URL cell can wrap/break rather than clip to one line. */ #sec-reports .rep-settings-table td[data-label="URL"] { overflow-wrap: anywhere; word-break: break-word; } /* The Status cell: let the backfill bar + count + Resume be fully visible and usable. The .rep-bf inline-flex wraps so nothing is clipped. */ #sec-reports .rep-bf-cell { min-width: 0; } #sec-reports .rep-bf-cell .rep-bf { flex-wrap: wrap; justify-content: flex-end; } /* Give the track room to grow on the wider phone card. */ #sec-reports .rep-bf-cell .rep-bf-track { width: 120px; } /* The Resume control keeps its enlarged hit target. */ #sec-reports .rep-bf-resume { min-height: 32px; } /* Actions row: buttons sit together, comfortably tappable. */ #sec-reports .rep-settings-table td.rep-row-actions { text-align: left; padding-left: 0; justify-content: flex-start; gap: var(--space-4); } #sec-reports .rep-row-btn { padding: 6px var(--space-2); min-height: 32px; } }