/* Accounts / auth screens — premium, calm, single-column. Tokens only.
   Module-scoped: never edit core/theming. Reuses .field / .btn / .card. */

.auth-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 60%),
    var(--content-bg, var(--surface-2));
}

.auth-card {
  width: 100%; max-width: 400px;
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
/* Brand lockup above the card title */
.auth-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-5); text-decoration: none; color: var(--text);
}
.auth-brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--primary); color: var(--primary-contrast, #fff);
  font-weight: var(--fw-bold, 700); font-size: 16px; letter-spacing: -0.02em;
}
.auth-brand__name { font-weight: var(--fw-semibold); font-size: 17px; letter-spacing: -0.01em; }

.auth-card__head { margin-bottom: var(--space-5); }
.auth-card__title {
  font-size: var(--fs-h1); font-weight: var(--fw-semibold);
  letter-spacing: -0.01em; margin: 0;
}
.auth-card__subtitle {
  font-size: var(--fs-table, 13px); color: var(--muted);
  margin: var(--space-2) 0 0; line-height: 1.45;
}

/* --- Messages: error and success must read differently --- */
.auth-messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.msg {
  font-size: var(--fs-table, 13px); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--r-sm); color: var(--text);
  display: flex; gap: var(--space-2); align-items: flex-start;
}
.msg--success { border-left-color: var(--st-available); background: color-mix(in srgb, var(--st-available) 8%, var(--surface)); }
.msg--error   { border-left-color: var(--st-sold);      background: color-mix(in srgb, var(--st-sold) 8%, var(--surface));      color: color-mix(in srgb, var(--st-sold) 80%, var(--text)); }
.msg--warning { border-left-color: var(--st-reserved);  background: color-mix(in srgb, var(--st-reserved) 8%, var(--surface)); }
.msg--info, .msg--debug { border-left-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }

/* Full-width submit on auth forms */
.auth-card form .btn[type="submit"],
.auth-submit { width: 100%; min-height: 44px; }

/* Footer links under the form */
.auth-alt { font-size: var(--fs-table, 13px); margin-top: var(--space-4); text-align: center; color: var(--muted); }
.auth-alt + .auth-alt { margin-top: var(--space-2); }

.auth-intro { font-size: var(--fs-table, 13px); color: var(--muted); margin: 0 0 var(--space-4); }

/* --- TOTP setup --- */
.totp-steps { font-size: var(--fs-table, 13px); color: var(--muted); padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.totp-steps li { margin-bottom: var(--space-1); }

.totp-key { margin-bottom: var(--space-4); }
.totp-key__label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--muted); margin-bottom: var(--space-2);
}
.totp-key__code {
  display: block; font-family: var(--font-mono); font-size: 15px; font-weight: var(--fw-semibold);
  letter-spacing: 2px; word-break: break-all;
  padding: var(--space-3); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text);
}
.totp-key__hint { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-2); }
.totp-add { margin-top: var(--space-2); }

/* QR (rendered as an <img> from a data-URI / SVG when available) */
.totp-qr { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.totp-qr img, .totp-qr svg { width: 180px; height: 180px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; padding: var(--space-2); }

/* "Lost device?" helper note */
.auth-note {
  margin-top: var(--space-4); padding: var(--space-3);
  font-size: var(--fs-sm); color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
}

/* --- Account settings: stacked, padded cards (bare .card has no padding) --- */
.account-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.account-stack > .card { max-width: 480px; padding: var(--card-pad); }
.account-stack > .card > .card__title { margin-bottom: var(--space-3); }
.account-stack > .card > p:last-child,
.account-stack > .card > form:last-child,
.account-stack > .card > a:last-child { margin-bottom: 0; }

/* --- Team / members table (loaded into shell via members.html) -----------
   WP-P6d: "clean, compact, but page wide". The page opts into .content--wide;
   the rows here go tight so the roster scans in one glance instead of scrolling.
   The actions column shrink-wraps so the email column takes the slack. */
.members-table td,
.members-table th { padding: var(--space-2) var(--space-3); vertical-align: middle; }
.members-table td:first-child { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-sm); }
.members-col-a { width: 1%; white-space: nowrap; }
.member-row__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; justify-content: flex-end; }
.member-scope { position: relative; }
.member-scope > summary { list-style: none; cursor: pointer; display: inline-flex; }
.member-scope > summary::-webkit-details-marker { display: none; }
.member-scope__form {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-tooltip, 70);
  width: 240px; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.member-scope__all { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-table, 13px); }
.member-row__remove { margin: 0; }


/* ============================================================================
   Procedural wireframe city/land scene behind the auth card (auth-scene.js).
   ========================================================================== */
.auth-scene{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background-color:#070b11;   /* bulletproof solid dark; JS paints the hue gradient on top */
}
.auth-scene svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.auth-scene::after{   /* vignette — calm centre, edges fade, card pops */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 50% at 50% 50%, transparent 0%, rgba(3,6,10,.35) 72%, rgba(3,6,10,.7) 100%);
}
/* full-viewport flex centre — card sits dead-centre on top of the scene */
.auth-wrap{
  position:relative; z-index:2; min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center; padding:32px 16px; margin:0;
}
.auth-card{
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.35);
  backdrop-filter:saturate(1.05);
}
@media (prefers-reduced-motion: no-preference){
  .auth-scene svg{ animation:auth-rise 1s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes auth-rise{ from{ opacity:0; transform:translateY(16px) scale(1.015); } to{ opacity:1; transform:none; } }
}

/* ── Direct staff create (Team) — email+password + searchable layout/scheme scope ───────── */
.page-head__actions{display:flex;gap:8px;align-items:center}
/* [hidden] must win over the display:flex/block below (a class would otherwise keep the panel +
   the specific-scope picker visible even in "All" mode — owner: "fix UI"). */
.staff-create[hidden],.staff-create__pick[hidden]{display:none !important}
.staff-create{margin-bottom:16px}
.staff-create__form{display:flex;flex-direction:column;gap:12px}
.staff-create__row{display:flex;gap:10px;flex-wrap:wrap}
.staff-create__row .input{flex:1 1 180px;min-width:150px}
.staff-create__scope{display:flex;gap:18px;align-items:center;font-size:13px}
.staff-create__radio{display:flex;align-items:center;gap:6px;cursor:pointer}
.staff-create__pick{display:flex;gap:18px;flex-wrap:wrap}
.staff-pick{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:6px;position:relative}
.staff-pick__lbl{font-size:12px;font-weight:600;color:var(--muted,#667)}
.staff-pick__results{position:absolute;top:100%;left:0;right:0;z-index:6;display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto;background:var(--surface,#fff);border:1px solid var(--line,#e2e5ea);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.14);margin-top:3px;padding:4px}
.staff-pick__results:empty{display:none}
.staff-opt{text-align:left;background:var(--surface-2,#f3f4f6);border:1px solid var(--line,#e2e5ea);border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer}
.staff-opt:hover{background:var(--accent-weak,#e6effe)}
.staff-pick__chips{display:flex;gap:6px;flex-wrap:wrap}
.staff-chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-weak,#e6effe);border:1px solid var(--accent,#3b82f6);color:var(--accent-strong,#1d4ed8);border-radius:16px;padding:3px 6px 3px 10px;font-size:12px}
.staff-chip__x{background:none;border:0;color:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.staff-pick__hint{font-size:12px;color:var(--muted,#667);flex-basis:100%}
.staff-create__foot{display:flex;justify-content:flex-end}