/* =============================================================================
   login - the sign-in page (/Default.aspx)
   =============================================================================

   Implements "Login v4.dc.html" (Claude Design, project "Design System"). One
   page owns this file, so every rule is scoped under .lgn-page and nothing here
   can reach the other ~200 pages.

   WHAT CHANGED FROM v3 ("Login v3.dc.html")
   v3 was a white page with a 3px red rule across the top, a stacked brand lockup,
   a labelled two-field card, a status strip inside the card, a date line under it
   and a page footer. v4 keeps the card and throws out everything framing it:

     - the red rule is gone; the page is now grounded by a layered peach wave
       drawn across the bottom third,
     - the lockup turns on its side (logo left, wordmark and tagline stacked
       beside it) and grows: 30px wordmark, 12.5px Georgia tagline,
     - the fields lose their labels. Each is now a 46px rounded box holding an
       icon, a placeholder-labelled input, and - for the password - the reveal
       toggle, all on one line,
     - the card footer strip, the date line and the page footer are all gone. The
       page ends at the card,
     - the card stops floating. v3 separated it from the page with a shadow; v4
       outlines it in 2px of the accent red with a 4px top edge and no shadow at
       all, and rings the fields in a tint of the same red,
     - the remember checkbox is drawn rather than native, so it can carry a
       colour and a tick that fades in,
     - #EE1C25 for the button and the card, #F5A9AD for the field borders, focus
       tan (#E08A5A), text #2A2A33.

   THE CHECKBOX IS THE ONE THING ON THIS PAGE THAT IS NOT THIS PAGE'S RED. It takes
   --srcp-accent from css/src-tokens.css, which is why that file is the second (and
   only other) stylesheet Default.cshtml links. A checkbox is a checkbox wherever it
   is rendered, and the operator ticks the same control on 74 other pages; having the
   sign-in copy be the single red one in the application is the odd thing, not this.
   The drawn box exists for the 4px radius and the fading tick - accent-color cannot
   give it either - so it reads the token by hand rather than through accent-color.

   Type is Tahoma now, not Verdana - one step wider and lighter at the same size,
   which is what lets the labelless fields read at 13.5px.

   WHAT THIS PAGE DOES NOT LOAD
   include/style_sheet.css is not linked by Default.cshtml. The redesigned page
   uses none of its classes, and leaving it in meant fighting its body background
   and its global a{color:#000099} for no gain. The login page is the one page in
   the app that renders with Layout = null, so dropping it is contained.

   css/app-topbar.css went the same way at v4. v3 borrowed .apphdr-wordmark and
   .apphdr-tagline from it so the lockup could not drift from the signed-in
   header's; v4's lockup is deliberately a different size and a different tagline
   colour, so there was nothing left to share and the link was only costing a
   request.

   THE LOCKUP IS NOW AN IMAGE (2026-07-28). v4 re-declared those two rules locally as
   .lgn-wordmark and .lgn-tagline and set the wordmark and tagline as text beside a
   50px mark. All three are now the supplied images/srcomsec-horizontal.png, and the
   three rules are gone rather than left behind unused - the page had already drifted
   from the artwork it was imitating, which is the argument against setting a lockup in
   CSS at all. The signed-in header still sets its own; that one is a different size and
   was not in this request.

   The spec's <helmet> also imports Manrope from Google Fonts. Nothing in the
   spec then uses it - every text element names Tahoma or Georgia explicitly - so
   this page does not fetch it. A webfont on the sign-in screen is a render-
   blocking third-party request on the one page the operator cannot skip.

   The page is a full-height column: the lockup 64px down, the card under it, and
   the wave painted behind the lot.
   ============================================================================= */

/* style_sheet.css used to zero the body for every page; this page no longer loads
   it, so the browser's own 8px body margin came back and pushed the shell in from
   all four edges - the wave stopped reaching the window and 100vh overflowed by
   16px into a scrollbar. Reset it here, on a class rather than on `body`, so the
   file still cannot touch a page that does not opt in. */
.lgn-body {
    margin: 0;
    padding: 0;
    background: #fff;
}

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

/* The positioning context for the wave, and nothing else - the layout is all in
   .lgn-shell. overflow:hidden guarantees the wave can never open a horizontal
   scrollbar, whatever the viewport does to a 1440-wide viewBox. */
