/* ==================== SIGN IN ====================
   Moved out of layout.css, which is about the signed-in shell. The grants only
   permit `authenticated` (migration 0072), so this screen is the whole app
   until a session exists — not a formality in front of it.

   Two prefixes, and the split matters:
     .login-*  the card. Unchanged on purpose — it is the one thing on this
               screen that has to be boring.
     .lg-*     the page around it: the canvas, the story column, the brand rail.
   ================================================================ */

/* ONE SCREEN, NO SCROLLBAR — the constraint everything below is sized against.
   A 1366x768 laptop leaves roughly 650px of viewport once browser chrome is
   taken off, so the whole composition has that as its budget: ~120px of lockup,
   gap and padding, a story column that is the tallest child at ~460px, and a
   card at ~355px. Before growing any height here, add it up. A sign-in screen
   that scrolls has failed at the only thing it does.

   `safe center` is not decoration either. A centred flex container with
   overflow:auto clips the TOP of anything taller than itself — the logo and the
   first field — and no scrollbar will reach it. `safe` falls back to flex-start
   instead. The plain `center` above it is there for browsers that do not know
   the keyword and would otherwise discard the declaration entirely. */
.login-screen {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center;
    justify-content: safe center;
    gap: 1.1rem;
    padding: 1.35rem 1.5rem;
    overflow: auto;
    background:
      radial-gradient(1100px 600px at 15% -10%, rgba(24,58,110,.55), transparent 60%),
      radial-gradient(900px 520px at 105% 110%, rgba(176,141,63,.30), transparent 60%),
      var(--navy-900);
}

/* The scene. Sits under everything, takes pointer events itself so the field
   reacts to the cursor, and every child above it re-enables its own. */
.lg-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block; z-index: 0;
}

/* A vignette over the canvas: keeps the dots from competing with the card at
   the centre without dimming the whole field. pointer-events:none so the scene
   underneath still receives the cursor. */
.lg-veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(1000px 620px at 50% 50%, rgba(6,16,36,.60), transparent 74%),
      radial-gradient(1400px 760px at 50% 120%, rgba(6,16,36,.52), transparent 70%);
}

.lg-wrap {
    position: relative; z-index: 2;
    width: 100%; max-width: 1220px;
    display: grid; grid-template-columns: minmax(0, 1fr) 408px;
    gap: 4rem; align-items: center;
    pointer-events: none;            /* the field stays reachable between elements */
}
.lg-wrap > * { pointer-events: auto; }

