/**
 * MageTicket
 *
 * Fichier        : public/assets/css/public-pages.css
 * Rôle           : Trame unifiée du portail demandeur, des passerelles d’identité et des pages publiques.
 * Auteur         : Régis KREMER
 * Version        : 0.33.52
 * Version projet : 0.33.0
 * Lot            : MAGETICKET AUTH GATEWAY LAVENDER BLUE BACKGROUND BUTTON CONTRAST FIX1
 * Base requise   : 0.33.51
 * Créé le        : 2026-07-22
 * Modifié le     : 2026-07-26
 * Dépendances    : tokens.css, components.css, portal.css, identity.css et status.css.
 * Contraintes    : tokens uniquement, bord à bord mobile/tablette, zoom autorisé, clavier virtuel et WCAG 2.2 AA.
 * Modifications  : fond bleu lavande progressif, textes produit foncés et contraste du bouton principal de connexion corrigé.
 */

.public-page,
.public-gateway,
.portal-shell[data-public-gateway],
.embedded-shell.engagement-embedded,
.offline-shell.public-state-page {
    min-width: 0;
    min-height: var(--visual-viewport-height, 100dvh);
    color: var(--text);
    background: var(--bg);
}

.public-page,
.public-gateway {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.public-shell-topbar {
    min-height: var(--topbar-h);
    display: grid;
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: max(var(--space-1), var(--safe-top)) max(var(--space-4), var(--safe-right)) var(--space-1) max(var(--space-4), var(--safe-left));
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-deep) 96%, transparent);
    backdrop-filter: blur(16px);
}
.public-header { position: sticky; z-index: 80; top: 0; }
.public-shell-brand,
.public-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
    text-decoration: none;
}
.public-shell-brand img,
.public-brand img { flex: 0 0 auto; object-fit: contain; }
.public-brand-lockup { display: block; width: 150px; height: auto; max-height: 42px; }
.public-brand-mark { display: none; width: 42px; height: 42px; }
html[data-theme="dark"] .public-brand-lockup { display: none; }
html[data-theme="dark"] .public-brand-mark { display: block; }
.public-shell-brand > span,
.public-brand > span { min-width: 0; display: grid; gap: 1px; }
.public-shell-brand strong,
.public-brand strong { font-size: var(--fs-lg); letter-spacing: -.03em; }
.public-shell-brand small,
.public-brand small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-shell-navigation,
.public-navigation { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.public-shell-navigation a,
.public-navigation a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-label);
    white-space: nowrap;
}
.public-shell-navigation a:hover,
.public-shell-navigation a:focus-visible,
.public-shell-navigation a[aria-current="page"],
.public-navigation a:hover,
.public-navigation a:focus-visible,
.public-navigation a[aria-current="page"] { border-color: var(--line); color: var(--text); background: var(--surface-soft); }
.public-shell-search {
    min-width: 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--muted);
}
.public-shell-search:focus-within { border-color: var(--brand); outline: 2px solid var(--focus); outline-offset: 1px; }
.public-shell-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.public-theme-toggle { min-width: 36px; min-height: 36px; }

.public-footer {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) max(var(--space-4), var(--safe-right)) max(var(--space-2), var(--safe-bottom), env(safe-area-inset-bottom)) max(var(--space-4), var(--safe-left));
    border-top: 1px solid var(--line);
    color: var(--muted);
    background: var(--bg-deep);
    font-size: var(--fs-xs);
}
.public-footer__credit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.public-footer__credit strong { color: var(--text); }
.public-footer nav { display: flex; gap: var(--space-4); }
.public-footer a { color: var(--muted); }
.public-footer a:hover,
.public-footer a:focus-visible { color: var(--text); }

