` to keep horizontal-scroll readable on a phone:
- Overflow-x: auto with momentum scrolling on iOS.
- First column (`th:first-child` + `td:first-child`) sticks to the
left edge so the row anchor (date, venue, item name) stays visible.
- Soft gradient on the right edge signals "more content this way" —
drops on mobile only because that's where it adds value.
- 44px tap-target floor on table rows so single-row tap actions
(sort, inline edit) read as tap-able.
Markup:
Or alias dynamically: a renderer that owns the wrap can
`wrap.classList.toggle('m-scroll-table', shouldUseGrid)` per tab.
Desktop: the class is a no-op — `overflow-x: auto` falls through to
the parent (which usually doesn't need scroll anyway above 768px). */
@media (max-width: 768px) {
body.has-mobile-shell .m-scroll-table {
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Right-edge fade. `background-attachment: scroll` (default) means the
gradient is positioned relative to this element's own viewport, not
the overflowing content, so it stays pinned to the right edge as
the user scrolls horizontally. We use the dark page surface
(rgba(10,10,10)) as the fade colour so the gradient blends. */
background: linear-gradient(to right, transparent 0%, transparent 88%, rgba(10,10,10,0.8) 100%);
background-repeat: no-repeat;
background-size: 100% 100%;
}
body.has-mobile-shell .m-scroll-table > table {
border-collapse: separate;
border-spacing: 0;
width: max-content;
min-width: 100%;
}
/* Sticky first column. We sticky both | and | at column 1 so the
row anchor (date / venue / item) survives a horizontal scroll. The
| background is darker than | (matches the existing .rpt-table
thead colour), so we lift each to its own background. */
body.has-mobile-shell .m-scroll-table > table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
background: #0d0d0d;
}
body.has-mobile-shell .m-scroll-table > table tbody td:first-child,
body.has-mobile-shell .m-scroll-table > table tfoot td:first-child {
position: sticky;
left: 0;
z-index: 1;
background: #111;
}
/* Tap-target floor on rows. We push it on | rather than | because
the cell is the actual scroll-target on phones. */
body.has-mobile-shell .m-scroll-table > table tbody td {
min-height: var(--m-tap-min);
}
}
/* ─── reporting.html scope ───────────────────────────────────────────── */
@media (max-width: 768px) {
/* Header — keep the logo, title hides below 900px via existing rule.
Type tabs need a 44px tap-target floor and a slightly bigger font. */
body.has-mobile-shell[data-page="reporting"] .rpt-header {
padding: 0 10px;
gap: 8px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-logo { height: 24px; }
body.has-mobile-shell[data-page="reporting"] .rpt-type-tab {
min-height: var(--m-tap-min);
padding: 10px 12px;
font-size: 11.5px;
letter-spacing: 0.18em;
}
/* Desktop hides the export buttons under 600px — we replace them with
the sticky CTA below, so the rule continues to apply. */
/* ─ Sticky filter bar ─────────────────────────────────────────────── */
body.has-mobile-shell[data-page="reporting"] .rpt-filters {
position: sticky;
top: 52px; /* below the .rpt-header (52px tall) */
z-index: 90;
padding: 10px 12px;
gap: 8px;
flex-direction: column;
align-items: stretch;
/* Slight shadow so the row separates from scrolling content. */
box-shadow: 0 6px 12px rgba(0,0,0,0.35);
}
body.has-mobile-shell[data-page="reporting"] .rpt-filter-group {
flex-wrap: wrap;
gap: 6px 10px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-filter-divider { display: none; }
body.has-mobile-shell[data-page="reporting"] .rpt-presets {
flex-wrap: wrap;
gap: 4px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-preset {
min-height: 36px;
padding: 7px 14px;
font-size: 12px;
flex: 1 1 auto;
}
body.has-mobile-shell[data-page="reporting"] .rpt-tax-btn {
min-height: 36px;
padding: 7px 14px;
font-size: 12px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-date-input,
body.has-mobile-shell[data-page="reporting"] .rpt-select {
min-height: 36px;
padding: 6px 10px;
font-size: 13px;
flex: 1 1 auto;
}
body.has-mobile-shell[data-page="reporting"] .rpt-dynamic-filters {
flex-wrap: wrap;
gap: 6px 12px;
width: 100%;
}
/* The top-line Run button moves to the sticky CTA; hide it in the
filter bar on mobile so the bar doesn't carry a second action. */
body.has-mobile-shell[data-page="reporting"] .rpt-run-wrap { display: none; }
/* ─ Main padding so sticky CTA never covers the last row ──────────── */
body.has-mobile-shell[data-page="reporting"] .rpt-main {
padding: 12px 12px calc(72px + var(--m-safe-bottom));
}
/* ─ KPI row: headline-sized values, 2-col, gold pull ──────────────── */
body.has-mobile-shell[data-page="reporting"] .rpt-kpi-row {
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-kpi-card {
padding: 12px 14px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-kpi-label {
font-size: 9.5px;
margin-bottom: 6px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-kpi-value {
font-size: 26px;
color: var(--m-gold, #C49A3A);
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.05;
margin-bottom: 6px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-kpi-sub {
font-size: 11px;
}
/* ─ Table section trim ─────────────────────────────────────────────── */
body.has-mobile-shell[data-page="reporting"] .rpt-table-section {
margin-bottom: 14px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-table-header {
padding: 11px 14px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-section-title {
font-size: 11px;
letter-spacing: 0.16em;
}
/* When the wrap is in scroll-table mode (staffing / operations), let the
primitive's rules drive layout. The legacy `overflow-x:auto` on
.rpt-table-wrap already aligns with what .m-scroll-table needs, so
adding the class to the existing wrap is non-destructive. */
body.has-mobile-shell[data-page="reporting"] .rpt-table-wrap.m-scroll-table {
/* Override the legacy 16px padding so the fade gradient lines up
with the visible right edge of the scrollable area. */
padding: 0;
}
body.has-mobile-shell[data-page="reporting"] .rpt-table-wrap.m-scroll-table > table {
font-size: 12px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-table-wrap.m-scroll-table > table th,
body.has-mobile-shell[data-page="reporting"] .rpt-table-wrap.m-scroll-table > table td {
padding: 9px 10px;
}
/* Card-mode tables inside reporting.html: lift the row to a tappable
surface with the same anchor look as engineering tickets. */
body.has-mobile-shell[data-page="reporting"] table[data-mobile="cards"] tr {
background: #0f0f0f;
border: 1px solid #1f1f1f;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
}
body.has-mobile-shell[data-page="reporting"] table[data-mobile="cards"] td {
font-size: 13.5px;
padding: 6px 0;
gap: 12px;
}
body.has-mobile-shell[data-page="reporting"] table[data-mobile="cards"] td:before {
color: #888;
font-size: 10px;
letter-spacing: 0.18em;
}
/* The first cell in each card (the row anchor — venue / date / item) is
pulled to a larger size with no eyebrow so it reads as a heading. */
body.has-mobile-shell[data-page="reporting"] table[data-mobile="cards"] tbody td:first-child {
font-size: 15px;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
letter-spacing: 0.02em;
padding-top: 0;
margin-bottom: 4px;
border-bottom: 1px solid #1a1a1a;
padding-bottom: 8px;
}
body.has-mobile-shell[data-page="reporting"] table[data-mobile="cards"] tbody td:first-child:before {
display: none;
}
/* Numeric cells stay right-aligned per the desktop convention so the
metric reads after the eyebrow label. */
body.has-mobile-shell[data-page="reporting"] table[data-mobile="cards"] td.num {
text-align: right;
}
/* TOTAL row: keep the same card look but tint border gold so it
stands apart from the per-venue rows. */
body.has-mobile-shell[data-page="reporting"] table[data-mobile="cards"] tr:last-child:has(.highlight) {
border-color: var(--m-gold-soft-2, rgba(196,154,58,0.22));
background: rgba(196,154,58,0.04);
}
/* ─ AI Summary section ─────────────────────────────────────────────── */
body.has-mobile-shell[data-page="reporting"] .rpt-ai-section {
margin-bottom: 14px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-ai-header {
flex-wrap: wrap;
gap: 10px;
padding: 12px 14px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-ai-header .rpt-btn-sky {
min-height: var(--m-tap-min);
padding: 8px 16px;
font-size: 12px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-ai-body {
padding: 14px;
}
body.has-mobile-shell[data-page="reporting"] .rpt-ai-content {
font-size: 14px;
line-height: 1.65;
}
/* ─ Sticky CTA ─────────────────────────────────────────────────────── */
/* Mobile-only — the markup is gated by JS-injected element + this CSS.
The CTA sits below the AI summary but visually sticks to the bottom
of the scroll container; on iOS the safe-area is reserved. */
body.has-mobile-shell[data-page="reporting"] .rpt-mobile-cta {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
body.has-mobile-shell[data-page="reporting"] .rpt-mobile-cta .rpt-btn {
min-height: var(--m-tap-min);
padding: 10px 16px;
font-size: 12px;
letter-spacing: 0.12em;
}
body.has-mobile-shell[data-page="reporting"] .rpt-mobile-cta .rpt-btn-primary {
flex: 1 1 100%;
}
body.has-mobile-shell[data-page="reporting"] .rpt-mobile-cta .rpt-btn-ghost {
flex: 1 1 auto;
}
/* ─ Intelligence view (Mix / Margin / Costs) ──────────────────────── */
/* When body has .intel-mode, .rpt-filters and the sticky CTA hide —
the Intelligence view drives its own period/venue selectors and
the Run button doesn't apply. */
body.intel-mode.has-mobile-shell[data-page="reporting"] .rpt-mobile-cta {
display: none;
}
/* Sub-nav pills — pull to full width so the 3 tabs split evenly. */
body.has-mobile-shell[data-page="reporting"] .intel-subnav {
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
body.has-mobile-shell[data-page="reporting"] .intel-subnav::-webkit-scrollbar { display: none; }
body.has-mobile-shell[data-page="reporting"] .intel-subnav-pill {
min-height: var(--m-tap-min);
padding: 8px 18px;
flex: 1 1 0;
}
/* Intel filter bar (period + venue + meta) stacks at narrow widths. */
body.has-mobile-shell[data-page="reporting"] .intel-filter-bar {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 12px 12px;
}
body.has-mobile-shell[data-page="reporting"] .intel-filter-group {
flex-wrap: wrap;
gap: 8px;
}
body.has-mobile-shell[data-page="reporting"] .intel-period-toggle {
flex: 1 1 auto;
flex-wrap: wrap;
}
body.has-mobile-shell[data-page="reporting"] .intel-period-btn {
min-height: 36px;
padding: 7px 14px;
font-size: 12px;
flex: 1 1 auto;
}
body.has-mobile-shell[data-page="reporting"] .intel-venue-select {
min-height: 36px;
padding: 7px 10px;
font-size: 13px;
flex: 1 1 auto;
}
/* Intelligence cards are already responsive but tighten paddings. */
body.has-mobile-shell[data-page="reporting"] .intel-card {
padding: 14px;
}
body.has-mobile-shell[data-page="reporting"] .intel-card-head {
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
/* Refresh button inside the AI Insights card head wraps to its own row;
give it a 44px tap target. */
body.has-mobile-shell[data-page="reporting"] .intel-insights-card .rpt-btn-sky {
min-height: var(--m-tap-min);
padding: 8px 16px;
}
/* Mix donut + legend already stack via existing @media at line 960.
Keep the donut tight so it doesn't dominate the viewport. */
body.has-mobile-shell[data-page="reporting"] .intel-donut {
width: 180px;
height: 180px;
}
body.has-mobile-shell[data-page="reporting"] .intel-legend-row {
grid-template-columns: 12px 1fr auto auto;
font-size: 12px;
}
/* Margin quadrant: the existing @media drops to 260px; we re-state with
the data-page selector to win specificity when both rules apply. */
body.has-mobile-shell[data-page="reporting"] .margin-quadrant {
height: 260px;
}
body.has-mobile-shell[data-page="reporting"] .margin-pair-row {
grid-template-columns: 90px 1fr;
gap: 8px;
}
/* Costs editor — the table is already a scroll-table by virtue of
`.intel-costs-tablewrap { overflow-x: auto }`. Promote to the
primitive so the first column (Item) sticks, the row tap-target is
44px, and the cost-input doesn't overflow on tap. */
body.has-mobile-shell[data-page="reporting"] .intel-costs-tablewrap {
position: relative;
-webkit-overflow-scrolling: touch;
}
/* The existing @media (line 970+) hides Venue/Category/Updated cols so
the visible columns become: Item (1st) · Price · Cost · Margin.
Sticky the Item column. */
body.has-mobile-shell[data-page="reporting"] .intel-costs-table tbody td:nth-child(3),
body.has-mobile-shell[data-page="reporting"] .intel-costs-table thead th:nth-child(3) {
position: sticky;
left: 0;
background: #111;
z-index: 1;
}
body.has-mobile-shell[data-page="reporting"] .intel-costs-table thead th:nth-child(3) {
background: #0d0d0d;
z-index: 2;
}
/* Cost input keeps a 36px touch height. */
body.has-mobile-shell[data-page="reporting"] .intel-costs-table .cost-input {
min-height: 36px;
padding: 6px 8px;
font-size: 13px;
}
/* Coverage banner tightens its paddings on mobile. */
body.has-mobile-shell[data-page="reporting"] .intel-coverage-banner {
padding: 10px 12px;
font-size: 12.5px;
line-height: 1.45;
}
/* Insight cards stack tighter on mobile. */
body.has-mobile-shell[data-page="reporting"] .intel-insight {
padding: 11px 13px;
}
body.has-mobile-shell[data-page="reporting"] .intel-insight-body {
font-size: 13px;
line-height: 1.55;
}
/* Modal (Costs CSV import result) — full-screen on mobile so the
unmatched-rows list has room. */
body.has-mobile-shell[data-page="reporting"] .intel-modal-body {
max-width: 100%;
width: 100%;
height: 100vh;
max-height: 100vh;
border-radius: 0;
border-left: 0;
border-right: 0;
padding: 16px 16px calc(16px + var(--m-safe-bottom));
}
}
/* Hide the mobile CTA on desktop without any specificity contest. The CTA
block is mobile-only, so the default state is `display: none`. */
.rpt-mobile-cta { display: none; }
/* ════════════════════════════════════════════════════════════════════════
PHASE 4 — Desktop-only notice (admin tools: superadmin / security /
database)
────────────────────────────────────────────────────────────────────────
These three pages are low-frequency admin surfaces — auth reset, audit
logs, raw DB browsing. Mobile-ifying them properly isn't worth the
build (no one resets a user password from a phone), but managers might
genuinely need to glance, so we don't hard-gate.
Pattern:
1. Page opts in with .
2. admin-mobile.js injects .m-desktop-notice as the first body child
below 768px, unless sessionStorage says it was dismissed this tab
session.
3. The notice sits in flow at the top, pushing everything down — the
existing topbar / hero / sidebar (sidebar already display:none on
mobile via the Phase 1b rule) stays put underneath.
4. "Continue anyway" dismisses for the tab session. "Take me home"
navigates to '/'.
Desktop (≥769px) — the DOM element may exist but never renders. The
default-collapsed rule below covers any stray markup, and the only
active rules are inside the max-width media query.
──────────────────────────────────────────────────────────────────────── */
.m-desktop-notice { display: none; }
@media (max-width: 768px) {
body.has-mobile-shell .m-desktop-notice {
display: block;
position: relative;
z-index: 100;
background: #0C1525;
color: #E6E1D8;
border-bottom: 1px solid #1f2937;
padding:
calc(18px + env(safe-area-inset-top, 0))
18px
18px;
font-family: 'Helvetica Neue', system-ui, sans-serif;
}
body.has-mobile-shell .m-desktop-notice__title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 17px;
font-weight: 500;
color: #fff;
margin: 0 0 10px;
letter-spacing: 0.01em;
}
body.has-mobile-shell .m-desktop-notice__body {
font-size: 13.5px;
line-height: 1.55;
color: #B5AC9E;
margin: 0 0 14px;
}
body.has-mobile-shell .m-desktop-notice__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
body.has-mobile-shell .m-desktop-notice__btn {
flex: 1 1 calc(50% - 4px);
min-height: var(--m-tap-min, 44px);
padding: 10px 14px;
border-radius: 6px;
border: 1px solid #2a3548;
background: transparent;
color: #E6E1D8;
font-family: inherit;
font-size: 13px;
letter-spacing: 0.04em;
cursor: pointer;
}
body.has-mobile-shell .m-desktop-notice__btn:active {
background: rgba(255, 255, 255, 0.04);
}
body.has-mobile-shell .m-desktop-notice__btn--primary {
background: #F7F5F2;
color: #000;
border-color: transparent;
font-weight: 600;
}
}
/* ════════════════════════════════════════════════════════════════════════
PHASE 5 — Real-device polish (414px iPhone QA pass)
────────────────────────────────────────────────────────────────────────
Three issues surfaced on a real phone after Phases 0–4 shipped:
1. The desktop top-bar tabs (.nav-primary) were still rendering on
mobile as a cramped horizontal scroll strip. The bottom-nav
already covers panel switching (Today / Floor / Team / Reports /
More), so the top strip was duplicative and visually noisy. We
hide it entirely; the mobile top bar collapses to logo + bell +
privacy + sign-out.
2. The NANDA AI floating toggle (.ops-ai-mobile-btn) was anchored
bottom-right, colliding with the FAB and lying on top of the
BUDGET % indicator. Mirror it to bottom-LEFT and lift it above
the bottom-nav + safe-area with the same clearance math the FAB
uses, so the two floating buttons share the same baseline and
the page content underneath stays untouched.
3. .ops-subtab labels rendered at 11px uppercase with 0.2em letter-
spacing — below the 13px / 44px floor we agreed in Phase 0.
Drop uppercase, bump font-size to --m-text-sm, and bump vertical
padding so each pill comfortably clears 44px.
Desktop (>768px) is byte-identical: every rule sits inside the media
query and is gated by body.has-mobile-shell.
Trade-off worth flagging (see report): hiding .nav-primary entirely
means QR Orders and Training Guide aren't reachable from the mobile
manager portal — they aren't in the bottom-nav and aren't yet in the
FAB sheet. Direct URLs still work. If we get a real-world request to
reach them from a phone, add them to the FAB sheet as a follow-up.
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* ── (1) Hide the legacy nav-tabs row on mobile ─────────────────────── */
body.has-mobile-shell #main-nav .nav-primary { display: none; }
/* Without nav-primary in the middle, the top bar reads as:
[ logo ] ……………………… [ bell · privacy · sign-out ] */
body.has-mobile-shell #main-nav { justify-content: space-between; gap: 8px; }
body.has-mobile-shell #main-nav .nav-right { margin-left: auto; }
/* ── (2) NANDA AI floating toggle — mirror to bottom-left ───────────── */
/* Geometry mirrors .mobile-fab so the two floating buttons share the
same baseline; z-index sits below the FAB (110) and the FAB sheet
(200) so the sheet covers the toggle cleanly when opened. */
body.has-mobile-shell .ops-ai-mobile-btn {
right: auto;
left: 16px;
bottom: calc(var(--m-nav-h) + var(--m-safe-bottom) + var(--m-fab-gap));
z-index: 105;
min-height: var(--m-tap-min);
padding: 10px 18px;
}
/* When the AI sidebar is open, the toggle should not poke through —
the sidebar's own ↓ close button is the active control. The desktop
CSS toggles `.mobile-open` on #ops-ai-sidebar; use :has() to hide
the toggle when that's the case. Safari ≥15.4, Chrome ≥105 — fine
in 2026 (cf. CLAUDE.md piège 15). */
body.has-mobile-shell:has(#ops-ai-sidebar.mobile-open) .ops-ai-mobile-btn {
display: none;
}
/* ── (3) Ops sub-tabs — readable, tappable ──────────────────────────── */
body.has-mobile-shell #ops-subtabs {
padding: 0 12px;
gap: 2px;
}
body.has-mobile-shell .ops-subtab {
font-size: var(--m-text-sm, 13px);
letter-spacing: 0.02em;
text-transform: none;
padding: 14px 14px;
min-height: 48px;
}
}
/* ════════════════════════════════════════════════════════════════════════
PHASE 7 — AI Intelligence cluster error state
────────────────────────────────────────────────────────────────────────
The three `.intel-card` blocks (Today's Highlight / Watch Out For /
Take Action Now) at the top of #panel-ops hit a Claude server-side
generator that takes 10–30s normally. Pre-Phase-7, if the request
hung or errored, the cards sat on "Analyzing…" forever. Phase 7 adds
a 45s client-side abort + a graceful empty state.
This modifier desaturates the cluster when JS toggles
.intel-card--error onto each card: the coloured left-edge accents
(sage / orange / sky) collapse to a muted grey so the trio reads as
"we tried, didn't get there" rather than "live insight." Title goes
from bold off-white to a softer regular weight; body italicizes for
the "Tap refresh to try again." line.
No media query — this is a JS-driven UI state, not a viewport thing.
The selector uses the chained class form (.intel-card.intel-card--error)
so it has the same specificity as the per-card colour rules in
styles.css (.intel-highlight / .intel-watch / .intel-action) and
wins by source order (admin-mobile.css is linked second).
──────────────────────────────────────────────────────────────────────── */
.intel-card.intel-card--error {
border-left-color: rgba(150, 150, 150, 0.4);
}
.intel-card--error .intel-label {
color: rgba(150, 150, 150, 0.55);
}
.intel-card--error .intel-title {
color: rgba(230, 225, 216, 0.6);
font-weight: 400;
}
.intel-card--error .intel-body {
color: rgba(150, 150, 150, 0.7);
font-style: italic;
}
.intel-card--error .intel-metric {
color: rgba(150, 150, 150, 0.5);
}
/* ════════════════════════════════════════════════════════════════════════
PHASE 8 — Scroll-aware hide/reveal for floating buttons
────────────────────────────────────────────────────────────────────────
On #panel-ops (Floor) the period selector + sub-tabs + tax toggle
sit directly underneath the two floating buttons (.mobile-fab in
bottom-right, .ops-ai-mobile-btn in bottom-left, both lifted above
the bottom-nav by the Phase 0 / Phase 5 clearance math). On a real
phone the floating buttons can intercept thumb taps that were meant
for the controls underneath.
Standard mobile FAB pattern: hide on scroll-down, reveal on scroll-
up. admin-mobile.js#wireScrollHide adds/removes `is-scrolling-down`
on from a capture-phase scroll listener. This block consumes
that class.
Scope:
- .mobile-fab (Quick actions FAB) — yes
- .ops-ai-mobile-btn (NANDA AI toggle) — yes
- .mobile-bottom-nav — NO. The bottom-nav is a navigation surface,
not an action; hiding it on scroll would be hostile to mobile UX.
- .mobile-notif-bell — NO. Lives in the top bar, not a floating
button, and is always relevant.
The transition on the base selectors is the same value used during
the .is-scrolling-down hide — declaring it on both states means the
reveal animates at the same pace as the hide instead of snapping
back at the Phase 0 default of 0.15s. Source order beats Phase 0
for the same .mobile-fab selector (Phase 8 is later in the file).
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
body.has-mobile-shell .mobile-fab,
body.has-mobile-shell .ops-ai-mobile-btn {
transition:
transform 220ms cubic-bezier(.4, 0, .2, 1),
opacity 200ms ease;
}
body.has-mobile-shell.is-scrolling-down .mobile-fab,
body.has-mobile-shell.is-scrolling-down .ops-ai-mobile-btn {
transform: translateY(140%);
opacity: 0;
/* Required: the slide-out window is ~220ms during which the button
is invisible but still in flow. Without pointer-events:none it
can intercept taps on the period selector underneath. */
pointer-events: none;
}
}
/* ════════════════════════════════════════════════════════════════════════
PHASE 9 — Unified Floor scroll (#panel-ops)
────────────────────────────────────────────────────────────────────────
The actual blocker behind the floating-button complaints: on mobile,
the Floor panel has TWO scrolling regions stacked inside one viewport-
height parent:
#panel-ops (.panel.active is height:100%, overflow:hidden)
#ops-intelligence (flex-shrink: 0 — pinned)
#ops-body
#ops-subtabs (sticky)
#ops-period-bar
#ops-split (overflow-y: auto ← inner scroller)
#ops-dashboard
…KPIs, charts…
Once Phase 7's intel cards fill in (~600px of content stacked
vertically on a phone), the pinned strip eats the viewport. #ops-split
is left with a 100–150px slit to scroll the whole dashboard inside.
The period selector, tax toggle, sub-tabs, KPIs, and the chart all
become hard or impossible to reach with a thumb.
The fix is structural: lift the scroll to #panel-ops itself and let
everything inside flow as one natural column. The intel strip, the
sub-tabs, the period bar, the KPIs, and the chart all share one
scroll surface. Phase 8's capture-phase listener picks up the
relocated scroll automatically (capture catches scroll on any
descendant of document).
Padding-bottom reserves clearance for the FAB + bottom-nav stack so
the last KPI/chart row doesn't end up underneath the floating
buttons. Math matches the FAB geometry from Phase 0:
bottom-nav (--m-nav-h) 64
+ safe-area (--m-safe-bottom) 0–34 (iOS)
+ FAB size (--m-fab-size) 56
+ 2× FAB gap (--m-fab-gap × 2) 28
----
~148–182 px
Desktop (≥769px) is byte-identical — every rule below sits inside
the max-width 768px media query.
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* The panel itself is now the only scrolling container. */
body.has-mobile-shell #panel-ops {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: calc(
var(--m-nav-h) +
var(--m-safe-bottom) +
var(--m-fab-size) +
var(--m-fab-gap) * 2
);
}
/* Intelligence strip — flows naturally as the first column item.
The desktop flex-shrink:0 stays effectively in force (we don't
need it to shrink), but we explicitly clear any internal overflow
so the strip can't accidentally clip its own card content. */
body.has-mobile-shell #ops-intelligence {
flex: 0 0 auto;
overflow: visible;
}
/* Ops body + split: parent owns the scroll now. These two used to
compete for height with `flex: 1` + `overflow: hidden`; on mobile
they're just inline blocks in the column. */
body.has-mobile-shell #ops-body {
flex: 0 0 auto;
overflow: visible;
min-height: 0;
}
body.has-mobile-shell #ops-split {
flex: 0 0 auto;
overflow: visible;
}
/* Dashboard already had `overflow-y: visible` on mobile from
styles.css:3159, but it's still `flex: 1` from the desktop rule.
Pin to its natural height so the parent scroll governs. */
body.has-mobile-shell #ops-dashboard {
flex: 0 0 auto;
overflow: visible;
}
/* #ops-subtabs (sticky top:0) inherits its sticky context from the
nearest scrolling ancestor — now #panel-ops. The chain between
subtabs and panel-ops is all overflow:visible (per the rules
above), so sticky pins to the panel scroll edge as expected. No
extra rule needed. */
}