/* Cross-document view transitions are a shell-page feature; auth pages
       opt OUT so the login->dashboard navigation never starts a transition
       the destination may reject (Chromium fires an uncaught
       InvalidStateError on the source document ~half of fresh logins). */
    @view-transition { navigation: none; }
    /* Page-local glue for the split login layout. */
    .login-form-panel { gap: 16px; }
    #login-extras { display: flex; flex-direction: column; gap: 14px; }
    #login-extras[hidden] { display: none; }
    /* Password visibility toggle rides inside the field, taken out of flow
       so the prefix icon's 50% centering tracks the input alone. */
    .pw-toggle {
      position: absolute;
      inset-inline-end: 8px;
      top: 50%;
      transform: translateY(-50%);
      padding: 6px;
    }
    /* Room for the toggle so masked dots never run underneath it. */
    #password { padding-inline-end: 42px; }
    .login-privacy { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
    /* Link tint so the policy entry stays identifiable inside the muted clause. */
    .login-privacy-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
    /* F-5 approved (09-06): visible Zyra watermark removed; provenance moved
       to source-level embedding (ARCH-16 W3). */
    /* Defensive: keep [hidden] winning even if a stale tokens.css is cached. */
    #mfa-form[hidden] { display: none; }
    .login-notice[hidden] { display: none; }
    /* Session-expired notice: informational banner above the form. */
    .login-notice {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--primary-soft);
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
    }
    .login-notice svg { flex: none; color: var(--primary); }
    /* Lockout errors read as a warning, distinct from wrong credentials. */
    .field-error.is-lockout { background: var(--sev-medium-soft); color: #B54708; }
    .field-error.is-lockout .field-error-icon { color: var(--sev-medium); }
    /* Mandatory first-login MFA enrollment: QR, manual key, app cards.
       Page-local by design; settings.html owns its own copy of the look. */
    #mfa-enroll { display: flex; flex-direction: column; gap: 14px; }
    #mfa-enroll[hidden] { display: none; }
    .enroll-apps {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
    }
    .enroll-apps-title { font-size: 14px; }
    .enroll-app { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
    .enroll-app-name { font-weight: 600; }
    .enroll-app-vendor { font-size: 12px; color: var(--muted); }
    .enroll-app-links { display: flex; gap: 12px; font-size: 13px; margin-inline-start: auto; }
    .enroll-apps-note { margin: 0; font-size: 12px; color: var(--muted); }
    .enroll-scan { margin: 0; font-weight: 600; }
    .enroll-savenote {
      margin: 0;
      font-size: 12.5px;
      color: #8a5a00;
      background: #fff7e6;
      border: 1px solid #f0c36d;
      border-radius: 8px;
      padding: 8px 10px;
    }
    .enroll-qr {
      align-self: center;
      background: #fff;
      border: 1px solid var(--line, #dfe6ef);
      border-radius: 12px;
      padding: 8px;
    }
    /* Enrolment-session countdown (IMPL-321): the mfa-pending token lives
       minutes, not hours — surface the window so a slow authenticator setup
       never surfaces as a generic "invalid code". */
    .enroll-qr-wrap { position: relative; align-self: center; }
    .enroll-qr-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px;
      text-align: center;
      background: rgb(255 255 255 / 92%);
      border-radius: 12px;
    }
    .enroll-qr-overlay[hidden] { display: none; }
    .enroll-qr-overlay-title { margin: 0; font-weight: 600; color: var(--sev-high, #CE2A1E); }
    .enroll-qr-overlay-body { margin: 0; font-size: 12.5px; color: var(--muted); }
    .enroll-countdown {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      color: var(--muted);
    }
    .enroll-countdown-time {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: var(--primary);
    }
    .enroll-countdown-track {
      height: 4px;
      border-radius: 999px;
      background: var(--line, #dfe6ef);
      overflow: hidden;
    }
    .enroll-countdown-fill {
      height: 100%;
      border-radius: inherit;
      background: var(--primary);
      transition: width 1s linear;
    }
    .enroll-countdown.is-urgent .enroll-countdown-label { color: var(--sev-high, #CE2A1E); }
    .enroll-countdown.is-urgent .enroll-countdown-time { color: var(--sev-high, #CE2A1E); }
    /* The track holding the fill is a SIBLING of the countdown box, not a
       descendant — a plain descendant selector can never match it (B3b). */
    .enroll-countdown.is-urgent ~ .enroll-countdown-track .enroll-countdown-fill { background: var(--sev-high, #CE2A1E); }
    .enroll-session-hint { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
    .enroll-rotated-note {
      margin: 0;
      font-size: 12.5px;
      color: #8a5a00;
      background: #fff7e6;
      border: 1px solid #f0c36d;
      border-radius: 8px;
      padding: 8px 10px;
    }
    /* IMPL-314: manual QR rotation before the first binding completes. */
    .enroll-refresh { align-self: center; }
    .enroll-secret-label { font-size: 13px; color: var(--muted); }
    .enroll-secret { display: flex; align-items: center; gap: 8px; }
    .enroll-secret code {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--primary-soft);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 14px;
      letter-spacing: 1px;
      word-break: break-all;
    }