/* ═══════════════════════════════════════════════════════════════════════════
   LEADLY — THE ANALYSIS  ·  /assets/leadly-analysis.css

   What the 2-minute check turns into when you press submit.

   The point of this screen is to prove the Smart Qualifier is not a form. It is
   a machine that READS what you said and comes back with a judgement. So the
   analysis assembles itself in front of you: the model thinks out loud, then
   the verdict lands, then the numbers, then the leaks, then the plan.

   Everything is drawn from brand.css tokens. Everything stops under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE THINKING ─────────────────────────────────────────────────────────
   The wait is not dead time — it is the proof. The model narrates what it is
   reading, one line at a time, and each line ticks off as it lands. */
.an-think{ padding:8px 0 4px; }
.an-orb{
  width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--accent), #7BA2F6, #9DC0FF, var(--accent));
  display:grid; place-items:center; position:relative;
  animation:an-spin 2.4s linear infinite;
}
.an-orb::after{
  content:""; position:absolute; inset:5px; border-radius:50%; background:#fff;
}
.an-orb i{
  position:relative; z-index:1; width:16px; height:16px; border-radius:50%;
  background:var(--accent); animation:an-breathe 1.6s ease-in-out infinite;
}
@keyframes an-spin{ to{ transform:rotate(360deg); } }
@keyframes an-breathe{ 0%,100%{ transform:scale(.72); opacity:.75; } 50%{ transform:scale(1); opacity:1; } }

.an-think h3{
  text-align:center; font-size:19px; font-weight:600; letter-spacing:-.02em;
  color:var(--text-1); margin-bottom:6px;
}
.an-think .sub{ text-align:center; font-size:13.5px; color:var(--text-2); margin-bottom:22px; }

.an-steps{ display:flex; flex-direction:column; gap:9px; max-width:400px; margin:0 auto; }
.an-line{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface);
  font-size:13.5px; color:var(--text-3-aa);
  opacity:0; transform:translateY(8px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out),
             color .3s var(--ease), border-color .3s var(--ease);
}
.an-line.in{ opacity:1; transform:none; }
.an-line.doing{ color:var(--text-1); border-color:var(--accent); }
.an-line.done{ color:var(--text-2); }
.an-line .dot{
  width:15px; height:15px; border-radius:50%; flex:none; position:relative;
  border:1.5px solid var(--line-strong);
}
.an-line.doing .dot{ border-color:var(--accent); }
.an-line.doing .dot::after{
  content:""; position:absolute; inset:2px; border-radius:50%;
  background:var(--accent); animation:an-breathe 1s ease-in-out infinite;
}
.an-line.done .dot{ border-color:var(--accent); background:var(--accent); }
.an-line.done .dot::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:4px; height:7px; border:solid #fff; border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}

/* ── THE RESULT ───────────────────────────────────────────────────────────*/
.an{ display:none; }
.an.on{ display:block; }

/* every block rises in turn — the analysis assembles rather than appears */
@keyframes an-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.an-blk{ animation:an-rise .6s cubic-bezier(.16,1,.3,1) both; }
.an-blk:nth-child(1){ animation-delay:.02s; }
.an-blk:nth-child(2){ animation-delay:.14s; }
.an-blk:nth-child(3){ animation-delay:.26s; }
.an-blk:nth-child(4){ animation-delay:.38s; }
.an-blk:nth-child(5){ animation-delay:.50s; }
.an-blk:nth-child(6){ animation-delay:.62s; }
.an-blk:nth-child(7){ animation-delay:.74s; }

/* the badge that says a model actually did this */
.an-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px;
  background:var(--tint); border:1px solid var(--tint-line);
  font-size:11px; font-weight:600; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--accent-strong);
  margin-bottom:14px;
}
.an-badge i{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:an-breathe 2s ease-in-out infinite; }
.an-badge.is-fallback{ background:var(--surface-2); border-color:var(--line); color:var(--text-3-aa); }
.an-badge.is-fallback i{ background:var(--text-3); }

