/* Landing page.
 *
 * The signed-out page had no theme variables at all -- it loads Bootstrap and
 * the legacy app.css and nothing else, which is why it stayed white while the
 * rest of the site went dark. tokens.css and themes.css are now loaded ahead of
 * this file, so everything below is expressed in the same variables as the app
 * pages and a theme change reaches the landing page for free.
 *
 * Loaded AFTER Bootstrap deliberately: Bootstrap sets `body { background:#fff;
 * color:#333 }` at the same specificity, so source order is what decides it.
 *
 * Layout is the "centred card": the single centred column the page has always
 * had, lifted onto a raised surface so it reads as a composed page rather than
 * a logo floating on a flat background. Still one viewport, still no scrolling.
 */

/* ONE SCALE, in em.
 *
 * The page must present the same single-viewport view at every screen size --
 * same card, same three stat columns, no scrolling, no breakpoint reflow. An
 * earlier attempt clamped a dozen values independently and could not converge:
 * every clamp needs a floor, and on a 390px-tall landscape phone the floors
 * summed to more than the screen.
 *
 * So the card carries a single font-size derived from the viewport, and every
 * size inside it is em. One number scales the whole composition, which cannot
 * overflow the way independent floors can.
 *
 * min(vh, vw) rather than either alone: the vh term shrinks the page on a
 * short screen (landscape phone), the vw term on a narrow one (portrait
 * phone), and whichever is tighter wins.
 *
 * Note this is em and not rem. A media query inside the legacy app.css sets the
 * root font-size to 10px, so rem would resolve to 62.5% of intent -- the
 * subtitle rendered at 10px instead of 16 before this. em inherits from the
 * card, which is the thing we actually control. */
body.home {
    background: var(--scs-bg);
    color: var(--scs-text);
    font-family: var(--scs-font);
    -webkit-font-smoothing: antialiased;
}

/* The only logo on the CDN is the black mark. Inverting it gives the white
   version the dark background needs without shipping a second asset -- and it
   follows the theme, so the light themes get the original back.
   Keyed on "not a LIGHT theme" rather than listing the dark ones. Written the
   other way round (invert always, undo it for [data-theme="light"]) this broke
   the moment Paper was added: a second light theme kept the inversion and showed
   a near-white logo on a near-white page. Keep this list in step with LIGHT in
   assets/js/themes.js. */
:root:not([data-theme="light"]):not([data-theme="paper"]) body.home #fplogo {
    filter: invert(1);
}

/* ------------------------------------------------------------------- card */
body.home .container {
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(4px, 2vh, 22px) clamp(8px, 2vw, 16px);
}
body.home .login-page { width: 100%; display: flex; justify-content: center; }

body.home .login-box {
    /* THE scale. Everything below is em against this. */
    font-size: clamp(6.5px, min(1.82vh, 3.7vw), 16px);

    background: var(--scs-surface);
    border: 1px solid var(--scs-border);
    border-radius: 1.1em;
    box-shadow: var(--scs-shadow-lg);
    padding: 2.4em 2.6em 2em;
    width: min(620px, 94vw);
    text-align: center;
}

body.home #fplogo {
    width: auto; height: auto;
    max-width: 11.5em; max-height: 8.4em;
    margin: 0 auto 1em; display: block;
}

body.home h1 {
    font-family: var(--scs-font);
    font-size: 2.3em; font-weight: 600; letter-spacing: -0.01em;
    margin: 0 0 0.12em; color: var(--scs-text); line-height: 1.15;
}
body.home h2 {
    font-size: 1em !important; font-weight: 400;
    color: var(--scs-text-secondary);
    margin: 0 0 1.5em !important; line-height: 1.35;
}

/* ------------------------------------------------------------------ stats */
/* Three figures instead of one run-on line: the numbers are the proof this
   page offers, and a pipe-separated sentence buries them. Three columns at
   every size -- the layout does not reflow. */
body.home #stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0.6em; margin: 0 0 1.5em;
    font-size: inherit; font-weight: inherit;
}
body.home .stat {
    background: var(--scs-surface-raised);
    border: 1px solid var(--scs-border);
    border-radius: 0.62em; padding: 0.8em 0.3em;
}
body.home .stat b {
    display: block; font-size: 1.25em; font-weight: 600;
    color: var(--scs-accent); line-height: 1.2;
}
body.home .stat span {
    font-size: 0.72em; color: var(--scs-text-muted);
    text-transform: uppercase; letter-spacing: 0.07em;
}

/* -------------------------------------------------------------------- CTA */
/* a.btn-login, not .btn-login: tokens.css carries
   `body a:link, body a:visited { color: var(--scs-accent) }` at specificity
   (0,1,2), which beats a bare class -- the button would draw its label in the
   accent colour ON the accent background, an invisible button. */
