/*
 * portal-login.css — unified premium design system for Wasatch Cleaners
 * portal logins (admin / customer / staff).
 *
 * Direction: editorial luxury / Aman + Aesop hospitality. Generous whitespace,
 * paper texture, Cormorant Garamond as the star, sage spine.
 *
 * Identical skeleton for all 3 portals — typography, spacing, motion, surface
 * treatment, hairline ornaments, frosted form card. Each portal sets ONE
 * attribute on <body> to swap its own accent tone, motif, and dawn-glow:
 *
 *   data-portal="admin"     -> nocturnal evergreen, champagne accent, formal
 *   data-portal="customer"  -> warm cream-over-sage, bronze accent, hospitable
 *   data-portal="staff"     -> vivid sage + peach sunrise, amber accent, outdoor
 *
 * Loaded AFTER /css/tailwind.css so cascade specificity wins. We avoid
 * !important except where Tailwind utility classes would otherwise leak in
 * via existing markup (legacy bg-* utilities on portal-body).
 */

/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
    /* Sage spine */
    --sage-50:  #F2F4ED;
    --sage-100: #E3E8DA;
    --sage-200: #C7D1B5;
    --sage-300: #A7B594;
    --sage-400: #859673;
    --sage-500: #5E7259;
    --sage-600: #556855;
    --sage-700: #445344;
    --sage-800: #384438;
    --sage-900: #2F3830;
    --sage-950: #1A201B;

    /* Warm cream */
    --cream-50:  #FBFAF6;
    --cream-100: #F5F0E8;
    --cream-200: #E8DFD0;
    --cream-300: #D3C5AE;
    --cream-400: #B39C7B;
    --cream-500: #8E7A5C;
    --cream-900: #1F1812;

    /* Editorial metallics */
    --gold-300: #E2C9A4;
    --gold-400: #D2B48C;
    --gold-500: #C4A882;
    --gold-600: #A88B5E;
    --bronze:   #B88859;
    --amber:    #E4A961;
    --champagne:#D8C49C;

    /* Per-portal accent — swapped per data-portal */
    --accent:        var(--gold-400);
    --accent-soft:   rgba(212,180,140,0.18);
    --accent-glow:   rgba(212,180,140,0.45);

    /* Type scale */
    --type-display: clamp(48px, 7vw, 96px);
    --type-h1:      clamp(28px, 3.6vw, 40px);
    --type-h2:      clamp(22px, 2.4vw, 28px);
    --type-body:    16px;
    --type-small:   13px;
    --type-eyebrow: 11px;

    /* Motion */
    --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);

    /* Surfaces */
    --radius-card: 28px;
    --radius-inner: 22px;
    --radius-pill: 999px;
    --shadow-card:
        0 1px 0 0 rgba(255,255,255,0.65) inset,
        0 30px 90px -28px rgba(20,28,22,0.22),
        0 10px 28px -10px rgba(20,28,22,0.10);
    --shadow-soft: 0 30px 80px -20px rgba(20, 28, 22, 0.18),
                   0 8px 24px -8px rgba(20, 28, 22, 0.10);
}

[data-portal="admin"]    { --accent: var(--champagne); --accent-soft: rgba(216,196,156,0.20); --accent-glow: rgba(216,196,156,0.5); }
[data-portal="customer"] { --accent: var(--bronze);    --accent-soft: rgba(184,136,89,0.18);  --accent-glow: rgba(184,136,89,0.45); }
[data-portal="staff"]    { --accent: var(--amber);     --accent-soft: rgba(228,169,97,0.22);  --accent-glow: rgba(228,169,97,0.50); }

/* =========================================================================
   Base / reset
   ========================================================================= */
.portal-body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--sage-900);
    background: var(--cream-50);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.serif {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 300;
    letter-spacing: -0.02em;
}

/* =========================================================================
   Shell — asymmetric editorial split, identical across portals
   ========================================================================= */
.portal-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
}

@media (min-width: 1024px) {
    .portal-shell {
        grid-template-columns: 1.12fr 1fr;
    }
}

