/* ==========================================================================
   IlmuBridge — house style
   Loud, purple, made for teenagers. Two themes: light (lavender paper) and
   dark (deep navy, never black). Order: tokens, base, type, layout,
   components (masthead, buttons, cards, forms, quiz, admin, modal), utilities.
   ========================================================================== */

:root {
    /* Purple, light to dark */
    --lav-50:   #f6f2ff;
    --lav-100:  #ede5ff;
    --lav-200:  #dccdff;
    --lav-300:  #c0a6ff;
    --violet:   #7038e8;
    --violet-d: #5a25c9;
    --violet-ink: #5a25c9;   /* violet used as text */
    --grape:    #3d1a80;     /* always a dark purple surface */
    --ink:      #2b1b54;
    --ink-soft: #5b4a86;
    --ink-mute: #8579ab;

    /* Play colours: answer tiles, badges, subject stripes */
    --sun:      #ffc13b;
    --sun-d:    #e0a121;
    --coral:    #ff6a5e;
    --coral-d:  #e04b3f;
    --mint:     #21ce9e;
    --mint-d:   #14a97f;
    --sky:      #3aa9ff;
    --sky-d:    #1c88df;
    --bubble:   #ff7bd5;

    --good:     #17b57f;
    --good-d:   #0e9166;
    --bad:      #f2504a;
    --bad-d:    #cf3a35;

    /* Themed surfaces — the pieces dark mode swaps out */
    --bg:        var(--lav-50);
    --dots:      var(--lav-200);
    --surface:   #ffffff;
    --surface-2: var(--lav-100);
    --heading:   var(--grape);
    --ring:      var(--grape);

    /* Pastel washes for chips, verdicts and result boxes */
    --wash-sun:   #fff5dd;   --wash-sun-line:   #ffdf9e;
    --wash-mint:  #ddfaf1;   --wash-mint-line:  #a5ecd6;
    --wash-sky:   #e0f1ff;   --wash-sky-line:   #a9d8ff;
    --wash-coral: #ffe8e6;   --wash-coral-line: #ffbdb7;

    /* Fonts */
    --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Shape */
    --r-sm: 10px;
    --r: 16px;
    --r-lg: 24px;
    --r-pill: 999px;

    /* The house shadow: a solid ledge underneath, like a plastic button. */
    --ledge: 0 5px 0 rgba(43, 27, 84, 0.16);
    --ledge-lg: 0 8px 0 rgba(43, 27, 84, 0.14);
    --float: 0 14px 30px rgba(61, 26, 128, 0.14);

    --shell: 1160px;

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   Dark mode — deep navy, not black. Same purple personality, dimmer room.
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
    /* The lavender scale becomes a navy scale, so every border and chip
       that references it follows along. */
    --lav-50:   #0d1836;
    --lav-100:  #1c2c5c;
    --lav-200:  #2c3f76;
    --lav-300:  #4a5f9e;

    --violet:   #8b63f8;
    --violet-d: #6f45e0;
    --violet-ink: #bda6ff;
    --grape:    #1a2750;

    --ink:      #e9edfb;
    --ink-soft: #c2cdeb;
    --ink-mute: #94a2cd;

    --bg:        #0d1836;
    --dots:      #1e2e5e;
    --surface:   #142248;
    --surface-2: #1b2b58;
    --heading:   #eaeefc;
    --ring:      #ffffff;

    --sun-d:    #ffcf62;
    --mint-d:   #4fe0b8;
    --sky-d:    #74c4ff;
    --coral-d:  #ff9086;
    --good-d:   #4fe0b8;
    --bad-d:    #ff9086;

    --wash-sun:   rgba(255, 193, 59, 0.14);   --wash-sun-line:   rgba(255, 193, 59, 0.4);
    --wash-mint:  rgba(33, 206, 158, 0.14);   --wash-mint-line:  rgba(33, 206, 158, 0.4);
    --wash-sky:   rgba(58, 169, 255, 0.14);   --wash-sky-line:   rgba(58, 169, 255, 0.4);
    --wash-coral: rgba(255, 106, 94, 0.14);   --wash-coral-line: rgba(255, 106, 94, 0.4);

    --ledge: 0 5px 0 rgba(4, 10, 28, 0.55);
    --ledge-lg: 0 8px 0 rgba(4, 10, 28, 0.5);
    --float: 0 14px 30px rgba(4, 10, 28, 0.6);

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--body);
    font-size: 16.5px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--ink);
    background-color: var(--bg);
    /* Faint dot grid so no page ever feels like a blank sheet. */
    background-image: radial-gradient(var(--dots) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    background-attachment: fixed;
    transition: background-color 200ms ease, color 200ms ease;
}

img { max-width: 100%; display: block; }

a { color: var(--violet-ink); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 800;
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.015em;
}

.display { font-size: clamp(2.5rem, 6vw, 4.1rem); }
.h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
.h3 { font-size: 1.35rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 56ch; }
.prose { color: var(--ink-soft); max-width: 66ch; }
.prose p + p { margin-top: 0.85rem; }
.note { font-size: 0.9rem; color: var(--ink-mute); font-weight: 600; }

.eyebrow {
    display: inline-block;
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--violet-ink);
    background: var(--surface-2);
    border-radius: var(--r-pill);
    padding: 0.3rem 0.85rem;
}

/* Highlighter behind a word or two in a headline. */
.mark {
    /* Sits low enough to read as a marker stroke rather than washing out text. */
    background: linear-gradient(transparent 72%, var(--sun) 72%, var(--sun) 96%, transparent 96%);
    padding: 0 0.1em;
}

.rule { border: 0; border-top: 3px dotted var(--lav-200); margin: 2.5rem 0; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 22px; }
.shell--narrow { max-width: 960px; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

.page--overlay {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    background-color: var(--bg);
    background-image: radial-gradient(var(--dots) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    z-index: 40;
}

.section { padding: 3rem 0; }
.section + .section { padding-top: 0; }

.split { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 920px) {
    /* minmax(0, …) instead of bare fr: a long unbreakable word inside a panel
       would otherwise widen its track past the viewport and shove the whole
       pair off-centre (classic grid blowout). */
    .split { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 3rem; align-items: start; }
    .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stack > * + * { margin-top: 1.5rem; }

.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }