/* ==============================================================================================
   09_086: the login area -- sign in, two-factor, request login data (index.php) and set new
   password (scripts/login/change.php). Header band + footer: App\View\Services\LoginChrome.

   Scope: everything hangs below `body.lg`. The class is added in scripts/html_look.inc.php AFTER
   the system-state check (which compares against the bare `index` -- with `index lg` a closed
   system would show "Service Unavailable" instead of the login). `body.lg` also has to win against
   the oul stylesheet layouts/default/css/main.css (global `html, body`, `input`, `a:link`,
   `input.required`) and css/bi/base.css (`body` padding + `height: 100vh`, `a:hover` border), which
   stay loaded because login.js needs the oul scripts (jQuery 1.4.4, jquery.form, MD5).

   System fonts only, no web fonts, no dark mode. No width is sized to a word: German texts run up
   to 30 % longer, the label row of the password field wraps instead.
   ============================================================================================== */

body.lg {
    --lg-primary: #0e5f6b;
    --lg-primary-hover: #0b4f59;
    --lg-focus: #14707f;
    --lg-focus-ring: 0 0 0 3px rgba(20, 112, 127, .18);
    --lg-line: #d6dee5;
    --lg-text: #1f2933;
    --lg-text-soft: #4a5966;
    --lg-muted: #5f6a76;
    --lg-label: #1f4e8c;
    --lg-field-line: #7c8894;

    background: #fbfcfd;
    color: var(--lg-text);
    display: flex;
    flex-direction: column;
    font: 400 14px/1.45 "Segoe UI", system-ui, sans-serif;
    height: auto;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    width: auto;
}

body.lg .hide,
body.lg [hidden] {
    display: none !important;
}

/* ---- Header band ---------------------------------------------------------------------------- */

body.lg .lg-hd {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid var(--lg-line);
    box-shadow: 0 3px 0 var(--lg-primary); /* the 3 px primary line BELOW the 1 px line */
    box-sizing: border-box;
    display: flex;
    flex: none;
    height: 96px;
    margin-bottom: 3px;
    padding: 0 64px;
    position: relative;
    z-index: 1;
}

body.lg .lg-hd--left   { justify-content: flex-start; }
body.lg .lg-hd--center { justify-content: center; }
body.lg .lg-hd--right  { justify-content: flex-end; }

