/* Income Launch · shared additions on top of the design system (app.css). Screen-specific styles live in css/<area>.css. */

/* Trust row: neutral icons blue, rating stars amber */
.trust svg { color: var(--primary); }
.trust .is-star svg { color: var(--star); }
.stars-amber { color: var(--star); }

/* Brand mark in the top bar */
.brand svg { width: 30px; height: 30px; }
.brand .wordmark { font-weight: 700; letter-spacing: -0.02em; }

/* Live store card (side): square product picture instead of a 3:4 portrait */
.store-card .pic { aspect-ratio: 1 / 1; }
.store-card .pic img { object-fit: cover; }
.store-card .pic .badge.pic-note svg { width: 12px; height: 12px; color: var(--primary); }
.ready-lbl .score-n { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }

/* +N launch-score chip that floats up from the tapped option */
.score-float {
  position: fixed; z-index: 90; pointer-events: none;
  font-size: 14px; font-weight: 800; color: var(--on-primary); background: var(--primary);
  padding: 4px 9px; border-radius: var(--pill); box-shadow: 0 8px 18px -8px rgba(34, 90, 234, .7);
  animation: score-float 1.05s var(--ease) both;
}
@keyframes score-float { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.05); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }

/* Confetti canvas (js/fx.js) */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95; }

/* ---------- Call card: the AI launch coach (js/sdr.js) ---------- */
.call-card {
  position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 14px 14px 14px 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  animation: rise .45s var(--ease) both;
}
body[data-cta="on"] .call-card { bottom: calc(var(--cta-h) + 14px + env(safe-area-inset-bottom, 0px)); }
.call-card[hidden] { display: none; }
.call-card .cc-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-50); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.call-card .cc-ic svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.call-card[data-state="dialing"] .cc-ic::before, .call-card[data-state="dialing"] .cc-ic::after,
.call-card[data-state="requested"] .cc-ic::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary); opacity: .55; animation: ring 1.6s ease-out infinite;
}
.call-card[data-state="dialing"] .cc-ic::after { animation-delay: .55s; }
.call-card[data-state="dialing"] .cc-ic svg { animation: wiggle 1.6s ease-in-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .55; } to { transform: scale(1.75); opacity: 0; } }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } }
.call-card[data-state="live"] .cc-ic { background: var(--success-soft); color: var(--success); }
.call-card[data-state="missed"] .cc-ic { background: var(--danger-soft); color: var(--danger); }
.call-card .cc-t b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.call-card .cc-t span { display: block; font-size: 14px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.call-card .cc-t .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 6px; vertical-align: 1px; animation: pulse 1.2s ease-in-out infinite; }
.call-card .cc-timer { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--success); }
.call-card .cc-act { height: 38px; padding: 0 14px; border-radius: var(--pill); background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 700; white-space: nowrap; }
.call-card .cc-act:hover { background: var(--primary-hover); }
.call-card .cc-x { width: 30px; height: 30px; border-radius: 50%; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.call-card .cc-x:hover { background: var(--surface-2); color: var(--fg); }
.call-card .cc-x svg { width: 16px; height: 16px; }
.call-card .cc-note { grid-column: 1 / -1; font-size: 14px; color: var(--fg-2); background: var(--blue-50); border-radius: 10px; padding: 8px 10px; }
@media (max-width: 720px) {
  .call-card { left: 12px; right: 12px; width: auto; }
}

/* Inline "call me" pill used on reveal / claim / setup */
.coach-pill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 6px; border-radius: var(--pill); border: 1.5px solid var(--border-strong); background: var(--surface); font-weight: 700; font-size: 15px; color: var(--fg); transition: border-color .15s, transform .15s; }
.coach-pill:hover { border-color: var(--primary); transform: translateY(-1px); }
.coach-pill .cc-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--blue-50); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.coach-pill .cc-ic svg { width: 16px; height: 16px; }

/* ---------- Help dialog: FAQ + sound switch ---------- */
.faq { margin-top: 14px; display: grid; gap: 4px; max-height: 52vh; overflow: auto; }
.faq details { border-bottom: 1px solid var(--border); padding: 0; }
/* The whole 48px row is the tap target (it used to be the 23px line of text inside the row's padding). */
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 12px 0; font-weight: 600; font-size: 15px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; flex: none; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin-top: 0; padding-bottom: 12px; font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.faq details p a { color: var(--primary); font-weight: 600; padding: 14px 0; }
.switch-row { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); font-weight: 600; font-size: 15px; cursor: pointer; }
.switch-row span { display: inline-flex; align-items: center; gap: 8px; }
.switch-row span svg { width: 18px; height: 18px; color: var(--primary); }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { width: 44px; height: 26px; border-radius: var(--pill); background: var(--border-strong); position: relative; transition: background .2s; flex: none; }
.switch-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease); }
.switch-row input:checked + i { background: var(--primary); }
.switch-row input:checked + i::after { transform: translateX(18px); }
.switch-row input:focus-visible + i { box-shadow: 0 0 0 3px var(--ring); }

/* ---------- Shared bits ---------- */
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.disclaim { margin-top: 14px; font-size: 14px; color: var(--muted); line-height: 1.45; text-align: center; max-width: 620px; margin-inline: auto; }
.timer.is-expired, .badge.is-expired { background: var(--surface-3) !important; color: var(--muted) !important; }
.pill-soft { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--pill); background: var(--blue-50); color: var(--blue-700); font-size: 14px; font-weight: 700; }
.pill-soft svg { width: 13px; height: 13px; }