/* The overlay surface, shared.

   There are two floating panels now — the player's controls and the browse
   launcher — and the request was that they be the same thing. They were not:
   the player had a frosted plate, a drag, a stored position and an opacity
   setting, and the launcher had a flat pill in a corner. Copying the first
   file's rules into the second is how two surfaces drift apart one commit at a
   time, so the surface lives here and both wear it.

   What is here is the LOOK and nothing else. Layout, spacing and what goes
   inside stay with whichever panel owns them — player.css still positions the
   player's rows, pick.css still lays out the launcher — because those genuinely
   differ and pretending otherwise would mean one file with two modes.

   --- what makes it read as glass ---

   Four things, and dropping any one is what makes a "glassmorphic" panel look
   cheap:

     1. A heavy blur with saturation pushed UP. This is the part that gets
        missed: glass concentrates the colour behind it, so a boost is what makes
        the frame read as *through* the panel rather than as a smear under it.
        An earlier version of player.css had saturate(0.9), which is the wrong
        direction and is why it read as a grey box.
     2. A near-transparent fill rather than a dark one. The plate is mostly the
        blur; the fill only has to hold contrast for the text.
     3. A gradient, brighter at the top. Real glass catches light on its upper
        edge, and a flat fill is the biggest tell that something is a rectangle
        rather than a pane.
     4. A hairline brighter on top than underneath, plus a soft inner glow —
        the lit edge. It separates the panel from what is behind it without
        drawing anything anyone reads as a border.

   --- solidity ---

   --nrx-glass-alpha is written by whichever script owns the panel, from that
   panel's own setting. It scales the FILL only. The blur is deliberately not
   tied to it: someone asking for a more transparent panel wants to see more of
   what is behind it, not to lose the legibility that makes the panel usable.

   The fallback keeps a panel whose script never wrote the property looking like
   one whose script did. */

.nrx-glass {
  border-radius: 14px;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.015) 42%,
      rgba(255, 255, 255, 0) 100%
    ),
    /* 0.62 -> 0.80. Over a white frame the old multiplier put the plate at a
       mid grey, which is the worst possible ground for light type: too light
       for white, too dark for black. The controls carry their own ground now,
       so this only has to serve the labels — but it should not be actively
       fighting them either.

       This is the one place the aero effect is genuinely traded against
       legibility, so it is worth being plain about the trade: at the default
       setting the plate is now noticeably darker over bright content and
       almost unchanged over dark content, which is where most of a film lives.
       The slider still spans its full range; it starts from a floor that can
       be read. */
    rgba(22, 22, 24, calc(var(--nrx-glass-alpha, 0.72) * 0.80));
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 8px 24px -12px rgba(255, 255, 255, 0.18),
    0 10px 34px rgba(0, 0, 0, 0.5);
  color: #f5f5f5;
  font-family: var(--nrx-font);
}

/* Backdrop filters are the one part of this that a browser can decline, and
   when it does the panel is a nearly transparent box over a moving picture —
   unreadable rather than merely plainer. So the fill is taken up to something
   that stands on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nrx-glass {
    background:
      linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    background-color: rgba(18, 18, 20, 0.94);
  }
}

/* --- draggable ------------------------------------------------------------
   The grab cursor is on the panel; anything interactive inside takes its own
   back, so a button never looks like a handle. */
.nrx-glass[data-nrx-drag] { cursor: grab; }
.nrx-glass[data-nrx-drag] button,
.nrx-glass[data-nrx-drag] select,
.nrx-glass[data-nrx-drag] input,
.nrx-glass[data-nrx-drag] a { cursor: pointer; }
.nrx-glass[data-nrx-dragging] { cursor: grabbing; }
/* No transition while a finger is on it: an ease on `left` makes the panel lag
   the pointer, which reads as the drag not having caught. */
.nrx-glass[data-nrx-dragging] { transition: none !important; }

/* --- the controls that sit on it -----------------------------------------
   Each is its own small pane, lit from the top like the panel. A flat fill sits
   ON the glass as a sticker rather than in it. */
