/**
 * Sign-in screen.
 *
 * Standalone stylesheet for the same reason as settings.css: the project has
 * no LESS build, so style.css is a compiled artefact nobody here can
 * regenerate. Class names are prefixed and stay clear of .form-group /
 * .form-control, which bootstrap-material rewrites on load into the
 * underline-and-floating-label treatment.
 *
 * The dark half deliberately repeats the application's own sidebar colour, so
 * signing in looks like the front door of this system rather than a generic
 * form that happens to precede it.
 */

.au {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    font-family: "Roboto", "Helvetica Neue", Helvetica, sans-serif;
    color: #16222c;
    overflow: auto;
}

/* --------------------------------------------------------------- the brand */

.au__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px;
    background: linear-gradient(160deg, #1f2d3a 0%, #16222c 55%, #101a22 100%);
    color: #fff;
    overflow: hidden;
}

/* A slow teal bloom behind the wordmark, and a fine diagonal weave over it —
   enough texture that the panel is not a flat rectangle, quiet enough that
   nobody looks at it twice. */
.au__brand::before {
    content: "";
    position: absolute;
    top: -22%;
    left: -18%;
    width: 78%;
    padding-bottom: 78%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 150, 136, 0.42) 0%, rgba(0, 150, 136, 0) 68%);
    pointer-events: none;
}

.au__brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.028) 0px,
        rgba(255, 255, 255, 0.028) 1px,
        transparent 1px,
        transparent 7px
    );
    pointer-events: none;
}

.au__brand > * { position: relative; z-index: 1; }

.au__mark {
    display: flex;
    align-items: center;
    gap: 13px;
}

.au__mark-glyph {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: linear-gradient(135deg, #00b3a1 0%, #00796b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 150, 136, 0.35);
}

.au__mark-glyph svg { width: 21px; height: 21px; display: block; }

.au__wordmark {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: #fff;
}

/* A thought about money, not a description of the business: the panel used
   to announce what this system is for, which is not something a stranger who
   found the address needs to know. */
.au__quote {
    margin: 0;
}

.au__quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    /* Scales with the panel so the quote fills its half at any width instead
       of sitting at one fixed size on a 1900px screen. */
    font-size: clamp(21px, 2vw, 34px);
    font-weight: 300;
    line-height: 1.34;
    color: #eaf2f1;
    quotes: none;
    text-wrap: balance;

    /* A reading measure, not a column — and set here rather than on the
       figure, because ch resolves against the element's own font size: on the
       figure it was measuring 16px characters and capping the quote at less
       than half the width intended. The first version also picked 24ch, tuned
       to the shortest line in the set, which broke the longest one into seven
       ragged lines down the middle of a very wide panel. */
    max-width: min(26ch, 100%);
}

.au__quote blockquote::before {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-bottom: 20px;
    background: #00b3a1;
}

.au__quote figcaption {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    letter-spacing: 0.3px;
}

.au__quote figcaption::before { content: "— "; }

.au__foot {
    margin: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 12px;
}

/* ---------------------------------------------------------------- the form */

.au__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: #fff;
}

.au__form {
    width: 100%;
    max-width: 372px;
}

.au__title {
    margin: 0 0 4px;
    padding: 0;
    font-size: 25px;
    font-weight: 500;
    color: #16222c;
}

.au__lede {
    margin: 0 0 26px;
    color: #6b7a85;
    font-size: 13.5px;
}

.au__field { margin-bottom: 16px; }

.au__field label {
    display: block;
    margin-bottom: 6px;
    color: #46555f;
    font-size: 12.5px;
    font-weight: 500;
}

.au__input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #d8dfe3;
    border-radius: 8px;
    background: #fff;
    color: #16222c;
    font-size: 14.5px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.au__input:hover { border-color: #c3ced4; }

.au__input:focus {
    outline: none;
    border-color: #009688;
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.15);
}

.au__field.has-error .au__input {
    border-color: #d0021b;
    box-shadow: 0 0 0 3px rgba(208, 2, 27, 0.1);
}

/* Password box with the reveal control tucked inside it, so the field keeps
   one outline instead of sprouting a checkbox underneath. */
.au__password { position: relative; }

.au__password .au__input { padding-right: 46px; }

.au__reveal {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #90a0a9;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.au__reveal:hover { background: #f0f4f5; color: #46555f; }

/* Colour stated on the glyph itself: the theme paints icons inside buttons
   with its own accent, which turned the reveal control teal and made it read
   as an action rather than a quiet affordance. */
.au__reveal .material-icons { font-size: 19px; color: inherit; }

.au__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 22px;
}

