/* The grid sort control. Everything here is prefixed nrx-sort- so it cannot
   reach a badge, a chip or the tooltip — content.css owns those, and this file
   is only ever allowed to read what they say.

   The control sits above the grid rather than over it, so unlike the badge it
   is not fighting artwork for legibility and can be quiet. It is a utility bar,
   not a header: sized to its own text, borrowing Netflix's type and its dark
   surfaces, and loud in exactly one place — see the pressed state below. */

.nrx-sort-bar {
  display: flex;
  width: fit-content;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin: 0 0 14px;
  padding: 6px 10px;
  border: 1px solid #2f2f2f;
  border-radius: 6px;
  background: #181818;

  font-family: var(--nrx-font);
  font-size: var(--nrx-type-body, 13px);
  line-height: 1.4;
}

.nrx-sort-label {
  color: #8c8c8c;
  font-size: var(--nrx-ui-label-size, 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nrx-sort-btn {
  /* Netflix's own reset does not reach an element it never rendered, so the
     button starts from the UA default and has to be talked all the way down. */
  margin: 0;
  padding: 4px 12px;
  border: 1px solid #4d4d4d;
  border-radius: 4px;
  background: transparent;

  color: #e5e5e5;
  font: inherit;
  font-weight: 600;
  line-height: 1.4;

  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.nrx-sort-btn:hover:not(:disabled) {
  border-color: #8c8c8c;
  background: #262626;
}

/* :focus-visible rather than :focus, and white at 2px — the same ring
   content.css draws on a badge, because a user tabbing between the two should
   not have to learn two focus styles. */
.nrx-sort-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The state hook is the accessibility attribute itself, so the pressed look and
   the announced state can never drift apart. */
.nrx-sort-btn[aria-pressed="true"] {
  border-color: transparent;
  background: #333;
  color: #fff;
  cursor: default;
}

/* The one state that deserves a loud signal: the grid you are looking at is no
   longer in Netflix's order, it is in ours. At rest the active option is the
   neutral grey above, so the control is invisible until it has actually done
   something.

   This used to be Netflix red. It is now the brand accent, for two reasons. It
   was the incumbent's own brand colour worn on our control, on a product that
   had to be renamed precisely because it cannot imply affiliation. And red on
   a control means "destructive" to everyone who has used software before,
   which is the wrong promise for a sort. Ink on near-white is 16:1. */
.nrx-sort-btn[data-mode="rating"][aria-pressed="true"] {
  background: var(--nrx-accent, #f4f4f5);
  color: var(--nrx-accent-ink, #0e0e0f);
}

.nrx-sort-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* "48 of 58 rated". #b3b3b3 on #181818 is 8.4:1 — muted enough to read as a
   footnote, never so muted that the number becomes decoration. */
.nrx-sort-status {
  color: #b3b3b3;
  font-variant-numeric: tabular-nums;
}

/* Ratings that landed after the sort and have not been folded in yet: the order
   on screen is known to be slightly stale, and this says so instead of silently
   rearranging the grid under the pointer.

   Muted grey, not amber. Amber means "a middling score" everywhere else in this
   product, and a footnote about staleness sitting inches from a wall of amber
   sixes is a collision, not a signal. Weight carries the emphasis instead. */
.nrx-sort-pending {
  color: var(--nrx-text-2, #9b9ca0);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* The sort standing down because Netflix re-rendered the grid out from under
   it. The same muted key as the pending count, because it is the same kind of
   admission — what is on screen is not quite what was asked for — and the two
   can never appear together: conceding clears the pending count on its way
   past. It stays a footnote rather than a warning, because the loud half of the
   message is already on the buttons, which have switched back to Netflix order
   in front of the reader. */
.nrx-sort-note {
  color: var(--nrx-text-2, #9b9ca0);
}

/* "Ranked on arrival" — the sort that nobody on this page pressed, accounting
   for itself.

   The one line on this bar that is brighter than the label beside it, and the
   reason is that it is the only one answering a question the reader has not
   asked. The counts are footnotes you go looking for; this is a fact you have
   to be handed, because otherwise the first thing you see is a grid in an order
   you did not choose. --nrx-text on #181818 is 15:1.

   Near-white and not green, and that is the rule rather than a preference: this
   sentence sits inches above seventy-five badges, and green there means "this
   title is worth your time". A status line wearing a rating band's colour
   invites the reader to decode it as a rating of the grid. The emphasis is
   carried by weight and by the accent rail below instead.

   The rail is what makes it read as a distinct statement rather than as a third
   count in a row of counts — a border, not a background, so the plate behind it
   stays the bar's own and nothing here can be mistaken for a chip. */
.nrx-sort-arrival {
  border-left: 2px solid var(--nrx-accent, #f4f4f5);
  padding-left: 8px;
  color: var(--nrx-text, #f2f2f2);
  font-weight: 600;
}

/* All three are set as a property in sort.js, so the UA rule has to be restated
   to outrank the colours above. */
.nrx-sort-pending[hidden],
.nrx-sort-arrival[hidden],
.nrx-sort-note[hidden] {
  display: none;
}

/* The tiles themselves never animate. Neither lever can be animated — CSS
   `order` is not an animatable property, and moving a tile to another row is a
   cut, not a transition — and a 58-tile crossfade would in any case be exactly
   the chaos the deferred restack exists to avoid. Only the button's own hover
   moves, so this is the whole of what reduced motion has to switch off. */
@media (prefers-reduced-motion: reduce) {
  .nrx-sort-btn {
    transition: none;
  }
}