/* The sign-in page, every brand (.src/_login.php). Linked by .src/_head.php on that page only.
   Served plain with ?v=<filemtime>; there is no .min twin.

   Target: WCAG 2.2 AAA (Joaquim, 2026-10-03). Every colour pair here is checked by
   tests/Unit/Css/LoginCssContrastTest.php, which parses the two tone blocks below — keep their
   values literal hex so it can:
   - text, muted text, field text, alert text: 7:1 on their background (1.4.6);
   - field borders: 3:1 against the panel and the field (1.4.11);
   - the brand link (--lg-link) at 7:1 on the panel, and white on the call to action (--lg-cta)
     at 4.5:1 with the label set as large text (19px bold) — those two come from
     General\Policies\LoginBrandPolicy, printed inline by .src/_login.php, and its own test.
   Also: 44px targets (2.5.5), a 3px focus ring in the 7:1 link colour (2.4.13), 1.5 line height
   and no justified text (1.4.8), logical properties for Arabic. */

/* ── Tones ─────────────────────────────────────────────────────────────────── */
.lg.lg-dark {
    --lg-bg: #151515;
    --lg-fg: #f4f4f4;
    --lg-muted: #b5b5b5;
    --lg-field-bg: #1f1f1f;
    --lg-field-fg: #f4f4f4;
    --lg-field-border: #8a8a8a;
    --lg-divider: #3a3a3a;
    --lg-alert-danger-bg: #3d1a14;
    --lg-alert-danger-fg: #ffcfc2;
    --lg-alert-warning-bg: #3a2c0c;
    --lg-alert-warning-fg: #ffe2a8;
    --lg-alert-success-bg: #10301c;
    --lg-alert-success-fg: #b9f0cb;
    --lg-alert-info-bg: #0f2f38;
    --lg-alert-info-fg: #bfeaf5;
}

.lg.lg-light {
    --lg-bg: #ffffff;
    --lg-fg: #1f1f1f;
    --lg-muted: #545454;
    --lg-field-bg: #ffffff;
    --lg-field-fg: #1f1f1f;
    --lg-field-border: #767676;
    --lg-divider: #dedede;
    --lg-alert-danger-bg: #fdecec;
    --lg-alert-danger-fg: #8a1212;
    --lg-alert-warning-bg: #fff4e0;
    --lg-alert-warning-fg: #6b3d00;
    --lg-alert-success-bg: #e8f5ec;
    --lg-alert-success-fg: #14532d;
    --lg-alert-info-bg: #e6f4f8;
    --lg-alert-info-fg: #0b4652;
}

/* ── Frame: the brand picture, then the form panel ─────────────────────────── */
.lg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
    min-height: 100vh;
    /* index.php puts the page inside <main class="col">: cancel its gutters */
    margin-inline: -15px;
    background: var(--lg-bg);
    color: var(--lg-fg);
    font-size: 16px;
    line-height: 1.5;
    text-align: start;
}

/* the Google-only variants (DISCover, BYT, Brafa, LeaderApp360) never had a picture */
.lg.lg-solo {
    grid-template-columns: minmax(0, 1fr);
}

.lg > .kudzu-hero {
    max-width: none !important;
    flex: none !important;
    width: auto !important;
}

.lg-art {
    position: relative;
    min-height: 100%;
    background-size: cover;
    background-position: center;
}

/* ── Overview / Game dynamics / Features on the picture (components/login_info_tabs.php) ──
   An opaque card in the panel's tone, so its text keeps the tone's checked 7:1 pairs whatever the
   photo behind it (a translucent card over a photo has no contrast to measure). Selected tab: the
   tone's text colour, bold, and a 3px bar in --lg-link (7:1 on --lg-bg) — never colour alone.
   Text column at most 70ch (1.4.8 asks 80 or fewer). */
.lg-info {
    position: relative;
    margin: 32px;
    max-inline-size: 44rem;
    background: var(--lg-bg);
    color: var(--lg-fg);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.lg-info-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 16px 0;
    border-bottom: 1px solid var(--lg-divider);
}

.lg .lg-info-tab {
    min-height: 44px;
    margin-bottom: -1px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--lg-muted);
    font: inherit;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

