/* Ask NIL, as a spotlight.

   Sits over whatever page opened it, so every class is prefixed .nst-spot-ask.
   The athlete preview stacks above this one, which is why its z-index leaves
   room.

   Named -spot-ask rather than -spot: the directory's masthead spotlight already
   owns .nst-spot.

   The look is the one the Ask surface uses -- an iridescent wash under opaque
   surfaces, soft geometry separated by shadow rather than rules, and weight
   carrying the hierarchy instead of colour. What it is NOT is the terminal it
   used to be: near-black panel, orange accent, mono kickers and a hard 1px
   border on every edge. The behaviour underneath is untouched; this panel still
   answers locally on every keystroke, and the markup it styles is the same.

   The panel keeps a dark surface rather than going white like the full Ask
   page. It floats over a page that is dark by default, and a white sheet
   punched a hole in it -- the point of a spotlight is that it sits ON the page,
   not that it replaces it. The wash and the soft geometry come across; the
   value does not. */

.nst-spot-ask {
  --sa-radius: 22px;
  --sa-ink: #f2f2f6;
  --sa-ink-soft: #a8a8b8;
  /* 4.9:1 on the panel. The row meta and the footer are set in this, and at
     #75758a they measured 4.0 -- under the floor, and the sport beside a name
     was the first thing to disappear. */
  --sa-ink-faint: #8a8a9e;
  --sa-surface: #16161c;
  --sa-raise: rgba(255, 255, 255, .06);
  --sa-shadow: 0 2px 8px rgba(0, 0, 0, .34), 0 30px 90px rgba(0, 0, 0, .52);

  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: start center;
  /* Was 11vh, which pushed a panel that is already too short further down the
     screen. Enough to read as a layer over the page, not so much that the
     panel pays for it in lost rows. */
  padding: 6vh 4vw 6vh;
}
.nst-spot-ask[hidden] { display: none; }

/* Deeper and softer than the old scrim: the panel below carries its own light,
   so the page has to fall further back for that to read. */
.nst-spot-ask__scrim {
  position: absolute; inset: 0;
  background: rgba(4, 4, 8, .74);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.nst-spot-ask__box {
  position: relative;
  width: min(720px, 100%);
  /* As tall as the screen allows, minus the padding above and below.
     At 76vh the panel stopped 200px short of the bottom of a 900px window and
     cut its own list off -- the results scrolled, but into a box that was
     smaller than the room it had. */
  max-height: calc(100dvh - 12vh);
  display: flex; flex-direction: column;
  background: var(--sa-surface);
  border: 0;
  border-radius: var(--sa-radius);
  overflow: hidden;
  box-shadow: var(--sa-shadow);
  animation: nst-spot-rise 320ms cubic-bezier(.22, 1, .36, 1) both;
}

/* The wash, sitting under the panel's own surface the way it does on the Ask
   page -- never a fill on anything, only light behind it. */
.nst-spot-ask__box::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 44% at 14% 0%, rgba(255, 150, 96, .20), transparent 66%),
    radial-gradient(48% 42% at 88% 6%, rgba(150, 146, 255, .22), transparent 64%),
    radial-gradient(60% 50% at 62% 104%, rgba(110, 226, 196, .14), transparent 70%);
}

/* Everything above the wash. */
.nst-spot-ask__box > * { position: relative; z-index: 1; }

@keyframes nst-spot-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* --- the question ---------------------------------------------------------

   No rule under it. The bar is separated from the scopes by space and by the
   size of the type in it, which is what separation is made of here. */

.nst-spot-ask__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 24px 14px;
  border-bottom: 0;
}
.nst-spot-ask__dot {
  flex-shrink: 0;
  color: var(--sa-ink-faint);
  font-size: 15px; line-height: 1;
}
/* The label stops shouting: no letterspaced orange caps, just a quiet word
   naming the panel. */
.nst-spot-ask__label {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px; font-weight: 560; letter-spacing: -.01em;
  color: var(--sa-ink-faint);
}
/* Never under 16px: Safari zooms the page into any field smaller than that on
   focus, and this overlay is laid out against the unzoomed viewport, so it
   would hang off both edges. */