.public-main {
    width: min(1180px, 100%);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(var(--space-5), 4vw, var(--space-8)) max(var(--space-5), var(--safe-right)) clamp(var(--space-7), 5vw, 64px) max(var(--space-5), var(--safe-left));
}
.public-eyebrow { margin: 0 0 var(--space-2); color: var(--brand); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.public-title { margin: 0; font-size: clamp(var(--fs-2xl), 5vw, 46px); line-height: 1.05; letter-spacing: -.04em; }
.public-lead { max-width: 720px; margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.65; }

.identity-gateway.public-gateway {
    min-height: var(--visual-viewport-height, 100dvh);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: 1fr;
    padding: 0;
    overflow: auto;
    background:
        radial-gradient(120% 80% at 12% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
        var(--bg);
}
.identity-gateway .public-header,
.identity-gateway .public-footer { grid-column: 1 / -1; }

/* Passerelles d’identité : écran plein viewport 65/35 sans shell public. */
.identity-gateway-body[data-identity-gateway] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--visual-viewport-height, 100dvh);
    min-height: 0;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
    align-items: stretch;
    overflow: hidden;
    background: var(--bg);
}
.identity-gateway-body[data-identity-gateway] > .identity-brand-panel,
.identity-gateway-body[data-identity-gateway] > .identity-form-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    box-shadow: none;
}
.identity-gateway-body[data-identity-gateway] > .identity-brand-panel {
    padding: clamp(var(--space-7), 5vw, 72px);
}
.identity-gateway-body[data-identity-gateway] > .identity-form-panel {
    padding: clamp(var(--space-5), 2.4vw, var(--space-7));
    overflow: hidden;
}
.identity-gateway-body[data-identity-gateway] .identity-form-header,
.identity-gateway-body[data-identity-gateway] .identity-login-form,
.identity-gateway-body[data-identity-gateway] .identity-gateway-links,
.identity-gateway-body[data-identity-gateway] .identity-security-note,
.identity-gateway-body[data-identity-gateway] .identity-alert {
    width: min(100%, 460px);
    margin-right: auto;
    margin-left: auto;
}
.identity-gateway-body[data-identity-gateway] .identity-login-form {
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.identity-gateway-body[data-identity-gateway] .identity-gateway-links {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
}
.identity-gateway-body[data-identity-gateway] .identity-security-note {
    margin-top: var(--space-3);
}

/* Carte de passerelle : panneau de marque lavande + formulaire, hauteurs alignées. */
.identity-gateway-body {
    width: min(1080px, 100%);
    min-height: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(300px, .88fr) minmax(400px, 1.12fr);
    align-items: stretch;
    gap: 0;
    padding: clamp(var(--space-5), 4vw, var(--space-8)) max(var(--space-5), var(--safe-right)) clamp(var(--space-6), 5vw, var(--space-8)) max(var(--space-5), var(--safe-left));
}
.identity-brand-panel,
.identity-form-panel {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 0;
}

/* Le dégradé lavande contractuel provient des tokens --gateway-start / --gateway-end,
   déclinés fidèlement dans les deux thèmes. */
.identity-brand-panel {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-5);
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    border-right: 0;
    overflow: hidden;
    background: linear-gradient(158deg, var(--gateway-start), var(--gateway-end));
    color: var(--gateway-ink);
    box-shadow: var(--shadow-1);
}
.identity-brand-panel::after {
    content: "";
    position: absolute;
    top: -170px;
    right: -215px;
    width: 430px;
    height: 430px;
    border: 1px solid var(--gateway-line);
    transform: rotate(45deg);
    pointer-events: none;
}
.identity-brand-panel > * { position: relative; z-index: 1; }
.identity-brand-panel > img {
    grid-column: 1;
    grid-row: 1;
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.identity-brand-panel:not(.identity-product-panel) > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: grid;
    align-self: center;
    gap: var(--space-1);
    margin: 0;
}
.identity-brand-panel:not(.identity-product-panel) > div strong {
    color: var(--gateway-ink);
    font-size: clamp(var(--fs-2xl), 2.4vw, 38px);
    line-height: 1;
    letter-spacing: -.035em;
}
.identity-brand-panel:not(.identity-product-panel) > div span {
    color: var(--gateway-ink-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-title);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.identity-brand-panel p {
    grid-column: 1 / -1;
    max-width: 54ch;
    margin: 0;
    color: var(--gateway-ink-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.identity-brand-panel .identity-brand-lead {
    color: var(--gateway-ink);
    font-size: var(--fs-md);
    font-weight: var(--fw-label);
    line-height: 1.55;
}
.identity-brand-panel ul {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.identity-brand-panel li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    color: var(--gateway-ink);
    font-size: var(--fs-base);
    font-weight: var(--fw-label);
    line-height: 1.45;
}
.identity-brand-panel li::before {
    content: "";
    width: 6px;
    height: 11px;
    margin: 4px 0 0 5px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
}
.identity-brand-footnote {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--gateway-ink-muted);
    font-size: var(--fs-xs);
    letter-spacing: .02em;
}


/* Vitrine produit de la connexion : identité MageTicket et aperçu métier illustratif. */
.identity-gateway-body[data-login-gateway] > .identity-product-panel {
    --auth-hero-start: color-mix(in srgb, var(--info) 24%, var(--text-inverse));
    --auth-hero-middle: color-mix(in srgb, var(--brand) 13%, var(--text-inverse));
    --auth-hero-end: color-mix(in srgb, var(--brand) 4%, var(--text-inverse));
    --auth-hero-surface: color-mix(in srgb, var(--bg-deep) 82%, var(--brand));
    --auth-hero-surface-strong: color-mix(in srgb, var(--bg-deep) 91%, var(--brand));
    --auth-hero-preview: color-mix(in srgb, var(--bg-deep) 94%, var(--brand));
    --auth-hero-text: var(--text-inverse);
    --auth-hero-muted: color-mix(in srgb, var(--text-inverse) 88%, var(--brand-soft));
    --auth-hero-line: color-mix(in srgb, var(--text-inverse) 24%, transparent);
    --auth-hero-ink: color-mix(in srgb, var(--auth-hero-preview) 88%, var(--brand-strong));
    --auth-hero-ink-muted: color-mix(in srgb, var(--auth-hero-ink) 76%, var(--brand));
    --auth-hero-ink-accent: color-mix(in srgb, var(--auth-hero-ink) 72%, var(--info-strong));
    --auth-hero-motif-line: color-mix(in srgb, var(--auth-hero-ink) 16%, transparent);
    --auth-hero-accent: color-mix(in srgb, var(--warning) 70%, var(--text-inverse));
    --auth-hero-accent-soft: color-mix(in srgb, var(--auth-hero-accent) 16%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: clamp(var(--space-4), 2.2vh, var(--space-6));
    padding: clamp(var(--space-6), 4vw, 72px) clamp(var(--space-6), 5vw, 88px);
    background:
        radial-gradient(82% 94% at 94% 100%, color-mix(in srgb, var(--info) 14%, transparent), transparent 72%),
        linear-gradient(145deg, var(--auth-hero-start) 0%, var(--auth-hero-middle) 52%, var(--auth-hero-end) 100%);
    color: var(--auth-hero-ink);
}

/* En thème clair, les cartes et la démonstration gardent leur profondeur sombre
   sans modifier le fond lavande global du panneau produit. */
html[data-theme="light"] .identity-gateway-body[data-login-gateway] > .identity-product-panel {
    --auth-hero-surface: color-mix(in srgb, var(--text) 82%, var(--brand));
    --auth-hero-surface-strong: color-mix(in srgb, var(--text) 91%, var(--brand));
    --auth-hero-preview: color-mix(in srgb, var(--text) 94%, var(--brand));
}
@media (prefers-color-scheme: light) {
    html:not([data-theme]) .identity-gateway-body[data-login-gateway] > .identity-product-panel {
        --auth-hero-surface: color-mix(in srgb, var(--text) 82%, var(--brand));
        --auth-hero-surface-strong: color-mix(in srgb, var(--text) 91%, var(--brand));
        --auth-hero-preview: color-mix(in srgb, var(--text) 94%, var(--brand));
    }
}
.identity-gateway-body[data-login-gateway] > .identity-product-panel::before {
    content: "";
    position: absolute;
    inset: auto -12% -28% auto;
    width: 52%;
    aspect-ratio: 1;
    border: 1px solid var(--auth-hero-motif-line);
    transform: rotate(45deg);
    pointer-events: none;
}
.identity-gateway-body[data-login-gateway] > .identity-product-panel::after {
    top: -24%;
    right: -12%;
    width: 40%;
    height: auto;
    aspect-ratio: 1;
    border-color: var(--auth-hero-motif-line);
}
.identity-product-panel > .identity-product-brand {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
}
.identity-product-brand > img {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    object-fit: contain;
}
.identity-product-brand > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.identity-product-brand strong {
    color: var(--auth-hero-ink);
    font-size: var(--fs-xl);
    line-height: 1;
    letter-spacing: -.035em;
}
.identity-product-brand span {
    color: var(--auth-hero-ink-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-title);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.identity-product-panel > .identity-product-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: block;
    align-self: stretch;
    margin: 0;
}
.identity-product-panel .identity-product-eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--auth-hero-ink-accent);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.identity-product-panel .identity-product-copy h2 {
    max-width: 760px;
    margin: 0;
    color: var(--auth-hero-ink);
    font-size: clamp(34px, 4vw, 62px);
    line-height: 1.02;
    letter-spacing: -.05em;
}
.identity-product-panel .identity-product-copy > p:last-child {
    max-width: 68ch;
    margin: var(--space-4) 0 0;
    color: var(--auth-hero-ink-muted);
    font-size: var(--fs-md);
    line-height: 1.6;
}
.identity-product-panel > .identity-product-benefits {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    align-self: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}
.identity-product-benefits article {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3);
    border: 1px solid var(--auth-hero-line);
    background: color-mix(in srgb, var(--auth-hero-surface) 96%, transparent);
}
.identity-product-benefits i {
    color: var(--auth-hero-accent);
    font-size: var(--icon-md);
}
.identity-product-benefits article > div {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
}
.identity-product-benefits strong {
    color: var(--auth-hero-text);
    font-size: var(--fs-sm);
}
.identity-product-benefits span {
    color: var(--auth-hero-muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
}
.identity-product-panel > .identity-product-preview {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    align-self: stretch;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--auth-hero-line);
    background: var(--auth-hero-preview);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--bg-deep) 54%, transparent);
}
.identity-preview-header,
.identity-preview-ticket-top,
.identity-preview-channels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.identity-preview-header > div { display: grid; gap: 2px; }
.identity-preview-header span,
.identity-preview-metrics span,
.identity-preview-activity > span {
    color: var(--auth-hero-muted);
    font-size: 10px;
    font-weight: var(--fw-title);
    letter-spacing: .09em;
    text-transform: uppercase;
}
.identity-preview-header strong { color: var(--auth-hero-text); font-size: var(--fs-sm); }
.identity-preview-demo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--auth-hero-muted);
    font-size: var(--fs-xs);
}
.identity-preview-demo i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}
.identity-preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}
.identity-preview-metrics > div {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--auth-hero-line);
    background: var(--auth-hero-surface);
}
.identity-preview-metrics strong { color: var(--auth-hero-text); font-size: var(--fs-xl); line-height: 1; }
.identity-preview-metrics small { color: var(--auth-hero-muted); font-size: 10px; }
.identity-preview-workspace {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(180px, .55fr);
    gap: var(--space-2);
}
.identity-preview-ticket,
.identity-preview-activity {
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--auth-hero-line);
    background: var(--auth-hero-surface-strong);
}
.identity-preview-ticket-top span { color: var(--auth-hero-muted); font-size: var(--fs-xs); }
.identity-preview-ticket-top small {
    padding: 2px var(--space-2);
    background: var(--auth-hero-accent-soft);
    color: var(--auth-hero-accent);
    font-size: 10px;
    font-weight: var(--fw-title);
}
.identity-preview-ticket > strong { display: block; margin-top: var(--space-2); color: var(--auth-hero-text); font-size: var(--fs-sm); }
.identity-preview-ticket > p { margin: var(--space-1) 0 0; color: var(--auth-hero-muted); font-size: var(--fs-xs); }
.identity-preview-progress { height: 4px; margin-top: var(--space-3); overflow: hidden; background: color-mix(in srgb, var(--auth-hero-line) 70%, transparent); }
.identity-preview-progress span { display: block; width: 64%; height: 100%; background: linear-gradient(90deg, var(--brand), var(--auth-hero-accent)); }
.identity-preview-activity ul {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}
.identity-preview-activity li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: var(--space-2);
    color: var(--auth-hero-muted);
    font-size: var(--fs-xs);
    line-height: 1.35;
}
.identity-preview-activity li::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border: 1px solid var(--auth-hero-line);
    border-radius: 50%;
}
.identity-preview-activity li.is-done::before { border-color: var(--success); background: var(--success); }
.identity-preview-activity li.is-current { color: var(--auth-hero-text); }
.identity-preview-activity li.is-current::before { border-color: var(--auth-hero-accent); background: var(--auth-hero-accent); }
.identity-preview-channels { justify-content: flex-start; flex-wrap: wrap; }
.identity-preview-channels span {
    padding: 3px var(--space-2);
    border: 1px solid var(--auth-hero-line);
    color: var(--auth-hero-muted);
    font-size: 10px;
}
.identity-product-panel > .identity-brand-footnote {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--auth-hero-ink-muted);
}

