/* Private authentication shares the operational app's brand and surface scale.
   Loaded only by the authentication fragment; form/OTP/PWA behavior stays native. */
body.operational-auth-body {
    --auth-control-height: max(40px, 2.5rem);
    --auth-header-height: 3rem;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

body.operational-auth-body .auth-app-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--auth-header-height);
    padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
    border-bottom: 1px solid var(--color-brand-background-pressed);
    background: var(--color-brand-background);
    color: #fff;
}

body.operational-auth-body .auth-app-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.375rem;
    height: 2.25rem;
    overflow: hidden;
}

body.operational-auth-body .auth-app-mark {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}

/* The original logotype has transparent vertical margins. The brand viewport
   trims those margins without modifying, filtering or stretching the artwork. */
body.operational-auth-body .auth-app-wordmark {
    width: 7rem;
    height: auto;
    flex: 0 0 auto;
}

body.operational-auth-body .auth-app-header-label {
    padding-left: 1rem;
    border-left: 1px solid rgb(255 255 255 / 30%);
    font-size: 0.8125rem;
    line-height: 1.4;
}

body.operational-auth-body .auth-shell.auth-access-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    align-items: start;
    justify-items: stretch;
    gap: 0;
    width: min(28rem, calc(100% - 2rem));
    min-height: calc(100vh - var(--auth-header-height));
    min-height: calc(100dvh - var(--auth-header-height));
    margin: 0 auto;
    padding: clamp(1rem, 4dvh, 4rem) 0;
}

body.operational-auth-body .auth-shell:is(.auth-shell-wide, .auth-access-shell-wide) {
    width: min(36rem, calc(100% - 2rem));
}

body.operational-auth-body .auth-shell.auth-access-shell .auth-card {
    width: 100%;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius);
    background: var(--panel);
    box-shadow: none;
    backdrop-filter: none;
}

body.operational-auth-body .auth-card .auth-card-head {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--op-border);
}

body.operational-auth-body .auth-card .auth-card-head .eyebrow {
    margin: 0;
    color: var(--color-brand-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

body.operational-auth-body .auth-card .auth-card-head h2 {
    gap: 0.5rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

body.operational-auth-body .auth-card-head h2 .app-icon {
    font-size: 1.25rem;
}

body.operational-auth-body .auth-card .auth-card-head p:not(.eyebrow),
body.operational-auth-body .auth-access-context {
    color: var(--text-soft);
    font-size: 0.8125rem;
    line-height: 1.5;
}

body.operational-auth-body .auth-card .auth-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.875rem 0.75rem;
    margin-top: 1rem;
}

body.operational-auth-body .auth-card .field-group {
    min-width: 0;
}

body.operational-auth-body .auth-card .field-group > label,
body.operational-auth-body .auth-card .field-group > span,
body.operational-auth-body .auth-card .second-factor-otp-fieldset legend {
    display: block;
    margin: 0 0 0.375rem;
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

body.operational-auth-body .auth-card .field-group > input:is([type="text"], [type="password"], [type="email"]) {
    width: 100%;
    min-width: 0;
    height: var(--auth-control-height);
    min-height: var(--auth-control-height);
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-neutral-stroke-1);
    border-radius: var(--op-radius);
    background: var(--panel);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.4;
    box-shadow: none;
}

body.operational-auth-body .auth-card .field-group > input[readonly] {
    background: var(--color-neutral-background-2);
    color: var(--text-soft);
}

body.operational-auth-body .auth-card .field-group > input:focus-visible,
body.operational-auth-body .auth-card .second-factor-otp-digit:focus-visible {
    border-color: var(--color-brand-foreground);
    outline: 2px solid var(--color-brand-foreground);
    outline-offset: 1px;
    box-shadow: none;
}

body.operational-auth-body .auth-card :is(.field-hint, .field-error) {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
}

body.operational-auth-body .auth-card :is(.primary-button, .secondary-button) {
    gap: 0.5rem;
    min-height: var(--auth-control-height);
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--op-radius);
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    transform: none;
}

body.operational-auth-body .auth-card .primary-button {
    border: 1px solid var(--color-brand-background);
    background: var(--color-brand-background);
    color: #fff;
}

body.operational-auth-body .auth-card .primary-button:hover {
    border-color: var(--color-brand-background-hover);
    background: var(--color-brand-background-hover);
}

body.operational-auth-body .auth-card .secondary-button {
    border: 1px solid var(--op-border);
    background: var(--panel);
    color: var(--text);
}

body.operational-auth-body .auth-card .secondary-button:hover {
    background: var(--color-neutral-background-2);
}

body.operational-auth-body .auth-card :is(button, a):focus-visible {
    outline: 2px solid var(--color-brand-foreground);
    outline-offset: 2px;
}

body.operational-auth-body .auth-card a:not(.primary-button) {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--color-brand-foreground);
    font-size: 0.8125rem;
    line-height: 1.4;
}