.an-verdict{
  font-size:clamp(22px,2.6vw,30px); font-weight:600; line-height:1.25;
  letter-spacing:var(--tracking-h); color:var(--text-1); margin-bottom:12px;
}
.an-diag{ font-size:15.5px; line-height:1.65; color:var(--text-2); max-width:62ch; }

/* ── the numbers ──────────────────────────────────────────────────────────*/
.an-figs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:26px; }
.an-fig{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 18px 16px;
  background:var(--surface);
}
.an-fig .lbl{
  font-size:10.5px; font-weight:600; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--text-3-aa); margin-bottom:7px;
}
.an-fig .val{
  font-size:clamp(24px,2.4vw,30px); font-weight:800; line-height:1.05;
  letter-spacing:var(--tracking-display); color:var(--text-1);
  font-variant-numeric:tabular-nums;
}
.an-fig .val.warn{ color:var(--danger); }
.an-fig .sub{ font-size:12px; color:var(--text-3-aa); margin-top:6px; line-height:1.45; }

/* ── where the money goes — a real stacked bar, drawn from their figures ──*/
.an-bar{ margin-top:12px; }
.an-bar .track{
  display:flex; height:34px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2);
}
.an-bar .seg{
  width:0; transition:width 1.1s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.an-bar .seg:hover{ filter:brightness(1.08); }
.an-key{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }
.an-key span{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-2); }
.an-key i{ width:10px; height:10px; border-radius:3px; flex:none; }
.an-key b{ color:var(--text-1); font-weight:600; font-variant-numeric:tabular-nums; }

/* ── the five pieces — what they have, what they don't ────────────────────*/
.an-pieces{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-top:12px; }
.an-piece{
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 12px;
  text-align:center; background:var(--surface);
  opacity:0; transform:scale(.94);
  animation:an-piece-in .45s cubic-bezier(.34,1.5,.64,1) both;
}
@keyframes an-piece-in{ to{ opacity:1; transform:scale(1); } }
.an-piece:nth-child(1){ animation-delay:.05s; }
.an-piece:nth-child(2){ animation-delay:.13s; }
.an-piece:nth-child(3){ animation-delay:.21s; }
.an-piece:nth-child(4){ animation-delay:.29s; }
.an-piece:nth-child(5){ animation-delay:.37s; }
.an-piece .ic{
  width:30px; height:30px; margin:0 auto 9px; border-radius:50%;
  display:grid; place-items:center;
}
.an-piece .ic svg{ width:15px; height:15px; }
.an-piece.have .ic{ background:var(--tint); }
.an-piece.have .ic svg{ stroke:var(--accent-ink); }
.an-piece.miss .ic{ background:var(--danger-soft); }
.an-piece.miss .ic svg{ stroke:var(--danger); }
.an-piece .nm{ font-size:11.5px; line-height:1.35; font-weight:500; color:var(--text-2); }
.an-piece.miss .nm{ color:var(--text-1); font-weight:600; }

/* ── the leaks ────────────────────────────────────────────────────────────*/
.an-leaks{ display:grid; gap:9px; margin-top:12px; }
.an-leak{
  display:flex; gap:13px; align-items:flex-start;
  padding:15px 16px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  border-left:3px solid var(--line-strong);
}
.an-leak.high{ border-left-color:var(--danger); background:rgba(196,39,27,.03); }
.an-leak.medium{ border-left-color:var(--warning); }
.an-leak.low{ border-left-color:var(--line-strong); }
.an-leak .sev{
  flex:none; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 8px; border-radius:5px; margin-top:1px;
}
.an-leak.high .sev{ background:var(--danger-soft); color:var(--danger); }
.an-leak.medium .sev{ background:var(--warning-soft); color:var(--warning); }
.an-leak.low .sev{ background:var(--surface-2); color:var(--text-3-aa); }
.an-leak .tx b{ display:block; font-size:14.5px; font-weight:600; color:var(--text-1); margin-bottom:3px; }
.an-leak .tx p{ font-size:13.5px; line-height:1.5; color:var(--text-2); }