.nst-spot-ask__input {
  flex: 1; min-width: 0;
  background: none; border: 0; padding: 0;
  color: var(--sa-ink);
  font-family: inherit;
  font-size: 21px; font-weight: 560; letter-spacing: -.02em;
}
.nst-spot-ask__input::placeholder { color: var(--sa-ink-faint); font-weight: 400; }
.nst-spot-ask__input:focus { outline: none; }

.nst-spot-ask__esc {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--sa-ink-faint);
  background: var(--sa-raise);
  border: 0; border-radius: 999px;
  padding: 6px 11px; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.nst-spot-ask__esc:hover { background: rgba(255, 255, 255, .12); color: var(--sa-ink); }

/* --- scope ---------------------------------------------------------------- */

.nst-spot-ask__scopes {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 24px 16px;
  border-bottom: 0;
}
.nst-spot-ask__tabs { display: flex; gap: 7px; flex-wrap: wrap; min-width: 0; }

/* Pills, not boxed mono caps. The on state is a light fill rather than an
   orange block -- weight and value do the work. */
.nst-scope {
  padding: 8px 14px;
  border: 0; border-radius: 999px;
  background: var(--sa-raise);
  color: var(--sa-ink-soft);
  font-family: inherit;
  font-size: 12px; font-weight: 540; letter-spacing: -.005em;
  text-transform: none;
  cursor: pointer; white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.nst-scope:hover { background: rgba(255, 255, 255, .12); color: var(--sa-ink); }
.nst-scope.is-on {
  background: #f4f4f8;
  color: #14141a;
  font-weight: 640;
}
.nst-scope__count { opacity: .5; }
.nst-spot-ask__hint {
  margin-left: auto;
  font-family: inherit;
  font-size: 11px; letter-spacing: 0;
  color: var(--sa-ink-faint); white-space: nowrap;
}

/* --- the answer, while you type -------------------------------------------

   The count is the subject of the panel, so it is set the way the answer is
   set on the Ask page: large, sentence case, weight carrying it, no caret and
   no uppercase kicker announcing it. */

.nst-spot-ask__answer { padding: 2px 24px 18px; border-bottom: 0; }
.nst-spot-ask__answer[hidden] { display: none; }
/* The kicker earned nothing -- "ANSWER" over a sentence that is obviously the
   answer. Kept in the markup, taken out of the picture. */
.nst-spot-ask__kicker { display: none; }
.nst-spot-ask__line {
  display: block;
  font-family: inherit;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 620; letter-spacing: -.025em;
  text-transform: none;
  line-height: 1.16;
  color: var(--sa-ink);
  text-wrap: pretty;
}
/* The caret was pointing at the thing it sat next to. */
.nst-spot-ask__caret { display: none; }
.nst-spot-ask__sub {
  font-size: 13px; color: var(--sa-ink-faint);
  padding-top: 7px;
}

/* --- what matched ---------------------------------------------------------

   Rows, not a table. The selected row is a soft raised block rather than a
   left-edge orange bar. */

.nst-spot-ask__results { overflow-y: auto; flex: 1; min-height: 0; padding: 0 10px 6px; }
.nst-spot-ask__group {
  padding: 12px 14px 7px;
  font-family: inherit;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sa-ink-faint);
}
.nst-hit-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 13px; align-items: center;
  width: 100%; padding: 11px 14px;
  border: 0; border-radius: 15px;
  background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
  transition: background 140ms ease;
}
.nst-hit-row:hover { background: rgba(255, 255, 255, .05); }
/* One row is always the keyboard's, so arrowing never loses its place. */
.nst-hit-row.is-on { background: rgba(255, 255, 255, .10); }
.nst-hit-row__face {
  width: 38px; height: 38px; border-radius: 13px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden; display: grid; place-items: center;
  font-family: inherit; font-size: 14px; font-weight: 620;
  color: var(--sa-ink-faint);
}
.nst-hit-row__face img { width: 100%; height: 100%; object-fit: cover; }
.nst-hit-row__who { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.nst-hit-row__name {
  font-family: inherit;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  text-transform: none; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--sa-ink);
}
/* The selected row is already lit; recolouring its name said the same thing
   twice and was the last of the orange. */
