/* ══════════════════════════════════════════════════════════════════════════
CertAnvil — Account-pages mobile lift (cert-ios design language)
Loaded with media="(max-width: 899px)" on /account and /analytics, same
viewport-gate pattern as the cert-app lift (v7.36.1). Desktop ≥900px keeps
the classic editorial layout untouched.
Source mockups: cert-ios-hub.html (account) + cert-ios-cross-cert.html
(analytics) in the cert-ios-e2e worktree. CSS-only over the existing DOM —
the lib/account.js + lib/cross-cert-analytics.js class contracts are not
touched. The greeting + stat strip on /account is injected by
lift-account.js (matchMedia-gated, additive).
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
/* ── cert-ios app tokens (mockup values) on both page roots ───────────── */
#account-page, #analytics-page {
--bg: oklch(0.975 0.007 85);
--surface: oklch(0.955 0.009 84);
--surface-2: oklch(0.92 0.010 84);
--ink: oklch(0.22 0.015 280);
--ink-soft: oklch(0.38 0.014 280);
--muted: oklch(0.52 0.013 280);
--border: oklch(0.85 0.010 85);
--border-soft: oklch(0.88 0.008 85);
--accent: oklch(0.55 0.155 55);
--accent-bright: oklch(0.62 0.150 58);
--accent-deep: oklch(0.46 0.150 52);
--on-accent: oklch(0.99 0.008 85);
--pass: oklch(0.52 0.13 150);
--track: oklch(0.88 0.010 85);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
/* legacy token aliases — a few inline styles in the static DOM reference
the old --text-* names; map them into the lift palette */
--text-mid: var(--ink-soft);
--text-dim: var(--muted);
padding: 14px 16px 84px;
}
[data-theme="dark"] #account-page, [data-theme="dark"] #analytics-page {
--bg: oklch(0.15 0.010 275);
--surface: oklch(0.205 0.009 275);
--surface-2: oklch(0.255 0.010 275);
--ink: oklch(0.97 0.006 275);
--ink-soft: oklch(0.80 0.010 275);
--muted: oklch(0.62 0.013 275);
--border: oklch(0.34 0.009 275);
--border-soft: oklch(0.30 0.008 275);
--accent: oklch(0.82 0.150 66);
--accent-bright: oklch(0.88 0.140 72);
--accent-deep: oklch(0.72 0.150 62);
--on-accent: oklch(0.18 0.020 275);
--pass: oklch(0.78 0.150 152);
--track: oklch(0.30 0.010 275);
}
#account-page .account-container, #analytics-page .account-container {
max-width: 520px;
}
/* ── shared: compact app-style page head ──────────────────────────────── */
#account-page .breadcrumb, #analytics-page .breadcrumb { display: none; }
#account-page .account-pagehead, #analytics-page .account-pagehead {
margin-top: 4px;
padding-bottom: 14px;
border-bottom: 0;
}
#account-page .account-eyebrow, #analytics-page .account-eyebrow {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--accent-deep);
margin-bottom: 6px;
}
[data-theme="dark"] #account-page .account-eyebrow,
[data-theme="dark"] #analytics-page .account-eyebrow { color: var(--accent-bright); }
#account-page .account-eyebrow::after, #analytics-page .account-eyebrow::after { content: none; }
#account-page .account-title, #analytics-page .account-title {
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.012em;
}
#account-page .account-subtitle, #analytics-page .account-subtitle {
margin-top: 7px;
font-size: 12.5px;
line-height: 1.5;
color: var(--muted);
}
/* ════════════════════════════════════════════════════════════════════════
/account — hub language (cert-ios-hub.html)
════════════════════════════════════════════════════════════════════════ */
/* greeting + stat strip (injected by lift-account.js) */
#account-page .lift-greeting {
font: 600 13.5px/1.45 'Inter', sans-serif;
color: var(--ink-soft);
margin: 2px 2px 12px;
}
#account-page .lift-greeting b { color: var(--ink); font-weight: 700; }
#account-page .lift-stats { display: flex; gap: 9px; margin-bottom: 16px; }
#account-page .lift-stat {
flex: 1 1 0;
border: 1px solid var(--border);
border-radius: 13px;
background: var(--surface);
padding: 11px 12px;
}
#account-page .lift-stat b {
display: block;
font: 600 21px/1 'Fraunces', Georgia, serif;
color: var(--ink);
font-variant-numeric: lining-nums tabular-nums;
}
#account-page .lift-stat.pass b { color: var(--pass); }
#account-page .lift-stat span {
display: block;
font: 600 10px/1.2 'Inter', sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin-top: 6px;
}
/* identity card → hub active-card framing */
#account-page .id-card {
margin-top: 4px;
gap: 12px;
padding: 15px 16px;
border-radius: 16px;
border-color: color-mix(in oklab, var(--accent) 34%, var(--border));
background: color-mix(in oklab, var(--accent) 6%, var(--surface));
box-shadow: none;
}
#account-page .id-avatar { width: 44px; height: 44px; font-size: 17px; }
#account-page .id-email { font-size: 16.5px; }
#account-page .id-meta-row { margin-top: 7px; gap: 8px; }
#account-page .id-meta-text { font-size: 11.5px; }
/* admin band — compact row card */
#account-page .admin-cta-banner {
margin-top: 14px;
padding: 12px 14px;
border-radius: 14px;
box-shadow: none;
gap: 12px;
}
#account-page .admin-cta-icon, #account-page .admin-cta-icon img { width: 28px; height: 28px; }
#account-page .admin-cta-title { font-size: 13.5px; }
#account-page .admin-cta-sub { font-size: 11px; }
/* §sections — editorial heads become hub micro-labels */
#account-page .acc-section { margin-top: 26px; }
#account-page .section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding-bottom: 0;
border-bottom: 0;
margin: 0 2px 10px;
}
#account-page .acc-sec-ic { display: none; }
#account-page .section-eyebrow { display: none; }
#account-page .section-title {
font: 800 10px/1.4 'Inter', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
#account-page .section-sub {
flex-basis: 100%;
margin-top: 5px;
font-size: 11px;
line-height: 1.45;
}
#account-page .section-head { flex-wrap: wrap; }
/* field rows — grouped links card (hub .links grammar) */
#account-page .acc-field {
grid-template-columns: 1fr auto;
gap: 4px 12px;
padding: 13px 14px;
border: 1px solid var(--border);
border-bottom: 0;
background: var(--surface);
}
#account-page .acc-field:first-of-type { border-radius: 14px 14px 0 0; }
#account-page .acc-field:last-of-type,
#account-page .acc-field:last-child {
border-bottom: 1px solid var(--border);
border-radius: 0 0 14px 14px;
}
#account-page .acc-field:first-of-type:last-of-type { border-radius: 14px; }
#account-page .acc-field-label {
grid-column: 1;
font-size: 9.5px;
letter-spacing: 0.06em;
}
#account-page .acc-field-value { grid-column: 1; grid-row: 2; font-size: 13px; }
#account-page .acc-field-action { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* entitlement + exam-result rows → hub cert-rows */
#account-page .ent-section { margin-top: 14px; }
#account-page .ent-section-label, #account-page .security-sessions-label {
font: 800 10px/1.4 'Inter', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin: 0 2px 10px;
}
#account-page .ent-row, #account-page .er-row {
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
padding: 11px 13px;
margin-bottom: 9px;
gap: 12px;
flex-wrap: wrap;
}
#account-page .ent-row:last-child, #account-page .er-row:last-child { border-bottom: 1px solid var(--border); }
#account-page .ent-row.is-locked { background: color-mix(in oklab, var(--surface) 92%, transparent); }
#account-page .ent-glyph, #account-page .er-glyph {
width: 40px; height: 40px;
border-radius: 11px;
font-size: 14px;
background: color-mix(in oklab, var(--accent) 13%, var(--surface-2));
border: 0;
color: var(--accent-deep);
}
[data-theme="dark"] #account-page .ent-glyph, [data-theme="dark"] #account-page .er-glyph { color: var(--accent-bright); }
#account-page .ent-row.is-locked .ent-glyph { background: var(--surface-2); color: var(--muted); }
#account-page .er-row.passed, #account-page .er-row.is-passed {
border-color: color-mix(in oklab, var(--pass) 36%, var(--border));
background: color-mix(in oklab, var(--pass) 5%, var(--surface));
padding: 11px 13px;
}
#account-page .er-row.passed .er-glyph, #account-page .er-row.is-passed .er-glyph {
background: color-mix(in oklab, var(--pass) 14%, var(--surface-2));
color: var(--pass);
}
#account-page .ent-name, #account-page .er-name { font-size: 14px; font-weight: 650; }
#account-page .ent-meta, #account-page .er-detail { font-size: 10.5px; margin-top: 4px; }
#account-page .ent-status-pill, #account-page .er-status {
font-size: 8.5px;
letter-spacing: 0.09em;
border-radius: 999px;
padding: 4px 7px;
}
/* hub .cert-row "right" column: stack status over action so the info
column keeps its width (mockup pattern) */
#account-page .er-action-cluster {
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
#account-page .er-info { flex: 1 1 140px; }
#account-page .ent-info { flex: 1 1 120px; }
/* sessions + toggles inherit the row-card grammar */
#account-page .security-sessions { margin-top: 16px; }
#account-page .session-list .sess-row, #account-page .session-row {
border-radius: 14px;
border-color: var(--border);
background: var(--surface);
padding: 12px 14px;
}
#account-page .toggle-row {
padding: 13px 14px;
border: 1px solid var(--border);
border-bottom: 0;
background: var(--surface);
}
#account-page .toggle-row:first-of-type { border-radius: 14px 14px 0 0; }
#account-page .toggle-row:last-child {
border-bottom: 1px solid var(--border);
border-radius: 0 0 14px 14px;
}
#account-page .toggle-label { font-size: 13.5px; }
#account-page .toggle-sub { font-size: 11px; }
/* buttons → hub pills */
#account-page .btn-ghost-sm, #account-page .btn-primary-sm,
#account-page .ent-cta-btn, #account-page .er-action {
border-radius: 999px;
font-size: 12px;
}
#account-page .btn-primary-sm {
box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent);
}
/* danger zone — keep, tighten */
#account-page .acc-section.is-danger {
margin-top: 30px;
border-radius: 16px;
padding: 16px 16px 18px;
}
#account-page .acc-section.is-danger .section-head { display: block; margin-bottom: 0; }
#account-page .acc-section.is-danger .section-title {
font: 600 18px/1.2 'Fraunces', Georgia, serif;
letter-spacing: -0.01em;
text-transform: none;
color: var(--danger);
}
#account-page .acc-section.is-danger .section-sub { font-size: 11.5px; }
#account-page .btn-danger { border-radius: 12px; }
/* anon gate / loading — app tone */
#account-page .account-anon-gate { margin: 40px auto; }
#account-page .btn-primary-cta { border-radius: 12px; }
/* ════════════════════════════════════════════════════════════════════════
/analytics — cross-cert language (cert-ios-cross-cert.html)
════════════════════════════════════════════════════════════════════════ */
/* panel heads → ghead micro-labels */
#analytics-page .cca-panel { margin-top: 28px; }
#analytics-page .cca-panel-head {
padding-bottom: 0;
border-bottom: 0;
margin-bottom: 10px;
gap: 10px;
}
#analytics-page .cca-panel-icon { display: none; }
#analytics-page .cca-panel-title-row { gap: 0; }
#analytics-page .cca-panel-title {
font: 800 10px/1.4 'Inter', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
#analytics-page .cca-panel-help {
font: 700 9px/1.3 'Roboto Mono', ui-monospace, monospace;
letter-spacing: 0.02em;
color: var(--accent-deep);
}
[data-theme="dark"] #analytics-page .cca-panel-help { color: var(--accent-bright); }
/* group headers inside panel 1 */
#analytics-page .cca-pr-group-h {
margin: 16px 2px 10px;
font-size: 10px;
letter-spacing: 0.12em;
}
#analytics-page .cca-pr-group-h-rule { display: none; }
/* readiness rows → mockup .cert cards */
#analytics-page .cca-pr-row, #analytics-page .cca-pr-row-active {
grid-template-columns: 40px 1fr;
gap: 8px 12px;
border: 1px solid var(--border);
border-radius: 15px;
background: var(--surface);
padding: 13px 14px;
margin-bottom: 9px;
}
#analytics-page .cca-pr-row:last-child, #analytics-page .cca-pr-row-active:last-child {
border-bottom: 1px solid var(--border);
}
#analytics-page .cca-pr-row-passed {
border-color: color-mix(in oklab, var(--pass) 36%, var(--border));
background: color-mix(in oklab, var(--pass) 5%, var(--surface));
}
#analytics-page .cca-pr-glyph {
width: 40px; height: 40px;
border-radius: 11px;
font: 800 12px 'Inter', sans-serif;
letter-spacing: -0.02em;
background: color-mix(in oklab, var(--accent) 13%, var(--surface-2));
border: 0;
}
#analytics-page .cca-pr-row-passed .cca-pr-glyph {
background: color-mix(in oklab, var(--pass) 14%, var(--surface-2));
color: var(--pass);
}
#analytics-page .cca-pr-name { font-size: 14px; margin-bottom: 3px; }
#analytics-page .cca-pr-coach, #analytics-page .cca-pr-info > div:last-child { font-size: 11.5px; }
#analytics-page .cca-pr-status-pill { border-radius: 999px; font-size: 8.5px; padding: 4px 7px; }
#analytics-page .cca-pr-readiness, #analytics-page .cca-pr-action { grid-column: 1 / -1; }
#analytics-page .cca-pr-readiness-label { margin-bottom: 8px; }
#analytics-page .cca-pr-readiness-score { font-size: 17px; }
#analytics-page .cca-pr-readiness-meta { font-size: 10.5px; }
#analytics-page .cca-pr-action-btn { border-radius: 999px; padding: 8px 14px; font-size: 11.5px; }
#analytics-page .cca-pr-action-disabled { border-radius: 999px; padding: 8px 14px; font-size: 11px; }
#analytics-page .cca-pr-cutoff-legend { margin-top: 12px; font-size: 10.5px; }
/* overlap rows → mockup .ov cards */
#analytics-page .cca-so-list { gap: 11px; margin-top: 6px; }
#analytics-page .cca-so-row {
border-radius: 16px;
background: var(--surface);
}
#analytics-page .cca-so-summary {
gap: 12px;
padding: 14px 15px;
}
#analytics-page .cca-so-pair-glyph {
width: 34px; height: 34px;
border-radius: 10px;
font: 800 10.5px 'Inter', sans-serif;
letter-spacing: -0.02em;
}
#analytics-page .cca-so-pair::before { left: 30px; right: 30px; height: 2px; }
#analytics-page .cca-so-pair-arrow { width: 20px; height: 20px; font-size: 10px; }
#analytics-page .cca-so-bar-pct { font-size: 28px; }
#analytics-page .cca-so-meta { text-align: left; justify-self: start; }
#analytics-page .cca-so-meta-headline { font-size: 12.5px; }
#analytics-page .cca-so-meta-sub { font-size: 10.5px; }
#analytics-page .cca-so-detail-grid { grid-template-columns: 1fr; margin-top: 14px; }
#analytics-page .cca-so-detail-col:last-child { border-left: 0; border-top: 1px solid var(--border-soft); }
#analytics-page .cca-so-row.is-open .cca-so-detail { padding: 0 15px 16px; }
/* what-next hero → mockup .toprec */
#analytics-page .cca-wn-body { margin-top: 8px; }
#analytics-page .cca-wn-hero {
border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
border-radius: 18px;
background: color-mix(in oklab, var(--accent) 7%, var(--surface));
box-shadow: none;
padding: 16px;
}
#analytics-page .cca-wn-hero::before { content: none; }
#analytics-page .cca-wn-hero-eyebrow { font-size: 9.5px; letter-spacing: 0.12em; margin-bottom: 10px; }
#analytics-page .cca-wn-hero-title { font-size: 19px; line-height: 1.25; margin-bottom: 12px; }
#analytics-page .cca-wn-reason { font-size: 12px; }
#analytics-page .cca-wn-hero-reasons { margin-bottom: 15px; gap: 10px; }
#analytics-page .cca-wn-hero-cta {
display: flex;
width: 100%;
justify-content: center;
border-radius: 13px;
padding: 14px;
font-size: 13.5px;
}
#analytics-page .cca-wn-secondary-h {
margin-top: 22px;
font-size: 10px;
letter-spacing: 0.12em;
}
#analytics-page .cca-wn-secondary-row {
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
padding: 12px 14px;
margin-top: 9px;
}
#analytics-page .cca-wn-secondary-row:last-child { border-bottom: 1px solid var(--border); }
#analytics-page .cca-wn-rank {
width: 38px; height: 38px;
border-radius: 11px;
background: color-mix(in oklab, var(--accent) 10%, var(--surface-2));
}
#analytics-page .cca-wn-text { font-size: 13px; }
#analytics-page .cca-wn-text-meta { font-size: 10.5px; }
#analytics-page .cca-wn-row-action { font-size: 11.5px; }
/* entrance reveals stay as-is (acx-r system already mobile-safe) */
/* ════════════════════════════════════════════════════════════════════════
Phase 2a — GO PRO card + upsell sheet on /account (cert-ios-hub.html
.pro / .sheet grammar). Nodes injected by lift-account.js for free-tier
users only; the CTA stays disabled with the same "coming soon" semantics
as #btn-upgrade until Stripe (Phase G) ships.
════════════════════════════════════════════════════════════════════════ */
#account-page .lift-pro {
position: relative;
overflow: hidden;
border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
border-radius: 18px;
background: color-mix(in oklab, var(--accent) 7%, var(--surface));
padding: 17px 17px 16px;
margin-top: 26px;
}
#account-page .lift-pro-eyebrow {
font: 800 9.5px/1 'Inter', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-deep);
margin: 0 0 8px;
}
[data-theme="dark"] #account-page .lift-pro-eyebrow { color: var(--accent-bright); }
#account-page .lift-pro-title {
font: 600 19px/1.15 'Fraunces', Georgia, serif;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 7px;
}
#account-page .lift-pro-body {
font: 500 12.5px/1.5 'Inter', sans-serif;
color: var(--ink-soft);
margin: 0 0 13px;
max-width: 40ch;
}
#account-page .lift-pro-body b { color: var(--ink); font-weight: 650; }
#account-page .lift-price-row { display: flex; gap: 9px; margin-bottom: 13px; }
#account-page .lift-price {
flex: 1 1 0;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
padding: 11px 12px;
position: relative;
}
#account-page .lift-price.best {
border-color: color-mix(in oklab, var(--accent) 42%, var(--border));
background: color-mix(in oklab, var(--accent) 9%, var(--surface));
}
#account-page .lift-price .plan {
font: 700 10.5px/1 'Inter', sans-serif;
letter-spacing: 0.02em;
color: var(--muted);
text-transform: uppercase;
}
#account-page .lift-price .amt {
font: 600 19px/1 'Fraunces', Georgia, serif;
color: var(--ink);
margin: 7px 0 3px;
font-variant-numeric: lining-nums tabular-nums;
}
#account-page .lift-price .amt small { font: 600 10.5px/1 'Inter', sans-serif; color: var(--muted); }
#account-page .lift-price .sub { font: 500 10px/1.3 'Inter', sans-serif; color: var(--muted); }
#account-page .lift-price .save {
position: absolute;
top: -8px; right: 10px;
font: 800 8.5px/1 'Inter', sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--on-accent);
background: var(--accent);
border-radius: 999px;
padding: 3px 7px;
}
#account-page .lift-pro-cta {
width: 100%;
border: none;
border-radius: 12px;
padding: 13px;
background: var(--accent);
color: var(--on-accent);
font: 700 14.5px/1 'Inter', sans-serif;
box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent);
}
#account-page .lift-pro-cta[disabled] { opacity: 0.65; cursor: not-allowed; }
#account-page .lift-pro-reassure {
display: block;
text-align: center;
font: 500 11px/1 'Inter', sans-serif;
color: var(--muted);
margin-top: 10px;
}
@media (prefers-reduced-motion: no-preference) {
#account-page .lift-pro.flash { animation: liftProFlash 1.1s var(--ease); }
}
@keyframes liftProFlash {
30% {
border-color: var(--accent);
background: color-mix(in oklab, var(--accent) 14%, var(--surface));
}
}
/* upsell sheet — appended inside #account-page so the lift tokens apply */
#account-page .lift-scrim {
position: fixed;
inset: 0;
z-index: 80;
background: color-mix(in oklab, var(--bg) 55%, transparent);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s var(--ease);
}
#account-page .lift-scrim.open { opacity: 1; pointer-events: auto; transition: opacity 0.28s var(--ease); }
#account-page .lift-sheet {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 81;
background: var(--surface);
border-top-left-radius: 22px;
border-top-right-radius: 22px;
border-top: 1px solid var(--border);
padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
transform: translateY(102%);
pointer-events: none;
transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 -20px 50px -24px rgba(0, 0, 0, 0.5);
}
#account-page .lift-sheet.open { transform: none; pointer-events: auto; transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1); }
#account-page .lift-sheet-grab { width: 38px; height: 4px; border-radius: 999px; background: var(--border); margin: 2px auto 14px; }
#account-page .lift-sheet-lock {
width: 40px; height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
background: color-mix(in oklab, var(--accent) 14%, var(--surface-2));
margin-bottom: 12px;
font-size: 17px;
}
#account-page .lift-sheet h2 {
font: 600 18px/1.2 'Fraunces', Georgia, serif;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 7px;
}
#account-page .lift-sheet p {
font: 500 12.5px/1.5 'Inter', sans-serif;
color: var(--ink-soft);
margin: 0 0 15px;
}
#account-page .lift-sheet p b { color: var(--ink); font-weight: 650; }
#account-page .lift-sheet-cta {
width: 100%;
border: none;
border-radius: 12px;
padding: 13px;
cursor: pointer;
background: var(--accent);
color: var(--on-accent);
font: 700 14.5px/1 'Inter', sans-serif;
box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent);
}
#account-page .lift-sheet-dismiss {
width: 100%;
margin-top: 8px;
border: none;
background: transparent;
cursor: pointer;
padding: 11px;
font: 600 13px/1 'Inter', sans-serif;
color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
#account-page .lift-sheet { transform: none; opacity: 0; transition: opacity 0.15s ease; }
#account-page .lift-sheet.open { opacity: 1; }
}
/* ════════════════════════════════════════════════════════════════════════
Phase 2b — auth modal lift on the landing homepage (onboarding-signup-
signin + onboarding-magic-link-sent grammar over the EXISTING #auth-main
/ #auth-sent states; magic-link flow + auth.js untouched).
════════════════════════════════════════════════════════════════════════ */
.auth-modal-overlay .auth-modal-card {
--bg: oklch(0.985 0.006 85);
--surface: oklch(0.965 0.008 84);
--surface-2: oklch(0.93 0.010 84);
--ink: oklch(0.22 0.015 280);
--ink-soft: oklch(0.38 0.014 280);
--muted: oklch(0.52 0.013 280);
--border: oklch(0.85 0.010 85);
--accent: oklch(0.55 0.155 55);
--accent-deep: oklch(0.46 0.150 52);
--accent-bright: oklch(0.62 0.150 58);
--on-accent: oklch(0.99 0.008 85);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
background: var(--bg);
color: var(--ink);
border: 1px solid var(--border);
border-radius: 22px;
font-family: 'Inter', system-ui, sans-serif;
}
[data-theme="dark"] .auth-modal-overlay .auth-modal-card {
--bg: oklch(0.15 0.010 275);
--surface: oklch(0.205 0.009 275);
--surface-2: oklch(0.255 0.010 275);
--ink: oklch(0.97 0.006 275);
--ink-soft: oklch(0.80 0.010 275);
--muted: oklch(0.62 0.013 275);
--border: oklch(0.34 0.009 275);
--accent: oklch(0.82 0.150 66);
--accent-deep: oklch(0.72 0.150 62);
--accent-bright: oklch(0.88 0.140 72);
--on-accent: oklch(0.18 0.020 275);
}
.auth-modal-overlay .auth-title,
.auth-modal-overlay .auth-sent-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: 25px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink);
}
.auth-modal-overlay .auth-sub,
.auth-modal-overlay .auth-sent-sub {
font-size: 13.5px;
line-height: 1.55;
color: var(--ink-soft);
}
.auth-modal-overlay .auth-label {
font: 650 12px/1 'Inter', sans-serif;
color: var(--ink-soft);
}
.auth-modal-overlay .auth-input {
border: 1px solid var(--border);
background: var(--surface);
color: var(--ink);
border-radius: 12px;
padding: 13px 14px;
font: 500 16px/1 'Inter', sans-serif; /* 16px floor: no iOS focus-zoom */
}
.auth-modal-overlay .auth-input::placeholder { color: var(--muted); }
.auth-modal-overlay .auth-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.auth-modal-overlay .auth-cta {
width: 100%;
border: none;
border-radius: 14px;
padding: 15px;
background: var(--accent);
color: var(--on-accent);
font: 700 15px/1 'Inter', sans-serif;
box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--accent) 70%, transparent);
}
.auth-modal-overlay .auth-cta-secondary {
width: 100%;
border: 1px solid var(--border);
border-radius: 14px;
padding: 13px;
background: var(--surface);
color: var(--ink);
font: 500 13.5px/1.3 'Inter', sans-serif;
}
.auth-modal-overlay .auth-cta-secondary strong { color: var(--accent-deep); }
[data-theme="dark"] .auth-modal-overlay .auth-cta-secondary strong { color: var(--accent-bright); }
.auth-modal-overlay .auth-divider { color: var(--muted); }
.auth-modal-overlay .auth-divider-text {
font: 600 11px/1 'Inter', sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.auth-modal-overlay .auth-oauth-btn {
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
color: var(--ink);
font: 650 14px/1 'Inter', sans-serif;
}
.auth-modal-overlay .auth-foot {
font-size: 11px;
line-height: 1.5;
color: var(--muted);
}
.auth-modal-overlay .auth-foot a { color: var(--ink-soft); }
.auth-modal-overlay .auth-error { border-radius: 11px; font-size: 12.5px; }
/* sent state — envelope block + addr pill from the magic-link mockup */
.auth-modal-overlay .auth-sent-icon {
width: 76px;
height: 76px;
border-radius: 22px;
margin: 0 auto 18px;
display: grid;
place-items: center;
background: color-mix(in oklab, var(--accent) 12%, var(--surface-2));
border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border));
}
.auth-modal-overlay .auth-sent-icon::before {
content: "";
width: 38px;
height: 38px;
background-color: var(--accent-deep);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
[data-theme="dark"] .auth-modal-overlay .auth-sent-icon::before { background-color: var(--accent-bright); }
.auth-modal-overlay .auth-sent-email-pill {
display: inline-block;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
padding: 9px 16px;
font: 650 13.5px/1 'Inter', sans-serif;
color: var(--accent-deep);
}
[data-theme="dark"] .auth-modal-overlay .auth-sent-email-pill { color: var(--accent-bright); }
.auth-modal-overlay .auth-sent-resend { font-size: 12.5px; color: var(--muted); }
.auth-modal-overlay .auth-sent-resend a { color: var(--accent-deep); font-weight: 600; }
[data-theme="dark"] .auth-modal-overlay .auth-sent-resend a { color: var(--accent-bright); }
}