/* ============================================================================
   Family Photo Archive — Sign-In Page Styles
   photoarchive.family

   Design system (from Master Spec §2):
     Headings  : Playfair Display
     Body      : Roboto
     Primary   : #5C7A5C  Muted Sage Green
     Secondary : #7A8C6E  Dusty Olive
     Accent    : #B5956A  Muted Warm Gold
     Background : #F2EDE4  Warm Cream
     Surface    : #FAFAF8  Soft White
     Text       : #333330 / #6B6B63
     Border     : #D9D2C5  Light Taupe

   Layout: two columns on wide screens (brand rail + form panel); the rail
   collapses on narrow screens so mobile gets a clean single-column form.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
    --color-primary:    #5C7A5C;
    --color-secondary:  #7A8C6E;
    --color-accent:     #B5956A;
    --color-bg:         #F2EDE4;
    --color-surface:    #FAFAF8;
    --color-text:       #333330;
    --color-text-soft:  #6B6B63;
    --color-border:     #D9D2C5;

    --color-error:      #9A4A3C;  /* muted brick — fits the warm palette */
    --color-error-bg:   #F4E5E1;
    --color-locked-bg:  #EFE7D6;  /* warm sand for the lockout notice */

    --radius:     6px;
    --radius-lg:  10px;
    --shadow:     0 1px 2px rgba(51, 51, 48, 0.05),
                  0 8px 24px rgba(51, 51, 48, 0.08);

    --font-head:  'Playfair Display', Georgia, serif;
    --font-body:  'Roboto', system-ui, -apple-system, sans-serif;
}

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

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    /* Subtle paper grain via layered gradients — no image file needed. */
    background-image:
        radial-gradient(circle at 18% 22%, rgba(181, 149, 106, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 82% 78%, rgba(92, 122, 92, 0.06) 0%, transparent 45%);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-secondary); }

/* ---- Page shell --------------------------------------------------------- */
.signin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* ---- Brand rail (left) -------------------------------------------------- */
.signin__rail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        linear-gradient(160deg, var(--color-primary) 0%, #4A6249 100%);
    color: var(--color-surface);
}

/* Faint film-strip / archival texture over the rail. */
.signin__rail::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(250, 250, 248, 0.05) 0px,
            rgba(250, 250, 248, 0.05) 2px,
            transparent 2px,
            transparent 26px
        );
    opacity: 0.5;
}

.signin__rail-inner {
    position: relative;
    text-align: left;
    padding: 2rem;
}

.signin__rail-mark,
.signin__rail-foot {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 250, 248, 0.7);
}

.signin__rail-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(2.6rem, 4.5vw, 4rem);
    line-height: 1.04;
    margin: 1.1rem 0;
    color: var(--color-surface);
}

/* Thin gold underline accent beneath the wordmark. */
.signin__rail-foot {
    padding-top: 0.85rem;
    border-top: 1px solid rgba(181, 149, 106, 0.6);
    display: inline-block;
}

/* ---- Form panel (right) ------------------------------------------------- */
.signin__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.signin__card {
    width: 100%;
    max-width: 400px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.5rem;
}

/* ---- Card header -------------------------------------------------------- */
.signin__head { margin-bottom: 1.75rem; }

.signin__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
}

.signin__title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.1;
    margin: 0 0 0.4rem;
    color: var(--color-text);
}

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

/* ---- Alerts ------------------------------------------------------------- */
.signin__alert {
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.signin__alert strong { display: block; margin-bottom: 0.2rem; }

.signin__alert--error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid rgba(154, 74, 60, 0.25);
}

.signin__alert--locked {
    background-color: var(--color-locked-bg);
    color: #6E5836;
    border: 1px solid rgba(181, 149, 106, 0.4);
}

/* ---- Attempts-remaining warning ----------------------------------------- */
.signin__attempts {
    margin: 0 0 1.25rem;
    font-size: 0.85rem;
    color: var(--color-text-soft);
    padding-left: 0.85rem;
    border-left: 3px solid var(--color-accent);
}

.signin__attempts--urgent {
    color: var(--color-error);
    border-left-color: var(--color-error);
    font-weight: 500;
}

/* ---- Form fields -------------------------------------------------------- */
.signin__form { margin: 0; }

.signin__field { margin-bottom: 1.1rem; }

.signin__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text);
}

.signin__input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.signin__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(92, 122, 92, 0.15);
}

/* Password field + reveal toggle live in a relative wrapper. */
.signin__password-wrap { position: relative; }

.signin__password-wrap .signin__input { padding-right: 3.75rem; }

.signin__reveal {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem 0.4rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    border-radius: 4px;
}

.signin__reveal:hover { color: var(--color-secondary); }
.signin__reveal:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ---- Remember-me / forgot row ------------------------------------------- */
.signin__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 0 1.5rem;
    flex-wrap: wrap;
}

.signin__remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-soft);
    cursor: pointer;
    user-select: none;
}

.signin__remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.signin__forgot {
    font-size: 0.85rem;
    text-decoration: none;
}
.signin__forgot:hover { text-decoration: underline; }

/* ---- Buttons ------------------------------------------------------------ */
.signin__btn {
    display: block;
    width: 100%;
    padding: 0.8rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.signin__btn--primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.signin__btn--primary:hover { background-color: #4D684D; }
.signin__btn--primary:active { transform: translateY(1px); }

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

/* ---- Switch links (redeem / back) --------------------------------------- */
.signin__switch {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.88rem;
    color: var(--color-text-soft);
}

.signin__switch a { font-weight: 500; text-decoration: none; }
.signin__switch a:hover { text-decoration: underline; }

/* ---- Footer links ------------------------------------------------------- */
.signin__foot {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--color-text-soft);
}

.signin__foot a {
    color: var(--color-text-soft);
    text-decoration: none;
}
.signin__foot a:hover { color: var(--color-primary); }

/* ---- Responsive: collapse the rail on narrow screens -------------------- */
@media (max-width: 768px) {
    .signin {
        grid-template-columns: 1fr;
    }

    /* On mobile the rail becomes a slim banner above the form. */
    .signin__rail {
        min-height: 180px;
    }

    .signin__rail-title {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }
}

@media (max-width: 420px) {
    .signin__card { padding: 1.75rem 1.5rem; }
}

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