/* ============================================================
   Lab 02 — Fable Reads Your Business.
   Everything rides the shared tokens in styles.css (both themes hold
   automatically); this file only adds the experiment's own components:
   the console, the progress readout, the audit cards, and the simulated
   WhatsApp thread. Engine: js/lab-audit.js → the /audit Worker route.
   ============================================================ */

/* ---------- the console: one input, one button ---------- */
.audit-console{
  background:var(--surface-1);
  border:1px solid rgba(22,201,100,.3);
  border-radius:var(--r-lg);
  padding:clamp(24px,4vw,44px);
  box-shadow:0 0 60px rgba(22,201,100,.05);
}
.audit-console__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,220px) auto;
  gap:14px;
  align-items:end;
}
.audit-console .field label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audit-console .btn{white-space:nowrap}
.audit-console .btn[disabled]{opacity:.55;cursor:wait;transform:none}
.audit-console__hint{
  font:400 13px/1.6 var(--body);color:var(--text-3);margin:18px 0 0;max-width:640px;
}
.audit-console__hint a{color:var(--text-2)}
@media (max-width:820px){
  .audit-console__row{grid-template-columns:1fr}
  .audit-console .btn{width:100%}
}

/* ---------- progress: a lab readout, not a spinner ---------- */
.audit-progress{display:none;margin-top:28px}
.audit-progress.is-on{display:block}
.audit-progress__line{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font:500 13px var(--mono);letter-spacing:.06em;color:var(--text-2);
}
.audit-progress__dot{
  width:8px;height:8px;border-radius:var(--r-pill);background:var(--green);
  animation:audit-pulse 1.6s ease-in-out infinite;flex:none;
}
.audit-progress__timer{margin-left:auto;color:var(--text-3);font-variant-numeric:tabular-nums}
.audit-progress__bar{
  margin-top:14px;height:3px;border-radius:var(--r-pill);
  background:var(--surface-2);overflow:hidden;position:relative;
}
.audit-progress__bar::after{
  content:"";position:absolute;inset:0;width:34%;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  animation:audit-scan 2.2s var(--ease) infinite;
}
@keyframes audit-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes audit-scan{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}

/* ---------- results ---------- */
.audit-result{display:none;margin-top:clamp(36px,5vw,56px)}
.audit-result.is-on{display:block}
.audit-result:focus{outline:none}
.audit-kicker{
  font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 14px;display:flex;align-items:center;gap:8px;
}
.audit-kicker .pill__dot{flex:none}

/* what Fable found — the receipts card */
.audit-found{
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-md);padding:clamp(22px,3vw,30px);
}
.audit-found__name{font:600 clamp(22px,3vw,30px)/1.15 var(--display);letter-spacing:-.02em;color:var(--text);margin:0}
.audit-found__meta{font:400 15px/1.5 var(--body);color:var(--text-2);margin:8px 0 0}
.audit-signals{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.audit-signals li{
  display:flex;gap:10px;align-items:flex-start;
  font:400 15px/1.55 var(--body);color:var(--text-2);
}
.audit-signals svg{flex:none;margin-top:3px;color:var(--accent-ink)}

/* the three automations */
.auditgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.audit-card{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);
  padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;
}
.audit-card__num{font:500 13px var(--mono);color:var(--accent-ink)}
.audit-card__h{font:600 19px/1.3 var(--display);color:var(--text);margin:12px 0 14px}
.audit-card dl{margin:0;display:grid;gap:12px}
.audit-card dt{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.audit-card dd{font:400 14.5px/1.55 var(--body);color:var(--text-2);margin:4px 0 0}
.audit-card dd.is-after{color:var(--text)}

/* simulated WhatsApp thread */
.wa-sim{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,30px);max-width:640px;margin-top:18px;
}
.wa-sim__setup{font:400 13px var(--mono);letter-spacing:.04em;color:var(--text-3);margin:0 0 18px;text-align:center}
.wa-sim__thread{display:flex;flex-direction:column;gap:10px}
.wa-msg{
  max-width:82%;padding:10px 14px;border-radius:16px;
  font:400 15px/1.5 var(--body);color:var(--text);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.wa-msg.is-in{opacity:1;transform:none}
.wa-msg--customer{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:6px}
.wa-msg--receptionist{align-self:flex-end;background:rgba(22,201,100,.14);border-bottom-right-radius:6px}
.wa-msg__who{display:block;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.wa-msg--receptionist .wa-msg__who{color:var(--accent-ink)}
.wa-sim__tag{
  margin:18px 0 0;text-align:center;
  font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}

/* honesty line + CTA */
.audit-note{font:400 14px/1.6 var(--body);color:var(--text-3);max-width:640px;margin:18px 0 0}
.audit-cta{margin-top:clamp(28px,4vw,40px);display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* not-found / error states */
.audit-miss{display:none;margin-top:28px}
.audit-miss.is-on{display:block}
.audit-miss__box{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);
  padding:clamp(22px,3vw,30px);max-width:680px;
}
.audit-miss__h{font:600 20px/1.3 var(--display);color:var(--text);margin:0 0 10px}
.audit-miss__p{font:400 15px/1.6 var(--body);color:var(--text-2);margin:0}
.audit-miss__p+.audit-miss__p{margin-top:10px}
.audit-miss .audit-cta{margin-top:22px}

/* section spacing between result groups */
.audit-result__group{margin-top:clamp(32px,4.5vw,48px)}
.audit-result__group:first-child{margin-top:0}

/* ---------- reduced motion: state changes stay, movement goes ---------- */
@media (prefers-reduced-motion:reduce){
  .audit-progress__dot{animation:none}
  .audit-progress__bar::after{animation:none;width:100%;opacity:.5}
  .wa-msg{opacity:1;transform:none;transition:none}
}