/* ══════════════════════════════════════════════════════════════════════════
   NFL PLAYER PROPS. The rail, the card and the chart.

   IT BORROWS THE SITE'S TOKENS RATHER THAN DECLARING A SECOND PALETTE. --bg,
   --brass, --text and the rest come from style.css and flip with the theme
   toggle, so this page follows dark and light without knowing which is on.
   The only new colours are the two the chart cannot borrow: a hit and a miss.
   They are declared for both themes because a green that reads on near-black
   is invisible on cream.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --props-hit: #79d45c;
  --props-hit-lit: #a6ef8b;
  --props-miss: #ff7a4d;
  --props-miss-lit: #ffa383;
  --props-rail: 300px;
}
:root[data-theme="light"] {
  --props-hit: #3f9c28;
  --props-hit-lit: #2f7d1c;
  --props-miss: #d1481c;
  --props-miss-lit: #b33c14;
}

/* THE PAGE HAS NO BANNER. It carried an eyebrow, a large h1 and a lede above the tool, which
   pushed the thing people came for below the fold on a laptop. The h1 still exists, because it
   has to: live-site/tools/gate.sh measures its box and fails a page whose heading has no width
   or height, so this is a real visible heading, just sized like the label it is. */
.pp-titlebar { border-bottom: 1px solid var(--line); padding-block: 12px; }
.pp-title {
  margin: 0; color: var(--brass);
  font: 800 13px/1.2 var(--display), sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.pp-title span { color: var(--muted); font-weight: 600; letter-spacing: .08em; }
.props-noscript, .props-note { color: var(--muted); }
.props-note:empty { display: none; }   /* costs no space until it has something to say */

/* ---------- the tool ---------- */
.props {
  display: grid; grid-template-columns: var(--props-rail) minmax(0, 1fr);
  gap: 0; align-items: start;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: 60vh;
}
.props[hidden] { display: none; }

.pp-rail {
  border-right: 1px solid var(--line); background: var(--bg-lift);
  position: sticky; top: 0; align-self: stretch;
  display: flex; flex-direction: column; max-height: 100vh; min-height: 0;
}
.pp-rail__top { padding: 14px; border-bottom: 1px solid var(--line); flex: none; }
.pp-rail__label {
  display: block; margin-bottom: 7px; color: var(--muted);
  font: 700 10px/1 var(--display), sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.pp-rail__search {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  background: var(--field-bg); border: 1px solid var(--field-line); color: var(--text);
  font: 500 13px/1 var(--body), sans-serif;
}
.pp-rail__search:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pp-rail__scroll { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 24px; }

.pp-daybar {
  position: sticky; top: 0; z-index: 2; padding: 7px 14px;
  background: var(--card-bg); color: var(--muted);
  font: 700 10px/1 var(--display), sans-serif; letter-spacing: .14em; text-transform: uppercase;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pp-fx {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 14px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font: inherit;
}
.pp-fx:hover { background: var(--card-bg); }
.pp-fx:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pp-fx[aria-expanded="true"] { background: var(--card-bg); box-shadow: inset 3px 0 0 var(--brass); }
.pp-fx__chev { color: var(--muted); transition: transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .pp-fx__chev { transition: none; } }
.pp-fx[aria-expanded="true"] .pp-fx__chev { transform: rotate(90deg); color: var(--brass); }
.pp-fx__t { flex: 1; font: 700 13px/1.25 var(--display), sans-serif; }
.pp-fx__time { color: var(--muted); font: 500 11px/1 var(--body), sans-serif; white-space: nowrap; }

.pp-squad { border-bottom: 1px solid var(--line); background: var(--bg); }
.pp-squad__team {
  padding: 8px 14px 5px; color: var(--muted);
  font: 700 10px/1 var(--display), sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.pp-pl {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 5px 14px; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--text); font: inherit;
}
.pp-pl:hover { background: var(--card-bg); }
.pp-pl:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pp-pl[aria-current="true"] { background: var(--card-bg); box-shadow: inset 3px 0 0 var(--brass); }
/* THE FALLBACK, not the default. Statyx cleared their player photos on 2026-09-21 so the rail
   shows a face when the index has one. It misses on a name the depth chart spells differently
   (measured: 43 of 45 resolve), and a rail of broken image frames is worse than initials. */
.pp-pl__mark {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--card-bg); border: 1px solid var(--line);
  color: var(--muted); font: 700 11px/1 var(--display), sans-serif; letter-spacing: .02em;
}

/* THE FACE HAS TO BE ZOOMED, AND THIS IS THE WHOLE FIX.
 *
 * Every Statyx headshot is 512x372 with the player framed from the chest up and a lot of air
 * around the head. Dropped into a 29px circle with plain `object-fit: cover`, the face came out
 * about twelve pixels tall inside a ring of jersey and background: the rail read as a column of
 * brown smudges, and it was reported as the photos being missing. They were not missing. Every
 * one of them loaded with a 200. They were unreadable, which on a page somebody scans is the
 * same thing.
 *
 * So the mark is a clipping circle and the picture inside it is scaled. 1.5 at a 28 percent
 * origin was chosen by rendering four real headshots at 29, 34 and 62 against five candidates
 * and looking: it fills the circle with the face, keeps the top of the head (1.7 cut it off on
 * two of the four), and leaves a sliver of jersey at the bottom for the team colour. The framing
 * is consistent across the feed, so one crop serves all of them.
 *
 * The scale lives on the IMAGE, not the mark. Scaling the mark would scale its border radius
 * too and just draw a bigger circle, clipping nothing. */
.pp-pl__face, .pp-hero__face {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 28%;
  transform: scale(1.5); transform-origin: 50% 28%;
}
.pp-hero__face { background: var(--bg-lift); }

.pp-pl__n {
  flex: 1; min-width: 0; font: 600 12.5px/1.3 var(--body), sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-pl__no { color: var(--muted); font-size: 10px; }
.pp-pl__inj { color: var(--props-miss); font-size: 10px; font-weight: 700; }
.pp-pl__p {
  flex: none; padding: 3px 5px; border-radius: 5px;
  border: 1px solid var(--brass-deep); color: var(--brass);
  font: 700 9.5px/1 var(--display), sans-serif; letter-spacing: .06em;
}

/* ---------- the stage ---------- */
.props__stage { padding: 18px; min-width: 0; }
.pp-card {
  background: var(--card-bg); border: 1px solid var(--card-line);
  border-radius: 16px; overflow: hidden;
}
.pp-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pp-hero__mark {
  flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  overflow: hidden;
  background: var(--bg-lift); border: 2px solid var(--brass-deep);
  color: var(--brass); font: 800 20px/1 var(--display), sans-serif;
}
.pp-hero__name { margin: 0; font: 800 clamp(20px, 3vw, 26px)/1.05 var(--display), sans-serif; }
.pp-hero__sub { margin: 5px 0 0; color: var(--muted); font: 500 12px/1 var(--body), sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.pp-hero__spacer { flex: 1 1 60px; }
.pp-hero__pct { text-align: right; font: 800 clamp(28px, 5vw, 40px)/1 var(--display), sans-serif; }
.pp-hero__pctsub { margin-top: 5px; text-align: right; color: var(--muted); font: 600 11px/1 var(--body), sans-serif; letter-spacing: .08em; text-transform: uppercase; }

.pp-tabs { display: flex; gap: 4px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.pp-tab {
  padding: 9px 15px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: none; color: var(--muted); font: 600 13px/1 var(--body), sans-serif;
}
.pp-tab:hover { background: var(--bg-lift); color: var(--text); }
.pp-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pp-tab[aria-selected="true"] { background: var(--btn-gilt-bg); color: var(--btn-gilt-text); font-weight: 700; }

.pp-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.pp-flabel { color: var(--muted); font: 700 10px/1 var(--display), sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.pp-chips { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--bg-lift); border: 1px solid var(--line); }
.pp-chip { padding: 6px 11px; border: 0; border-radius: 7px; cursor: pointer; background: none; color: var(--muted); font: 600 12px/1 var(--body), sans-serif; }
.pp-chip:hover { color: var(--text); }
.pp-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pp-chip[aria-pressed="true"] { background: var(--brass-deep); color: var(--brass-bright); font-weight: 700; }
.pp-reset { margin-left: auto; padding: 7px 11px; border-radius: 8px; cursor: pointer; background: none; border: 1px solid var(--line); color: var(--muted); font: 600 11px/1 var(--body), sans-serif; }
.pp-reset:hover { color: var(--text); border-color: var(--line-soft); }

.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); border-bottom: 1px solid var(--line); }
.pp-stat { padding: 12px 16px; border-right: 1px solid var(--line); }
.pp-stat__k { color: var(--muted); font: 600 10px/1 var(--display), sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.pp-stat__v { margin-top: 3px; font: 800 22px/1.15 var(--display), sans-serif; }
.pp-stat__n { color: var(--muted); font: 500 11px/1 var(--body), sans-serif; }

.pp-plot { position: relative; padding-top: 6px; }
.pp-plot svg { display: block; width: 100%; height: auto; touch-action: none; }
.pp-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 20px 16px; color: var(--muted); font: 500 12px/1 var(--body), sans-serif; }
.pp-key { display: flex; align-items: center; gap: 6px; }
.pp-sw { width: 12px; height: 12px; border-radius: 3px; }

.pp-tip {
  position: absolute; z-index: 5; min-width: 172px; padding: 10px 13px;
  pointer-events: none; opacity: 0; transition: opacity .1s ease;
  background: var(--bg-lift); border: 1px solid var(--line-soft); border-radius: 11px;
  box-shadow: var(--card-shadow);
}
@media (prefers-reduced-motion: reduce) { .pp-tip { transition: none; } }
.pp-tip h4 { margin: 0 0 3px; font: 700 13px/1 var(--display), sans-serif; }
.pp-tip .pp-res { margin-bottom: 7px; color: var(--muted); font: 500 11px/1 var(--body), sans-serif; }
.pp-tip dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; font-size: 12px; }
.pp-tip dt { color: var(--muted); }
.pp-tip dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.pp-empty { max-width: 52ch; margin: 0 auto; padding: 56px 24px; text-align: center; color: var(--muted); }
.pp-empty h2 { margin: 0 0 8px; color: var(--text); font: 800 19px/1.3 var(--display), sans-serif; }

/* The opener and the close button exist only on a phone. */
.pp-open, .pp-close { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   PHONE. Not the desktop layout squeezed.

   The rail used to be a 44vh drawer pinned above the chart, which spent half a
   small screen on a list the reader uses once and pushed the thing they came
   for off the bottom. It is a sheet now: a bar names who is showing, tapping it
   covers the screen with the picker, and picking a player closes it.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .props { grid-template-columns: 1fr; border-top: 0; }
  .props__stage { padding: 0; }
  .pp-card { border-radius: 0; border-left: 0; border-right: 0; }

  .pp-open {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 16px; cursor: pointer; text-align: left;
    background: var(--bg-lift); border: 0; border-bottom: 1px solid var(--line);
    color: var(--text); font: inherit;
  }
  .pp-open__who {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 700 14px/1.2 var(--display), sans-serif;
  }
  .pp-open__cue {
    flex: none; padding: 6px 12px; border-radius: 999px;
    background: var(--btn-gilt-bg); color: var(--btn-gilt-text);
    font: 700 11px/1 var(--display), sans-serif; letter-spacing: .1em; text-transform: uppercase;
  }

  .pp-rail {
    position: fixed; inset: 0; z-index: 60; max-height: none;
    border-right: 0; background: var(--bg);
    transform: translateY(100%); transition: transform .18s ease;
  }
  .pp-rail[data-open] { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .pp-rail { transition: none; } }
  .pp-rail__scroll { padding-bottom: 76px; }

  .pp-close {
    display: block; position: absolute; left: 16px; right: 16px; bottom: 14px;
    padding: 13px; border-radius: 11px; cursor: pointer;
    background: var(--btn-gilt-bg); border: 0; color: var(--btn-gilt-text);
    font: 700 13px/1 var(--display), sans-serif; letter-spacing: .08em; text-transform: uppercase;
  }

  /* Three tiles, one row. props.js drops best and worst on a phone, because a reader can see
     the highest and lowest bar without being told. */
  .pp-stats { grid-template-columns: repeat(3, 1fr); }
  .pp-stat { padding: 11px 12px; }
  .pp-stat__v { font-size: 20px; }
  .pp-stat:last-child { border-right: 0; }

  /* EACH FILTER GETS ITS OWN ROW. Wrapped inline they interleave: a label ends a row and the
     chips it belongs to start the next one, so "WHERE" sat above All/Home/Away and read as a
     heading for the wrong control. */
  .pp-filters { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; }
  .pp-filters .pp-chips { justify-self: start; }
  .pp-reset { grid-column: 1 / -1; justify-self: start; margin-left: 0; }

  .pp-hero { gap: 12px; padding: 14px 16px; }
  .pp-hero__mark { width: 52px; height: 52px; }
  .pp-hero__spacer { flex-basis: 100%; height: 0; }
  .pp-hero__pct, .pp-hero__pctsub { text-align: left; }

  .pp-tabs, .pp-filters { padding-inline: 12px; }
  .pp-filters { gap: 6px; row-gap: 8px; }
  .pp-reset { margin-left: 0; }
  .pp-legend { padding: 10px 16px 16px; gap: 12px; }
}


/* ---------- the account gate ----------
   Shown instead of the tool when the slate answers 401. Sized to sit where the card would, so
   the page does not collapse to a header and a footer with nothing between them. */
.pp-gate { padding: 28px 0 56px; }
.pp-gatecard {
  max-width: 620px; padding: 28px 26px;
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 16px;
}
.pp-gatecard__h { margin: 0; font: 800 clamp(20px, 3vw, 26px)/1.1 var(--display), sans-serif; }
.pp-gatecard__p { margin: 12px 0 0; color: var(--muted); font: 400 15px/1.55 var(--body), sans-serif; }
.pp-gatecard__do { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 900px) {
  .pp-gate { padding: 18px 0 40px; }
  .pp-gatecard { padding: 22px 18px; }
  .pp-gatecard__do .btn { flex: 1 1 auto; text-align: center; }
}