/* Yezbi brand for Movie Night (Derek, October 8, 2026; local only, not deployed). Loaded after styles.css with
   /shared/brand/yezbi-tokens.css and brand-header.css (recipe: shared/brand/README.md).
   Movie Night has one theme, dark, and no theme preference: <html data-yezbi-theme="dark"> is fixed in the page,
   nothing is stored and no saved setting changes. Without that attribute the earlier colors in styles.css apply.
   Roles: neutral deep-slate surfaces; the softer action blue (--yz-primary) for primary actions, selection and
   focus; restrained terracotta (--yz-emphasis) for the occasional highlight (Saved, kid mode, the sign-in kicker,
   "Leaving" dates); green for success. Gold carries the "meh" score band and personal stars, teal the TV badge.
   Kept as they are: the score bands' meaning (green good, yellow meh, red bad), the catalog's service logos on
   a dark plate, the black trailer player, the dark scrims over posters, Roku purple, and each child's avatar. */

/* App variables mapped onto the brand roles. */
html[data-yezbi-theme="dark"] {
  --bg: var(--yz-background);
  --bg-elev: var(--yz-surface);
  --bg-elev-2: var(--yz-raised);
  --text: var(--yz-text);
  --text-muted: var(--yz-muted);
  --text-dim: var(--yz-muted);
  --accent: var(--yz-primary);
  --good: var(--yz-success);
  --bad: var(--yz-danger);
  /* New in this file: decorative dividers, 3:1 control edges, text on the action blue, the "meh" band. */
  --mn-line: var(--yz-border);
  --mn-control-line: var(--yz-control-border);
  --mn-on-accent: var(--yz-on-primary);
  --mn-meh: var(--yz-gold);
  color-scheme: dark;
}

/* ---- Header: Yezbi wordmark → "Movie Night" → the Movie Night icon, one link home (Discover). ---------------
   Wider screens: one row, the lockup at the left, the tabs centered in the space left, the account controls at
   the right. The bar has a fixed height so the sticky search row, filter sidebar and controls sit exactly under it
   (they were set for a ~50px bar). When space runs short the tabs scroll sideways with a soft edge, as they
   already did on phones, instead of pushing the lockup or the controls off the screen. Phones keep two rows:
   the lockup and icon buttons, then the tabs. */
:root { --mn-topbar-height: 60px; --mn-search-height: 60px; }
.topbar {
  justify-content: flex-start;
  height: var(--mn-topbar-height);
  padding: 0 18px;
  background: var(--yz-header-bg, var(--bg-elev));
}
.topbar-brand { --yezbi-brand-size: 20px; flex: 0 0 auto; }
.topbar-nav { margin-inline: auto; }
.search-row { top: var(--mn-topbar-height); height: var(--mn-search-height); align-items: center; padding-block: 0; }
.sidebar {
  top: calc(var(--mn-topbar-height) + var(--mn-search-height));
  max-height: calc(100vh - var(--mn-topbar-height) - var(--mn-search-height));
}
.content-sticky-controls { top: calc(var(--mn-topbar-height) + var(--mn-search-height)); }

/* Account & settings: a gear and its words; just the gear (named by its words) where space is short.
   The family button: its icon and the profile label ("Adult mode" or the chosen children), shortened with an
   ellipsis when long; the full label is always the button's name and title. */
.topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.topbar-btn-icon { width: 17px; height: 17px; flex: none; }
.family-profile-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.family-profile-icon { flex: none; }
.family-profile-label { min-width: 0; max-width: 11em; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 541px) {
  .topbar-nav { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-nav.nav-overflow-right:not(.nav-overflow-left) {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
  }
  .topbar-nav.nav-overflow-left:not(.nav-overflow-right) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 100%);
  }
  .topbar-nav.nav-overflow-left.nav-overflow-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  }
  .nav-btn { flex: 0 0 auto; }
}
@media (max-width: 1260px) {
  .topbar { gap: 12px; }
  .topbar-brand { --yezbi-brand-size: 18px; }
  .account-control > span { display: none; }
  .topbar-icon-btn { width: 40px; height: 40px; padding: 0; }
  .topbar-icon-btn .topbar-btn-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .topbar-btn-icon { width: 19px; height: 19px; }
  .family-profile-label { max-width: 9em; }
}
@media (max-width: 1000px) {
  .topbar { padding: 0 12px; }
  .topbar-brand { --yezbi-brand-size: 16px; }
  .nav-btn { padding: 6px 9px; }
  /* Adult mode is the quiet default: the family icon alone (named "Adult mode"). In kid mode the chosen
     children's names stay beside it. */
  .family-profile-btn:not(.active) { width: 40px; height: 40px; padding: 0; }
  .family-profile-btn:not(.active) .family-profile-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .family-profile-btn.active { min-height: 40px; }
  .family-profile-label { max-width: 6em; }
}
@media (max-width: 540px) {
  .topbar { height: auto; padding: 8px 10px 6px; row-gap: 6px; column-gap: 8px; }
  .topbar-brand { --yezbi-brand-size: clamp(12px, 3.8vw, 16px); min-height: 44px; align-self: center; }
  .topbar-nav { margin-inline: 0; }
  .topbar-actions { gap: 6px; align-items: center; }
  .topbar-icon-btn, .family-profile-btn:not(.active) { width: 44px; height: 44px; }
  .family-profile-btn.active { min-height: 44px; padding: 0 12px; }
  .family-profile-label { max-width: 5em; }
  .search-row { height: auto; padding-block: 10px; }
}
@media (max-width: 360px) {
  .topbar { padding-inline: 8px; column-gap: 6px; }
  .topbar-actions { gap: 4px; }
}
/* Where even a short name would squeeze the tabs (below 361px, and 541–700px where the tabs share the row), the
   children's names move into the button's name and title only; the highlighted button still shows kid mode. */