.lg .lg-info-tab:hover {
    color: var(--lg-fg);
    border-bottom-color: var(--lg-muted);
}

.lg .lg-info-tab[aria-selected="true"] {
    color: var(--lg-fg);
    font-weight: 600;
    border-bottom-color: var(--lg-link);
}

.lg-info-panel {
    max-block-size: calc(100vh - 160px);
    overflow-y: auto;
    padding: 24px 28px 28px;
}

.lg-info-panel > * {
    max-inline-size: 70ch;
}

.lg-info-panel p,
.lg-info-panel ul,
.lg-info-panel ol {
    margin: 0 0 1.5em;
}

.lg-info-panel ul,
.lg-info-panel ol {
    padding-inline-start: 1.25em;
}

/* "Key learning objectives:" introduces the list under it: keep the two together */
.lg-info-panel p:has(+ ul, + ol) {
    margin-bottom: 0.5em;
}

.lg-info-panel li + li {
    margin-top: 0.5em;
}

.lg-info-panel > :last-child {
    margin-bottom: 0;
}

/* the card sits on --lg-bg, so the page-wide ring (--lg-link) keeps its 7:1; pull it inside the
   scrolling panel, whose overflow would clip an outer ring */
.lg .lg-info-panel:focus-visible {
    outline-offset: -3px !important;
}

.lg-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: var(--lg-bg);
}

.lg-box {
    width: 100%;
    max-width: 400px;
}

/* ── Heading ───────────────────────────────────────────────────────────────── */
.lg-logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.lg-logo img {
    width: auto;
    max-width: 100%;
    max-height: 56px;
}

.lg .lg-title {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
    color: var(--lg-fg);
}

.lg .lg-title:has(+ .lg-sub) {
    margin-bottom: 4px;
}

.lg .lg-sub {
    margin: 0 0 24px;
    color: var(--lg-muted);
}

/* ── Messages ──────────────────────────────────────────────────────────────── */
.lg-alert,
.lg-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 8px;
}

.lg-alert > svg,
.lg-note > svg {
    flex: none;
    margin-top: 4px;
}

.lg-alert a {
    color: inherit !important;
    font-weight: 600;
    text-decoration: underline;
}

.lg-alert-danger {
    background: var(--lg-alert-danger-bg);
    color: var(--lg-alert-danger-fg);
}

.lg-alert-warning {
    background: var(--lg-alert-warning-bg);
    color: var(--lg-alert-warning-fg);
}

.lg-alert-success {
    background: var(--lg-alert-success-bg);
    color: var(--lg-alert-success-fg);
}

.lg-alert-info,
.lg-note {
    background: var(--lg-alert-info-bg);
    color: var(--lg-alert-info-fg);
}

.lg-who {
    display: block;
    font-weight: 600;
    word-break: break-all;
}

/* ── Fields ────────────────────────────────────────────────────────────────── */
.lg-field {
    margin-bottom: 20px;
}

.lg .lg-field label {
    display: block;
    position: static;
    margin: 0 0 6px;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--lg-fg) !important;
}

.lg .lg-input {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--lg-field-border);
    border-radius: 8px;
    background: var(--lg-field-bg);
    color: var(--lg-field-fg);
    font: inherit;
    font-size: 16px;
}

.lg .lg-input:-webkit-autofill,
.lg .lg-input:-webkit-autofill:hover,
.lg .lg-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-field-fg) !important;
    box-shadow: 0 0 0 1000px var(--lg-field-bg) inset !important;
    caret-color: var(--lg-field-fg);
}

.lg .lg-code {
    font-size: 22px;
    letter-spacing: .3em;
    text-align: center;
}

.lg .lg-input[aria-invalid="true"] {
    border-width: 2px;
    border-color: var(--lg-alert-danger-fg);
}

.lg-pass {
    position: relative;
}

.lg-pass .lg-input {
    padding-inline-end: 52px;
}

/* the show/hide button: a 44px target inside the field's end */
.lg .lg-eye {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--lg-field-fg);
    font-size: 20px;
    cursor: pointer;
}

.lg .lg-eye [hidden] {
    display: none;
}

