/* =====================================================================
   SoloMaid app — additions on top of solomaid.css (the design system).
   solomaid.css is the law from Sprint 0; this file only adds what the
   REAL app needs that the mockups kept page-local, plus sign-in.
   ===================================================================== */

/* No fake status bar in the real app. The mockups' bar sticks at
   top: 42px to clear their pretend clock — here the bar is the first
   thing on screen, so neutralize that offset and breathe for the
   phone's real status bar with margin OUTSIDE the pill. */
.phone > .solo-bar { top: 0; margin-top: max(10px, env(safe-area-inset-top)); }

/* ---------- Sign-in ---------- */

.auth { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 22px 40px; overflow-y: auto; }
.auth .mark { text-align: center; font-size: 40px; color: var(--brand); line-height: 1; }
.auth .word { text-align: center; font-size: 26px; font-weight: 800; margin-top: 8px; }
.auth .promise { text-align: center; font-size: 15.5px; color: var(--ink-2); margin: 8px auto 22px; max-width: 300px; }
.auth .card { padding: 18px 16px; }
.auth input { font-size: 22px; letter-spacing: 0.02em; }
.auth .code-input input { text-align: center; letter-spacing: 0.35em; font-weight: 800; }
.auth .err { color: var(--urgent); font-size: 14.5px; margin-top: 10px; display: none; }
.auth .quiet-link { display: inline-block; margin-top: 14px; font-size: 14.5px; color: var(--ink-3); text-decoration: none; padding: 6px 8px; }
.auth .quiet-row { text-align: center; }

/* Dev-only: where the texted code shows until Twilio arrives (M3). */
.dev-code { margin-top: 14px; background: var(--attention-soft, #FDF1DE); border: 1px solid #F3DFC0; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #7C4A0B; }
.dev-code b { font-size: 20px; letter-spacing: 0.18em; display: inline-block; margin: 2px 0; }

/* ---------- Account (grown from the mockup's page-local styles) ---------- */

.prof { display: flex; gap: 14px; align-items: center; }
.prof .ph { width: 68px; height: 68px; border-radius: 50%; flex: none; border: 3px solid #fff; box-shadow: var(--shadow-raised); background: var(--brand); color: #fff; font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.acct-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.acct-row + .acct-row { border-top: 1px solid var(--line-soft); }
.acct-row .ic { flex: none; width: 24px; text-align: center; }
.acct-row .mid { flex: 1; min-width: 0; font-size: 15px; }
.acct-row .mid small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }

/* ---------- Client rows (grown from the mockup's page-local styles) ---------- */

.c-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; min-height: 56px; }
.c-row + .c-row { border-top: 1px solid var(--line-soft); }
.c-ava { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.c-mid { flex: 1; min-width: 0; }
.c-nm { font-size: 16.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Floating add button — thumb zone, above the tab bar. */
.add-fab { position: absolute; right: 14px; bottom: 96px; z-index: 30; height: 52px; padding: 0 20px; border: none; border-radius: 26px; background: var(--brand); color: #fff; font-size: 16.5px; font-weight: 800; box-shadow: 0 10px 24px rgba(14, 107, 92, 0.35); cursor: pointer; }
.add-fab:active { transform: scale(0.97); }

/* ---------- Toast (quiet confirmations) ---------- */

.toast { position: absolute; left: 50%; transform: translateX(-50%) translateY(8px); bottom: 104px; z-index: 60; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; padding: 12px 18px; border-radius: 14px; box-shadow: 0 10px 24px rgba(28, 25, 23, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; max-width: 88%; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- First-load skeletons (skeletons over spinners, principle 11) ---------- */

.skel { border-radius: 10px; background: linear-gradient(90deg, var(--line) 25%, #f1ede8 50%, var(--line) 75%); background-size: 200% 100%; animation: skel 1.1s infinite linear; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-row { height: 56px; margin: 0 14px; }
.skel-row + .skel-row { margin-top: 10px; }