/* ============================================
   ARBA AUTH UI
   Shared chrome + card styling for the three
   auth screens: /app/ (sign in), /app/signup.html,
   /app/account.html.
   Extracted verbatim from the inline <style> that
   used to live in /app/index.html, then extended
   with the components the new screens need.
   MUST be linked AFTER /assets/arba-system.css —
   .btn-primary and .field exist in both files and
   these definitions win by source order.
   ============================================ */

    /* Mobile block */
    #arba-mobile-block {
      display: none;
      position: fixed; inset: 0; z-index: 999999;
      background: var(--bg);
      flex-direction: column; align-items: center; justify-content: center;
      gap: 22px; padding: 40px 32px; text-align: center;
      font-family: var(--font-ui);
    }
    #arba-mobile-block img { height: 28px; opacity: .9; }
    #arba-mobile-block .mob-icon {
      width: 56px; height: 56px;
      background: rgba(125,211,252,.08); border: 1px solid rgba(125,211,252,.22);
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
    }
    #arba-mobile-block h1 {
      font-family: var(--font-display);
      font-size: 28px; font-weight: 400;
      color: var(--ink);
      font-variation-settings: "opsz" 72;
      letter-spacing: -0.015em;
    }
    #arba-mobile-block p { font-size: 13px; color: var(--ink-3); max-width: 300px; line-height: 1.65; }
    @media (max-width: 767px) {
      #arba-mobile-block { display: flex; }
      body > *:not(#arba-mobile-block) { display: none !important; }
    }

    /* Page layout */
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: clamp(24px, 3.5vw, 48px);
      position: relative;
      overflow: hidden;
    }

    /* Corner registration marks */
    .regmark {
      position: fixed; width: 20px; height: 20px; z-index: 2; pointer-events: none;
    }
    .regmark::before, .regmark::after {
      content: ""; position: absolute;
      background: var(--ink-3); opacity: .42;
    }
    .regmark::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
    .regmark::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
    .rm-tl { top: 14px; left: 14px; }
    .rm-tr { top: 14px; right: 14px; }
    .rm-bl { bottom: 14px; left: 14px; }
    .rm-br { bottom: 14px; right: 14px; }

    /* Top mission strip */
    .mission-head {
      position: fixed;
      top: 26px; left: 0; right: 0;
      display: flex; justify-content: space-between; align-items: center;
      padding: 0 clamp(32px, 4vw, 56px);
      z-index: 2;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .mission-head b { color: var(--ink-2); font-weight: 600; }
    .mission-head .right { display: inline-flex; align-items: center; gap: 8px; color: var(--green); }
    .mission-head .right::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: var(--green); box-shadow: 0 0 8px var(--green);
      animation: pulse-green 1.6s ease-in-out infinite;
    }

    /* Auth card */
    .auth-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 460px;
      background:
        linear-gradient(180deg, rgba(125,211,252,0.015), transparent 40%),
        var(--bg-surface);
      border: 1px solid var(--hair-2);
      border-radius: var(--radius);
      padding: 40px;
      box-shadow:
        0 1px 0 0 rgba(255,255,255,0.04) inset,
        0 48px 110px -28px rgba(0,0,0,0.75);
      animation: rise-in 520ms var(--ease) both;
    }
    .auth-card::before {
      content: "";
      position: absolute;
      top: -1px; left: 40px;
      width: 42px; height: 2px;
      background: var(--cyan);
      box-shadow: 0 0 14px var(--cyan);
    }

    .auth-header { text-align: left; margin-bottom: 28px; }
    .auth-header.setpwd-mode { padding-bottom: 20px; border-bottom: 1px solid var(--hair); margin-bottom: 24px; }

    .auth-pretitle {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 16px;
      display: inline-flex; align-items: center; gap: 10px;
    }
    .auth-pretitle::before {
      content: ""; display: inline-block;
      width: 24px; height: 1px; background: var(--cyan); opacity: .7;
    }

    .auth-logo {
      height: 40px; width: auto;
      margin-bottom: 24px;
      opacity: .95;
      filter:
        drop-shadow(0 0 12px rgba(125,211,252,0.42))
        drop-shadow(0 0 28px rgba(125,211,252,0.22));
      animation: authLogoPulse 3.4s ease-in-out infinite;
    }
    @keyframes authLogoPulse {
      0%, 100% {
        filter:
          drop-shadow(0 0 12px rgba(125,211,252,0.42))
          drop-shadow(0 0 28px rgba(125,211,252,0.22));
      }
      50% {
        filter:
          drop-shadow(0 0 18px rgba(125,211,252,0.62))
          drop-shadow(0 0 40px rgba(125,211,252,0.35));
      }
    }

    .auth-title {
      font-family: var(--font-display);
      font-size: 28px; font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--ink);
      line-height: 1.1;
      margin-bottom: 10px;
    }
    .auth-title em { font-style: normal; font-weight: 400; color: var(--cyan); }
    .auth-sub {
      font-family: var(--font-ui);
      font-size: 13px;
      color: var(--ink-3);
      line-height: 1.55;
    }

    /* Form */
    .auth-form { display: flex; flex-direction: column; gap: 16px; }

    .field { display: flex; flex-direction: column; gap: 8px; }
    .field label {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 500;
      color: var(--ink-3);
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
    .field input {
      background: var(--bg-deep);
      border: 1px solid var(--hair-2);
      border-radius: var(--radius-sm);
      color: var(--ink);
      font-family: var(--font-ui);
      font-size: 14px;
      padding: 13px 14px;
      transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 220ms var(--ease);
      outline: none;
      width: 100%;
    }
    .field input:focus {
      border-color: var(--cyan);
      background: rgba(125,211,252,0.04);
      box-shadow: 0 0 0 3px rgba(125,211,252,0.12);
    }
    .field input::placeholder { color: var(--ink-4); }

    .pwd-wrap { position: relative; }
    .pwd-wrap input { padding-right: 44px; }
    .pwd-toggle {
      position: absolute;
      right: 10px; top: 50%;
      transform: translateY(-50%);
      background: transparent; border: 1px solid transparent;
      color: var(--ink-3); cursor: pointer;
      padding: 6px 8px; font-size: 13px;
      border-radius: var(--radius-xs);
      transition: color 160ms var(--ease), border-color 160ms var(--ease);
    }
    .pwd-toggle:hover { color: var(--ink); border-color: var(--hair-2); }

    #authMsg, .auth-msg {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0;
      display: none;
      line-height: 1.35;
      margin-top: -4px;
      text-align: left;
    }
    #authMsg.show, .auth-msg.show { display: block; }
    #authMsg.ok, .auth-msg.ok   { color: var(--green); }
    #authMsg.err, .auth-msg.err  { color: var(--red); }
    #authMsg.info, .auth-msg.info { color: var(--cyan); }

    /* Primary button — amber for submit */
    .btn-primary {
      width: 100%;
      padding: 14px;
      background: var(--amber);
      color: #1a1304;
      border: 1px solid var(--amber);
      border-radius: var(--radius-sm);
      font-family: var(--font-ui);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: transform 140ms var(--ease-sharp),
                  background 180ms var(--ease),
                  border-color 180ms var(--ease),
                  box-shadow 220ms var(--ease);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 8px;
      box-shadow: 0 0 0 1px rgba(248,178,75,0.18), 0 14px 38px -14px rgba(248,178,75,0.55);
      position: relative;
      overflow: hidden;
    }
    .btn-primary::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
      transform: translateX(-110%);
      transition: transform 600ms var(--ease);
      pointer-events: none;
    }
    .btn-primary:hover:not(:disabled) {
      background: var(--amber-2);
      border-color: var(--amber-2);
      transform: translateY(-1px);
      box-shadow: 0 0 0 1px rgba(251,191,36,0.35), 0 20px 48px -14px rgba(251,191,36,0.7);
    }
    .btn-primary:hover:not(:disabled)::after { transform: translateX(110%); }
    .btn-primary:active:not(:disabled) { transform: translateY(0); }
    .btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
    .btn-label { position: relative; z-index: 1; }

    /* Spinner */
    .spin {
      width: 13px; height: 13px;
      border: 2px solid rgba(26,19,4,0.3);
      border-top-color: #1a1304;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: none;
      position: relative; z-index: 1;
    }
    .btn-primary.loading .spin { display: block; }
    .btn-primary.loading .btn-label { opacity: 0.7; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Divider */
    .divider {
      display: flex; align-items: center; gap: 12px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin: 4px 0;
    }
    .divider::before, .divider::after {
      content: ''; flex: 1; height: 1px; background: var(--hair-2);
    }

    /* Footer */
    .auth-footer {
      position: fixed;
      bottom: 26px; left: 0; right: 0;
      z-index: 2;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .auth-footer a { color: var(--ink-3); text-decoration: none; transition: color 160ms var(--ease); }
    .auth-footer a:hover { color: var(--cyan); }

    /* #totpForm carries NO class — see app/index.html, `<form id="totpForm"
       style="display:none">` — so unlike its two siblings it is not .auth-form
       and never had that rule's `display: flex; gap: 16px` to lose. It is a
       plain block box, its .field stacks flush against the button, and the
       16px here is the gap standing in for the one .auth-form would have
       provided. (An earlier note here claimed an inline `display: block` was
       "beating .auth-form's flex". Nothing was being beaten; there was no
       .auth-form on this form to beat.) Spelled out rather than adding the
       class, which would mean touching showTotpStep()'s display toggle. */
    #totpForm .field { margin-bottom: 16px; }

    /* Password strength */
    .pwd-strength {
      height: 3px;
      border-radius: 2px;
      background: var(--hair-2);
      overflow: hidden;
      margin-top: 6px;
      display: none;
    }
    .pwd-strength-bar {
      height: 100%;
      border-radius: 2px;
      transition: width 300ms var(--ease), background 300ms var(--ease);
      width: 0%;
    }

    /* Set password teams section */
    #setPasswordForm { gap: 0; margin-top: 4px; }
    #setPasswordForm .teams-section  { margin-bottom: 24px; }
    #setPasswordForm .field          { gap: 8px; margin-bottom: 22px; }
    #setPasswordForm .field:last-of-type { margin-bottom: 30px; }
    #setPasswordForm .btn-primary { padding: 14px; margin-top: 0; }

    .teams-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 16px;
      background: rgba(125,211,252,0.04);
      border: 1px solid rgba(125,211,252,0.18);
      border-radius: var(--radius-sm);
    }
    .teams-label {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 500;
      color: var(--cyan);
      text-transform: uppercase;
      letter-spacing: 0.2em;
    }
    .teams-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .team-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: rgba(125,211,252,0.08);
      border: 1px solid rgba(125,211,252,0.25);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      color: var(--cyan);
      letter-spacing: 0.08em;
    }
    .team-badge::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 6px var(--cyan);
      flex-shrink: 0;
    }

    @media (max-width: 520px) {
      .auth-card { padding: 30px 24px; }
      .auth-title { font-size: 28px; }
      .mission-head { padding: 0 24px; font-size: 10px; }
      .auth-footer { font-size: 10px; }
      .regmark { width: 14px; height: 14px; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       New components for signup.html / account.html and the resend control.
       Tokens only — no new colours. assets/arba-system.css already neutralises
       every animation and transition under @media (prefers-reduced-motion).
       ══════════════════════════════════════════════════════════════════════ */

    /* The new screens toggle panels with the `hidden` attribute, and several of
       them carry an author `display: flex/grid` that would otherwise beat the
       UA stylesheet's [hidden] rule. */
    [hidden] { display: none !important; }

    /* Secondary (ghost) button — resend, sign out, retry, back */
    .btn-secondary {
      width: 100%;
      padding: 12px;
      background: transparent;
      color: var(--ink-2);
      border: 1px solid var(--hair-2);
      border-radius: var(--radius-sm);
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease);
    }
    .btn-secondary:hover:not(:disabled) {
      border-color: var(--hair-3);
      color: var(--ink);
      background: rgba(227,237,255,0.03);
    }
    .btn-secondary:disabled { opacity: .45; cursor: not-allowed; }
    .btn-secondary .spin { border-color: rgba(169,184,217,.3); border-top-color: var(--ink-2); }
    .btn-secondary.loading .spin { display: block; }
    .btn-secondary.loading .btn-label { opacity: 0.7; }

    /* Callout notice */
    .notice {
      border: 1px solid var(--hair-2);
      background: rgba(227,237,255,0.02);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      margin-bottom: 16px;
    }
    .notice-title {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .notice-body {
      font-family: var(--font-ui);
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink-2);
    }
    .notice-body a { color: var(--cyan); text-decoration: none; }
    .notice-body a:hover { opacity: .75; }
    .notice--info { border-color: rgba(125,211,252,.22); background: rgba(125,211,252,.05); }
    .notice--info .notice-title { color: var(--cyan); }
    /* --warn, NOT the CTA amber. An attention notice sitting directly above a
       button must not read as a second button; the tokens keep the two apart on
       purpose and this is the only place on the auth screens that could have
       blurred them. */
    .notice--warn { border-color: rgba(251,191,36,.22); background: rgba(251,191,36,.05); }
    .notice--warn .notice-title { color: var(--warn); }
    .notice--bad  { border-color: rgba(255,107,107,.22); background: rgba(255,107,107,.05); }
    .notice--bad  .notice-title { color: var(--red); }
    .notice--ok   { border-color: rgba(74,222,128,.22); background: rgba(74,222,128,.05); }
    .notice--ok   .notice-title { color: var(--green); }

    /* Explanation block under a blocked sign-in. Both consumers now drop plain
       text straight into it, so it needs its own reading size — otherwise it
       inherits 14px --ink and out-shouts the form it is explaining. */
    .auth-resend {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--hair);
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink-2);
    }
    .resend-head {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 10px;
    }
    .resend-msg {
      display: none;
      margin-top: 10px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      line-height: 1.4;
      font-variant-numeric: tabular-nums;
    }
    .resend-msg.show { display: block; }
    .resend-msg.ok  { color: var(--green); }
    .resend-msg.err { color: var(--red); }

    /* Alt-action row (sentence + the one link out) ─────────────────────────
       This was a NOWRAP flex row holding two children. At 10.5px mono tracked
       0.16em the pair measures ~500px inside a 380px card, so both items shrank
       and each broke INSIDE itself — "FORGOTTEN YOUR PASSWORD, OR NEED AN /
       ACCOUNT? CONTACT / ARBALABS →" read as a ragged two-column block rather
       than a sentence and a link.

       Wrapping is now allowed, the sentence claims a full row of its own, and
       the link is nowrap — so the break can only ever fall BETWEEN the two
       phrases. Rows carrying a single child (the 2FA hint, the account page's
       "Back to sign in") are unaffected: one item, one centred line. */
    .auth-alt {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--hair);
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.16em;
      line-height: 1.7;
      text-transform: uppercase;
      color: var(--ink-3);
      display: flex; flex-wrap: wrap; gap: 4px 8px;
      align-items: center; justify-content: center;
      text-align: center;
    }
    .auth-alt > span { flex: 1 0 100%; }
    .auth-alt a {
      color: var(--cyan);
      text-decoration: none;
      white-space: nowrap;
      transition: opacity 160ms var(--ease);
    }
    .auth-alt a:hover { opacity: .75; }

    /* Post-signup success mark */
    .success-mark {
      width: 44px; height: 44px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
      background: rgba(74,222,128,.08);
      border: 1px solid rgba(74,222,128,.28);
      color: var(--green);
      font-size: 20px; line-height: 1;
    }

    /* Two-step "verify, then approval" list */
    .auth-steps { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: s; }
    .auth-steps li { position: relative; padding-left: 32px; margin-bottom: 16px; }
    .auth-steps li::before {
      counter-increment: s;
      content: counter(s, decimal-leading-zero);
      position: absolute; left: 0; top: 1px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.14em;
      color: var(--cyan);
    }
    .auth-steps .step-h {
      font-family: var(--font-ui);
      font-size: 13px; font-weight: 600;
      color: var(--ink);
      margin-bottom: 3px;
    }
    .auth-steps .step-b {
      font-family: var(--font-ui);
      font-size: 12.5px; line-height: 1.6;
      color: var(--ink-3);
      overflow-wrap: anywhere;
    }

    /* Key/value rows on the account page */
    .acct-kv {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px 16px;
      margin: 4px 0 22px;
    }
    .acct-kv dt {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .acct-kv dd {
      margin: 0;
      font-family: var(--font-ui);
      font-size: 13px;
      color: var(--ink);
      overflow-wrap: anywhere;
    }

    /* Centred spinner for the account page's checking state */
    .panel-spin { display: flex; justify-content: center; padding: 8px 0 4px; }
    .panel-spin .spin {
      display: block;
      width: 22px; height: 22px;
      border-color: rgba(169,184,217,.25);
      border-top-color: var(--cyan);
    }