/* ==========================================================================
   ACCOUNTS — Step 1 styling. Additive only: the modal, the Profile panel and
   a toast. No existing rule is changed and no existing element is restyled.
   Class names avoid the -card / -tile / -tag / -pill / -badge / hero traps.
   ========================================================================== */
#authSec, .auth-ov, .auth-toast{
  --au-navy:#243447; --au-navy2:#31465F; --au-mut:#5A6B7D;
  --au-line:#E7E1D6; --au-cream:#FBF8F2; --au-sage:#5F7350; --au-sagel:#EDF2EA;
  --au-amber:#8A6516; --au-amberl:#FBF3E2; --au-red:#9B3A45; --au-redl:#FBEDEE;
  font-family:'Nunito',system-ui,sans-serif; color:var(--au-navy);
}
#authSec *, .auth-ov *{ box-sizing:border-box; }

/* ---- the modal ----------------------------------------------------------- */
.auth-ov{
  position:fixed; inset:0; z-index:100002; background:rgba(36,52,71,.5);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.auth-ov.is-on{ display:flex; }
.auth-box{
  position:relative; width:100%; max-width:440px;
  max-height:calc(100dvh - 48px); overflow-y:auto;
  background:var(--au-cream); border-radius:22px; padding:26px 24px 22px;
  box-shadow:0 24px 60px rgba(36,52,71,.34);
}
.auth-box h2{
  font-family:'Playfair Display',Georgia,serif; font-size:1.45rem; font-weight:700;
  color:var(--au-navy) !important; margin:0 0 8px; padding-right:44px;
}
.auth-p{ margin:0 0 4px; font-size:.95rem; line-height:1.6; color:var(--au-navy2); }
.auth-fine{ margin:12px 0 0; font-size:.82rem; line-height:1.55; color:var(--au-mut); }
.auth-x{
  position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--au-line); background:#fff !important; color:var(--au-navy) !important;
  cursor:pointer; font-size:.95rem;
}
.auth-tabs{ display:flex; gap:4px; padding:4px; margin:34px 0 16px;
  background:#fff; border:1px solid var(--au-line); border-radius:50px; }
.auth-tab{
  flex:1 1 50%; min-height:44px; padding:10px; border:0; border-radius:50px;
  background:transparent !important; cursor:pointer; font:inherit; font-weight:700;
  font-size:.92rem; color:var(--au-navy2) !important;
}
.auth-tab.is-on{ background:var(--au-sage) !important; color:#fff !important; }
.auth-f{ display:block; margin-top:14px; }
.auth-l{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--au-navy2); margin-bottom:6px; }
.auth-in{
  width:100%; min-height:50px; padding:13px 14px; border:1px solid var(--au-line);
  border-radius:13px; background:#fff !important; font:inherit; font-size:1rem;
  color:var(--au-navy);
}
.auth-in:focus{ outline:2px solid var(--au-sage); outline-offset:1px; }
.auth-msg{ margin:14px 0 0; padding:12px 14px; border-radius:13px; font-size:.9rem;
  line-height:1.5; }
.auth-msg.auth-bad{ background:var(--au-redl); border:1px solid #EBC6CA; color:var(--au-red); }
.auth-msg.auth-ok{ background:var(--au-sagel); border:1px solid #D6E2D0; color:#3F5436; }
.auth-foot{ display:flex; gap:10px; margin-top:20px; align-items:center;
  flex-wrap:wrap; justify-content:flex-end; }
.auth-b{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:13px 22px; border-radius:50px; border:1px solid var(--au-line);
  background:#fff !important; color:var(--au-navy) !important; cursor:pointer;
  font:inherit; font-weight:700; font-size:.94rem;
}
.auth-b:hover{ background:var(--au-sagel) !important; }
.auth-b.is-go{ background:var(--au-sage) !important; color:#fff !important;
  border-color:var(--au-sage); }
.auth-b.is-go:hover{ background:#4E6142 !important; }
.auth-b[disabled]{ opacity:.7; cursor:default; }
.auth-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.auth-two .auth-f{ margin-top:14px; }
.auth-id{ margin-top:18px; padding-top:4px; }
.auth-id .auth-in[readonly]{ background:#F4F1EA !important; color:var(--au-navy2); }
.auth-clash{ padding:12px 14px; border-radius:12px; background:var(--au-amberl);
  border:1px solid #E8D6AE; color:var(--au-amber) !important; }
.auth-clash b{ color:var(--au-amber); }
.auth-forgot{ margin-top:10px; text-align:right; }
.auth-swap{ margin-top:18px; padding-top:18px; border-top:1px solid var(--au-line);
  text-align:center; }
.auth-swap span{ display:block; font-size:.9rem; color:var(--au-navy2); margin-bottom:10px; }
.auth-b.auth-wide{ width:100%; border:2px solid var(--au-sage);
  color:var(--au-sage) !important; font-size:.98rem; }
.auth-b.auth-wide:hover{ background:var(--au-sagel) !important; }
.auth-build{ margin:14px 0 0; text-align:center; font-size:.72rem; color:var(--au-mut);
  letter-spacing:.04em; }
.auth-link{ background:transparent !important; border:0; padding:4px 2px; min-height:44px;
  font:inherit; font-size:.82rem; font-weight:700; color:var(--au-sage) !important;
  cursor:pointer; text-decoration:underline; }
.auth-spin{
  width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff; display:inline-block; animation:authSpin .7s linear infinite;
}
@keyframes authSpin{ to{ transform:rotate(360deg); } }

/* ---- the Profile panel ---------------------------------------------------- */
.auth-sec{
  max-width:1100px; margin:26px auto 0; padding:24px;
  background:#fff; border:1px solid var(--au-line); border-radius:22px;
  box-shadow:0 6px 20px rgba(36,52,71,.05);
}
.auth-h{
  font-family:'Playfair Display',Georgia,serif; font-size:1.4rem; font-weight:700;
  color:var(--au-navy) !important; margin:0 0 6px;
}
.auth-who{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:16px 0 0; padding:16px; border-radius:16px;
  background:var(--au-cream); border:1px solid var(--au-line); }
.auth-av{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  background:var(--au-sage); color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:1.15rem;
}
.auth-who b{ display:block; font-size:1.02rem; }
.auth-who span:not(.auth-av):not(.auth-state){ display:block; font-size:.88rem;
  color:var(--au-navy2); }
.auth-state{ margin-left:auto; padding:6px 13px; border-radius:50px;
  font-size:.76rem; font-weight:800; letter-spacing:.03em; }
.auth-state.auth-ok{ background:var(--au-sagel); color:#3F5436; }
.auth-state.auth-warn{ background:var(--au-amberl); color:var(--au-amber); }
.auth-acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* ---- the account facts ----------------------------------------------------
   A description list rather than form fields: these are facts held by the
   account, not things typed here. Colours are stated on the elements because a
   global span rule elsewhere in the app repaints text with
   -webkit-text-fill-color, which wins over colour alone. */
.auth-dl{ margin:18px 0 0; display:grid; grid-template-columns:minmax(140px,auto) 1fr;
  gap:0; border:1px solid var(--au-line); border-radius:16px; overflow:hidden; }
.auth-dt, .auth-dd{ margin:0; padding:12px 15px; font-size:.92rem; line-height:1.5;
  border-top:1px solid var(--au-line); }
.auth-dl > .auth-dt:first-of-type, .auth-dl > .auth-dt:first-of-type + .auth-dd{
  border-top:0; }
.auth-dt{ font-weight:800; background:var(--au-cream);
  color:var(--au-navy2) !important; -webkit-text-fill-color:var(--au-navy2); }
.auth-dd{ background:#fff; font-weight:600; word-break:break-word;
  color:var(--au-navy) !important; -webkit-text-fill-color:var(--au-navy); }
.auth-out{ background:var(--au-cream); }
.auth-av-out{ background:#B9C2CC !important; color:#fff !important;
  -webkit-text-fill-color:#fff; }
.auth-div{ border:0; border-top:1px solid var(--au-line); margin:22px 0 4px; }
.auth-sub-h{ margin:0; font-size:.78rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--au-mut) !important;
  -webkit-text-fill-color:var(--au-mut); }
.auth-stamp{ margin:18px 0 0; padding-top:12px; border-top:1px dashed var(--au-line);
  font-size:.78rem; line-height:1.5; color:var(--au-mut) !important;
  -webkit-text-fill-color:var(--au-mut); }

/* ---- toast ---------------------------------------------------------------- */
.auth-toast{
  position:fixed; left:50%; transform:translateX(-50%); z-index:100003;
  bottom:calc(26px + env(safe-area-inset-bottom, 0px));
  background:#243447; color:#fff; padding:13px 20px; border-radius:50px;
  font-family:'Nunito',system-ui,sans-serif; font-size:.9rem;
  box-shadow:0 14px 34px rgba(36,52,71,.32); max-width:calc(100vw - 32px);
  text-align:center;
}

@media (max-width:700px){
  .auth-sec{ margin:20px 12px 0; padding:18px 14px; border-radius:18px; }
  .auth-acts .auth-b{ flex:1 1 100%; }
  .auth-foot{ justify-content:stretch; }
  .auth-foot .auth-b{ flex:1 1 100%; }
  .auth-box{ padding:22px 16px 18px; }
  .auth-state{ margin-left:0; }
  .auth-two{ grid-template-columns:1fr; gap:0; }
  .auth-dl{ grid-template-columns:1fr; }
  .auth-dt{ padding-bottom:2px; border-top:1px solid var(--au-line); }
  .auth-dd{ padding-top:2px; border-top:0; }
  .auth-dl > .auth-dt:first-of-type + .auth-dd{ border-top:0; }
}
@media (prefers-reduced-motion:reduce){ .auth-spin{ animation:none; } }