/* AI Draft Taste — results-page conversion card. Prefix: .dt-
   Spec: docs/superpowers/specs/2026-06-06-ai-draft-taste-design.md
   Tokens kept local so it works wherever results render. */
.dt-card{
  --dt-forest:#1a4d3c; --dt-forest-d:#143b2e; --dt-sienna:#C4532B; --dt-sienna-d:#a8431f;
  --dt-line:#e7e2d4; --dt-ink:#1f2a24; --dt-ink3:#5e6b63; --dt-gold:#b78a2e;
  border:1.5px solid var(--dt-forest); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 10px 30px -16px rgba(26,77,60,.4); margin:16px 0 8px; font-family:inherit;
}
.dt-top{ background:linear-gradient(135deg,var(--dt-forest),var(--dt-forest-d)); color:#fff; padding:18px 20px; }
.dt-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#bfe3d0; display:flex; align-items:center; gap:7px; }
.dt-top h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:22px; margin:7px 0 4px; letter-spacing:-.01em; line-height:1.2; }
.dt-top p{ margin:0; font-size:13.5px; color:#d6e8de; }
.dt-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.dt-chips .dt-lead{ align-self:center; color:#9fc7b3; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; margin-right:2px; }
.dt-chip{ font-size:11px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2); color:#eaf4ee; border-radius:999px; padding:3px 9px; }

.dt-body{ padding:20px; }
.dt-cta-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dt-btn{ appearance:none; border:0; cursor:pointer; font-family:inherit; font-weight:600; font-size:15px; border-radius:11px; padding:13px 20px; display:inline-flex; align-items:center; gap:9px; transition:transform .08s,box-shadow .15s,background .15s; text-decoration:none; }
.dt-btn--go{ background:var(--dt-sienna); color:#fff; box-shadow:0 6px 18px -8px rgba(196,83,43,.7); }
.dt-btn--go:hover{ background:var(--dt-sienna-d); transform:translateY(-1px); color:#fff; }
.dt-btn--go:active{ transform:translateY(0); }
.dt-btn--prem{ background:var(--dt-forest); color:#fff; }
.dt-btn--prem:hover{ background:var(--dt-forest-d); transform:translateY(-1px); color:#fff; }
.dt-spark{ font-size:16px; }
.dt-hint{ font-size:12px; color:var(--dt-ink3); }

.dt-doc{ margin-top:4px; animation:dt-fade .4s ease; }
@keyframes dt-fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.dt-doc__label{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--dt-ink3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.dt-status{ display:inline-flex; align-items:center; gap:6px; color:var(--dt-forest); font-weight:600; }
.dt-dot{ width:7px; height:7px; border-radius:50%; background:var(--dt-forest); animation:dt-pulse 1s infinite; }
@keyframes dt-pulse{ 0%,100%{opacity:.3} 50%{opacity:1} }
.dt-paper{ background:#fcfbf6; border:1px solid var(--dt-line); border-radius:12px; padding:18px 20px; font-size:15px; line-height:1.72; color:#26302a; font-family:'Fraunces',Georgia,serif; }
.dt-sec-h{ font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dt-gold); margin-bottom:9px; }
.dt-typed .dt-caret{ display:inline-block; width:2px; height:1.05em; background:var(--dt-sienna); margin-left:1px; vertical-align:-2px; animation:dt-blink .9s steps(1) infinite; }
@keyframes dt-blink{ 50%{opacity:0} }

.dt-lock{ position:relative; margin-top:2px; }
.dt-lock__blur{ filter:blur(4px); opacity:.55; user-select:none; pointer-events:none; font-family:'Fraunces',Georgia,serif; font-size:15px; line-height:1.72; color:#26302a; padding:0 20px; }
.dt-hook{ margin-top:14px; border:1px solid var(--dt-line); border-left:4px solid var(--dt-sienna); background:linear-gradient(180deg,#fff,#fcfbf6); border-radius:12px; padding:16px 18px; }
.dt-hook .dt-val{ font-size:12.5px; color:var(--dt-ink3); margin:0 0 8px; }
.dt-hook .dt-val b{ color:var(--dt-forest); }
.dt-hook h4{ margin:0 0 4px; font-family:'Fraunces',Georgia,serif; font-size:18px; font-weight:500; color:var(--dt-ink); }
.dt-hook p{ margin:0 0 13px; font-size:13.5px; color:var(--dt-ink3); }
.dt-hook .dt-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dt-mbg{ font-size:11.5px; color:var(--dt-ink3); }

.dt-reveal{ opacity:0; transform:translateY(8px); transition:opacity .5s,transform .5s; }
.dt-reveal.dt-in{ opacity:1; transform:none; }

/* premium shortcut variant */
.dt-shortcut{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dt-shortcut p{ margin:0; font-size:13.5px; color:#d6e8de; flex:1 1 240px; }

/* soft-failure */
.dt-soft{ font-size:13.5px; color:var(--dt-ink3); margin:0; }
.dt-soft a{ color:var(--dt-sienna); font-weight:600; }

/* ── SPECIFICITY BOOSTERS (CLAUDE.md ".quiz-step h3/p trap") ──────────────────
   The card mounts INSIDE the quiz-results .quiz-step, whose generic
   `.quiz-step h3` (color:ink; text-align:center) + `.quiz-step p`
   (color:ink-3; text-align:center) at (0,0,1,1) silently override our
   single-class rules — turning the white, left-aligned design dark + centered.
   These compound selectors (≥0,0,2,1) reclaim it. */
.dt-card .dt-top h3 { color:#fff; text-align:left; }
.dt-card .dt-top p { color:#d6e8de; text-align:left; }
.dt-card .dt-hook h4 { color:var(--dt-ink); text-align:left; }
.dt-card .dt-hook p { color:var(--dt-ink3); text-align:left; }
.dt-card .dt-shortcut p { color:#d6e8de; text-align:left; }
.dt-card .dt-soft { text-align:left; }

@media (max-width:640px){
  .dt-top{ padding:16px; } .dt-body{ padding:16px; }
  .dt-top h3{ font-size:19px; }
  .dt-btn{ width:100%; justify-content:center; }
  .dt-cta-row{ gap:8px; }
  .dt-hint{ width:100%; text-align:center; }
  .dt-hook .dt-row{ flex-direction:column; align-items:stretch; }
  .dt-mbg{ text-align:center; }
}