/* ==========================================================================
   Sign in

   The console's own surfaces, ink, accent and type, applied to the one page that
   sits outside the Angular app. The values below are mirrored from
   angular/src/scss/_console-tokens.scss rather than imported: that file compiles
   into the app bundle, and the production build hashes its filename, so a Blade
   page has nothing stable to link to.

   Only the tokens this page uses are copied, and they are copied verbatim. If the
   console's palette moves, recompile that file and bring the changed values here —
   `npx sass --load-path=src/scss --load-path=node_modules` against a stub that
   includes the mixins prints them resolved.

   Light only, deliberately. The console follows the OS; this page does not, so the
   first screen is the same for everyone. That does mean someone on a dark machine
   signs in on a light page and lands in a dark console — a known, accepted seam.
   ========================================================================== */

:root {
    color-scheme: light;

    --c-void: #F2F4F7;
    --c-panel: #FFF;
    --c-hairline: #E6EAF0;
    --c-edge: #CAD2DE;
    --c-ink: #17181B;
    --c-ink-2: #505762;
    --c-muted: #6C737E;
    --c-accent: #167A0F;
    --c-accent-fill: #83D47D;
    --c-accent-ink: #122006;
    --c-accent-on: #FFF;
    --c-accent-soft: rgba(131, 212, 125, 0.2);
    --c-bad: #C90300;
    --c-bad-soft: rgba(201, 3, 0, 0.1);

    --c-sans:
        ui-sans-serif, system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI',
        roboto, 'Helvetica Neue', arial, sans-serif;
    --c-mono: ui-monospace, 'SF Mono', sfmono-regular, menlo, consolas, monospace;
    --c-r-sm: 5px;
    --c-r-md: 8px;
    --c-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --bars: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='100' viewBox='0 0 132 100' preserveAspectRatio='none'><rect x='0' y='62' width='6' height='38' fill='%23167A0F'/><rect x='11' y='39' width='6' height='61' fill='%23167A0F'/><rect x='22' y='53' width='6' height='47' fill='%23167A0F'/><rect x='33' y='28' width='6' height='72' fill='%23167A0F'/><rect x='44' y='45' width='6' height='55' fill='%23167A0F'/><rect x='55' y='16' width='6' height='84' fill='%23167A0F'/><rect x='66' y='57' width='6' height='43' fill='%23167A0F'/><rect x='77' y='34' width='6' height='66' fill='%23167A0F'/><rect x='88' y='48' width='6' height='52' fill='%23167A0F'/><rect x='99' y='9' width='6' height='91' fill='%23167A0F'/><rect x='110' y='42' width='6' height='58' fill='%23167A0F'/><rect x='121' y='26' width='6' height='74' fill='%23167A0F'/></svg>");
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
    background: var(--c-void);
    color: var(--c-ink);
    font-family: var(--c-sans);
    margin: 0;
    min-height: 100vh;
}

/* Two panes, the way the console itself is built: a panel surface carrying identity
   against the void the work happens on. */

.signin {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: 100vh;
}

/* ---- identity ---- */

/* Both blocks sit against the divider rather than centred in their own halves. Centred,
   a wide monitor put a void between them that read as emptiness rather than as air; held
   to the middle, the outer space reads as margin. */

.signin-brand {
    align-items: flex-end;
    background: var(--c-panel);
    border-right: 1px solid var(--c-hairline);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 40px 32px;
    position: relative;
}

/* One width for every child, so the mark, the sentence and the roster share a left edge.
   A max-width on any one of them alone pushes it out of line against flex-end. */

.signin-brand > * {
    position: relative;
    width: min(26rem, 100%);
    z-index: 1;
}

/* An ambient field rather than a photograph. The console carries no photography, and a
   stock image is what the old page did. The wash is the accent; the bars beneath it are
   the shape of the console's own instrument, held at a sixth of their opacity so they
   read as texture and could not be mistaken for a reading. */

.signin-brand::before {
    background:
        radial-gradient(90% 70% at 12% 88%, var(--c-accent-soft), transparent 68%),
        radial-gradient(70% 60% at 92% 8%, var(--c-accent-soft), transparent 72%);
    content: '';
    inset: 0;
    position: absolute;
}