/* ---- the story column ---- */
.lg-story { color: #fff; max-width: 620px; }

/* ---- the parent company, centred across the top ----
   Was 38px tucked above the headline in the left column. This is the group that
   owns all five brands; on its own sign-in screen it should be the first thing
   read, not a footnote to one column. */
.lg-parent {
    position: relative; z-index: 2;
    display: flex; justify-content: center; width: 100%;
    pointer-events: none;            /* the scene stays reachable behind it */
}
.lg-parent img {
    /* Sized down from 168px. It is the first thing read, not the whole screen —
       at 168 it was taking a quarter of a laptop viewport on its own and pushing
       the sign-in button off the bottom. */
    height: clamp(56px, 8.6vh, 112px); width: auto; max-width: 88vw; display: block;
    opacity: 1;
    /* The lockup mixes black wordmarks with the brands' own colours. invert(1)
       alone turns black into white but every colour into its COMPLEMENT — which
       is why CemSites read magenta/yellow and JustDigital read blue. brightness(0)
       crushes every pixel to black first (alpha is untouched), so invert(1) then
       yields pure white whatever the source colour was, and stays right whatever
       a future brand ships. The drop-shadow lifts it off the starfield; one
       `filter` declaration doing both, because a second would silently replace
       the first rather than add to it. */
    filter: brightness(0) invert(1)
            drop-shadow(0 6px 22px rgba(0, 0, 0, .45));
}

.lg-story h2 {
    font-size: 2.5rem; font-weight: 700; line-height: 1.06;
    letter-spacing: -.03em; margin: 0 0 .85rem;
    color: #fff;
}
.lg-story h2 em {
    font-style: normal;
    background: linear-gradient(96deg, #E7C689, #C0A070 62%, #A98A55);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* 56ch rather than 50: a wider measure costs nothing horizontally here and
   takes a line off the paragraph, which is height this screen does not have. */
.lg-lede {
    font-size: .95rem; line-height: 1.62; margin: 0 0 1.3rem;
    color: rgba(214,226,246,.8); max-width: 56ch;
}

/* ---- what the dots mean ----
   This is a legend, not an ornament. Without it the scene is abstract motion;
   with it the colours are the portfolio and the gold line is the product. */
.lg-legend {
    display: flex; flex-wrap: wrap; gap: .45rem 1.4rem;
    margin: 0 0 1.1rem; padding: 0; list-style: none;
}
.lg-legend li {
    display: flex; align-items: center; gap: .5rem;
    font-size: .75rem; letter-spacing: .01em;
    color: rgba(206,220,244,.76);
}
.lg-key {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
    box-shadow: 0 0 0 3.5px rgba(255,255,255,.05);
}
.lg-key.k-messenger { background: #5C93E8; }
.lg-key.k-eff       { background: #2FBF6B; }
.lg-key.k-thumbies  { background: #8FA6BF; }
.lg-key.k-cemsites  { background: #9BD65B; }
.lg-key.k-link {
    width: 26px; height: 2px; border-radius: 2px; flex: 0 0 26px;
    background: #D9B679; box-shadow: 0 0 9px rgba(217,182,121,.55);
}

/* ---- the portfolio, named ----
   Tiles rather than a list. Four companies laid out as four things is the point
   being made — a row of logos with a caption beside each read as a footer, which
   is the opposite of what this section is for. */
.lg-brands {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 1.1rem; margin: 0 0 .9rem;
}
/* Nearly opaque, not a tint. At 3% white the drifting dots travelled straight
   through the tiles and behind the wordmarks, which is a poor way to treat five
   companies' artwork — a logo has to sit ON something. The panel is navy-800 at
   72% over its own blur, so the field still shows as depth rather than noise. */
.lg-brand {
    display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
    padding: .62rem .8rem .55rem;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(11,34,69,.72);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 2px 14px rgba(4,12,30,.30);
    transition: border-color .18s ease, background .18s ease;
}
.lg-brand:hover { border-color: rgba(255,255,255,.2); background: rgba(15,42,82,.82); }
.lg-brand .blogo { width: 100%; height: 26px; flex: 0 0 26px; }
/* layout.css dims these to .88 for the sidebar rail, where they sit on solid
   navy. Here they are the point of the panel, so they run at full strength. */
.lg-brand .blogo img { max-height: 22px; opacity: 1; }
.lg-brand.soon { background: rgba(11,34,69,.55); }
.lg-brand.soon .blogo img { opacity: .55; }
.lg-src {
    font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
    color: rgba(198,214,240,.62); white-space: nowrap;
}
.lg-brand.soon .lg-src { color: rgba(190,206,232,.4); }

.lg-note {
    font-size: .7rem; line-height: 1.55; color: rgba(180,196,224,.46);
    margin: 0; max-width: 62ch;
}

/* ==================== THE CARD ====================
   A white panel with a wordmark, a title, a subtitle and two fields in it was
   two-thirds empty space — a big blank slab in front of the scene. The lockup
   now sits on a navy band instead, which does three things: it removes the
   duplicate title (the lockup IS the wordmark, so "Messenger One" underneath it
   was saying the name twice), it ties the card to the sidebar and to both
   emails, which use exactly this navy-over-white shape, and it takes about
   70px of height out of a screen that has none to spare. */
.login-card {
    width: 100%; max-width: 408px; background: var(--surface);
    border-radius: 18px; padding: 0; overflow: hidden;
    /* Two shadows and a rim: the long one seats it on the field, the short one
       gives it an edge, the inset keeps the white from going flat at the top. */
    box-shadow: 0 28px 70px rgba(4,12,30,.55),
                0 4px 14px rgba(4,12,30,.30),
                inset 0 1px 0 rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.10);
    justify-self: end;
}

/* The gold hairline is the same one the welcome and reset emails carry under
   their header. It is the only place --m1-gold appears on this screen besides
   the resolved links in the scene, which is deliberate: gold means "one
   identity, confirmed" here, and nothing else. */
.lg-cardhead {
    background: linear-gradient(158deg, var(--navy-700), var(--navy-900) 78%);
    padding: 1.15rem 1.5rem .95rem;
    text-align: center;
    border-bottom: 1px solid rgba(192,160,112,.45);
}
/* The other mark that carries this screen. Scaled with the parent lockup so
   the two read as a pair rather than one shrinking beside the other. */
.login-logo { display: block; height: clamp(34px, 5vh, 52px); width: auto; margin: 0 auto .6rem; }
.login-sub {
    display: block; font-size: .62rem; color: rgba(214,226,246,.66);
    text-transform: uppercase; letter-spacing: .17em; margin: 0;
}

.lg-cardbody { padding: 1.5rem 1.7rem 1.35rem; }

.login-card label {
    display: block; font-size: .66rem; font-weight: 700; color: var(--text-soft);
    text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .32rem;
}
.login-card input.form-control {
    margin-bottom: .9rem;
    padding: .6rem .85rem;
    font-size: .93rem;
    border-radius: 9px;
    border-color: var(--border);
    background: var(--field);
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.login-card input.form-control:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px rgba(30,107,255,.15);
}
.login-card .alert { font-size: .78rem; border-radius: 9px; }
.login-card .btn {
    padding: .62rem; font-weight: 600; font-size: .95rem;
    border-radius: 9px; letter-spacing: .01em; margin-top: .25rem;
    box-shadow: 0 6px 18px rgba(30,107,255,.28);
    transition: transform .12s ease, box-shadow .18s ease, filter .14s ease;
}
.login-card .btn:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 9px 24px rgba(30,107,255,.34);
}
.login-card .btn:active:not(:disabled) { transform: translateY(1px); }
.login-card .btn:disabled { box-shadow: none; }

/* ---- the three things this card can be ----
   Sign in, ask for a reset link, choose a new password. One card, because they
   are one task with three states, and swapping the contents keeps the person
   looking at the same place on the screen. */
.lg-panel { display: none; }
.lg-panel.on { display: block; }

.lg-panel h2 {
    font-size: 1.05rem; font-weight: 700; text-align: center;
    margin: 0 0 .35rem; color: var(--text);
}
.lg-panel > p.lg-why {
    text-align: center; font-size: .8rem; line-height: 1.5;
    color: var(--text-soft); margin: 0 0 1.1rem;
}

.lg-linkrow {
    display: flex; justify-content: center; margin: .8rem 0 0;
}
.lg-link {
    background: none; border: 0; padding: 0;
    font-size: .8rem; font-weight: 600; color: var(--accent);
    text-decoration: none;
}
.lg-link:hover { text-decoration: underline; }

/* A confirmation, not an alert: it is the successful end of the task. */
.lg-sent {
    display: flex; gap: .7rem; align-items: flex-start;
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: 10px; padding: .85rem .9rem; margin: 0 0 1rem;
    font-size: .8rem; line-height: 1.55; color: var(--text-soft);
}
.lg-sent .bi { color: var(--ok); font-size: 1rem; line-height: 1.3; }
.lg-sent b { color: var(--text); font-weight: 600; }

.lg-hint {
    font-size: .72rem; line-height: 1.5; color: var(--text-dim);
    margin: -.5rem 0 1rem;
}

/* ==================== SMALLER SCREENS ====================
   Width tiers first, then HEIGHT tiers. Height is the one that actually bites
   here: a 1920x1080 monitor and a 1920x900 laptop are the same width and only
   one of them has room, so sizing on width alone is what let this screen start
   scrolling on a large display. */

/* Between a laptop and a wide monitor: keep both columns, spend less on air. */
@media (max-width: 1439.98px) {
    .lg-wrap { max-width: 1080px; gap: 3rem; grid-template-columns: minmax(0, 1fr) 386px; }
    .lg-story h2 { font-size: 2.2rem; }
    .lg-lede { font-size: .9rem; margin-bottom: 1.1rem; }
}

/* Below this the story column is competing with the card rather than framing
   it, so it goes — the scene still carries the character on its own. */
@media (max-width: 1099.98px) {
    .lg-wrap { grid-template-columns: 1fr; gap: 1.6rem; max-width: 408px; }
    /* The story column goes, but the parent lockup stays — it is now the only
       thing naming who this platform belongs to. */
    .lg-story { display: none; }
    .login-card { justify-self: center; }
}

@media (max-width: 479.98px) {
    .login-screen { padding: 1rem; gap: .9rem; }
    .login-card { border-radius: 14px; }
    .lg-cardbody { padding: 1.25rem 1.25rem 1.15rem; }
}

/* ---- short screens ----
   A 13" laptop at 1440x900 gives about 790px of viewport; a 768-tall one gives
   about 650. Each step takes the next-least-important height out rather than
   shrinking everything evenly — the lockup and the paragraph go before the
   fields do, because the fields are the only part anyone came here to use. */
@media (max-height: 860px) {
    .lg-story h2 { font-size: 2.15rem; margin-bottom: .7rem; }
    .lg-lede { font-size: .89rem; line-height: 1.55; margin-bottom: 1rem; }
    .lg-legend { margin-bottom: .85rem; }
    .lg-brands { padding-top: .9rem; margin-bottom: .7rem; }
}

@media (max-height: 740px) {
    .login-screen { gap: .8rem; padding: 1rem 1.5rem; }
    /* Narrow enough that width binds before height does. */
    .lg-parent img { height: clamp(42px, 7vh, 62px); }
    .lg-story h2 { font-size: 1.95rem; }
    /* The lede is the first thing that can go entirely: the legend, the brand
       tiles and the caption still say what this is, in a fraction of the space. */
    .lg-lede { display: none; }
    .lg-cardhead { padding: .9rem 1.5rem .8rem; }
    .login-logo { height: clamp(28px, 4vh, 38px); }
    .lg-cardbody { padding: 1.2rem 1.6rem 1.1rem; }
    .login-card input.form-control { margin-bottom: .75rem; padding: .55rem .8rem; }
}

/* Nothing left to trim politely — let it scroll rather than clip. `safe center`
   on .login-screen is what makes that scroll actually reach the top. */
@media (max-height: 600px) {
    .lg-story { display: none; }
    .lg-parent img { height: clamp(34px, 6vh, 50px); }
}

@media (prefers-reduced-motion: reduce) {
    .lg-canvas { opacity: .8; }
}