/*
 * styles.css — the landing page's complete stylesheet.
 *
 * External rather than an inline <style> so the Content-Security-Policy can keep
 * style-src at 'self' plus the Google Fonts host, with no 'unsafe-inline'. The two apps
 * need 'unsafe-inline' because MUI's emotion injects <style> tags at runtime; this page
 * has no framework and therefore no reason to weaken the policy.
 *
 * Colour values come from apps/shared/src/theme/theme.css so this page and the apps agree.
 * LIGHT IS THE DEFAULT here, unlike the apps, which default to dark.
 */
/* ─────────────────────────────────────────────────────────────────────────
   Tokens. Values come from the product's own apps/shared/src/theme/theme.css
   so this page and the two apps agree.

   LIGHT IS THE DEFAULT here, unlike the apps, which default to dark. The
   palette therefore sits on bare :root and dark is applied only when the
   selector resolves to it, via [data-ui="dark"]. The "Auto" option is what
   follows prefers-color-scheme — it is opt-in rather than the default, so
   a visitor on a dark OS still gets the light page unless they ask.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --ground-1: #E8D8C4;
    --ground-2: #DED6E4;
    --ground-3: #CCDAF0;
    --ground-4: #C4D8EA;
    --ground-5: #D4E2E0;

    --glass:        rgba(255, 255, 255, 0.50);
    --glass-strong: rgba(255, 255, 255, 0.68);
    --glass-edge:   rgba(255, 255, 255, 0.72);
    --hairline:     rgba(26, 38, 54, 0.10);
    --chip:         rgba(255, 255, 255, 0.42);
    --chip-on:      rgba(255, 255, 255, 0.92);

    --text-h: #1A2636;
    --text-p: #2E3A4A;
    --text-s: #5A6878;
    --text-m: #8A96A4;

    --accent:      #3A80C0;
    --accent-ink:  #FFFFFF;
    --teal:        #2E8880;

    --shadow-lift: 0 18px 40px -22px rgba(26, 38, 54, 0.45);
    --shadow-rest: 0 10px 28px -20px rgba(26, 38, 54, 0.35);

    --radius: 16px;
    --measure: 62ch;
}

:root[data-ui="dark"] {
    --ground-1: #1B222B;
    --ground-2: #1E242C;
    --ground-3: #1A222E;
    --ground-4: #181D24;
    --ground-5: #1C2430;

    --glass:        rgba(35, 42, 51, 0.62);
    --glass-strong: rgba(42, 50, 60, 0.78);
    --glass-edge:   rgba(255, 255, 255, 0.08);
    --hairline:     rgba(255, 255, 255, 0.10);
    --chip:         rgba(255, 255, 255, 0.05);
    --chip-on:      rgba(255, 255, 255, 0.12);

    --text-h: #D0D4DA;
    --text-p: #9BA3AE;
    --text-s: #6E7A86;
    --text-m: #4D5762;

    --accent:      #6EA4D4;
    --accent-ink:  #12181F;
    --teal:        #5BA8A0;

    --shadow-lift: 0 18px 44px -22px rgba(0, 0, 0, 0.72);
    --shadow-rest: 0 10px 30px -22px rgba(0, 0, 0, 0.60);
}

body {
    margin: 0;
    padding-inline: 20px;
    padding-block: clamp(24px, 5vw, 48px) 44px;
    background: linear-gradient(135deg,
        var(--ground-1) 0%,
        var(--ground-2) 25%,
        var(--ground-3) 50%,
        var(--ground-4) 75%,
        var(--ground-5) 100%);
    background-attachment: fixed;
    color: var(--text-p);
    font-family: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: 720px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 4.5vw, 42px);
}

/* ── Theme selector ─────────────────────────────────────────────────────── */
/* Same three options and the same segmented treatment as the apps' sign-in
   screens. Kept in the document flow rather than pinned to the corner: this
   page scrolls, and an absolutely-positioned control overlaps the heading at
   phone width. */

.theme {
    align-self: flex-end;
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: 9px;
    background: var(--chip);
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.theme button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    color: var(--text-m);
    transition: background 150ms ease, color 150ms ease;
}

.theme button:hover { color: var(--text-s); }

.theme button[aria-pressed="true"] {
    background: var(--chip-on);
    color: var(--text-h);
    font-weight: 600;
}

.theme button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme svg { flex: none; }

/* ── Masthead ───────────────────────────────────────────────────────────── */

.mark {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
}

.mark-glyph { width: 30px; height: 30px; flex: none; }

.mark-word {
    font-family: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--text-h);
}

h1 {
    font-family: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(2.05rem, 6.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--text-h);
    text-wrap: balance;
    margin: 0 0 16px;
}

.lede {
    max-width: var(--measure);
    margin: 0;
    font-size: 1.06rem;
    color: var(--text-p);
}

.lede em { font-style: italic; color: var(--text-h); }

/* ── The two doors ──────────────────────────────────────────────────────── */

.doors {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.door {
    display: block;
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid var(--glass-edge);
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: var(--shadow-rest);
    padding: 22px 24px;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.door:hover,
.door:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    border-color: var(--accent);
}

.door:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* The primary door is deliberately heavier: interviewers are the
   overwhelming majority of people who land here, administrators are a
   handful. Equal weight would misrepresent who the page is for. */
.door-primary {
    background: var(--glass-strong);
    border-color: var(--accent);
    padding: 26px 24px 24px;
}

.door-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.door-title {
    font-family: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-h);
    margin: 0;
}

.door-primary .door-title { font-size: 1.5rem; }
.door-secondary .door-title { font-size: 1.16rem; }

.door-host {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-m);
    white-space: nowrap;
}

.door-body {
    margin: 7px 0 0;
    color: var(--text-s);
    font-size: 0.97rem;
    max-width: 48ch;
}

.door-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    border-radius: 10px;
    font-family: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 11px 19px;
    background: var(--accent);
    color: var(--accent-ink);
}

.door-secondary .door-cta {
    margin-top: 13px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 8px 15px;
    font-size: 0.92rem;
}

.door-cta svg { flex: none; transition: transform 140ms ease; }

.door:hover .door-cta svg,
.door:focus-visible .door-cta svg { transform: translateX(2px); }

.help { font-size: 0.92rem; color: var(--text-m); margin: 0; }

/* ── What it does ───────────────────────────────────────────────────────── */

.notes {
    border-top: 1px solid var(--hairline);
    padding-top: clamp(24px, 4vw, 32px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 24px 28px;
}

.note-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 7px;
}

.note-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    flex: none;
}

.note p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-s);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer {
    border-top: 1px solid var(--hairline);
    padding-top: 22px;
    font-size: 0.88rem;
    color: var(--text-m);
}

footer a {
    color: var(--text-s);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
}

footer a:hover,
footer a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}