/* ── the priority ─────────────────────────────────────────────────────────*/
.an-prio{
  margin-top:12px; padding:20px 22px; border-radius:var(--r-lg);
  background:var(--panel); color:#fff; position:relative; overflow:hidden;
}
/* the grid + bloom come from .tex-dark in brand.css — one pitch, everywhere */
.an-prio > *{ position:relative; }
.an-prio .lbl{
  font-size:10.5px; font-weight:600; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:#9DC0FF; margin-bottom:8px;
}
.an-prio h4{ font-size:19px; font-weight:600; letter-spacing:-.02em; color:#fff; margin-bottom:6px; }
.an-prio p{ font-size:14px; line-height:1.55; color:rgba(255,255,255,.72); }

/* ── the 90-day plan ──────────────────────────────────────────────────────*/
.an-plan{ margin-top:12px; position:relative; padding-left:26px; }
.an-plan::before{
  content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--accent), var(--tint-line));
  border-radius:2px;
  transform-origin:top;
  animation:an-track 1.1s cubic-bezier(.4,0,.2,1) both;
}
@keyframes an-track{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.an-milestone{
  position:relative; padding:0 0 20px 4px;
  animation:an-rise .5s cubic-bezier(.16,1,.3,1) both;
}
.an-milestone:nth-child(1){ animation-delay:.16s; }
.an-milestone:nth-child(2){ animation-delay:.30s; }
.an-milestone:nth-child(3){ animation-delay:.44s; }
.an-milestone:nth-child(4){ animation-delay:.58s; }
.an-milestone:last-child{ padding-bottom:0; }
.an-milestone::before{
  content:""; position:absolute; left:-25px; top:5px;
  width:11px; height:11px; border-radius:50%;
  background:#fff; border:2.5px solid var(--accent);
}
.an-milestone .when{
  font-size:10.5px; font-weight:700; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:4px;
}
.an-milestone .what{ font-size:15px; font-weight:600; color:var(--text-1); margin-bottom:3px; }
.an-milestone .detail{ font-size:13.5px; line-height:1.5; color:var(--text-2); }

/* ── the close ────────────────────────────────────────────────────────────*/
.an-close{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
}
.an-close p{ font-size:15px; line-height:1.6; color:var(--text-2); margin-bottom:18px; }
.an-close .btn{ width:100%; justify-content:center; }
.an-foot{ margin-top:16px; font-size:11.5px; line-height:1.55; color:var(--text-3-aa); }

.an-sec-h{
  font-size:11.5px; font-weight:600; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--text-3-aa);
  margin:26px 0 0; padding-top:22px; border-top:1px solid var(--line);
}

@media (max-width:760px){
  .an-figs{ grid-template-columns:minmax(0,1fr); }
  .an-pieces{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .an-piece:nth-child(5){ grid-column:1 / -1; }
  .an-leak{ flex-direction:column; gap:9px; }
}

@media (prefers-reduced-motion:reduce){
  .an-orb, .an-orb i, .an-badge i, .an-line, .an-blk, .an-piece,
  .an-plan::before, .an-milestone{ animation:none !important; transition:none !important; }
  .an-line{ opacity:1; transform:none; }
  .an-bar .seg{ transition:none; }
}

/* ── the PDF actions on the results screen ────────────────────────────────*/
.an-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.an-actions .btn{ flex:1; justify-content:center; min-width:180px; }
.an-sent{
  margin-top:14px; padding:12px 14px; border-radius:var(--r-btn);
  font-size:13.5px; line-height:1.5;
  animation:an-rise .5s cubic-bezier(.16,1,.3,1) both;
}
.an-sent.ok{ background:var(--tint); border:1px solid var(--tint-line); color:var(--accent-strong); }
.an-sent.warn{ background:var(--warning-soft); border:1px solid var(--warning); color:var(--warning); }
.an-sent b{ font-weight:600; }
@media (max-width:560px){ .an-actions .btn{ min-width:0; flex:1 1 100%; } }