/* ══════════════════════════════════════════════════════════════
   LOGIN — 3-screen entry flow (picker → PIN → data-health welcome)
   Built to kelda-login-wireframe.html. Uses design tokens only.
   Desktop: split gradient brand panel + auth panel. <760px: form only.
   ══════════════════════════════════════════════════════════════ */

/* Muted text on the login screen. Since 2.5.6, --muted reaches 4.5:1 on
   --bg and --card through --card3 in every palette, so the login screen no
   longer needs its own lighter value. */
#login-screen { --kl-muted-text:var(--muted); }

.kl-shell { display:flex; min-height:100%; width:100%; }

/* Version badge — bottom-left of the login screen. */
.kl-version {
  position:absolute;
  left:calc(16px + env(safe-area-inset-left));
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:3; /* same as .kl-intro; later in DOM, so it paints on top */
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--kl-muted-text);
  pointer-events:none;
  user-select:none;
}

/* ── Screen 0: welcome splash (app load only) ──
   Full-bleed over both panels; same brand gradient as .kl-brand. */
.kl-intro {
  position:absolute; inset:0; z-index:3; overflow-y:auto; /* over .kl-brand children (z 2) */
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:calc(48px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right))
          calc(48px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  background:linear-gradient(160deg,#5a1030 0%,#3a1240 45%,#141a3a 100%);
  text-align:center;
}
.kl-intro[hidden] { display:none; }
.kl-intro::before {
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background:rgba(255,255,255,.06); top:-160px; right:-140px; pointer-events:none;
}
.kl-intro::after {
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  background:rgba(129,140,248,.10); bottom:-100px; left:-80px; pointer-events:none;
}
.kl-intro-body, .kl-intro-foot { position:relative; z-index:1; width:100%; max-width:400px; }
.kl-intro-body {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:klIntroIn .5s ease both;
}
/* App-icon tile around the shared Tide .brand-mark (components.css). */
.kl-intro-mark {
  width:112px; height:112px; border-radius:26px; background:var(--n900);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}
.kl-intro-mark__svg { width:72px; height:72px; }
.kl-intro-name {
  font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  color:var(--text); margin-top:20px;
}
.kl-intro-title {
  font-family:var(--font-display); font-weight:700; font-size:2.15rem;
  line-height:1.2; letter-spacing:-.02em; color:var(--text); margin-top:32px;
}
.kl-intro-sub { color:rgba(232,237,245,.78); font-size:.92rem; margin-top:12px; line-height:1.5; }
.kl-intro-foot { padding-top:32px; animation:klIntroIn .5s .15s ease both; }
.kl-intro-signin { width:100%; min-height:52px; font-size:1.05rem; }
.kl-intro-note {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:16px; font-size:.75rem; color:rgba(232,237,245,.6);
}
.kl-intro.leaving { animation:klIntroOut .25s ease forwards; pointer-events:none; }
@keyframes klIntroIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes klIntroOut { to { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .kl-intro-body, .kl-intro-foot, .kl-intro.leaving { animation:none; }
}

/* ── Left brand panel (desktop only) ── */
.kl-brand {
  flex:1 1 46%; max-width:560px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#5a1030 0%,#3a1240 45%,#141a3a 100%);
  padding:max(env(safe-area-inset-top,0px),48px) 48px 40px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.kl-brand::before {
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background:rgba(255,255,255,.06); top:-160px; right:-140px;
}
.kl-brand::after {
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  background:rgba(129,140,248,.10); bottom:-100px; left:-80px;
}
.kl-brand-logo {
  display:flex; align-items:center; gap:10px; position:relative; z-index:2;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--text);
}
.kl-brand-mark { width:32px; height:32px; }
.kl-brand-copy { position:relative; z-index:2; margin-top:40px; }
.kl-brand-copy h1 {
  font-family:var(--font-display); font-weight:700; font-size:2.15rem;
  line-height:1.2; max-width:400px; color:var(--text); letter-spacing:-.02em;
}
.kl-brand-copy p {
  color:rgba(232,237,245,.78); font-size:.92rem; margin-top:12px; max-width:360px;
}
.kl-float-stats { position:relative; z-index:2; display:flex; flex-direction:column; gap:14px; margin-top:36px; }
.kl-fstat {
  background:rgba(17,24,48,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  padding:14px 18px; width:78%; box-shadow:var(--shadow);
}
.kl-fstat.offset { margin-left:22%; }
.kl-fstat .sl {
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(232,237,245,.65);
}
.kl-fstat .sv { font-family:var(--font-mono); font-size:1.15rem; font-weight:700; margin-top:3px; color:var(--text); }
.kl-fstat .sv.up { color:var(--success-ink); }
.kl-brand-foot { position:relative; z-index:2; font-size:.72rem; color:rgba(232,237,245,.6); }

/* ── Right auth panel ── */
.kl-auth {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:max(env(safe-area-inset-top,0px),32px) 32px max(env(safe-area-inset-bottom,0px),32px);
  background:var(--bg); overflow-y:auto;
}
.kl-box { width:100%; max-width:400px; }
.kl-head { margin-bottom:28px; }
.kl-eyebrow {
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--primary-ink); margin-bottom:8px;
}
.kl-title { font-family:var(--font-display); font-size:1.55rem; font-weight:700; color:var(--text); }
.kl-sub { color:var(--kl-muted-text); font-size:.85rem; margin-top:4px; }

/* ── Avatars (shared) ── */
.kl-avatar {
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-weight:700;
  font-size:1.1rem; color:#fff; flex-shrink:0;
}
.kl-avatar.a1 { background:linear-gradient(135deg,#5a1030,#F0538A); }
.kl-avatar.a2 { background:linear-gradient(135deg,#1a1848,#818CF8); }
.kl-avatar.a3 { background:linear-gradient(135deg,#0c3a2e,#00C896); }

/* ── Screen 1: profile picker ── */
.kl-profiles { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.kl-profile {
  flex:1 1 calc(50% - 7px); min-width:140px; min-height:96px;
  background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:20px 14px; cursor:pointer; color:var(--text);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:border-color .15s, transform .15s; -webkit-tap-highlight-color:transparent;
}
.kl-profile:hover { border-color:var(--primary); transform:translateY(-2px); }
.kl-profile:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-color:var(--primary); }
.kl-profile .kl-avatar { margin-bottom:10px; }
.kl-profile-name { font-weight:600; font-size:.9rem; }
.kl-profile-meta { font-size:.7rem; color:var(--kl-muted-text); margin-top:2px; }
.kl-add-profile {
  flex:1 1 calc(50% - 7px); min-width:140px; min-height:96px;
  border:1.5px dashed var(--border); border-radius:var(--radius); padding:20px 14px;
  color:var(--kl-muted-text); cursor:pointer; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  -webkit-tap-highlight-color:transparent;
}
.kl-add-profile:hover { border-color:var(--primary); color:var(--primary-ink); }
.kl-add-profile:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.kl-plus {
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; line-height:1;
}

/* ── Screen 2: PIN entry ── */
.kl-back {
  display:flex; align-items:center; gap:10px; margin-bottom:22px; min-height:44px;
  background:none; border:none; padding:4px 0; cursor:pointer; color:var(--kl-muted-text);
}
.kl-back:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:8px; }
.kl-back .kl-back-arrow {
  width:32px; height:32px; border-radius:50%; background:var(--card2);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.kl-back span:last-child { font-size:.8rem; }
.kl-who { display:flex; align-items:center; gap:12px; }
.kl-who .kl-avatar { width:48px; height:48px; font-size:1rem; }
.kl-who-name { font-weight:600; font-size:1rem; color:var(--text); }
.kl-who-label { font-size:.72rem; color:var(--kl-muted-text); }

.kl-setup-banner {
  display:none; background:rgba(240,83,138,.1); border:1px solid rgba(240,83,138,.25);
  border-radius:var(--radius-sm); padding:10px 14px; margin-top:16px;
  font-size:.8rem; color:var(--pink-light); text-align:center;
}

.kl-dots { display:flex; justify-content:center; gap:14px; margin:32px 0 10px; }
/* Empty-dot border uses a fully-opaque token (audit fix: rgba(...,.3) was 1.4:1). */
.kl-dot { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--muted); transition:background .1s, border-color .1s; }
.kl-dot.filled { background:var(--primary); border-color:var(--primary); }
.kl-dot.error { border-color:var(--danger); background:var(--danger); }

.kl-error {
  text-align:center; color:var(--danger-ink); font-size:.78rem; font-weight:600;
  min-height:16px; margin-bottom:6px; visibility:hidden;
}
.kl-error.show { visibility:visible; }

.kl-lockout {
  display:none; text-align:center; background:var(--danger-bg); border:1px solid var(--danger);
  color:var(--danger-ink); font-size:.78rem; font-weight:600; border-radius:var(--radius-sm);
  padding:10px 14px; margin-bottom:16px;
}
.kl-lockout.show { display:block; }

.kl-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:280px; margin:0 auto; }
.kl-key {
  aspect-ratio:1; min-height:56px; border-radius:var(--radius-sm);
  background:var(--card2); border:1px solid var(--border);
  font-family:var(--font-mono); font-size:1.2rem; font-weight:500; color:var(--text);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.kl-key:active { background:var(--card3); border-color:var(--primary); }
.kl-key:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.kl-key:disabled { opacity:.35; cursor:not-allowed; }
.kl-key .kl-letters {
  font-family:var(--font-body); font-size:.55rem; color:var(--kl-muted-text);
  letter-spacing:.1em; margin-top:1px;
}
.kl-key.ghost { background:transparent; border:none; color:var(--kl-muted-text); font-size:1.05rem; }

.kl-foot { display:flex; justify-content:space-between; align-items:center; margin-top:22px; flex-wrap:wrap; gap:8px; }
.kl-link { background:none; border:none; color:var(--primary-ink); font-size:.78rem; font-weight:600; cursor:pointer; min-height:44px; padding:0; }
.kl-link:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }
.kl-biom-hint { display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--kl-muted-text); }

.kl-switch { display:flex; gap:8px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.kl-chip {
  padding:6px 14px; min-height:44px; display:inline-flex; align-items:center;
  border-radius:var(--radius-pill); font-size:.76rem; font-weight:600;
  background:var(--card2); color:var(--kl-muted-text); border:1px solid var(--border); cursor:pointer;
}
.kl-chip:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.kl-chip.active { background:rgba(240,83,138,.14); color:var(--primary-ink); border-color:var(--primary); }

.kl-forgot-panel {
  display:none; background:var(--card2); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; margin-top:18px;
  font-size:.8rem; color:var(--kl-muted-text); line-height:1.55;
}
.kl-forgot-panel.show { display:block; }
.kl-forgot-panel strong { color:var(--text); display:block; margin-bottom:6px; font-size:.84rem; }

/* ── Screen 3: post-unlock welcome / data health ── */
.kl-welcome-title { font-family:var(--font-display); font-size:1.4rem; font-weight:700; margin-bottom:2px; color:var(--text); }
.kl-welcome-sub { color:var(--kl-muted-text); font-size:.84rem; margin-bottom:22px; }
.kl-insight {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:12px;
}
.kl-insight-left { display:flex; align-items:center; gap:12px; min-width:0; }
.kl-insight-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  background:rgba(98,120,160,.12);
}
.kl-insight-icon.ok { background:var(--success-bg); }
.kl-insight-icon.warn { background:var(--warn-bg); }
.kl-insight-icon.danger { background:var(--danger-bg); }
.kl-insight-label { font-weight:600; font-size:.86rem; color:var(--text); }
.kl-insight-meta { font-size:.72rem; color:var(--kl-muted-text); margin-top:2px; }
.kl-insight-meta.ok { color:var(--success-ink); }
.kl-insight-meta.warn { color:var(--warn-ink); }
.kl-insight-meta.danger { color:var(--danger-ink); }
.kl-insight .btn { flex-shrink:0; }
/* Ghost by default; emphasise only when there's something to do. */
.kl-insight .btn.kl-emph { background:var(--primary); border-color:var(--primary); color:var(--primary-text); }
.kl-insight .btn.kl-emph:hover { background:var(--pink-dark); color:var(--primary-text); }
.kl-continue { width:100%; margin-top:8px; }

/* ── Responsive: collapse to form-only below 760px ── */
@media (max-width:760px) {
  .kl-brand { display:none; }
  .kl-auth { align-items:flex-start; }
  .kl-box { margin-top:8vh; }
}