/* Gold hairline seam between panes — only on desktop, brand-side */
@media (min-width: 1024px) {
    .portal-shell::after {
        content: '';
        position: absolute;
        top: 12%;
        bottom: 12%;
        left: calc(1.12 / 2.12 * 100%);
        width: 1px;
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(212,180,140,0.0) 6%,
            rgba(212,180,140,0.55) 50%,
            rgba(212,180,140,0.0) 94%,
            transparent 100%);
        pointer-events: none;
        z-index: 5;
        opacity: 0.7;
    }
}

.portal-brand,
.portal-form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}

@media (min-width: 1024px) {
    .portal-brand { padding: 84px 76px; }
    .portal-form  { padding: 88px 64px; }
}

/* ---- Brand pane — desktop only --------------------------------------- */
.portal-brand {
    display: none;
    overflow: hidden;
    color: var(--cream-50);
    isolation: isolate;
}
@media (min-width: 1024px) {
    .portal-brand { display: flex; }
}

/* ---- Form pane — paper-textured cream surface ----------------------- */
.portal-form {
    background: var(--cream-50);
    isolation: isolate;
}
.portal-form::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(212,180,140,0.06) 0%, transparent 38%),
        radial-gradient(circle at 88% 92%, rgba(107,128,104,0.05) 0%, transparent 42%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.44 0 0 0 0 0.32 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: auto, auto, 260px 260px;
    pointer-events: none;
    z-index: 0;
}
.portal-form > * { position: relative; z-index: 1; }

/* =========================================================================
   Brand-pane composition — shared scaffolding
   ========================================================================= */
.brand-stage {
    position: relative;
    z-index: 2;
    isolation: isolate;
    max-width: 560px;
    width: 100%;
}

.brand-stage .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 56px;
}
.brand-stage .wordmark img {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.92);
    padding: 6px;
}
.brand-stage .wordmark .name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.brand-stage .wordmark .name small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.62;
    margin-top: 2px;
}

.brand-stage .eyebrow {
    font-size: var(--type-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-weight: 600;
    opacity: 0.72;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-stage .eyebrow::before {
    content: '';
    width: 32px; height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.brand-stage .display {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: var(--type-display);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 0;
}
.brand-stage .display em {
    font-style: italic;
    color: var(--accent);
    font-weight: 300;
}

.brand-stage .lede {
    margin-top: 28px;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.7;
    color: inherit;
    opacity: 0.78;
}

/* Editorial divider — thin accent line with serif ornament */
.brand-divider {
    margin: 56px 0;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--accent);
    opacity: 0.78;
}
.brand-divider::before,
.brand-divider::after {
    content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.4;
}
.brand-divider span {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.04em;
}

.brand-meta {
    display: flex;
    gap: 40px;
    margin-top: 8px;
}
.brand-meta dt {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.01em;
}
.brand-meta dt small {
    font-size: 16px;
    color: var(--accent);
    margin-left: 2px;
    opacity: 0.85;
}
.brand-meta dd {
    margin: 6px 0 0;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.62;
    font-weight: 600;
}

/* Brand pane film grain — overlay shared by all 3 portals */
.portal-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    opacity: 0.38;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 1;
}

/* =========================================================================
   Portal accents — the only place the 3 portals diverge.
   Each gets: a base material gradient + an animated atmosphere layer
   (::before on .portal-brand) + an art-directed motif (::before on
   .brand-stage) + an italic accent color on .display em.
   ========================================================================= */

/* Shared motif container behind the display headline */
.brand-stage::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -120px;
    width: 540px;
    height: 540px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
    animation: motif-drift 26s ease-in-out infinite alternate;
}
@keyframes motif-drift {
    0%   { transform: translate3d(0,0,0) rotate(0deg); }
    100% { transform: translate3d(18px,-12px,0) rotate(3deg); }
}