.identity-form-panel {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    border-left: 0;
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.identity-form-panel.compact { max-width: none; }
.identity-form-header { max-width: 52ch; margin: 0; }
.identity-form-header > span {
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.identity-form-header h1 {
    margin: var(--space-2) 0 var(--space-2);
    font-size: clamp(var(--fs-2xl), 3.2vw, 34px);
    line-height: 1.1;
    letter-spacing: -.035em;
}
.identity-form-header p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.identity-login-form { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.identity-login-form label:not(.identity-check),
.identity-fields label { display: grid; gap: var(--space-2); }
.identity-login-form label > span,
.identity-fields label > span { font-size: var(--fs-sm); font-weight: var(--fw-label); }
.identity-login-form label > span small { color: var(--muted); font-weight: var(--fw-body); }
.identity-login-form input,
.identity-fields input { min-height: 46px; }
.identity-login-form .mfa-field > small { color: var(--muted); font-size: var(--fs-xs); }
.identity-login-form .identity-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    color: var(--muted);
    font-size: var(--fs-sm);
}
.identity-login-form .identity-check input { width: 18px; min-height: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.identity-login-form .primary-button { min-height: var(--touch-target); margin-top: var(--space-1); }
.identity-login-form .primary-button.full:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--brand-strong);
    background: var(--brand-strong);
    color: var(--brand-contrast);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-strong) 28%, transparent);
}
.identity-login-form .primary-button.full:not(:disabled):not([aria-disabled="true"]):focus-visible {
    border-color: var(--brand-strong);
    background: linear-gradient(180deg, var(--brand), var(--brand-strong));
    color: var(--brand-contrast);
}
.identity-login-form .primary-button.full:not(:disabled):not([aria-disabled="true"]):active {
    border-color: var(--brand-strong);
    background: var(--brand-strong);
    color: var(--brand-contrast);
    box-shadow: none;
}
.identity-gateway-links {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
}
.identity-gateway-links a { color: var(--muted); }
.identity-gateway-links a:hover,
.identity-gateway-links a:focus-visible { color: var(--text); }
.identity-security-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    margin-top: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    background: var(--surface-soft);
}
.identity-security-note i { margin-top: 2px; color: var(--brand); font-size: var(--icon-md); }
.identity-security-note p { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.identity-alert {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-left: 3px solid var(--info);
    background: var(--surface-soft);
    font-size: var(--fs-sm);
}
.identity-alert.success { border-left-color: var(--success); background: var(--success-soft); }
.identity-alert.error { border-left-color: var(--danger); background: var(--danger-soft); }
.identity-alert ul { margin: 0; padding-left: var(--space-5); }

.identity-install-preflight { grid-column: 1 / -1; margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--success); background: var(--success-soft); color: var(--success-strong); }
.identity-step-form { min-height: 0; }
.identity-step-form fieldset { min-height: 0; }
.identity-step-actions { position: sticky; bottom: 0; padding-bottom: max(var(--space-3), var(--safe-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); }

.public-state-page {
    width: min(880px, calc(100% - 2 * var(--space-5)));
    min-height: calc(var(--visual-viewport-height, 100dvh) - 110px);
    margin: 0 auto;
    display: grid;
    place-content: center;
    justify-items: start;
    gap: var(--space-4);
    padding: clamp(var(--space-7), 7vw, 88px) 0;
}
.public-state-code { margin: 0; color: var(--brand); font-size: clamp(58px, 16vw, 150px); font-weight: 850; letter-spacing: -.08em; line-height: .8; }
.public-state-page h1 { margin: 0; font-size: clamp(var(--fs-2xl), 5vw, 46px); letter-spacing: -.04em; }
.public-state-page > p { max-width: 660px; margin: 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.65; }
.public-state-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.public-state-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--muted); font-size: var(--fs-xs); }

