/* ============ GUIDE COMPONENTS (CCXO creative track, Worker B, 2026-09-27) ============
   Server-rendered guide layer: Marcus hook cards, verdict figures, gifts
   share blocks, author portrait, brand badge, comparison-stack tables.
   Presentation only — no content, copy, or CTA changes.

   TOKEN LAW: body-level components use the GLOBAL v2 tokens
   (:root --surface/--text/--muted/--border/--kicker with
   html[data-theme="light"] overrides in redesign-v2/tokens.css).
   Dark-default safe: selectors are never gated on html[data-theme].

   This partial is appended to the union build by bin/dg-build-css —
   never hand-edit the generated visual/components.css.
   RECOVERY (2026-09-27): reconstructed after the working-tree incident
   deleted the original. figure.dg-verdict-card styling is new here: the
   verdict injector emits blockquote.dg-verdict (styled in hand-laws §38)
   but a concurrent render shipped figure.dg-verdict-card on production
   with zero presentation rules — this file closes that gap for both. */

/* ---- 1. Verdict figure variant (matches hand-laws §38 blockquote) ---- */
figure.dg-verdict-card{margin:14px 0 16px;padding:12px 14px 12px 16px;
  background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--kicker);border-radius:0 10px 10px 0}
figure.dg-verdict-card .dg-verdict-quote{margin:0 0 6px;font-size:1.02em;
  line-height:1.45;color:var(--text);font-weight:600}
figure.dg-verdict-card .dg-verdict-stats{margin:0;font-size:.88em;
  line-height:1.5;color:var(--muted)}
figure.dg-verdict-card figcaption{margin:8px 0 0;font-size:.8em;
  color:var(--muted)}
figure.dg-verdict-card .n{font-variant-numeric:tabular-nums}
.product figure.dg-verdict-card{width:100%}

/* ---- 2. Marcus hook (between kicker and H1, never a heading) ---- */
.dg-hook{margin:0 0 18px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px}
.dg-hook-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 8px}
.dg-hook-flag{display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--kicker);color:#140F05;font-size:.72em;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}
.dg-hook-name{font-size:1.05em;font-weight:700;color:var(--text)}
.dg-hook-score{margin-left:auto;font-size:.95em;color:var(--muted)}
.dg-hook-score .n{font-size:1.35em;font-weight:800;color:var(--kicker);
  font-variant-numeric:tabular-nums}
.dg-hook-verdict{margin:0 0 8px;font-size:1.02em;line-height:1.5;
  color:var(--text)}
.dg-hook-line{margin:0;font-size:1.12em;line-height:1.4;font-weight:700;
  color:var(--text);text-wrap:balance}

/* ---- 3. Gifts share block + per-pick rows ---- */
.dg-gifts-share{margin:22px 0;padding:18px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;text-align:center}
.dg-gifts-share-eyebrow{margin:0 0 4px;font-size:.78em;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kicker)}
.dg-gifts-share-title{margin:0 0 8px;font-size:1.35em;font-weight:800;
  color:var(--text);text-wrap:balance}
.dg-gifts-share-copy{margin:0 0 14px;color:var(--muted);line-height:1.55}
.dg-gifts-share-actions{display:flex;gap:10px;justify-content:center;
  flex-wrap:wrap}
.dg-pick-share{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:14px 0 0;padding:10px 12px;
  background:var(--surface-2);border:1px dashed var(--border);
  border-radius:10px;font-size:.9em;color:var(--muted)}
.dg-pick-share .dg-share-btn{flex-shrink:0}
p.dg-share-note:empty{display:none}
.dg-share-note{min-height:0;margin:10px 0 0;font-size:.88em;color:var(--muted)}

/* ---- 4. Author portrait / avatar / brand badge ---- */
img.avatar-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;
  display:block}
img.author-photo{width:192px;height:192px;border-radius:16px;object-fit:cover;
  display:block}
img.dgv2-brand-img{width:26px;height:26px;display:block}
a.logo img.dgv2-brand-img{border-radius:6px}

/* ---- 5. Comparison-stack tables (class added by the injector;
   hand-laws.css §28 owns the mobile stacked-card rules) ----
   SWIPE HINT REMOVED (2026-09-28): the ::after "Swipe →" was a lie — cmp-stack
   converts to vertically stacked cards, horizontal swipe is impossible by design.
   The hint only confused users. If a table should swipe, don't use dg-cmp-stack. */
.table-scroll.dg-cmp-stack{position:relative}
.table-scroll.dg-cmp-stack table.compare{min-width:640px}
.table-scroll.dg-cmp-stack table.compare th:first-child,
.table-scroll.dg-cmp-stack table.compare td:first-child{
  position:sticky;left:0;background:var(--surface);z-index:1}
.table-scroll.dg-cmp-stack table.compare tbody tr:nth-child(even){
  background:var(--surface-2)}
.table-scroll.dg-cmp-stack table.compare tbody tr>td,
.table-scroll.dg-cmp-stack table.compare tbody tr>th{padding-top:14px;
  padding-bottom:14px;min-height:48px}

/* ---- 6. Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .dg-hook,.dg-gifts-share,.dg-pick-share,figure.dg-verdict-card{
    transition:none;animation:none}
}