/* ══════════════════════════════════════════════════════════════════════════
   CoinLobster storefront pages — the LAYOUT layer

   What this file is, after the 2026-09-04 redirect ("NO HOMEPAGE SHOULD NOT BE
   WHITE. IT SHOULD STILL BE PREVIOUS COLOUR PALETTE. IM TALKING ABOUT LAYOUT"):

   The storefront keeps the brand NAVY palette. `data-world="light"` and the
   `--lw-*` names survive as the STOREFRONT world marker, but cl-light.css now
   resolves them to the existing brand colours (navy field, cream ink, orange
   accent). What the storefront world changes is the LAYOUT: a centred hero, one
   sentence, the character large, everything else in cards.

   So this file carries geometry and structure only. It declares no colour of
   its own except where a component was genuinely unstyled before (the
   referral card's buttons on /success) or where markup this task changed needs
   an alignment it did not have. Every colour it does write is a `--lw-*` or
   `--tt-*` token, never a literal, so the palette stays in one place.

   Scope: every rule is prefixed body[data-world="light"]. On a terminal page
   this file is inert.  Prefix for anything new: .lwp-

   Load order: after cl-light.css, and after each page's own <style> block, so
   an override here wins a specificity tie against a page-local rule.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PRIMITIVES ──────────────────────────────────────────────────────────
   cl-light.css owns .lw-* (section, hero, card, data, btn, chip, stage, tag).
   These are the storefront's inner-page additions. */

/* The one-breath hero every storefront page opens with: headline, one line,
   then the character alone and large. Tighter than .lw-hero, which belongs to
   the homepage's first screen. */
body[data-world="light"] .lwp-hero {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
body[data-world="light"] .lwp-h1 {
    margin: 0;
    font-family: var(--lw-display);
    font-size: clamp(2.4rem, 5.4vw, 3.9rem);
    line-height: .98;
    letter-spacing: -.032em;
    font-weight: 800;
    color: var(--lw-ink);
    text-wrap: balance;
}
body[data-world="light"] .lwp-h1 em {          /* the accent word, never italic */
    font-style: normal;
    color: var(--lw-accent-ink);              /* the text-safe orange, not the fill */
}
body[data-world="light"] .lwp-sub {
    margin: 0;
    max-width: 58ch;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--lw-muted);
    text-wrap: pretty;
}
/* The trust line under the buttons: plain sentences, not a row of chips. */
body[data-world="light"] .lwp-trust {
    margin: 2px 0 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--lw-dim-text);
}

/* Headline with the character beside it rather than under it. Used where the
   page's first job is to explain (pricing) rather than to announce. */
body[data-world="light"] .lwp-split {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
}
body[data-world="light"] .lwp-split__say { min-width: 0; }
body[data-world="light"] .lwp-split__art { display: flex; justify-content: center; }
body[data-world="light"] .lwp-split__art .clm { max-width: 100%; }
body[data-world="light"] .lwp-split .lwp-sub { margin-top: 16px; }
@media (max-width: 860px) {
    body[data-world="light"] .lwp-split {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    body[data-world="light"] .lwp-split__art { order: -1; }
    body[data-world="light"] .lwp-split .lwp-sub { margin-inline: auto; }
}

/* ── 2. LOGIN ───────────────────────────────────────────────────────────────
   The brand panel lost its top row (the LIVE pill), its bullet list and its
   foot: it is now the character, one sentence and the live proof numbers. That
   is a centred column, where the old panel was a left-aligned stack. Colour is
   untouched: the panel keeps its own navy gradient from login.css. */
body[data-world="light"] .login-page { padding: clamp(28px, 5vw, 56px) 16px clamp(56px, 8vw, 96px); }
body[data-world="light"] .login-split { max-width: 940px; gap: 2.2rem; }
body[data-world="light"] .login-brand {
    text-align: center;
    align-items: center;
    padding: 2.4rem 2rem 2.6rem;
}
body[data-world="light"] .login-brand-art { margin-top: -.4rem; }
body[data-world="light"] .login-brand-proof { justify-content: center; }

/* ── 3. SUCCESS ─────────────────────────────────────────────────────────────
   partials/referral-invite.ejs renders here as well as on /account, but
   .account-btn is only styled inside views/api-docs.ejs, so on this page its
   two buttons fell back to the browser default. That was true in the navy
   world before this task too; it is a real defect, not a palette one. */
body[data-world="light"] .account-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--lw-r-pill);
    border: 1px solid var(--lw-border);
    background: rgba(255, 246, 234, .05);
    color: var(--lw-ink);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
body[data-world="light"] .account-btn:hover {
    border-color: var(--lw-accent);
    color: var(--lw-ink);
}
/* combined-orderbook.css owns .trading-panel and is not loaded on /success, so
   the referral card had no frame of its own. */
body[data-world="light"] .trading-panel.acct-plain {
    background: var(--lw-card);
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-r-card);
    padding: 4px;
}

/* ── 4. ONBOARDING WIZARD ───────────────────────────────────────────────────
   The wizard now opens on a large character, so its step heading and its
   controls centre under it instead of hanging left. */
body[data-world="light"] .ob-wrap { max-width: 680px; }
body[data-world="light"] .ob-step h1 {
    font-size: clamp(1.8rem, 4.4vw, 2.6rem);
    letter-spacing: -.03em;
    text-align: center;
    text-wrap: balance;
}
body[data-world="light"] .ob-step p.ob-sub { text-align: center; }
body[data-world="light"] .ob-presets,
body[data-world="light"] .ob-coins,
body[data-world="light"] .ob-nav { justify-content: center; }

/* ── 5. 404 ─────────────────────────────────────────────────────────────────
   One button and one link, side by side and centred under the sentence. */
body[data-world="light"] .nf-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* ── 6. REDUCED MOTION ──────────────────────────────────────────────────────
   The lift on the elements this task turned into cards. */
@media (prefers-reduced-motion: reduce) {
    body[data-world="light"] .ob-choice:hover,
    body[data-world="light"] .jy-quest:hover,
    body[data-world="light"] .plan-card:hover { transform: none; }
}