/* GENERATED by port/extract-assets.py from news.html — do not hand-edit. */

/* — news.html <style> — */
.crumb{display:inline-block;font-size:13px;font-weight:700;color:var(--ink-soft);margin:4px 0 14px}
.crumb:hover{color:var(--ink)}
.reveal{animation:lbpReveal .5s cubic-bezier(.22,.6,.36,1) both;animation-delay:var(--d,0ms)}
@keyframes lbpReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html[data-motion="off"] .reveal{animation:none!important}
@media (prefers-reduced-motion:reduce){.reveal{animation:none!important}}
/* #83 — cap the entrance stagger so a long deck never leaves its tail at ~0-30%
   opacity (which read as a fade-to-transparent overlay / disabled rows). */
.reveal{animation-delay:min(var(--d,0ms),240ms)}

/* ── category accent: one --cc var drives chip · card strip · hover · ticker dot.
   PALETTE: the newsroom used to mint a hue per category (green Sports, blue
   Regulation, amber Crypto, purple Slots, petrol-teal Industry, red RG) on top of
   the brand orange — six extra colours carrying no meaning, and several of them
   failed contrast as a dark chip on navy. Category is taxonomy, not sentiment, so
   every category now resolves to the brand accent; the label text is what
   distinguishes them. Responsible-gambling keeps the one house red because it is
   genuinely a warning. --cc is accent-theme aware via --orange. ── */
.c-all,.c-ind,.c-bet,.c-spo,.c-reg,.c-cry,.c-slo,.c-pay{--cc:var(--orange)}
.c-rg{--cc:var(--sem-neg)}
/* #82 — the chip was `color:--cc` on a 15% wash of itself, i.e. dark-green/blue/teal
   ink on navy in dark mode. --orange-tint / --sem-neg-tint are theme-aware and pair
   with the theme-aware ink, so both modes clear contrast. (No color-mix — the XF
   LESS compiler dies on it.) */
.nc-cat{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:6px;color:var(--on-tint);background:var(--orange-tint);white-space:nowrap}
.c-rg .nc-cat,.nc-cat.c-rg{background:var(--sem-neg-tint)}

/* ── masthead ── */
.news-hero{margin-bottom:16px}
.news-kick{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.news-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,32px);letter-spacing:-.025em;color:var(--ink);margin:7px 0 6px;line-height:1.05}
.news-hero p{font-size:14.5px;color:var(--ink-soft);margin:0;max-width:66ch}

/* ── filter rail (category chips) ── */
.news-bar{margin-bottom:18px}
.nchips{display:flex;flex-wrap:wrap;gap:8px}
.nchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:700;font-size:12.5px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:30px;padding:7px 14px 7px 12px;cursor:pointer;transition:color .14s,border-color .14s,background .14s}
.nchip-dot{width:8px;height:8px;border-radius:50%;background:var(--cc);flex:0 0 auto;transition:transform .14s}
.nchip:hover{color:var(--ink);border-color:var(--cc)}
.nchip:hover .nchip-dot{transform:scale(1.28)}
.nchip.on{color:#fff;background:var(--cc);border-color:var(--cc)}
.nchip.on .nchip-dot{background:rgba(255,255,255,.92)}

/* ── wire front page: lead + rare-category band + recency river + rail ──
   Replaces the uniform 6-col card deck (.news-deck/.sz-*/.ncard). That deck read as a wall
   because the ONLY thing separating its cards was the category chip, and 25 of 27 stories are
   "Sports" — so the chip carried no information on almost every card. This layout leans on the
   variance the data actually has: recency (date groups + position) and story weight (a full
   river row vs a one-line rail entry). Built by renderNews in lbp-pages.js. */
.news-deck{display:block}
.nx-n{opacity:.55;font-variant-numeric:tabular-nums;font-size:.9em}

