/* Google Fonts for the three Vintage themes only - each pairs a display face for headings with a plainer
   face for body text, in the spirit of old printed matter (a zine, a letterman jacket, a soda-fountain
   menu board). Loaded unconditionally (a handful of small font files) rather than only when a given theme
   is active, since a theme can be switched without a page reload and CSS can't conditionally load a
   stylesheet based on an attribute. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,600;0,700;1,600&family=Space+Mono:wght@400;700&family=Bebas+Neue&family=Oswald:wght@400;600&family=Alfa+Slab+One&family=Quicksand:wght@500;700&display=swap');

/* The shared palette: was declared identically (and, for --good, not quite identically) inside Articles,
   Fill in the blank, Pick the word and Arrange words. One definition here instead of four. bg/surface/
   surface-alt and the font tokens are new - previously every card/page background was a hardcoded #fff
   (or a handful of near-white literals) scattered across component stylesheets, which is why dark/sepia/
   vintage themes needed those tokenized here before they could work at all. A theme (see the
   [data-theme=...] blocks below) only ever overrides these same custom properties - nothing else. */
:root {
    --ink: #212529;
    --slate: #6c757d;
    --coral: #C94E36;
    --good: #0f5132;
    --line: #ced4da;
    --box: #8a939b;
    --hover: #e9ecef;
    --press: #dee2e6;
    --focus: #258cfb;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f8f9fa;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-heading: var(--font-body);
    /* Fill in the blank's sentence and letter boxes: the legacy app's bold geometric face, unless a theme with its
       own fonts says otherwise (the Vintage themes use their body face). */
    --font-game: 'Century Gothic', 'Avenir Next', 'Futura', 'Trebuchet MS', sans-serif;
    color-scheme: light;
    /* The nav drawer (MainLayout's .sidebar) is a colorful accent panel, not a plain surface - it keeps
       its own background/ink pair per theme rather than reusing --surface/--ink, the same way a print
       piece's cover often carries its own color separate from the pages inside. --nav-ink-muted (the
       drawer's "text-white-50" equivalent, e.g. the divider <hr>) is derived here so it never needs
       redefining per theme - it just follows whatever --nav-ink that theme sets. */
    --nav-bg: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    --nav-ink: #ffffff;
    --nav-ink-muted: color-mix(in srgb, var(--nav-ink) 50%, transparent);
    /* The "correct/wrong/hinted/drop-target" tinted badges each game repeats (Pick's .answer/.missed,
       Arrange's .correct/.revealed, the drag-over highlight, ...) - color-mix against --surface means
       these need defining only once here, not per theme: whatever --good/--coral/--focus a theme picks,
       the tint follows automatically instead of needing its own hand-tuned value in every theme block. */
    --good-bg: color-mix(in srgb, var(--good) 15%, var(--surface));
    --good-border: color-mix(in srgb, var(--good) 45%, var(--surface));
    --bad-bg: color-mix(in srgb, var(--coral) 15%, var(--surface));
    --bad-border: color-mix(in srgb, var(--coral) 45%, var(--surface));
    --warn-bg: color-mix(in srgb, #e0a30a 18%, var(--surface));
    --warn-border: color-mix(in srgb, #e0a30a 45%, var(--surface));
    --drop-bg: color-mix(in srgb, var(--focus) 12%, var(--surface));
}

/* Dark: for low-light reading/reminders. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e8e8ea;
    --slate: #9aa0a6;
    --coral: #ff8a65;
    --good: #4ade80;
    --line: #3f3f46;
    --box: #6b7280;
    --hover: #27272a;
    --press: #3f3f46;
    --focus: #60a5fa;
    --bg: #18181b;
    --surface: #1f1f23;
    --surface-alt: #242428;
}

/* Sepia: warm, paper-like tones for long reading sessions (definitions, articles, examples) - the same
   idea e-readers use, more relevant here than in most apps since this one is mostly text. */
:root[data-theme="sepia"] {
    --ink: #4b3621;
    --slate: #7a6248;
    --coral: #b5502e;
    --good: #4d6b3f;
    --line: #d8c8a8;
    --box: #b8a480;
    --hover: #f0e6cc;
    --press: #e6d7b8;
    --focus: #8a6d3f;
    --bg: #f4ecd8;
    --surface: #faf3e3;
    --surface-alt: #f0e6cc;
    --nav-bg: linear-gradient(180deg, #6b4423 0%, #3f2a15 100%);
    --nav-ink: #f4ecd8;
}

/* High contrast: pure black/white, stronger borders, no soft grays - for low-vision users. */
:root[data-theme="high-contrast"] {
    --ink: #000000;
    --slate: #000000;
    --coral: #b30000;
    --good: #006600;
    --line: #000000;
    --box: #000000;
    --hover: #e6e6e6;
    --press: #cccccc;
    --focus: #0000ff;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #ffffff;
    --nav-bg: #000000;
    --nav-ink: #ffffff;
}

/* Vintage 1: a colorful, retro-zine look - warm cream page, a bold serif for headings, a typewriter mono
   for body text. */
:root[data-theme="vintage1"] {
    --ink: #2b2118;
    --slate: #6b5c47;
    --coral: #c9484a;
    --good: #3f6b4f;
    --line: #d8c9a3;
    --box: #a68a5b;
    --hover: #f6e9c9;
    --press: #eddcae;
    --focus: #c9484a;
    --bg: #f6e9c9;
    --surface: #fdf6e3;
    --surface-alt: #fbead1;
    --font-body: 'Space Mono', 'Courier New', monospace;
    --font-heading: 'Fraunces', Georgia, serif;
    --font-game: var(--font-body);
    --nav-bg: linear-gradient(180deg, #7a2e2e 0%, #2b2118 100%);
    --nav-ink: #fdf6e3;
}

/* Vintage 2: "Varsity" - a night-game letterman jacket look, navy wool with mustard-gold trim and a
   poster/scoreboard headline face over a clean condensed body face. */
:root[data-theme="vintage2"] {
    color-scheme: dark;
    --ink: #f3e6c4;
    --slate: #c9b896;
    --coral: #d1662f;
    --good: #5a9367;
    --line: #3a4a63;
    --box: #6b7a91;
    --hover: #223449;
    --press: #2c4159;
    --focus: #e0a94a;
    --bg: #16233a;
    --surface: #1c2e47;
    --surface-alt: #223a56;
    --font-body: 'Oswald', 'Arial Narrow', sans-serif;
    --font-heading: 'Bebas Neue', Impact, sans-serif;
    --font-game: var(--font-body);
    --nav-bg: linear-gradient(180deg, #0d1626 0%, #1c2e47 100%);
    --nav-ink: #f3e6c4;
}

/* Vintage 3: "Diner" - a 1950s soda-fountain menu board, teal and cherry-red on warm cream, with a
   chunky slab headline face over a friendly rounded body face. */
:root[data-theme="vintage3"] {
    --ink: #26312f;
    --slate: #5f7570;
    --coral: #c1272d;
    --good: #2f7a78;
    --line: #cfe0d9;
    --box: #7fa39c;
    --hover: #e8f2ee;
    --press: #d9ebe4;
    --focus: #2f7a78;
    --bg: #faf1dd;
    --surface: #fffaf0;
    --surface-alt: #f3e9d2;
    --font-body: 'Quicksand', 'Trebuchet MS', sans-serif;
    --font-heading: 'Alfa Slab One', Georgia, serif;
    --font-game: var(--font-body);
    --nav-bg: linear-gradient(180deg, #1f4d4b 0%, #123331 100%);
    --nav-ink: #faf1dd;
}

html, body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    --maui-status-bar-safe-area-background: rgb(3, 23, 62);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

a, .btn-link {
    color: var(--focus);
}

.btn-primary {
    color: var(--surface);
    background-color: var(--focus);
    border-color: var(--focus);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--surface), 0 0 0 0.25rem var(--focus);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Every text input (CTextBox) and <select> in the app is one of these two Bootstrap classes; Bootstrap's
   own CSS hardcodes a white background and near-black text for both, invisible to every token above. */
.form-control, .form-select {
    background-color: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    color: var(--ink);
}
.form-control:disabled, .form-select:disabled {
    background-color: var(--surface-alt);
}

/* A word that can be clicked (ClickableText, and the dictionary's related words): the dictionary looks it up, the games and
   articles open its reminder. It shows as a link only under the mouse, so the text reads as plain text. */
.word-link{cursor:pointer;border-radius:.2rem}
.word-link:hover{background:var(--hover);color:var(--focus);text-decoration:underline;text-underline-offset:.15em}