/* =====================================================================
   Trade Verdict — components for trade-verdict.html.
   Extends style.css using its existing tokens only (--lime, --surface,
   --raised, --gain/--loss/--avoid/--warn, Barlow Condensed for labels,
   Inter for prose). No token overrides, no new type faces.

   Reuses wholesale from style.css: .draft-setup-card, .setup-grid,
   .setup-field, .search-results/.search-row, .log-row/.lp/.ln,
   .grade-stamp/.grade-comment, .vchip, .pos-chip, .btn*.
   ===================================================================== */

/* ---------- Step headers ---------- */
.tv-step{margin-bottom:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tv-step .n{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:11px;letter-spacing:.14em;
  color:var(--lime-text);text-transform:uppercase;
}
.tv-step h2{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;letter-spacing:.02em;
  text-transform:uppercase;margin:0;color:var(--white);
}
.tv-step .hint{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--mute)}

/* ---------- The trade builder: two sides ---------- */
.trade-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:820px){.trade-cols{grid-template-columns:1fr}}

.trade-side{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:16px 18px;border-top:3px solid var(--line-soft);min-width:0;
}
/* Direction is carried by the top border AND the header label, never colour
   alone — see the status-colour rule in the dataviz guidance. */
.trade-side.side-out{border-top-color:var(--loss)}
.trade-side.side-in{border-top-color:var(--gain)}
.trade-side h3{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 2px;display:flex;align-items:center;gap:8px;
}
.trade-side.side-out h3{color:var(--loss)}
.trade-side.side-in h3{color:var(--gain)}
.trade-side h3 svg{width:14px;height:14px;flex:0 0 auto}
.trade-side .side-sub{font-family:'Inter',sans-serif;font-size:12px;color:var(--mute);margin:0 0 12px}

/* ---------- Player chips inside a trade side / roster ---------- */
.tp-list{display:flex;flex-direction:column;gap:5px;margin-top:10px}
/* Roster lists run to 15-16 names, which as full-width stacked rows buries the
   rest of the page. The trade sides stay single-column — they hold 1-3 names and
   they are the primary input, so they get the width. */
.tp-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:5px}
.tp-chip{
  display:flex;align-items:center;gap:9px;min-width:0;
  background:var(--raised);border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px;
}
.tp-chip .tp-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13.5px;text-transform:uppercase;
  color:var(--white);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tp-chip .tp-meta{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.06em;
  color:var(--mute);flex:0 0 auto;text-transform:uppercase;
}
.tp-chip .tp-x{
  all:unset;cursor:pointer;flex:0 0 auto;color:var(--mute-dim);line-height:0;padding:6px;border-radius:5px;
}
.tp-chip .tp-x:hover{color:var(--avoid);background:rgba(226,75,74,.12)}
.tp-chip .tp-x svg{width:13px;height:13px}
.tp-empty{
  font-family:'Inter',sans-serif;font-size:12.5px;color:var(--mute-dim);
  border:1px dashed var(--line);border-radius:8px;padding:12px;text-align:center;margin-top:10px;
}

/* ---------- Collapsible optional panels ---------- */
.tv-collapse{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  overflow:hidden;margin-bottom:12px;
}
.tv-collapse > summary{
  list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;gap:12px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--white);
}
.tv-collapse > summary::-webkit-details-marker{display:none}
.tv-collapse > summary .caret{
  width:14px;height:14px;flex:0 0 auto;color:var(--mute);transition:transform .15s;margin-left:auto;
}
.tv-collapse[open] > summary .caret{transform:rotate(180deg)}
.tv-collapse > summary .tag{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.14em;
  color:var(--mute);border:1px solid var(--line);border-radius:4px;padding:3px 6px 2px;flex:0 0 auto;
}
.tv-collapse > summary .tag.on{color:var(--lime-text);border-color:var(--lime-ring);background:var(--lime-dim)}
.tv-collapse .tv-collapse-body{padding:0 18px 18px}

