/* ==========================================================================
   login-railnest.css: the RailNest sign-in surface.

   Loaded ONLY by login.php on the union edition (APP_IS_UNION), and it is the
   ONLY stylesheet that branch loads: no Bootstrap, no Bootstrap Icons, no
   webfont, none of the shared sheets. That is deliberate. The two editions are
   one codebase, and until now their sign-in pages were the same markup with
   the same class names and the same CDN payload, which makes them trivially
   attributable to each other. This sheet gives this edition its own layout,
   its own type system, its own component shapes and its own class vocabulary
   (nest-*), so a side-by-side of the two pages' source does not read as one
   template with two colour schemes.

   Because nothing else is loaded here, this file owns everything: the reset,
   the form controls, the focus ring, both themes. Do not reach for a class
   from another sheet; it is not on the page.

   Self-contained by rule: no @import, no remote font, no remote CDN. The only
   graphics are inline SVG in login.php plus one same-origin file, the real
   brand mark at img/rn/logo.svg, the same asset views/partials/navbar.php
   loads once you are signed in, so the front door and every page behind it
   carry one logo rather than two drawings of one.

   Colour comes from the app's own token sheets, not from this page: every
   value below is lifted from css/base.css or the .dark-mode block of
   css/dark-mode.css, named in the comment beside it. The app is neutral
   surfaces with a single blue accent and says so ("warm-neutral … no slate
   cast", "borders neutral, no blue tint"), so this page is too: the blue
   lives in the brand chip, the focus ring, the link and the submit, and
   nowhere else.

   Theme: html.dark-mode is set by views/partials/theme-init.php before paint
   and toggled by the inline script at the foot of login.php. That script also
   overwrites #theme-icon's class attribute, so everything here keys off the
   id or off html.dark-mode, never off a class on that element.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
    /* Surfaces: the app's page grey for the field, the app's card white for
       the plate, and a dark band across the top. Note the band honestly: the
       app paints no dark surface in light mode (its own navbar is --card-bg,
       white), so the band borrows the app's darkest neutral, its ink, and
       uses it as a surface. That is a composition decision, not a lift. */
    color-scheme: light;

    --nest-field-bg:   #f3f3f3;   /* base.css --bg-secondary */
    --nest-plate-bg:   #ffffff;   /* base.css --card-bg */
    --nest-input-bg:   #ffffff;   /* base.css --input-bg */
    --nest-band-bg:    #111827;   /* base.css --text-primary, as a surface */
    --nest-band-ink:   #f1f5f9;   /* dark-mode.css --text-primary */
    --nest-band-soft:  #a1a1aa;   /* dark-mode.css --text-muted */
    --nest-band-edge:  #111827;

    /* Ink */
    --nest-ink:        #111827;   /* base.css --text-primary */
    --nest-ink-soft:   #4b5563;   /* base.css --text-muted */

    /* Rules: hairline for interior detail, strong for the outer frame. */
    --nest-line:       #d1d5db;   /* base.css --border-color */
    --nest-line-firm:  #111827;   /* base.css --text-primary */

    /* One accent, used for focus, the link and the submit. Nothing else. */
    --nest-accent:     #2563eb;   /* base.css --primary-blue */
    --nest-accent-ink: #1d4ed8;   /* base.css --primary-blue-hover */
    --nest-on-accent:  #ffffff;

    /* The brand chip behind the logo. Deliberately NOT re-declared for dark:
       the band is dark in both themes and the mark in the asset is cream, so
       the chip needs the saturated light-theme blue behind it at all times.
       Dark mode's --primary-blue (#60a5fa) under a cream glyph is the one
       place following the token would make the logo harder to read. */
    --nest-chip-a:     #2563eb;   /* base.css --primary-blue */
    --nest-chip-b:     #1d4ed8;   /* base.css --primary-blue-hover */

    /* Error. Tint and rule carry the signal; the words stay at full ink
       contrast rather than sitting at the danger colour's 4.4:1. */
    --nest-alert-bg:   rgba(220, 38, 38, 0.08);  /* base.css --danger-bg */
    --nest-alert-line: #dc2626;                  /* base.css --danger */
    --nest-alert-ink:  #111827;                  /* base.css --text-primary */

    /* Type roles. No webfont: the display face is a system serif, the utility
       face a system monospace, the body face the platform UI sans.
       The display stack is ordered so the sturdy transitional serifs win
       everywhere it matters: Cambria on Windows, Georgia on macOS, Noto Serif
       on Android, and on Linux fontconfig substitutes Caladea for Cambria
       (metric-compatible), which is what the design was checked against.
       Palatino-class faces are deliberately NOT in the stack: they are a
       different genre and would change the page's voice if they won. */
    --nest-display: Cambria, Georgia, "Noto Serif", "Liberation Serif", serif;
    --nest-utility: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --nest-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* One inset, shared by the band and the footing so their content lines up
       vertically. The plate does NOT sit on it: it is centred in the open
       field, because it is the only thing on the page anyone came here to
       use and putting it under the eye costs nothing. */
    --nest-gutter: clamp(1.25rem, 5vw, 4.5rem);
    /* How far the footing note is allowed to run before it wraps. A measure,
       not a column: nothing is drawn at its edge. */
    --nest-column: 30rem;
    --nest-plate-w: 26.5rem;
    /* Past this width the band and footing stop hugging the edges and their
       content moves inward, so a 2560px monitor gets a page in proportion.
       Below it the gutter wins and nothing changes. */
    --nest-max: 84rem;
}

