/* Phase76.7: centered auth composition adapted from html/login.html and recovery/register siblings.
   Existing maw3ed-auth.js owns the functional data hooks. No template code or assets. */
.mw76-frame[data-mw-76-state="CONTENT76"][data-mw-76-shell="AUTH_SHELL"] { grid-column: 1 / -1; }
.mw76-root.mw76-auth-content {
    align-content: start;
    background: var(--mw76-surface-muted);
    padding: var(--mw76-space-8) var(--mw76-space-4) var(--mw76-space-16);
}
.mw76-root.mw76-auth-content .mw76-auth-experience,
.mw76-root.mw76-auth-content .mw76-auth-access-denied {
    inline-size: 100%; max-inline-size: 34rem; margin-inline: auto; padding: var(--mw76-space-8);
    background: var(--mw76-surface); border: 1px solid var(--mw76-surface-tint);
    border-block-start: 4px solid var(--mw76-color-action); border-radius: var(--mw76-radius-card);
    box-shadow: var(--mw76-shadow-card);
}
.mw76-root.mw76-auth-content .mw76-auth-experience--register { max-inline-size: var(--mw76-content-reading); }
.mw76-root.mw76-auth-content .mw76-auth-intro { text-align: center; margin-block-end: var(--mw76-space-8); }
.mw76-root.mw76-auth-content .mw76-auth-emblem {
    display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-block-end: var(--mw76-space-4);
    border-radius: var(--mw76-radius-card); color: var(--mw76-color-action); background: var(--mw76-surface-tint);
}
.mw76-root.mw76-auth-content .mw76-auth-eyebrow { color: var(--mw76-color-action); font-size: var(--mw76-font-label); font-weight: 700; margin: 0 0 var(--mw76-space-2); }
.mw76-root.mw76-auth-content .mw76-auth-intro h1 { font: 700 var(--mw76-heading-1)/1.3 var(--mw76-font-display); color: var(--mw76-color-secondary); margin: 0 0 var(--mw76-space-3); }
.mw76-root.mw76-auth-content .mw76-auth-intro-message { color: var(--mw76-text-muted); margin-block-end: var(--mw76-space-4); }
.mw76-root.mw76-auth-content .mw76-auth-next { padding: var(--mw76-space-3) var(--mw76-space-4); border-radius: var(--mw76-radius-control); background: var(--mw76-surface-tint); font-size: var(--mw76-font-label); }
.mw76-root.mw76-auth-content .mw76-auth-next span { display: block; color: var(--mw76-text-muted); }
.mw76-root.mw76-auth-content .mw76-auth-next strong { color: var(--mw76-color-secondary); font-weight: 600; }
.mw76-root.mw76-auth-content .mw76-auth-fields,
.mw76-root.mw76-auth-content .mw76-auth-field { display: grid; gap: var(--mw76-space-2); min-inline-size: 0; align-content: start; }
.mw76-root.mw76-auth-content .mw76-auth-fields { gap: var(--mw76-space-6); }
.mw76-root.mw76-auth-content .mw76-field-label { font-weight: 600; margin: 0; }
.mw76-root.mw76-auth-content .mw76-auth-label-row { display: flex; justify-content: space-between; gap: var(--mw76-space-3); flex-wrap: wrap; align-items: center; }
.mw76-root.mw76-auth-content .mw76-auth-label-row a { font-size: var(--mw76-font-label); }
.mw76-root.mw76-auth-content .mw76-input {
    inline-size: 100%; min-inline-size: 0; min-block-size: 3rem; padding: var(--mw76-space-3) var(--mw76-space-4);
    border: 1px solid var(--mw76-border); border-radius: var(--mw76-radius-control); background: var(--mw76-surface);
    color: var(--mw76-text); font: inherit; box-shadow: none;
}
.mw76-root.mw76-auth-content .mw76-input:focus { border-color: var(--mw76-focus); outline: 2px solid var(--mw76-focus); outline-offset: 2px; }
.mw76-root.mw76-auth-content .mw76-input.input-validation-error { border-color: var(--mw76-error); }
/* The visibility toggle sits inside the field, so the input keeps the full column width.
   Its text stays in the DOM for assistive technology; aria-label carries the full name. */
