/* * survey-chrome.css — the SPA shell's only render-blocking survey CSS. * * Split out of the old monolithic survey.css (C3 of the 2026-08 perf arc). * ONLY chrome that bootChrome()/app-main.js mounts on EVERY route belongs * here: * - login overlay (auth-gate.js) + body.spa-suppress-login-overlay opt-out * - STAGING badge (body.env-staging::after, stamped by firebase-init.js) * - account chip (shared/account-chip.js) + #icon-rail offset coupling * - offline banner (shared/offline-banner.js) * * index.html links this too (account chip + STAGING badge + icon-rail offset). * Everything page-scoped lives in the per-route files injected on mount via * ensurePageCss() in js/shared/lazy-assets.js. Adding a rule here taxes every * page load on the site — default to the per-route files. */ /* ── Login overlay ───────────────────────────────────────────────────── */ .survey-login-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(13, 17, 23, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: opacity 0.25s ease; } .survey-login-overlay.hidden { opacity: 0; pointer-events: none; /* Slice 8 — also set visibility: hidden so the overlay is definitively gone even when a CSS transition gets pinned to its FROM frame by compositor contention (seen on /surveys/new where the MapLibre boot was racing the overlay's opacity transition). Visibility is non-animatable and applies instantly. */ visibility: hidden; } /* SPA opt-out: page modules that show their own sign-in UI inline * (e.g., /welcome with its wordmark + "Continue with X" buttons) * add `spa-suppress-login-overlay` to on mount and remove * it on teardown. CSS force-hides the shared overlay regardless of * auth state so the page's inline UI isn't covered. */ body.spa-suppress-login-overlay #login-overlay { display: none !important; } .survey-login-card { width: min(420px, 90vw); background: #fff; border-radius: 12px; padding: 28px 28px 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); text-align: center; box-sizing: border-box; } .survey-login-card h1 { margin: 0 0 6px; font-size: 22px; /* WCAG 2.1 AA: #0066cc on white is ~5.1:1 in theory — clears * the 4.5:1 spec for normal text. axe-core under-reports the * contrast (~4.45:1) because the parent overlay's * `backdrop-filter: blur(6px)` confuses its pixel sampler. * font-weight: 700 makes this qualify as "large bold text" * (16.5pt ≥ 14pt bold) which has a 3:1 threshold instead of * 4.5:1, so axe-core's computed value passes either way. * The visual weight also reads better as a wordmark. */ color: #0066cc; font-weight: 700; } .survey-login-card p { margin: 0 0 20px; color: #5a6470; font-size: 14px; } .survey-login-btn { display: block; width: 100%; padding: 11px 14px; margin: 8px 0; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; color: #1a1f24; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; font-family: inherit; } .survey-login-btn:hover:not([disabled]) { background: #f6f8fa; border-color: #0080ff; } .survey-login-btn[disabled] { cursor: not-allowed; opacity: 0.6; } .survey-login-status { margin: 12px 0 0; min-height: 18px; font-size: 12px; color: #8893a0; } /* STAGING badge — only visible when firebase-init.js stamped `env-staging` on . Bottom-right pill so it doesn't collide with the top-right account chip. */ body.env-staging::after { content: "STAGING"; position: fixed; bottom: 8px; right: 8px; z-index: 9999; background: #f9c74f; color: #1a2a3a; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } body.theme-dark.env-staging::after { background: #e1a90b; color: #0f1620; } /* Account chip — top-right "who am I" indicator mounted by js/shared/account-chip.js. Auto-hides while signed-out (login overlay covers the page in that state). */ .account-chip { position: fixed; top: 10px; right: 10px; z-index: 9998; font-size: 13px; } .account-chip[hidden] { display: none; } .account-chip-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; background: rgba(255, 255, 255, 0.96); border: 1px solid #d1d5db; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); color: #1f2937; font: inherit; } .account-chip-trigger:hover { background: white; border-color: #9ca3af; } /* Signed-out variant — just the silhouette icon in a round button. Compact, low-emphasis until the user clicks it. */ .account-chip-trigger--signed-out { padding: 0; width: 36px; height: 36px; border-radius: 50%; color: #6b7280; display: inline-flex; align-items: center; justify-content: center; } .account-chip-trigger--signed-out:hover { color: #1f2937; } .account-chip-silhouette { display: inline-flex; align-items: center; justify-content: center; } .account-chip-signin-status { margin: 6px 10px 4px; padding: 0; color: #6b7280; font-size: 12px; min-height: 1em; } body.theme-dark .account-chip-trigger--signed-out { color: #9ca3af; } body.theme-dark .account-chip-trigger--signed-out:hover { color: #e6eaee; } body.theme-dark .account-chip-signin-status { color: #9ca3af; } .account-chip-photo { width: 26px; height: 26px; border-radius: 50%; display: block; } .account-chip-initial { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #2563eb; color: white; font-weight: 600; font-size: 12px; } .account-chip-name { font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-chip-caret { color: #6b7280; font-size: 10px; margin-left: 2px; } .account-chip-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: white; border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); padding: 4px; } .account-chip-info { padding: 8px 10px 8px; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px; } .account-chip-info-name { font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-chip-info-email { color: #6b7280; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .account-chip-link, .account-chip-signout { display: block; width: 100%; text-align: left; padding: 7px 10px; color: #1f2937; text-decoration: none; background: none; border: none; cursor: pointer; font-size: 13px; border-radius: 4px; box-sizing: border-box; font: inherit; } .account-chip-link:hover, .account-chip-signout:hover { background: #f3f4f6; } .account-chip-signout { color: #dc2626; border-top: 1px solid #e5e7eb; margin-top: 4px; padding-top: 9px; } /* Slice C1 — primary action variant for "+ Start a session" so the * shortcut stands out at the top of the chip dropdown. Reachable * from any signed-in page. */ .account-chip-link--primary { color: #2563eb !important; font-weight: 600; } .account-chip-link--primary:hover { background: #eff6ff !important; } .account-chip-divider { height: 1px; background: #e5e7eb; margin: 4px 0; } /* Dark theme variants */ body.theme-dark .account-chip-trigger { background: rgba(28, 38, 52, 0.95); border-color: #3b454f; color: #e6eaee; } body.theme-dark .account-chip-trigger:hover { background: #1c2634; border-color: #6db5ff; } body.theme-dark .account-chip-menu { background: #1c2634; border-color: #3b454f; } body.theme-dark .account-chip-info-name { color: #e6eaee; } body.theme-dark .account-chip-info-email { color: #9ca3af; } body.theme-dark .account-chip-link, body.theme-dark .account-chip-signout { color: #e6eaee; } body.theme-dark .account-chip-link--primary { color: #93c5fd !important; } body.theme-dark .account-chip-link--primary:hover { background: rgba(59, 130, 246, 0.12) !important; } body.theme-dark .account-chip-divider { background: #3b454f; } body.theme-dark .account-chip-link:hover, body.theme-dark .account-chip-signout:hover { background: #243044; } body.theme-dark .account-chip-signout { color: #f87171; border-top-color: #3b454f; } body.theme-dark .account-chip-info { border-bottom-color: #3b454f; } /* Push the map app's icon-rail down so it clears the account-chip pill in the top-right. Applies anywhere the chip is mounted — account-chip.js stamps `body.has-account-chip` on mount. During an active survey the rail moves to bottom-right via the body.survey-active rule and this offset is overridden. */ body.has-account-chip #icon-rail { top: 54px; } /* Slide the account chip left when the selection sidebar is visible so it doesn't sit on top of the sidebar's content. Mirrors the #icon-rail shift in theme.css. On mobile the sidebar slides up from the bottom (not in from the right), so the chip stays pinned to the top-right corner. */ body.sidebar-visible .account-chip { right: calc(var(--sidebar-width, 380px) + 10px); } @media (max-width: 768px), (max-height: 600px) { body.sidebar-visible .account-chip { right: 10px; } } /* P3 — offline banner: a thin top strip shown app-wide when the browser reports no network. Reassures the surveyor their queued answers will sync. */ #offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-offline-banner); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; background: #78350f; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } /* Explicit display:flex above would otherwise override the [hidden] default. */ #offline-banner[hidden] { display: none; } .offline-banner-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; } /* ── nameless sign-in prompt (complete-profile.js) ─────────────────── */ .sv-name-prompt { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(15, 18, 22, 0.45); } .sv-name-prompt-card { width: min(420px, 100%); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg-elevated); box-shadow: var(--shadow-lg); } .sv-name-prompt-card h2 { margin: 0 0 var(--space-2); font-size: 1.05rem; } .sv-name-prompt-card label { display: block; margin: var(--space-3) 0 var(--space-1); font-size: 0.78rem; font-weight: 600; } .sv-name-prompt-card label span { font-weight: 400; color: var(--color-text-muted); } .sv-name-prompt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); } /* phone-class = narrow OR short (canonical pair) — stack the name fields */ @media (max-width: 768px), (max-height: 600px) { .sv-name-prompt-grid { grid-template-columns: 1fr; } } .sv-name-prompt-card input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 16px; /* ≥16px keeps iOS from zooming the field */ } .sv-name-prompt-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); } .sv-name-prompt-actions button { min-height: 44px; /* touch target floor */ padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-elevated); cursor: pointer; } /* ── in-context sign-in dialog (signin-dialog.js) ──────────────────── */ .sv-signin-dialog { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(15, 18, 22, 0.45); } .sv-signin-card { width: min(400px, 100%); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg-elevated); box-shadow: var(--shadow-lg); text-align: center; } .sv-signin-card h2 { margin: 0 0 var(--space-1); font-size: 1.05rem; } .sv-signin-card p { margin: 0 0 var(--space-4); font-size: 0.84rem; color: var(--color-text-muted); } .sv-signin-actions { display: flex; flex-direction: column; gap: var(--space-2); } .sv-signin-actions button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); font-size: 0.9rem; font-weight: 550; cursor: pointer; transition: background var(--motion-fast); } .sv-signin-actions button:hover { background: var(--color-bg-hover); } .sv-signin-status { min-height: 1.2em; margin: var(--space-2) 0 0 !important; font-size: 0.74rem !important; } .sv-signin-dismiss { margin-top: var(--space-2); padding: var(--space-1) var(--space-3); min-height: 44px; border: none; background: none; color: var(--color-text-muted); font-size: 0.8rem; cursor: pointer; }