/* BuyerVerdict (scripts/lib/components/buyer-verdict.mjs): who buys, who waits, who stays free
   and what a Zygor Elite member checks, inside the TL;DR of /restedxp/worth-it and
   /zygor-vs-restedxp, above the fact rows. Hairlines set it apart from the facts; each row
   runs in like a TL;DR fact row (components/facts.css): the reader's situation in the UI face,
   the decision in Inter 600, the evidence icon at the top right over a float that keeps the
   first line clear for it. Two columns once the block is 44rem wide (a container query, so
   it works in a narrow grid column too). The /restedxp two-line form is .pt-verdict in
   partner.css. */

.wfg-verdict { container-type: inline-size; min-width: 0; margin: var(--s-2) 0; padding: 6px 0 var(--s-2); border-block: 1px solid var(--hairline); }
.wfg-verdict-title { margin: 0 0 2px; font: 400 .76rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wfg-verdict-list { margin: 0; padding: 0; list-style: none; }
.wfg-verdict-row { position: relative; padding: 3px 0; font: 400 .9rem/1.38 var(--font-body); color: var(--ink); }
.wfg-verdict-row::before { content: ""; float: right; width: 1.5rem; height: 1em; }
.wfg-verdict-ask { margin-right: .3em; font: 400 .88rem/1.38 var(--font-ui); letter-spacing: .01em; color: var(--ink-2); }
.wfg-verdict-row b { font-weight: 600; color: var(--ink); }
.wfg-verdict-row a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wfg-verdict-row a:hover { color: var(--ink); }
.wfg-verdict-tier { position: absolute; top: calc(3px + .5lh - .475rem); right: 0; }
.wfg-verdict-note { margin: 4px 0 0; font: 400 .78rem/1.4 var(--font-ui); color: var(--ink-3); }

@container (min-width: 44rem) {
  .wfg-verdict-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

@media (max-width: 40rem) {
  .wfg-verdict-row { font-size: .86rem; }
  .wfg-verdict-ask { font-size: .84rem; }
}