/* ---------- Verdict head: stamp + headline ---------- */
.tv-verdict{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:22px 24px 24px;
}
.tv-verdict-head{
  display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:28px;align-items:center;
}
@media (max-width:760px){
  .tv-verdict-head{grid-template-columns:1fr;gap:6px;text-align:center}
}
/* The stamp is the hero of this block, so it gets the size: the letter is drawn
   as an outline (no fill) to look pen-drawn, which is inherently low-contrast,
   and at 220px it read as a faint smudge next to the numeral beside it. */
.tv-verdict-head .grade-stamp{width:100%;max-width:260px;margin:0 auto}
.tv-headline{min-width:0}
.tv-headline .tv-scope{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin:0 0 8px;
}
/* Hero figure: proportional figures on purpose (tabular-nums makes a large
   standalone number look loose — it is reserved for aligned columns below). */
/* Sized down from 56px so it supports the stamp rather than fighting it —
   one hero per view, and here the stamp is it. */
.tv-hero-num{
  font-family:'Anton',sans-serif;font-size:clamp(34px,4.6vw,46px);line-height:1;margin:0;
  color:var(--white);
}
.tv-hero-num.up{color:var(--gain)}
.tv-hero-num.down{color:var(--loss)}
.tv-hero-unit{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin:6px 0 0;
}
.tv-verdict-line{
  font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.6;color:var(--prose);margin:12px 0 0;max-width:520px;
}
@media (max-width:760px){.tv-verdict-line{margin-left:auto;margin-right:auto}}
.tv-verdict-line strong{color:var(--white);font-weight:600}

/* ---------- Balance meter (diverging: two hues + neutral midpoint) ---------- */
.tv-balance{margin:24px 0 4px}
.tv-balance-labels{
  display:flex;justify-content:space-between;gap:10px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute-dim);margin-bottom:7px;
}
.tv-balance-track{
  position:relative;height:10px;border-radius:5px;background:var(--raised);
  border:1px solid var(--line-soft);
}
/* Neutral gray midpoint marker — the diverging baseline. */
.tv-balance-track::after{
  content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--mute);opacity:.5;
}
.tv-balance-fill{
  position:absolute;top:0;bottom:0;border-radius:4px;background:var(--mute);transition:left .3s,width .3s;
}
.tv-balance-fill.to-you{background:var(--gain)}
.tv-balance-fill.to-them{background:var(--loss)}
.tv-balance-read{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:9px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mute);
}
.tv-balance-read b{font-size:14px;color:var(--white)}

/* ---------- KPI row of stat tiles ---------- */
.tv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:22px}
.vstat{
  background:var(--raised);border:1px solid var(--line-soft);border-radius:10px;padding:14px 16px;min-width:0;
}
.vstat .vs-label{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin:0 0 8px;
}
.vstat .vs-value{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:26px;line-height:1;color:var(--white);
  display:flex;align-items:baseline;gap:8px;
}
.vstat .vs-grade{font-size:15px;color:var(--mute)}
.vstat .vs-value.up{color:var(--gain)}
.vstat .vs-value.down{color:var(--loss)}
.vstat .vs-sub{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--mute-dim);margin:7px 0 0;line-height:1.45}
.vstat.is-empty{border-style:dashed;background:transparent}
.vstat.is-empty .vs-value{color:var(--mute-dim);font-size:19px}

