/* ── Mobile (≤768px) ── */ @media (max-width: 768px) { .mobile-header { display: flex; } .mobile-shortcut-capsule { display: flex; } /* Account widget now lives in the sidebar's drop-up trigger - the bell just needs its own mobile-header-height top offset, no longer shared positioning logic with a widget beside it. */ .notif-widget { top: 10px; right: 12px; } /* The dropdown itself switches from "anchored under the bell" to pinned directly to the viewport - at this width, positioning it relative to the bell's exact x-position (like desktop does) is what was pushing it past the screen edge. Fixed left/right margins guarantee it never can. */ .notif-menu { position: fixed; top: 56px; left: 12px; right: 12px; width: auto; max-height: min(70vh, 480px); } /* Standalone popover variant of #accountMenu - used only when it's opened from the mobile shortcut capsule (toggleMobileAccountMenu() in js/ui.js) while the sidebar drawer itself stays closed. JS reparents the node onto first; this then pins it to the viewport the same way the notif bell's dropdown is pinned above, instead of the sidebar-relative absolute positioning .advisor-profile-menu normally uses. */ #accountMenu.mobile-popover { position: fixed; top: auto; bottom: 16px; left: 12px; right: 12px; width: auto; max-height: min(70vh, 480px); overflow-y: auto; z-index: 260; } /* Same treatment for the Navigate drop-up when opened from the floating capsule (toggleMobileNavMenu() in js/nav.js reparents it onto ). */ #navMenu.mobile-popover { position: fixed; top: auto; bottom: 16px; left: 12px; right: 12px; width: auto; max-height: min(70vh, 480px); overflow-y: auto; z-index: 260; } .sidebar { position: fixed; top: 0; left: 0; bottom: auto; width: 280px; height: 100%; border-radius: 0; transform: translateX(-100%); border-right: 1px solid var(--border); border-left:none; border-top:none; border-bottom:none; box-shadow: 4px 0 24px rgba(0,0,0,0.12); padding-top: 72px; } .sidebar.open { transform: translateX(0); } .sidebar.is-hidden { width: 280px; min-width: 280px; padding: 32px 24px; padding-top: 72px; border-right-color: var(--border); transform: translateX(-100%); opacity: 1; pointer-events: auto; } /* on mobile, dyn-island doesn't auto-hide the drawer - it's opt-in via hamburger; desktop's width-collapse variant of is-hidden doesn't apply here, only the off-canvas transform does */ .sidebar.open.is-hidden { transform: translateX(0); } /* Collapse is a desktop-only feature - ignore it on mobile, the off-canvas drawer already handles space */ .sidebar-collapse-btn { display: none; } .sidebar.collapsed { width: 280px; min-width: 280px; padding: 32px 24px; padding-top: 72px; } .sidebar.collapsed .sidebar-brand-row { flex-direction: row; } .sidebar.collapsed .app-brand { display: block; } .sidebar.collapsed .session-selector { display: flex; } .sidebar.collapsed .btn-label { display: inline; } .chapter-panel { left: 16px; right: 16px; width: auto; min-width: 0; top: 68px; bottom: 16px; } .sidebar.collapsed .neu-btn { justify-content: flex-start; width: 100%; height: auto; padding: 11px 14px; gap: 12px; } .sidebar .neu-btn.icon-only { width: 40px; height: 40px; } .main-content { padding-top: 56px; } /* ── Dynamic Island - full-width bar pinned just under the header, not a cramped centered pill fighting for room with the hamburger ── */ .dyn-island { top: 64px; left: 16px; right: 16px; transform: translateY(-10px) scale(0.97); } .dyn-island.is-active { transform: translateY(0) scale(1); } .dyn-island-inner { width: 100%; max-width: none; padding: 11px 11px 11px 16px; gap: 10px; } .dyn-chapter { max-width: none; flex: 1; } .dyn-sep { display: none; } .dyn-island-inner .dyn-metric:has(#dynQTime) { display: none; } .dyn-end-btn { width: 32px; height: 32px; } #screen-main, #screen-break, #screen-stats, #screen-dashboard { padding: 24px 16px; } .timer-wrap { padding: 32px 16px; } .timer-digits { font-size: 72px; } .log-flow { gap: 18px; padding-bottom: 88px; } /* clears the sticky save/skip bar below */ .break-strip { flex-direction: column; align-items: stretch; gap: 8px; } .fork-btn { padding: 18px 12px; font-size: 13px; } .reveal-sub { padding: 14px 12px 16px; } .kpi-row { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); } .kpi-val { font-size: 22px; } .dash-grid-two, .dash-grid-three { display: flex; flex-direction: column; min-height: 0; gap: 14px; } .dash-widget { min-height: 0; } /* On desktop these widgets get their height from the CSS grid row (dash-grid-two/three has a min-height, and grid stretches children to fill it), so the percentage heights below (activity-chart-wrap height:100%, etc.) resolve against a real number. On mobile the grid becomes a column flexbox with no defined row height, so those percentages have nothing real to resolve against - different browsers handle that inconsistently, which is what was pushing the SVGs taller than their cards. Giving each chart area a fixed height here removes the ambiguity. */ .activity-chart-wrap, .accuracy-chart-wrap { height: 170px; flex: none; } .activity-svg, .accuracy-svg { flex: none; height: 130px; min-height: 0; } .heatmap-container { max-height: 140px; } .pie-chart-wrap { flex: none; } .pie-svg-container { width: 110px; height: 110px; } #screen-dashboard.vis { padding: 16px; padding-top: 24px; padding-left: 16px; height: auto; overflow: visible; align-items: stretch; justify-content: flex-start; } .dash-body { overflow: visible; } .dash-filter-row { width: 100%; max-width: none !important; order: 3; } .pie-chart-wrap { flex-direction: column; align-items: flex-start; gap: 12px; } #mistake-pie { width: 110px; height: 110px; } /* ── Break screen: keep Save & Next / Skip reachable with one thumb, instead of buried at the bottom of a long scroll ── */ #screen-break.vis .action-row { position: fixed; left: 0; right: 0; bottom: 0; margin-top: 0; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(17,24,39,0.08); z-index: 140; } [data-dark] #screen-break.vis .action-row { box-shadow: 0 -8px 24px rgba(0,0,0,0.4); } } /* ── Tiny screens (≤400px) ── */ @media (max-width: 400px) { .timer-digits { font-size: 56px; } .kpi-row { grid-template-columns: repeat(2, 1fr); } }