/*
 * Sign-in page. Plain CSS, no build step -- house convention across EJS projects.
 *
 * THIS PAGE STILL DOES NOT LOAD ejs.css, and that is a standing decision rather
 * than an oversight: pulling the house sheet in here to get its tokens would
 * restyle the card as a side effect, which is a lot of surface for a page that
 * uses none of the shell it would inherit.
 *
 * What it does instead is carry the house PALETTE. Every value below is a
 * literal copy of the corresponding token in public/css/ejs.css -- --substrate,
 * --face, --ink, --ink-2, --rule, --accent, --accent-hi and the --st-stopped /
 * --st-ready pairs -- in both themes. The hex is repeated rather than referenced
 * because there is nothing here to reference it from; the price is that a house
 * palette change has to be copied here by hand, and AuthPaletteTest asserts
 * every one of these values is still present in ejs.css so that going stale
 * fails a test rather than going unnoticed.
 *
 * DARK IS THE DEFAULT AND IS UNCONDITIONAL, matching the house file exactly:
 * two states, not three. Unstamped is dark; [data-theme="light"] is light;
 * "dark" needs no block because it fails the light selector and falls through.
 * There is deliberately no @media (prefers-color-scheme) here either -- the OS
 * does not get a vote in this design system.
 */

:root {
    --auth-bg: #14171a;           /* --substrate */
    --auth-surface: #1b1f22;      /* --face */
    --auth-ink: #e9ece7;          /* --ink */
    --auth-ink-soft: #a8b0a6;     /* --ink-2 */
    --auth-line: #333a3d;         /* --rule */
    --auth-brand: #4da6e0;        /* --accent */
    --auth-brand-hover: #74bdec;  /* --accent-hi */
    --auth-on-brand: #0a1418;     /* --on-accent */
    --auth-error-bg: #3d1a15;     /* --st-stopped-bg */
    --auth-error-ink: #f0a49a;    /* --st-stopped-fg */
    --auth-ok-bg: #12331f;        /* --st-ready-bg */
    --auth-ok-ink: #74d199;       /* --st-ready-fg */

    /*
     * public/css/version.css draws the build stamp from --color-neutral-500 and
     * --font-mono, with the house values as var() fallbacks. Those tokens live
     * in ejs.css, which this page does not load -- so the stamp used to take a
     * fixed light-mode grey here while following the theme on every other page.
     * Supplying the two names it reads is what makes one shared file correct on
     * all three shells without version.css needing to know about this one.
     */
    --color-neutral-500: #757d74; /* --ink-3 */
    --auth-shadow: 0 16px 48px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4); /* --shadow-lg */
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    color-scheme: dark;
}

:root[data-theme="light"] {
    --auth-bg: #e8eae5;
    --auth-surface: #fcfcfa;
    --auth-ink: #1a1d19;
    --auth-ink-soft: #565c53;
    --auth-line: #c9cec4;
    --auth-brand: #0060a8;
    --auth-brand-hover: #0072c6;
    --auth-on-brand: #ffffff;
    --auth-error-bg: #f6dcd8;
    --auth-error-ink: #8d2419;
    --auth-ok-bg: #d7ecdd;
    --auth-ok-ink: #15633a;

    --color-neutral-500: #838a7e;
    --auth-shadow: 0 16px 48px -12px rgba(20, 26, 20, .38), 0 2px 8px rgba(20, 26, 20, .10);

    color-scheme: light;
}

/*
 * The two self-hosted faces, declared here because ejs.css is not loaded on
 * this page. Same family names and the SAME src paths, so the browser treats
 * them as the same faces and the sign-in card is set in the same type as
 * everything behind it. AuthPaletteTest asserts the two files agree on the
 * paths, which is the only part that could silently drift.
 */
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2-variations"),
         url("../fonts/ibm-plex-sans-var.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    /* The house sheet sets this on <html> so the ground is right before any
       element paints. Without it the page flashes the browser's own white
       between first paint and .auth-page. */
    background: var(--auth-bg);
}

* {
    box-sizing: border-box;
}

.auth-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--auth-bg);
    color: var(--auth-ink);
    font-family: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 36px 32px;
    background: var(--auth-surface);
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    box-shadow: var(--auth-shadow);
}

/*
 * The EJS Corp wordmark above the title. Both ink variants are in the markup
 * and exactly one shows per theme -- the same swap the app bar does in ejs.css,
 * restated here because this page does not load that sheet. The reversed
 * (light-ink) mark is for the DARK default card; the plain (dark-ink) mark is
 * for the light card. height:auto keeps the wordmark's aspect at whatever
 * intrinsic size it was exported.
 */
.auth-logo {
    margin: 0 0 18px;
}

.auth-logo__img {
    display: block;
    height: auto;
    max-width: 150px;
}

/* Dark is the default card: show the light-ink mark, hide the dark-ink one. */
.auth-logo__img--light {
    display: none;
}

:root[data-theme="light"] .auth-logo__img--reversed {
    display: none;
}

:root[data-theme="light"] .auth-logo__img--light {
    display: block;
}

.auth-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.auth-subtitle {
    margin: 4px 0 24px;
    color: var(--auth-ink-soft);
    font-size: 14px;
}

