/* Colors mirror DriftBackground.swift and the app's named color assets. */
:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: #eff4fc;
  --text: #0a1226;
  --muted: #5c6884;
  --accent: #345ca0;
  --panel: rgb(255 255 255 / 25%);
  --line: rgb(92 104 132 / 24%);
  --signal: rgb(52 92 160 / 8%);
  --signal-line: rgb(52 92 160 / 30%);
  --good: #52c18c;
  --open: #962c3e;
  --lilac-glow: rgb(146 140 226 / 16%);
  --blue-glow: rgb(30 79 208 / 22%);
  --sky-glow: rgb(74 147 242 / 16%);
  --bottom-glow: rgb(206 220 242 / 85%);
  color: var(--text);
  background: var(--background);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #04060e;
    --text: #fff;
    --muted: #8c99b4;
    --accent: #8fd0ff;
    --panel: rgb(16 29 55 / 25%);
    --line: rgb(140 153 180 / 24%);
    --signal: rgb(143 208 255 / 8%);
    --signal-line: rgb(143 208 255 / 30%);
    --good: #a3f1c2;
    --open: #e7a0aa;
    --lilac-glow: rgb(174 169 238 / 15%);
    --blue-glow: rgb(30 79 208 / 44%);
    --sky-glow: rgb(74 147 242 / 24%);
    --bottom-glow: rgb(10 20 50 / 90%);
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background:
  radial-gradient(ellipse 150% 92% at 84% -6%, var(--lilac-glow), transparent 62%),
  radial-gradient(ellipse 84% 56% at 50% 30%, var(--blue-glow), transparent 72%),
  radial-gradient(ellipse 110% 64% at 50% 46%, var(--sky-glow), transparent 74%),
  radial-gradient(ellipse 130% 92% at 50% 100%, var(--bottom-glow), transparent 72%);
  background-attachment: fixed; }
main { max-width: 510px; margin: auto; padding: 28px 24px 36px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 16px; letter-spacing: -.3px; }
.brand img { border-radius: 10px; box-shadow: 0 2px 8px rgb(4 6 14 / 15%); }
header { margin: 40px 0 25px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 2px; }
h1 { max-width: 350px; font-size: clamp(32px, 9vw, 44px); line-height: 1.08; letter-spacing: -1.6px; margin: 14px 0; font-weight: 650; }
#result { border: 1px solid var(--line); background: var(--panel); border-radius: 24px; padding: 26px 24px 18px; text-align: center; }
.signal { margin: 0 auto 22px; width: 98px; height: 98px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--signal); border: 1px solid var(--signal-line); box-shadow: 0 0 0 10px var(--signal); }
.symbol::before { content: '—'; font-size: 42px; font-weight: 350; }
[data-state="likely"] .signal { color: var(--good); background: var(--signal); border-color: var(--good); }
[data-state="likely"] .symbol::before { content: '✓'; }
[data-state="open"] .signal { color: var(--open); border-color: var(--open); }
[data-state="open"] .symbol::before { content: '↗'; }
[data-state="uncertain"] .symbol::before { content: '?'; }
[data-state="checking"] .signal { border-top-color: var(--accent); animation: spin 1.4s linear infinite; }
[data-state="checking"] .symbol::before { content: ''; }
h2 { margin: 0 0 10px; font-size: 23px; letter-spacing: -.5px; line-height: 1.2; }
#result-detail { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.step { min-height: 16px; font-size: 12px; color: var(--accent); margin: 12px 0 0; }
button { width: 100%; min-height: 54px; border: 0; border-radius: 14px; background: #1e4fd0; color: #fff; font: inherit; font-weight: 700; font-size: 16px; margin-top: 20px; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.scope { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 16px 4px 28px; text-align: center; }
footer { padding-top: 22px; border-top: 1px solid var(--line); }
h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
footer p { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; } }
@media (max-width: 360px) { main { padding: 22px 18px; } header { margin-top: 28px; } }