/* One sign-in screen for the team portal and the family app (approved Oct 23, 2026; design/sign-in-brief.md) */
.si2 { --si-teal: #184E49; --si-teal-soft: #E8F0EE; --si-coral: #C9452F; --si-coral-soft: #FDECE9; --si-ink: #16211F; --si-ink-2: #3E5451; --si-ink-3: #6B7A78; --si-line-2: #D5D2CB;
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto; background: #fff; color: var(--si-ink); font-family: 'Figtree', system-ui, -apple-system, sans-serif; font-weight: 500;
  display: flex; flex-direction: column; min-height: 100%; padding: max(20px, env(safe-area-inset-top)) 24px max(16px, env(safe-area-inset-bottom)); }
body.si2-on { overflow: hidden; }
.si2-top { flex: 0 0 auto; }
.si2-logo { height: 30px; width: auto; display: block; }
.si2-col { flex: 1 0 auto; width: 100%; max-width: 400px; margin-top: 56px; }
.si2-h { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 34px; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 12px; color: var(--si-ink); }
.si2-sub { font-size: 16px; line-height: 1.5; color: var(--si-ink-2); margin: 0 0 28px; }
.si2-sub b, .si2-meta b { color: var(--si-ink); font-weight: 600; word-break: break-word; }
.si2-lab { display: block; font-size: 13px; font-weight: 600; color: var(--si-ink-2); margin: 0 0 6px; }
.si2-in { width: 100%; height: 56px; border: 1px solid var(--si-line-2); border-radius: 12px; padding: 0 16px; font: 500 17px 'Figtree', system-ui, sans-serif; color: var(--si-ink); background: #fff; outline: none; }
.si2-in:focus { border-color: var(--si-teal); box-shadow: 0 0 0 3px var(--si-teal-soft); }
.si2-in.bad { border-color: var(--si-coral); box-shadow: 0 0 0 3px var(--si-coral-soft); }
.si2-msg { min-height: 0; margin: 10px 0 16px; font-size: 14px; line-height: 1.45; color: var(--si-ink); }
.si2-msg:empty { margin: 0 0 16px; }
.si2-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--si-coral); margin-right: 8px; vertical-align: 1px; }
.si2-what { color: var(--si-ink-2); }
.si2-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border: 1px solid var(--si-teal); border-radius: 12px; background: var(--si-teal); color: #fff; font: 700 16px 'Figtree', system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.si2-btn:disabled { opacity: .6; cursor: default; }
.si2-btn.sec { background: #fff; color: var(--si-ink); border-color: var(--si-line-2); font-weight: 600; margin-top: 12px; }
.si2-btn:focus-visible, .si2-link:focus-visible { outline: 2px solid var(--si-teal); outline-offset: 2px; }
.si2-meta { font-size: 14px; color: var(--si-ink-3); margin: 16px 0 0; line-height: 1.5; }
.si2-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--si-teal); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(24, 78, 73, .3); }
.si2-tile { width: 56px; height: 56px; border-radius: 16px; background: var(--si-teal-soft); color: var(--si-teal); display: grid; place-items: center; margin: 0 0 20px; }
.si2-tile.warn { background: var(--si-coral-soft); color: var(--si-coral); }
.si2-tile svg { width: 28px !important; height: 28px !important; }
.si2-or { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; font-size: 13px; color: var(--si-ink-3); }
.si2-or::before, .si2-or::after { content: ''; flex: 1; height: 1px; background: #E7E5E0; }
.si2-code { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; border-radius: 12px; }
.si2-code input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; color: transparent; background: transparent; caret-color: transparent; z-index: 1; }
.si2-code span { height: 56px; border: 1px solid var(--si-line-2); border-radius: 12px; display: grid; place-items: center; font: 600 24px 'Figtree', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--si-ink); background: #fff; }
.si2-code span.cur { border-color: var(--si-teal); box-shadow: 0 0 0 3px var(--si-teal-soft); }
.si2-code span.cur:empty::after { content: ''; width: 2px; height: 24px; background: var(--si-teal); animation: si2-blink 1s steps(1) infinite; }
.si2-code.bad span { border-color: var(--si-coral); box-shadow: 0 0 0 3px var(--si-coral-soft); }
@keyframes si2-blink { 50% { opacity: 0; } }
.si2-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: si2-rot .8s linear infinite; }
@keyframes si2-rot { to { transform: rotate(360deg); } }
.si2-foot { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--si-ink-3); margin-top: 40px; }
.si2-foot a { color: var(--si-ink-3); text-decoration: none; }
.si2-foot a:hover { color: var(--si-ink); }
@media (min-width: 720px) {
  .si2 { padding-left: 40px; padding-right: 40px; }
  .si2-logo { height: 34px; }
  .si2-col { margin: 96px auto 0; }
  .si2-h { font-size: 40px; }
  .si2-btn { height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .si2-spin, .si2-code span.cur:empty::after { animation: none; } }