.lgn-page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: #fff;
    font-family: Tahoma, Verdana, Geneva, sans-serif;
    color: #2A2A33;
}

/* Links are the same object everywhere on this page. v3 set them bold red at
   10.5px; v4 drops the bold and sizes them with the card's controls. The hover
   keeps the colour and adds the underline, rather than brightening to #FF0000 -
   the page has one red now and it is the button's.

   The brand lockup is excluded rather than overridden: it is a link only so the
   logo still opens the corporate site, and it must not pick up either. */
.lgn-page a:not(.lgn-brand) {
    font-size: 12px;
    color: #C00000;
    text-decoration: none;
}

    .lgn-page a:not(.lgn-brand):hover {
        text-decoration: underline;
    }

/* ============================== the wave ==============================
   Three stacked bands plus a hairline along the top edge of the last one. It is
   decoration and nothing else: aria-hidden in the markup, pointer-events:none
   here so it can never eat a click meant for the card sitting over it.

   preserveAspectRatio="none" on the tag lets the 1440x420 viewBox stretch to any
   window width; the shapes are shallow enough that the distortion does not read.
   min-height keeps the bands from collapsing into a stripe on a short window. */
.lgn-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 38vh;
    min-height: 230px;
    pointer-events: none;
}

/* Everything the user can see or touch, above the wave. position:relative is what
   puts it there - both are children of .lgn-page and the positioned one wins.

   min-height is 100vh with a 100dvh override: on a phone, 100vh is measured
   against the browser chrome's *collapsed* height, so the bottom of the column
   sits below the fold until you scroll. dvh tracks the visible viewport instead.
   The vh line stays first as the fallback for anything that does not know dvh.

   The side padding is 20px and the top is spent by .lgn-brand's margin rather
   than here, so the standby banner can bleed to the window edges. */
.lgn-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 20px 30px;
}

/* ============================== backup-server banner ==============================
   Not in the spec, but the page has to carry it: when the app answers on
   app.srcomsec.com the operator is on the standby box and has to know before they
   sign in, not after. It gets the full width above everything, where the red rule
   used to be. The negative side margins undo .lgn-shell's padding so it reaches
   the edges. .blinktext (the animation) is declared by the page, conditionally. */
.lgn-alert {
    align-self: stretch;
    flex: none;
    margin: 0 -20px;
    padding: 10px 16px;
    text-align: center;
    background: #FFF4F4;
    border-bottom: 1px solid #F0C8C8;
}

/* ============================== brand lockup ==============================
   ONE IMAGE, the supplied horizontal lockup (mark, wordmark and tagline as the brand
   draws them). It replaced a version that assembled the three here - a 50px mark beside
   a 30px Georgia wordmark over a 12.5px Georgia tagline - which meant this page held its
   own opinion about artwork it does not own, and had already drifted from it.

   It went in at 52px - what the assembled lockup measured, so nothing else moved - was
   raised to 68px, which read too heavy, and settled halfway at 60px. That is 260px wide,
   comfortably inside the card's 392px, so the card still sets the column's width and the
   lockup sits within it rather than defining it.
   The 64px above is the spec's top padding, carried here so .lgn-alert can sit above it. */
.lgn-brand {
    display: flex;
    align-items: center;
    margin-top: 64px;
    text-decoration: none;
    color: inherit;
}

    .lgn-brand:hover {
        text-decoration: none;
    }

    /* ONE dimension is declared and the other is left to the source's own 4.33:1, so the
       artwork can never be stretched by a rounding error between the two. It is the WIDTH
       that is declared, not the height, and that pairing matters: max-width can then cap
       the lockup on a narrow phone and height:auto follows it down. Declaring the height
       instead would have let max-width squash the artwork rather than scale it.
       The tag carries width/height as well, at the rendered size, so the lockup does not
       reflow while the image loads. */
    .lgn-brand img {
        flex: none;
        display: block;
        width: 260px;
        height: auto;
        max-width: 100%;
    }

/* ============================== the card ==============================
   The card is drawn, not floated: a 2px accent-red outline with a 4px top edge,
   and no shadow at all. The heavier top border is what gives it a "front" -
   the same trick the peach caption bar used to do on the legacy pages, in the
   one colour this page still uses.

   overflow:hidden stays: it is what clips any child to the 12px radius. */
