/* =============================================================
   DOODLY — Multi-login portal (chooser + admin/customer extras)
   Builds on auth.css. Token-themed, responsive, accessible.
   ============================================================= */
.login-choose { gap: 4px; }
.login-choose h1 { margin-bottom: 2px; }
.login-choose .sub { margin-bottom: 18px; }

.lc-card {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  padding: 18px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r, 18px);
  background: var(--surface, #fff); cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, border-color .18s, background .18s;
}
.lc-card:hover, .lc-card:focus-visible {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--leaf, #1FAE66) 50%, var(--line));
  box-shadow: 0 16px 38px rgba(15,61,46,.14); background: color-mix(in srgb, var(--mint-soft, #E4F6EC) 35%, var(--surface));
  outline: none;
}
.lc-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.lc-ic.lc-cust { background: linear-gradient(135deg, var(--leaf, #1FAE66), var(--leaf-600, #169A57)); }
.lc-ic.lc-admin { background: linear-gradient(135deg, var(--forest, #0F3D2E), #15533E); }
.lc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lc-t { font-family: var(--font-display, "Fraunces", serif); font-weight: 600; font-size: 18px; color: var(--forest, #0F3D2E); }
.lc-d { font-size: 13px; line-height: 1.5; color: var(--ink-2, #5a6b63); }
.lc-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--leaf-600, #169A57); }
.lc-cta svg { transition: transform .18s; }
.lc-card:hover .lc-cta svg { transform: translateX(3px); }

/* role select field (admin login) */
.fl-select { position: relative; }
.fl-select select { width: 100%; padding: 18px 14px 8px 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); font: inherit; font-size: 15px; color: var(--ink, #122); appearance: none; cursor: pointer; }
.fl-select select:focus { outline: none; border-color: var(--leaf, #1FAE66); box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf, #1FAE66) 16%, transparent); }
.fl-select .fl-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3, #9aa4a0); }
.fl-select .fl-fixed { position: absolute; left: 46px; top: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3, #8a958f); pointer-events: none; }
.fl-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

.auth-hint { font-size: 12px; color: var(--ink-3, #8a958f); line-height: 1.5; margin: -2px 0 4px; }
.auth-demo { border: none; background: var(--mint-soft, #E4F6EC); color: var(--leaf-600, #169A57); font: inherit; font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 1px 6px; cursor: pointer; }
.auth-demo:hover { background: var(--leaf, #1FAE66); color: #fff; }
.auth-err { background: color-mix(in srgb, var(--danger, #c0392b) 12%, transparent); color: var(--danger, #c0392b); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 600; margin-top: 4px; }
.auth-err.auth-ok { background: color-mix(in srgb, var(--leaf, #1FAE66) 15%, transparent); color: var(--forest, #0F3D2E); }
.auth-2fa { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3, #8a958f); margin-top: 12px; }
.auth-guest { display: block; text-align: center; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2, #5a6b63); }
.auth-guest:hover { color: var(--forest, #0F3D2E); }
.auth-backlink { display: block; text-align: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--leaf-600, #169A57); }
.auth-backlink:hover { text-decoration: underline; }

/* Subtle, clearly-separated secondary logins (Executive + Admin/Staff) beneath
   the customer form — styled like the existing "Executive login" alt link. */
.auth-secondary { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.auth-secondary .auth-alt { margin: 0; }

@media (prefers-reduced-motion: reduce) { .lc-card, .lc-cta svg { transition: none !important; } }