.au__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #46555f;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.au__check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #009688;
    cursor: pointer;
}

.au__link {
    color: #00796b;
    font-size: 13px;
    text-decoration: none;
}

.au__link:hover,
.au__link:focus { color: #00594e; text-decoration: underline; }

/* -------------------------------------------------------------- the buttons */

.au__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.au__btn:active { transform: translateY(1px); }

.au__btn--primary {
    background: #009688;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 121, 107, 0.3);
}

.au__btn--primary:hover,
.au__btn--primary:focus { background: #00877a; color: #fff; }

/* The busy state while the form is being sent, so a slow connection does not
   look like a dead button and get clicked again. */
.au__btn--primary[disabled] {
    background: #6fb3ac;
    box-shadow: none;
    cursor: default;
}

.au__btn--key {
    margin-top: 4px;
    background: #fff;
    border-color: #d8dfe3;
    color: #16222c;
}

.au__btn--key:hover,
.au__btn--key:focus { background: #f5f8f8; border-color: #c3ced4; }

.au__btn--key[disabled] { opacity: 0.55; cursor: default; }

.au__btn .material-icons { font-size: 19px; color: inherit; }

.au__btn--key .material-icons { color: #6b7a85; }

/* A rule with the word set into it, marking the second way in without
   presenting it as an equal-weight choice. */
.au__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: #9aa7b0;
    font-size: 11.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.au__or::before,
.au__or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e4e9ec;
}

/* -------------------------------------------------------------- the notices */

.au__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.45;
}

/* color: inherit, because the theme paints material icons with its accent —
   a teal exclamation mark inside a red error box reads as decoration. */
.au__alert .material-icons {
    font-size: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: inherit;
}

.au__alert--error {
    background: #fdeceb;
    border-color: #f3c8c4;
    color: #9c2820;
}

.au__alert--success {
    background: #e8f5e9;
    border-color: #c3e6c8;
    color: #256d2e;
}

/* --------------------------------------------------------------- caps lock */

.au__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 7px 0 0;
    color: #8a5a00;
    font-size: 12.5px;
}

.au__hint[hidden] { display: none; }

.au__hint .material-icons { font-size: 16px; color: inherit; }

/* The passkey failure sits under the button that caused it. */
.au__alert--key { margin: 12px 0 0; }

/* ------------------------------------------------------- reset-page extras */

/* The requirement, stated before the person is rejected by it. */
.au__note {
    margin: 7px 0 0;
    color: #8a959d;
    font-size: 12.5px;
}

.au__hint--mismatch { color: #c0392b; }

.au__back {
    margin: 22px 0 0;
    text-align: center;
}

.au__back .au__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.au__back .material-icons { font-size: 17px; color: inherit; }

/* The wordmark doubles as the way home from the reset pages. */
a.au__mark { text-decoration: none; }

a.au__mark:hover .au__wordmark,
a.au__mark:focus .au__wordmark { color: #b9e6e0; }

/* The account being changed: shown, not editable. */
.au__field-label {
    display: block;
    margin-bottom: 6px;
    color: #46555f;
    font-size: 12.5px;
    font-weight: 500;
}

.au__readonly {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0 13px;
    height: 44px;
    border: 1px solid #e4e9ec;
    border-radius: 8px;
    background: #f5f7f8;
    color: #46555f;
    font-size: 14.5px;
    overflow: hidden;
}

.au__readonly span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.au__readonly .material-icons { font-size: 18px; color: #90a0a9; flex: 0 0 auto; }

/* ---------------------------------------------------------------- languages */

.au__langs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 28px;
}

.au__lang {
    padding: 5px 11px;
    border-radius: 6px;
    color: #8a959d;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.au__lang:hover,
.au__lang:focus { background: #f0f4f5; color: #46555f; text-decoration: none; }

.au__lang.is-active { background: #e6f4f2; color: #00796b; font-weight: 500; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .au {
        position: static;
        min-height: 100vh;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .au__brand {
        padding: 22px 24px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* The pitch is the first thing to go: on a phone the form is the point. */
    .au__pitch,
    .au__foot { display: none; }

    .au__panel { padding: 34px 22px 44px; align-items: flex-start; }
}

@media (max-width: 380px) {
    .au__row { flex-direction: column; align-items: flex-start; gap: 10px; }
}