@media (max-width: 360px), (min-width: 541px) and (max-width: 700px) {
  .family-profile-btn.active { width: 44px; padding: 0; }
  .family-profile-btn.active .family-profile-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* Sign-in screen: the same lockup above the heading (decorative; the heading names the app). */
.account-gate-brand { --yezbi-brand-size: clamp(15px, 4.4vw, 19px); margin-bottom: 18px; }

/* ---- Colors ------------------------------------------------------------------------------------------- */
html[data-yezbi-theme="dark"] body { background: var(--yz-background); color: var(--yz-text); }

/* Header and search row: the slate bar with its divider, quiet tabs, outlined buttons. */
html[data-yezbi-theme="dark"] .nav-btn { color: var(--yz-muted); }
html[data-yezbi-theme="dark"] .nav-btn:hover { color: var(--yz-text); background: var(--yz-raised); }
html[data-yezbi-theme="dark"] .nav-btn.active { background: var(--yz-primary-soft); color: var(--yz-primary); font-weight: 650; }
html[data-yezbi-theme="dark"] :is(.topbar-btn, .content-btn) {
  background: transparent; color: var(--yz-text); border-color: var(--mn-control-line);
}
html[data-yezbi-theme="dark"] :is(.topbar-btn, .content-btn):hover { background: var(--yz-raised); border-color: var(--yz-primary); }
/* Kid mode is on: restrained terracotta, so it reads as a notable state rather than another action. */
html[data-yezbi-theme="dark"] .family-profile-btn.active {
  background: var(--yz-emphasis-soft); color: var(--yz-text); border-color: var(--yz-emphasis); font-weight: 700;
}
html[data-yezbi-theme="dark"] .search-row { background: var(--yz-surface); border-bottom-color: var(--mn-line); }
html[data-yezbi-theme="dark"] :is(.search-input, .services-search-input) {
  background: var(--yz-raised); color: var(--yz-text); border-color: var(--mn-control-line);
}
html[data-yezbi-theme="dark"] :is(.search-input, .services-search-input)::placeholder { color: var(--yz-muted); opacity: 1; }
html[data-yezbi-theme="dark"] :is(.search-input, .services-search-input):focus { border-color: var(--yz-primary); }

/* Sidebar filters: neutral groups on the slate, 3:1 field edges, the action blue only on Apply and the sliders. */
html[data-yezbi-theme="dark"] .sidebar { border-right-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .preset-bar { border-bottom-color: var(--mn-line); }
html[data-yezbi-theme="dark"] :is(.preset-bar > select, .sidebar .filter select, .filter select, .content-sort select, .services-sort select) {
  background: var(--yz-raised); color: var(--yz-text); border-color: var(--mn-control-line);
}
html[data-yezbi-theme="dark"] :is(.preset-bar-btn, .sidebar-clear-btn) { background: transparent; border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .preset-bar-btn { color: var(--yz-text); }
html[data-yezbi-theme="dark"] .preset-bar-btn:disabled { color: var(--yz-muted); border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .preset-bar-btn-update:not(:disabled) { color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .sidebar-clear-btn { color: var(--yz-muted); }
html[data-yezbi-theme="dark"] .preset-bar-reset { border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .preset-bar-reset:hover { border-color: var(--yz-danger); color: var(--yz-danger); }
html[data-yezbi-theme="dark"] .filter-group { background: var(--yz-background); }
html[data-yezbi-theme="dark"] .filter-group-tinted { background: var(--yz-background); border: 1px solid var(--mn-line); }
html[data-yezbi-theme="dark"] .range-track { background: var(--mn-control-line); }
html[data-yezbi-theme="dark"] :is(.filter-apply, .sidebar .filter-apply, .btn-primary, .sidebar-drawer-done, .account-retry, .family-primary, .trailer-play-btn) {
  background: var(--yz-primary); color: var(--yz-on-primary); border-color: var(--yz-primary);
}
html[data-yezbi-theme="dark"] :is(.filter-apply, .sidebar .filter-apply, .btn-primary, .sidebar-drawer-done, .account-retry, .family-primary, .trailer-play-btn):hover {
  background: var(--yz-primary-hover); filter: none;
}
html[data-yezbi-theme="dark"] .sidebar .sidebar-drawer-head { border-bottom-color: var(--mn-line); }

/* Content controls: Movies/Shows as one outlined segmented control, genres as outlined chips; the choice is soft
   blue with an edge, so selection stays calm next to the posters. */
html[data-yezbi-theme="dark"] .content-header { border-bottom-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .media-type-toggles { background: transparent; border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .media-type-btn { color: var(--yz-muted); }
html[data-yezbi-theme="dark"] .media-type-btn:hover { background: var(--yz-raised); color: var(--yz-text); }
html[data-yezbi-theme="dark"] .media-type-btn.active {
  background: var(--yz-primary-soft); color: var(--yz-primary); box-shadow: inset 0 0 0 1px var(--yz-primary);
}
html[data-yezbi-theme="dark"] .genre-chips { border-bottom-color: var(--mn-line); scrollbar-color: var(--mn-line) transparent; }
html[data-yezbi-theme="dark"] .genre-chip { background: transparent; color: var(--yz-muted); border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .genre-chip:hover { background: var(--yz-raised); color: var(--yz-text); border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .genre-chip.active { background: var(--yz-primary-soft); color: var(--yz-primary); border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .active-filter-chip { background: var(--yz-primary-soft); border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .active-filter-chip-remove { background: transparent; }
html[data-yezbi-theme="dark"] .active-filter-chip-remove:active { background: var(--yz-raised); }
html[data-yezbi-theme="dark"] .discover-load-warning { background: var(--yz-gold-soft); border-color: var(--yz-gold); color: var(--yz-text); }

/* Cards: posters lead. The score bands keep their meaning in the brand's calmer green, gold and rose. */
html[data-yezbi-theme="dark"] .for-you-card { border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] :is(.card-rating, .rating-chip) { background: var(--yz-raised); }
html[data-yezbi-theme="dark"] :is(.card-rating, .rating-chip).good { background: var(--yz-success-soft); color: var(--yz-success); }
html[data-yezbi-theme="dark"] :is(.card-rating, .rating-chip).meh { background: var(--yz-gold-soft); color: var(--yz-gold); }
html[data-yezbi-theme="dark"] :is(.card-rating, .rating-chip).bad { background: var(--yz-danger-soft); color: var(--yz-danger); }
html[data-yezbi-theme="dark"] .card-act:hover { background: var(--yz-primary); color: var(--yz-on-primary); border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .card-act.active { background: var(--yz-primary); color: var(--yz-on-primary); border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .card-saved-badge { background: var(--yz-emphasis); color: var(--yz-background); }
html[data-yezbi-theme="dark"] .card-tv-badge { background: var(--yz-teal); color: var(--yz-background); }
html[data-yezbi-theme="dark"] .card-free-badge { background: var(--yz-success); color: var(--yz-background); }
html[data-yezbi-theme="dark"] .card-my-rating { color: var(--yz-gold); }
html[data-yezbi-theme="dark"] .swipe-badge-pass { background: var(--yz-danger); color: var(--yz-background); }
html[data-yezbi-theme="dark"] .swipe-badge-save { background: var(--yz-emphasis); color: var(--yz-background); }
html[data-yezbi-theme="dark"] .swipe-badge-watched { background: var(--yz-success); color: var(--yz-background); }
html[data-yezbi-theme="dark"] .card-action-error,
html[data-yezbi-theme="dark"] .detail-action-toast { background: var(--yz-danger); color: var(--yz-background); }
html[data-yezbi-theme="dark"] .stats-bar-fill { background: color-mix(in srgb, var(--yz-primary) 40%, var(--yz-raised)); }

/* Dialogs and the detail panel. */
html[data-yezbi-theme="dark"] :is(.modal, .stats-modal, .modal.family-profile-modal) { border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] :is(.stats-modal-header, .modal-head, .modal-foot, .my-rating-section, .detail-offers-strip, .detail-nav-footer) { border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .detail-backdrop::after { background: linear-gradient(180deg, rgb(20 27 38 / .35) 0%, var(--bg-elev) 100%); }
html[data-yezbi-theme="dark"] :is(.detail-close, .detail-nav, .trailer-modal-close, .trailer-modal-minimize):hover:not([disabled]) { background: var(--yz-primary); color: var(--yz-on-primary); }
html[data-yezbi-theme="dark"] .detail-action-btn { background: rgb(20 27 38 / .88); border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .detail-action-btn:hover { background: var(--yz-raised); border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .detail-action-btn.active { background: var(--yz-primary); color: var(--yz-on-primary); border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .my-rating-star { color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] :is(.my-rating-star:hover, .my-rating-star.filled) { color: var(--yz-gold); }
html[data-yezbi-theme="dark"] .offer-btn { background: var(--yz-background); border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .offer-btn:hover { border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .offer-btn.mine { background: var(--yz-primary-soft); border-color: var(--yz-primary); color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .offer-leaving { color: var(--yz-emphasis); }
html[data-yezbi-theme="dark"] .offer-btn.mine .offer-leaving { color: var(--yz-emphasis); }
html[data-yezbi-theme="dark"] .offer-report textarea { border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .btn:not(.btn-primary) { background: var(--yz-raised); box-shadow: inset 0 0 0 1px var(--mn-control-line); }
html[data-yezbi-theme="dark"] .btn-act.active { background: var(--yz-primary-soft); }
html[data-yezbi-theme="dark"] .similar-arrow { background: rgb(20 27 38 / .92); }
html[data-yezbi-theme="dark"] .similar-arrow:hover { color: var(--yz-on-primary); }
html[data-yezbi-theme="dark"] .stats-modal-close { border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .roku-gear-btn { border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .roku-setup-controls input { border-color: var(--mn-control-line); }

/* Family profiles. A child's avatar keeps the color it had (the earlier amber), not a brand token; the name is
   always beside it. The chosen row is a neutral surface with a blue edge and its checked box, never a fill
   in the child's color. */
html[data-yezbi-theme="dark"] .family-kid-row { background: var(--yz-raised); border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .family-kid-row:has(input:checked) { border-color: var(--yz-primary); box-shadow: inset 0 0 0 1px var(--yz-primary); }
html[data-yezbi-theme="dark"] .family-kid-avatar { background: #f59e0b; color: #17120a; }
html[data-yezbi-theme="dark"] :is(.family-field, .family-catalog-summary, .family-lean-fieldset) { border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .family-field { background: var(--yz-raised); }
html[data-yezbi-theme="dark"] :is(.family-field select, .family-field input[type="text"], .family-field input[type="number"], .family-field input[type="password"], .family-wizard-kid input) {
  background: var(--yz-surface); border-color: var(--mn-control-line);
}
html[data-yezbi-theme="dark"] :is(.family-secondary, .family-profile-close) { border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .family-error { color: var(--yz-danger); }
html[data-yezbi-theme="dark"] .content-notes { border-color: var(--mn-line); background: var(--yz-raised); }
html[data-yezbi-theme="dark"] .content-note-surprise, html[data-yezbi-theme="dark"] .content-note-row { border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .beta-pill { background: var(--yz-gold-soft); color: var(--yz-gold); }
html[data-yezbi-theme="dark"] .content-note-score.score-2 { color: var(--yz-gold); }
html[data-yezbi-theme="dark"] :is(.content-policy-verdict, .notes-test-verdict).passes { border-color: var(--yz-success); background: var(--yz-success-soft); }
html[data-yezbi-theme="dark"] :is(.content-policy-verdict, .notes-test-verdict).blocked { border-color: var(--yz-danger); background: var(--yz-danger-soft); }
html[data-yezbi-theme="dark"] .notes-score-pill { background: var(--yz-background); }
html[data-yezbi-theme="dark"] :is(.notes-score-pill.score-0, .notes-score-pill.score-1) { border-color: var(--yz-success); }
html[data-yezbi-theme="dark"] .notes-score-pill.score-2 { border-color: var(--yz-gold); }
html[data-yezbi-theme="dark"] :is(.notes-score-pill.score-3, .notes-score-pill.score-4) { border-color: var(--yz-danger); }

/* Services: the catalog's dark-theme logos keep their dark plate; a chosen service is soft blue with a check. */
html[data-yezbi-theme="dark"] .service-tile { border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .service-tile:hover { border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .service-tile.selected { background: var(--yz-primary-soft); border-color: var(--yz-primary); }
html[data-yezbi-theme="dark"] .service-tile-logo { background: var(--yz-background); }
html[data-yezbi-theme="dark"] .service-tile-logo-blank { border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .service-tile-check { background: var(--yz-primary); color: var(--yz-on-primary); }

/* Settings uses the shared studio controls; their variables follow the same roles. */
html[data-yezbi-theme="dark"] .settings-dialog.lp-ui {
  --lp-bg: var(--yz-background); --lp-card: var(--yz-surface); --lp-fg: var(--yz-text); --lp-muted: var(--yz-muted);
  --lp-line: var(--yz-control-border); --lp-accent: var(--yz-primary); --lp-on-accent: var(--yz-on-primary);
  --lp-focus: var(--yz-focus); --lp-success: var(--yz-success); --lp-danger: var(--yz-danger);
}

/* Sign-in screen: a warm glow on deep slate, the kicker in the restrained terracotta. */
html[data-yezbi-theme="dark"] .account-gate {
  background: radial-gradient(circle at 50% 18%, var(--yz-emphasis-soft), transparent 34rem), var(--yz-background);
}
html[data-yezbi-theme="dark"] .account-gate-panel { border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .account-gate-kicker { color: var(--yz-emphasis); }
html[data-yezbi-theme="dark"] #signin-help { border-color: var(--mn-control-line); }

/* Footer and the content-notes test page. */
html[data-yezbi-theme="dark"] .app-footer { border-top-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .notes-test-topbar { background: var(--yz-surface); border-bottom-color: var(--mn-line); }
html[data-yezbi-theme="dark"] .notes-test-eyebrow { color: var(--yz-emphasis); }
html[data-yezbi-theme="dark"] :is(.notes-test-card, .notes-simulator) { border-color: var(--mn-line); }
html[data-yezbi-theme="dark"] :is(.notes-test-search input, .notes-simulator-controls select) { border-color: var(--mn-control-line); }
html[data-yezbi-theme="dark"] .notes-test-more:hover { background: var(--yz-primary-soft); }
html[data-yezbi-theme="dark"] .notes-test-tag { background: var(--yz-primary-soft); color: var(--yz-primary); }

/* Keyboard focus: a solid ring in the focus blue on everything outside the shared Settings controls (which
   draw their own ring from --lp-focus). Kept at low specificity (:where) so the few rules below can adjust it.
   Cards draw the ring on the card around their open-details button; the tabs draw it inside each tab, so the
   sideways-scrolling tab row never clips it. */
html[data-yezbi-theme="dark"] :where(a, button, select, input, textarea, summary, [tabindex]):focus-visible:where(:not(.lp-ui *, .card-open-detail)) {
  outline: 2px solid var(--yz-focus); outline-offset: 2px;
}
html[data-yezbi-theme="dark"] .nav-btn:focus-visible { outline-offset: -2px; }
html[data-yezbi-theme="dark"] .card-open-detail:focus-visible { outline: none; }
html[data-yezbi-theme="dark"] :is(.card:has(.card-open-detail:focus-visible), .for-you-card:focus-visible) { border-color: var(--yz-focus); outline: 3px solid var(--yz-focus); outline-offset: 2px; }
html[data-yezbi-theme="dark"] .filter select:focus-visible { outline-offset: 2px; }
html[data-yezbi-theme="dark"] .topbar-brand:focus-visible { outline-offset: 4px; }