.lgn-card {
    width: 100%;
    max-width: 392px;
    margin-top: 38px;
    background: #fff;
    border: 2px solid #EE1C25;
    border-top-width: 4px;
    border-radius: 12px;
    overflow: hidden;
}

.lgn-cardbody {
    padding: 28px 30px 30px;
}

/* Tahoma, not Georgia. v3 titled the card in the brand serif at 22px; v4 sets it
   in the page face at 19px and tightens it, so the card opens with a label rather
   than a masthead. */
.lgn-title {
    margin-bottom: 22px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #2A211C;
    text-align: center;
}

/* ============================== error banner ==============================
   Replaces the legacy alert() + bare red <span>. Rendered by the server after a
   rejected sign-in and by the page script when a field is empty, so there is
   exactly one place an error can appear either way.

   v3 drew this as a left-bordered strip with a "!" glyph; v4 makes it a plain
   bordered box in the same rounded language as the fields under it, and drops the
   glyph - the colour says it.

   Hidden with the [hidden] attribute rather than a class, so an empty banner is
   out of the accessibility tree too. */
.lgn-error[hidden] {
    display: none;
}

.lgn-error {
    margin-bottom: 18px;
    padding: 9px 12px;
    background: #FFF5F5;
    border: 1px solid #F6D3D3;
    border-radius: 8px;
    font-size: 11.5px;
    line-height: 1.6;
    color: #8A2020;
}

/* ============================== fields ==============================
   v4 has no field labels. Each field is a bordered box that owns the icon, the
   input and (on the password) the reveal toggle, laid out on one 46px line; the
   input inside it is stripped of its own border and background so the box reads
   as the control. The placeholder carries the name of the field, and the input
   carries an aria-label so a screen reader still gets one when the placeholder
   disappears the moment there is a value. */
.lgn-fields {
    display: grid;
    gap: 14px;
}

.lgn-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #F5A9AD;
    border-radius: 8px;
    transition: border-color 140ms ease, background 140ms ease;
}

    /* The border turns tan while anything inside the box has focus - which is the
       point of :focus-within rather than :focus, since the reveal button lives in
       here too. Colour only, no ring and no width change, so nothing below it
       shifts. */
    .lgn-field:focus-within {
        border-color: #E08A5A;
    }

.lgn-fieldicon {
    flex: none;
}

.lgn-input {
    flex: 1;
    height: 100%;
    min-width: 0; /* a flex item defaults to min-width:auto, which an input's own intrinsic width would hold open */
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: bold;
    color: #1A1A22;
}

    /* Inherits the input's weight, so the placeholder is bold too. It is not
       decoration here - with the labels gone it IS the field's name, and it has to
       hold its own beside a 16px icon. */
    .lgn-input::placeholder {
        color: #AFAFB8;
    }

/* SHOW / HIDE, inside the password box on the right. It is a
   <button type="button"> and not a <span>: it has to be reachable by keyboard,
   and a bare button inside this form would otherwise default to type="submit" and
   sign the user in when they pressed it. */
.lgn-reveal {
    flex: none;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #C00000;
    cursor: pointer;
}

    .lgn-reveal:hover {
        text-decoration: underline;
    }

/* ============================== options row ==============================
   The checkbox and the forgot-password disclosure share one line. flex-wrap is
   the whole narrow-screen story for this row. */
.lgn-optrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* The checkbox is drawn rather than styled: accent-color can colour a native box
   but cannot give it a 4px radius, a 1.5px border of its own colour, or a tick
   that fades. So the real <input> is still there - it is what the label toggles,
   what the keyboard reaches and what carries the checked state - and it is made
   invisible over the drawn box, which follows it with :has(). No script.

   position:relative is what keeps the absolutely-positioned input inside. */
.lgn-remember {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #8C8C99;
    cursor: pointer;
    user-select: none;
}

    /* Checked reads as an active setting, unchecked as an offer. */
    .lgn-remember:has(input:checked) {
        color: #2A2A33;
    }

    /* opacity, not display:none or visibility:hidden - either of those would take
       the input out of the tab order and hand the page a checkbox no keyboard can
       reach. Sized and placed over the drawn box so a click that lands on the input
       itself still lands where it looks like it should. */
    .lgn-remember input {
        position: absolute;
        left: 0;
        width: 16px;
        height: 16px;
        margin: 0;
        opacity: 0;
    }

