/* ============================================================
   Previously — Universal News Feed component (#244)
   One token-driven stylesheet for every chronological headline
   feed. Light editorial (D-B) is the primary home; a host that is
   already a scoped dark exception opts in with [data-pvfeed="dark"]
   on the feed container — tokens flip, layout never changes.
   Tokens: --pvf-bg/ink/dim/rule/meta use host vars when present.
   ============================================================ */
.pvf{
  /* Host tokens win when the host defines them (homepage --hp-* flip
     with its theme; other hosts fall back to the D-B light values). */
  --pvf-ink: var(--hp-ink, var(--ink, #152740));
  --pvf-dim: var(--hp-ink-dim, var(--ink-dim, rgba(21,39,64,.62)));
  --pvf-faint: var(--hp-ink-faint, var(--ink-faint, rgba(21,39,64,.45)));
  --pvf-rule: var(--hp-rule-idle, var(--rule, rgba(21,39,64,.14)));
  --pvf-gold: #F2BC68;
  --pvf-gold-dim: #9A7414; /* muted gold for meta text on light (contrast-safe) */
  --pvf-live: #D43A2F;     /* functional LIVE only, never brand */
  font-family: Inter, system-ui, sans-serif;
  color: var(--pvf-ink);
}
/* Homepage d3 theme is a dark surface (verified: body rgb(12,18,27),
   --hp-ink #C7D0DA) — meta gold goes full-strength there. */
html[data-theme="d3"] .pvf{ --pvf-gold-dim: #F2BC68; }
.pvf[data-pvfeed="dark"]{
  --pvf-ink: #F5EFE3;
  --pvf-dim: rgba(245,239,227,.66);
  --pvf-faint: rgba(245,239,227,.45);
  --pvf-rule: rgba(245,239,227,.16);
  --pvf-gold-dim: var(--pvf-gold);
}

/* ---- Section header: THE LATEST ---- */
.pvf-head{display:flex;align-items:baseline;gap:14px;padding:0 0 10px;border-bottom:2px solid var(--pvf-gold);margin-bottom:4px}
.pvf-head h2{font-family:Anton, "Archivo", sans-serif;font-size:22px;letter-spacing:.04em;text-transform:uppercase;margin:0;color:var(--pvf-ink)}
.pvf-head .pvf-filters{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.pvf-head .pvf-filters button{appearance:none;border:0;background:none;font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--pvf-dim);padding:6px 8px;cursor:pointer;border-bottom:2px solid transparent}
.pvf-head .pvf-filters button[aria-pressed="true"]{color:var(--pvf-ink);border-bottom-color:var(--pvf-gold)}

/* ---- Shared row anatomy ---- */
.pvf-row{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--pvf-rule);align-items:flex-start}
.pvf-row:last-child{border-bottom:none}
.pvf-row__b{flex:1;min-width:0}
.pvf-meta{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pvf-gold-dim, #9A7414);margin-bottom:4px;line-height:1.3}
.pvf-meta>span{white-space:nowrap}
.pvf-meta .pvf-time{color:var(--pvf-gold-dim, #9A7414);font-weight:600;white-space:nowrap}
.pvf-badge{font-size:9.5px;font-weight:800;letter-spacing:.1em;padding:2px 5px;border-radius:3px;line-height:1;white-space:nowrap}
.pvf-badge--new{background:var(--pvf-gold, #F2BC68);color:#152740}
.pvf-badge--upd{border:1px solid var(--pvf-gold-dim, #9A7414);color:var(--pvf-gold-dim, #9A7414)}
.pvf-badge--live{background:var(--pvf-live);color:#fff}
.pvf-badge--live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:4px;vertical-align:1px}
.pvf-row h3,.pvf-row h4{margin:0;font-size:16.5px;line-height:1.32;font-weight:600}
.pvf-row h3 a,.pvf-row h4 a{color:var(--pvf-ink);text-decoration:none}
.pvf-row h3 a:hover,.pvf-row h4 a:hover{text-decoration:underline}
.pvf-row__dek{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--pvf-dim)}
.pvf-row__thumb{flex:none;width:104px;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--pvf-rule)}
.pvf-row__thumb-link{flex:none;line-height:0}

/* Variant C — Newswire: text-only, tightest */
.pvf-row--wire{padding:10px 0;gap:0}
.pvf-row--wire h4{font-size:15.5px}
.pvf-row--wire .pvf-meta{margin-bottom:3px}

/* Variant A — Featured */
.pvf-feat{padding:0 0 14px;border-bottom:1px solid var(--pvf-rule)}
.pvf-feat__art{display:block;line-height:0}
.pvf-feat__art img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.pvf-feat h3{font-size:21px;line-height:1.25;margin:10px 0 0;font-weight:700}
.pvf-feat h3 a{color:var(--pvf-ink);text-decoration:none}
.pvf-feat__dek{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--pvf-dim)}
.pvf-feat .pvf-meta{margin:10px 0 0}

/* ---- "New headlines available" pill (client-rendered feeds only) ---- */
/* Restyled 2026-10-21 (Pill Guard CRIT, desk flag 03:56 PT): the
   original rule used a fully-rounded radius — a pill, which violates
   the standing NO-PILLS law. The freshness affordance is now a flat
   full-width module bar in the feed's own language: hairline gold
   border, 4px radius (badge family), no shadow, no floating chip.
   Class name kept (JS hook in pv-feed.js watchNew); shape is not a pill. */
.pvf-newpill{position:sticky;top:8px;z-index:5;display:none;margin:0 0 10px;width:100%;text-align:left;appearance:none;cursor:pointer;background:#152740;color:#FAF6EE;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.05em;padding:11px 12px;border:1px solid var(--pvf-gold, #F2BC68);border-radius:4px}
.pvf-newpill.is-on{display:block}
.pvf-newpill b{color:var(--pvf-gold);font-weight:800}

/* Host-compat: the homepage's legacy row rule reserves 106px of left
   padding for its old left-thumb layout. PVF rows carry the thumb
   in-flow on the right — neutralize the reservation. */
#hpLatestList .hp-latest-rows li.pvf-row{padding:13px 0}

/* ---- Safe-area: never hide the tail behind the fixed bottom nav ---- */
.pvf{padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}

/* ---- Desktop: wider column, cards NOT enlarged ---- */
@media (min-width:900px){
  .pvf-row{gap:16px;padding:14px 0}
  .pvf-row__thumb{width:112px}
  .pvf-feat h3{font-size:24px}
}
@media (prefers-reduced-motion: reduce){
  .pvf *{animation:none !important;transition:none !important}
}