/* ============================================================================ FAS Helper — styles.css ---------------------------------------------------------------------------- No build step, no preprocessor. Read top-down: 1. :root design tokens — spacing, radius, color, shadow, z-index ladder. 2. Resets + global rules ([hidden], .sr-only, prefers-reduced-motion, @supports fallback for backdrop-filter). 3. Section blocks in roughly the same order as the page flow: auth → folder → summary → grid → modal → tag picker → upload → toasts. 4. A "Polish pass" block at the end with rules that override earlier sections without restructuring the file above. KEY DESIGN DECISIONS - Mobile-first is NOT used. The desktop layout is the base; @media blocks at the bottom shrink things for tablet/mobile. We're targeting iPad. - Sticky offsets in .filterbar (top: 56px / 96px) assume the .topbar's rendered height. If you change topbar padding, update those offsets. - All elevation/depth comes from --sh-1/--sh-2/--sh-3. Don't hand-author box-shadow values; reach for the tokens. - .modal-open on hides the toast stack so toasts don't collide with the photo control bar. JS toggles it (avoids :has() compat issues). ============================================================================ */ /* =================== design tokens — refreshed 2026-06-21 =================== */ :root { /* spacing — 4 / 8 / 12 / 16 / 24 / 32 ladder */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* radius scale — softened (modern apps land 6 / 10 / 14) */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; /* color palette — neutral cool greys, indigo primary, modern accents */ --c-bg: #f7f8fb; --c-surface: #ffffff; --c-surface-elev: #ffffff; --c-text: #0f1623; --c-text-dim: #5a6373; --c-text-mute: #8b93a4; --c-border: #e3e6ee; --c-border-soft: #eef0f6; --c-border-strong: #c8cfdb; --c-primary: #4f46e5; /* indigo-600 */ --c-primary-hover: #4338ca; /* indigo-700 */ --c-primary-soft: #eef2ff; /* indigo-50 — for tinted backgrounds */ --c-primary-text-on-soft: #3730a3; --c-warn-bg: #fff7ed; /* amber-50 */ --c-warn-border: #f59e0b; /* amber-500 */ --c-warn-text: #92400e; /* amber-800 */ --c-success-bg: #ecfdf5; /* emerald-50 */ --c-success-text: #047857; /* emerald-700 */ --c-danger-bg: #fef2f2; /* red-50 */ --c-danger-text: #b91c1c; /* red-700 */ /* shadow scale — for depth without overdoing it */ --sh-1: 0 1px 2px rgba(15, 22, 35, 0.04), 0 1px 1px rgba(15, 22, 35, 0.03); --sh-2: 0 4px 12px rgba(15, 22, 35, 0.06), 0 1px 2px rgba(15, 22, 35, 0.04); --sh-3: 0 12px 28px rgba(15, 22, 35, 0.10), 0 4px 8px rgba(15, 22, 35, 0.05); --sh-focus: 0 0 0 3px rgba(79, 70, 229, 0.25); /* min tap target (Apple HIG / WCAG 2.5.8) */ --tap-min: 44px; --tap-gap: 8px; /* z-index ladder — single source of truth, increment by 10 per layer */ --z-sticky: 20; --z-topbar: 30; --z-bulkbar: 40; --z-footer: 50; --z-modal: 100; --z-sheet: 110; --z-kbd-overlay: 130; --z-toast: 200; } /* =================== reset / base ========================================== Minimal reset — no Normalize, no preflight. We rely on a small set of global rules: [hidden] guardrail, .sr-only utility, reduced-motion media query, the @supports fallback above, and root typography below. ========================================================================== */ * { box-sizing: border-box; } /* Global guardrail: HTML `hidden` should ALWAYS win over any later display rule (this regression class has bitten .page, .modal-backdrop, .empty-state — fix it once for the whole codebase). */ [hidden] { display: none !important; } /* Visually-hidden but readable to screen readers. Use for accessible names that don't have a visual counterpart (e.g. dialog titles handled by in-modal chrome that we want to keep visually minimal). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Respect users with vestibular disorders. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Frosted-glass surfaces (topbar/filterbar/footer/toast/modal-backdrop/ ctrl-group/bulkbar) use backdrop-filter. On browsers that don't support it AT ALL we fall back to opaque tints — otherwise these elements would render as transparent rectangles with no contrast against the content behind them. The blanket override below lands them safely. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar, .filterbar, .footer, .toast, .modal-backdrop, .ctrl-group, .bulkbar { background-color: var(--c-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .topbar, .filterbar { background-color: rgba(255, 255, 255, 0.96) !important; } .modal-backdrop { background-color: rgba(15, 22, 35, 0.6) !important; } .toast, .ctrl-group, .bulkbar { background-color: rgba(15, 22, 35, 0.96) !important; } } html, body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter cleaner letterforms */ font-size: 15px; line-height: 1.5; letter-spacing: -0.005em; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { letter-spacing: -0.02em; } button { font-family: inherit; font-size: inherit; cursor: pointer; } button:focus-visible, input:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible { outline: none; box-shadow: var(--sh-focus); border-color: var(--c-primary); } /* =================== page show/hide ======================================== Each .page is a full-viewport
. showPage(id) in app.js sets the target page's `hidden` to false and hides every other; the global `[hidden]` rule does the actual display:none. The .wide variant removes the centered max-width so the grid / summary can fill the viewport. ========================================================================== */ .page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--sp-6) var(--sp-5); } /* Soft purple wash on auth-style pages — keeps them feeling "fresh" */ #page-login-email, #page-login-password { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(79, 70, 229, 0.08), transparent 60%), var(--c-bg); } /* Very subtle wash on the folder pick + summary so empty space doesn't feel flat */ #page-folder, #page-summary { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(79, 70, 229, 0.04), transparent 70%), var(--c-bg); } .page.wide { align-items: stretch; padding: 0; } .page[hidden] { display: none; } /* =================== auth =================== */ .auth-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 40px 36px; width: 100%; max-width: 420px; text-align: center; margin-top: 60px; box-shadow: var(--sh-3); } .auth-card .logo { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 800; color: var(--c-primary); letter-spacing: 1.5px; margin-bottom: var(--sp-5); font-size: 13px; } .auth-card h1 { font-size: 24px; font-weight: 700; margin: 0 0 6px; } .auth-card .subtitle { color: var(--c-text-mute); margin-bottom: var(--sp-5); font-size: 14px; } .auth-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: 15px; margin-bottom: var(--sp-3); min-height: 48px; background: var(--c-surface); transition: border-color 0.12s, box-shadow 0.12s; } .auth-card input:focus { border-color: var(--c-primary); box-shadow: var(--sh-focus); } .auth-card .primary { width: 100%; margin-bottom: 12px; } .auth-card .link { display: block; font-size: 14px; color: #2c5fcf; text-decoration: none; margin-top: 12px; padding: 6px; } .auth-card .auth-error { margin-top: 0; margin-bottom: var(--sp-3); padding: 10px 12px; font-size: 14px; text-align: left; } .auth-card .auth-error[hidden] { display: none; } .auth-help { font-size: 13px; color: #888; margin-top: 12px; line-height: 1.4; } .auth-link { display: inline-block; font-size: 13px; color: #2c5fcf; margin-top: 12px; cursor: pointer; text-decoration: none; user-select: none; } .auth-link:hover { text-decoration: underline; } .auth-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: #555; cursor: pointer; user-select: none; } .auth-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .auth-footer { margin-top: auto; padding: 24px; font-size: 12px; color: #888; text-align: center; } .auth-footer a { color: #2c5fcf; text-decoration: none; } .back-link { color: var(--c-text); text-decoration: none; font-weight: 500; font-size: 14px; padding: 6px 10px; border-radius: var(--r-md); min-height: 36px; display: inline-flex; align-items: center; } .back-link:hover { background: var(--c-bg); color: var(--c-primary); } /* On auth pages the back arrow floats above the card. */ #page-login-password .back-link { align-self: flex-start; margin: 20px 0 0 24px; } /* =================== buttons =================== */ .primary { background: var(--c-primary); color: white; border: 1px solid transparent; padding: 10px 18px; border-radius: var(--r-md); font-weight: 600; font-size: 14px; min-height: 40px; transition: background 0.12s, transform 0.05s, box-shadow 0.12s; box-shadow: var(--sh-1); } .primary:hover { background: var(--c-primary-hover); } .primary:active { transform: translateY(0.5px); } .primary:disabled { background: var(--c-border-strong); color: white; cursor: not-allowed; box-shadow: none; } .primary.lg { font-size: 15px; padding: 12px 22px; min-height: 48px; border-radius: var(--r-md); } .primary.alt { background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--c-border); box-shadow: var(--sh-1); } .primary.alt:hover { background: var(--c-primary-soft); border-color: var(--c-primary); } .ghost { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 7px 13px; font-weight: 500; font-size: 14px; min-height: 40px; color: var(--c-text); transition: background 0.12s, border-color 0.12s; } .ghost:hover { background: var(--c-bg); border-color: var(--c-border-strong); } .ghost.icon { padding: 8px 12px; min-width: 44px; min-height: 44px; } /* =================== topbar ================================================ Sticky frosted bar at the top of every "wide" page. Holds folder/page title (`.brand`), header chips (untagged-count / edited-count / active tag-filter), and the user email on the right. ========================================================================== */ .topbar { background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--c-border); padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); position: sticky; top: 0; z-index: var(--z-topbar); } .topbar .brand { font-weight: 700; flex: 1; font-size: 15px; letter-spacing: -0.015em; } .brand-stack { display: flex; flex-direction: column; flex: 1; min-width: 0; } .brand-stack .brand { flex: none; } .brand-meta { color: var(--c-text-mute); font-size: 12px; } .topbar .user { color: var(--c-text-dim); font-size: 13px; } .header-chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; min-height: 32px; cursor: pointer; transition: background 0.12s, border-color 0.12s; display: inline-flex; align-items: center; gap: 4px; } .chip:hover { background: var(--c-bg); border-color: var(--c-border-strong); } .chip.warn { background: var(--c-warn-bg); border-color: var(--c-warn-border); color: var(--c-warn-text); } .chip.warn:hover { background: #fef0d8; } .chip.active { background: var(--c-primary); border-color: var(--c-primary); color: white; } .chip.active:hover { background: var(--c-primary-hover); } .container { max-width: 1200px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) 80px; width: 100%; } h2 { margin: 0 0 var(--sp-4); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; } h3 { margin-top: 24px; font-size: 16px; color: #444; } h3 .hint { font-weight: 400; font-size: 12px; color: #888; margin-left: 8px; } /* =================== folder picker =================== */ .dropzone { display: block; width: 100%; background: radial-gradient(ellipse at center top, rgba(79, 70, 229, 0.04), transparent 70%), var(--c-surface); border: 2px dashed var(--c-border); border-radius: var(--r-lg); padding: 80px 24px; text-align: center; cursor: pointer; font-family: inherit; transition: background 0.18s, border-color 0.18s, transform 0.1s, box-shadow 0.18s; box-shadow: var(--sh-1); } .dropzone:hover, .dropzone.drag-over { background: radial-gradient(ellipse at center top, rgba(79, 70, 229, 0.10), transparent 70%), var(--c-surface); border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--sh-2); } /* Icon container — gives the dropzone a visual anchor */ .dropzone-icon { width: 56px; height: 56px; margin: 0 auto var(--sp-3); display: flex; align-items: center; justify-content: center; background: var(--c-primary-soft); color: var(--c-primary); border-radius: var(--r-lg); font-size: 28px; transition: transform 0.18s, background 0.18s; } .dropzone:hover .dropzone-icon, .dropzone.drag-over .dropzone-icon { transform: scale(1.06); background: var(--c-primary); color: white; } .dropzone-title { font-size: 19px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; color: var(--c-text); } .dropzone-hint { color: var(--c-text-mute); font-size: 14px; } .error { color: #c0392b; background: #fdecea; padding: 12px; border-radius: 6px; margin-top: 16px; } /* =================== summary =================== */ .summary-container { display: flex; justify-content: center; padding-top: var(--sp-5); } .summary-card { width: 100%; max-width: 680px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-2); } .summary-hero { margin-bottom: var(--sp-4); } .summary-hero h2 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .summary-hero-meta { color: var(--c-text-dim); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .summary-hero-meta .dot { color: var(--c-text-mute); } /* Stat tiles inside the summary card (denser variant of completion grid). */ .summary-stat-grid { grid-template-columns: repeat(4, 1fr); margin: 0 0 var(--sp-4); } .stat-cell.stat-warn { background: var(--c-warn-bg); border-color: var(--c-warn-border); } .stat-cell.stat-warn .stat-num { color: var(--c-warn-text); } .stat-cell.stat-warn .stat-label { color: var(--c-warn-text); } /* Collapsible details blocks ("Tag breakdown", "Capture details") */ .summary-section { border: 1px solid var(--c-border-soft); border-radius: var(--r-md); background: var(--c-bg); margin-bottom: var(--sp-3); overflow: hidden; } .summary-section > summary { list-style: none; cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: space-between; } .summary-section > summary::-webkit-details-marker { display: none; } .summary-section > summary::after { content: '▾'; color: var(--c-text-mute); transition: transform 0.2s; } .summary-section[open] > summary::after { transform: rotate(180deg); } .summary-section > summary .hint { font-weight: 400; font-size: 12px; color: var(--c-text-mute); margin-left: auto; margin-right: var(--sp-3); } .summary-section .tag-bars, .summary-section table.meta { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--c-border-soft); background: var(--c-surface); padding: var(--sp-2); max-width: 100%; } .summary-section table.meta { padding: var(--sp-3) var(--sp-4); } /* Warning row stays prominent but lives inside the card now. */ .summary-card .warning { background: var(--c-warn-bg); border-left: 3px solid var(--c-warn-border); color: var(--c-warn-text); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin: 0 0 var(--sp-3); font-size: 13px; max-width: 100%; } .summary-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-4); } .summary-actions .primary { min-width: 200px; } @media (max-width: 540px) { .summary-card { padding: var(--sp-4); } .summary-actions { justify-content: stretch; } .summary-actions .primary { width: 100%; min-width: 0; } } table.meta { width: 100%; max-width: 700px; border-collapse: collapse; margin: 16px 0; } table.meta td { padding: 10px 0; border-bottom: 1px solid var(--c-border-soft); vertical-align: top; } table.meta td:first-child { color: #666; width: 200px; } .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; } .tag-bars { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-2); max-width: 700px; box-shadow: var(--sh-1); } .tag-bar { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 6px; cursor: pointer; min-height: 44px; } .tag-bar:hover { background: var(--c-primary-soft); transform: translateX(2px); transition: background 0.12s, transform 0.12s; } .tag-bar-name { font-size: 14px; font-weight: 500; } .tag-bar-name.untagged { color: var(--c-warn-text); } .tag-bar-bar { height: 6px; background: linear-gradient(90deg, var(--c-primary), #6366f1); border-radius: var(--r-pill); margin-top: 6px; } .tag-bar-bar.untagged { background: linear-gradient(90deg, var(--c-warn-border), #fbbf24); } .tag-bar-count { text-align: right; font-size: 12px; font-weight: 500; color: var(--c-text-dim); } .warning { background: #fff5e0; border-left: 4px solid #e67e22; padding: 12px 16px; margin: 16px 0; border-radius: 0 6px 6px 0; max-width: 700px; color: #6c440b; } .actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; } .actions.right { justify-content: flex-end; } /* =================== filter / grid ========================================= Sticky filter chips below the topbar, then the photo card grid. Two magic-numbers below — `top: 56px` (desktop) and `top: 96px` (mobile override) — are calibrated to the topbar's rendered height. If you change topbar padding/typography, update these so the filterbar still snaps flush against it instead of overlapping or floating. ========================================================================== */ .filterbar { background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--c-border); padding: var(--sp-3) var(--sp-5); display: flex; gap: var(--tap-gap); align-items: center; position: sticky; top: 56px; /* matches topbar height — see section banner above */ z-index: var(--z-sticky); flex-wrap: wrap; } .filterbar-spacer { flex: 1; } .filter { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--c-text); min-height: 36px; transition: background 0.12s, border-color 0.12s, color 0.12s; } .filter:hover { background: var(--c-bg); border-color: var(--c-border-strong); } .filter.active { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); } .filter[aria-pressed="true"] { background: var(--c-primary); color: white; border-color: var(--c-primary); } .filter .count { margin-left: 6px; font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, 0.2); padding: 1px 7px; border-radius: var(--r-pill); } .filter:not(.active) .count { background: var(--c-border-soft); color: var(--c-text-dim); } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .photo-card { /* reset native