/* --- ADMIN: nocturnal evergreen, champagne laurel, gold dust ----------- */
[data-portal="admin"] .portal-brand {
    background:
        radial-gradient(circle at 14% 8%, rgba(216,196,156,0.14) 0%, transparent 36%),
        radial-gradient(circle at 92% 92%, rgba(8,12,9,0.66) 0%, transparent 52%),
        radial-gradient(ellipse at 50% 110%, rgba(216,196,156,0.05) 0%, transparent 48%),
        linear-gradient(162deg, var(--sage-900) 0%, var(--sage-950) 58%, #0D110B 100%);
}
[data-portal="admin"] .brand-stage::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23D8C49C' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M30 170 C 70 140, 110 90, 160 30'/%3E%3Cpath d='M50 150 q 8 -16 22 -14'/%3E%3Cpath d='M68 132 q 10 -16 26 -16'/%3E%3Cpath d='M86 114 q 12 -16 28 -16'/%3E%3Cpath d='M104 96 q 14 -16 30 -14'/%3E%3Cpath d='M122 78 q 14 -16 28 -10'/%3E%3C/svg%3E");
    opacity: 0.22;
}
/* Champagne dust motes drifting upward — pure CSS */
[data-portal="admin"] .portal-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at 22% 78%, rgba(216,196,156,0.55), transparent 60%),
        radial-gradient(1.5px 1.5px at 58% 42%, rgba(216,196,156,0.40), transparent 60%),
        radial-gradient(1px 1px at 80% 86%, rgba(216,196,156,0.35), transparent 60%),
        radial-gradient(1.2px 1.2px at 38% 18%, rgba(216,196,156,0.50), transparent 60%),
        radial-gradient(1px 1px at 70% 28%, rgba(216,196,156,0.30), transparent 60%),
        radial-gradient(1.4px 1.4px at 12% 54%, rgba(216,196,156,0.45), transparent 60%),
        radial-gradient(1px 1px at 92% 62%, rgba(216,196,156,0.40), transparent 60%);
    background-size: 320px 480px;
    animation: dust-rise 28s linear infinite;
    opacity: 0.72;
}
@keyframes dust-rise {
    0%   { background-position: 0 0, 40px 30px, -20px 60px, 80px 10px, -40px 90px, 50px -10px, -10px 50px; }
    100% { background-position: 0 -480px, 40px -450px, -20px -420px, 80px -470px, -40px -390px, 50px -490px, -10px -430px; }
}

/* --- CUSTOMER: dawn hospitality, bronze steam, light shaft ------------- */
[data-portal="customer"] .portal-brand {
    background:
        linear-gradient(118deg, rgba(245,240,232,0.30) 0%, rgba(245,240,232,0.06) 22%, transparent 38%),
        radial-gradient(ellipse at 22% 18%, rgba(232,223,208,0.22) 0%, transparent 44%),
        radial-gradient(circle at 88% 90%, rgba(15,20,16,0.5) 0%, transparent 55%),
        radial-gradient(ellipse at 60% 108%, rgba(184,136,89,0.14) 0%, transparent 50%),
        linear-gradient(168deg, #4A5746 0%, var(--sage-800) 45%, var(--sage-950) 100%);
    color: var(--cream-50);
}
[data-portal="customer"] .portal-brand::before {
    /* Diagonal cream beam — sweeps once on load then settles */
    content: '';
    position: absolute;
    top: -20%; left: 8%;
    width: 240px; height: 160%;
    background: linear-gradient(180deg, transparent 0%, rgba(245,240,232,0.10) 30%, rgba(245,240,232,0.18) 50%, rgba(245,240,232,0.06) 70%, transparent 100%);
    transform: rotate(-18deg);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
    animation: beam-settle 2.4s var(--ease-soft) 0.3s both;
}
@keyframes beam-settle {
    0%   { opacity: 0; transform: rotate(-18deg) translateX(-80px); }
    60%  { opacity: 1.1; }
    100% { opacity: 0.85; transform: rotate(-18deg) translateX(0); }
}
[data-portal="customer"] .brand-stage::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23E8DFD0' stroke-width='0.7' stroke-linecap='round'%3E%3Cpath d='M70 180 q -10 -30 4 -56 q 14 -26 -2 -54 q -16 -28 6 -50'/%3E%3Cpath d='M100 180 q 8 -28 -4 -54 q -12 -26 6 -54 q 18 -28 -4 -52'/%3E%3Cpath d='M130 180 q -8 -32 8 -58 q 16 -26 -2 -52 q -18 -26 4 -48'/%3E%3C/svg%3E");
    opacity: 0.28;
    left: -60px;
    top: 40px;
}