/* lead */
.nx-lead{display:block;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);margin:20px 0 8px;transition:transform .18s,box-shadow .18s,border-color .15s}
.nx-lead,.nx-lead:hover,.nx-lead:focus,.nx-lead:hover *,.nx-lead:focus *{text-decoration:none}
@media (hover:hover){.nx-lead:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--orange)}}
.nx-lead:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nx-lead-img{display:block;aspect-ratio:820/300;background:var(--blue-deep) center/cover no-repeat}
.nx-lead-body{display:block;padding:16px 20px 20px}
.nx-kick{display:block;font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:7px}
.nx-lead-h{font-family:var(--display);font-weight:700;line-height:1.12;color:var(--ink);font-size:clamp(22px,3.1vw,34px);margin:0 0 9px;max-width:34ch}
.nx-lead-dek{margin:0 0 12px;max-width:62ch;color:var(--ink-soft);line-height:1.55}
.nx-lead-cta{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--orange)}

/* rare-category band */
.nx-rare{margin-top:26px}
.nx-rare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.nx-rare-grid .nx-lead{margin:0}
.nx-rare-grid .nx-lead-h{font-size:clamp(18px,2vw,22px)}
.nx-rare-grid .nx-lead-img{aspect-ratio:820/260}

/* date-group header — the rhythm device that replaces card borders */
.nx-date{display:flex;align-items:center;gap:11px;margin:30px 0 2px;font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--orange)}
.nx-date::after{content:"";flex:1;border-top:1px solid var(--line)}

/* river: rules BETWEEN rows, not boxes around them */
.nx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,290px);gap:30px;align-items:start}
.nx-split--norail{grid-template-columns:1fr}
.nx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:13px 2px;border-top:1px solid var(--line)}
.nx-row,.nx-row:hover,.nx-row:focus,.nx-row:hover *,.nx-row:focus *{text-decoration:none}
.nx-row:first-of-type{border-top:0}
@media (hover:hover){.nx-row:hover .nx-row-h{color:var(--orange)}}
.nx-row:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nx-row-main{min-width:0}
.nx-row-h{display:block;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.24;color:var(--ink);transition:color .14s}
.nx-row-dek{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);max-width:68ch}
.nx-row-ago{font-family:var(--sans);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-faint);white-space:nowrap}

/* rail */
.nx-rail{position:sticky;top:14px}
.nx-brief{list-style:none;margin:0;padding:0;counter-reset:nxb}
.nx-brief li{counter-increment:nxb;border-top:1px solid var(--line)}
.nx-brief li:first-child{border-top:0}
.nx-brief a{display:block;padding:10px 2px 10px 26px;position:relative;font-size:13.5px;line-height:1.4;font-weight:600;color:var(--ink)}
.nx-brief a,.nx-brief a:hover{text-decoration:none}
.nx-brief a::before{content:counter(nxb);position:absolute;left:0;top:10px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--orange-2)}
@media (hover:hover){.nx-brief a:hover{color:var(--orange)}}
.nx-brief-ago{display:block;margin-top:3px;font-family:var(--sans);font-size:10.5px;color:var(--ink-faint)}

/* Rare-category inline chip. Sports never gets one (25/27 = noise). Colour comes from --cc,
   which every c-* class already sets: the per-category palette was deliberately collapsed to a
   single brand orange, so this must NOT reintroduce one colour per category. */
.nx-chip{display:inline-block;vertical-align:2px;margin-right:7px;font-family:var(--sans);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;border-radius:20px;color:#fff;background:var(--cc)}

/* rail overflow toggle + small-result ledger */
.nx-more-wrap{border-top:1px solid var(--line)}
.nx-more{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--orange);background:none;border:1px dashed var(--line);border-radius:20px;padding:7px 15px;cursor:pointer}
@media (hover:hover){.nx-more:hover{border-color:var(--orange)}}
.nx-small{margin-top:20px}
.nx-small-note{font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin:0 0 6px}

html[data-theme="dark"] .nx-more{color:var(--accent-on-dark);}
html[data-theme="dark"] .nx-brief a::before{color:var(--accent-on-dark);}

/* responsive */
@media(max-width:900px){
  .nx-split{grid-template-columns:1fr;gap:8px}
  .nx-rail{position:static;margin-top:18px}
}
@media(max-width:680px){
  .news-hero h1{font-size:24px}
  .nx-lead-body{padding:14px 16px 16px}
}