/* mod/wire.css — news wire + injury report
   Everything is scoped under .wire-news / .wire-inj, which mod/wire.js stamps
   onto its two host elements. Tokens come from styles.css :root. */

.wire-news,
.wire-inj{
  --wire-amber:#f2a63c;
  --wire-shot:44px;
  position:relative;
  min-width:0;
  /* These two panels sit in .wiregrid (end of this file), which is two columns
     above 900px — so panel width and viewport width diverge hard. Everything
     that reflows below queries the panel, not the screen. */
  container-type:inline-size;
  container-name:wire;
}

/* ------------------------------------------------------------- shared bar */

.wire-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;
}
.wire-tag{
  display:inline-flex; align-items:center; gap:var(--sp-2); padding:4px 11px; border-radius:99px;
  background:var(--panel2); border:1px solid var(--line2);
  font-size:10.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.wire-tag i{
  width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--turf);
  box-shadow:0 0 8px rgba(49,173,109,.8); font-style:normal;
}
.wire-stamp{ font-size:11.5px; color:var(--faint); margin-left:auto; white-space:nowrap }
.wire-rf,
.wire-link{
  font-size:11.5px; color:var(--faint); text-decoration:underline; flex-shrink:0;
  text-underline-offset:2px;
}
.wire-rf:hover,
.wire-link:hover{ color:var(--chalk) }

/* -------------------------------------------------------------- news lead */

.wire-lead{
  display:grid; grid-template-columns:minmax(0,1fr);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .16s ease, transform .16s ease;
}
.wire-lead:hover{ border-color:var(--line2); transform:translateY(-2px) }

.wire-fig,
.wire-thumb{
  position:relative; overflow:hidden; background:var(--raise); min-width:0;
}
/* Chalk-stripe plate painted underneath the art. When ESPN 404s a photo the
   <img> is removed and this is what shows — never a broken-image glyph. */
.wire-fig::before,
.wire-thumb::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 15px,rgba(255,255,255,.045) 15px 16px),
    linear-gradient(165deg,var(--panel2),var(--raise));
}
.wire-fig{ aspect-ratio:16/9 }
.wire-fig::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(7,10,8,.55));
}
.wire-fig img,
.wire-thumb img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:cover; display:block;
}