body.home a.btn-login,
body.home a.btn-login:link,
body.home a.btn-login:visited {
    display: block; width: 100%;
    padding: 0.92em 0; font-size: 1.06em; font-weight: 600; line-height: 1.2;
    background: var(--scs-accent); color: var(--scs-text-on-accent);
    border: 0; border-radius: 0.5em; margin: 0; text-decoration: none;
}
body.home a.btn-login:hover,
body.home a.btn-login:focus {
    background: var(--scs-accent-hover); color: var(--scs-text-on-accent);
}

body.home #learnmore { margin: 0.9em 0 0; font-size: 0.88em !important; }
body.home #learnmore a { color: var(--scs-accent); }
body.home #learnmore a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- app + Core */
body.home #appbadges { margin: 1.4em 0 0; }
body.home .appbadges-label {
    display: flex; align-items: center; gap: 0.75em;
    color: var(--scs-text-muted);
    font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 0.85em;
}
body.home .appbadges-label::before,
body.home .appbadges-label::after {
    content: ""; flex: 1; height: 1px; background: var(--scs-border);
}
body.home #appbadges img { height: 2.5em; width: auto; margin: 0 0.3em; }

body.home #paybuttons {
    margin: 1.2em auto 0; padding-top: 0.85em;
    border-top: 1px solid var(--scs-border);
    max-width: 16em; display: flex; justify-content: center;
}
body.home .qbad {
    margin-top: 0; max-width: 7.5em; width: auto;
    opacity: 0.75; border-radius: 5px; transform: none; transition: opacity 0.2s;
}
body.home .qbad:hover { opacity: 1; transform: none; }
/* The Core mark is dark artwork; on a dark page it needs lifting, and on the
   light theme it is already correct. */
:root:not([data-theme="light"]):not([data-theme="paper"]) body.home .qbad {
    filter: invert(1) hue-rotate(180deg);
}

/* --------------------------------------------------------- theme toggle */
/* Dark is what :root declares, so the dark state carries NO attribute -- the
   toggle only ever sets or clears data-theme="light". A stored value can then
   never pin the page to a theme that is later removed. */
.theme-toggle {
    position: fixed; top: 14px; right: 16px; z-index: 60;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    background: var(--scs-surface); color: var(--scs-text-secondary);
    border: 1px solid var(--scs-border); border-radius: 99px;
}
.theme-toggle:hover { background: var(--scs-surface-hover); color: var(--scs-text); }
.theme-toggle:focus-visible { outline: 2px solid var(--scs-accent); outline-offset: 2px; }
:root[data-theme="light"] .theme-toggle .i-dark,
:root[data-theme="paper"] .theme-toggle .i-dark { display: none; }
:root:not([data-theme="light"]):not([data-theme="paper"]) .theme-toggle .i-light { display: none; }

/* ------------------------------------------------------------------ foot */
/* The one rule that decides this page's footer; layout/footer.php styles the
   app pages and defers here.
   Bigger and less faint than the 11px/0.65 the app pages get: there it sits
   under a table or a video and every pixel of its height comes out of the
   content, whereas here there is room and this line is the only attribution on
   the site's front door.
   The vertical margin stays a clamp -- this page is deliberately single-screen
   with overflow:hidden, so a fixed margin would push the footer off a landscape
   phone rather than letting it tighten. */
body.home #footer {
    margin: clamp(4px, 0.9vh, 8px) 15px;
    height: auto;
    padding-left: 0;
    font-size: 14px;
    opacity: 0.85;
}

/* ------------------------------------------------------- theme transition */
/* A quick cross-fade when the toggle is pressed.
 *
 * Applied through a class the toggle adds and then removes, NOT left on
 * permanently: a standing transition on colour also animates the FIRST paint,
 * so a visitor whose stored theme is light would watch the page fade out of
 * dark on every single load -- which reads as a bug, not a flourish.
 *
 * The properties are named rather than using `all`: `all` would also animate
 * layout-affecting properties mid-switch, and transitions on width/height are
 * what make a theme change feel like a reflow instead of a recolour.
 */
html.theme-fading,
html.theme-fading *,
html.theme-fading *::before,
html.theme-fading *::after {
    transition: background-color 200ms ease,
                color            200ms ease,
                border-color     200ms ease,
                fill             200ms ease;
}
/* Someone who has asked for less motion gets the switch instantly. */
@media (prefers-reduced-motion: reduce) {
    html.theme-fading,
    html.theme-fading *,
    html.theme-fading *::before,
    html.theme-fading *::after { transition: none; }
}