.health-page.public-health { width: min(1080px, 100%); margin: 0 auto; padding: clamp(var(--space-5), 4vw, var(--space-8)) max(var(--space-5), var(--safe-right)) clamp(var(--space-7), 5vw, 64px) max(var(--space-5), var(--safe-left)); }
.health-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; margin: var(--space-5) 0; padding: var(--space-5); border: 1px solid var(--line); background: var(--surface); }
.health-summary i { font-size: var(--fs-2xl); color: var(--success); }
.health-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.health-table th,
.health-table td { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); text-align: left; }
.health-table caption { padding: var(--space-3); color: var(--muted); text-align: left; }

.embedded-shell.engagement-embedded {
    width: 100%;
    max-width: none;
    min-height: var(--visual-viewport-height, 100dvh);
    padding: max(var(--space-5), var(--safe-top)) max(var(--space-5), var(--safe-right)) max(var(--space-5), var(--safe-bottom)) max(var(--space-5), var(--safe-left));
    border: 0;
    border-radius: 0;
}
.embedded-shell.engagement-embedded > header { max-width: 720px; width: 100%; margin: 0 auto var(--space-6); }
.embedded-shell.engagement-embedded > form,
.embedded-shell.engagement-embedded > .embedded-state,
.embedded-shell.engagement-embedded > .embedded-success { width: min(720px, 100%); margin-left: auto; margin-right: auto; }

