/* QO7 auth, v10: full-viewport original pattern + one opaque centered card.
   Shared by Control and Mail. No split layout, no artwork panel, no blur.
   The card stays in normal document flow for small displays and open keyboards. */
html[data-auth-layout="centered"] { scrollbar-gutter: auto; }
.public-page[data-auth-layout="centered"] {
    --auth-pattern: url('../patterns/venyar_M-12_zeichenfeld_hell_5000.svg');
    --auth-canvas: #E6F4E9;
    display: block;
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--auth-canvas);
}
html[data-theme="dark"] .public-page[data-auth-layout="centered"] {
    --auth-pattern: url('../patterns/venyar_M-12_zeichenfeld_dunkel_5000.svg?v=20260913');
    --auth-canvas: var(--bg);
}
.public-page[data-auth-layout="centered"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--auth-canvas);
    background-image: var(--auth-pattern);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.public-page[data-auth-layout="centered"] .public-main {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 32px 24px;
    padding-top: max(32px, env(safe-area-inset-top));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    padding-left: max(24px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: center;
}
.public-page[data-auth-layout="centered"] .auth-card {
    width: 100%;
    max-width: 440px;
    min-width: 0;
    margin: 0;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.045);
    overflow-wrap: anywhere;
}
html[data-theme="dark"] .public-page[data-auth-layout="centered"] .auth-card {
    box-shadow: none;
}
.auth-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    margin: 0 0 28px;
    padding: 0;
}
.auth-card-header .public-brand-group { gap: 14px; }
.auth-card-header .brand-separator { color: var(--muted); }
.auth-card-header .product-label { color: var(--secondary); }
.auth-card-header .icon-button { width: 40px; height: 40px; flex: 0 0 40px; }
.public-page[data-auth-layout="centered"] .auth-heading { margin-bottom: 24px; }
.public-page[data-auth-layout="centered"] .auth-heading h1 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.6px;
}
.public-page[data-auth-layout="centered"] .auth-heading p {
    margin-top: 10px;
    line-height: 1.6;
}
.public-page[data-auth-layout="centered"] .field { margin: 0 0 20px; }
.public-page[data-auth-layout="centered"] .field input { min-height: 46px; border-radius: 6px; }
.public-page[data-auth-layout="centered"] .password-toggle { height: 44px; }
.public-page[data-auth-layout="centered"] .submit-button { min-height: 46px; margin-top: 4px; }
.public-page[data-auth-layout="centered"] .auth-demo,
.public-page[data-auth-layout="centered"] .auth-footnote { margin-top: 24px; padding-top: 18px; }
.public-page[data-auth-layout="centered"] .auth-demo details { margin-top: 6px; }
.public-page[data-auth-layout="centered"] .auth-demo summary { padding: 7px 2px; }
.public-page[data-auth-layout="centered"] .auth-demo dl div { gap: 12px; flex-wrap: wrap; }
.public-page[data-auth-layout="centered"] .auth-card-footer {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 22px 0 0;
    padding: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    line-height: 1.5;
}
.auth-card-footer a { display: inline-flex; align-items: center; min-height: 36px; }
.public-page[data-auth-layout="centered"] .back-link { margin-bottom: 16px; }
@media (max-width: 520px) {
    .public-page[data-auth-layout="centered"] .public-main {
        padding: 24px 16px;
        padding-top: max(24px, env(safe-area-inset-top));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        padding-left: max(16px, env(safe-area-inset-left));
    }
    .public-page[data-auth-layout="centered"] .auth-card { padding: 24px; border-radius: 10px; }
    .public-page[data-auth-layout="centered"] .auth-heading h1 { font-size: 26px; }
    .public-page[data-auth-layout="centered"] .field input { font-size: 16px; }
    .auth-card-header { gap: 12px; margin-bottom: 24px; }
    .auth-card-header .public-brand-group { gap: 12px; }
    .public-page[data-auth-layout="centered"] .auth-card-footer { gap: 4px 10px; }
}
@media (max-width: 359px) {
    .public-page[data-auth-layout="centered"] .auth-card { padding: 20px; }
    .public-page[data-auth-layout="centered"] .auth-card-footer span:nth-child(2) { margin-left: 0; }
    .public-page[data-auth-layout="centered"] .auth-demo dd { font-size: 11px; }
}
@media (forced-colors: active) {
    .public-page[data-auth-layout="centered"] { background: Canvas; }
    .public-page[data-auth-layout="centered"]::before { display: none; }
    .public-page[data-auth-layout="centered"] .auth-card { background: Canvas; border-color: CanvasText; box-shadow: none; }
}

/* v11 branding alignment: card remains opaque; only the light auth canvas is brand-tinted. */
html:not([data-theme="dark"]) .public-page[data-auth-layout="centered"] .auth-card {
    border-color: #D3E1D6;
}