:root{ --ground:#EFE4CE; --ground-raised:#E4D5B8; --panel:#F7F1E2; /* Darkened from the original #9C6B1F — at that value, --ground-on-accent text (button.action, .welcome-cta, the active .mode-btn) measured 3.67:1, under WCAG AA's 4.5:1 floor for normal-size text. This value clears 4.5:1 against --ground (and improves accent-as-link-text against --panel too) while staying the same warm gold/bronze hue — dark mode's --accent below was already compliant and is untouched. See docs/accessibility.md (if present) or the contrast check in this repo's accessibility pass for the numbers. */ --accent:#845A1A; --accent-dim:#C9A463; --ink:#241D14; --ink-muted:#6B5D47; --card-back-a:#2C2316; --card-back-b:#443720; --shadow: 0 10px 24px rgba(36,29,20,.18); /* Status text colors (error/ok), used wherever a message needs to read as "something went wrong"/"that worked" beyond its own wording (geocode lookup, admin save, auth form, block/inactive badges). Previously hardcoded hex baked into each rule, which is how they drifted out of AA compliance in dark mode without anyone noticing — centralizing them here means one pair of values to check, and they now vary by theme like every other color in this file. Both checked against BOTH --ground and --panel at >=4.5:1 (normal-text AA). */ --status-error:#9B3523; --status-ok:#3F6B3F; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#161310; --ground-raised:#211C17; --panel:#1C1712; --accent:#D4A24E; --accent-dim:#8B6B35; --ink:#EFE6D8; --ink-muted:#B3A58E; --card-back-a:#120F0A; --card-back-b:#241D12; --shadow: 0 14px 30px rgba(0,0,0,.45); --status-error:#E08A74; --status-ok:#6FA86F; } } :root[data-theme="dark"]{ --ground:#161310; --ground-raised:#211C17; --panel:#1C1712; --accent:#D4A24E; --accent-dim:#8B6B35; --ink:#EFE6D8; --ink-muted:#B3A58E; --card-back-a:#120F0A; --card-back-b:#241D12; --shadow: 0 14px 30px rgba(0,0,0,.45); --status-error:#E08A74; --status-ok:#6FA86F; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--ground); color:var(--ink); font-family:"Work Sans",system-ui,sans-serif; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:18px 20px 32px; } h1,h2{font-family:"Fraunces",Georgia,serif; text-wrap:balance; margin:0;} /* Baseline for any with no more specific rule — without this, a link falls through to the browser's own default (blue, visited purple), which is both off-brand and often unreadably low-contrast against this theme's dark-mode background. Deliberately low specificity (bare element selector, specificity 0-0-1) so every existing more-specific rule (.action, .welcome-cta, .legal-footer a, nav links, etc. — all 0-1-0 or higher) keeps overriding it exactly as before. Author-origin styles already beat the browser's own user-agent :visited default regardless of specificity (origin is compared before specificity in the cascade), so this single rule covers both visited and unvisited states on its own — do NOT add a matching `a:visited{...}` rule here: :visited is a pseudo-CLASS, so `a:visited` carries specificity 0-1-1, which beats every single-class component rule above (0-1-0) once a link has been clicked once. That regression is exactly what made .welcome-cta's own white-on-gold text get overridden back to gold-on-gold (unreadable) for a visited Google sign-in link — a bug this comment exists to stop someone (including a future me) from reintroducing by "symmetry". */ a{ color:var(--accent); } /* Visually-hidden but screen-reader-accessible text — for context a sighted user gets from layout/color alone (e.g. "(active)" next to a highlighted pill) and for the skip-link below, which only needs to be visible once it's focused. */ .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; } .skip-link{ /* inset-inline-start (not left) so this lands at the reading-start edge in both directions — i18n.js sets dir="rtl" for Hebrew, where "start" is the right edge, not the left. */ position:absolute; inset-inline-start:8px; top:-100px; z-index:1000; background:var(--panel); color:var(--ink); border:1px solid var(--ink); padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; transition:top .15s ease; } .skip-link:focus{ top:8px; } /* The card itself is the point of the page, so it should claim most of the viewport height automatically — everything else (title above, the one row of deck controls below, Shuffle/profile link at the very bottom) is kept deliberately light so it doesn't compete for space. --stage-max bounds the card's box by BOTH available width and available height (unlike a plain max-width, which only reacts to a narrower window) — on a short/wide window it shrinks to fit height; on a tall/narrow one (mobile portrait) it's bounded by width instead. */ :root{ --stage-max: min(92vw, calc(72vh * 5 / 7), 680px); } /* Row, not column: brand (logo+title+language picker, all inline — see .brand below) sits on the left, account status/nav/etc. (see .topbar-actions) on the right, wrapping onto a second line only once there's truly no room for both on one — this is what keeps the page header to one or two compact rows on a phone instead of three separate centered rows (title / language / account) stacked on top of each other. */ .topbar{ width:100%; max-width:1180px; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; margin-bottom:14px; } .brand{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* Capped well below the old 36px ceiling — at that size + the language picker now sitting inline right after it (see .brand below), the title alone could crowd out .topbar-actions on desktop and push the account-status badge onto its own second line on mobile. This still scales a little with viewport width (2.2vw) but tops out much sooner. */ .brand h1{ font-size:clamp(17px,2.2vw,24px); font-weight:600; font-style:italic; letter-spacing:.2px; } /* theme-adaptive via CSS mask (same technique as .card-back-owl below) — dark mark in light mode, light mark in dark mode, rather than a fixed raster color that would vanish against a dark background. */ .brand-logo{ display:block; width:34px; height:34px; flex:none; background-color:var(--ink); -webkit-mask-image:url(/owl-logo.png); mask-image:url(/owl-logo.png); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; } /* language switcher — a single