/* ==========================================================================
   Steel ERP sign-in screens - login, forgot password, reset and confirm.

   These four pages are the only thing that loads this file, and they load
   nothing else. The old sign-in screens extended layout.app and inherited
   style.css, so every change to the ERP chrome could move the login box.

   The look is a mill office after dark, not a product landing page: solid
   panel, square fields, signage type for the company name, and through the
   window a hot strip mill still running. No glass, no glow rings, no drifting
   particles - everything that moves is a machine doing its job.

   Height is a hard constraint: the whole login page has to sit inside a
   1366x768 laptop screen without scrolling, so the panel is measured, not
   padded out. Sizes below are deliberate - do not loosen them one at a time.
   ========================================================================== */

:root {
    --sa-ink: #e9edf3;
    --sa-ink-2: #aab4c2;
    --sa-muted: #7d8794;
    --sa-faint: #666f7c;

    --sa-panel: #11151b;
    --sa-edge: rgba(255, 255, 255, .075);
    --sa-edge-2: rgba(255, 255, 255, .13);

    --sa-ember: #e2600f;
    --sa-ember-hi: #f4760f;
    --sa-ember-dim: #b8560f;

    --sa-danger: #e26060;
    --sa-success: #4caf82;

    --sa-t: .14s ease;
}

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

html, body { height: 100%; }

body.sa {
    margin: 0;
    min-height: 100%;
    font-family: "Inter", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sa-ink);
    background: #080b0f;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   The room: a cold window high on the right, a furnace door open low on the
   left, brushed metal, film grain, and the corners falling away.
   -------------------------------------------------------------------------- */

.sa-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(176deg, #0f141a 0%, #0b0f14 52%, #07090d 100%);
}

/* The one moving thing on the screen. It breathes the way a furnace does:
   slowly, and not quite the same twice. */
.sa-bg__glow {
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(48% 42% at 14% 88%, rgba(206, 88, 20, .30) 0%, rgba(206, 88, 20, 0) 68%),
        radial-gradient(38% 34% at 6% 96%, rgba(240, 132, 44, .16) 0%, rgba(240, 132, 44, 0) 70%),
        radial-gradient(52% 44% at 88% 6%, rgba(96, 124, 166, .16) 0%, rgba(96, 124, 166, 0) 66%);
    animation: saBreathe 19s ease-in-out infinite alternate;
}

@keyframes saBreathe {
    from { opacity: .78; transform: translate3d(0, 0, 0) scale(1); }
    to   { opacity: 1; transform: translate3d(-10px, -14px, 0) scale(1.035); }
}

/* --------------------------------------------------------------------------
   The rolling mill along the floor: reheated slab in from the left, a two-high
   stand that rolls it thinner, then the roller table out to the coiler. Low
   contrast on purpose - it should read as the room the panel is standing in,
   not as an illustration.

   Every speed here comes from one number: the strip travels 30 view units a
   second. A roll of radius r covers 2*PI*r in one turn, so its duration is
   2*PI*r/30 - 9.2s for the 44-unit work rolls, 4.61s for the 22-unit table
   rolls, 9.42s for the 45-unit coil - and the surface marks, 50 units apart,
   step one gap every 1.67s. Change one of these and the others have to follow,
   or the strip will look like it is skidding over the rolls.

   The top work roll turns the other way: its underside is what carries the
   strip forward, so it has to run opposite the rolls underneath.

   Each spinning group carries an unpainted guard circle of the roll's own
   radius. It draws nothing; it is there so `transform-box: fill-box` measures
   the full circle and the marks turn about the roll's centre instead of about
   the bounding box of the marks themselves.
   -------------------------------------------------------------------------- */

.sa-bg__mill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    opacity: .72;
}

