/*
 * Sammy Direct theme for jfa-go's user-facing pages
 * (invite / sign-up form, success screen, password reset, My Account, invalid-code page).
 *
 * Loaded by the custom header template only when the page is NOT the admin page.
 * Colours come from sammy_direct.theme.json (the Moonfin theme):
 *   navy #07111F / #0E1E36 / #16304F, Direct blue #2F8CFF, apricot #E8A87C,
 *   cream #F4EADB, smoky grey #5E6B7A, eye green-gold #B3B64E, pillow gold #F2B227.
 * Image paths are relative to this file, so they work under any jfa-go URL base.
 */

html.sammy {
    --sd-bg: #07111F;
    --sd-surface: #0E1E36;
    --sd-surface-2: #16304F;
    --sd-border: #1E3A60;
    --sd-text: #F4EADB;
    --sd-muted: #9AA5B4;
    --sd-line: #5E6B7A;
    --sd-blue: #2F8CFF;
    --sd-blue-dark: #1F6FD6;
    --sd-apricot: #E8A87C;
    --sd-ginger: #D9895B;
    --sd-gold: #F2B227;
    --sd-olive: #B3B64E;
    --sd-red: #E5534B;

    --bg-dark: var(--sd-bg);
    --bg-light: var(--sd-bg);
    color-scheme: dark;
}

/* ---------- Page background: sleeping Sammy on her pillow ---------- */
html.sammy body,
html.sammy body.section {
    background-color: var(--sd-bg);
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, 0.94) 0%, rgba(7, 17, 31, 0.82) 42%, rgba(7, 17, 31, 0.25) 72%, rgba(7, 17, 31, 0.05) 100%),
        url("bg.jpg");
    background-size: cover, cover;
    background-position: center, right center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--sd-text);
    min-height: 100vh;
}

@media screen and (max-width: 1024px) {
    html.sammy body,
    html.sammy body.section {
        background-image:
            linear-gradient(180deg, rgba(7, 17, 31, 0.97) 0%, rgba(7, 17, 31, 0.9) 55%, rgba(7, 17, 31, 0.35) 100%),
            url("bg-mobile.jpg");
        background-position: center, right bottom;
        background-size: cover, 100% auto;
        background-attachment: scroll;
    }
}

/* ---------- Wordmark above the page content ---------- */
html.sammy .page-container::before {
    content: "";
    display: block;
    width: min(320px, 72vw);
    aspect-ratio: 1179 / 266;
    background: url("wordmark.png") no-repeat left center / contain;
    margin: 0.5rem 0 0.75rem;
    filter: drop-shadow(0 4px 18px rgba(47, 140, 255, 0.25));
}

/* ---------- Colour tokens (a17t "~colour @low/@high" system) ---------- */
html.sammy .\~neutral,
html.sammy .dark\:\~d_neutral {
    --color-fill-high: var(--sd-line);
    --color-fill-low: rgba(14, 30, 54, 0.9);
    --color-content-high: var(--sd-text);
    --color-content-low: var(--sd-text);
    --color-accent-high: var(--sd-muted);
    --color-accent-low: var(--sd-border);
    --color-muted-high: var(--sd-line);
    --color-muted-low: var(--sd-surface-2);
}

html.sammy .\~urge,
html.sammy .dark\:\~d_urge {
    --color-fill-high: var(--sd-blue);
    --color-fill-low: var(--sd-blue);
    --color-content-high: #ffffff;
    --color-content-low: #ffffff;
    --color-accent-high: var(--sd-blue-dark);
    --color-accent-low: var(--sd-blue);
    --color-muted-high: var(--sd-blue);
    --color-muted-low: var(--sd-blue);
}

html.sammy .\~info,
html.sammy .dark\:\~d_info {
    --color-fill-high: var(--sd-blue);
    --color-fill-low: rgba(47, 140, 255, 0.14);
    --color-content-high: #ffffff;
    --color-content-low: #A9CFFF;
    --color-accent-high: var(--sd-blue-dark);
    --color-accent-low: rgba(47, 140, 255, 0.45);
    --color-muted-high: var(--sd-blue);
    --color-muted-low: rgba(47, 140, 255, 0.14);
}

html.sammy .\~positive,
html.sammy .dark\:\~d_positive {
    --color-fill-high: var(--sd-olive);
    --color-fill-low: rgba(179, 182, 78, 0.16);
    --color-content-high: var(--sd-bg);
    --color-content-low: #D9DB8F;
    --color-accent-high: #8F9238;
    --color-accent-low: rgba(179, 182, 78, 0.5);
    --color-muted-high: var(--sd-olive);
    --color-muted-low: rgba(179, 182, 78, 0.16);
}

html.sammy .\~warning,
html.sammy .dark\:\~d_warning {
    --color-fill-high: var(--sd-gold);
    --color-fill-low: rgba(242, 178, 39, 0.14);
    --color-content-high: var(--sd-bg);
    --color-content-low: #F7CF72;
    --color-accent-high: #C98F12;
    --color-accent-low: rgba(242, 178, 39, 0.5);
    --color-muted-high: var(--sd-gold);
    --color-muted-low: rgba(242, 178, 39, 0.14);
}