.nrx-glass-chip {
  margin: 0;
  padding: 4px 9px;
  border: 1px solid var(--nrx-ctl-line, rgba(255, 255, 255, 0.26));
  border-radius: 999px;
  /* A DARK ground, not a lighter wash of the plate.
     This used to be a white gradient over the panel, which meant the chip had
     no contrast of its own — it inherited the plate's, and the plate's is
     whatever the film is doing. Over a bright frame both the chip and its label
     lifted together and the text disappeared. An opaque-enough dark fill ends
     that: what is behind the panel can no longer reach the text. */
  background: var(--nrx-ctl-bg, rgba(18, 18, 20, 0.78));
  color: var(--nrx-ctl-ink, #f2f2f3);
  font: inherit;
  font-size: var(--nrx-ctl-size, 12.5px);
  font-weight: var(--nrx-ctl-weight, 600);
  line-height: 1.3;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.nrx-glass-chip:hover {
  background: var(--nrx-ctl-bg-hi, rgba(44, 45, 49, 0.86));
  border-color: var(--nrx-ctl-line-hi, rgba(255, 255, 255, 0.44));
  color: #fff;
}

/* "On" is monochrome, and that is the brand decision rather than a colour tweak.
   It was Netflix's #46d369 — the same green a badge uses to mean "worth
   watching". Spending that hue on "this button is active" costs something real:
   every badge on the page is worth fractionally less once the reader has learnt
   that green sometimes just means "on".

   But monochrome is not the same as faint, and that is the mistake this rule
   made for a while. The pressed state was a translucent white fill at .30 over
   an unpressed one at .14 — a real difference against a dark panel, and almost
   none against a bright film frame, because the plate is backdrop-blurred and
   both states rise with whatever is behind them. On a snow scene every chip
   looked selected; on a night scene none did. A state you can only read on some
   backgrounds is not a state.

   So the pressed chip INVERTS instead: a solid accent fill with dark ink on it.
   16:1, and independent of the video underneath because the fill is opaque —
   the only thing that is, on a panel made of glass. It is also how emphasis is
   spent everywhere else in the product now (the primary button in settings, the
   filter panel's Clear, the picker's Watch), so the overlay stops being the one
   surface with its own idea of "on". */
.nrx-glass-chip[aria-pressed="true"] {
  background: var(--nrx-accent, #f4f4f5);
  border-color: var(--nrx-accent, #f4f4f5);
  color: var(--nrx-accent-ink, #0e0e0f);
  box-shadow: none;
  font-weight: 700;
  text-shadow: none;
}
.nrx-glass-chip[aria-pressed="true"]:hover {
  background: #ffffff;
  border-color: #ffffff;
}
.nrx-glass-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.nrx-glass-select {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--nrx-ctl-line, rgba(255, 255, 255, 0.26));
  border-radius: 8px;
  background: var(--nrx-ctl-bg, rgba(18, 18, 20, 0.78));
  color: var(--nrx-ctl-ink, #f2f2f3);
  font: inherit;
  font-size: var(--nrx-ctl-size, 12.5px);
  font-weight: var(--nrx-ctl-weight, 600);
  line-height: 1.3;
  cursor: pointer;
}
.nrx-glass-select:hover {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.10));
  border-color: rgba(255, 255, 255, 0.32);
}
.nrx-glass-select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The list is painted by the OS over a page it knows nothing about, so options
   carry their own colours rather than inheriting the panel's. */
.nrx-glass-select option { background: #141414; color: #f5f5f5; }

.nrx-glass-label {
  flex: none;
  color: var(--nrx-ui-label-ink, #dedfe2);
  font-size: var(--nrx-ui-label-size, 12px);
  font-weight: var(--nrx-ui-label-weight, 600);
  /* Unlike a chip, a label has no ground of its own — it is type directly on
     the plate — so this is the only thing standing between it and a white
     frame. */
  text-shadow: var(--nrx-ui-shadow, 0 1px 2px rgba(0, 0, 0, 0.6));
}
/* The readout between two steppers — "110%", "Middle". It is the answer to the
   control either side of it, so it is set at control size and a notch heavier,
   and it sits on the bare plate like a label does, so it takes the shadow. */
.nrx-glass-value {
  min-width: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--nrx-ctl-size, 12.5px);
  font-weight: 700;
  color: #f2f2f3;
  text-shadow: var(--nrx-ui-shadow, 0 1px 2px rgba(0, 0, 0, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .nrx-glass-chip { transition: none; }
}