/* M19 — Verdict Panel
   Single-homed canonical CSS (one file, one concern).
   Tokens: var(--wgf-*) — never :root here.
   Verdict color hierarchy: gold=favorable, neutral=hold/watch, down=genuine loss.
   --wgf-down is ONLY used for unfavorable because it IS market direction (loss). */

/* ── panel shell ── */
.vp{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  padding:var(--space-4);
  box-shadow:var(--shadow-1);
}

/* ── left accent bar ── */
.vp--favorable  {border-left:3px solid var(--wgf-gold-accent);}
.vp--hold       {border-left:3px solid var(--wgf-border-neutral);}
.vp--unfavorable{border-left:3px solid var(--wgf-down);}
.vp--muted      {border-left:3px solid var(--wgf-border-neutral-soft);}

/* ── headline ── */
.vp__headline{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 var(--space-3);
  line-height:1.25;
}
.vp__headline--gold  {color:var(--wgf-gold-primary);}
.vp__headline--muted {color:var(--wgf-muted);}
.vp__headline--text  {color:var(--wgf-text);}

/* ── reasons list ── */
.vp__reasons{
  list-style:none;
  margin:0 0 var(--space-3);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.vp__reason{
  display:flex;
  align-items:baseline;
  gap:var(--space-2);
  font-size:var(--text-sm);
  color:var(--wgf-text);
  border-top:1px solid var(--wgf-border-neutral-soft);
  padding-top:var(--space-2);
}
.vp__reasons li:first-child{border-top:none;padding-top:0;}
.vp__reason-label{
  font-family:var(--font-ui);
  color:var(--wgf-muted);
  flex:0 0 auto;
  min-width:11ch;
}
.vp__reason-value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-sm);
  font-weight:500;
  flex:1 1 auto;
}
/* green/red here are market direction — % move or profit IS direction */
.vp__reason-value--up  {color:var(--wgf-up);}
.vp__reason-value--down{color:var(--wgf-down);}
.vp__reason-value--neu {color:var(--wgf-text);}

.vp__reason-link{
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  color:var(--wgf-link);
  text-decoration:none;
  margin-left:auto;
  flex:0 0 auto;
  white-space:nowrap;
  transition:color var(--motion-fast) var(--ease-standard);
}
.vp__reason-link:hover{color:var(--wgf-gold-bright);}
.vp__reason-link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:2px;}

/* ── no-market / insufficient-data note text ── */
.vp__note{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  margin:0 0 var(--space-3);
  line-height:1.6;
}
.vp__note strong{color:var(--wgf-text);}

/* ── freshness footer ── */
.vp__fresh{
  margin-top:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid var(--wgf-border-neutral-soft);
}

/* ── compact variant ── */
.vp-compact{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control);
  padding:var(--space-2) var(--space-3);
  font-size:var(--text-sm);
  max-width:480px;
  flex-wrap:wrap;
}
.vp-compact__badge{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:2px var(--space-2);
  border-radius:var(--radius-control);
  background:var(--wgf-panel-3);
  border:1px solid var(--wgf-border);
  white-space:nowrap;
}
.vp-compact__badge--gold {color:var(--wgf-gold-primary);border-color:var(--wgf-border-strong);}
.vp-compact__badge--muted{color:var(--wgf-muted);border-color:var(--wgf-border-neutral);}
.vp-compact__reason{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);
  color:var(--wgf-muted);
}
/* green here is market direction (positive margin) */
.vp-compact__reason strong{color:var(--wgf-up);font-weight:500;}
.vp-compact__sep{color:var(--wgf-border-neutral);margin:0 2px;}

/* ── responsive: narrow screens ── */
@media(max-width:560px){
  .vp{padding:var(--space-3);}
  .vp__reason{flex-wrap:wrap;}
  .vp__reason-link{margin-left:0;margin-top:var(--space-1);}
}

/* ── transitions (respect motion) ── */
@media(prefers-reduced-motion:no-preference){
  .vp{transition:border-color var(--motion-fast) var(--ease-standard);}
  .vp:focus-within{border-color:var(--wgf-border-strong);}
}