/* --- STAFF: morning sage, amber sunrise, sunburst ---------------------- */
[data-portal="staff"] .portal-brand {
    background:
        radial-gradient(circle at 88% -8%, rgba(255,200,150,0.24) 0%, transparent 38%),
        radial-gradient(circle at 82% -6%, rgba(228,169,97,0.22) 0%, transparent 44%),
        linear-gradient(180deg, transparent 0%, transparent 24%, rgba(228,169,97,0.06) 32%, transparent 40%),
        radial-gradient(ellipse at 0% 100%, rgba(15,20,16,0.38) 0%, transparent 55%),
        linear-gradient(150deg, #7A9275 0%, #5E7559 38%, var(--sage-800) 78%, var(--sage-950) 100%);
}
[data-portal="staff"] .portal-brand::before {
    /* Sunburst halo, slow breath */
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,210,160,0.20) 0%, rgba(228,169,97,0.12) 30%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: sunburst-breath 12s ease-in-out infinite alternate;
}
@keyframes sunburst-breath {
    0%   { transform: scale(1); opacity: 0.85; }
    100% { transform: scale(1.08); opacity: 1; }
}
[data-portal="staff"] .brand-stage::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23F2F4ED' stroke-width='0.6' stroke-linecap='round'%3E%3Cg transform='translate(160 40)'%3E%3Cline x1='0' y1='0' x2='-140' y2='30'/%3E%3Cline x1='0' y1='0' x2='-138' y2='50'/%3E%3Cline x1='0' y1='0' x2='-130' y2='72'/%3E%3Cline x1='0' y1='0' x2='-118' y2='94'/%3E%3Cline x1='0' y1='0' x2='-100' y2='114'/%3E%3Cline x1='0' y1='0' x2='-78' y2='130'/%3E%3Cline x1='0' y1='0' x2='-52' y2='142'/%3E%3Cline x1='0' y1='0' x2='-24' y2='148'/%3E%3Ccircle cx='0' cy='0' r='28' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.24;
    left: auto;
    right: -120px;
    top: -60px;
}

/* =========================================================================
   Hairline corner ornaments — gold marks at brand-pane corners
   ========================================================================= */
.corner {
    position: absolute;
    width: 80px; height: 80px;
    color: var(--accent);
    opacity: 0.5;
    z-index: 3;
    pointer-events: none;
}
.corner svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1; }
.corner.tl { top: 28px; left: 28px; }
.corner.br { bottom: 28px; right: 28px; transform: rotate(180deg); }

@media (max-width: 1023px) {
    .corner { display: none; }
}

/* =========================================================================
   Form card — frosted glass surface, hairline border, gold seal
   ========================================================================= */
.portal-card {
    width: 100%;
    max-width: 480px;
    position: relative;
    padding: 44px 40px 36px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.78) 0%,
            rgba(255,255,255,0.62) 100%);
    border: 1px solid rgba(184,156,123,0.18);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* Hairline gold inner-rim glow — sits inside the rounded border */
.portal-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius-card) - 1px);
    background: linear-gradient(135deg,
        rgba(212,180,140,0.10) 0%,
        transparent 35%,
        transparent 65%,
        rgba(107,128,104,0.07) 100%);
    pointer-events: none;
    z-index: 0;
}
.portal-card > * { position: relative; z-index: 1; }

/* Corner seal — small accent dot top-right of the card */
.portal-card::after {
    content: '';
    position: absolute;
    top: 22px;
    right: 22px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    opacity: 0.85;
    z-index: 2;
}

@media (max-width: 640px) {
    .portal-card {
        padding: 32px 24px 28px;
        max-width: 100%;
    }
    .portal-card::after { top: 16px; right: 16px; }
}