.nst-hit-row.is-on .nst-hit-row__name { color: var(--sa-ink); }
.nst-hit-row__meta {
  font-family: inherit;
  font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--sa-ink-faint); white-space: nowrap;
}
.nst-hit-row__right {
  font-family: inherit;
  font-size: 12px; font-weight: 540; letter-spacing: 0;
  color: var(--sa-ink-soft);
  text-align: right; white-space: nowrap;
}
.nst-hit-row__right--quiet { color: var(--sa-ink-faint); font-weight: 400; }
.nst-spot-ask__none {
  padding: 20px 24px;
  font-family: inherit; font-size: 14px; letter-spacing: 0;
  color: var(--sa-ink-faint);
}

/* --- moments, as pictures -------------------------------------------------

   A question about film answered with a list of 32px thumbnails told the
   reader nothing they could see. Three across, real frames, and the clip
   plays where the mouse rests. */

.nst-spot-ask__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 14px 14px;
}

.nst-spot-tile {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nst-spot-tile__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.nst-spot-tile__frame img,
.nst-spot-tile__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The clip only appears once it is really running, so a slow file shows its
   own still rather than a black hole. */
.nst-spot-tile__clip {
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.nst-spot-tile.is-playing .nst-spot-tile__clip { opacity: 1; }

.nst-spot-tile__play {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding-left: 2px;
  border-radius: 50%;
  background: rgba(8, 8, 14, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 9px;
  transition: opacity 180ms ease;
}

/* It was an invitation to play, and it is playing. */
.nst-spot-tile.is-playing .nst-spot-tile__play { opacity: 0; }

.nst-spot-tile__cap { display: grid; gap: 2px; min-width: 0; }

.nst-spot-tile__title {
  font-size: 13px;
  font-weight: 560;
  line-height: 1.3;
  color: var(--sa-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nst-spot-tile__meta {
  font-size: 11px;
  color: var(--sa-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The keyboard's own row, so arrowing through the grid still reads. */
.nst-spot-tile.is-on .nst-spot-tile__frame {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    0 0 0 2px rgba(120, 170, 255, 0.55);
}

@media (max-width: 700px) {
  .nst-spot-ask__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 14px 12px; }
}

/* --- openers -------------------------------------------------------------- */

.nst-spot-ask__try {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 24px 18px;
  border-top: 0;
}
.nst-spot-ask__try[hidden] { display: none; }
.nst-spot-ask__trylabel {
  font-family: inherit;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sa-ink-faint);
}
.nst-spot-ask__try > span:last-child { display: flex; gap: 7px; flex-wrap: wrap; }
.nst-try {
  padding: 9px 14px;
  border: 0; border-radius: 999px;
  background: var(--sa-raise);
  color: var(--sa-ink-soft);
  font-family: inherit;
  font-size: 13px; font-weight: 500; letter-spacing: -.005em;
  text-transform: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.nst-try:hover { background: rgba(255, 255, 255, .13); color: var(--sa-ink); }

/* The keyboard legend, said once and quietly. */
.nst-spot-ask__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 24px 16px;
  border-top: 0;
  background: none;
  font-family: inherit;
  font-size: 11px; letter-spacing: 0;
  color: var(--sa-ink-faint);
}
.nst-spot-ask__keys { display: flex; gap: 16px; flex-wrap: wrap; }
.nst-spot-ask__scale { text-align: right; white-space: nowrap; }

/* --- the phone build -------------------------------------------------------

   Not the spotlight scaled down: a sheet that owns the screen. A centred panel
   floating on a scrim is a pointer idea -- it needs room around it to read as
   "over" something, and a phone has none to give.

   The zoom this replaces was never a width problem. Tapping the header field
   raised the keyboard, Safari zoomed the page into the input, and this overlay
   -- position:fixed, so laid out against the unzoomed viewport -- ended up half
   off the side of the zoomed screen. maximum-scale=1 on the host pages stops
   that at the source, so the sheet takes focus on open and the keyboard comes
   up on the first tap. */
@media (max-width: 700px) {
  /* No padding and no place-items: the sheet is the viewport.

     Height in dvh rather than inset:0. A fixed element pinned to all four
     sides keeps the full screen when the keyboard opens, so the sheet stayed
     screen-tall behind it: the field sat halfway up with the page showing
     through underneath and a dead band above the results. dvh is the viewport
     the keyboard actually leaves, so the sheet ends where the keyboard begins. */
  .nst-spot-ask {
    padding: 0; display: block;
    bottom: auto; height: 100dvh; max-height: 100dvh;
  }
  /* The scrim stays. Hidden, the page behind sat at full strength under a
     sheet that is also dark, and the two read as one surface -- moments showed
     through beneath the field as though they belonged to it. It also gives the
     tap-to-dismiss target back, which a phone has no Esc for. */
  .nst-spot-ask__scrim { display: block; }
  /* A sheet with an edge, rising from the bottom, rounded at the top corners
     the way a sheet is. Bottom-anchored rather than inset:0, so it takes only
     the height its content needs and the page shows above it -- which is what
     makes it read as a layer over the reader's place rather than a new
     screen. */
  .nst-spot-ask__box {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    /* Short of the top on purpose: the strip of page left showing above is
       what tells the reader this is a layer over their place, not a new one. */
    width: 100%; max-height: calc(100% - 56px);
    border: 0;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .62);
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    animation: nst-spot-sheet 300ms cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes nst-spot-sheet {
    from { transform: translateY(22px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  /* The stack sits against the field rather than filling to the top. On
     flex:1 a short list held the whole column and left a dead band above it,
     with the reader's eye starting on nothing. The auto margin goes on
     whichever block comes first so the answer stays attached to the results
     under it rather than being pushed to the ceiling alone. */
  .nst-spot-ask__answer { order: 1; margin-top: auto; }
  .nst-spot-ask__answer[hidden] + .nst-spot-ask__results { margin-top: auto; }
  .nst-spot-ask__results {
    order: 2; flex: 0 1 auto; min-height: 0; overflow-y: auto;
  }
  .nst-spot-ask__try { order: 3; }
  .nst-spot-ask__scopes { order: 4; border-bottom: 0; border-top: 0; }
  /* The same pill the header's Ask bar is drawn as. Tapping that pill and
     landing on a bare row looked like a different control answering for the
     one that was pressed; it is the same control, so it keeps its shape. */
  .nst-spot-ask__bar {
    order: 5; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    margin: 8px 14px; padding: 13px 18px; gap: 10px;
  }
  /* 16px floor -- under it iOS zooms on focus even when the tap was wanted. */
  .nst-spot-ask__input { font-size: 16px; }
  /* Keyboard furniture. There are no arrow keys, no Esc and no ⌘K on a phone,
     so every one of these was a label for something the reader cannot do. */
  .nst-spot-ask__hint, .nst-spot-ask__scale, .nst-spot-ask__foot { display: none; }

  .nst-spot-ask__label { font-size: 12px; }
  /* A round X, not a two-letter key nobody can press. */
  .nst-spot-ask__esc {
    width: 34px; height: 34px; padding: 0; font-size: 0; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .nst-spot-ask__esc::before { content: "✕"; font-size: 14px; line-height: 1; }

  /* The scopes scroll rather than wrapping onto a second and third row -- five
     of them stacked took a third of the sheet before a result was read. */
  .nst-spot-ask__scopes { padding: 9px 0 9px 14px; gap: 0; }
  .nst-spot-ask__tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; gap: 7px; padding-right: 14px;
    min-width: 0; width: 100%;
  }
  .nst-spot-ask__tabs::-webkit-scrollbar { display: none; }
  .nst-spot-ask__tabs > * { flex: 0 0 auto; }
  .nst-scope { padding: 8px 13px; font-size: 12px; }

  /* The name gets the room, and the sport goes underneath. Three things
     sharing 195 points -- name, "FOOTBALL · SAFETY" and an offer line -- left
     "Charles Woodson Jr." reading as "Charle…". Stacking the name over its
     meta gives each the full column instead of splitting it. */
  .nst-hit-row__who { flex-direction: column; align-items: flex-start; gap: 3px; }
  .nst-hit-row__name { max-width: 100%; }
  .nst-hit-row__meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  .nst-spot-ask__answer { padding: 13px 18px; }
  .nst-spot-ask__group { padding: 12px 14px 5px; }
  /* The right-hand column gives way rather than taking what it needs. On
     `auto` an offer line -- "OLE MISS · JUL 25" -- claimed its full width and
     left the name to absorb the shortfall. It wraps to two short lines
     instead, which costs nothing at this width and keeps the name whole. */
  .nst-hit-row { padding: 11px 12px; gap: 11px; grid-template-columns: 38px minmax(0, 1fr) minmax(0, auto); }
  .nst-hit-row__right { white-space: normal; }
  .nst-spot-ask__try { padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
}

/* --- the light build -------------------------------------------------------

   The host page has a theme toggle, and the panel is drawn from its own
   --sa-* tokens, so the light build is those tokens restated rather than a
   second set of rules. Everything structural -- the radius, the shadow, the
   pill scopes, the raised selected row -- carries over untouched.

   This is where the wash gets to be what it is on the Ask page: colour under
   an opaque light surface. On the dark build it had to be dimmed to keep the
   type legible over it; on paper it can sit at full strength. */

:root[data-theme="light"] .nst-spot-ask {
  --sa-ink: #14141a;
  --sa-ink-soft: #55555e;
  /* 4.6:1 on white. The faint tone carries the row meta and the footer, and
     the value that reads as "quiet" on a dark surface is genuinely hard to
     read on paper -- #86868f measured 3.6, under the 4.5 floor. */
  --sa-ink-faint: #6f6f7a;
  --sa-surface: #ffffff;
  /* A tint of the ink rather than white-on-white: raised elements have to come
     forward off a light surface, and lightening does nothing there. */
  --sa-raise: rgba(18, 18, 30, .055);
  --sa-shadow: 0 2px 8px rgba(16, 16, 30, .06), 0 30px 90px rgba(16, 16, 30, .16);
}

/* The page behind stays visible rather than being blacked out -- on a light
   page a heavy scrim reads as the lights going off, and the spotlight is
   meant to sit over the reader's place, not replace it. */
:root[data-theme="light"] .nst-spot-ask__scrim {
  background: rgba(28, 28, 40, .34);
}

:root[data-theme="light"] .nst-spot-ask__box::before {
  background:
    radial-gradient(52% 44% at 14% 0%, rgba(255, 176, 122, .30), transparent 66%),
    radial-gradient(48% 42% at 88% 6%, rgba(178, 174, 255, .30), transparent 64%),
    radial-gradient(60% 50% at 62% 104%, rgba(150, 232, 206, .24), transparent 70%);
}

/* The active scope inverts: a dark pill on paper, where the dark build used a
   light one. Same idea -- the selected thing is the one with the most
   contrast against its surface. */
:root[data-theme="light"] .nst-scope.is-on {
  background: #17171e;
  color: #fbfbfd;
}

:root[data-theme="light"] .nst-scope:hover,
:root[data-theme="light"] .nst-try:hover,
:root[data-theme="light"] .nst-spot-ask__esc:hover {
  background: rgba(18, 18, 30, .10);
  color: var(--sa-ink);
}

:root[data-theme="light"] .nst-hit-row:hover { background: rgba(18, 18, 30, .04); }
:root[data-theme="light"] .nst-hit-row.is-on { background: rgba(18, 18, 30, .07); }
:root[data-theme="light"] .nst-hit-row__face { background: rgba(18, 18, 30, .06); }

@media (max-width: 700px) {
  :root[data-theme="light"] .nst-spot-ask__bar {
    background: rgba(18, 18, 30, .05);
  }
  :root[data-theme="light"] .nst-spot-ask__box {
    box-shadow: 0 -20px 60px rgba(16, 16, 30, .22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nst-spot-ask__box { animation: none; }
}