.signin-brand::after {
    background-image: var(--bars);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 96px 100%;
    bottom: 0;
    content: '';
    height: 30%;
    left: 0;
    mask-image: linear-gradient(to top, #000 0%, transparent 88%);
    opacity: 0.16;
    position: absolute;
    right: 0;
}

.brand-lock {
    align-items: center;
    display: flex;
    gap: 9px;
}

/* The console's own mark, not the Vicimus wordmark. This is the front door of that
   application, and it should be wearing the same badge the rail wears. */

.brand-mark {
    align-items: center;
    background: var(--c-accent-fill);
    border-radius: 6px;
    color: var(--c-accent-ink);
    display: flex;
    flex: 0 0 auto;
    font-family: var(--c-mono);
    font-size: 11px;
    font-weight: bold;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.brand-name {
    color: var(--c-ink);
    font-family: var(--c-mono);
    font-size: 11.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.brand-say {
    color: var(--c-ink-2);
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 22px 0 0;
}

/* The roster is the page's one piece of character, and it is character the product
   actually has: these are the systems it talks to, set in the same micro-label the
   console uses for every axis and key. Nothing else on this page is decorated. */

.brand-roster {
    border-top: 1px solid var(--c-hairline);
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin: 30px 0 0;
    padding: 16px 0 0;
}

/* ink-2 rather than muted, because the wash behind it is not plain panel: over the
   glow at its strongest, muted measures 4.25:1 and fails. The label still reads as a
   label — it is smaller, uppercase and letterspaced against the items below it. */

.brand-roster dt {
    color: var(--c-ink-2);
    flex: 0 0 100%;
    font-family: var(--c-mono);
    font-size: 9.5px;
    letter-spacing: 0.15em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.brand-roster dd {
    color: var(--c-ink-2);
    font-family: var(--c-mono);
    font-size: 11px;
    margin: 0;
}

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

.signin-form {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    padding: 40px 32px;
}

.signin-inner {
    max-width: 22rem;
    width: 100%;
}

.signin-inner h1 {
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 26px;
}

.field + .field { margin-top: 16px; }

/* ink-2 rather than muted: this label sits on the void ground, where muted measures
   4.34:1 and fails at this size. On the panel opposite it passes, which is why the
   roster's label still uses it. */

.field label {
    color: var(--c-ink-2);
    display: block;
    font-family: var(--c-mono);
    font-size: 9.5px;
    letter-spacing: 0.15em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.field input {
    background: var(--c-panel);
    border: 1px solid var(--c-edge);
    border-radius: var(--c-r-sm);
    color: var(--c-ink);
    font-family: inherit;
    font-size: 13.5px;
    padding: 9px 11px;
    transition:
        border-color 180ms var(--c-ease),
        box-shadow 180ms var(--c-ease);
    width: 100%;
}

.field input::placeholder { color: var(--c-muted); }

.field input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
    outline: none;
}

.signin-go {
    background: var(--c-accent);
    border: 1px solid transparent;
    border-radius: var(--c-r-sm);
    color: var(--c-accent-on);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    margin-top: 24px;
    padding: 10px 14px;
    transition: filter 180ms var(--c-ease);
    width: 100%;
}

.signin-go:hover { filter: brightness(1.08); }

.signin-go:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Never hue alone — the console's rule for anything that reports a state. The dot is
   the second encoding, and the message says what to do rather than apologising. */

.signin-alert {
    align-items: baseline;
    background: var(--c-bad-soft);
    border-radius: var(--c-r-md);
    color: var(--c-bad);
    display: flex;
    font-size: 12.5px;
    gap: 8px;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 10px 12px;
}

.signin-alert::before {
    background: var(--c-bad);
    border-radius: 50%;
    content: '';
    flex: 0 0 auto;
    height: 6px;
    position: relative;
    top: 5px;
    width: 6px;
}

.signin-help {
    border-top: 1px solid var(--c-hairline);
    color: var(--c-ink-2);
    font-size: 11.5px;
    margin: 26px 0 0;
    padding-top: 16px;
}

.signin-help a {
    color: var(--c-accent);
    text-decoration: none;
}

.signin-help a:hover { text-decoration: underline; }

/* One movement, on the pane that carries the form, so the page settles rather than
   assembles. Anything more would be decoration on a page people pass through. */

@media (prefers-reduced-motion: no-preference) {
    .signin-inner {
        animation: signin-settle 420ms var(--c-ease) both;
    }
}

@keyframes signin-settle {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* The identity pane becomes a header rather than disappearing: it is what tells you
   which application you are signing in to. */

@media (max-width: 820px) {
    .signin {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .signin-brand {
        align-items: stretch;
        border-bottom: 1px solid var(--c-hairline);
        border-right: 0;
        padding: 20px 22px;
    }

    .signin-brand::after { display: none; }

    .signin-brand > * { width: 100%; }

    .brand-say {
        font-size: 1rem;
        margin-top: 18px;
    }

    .signin-form { justify-content: center; }

    .brand-roster {
        margin-top: 18px;
        padding-top: 14px;
    }

    .signin-form {
        justify-content: flex-start;
        padding: 28px 22px 40px;
    }
}