/*
 * Sign-in page styling for liminalspacepsychology.com.
 *
 * SCOPE: this file dresses /vip/ — the sign-in card and nothing else. The shelf
 * that used to live at /vip/dashboard.php has moved to /resources/, which is a
 * standalone page with its own stylesheet beside it, so the tile grid, the
 * "Signed in as" box and the wide card variant have all gone from here. Style
 * the shelf in resources/assets/resources.css.
 *
 * The palette and typefaces are taken from liminalspacepsychology.com so this
 * pathway does not read as a bolted-on third-party form: Playfair Display
 * headings in #7c4bbb over Lato body text, which is what the Elementor theme
 * uses site-wide.
 *
 * Cloudflare caches this file hard — see asset.php for why every reference to
 * it carries an mtime, and why .hp-field in particular must never be served
 * stale.
 */

:root {
    --accent:        #7c4bbb;
    --accent-dark:   #63399a;
    --ink:           #2b2733;
    --muted:         #6b6577;
    --line:          #e6e0ef;
    --surface:       #faf8fc;
    --page:          #fbfafd;
    --ok-ink:        #2f5d45;
    --ok-bg:         #eef6f1;
    --ok-line:       #cfe4d8;
    --err-ink:       #8a2f3f;
    --err-bg:        #fbf0f2;
    --err-line:      #f0d5da;
    /* Sand — the "already sent, go and look" panel. Warm enough to read as
       different from the green success box at a glance, well short of the red. */
    --hold-ink:      #6b4f16;
    --hold-bg:       #fdf7ea;
    --hold-line:     #ecdcb8;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 48px 20px;
    background-color: var(--page);
    color: var(--ink);
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

.card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 40px 36px;
}

h1 {
    margin: 0 0 4px;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--accent);
    line-height: 1.25;
}

.tagline {
    margin: 0 0 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    font-size: 0.82rem;
    color: var(--muted);
    letter-spacing: 0.3px;
}

/*
 * The sign-in page names what the pathway is for, directly under the tagline,
 * and the two read as one header block — so the dividing rule belongs beneath
 * the pair rather than between them. That is why this is a modifier on .tagline
 * rather than a change to it: a card without an access label wants the tagline
 * to be the last line of the header, keeping the rule itself.
 */
.tagline-bare {
    margin-bottom: 7px;
    padding-bottom: 0;
    border-bottom: 0;
}

.access-label {
    margin: 0 0 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    color: var(--ink);
}

.subtitle { margin: 0 0 26px; color: var(--muted); font-size: 0.95rem; }

/* ------------------------------------------------------------------ form */

label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
}

input[type="email"] {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
}

input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124, 75, 187, 0.14);
}

button,
.button {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 24px;
    border: 0;
    border-radius: 5px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

button { width: 100%; }
button:hover, .button:hover { background: var(--accent-dark); }

/*
 * The wait state.
 *
 * A submit here is a database write and an SMTP round trip — seconds, not
 * milliseconds — and until this existed the page gave no sign it had heard the
 * click, so people clicked again. Each extra POST revoked the link already in
 * flight, meaning the impatient visitor was reliably sent a token and then told
 * about a different one.
 *
 * Both button labels are in the markup and this swaps which is shown, so the
 * script that adds .is-sending never has to hold the wording.
 */
.btn-sending { display: none; }

button.is-sending .btn-idle { display: none; }

button.is-sending .btn-sending {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Not [disabled] alone: the browser's own disabled styling is a grey, finished
   -looking button, and this one is working. Keep the accent, take the hover. */
button[disabled] { cursor: default; }
button[disabled]:hover { background: var(--accent); }

.hourglass {
    display: inline-block;   /* transform does nothing to an inline box */
    width: 1em;
    height: 1em;
    animation: hourglass-tumble 2.4s ease-in-out infinite;
}

.hourglass svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* Held upright, flipped, held, flipped back — a spinner reads as "something is
   turning", an hourglass that tumbles reads as "time is passing", which is the
   honest description of waiting on a mail relay. */
@keyframes hourglass-tumble {
    0%, 38%  { transform: rotate(0deg); }
    50%, 88% { transform: rotate(180deg); }
    100%     { transform: rotate(360deg); }
}

/* Vestibular triggers aside, the icon alone still says "waiting" — so this
   stops the tumble rather than dropping the hourglass. */
@media (prefers-reduced-motion: reduce) {
    .hourglass { animation: none; }
}

.form-status {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Rendered empty so a screen reader has the live region ahead of the text
   landing in it. Empty, it should take up no room. */
.form-status:empty { display: none; }

/*
 * The honeypot.
 *
 * Moved off-screen rather than display:none or visibility:hidden, both of which
 * a bot can read straight off the element and skip. Kept focusable-but-unreachable
 * so no assistive technology announces it — see the comment in login_form.php.
 *
 * If this rule ever fails to load, the field becomes a visible text box that a
 * real person may fill in, and index.php will silently treat them as a bot.
 * That is why the stylesheet URL is versioned.
 */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

/* ---------------------------------------------------------------- alerts */

.alert {
    padding: 16px 18px;
    margin-bottom: 22px;
    border: 1px solid;
    border-radius: 5px;
    font-size: 0.92rem;
}

.alert p { margin: 6px 0 0; }
.alert strong { font-size: 0.95rem; }

.alert-success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.alert-error   { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }

.alert-note { font-size: 0.85rem; font-style: italic; opacity: 0.85; }

/*
 * "Link-resent — check your junk folder", above the success heading.
 *
 * Sits inside the green success box rather than beside it: nothing has gone
 * wrong, and a warning-coloured band would read as one. It earns its weight
 * from the rule beneath it and from being bold, because the person seeing it
 * has already read this box once and will otherwise skim straight past.
 */
/* Qualified with .alert so it outweighs `.alert p` above, which would otherwise
   win on specificity and put the margin back on the wrong side. */
.alert .alert-resent {
    margin: 0 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--ok-line);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/*
 * "Link already sent, check your Junk" — the fourth request inside the window,
 * which index.php refuses without sending anything.
 *
 * Sand rather than green, and deliberately not the error red. Nothing has gone
 * wrong and the person is not being told off, so red would be a lie in one
 * direction — but green would be a lie in the other, because the box that says
 * "sent" has now appeared three times and a fourth identical one reads as a
 * fourth email on its way. Someone pressing the button again is doing it
 * because they cannot find the mail; the colour changing under them is most of
 * what says this time is not the same.
 */
.alert-held { background: var(--hold-bg); border-color: var(--hold-line); color: var(--hold-ink); }

/* Local development only — never rendered by a public request. Loud on purpose:
   this box contains a working sign-in credential. */
.alert-dev {
    background: #fff8e1;
    border-color: #f0dca4;
    color: #6b5518;
}

.alert-dev code {
    display: block;
    margin-top: 10px;
    padding: 10px;
    background: #fffdf6;
    border: 1px dashed #e2cf9a;
    border-radius: 4px;
    font-size: 0.72rem;
    word-break: break-all;
}

/* ----------------------------------------------------------------- footer */

.footer-link {
    display: flex;
    gap: 22px;
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
}

.footer-link a { color: var(--accent); text-decoration: none; }
.footer-link a:hover { text-decoration: underline; }

@media (max-width: 520px) {
    body { padding: 24px 14px; }
    .card { padding: 30px 22px; }
}