@property  --rvx-spin{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes rvx-orbit{ to{ --rvx-spin:360deg; } }

.rvx{
  --rvx-line:var(--v2-line,#e7eaf1);
  --rvx-ink:var(--v2-ink,#0F0F12);
  --rvx-muted:var(--v2-muted,#4A4A5A);
  --rvx-accent:var(--v2-accent,#3680ED);
  --rvx-accent2:var(--v2-accent2,#2060C0);   /* a FILL — white sits on it */
  --rvx-ink-accent:#2060C0;                  /* the same accent as TEXT */
  /* The primary gradient cannot start at #3680ED: white on it is 3.84:1,
     under the 4.5 bar for the button label. Both ends clear it now. */
  --rvx-btn1:#2B70D7; --rvx-btn2:#1B52A6;
  --rvx-soft:var(--v2-accent-soft,#eef4fe);
  --rvx-surface:#fff;
  --rvx-panel:#FAFCFF;
  --rvx-track:#E6EBF3;
  /* The average is set at ~54px, i.e. LARGE text, so the 3:1 bar applies —
     and the ramp still could not end on #60A4F5, which measures 2.42:1 on a
     washed white card. #3680ED is 3.60:1 and is where the light ramp stops.
     Dark inverts the whole ramp rather than dimming it. */
  --rvx-avg1:#2060C0; --rvx-avg2:#3680ED;
  /* §GOLD (atd-styles) is the single source; the literal is the fallback for
     any host that does not set it. Was #C96C05, an orange-brown that did not
     match the gold on the hero rail or the tool cards. */
  --rvx-star:var(--gold, #F59E0B);
  --rvx-star-off:#7E8798;      /* empty  — the state is also announced in text */
  --rvx-bar1:var(--gold-deep, #B45309); --rvx-bar2:var(--gold, #F59E0B);
  --rvx-bar-edge:#92400E;      /* solid: at .55 alpha the edge fell to 2.47:1 */
  --rvx-err:#C81E1E;
  --rvx-a1:.55; --rvx-a2:.92;
}
body.theme-dark .rvx{
  --rvx-surface:#171922;
  --rvx-panel:#1B1E28;
  --rvx-track:rgba(255,255,255,.09);
  --rvx-ink-accent:#8CBEFA;    /* 9.06:1 on the dark panel */
  --rvx-btn1:#2B70D7; --rvx-btn2:#1B52A6;
  --rvx-err:#FCA5A5;
  --rvx-avg1:#4C8DF2; --rvx-avg2:#9DC8FF;
  --rvx-star:var(--gold, #F59E0B); --rvx-star-off:#6B7484;
  --rvx-bar1:var(--gold-deep, #D97706); --rvx-bar2:var(--gold, #F59E0B);
  --rvx-bar-edge:rgba(0,0,0,.35);
  --rvx-a1:.68; --rvx-a2:1;
}

/* ── Header row ──────────────────────────────────────────────────────── */
.rvx-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
/* ⚠️ UNUSED since 2026-08-13 — the markup was removed from reviews-section
   (one review CTA per section, not two). Kept, with every .rvx-cta rule below
   it, so the header pill is a one-line restore; nothing else in the codebase
   uses the class. Delete the lot if it is still unused next time you are in
   here. */
.rvx-cta{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:10px 18px; border-radius:999px;
  background:var(--rvx-surface); color:var(--rvx-ink-accent);
  border:1px solid rgba(54,128,237,.34); text-decoration:none;
  font-size:.92rem; font-weight:700; white-space:nowrap;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .24s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.rvx-cta svg{ transition:transform 320ms cubic-bezier(.16,1,.3,1); }

/* ── Score band ──────────────────────────────────────────────────────── */
.rvx-score{
  display:grid; grid-template-columns:minmax(190px,auto) minmax(0,1fr);
  gap:22px; align-items:center;
  padding:20px 22px; border-radius:16px;
  background:
    linear-gradient(150deg, rgba(54,128,237,.075) 0%, rgba(54,128,237,.012) 46%, rgba(54,128,237,.05) 100%) no-repeat,
    var(--rvx-panel);
  border:1px solid rgba(54,128,237,.18);
}
body.theme-dark .rvx-score{
  background:
    linear-gradient(150deg, rgba(54,128,237,.13) 0%, rgba(54,128,237,.025) 46%, rgba(54,128,237,.08) 100%) no-repeat,
    var(--rvx-panel);
  border-color:rgba(54,128,237,.28);
}
/* No distribution AND nothing written — every tool page today, since none of
   the 33 carries a rating_1..5 breakdown. The second column holds the ask, so
   the band keeps its two-column shape and the score stops floating in a wide
   empty box. Only when there is nothing at all to put beside it does the band
   collapse to a single centred column. */
.rvx-score[data-dist="0"][data-invite="0"]{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
.rvx-score[data-invite="1"]{ grid-template-columns:minmax(170px,auto) minmax(0,1fr); }

/* ── The invitation, when it rides in the band ────────────────────────── */
.rvx-invite{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-inline-start:22px; min-width:0;
  border-inline-start:1px solid var(--rvx-line);
}
.rvx-invite-ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--rvx-btn1), var(--rvx-btn2)); color:#fff;
  box-shadow:0 5px 15px -4px rgba(32,96,192,.45);
  transition:transform 380ms cubic-bezier(.16,1,.3,1), box-shadow 300ms ease;
}
.rvx-invite-tx{ flex:1 1 190px; min-width:0; }
.rvx-invite-tx .t{ margin:0; font-size:1rem; font-weight:700; color:var(--rvx-ink); line-height:1.35; }
.rvx-invite-tx .s{ margin:3px 0 0; font-size:.88rem; color:var(--rvx-muted); line-height:1.5; overflow-wrap:anywhere; }
.rvx-invite-go{ flex:0 0 auto; margin-top:0; padding:11px 20px; font-size:.92rem; }
@media (hover:hover) and (pointer:fine){
  .rvx-score:hover .rvx-invite-ic{ transform:scale(1.06) rotate(-4deg); box-shadow:0 8px 20px -4px rgba(32,96,192,.55); }
}
@media (prefers-reduced-motion:reduce){
  .rvx-invite-ic{ transition:none !important; }
  .rvx-score:hover .rvx-invite-ic{ transform:none; }
}
/* Below the tablet break the divider becomes a horizontal rule — a vertical
   border on a stacked child draws a stray line down the left edge. */
@media (max-width:767.98px){
  .rvx-invite{
    padding-inline-start:0; padding-top:16px;
    border-inline-start:0; border-top:1px solid var(--rvx-line);
  }
}
.rvx-score-main{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.rvx-avg{
  display:flex; align-items:baseline; gap:2px;
  font-size:3.4rem; font-weight:800; line-height:1; letter-spacing:-.03em;
  background:linear-gradient(120deg, var(--rvx-avg1), var(--rvx-avg2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--rvx-avg1);
  font-variant-numeric:tabular-nums;
}
.rvx-avg .out{ font-size:1.1rem; font-weight:700; letter-spacing:-.01em; opacity:.55; }
.rvx-score-n{ font-size:.85rem; color:var(--rvx-muted); }
.rvx-score .v2-stars{ font-size:1.02rem; }

/* ── Distribution ────────────────────────────────────────────────────── */
.rvx-dist{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.rvx-bar{
  display:grid; grid-template-columns:46px minmax(0,1fr) 44px;
  align-items:center; gap:10px;
  padding:2px 6px; margin-inline:-6px; border-radius:8px;
  transition:background .2s ease;
}
.rvx-bar-k{
  display:inline-flex; align-items:center; gap:4px; justify-content:flex-end;
  font-size:.82rem; font-weight:600; color:var(--rvx-muted); font-variant-numeric:tabular-nums;
}
.rvx-bar-k svg{ color:var(--rvx-star); }
.rvx-bar-track{ display:block; height:9px; border-radius:999px; background:var(--rvx-track); overflow:hidden; }
.rvx-bar-fill{
  display:block; height:100%; width:var(--rvx-pct,0%); border-radius:999px;
  background:linear-gradient(90deg, var(--rvx-bar1), var(--rvx-bar2));
  /* A light amber bar on a light track separates by HUE but barely by
     luminance, so the shape gets a drawn edge rather than relying on the
     fill alone. The percentage is printed beside every bar regardless. */
  box-shadow:inset 0 0 0 1px var(--rvx-bar-edge);
  transition:filter .2s ease;
}
.rvx-bar-v{ font-size:.82rem; font-weight:600; color:var(--rvx-muted); text-align:end; font-variant-numeric:tabular-nums; }

/* ── Sort control ────────────────────────────────────────────────────── */
.rvx-bar-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:22px 0 14px; }
.rvx-count{ font-size:.95rem; font-weight:700; color:var(--rvx-ink); }
.rvx-sort{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--rvx-track); }
.rvx-sort button{
  appearance:none; border:0; cursor:pointer;
  padding:7px 15px; border-radius:999px; background:transparent;
  font-family:inherit; font-size:.84rem; font-weight:600; color:var(--rvx-muted);
  transition:background .2s ease, color .2s ease, box-shadow .24s ease;
}
.rvx-sort button.is-on{
  background:var(--rvx-accent2); color:#fff;      /* 6.01:1 */
  box-shadow:0 2px 8px rgba(32,96,192,.30);
}

/* ── Review cards ────────────────────────────────────────────────────── */
.rvx-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(min(100%,320px),1fr)); align-items:stretch; }
.rvx-card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; gap:11px;
  padding:18px; border-radius:14px;
  background:var(--rvx-surface); border:1px solid var(--rvx-line);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.04);
  transition:border-color .2s ease, box-shadow .24s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
body.theme-dark .rvx-card{ box-shadow:0 1px 2px rgba(0,0,0,.40), 0 4px 14px rgba(0,0,0,.32); }
.rvx-card-top{ display:flex; align-items:center; gap:11px; }
/* The avatar ramp is NOT the old flat one. Those six fills carried a white
   letter at 2.15:1 to 4.23:1 — every one of them under the 4.5:1 bar for
   normal text, #F59E0B and #22C55E badly so. These start at 5.02:1 and run
   darker, so the lightest point of the gradient still passes. Dark mode
   inverts instead of dimming: the bright hue with a near-black letter. */
.rvx-av{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--rvx-av1,#2060C0), var(--rvx-av2,#1A4E9E));
  color:#fff; font-weight:800; font-size:1rem; line-height:1;
  box-shadow:0 3px 10px rgba(16,24,40,.16);
  transition:transform 380ms cubic-bezier(.16,1,.3,1);
}
.rvx-card.c0{ --rvx-av1:#2060C0; --rvx-av2:#1A4E9E; --rvx-rgb:54,128,237; }
.rvx-card.c1{ --rvx-av1:#6D28D9; --rvx-av2:#571FAE; --rvx-rgb:139,92,246; }
.rvx-card.c2{ --rvx-av1:#15803D; --rvx-av2:#106230; --rvx-rgb:16,185,129; }
.rvx-card.c3{ --rvx-av1:#BE185D; --rvx-av2:#98134A; --rvx-rgb:236,72,153; }
.rvx-card.c4{ --rvx-av1:#A85B08; --rvx-av2:#874806; --rvx-rgb:245,158,11; }
.rvx-card.c5{ --rvx-av1:#0A6E88; --rvx-av2:#08566B; --rvx-rgb:34,184,217; }
body.theme-dark .rvx-card.c0{ --rvx-av1:#4C8DF2; --rvx-av2:#3680ED; }
body.theme-dark .rvx-card.c1{ --rvx-av1:#A78BFA; --rvx-av2:#8B5CF6; }
body.theme-dark .rvx-card.c2{ --rvx-av1:#34D399; --rvx-av2:#10B981; }
body.theme-dark .rvx-card.c3{ --rvx-av1:#F472B6; --rvx-av2:#EC4899; }
body.theme-dark .rvx-card.c4{ --rvx-av1:#FBBF24; --rvx-av2:#F59E0B; }
body.theme-dark .rvx-card.c5{ --rvx-av1:#38BDF8; --rvx-av2:#22B8D9; }
body.theme-dark .rvx-av{ color:#0B0D13; }

.rvx-who{ min-width:0; }
.rvx-nm{ display:flex; align-items:center; gap:5px; font-size:.93rem; font-weight:700; color:var(--rvx-ink); overflow-wrap:anywhere; }
.rvx-dt{ font-size:.75rem; color:var(--v2-muted2,#6b7280); }
.rvx-card-top .v2-stars{ margin-inline-start:auto; flex:0 0 auto; font-size:.85rem; }
.rvx-ttl{ font-size:.97rem; font-weight:700; color:var(--rvx-ink); margin:-2px 0 0; line-height:1.35; }
.rvx-body{ margin:0; flex:1 1 auto; font-size:.92rem; line-height:1.62; color:var(--rvx-muted); overflow-wrap:anywhere; }
.rvx-foot{ display:flex; align-items:center; gap:14px; padding-top:11px; border-top:1px solid var(--rvx-line); font-size:.82rem; }
.rvx-act{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0;
  font:inherit; font-size:.82rem; font-weight:600; color:var(--rvx-muted); cursor:pointer;
  text-decoration:none; transition:color .18s ease;
}
.rvx-act.is-on{ color:var(--rvx-ink-accent); }
.rvx-act[disabled]{ cursor:default; }
.rvx-report{ margin-inline-start:auto; }

/* ── Empty states ────────────────────────────────────────────────────── */
.rvx-empty{ text-align:center; padding:34px 18px; }
.rvx-empty .ic{
  width:56px; height:56px; margin:0 auto 12px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--rvx-btn1), var(--rvx-btn2)); color:#fff;
  box-shadow:0 6px 18px rgba(32,96,192,.28);
}
.rvx-empty .t{ font-size:1.08rem; font-weight:700; color:var(--rvx-ink); }
.rvx-empty .s{ font-size:.9rem; color:var(--rvx-muted); margin-top:4px; }
.rvx-empty.is-slim{ padding:22px 18px 4px; }
.rvx-empty.is-slim .ic{ width:44px; height:44px; border-radius:13px; margin-bottom:10px; }

/* ── Write-a-review panel ────────────────────────────────────────────── */
.rvx-write{ margin-top:24px; padding-top:22px; border-top:1px solid var(--rvx-line); }
.rvx-form{
  padding:22px; border-radius:16px;
  background:
    linear-gradient(150deg, rgba(54,128,237,.06) 0%, rgba(54,128,237,.01) 46%, rgba(54,128,237,.045) 100%) no-repeat,
    var(--rvx-panel);
  border:1px solid rgba(54,128,237,.18);
}
body.theme-dark .rvx-form{
  background:
    linear-gradient(150deg, rgba(54,128,237,.12) 0%, rgba(54,128,237,.02) 46%, rgba(54,128,237,.08) 100%) no-repeat,
    var(--rvx-panel);
  border-color:rgba(54,128,237,.28);
}
.rvx-form-t{ font-size:1.18rem; font-weight:700; letter-spacing:-.01em; color:var(--rvx-ink); }
.rvx-form-s{ font-size:.88rem; line-height:1.55; color:var(--rvx-muted); margin:5px 0 18px; }
.rvx-lb{ display:block; font-size:.84rem; font-weight:600; color:var(--rvx-ink); margin-bottom:7px; }

/* Rating input. Real <button>s, not click-handled <span>s: the old markup had
   role="button" with no tabindex, so the control could not be reached or
   operated from a keyboard at all. */
/* ── §RATE — the rating input ──────────────────────────────────────────────
   A tile per star inside an inset track, and the TILE fills rather than the
   glyph. The amber is not the display ramp: a white star needs 3:1 against
   whatever it sits on. With §GOLD set to the brand amber the tile can no
   longer be flat: white on #F59E0B is 2.15:1 and the star nearly vanishes.
   So the tile runs a GRADIENT, --gold-tile → --gold-deep (#F59E0B → #B45309),
   where white measures 2.15 only at the extreme lightest corner and 5.02
   across the body of the tile. That gradient is also what makes it read as
   metal instead of a flat amber square — see the §GOLD banner in atd-styles
   for why the flat glyph colour is what it is.
   ──────────────────────────────────────────────────────────────────────── */
.rvx-rate{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 13px; }
.rvx-rate-track{
  display:inline-flex; align-items:center; gap:4px; padding:5px;
  border-radius:15px; background:var(--rvx-rate-bg,#EEF3FB);
  border:1px solid var(--rvx-rate-bd,rgba(54,128,237,.16));
  box-shadow:inset 0 1px 2px rgba(16,24,40,.05);
}
.rvx-star{
  appearance:none; border:0; cursor:pointer; padding:0;
  width:38px; height:38px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--rvx-star-off); line-height:0;
  transition:background-color .2s ease, color .18s ease, box-shadow .26s ease,
             transform 260ms cubic-bezier(.16,1,.3,1);
}
.rvx-star svg{ display:block; transition:transform 300ms cubic-bezier(.16,1,.3,1); }
.rvx-star.is-on{
  background-image:linear-gradient(135deg, var(--gold-tile,#F59E0B), var(--gold-deep,#B45309));
  color:#fff;
  /* Inset highlight along the top edge — the one thing that separates a gold
     tile from a flat brown one at this size. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 4px 12px -5px rgba(180,83,9,.75);
}
.rvx .rvx-star:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(54,128,237,.55); }
.rvx .rvx-star.is-on:focus-visible{ box-shadow:0 0 0 3px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.34), 0 4px 12px -5px rgba(180,83,9,.75); }
.rvx-rate-out{ font-size:.86rem; font-weight:600; color:var(--rvx-muted); }
.rvx-rate-out.is-set{ display:inline-flex; align-items:baseline; gap:7px; }
/* TEXT, so the 4.5:1 bar applies and this may NOT take --gold (#F59E0B is
   2.09:1 here). #B45309 is the amber family's text-safe end at 4.89:1. */
.rvx-rate-word{ font-size:.98rem; font-weight:800; letter-spacing:-.01em; color:#B45309; }
.rvx-rate-n{ font-size:.82rem; font-weight:600; color:var(--rvx-muted); font-variant-numeric:tabular-nums; }
body.theme-dark .rvx-rate-track{ --rvx-rate-bg:rgba(0,0,0,.18); --rvx-rate-bd:rgba(255,255,255,.09); box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
/* Dark runs the SAME gradient as light: the white glyph's contrast is against
   the TILE, so it does not care how dark the surrounding panel is, and a
   second pair of ends would be one more thing to keep in step. */
body.theme-dark .rvx-star.is-on{ background-image:linear-gradient(135deg,#F59E0B,#B45309); box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 4px 12px -5px rgba(0,0,0,.7); }
body.theme-dark .rvx-rate-word{ color:var(--gold, #F59E0B); }

.rvx-ta{
  width:100%; display:block; resize:vertical; min-height:118px;
  padding:13px 15px; border-radius:12px;
  background:var(--rvx-surface); color:var(--rvx-ink);
  border:1px solid var(--rvx-line);
  font-family:inherit; font-size:.93rem; line-height:1.6;
  transition:border-color .18s ease, box-shadow .2s ease;
}
.rvx-ta::placeholder{ color:var(--v2-muted2,#8a8a9a); }
.rvx-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:7px; }
.rvx-hint{ font-size:.79rem; color:var(--rvx-muted); }
.rvx-cnt{ font-size:.79rem; font-weight:600; color:var(--rvx-muted); font-variant-numeric:tabular-nums; }
.rvx-cnt.is-ok{ color:var(--v2-green,#15803d); }
.rvx-err{ font-size:.82rem; font-weight:600; color:var(--rvx-err); margin-top:7px; }

.rvx-submit{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  padding:12px 24px; border-radius:10px; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--rvx-btn1), var(--rvx-btn2)); color:#fff;
  font-family:inherit; font-size:.95rem; font-weight:700;
  box-shadow:0 4px 14px rgba(32,96,192,.30);
  transition:box-shadow .24s ease, transform .22s cubic-bezier(.22,.61,.36,1), filter .2s ease;
}
.rvx-submit[disabled]{ filter:saturate(.6); cursor:progress; }
/* The idle label may set its own display — Livewire never touches it.
   The busy label must NOT: `[wire\:loading…]{display:none}` is only
   (0,1,0), this stylesheet is emitted after Livewire's, and a tie at equal
   specificity would go to whichever came last — i.e. to us, permanently
   revealing it. It gets alignment; Livewire supplies the display through
   the .inline-flex modifier when it actually shows the element. */
.rvx-submit .rvx-sb-idle{ display:inline-flex; align-items:center; gap:9px; }
.rvx-submit .rvx-sb-busy{ align-items:center; gap:9px; }
@keyframes rvx-rot{ to{ transform:rotate(360deg); } }
.rvx-submit .rvx-spin{ animation:rvx-rot .9s linear infinite; }
@media (prefers-reduced-motion:reduce){ .rvx-submit .rvx-spin{ animation:none; } }

/* Notices */
.rvx-note{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:12px; font-size:.9rem; font-weight:600;
}
.rvx-note.is-ok{ background:#ECFDF3; border:1px solid #ABEFC6; color:#05603A; }
.rvx-note.is-info{ background:var(--rvx-soft); border:1px solid rgba(54,128,237,.28); color:var(--rvx-ink-accent); }
body.theme-dark .rvx-note.is-ok{ background:rgba(16,185,129,.16); border-color:rgba(52,211,153,.32); color:#6EE7BE; }
body.theme-dark .rvx-note.is-info{ background:rgba(54,128,237,.16); border-color:rgba(96,164,245,.30); color:#9DC8FF; }

/* Logged-out invitation */
.rvx-guest{
  text-align:center; padding:26px 20px; border-radius:16px;
  background:
    linear-gradient(150deg, rgba(54,128,237,.09) 0%, rgba(54,128,237,.02) 50%, rgba(54,128,237,.07) 100%) no-repeat,
    var(--rvx-panel);
  border:1px solid rgba(54,128,237,.20);
}
body.theme-dark .rvx-guest{ border-color:rgba(54,128,237,.30); }
.rvx-guest .t{ font-size:1.05rem; font-weight:700; color:var(--rvx-ink); }
.rvx-guest .s{ font-size:.88rem; color:var(--rvx-muted); margin:5px 0 14px; }

/* Report row */
.rvx-rep{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; padding:11px; border-radius:11px; background:var(--rvx-track); }
.rvx-rep select{
  appearance:auto; max-width:190px; padding:7px 11px; border-radius:9px;
  background:var(--rvx-surface); color:var(--rvx-ink);
  border:1px solid var(--rvx-line); font-family:inherit; font-size:.84rem;
}
.rvx-rep .go{ padding:7px 14px; border-radius:9px; border:0; cursor:pointer; background:var(--v2-red,#DC2626); color:#fff; font:inherit; font-size:.84rem; font-weight:700; }
.rvx-rep .no{ padding:7px 12px; border-radius:9px; border:0; cursor:pointer; background:none; color:var(--rvx-muted); font:inherit; font-size:.84rem; font-weight:600; }

/* ── Focus. Visible on every control, and never removed without a
      replacement — the kit ships buttons that the host stylesheets do not
      know about. ─────────────────────────────────────────────────────── */
.rvx :is(a,button,textarea,select,[tabindex]):focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(54,128,237,.34);
}
.rvx-ta:focus-visible,.rvx-ta:focus{
  outline:none; border-color:rgba(54,128,237,.55); box-shadow:0 0 0 3px rgba(54,128,237,.18);
}

/* ── ⚠️ THE HOST'S LINK RULES OUT-RANK THE KIT'S, so the three controls that
      are <a> elements have to say so explicitly.

      Found by resolving the cascade, not by looking: the tool page ships
      `.v2x.atd a{color:var(--accent)}` at (0,2,1) and
      `.v2x.atd a:hover{color:var(--accent-dark)}` at (0,3,1), against a bare
      `.rvx-cta` at (0,1,0) and `.rvx-cta:hover` at (0,2,0). The kit lost both.
      The hover case was not cosmetic: the background became --rvx-accent2
      (#2060C0) while the label stayed --accent-dark (#2060C0) — the same
      colour, i.e. the button's text DISAPPEARED on hover.

      Naming the element and one more ancestor takes these to (0,3,1) and
      (0,4,1), which wins outright rather than by document order. Portable:
      no host class appears in the selector, so it holds on /company and
      /ai-models too. ─────────────────────────────────────────────────── */
.rvx .rvx-head a.rvx-cta{ color:var(--rvx-ink-accent); text-decoration:none; }
.rvx .rvx-guest a.rvx-submit,
.rvx .rvx-invite a.rvx-submit{ color:#fff; text-decoration:none; }
.rvx .rvx-foot a.rvx-act{ color:var(--rvx-muted); text-decoration:none; }
@media (hover:hover) and (pointer:fine){
  .rvx .rvx-head a.rvx-cta:hover{ color:#fff; text-decoration:none; }
  .rvx .rvx-guest a.rvx-submit:hover,
  .rvx .rvx-invite a.rvx-submit:hover{ color:#fff; text-decoration:none; }
  .rvx .rvx-foot a.rvx-act:hover{ color:var(--rvx-ink-accent); text-decoration:none; }
}
/* ── Hover ───────────────────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .rvx-cta:hover{
    background:var(--rvx-accent2); color:#fff; border-color:var(--rvx-accent2);
    transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(32,96,192,.55);
  }
  .rvx-cta:hover svg{ transform:rotate(-12deg) scale(1.08); }
  .rvx-bar:hover{ background:rgba(54,128,237,.07); }
  .rvx-bar:hover .rvx-bar-fill{ filter:saturate(1.25) brightness(1.06); }
  .rvx-sort button:not(.is-on):hover{ background:rgba(54,128,237,.12); color:var(--rvx-ink-accent); }
  .rvx-card:hover{
    transform:translateY(-3px);
    border-color:rgba(var(--rvx-rgb,54,128,237),.42);
    box-shadow:0 2px 6px rgba(16,24,40,.06), 0 16px 34px -14px rgba(var(--rvx-rgb,54,128,237),.36);
  }
  .rvx-card:hover .rvx-av{ transform:scale(1.07) rotate(-4deg); }
  body.theme-dark .rvx-card:hover{ box-shadow:0 2px 6px rgba(0,0,0,.50), 0 16px 34px -14px rgba(0,0,0,.58); }
  .rvx-act:not([disabled]):hover{ color:var(--rvx-ink-accent); }
  .rvx-submit:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(32,96,192,.55); }
  .rvx-submit[disabled]:hover{ transform:none; }
  /* The star preview: pointing at the third star shows three lit stars before
     any click. Written with :has() so the DOM stays in source order and every
     button keeps its own wire:click — a reverse-order flex trick would have
     inverted the tab sequence. No :has(), no preview; the control still works. */
  /* Preview: hovering the Nth tile fills 1..N and UNFILLS the rest, so the
     control always shows the value the click would set, never a mix of the
     old value and the preview. */
  .rvx-rate-track:hover .rvx-star{ background-image:none; color:var(--rvx-star-off); box-shadow:none; }
  .rvx-rate-track:has(.rvx-star:nth-child(1):hover) .rvx-star:nth-child(-n+1),
  .rvx-rate-track:has(.rvx-star:nth-child(2):hover) .rvx-star:nth-child(-n+2),
  .rvx-rate-track:has(.rvx-star:nth-child(3):hover) .rvx-star:nth-child(-n+3),
  .rvx-rate-track:has(.rvx-star:nth-child(4):hover) .rvx-star:nth-child(-n+4),
  .rvx-rate-track:has(.rvx-star:nth-child(5):hover) .rvx-star:nth-child(-n+5){
    /* The hover PREVIEW must be the same gold as the committed state, or the
       tiles change hue between "about to pick" and "picked". */
    background-image:linear-gradient(135deg, var(--gold-tile,#F59E0B), var(--gold-deep,#B45309)); color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
  }
  body.theme-dark .rvx-rate-track:has(.rvx-star:nth-child(1):hover) .rvx-star:nth-child(-n+1),
  body.theme-dark .rvx-rate-track:has(.rvx-star:nth-child(2):hover) .rvx-star:nth-child(-n+2),
  body.theme-dark .rvx-rate-track:has(.rvx-star:nth-child(3):hover) .rvx-star:nth-child(-n+3),
  body.theme-dark .rvx-rate-track:has(.rvx-star:nth-child(4):hover) .rvx-star:nth-child(-n+4),
  body.theme-dark .rvx-rate-track:has(.rvx-star:nth-child(5):hover) .rvx-star:nth-child(-n+5){
    background-image:linear-gradient(135deg,#F59E0B,#B45309);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
  }
  .rvx-star:hover{ transform:translateY(-2px); }
  .rvx-star:hover svg{ transform:scale(1.14) rotate(-6deg); }
}
@media (hover:none){
  .rvx-card:active{ transform:none; }
}

/* ── Orbit ring, on the cards and the primary controls ───────────────── */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .rvx-card::before,
  .rvx-cta::before,
  .rvx-submit::before{
    content:""; position:absolute; pointer-events:none;
    inset:-1px; z-index:1; padding:1.4px;
    --rvx-spin:0deg;
    background:conic-gradient(from var(--rvx-spin),
      rgba(var(--rvx-rgb,54,128,237), 0)                 0deg,
      rgba(var(--rvx-rgb,54,128,237), var(--rvx-a1))    30deg,
      rgba(255,255,255, 1)                              52deg,
      rgba(var(--rvx-rgb,54,128,237), var(--rvx-a2))    74deg,
      rgba(var(--rvx-rgb,54,128,237), 0)               118deg,
      rgba(var(--rvx-rgb,54,128,237), 0)               180deg,
      rgba(var(--rvx-rgb,54,128,237), var(--rvx-a1))   210deg,
      rgba(255,255,255, 1)                             232deg,
      rgba(var(--rvx-rgb,54,128,237), var(--rvx-a2))   254deg,
      rgba(var(--rvx-rgb,54,128,237), 0)               298deg,
      rgba(var(--rvx-rgb,54,128,237), 0)               360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:0; transition:opacity .32s ease;
    animation-name:rvx-orbit; animation-timing-function:linear; animation-iteration-count:infinite;
    animation-play-state:paused;
  }
  /* inset:-1px puts the ring a pixel OUTSIDE the box, so each radius is the
     host's plus that pixel — `inherit` would draw it a pixel too tight. */
  .rvx-card::before{ border-radius:15px; animation-duration:5.2s; }
  .rvx-cta::before{ border-radius:999px; animation-duration:3.2s; --rvx-a1:.5; --rvx-a2:.9; }
  .rvx-submit::before{ border-radius:11px; animation-duration:3.6s; --rvx-rgb:255,255,255; --rvx-a1:.42; --rvx-a2:.85; }
  .rvx-cta,.rvx-submit{ position:relative; overflow:visible; }
  .rvx-cta:focus-visible::before,
  .rvx-submit:focus-visible::before{ opacity:1; animation-play-state:running; }
  @media (hover:hover) and (pointer:fine){
    .rvx-card:hover::before,
    .rvx-cta:hover::before,
    .rvx-submit:not([disabled]):hover::before{ opacity:1; animation-play-state:running; }
  }
  @media (hover:none){
    .rvx-cta:active::before,.rvx-submit:active::before{ opacity:1; animation-play-state:running; }
  }
  @media (prefers-reduced-motion:reduce){
    .rvx-card::before,.rvx-cta::before,.rvx-submit::before{ --rvx-spin:135deg; animation:none !important; }
  }
}

/* ── Motion preferences ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .rvx-cta,.rvx-cta svg,.rvx-card,.rvx-av,.rvx-submit,.rvx-star,.rvx-star svg,
  .rvx-bar,.rvx-bar-fill,.rvx-sort button,.rvx-act,.rvx-ta{ transition:none !important; }
  .rvx-cta:hover,.rvx-card:hover,.rvx-submit:hover{ transform:none; }
  .rvx-card:hover .rvx-av,.rvx-star:hover,.rvx-star:hover svg,.rvx-cta:hover svg{ transform:none; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:767.98px){
  .rvx-score,
  .rvx-score[data-invite="1"]{ grid-template-columns:minmax(0,1fr); gap:16px; padding:18px 16px; justify-items:stretch; }
  .rvx-score-main{ align-items:center; }
  .rvx-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:575.98px){
  .rvx-head{ gap:10px; }
  .rvx-cta{ width:100%; justify-content:center; }
  .rvx-avg{ font-size:2.9rem; }
  .rvx-bar{ grid-template-columns:42px minmax(0,1fr) 40px; gap:8px; }
  .rvx-bar-k,.rvx-bar-v{ font-size:.78rem; }
  .rvx-form,.rvx-guest{ padding:16px 14px; }
  .rvx-star{ width:36px; height:36px; border-radius:10px; }
  .rvx-rate{ gap:7px 11px; }
  .rvx-card{ padding:15px; }
  .rvx-sort{ width:100%; }
  .rvx-sort button{ flex:1 1 0; }
  .rvx-bar-head{ gap:10px; }
  .rvx-submit{ width:100%; justify-content:center; }
}