.sa-mill__spin {
    transform-box: fill-box;
    transform-origin: center;
    animation-name: saRoll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.sa-mill__spin--table { animation-duration: 4.61s; }
.sa-mill__spin--work { animation-duration: 9.2s; }
.sa-mill__spin--coil { animation-duration: 9.42s; }
.sa-mill__spin--rev { animation-direction: reverse; }

@keyframes saRoll { to { transform: rotate(360deg); } }

.sa-mill__flow { animation: saFlow 1.67s linear infinite; }

@keyframes saFlow { to { transform: translateX(50px); } }

/* Steam off the descaling spray, rising and thinning out. */
.sa-mill__puff {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: saPuff 7.2s ease-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes saPuff {
    0%   { opacity: 0; transform: translateY(0) scale(.45); }
    16%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-64px) scale(2); }
}

/* Scale breaking off the strip where the rolls bite it. */
.sa-mill__spark {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: saScale 2.8s linear infinite;
    animation-delay: var(--d, 0s);
}

@keyframes saScale {
    0%   { opacity: 0; transform: translate(0, 0); }
    10%  { opacity: 1; }
    70%  { opacity: .7; }
    100% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, -24px)); }
}

/* Brushed metal: hairlines too fine to read as a pattern, only as a surface. */
.sa-bg__brushed {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, .016) 0px,
            rgba(255, 255, 255, .016) 1px,
            transparent 1px,
            transparent 4px);
}

/* Grain, so the gradients stop looking like gradients. */
.sa-bg__grain {
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.sa-bg__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(78% 66% at 50% 42%, transparent 0%, rgba(0, 0, 0, .34) 72%, rgba(0, 0, 0, .62) 100%);
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.sa-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px 38px;
}

.sa-shell { width: 100%; max-width: 384px; }

.sa-rise { animation: saRise .45s ease-out both; animation-delay: var(--d, 0s); }

@keyframes saRise {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

.sa-card {
    padding: 26px 28px 24px;
    background: linear-gradient(180deg, #151b24 0%, #10151d 48%, #0d1219 100%);
    border: 1px solid var(--sa-edge);
    border-radius: 4px;
    /* A hairline of light along the top edge: it is what stops a dark panel
       reading as a hole cut in the page. */
    box-shadow:
        0 26px 60px -34px rgba(0, 0, 0, .95),
        inset 0 1px 0 rgba(255, 255, 255, .055);
}

/* --------------------------------------------------------------------------
   Company wordmark, on one line with the product name. The client's own logo
   when there is one, otherwise their name in signage type - never a generic
   icon in a rounded square.
   -------------------------------------------------------------------------- */

.sa-brand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 13px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sa-brand__logo { display: block; max-width: 170px; max-height: 32px; object-fit: contain; }

.sa-brand__name {
    margin: 0;
    min-width: 0;
    font-family: "Oswald", "Hind Siliguri", "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: #f2f5f9;
}

.sa-brand__sub {
    margin: 0;
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sa-faint);
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.sa-head { margin-bottom: 18px; }

.sa-head h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--sa-ink);
}

.sa-head p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--sa-muted); }

/* --------------------------------------------------------------------------
   Fields. Square, the way every other form in this ERP is.
   -------------------------------------------------------------------------- */

.sa-field { margin-bottom: 13px; }

.sa-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sa-muted);
}

/* A label with something beside it - the recovery link next to Password. */
.sa-label--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.sa-label--row label { cursor: pointer; }

.sa-control { position: relative; }

.sa-input {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    font: inherit;
    font-size: 14px;
    color: var(--sa-ink);
    background: rgba(255, 255, 255, .028);
    border: 1px solid rgba(255, 255, 255, .115);
    border-radius: 0;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
    transition: border-color var(--sa-t), background var(--sa-t), box-shadow var(--sa-t);
}

.sa-input::placeholder { color: #5d6672; }

.sa-input:hover { border-color: rgba(255, 255, 255, .2); }

.sa-input:focus {
    background: rgba(255, 255, 255, .052);
    border-color: rgba(255, 255, 255, .24);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), inset 0 -2px 0 0 var(--sa-ember);
}

