/* SafeSurf parent console — console-specific styles.
 *
 * The shared design system (tokens, base styles, layout, components and the
 * generic sign-in/auth styles) lives in the webkit at internal/webkit/web/kit.css,
 * served here at /app/kit/kit.css and loaded BEFORE this file. Only the parent
 * sign-in extras (region picker, Apple/Google placeholders) are here. */

.signin-card { max-width: 420px; }
.signin-card h1 { font-size: 1.5rem; margin-bottom: 2px; }
.signin-form { text-align: left; margin-top: 10px; }
.signin-form .auth-btn { width: 100%; margin-top: 6px; }
.signin-region { width: 100%; }

/* "or" divider between password and the SSO placeholders. */
.signin-or { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 0.8rem; margin: 18px 0 12px; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Sign in with Apple / Google (stage 6): full-width, disabled for now. */
.signin-sso { text-align: center; }
.sso-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; margin-bottom: 8px; }
.sso-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* A simple, consistent placeholder panel for the feature pages the builders fill. */
.page-placeholder { text-align: center; padding: 32px 16px; }
.page-placeholder .icon-wrap { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); margin-bottom: 12px; }
.page-placeholder .icon-wrap .ico { width: 26px; height: 26px; }
.page-placeholder .owner { font-size: 0.82rem; color: var(--text-faint); margin-top: 10px; }

/* Protection-off banner (stage 10b): shown above the top bar on every page while a
   child has turned SafeSurf off. .msg.banner.err supplies the red colour; this only
   lays out the icon, message and the "Review alerts" link, and keeps them readable
   in both themes (colours come from the shared tokens, so WCAG AA is preserved). */
.ss-alert-banner { display: flex; align-items: center; gap: 10px; }
.ss-alert-banner .ico { width: 20px; height: 20px; flex: none; }
.ss-alert-banner-text { flex: 1 1 auto; }
.ss-alert-banner-link { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }