/* nfl-search-defense.css — the defence panel under the Search player card.
 *
 * DELIBERATELY SMALL. The Defensive Rankings page has no stylesheet of its
 * own: its whole sheet is a JS string appended as <style id="nfl-defrank-styles">
 * by NFLDefenseView.injectStyles(), and 220 of its 227 selectors are bare
 * .dr-* — global, and already the rules the panel's rows render against.
 * Duplicating them here would give the app two copies to keep in step, which
 * is the failure the page's own header records from last time. So this file
 * carries only the three things that sheet cannot supply:
 *
 *   1. THE TOKENS. They are id-scoped to #defensive-rankings-container there
 *      (:126-130 and :352-356). An undeclared custom property is invalid at
 *      computed-value time, so `border: 1px solid var(--dr-line)` yields NO
 *      border and `color: var(--dr-ink)` falls back to the inherited body
 *      colour — every edge on the panel silently vanishes.
 *   2. THE GUTTER. The page's phone gutter is baked into .dr-mlist / .dr-msort
 *      / .dr-munit as 34px of padding. The Search screen already pads this
 *      host (core/search.css: .pb-search-panelhost { padding: 0 var(--pbs-gut) }),
 *      so those 34s would double it.
 *   3. THE INK. The page's cards are #100C1C on rgba(255,255,255,.07); the card
 *      directly above this panel is #0B0C0C on #171A1A (nfl-game-detail.css
 *      --ngd-ink-050 / --ngd-line-soft). Two stacked panels in different inks
 *      read as two apps.
 *
 * SPECIFICITY IS LOAD-BEARING. injectStyles() appends to <head> AFTER this
 * link, so an equal-weight rule here would lose. Every override is written
 * #nfl-search-defense .dr-x (1-1-0) against the sheet's .dr-x (0-1-0).
 *
 * PHONE ONLY, and that is the sheet's job too: .dr-mlist / .dr-mband /
 * .dr-munit are display:none in its base rules and revealed only inside
 * @media(max-width:1000px), so a desktop mount renders nothing. searchCore
 * never mounts the view above 1000px in the first place.
 *
 * Sizes are authored px on the 980 canvas (physical x 2.513); tap targets
 * >= 110.
 */

/* ── host ─────────────────────────────────────────────────────────────────
   The page's tokens, with two changes.

   --dr-accent / --dr-accent-soft: the page's phone block sets these to the
   violet #a78bfa, and says why — it is the research-hub card the reader
   tapped to get there (nflDefensiveRankings.js:353-355). In Search that card
   does not exist, and a violet open-row border under a teal card would be a
   third hue system on one screen. Teal is the app accent, and it follows the
   user's palette the way the card above does.

   --dr-line / --dr-soft: pointed at the card's own #1F2323 / #171A1A rather
   than the page's translucent whites, for the same reason.

   The mint / amber / rose RANKING ramp is untouched. It is the meaning. */
#nfl-search-defense {
  --dr-line: #1F2323;
  --dr-soft: #171A1A;
  --dr-ink: #EAF7F4;
  --dr-ink2: rgba(203, 234, 228, .62);
  --dr-ink3: rgba(203, 234, 228, .38);
  --dr-teal: rgb(var(--theme-accent-rgb, 0, 211, 189));
  --dr-mint: #2DE0BA;
  --dr-amber: #FFD36A;
  --dr-rose: #FF6577;
  --dr-num: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dr-accent: rgb(var(--theme-accent-rgb, 0, 211, 189));
  --dr-accent-soft: rgba(var(--theme-accent-rgb, 0, 211, 189), .22);
  --dr-pin: rgba(var(--theme-accent-rgb, 0, 211, 189), .40);

  display: block;
  padding-top: 8px;
  color: var(--dr-ink);
}
/* No box-sizing reset here: search.css :94 already gives every node under
   .pb-search border-box, and this host is inside it (searchCore hostsHtml).
   The injected sheet's own reset is id-scoped to the page, and none of its
   .dr-* rules set content-box, so there is nothing to out-rank. */

/* ── the gutter the host already owns ─────────────────────────────────── */

/* The rail still bleeds to the screen edge — the right-edge mask in the
   injected sheet is what says "this row scrolls", and it has to land on the
   edge, not 35px short of it. */
#nfl-search-defense .dr-msort {
  padding: 18px var(--pbs-gut, 35px) 22px;
  margin: 0 calc(-1 * var(--pbs-gut, 35px));
}
#nfl-search-defense .dr-mlist { padding: 0; }
/* The caption over the row, centred and in ink, not muted (founder
   2026-09-18): over one row it is the row's title, not a column's unit. */
#nfl-search-defense .dr-munit {
  padding: 0 0 20px;
  text-align: center;
  color: #F2F5F4;
}
#nfl-search-defense .dr-msg { padding: 60px 0; }

/* ── the ink of the card above ────────────────────────────────────────── */

#nfl-search-defense .dr-mcard {
  background: #0B0C0C;
  border-color: #171A1A;
}
/* The opponent's row is the ONLY row (founder 2026-09-17: no league list
   under a player). It arrives collapsed and opens on a tap (founder
   2026-09-18), and .dr-mcard.open (0-2-0, declared later in the injected
   sheet) would beat a bare .pbdef-pin .dr-mcard — so both states are written
   at 1-2-0 here and the row never changes colour for being open: the page
   tints the open row and its panel teal (.dr-mrow.open, .dr-mexp at
   rgba(0,211,189,.05)); here the card stays its own ink in both states. */
#nfl-search-defense .pbdef-pin .dr-mcard,
#nfl-search-defense .pbdef-pin .dr-mcard.open { border-color: var(--dr-pin); }
#nfl-search-defense .dr-mrow.open,
#nfl-search-defense .dr-mexp { background: transparent; }

/* ── panel chrome ─────────────────────────────────────────────────────────
   Sized from the game page's own context panel so the card and the panel read
   as one screen: nfl-game-detail.css:2384-2392 — .ngd-panel h3 is 33px and
   .ngd-sub 26px on --ngd-fg-mute. */
/* Centred, with air above it (founder 2026-09-18): the card ends and the
   panel begins, and the title should read as a heading, not a caption. */
#nfl-search-defense .pbdef-hd { margin: 44px 0 26px; text-align: center; }
#nfl-search-defense .pbdef-t {
  margin: 0;
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #F2F5F4;
}
#nfl-search-defense .pbdef-s {
  margin: 8px 0 0;
  font-size: 26px;
  line-height: 1.45;
  color: #59615F;
}
#nfl-search-defense .pbdef-note {
  margin: 26px 0 0;
  font-size: 26px;
  line-height: 1.5;
  color: #59615F;
}

/* ── loading ──────────────────────────────────────────────────────────────
   The page's blur-to-sharp transition, re-scoped: its own rule is
   #defensive-rankings-container > *:not(.dr-topbar), one of the six id-scoped
   selectors in the injected sheet. The skeleton SHAPES (.dr-skel-chip,
   .dr-skel-card, the pulse keyframes) are global there and are not repeated. */
#nfl-search-defense > * { transition: filter .28s ease, opacity .28s ease; }
#nfl-search-defense.is-loading > * {
  filter: blur(7px);
  opacity: .5;
  pointer-events: none;
}
/* The one height this file states, and the reason is timing: the skeleton's
   own shapes (.dr-skel-chip 220x110, .dr-skel-card 128) live in the injected
   sheet, which arrives with the view a microtask later — or, on a cold
   /nfl/search, a module fetch later. Until then the ghosts are zero-height
   divs and the panel would pop into existence under a reader already
   scrolling the card. 5 chips (110 + 40 of rail padding) + head (120) +
   caption (48) + 1 card (128) + note (26 + 2 x 39) = 550 authored; 480 is the
   conservative floor, and the rendered panel (the row arrives expanded) is
   always taller, so nothing shrinks when .is-loading comes off. */
#nfl-search-defense.is-loading { min-height: 480px; }

/* ── the one media query ──────────────────────────────────────────────────
   @media(min-width:1001px) is where the injected sheet hides .dr-mlist,
   .dr-mband and .dr-munit — which would leave this panel's own chrome (the
   title and the note) floating over nothing. searchCore never
   mounts the view above 1000px and tears it down when a desktop window is
   dragged past it; this is what makes that structural rather than a promise. */
@media (min-width: 1001px) {
  #nfl-search-defense { display: none; }
}