/* Card eyebrow + headline */
.portal-card .form-eyebrow {
    font-size: var(--type-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-weight: 600;
    color: var(--sage-600);
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 12px;
}
.portal-card .form-eyebrow::before {
    content: ''; width: 28px; height: 1px; background: var(--accent);
}

.portal-card h1.form-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: var(--type-h1);
    color: var(--sage-900);
    line-height: 1.05;
    margin: 0 0 12px;
    letter-spacing: -0.025em;
}

.portal-card .form-sub {
    color: var(--sage-700);
    opacity: 0.80;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 36px;
    max-width: 380px;
}

/* Mobile brand strip — sage glass over cream */
.portal-card .mobile-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: -8px 0 28px;
    background: linear-gradient(135deg,
        rgba(56,68,56,0.94) 0%,
        rgba(31,40,32,0.97) 100%);
    color: var(--cream-50);
    border-radius: 18px;
    border: 1px solid var(--accent-soft);
    box-shadow:
        0 12px 32px -12px rgba(20,28,22,0.32),
        inset 0 1px 0 0 rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.portal-card .mobile-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-soft) 50%,
        transparent 100%);
    pointer-events: none;
}
.portal-card .mobile-brand img {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--cream-50);
    padding: 4px;
    position: relative;
    z-index: 1;
}
.portal-card .mobile-brand .name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    line-height: 1;
}
.portal-card .mobile-brand .name small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 4px;
}

@media (min-width: 1024px) {
    .portal-card .mobile-brand { display: none; }
}

/* =========================================================================
   Inputs — ink on paper, animated accent underline
   ========================================================================= */
.portal-card .field {
    position: relative;
    margin-bottom: 26px;
}
.portal-card .field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--sage-600);
    margin-bottom: 10px;
    position: relative;
}
/* Ink-bleed focus dot — single accent pinpoint left of label */
.portal-card .field label::after {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%) scale(0);
    transition: transform 320ms var(--ease-soft);
    box-shadow: 0 0 8px var(--accent-glow);
}
.portal-card .field:focus-within label::after {
    transform: translateY(-50%) scale(1);
}

.portal-card .field input,
.portal-card .field select {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--sage-200);
    padding: 10px 0 12px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--sage-900);
    transition: border-color 220ms var(--ease-soft);
    border-radius: 0;
}
.portal-card .field input::placeholder {
    color: var(--sage-300);
}
.portal-card .field input:hover {
    border-bottom-color: var(--sage-400);
}
.portal-card .field input:focus {
    outline: none;
    border-bottom-color: var(--sage-700);
}
/* Suppress -webkit-autofill yellow/lavender wash so saved-creds inputs
   keep the cream-on-paper surface. The 5000s transition + box-shadow
   trick is the canonical Chrome/Safari workaround. */
.portal-card .field input:-webkit-autofill,
.portal-card .field input:-webkit-autofill:hover,
.portal-card .field input:-webkit-autofill:focus,
.portal-card .field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--cream-50) inset !important;
    -webkit-text-fill-color: var(--sage-900) !important;
    caret-color: var(--sage-900);
    transition: background-color 5000s ease-in-out 0s;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
}
/* Animated accent underline drawn from left on focus */
.portal-card .field::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), var(--accent));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 420ms var(--ease-soft);
    pointer-events: none;
}
.portal-card .field:focus-within::after {
    transform: scaleX(1);
}

.portal-card .field .pw-toggle {
    position: absolute;
    right: 0; top: 30px;
    background: transparent;
    border: 0;
    color: var(--sage-400);
    cursor: pointer;
    padding: 4px;
    transition: color 200ms var(--ease-soft);
}
.portal-card .field .pw-toggle:hover { color: var(--sage-700); }
.portal-card .field .pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* =========================================================================
   Buttons — pill, deep sage, per-portal accent sweep
   ========================================================================= */
