/* "Pick one for me". Everything here is prefixed nrx-pick- so it cannot reach a badge, a chip, the season strip, the sort bar or the category picker — content.css, sort.css and genres.css own those, and this file is not allowed to have an opinion about them. Two exceptions, both deliberate and both narrow. .nrx-pick-spot goes on the site's own card for a couple of seconds after "Show it on the page". It adds an outline and nothing else — no layout, no transform, no pointer-events — so the tile underneath keeps behaving exactly as the site built it, and pick.js takes the class off again on a timer. .nrx-launcher and .nrx-launcher-item are the shared bottom-right corner, and they are the one place this file styles something genres.js also puts a button in. It is still not an opinion about genres.css's classes: the rules name the launcher's own contract classes, never .nrx-genre-trigger, and they set position and stacking only. Every genre trigger's colour, shape and focus ring is still genres.css's alone. Unlike the badge, none of this sits on artwork and none of it sits in the site's flow: the panel is a layer above the page. That is what lets it borrow the site's surfaces and type without having to fight anything for space. This file runs on Netflix, Prime Video, Amazon and Disney+, so nothing below assumes a particular site's reset. The panel talks every property it needs all the way down from the UA default. */ /* The root is a positioning host for two fixed children and nothing else. Zero size and no pointer surface of its own, so an element parked on can never intercept a click meant for the page. */ .nrx-pick-root { position: static; } /* --- the shared launcher -------------------------------------------------- The bottom-right corner, which is shared. genres.js's "Categories" trigger and this file's "Pick for me" trigger both live in here, and neither file owns the container: whichever runs first creates it and the other finds it by selector. genres.js is injected first and so usually creates it, but it returns early off Netflix, so on Prime Video, Amazon and Disney+ pick.js creates it and it holds exactly one button. These rules live in pick.css rather than genres.css because the launcher arrived with this feature, and because pick.css is loaded on every host the manifest matches while genres.css describes a Netflix-only panel. The contract they implement is stated in full in both JS files. Why one button still looks deliberate: there is no slot, no placeholder and no reserved space. The container is a shrink-to-fit column, so with one child it is exactly one pill sitting at the same 20px/20px the trigger occupied when it was alone — visually identical to the old single-button corner. With none it removes itself. There is never a gap to read as a failure. */ /* The corner it rests in. glass.js overwrites left/top with pixel offsets from the stored position as soon as it places the panel, and sets right/bottom to auto when it does — these hold for the frame before that, and in a build where the placement never runs. */ .nrx-launcher { position: fixed; right: 20px; bottom: 20px; /* genres.css's trigger sat at this z-index; the container inherits it, which keeps both panels (2147482600 and 2147483001) and both scrims above the launcher exactly as before. */ z-index: 2147482000; display: flex; flex-direction: column; align-items: stretch; gap: 6px; /* It is a pane now rather than a bare column of buttons, so it has its own padding — the glass needs a margin around its contents or the buttons look pressed against the edge of the frame. */ padding: 8px; max-width: calc(100vw - 40px); /* It takes pointer events itself, unlike before: the panel is draggable, and a drag has to start somewhere that is not a button. The dead space beside a narrower button is now part of the pane rather than a hole in it. */ pointer-events: auto; font-family: var(--nrx-font); } .nrx-launcher > * { pointer-events: auto; } /* On a player or an account page both files pull their button out, and the corner should then be nothing rather than an empty box. */ .nrx-launcher:empty { display: none; } /* The buttons sit ON the glass now, so they stop carrying their own opaque plate — two stacked surfaces read as a button on a card rather than as a control in a pane. What is left is the lit-from-above fill glass.css gives every control, at the launcher's larger size. Specificity: (0,2,0), matching the `.nrx-launcher > .nrx-launcher-item` rule below that it is overriding, and declared after it in the same file so source order settles the overlap. */ .nrx-launcher > .nrx-launcher-item { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.14); opacity: 1; } .nrx-launcher > .nrx-launcher-item:hover, .nrx-launcher > .nrx-launcher-item:focus-visible, .nrx-launcher > .nrx-launcher-item[aria-expanded="true"] { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.10)); border-color: rgba(255, 255, 255, 0.30); } /* What `nrx-launcher-item` means: this element has handed both its position and its appearance to the launcher. genres.css declares `position: fixed; right: 20px; bottom: 20px` on its trigger, written when that corner was exclusively its own, and it still declares the pill's padding, colours and resting opacity; the child combinator here is (0,2,0) against that rule's (0,1,0), so every override below holds whichever order the two stylesheets happen to be injected in. --- why this block took over the appearance too --------------------------- Observed in Chrome on a real signed-in Netflix homepage: both pills, sitting at genres.css's resting `opacity: 0.6` over poster artwork, read as stray captions floating on a card rather than as controls. That is not a colour bug that a higher opacity fixes. The background is a poster that changes as the page scrolls, so *any* value that lets the artwork through is legible over some frames and not others, and 0.6 also fades the border and the shadow — the two things that were supposed to say "this is a button". So the surface stops depending on what is behind it. `#141414` is fully opaque: the artwork is occluded rather than mixed with, and the worst case equals the best case. #f2f2f2 on it is 16.5:1, and the pill keeps that ratio over a black title card and over a white one alike. The border is a light hairline (rgba(255,255,255,.22) composites to ~#484848 on the surface) and the two-layer shadow lifts the pill off the poster instead of tinting it. Restraint is now carried by size and colour rather than by transparency: a small dark pill with 13px type, at the same 20px/20px corner, going one step brighter under the pointer. This sits on top of someone's Netflix and is not allowed to look like a widget that moved in. Both pills take this block, so they stay one control set by construction rather than by two files agreeing to copy each other — which is what the old duplicated `.nrx-pick-trigger` appearance block was, and why it is gone. The block therefore has to name every visual property genres.css sets on `.nrx-genre-trigger`, or the categories pill would keep the half of that rule this one forgot to mention. */ .nrx-launcher > .nrx-launcher-item { position: static; right: auto; bottom: auto; z-index: auto; white-space: nowrap; /* Icon, label and chord on one baseline. The 44px floor is the pointer target, not a look: at genres.css's 7px/13px the pill was ~33px tall, under the 44x44 minimum, and a corner control aimed at with a trackpad or a thumb is exactly the case that minimum exists for. Padding is horizontal only — the height is the floor's job, so the two pills cannot drift out of alignment when one of them wraps a slightly taller glyph. */ display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 44px; margin: 0; padding: 0 14px; /* The button starts from the UA default on every one of these hosts — none of their resets reach an element they never rendered — so appearance, border and font are all talked down explicitly. */ -webkit-appearance: none; appearance: none; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: #141414; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 8px 24px rgba(0, 0, 0, 0.55); color: #f2f2f2; font: inherit; /* before font-size: the shorthand would reset it */ font-size: var(--nrx-type-body, 13px); font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; text-align: left; opacity: 1; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* One step brighter, not a different object: same geometry, same type, a lighter rim and a deeper shadow. #f2f2f2 on #232323 is 14.0:1, so the state that gets read the most closely is not the one that got dimmer. */ .nrx-launcher > .nrx-launcher-item:hover, .nrx-launcher > .nrx-launcher-item:focus-visible, .nrx-launcher > .nrx-launcher-item[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.5); background: #232323; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 10px 30px rgba(0, 0, 0, 0.6); } .nrx-launcher > .nrx-launcher-item:active { background: #2c2c2c; } /* The same white 2px ring content.css draws on a badge, sort.css on its buttons and genres.css on its trigger — someone tabbing between the four should not have to learn four focus styles. White is the one ring colour that survives being drawn just outside a pill on unknown artwork. */ .nrx-launcher > .nrx-launcher-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* --- the mark --------------------------------------------------------------- Inline SVG built in JS, currentColor, no external asset and no icon font. 16px is the largest a mark can be beside 13px type without becoming the thing you read first. `display: block` kills the inline baseline gap that would otherwise push the pill a pixel taller than its sibling. */ .nrx-launcher-icon { flex: 0 0 auto; display: block; width: 16px; height: 16px; } /* The label is what shrinks if a pill ever has to, never the icon or the chord — a truncated word is still a control, a missing mark is not. */ .nrx-launcher-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* --- the chord -------------------------------------------------------------- The shortcut, on the control it belongs to. It was only ever in the accessible name and the tooltip, which is the same as saying it was only available to people who already knew it was there. A keycap chip is the one form that reads as "press this" rather than as more label: it is set apart from the words by its own surface, so the eye can skip it until the second or third visit, which is when it starts to matter. #c9c9c9 on the chip (rgba white .10 composites to ~#2b2b2b on #141414) is 8.6:1 — quieter than the label, never a thing you have to squint at. */ .nrx-launcher-key { flex: 0 0 auto; margin-left: 2px; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 5px; background: rgba(255, 255, 255, 0.1); color: #c9c9c9; font: inherit; font-size: var(--nrx-type-meta, 11.5px); font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; } /* A keycap is a lie on a device with no keys, and it is the first thing worth dropping when the corner gets tight. The label and the mark stay. */ @media (hover: none), (max-width: 520px) { .nrx-launcher-key { display: none; } } /* --- one thing genres.css can no longer get right on its own ---------------- `.nrx-genre-panel` is anchored `bottom: 68px`, a number chosen when the corner held one ~33px trigger. It has been wrong since the launcher became a two-pill column and is wronger now that each pill is 44px: the stack is 20 + 44 + 8 + 44 = 116px tall, so a panel hung at 68px opens *through* the button that opened it. This is the launcher's height, so it is this file's number, and it is fixed here rather than in genres.css because that file is not allowed to know how tall pick.js's pill is. Same child-combinator trick as above: `.nrx-genre-root > .nrx-genre-panel` is (0,2,0) against genres.css's (0,1,0), and genres.js appends the panel straight into that root. 128px is 116 plus the 12px of air the panel had over the trigger originally. Raising the floor raises the ceiling with it, so the height cap has to be restated or a short window would push the panel off the top instead. The first two terms are genres.css's own cap, unchanged and still winning at every ordinary window height; the third only binds below ~560px of viewport, where the panel now scrolls internally rather than overflowing. */ .nrx-genre-root > .nrx-genre-panel { /* MEASURED, NOT ASSUMED. This was `128px`, derived in the note above as 20 + 44 + 8 + 44 + 12 — the height of two pills and the gaps around them. That arithmetic was correct on the day and became wrong the moment filters.js started mounting a 295-440px pane into the same container: the category panel opened straight through the corner it was written to clear. glass.js now publishes the launcher's real height as --nrx-launcher-h from the ResizeObserver it already runs, so this clears whatever is actually there — two pills, three, or three and an open filter panel. A hardcoded offset cannot survive a container three files append to. */ bottom: calc(var(--nrx-launcher-h, 128px) + 32px); max-height: min(74vh, 620px, calc(100vh - 148px)); } /* Stacking order, fixed in CSS rather than left to append order. Both files re-home their button after a re-render and either can go first, so DOM order is genuinely non-deterministic — and two buttons that swap places between navigations is exactly the small wrongness worth two lines to prevent. "Pick for me" takes the bottom slot: it is the closer of the two to the corner the pointer aims at, and it is the one that works on every site. */ /* Top to bottom, the order the three read as a sentence: narrow it down, what else is there, choose for me. Pick sits nearest the corner because it is the one pressed most. These three lines were already here and only two of them did anything. The "filters" rule was written for a pill that was then deleted, and for months nothing set `data-launch="filters"` — while filters.js appended its whole pane with no `data-launch` at all, which is `order: 0`, which put it ABOVE everything. The stated sentence was inverted in practice by a default. */ .nrx-launcher > [data-launch="filters"] { order: 1; } .nrx-launcher > [data-launch="categories"] { order: 2; } .nrx-launcher > [data-launch="pick"] { order: 3; } /* The open panel sits above all three pills. It is `order: 0` by not carrying a `data-launch`, which is the same default that used to be the bug — the difference is that it is now only in the DOM while it is open. */ /* The count on the Filters pill: how many rules are on, in two characters instead of 295 pixels of visible sliders. Monochrome — a count is not a rating, and this product spends colour on exactly one thing. */ .nrx-filterp-trigger-count { min-width: 17px; margin-left: auto; padding: 1px 5px; border-radius: 999px; background: var(--nrx-accent, #f4f4f5); color: var(--nrx-accent-ink, #0e0e0f); font-size: var(--nrx-type-meta, 11.5px); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.45; } /* `margin-left: auto` above pushes the count to the right of the label. With no count there is nothing to push, so the keycap keeps its own place. */ .nrx-filterp-trigger-count[hidden] { display: none; } /* --- this file's trigger -------------------------------------------------- There is nothing here any more, and that is the point. This block used to be a deliberate copy of `.nrx-genre-trigger`'s non-positional declarations — the right call at the time, because borrowing genres.css's class would have made a Netflix-only stylesheet load-bearing for a button that has to work on Prime. But it meant two files each holding half of one control set's appearance with a comment asking them to stay in sync, and the two pills only *looked* like a set for as long as nobody restyled one of them. Both pills now take their whole appearance from `.nrx-launcher > .nrx-launcher-item` above, which is this file's own contract class rather than genres.css's: no borrowing, no copy, and the Netflix-only stylesheet stays non-load-bearing. `.nrx-pick-trigger` survives as pick.js's handle on its own button — `document.querySelectorAll` sweeps strays by it — not as a style hook. */ /* Scoped rather than global. A site's own `* { box-sizing: content-box }` would otherwise reach into a subtree it never rendered and take the padding out of every width below. */ .nrx-pick-panel, .nrx-pick-panel * { box-sizing: border-box; } /* --- the scrim ------------------------------------------------------------ Focus is genuinely trapped while the panel is open, so the page behind it is genuinely inert and should look it. Darker than genres.css's scrim on purpose: that panel is a list you consult while still reading the page, and this one is a single answer that should have the screen to itself. Scrolling is deliberately left alone underneath, because "scroll to load more rows, then press Shift+P again" is advice this panel actually gives. */ .nrx-pick-backdrop { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0, 0, 0, 0.6); } /* --- the panel ------------------------------------------------------------ Centred rather than anchored to a corner, and still centred now that there is a trigger in the corner it could have been anchored to. genres.css hangs its panel off its trigger because that panel is a long list you consult while still reading the page behind it. This one is a single answer with a poster on it, and it can equally be opened by Shift+P from a surface where the launcher is not showing at all — anchoring it to a button that may not be there is worse than putting it where the eye already is. Sized in vw/vh with a cap, and it scrolls internally rather than growing: at 200% zoom the width cap stops mattering, the body wraps to a column, and the panel becomes a tall scrolling sheet instead of overflowing the window. */ .nrx-pick-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2147483001; display: flex; flex-direction: column; width: min(580px, calc(100vw - 32px)); max-height: min(88vh, 760px); overflow-y: auto; overscroll-behavior: contain; /* don't hand a spent scroll to the page behind */ /* Border, radius, fill, shadow and family all come from .nrx-glass now — the panel carries that class, like the player overlay, the filter pane and the launcher. This was the last surface in the product still made of something else: an opaque #181818 box with a 10px radius, sitting on a page where the other three panels were blurred glass at 14px. Nothing about it was wrong on its own; it was wrong beside them. What stays here is only what a centred modal needs and a floating pane does not. The close button is an absolutely positioned child, and `position: fixed` above is what gives it its corner. */ color: var(--nrx-text, #f2f2f2); font-size: var(--nrx-type-body, 13px); line-height: 1.45; scrollbar-width: thin; scrollbar-color: #4d4d4d transparent; } /* Both are toggled by the `hidden` property in pick.js, and both set a `display` the UA's own [hidden] rule would otherwise lose to. */ .nrx-pick-panel[hidden], .nrx-pick-backdrop[hidden] { display: none; } /* The dialog takes focus on open so a screen reader reads its name and the pick before it reaches a button. That focus is programmatic, never a tab stop, so there is no ring on it — a box drawn round the whole panel would say "you can type here", which is the one thing you cannot do. */ .nrx-pick-panel:focus { outline: none; } /* Every band is flex: 0 0 auto so a tall pick scrolls the panel rather than compressing the header and footer out of existence — the default in a column flex container with a max-height is for children to shrink, which would hide the very thing the panel was opened to show. */ /* Every band is flex: 0 0 auto so a tall pick scrolls the panel rather than compressing the body and footer out of existence — the default in a column flex container with a max-height is for children to shrink, which would hide the very thing the panel was opened to show. */ .nrx-pick-body, .nrx-pick-actions, .nrx-pick-choices, .nrx-pick-footer { flex: 0 0 auto; } /* The header band is gone. It held an

reading "Pick one for me" above a poster the user had just asked to see, plus a rule, plus 40px of vertical space — on a panel whose whole argument is that it answers in one screen. The close button was the only part of it that did anything, so it is the only part that is left, floated over the corner where every other overlay in the product puts it. It is drawn as a glass control rather than as bare type, because it now sits over artwork rather than over a solid header, and a grey mark on a bright poster is exactly the legibility problem the overlay tokens exist to solve. / .nrx-pick-close { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--nrx-hit-close, 26px); height: var(--nrx-hit-close, 26px); margin: 0; padding: 0; border: 1px solid var(--nrx-ctl-line, rgba(255, 255, 255, 0.26)); border-radius: 999px; background: var(--nrx-ctl-bg, rgba(18, 18, 20, 0.78)); color: var(--nrx-ctl-ink, #f2f2f3); font: inherit; font-size: var(--nrx-glyph-close, 13px); line-height: 1; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .nrx-pick-close: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; } / --- the pick ------------------------------------------------------------- Artwork beside the facts, and wrapping to a column the moment there isn't room for both. The 220px basis on the details is what triggers that: at 200% zoom, or on a phone-width window, the two no longer fit side by side and the poster goes above the text rather than squeezing it to one word per line. / .nrx-pick-body { display: flex; flex-wrap: wrap; gap: 16px; / 16px at the top rather than 14: the close button is floated into this corner now, and the title has to clear it rather than run under it. / padding: 16px 16px 4px; } / Not given an aspect-ratio. Netflix's box art is landscape, Prime's packshot is a portrait poster, and forcing either into the other's shape would crop a face or letterbox a title card. The width is capped and the height follows whatever the image actually is. / .nrx-pick-art { flex: 0 0 auto; align-self: flex-start; width: min(210px, 45%); height: auto; border-radius: 4px; background: #000; } .nrx-pick-details { flex: 1 1 220px; min-width: 0; } .nrx-pick-name { / Padding, not margin: the floated close button overlaps this element's box at narrow widths, and a long title would otherwise set under it. / padding-right: 26px; margin: 0 0 8px; color: #fff; font-size: var(--nrx-type-display, 20px); font-weight: 700; line-height: 1.25; / Long titles break rather than widening the panel past its cap. / overflow-wrap: anywhere; } .nrx-pick-score-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; } / The score is the loudest thing in the panel, because it is the reason this title is on screen at all. Same three colours the badge uses, so someone who has learned that green means "worth it" on a card does not have to learn it again here. / .nrx-pick-score { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } / The score is an to IMDb when there is an id for one — this is where the "IMDb page" button went. It must not look like a link: it is the loudest number in the panel, and an underline through a coloured 8.6 reads as damage. The cursor and a hover lift carry the affordance; the title attribute says where it goes. / a.nrx-pick-score { text-decoration: none; cursor: pointer; } a.nrx-pick-score:hover { filter: brightness(1.18); } a.nrx-pick-score:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; } .nrx-pick-score[data-tier="high"] { color: var(--nrx-green, #46d369); } / worth it / .nrx-pick-score[data-tier="mid"] { color: var(--nrx-amber, #e5a00d); } / maybe / .nrx-pick-score[data-tier="low"] { color: var(--nrx-red, #e87c78); } / skip / / An unrated pick has no number to shout, so it says what it is at the size of a sentence rather than the size of a score. / .nrx-pick-score[data-tier="unknown"] { color: #8c8c8c; font-size: var(--nrx-type-title, 15px); font-weight: 600; } / "/10" in the score's own colour but half its weight: it makes 8.4 legible as a rating rather than as a runtime, without competing with the number. / .nrx-pick-outof { margin-left: 2px; font-size: 0.55em; font-weight: 600; opacity: 0.7; } / Votes, kind, year, run status, runtime. #b3b3b3 on #181818 is 8.4:1 — a footnote by weight, never by legibility. / .nrx-pick-facts { color: #b3b3b3; font-size: var(--nrx-ctl-size, 12.5px); font-variant-numeric: tabular-nums; } .nrx-pick-genres { margin-top: 6px; color: #8c8c8c; font-size: var(--nrx-ui-label-size, 12px); } / Context that isn't a warning: "under-seen", or the IMDb name when it differs from the one on the tile. Muted, because it explains rather than cautions. / .nrx-pick-note { margin: 10px 0 0; color: #9a9a9a; font-size: var(--nrx-ui-label-size, 12px); line-height: 1.5; } / A thin vote count or an approximate match — the line that qualifies the score printed directly above it. Muted grey, and this is the sharpest case for why: amber here sat inches beneath a score that may itself be amber, so the panel showed two ambers meaning two unrelated things at once. Colour states a rating; prose about the rating does not get to borrow it. / .nrx-pick-warn { margin: 10px 0 0; color: var(--nrx-text-2, #9b9ca0); font-size: var(--nrx-ui-label-size, 12px); line-height: 1.5; } .nrx-pick-empty-body { margin: 10px 0 0; color: #b3b3b3; font-size: var(--nrx-type-body, 13px); line-height: 1.55; } / --- the actions ---------------------------------------------------------- Three, where there were five — plus a fourth that exists only on a page draw and is an icon. What went: "IMDb page" moved onto the score, which is already IMDb's and already reads as its source; and "Show it on the page" traded four words for a reticle, because it is contextual, its subject is somewhere else on screen, and spelled out it was the widest control in the row. What is left wears the same shape language as every other overlay control — the dark self-carried ground from --nrx-ctl-bg, the hairline, the pill radius — rather than the square #262626 boxes this row used to draw, which belonged to no other surface in the product. / .nrx-pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; } .nrx-pick-actions [hidden] { display: none; } / Shared shape for everything in the row, so the anchors and the buttons read as one control set rather than as links that wandered in. / .nrx-pick-go, .nrx-pick-preview, .nrx-pick-again, .nrx-pick-show { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 14px; border: 1px solid var(--nrx-ctl-line, rgba(255, 255, 255, 0.26)); border-radius: 999px; background: var(--nrx-ctl-bg, rgba(18, 18, 20, 0.78)); color: var(--nrx-ctl-ink, #f2f2f3); font: inherit; font-size: var(--nrx-type-body, 13px); font-weight: 600; line-height: 1.35; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } / The one thing this panel exists to make easy, so it is the one thing wearing the accent — solid, where every sibling is an outline. Ink on near-white is 16:1. It used to be Netflix's red, described as "the site's own go colour", which is exactly the problem: this product is not the site and may not dress as it. Contrast does the work red was doing, and does it louder. / .nrx-pick-go { border-color: var(--nrx-accent, #f4f4f5); background: var(--nrx-accent, #f4f4f5); color: var(--nrx-accent-ink, #0e0e0f); } .nrx-pick-go:hover { border-color: #ffffff; background: #ffffff; } .nrx-pick-preview:hover, .nrx-pick-again:hover, .nrx-pick-show: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; } / Square, because it holds a 15px reticle and nothing else. The row's gap and the shared radius keep it in family with the worded controls beside it. / .nrx-pick-show { width: 32px; padding: 7px; justify-content: center; } .nrx-pick-again .nrx-launcher-icon, .nrx-pick-show .nrx-pick-icon { flex: none; opacity: 0.92; } / "Nothing else clears the bar" — a single-candidate pool, which is a real state and a common one on a fresh page with a strict threshold. The button stays visible and says why rather than vanishing, because a control that disappears leaves the user wondering what they did. / .nrx-pick-again:disabled { border-color: rgba(255, 255, 255, 0.12); background: transparent; color: #767676; cursor: default; } .nrx-pick-again:disabled .nrx-launcher-icon { opacity: 0.45; } / :focus-visible rather than :focus, and white at 2px — the same ring content.css draws on a badge, sort.css on its buttons and genres.css on its trigger, because someone tabbing between them should not have to learn four focus styles. / .nrx-pick-go:focus-visible, .nrx-pick-preview:focus-visible, .nrx-pick-again:focus-visible, .nrx-pick-show:focus-visible, .nrx-pick-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } / --- the three settings --------------------------------------------------- Where to draw from, films or series, and which Netflix category — one row, three selects. They were five segmented chips in two labelled rows, plus a button that opened a popup listbox: eight controls and two labels stacked under a panel whose entire job is to return ONE title, with every option spelled out permanently whether or not anyone was choosing between them. A select states the current answer and keeps the alternatives one click away, which is the right trade for something read constantly and changed occasionally. It is also the filter pane's own control, so the two panels share a vocabulary now instead of each having invented one. The labels went with the chips: "Everything I've seen", "Anything" and "Any category" say what they are without a word in front of them. / .nrx-pick-choices { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; } / .nrx-glass-select sizes to its content in the filter pane, where the rows are fixed width. Here three share a line and the third holds category names of any length, so they share the space rather than letting the longest set the row. / .nrx-pick-ctl { flex: 1 1 auto; min-width: 0; max-width: 100%; } / --- the footer ----------------------------------------------------------- What the draw saw, the rules it applied, and — the new part — how big the catalogue behind it is, next to the control that makes it bigger. The footer used to be four stacked paragraphs: provenance, a chip row, a caveat about crawling, and a keyboard legend. Sixty-odd words under a poster, of which the keyboard legend was never read twice and the caveat answered a question about architecture rather than about what to do next. Solid rather than glass, and this is the one place in the panel that breaks the blur on purpose: it is a block of small type, and small type over a moving picture is the exact thing --nrx-ctl-bg exists to prevent. The panel is the glass; the footer is a control surface sitting in it. / .nrx-pick-footer { border-top: 1px solid rgba(255, 255, 255, 0.10); padding: 11px 16px 13px; background: rgba(10, 10, 11, 0.62); / Matches .nrx-glass's 14px, less the 1px border, so the fill cannot square off the panel's bottom corners. / border-radius: 0 0 13px 13px; } / ONE SCALE, THREE ROLES. The footer reads as a single statement — "491 titles clear your bar", then the rules that produced that number — so the count and the chips are set at one size and one weight, and differ only in colour and in the pill. They had drifted to 12px/600, 11.5px/400 and 11px/600: three sizes inside 40px of vertical space, which reads as three unrelated things rather than as a fact and its conditions. Tabular figures on both, because both are mostly digits and the chips wrap into a column where the digits line up. / .nrx-pick-provenance { color: var(--nrx-text, #f2f2f2); font-size: var(--nrx-type-meta, 11.5px); font-weight: 600; font-variant-numeric: tabular-nums; } .nrx-pick-bar { margin-top: 4px; color: #8c8c8c; font-size: var(--nrx-type-meta, 11.5px); } / The lazy-loading caveat, in the same muted key as every other "this is the best available, and the best available is not a guarantee" in this extension. Empty on a catalogue draw, and :empty keeps its margin from opening a gap when it is. / .nrx-pick-caveat { margin-top: 7px; color: var(--nrx-text-2, #9b9ca0); font-size: var(--nrx-type-meta, 11.5px); line-height: 1.45; } .nrx-pick-caveat:empty { display: none; } / --- building the catalogue ----------------------------------------------- The reason this exists at all: the size of the catalogue was a number in a footer, and the only way to change it on purpose was to open the settings page, scroll past everything else on it, find a card most people never reached, read three depth options and press Start. So the control moved to the line that states the number. Nobody has to know a catalogue exists, or what a sweep is, or that either can be made bigger — the panel says what it drew from and offers to widen it, in that order, at the moment the size is actually on the reader's mind. One line until asked. A picker that opens with a job queue in it is a different product. / .nrx-pick-build { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .nrx-pick-build-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; } / --- a catalogue with a hole in it ---------------------------------------- When the last sweep covered less than CATALOGUE_COVERAGE_OK, this block stops being a footnote. It is the one state in the panel worth interrupting for, and the reason is that it has no symptom: a picker drawing from two thirds of a library returns plausible answers every time, and nothing on screen says a third of the candidates were never considered. An invisible ceiling is worse than a visible error, because nobody goes looking for it. Weight and a rail, not colour. Green means "IMDb says this is worth watching" and nothing else in this product — an amber or red warning here would be the fourth surface to quietly borrow the rating palette, and it would sit inches beneath an actual rating while doing so. / .nrx-pick-build[data-thin] { border-top-color: rgba(255, 255, 255, 0.16); padding-left: 10px; margin-left: -10px; border-left: 2px solid var(--nrx-accent, #f4f4f5); } .nrx-pick-build[data-thin] .nrx-pick-build-state { color: var(--nrx-text, #f2f2f2); font-weight: 600; } / The way out, promoted to match. Everywhere else this is a quiet chip; here it is the answer to the sentence beside it, so it fills like the Watch button — the only other control in this panel that is what you came to press. / .nrx-pick-build[data-thin] .nrx-pick-build-toggle { background: var(--nrx-accent, #f4f4f5); border-color: var(--nrx-accent, #f4f4f5); color: var(--nrx-accent-ink, #0e0e0f); } .nrx-pick-build[data-thin] .nrx-pick-build-toggle:hover { background: #ffffff; border-color: #ffffff; } / BELOW 40%: THE ASK. [data-thin] already spends the accent on a left rule and a filled chip. This tier cannot escalate by reaching for a colour — colour in this extension reports a rating and nothing else, and a warm border here would be the first thing on screen to break that. So it escalates in the two dimensions still free: the rule gains weight, and the block gains a faint wash that lifts it off the panel. Both monochrome, both under the threshold where a panel starts to look like an error. / .nrx-pick-build[data-coverage="low"] { border-left-width: 3px; border-left-color: var(--nrx-accent, #f4f4f5); background: linear-gradient( 90deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 62% ); border-radius: 0 8px 8px 0; } .nrx-pick-build[data-coverage="low"] .nrx-pick-build-state { color: var(--nrx-text, #f2f2f2); } / The one moving part, and it runs once. A pulse that repeats is a notification badge: it keeps asking after the reader has already seen it. This settles. / @media (prefers-reduced-motion: no-preference) { .nrx-pick-build[data-coverage="low"] .nrx-pick-build-toggle { animation: nrx-build-settle 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) 1; } } @keyframes nrx-build-settle { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.34); } 70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .nrx-pick-build-state { min-width: 0; color: var(--nrx-text-2, #9b9ca0); font-size: var(--nrx-type-meta, 11.5px); font-weight: 600; font-variant-numeric: tabular-nums; } / .nrx-glass-chip at footer scale. The chip is the shared overlay control, so the only thing overridden is size — a full-size chip beside 11.5px type reads as the primary action of the panel, which it is emphatically not. / .nrx-pick-build-toggle, .nrx-pick-build-go, .nrx-pick-build-stop { flex: none; padding: 4px 10px; font-size: var(--nrx-type-meta, 11.5px); } .nrx-pick-build-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; } .nrx-pick-build-setup .nrx-pick-ctl { flex: 1 1 160px; } / The note is the whole disclosure: what the chosen depth actually collects, roughly how long it takes, and that nothing is blocked while it runs. It takes the full width so it sits under the select and the button rather than fighting them for the line. / .nrx-pick-build-note { flex: 1 0 100%; margin: 0; color: var(--nrx-text-3, #74757a); font-size: var(--nrx-type-meta, 11.5px); line-height: 1.45; } .nrx-pick-build-run { margin-top: 8px; } / A determinate bar, because the work is countable: genres done over genres total. An indeterminate shimmer would be a lie about a number we have. / .nrx-pick-build-track { height: 4px; margin-bottom: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .nrx-pick-build-fill { height: 100%; width: 0%; border-radius: inherit; / Near-white, not green. Green in this product means "IMDb says this is worth watching" and nothing else — a green progress bar would be the fourth surface to quietly borrow it. / background: var(--nrx-accent, #f4f4f5); transition: width .3s var(--nrx-ease, ease); } .nrx-pick-build-runtext { min-width: 0; color: var(--nrx-text-2, #9b9ca0); font-size: var(--nrx-type-meta, 11.5px); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .nrx-pick-build-fill { transition: none; } } / The live region. Off-screen rather than hidden: `display: none` and the `hidden` attribute both take an element out of the accessibility tree, and a live region nobody can reach announces nothing. / .nrx-pick-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } / --- showing the card the pick came from --------------------------------- The one rule in this file that lands on an element the site owns. Outline rather than border or box-shadow: outlines are drawn outside the box and take part in no layout at all, so a tile wearing this cannot shift its row, and pointer-events, opacity and transform are all left untouched so the site's own hover preview behaves exactly as it always does. Two seconds and it removes itself — see SPOTLIGHT_MS in pick.js. The ring pulses between the accent and a dimmer white. It used to pulse between Netflix red and white, which on a wall of Netflix artwork read as Netflix's own UI marking the tile rather than as ours. / .nrx-pick-spot { outline: 3px solid var(--nrx-accent, #f4f4f5); outline-offset: 3px; border-radius: 4px; animation: nrx-pick-pulse 0.9s ease-in-out 2; } @keyframes nrx-pick-pulse { 0%, 100% { outline-color: var(--nrx-accent, #f4f4f5); } 50% { outline-color: rgba(255, 255, 255, 0.28); } } / Reduced motion switches off the pulse and the smooth scroll's companion fades, leaving a static ring — which is the part that actually does the job. pick.js makes the matching call for scrollIntoView. / @media (prefers-reduced-motion: reduce) { .nrx-pick-spot { animation: none; } .nrx-pick-go, .nrx-pick-preview, .nrx-pick-again, .nrx-pick-show, .nrx-pick-close, .nrx-pick-build-fill { transition: none; } / Both launcher pills, not just this file's: the shared rule above is what puts a transition on either of them now, so this is the only place that can take it off. Child combinator again, so it also beats the `transition: none` genres.css sets on `.nrx-genre-trigger` — same value, but specificity inside a media query is still specificity. / .nrx-launcher > .nrx-launcher-item { transition: none; } } / What the thing is actually about — which for a picker is the single most load-bearing line in the panel. Everything above it says whether the title is any good; this is the only line that says whether you want it. So it is set at reading size, not at footnote size, and given a measure rather than the full panel width. / .nrx-pick-synopsis { margin: 12px 0 0; max-width: 54ch; color: #d2d2d2; font-size: var(--nrx-type-body, 13px); line-height: 1.55; } / Waiting. Two lines of held space, so the panel does not jump when the answer lands — and a slow shimmer rather than a spinner, because nothing here is blocked: every button already works. If the answer never comes the element is hidden again and the space closes. The bars are sized in ch so they track the type, and the second is short the way a last line is. / .nrx-pick-synopsis[data-pending] { max-width: 54ch; } .nrx-pick-synopsis[data-pending]::before, .nrx-pick-synopsis[data-pending]::after { content: ""; display: block; height: 0.62em; margin-top: 0.42em; border-radius: 3px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0.07) 90% ); background-size: 220% 100%; animation: nrx-pick-shimmer 1.5s linear infinite; } .nrx-pick-synopsis[data-pending]::after { width: 62%; } @keyframes nrx-pick-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } / The shimmer is decoration on a wait nobody is blocked by, so it is the first thing to go. A flat bar still holds the space, which is the part that matters. / @media (prefers-reduced-motion: reduce) { .nrx-pick-synopsis[data-pending]::before, .nrx-pick-synopsis[data-pending]::after { animation: none; background: rgba(255, 255, 255, 0.09); } } / The bar is a row of chips now rather than two sentences. Prose in a footer is read once, on the first pick, and skipped on every one after — which is a problem when the question the panel raises is "what did it choose from". Two kinds, told apart by colour rather than by wording: the pick's own bar, and the page's dim filters. They are different settings on different surfaces, and "why was this not offered" has a different answer for each. / .nrx-pick-bar { display: flex; flex-wrap: wrap; gap: 5px; } .nrx-pick-barchip { padding: 3px 8px; border-radius: 999px; font-size: var(--nrx-type-meta, 11.5px); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; border: 1px solid transparent; } / The pick's own bar: what it drew from. Brightness separates it from the dim chips below, not hue — this used to be a pale green (#a8e6bb), which put the "worth watching" colour on a statement about a filter setting, inches from a score wearing the same colour to mean something else entirely. / .nrx-pick-barchip[data-kind="bar"] { background: rgba(255, 255, 255, 0.14); border-color: var(--nrx-accent-line, rgba(255, 255, 255, 0.42)); color: var(--nrx-accent, #f4f4f5); } / The dim filters: what the page is hiding, which is a different question. */ .nrx-pick-barchip[data-kind="dim"] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #c9c9c9; }