body.operational-auth-body .auth-access-recovery { text-align: right; }
body.operational-auth-body .auth-access-back { text-align: center; }
body.operational-auth-body .auth-access-back-separate { margin-top: 0.75rem; }

/* Keep auth feedback beside its fields through the existing notification host. */
body.operational-auth-body .auth-card .message {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    min-height: 44px;
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--op-radius);
    box-shadow: none;
    backdrop-filter: none;
    font-size: 0.8125rem;
    line-height: 1.5;
    transform: none;
    animation: none;
}

body.operational-auth-body .auth-card .message.is-hiding { opacity: 0; }

body.operational-auth-body .auth-card .app-form-alert {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--op-radius);
    box-shadow: none;
    font-size: 0.8125rem;
    line-height: 1.5;
}

body.operational-auth-body .auth-access-context {
    margin: 0.875rem 0 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius);
    background: var(--color-neutral-background-2);
    overflow-wrap: anywhere;
}

body.operational-auth-body .auth-access-context p { margin: 0 0 0.5rem; }
body.operational-auth-body .auth-access-meta { margin: 0; }
body.operational-auth-body .auth-access-meta.auth-access-context { margin-top: 0.875rem; }

body.operational-auth-body .auth-access-meta > div,
body.operational-auth-body .second-factor-meta > div {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    gap: 0.625rem;
    padding: 0.25rem 0;
    border: 0;
}

body.operational-auth-body :is(.auth-access-meta, .second-factor-meta) :is(dt, dd) {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    letter-spacing: 0;
    text-transform: none;
}

body.operational-auth-body :is(.auth-access-meta, .second-factor-meta) dt {
    color: var(--text-soft);
    font-weight: 400;
}

body.operational-auth-body :is(.auth-access-meta, .second-factor-meta) dd {
    color: var(--text);
    font-weight: 600;
}

body.operational-auth-body .second-factor-account {
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body.operational-auth-body :is(.second-factor-code-panel, .second-factor-status) {
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--op-radius);
    box-shadow: none;
    font-size: 0.8125rem;
    line-height: 1.5;
}

body.operational-auth-body .second-factor-meta { gap: 0; }
body.operational-auth-body .second-factor-status strong { font-weight: 600; }
body.operational-auth-body .second-factor-otp-fallback { gap: 0.75rem; }

body.operational-auth-body .second-factor-otp-inputs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}

body.operational-auth-body .auth-card .second-factor-otp-digit {
    width: 100%;
    min-width: 0;
    height: 3rem;
    min-height: 3rem;
    padding: 0.375rem 0.125rem;
    border-radius: var(--op-radius);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
}

body.operational-auth-body :is(.second-factor-code-hint, .second-factor-auto-submit-status) {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

body.operational-auth-body .auth-access-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.875rem;
}

body.operational-auth-body .auth-access-actions > .auth-form-grid { margin: 0; }
body.operational-auth-body .auth-access-actions > :only-child { grid-column: 1 / -1; }

@media (max-height: 760px) {
    body.operational-auth-body .auth-shell.auth-access-shell {
        align-content: start;
        padding-block: 1rem;
    }
}

@media (max-width: 600px) {
    body.operational-auth-body { --auth-control-height: 44px; }

    body.operational-auth-body .auth-shell.auth-access-shell {
        width: calc(100% - 1.5rem);
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    body.operational-auth-body .auth-shell.auth-access-shell .auth-card { padding: 1rem; }
    body.operational-auth-body .auth-card .auth-form-grid { grid-template-columns: minmax(0, 1fr); }
    body.operational-auth-body .auth-card .field-span-2 { grid-column: 1 / -1; }
    body.operational-auth-body .auth-card .field-group > input:is([type="text"], [type="password"], [type="email"]) { font-size: 16px; }
    body.operational-auth-body .auth-card a:not(.primary-button) { min-height: 44px; }
}

@media (pointer: coarse) {
    body.operational-auth-body { --auth-control-height: max(44px, 2.5rem); }
}

@media (max-width: 360px) {
    body.operational-auth-body .auth-app-header { gap: 0.625rem; }
    body.operational-auth-body .auth-app-header-label { padding-left: 0.625rem; font-size: 0.75rem; }
    body.operational-auth-body .auth-access-actions { grid-template-columns: minmax(0, 1fr); }
    body.operational-auth-body .second-factor-otp-inputs { gap: 0.375rem; }
}