.mw76-root.mw76-auth-content .mw76-password-field { position: relative; min-inline-size: 0; }
.mw76-root.mw76-auth-content .mw76-password-field > .mw76-input { padding-inline-end: 3.25rem; }
.mw76-root.mw76-auth-content .mw76-password-toggle {
    position: absolute; inset-block-start: 50%; inset-inline-end: 0.125rem; transform: translateY(-50%);
    display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
    background: transparent; color: var(--mw76-text-muted); border: 0; border-radius: var(--mw76-radius-control); cursor: pointer;
}
.mw76-root.mw76-auth-content .mw76-password-toggle:hover { color: var(--mw76-link); background: var(--mw76-surface-muted); }
.mw76-root.mw76-auth-content .mw76-password-toggle:focus-visible { outline: 2px solid var(--mw76-focus); outline-offset: -2px; }
.mw76-root.mw76-auth-content .mw76-password-toggle[aria-pressed="true"] { color: var(--mw76-link); }
.mw76-root.mw76-auth-content .mw76-password-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; }
.mw76-root.mw76-auth-content .mw76-password-toggle [data-mw-password-toggle-label] {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mw76-root.mw76-auth-content .mw76-field-error { color: var(--mw76-error); font-size: var(--mw76-font-label); }
.mw76-root.mw76-auth-content .mw76-field-error:empty { display: none; }
.mw76-root.mw76-auth-content .mw76-field-help { color: var(--mw76-text-muted); font-size: var(--mw76-font-label); }
.mw76-root.mw76-auth-content .mw76-auth-validation-summary.validation-summary-valid { display: none; }
.mw76-root.mw76-auth-content .mw76-auth-validation-summary.validation-summary-errors,
.mw76-root.mw76-auth-content .mw76-alert { border-inline-start: 3px solid var(--mw76-error); padding: var(--mw76-space-4); margin-block-end: var(--mw76-space-6); background: var(--mw76-surface-muted); color: var(--mw76-error); border-radius: var(--mw76-radius-control); }
.mw76-root.mw76-auth-content .mw76-auth-validation-summary ul { margin: 0; padding-inline-start: var(--mw76-space-4); }
.mw76-root.mw76-auth-content .mw76-alert { display: flex; gap: var(--mw76-space-3); align-items: start; }
.mw76-root.mw76-auth-content .mw76-alert--success { color: var(--mw76-success); border-color: var(--mw76-success); }
.mw76-root.mw76-auth-content .mw76-auth-check { display: flex; align-items: center; gap: var(--mw76-space-3); padding-block: var(--mw76-space-6); cursor: pointer; font-size: var(--mw76-font-label); }
.mw76-root.mw76-auth-content .mw76-auth-check__input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--mw76-color-action); flex-shrink: 0; }
.mw76-root.mw76-auth-content .mw76-auth-check__box { display: none; }
.mw76-root.mw76-auth-content .mw76-auth-primary { display: flex; inline-size: 100%; min-block-size: 3rem; margin-block-start: var(--mw76-space-6); }
.mw76-root.mw76-auth-content .mw76-auth-check + .mw76-auth-primary { margin-block-start: 0; }
.mw76-root.mw76-auth-content .mw76-auth-switch,
.mw76-root.mw76-auth-content .mw76-auth-secondary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--mw76-space-2); margin-block-start: var(--mw76-space-6); font-size: var(--mw76-font-label); }
.mw76-root.mw76-auth-content .mw76-auth-switch { border-block-start: 1px solid var(--mw76-surface-tint); padding-block-start: var(--mw76-space-6); }
.mw76-root.mw76-auth-content .mw76-auth-form-panel a { color: var(--mw76-link); text-underline-offset: 0.2em; }
.mw76-root.mw76-auth-content .mw76-auth-secondary a { display: inline-flex; align-items: center; gap: var(--mw76-space-2); min-block-size: 2.75rem; }
.mw76-root.mw76-auth-content .mw76-auth-group { margin: 0 0 var(--mw76-space-8); padding: 0; border: 0; min-inline-size: 0; }
.mw76-root.mw76-auth-content .mw76-auth-group legend { display: flex; justify-content: space-between; gap: var(--mw76-space-4); float: none; inline-size: 100%; font-size: var(--mw76-heading-3); font-weight: 600; color: var(--mw76-color-secondary); padding-block-end: var(--mw76-space-4); }
.mw76-root.mw76-auth-content .mw76-auth-group legend small { font-size: var(--mw76-font-caption); font-weight: 400; color: var(--mw76-text-muted); }
.mw76-root.mw76-auth-content .mw76-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--mw76-space-6); }
.mw76-root.mw76-auth-content .mw76-auth-field--full { grid-column: 1 / -1; }
.mw76-root.mw76-auth-content .mw76-password-requirements { padding: var(--mw76-space-4); margin-block-start: var(--mw76-space-4); font-size: var(--mw76-font-label); background: var(--mw76-surface-muted); border-radius: var(--mw76-radius-control); }
.mw76-root.mw76-auth-content .mw76-password-requirements p { margin: 0 0 var(--mw76-space-2); font-weight: 600; }
.mw76-root.mw76-auth-content .mw76-password-requirements ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--mw76-space-2) var(--mw76-space-6); padding-inline-start: var(--mw76-space-4); margin: 0; }
.mw76-root.mw76-auth-content .mw76-password-requirements .is-met { color: var(--mw76-success); text-decoration: underline; text-decoration-style: dotted; }
.mw76-root.mw76-auth-content .mw76-auth-status { text-align: center; padding-block: var(--mw76-space-4); }
.mw76-root.mw76-auth-content .mw76-auth-status h2 { font-size: var(--mw76-heading-2); color: var(--mw76-color-secondary); }
.mw76-root.mw76-auth-content .mw76-auth-status__icon { display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--mw76-surface-tint); color: var(--mw76-success); margin-block-end: var(--mw76-space-4); }
.mw76-root.mw76-auth-content .mw76-auth-development-note { padding: var(--mw76-space-4); border: 1px solid var(--mw76-border); overflow-wrap: anywhere; margin-block-start: var(--mw76-space-6); }
.mw76-root.mw76-auth-content .mw76-auth-access-denied__help { text-align: center; font-size: var(--mw76-font-label); color: var(--mw76-text-muted); margin-block-start: var(--mw76-space-6); }
.mw76-root.mw76-auth-content .mw76-bidi-data { unicode-bidi: isolate; }
.mw76-root.mw76-auth-content .mw76-directional-icon:dir(rtl) { transform: scaleX(-1); }
.mw76-root.mw76-auth-content .mw76-spinner:not([hidden]) { inline-size: 1rem; block-size: 1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; display: inline-block; }
.mw76-root.mw76-auth-content [hidden] { display: none; }
.mw76-root.mw76-auth-content .mw76-action:disabled { opacity: 0.65; cursor: wait; }
@media (max-width: 575.98px) {
    .mw76-root.mw76-auth-content { padding-block: var(--mw76-space-4) var(--mw76-space-8); }
    .mw76-root.mw76-auth-content .mw76-auth-experience,
    .mw76-root.mw76-auth-content .mw76-auth-access-denied { padding: var(--mw76-space-6) var(--mw76-space-4); }
    .mw76-root.mw76-auth-content .mw76-auth-intro h1 { font-size: 1.75rem; }
    .mw76-root.mw76-auth-content .mw76-auth-grid,
    .mw76-root.mw76-auth-content .mw76-password-requirements ul { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .mw76-root.mw76-auth-content .mw76-action,
    .mw76-root.mw76-auth-content .mw76-input { transition: none; }
}