/*
 * Guest layout — a plain white card on a green field.
 *
 * Deliberately minimal. This file replaced the scaffold's "blueprint" treatment
 * (drafting-grid page background, monospace "// eyebrow" labels, corner
 * registration ticks, an amber measurement underline under every h1), which was
 * art direction inherited from an unrelated product.
 *
 * The rule that survives from that correction, and it is the important one: THE
 * CARD STAYS PLAIN. This layout is also the invitation, unsubscribe and error
 * pages, which share none of the auth vocabulary, so the form furniture comes
 * from base.css unchanged and everything decorative lives on the FIELD behind
 * the card. Anything drawn on .guest-card is drawn on those pages too.
 *
 * What the field gained is the marketing site's beam — the mark's own bar,
 * staggered down and left, faint against the gradient. Same motif as the apex so
 * "Create an account" does not land somewhere that looks like another company;
 * see the note at the top of marketing.css for where it comes from.
 *
 * Loaded after base.css, which supplies the guest card, the auth-form controls,
 * the card heading, and the --brand tokens. This layout does NOT load app.css;
 * anything a logged-out visitor needs belongs in base.css.
 */

body.guest-layout {
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem 1rem;
    /* Fixed so a tall card (reset-password, signup) scrolls over a steady field
       rather than dragging the gradient with it. */
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%) fixed;
}

/* ── The field ────────────────────────────────────────── */

/* Two clusters of three beams, top-right and bottom-left, so the gradient has
   something in it at any window height without either cluster reaching the card.
 *
 * Each cluster is ONE capsule plus two offset box-shadows of itself, which is
 * the mark's geometry for free: same shape, stepping left and down, fading as it
 * goes. Three elements would need markup, and this layout's markup is shared
 * with pages that should not have to carry it.
 *
 * z-index: -1 rather than 0. These are fixed, so they are positioned; a
 * positioned sibling at z-index 0 paints ABOVE the unpositioned .guest-card no
 * matter what the DOM order is, and the first thing anyone would have seen is a
 * white bar over the login form. Negative puts them between the canvas and the
 * content, which is where a background belongs. */
body.guest-layout::before,
body.guest-layout::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 340px;
    height: 88px;
    border-radius: 999px;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.10);
    box-shadow:
        -56px 128px 0 rgba(255, 255, 255, 0.07),
        -112px 256px 0 rgba(255, 255, 255, 0.045);
}
/* Both clusters step the same way — left and down, lightest first. Flipping the
   second one to point back at the first would be tidier as a composition and
   wrong as a reference: the mark descends in one direction, and half of it
   running the other way is the kind of detail nobody names and everybody feels. */
body.guest-layout::before { top: -3rem; right: -5rem; }
body.guest-layout::after  { top: 26rem; left: -4rem; }

/* Below the card's own breakpoint there is no room either side of it, and a beam
   crossing behind a form is noise rather than depth. */
@media (max-width: 720px) {
    body.guest-layout::before,
    body.guest-layout::after { display: none; }
}

/* ── Brand header ─────────────────────────────────────── */

/* On the green field now, so the wordmark inverts. At 1.35rem/700 it is "large
   text" for WCAG, and white on the gradient's lightest point (#059669) is
   3.77:1 — past the 3:1 large-text AA threshold. Do not reuse this white at
   body size. */
.guest-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    text-decoration: none;
}
.guest-brand:hover { color: #fff; }
/* The mark sits on a white chip HERE and nowhere else.
   Its tile is --brand (#059669), which is also the lightest stop of the gradient behind it, so on
   this one surface the logo's own square disappears into the page and all that is left is three
   bars floating in green. The chip gives it back its edge. Padded rather than scaled, so the mark
   is the same 28px it is in the sidebar and the marketing header. */
.guest-brand-mark {
    width: 28px;
    height: 28px;
    box-sizing: content-box;
    padding: 3px;
    background: #fff;
    border-radius: 8px;
}
.guest-brand .wordmark {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── Card ─────────────────────────────────────────────── */

/* Borderless and lifted: on a saturated ground a 1px border reads as a seam,
   where a shadow reads as depth. The shadow is tinted with the field's own deep
   green so it sits in the page instead of greying it. */
.guest-card {
    border: none;
    border-radius: 12px;
    box-shadow:
        0 10px 30px rgba(6, 95, 70, 0.22),
        0 2px 6px rgba(6, 95, 70, 0.10);
}

@media (max-width: 480px) {
    .guest-card { padding: 1.75rem 1.5rem; }
}

/* ── 404 ──────────────────────────────────────────────── */

/* views/errors/404.php. The drawing is content inside the card, not decoration
   on it: it belongs to this page alone, so the plain-card rule above still holds
   for every other page that shares the layout. */
.guest-404 { text-align: center; }
.guest-404-art { max-width: 116px; margin: 0.5rem auto 1.75rem; }
.guest-404 h1 { text-wrap: balance; }
.guest-404 p { margin: 0 0 1.5rem; color: var(--ink-muted); text-wrap: pretty; }
.guest-404-go { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 44px; padding-inline: 1.25rem; }
.guest-404-go svg { width: 1.05em; height: 1.05em; }