.sa-input.is-invalid { border-color: rgba(226, 96, 96, .6); }
.sa-input.is-invalid:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), inset 0 -2px 0 0 var(--sa-danger); }

.sa-input:-webkit-autofill,
.sa-input:-webkit-autofill:hover,
.sa-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sa-ink);
    -webkit-box-shadow: 0 0 0 60px #171c23 inset;
    caret-color: var(--sa-ink);
}

.sa-input[type="password"] { padding-right: 42px; }

.sa-reveal {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sa-faint);
    font-size: 13px;
    cursor: pointer;
    transition: color var(--sa-t);
}

.sa-reveal:hover { color: var(--sa-ink-2); }

.sa-error { margin: 6px 0 0; font-size: 12px; color: var(--sa-danger); }

.sa-hint {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 7px 0 0;
    font-size: 12px;
    color: var(--sa-ink-2);
}

.sa-hint.is-on { display: flex; }
.sa-hint i { color: var(--sa-ember-hi); font-size: 11px; }

/* --------------------------------------------------------------------------
   Password strength - reset screen only
   -------------------------------------------------------------------------- */

.sa-meter { margin-top: 9px; }

.sa-meter__track { display: flex; gap: 4px; }

.sa-meter__track span {
    flex: 1 1 0;
    height: 3px;
    background: rgba(255, 255, 255, .1);
    transition: background .25s ease;
}

.sa-meter__text { margin: 7px 0 0; font-size: 11.5px; color: var(--sa-faint); }

.sa-meter[data-level="1"] .sa-meter__track span:nth-child(-n+1) { background: #c9563f; }
.sa-meter[data-level="2"] .sa-meter__track span:nth-child(-n+2) { background: #c98a3f; }
.sa-meter[data-level="3"] .sa-meter__track span:nth-child(-n+3) { background: #b3a13f; }
.sa-meter[data-level="4"] .sa-meter__track span { background: var(--sa-success); }

/* --------------------------------------------------------------------------
   Options row
   -------------------------------------------------------------------------- */

.sa-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 16px;
    flex-wrap: wrap;
}

.sa-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--sa-ink-2);
    cursor: pointer;
    user-select: none;
}

.sa-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1px solid var(--sa-edge-2);
    border-radius: 0;
    background: rgba(255, 255, 255, .032);
    cursor: pointer;
    transition: background var(--sa-t), border-color var(--sa-t);
}

.sa-check input:checked {
    border-color: var(--sa-ember);
    background: var(--sa-ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.sa-check input:focus-visible { outline: 1px solid var(--sa-ember); outline-offset: 2px; }

.sa-link {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sa-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--sa-t), border-color var(--sa-t);
}

.sa-link:hover { color: var(--sa-ink); border-bottom-color: var(--sa-ember); }

/* --------------------------------------------------------------------------
   Button. Solid paint, square, and it moves when you press it.
   -------------------------------------------------------------------------- */

.sa-btn {
    width: 100%;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 0;
    font-family: "Oswald", "Hind Siliguri", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #ed6a13 0%, #dc590c 54%, #c74e09 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 1px 2px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: background var(--sa-t), box-shadow var(--sa-t), transform var(--sa-t);
}

.sa-btn:hover { background: linear-gradient(180deg, #f87716 0%, #e8620e 54%, #d3550a 100%); }

.sa-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.sa-btn:focus-visible { outline: 1px solid var(--sa-ember-hi); outline-offset: 3px; }

.sa-btn.is-busy {
    pointer-events: none;
    background: var(--sa-ember-dim);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.sa-btn.is-busy .sa-btn__label { opacity: .7; }

.sa-btn.is-busy::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: saSpin .7s linear infinite;
}

@keyframes saSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.sa-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    padding: 9px 12px;
    border-left: 2px solid transparent;
    font-size: 12.5px;
    line-height: 1.45;
}

.sa-alert i { margin-top: 2px; font-size: 12px; }

.sa-alert--danger {
    border-left-color: var(--sa-danger);
    background: rgba(226, 96, 96, .09);
    color: #efc4c4;
}

.sa-alert--danger i { color: var(--sa-danger); }

.sa-alert--success {
    border-left-color: var(--sa-success);
    background: rgba(76, 175, 130, .09);
    color: #bfe4d2;
}

.sa-alert--success i { color: var(--sa-success); }

.sa-alert ul { margin: 0; padding-left: 16px; }

/* --------------------------------------------------------------------------
   reCAPTCHA. The widget is a fixed 304x78 iframe, so it is scaled to fit the
   panel and the wrapper is given the scaled height - otherwise the untouched
   layout box leaves a band of dead space under it.
   -------------------------------------------------------------------------- */

.sa-captcha {
    display: flex;
    justify-content: center;
    height: 70px;
    margin: 0 0 14px;
    overflow: hidden;
}

.sa-captcha > div { transform: scale(.88); transform-origin: top center; }

/* --------------------------------------------------------------------------
   Panel foot
   -------------------------------------------------------------------------- */

.sa-card__foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sa-edge);
    font-size: 12.5px;
    color: var(--sa-faint);
}