.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 32px;
    background: var(--sage-900);
    color: var(--cream-50);
    border: 0;
    border-radius: var(--radius-pill);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 300ms var(--ease-soft),
                background 300ms var(--ease-soft),
                box-shadow 300ms var(--ease-soft);
    box-shadow:
        0 12px 28px -10px rgba(20,28,22,0.32),
        inset 0 0 0 1px rgba(255,255,255,0.04);
}
.portal-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, var(--accent-soft) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 700ms var(--ease-soft);
}
.portal-btn:hover {
    background: var(--sage-800);
    transform: translateY(-1px);
    box-shadow:
        0 22px 42px -12px rgba(20, 28, 22, 0.42),
        inset 0 0 0 1px var(--accent-soft);
}
.portal-btn:hover::before { transform: translateX(100%); }
.portal-btn:active { transform: translateY(0); }
.portal-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.portal-btn .arrow {
    width: 16px; height: 16px;
    transition: transform 300ms var(--ease-soft);
}
.portal-btn:hover .arrow { transform: translateX(4px); }

/* Secondary text link */
.portal-link {
    color: var(--sage-700);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--sage-200);
    transition: border-color 200ms var(--ease-soft), color 200ms var(--ease-soft);
}
.portal-link:hover {
    color: var(--sage-900);
    border-bottom-color: var(--accent);
}

/* =========================================================================
   Status / alert pills
   ========================================================================= */
.portal-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 26px;
}
.portal-alert.error   { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.portal-alert.success { background: #F0FAF4; border: 1px solid #BBE5C8; color: #166534; }
.portal-alert.info    { background: var(--sage-50); border: 1px solid var(--sage-200); color: var(--sage-800); }
.portal-alert .icon { flex-shrink: 0; margin-top: 1px; }

/* =========================================================================
   Card footer
   ========================================================================= */
.portal-foot {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(184,156,123,0.16);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--sage-500);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.portal-foot a { color: var(--sage-700); }

/* =========================================================================
   Motion — staggered reveal
   ========================================================================= */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: reveal 900ms var(--ease-soft) forwards;
}
.reveal[data-delay="1"] { animation-delay: 80ms; }
.reveal[data-delay="2"] { animation-delay: 160ms; }
.reveal[data-delay="3"] { animation-delay: 240ms; }
.reveal[data-delay="4"] { animation-delay: 320ms; }
.reveal[data-delay="5"] { animation-delay: 400ms; }
.reveal[data-delay="6"] { animation-delay: 480ms; }
.reveal[data-delay="7"] { animation-delay: 560ms; }
.reveal[data-delay="8"] { animation-delay: 640ms; }
@keyframes reveal {
    to { opacity: 1; transform: translateY(0); }
}

.shake { animation: shake 0.5s ease-in-out; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .brand-stage::before,
    .portal-brand::before { animation: none !important; }
    .reveal { animation: none !important; opacity: 1; transform: none; }
}

/* =========================================================================
   2FA code input (admin)
   ========================================================================= */
.code-input {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px !important;
    letter-spacing: 16px !important;
    text-align: center;
    border-bottom: 1px solid var(--sage-200) !important;
    padding-left: 12px !important;
}

/* =========================================================================
   PIN dots (staff)
   ========================================================================= */
.pin-input {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 40px !important;
    letter-spacing: 22px !important;
    padding-left: 20px !important;
    text-align: center !important;
    -webkit-text-security: disc;
    background: transparent !important;
}

/* Mobile/touch fallback: never let the reveal animation leave the login or 2FA
   form hidden (opacity:0) on mobile Safari. Forms must always be interactive. */
@media (max-width: 900px), (pointer: coarse) {
    .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* 20 Sep 2026: on the admin (nocturnal) pane the headline and eyebrow inherited the
   page ink colour and vanished into the dark. Give the brand stage explicit light ink. */
[data-portal="admin"] .brand-stage .display,
[data-portal="admin"] .brand-stage .eyebrow,
[data-portal="admin"] .brand-stage .lede,
[data-portal="admin"] .brand-stage .wordmark,
[data-portal="admin"] .brand-stage .brand-meta dt { color: var(--cream-100); }
[data-portal="admin"] .brand-stage .display em { color: var(--accent); }