/* ============================================
   Connexion (templates/users/login.html)
   ============================================
   The desk of the app with the brand on it and one white sheet, the only element of
   the page that casts the paper shadow (spec 13.1). Role tokens only.

   The page loads tokens.css, base.css (reset, body, focus ring, [hidden], scrollbars,
   icons), components.css (the button, field and callout it uses: .btn--primary,
   .btn--lg, .btn--block, .field, .input, .callout) and this file, which holds the page
   layout and the password field's « Afficher » toggle only. */

/* ---- Page layout ---------------------------------------------------------- */

.login-desk {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--space-6) var(--space-7);
}

/* From 780 px: the brand and its sentence in a left column, the sheet on the right.
   The block centres itself on the desk; under 780 px everything stacks (end of file). */
.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    max-width: 920px;
    margin: auto;
}
/* The left column: the brand and its sentence; it may shrink with the window. */
.login-intro { min-width: 0; }

/* The brand: the logo (three bars on an ink square, the tallest in Sotis yellow),
   the name and the subtitle, as in the rail but at 40 px. */
.login-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.login-mark { flex: none; width: 40px; height: 40px; }
.login-mark .mark-bg { fill: var(--brand-mark); }
.login-mark .mark-bar { fill: var(--brand-bar); }
.login-mark .mark-spark { fill: var(--brand-spark); }
.login-brand-text { display: grid; min-width: 0; }
.login-brand-name {
    color: var(--ink);
    font-size: var(--text-lead);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}
.login-brand-sub {
    color: var(--ink-3);
    font-size: var(--text-s);
    line-height: var(--leading-snug);
}
.login-pitch {
    max-width: 26em;
    margin-top: var(--space-6);
    color: var(--ink-2);
    font-size: var(--text-l);
    line-height: var(--leading-normal);
}

/* THE sheet: white paper, 32 px of padding on this page (spec 7). */
.login-sheet {
    padding: var(--space-7);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-paper);
}
.login-title {
    margin-bottom: var(--space-5);
    color: var(--ink);
    font-size: var(--text-lead);
    font-weight: var(--weight-heading);
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.login-messages {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.login-form {
    display: grid;
    gap: var(--space-4);
}
.login-form .btn--block { margin-top: var(--space-2); }

.login-footer {
    margin-top: var(--space-6);
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 1.4;
    text-align: center;
}

/* The password field and its « Afficher » toggle (static/js/login.js shows the
   button, which ships hidden, and flips aria-pressed). The input keeps room for it. */
.password-field {
    position: relative;
    display: block;
}
.password-field .input { padding-right: 92px; }
/* Edge draws its own reveal button in password fields: the toggle is the only one. */
.password-field .input::-ms-reveal { display: none; }
.password-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    height: calc(var(--control-height) - 8px);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--ink-2);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.password-toggle:hover { background: var(--surface-hover); color: var(--ink); }
/* Pressed = the password shows: graphite tint and ink, as a selected control. */
.password-toggle[aria-pressed="true"] { background: var(--surface-selected); color: var(--ink); }
/* The ring sits right outside the button, inside the field's own border. */
.password-toggle:focus-visible { outline-offset: 0; }

/* Under 780 px the brand stacks above the sheet, with 16 px side gutters. */
@media (max-width: 779px) {
    .login-desk { padding: var(--space-6) var(--space-4); }
    .login-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
        max-width: 400px;
    }
    .login-pitch { margin-top: var(--space-3); font-size: var(--text-m); }
    .login-sheet { padding: var(--space-6); }
}