/* "Forgot password?" on its own line under the field, at body size (Joaquim, 2026-10-03) */
.lg-forgot {
    margin: 4px 0 0;
}

.lg .lg-check {
    color: var(--lg-fg);
    font-weight: 400;
}

.lg-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0 0 16px;
    font-size: 16px;
    cursor: pointer;
}

.lg-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--lg-cta);
}

/* the reset page reveals its mismatch message by removing [hidden]; .lg-alert's flex must not beat it */
.lg [hidden] {
    display: none !important;
}

.lg-alert p {
    margin: 0 0 6px;
}

.lg-alert p:last-child {
    margin-bottom: 0;
}

.lg-strong {
    font-weight: 600;
}

.lg .lg-lead {
    margin: 0 0 20px;
    color: var(--lg-muted);
}

/* help under a field, tied to it with aria-describedby (the change-password rule) */
.lg .lg-hint {
    margin: 6px 0 0;
    color: var(--lg-muted);
    font-size: 14px;
}

/* ── Actions ───────────────────────────────────────────────────────────────── */
/* the call to action, as a <button> or an <a> (the password pages' "Next") */
.lg .lg-primary {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--lg-cta);
    color: #fff !important;
    /* large text (WCAG: 14pt bold = 18.66px), so the CTA colour needs 4.5:1 for AAA */
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}

.lg .lg-primary:hover {
    filter: brightness(.9);
}

.lg .lg-primary[disabled] {
    cursor: progress;
    opacity: .8;
}

/* #login-submit is also styled by main_<date>.css and by most skins (background, hover, case);
   the id stays because tests/e2e/cypress/support/auth.js clicks it. */
.lg #login-submit.lg-primary {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 52px;
    margin: 0;
    padding: 8px 16px;
    line-height: 1.3;
    border: 0;
    border-radius: 8px;
    background: var(--lg-cta) !important;
    color: #fff !important;
    /* large text (WCAG: 14pt bold = 18.66px), so the CTA colour needs 4.5:1 for AAA */
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.lg #login-submit.lg-primary:hover {
    filter: brightness(.9);
}

.lg .lg-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--lg-link) !important;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lg .lg-link:hover {
    text-decoration-thickness: 2px;
}

.lg-aside {
    margin: 12px 0 0;
    text-align: center;
}

.lg-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--lg-muted);
}

.lg-or::before,
.lg-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lg-divider);
}

.lg .lg-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 16px;
    border: 1px solid var(--lg-field-border);
    border-radius: 8px;
    background: #fff;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
}

/* the Kudzu skin paints every link green with !important; the label keeps its own ink on white */
.lg .lg-google,
.lg .lg-google span {
    color: #1f1f1f !important;
}

.lg .lg-google:hover {
    background: #f4f4f4;
}

.lg-byt {
    color: var(--lg-muted);
}

/* ── Footer: the way home, and the language ────────────────────────────────── */
.lg-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--lg-divider);
}

.lg-foot .lg-home {
    color: var(--lg-muted) !important;
}

.lg-langs {
    margin-inline-start: auto;
}

.lg-langs .languagebar .tb-lang {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px !important;
    border: 1px solid var(--lg-field-border) !important;
    border-radius: 999px;
    background: transparent;
    color: var(--lg-fg) !important;
    font-size: 16px;
}

.lg-langs .languagebar .dropdown-menu {
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 12px;
}

.lg-partner {
    margin-top: 32px;
    text-align: center;
}

.lg-partner img {
    max-width: 100%;
}

/* ── Focus: one ring, 3px, in the 7:1 link colour (overrides the platform's #005fcc) ─── */
.lg :focus-visible {
    outline: 3px solid var(--lg-link) !important;
    outline-offset: 2px !important;
}

/* ── Narrow screens: the form alone ────────────────────────────────────────── */
@media (max-width: 860px) {
    .lg {
        grid-template-columns: minmax(0, 1fr);
    }

    .lg > .lg-art,
    .lg > .kudzu-hero {
        display: none !important;
    }

    .lg-panel {
        align-items: flex-start;
        padding: 32px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lg * {
        transition: none !important;
    }
}