/* ---------- polish-qa.css ----------
   Small QA-pass UX polish uncovered during E2E testing. Kept out of
   components.css so it's easy to delete if any individual fix turns out
   regrettable. None of these targets ≥1024px — that's the Desktop agent's
   lane (desktop.css). */

/* 1. Visually-hidden helper for screen-reader-only labels. Used by ARIA
      hints we add to icon-only or implicit triggers below. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 2. Sample-row tap target tightening — keep the 56px touch target but
      ensure the focus ring isn't clipped by the parent's overflow. The
      surrounding .cat-body has no overflow:hidden today but if any future
      polish adds one this guards against ring-clipping. */
.sample-row:focus-visible {
  position: relative;
  z-index: 1;
}

/* 3. Settings-overlay focus-trap visual hint — when keyboard users tab to
      the back arrow it should clearly read as the dismiss action. */
.settings-overlay .settings-back:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

/* 4. Picker overlay — backdrop click + ESC close are wired in JS by the
      polish pass; add a faint blur to make the active sheet read as modal
      even on low-contrast wallpaper screenshots. */
.picker-overlay.open .picker-backdrop {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/* 5. No-results empty state — the announcement we added with role="status"
      is silent visually; surface a softer secondary line so the empty
      state doesn't feel like an error. */
.no-results::after {
  content: "Try a different keyword or clear the search.";
  font-size: 13px;
  color: var(--fg-mute);
  font-style: italic;
  margin-top: -6px;
  max-width: 28ch;
  line-height: 1.5;
}

/* 6. Queue-item retry/delete icon buttons — slightly more breathing room
      on the right edge so a long product name doesn't visually crowd the
      36px touch targets. */
.queue-item .queue-name {
  padding-right: 84px;
}
.queue-item:not(:has(.queue-retry)) .queue-name {
  padding-right: 44px;
}