.lgn-checkbox {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background: #fff;
    border: 1.5px solid #C9C9D2;
    border-radius: 4px;
    transition: background 120ms ease, border-color 120ms ease;
}

.lgn-remember:has(input:checked) .lgn-checkbox {
    background: var(--srcp-accent, #0075FF);
    border-color: var(--srcp-accent, #0075FF);
}

/* Keyboard focus has to be visible on something, and the input it would ring is
   invisible - so the ring goes on the box. :focus-visible rather than :focus, so
   it does not appear on a plain mouse click. */
.lgn-remember:has(input:focus-visible) .lgn-checkbox {
    outline: 2px solid #E08A5A;
    outline-offset: 1px;
}

/* Faded rather than switched, so the box does not flicker when it is toggled
   twice. It is drawn white on white until then. */
.lgn-tick {
    opacity: 0;
    transition: opacity 120ms ease;
}

.lgn-remember:has(input:checked) .lgn-tick {
    opacity: 1;
}

/* Sits where the spec drew a link and is typed as one, but it is a button, since
   it discloses text on this page rather than navigating.

   margin-left:auto is for the wrapped case only. justify-content:space-between
   puts a lone item on a wrapped line at the START of it, so if this ever drops to
   its own row - a longer label, a different font stack - it would land under the
   checkbox looking like a mistake. The auto margin keeps it right-aligned either
   way, and changes nothing while the row is on one line. */
.lgn-forgot {
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    color: #C00000;
    cursor: pointer;
}

    .lgn-forgot:hover {
        text-decoration: underline;
    }

.lgn-forgotnote[hidden] {
    display: none;
}

.lgn-forgotnote {
    margin-top: -4px; /* absorbs the grid gap: the note belongs to the row above */
    padding: 8px 10px;
    background: #FCFAF8;
    border: 1px solid #E9E4E0;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.6;
    color: #6E6E6E;
}

/* ============================== submit ==============================
   #EE1C25 is the spec's accent. With the remember box moved onto the app's shared
   --srcp-accent, this and the card's 2px outline are the only places it is left.

   IT DOES NOT LIFT AND IT DOES NOT CAST A SHADOW. The button used to rise a pixel on
   hover and drop a 22px red glow under it. Both are gone, and not only because they
   were asked to be: this is the one control on the page, the pointer is on it for the
   whole of the sign-in, and a control that moves under the cursor is a control you
   have to re-aim at. The state change is now carried by the fill alone - one property,
   one short transition - which is also the only thing that cannot cost a frame:
   background is composited, transform+box-shadow together were repainting a 46px bar
   and its glow on every hover.

   Three fills, getting darker as the button gets more committed: rest, hover, and the
   press. is-busy is the darkest, and it is where the button stays until the page goes. */
.lgn-submit {
    width: 100%;
    height: 46px;
    margin-top: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff;
    background: #EE1C25;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 120ms ease;
}

    .lgn-submit:hover {
        background: #D81820;
    }

    .lgn-submit:active {
        background: #C31419;
    }

    /* Keyboard only. :focus-visible and not :focus, so a mouse click does not leave a
       ring behind on the button it just pressed. */
    .lgn-submit:focus-visible {
        outline: 2px solid #C31419;
        outline-offset: 2px;
    }

    /* While the postback is in flight. The button is NOT disabled - a disabled submit is
       dropped from the submission - it just stops looking clickable, and the script
       swallows any further clicks. :hover and :active are answered as well, because the
       pointer is still sitting on it and must not be able to lighten it back. */
    .lgn-submit.is-busy,
    .lgn-submit.is-busy:hover,
    .lgn-submit.is-busy:active {
        background: #B71218;
        cursor: default;
    }

/* Guarantees a gap under the card on a short window and absorbs everything left
   over on a tall one, so the column stays top-aligned instead of centring. */
.lgn-tail {
    flex: 1;
    min-height: 28px;
}

/* ============================== narrow screens ==============================
   The card is already width:100% inside a 392px cap, so the only thing that needs
   saying is that its 30px side padding is too generous once the card is the width
   of a phone, and that 64px of empty space above the lockup is a lot of a short
   screen to spend on nothing. */
@media (max-width: 420px) {
    .lgn-brand {
        margin-top: 44px;
    }

    .lgn-cardbody {
        padding: 24px 18px 26px;
    }
}