/* * profile.css — Phase 3 USER PROFILE page + SITE-WIDE THEME engine + the * segmented password-strength meter atom. Built from the existing OSR system: * Stone Wall cards (.panel), 1px Mortar borders, border-radius:0, the single * accent, white body text. No new visual vocabulary. * * Three blocks: * 1. THEME OVERRIDES — :root[data-theme="…"] swaps --color-accent / * --color-accent-hover / --color-bg site-wide. 'stone' is the default and * re-states the live cornflower tokens so the default app is unchanged. * 2. PROFILE PAGE — identity / account / counts / theme cards. * 3. PASSWORD METER — reusable segmented bar + rule checklist. */ /* ============================================================ 1. SITE-WIDE THEME OVERRIDES Each theme replaces the SINGLE accent + the near-black ground (KDL 2026-06-27 §2.1 — "no second accent"). Body text stays white by construction, so the accent is only ever used for borders / fills / focus rings / large headings, where every theme's bright accent on its near-black ground clears the 3:1 UI contrast bar comfortably. Values mirror js/theme.js THEMES. ============================================================ */ /* 'stone' = baseline. Explicit so a saved 'stone' is identical to the default app (the live cornflower tokens), not a surprise. */ :root[data-theme="stone"] { --color-accent: #6495ED; --color-accent-hover: #7aa8f0; --color-bg: #0d0c0a; } :root[data-theme="earth"] { --color-accent: #e68223; --color-accent-hover: #f29a45; --color-bg: #120804; } :root[data-theme="water"] { --color-accent: #32afff; --color-accent-hover: #5cc1ff; --color-bg: #020810; } :root[data-theme="fire"] { --color-accent: #ff8212; --color-accent-hover: #ff9b3f; --color-bg: #160400; } :root[data-theme="wind"] { --color-accent: #a6b0ec; --color-accent-hover: #c0c8f3; --color-bg: #0a0b12; } :root[data-theme="air"] { --color-accent: #3cc4ec; --color-accent-hover: #66d2f1; --color-bg: #060c16; } :root[data-theme="obsidian"] { --color-accent: #b066ff; --color-accent-hover: #c388ff; --color-bg: #050408; } :root[data-theme="diamond"] { --color-accent: #a8dcff; --color-accent-hover: #c6e8ff; --color-bg: #080e16; } :root[data-theme="jade"] { --color-accent: #28d78c; --color-accent-hover: #51e0a4; --color-bg: #030c06; } :root[data-theme="topaz"] { --color-accent: #ffd84a; --color-accent-hover: #ffe273; --color-bg: #0e0a00; } :root[data-theme="ruby"] { --color-accent: #ff4a64; --color-accent-hover: #ff6e83; --color-bg: #100208; } /* 'custom' (KDL 2026-06-27 theme_contrast_custom_accent.md §2.2 / §2.5). The AUTHORITATIVE values are the inline custom properties theme.js paint() sets on from the stored accent (accent / accent-hover / bg / surface / surface-hover / border + --ink-on-accent). This block only DECLARES the Stone-equivalent defaults so a custom theme with NO stored accent (or a parse failure) degrades to Stone rather than to an unstyled page — never a broken paint. */ :root[data-theme="custom"] { --color-accent: #6495ED; --color-accent-hover: #7aa8f0; --color-bg: #0d0c0a; } /* ============================================================ 2. PROFILE PAGE ============================================================ */ .profile { max-width: 760px; } .profile__loading { font-family: var(--font-body); font-style: italic; color: var(--color-text-muted); } /* Each section is a Stone Wall card (the base .panel). The title is a small blackletter heading; sr-only on identity (the username is the heading there). */ .profile-card { display: flex; flex-direction: column; gap: var(--space-md); } .profile-card__title { font-family: var(--font-heading); font-size: var(--text-h3); color: var(--color-heading); margin: 0; } /* A card prompting a missing required field (no email yet) carries the live accent stripe so it reads as needing attention — not an error (Void Red), just "do this". */ .profile-card--alert { border-left: 3px solid var(--color-accent); } /* --- Identity --- */ .profile-identity { flex-direction: row; align-items: center; gap: var(--space-lg); } /* Avatar block (#3a): a 96px frame holding EITHER the monogram glyph OR the uploaded image, plus the upload/remove controls beside it. The frame keeps the OSR card chrome (Mortar border, 3px accent stripe, near-black ground). */ .profile-identity__avatar-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } .profile-identity__avatar { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); font-family: var(--font-heading); font-size: 3rem; line-height: 1; color: var(--color-accent); overflow: hidden; } .profile-identity__monogram[hidden], .profile-identity__img[hidden] { display: none; } /* The uploaded image fills the frame, hard-edged (border-radius:0 is global). */ .profile-identity__img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-identity__avatar-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } /* The upload control is a