html.dark-mode {
    /* The band inverts its relationship with the field: on light it is the
       dark element, on dark it is the LIGHTER one, so it keeps its presence
       instead of dissolving into the page. The app's own elevated surface
       does that job exactly. */
    color-scheme: dark;

    --nest-field-bg:   #101011;   /* dark-mode.css --bg-primary */
    --nest-plate-bg:   #181819;   /* dark-mode.css --card-bg */
    --nest-input-bg:   #131316;   /* dark-mode.css --input-bg */
    --nest-band-bg:    #1c1c20;   /* dark-mode.css --bg-elevated */
    --nest-band-ink:   #f1f5f9;   /* dark-mode.css --text-primary */
    --nest-band-soft:  #a1a1aa;   /* dark-mode.css --text-muted */
    --nest-band-edge:  #333336;   /* dark-mode.css --border-color-subtle */

    --nest-ink:        #f1f5f9;   /* dark-mode.css --text-primary */
    --nest-ink-soft:   #a1a1aa;   /* dark-mode.css --text-muted */

    --nest-line:       #2a2a2c;   /* dark-mode.css --border-color */
    --nest-line-firm:  #3a3a3d;   /* dark-mode.css --input-border */

    --nest-accent:     #60a5fa;   /* dark-mode.css --primary-blue */
    --nest-accent-ink: #93bbfd;   /* dark-mode.css --primary-blue-hover */
    --nest-on-accent:  #101011;   /* dark-mode.css --bg-primary */

    --nest-alert-bg:   rgba(248, 113, 113, 0.10);  /* dark-mode.css --danger-bg */
    --nest-alert-line: #f87171;                    /* dark-mode.css --danger */
    --nest-alert-ink:  #f1f5f9;                    /* dark-mode.css --text-primary */
}

/* ── Reset (this sheet is alone on the page) ────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--nest-field-bg);
    color: var(--nest-ink);
    font-family: var(--nest-body);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Shell: three horizontal registers, band / field / foot ─────────────── */

.nest-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* The shared inset all three registers use. The percentage resolves
       against this element's width in every place it is consumed, so band,
       field, column rule and footing can never drift apart. */
    --nest-pad: max(var(--nest-gutter), (100% - var(--nest-max)) / 2);
}

/* ── Band ───────────────────────────────────────────────────────────────── */

.nest-band {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 var(--nest-pad);
    min-height: 4.5rem;
    background: var(--nest-band-bg);
    border-bottom: 1px solid var(--nest-band-edge);
    color: var(--nest-band-ink);
}

.nest-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-weight: 400;
}

/* The mark is the real logo file, not a drawing of it, in the blue chip the
   signed-in navbar paints around the same asset. The chip is square here
   because everything on this page is; that is the only thing about it this
   page changes. The asset's own fill is cream and cannot be recoloured
   through an <img>, which is why the chip's blue is fixed (see --nest-chip-a). */
.nest-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.4375rem 0.5625rem;
    background: linear-gradient(135deg, var(--nest-chip-a), var(--nest-chip-b));
    line-height: 0;
}

/* Height is the only size set; the width follows from the asset's own
   viewBox, stated here rather than as width/height attributes on the tag so
   the box is reserved at the right shape before the file loads AND cannot be
   stretched by a browser that treats those attributes as a width hint. Keep
   this in step with the viewBox in img/rn/logo.svg (0 0 124 100). */
.nest-mark-img {
    display: block;
    height: 1.375rem;
    width: auto;
    aspect-ratio: 124 / 100;
}

.nest-wordmark {
    font-family: var(--nest-display);
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--nest-band-ink);
}

/* Theme toggle. #theme-icon's class attribute is rewritten by the page
   script, so the two glyphs are addressed by id + html.dark-mode only. */
.nest-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    color: var(--nest-band-soft);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nest-toggle:hover {
    color: var(--nest-band-ink);
    border-color: rgba(255, 255, 255, 0.42);
}

.nest-toggle:focus-visible {
    outline: 2px solid var(--nest-band-ink);
    outline-offset: 2px;
}

#theme-icon { display: block; line-height: 0; }
#theme-icon .nest-glyph-moon { display: none; }
html.dark-mode #theme-icon .nest-glyph-sun  { display: none; }
html.dark-mode #theme-icon .nest-glyph-moon { display: block; }

/* ── Field: the open register the plate sits in ─────────────────────────── */

.nest-field {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2.75rem, 12vh, 6.5rem) var(--nest-pad) clamp(2.75rem, 8vh, 5rem);
}

