/* Find source / who's in this (media/source-find.js).
   The "Find a better copy" dialog's walnut-and-gold language (duplicate-video
   .css supplies the shell, buttons and tokens), grown into a popout: a pinned
   header, a frame strip, then one ruled section per check that fills in live.
   No cards: sections are rules and rows, results are rows with their art. */
.source-find {
  --sf-line: #ffffff1c;
  --sf-soft: #ffffff0a;
  --sf-coral: #f0a48f;
  --sf-pad: 28px;
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
/* The hand-raised privacy cover and the lock are plain fixed layers; a modal
   <dialog> lives in the top layer ABOVE them, so it hides itself while either
   is up rather than painting frames over the cover. */
body.locked .source-find, body.privacy-covered .source-find,
body.locked .source-find::backdrop, body.privacy-covered .source-find::backdrop { visibility: hidden !important; }
.source-find.is-drop { outline: 2px dashed var(--dv-gold); outline-offset: -8px; }

/* minmax(0, 1fr): the one column is the dialog's width, never the widest
   row's min-content (a nowrap line used to push the phone sheet 40px past
   the screen, clipping the close button). */
.sf-sheet { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-height: calc(100dvh - 32px); }
.sf-head { position: relative; padding: 24px var(--sf-pad) 16px; border-bottom: 1px solid var(--sf-line); }
.source-find .sf-title { margin: 6px 52px 6px 0; font-size: 27px; }
.sf-title:focus { outline: none; }
.sf-sub { margin: 0; color: var(--dv-muted); font-size: 14px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-right: 40px; }
.sf-body { overflow-y: auto; overscroll-behavior: contain; padding: 20px var(--sf-pad) 28px; scrollbar-gutter: stable; }
.sf-status { margin: 12px 0 0; }

/* ── the frames ─────────────────────────────────────────────────────── */
.sf-subject[hidden], .sf-steps[hidden], .sf-paste [hidden] { display: none; }
.sf-frames { display: grid; grid-template-columns: repeat(var(--sf-cols, 6), minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #141719; border: 1px solid #ffffff18;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.sf-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-frame.is-new img { animation: sf-develop .5s ease-out both; }
.sf-frame-time { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: #141719e0; color: #fff0dc; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-frame.is-here { border-color: #b99159; }
.sf-frame.is-here .sf-frame-time { color: var(--dv-gold); }
.sf-frame.is-hit { border-color: var(--dv-gold); box-shadow: 0 0 0 1px var(--dv-gold), 0 6px 18px #0008; transform: translateY(-2px); }
.sf-frame.is-loading { background: linear-gradient(100deg, #17191b 30%, #23262a 50%, #17191b 70%) 0 0 / 300% 100%; animation: sf-shimmer 1.4s linear infinite; }
/* One picture: shown whole, over a blur of itself, so the row is filled
   without stretching or cropping the thing being searched. */
.sf-subject.is-single .sf-frame { aspect-ratio: auto; height: clamp(160px, 28vh, 260px); }
.sf-subject.is-single .sf-frame::before { content: ''; position: absolute; inset: -24px; background: var(--sf-bg, none) center / cover; filter: blur(22px) brightness(.55) saturate(1.1); }
.sf-subject.is-single .sf-frame img { object-fit: contain; }

/* ── a check ────────────────────────────────────────────────────────── */
.sf-step { padding: 20px 0 18px; border-top: 1px solid var(--sf-line); }
.sf-steps { margin-top: 20px; }
.sf-step-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.sf-step-icon { width: 28px; height: 28px; object-fit: contain; margin-top: 1px; }
.sf-step.is-skipped .sf-step-icon, .sf-step.is-pending .sf-step-icon { filter: grayscale(.7) brightness(.8); }
.source-find .sf-step-title { margin: 0; font-size: 16px; line-height: 1.3; color: var(--dv-ink); }
.sf-step-lead { margin: 3px 0 0; color: var(--dv-muted); font-size: 13px; line-height: 1.45; text-wrap: pretty; max-width: 62ch; }
.sf-step-state { padding-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dv-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-step.is-running .sf-step-state { color: var(--dv-gold); }
.sf-step.is-done .sf-step-state { color: var(--dv-ink); }
.sf-step.is-failed .sf-step-state { color: var(--sf-coral); }
.sf-step-progress { height: 2px; margin: 14px 0 0 40px; border-radius: 2px; background: #ffffff10; overflow: hidden; }
.sf-step-progress span { display: block; width: 32%; height: 100%; border-radius: inherit; background: var(--dv-gold); animation: sf-sweep 1.3s ease-in-out infinite; }
.sf-step.is-pending .sf-step-progress span { background: #ffffff30; animation-duration: 2.4s; }
.sf-step-note { margin: 10px 0 0 40px; color: var(--dv-muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.sf-step.is-failed .sf-step-note { color: var(--sf-coral); }

/* ── results: rows with their art, never boxes ──────────────────────── */
.sf-hits { display: grid; margin: 14px 0 0 40px; }
.sf-hit { display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "art main" "art act" "art extra";
  column-gap: 16px; padding: 14px 0; border-top: 1px solid var(--sf-line); }
.sf-hit > .sf-hit-art { grid-area: art; }
.sf-hit > .sf-hit-main { grid-area: main; }
.sf-hit > .sf-hit-actions { grid-area: act; }
.sf-hit > .sf-confirm, .sf-hit > .sf-done { grid-area: extra; align-self: start; }
.sf-hit:first-child { border-top: 0; padding-top: 4px; }
.sf-hit.is-new { animation: sf-rise .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--sf-i, 0) * 70ms); }
.sf-hit-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #141719; border: 1px solid #ffffff14; align-self: start; }
.sf-hit-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-hit-art.is-empty { background: repeating-linear-gradient(135deg, #17191b 0 10px, #1b1e21 10px 20px); }
.sf-hit.is-performer { grid-template-columns: 88px minmax(0, 1fr); }
.sf-hit.is-performer .sf-hit-art { aspect-ratio: 1; border-radius: 50%; }
.sf-hit-main { min-width: 0; display: grid; align-content: start; gap: 4px; }
.sf-hit-sourcerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.sf-hit-source { margin: 0; color: var(--dv-gold); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.source-find .sf-hit-title { margin: 0; font-size: 16px; line-height: 1.35; color: var(--dv-ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-wrap: pretty; overflow-wrap: anywhere; }
.sf-hit-meta { margin: 0; color: var(--dv-muted); font-size: 13px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sf-conf { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--dv-ink); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-conf-bar { width: 44px; height: 4px; border-radius: 4px; background: #ffffff18; overflow: hidden; }
.sf-conf-bar span { display: block; height: 100%; border-radius: inherit; background: var(--dv-gold); }
.sf-conf.is-low { color: var(--dv-muted); }
.sf-conf.is-low .sf-conf-bar span { background: #b9915980; }
/* Performers on a scene: one line that scrolls, never a ragged wrap. */
.sf-chips { display: flex; flex-wrap: nowrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.sf-chips::-webkit-scrollbar { display: none; }
.sf-chip { flex: none; padding: 3px 10px; border: 1px solid #ffffff26; border-radius: 999px; background: var(--sf-soft); color: var(--dv-ink); font-size: 12px; line-height: 1.5; white-space: nowrap; }
.sf-chip:last-child { margin-right: 24px; }

.sf-hit-actions { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 8px; min-width: 0; }
.source-find .sf-act { display: inline-grid; place-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid #ffffff35; border-radius: 8px; background: #ffffff08; color: var(--dv-ink);
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.source-find .sf-act:hover { background: #ffffff15; border-color: var(--dv-gold); }
.source-find .sf-act:focus-visible { outline: 2px solid var(--dv-gold); outline-offset: 2px; }
.source-find .sf-act.is-gold { color: var(--dv-gold); border-color: #b99159; }
.source-find .sf-act:disabled { opacity: .55; cursor: default; }
.source-find .sf-more { min-height: 36px; margin: 10px 0 0 40px; padding: 6px 14px; font-size: 13px; color: var(--dv-gold); }
.sf-done { margin: 8px 0 0; color: var(--dv-gold); font-size: 13px; line-height: 1.5; }

/* An inline question (in place of an overlay that would open under us). */
.sf-confirm { margin-top: 10px; padding: 14px 16px; border-left: 2px solid var(--dv-gold); background: #e8bb780f; border-radius: 0 8px 8px 0; animation: sf-rise .25s ease-out both; }
.sf-confirm-title { margin: 0; color: var(--dv-ink); font-size: 14px; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.sf-confirm-text { margin: 4px 0 0; color: var(--dv-muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; overflow-wrap: anywhere; }
.sf-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sf-confirm-error { margin: 8px 0 0; color: var(--sf-coral); font-size: 13px; }

/* ── "This is the original": the findings diff ──────────────────────
   The same inline question, grown a ruled list of changes: a tick box, what
   it is (small caps, one column), and what changes. Rows, not cards. */
.sf-clue > .sf-confirm, .sf-clue > .sf-applied, .sf-clue > .sf-done { grid-column: 1 / -1; }
.sf-clue-actions { margin-top: 0; }
.sf-fx-tier { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0 0 6px; font-size: 12px; line-height: 1.4; }
.sf-fx-tier-word { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dv-gold); white-space: nowrap; }
.sf-fx-tier.is-likely .sf-fx-tier-word { color: var(--dv-ink); }
.sf-fx-tier.is-leads .sf-fx-tier-word { color: var(--dv-muted); }
.sf-fx-tier-why { min-width: 0; color: var(--dv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-fx-progress { margin: 12px 0 0; }
.sf-fx-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.sf-fx-row { display: grid; grid-template-columns: 20px 92px minmax(0, 1fr); grid-template-areas: "check kind body"; column-gap: 12px; align-items: center;
  min-height: 44px; padding: 8px 0; border-top: 1px dashed #ffffff14; }
.sf-fx-row:first-child { border-top: 0; }
.sf-fx-row.is-title, .sf-fx-row.is-note { align-items: start; }
.sf-fx-row.is-title .sf-fx-check, .sf-fx-row.is-note .sf-fx-check, .sf-fx-row.is-title .sf-fx-kind, .sf-fx-row.is-note .sf-fx-kind { margin-top: 3px; }
.sf-fx-check { grid-area: check; width: 20px; height: 20px; margin: 0; accent-color: var(--dv-gold); cursor: pointer; }
.sf-fx-check:focus-visible { outline: 2px solid var(--dv-gold); outline-offset: 2px; }
.sf-fx-check:disabled { cursor: default; opacity: .5; }
.sf-fx-kind { grid-area: kind; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-muted); white-space: nowrap; cursor: pointer; }
.sf-fx-body { grid-area: body; min-width: 0; transition: opacity .16s ease; }
.sf-fx-row.is-off .sf-fx-body { opacity: .5; }
.sf-fx-old { margin: 0 0 6px; color: var(--dv-muted); font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: line-through; text-decoration-color: #f0a48f99; }
.sf-fx-row.is-off .sf-fx-old { text-decoration: none; }
.source-find .sf-fx-input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid #ffffff35; border-radius: 8px; background: #0000002e;
  color: var(--dv-ink); font: inherit; font-size: 15px; font-weight: 600; }
.source-find .sf-fx-input:focus-visible { outline: 2px solid var(--dv-gold); outline-offset: 2px; border-color: var(--dv-gold); }
.source-find .sf-fx-input:disabled { opacity: .7; }
.sf-fx-why { margin: 4px 0 0; color: var(--dv-muted); font-size: 12px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-fx-row.is-title .sf-fx-why, .sf-fx-row.is-note .sf-fx-why { white-space: normal; text-wrap: pretty; }
.sf-fx-person, .sf-fx-origin { display: grid; align-items: center; gap: 10px; }
.sf-fx-person { grid-template-columns: 32px minmax(0, 1fr); }
.sf-fx-origin { grid-template-columns: 20px minmax(0, 1fr) auto; }
.sf-fx-origin:has(> .sf-site-icon[hidden]) { grid-template-columns: minmax(0, 1fr) auto; }
.sf-fx-avatar { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: #2c2824; border: 1px solid #ffffff22;
  color: var(--dv-gold); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.sf-fx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sf-fx-words { min-width: 0; }
.sf-fx-name { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--dv-ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.sf-fx-name-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sf-fx-new { flex: none; padding: 1px 7px; border: 1px solid #b99159; border-radius: 4px; color: var(--dv-gold); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }
.source-find .sf-fx-open { min-height: 32px; padding: 4px 12px; font-size: 12px; }
.sf-fx-note { margin: 0; color: var(--dv-ink); font-size: 13px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.sf-fx .sf-confirm-actions { align-items: center; }
.sf-fx-keys { margin-left: auto; color: var(--dv-muted); font-size: 12px; white-space: nowrap; }
.source-find .sf-fx-apply { min-width: 96px; }
@media (pointer: coarse) { .sf-fx-keys { display: none; } .sf-fx-check { width: 24px; height: 24px; } .sf-fx-row { grid-template-columns: 24px 92px minmax(0, 1fr); } }

/* Applied · Undo: one line of what happened, the undo beside it. */
.sf-applied { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; margin-top: 10px; padding: 10px 0 0; border-top: 1px solid #e8bb7840;
  animation: sf-rise .25s ease-out both; }
.sf-applied > :not(.sf-applied-words):not(.sf-act) { grid-column: 1 / -1; }
.sf-applied-words { margin: 0; color: var(--dv-ink); font-size: 13px; line-height: 1.5; text-wrap: pretty; min-width: 0; }
.sf-applied-lead { color: var(--dv-gold); font-weight: 700; }
.sf-applied-kept { margin: 0; color: var(--dv-muted); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.sf-hit > .sf-applied { grid-area: extra; align-self: start; }
.sf-page > .sf-applied { grid-column: 1 / -1; }

/* ── the web: sites ranked by frames hit, pages under each ──────────── */
.sf-web-offer { margin: 14px 0 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.sf-web-line { margin: 0; color: var(--dv-ink); font-size: 14px; line-height: 1.5; text-wrap: pretty; max-width: 60ch; }
.source-find .sf-web-go { grid-column: auto; padding-inline: 22px; white-space: nowrap; }
.sf-sites { display: grid; gap: 4px; margin: 14px 0 0 40px; }
.sf-site { padding: 12px 0 6px; border-top: 1px solid var(--sf-line); }
.sf-site:first-child { border-top: 0; padding-top: 2px; }
.sf-site.is-new { animation: sf-slide .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--sf-i, 0) * 80ms); }
.sf-site-head { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sf-site-head:has(.sf-site-icon[hidden]) { grid-template-columns: minmax(0, 1fr) auto; }
.sf-site-icon { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; }
.source-find .sf-site-name { margin: 0; font-size: 15px; color: var(--dv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-site-count { color: var(--dv-gold); font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-page { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 10px 0 8px 30px; }
.sf-page + .sf-page { border-top: 1px dashed #ffffff12; }
.sf-page > .sf-confirm, .sf-page > .sf-done { grid-column: 1 / -1; }
.sf-page-words { min-width: 0; }
.sf-page-title { margin: 0; color: var(--dv-ink); font-size: 14px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-page-url { margin: 1px 0 0; color: var(--dv-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.sf-page-engines { margin: 2px 0 0; color: #a99d8c; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-page .sf-hit-actions { margin-top: 0; }
.sf-site-more { margin: 2px 0 0 30px; color: var(--dv-muted); font-size: 12px; }
/* A search or listing page matched a look-alike thumbnail, not the video:
   kept, but quieter than a page that is one video. */
.sf-page.is-listing .sf-page-title { color: var(--dv-muted); }
.sf-page.is-listing .sf-page-url { opacity: .7; }
/* One-frame face guesses, shown only on request: dimmed so they never read
   as an identification. */
.sf-weak { margin-top: 4px; }
/* Clues: what several checks agree on, above the per-check sections. A
   ruled list, not cards: kind on the left in small caps, the value and its
   evidence beside it. */
.sf-clues { padding: 18px 0 16px; border-top: 1px solid var(--sf-line); }
.sf-clues-head { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.sf-clue-list { list-style: none; margin: 12px 0 0 40px; padding: 0; display: grid; }
.sf-clue { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 0; }
.sf-clue + .sf-clue { border-top: 1px dashed #ffffff12; }
.sf-clue-kind { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-muted); white-space: nowrap; }
.sf-clue.is-strong .sf-clue-kind { color: var(--dv-gold); }
.sf-clue-main { min-width: 0; }
.sf-clue-value { margin: 0; color: var(--dv-ink); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-clue-why { margin: 2px 0 0; color: var(--dv-muted); font-size: 12px; line-height: 1.45; text-wrap: pretty; }
.sf-page.is-same .sf-page-title { color: var(--dv-gold); }
/* Its own poster is one of our frames: as strong a lead as the same length. */
.sf-page.is-picture .sf-page-title { color: var(--dv-gold); }
.sf-hit.is-corroborated .sf-hit-source { color: var(--dv-gold); }
@media (max-width: 600px) {
  .sf-clue-list { margin-left: 0; }
  .sf-clue { grid-template-columns: minmax(0, 1fr) auto; }
  .sf-clue-kind { grid-column: 1 / -1; }
}
.sf-hits.is-weak .sf-hit { opacity: .62; }
.sf-hits.is-weak .sf-hit:hover, .sf-hits.is-weak .sf-hit:focus-within { opacity: .9; }

/* ── paste a link or a picture ──────────────────────────────────────── */
.sf-paste { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--sf-line); }
.sf-paste.is-primary { margin-top: 0; padding-top: 4px; border-top: 0; }
.sf-paste .better-copy-field { margin-bottom: 8px; }
.sf-paste-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.sf-paste-row:has(> .sf-act[hidden]) { grid-template-columns: minmax(0, 1fr) auto; }
.sf-paste .sf-act { min-height: 44px; }
.sf-paste-hint { margin: 0; color: var(--dv-muted); font-size: 12px; line-height: 1.5; text-wrap: pretty; }

/* ── motion ─────────────────────────────────────────────────────────── */
@keyframes sf-shimmer { to { background-position: -300% 0; } }
@keyframes sf-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
@keyframes sf-develop { from { opacity: 0; filter: brightness(1.6) saturate(.2); } to { opacity: 1; filter: none; } }
@keyframes sf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sf-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .source-find *, .source-find *::before { animation: none !important; transition: none !important; }
  .sf-frame.is-hit { transform: none; }
}

@media (pointer: coarse) {
  .source-find .sf-act, .source-find .sf-more { min-height: 44px; }
}

/* ── a phone: a sheet from the bottom, everything in one column ─────── */
@media (max-width: 600px) {
  .source-find { --sf-pad: 18px; box-sizing: border-box; width: 100vw; max-width: 100vw; max-height: 94dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .sf-sheet { max-height: 94dvh; }
  .sf-head { padding-top: 20px; }
  .source-find .sf-title { font-size: 23px; }
  .sf-frames { grid-template-columns: repeat(var(--sf-pcols, 3), minmax(0, 1fr)); gap: 6px; }
  .sf-hits, .sf-sites, .sf-web-offer, .sf-step-note { margin-left: 0; }
  .sf-step-progress { margin-left: 0; }
  .source-find .sf-more { margin-left: 0; }
  .sf-hit { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .sf-hit.is-performer { grid-template-columns: 64px minmax(0, 1fr); }
  /* Actions take the whole row under the art: the main one fills, the
     second (Open / Profile) is as wide as its word. */
  .sf-hit { grid-template-rows: auto; grid-template-areas: "art main" "act act" "extra extra"; }
  .sf-hit-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: 10px; }
  .sf-hit-actions > :only-child { grid-column: 1 / -1; }
  .sf-hit-sourcerow { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sf-web-offer { grid-template-columns: minmax(0, 1fr); }
  .sf-page { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .sf-page .sf-hit-actions { grid-column: auto; }
  .sf-site-more { margin-left: 0; }
  /* The findings diff: the tick and what it is on one line, the change
     under it across the width. */
  .sf-fx-row, .sf-fx-row.is-title, .sf-fx-row.is-note { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "check kind" ". body"; row-gap: 6px; align-items: center; }
  .sf-fx-row.is-title .sf-fx-check, .sf-fx-row.is-note .sf-fx-check, .sf-fx-row.is-title .sf-fx-kind, .sf-fx-row.is-note .sf-fx-kind { margin-top: 0; }
  .sf-fx .sf-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-fx .sf-confirm-actions > :only-child { grid-column: 1 / -1; }
  .sf-fx-keys { display: none; }
  .sf-confirm { padding: 12px 14px; }
  /* Three actions on a page row: "This is the original" takes the whole
     row and the other two share the next one evenly (never 2 + 1 ragged). */
  .sf-hit-actions.has-original:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-hit-actions.has-original:has(> :nth-child(3)) > :first-child { grid-column: 1 / -1; }
  .sf-clue-actions.has-original { grid-column: 1 / -1; }
  .sf-applied { grid-template-columns: minmax(0, 1fr); }
  .sf-applied > .sf-act { justify-self: stretch; }
  .sf-paste-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-paste-row > input { grid-column: 1 / -1; font-size: 16px; }
  .sf-paste-row:has(> .sf-act[hidden]) { grid-template-columns: minmax(0, 1fr); }
}