.offline-shell.public-state-page { width: min(760px, calc(100% - 2 * var(--space-5))); }
.offline-shell.public-state-page img { width: 72px; height: 72px; object-fit: contain; }

@media (min-width: 901px) and (max-width: 1100px) {
    .identity-gateway-body[data-identity-gateway] > .identity-form-panel {
        padding: var(--space-5);
    }
}

@media (min-width: 901px) and (max-height: 820px) {
    .identity-gateway-body[data-login-gateway] > .identity-product-panel {
        gap: var(--space-3);
        padding-block: var(--space-5);
    }
    .identity-product-panel .identity-product-copy h2 { font-size: clamp(30px, 3.3vw, 48px); }
    .identity-product-panel .identity-product-copy > p:last-child { margin-top: var(--space-2); line-height: 1.45; }
    .identity-product-benefits article { padding: var(--space-2); }
    .identity-product-panel > .identity-product-preview { padding: var(--space-3); gap: var(--space-2); }
    .identity-preview-metrics > div,
    .identity-preview-ticket,
    .identity-preview-activity { padding: var(--space-2); }
}

@media (max-width: 900px) {
    .identity-gateway-body[data-login-gateway] > .identity-product-panel {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: var(--space-3);
    }
    .identity-product-panel > .identity-product-brand { flex: 0 0 auto; }
    .identity-product-panel > .identity-product-copy { min-width: 0; }
    .identity-product-panel .identity-product-copy h2 { font-size: var(--fs-lg); line-height: 1.15; letter-spacing: -.025em; }
    .identity-product-panel .identity-product-copy h2 br,
    .identity-product-panel .identity-product-eyebrow,
    .identity-product-panel .identity-product-copy > p:last-child,
    .identity-product-panel > .identity-product-benefits,
    .identity-product-panel > .identity-product-preview,
    .identity-product-panel > .identity-brand-footnote { display: none; }
    .identity-gateway-body[data-identity-gateway] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(96px, 18fr) minmax(0, 82fr);
    }
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-content: center;
        align-items: center;
        gap: var(--space-3);
        padding: max(var(--space-4), var(--safe-top)) max(var(--space-5), var(--safe-right)) var(--space-4) max(var(--space-5), var(--safe-left));
        border-bottom: 1px solid var(--gateway-line);
    }
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel::after,
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel p,
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel ul,
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel .identity-brand-footnote {
        display: none;
    }
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel > img {
        width: 52px;
        height: 52px;
    }
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel > div strong {
        font-size: var(--fs-xl);
    }
    .identity-gateway-body[data-identity-gateway] > .identity-form-panel {
        justify-content: center;
        padding: var(--space-5) max(var(--space-5), var(--safe-right)) max(var(--space-5), calc(var(--safe-bottom) + var(--keyboard-inset))) max(var(--space-5), var(--safe-left));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}