/* ── Plate: the signature. Two real frames, one inside the other, with the
      section heading riding the outer line. ───────────────────────────────
      "Nested" is the brand's own word. Centred in the field, high in it, so
      the band reads as a header rather than as the plate's lid. */

.nest-plate {
    position: relative;
    width: 100%;
    max-width: var(--nest-plate-w);
    /* Transparent on purpose: the field colour shows through the channel
       between the two frames, which is what makes the nesting legible and what
       lets the heading's backing patch match the page on BOTH sides of the
       line it rides. */
    background: transparent;
    border: 1px solid var(--nest-line-firm);
    padding: 1.375rem 0.625rem 0.625rem;
}

.nest-plate-label {
    position: absolute;
    top: 0;
    left: 1.375rem;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 0.5rem;
    background: var(--nest-field-bg);
    color: var(--nest-ink);
    font-family: var(--nest-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.nest-plate-body {
    background: var(--nest-plate-bg);
    border: 1px solid var(--nest-line);
    padding: 1.625rem 1.5rem 1.5rem;
}

/* ── Error ──────────────────────────────────────────────────────────────── */

.nest-alert {
    margin: 0 0 1.25rem;
    padding: 0.625rem 0.75rem;
    background: var(--nest-alert-bg);
    border-left: 3px solid var(--nest-alert-line);
    color: var(--nest-alert-ink);
    font-size: 0.875rem;
    line-height: 1.45;
}

.nest-alert p { margin: 0; }
.nest-alert p + p { margin-top: 0.35rem; }

/* ── Form ───────────────────────────────────────────────────────────────── */

.nest-row { margin-bottom: 1.125rem; }

.nest-label {
    display: block;
    margin-bottom: 0.375rem;
    font-family: var(--nest-utility);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nest-ink-soft);
}

.nest-input {
    display: block;
    width: 100%;
    padding: 0.6875rem 0.75rem;
    background: var(--nest-input-bg);
    border: 1px solid var(--nest-line);
    border-radius: 0;
    color: var(--nest-ink);
    font-family: var(--nest-body);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 0.15s ease;
}

.nest-input:hover { border-color: var(--nest-ink-soft); }

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

/* Chrome paints an autofilled field its own mustard yellow, which lands here
   as two highlighter bars through the middle of the plate and is worse in
   dark mode than in light. The background cannot be set directly (the UA
   sheet wins), so the fill is an inset shadow tall enough to cover the box,
   the glyphs are recoloured with -webkit-text-fill-color (colour is ignored
   too), and the absurd transition delay parks the yellow far enough in the
   future that it never arrives. Appearance only: the value, the autofill
   itself and the password manager are untouched. */
.nest-input:-webkit-autofill,
.nest-input:-webkit-autofill:hover,
.nest-input:-webkit-autofill:focus,
.nest-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--nest-input-bg) inset;
            box-shadow: 0 0 0 1000px var(--nest-input-bg) inset;
    -webkit-text-fill-color: var(--nest-ink);
    caret-color: var(--nest-ink);
    transition: background-color 100000s ease-in-out 0s, border-color 0.15s ease;
}

.nest-row-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.nest-check {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--nest-accent);
}

.nest-check:focus-visible {
    outline: 2px solid var(--nest-accent);
    outline-offset: 2px;
}

.nest-check-label {
    font-size: 0.875rem;
    color: var(--nest-ink-soft);
    cursor: pointer;
}

/* The one filled control on the page, so it takes the accent: same blue the
   app's primary button takes, same square corners as everything here. */
.nest-submit {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--nest-accent);
    border: 1px solid var(--nest-accent);
    border-radius: 0;
    color: var(--nest-on-accent);
    font-family: var(--nest-utility);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nest-submit:hover {
    background: var(--nest-accent-ink);
    border-color: var(--nest-accent-ink);
}

.nest-submit:focus-visible {
    outline: 2px solid var(--nest-accent);
    outline-offset: 2px;
}

.nest-quiet {
    display: inline-block;
    margin-top: 1rem;
    color: var(--nest-accent-ink);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

.nest-quiet:hover { color: var(--nest-accent); }

.nest-quiet:focus-visible {
    outline: 2px solid var(--nest-accent);
    outline-offset: 2px;
}

/* ── Foot: the third register, on the same inset as the wordmark ─────────── */

.nest-foot {
    flex: 0 0 auto;
    padding: 1.125rem var(--nest-pad);
    border-top: 1px solid var(--nest-line);
}

.nest-note {
    max-width: var(--nest-column);
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--nest-ink-soft);
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
    .nest-band { min-height: 3.75rem; }
    .nest-mark { padding: 0.375rem 0.5rem; }
    .nest-mark-img { height: 1.1875rem; }
    .nest-wordmark { font-size: 1.1875rem; }
    .nest-field { padding-top: 2rem; padding-bottom: 2rem; }
    .nest-plate { max-width: none; }
    .nest-plate-body { padding: 1.5rem 1.125rem 1.25rem; }
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .nest-toggle,
    .nest-input,
    .nest-submit {
        transition: none;
    }
}