/* Dedicated login screen (login / forced password change).
     Shown by default (not gated behind a "visible" class) so the app
     shell — sidebar included — never flashes on screen before JS has
     had a chance to confirm the session is actually authenticated. */
  #auth-screen {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow-y: auto;
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(62,90,76,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 100%, rgba(62,90,76,0.10), transparent 60%),
      var(--bg);
  }
  #auth-screen.hidden { display: none; }
  /* Slow-drifting holographic glow behind the panel — decorative only,
     opacity kept low so it never competes with the form for attention. */
  #auth-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--holo);
    opacity: 0.06;
    filter: blur(140px);
    animation: holo-spin 24s linear infinite;
    pointer-events: none;
  }
  /* Grey smoke wafting up from the bottom edge — modeled on the Skyrim
     main-menu fog bank (soft, wispy cloud masses concentrated low and to
     one side, fading to black rather than crisp glowing blobs), sitting
     alongside the holo glow above. Behind the panel (z-index 0 vs.
     .auth-panel's 1) and ignores pointer events so it's purely decorative
     and never gets in the way of the form. */
  #auth-screen::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 72vh;
    z-index: 0;
    background:
      radial-gradient(ellipse 20% 34% at 4% 100%, rgba(240,240,240,0.42), transparent 75%),
      radial-gradient(ellipse 16% 26% at 15% 96%, rgba(225,225,225,0.30), transparent 70%),
      radial-gradient(ellipse 24% 30% at 27% 100%, rgba(210,210,210,0.24), transparent 72%),
      radial-gradient(ellipse 18% 28% at 40% 98%, rgba(230,230,230,0.28), transparent 70%),
      radial-gradient(ellipse 26% 32% at 52% 100%, rgba(200,200,200,0.20), transparent 72%),
      radial-gradient(ellipse 16% 24% at 63% 96%, rgba(220,220,220,0.22), transparent 68%),
      radial-gradient(ellipse 22% 30% at 76% 100%, rgba(210,210,210,0.20), transparent 70%),
      radial-gradient(ellipse 18% 26% at 90% 97%, rgba(230,230,230,0.24), transparent 70%),
      linear-gradient(to top, rgba(200,200,200,0.14), transparent 80%);
    filter: blur(30px);
    animation: auth-smoke-drift 46s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes auth-smoke-drift {
    0% { transform: translate(-3%, 2%) scale(1); opacity: 0.82; }
    50% { transform: translate(3.5%, -1%) scale(1.04); opacity: 1; }
    100% { transform: translate(-1.5%, 1%) scale(1.02); opacity: 0.9; }
  }
  .auth-panel {
    position: relative; z-index: 1;
    min-height: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 48px 32px;
  }
  .auth-brand { padding-right: 12px; }
  .auth-brand .brand-mark {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; font-weight: 700; margin-bottom: 16px;
  }
  .auth-brand .brand-mark img {
    height: 38px;
    width: auto;
    display: block;
    animation: auth-logo-in 0.6s cubic-bezier(.2,.8,.2,1);
  }
  .auth-brand .tagline {
    font-size: 15px; color: var(--text-dim); line-height: 1.7; margin-bottom: 22px; max-width: 38ch;
    font-style: italic;
  }
  .auth-version { font-size: 11px; color: var(--text-dim); margin-top: 22px; }

  /* Deliberately vague — tone, not an inventory of the actual mechanisms
     behind it (those live server-side in backend/auth.py, undisclosed
     here on purpose). */
  .auth-warning {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.85;
    animation: auth-warning-pulse 3.2s ease-in-out infinite;
  }
  .auth-warning .icon-svg { width: 15px; height: 15px; color: var(--amber); flex-shrink: 0; }
  @keyframes auth-warning-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.95; }
  }

  .auth-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background-color: var(--panel);
    background-image: linear-gradient(180deg, transparent 0%, rgba(85,124,104,0.35) 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 -40%;
    animation: auth-card-scan 5s linear infinite;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 32px 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.5);
    overflow: hidden;
  }
  @keyframes auth-card-scan {
    from { background-position: 0 -40%; }
    to { background-position: 0 140%; }
  }
  /* Angular sci-fi corner brackets — a vault-panel cue instead of the
     plain rounded card, reinforcing the "secure terminal" framing. */
  .auth-card::before,
  .auth-card::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    pointer-events: none;
    z-index: 2;
  }
  .auth-card::before {
    top: 8px; left: 8px;
    border-top: 2px solid var(--verdigris-hover);
    border-left: 2px solid var(--verdigris-hover);
  }
  .auth-card::after {
    bottom: 8px; right: 8px;
    border-bottom: 2px solid var(--verdigris-hover);
    border-right: 2px solid var(--verdigris-hover);
  }
  .auth-card h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-family: var(--font-display);
    letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 8px;
  }
  .auth-card h2 .icon-svg { width: 18px; height: 18px; color: var(--verdigris-hover); }
  .auth-card .sub {
    font-size: 12.5px;
    color: var(--text-dim);
    margin-bottom: 20px;
    line-height: 1.5;
  }
  .auth-card label {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 5px;
    margin-top: 14px;
  }
  .auth-card input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
    outline: none;
  }
  .auth-card input:focus { border-color: var(--accent); }
  .auth-card button[type="submit"] {
    width: 100%;
    margin-top: 20px;
    background: var(--accent);
    border: none;
    color: #070605;
    font-weight: 700;
    border-radius: 8px;
    padding: 11px;
    font-size: 13.5px;
    cursor: pointer;
  }
  .auth-card button[type="submit"]:disabled { opacity: 0.5; cursor: default; }
  .auth-card button[type="submit"]:not(:disabled):hover { filter: brightness(1.12); }
  .auth-err {
    color: var(--red);
    font-size: 12px;
    margin-top: 12px;
    min-height: 14px;
    line-height: 1.4;
  }
  .auth-card.wide { max-width: 440px; }
  .auth-card .qr-box {
    display: flex; justify-content: center;
    background: #fff; padding: 14px; border-radius: 10px; margin: 4px 0 14px;
  }
  .auth-card .qr-box img { width: 176px; height: 176px; display: block; }
  .auth-card .secret-text {
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; text-align: center;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px;
    word-break: break-all; user-select: all;
  }
  .auth-card .hint { font-size: 11px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }
  .link-btn {
    background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer;
    text-decoration: underline; padding: 0; margin-top: 16px; display: inline-block;
  }
  .link-btn:hover { color: var(--text); }
  .backup-codes-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0;
    font-family: var(--mono); font-size: 13px;
  }
  .backup-codes-grid div {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; text-align: center;
  }

  /* Vault sequence gate — a puzzle shown before the password form. The
     grid + highlighted path are rendered to a PNG server-side (see
     /api/auth/vault/challenge in backend/auth.py) and answered with the
     keypad below rather than a text field; see auth.js: showVaultGate for
     why. It's a real second layer, not a substitute for the unconditional
     server-side brute-force protection (bcrypt + escalating lockout). */
  .vault-image-wrap {
    margin: 2px 0 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: #050605;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
  }
  .vault-image { display: block; width: 100%; height: auto; }

  .vault-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .vault-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
  }
  .vault-dot.filled {
    background: var(--amber);
    border-color: var(--amber);
    box-shadow: 0 0 8px rgba(245,184,79,0.7);
  }

  .vault-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .vault-key {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 14px 0;
    font-family: var(--mono);
    font-size: 17px;
    cursor: pointer;
    user-select: none;
  }
  .vault-key:hover { border-color: var(--verdigris-hover); color: var(--verdigris-hover); }
  .vault-key:active { transform: scale(0.95); }
  .vault-key-action { display: flex; align-items: center; justify-content: center; }
  .vault-key-action .icon-svg { width: 16px; height: 16px; }

  /* The payoff beat after a correct sequence — see auth.js: showVaultUnlock. */
  .vault-unlock {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px;
    padding: 44px 0 34px;
  }
  .vault-unlock-rings {
    position: absolute;
    top: 38px; left: 50%;
    width: 10px; height: 10px;
    pointer-events: none;
  }
  .vault-unlock-rings span {
    position: absolute;
    top: 0; left: 0;
    width: 10px; height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    border: 2px solid var(--amber);
    opacity: 0;
    animation: vault-ring-pulse 1.3s ease-out infinite;
  }
  .vault-unlock-rings span:nth-child(2) { animation-delay: 0.3s; }
  .vault-unlock-rings span:nth-child(3) { animation-delay: 0.6s; }
  @keyframes vault-ring-pulse {
    0% { width: 10px; height: 10px; margin: 0 0 0 -5px; opacity: 0.85; border-color: var(--amber); }
    100% { width: 150px; height: 150px; margin: -70px 0 0 -75px; opacity: 0; border-color: var(--verdigris-hover); }
  }
  .vault-unlock-icon {
    position: relative; z-index: 1;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, rgba(245,184,79,0.25), transparent 70%);
    animation: vault-unlock-pop 0.5s cubic-bezier(.34,1.56,.64,1);
  }
  .vault-unlock-icon .icon-svg {
    width: 32px; height: 32px; color: var(--amber);
    filter: drop-shadow(0 0 10px rgba(245,184,79,0.7));
  }
  @keyframes vault-unlock-pop {
    0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
  }
  .vault-unlock-msg {
    font-family: var(--font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--amber);
    opacity: 0;
    animation: vault-msg-in 0.4s ease 0.25s forwards;
  }
  @keyframes vault-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Step transitions — retriggered from JS (auth.js: animateAuthCard) by
     removing+reflowing+re-adding the class, since swapping .innerHTML alone
     doesn't restart a CSS animation already assigned to the (unchanged) node. */
  @keyframes auth-logo-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes auth-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .auth-card.auth-anim-in { animation: auth-card-in 0.4s cubic-bezier(.2,.8,.2,1); }
  @keyframes auth-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
  }
  .auth-card.shake { animation: auth-shake 0.4s ease; }

  /* A soft notice (e.g. "your login session expired") reuses .auth-err's
     layout but reads as informational rather than a failure. */
  .auth-err.notice { color: var(--amber); }

  .mfa-countdown {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    margin-top: 14px;
    font-variant-numeric: tabular-nums;
  }
  .mfa-countdown.low { color: var(--amber); }

  .auth-success {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 28px 0 20px;
  }
  .auth-success-check {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff;
    background: linear-gradient(120deg, var(--green), #23b47a);
    box-shadow: 0 0 24px -4px rgba(62,207,142,0.6);
    animation: auth-success-pop 0.45s cubic-bezier(.34,1.56,.64,1);
  }
  .auth-success-check .icon-svg { color: #fff; filter: none; width: 28px; height: 28px; }
  @keyframes auth-success-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
  }
  .auth-success-msg {
    font-family: var(--font-display); letter-spacing: 0.4px; font-size: 14px; color: var(--text);
  }

  @media (prefers-reduced-motion: reduce) {
    #auth-screen::before,
    #auth-screen::after,
    .auth-brand .brand-mark img,
    .auth-warning,
    .auth-card,
    .auth-card.auth-anim-in,
    .auth-card.shake,
    .auth-success-check,
    .vault-unlock-rings span,
    .vault-unlock-icon,
    .vault-unlock-msg {
      animation: none !important;
    }
    .auth-card { background-image: none; }
    .vault-unlock-rings { display: none; }
    .vault-unlock-msg { opacity: 1; }
  }

  @media (max-width: 760px) {
    .auth-panel { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; }
    .auth-brand { padding-right: 0; text-align: center; }
    .auth-brand .brand-mark { justify-content: center; }
    .auth-brand .tagline { max-width: none; margin-left: auto; margin-right: auto; }
    .auth-warning { justify-content: center; }
    .auth-card { margin: 0 auto; }
  }