@media (max-width: 560px) {
    .identity-product-panel > .identity-product-copy { display: none; }
    .identity-product-brand > div span { display: none; }
    .identity-product-brand > img { width: 42px; height: 42px; }
    .identity-product-brand strong { font-size: var(--fs-lg); }
    .identity-product-panel .identity-product-copy h2 { font-size: var(--fs-base); font-weight: var(--fw-title); }
    .identity-gateway-body[data-identity-gateway] {
        grid-template-rows: minmax(84px, 15fr) minmax(0, 85fr);
    }
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: max(var(--space-3), var(--safe-top)) max(var(--space-4), var(--safe-right)) var(--space-3) max(var(--space-4), var(--safe-left));
    }
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel > img {
        width: 44px;
        height: 44px;
    }
    .identity-gateway-body[data-identity-gateway] > .identity-brand-panel > div strong {
        font-size: var(--fs-lg);
    }
    .identity-gateway-body[data-identity-gateway] > .identity-form-panel {
        padding: var(--space-4) max(var(--space-4), var(--safe-right)) max(var(--space-4), calc(var(--safe-bottom) + var(--keyboard-inset))) max(var(--space-4), var(--safe-left));
    }
    .identity-gateway-body[data-identity-gateway] .identity-form-header h1 {
        margin-block: var(--space-1);
        font-size: var(--fs-2xl);
    }
    .identity-gateway-body[data-identity-gateway] .identity-form-header p {
        line-height: 1.4;
    }
    .identity-gateway-body[data-identity-gateway] .identity-login-form {
        gap: var(--space-2);
        margin-top: var(--space-4);
    }
    .identity-gateway-body[data-identity-gateway] .identity-gateway-links {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-2);
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        font-size: var(--fs-xs);
    }
    .identity-gateway-body[data-identity-gateway] .identity-gateway-links a:last-child {
        text-align: right;
    }
    .identity-gateway-body[data-identity-gateway] .identity-security-note {
        margin-top: var(--space-2);
        padding: var(--space-2);
    }
}

