/* Shared sign-in / create-account form (shared/auth-form.js). Works on site.css pages (dark) and app.css pages
   (light, dark by OS) by reading each page's own tokens, with fallbacks. Outline buttons only: no orange buttons. */
.af {
  --af-ink: var(--ink, #0f172a); --af-muted: var(--muted, #64748b); --af-line: var(--ghost-line, var(--line, #cbd5e1));
  --af-field: var(--field, var(--card, #fff)); --af-err: var(--danger, var(--err, #b91c1c)); --af-link: var(--link, var(--ink, #0f172a));
  --af-good: var(--won, #4ade80);
  display: grid; gap: 14px; color: var(--af-ink);
}
.af [hidden] { display: none !important; }
.af-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--af-line); }
.af-tab { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--af-muted); font: inherit; font-weight: 700; cursor: pointer; }
.af-tab[aria-pressed="true"] { background: var(--af-field); color: var(--af-ink); box-shadow: 0 0 0 1px var(--af-line); }
.af-form { display: grid; gap: 12px; margin: 0; }
.af-field { display: grid; gap: 6px; }
.af-field label { font-weight: 700; font-size: 14px; }
.af input { width: 100%; box-sizing: border-box; min-height: 46px; font-size: 16px; }
.af select { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid var(--af-line); border-radius: 10px;
  background: var(--af-field); color: var(--af-ink); font: inherit; font-size: 16px; }
.af select[aria-invalid="true"], .af input[aria-invalid="true"] { border-color: var(--af-err); box-shadow: 0 0 0 1px var(--af-err); }
.af-pw { position: relative; }
.af-pw input { padding-right: 68px; }
.af-show { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 40px; min-width: 56px; border: 0; background: none;
  color: var(--af-link); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.af-group { display: grid; gap: 12px; }
.af-form[data-form="signup"] { container-type: inline-size; }
.af-pair { display: grid; gap: 12px; }
@container (min-width: 440px) { .af-pair { grid-template-columns: 1fr 1fr; } .af-pair.af-city { grid-template-columns: 2fr 1fr; } }
.af-sub { margin: 6px 0 0; font-weight: 700; font-size: 16px; }
.af-step { margin: 0; color: var(--af-muted); font-size: 14px; font-weight: 600; }
.af-opt { display: grid; gap: 12px; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--af-line); min-width: 0; }
.af-opt legend { padding: 0 8px 0 0; color: var(--af-muted); font-size: 14px; font-weight: 700; }
details.af-opt { display: block; padding: 0; }
.af-opt summary { min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--af-muted); font-size: 14px; font-weight: 700; cursor: pointer; }
.af-opt[open] summary { margin-bottom: 8px; }
.af-opt summary::before { content: "+"; width: 1em; text-align: center; font-size: 18px; line-height: 1; }
.af-opt[open] summary::before { content: "\2212"; }
.af-from { overflow-wrap: anywhere; }
.af-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.af-strength { display: grid; gap: 6px; }
.af-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.af-meter i { height: 4px; border-radius: 2px; background: var(--af-line); }
.af-meter[data-s="1"] i:nth-child(-n+1), .af-meter[data-s="2"] i:nth-child(-n+2) { background: var(--af-muted); }
.af-meter[data-s="3"] i:nth-child(-n+3), .af-meter[data-s="4"] i { background: var(--af-good); }
.af-hint, .af-fine, .af-lead { margin: 0; color: var(--af-muted); font-size: 14px; }
.af-lead { font-size: 15px; }
.af-btn { justify-self: start; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: transparent; color: var(--af-ink);
  box-shadow: inset 0 0 0 1.5px var(--af-ink); font: inherit; font-weight: 700; cursor: pointer; }
.af-btn:disabled, .af-link:disabled { opacity: .6; cursor: default; }
.af-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; }
.af-link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-size: 15px; font-weight: 600; color: var(--af-link); text-decoration: underline; cursor: pointer; text-align: left; }
.af-title { margin: 0 0 6px; font-size: 26px; }
.af-sent p { margin: 0 0 4px; }
.af-status { margin: 0; min-height: 1.4em; color: var(--af-muted); }
.af-status.error { color: var(--af-err); font-weight: 600; }
.af-status:empty { display: none; }
.af :focus-visible { outline: 2px solid var(--focus, var(--af-ink)); outline-offset: 2px; }
@media (max-width: 420px) { .af-btn { width: 100%; justify-self: stretch; } .af-actions { flex-direction: column; align-items: stretch; } }
a.af-link { display: inline-flex; align-items: center; }

/* Demo gate (shared/demo-gate.js). Hides the demo until a confirmed account is signed in. */
html.iv-gated body > :not(#iv-gate):not(header.nav):not(.skip) { display: none !important; }
html.iv-gated body { overflow-x: hidden; }
.iv-gate { padding: 56px 20px 72px; }
.iv-gate-in { max-width: 520px; margin: 0 auto; display: grid; gap: 14px; }
.iv-gate h1 { white-space: normal; overflow: visible; text-overflow: clip; margin: 0; font-size: clamp(30px, 6vw, 44px); line-height: 1.1; }
.iv-gate-lead { margin: 0 0 6px; color: var(--muted, #64748b); font-size: 17px; }
.iv-gate-fine { margin: 6px 0 0; color: var(--muted, #64748b); font-size: 14px; }
.iv-gate-fine a { color: var(--link, var(--ink, #0f172a)); }
#iv-gate-form { background: var(--card, #fff); border-radius: 16px; box-shadow: 0 0 0 1px var(--line, #e2e8f0); padding: 20px; }
.iv-gate-crm { min-height: 100vh; box-sizing: border-box; background: var(--bg); }
.iv-gate-crm h1 { font-size: clamp(26px, 6vw, 36px); }
@media (max-width: 420px) { .iv-gate { padding: 32px 16px 56px; } #iv-gate-form { padding: 16px; } }
/* Stay signed in + Caps Lock */
label.af-keep, .acct-card label.af-keep { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.af-keep input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; }
.af-caps { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--warn, #b45309); }
html[data-theme="night"] .af-caps, html:not([data-theme]) .af-caps { color: #fbbf24; }
.af-caps[hidden] { display: none; }