html.sammy .\~critical,
html.sammy .dark\:\~d_critical {
    --color-fill-high: var(--sd-red);
    --color-fill-low: rgba(229, 83, 75, 0.15);
    --color-content-high: #ffffff;
    --color-content-low: #F4A29C;
    --color-accent-high: #C23B34;
    --color-accent-low: rgba(229, 83, 75, 0.5);
    --color-muted-high: var(--sd-red);
    --color-muted-low: rgba(229, 83, 75, 0.15);
}

/* ---------- Cards ---------- */
html.sammy .card {
    border: 1px solid var(--sd-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(3, 8, 15, 0.55);
}

html.sammy .page-container > .card,
html.sammy .modal .card {
    background-color: rgba(14, 30, 54, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* A card inside a card (the sign-up form, password rules) sits one step lighter */
html.sammy .card .card {
    background-color: rgba(22, 48, 79, 0.55);
    box-shadow: none;
}

/* ---------- Type ---------- */
html.sammy .heading {
    color: var(--sd-text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

html.sammy .page-container > .card .heading::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-top: 0.5rem;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sd-apricot), var(--sd-blue));
}

html.sammy .subheading {
    color: var(--sd-muted);
    opacity: 1;
}

html.sammy .label,
html.sammy .supra {
    color: var(--sd-muted);
    opacity: 1;
}

html.sammy .content,
html.sammy p {
    color: var(--sd-text);
}

html.sammy a:not(.button):not(.lang-link) {
    color: var(--sd-apricot);
}

/* ---------- Inputs ---------- */
html.sammy .input,
html.sammy .field,
html.sammy input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html.sammy select,
html.sammy textarea {
    background: #0A1628;
    color: var(--sd-text);
    border: 1px solid var(--sd-line);
    border-radius: 8px;
    box-shadow: none;
}

html.sammy .input::placeholder,
html.sammy input::placeholder {
    color: #6C7889;
}

html.sammy .input:focus,
html.sammy .field:focus,
html.sammy input:focus,
html.sammy select:focus,
html.sammy textarea:focus {
    outline: none;
    border-color: var(--sd-apricot);
    box-shadow: 0 0 0 1px var(--sd-apricot), 0 0 16px rgba(232, 168, 124, 0.45);
}

html.sammy input[type="checkbox"],
html.sammy input[type="radio"] {
    accent-color: var(--sd-apricot);
}

/* ---------- Buttons ---------- */
html.sammy .button {
    border-radius: 999px;
    font-weight: 700;
}

html.sammy .button.\~urge {
    background-color: var(--sd-blue);
    border-color: var(--sd-blue);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(47, 140, 255, 0.35);
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

/* Hover / keyboard focus glows apricot, like a focused tile in the Moonfin apps */
html.sammy .button.\~urge:hover:not([disabled]),
html.sammy .button.\~urge:focus-visible,
html.sammy label:focus-within > .button.\~urge {
    background-color: var(--sd-apricot);
    border-color: var(--sd-apricot);
    color: var(--sd-bg);
    filter: none;
    box-shadow: 0 0 16px rgba(232, 168, 124, 0.6), 0 0 28px rgba(47, 140, 255, 0.33);
}

html.sammy .button.\~info {
    border-color: rgba(47, 140, 255, 0.45);
}

/* The language button stays a quiet navy chip rather than a big blue pill */
html.sammy #lang-dropdown .button {
    background-color: var(--sd-surface-2);
    border-color: var(--sd-border);
    color: var(--sd-text);
    box-shadow: none;
}

/* ---------- Asides, badges, password rules ---------- */
html.sammy .aside {
    border-left-color: currentColor;
}

html.sammy #invite-from-user {
    border-left-color: var(--sd-apricot);
}

html.sammy .requirement-valid {
    border-radius: 999px;
}

/* ---------- Success pop-up and success page: Sammy says hi ---------- */
html.sammy .modal {
    background-color: rgba(3, 8, 15, 0.78);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

html.sammy #modal-success .card::before,
html.sammy body > .page-container > .card:has(#create-success-button)::before {
    content: "";
    display: block;
    width: 112px;
    height: 112px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: url("sammy-avatar.png") center / cover no-repeat;
    box-shadow: 0 0 0 3px var(--sd-blue), 0 0 28px rgba(47, 140, 255, 0.55);
}

html.sammy #modal-success .card,
html.sammy body > .page-container > .card:has(#create-success-button) {
    text-align: center;
}

html.sammy #modal-success .heading,
html.sammy body > .page-container > .card:has(#create-success-button) .heading {
    display: block;
}

html.sammy #modal-success .heading::after,
html.sammy body > .page-container > .card:has(#create-success-button) .heading::after {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Small touches ---------- */
html.sammy ::selection {
    background: rgba(232, 168, 124, 0.45);
    color: #ffffff;
}

/* My Account page: hide the light/dark switch, the Sammy look is dark only */
html.sammy #button-theme {
    display: none !important;
}

html.sammy .dropdown-display .card {
    background-color: var(--sd-surface);
}

/* ---------- Wide screens: keep the form left so sleeping Sammy stays visible ---------- */
@media screen and (min-width: 1100px) {
    html.sammy .page-container {
        max-width: 900px;
        margin-left: clamp(2rem, 7vw, 9rem);
        margin-right: auto;
    }
}