/* responsive.css — v07zz282 ───────────────────────────────────────────────────────────────────── ONE coherent layout-tier layer for the whole app, loaded LAST from index.html so these overrides win the cascade. Tiers select on body[data-ui-tier], set by the App-scale script in index.html from the EFFECTIVE width (window ÷ zoom) — the width the layout actually has to fill. Raw-px @media queries lie under zoom (at 110% a 1120px window lays out like 1018px; at 70% a 1120px window lays out like 1600px), which caused panels to overlap and text to collide whenever the scale and the media tier disagreed. (no attr) ≥1600 effective → full 4K layout, untouched "l" 1101–1599 effective → laptop: tighter frame, slimmer rails "m" 761–1100 effective → small: right column stacks 2-up, footer 2-col, topbar may grow "s" ≤760 effective → narrow: single column, small thumbs Rule of thumb for future edits: a NEW fixed-width layout container gets its tier override added HERE keyed on data-ui-tier — never a raw-px media query (those don't understand the app scale). */ /* ════════ APP SCALE — viewport-height compensation ════════ The scale applies CSS zoom on . Under zoom, 100vh renders as zoom×viewport — the shell would leave a dead strip. The script publishes --app-vh = (innerHeight / zoom)px (fresh on every resize), which multiplies back to exactly the full window. is NOT included — it sits outside the zoomed coordinate space and the compensated value there creates phantom vertical scroll. */ body { min-height: var(--app-vh, 100vh); } #app { min-height: var(--app-vh, 100vh); } .app-shell { height: var(--app-vh, 100vh); } .sidebar { height: var(--app-vh, 100vh); } .main-content { height: var(--app-vh, 100vh); } .activity-slide-panel { height: var(--app-vh, 100vh); } /* ════════ TIER L — laptop-class effective width (1101–1599) ════════ */ body[data-ui-tier="l"] .main-content { padding: 10px 14px 14px; gap: 10px; } /* Overview: right column narrows. Fixed CSS px (not vw — vw doesn't scale with zoom and made the column unpredictably narrow). */ body[data-ui-tier="l"] .split-row { grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; } /* Shot rows: the action column narrows to 256px on laptops (the pill + version line + ring need at least 255px; the old 200px/176px made the pill run under the ring). Both selector forms needed - body carries data-thumbsize only after the user visits Settings. */ body[data-ui-tier="l"], body[data-ui-tier="m"] { --shot-status-col-w: 256px; } body[data-ui-tier="l"] .shot-row, body[data-ui-tier="l"][data-thumbsize] .shot-row { grid-template-columns: calc(var(--row-thumb-w, 168px) + 16px) minmax(0, 1fr) var(--shot-status-col-w); } /* Generate page rails. Tier L fully OWNS the Assets workbench pair (.ga-shell + .ga-preview): generate.css has its own ≤1200px raw-px query that collapses the shell to 2 cols AND sends the preview full-width — under zoom those can half-apply and split-brain the layout (empty third column + stretched preview). Reset the preview to its base form whenever tier L keeps 3 columns. */ body[data-ui-tier="l"] .gen-shell { grid-template-columns: 260px minmax(0, 1fr); } body[data-ui-tier="l"] .gen-shell--asset { grid-template-columns: 280px minmax(0, 1fr); } body[data-ui-tier="l"] .ga-shell { grid-template-columns: 260px minmax(0, 1fr) clamp(320px, 26%, 380px); } body[data-ui-tier="l"] .ga-preview { grid-column: auto; flex-direction: column; flex-wrap: nowrap; } body[data-ui-tier="l"] .footer-row { gap: 12px; } /* TopBar stats: each cluster is designed as a FIXED 56+14+130px block centred in a 1fr track — below ~1600 effective the tracks get narrower than the cluster and the icons paint over the numbers. Make the cluster fluid at laptop tiers: smaller chip, flexible text stack, tighter padding. */ body[data-ui-tier="l"] .tb-stat, body[data-ui-tier="m"] .tb-stat { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; justify-content: stretch; padding: 18px 10px; } body[data-ui-tier="l"] .tb-stat > .tb-stack, body[data-ui-tier="m"] .tb-stat > .tb-stack { width: auto; min-width: 0; } body[data-ui-tier="l"] .tb-chip, body[data-ui-tier="m"] .tb-chip { width: 40px; height: 40px; } body[data-ui-tier="l"] .tb-chip svg, body[data-ui-tier="m"] .tb-chip svg { width: 22px; height: 22px; } /* ════════ TIER M — small effective width (761–1100) ════════ */ body[data-ui-tier="m"] .main-content { padding: 10px 12px 12px; gap: 10px; } /* Right column stacks under the shots panel, cards 2-up. Compound selector matches right-column.css's .right-column.sortable-zone-right (which pins THREE equal 1fr row tracks + overflow:hidden for the side-rail layout) — plain .right-column would lose on specificity. */ body[data-ui-tier="m"] .split-row { grid-template-columns: minmax(0, 1fr); } body[data-ui-tier="m"] .right-column.sortable-zone-right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 12px; align-items: start; min-height: auto; overflow: visible; } body[data-ui-tier="m"] .footer-row { grid-template-columns: repeat(2, 1fr); gap: 12px; } body[data-ui-tier="m"] .shot-row, body[data-ui-tier="m"][data-thumbsize] .shot-row { grid-template-columns: calc(var(--row-thumb-w, 168px) + 16px) minmax(0, 1fr) var(--shot-status-col-w); } /* TopBar: at this width the 4-stat row wraps taller than the fixed 290px square — with overflow:hidden the progress bar + SCHEDULED row + mode tabs were clipped clean off (the v07zz282 audit's worst find). Let the panel grow with its content; the donut square stays 290px. */ body[data-ui-tier="m"] .topbar { height: auto; min-height: var(--tb-square, 290px); } body[data-ui-tier="m"] .tb-stats-row { gap: 10px; } /* ════════ NATURAL PAGE FLOW at tier M (tablet) only ══════════════════ Tablet stacks sections and scrolls as a document. The PHONE tier ("s") uses the FIXED-SHELL / panel-only-scroll architecture in mobile.css (v07zz288) instead — so these are scoped to "m" alone now. */ body[data-ui-tier="m"] .app-shell { height: auto; min-height: var(--app-vh, 100vh); } body[data-ui-tier="m"] .main-content { height: auto; min-height: var(--app-vh, 100vh); } body[data-ui-tier="m"] .sidebar { position: sticky; top: 0; } body[data-ui-tier="m"] .split-row { flex: none; } body[data-ui-tier="m"] .shots-list { max-height: calc(var(--app-vh, 100vh) * 0.72); } /* ════════ TIER S — MOBILE (≤760 effective) ════════ The phone tier's full layout (shell, header, topbar card, shot rows, pages, modals) lives in styles/mobile.css, which loads LAST and is the single authoritative mobile stylesheet (v07zz288). Only the off-canvas drawer mechanics remain here. */ /* Sidebar → off-canvas drawer + fixed hamburger. The drawer always renders EXPANDED (Sidebar.jsx forces collapsed off on mobile). */ body[data-ui-tier="s"] .sidebar { position: fixed; left: 0; top: 0; z-index: var(--z-mobile-drawer); width: 274px; flex: none; transform: translateX(-106%); transition: transform var(--dur-5) var(--ease-glide); box-shadow: 26px 0 70px color-mix(in srgb, var(--shade-41) 55%, transparent); } body[data-ui-tier="s"].sb-mobile-open .sidebar { transform: translateX(0); } body[data-ui-tier="s"] .app-shell::after { display: none; } /* sidebar gradient extension */ .sb-burger { display: none; } body[data-ui-tier="s"] .sb-burger { display: flex; align-items: center; justify-content: center; position: fixed; top: 10px; left: 10px; z-index: var(--z-mobile-burger); width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--shade-43) 78%, transparent); color: var(--ink-cream-4); border: 1px solid color-mix(in srgb, var(--ink-on-accent) 28%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px color-mix(in srgb, var(--shade-41) 40%, transparent); cursor: pointer; } .sb-mobile-veil { display: none; } body[data-ui-tier="s"] .sb-mobile-veil { display: block; position: fixed; inset: 0; z-index: var(--z-mobile-scrim); background: color-mix(in srgb, var(--shade-41) 52%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Project header on mobile: owned by styles/mobile.css (v07zz286 — the phm-bar brand row replaced the old floating hamburger). */ /* (the rest of the phone-tier layout — shell, header, topbar card, shot rows, page scroll, modals — lives in styles/mobile.css, v07zz288.) */