body.lg .lg-hd__in {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

body.lg .lg-hd__title {
    color: #1f2933;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Run level outside production (Test System / Local). */
body.lg .lg-hd__run {
    background: #fdf1de;
    border: 1px solid #efd3a6;
    border-radius: 999px;
    color: #7a4a00;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 10px;
    white-space: nowrap;
}

/* ---- Main area and card --------------------------------------------------------------------- */

body.lg .lg-main {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    padding: 40px 16px;
}

body.lg .lg-card {
    background: #ffffff;
    border: 1px solid var(--lg-line);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(23, 43, 63, .18);
    box-sizing: border-box;
    max-width: 100%;
    padding: 36px 40px;
    width: 440px;
}

/* 18 px between the elements. The card and the forms are flex columns; the three views are NOT:
   login.js switches them with jQuery 1.4.4 fadeIn/fadeOut, which writes `display: block` inline --
   a flex `gap` on the view would be lost after the first switch. Hence margins between siblings. */
body.lg .lg-card,
body.lg .lg-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.lg .lg-view {
    display: block;
}

/* 0,3,1 -- above `body.lg .lg-card p` (0,2,2), which zeroes the margins of paragraphs. */
body.lg .lg-card .lg-view > * + * {
    margin-top: 18px;
}

/* An empty notice box is hidden and must not push the heading down. */
body.lg .lg-card .lg-view > .lg-note:empty + * {
    margin-top: 0;
}

body.lg .lg-logo {
    align-self: center;
    display: block;
    height: auto;
    max-width: 100%;
    width: 207px;
}

body.lg .lg-card h1 {
    color: var(--lg-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}

body.lg .lg-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.lg .lg-card p,
body.lg .lg-lead {
    color: var(--lg-text-soft);
    font-size: 14px;
    margin: 0;
    padding: 0;
}

/* The oul/base stylesheets style every <form> and <fieldset> as a grey panel. */
body.lg form {
    background: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

/* ---- Fields ---------------------------------------------------------------------------------- */

body.lg .lg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

body.lg .lg-label {
    color: var(--lg-label);
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

/* Password field with the "Forgot password?" link right of its label. In the DOM the link comes
   AFTER the input and the eye button (tab order: fields, eye, link, button); the grid moves it up. */
body.lg .lg-field--pw {
    align-items: end;
    column-gap: 12px;
    display: grid;
    grid-template-areas:
        "label link"
        "input input";
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
}

body.lg .lg-field--pw > .lg-label { grid-area: label; }
body.lg .lg-field--pw > .lg-pw    { grid-area: input; }
body.lg .lg-field--pw > .lg-field__link {
    font-size: 13px;
    grid-area: link;
    justify-self: end;
    line-height: 1.3;
    text-align: right;
}

body.lg .lg-input {
    background: #ffffff;
    border: 1px solid var(--lg-field-line);
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--lg-text);
    font: inherit;
    font-size: 14px;
    height: 36px;
    margin: 0;
    max-width: none;
    padding: 0 10px;
    width: 100%;
}

body.lg .lg-input:focus {
    border-color: var(--lg-focus);
    box-shadow: var(--lg-focus-ring);
    margin: 0;
    outline: none;
}

/* login.js / change.js mark an empty required field with `.required` (main.css: red, 1px). */
body.lg .lg-input.required {
    border-color: #b03a2e;
    margin: 0;
}

/* Verification code: fixed-width digits. */
body.lg .lg-input--code {
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 20px;
    height: 44px;
    letter-spacing: 6px;
}

/* Password input + eye button. */
body.lg .lg-pw {
    position: relative;
}

body.lg .lg-pw .lg-input {
    padding-right: 44px;
}

body.lg .lg-pw__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #4a5966;
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
}

body.lg .lg-pw__toggle:hover {
    color: var(--lg-text);
}

body.lg .lg-pw__toggle:focus-visible {
    box-shadow: var(--lg-focus-ring);
    outline: 1px solid var(--lg-focus);
}

body.lg .lg-pw__toggle svg {
    display: block;
    height: 18px;
    width: 18px;
}

body.lg .lg-pw__toggle .lg-pw__off,
body.lg .lg-pw__toggle[aria-pressed="true"] .lg-pw__on {
    display: none;
}

body.lg .lg-pw__toggle[aria-pressed="true"] .lg-pw__off {
    display: block;
}

/* ---- Buttons and links ------------------------------------------------------------------------ */

body.lg .lg-btn {
    background: var(--lg-primary);
    border: 1px solid var(--lg-primary);
    border-radius: 4px;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    width: 100%;
}

body.lg .lg-btn:hover {
    background: var(--lg-primary-hover);
    border-color: var(--lg-primary-hover);
    color: #ffffff;
}

body.lg .lg-btn:focus-visible {
    box-shadow: var(--lg-focus-ring);
    outline: 1px solid var(--lg-focus);
    outline-offset: 1px;
}

body.lg .lg-btn[disabled],
body.lg .lg-btn[disabled]:hover {
    background: #f7f9fa;
    border-color: #c4ccd4;
    color: #8a96a2;
    cursor: not-allowed;
}

body.lg a,
body.lg a:link,
body.lg a:visited {
    border-bottom: 0;
    color: var(--lg-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.lg a:hover,
body.lg a:focus {
    border-bottom: 0;
    color: var(--lg-primary-hover);
}

body.lg a:focus-visible {
    border-radius: 2px;
    box-shadow: var(--lg-focus-ring);
    outline: none;
}

body.lg .lg-links {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 8px 16px;
    justify-content: space-between;
}

body.lg .lg-links--center {
    justify-content: center;
}

/* ---- Notice boxes (between logo and heading) --------------------------------------------------- */

body.lg .lg-note {
    align-items: flex-start;
    border-radius: 8px;
    display: flex;
    font-size: 14px;
    gap: 12px;
    line-height: 1.45;
    padding: 14px 18px;
}

body.lg .lg-note:empty {
    display: none;
}

body.lg .lg-note__icon {
    display: block;
    flex: none;
    height: 18px;
    margin-top: 1px;
    width: 18px;
}

body.lg .lg-note__body {
    min-width: 0;
}

body.lg .lg-note__text {
    color: inherit;
    font-size: 14px;
}

body.lg .lg-note__title {
    display: block;
    font-weight: 700;
}

body.lg .lg-note ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

body.lg .lg-note--info {
    background: #e3edf9;
    color: #1b4676;
}

body.lg .lg-note--info .lg-note__icon {
    color: #2a6299;
}

body.lg .lg-note--error {
    background: #fbe6e3;
    color: #9e2f22;
}

body.lg .lg-note--error .lg-note__icon {
    color: #b03a2e;
}

/* ---- Password rules ----------------------------------------------------------------------------- */

body.lg .lg-rules {
    color: var(--lg-text-soft);
    font-size: 12.5px;
    margin: -6px 0 0;
}

body.lg .lg-rules__title {
    display: block;
    font-weight: 600;
}

body.lg .lg-rules ul {
    margin: 2px 0 0;
    padding-left: 18px;
}

/* ---- Footer ------------------------------------------------------------------------------------ */

body.lg .lg-ft {
    align-items: center;
    background: #ffffff;
    border-top: 1px solid var(--lg-line);
    box-sizing: border-box;
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    min-height: 72px;
    padding: 12px 64px;
}

body.lg .lg-ft__by {
    align-items: center;
    color: var(--lg-muted);
    display: flex;
    font-size: 13px;
    gap: 10px;
}

body.lg .lg-ft__vendor,
body.lg .lg-ft__vendor:link,
body.lg .lg-ft__vendor:visited {
    display: inline-flex;
    text-decoration: none;
}

body.lg .lg-ft__mark {
    display: block;
    height: auto;
    width: 150px;
}

body.lg .lg-ft__meta {
    color: var(--lg-muted);
    font-size: 11.5px;
    margin: 0;
    padding: 0;
}

body.lg .lg-ft__sep {
    padding: 0 2px;
}

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

@media (max-width: 600px) {
    body.lg .lg-hd,
    body.lg .lg-ft {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.lg .lg-hd {
        height: 72px;
    }

    body.lg .lg-hd__title {
        font-size: 22px;
    }

    body.lg .lg-main {
        padding: 24px 16px;
    }

    body.lg .lg-card {
        padding: 28px 20px;
    }
}