/* ---------- Callouts (fairness / acceptance / gap / conflict) ---------- */
.tv-callout{
  border:1px solid var(--line-soft);border-left:3px solid var(--mute);border-radius:10px;
  background:var(--raised);padding:14px 16px;margin-top:12px;
}
.tv-callout.good{border-left-color:var(--gain)}
.tv-callout.warn{border-left-color:var(--warn)}
.tv-callout.bad{border-left-color:var(--avoid)}
.tv-callout.neutral{border-left-color:var(--mute)}
.tv-callout .co-head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--white);margin-bottom:6px;
}
/* Status always ships icon + label, never colour alone. */
.tv-callout .co-head svg{width:14px;height:14px;flex:0 0 auto}
.tv-callout.good .co-head svg{color:var(--gain)}
.tv-callout.warn .co-head svg{color:var(--warn)}
.tv-callout.bad .co-head svg{color:var(--avoid)}
.tv-callout.neutral .co-head svg{color:var(--mute)}
.tv-callout p{font-family:'Inter',sans-serif;font-size:13px;line-height:1.6;color:var(--prose);margin:0}
.tv-callout p + p{margin-top:7px}
.tv-callout .co-sug{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--white);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.tv-callout .co-sug .arrow{color:var(--lime-text)}

/* ---------- Lineup change list ---------- */
.tv-changes{margin-top:22px}
.tv-changes h4,.tv-sub-h{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.1em;font-size:11px;
  color:var(--mute);text-transform:uppercase;margin:0 0 9px;
}
.tv-change-row{
  display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;
  padding:9px 10px;border-bottom:1px solid var(--line-soft);
}
.tv-change-row .lp{color:var(--lime-text);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.06em}
.tv-change-row .swap{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;
}
.tv-change-row .was{color:var(--mute-dim);text-decoration:line-through}
.tv-change-row .now{color:var(--white)}
.tv-change-row .to{color:var(--mute-dim)}
/* Columns of numbers DO get tabular figures so they align down the list. */
.tv-change-row .d{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:13px;font-variant-numeric:tabular-nums}
.tv-change-row .d.up{color:var(--gain)}
.tv-change-row .d.down{color:var(--loss)}

/* ---------- Notices ---------- */
.tv-notice{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--raised);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;margin-top:12px;
  font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.55;color:var(--prose);
}
.tv-notice svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--warn)}
.tv-notice.bad{border-color:rgba(226,75,74,.4)}
.tv-notice.bad svg{color:var(--avoid)}

/* ---------- Empty / placeholder state ---------- */
.tv-placeholder{
  border:1px dashed var(--line);border-radius:var(--radius-lg);
  padding:44px 24px;text-align:center;color:var(--mute);
}
.tv-placeholder .ph-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin:0 0 6px;
}
.tv-placeholder p{font-family:'Inter',sans-serif;font-size:13px;margin:0;color:var(--mute-dim)}

/* ---------- Roster bulk paste ---------- */
.tv-paste{
  width:100%;background:var(--raised);border:1px solid var(--line);color:var(--white);
  border-radius:8px;padding:10px 12px;font-family:'Inter',sans-serif;font-size:13px;
  line-height:1.5;resize:vertical;min-height:78px;outline:none;
}
.tv-paste:focus{border-color:var(--lime-line)}
.tv-paste-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:9px}
.tv-roster-count{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute-dim);margin-left:auto;
}
.tv-mini-tabs{display:flex;gap:2px;margin-bottom:10px}

/* ---------- Format summary ---------- */
.tv-fmt-summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:14px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--white);
}
.tv-fmt-summary .fs-label{color:var(--mute);letter-spacing:.1em;font-size:11px}

/* ---------- Method note ---------- */
.tv-method{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);color:var(--mute);font-size:13px;line-height:1.65}
.tv-method strong{color:var(--prose);font-weight:600}
.tv-method code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--mute)}

@media (max-width:640px){
  .tv-verdict{padding:18px 16px 20px}
  .tv-change-row{grid-template-columns:46px 1fr auto;gap:7px}
  .trade-side{padding:14px 14px}
}

/* Provenance line — which ranking board the valuation came from. */
.tv-valued-from{
  margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);
  font-family:'Inter',sans-serif;font-size:12px;line-height:1.55;color:var(--mute-dim);
}
.tv-valued-from strong{color:var(--mute);font-weight:600}