.wire-lead-b{ position:relative; padding:17px 18px 18px; min-width:0 }
/* the televised first-down line */
.wire-lead-b::before{
  content:""; position:absolute; left:18px; top:0; width:58px; height:3px;
  background:var(--yellow); border-radius:0 0 2px 2px; box-shadow:0 0 16px rgba(255,210,30,.55);
}
.wire-kicker{
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:9px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wire-lead-h{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  letter-spacing:.012em; line-height:.98; font-size:clamp(21px,4.4vw,30px);
}
.wire-dek{
  color:var(--muted); font-size:13.5px; line-height:1.5; margin-top:9px;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.wire-dek.one{ -webkit-line-clamp:1; line-clamp:1; margin-top:5px; font-size:12.5px }

.wire-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px;
  font-size:11.5px; color:var(--faint); min-width:0;
}
.wire-meta .by{
  color:var(--muted); font-weight:650; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wire-meta .ago{ white-space:nowrap }
.wire-news .sep,
.wire-inj .sep{
  width:3px; height:3px; flex:0 0 3px; border-radius:50%; background:var(--faint); display:inline-block;
}

/* -------------------------------------------------------------- news rail */

/* auto-fill off the panel width, so a card never gets squeezed to a 104px
   thumbnail plus ~50px of headline. Also the graceful fallback wherever
   @container is unsupported. */
.wire-rail{
  display:grid; gap:8px; margin-top:9px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.wire-item{
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 13px 9px 9px; text-decoration:none; color:inherit;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.wire-item:hover{ border-color:var(--line2); background:var(--panel2); transform:translateY(-1px) }
.wire-item.nothumb{ grid-template-columns:minmax(0,1fr); padding:11px 14px }
.wire-item-b{ min-width:0 }
.wire-thumb{ aspect-ratio:3/2; border-radius:7px }
.wire-h{
  font-size:13.5px; font-weight:650; line-height:1.34;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}

/* ------------------------------------------------------------ injury tools */

.wire-tools{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:11px; min-width:0;
}
.wire-chips{ display:flex; gap:6px; flex-wrap:wrap; min-width:0 }
.wire-chip{
  font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:6px 13px; border-radius:99px;
  background:var(--panel); border:1px solid var(--line2); color:var(--muted);
  white-space:nowrap; cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.wire-chip:hover{ color:var(--chalk); border-color:var(--chalk) }
.wire-chip[aria-pressed="true"]{ background:var(--yellow); color:#141a15; border-color:transparent }

.wire-selwrap{ display:block; min-width:0; margin-left:auto }
.wire-sel{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color:var(--bg2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a9d92' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  border:1px solid var(--line2); border-radius:99px; padding:7px 32px 7px 15px;
  color:var(--chalk); font-family:var(--body); font-size:12.5px; font-weight:650;
  letter-spacing:.03em; max-width:100%; min-width:0; cursor:pointer;
}
.wire-sel:focus{ outline:none; border-color:var(--yellow) }
.wire-sel option{ background:var(--panel); color:var(--chalk) }

.wire-posrow{ margin-bottom:10px }

.wire-count{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); margin:0 0 10px 2px;
}
.wire-count b{ color:var(--chalk); font-weight:800; letter-spacing:.06em }

/* ------------------------------------------------------------ injury rows */

.wire-list{ display:grid; gap:var(--sp-2); list-style:none; margin:0; padding:0 }
.wire-p{
  display:grid; grid-template-columns:var(--wire-shot) minmax(0,1fr); gap:12px; align-items:start;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px;
}
.wire-p.sev{ box-shadow:inset 3px 0 0 var(--red) }
.wire-p.sev-a{ box-shadow:inset 3px 0 0 var(--wire-amber) }

.wire-shot{
  position:relative; width:var(--wire-shot); height:var(--wire-shot); border-radius:50%;
  overflow:hidden; background:var(--raise); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.wire-ini{
  position:absolute; inset:0; display:grid; place-items:center; font-style:normal;
  font-family:var(--disp); font-size:14px; letter-spacing:.02em; color:var(--faint);
}
.wire-shot img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:top center; display:block; background:var(--raise);
}

.wire-p-b{ min-width:0 }
.wire-p-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0 }
.wire-nm{
  font-size:13.5px; font-weight:680; min-width:0; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* names with an ESPN id render as <button> and open the player card */
button.wire-nm{
  padding:0; text-align:left; cursor:pointer;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:text-decoration-color .15s ease;
}
button.wire-nm:hover,
button.wire-nm:focus-visible{ text-decoration-color:var(--yellow) }
.wire-pos{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap;
}
.wire-pill{
  margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; white-space:nowrap; border:1px solid transparent;
}
.wire-pill.s-out,
.wire-pill.s-ir{ background:rgba(232,84,79,.16); color:var(--red-ink); border-color:rgba(232,84,79,.34) }
.wire-pill.s-dbt{ background:rgba(242,166,60,.14); color:var(--wire-amber); border-color:rgba(242,166,60,.34) }
.wire-pill.s-q{ background:var(--raise); color:var(--muted); border-color:var(--line2) }
.wire-pill.s-ok{ background:rgba(49,173,109,.16); color:var(--turf-ink); border-color:rgba(49,173,109,.32) }

.wire-note{
  font-size:12.5px; line-height:1.5; color:var(--muted); margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.wire-ret{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  font-size:11.5px; color:var(--faint); margin-top:5px;
}
.wire-ret b{ color:var(--muted); font-weight:700 }

.wire-more{
  display:block; width:100%; margin-top:9px; padding:11px 16px; border-radius:var(--r-sm);
  background:var(--panel); border:1px solid var(--line2); color:var(--muted);
  font-size:12.5px; font-weight:700; letter-spacing:.05em; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.wire-more:hover{ color:var(--chalk); border-color:var(--chalk) }

/* ------------------------------------------------------------ quiet states */

.wire-empty{
  color:var(--faint); font-size:13px; padding:26px 20px; text-align:center;
  background:var(--panel); border:1px dashed var(--line2); border-radius:var(--r-sm);
}
.wire-fail{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:22px 20px; text-align:center;
}
.wire-fail-t{
  font-family:var(--disp); font-size:17px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted);
}
.wire-fail p{ font-size:13px; color:var(--faint); margin-top:7px; line-height:1.55 }
.wire-fail-d{ font-size:11.5px !important; color:var(--faint); opacity:.72 }
.wire-retry{
  display:inline-flex; align-items:center; margin-top:14px; padding:8px 18px; border-radius:99px;
  background:transparent; border:1px solid var(--line2); color:var(--muted);
  font-size:12.5px; font-weight:700; cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.wire-retry:hover{ color:var(--chalk); border-color:var(--chalk) }

/* -------------------------------------------------------------- skeletons */

.wire-sk{
  display:block;
  background:linear-gradient(90deg,var(--panel2) 25%,var(--raise) 50%,var(--panel2) 75%);
  background-size:200% 100%; animation:wiresweep 1.35s ease-in-out infinite;
}
.wire-sk-l{ height:11px; border-radius:4px }
.wire-sk-l.tall{ height:19px; border-radius:5px }
.wire-sk-p{ width:74px; height:29px; border-radius:99px }
.wire-fig .wire-sk-b,
.wire-thumb .wire-sk-b,
.wire-shot .wire-sk-b{ position:absolute; inset:0; z-index:1; width:100%; height:100% }
.is-sk{ pointer-events:none }
.wire-lead.is-sk,
.wire-item.is-sk,
.wire-p.is-sk{ transform:none; box-shadow:none }
.wire-lead.is-sk .wire-lead-b::before{ display:none }
@keyframes wiresweep{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ------------------------------------------------------------------ focus */

.wire-lead:focus-visible,
.wire-item:focus-visible,
.wire-chip:focus-visible,
.wire-sel:focus-visible,
.wire-more:focus-visible,
.wire-retry:focus-visible,
.wire-rf:focus-visible,
.wire-nm:focus-visible,
.wire-link:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; border-radius:var(--r-sm) }

/* ------------------------------------------------------------ wide layout */

/* Split the lead art and text only once the PANEL can carry two columns. On a
   viewport query this fired at 760px and then survived .wiregrid halving the
   panel at 901px, leaving a display headline in a ~215px well. */
@container wire (min-width:620px){
  .wire-lead{ grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:stretch }
  .wire-lead .wire-fig{ aspect-ratio:auto; min-height:216px; height:100% }
  .wire-lead .wire-fig::after{ background:linear-gradient(90deg,transparent 58%,rgba(7,10,8,.5)) }
  .wire-lead-b{ display:flex; flex-direction:column; justify-content:center; padding:24px 26px }
  .wire-lead-b::before{ left:26px }
  .wire-rail{ gap:var(--sp-2) }
}

/* ----------------------------------------------------------- narrow layout */

@media(max-width:560px){
  /* one swipeable row of status chips beats a three-line wrap at 360px */
  .wire-chips{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px; width:100%;
  }
  .wire-chips::-webkit-scrollbar{ display:none }
  .wire-selwrap{ width:100%; margin-left:0 }
  .wire-sel{ width:100% }
  .wire-item{ grid-template-columns:88px minmax(0,1fr); gap:10px; padding:8px 11px 8px 8px }
  .wire-h{ font-size:13px }
  .wire-lead-b{ padding:15px 15px 16px }
  .wire-lead-b::before{ left:15px; width:48px }
  .wire-p{ padding:10px 11px; gap:10px }
  .wire-note{ font-size:12px }
}

/* --------------------------------------------------------- reduced motion */

@media(prefers-reduced-motion:reduce){
  .wire-sk{ animation:none; background:var(--panel2) }
  .wire-lead,
  .wire-item,
  .wire-chip,
  .wire-more,
  button.wire-nm,
  .wire-retry{ transition:none }
  .wire-lead:hover,
  .wire-item:hover{ transform:none }
}

/* ---- the wire: news + injuries side by side ---- */
.wiregrid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-4,16px);align-items:start}
@media(max-width:900px){ .wiregrid{grid-template-columns:1fr} }

/* Stacked, injuries lead: the morning-of-draft check is the injury report,
   not the headlines. .wiregrid stays a grid at every width, so order applies. */
@media(max-width:900px){ .wire-inj{ order:-1 } }

/* The Wire now leads the page, so it has to stay about one screen tall.
   Unbounded, the 60-row injury list ran to 5,300px and pushed the standings
   seven screens down. The filters and count stay put; only the lists scroll. */
#wire .wire-list,
#wire .wire-rail{
  max-height:min(52vh,520px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
}
#wire .wire-list::-webkit-scrollbar,
#wire .wire-rail::-webkit-scrollbar{ width:7px }
#wire .wire-list::-webkit-scrollbar-thumb,
#wire .wire-rail::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14); border-radius:99px;
}
#wire .wire-list::-webkit-scrollbar-thumb:hover,
#wire .wire-rail::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.26) }
#wire .wire-list::-webkit-scrollbar-track,
#wire .wire-rail::-webkit-scrollbar-track{ background:transparent }

@media(max-width:900px){
  /* stacked on mobile: shorter still, so neither panel eats the whole screen */
  #wire .wire-list, #wire .wire-rail{ max-height:min(46vh,420px) }
}