/* =====================================================================
   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)); }

/* Solo's mark is the brand gleam (the logo's star, same geometry) —
   an inline SVG inside the .spark span, so every sparkPop / sparkWink
   / burst animation keeps targeting .spark untouched. Sized up from the
   old text ✦ (Andrew's call): big enough that the thin waist reads
   sparkle, never plus sign. */
.spark svg { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.28em; }

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

.auth { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 22px 40px; overflow-y: auto; }
.auth .lockup { display: block; height: 46px; margin: 0 auto; } /* the real lockup (2026-08-09) — replaced the ✦+word placeholder */
.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: 6px; font-size: 14.5px; color: var(--ink-3); text-decoration: none; padding: 14px 10px; } /* HIG round A: padding grows the target past 44px (was 6/8) */
.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. */
/* bottom clears the tab bar wherever it lives: browsers (env()=0) keep
   96px; the native wrap's taller home-bar tab bar lifts it to match
   (M8 r1.8 — the button sat half-hidden behind the tabs). */
.add-fab { position: absolute; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); 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); }

/* ---------- Two-line action button (verb + the exact terms) ----------
   The terms line flexes with whatever the data is — long dates, big
   prices, the quote-visit label — without ever cramping the verb. */
.btn-terms { min-height: 62px; padding: 10px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; white-space: normal; line-height: 1.25; }
.btn-terms .bt-verb { font-size: 17px; font-weight: 800; }
.btn-terms .bt-line { font-size: 14px; font-weight: 650; opacity: 0.92; letter-spacing: 0.01em; }

/* ---------- QR tile (Grow's front door) ---------- */
.qr-tile { width: 132px; height: 132px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 7px; margin: 12px auto 0; }
.qr-tile svg { width: 100%; height: 100%; display: block; }

/* ---------- 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); }
.toast.has-undo { pointer-events: auto; }
.toast .t-undo { margin-left: 10px; border: none; background: rgba(255, 255, 255, 0.18); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 800; padding: 8px 16px; border-radius: 12px; cursor: pointer; min-height: 44px; } /* HIG round A: undo is sacred — full 44 target (was 36) */

/* ---------- 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; }

/* ---- Inbox (M3 r3): conversation threads + the unread dot ---- */
.tab.unread { position: relative; }
.tab.unread::after {
  content: ''; position: absolute; top: 5px; left: calc(50% + 9px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--urgent); border: 2px solid var(--card);
}
.ib-row { display: flex; margin: 7px 0; }
.ib-row.in { justify-content: flex-start; }
.ib-row.out { justify-content: flex-end; }
.ib-col { max-width: 80%; }
.ib-row.out .ib-col { text-align: right; }
.ib-bubble {
  display: inline-block; text-align: left; padding: 9px 13px; border-radius: 16px;
  font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ib-row.in .ib-bubble { background: var(--card); border: 1.5px solid var(--line); border-bottom-left-radius: 6px; }
.ib-row.out .ib-bubble { background: var(--brand-soft); border: 1.5px solid var(--brand-soft-line); border-bottom-right-radius: 6px; }
.ib-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.ib-thread { max-height: 46vh; overflow-y: auto; padding: 4px 2px; }
.ib-composer { display: flex; gap: 8px; margin-top: 12px; }
.ib-composer input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px;
}
.ib-unread { min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex: none; }

/* ---- Solo's draft reply (M4): between the thread and the composer ---- */
.draft-card { background: var(--brand-soft); border: 1.5px solid var(--brand-soft-line); border-radius: 14px; padding: 12px 12px 10px; margin-top: 10px; }
.draft-card.warn { background: #fdf2ec; border-color: #f0d6c6; }
.draft-why { font-size: 13px; font-weight: 700; color: var(--brand-deep); display: flex; align-items: flex-start; gap: 6px; margin-bottom: 7px; }
.draft-why .spark { flex: none; width: 13px; height: 13px; margin-top: 1.5px; color: var(--brand); }
.draft-card.warn .draft-why, .draft-card.warn .draft-why .spark { color: #a14322; }
.draft-body { font-size: 15.5px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; }
.draft-edit { width: 100%; min-height: 88px; font-family: inherit; font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--card); border: 1.5px solid var(--brand-soft-line); border-radius: 10px; padding: 10px 11px; resize: vertical; box-sizing: border-box; }
.draft-actions { display: flex; gap: 8px; margin-top: 10px; }
.draft-actions .btn-send { flex: 1; height: 48px; border: none; border-radius: 12px; background: var(--brand); color: #fff; font-size: 16.5px; font-weight: 800; cursor: pointer; }
.draft-actions .btn-quiet { height: 48px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink-2); font-size: 14.5px; font-weight: 700; cursor: pointer; }
.c-draft { font-size: 12.5px; font-weight: 800; color: var(--brand); margin-top: 2px; }
.c-draft.warn { color: #a14322; }

/* ---- What sends itself (M4 r2): kill-switch sheet + list emphasis ---- */
.sw { position: relative; flex: none; width: 47px; height: 28px; align-self: center; }
.sw input { position: absolute; inset: -10px -8px; width: auto; height: auto; opacity: 0; margin: 0; cursor: pointer; z-index: 1; } /* HIG round A: invisible hit area past the 28px visual to the 44 floor */
.sw .tr { position: absolute; inset: 0; border-radius: 999px; background: #d8d2c7; transition: background .18s; }
.sw .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(30,26,20,.28); transition: left .18s; }
.sw input:checked + .tr { background: var(--brand); }
.sw input:checked + .tr::after { left: 22px; }
.sw-always { flex: none; align-self: center; font-size: 12px; font-weight: 800; color: var(--confirm); white-space: nowrap; }
.t-row.unread .t-nm { font-weight: 850; }
.t-row.unread .t-snip { color: var(--ink); font-weight: 650; }

/* ---- Ask Solo (M4 r3): the quick-add confirm card in the Solo drop ---- */
.ask-card { background: var(--card); border: 1.5px solid var(--brand-soft-line); border-radius: 12px; padding: 10px 12px; margin: 8px 0 4px; }
.ask-card .ac-line { font-size: 13.5px; line-height: 1.45; }
.ask-card .ac-line + .ac-line { margin-top: 2px; }
.ask-card .ac-mut { color: var(--ink-3); font-size: 12.5px; }
.ask-card .ac-warn { color: #a14322; font-weight: 700; font-size: 12.5px; }
.ask-card .ac-actions { display: flex; gap: 8px; margin-top: 9px; }
.ask-dev { color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.ask-thinking { color: var(--ink-3); }

/* ---- Coming up (M4 r3.2): every line is a door ---- */
.cu-chev { flex: none; align-self: center; color: var(--ink-3); font-weight: 800; font-size: 15px; }
.job-row.cu-sub { padding: 8px 16px 8px 30px; cursor: pointer; border-top: 1px solid var(--line-soft); }