.sa-card__foot a {
    color: var(--sa-ink-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--sa-t), border-color var(--sa-t);
}

.sa-card__foot a:hover { color: var(--sa-ink); border-bottom-color: var(--sa-ember); }

/* --------------------------------------------------------------------------
   Page foot: one line under the panel. The screen's secondary route - the
   employee portal on the login screen - sits in the same line as the build
   credit rather than in the panel, so the panel holds nothing but the form.
   -------------------------------------------------------------------------- */

.sa-foot {
    margin: 16px 0 0;
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(170, 184, 204, .34);
}

.sa-foot a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--sa-t), border-color var(--sa-t);
}

.sa-foot a:hover { color: rgba(170, 184, 204, .66); }

/* The one link here that is a way in, rather than a credit, so it carries
   a little more light than the rest of the line. */
.sa-foot__action { color: rgba(170, 184, 204, .52); }
.sa-foot__action:hover { color: rgba(233, 237, 243, .9); border-bottom-color: rgba(226, 96, 15, .5); }

.sa-foot__sep { margin: 0 7px; opacity: .45; }

/* --------------------------------------------------------------------------
   Back to sign in
   -------------------------------------------------------------------------- */

.sa-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: .03em;
    color: var(--sa-faint);
    text-decoration: none;
    transition: color var(--sa-t);
}

.sa-back i { font-size: 10px; }
.sa-back:hover { color: var(--sa-ink-2); }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
    /* The whole line still fits across a phone, just small - dimmed further
       so it stays scenery rather than a picture under the panel. */
    .sa-bg__mill { opacity: .5; }
    .sa-stage { padding: 22px 14px 32px; }
    .sa-card { padding: 20px 18px 18px; }
    .sa-brand { flex-wrap: wrap; gap: 4px 12px; }
    .sa-brand__name { font-size: 17px; }
}

/* A short laptop screen scrolls from the top rather than clipping the panel. */
@media (max-height: 620px) {
    .sa-stage { align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Wide viewports: a 4K monitor, or the browser zoomed out below 100%.

   The mill is sized off the viewport width while the panel is sized in px, so
   past a full-HD width the machine kept growing as the panel shrank. From here
   on the line holds its 1920px size in the middle of the floor and fades out
   at both ends, so the scene and the panel scale together.
   -------------------------------------------------------------------------- */

@media (min-width: 1921px) {
    .sa-bg__mill {
        left: 50%;
        right: auto;
        width: 1920px;
        margin-left: -960px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sa-bg__glow,
    .sa-mill__spin,
    .sa-mill__flow,
    .sa-mill__puff,
    .sa-mill__spark,
    .sa-rise {
        animation: none !important;
    }

    .sa-rise { opacity: 1; transform: none; }
    .sa-btn:active { transform: none; }
}