.auth-alert {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.45;
}

.auth-alert p {
    margin: 0;
}

.auth-alert p + p {
    margin-top: 6px;
}

.auth-alert--error {
    background: var(--auth-error-bg);
    color: var(--auth-error-ink);
}

.auth-alert--ok {
    background: var(--auth-ok-bg);
    color: var(--auth-ok-ink);
}

.auth-button {
    display: block;
    padding: 13px 16px;
    background: var(--auth-brand);
    /* Not white: on the dark ground the brand blue is LIFTED (#4da6e0) and the
       house pairs it with a near-black label, which is what --auth-on-brand
       carries. White on that blue is 2.3:1 and unreadable. */
    color: var(--auth-on-brand);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.auth-button:hover,
.auth-button:focus {
    background: var(--auth-brand-hover);
}

.auth-note {
    margin: 18px 0 0;
    color: var(--auth-ink-soft);
    font-size: 13px;
    line-height: 1.5;
}

.auth-dev {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--auth-line);
    font-size: 13px;
}

/*
 * The only link on the card, and it was taking the browser's own default blue.
 * Chrome lightens that automatically under color-scheme: dark, so it is legible
 * either way (measured 6.94:1 dark, 9.15:1 light) -- it was simply a different
 * blue from the brand button six lines above it. This page has no other link,
 * so there is nothing wider to style.
 */
.auth-dev a {
    color: var(--auth-brand);
}

.auth-dev a:hover,
.auth-dev a:focus {
    color: var(--auth-brand-hover);
}

.auth-dev span {
    display: block;
    margin-top: 4px;
    color: var(--auth-ink-soft);
    font-family: var(--font-mono);
    font-size: 11px;
}

/* ------------------------------------------------------------------------
 * The local password form, on the sign-in card and on the change-password
 * card (resources/views/auth/password.blade.php).
 *
 * EVERY VALUE BELOW IS AN EXISTING var() FROM THE BLOCKS AT THE TOP OF THIS
 * FILE, and that is deliberate rather than convenient: those two blocks are
 * the only place this page's palette is declared, so a rule that introduced a
 * literal hex here would be correct in one theme and wrong in the other. There
 * is no new :root[data-theme="light"] block because there is nothing new to
 * theme -- the form inherits both palettes for free.
 *
 * house convention: plain CSS from public/css. No npm, no Vite, no build step.
 * ---------------------------------------------------------------------- */

/*
 * .auth-form / .auth-label / .auth-input are the password-CHANGE form
 * (resources/views/auth/password.blade.php), which an admin-provisioned account
 * is sent to on first sign-in. The sign-in page itself is SSO-only and carries
 * no form (Elliot, 2026-10-06); the old `.auth-or` "sign in with Microsoft / or
 * / password" divider went with that form.
 */
.auth-form {
    margin: 0;
}

.auth-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--auth-ink-soft);
}

.auth-input {
    /* width:100% with border-box (set by the `*` rule above) so padding and
       border are inside the card rather than 26px past its right edge. */
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding: 11px 12px;
    background: var(--auth-bg);
    border: 1px solid var(--auth-line);
    border-radius: 6px;
    color: var(--auth-ink);
    font-family: inherit;
    /* 16px and not smaller: iOS Safari zooms the viewport on focus for anything
       under 16px, which on a shop-floor tablet leaves the page scrolled
       sideways with the submit button off screen. */
    font-size: 16px;
}

.auth-input:focus {
    outline: 2px solid var(--auth-brand);
    outline-offset: 1px;
    border-color: var(--auth-brand);
}

.auth-hint {
    margin: -10px 0 16px;
    color: var(--auth-ink-soft);
    font-size: 12px;
}

/*
 * The password submit, and the sign-out on the change-password card.
 *
 * Quieter than .auth-button on purpose where the two appear together: the
 * Microsoft button is the path almost everybody should take, and two equally
 * loud buttons would make that a choice rather than a default. It is a real
 * button element, so `border: 0` and the inherited font have to be stated --
 * a <button> does not inherit type from the page.
 */
.auth-button {
    width: 100%;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.auth-button--secondary {
    background: transparent;
    border: 1px solid var(--auth-line);
    color: var(--auth-ink);
}

.auth-button--secondary:hover,
.auth-button--secondary:focus {
    background: transparent;
    border-color: var(--auth-brand);
    color: var(--auth-brand);
}

/* Leads a card rather than closing one, so it sits above the form it explains
   and carries the card's own ink instead of the quieter note colour. */
.auth-note--lead {
    margin: 0 0 20px;
    color: var(--auth-ink);
}

.auth-signout {
    margin: 18px 0 0;
    text-align: center;
}

/*
 * A form control that reads as a link, because sign-out must be a POST and a
 * real <a> cannot send one. Appearance only -- it is a button to the keyboard
 * and to a screen reader, which is what it actually is.
 */
.auth-linkish {
    padding: 0;
    background: none;
    border: 0;
    color: var(--auth-brand);
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.auth-linkish:hover,
.auth-linkish:focus {
    color: var(--auth-brand-hover);
}