@media (max-height: 700px) {
    .identity-gateway-body[data-identity-gateway] .identity-form-header p,
    .identity-gateway-body[data-identity-gateway] .identity-security-note {
        display: none;
    }
    .identity-gateway-body[data-identity-gateway] .identity-login-form {
        margin-top: var(--space-3);
    }
}

@media (max-width: 960px) {
    .identity-gateway-body:not([data-identity-gateway]) { grid-template-columns: 1fr; width: min(720px, 100%); }
    .identity-gateway-body:not([data-identity-gateway]) .identity-brand-panel { min-height: 0; border-bottom: 0; }
    .identity-gateway-body:not([data-identity-gateway]) .identity-brand-panel ul { display: none; }
    .identity-gateway-body:not([data-identity-gateway]) .identity-brand-panel::after { display: none; }
    .identity-gateway-body:not([data-identity-gateway]) .identity-form-panel { border-top: 0; }
    .public-header { grid-template-columns: minmax(0, 1fr) auto auto; }
    .public-navigation { justify-content: flex-end; }
    .public-navigation a span { display: none; }
    .public-navigation a { width: 36px; justify-content: center; padding: 0; }
}

@media (max-width: 760px) {
    .public-header { min-height: 58px; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); padding-right: max(var(--space-3), var(--safe-right)); padding-left: max(var(--space-3), var(--safe-left)); }
    .public-brand-lockup { display: none; }
    .public-brand-mark { display: block; width: 38px; height: 38px; }
    .public-brand small { display: none; }
    .public-navigation { gap: var(--space-1); }
    .public-footer { align-items: flex-start; flex-direction: column; padding-right: max(var(--space-4), var(--safe-right)); padding-left: max(var(--space-4), var(--safe-left)); }
    .public-footer nav { flex-wrap: wrap; }
    .public-main,
    .health-page.public-health { padding-right: max(var(--space-4), var(--safe-right)); padding-left: max(var(--space-4), var(--safe-left)); }
    .identity-gateway-body:not([data-identity-gateway]) { width: 100%; padding: 0; }
    .identity-gateway-body:not([data-identity-gateway]) .identity-brand-panel {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        gap: var(--space-3);
        min-height: 0;
        padding: var(--space-4) max(var(--space-4), var(--safe-right)) var(--space-4) max(var(--space-4), var(--safe-left));
        border-width: 0 0 1px;
    }
    .identity-gateway-body:not([data-identity-gateway]) .identity-brand-panel > img { width: 44px; height: 44px; }
    .identity-gateway-body:not([data-identity-gateway]) .identity-brand-panel > div strong { font-size: var(--fs-lg); }
    .identity-gateway-body:not([data-identity-gateway]) .identity-brand-panel p,
    .identity-gateway-body:not([data-identity-gateway]) .identity-brand-panel ul,
    .identity-gateway-body:not([data-identity-gateway]) .identity-brand-footnote { display: none; }
    .identity-gateway-body:not([data-identity-gateway]) .identity-form-panel { min-height: calc(var(--visual-viewport-height, 100dvh) - 104px); padding: var(--space-6) max(var(--space-4), var(--safe-right)) max(var(--space-7), calc(var(--safe-bottom) + var(--keyboard-inset))) max(var(--space-4), var(--safe-left)); border-width: 0; }
    .identity-fields.two-columns { grid-template-columns: 1fr; }
    .identity-progress { overflow-x: auto; scrollbar-width: none; }
    .identity-step-actions { margin-right: calc(-1 * max(var(--space-4), var(--safe-right))); margin-left: calc(-1 * max(var(--space-4), var(--safe-left))); padding-right: max(var(--space-4), var(--safe-right)); padding-left: max(var(--space-4), var(--safe-left)); }
    .public-state-page { width: calc(100% - 2 * max(var(--space-4), var(--safe-left))); min-height: calc(var(--visual-viewport-height, 100dvh) - 104px); }
    .health-table thead { display: none; }
    .health-table,
    .health-table tbody,
    .health-table tr,
    .health-table th,
    .health-table td { display: block; width: 100%; }
    .health-table tr { margin-bottom: var(--space-3); border: 1px solid var(--line); background: var(--surface); }
    .health-table th,
    .health-table td { border: 0; border-bottom: 1px solid var(--line); }
    .health-table td::before { content: attr(data-label); display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: var(--fs-xs); }
}

@media (max-width: 480px) {
    .identity-gateway-links,
    .public-state-actions { flex-direction: column; align-items: stretch; }
    .public-state-actions .button,
    .public-state-actions .primary-button,
    .public-state-actions .secondary-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .public-page *,
    .public-gateway *,
    .portal-shell[data-public-gateway] * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
    .public-header,
    .public-footer,
    .identity-brand-panel,
    .identity-form-panel,
    .public-state-page,
    .health-table { border-color: CanvasText; }
    .public-navigation a,
    .public-state-actions a,
    .public-state-actions button { forced-color-adjust: auto; }
}

@media print {
    .public-header,
    .public-footer,
    .public-theme-toggle,
    .portal-top-actions,
    .portal-primary-action,
    .portal-request-actions { display: none !important; }
    .public-page,
    .public-gateway,
    .portal-shell[data-public-gateway] { min-height: auto; background: Canvas; color: CanvasText; }
}