/* Sign-in and sign-up pages. Same palette and fonts as the dashboard (src/theme.js): deep navy with a warm gold accent */
:root {
    --navy-950: #0b0f17;
    --navy-900: #111724;
    --navy-800: #182033;
    --navy-700: #222c42;
    --gold: #d4a64a;
    --gold-light: #e6c47a;
    --gold-dark: #a87f2f;
    --text: #ece7dc;
    --text-2: #a3abba;
    --text-3: #6f7889;
    --error: #e5534b;
    --line: rgba(236, 231, 220, 0.08);
    --brand-font: "Cinzel", "Trajan Pro", Georgia, serif;
    --body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--navy-950);
    color: var(--text);
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-light); text-decoration: none; }
a:hover { text-decoration: underline; }

.auth {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* ---------- Left: brand panel ---------- */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px 0;
    background:
        radial-gradient(900px 500px at 15% 10%, rgba(212, 166, 74, 0.16), transparent 60%),
        radial-gradient(700px 500px at 90% 90%, rgba(125, 155, 209, 0.10), transparent 60%),
        linear-gradient(160deg, #121a2b 0%, var(--navy-950) 70%);
    border-right: 1px solid rgba(212, 166, 74, 0.18);
}

/* Faint diamond pattern, like a banner's weave */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, rgba(236, 231, 220, 0.025) 25%, transparent 25%, transparent 75%, rgba(236, 231, 220, 0.025) 75%),
        linear-gradient(45deg, rgba(236, 231, 220, 0.025) 25%, transparent 25%, transparent 75%, rgba(236, 231, 220, 0.025) 75%);
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
    pointer-events: none;
}

.brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e2b75c, var(--gold-dark));
    color: #1a1408;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10) inset, 0 8px 24px rgba(212, 166, 74, 0.25);
}

.brand-name {
    font-family: var(--brand-font);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.04em;
}

.hero-copy {
    position: relative;
    max-width: 480px;
    margin: 56px 0 32px;
}

.eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.hero h1 {
    font-family: var(--brand-font);
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.15;
    margin: 0 0 16px;
    background: linear-gradient(180deg, #f6eedb 0%, #d9c08a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero p.lead {
    color: var(--text-2);
    font-size: 16px;
    margin: 0 0 32px;
}

.features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px;
}

.features li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.feature-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--gold-light);
    background: rgba(212, 166, 74, 0.10);
    border: 1px solid rgba(212, 166, 74, 0.22);
}

.features strong {
    display: block;
    font-weight: 600;
    color: var(--text);
}

.features span {
    color: var(--text-2);
    font-size: 13px;
}

/* Castle skyline along the bottom of the brand panel */
.skyline {
    position: relative;
    display: block;
    width: calc(100% + 112px);
    margin: 0 -56px;
    height: auto;
    color: var(--navy-900);
}

/* ---------- Right: form ---------- */
.panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 24px;
}

.card {
    width: 100%;
    max-width: 400px;
}

.card h2 {
    font-family: var(--brand-font);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
}

.card .subtitle {
    color: var(--text-2);
    margin: 0 0 28px;
}

.alert {
    display: none;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: rgba(229, 83, 75, 0.10);
    border: 1px solid rgba(229, 83, 75, 0.35);
    color: #f3b4b0;
    font-size: 13px;
}

.alert.visible { display: flex; }
.alert svg { flex: none; margin-top: 1px; color: var(--error); }

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 6px;
}

.input-wrap { position: relative; }

.input-wrap > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
}

.input-wrap input {
    width: 100%;
    height: 46px;
    padding: 0 44px 0 42px;
    border-radius: 10px;
    border: 1px solid var(--navy-700);
    background: var(--navy-900);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.input-wrap input::placeholder { color: var(--text-3); }

.input-wrap input:hover { border-color: #2f3b56; }

.input-wrap input:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--navy-800);
    box-shadow: 0 0 0 3px rgba(212, 166, 74, 0.18);
}

.input-wrap input:focus + svg,
.input-wrap:focus-within > svg { color: var(--gold); }

.input-wrap input[aria-invalid="true"] { border-color: var(--error); }

.toggle-password {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}

.toggle-password:hover { color: var(--text); background: rgba(236, 231, 220, 0.06); }
.toggle-password:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.toggle-password .icon-hide { display: none; }
.toggle-password[aria-pressed="true"] .icon-show { display: none; }
.toggle-password[aria-pressed="true"] .icon-hide { display: block; }

.hint {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 6px;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 22px;
    font-size: 13px;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.check input {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 5px;
    border: 1px solid #39465f;
    background: var(--navy-900);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.check input::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #1a1408;
    border-bottom: 2px solid #1a1408;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
}

.check input:checked { background: var(--gold); border-color: var(--gold); }
.check input:checked::after { opacity: 1; }
.check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.forgot {
    color: var(--text-3);
    font-size: 12px;
    text-align: right;
}

.btn {
    position: relative;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1a1408;
    cursor: pointer;
    background: linear-gradient(180deg, #e8c46f 0%, var(--gold) 55%, #b98c35 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px -8px rgba(212, 166, 74, 0.55);
    transition: transform 0.08s, filter 0.15s, box-shadow 0.15s;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.btn[disabled] { cursor: progress; filter: saturate(0.6) brightness(0.9); }
.btn .spinner { display: none; }
.btn[disabled] .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    border-radius: 50%;
    border: 2px solid rgba(26, 20, 8, 0.3);
    border-top-color: #1a1408;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.switch {
    text-align: center;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    color: var(--text-2);
}

.switch a { font-weight: 600; }

.legal {
    margin-top: 32px;
    text-align: center;
    font-size: 11px;
    color: var(--text-3);
}

/* ---------- Small screens: brand panel becomes a header ---------- */
@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }

    .hero {
        padding: 28px 16px 0;
        border-right: none;
        border-bottom: 1px solid rgba(212, 166, 74, 0.18);
    }

    .hero-copy { margin: 24px 0 16px; }
    .hero h1 { font-size: 26px; }
    .hero p.lead { font-size: 14px; margin-bottom: 8px; }
    .features { display: none; }
    .skyline { width: calc(100% + 32px); margin: 0 -16px; }

    .panel { padding: 32px 16px 40px; justify-content: flex-start; }
}

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

/* "Check your email" message on the sign-up and forgot-password pages, and the set-password page's states */
.notice {
    display: none;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: rgba(212, 166, 74, 0.10);
    border: 1px solid rgba(212, 166, 74, 0.30);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}
.notice.visible { display: block; }
.notice strong { color: var(--gold-light); }
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin: 0; color: var(--text-2); font-size: 13px; }
.hidden { display: none !important; }
a.forgot { color: var(--gold-light); }