/* PropXConnect Reviews — inherits the theme's tokens, with fallbacks so the
   admin screen (which has none of them) still renders sanely. */
.pxrv{--r-bg:var(--raise,#141f24);--r-line:var(--line,#24363d);--r-text:var(--text,#edf3f5);
     --r-dim:var(--dim,#8fa6ae);--r-act:var(--act,#ea6d22);--r-pos:var(--pos,#38ce8d);
     --r-star:#f5b301;color:var(--r-text)}

/* The dashboard sheet declares the --c-* tokens on `.pxg` only. Re-declaring
   them here (same values, higher specificity so order cannot matter) means
   the borrowed components still draw if that sheet ever fails to load. */
.pxrv.pxg,.pxrv .pxg{
  --c-bg:var(--raise,#141f24);--c-deep:var(--bg-deep,#0a1114);--c-line:var(--line,#24363d);
  --c-rule:var(--rule,#28414a);--c-text:var(--text,#edf3f5);--c-dim:var(--dim,#8fa6ae);
  --c-faint:var(--faint,#5a737d);--c-act:var(--act,#ea6d22);--c-ink:var(--act-ink,#0c1417);
  --c-brand:var(--brand,#0fa0cc);--c-glow:var(--glow,#57cdf9);
  --c-pos:var(--pos,#38ce8d);--c-neg:var(--neg,#e85f63)}

.pxrv-note{padding:13px 16px;border-radius:9px;background:var(--r-bg);
  box-shadow:inset 0 0 0 1px var(--r-line);margin:0 0 16px;font-size:14px;line-height:1.55}
.pxrv-note.ok{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-pos) 45%,transparent)}
.pxrv-note.bad{box-shadow:inset 0 0 0 1px var(--neg,#e85f63);color:var(--neg,#e85f63)}
.pxrv-note p{margin:6px 0 0}

.pxrv-btn{display:inline-block;background:var(--r-act);color:var(--act-ink,#0c1417);
  border:0;padding:11px 20px;border-radius:8px;font-weight:700;font-size:14px;
  text-decoration:none;cursor:pointer}
.pxrv .pxrv-btn,.pxrv .pxrv-btn:hover{color:var(--act-ink,#0c1417)}
.pxrv-btn:hover{filter:brightness(1.08)}
.pxrv-fine{font-size:12px;color:var(--r-dim)}

/* ---- star display ---- */
.pxrv-stars{position:relative;display:inline-block;white-space:nowrap;line-height:1;
  font-size:17px;letter-spacing:2px}
.pxrv-stars.sm{font-size:14px}
.pxrv-stars-bg{color:var(--r-line)}
.pxrv-stars-fg{position:absolute;inset:0;overflow:hidden;color:var(--r-star)}

/* ---- star input ---- */
/* 1 ON THE LEFT, 5 ON THE RIGHT.
   This was row-reverse — the old CSS-only trick for filling stars with a
   sibling combinator, which can only reach FORWARD, so the markup had to run
   backwards. The result read right-to-left: clicking the leftmost star gave
   five. The fill is done by :has() and the script instead, both of which can
   look backwards, so the stars now run the way they are read. */
.pxrv-stars-in{display:inline-flex;gap:3px}
.pxrv-star{cursor:pointer;font-size:24px;line-height:1;color:var(--r-line)}
.pxrv-star input{position:absolute;opacity:0;width:1px;height:1px}
.pxrv-star.on,.pxrv-star.hot{color:var(--r-star)}
/* Fallback with the script off: the chosen star and every star before it. */
.pxrv-star:has(input:checked),
.pxrv-star:has(~ .pxrv-star input:checked){color:var(--r-star)}
.pxrv-star input:focus-visible+span{outline:2px solid var(--glow,#57cdf9);outline-offset:2px}

/* ---- form ---- */
.pxrv-form{display:flex;flex-direction:column;gap:16px;max-width:620px}
.pxrv-f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--r-dim)}
.pxrv-f>span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
/* Same control treatment as the dashboard's .pxg-select select — deep
   background, hairline, square corners, 12/13 padding. */
.pxrv-f input[type=text],.pxrv-f select,.pxrv-f textarea,.pxrv-f input[type=file]{
  background:var(--bg-deep,#0a1114);border:1px solid var(--r-line);color:var(--r-text);
  padding:12px 13px;font:inherit;font-size:14px;width:100%}
.pxrv-f select:focus,.pxrv-f textarea:focus{outline:none;border-color:var(--brand,#0fa0cc)}
.pxrv-f textarea{min-height:150px;resize:vertical}
.pxrv-f small{font-size:11.5px}
/* Inset panels INSIDE the card, so they read the way the dashboard's upload
   block reads inside its card — deeper background, hairline, no second
   clipped corner competing with the card's own. */
.pxrv-rates,.pxrv-proofcard{background:var(--bg-deep,#0a1114);
  box-shadow:inset 0 0 0 1px var(--r-line);padding:16px 18px}
.pxrv-rates{display:flex;flex-direction:column;gap:10px}
.pxrv-form{gap:18px}
.pxrv-rate{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pxrv-rate-l{font-size:13.5px}
.pxrv-rate-l small{display:block;font-size:10.5px;color:var(--r-dim);text-transform:uppercase;letter-spacing:.1em}
.pxrv-proof{border:1px solid var(--r-line);border-radius:10px;padding:14px 16px;margin:0}
.pxrv-proof legend{padding:0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--r-dim)}
.pxrv-proof-why{margin:0 0 12px;font-size:13.5px;color:var(--r-dim)}
.pxrv-privacy{margin:12px 0 0;padding:11px 13px;border-radius:8px;font-size:12.5px;line-height:1.6;
  background:color-mix(in srgb,var(--r-pos) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-pos) 35%,transparent)}

/* ---- summary ---- */
.pxrv-summary{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;
  padding:18px 20px;border-radius:12px;background:var(--r-bg);
  box-shadow:inset 0 0 0 1px var(--r-line);margin:0 0 20px}
.pxrv-overall{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:170px}
.pxrv-overall small{color:var(--r-dim);font-size:12.5px}

/* The bubble again, outside #pxc-root and one size up, for the firm page. */
.pxrv .pxrv-bubble{display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 12px 6px;border-radius:13px;border:1px solid transparent;line-height:1}
.pxrv .pxrv-bubble.lg{gap:6px;padding:14px 22px 12px;border-radius:18px;min-width:132px}
.pxrv .pxrv-bubble.lg b{font-size:38px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.pxrv .pxrv-bubble.lg .pxrv-stars{font-size:18px;letter-spacing:2px}
.pxrv .pxrv-bubble .pxrv-stars-bg{color:color-mix(in srgb,currentColor 26%,transparent)}
.pxrv .pxrv-bubble .pxrv-stars-fg{color:var(--r-star)}
.pxrv .pxrv-bubble.hi{color:var(--r-pos);
  background:color-mix(in srgb,var(--r-pos) 12%,transparent);
  border-color:color-mix(in srgb,var(--r-pos) 40%,transparent)}
.pxrv .pxrv-bubble.mid{color:#e3a008;
  background:color-mix(in srgb,#e3a008 12%,transparent);
  border-color:color-mix(in srgb,#e3a008 40%,transparent)}
.pxrv .pxrv-bubble.lo{color:var(--neg,#e85f63);
  background:color-mix(in srgb,var(--neg,#e85f63) 12%,transparent);
  border-color:color-mix(in srgb,var(--neg,#e85f63) 40%,transparent)}
.pxrv-subs{flex:1;min-width:250px;display:flex;flex-direction:column;gap:9px}
.pxrv-sub{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:13px;position:relative;padding-bottom:7px}
.pxrv-sub b{font-variant-numeric:tabular-nums}
.pxrv-sub i{grid-column:1/-1;height:3px;border-radius:2px;background:var(--r-pos);display:block}
.pxrv-summary.is-thin{flex-direction:column;gap:4px}
.pxrv-thin{font-weight:700;color:var(--r-dim)}
.pxrv-summary.is-thin small{color:var(--r-dim);font-size:12.5px}

/* ---- list ---- */
.pxrv-pick{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:0 0 20px}
.pxrv-pick label{display:flex;flex-direction:column;gap:6px;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--r-dim)}
.pxrv-pick select{background:transparent;border:1px solid var(--r-line);color:var(--r-text);
  padding:10px 12px;border-radius:8px;font:inherit;font-size:14px;min-width:220px}
.pxrv-h{margin:0 0 14px}
.pxrv-list{display:flex;flex-direction:column;gap:14px}
.pxrv-item{padding:16px 18px;border-radius:11px;background:var(--r-bg);
  box-shadow:inset 0 0 0 1px var(--r-line)}
.pxrv-item.is-verified{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-pos) 40%,transparent)}
.pxrv-item header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.pxrv-who{font-weight:700}
.pxrv-item time{margin-left:auto;font-size:12px;color:var(--r-dim)}
.pxrv-item p{margin:9px 0 0;line-height:1.65;font-size:14.5px}
.pxrv-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:700;background:color-mix(in srgb,var(--r-pos) 15%,transparent);
  color:var(--r-pos);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-pos) 45%,transparent)}
.pxrv-badge.b-payout{background:color-mix(in srgb,var(--r-star) 16%,transparent);
  color:var(--r-star);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-star) 45%,transparent)}

/* STAGE, not badge. Outlined and muted, because it is a claim the reviewer
   made about themselves — the filled badge next to it is the one we checked,
   and the two must not look interchangeable. */
.pxrv-stage{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:600;color:var(--r-dim);
  box-shadow:inset 0 0 0 1px var(--r-line)}
.pxrv-stage.s-funded,.pxrv-stage.s-payout{color:var(--r-text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-text) 30%,transparent)}

/* A published certificate. Capped in height so a tall screenshot cannot
   push the review text off the page; click opens it full size. */
.pxrv-cert{margin:14px 0 0}
.pxrv-cert a{display:inline-block;max-width:100%}
.pxrv-cert img{display:block;max-width:100%;max-height:340px;width:auto;border-radius:9px;
  border:1px solid var(--r-line)}
.pxrv-cert figcaption{margin-top:6px;font-size:11.5px;color:var(--r-dim)}

@media (max-width:640px){
  .pxrv-rate{flex-direction:column;align-items:flex-start;gap:5px}
  .pxrv-item time{margin-left:0;width:100%}
}

/* ---- admin ---- */
.pxrv-admin .pxrv-proofline{padding:11px 13px;border-left:4px solid #dba617;background:#fcf9f2}
.pxrv-admin .pxrv-proofline.is-public{border-left-color:#d63638;background:#fcf0f1}
.pxrv-admin .pxrv-warn{color:#b32d2e;display:block;margin-bottom:2px}
.pxrv-admin blockquote{font-size:14px;line-height:1.6}

/* ======================================================================
   THE FIRM LIST

   A column table, not a row of chips. Every score sits under a heading that
   names it once, and the heading is the sort control. Chips could not be
   sorted and had to repeat their own label on every row.

   Built on the Compare shell (#pxc-root, its tokens, its stylesheet) and the
   theme's own button shape, so it belongs to the same site.
   ====================================================================== */
#pxc-root .pxrv-shell{max-width:1360px;margin-left:auto;margin-right:auto;
  width:100%;padding:22px}
/* `#pxc-root a{color:inherit}` is an ID selector and outranks .pxrv .pxrv-btn,
   which left the button's label the same colour as its orange background. */
#pxc-root .pxrv-btn,#pxc-root .pxrv-btn:hover{color:var(--act-ink,#0c1417)}
#pxc-root .pxrv-pick select{color-scheme:dark}

/* The colour key. Without it the green/amber/red numbers are a code nobody
   was given. */
.pxrv-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--pxc-muted-2,#7d949c);margin:0 0 10px;padding:0 2px}
.pxrv-legend .pxrv-dot{width:7px;height:7px;border-radius:50%;margin-left:10px}
.pxrv-legend .pxrv-dot:first-child{margin-left:0}
.pxrv-dot.hi{background:var(--pos,#38ce8d)}
.pxrv-dot.mid{background:#e3a008}
.pxrv-dot.lo{background:var(--neg,#e85f63)}

/* ONE grid template, declared once and inherited by the header and every
   row. Two copies of a column list is how a header stops lining up with its
   own table the first time a column is added. */
#pxc-root .pxrv-table{
  /* FRACTIONS, NOT FIXED PIXELS, for the middle columns.
     With the firm column on 1.5fr and everything else fixed, the firm column
     absorbed every spare pixel on a wide screen and opened a canyon between
     the firm name and the first number. Now the slack is shared out, so the
     columns stay evenly spread whatever the window is. */
  --pxrv-cols:minmax(180px,1.15fr) minmax(74px,.52fr) repeat(4,minmax(70px,.5fr)) 132px minmax(140px,.6fr);
  display:flex;flex-direction:column}
#pxc-root .pxrv-thead,#pxc-root .pxrv-tr{
  display:grid;grid-template-columns:var(--pxrv-cols);align-items:center;gap:10px}

#pxc-root .pxrv-thead{padding:0 16px 9px;border-bottom:1px solid var(--pxc-border-2,#24363d)}
#pxc-root .pxrv-th{
  background:none;border:0;padding:4px 0;font-family:var(--pxc-mono,ui-monospace,monospace);
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pxc-muted-2,#7d949c);text-align:left;
  display:inline-flex;align-items:center;gap:5px}
#pxc-root button.pxrv-th{cursor:pointer}
#pxc-root button.pxrv-th:hover{color:var(--pxc-text,#edf3f5)}
#pxc-root .pxrv-th.num{justify-content:center;text-align:center}
#pxc-root .pxrv-th-act{justify-content:flex-end;text-align:right}
/* The sort caret: pale and pointing down until the column is the one being
   sorted, then it takes the accent and flips with the direction. */
#pxc-root .pxrv-th i{
  width:0;height:0;flex:none;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.35;transition:.12s}
#pxc-root .pxrv-th.is-sorted{color:var(--pxc-text,#edf3f5)}
#pxc-root .pxrv-th.is-sorted i{opacity:1;border-top-color:var(--act,#ea6d22)}
#pxc-root .pxrv-th.is-sorted.asc i{
  border-top:0;border-bottom:5px solid var(--act,#ea6d22)}

#pxc-root .pxrv-tbody{display:flex;flex-direction:column;gap:8px;margin-top:8px}
#pxc-root .pxrv-tr{
  background:var(--pxc-surface,#111C21);border:1px solid var(--pxc-border,#1E3239);
  border-radius:14px;padding:12px 16px;transition:border-color .14s}
#pxc-root .pxrv-tr:hover{border-color:var(--pxc-border-2,#24363d)}

#pxc-root .pxrv-td{min-width:0}
#pxc-root .pxrv-td.num{text-align:center;font-family:var(--pxc-mono,ui-monospace,monospace);
  font-variant-numeric:tabular-nums}
#pxc-root .pxrv-td-firm{display:flex;align-items:center;gap:12px}
#pxc-root .pxrv-td-firm .dotlogo{width:40px;height:40px;border-radius:11px;font-size:13px;flex:none}
#pxc-root .pxrv-fn{font-family:var(--pxc-disp,inherit);font-weight:600;font-size:15.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pxc-root .pxrv-n{font-size:14px;font-weight:600;color:var(--pxc-text,#edf3f5)}

/* Scores read as numbers, not as labelled boxes — the column heading is the
   label now. The tint is a quiet band behind the figure. */
#pxc-root .pxrv-score{display:inline-block;min-width:44px;padding:4px 6px;border-radius:7px;
  font-size:13px;font-weight:600}
#pxc-root .pxrv-score.hi{color:var(--pos,#38ce8d);background:color-mix(in srgb,var(--pos,#38ce8d) 13%,transparent)}
#pxc-root .pxrv-score.mid{color:#e3a008;background:color-mix(in srgb,#e3a008 13%,transparent)}
#pxc-root .pxrv-score.lo{color:var(--neg,#e85f63);background:color-mix(in srgb,var(--neg,#e85f63) 13%,transparent)}
#pxc-root .pxrv-score.none{color:var(--pxc-muted-2,#7d949c);background:none;font-weight:400}

/* THE OVERALL SCORE.
   Given a bubble of its own so the eye lands on it first — it is the number
   the page exists to deliver, and as a fifth flat pill in a row of five it
   looked like just another column. */
#pxc-root .pxrv-td-rating{display:flex;justify-content:center}
#pxc-root .pxrv-bubble{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  min-width:88px;padding:7px 12px 6px;border-radius:13px;
  border:1px solid transparent;line-height:1}
#pxc-root .pxrv-bubble b{font-family:var(--pxc-disp,inherit);font-size:20px;font-weight:800;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#pxc-root .pxrv-bubble .pxrv-stars{font-size:11.5px;letter-spacing:1.5px}
#pxc-root .pxrv-bubble .pxrv-stars-bg{color:color-mix(in srgb,currentColor 26%,transparent)}
#pxc-root .pxrv-bubble .pxrv-stars-fg{color:#f5b301}
#pxc-root .pxrv-bubble.hi{color:var(--pos,#38ce8d);
  background:color-mix(in srgb,var(--pos,#38ce8d) 12%,transparent);
  border-color:color-mix(in srgb,var(--pos,#38ce8d) 40%,transparent)}
#pxc-root .pxrv-bubble.mid{color:#e3a008;
  background:color-mix(in srgb,#e3a008 12%,transparent);
  border-color:color-mix(in srgb,#e3a008 40%,transparent)}
#pxc-root .pxrv-bubble.lo{color:var(--neg,#e85f63);
  background:color-mix(in srgb,var(--neg,#e85f63) 12%,transparent);
  border-color:color-mix(in srgb,var(--neg,#e85f63) 40%,transparent)}
/* The empty state keeps the bubble's footprint so rows stay the same height. */
#pxc-root .pxrv-under{display:inline-flex;align-items:center;justify-content:center;
  min-width:88px;min-height:43px;padding:7px 12px;border-radius:13px;
  border:1px dashed var(--pxc-border,#1E3239);
  font-size:11.5px;color:var(--pxc-muted-2,#7d949c);white-space:nowrap}

#pxc-root .pxrv-td-act{display:flex;justify-content:flex-end}

/* THE SITE'S BUTTON SHAPE.
   Compare's .getbtn is a 9px ROUNDED rectangle; every button in the theme is
   a 9px CHAMFER — the corner is cut, not curved. Matching the theme, because
   that is what the rest of the site looks like. */
#pxc-root .pxrv-go,.pxrv .pxrv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp,inherit);font-weight:800;text-transform:uppercase;
  letter-spacing:.045em;font-size:12px;padding:10px 16px;border:0;cursor:pointer;
  background:var(--act,#ea6d22);color:var(--act-ink,#0c1417);
  white-space:nowrap;text-decoration:none;transition:.14s;border-radius:0;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.pxrv .pxrv-btn{font-size:12.5px;padding:12px 20px}
#pxc-root .pxrv-go:hover,.pxrv .pxrv-btn:hover{background:var(--act-hi,#FF8038);filter:brightness(1.06)}
#pxc-root .pxrv-go,#pxc-root .pxrv-go:hover{color:var(--act-ink,#0c1417)}

/* Narrow: the four score columns are the first thing to go — the overall
   rating and the review count are what someone scanning on a phone needs. */
@media(max-width:1180px){
  #pxc-root .pxrv-table{--pxrv-cols:minmax(160px,1.3fr) minmax(74px,.5fr) 132px minmax(140px,.6fr)}
  #pxc-root .pxrv-th-score,#pxc-root .pxrv-td-score{display:none}
}
@media(max-width:760px){
  #pxc-root .pxrv-shell{padding:14px}
  #pxc-root .pxrv-thead{display:none}
  #pxc-root .pxrv-tr{grid-template-columns:1fr auto;gap:8px 12px;padding:14px}
  #pxc-root .pxrv-td-firm{grid-column:1 / -1}
  /* With the header gone each cell has to say what it is. */
  #pxc-root .pxrv-td.num{display:flex;align-items:center;justify-content:space-between;
    text-align:left;font-family:inherit}
  #pxc-root .pxrv-td.num::before{
    content:attr(data-l);font-family:var(--pxc-mono,ui-monospace,monospace);font-size:10px;
    letter-spacing:.11em;text-transform:uppercase;color:var(--pxc-muted-2,#7d949c)}
  #pxc-root .pxrv-td-rating{justify-content:space-between}
  #pxc-root .pxrv-bubble,#pxc-root .pxrv-under{flex-direction:row;gap:8px;min-height:0}
  #pxc-root .pxrv-td-act{grid-column:1 / -1;margin-top:4px}
  #pxc-root .pxrv-td-act .pxrv-go{width:100%}
}

/* ======================================================================
   DARK-MODE CORRECTIONS

   The theme styles every link inside .entry — underlined and in the accent
   orange — which turned every firm name and every button into what looked
   like broken markup. And a bare <select> renders as a white OS control on a
   dark page. Both are fixed here rather than in the theme, so this plugin
   carries its own appearance wherever it is dropped.
   ====================================================================== */
.pxrv a,.entry .pxrv a{text-decoration:none;color:inherit;box-shadow:none}
.pxrv a:hover,.entry .pxrv a:hover{text-decoration:none}
.pxrv .pxrv-row:hover{box-shadow:inset 0 0 0 1px var(--r-act)}
.entry .pxrv .pxrv-btn,.pxrv .pxrv-btn{
  color:var(--act-ink,#0c1417);text-decoration:none;border-bottom:0}
.pxrv-item p a,.entry .pxrv-item p a{text-decoration:underline}

/* Native controls follow the page, not the OS. */
.pxrv{color-scheme:dark}
.pxrv select,.pxrv input,.pxrv textarea{color-scheme:dark}
.pxrv select option{background:var(--bg,#0c1417);color:var(--r-text)}
.pxrv input[type=file]{color:var(--r-dim);font-size:13px}
.pxrv input[type=file]::file-selector-button{
  background:transparent;border:1px solid var(--r-line);color:var(--r-text);
  padding:7px 12px;border-radius:7px;font:inherit;font-size:12.5px;margin-right:10px;cursor:pointer}
.pxrv input[type=file]::file-selector-button:hover{border-color:var(--r-act)}

/* Only what the borrowed components do not already cover. */
#pxc-root .lp-dd.pxrv-hi{border-color:color-mix(in srgb,var(--pxc-pos) 55%,transparent);color:var(--pxc-pos)}
#pxc-root .lp-dd.pxrv-mid{border-color:color-mix(in srgb,#e3a008 55%,transparent);color:#e3a008}
#pxc-root .lp-dd.pxrv-lo{border-color:color-mix(in srgb,var(--pxc-neg) 55%,transparent);color:var(--pxc-neg)}
#pxc-root .lrow .lp-rate{font-size:13px}
#pxc-root .lrow .lp-rate b{font-size:15px}

.pxrv-proofcard h3{margin:0 0 4px;font-size:15px}
.pxrv-proofcard h3 small{font-weight:400;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--r-dim);margin-left:7px}
.pxrv-proof-why{margin:0 0 14px;font-size:13.5px;color:var(--r-dim)}
/* The two notices. Green = we keep it; amber = it goes on the page. The
   colours differ because the promises are opposite, and somebody skimming
   should register that before they read a word. */
.pxrv-privacy{margin:14px 0 0;padding:11px 13px;border-radius:8px;font-size:12.5px;line-height:1.6}
.pxrv-privacy[hidden]{display:none}
.pxrv-privacy.is-private{background:color-mix(in srgb,var(--r-pos) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r-pos) 35%,transparent)}
.pxrv-privacy.is-public{background:color-mix(in srgb,#e3a008 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#e3a008 45%,transparent)}
.pxrv-privacy.is-public strong{color:#f0b429}

/* The countdown. Amber while it is an instruction, muted once it is met —
   a green tick on a character count is more celebration than it deserves. */
/* The example link. Sits under the type dropdown, where the question
   "what should this look like?" actually occurs. */
.pxrv-eg{display:inline-flex;align-items:center;gap:6px;margin:-2px 0 2px;
  font-size:12.5px;color:var(--brand,#0fa0cc)}
.pxrv-eg[hidden]{display:none}
.pxrv-eg::before{content:"";width:13px;height:11px;flex:none;border-radius:2px;
  border:1.5px solid currentColor}
.pxrv-eg:hover,.entry .pxrv .pxrv-eg:hover{color:var(--glow,#57cdf9);text-decoration:underline}
.entry .pxrv .pxrv-eg{color:var(--brand,#0fa0cc)}

.pxrv-count{transition:color .12s}
.pxrv-count.is-short{color:#e3a008}
.pxrv-count.is-ok{color:var(--r-dim)}
.pxg-drop.is-over{border-color:var(--act,#ea6d22)}

/* ======================================================================
   EXAMPLE POPUP

   Sized to the image, not the other way round: max-width and max-height are
   the only caps, and width/height stay auto, so a certificate is drawn at
   its natural pixels whenever the viewport allows it. Forcing a width is
   what makes a screenshot look soft.
   ====================================================================== */
.pxrv-lb{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(4,9,11,.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pxrv-lb[hidden]{display:none}
.pxrv-lb-open,.pxrv-lb-open body{overflow:hidden}

.pxrv-lb-in{display:flex;flex-direction:column;max-width:min(1200px,94vw);max-height:92vh;
  background:var(--raise,#141f24);box-shadow:0 30px 90px -20px rgba(0,0,0,.8),
  inset 0 0 0 1px var(--line,#24363d);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}

.pxrv-lb-bar{display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--line,#24363d)}
.pxrv-lb-t{font-weight:700;font-size:14px;color:var(--text,#edf3f5)}
.pxrv-lb-x{margin-left:auto;background:none;border:0;cursor:pointer;line-height:1;
  font-size:26px;padding:0 4px;color:var(--dim,#8fa6ae)}
.pxrv-lb-x:hover{color:var(--text,#edf3f5)}

/* The scroll container. A certificate taller than the screen is scrolled at
   full size rather than squashed to fit, which is the whole point. */
.pxrv-lb-body{overflow:auto;padding:16px;background:var(--bg-deep,#0a1114);
  display:flex;align-items:center;justify-content:center}
.pxrv-lb-body img{display:block;max-width:100%;height:auto;width:auto;
  image-rendering:auto}

.pxrv-lb-foot{padding:9px 16px;font-size:11.5px;color:var(--faint,#5a737d);
  border-top:1px solid var(--line,#24363d)}

@media(max-width:600px){
  .pxrv-lb{padding:10px}
  .pxrv-lb-in{max-width:100%;max-height:96vh}
}

/* ======================================================================
   THE DETAIL STRIP ON A REVIEW

   What they scored per category, and the certificate as a thumbnail. The
   certificate used to be printed full width, which made a screenshot the
   loudest thing on a page whose job is to carry someone's words.
   ====================================================================== */
.pxrv-detail{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--r-line)}

.pxrv-breakdown{flex:1 1 320px;min-width:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 24px}
.pxrv-bd{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:baseline}
.pxrv-bd-l{font-size:12px;color:var(--r-dim)}
.pxrv-bd-v{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.pxrv-bd-v.hi{color:var(--r-pos)}
.pxrv-bd-v.mid{color:#e3a008}
.pxrv-bd-v.lo{color:var(--neg,#e85f63)}
.pxrv-bd-bar{grid-column:1/-1;height:3px;border-radius:2px;
  background:var(--r-line);overflow:hidden}
.pxrv-bd-bar i{display:block;height:100%;border-radius:2px}
.pxrv-bd-bar i.hi{background:var(--r-pos)}
.pxrv-bd-bar i.mid{background:#e3a008}
.pxrv-bd-bar i.lo{background:var(--neg,#e85f63)}

/* The certificate, small. Click opens it full size in the same panel the
   example images use. */
.pxrv-certcard{flex:0 0 auto;width:132px;display:flex;flex-direction:column;gap:5px;
  cursor:pointer;text-decoration:none}
.pxrv-certthumb{display:block;width:132px;height:84px;overflow:hidden;border-radius:8px;
  border:1px solid var(--r-line);background:var(--bg-deep,#0a1114);transition:border-color .14s}
.pxrv-certthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pxrv-certcard:hover .pxrv-certthumb{border-color:var(--r-act)}
.pxrv-certlab{font-size:11.5px;font-weight:600;color:var(--r-text);line-height:1.3}
.pxrv-certsub{font-size:10.5px;color:var(--r-dim)}
.pxrv .pxrv-certcard,.entry .pxrv .pxrv-certcard{text-decoration:none}

@media(max-width:560px){
  .pxrv-breakdown{grid-template-columns:1fr}
  .pxrv-detail{gap:16px}
}

/* ======================================================================
   BADGES

   One colour token per badge, applied to the whole mark through
   currentColor, so a badge is one object in one hue rather than a shape
   with a colour painted on top of it.
   ====================================================================== */
.pxrv-bgs{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.pxrv-bg{display:inline-flex;align-items:center;gap:6px;line-height:1}
.pxrv-bg-svg{width:18px;height:18px;flex:none;display:block;overflow:visible}
.pxrv-bg-a{fill:currentColor;stroke:currentColor}
.pxrv-bg-a[fill="none"]{fill:none}
.pxrv-bg-b{fill:currentColor}
.pxrv-bg-b[fill="none"]{fill:none}

.pxrv-bg.t-teal{color:#2fb9a8}
.pxrv-bg.t-blue{color:#3f9ede}
.pxrv-bg.t-gold{color:#e8b430}
.pxrv-bg.t-violet{color:#9b7ae0}
.pxrv-bg.t-ember{color:#ef7a3a}

/* Beside a name: the mark alone, with the name in the tooltip. Five names
   spelled out next to a username is a wall, and the shapes are distinct
   enough to learn. */
.pxrv-bg.is-glyph{cursor:default}
.pxrv-bg.is-glyph .pxrv-bg-svg{width:19px;height:19px}

/* With a label, for a legend or a profile. */
.pxrv-bg.is-chip{padding:4px 10px 4px 7px;border-radius:20px;font-size:11.5px;font-weight:700;
  background:color-mix(in srgb,currentColor 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 38%,transparent)}
.pxrv-bg.is-chip .pxrv-bg-svg{width:16px;height:16px}
.pxrv-bg-n{white-space:nowrap}

/* Large, for the page that explains how to earn them. */
.pxrv-bg.is-tile{gap:12px;padding:14px 16px;border-radius:12px;align-items:flex-start;
  background:color-mix(in srgb,currentColor 9%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent)}
.pxrv-bg.is-tile .pxrv-bg-svg{width:40px;height:40px;margin-top:1px}
.pxrv-bg-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.pxrv-bg-txt b{font-size:14px;line-height:1.2}
.pxrv-bg-txt small{font-size:11.5px;line-height:1.45;color:var(--r-dim);font-weight:400}

.pxrv-bgwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}

/* The verified-only switch. Two links, not a toggle, so each state has a URL
   that can be sent to someone. */
.pxrv-vfilter{display:inline-flex;gap:4px;padding:4px;margin:0 0 18px;border-radius:10px;
  background:var(--bg-deep,#0a1114);box-shadow:inset 0 0 0 1px var(--r-line)}
.pxrv-vfilter a,.entry .pxrv .pxrv-vfilter a{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:7px;
  font-size:12.5px;font-weight:600;color:var(--r-dim);text-decoration:none}
.pxrv-vfilter a:hover{color:var(--r-text)}
.pxrv-vfilter a.is-on,.entry .pxrv .pxrv-vfilter a.is-on{
  background:var(--r-bg);color:var(--r-text);box-shadow:inset 0 0 0 1px var(--r-line)}
.pxrv-vfilter .pxrv-bg-svg{width:15px;height:15px}
.pxrv-admin .pxrv-legalnote{padding:12px 14px;border-left:4px solid #dba617;background:#fcf9f2;max-width:640px}
.pxrv-admin .pxrv-legalnote p{margin:0 0 8px;font-size:13px;line-height:1.55}
.pxrv-admin .pxrv-legalnote p:last-child{margin-bottom:0;color:#646970}
.pxrv-bg.t-indigo{color:#6f7fe8}