/* video-serp.css — scoped styles for the Video SERP report view (#rep-view-video-serp, a Reports sub-view). Ported from the approved v2 mockup (docs/superpowers/specs/2026-07-14-video-serp-report-mockup.html). All classes carry a vs- prefix and every rule is scoped under the view id so the shared global stylesheet (components.css/app.css) can't bleed in or out. RED (--danger*) is reserved for negative/risk ONLY; not-owned + empty SV-tab slots use the neutral --slate. Tokens the app theme already ships (--bg,--surface,--surface-sunken,--surface-hover,--border,--border-strong, --text,--text-muted,--text-faint,--accent,--accent-hover,--accent-tint, --success,--success-tint,--warn,--warn-tint,--danger,--danger-tint,--info, --info-tint,--font-serif,--font-sans) are reused; the rest are defined here. */ #rep-view-video-serp{ /* palette gaps not in theme.css — copied verbatim from the approved mockup */ --accent-contrast:#a64f31; --warn-text:#87611f; /* red is consumed straight from the app theme's --danger; only the red text/tint shades + negative-row tints are defined locally (approved mockup values). RED stays reserved for negative / reputation-risk. */ --danger-text:#b3442b; --danger-tint:rgba(192,73,47,.12); --plum:#7d6fb0; --plum-text:#5f5391; --plum-tint:rgba(125,111,176,.15); --score:#0e7490; --score-tint:rgba(14,116,144,.10); --new:#b8611f; --new-text:#9c4f16; --new-tint:rgba(199,110,45,.14); --new-border:#dd8a4f; --slate:#8a8780; --slate-strong:#726f68; --slate-tint:rgba(138,135,128,.16); --warm-row:#fdf9f4; --warm-row-hover:#f7efe6; --neg-row:#fbeee9; --neg-row-hover:#f6e1d9; --accent-ring:rgba(217,119,87,.42); /* compat aliases — the committed C1–C8 JS (video-serp.js) emits inline var(--vs-*) into generated HTML/SVG and reads a couple via getComputedStyle. Canonical tokens stay un-prefixed (mockup-faithful + markup contract); these alias the handful the JS names so the render bridge is untouched and each resolves to the exact same value as before. RED stays reserved: the only aliased red is --vs-danger* (negative / reputation-risk). */ --vs-accent-contrast:var(--accent-contrast); --vs-danger:var(--danger); --vs-danger-text:var(--danger-text); --vs-danger-tint:var(--danger-tint); --vs-plum:var(--plum); --vs-plum-text:var(--plum-text); --vs-score:var(--score); --vs-slate:var(--slate); --vs-slate-strong:var(--slate-strong); font-size:13px; line-height:1.5; color:var(--text); max-width:1360px; } #rep-view-video-serp .tnum{font-variant-numeric:tabular-nums} #rep-view-video-serp .hidden{display:none!important} /* header */ /* padding-top gives the bell's -2px badge overhang headroom so it never clips above y=0 when the report header sits flush at the top of the viewport */ #rep-view-video-serp .vs-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;padding-top:3px;} #rep-view-video-serp .vs-page-title{font-family:var(--font-serif);font-weight:500;font-size:27px;letter-spacing:-.01em;margin:0;color:var(--text);line-height:1.1;} #rep-view-video-serp .vs-subtitle{font-size:12px;color:var(--text-faint);margin-top:3px;} #rep-view-video-serp .vs-head-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto;position:relative;} #rep-view-video-serp .vs-btn-compare{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--accent);background:var(--accent-tint);color:var(--accent-contrast);} #rep-view-video-serp .vs-btn-compare svg{stroke:var(--accent-contrast);} #rep-view-video-serp .vs-btn-compare .vs-cdot{width:6px;height:6px;border-radius:50%;background:var(--accent);} #rep-view-video-serp .vs-btn-compare.off{background:var(--surface);border-color:var(--border-strong);color:var(--text-muted);} #rep-view-video-serp .vs-btn-compare.off svg{stroke:var(--text-muted);} #rep-view-video-serp .vs-btn-compare.off .vs-cdot{background:var(--border-strong);} #rep-view-video-serp .vs-bell-wrap{position:relative;display:flex;align-items:center;} #rep-view-video-serp .vs-bell{position:relative;width:34px;height:34px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);} #rep-view-video-serp .vs-bell:hover{background:var(--surface-hover);color:var(--text);} #rep-view-video-serp .vs-bell .vs-badge{position:absolute;top:-2px;right:-6px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);} /* toolbar */ #rep-view-video-serp .vs-toolbar{display:flex;align-items:flex-end;justify-content:flex-start;gap:20px;margin-bottom:12px;flex-wrap:wrap;} #rep-view-video-serp .vs-ctrl-group{display:flex;flex-direction:column;gap:5px;} #rep-view-video-serp .vs-ctrl-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);padding-left:2px;} #rep-view-video-serp .vs-seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px;} #rep-view-video-serp .vs-seg button{font-family:inherit;font-size:12px;padding:5px 11px;border-radius:6px;border:none;cursor:pointer;background:transparent;color:var(--text-muted);font-weight:500;white-space:nowrap;transition:background .12s,color .12s;} #rep-view-video-serp .vs-seg button:hover{color:var(--text);} #rep-view-video-serp .vs-seg button.on{background:var(--accent-tint);color:var(--accent-contrast);font-weight:600;} #rep-view-video-serp .vs-seg .custom{display:inline-flex;align-items:center;gap:5px;} #rep-view-video-serp .vs-seg .custom svg{width:12px;height:12px;stroke:currentColor;opacity:.7;} #rep-view-video-serp .vs-custom-inputs{display:inline-flex;align-items:center;gap:6px;margin-left:4px;} #rep-view-video-serp .vs-custom-inputs input{font-family:inherit;font-size:12px;padding:4px 7px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);} #rep-view-video-serp .vs-arrow{color:var(--text-faint);} /* compare banner — CLAY */ #rep-view-video-serp .vs-cmp-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-tint);border:1px solid rgba(217,119,87,.28);border-radius:9px;padding:8px 14px;margin-bottom:16px;font-size:12px;} #rep-view-video-serp .vs-cmp-banner .vs-lead{color:var(--accent-contrast);font-weight:700;} #rep-view-video-serp .vs-cmp-banner .vs-vs{color:var(--text-faint);} #rep-view-video-serp .vs-cmp-banner .vs-cur{color:var(--text);font-weight:500;} #rep-view-video-serp .vs-cmp-opts{display:flex;gap:5px;flex-wrap:wrap;margin-left:4px;} #rep-view-video-serp .vs-chip{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-muted);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;} #rep-view-video-serp .vs-chip.on{background:var(--surface);border-color:var(--accent);color:var(--accent-contrast);font-weight:600;box-shadow:0 0 0 2px var(--accent-tint);} #rep-view-video-serp .vs-chip.disabled{opacity:.75;cursor:not-allowed;border-style:dashed;color:var(--text-faint);background:var(--surface-sunken);} #rep-view-video-serp .vs-chip .vs-nolabel{font-size:9.5px;opacity:.9;margin-left:4px;} #rep-view-video-serp .vs-chip .vs-parttag{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-left:5px;color:var(--warn-text);background:var(--warn-tint);border-radius:4px;padding:0 4px;} #rep-view-video-serp .vs-cmp-note{margin-left:auto;font-size:10.5px;color:var(--text-faint);display:flex;align-items:center;gap:5px;} #rep-view-video-serp .vs-cmp-note .vs-pmark{color:var(--warn-text);font-weight:700;} /* ── REPUTATION HERO (visual + emotional center) ── */ #rep-view-video-serp .vs-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(190px,.92fr) minmax(232px,1fr);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);margin-bottom:12px;overflow:hidden;} #rep-view-video-serp .vs-hero-main{padding:18px 22px;display:flex;flex-direction:column;justify-content:center;} #rep-view-video-serp .vs-hero-eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);} #rep-view-video-serp .vs-hero-eyebrow .vs-rdot{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:0 0 auto;box-shadow:0 0 0 3px var(--danger-tint);} #rep-view-video-serp .vs-hero-figure{display:flex;align-items:baseline;gap:16px;margin:11px 0 5px;} #rep-view-video-serp .vs-hero-num{font-family:var(--font-serif);font-weight:500;font-size:56px;line-height:.92;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums;} #rep-view-video-serp .vs-hero-delta-wrap{display:flex;flex-direction:column;gap:1px;} #rep-view-video-serp .vs-hero-delta{font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:5px;} #rep-view-video-serp .vs-hero-delta.g{color:var(--success);} #rep-view-video-serp .vs-hero-delta.r{color:var(--danger-text);} #rep-view-video-serp .vs-hero-delta-lbl{font-size:10.5px;font-weight:600;color:var(--success);} #rep-view-video-serp .vs-hero-delta-lbl.g{color:var(--success);} #rep-view-video-serp .vs-hero-delta-lbl.r{color:var(--danger-text);} #rep-view-video-serp .vs-hero-denom{font-size:12px;color:var(--text-muted);} #rep-view-video-serp .vs-hero-caption{font-size:10.5px;color:var(--text-faint);margin-top:9px;display:flex;align-items:center;gap:5px;} #rep-view-video-serp .vs-hero-caption .g{color:var(--success);font-weight:700;} #rep-view-video-serp .vs-hero-caption .r{color:var(--danger-text);font-weight:700;} #rep-view-video-serp .vs-hero-spark{padding:18px 20px;border-left:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0;} #rep-view-video-serp .vs-spark-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);} #rep-view-video-serp .vs-spark-wrap{position:relative;} #rep-view-video-serp .vs-spark-wrap svg{width:100%;height:auto;display:block;overflow:visible;} #rep-view-video-serp .vs-spark-hit{pointer-events:all;cursor:pointer;} #rep-view-video-serp .vs-spark-hover{pointer-events:none;} #rep-view-video-serp .vs-spark-tip{position:absolute;background:var(--surface-raised);color:var(--text);border:1px solid var(--border);font-size:10px;padding:3px 8px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.12);pointer-events:none;white-space:nowrap;z-index:5;} #rep-view-video-serp .vs-spark-tip[hidden]{display:none;} #rep-view-video-serp .vs-spark-tip b{font-variant-numeric:tabular-nums;} #rep-view-video-serp .vs-spark-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;} #rep-view-video-serp .vs-spark-ends b{color:var(--text);font-weight:700;} #rep-view-video-serp .vs-baseline{stroke:var(--border-strong);stroke-width:1;} #rep-view-video-serp .vs-hero-risk{padding:16px 18px 16px 20px;border-left:1px solid var(--border);background:var(--neg-row);display:flex;flex-direction:column;gap:5px;justify-content:center;position:relative;} #rep-view-video-serp .vs-hero-risk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--danger);} #rep-view-video-serp .vs-hero-risk-empty{background:var(--surface-sunken);} #rep-view-video-serp .vs-hero-risk-empty::before{display:none;} #rep-view-video-serp .vs-risk-lbl{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--danger-text);} #rep-view-video-serp .vs-risk-lbl svg{width:13px;height:13px;stroke:var(--danger-text);fill:none;stroke-width:2;flex:0 0 auto;} #rep-view-video-serp .vs-hero-risk-empty .vs-risk-lbl{color:var(--text-muted);} #rep-view-video-serp .vs-risk-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.32;} #rep-view-video-serp .vs-risk-meta{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:5px;align-items:center;} #rep-view-video-serp .vs-risk-meta .sep{color:var(--border-strong);} #rep-view-video-serp .vs-risk-meta .rising{color:var(--danger-text);font-weight:600;} #rep-view-video-serp .vs-risk-cta{align-self:flex-start;margin-top:5px;font:inherit;font-size:11px;font-weight:600;color:var(--danger-text);background:var(--surface);border:1px solid rgba(192,73,47,.42);border-radius:7px;padding:5px 11px;cursor:pointer;} #rep-view-video-serp .vs-risk-cta:hover{background:rgba(192,73,47,.08);} /* tiles */ #rep-view-video-serp .vs-tiles{display:grid;gap:12px;margin-bottom:12px;} #rep-view-video-serp .vs-row1{grid-template-columns:224px repeat(3,1fr);} #rep-view-video-serp .vs-row2{grid-template-columns:repeat(4,1fr);margin-bottom:18px;} #rep-view-video-serp .vs-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:14px 15px;min-width:0;display:flex;flex-direction:column;} #rep-view-video-serp .vs-tile-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.055em;color:var(--text-muted);margin-bottom:8px;} #rep-view-video-serp .vs-tile-sub{font-size:9.5px;color:var(--text-faint);margin:-4px 0 9px;line-height:1.35;} #rep-view-video-serp .vs-secondary-tag{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);background:var(--surface-sunken);border:1px solid var(--border);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:2px;} /* big numbers */ #rep-view-video-serp .vs-big{font-family:var(--font-serif);font-weight:500;font-size:30px;line-height:1;color:var(--text);} #rep-view-video-serp .vs-big.sm{font-size:22px;} #rep-view-video-serp .vs-delta{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:1px;} #rep-view-video-serp .vs-delta.g{color:var(--success);} #rep-view-video-serp .vs-delta.r{color:var(--danger-text);} #rep-view-video-serp .vs-delta.m{color:var(--text-faint);font-weight:500;} #rep-view-video-serp .vs-headline-row{display:flex;align-items:baseline;gap:8px;margin-bottom:11px;} /* appearances buckets */ #rep-view-video-serp .vs-stackbar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-bottom:12px;background:var(--surface-sunken);} #rep-view-video-serp .vs-stackbar > span{height:100%;border-right:1.5px solid var(--surface);} #rep-view-video-serp .vs-stackbar > span:last-child{border-right:none;} #rep-view-video-serp .vs-stack-cap{font-size:9.5px;color:var(--text-faint);margin:-6px 0 11px;} #rep-view-video-serp .vs-stack-cap b{color:var(--text-muted);font-weight:700;} #rep-view-video-serp .vs-buckets{display:flex;flex-direction:column;gap:7px;} #rep-view-video-serp .vs-bk{display:flex;align-items:center;gap:7px;font-size:11px;} #rep-view-video-serp .vs-bk .vs-dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto;} #rep-view-video-serp .vs-bk .vs-lbl{color:var(--text);font-weight:500;} #rep-view-video-serp .vs-bk .vs-spacer{flex:1;} #rep-view-video-serp .vs-bk .vs-cnt{font-weight:700;color:var(--text);font-size:12px;min-width:26px;text-align:right;} #rep-view-video-serp .vs-bk .vs-pct{color:var(--text-faint);font-size:10px;min-width:28px;text-align:right;} #rep-view-video-serp .vs-bk .vs-bd{font-size:10.5px;font-weight:600;min-width:30px;text-align:right;} #rep-view-video-serp .vs-bk.untag .vs-lbl{color:var(--text-muted);} #rep-view-video-serp .vs-bk.untag .vs-cnt{color:var(--text-muted);font-weight:600;} #rep-view-video-serp .vs-bk.total{border-top:1px solid var(--border);margin-top:3px;padding-top:8px;} #rep-view-video-serp .vs-bk.total .vs-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);} #rep-view-video-serp .vs-bk.total .vs-cnt{font-size:13px;} #rep-view-video-serp .vs-nudge{margin-top:auto;padding-top:11px;} #rep-view-video-serp .vs-nudge-inner{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--warn-text);background:var(--warn-tint);border:1px solid rgba(192,138,46,.34);border-radius:6px;padding:6px 9px;} #rep-view-video-serp .vs-nudge-inner svg{width:13px;height:13px;stroke:var(--warn-text);flex:0 0 auto;} #rep-view-video-serp .vs-nudge-inner b{font-weight:700;} /* chart wrappers (Chart.js canvas) */ #rep-view-video-serp .vs-chart-wrap{position:relative;height:132px;width:100%;margin-top:2px;} /* legends */ #rep-view-video-serp .vs-lgd{display:flex;gap:11px;flex-wrap:wrap;margin-top:9px;align-items:center;} #rep-view-video-serp .vs-lg{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;color:var(--text-muted);white-space:nowrap;} #rep-view-video-serp .vs-lg i{width:8px;height:8px;border-radius:2px;flex:0 0 auto;} #rep-view-video-serp .vs-lg.line i{width:14px;height:2.5px;border-radius:1px;} #rep-view-video-serp .vs-lg.dash i{width:14px;height:0;border-top:2px dashed var(--accent);background:none!important;border-radius:0;} #rep-view-video-serp .vs-lg.note{color:var(--text-faint);font-style:italic;} /* coverage tile */ #rep-view-video-serp .vs-cov-lead{display:flex;align-items:baseline;gap:10px;margin-top:2px;} #rep-view-video-serp .vs-cov-pct{font-family:var(--font-serif);font-weight:500;font-size:32px;color:var(--success);line-height:1;} #rep-view-video-serp .vs-cov-lead-r{display:flex;flex-direction:column;gap:1px;} #rep-view-video-serp .vs-cov-lead-lbl{font-size:10.5px;color:var(--text-muted);font-weight:600;} #rep-view-video-serp .vs-cov-num-line{font-size:11px;color:var(--text-faint);margin:8px 0 10px;} #rep-view-video-serp .vs-cov-num-line b{color:var(--text-muted);font-weight:700;} #rep-view-video-serp .vs-cov-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface-sunken);margin-bottom:9px;} #rep-view-video-serp .vs-cov-bar > span{height:100%;border-right:1.5px solid var(--surface);} #rep-view-video-serp .vs-cov-bar > span:last-child{border-right:none;} #rep-view-video-serp .vs-cov-foot{font-size:9.5px;color:var(--text-faint);margin-top:auto;padding-top:11px;line-height:1.45;} /* sv tab grid */ #rep-view-video-serp .vs-svgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:2px 0 4px;} #rep-view-video-serp .vs-svgrid .vs-cell{aspect-ratio:1.7/1;border-radius:3px;background:var(--surface-sunken);} #rep-view-video-serp .vs-svgrid .vs-cell.no{background:var(--border-strong);} #rep-view-video-serp .vs-svcallouts{display:flex;gap:16px;margin-bottom:11px;} #rep-view-video-serp .vs-svcall .vs-n{font-family:var(--font-serif);font-weight:500;font-size:20px;line-height:1;} #rep-view-video-serp .vs-svcall .vs-cap{font-size:9.5px;color:var(--text-muted);margin-top:3px;display:flex;align-items:center;gap:4px;} #rep-view-video-serp .vs-svcall .vs-cap .vs-delta{font-size:10.5px;} /* sources */ #rep-view-video-serp .vs-srcs{display:flex;flex-direction:column;gap:10px;} #rep-view-video-serp .vs-srcrow .vs-src-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;} #rep-view-video-serp .vs-srcrow .vs-src-name{font-size:11.5px;color:var(--text);font-weight:500;display:flex;align-items:center;gap:6px;} #rep-view-video-serp .vs-srcrow .vs-src-name i{width:8px;height:8px;border-radius:2px;flex:0 0 auto;} #rep-view-video-serp .vs-srcrow .vs-src-rt{display:flex;align-items:center;gap:6px;} #rep-view-video-serp .vs-srcrow .vs-src-cnt{font-size:12px;font-weight:700;color:var(--text);} #rep-view-video-serp .vs-srcrow .vs-src-sp{font-size:10px;color:var(--text-faint);} #rep-view-video-serp .vs-srcrow .vs-delta{font-size:10.5px;} #rep-view-video-serp .vs-srctrack{height:5px;border-radius:3px;background:var(--surface-sunken);overflow:hidden;} #rep-view-video-serp .vs-srctrack > span{display:block;height:100%;border-radius:3px;} /* filter/sort bar */ #rep-view-video-serp .vs-filterbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px;} #rep-view-video-serp .vs-fb-label{font-size:10.5px;color:var(--text-faint);font-weight:700;text-transform:uppercase;letter-spacing:.05em;} #rep-view-video-serp .vs-fchip{font-size:11px;padding:3px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;} #rep-view-video-serp .vs-fchip:hover{background:var(--surface-hover);} #rep-view-video-serp .vs-fchip.on{background:var(--text);border-color:var(--text);color:#fff;font-weight:500;} #rep-view-video-serp .vs-fb-div{width:1px;height:16px;background:var(--border-strong);margin:0 3px;} #rep-view-video-serp .vs-fb-sort{margin-left:auto;font-size:10.5px;color:var(--text-faint);display:flex;align-items:center;gap:4px;} #rep-view-video-serp .vs-fb-sort b{cursor:pointer;color:var(--text-muted);font-weight:600;} #rep-view-video-serp .vs-fb-sort b.on{color:var(--score);} /* table */ #rep-view-video-serp .vs-tablecard{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden;} #rep-view-video-serp .vs-tscroll{overflow-x:auto;} #rep-view-video-serp table.vs-vt{border-collapse:separate;border-spacing:0;width:100%;min-width:1664px;font-size:11.5px;table-layout:fixed;} #rep-view-video-serp table.vs-vt thead th{position:sticky;top:0;background:var(--surface-sunken);color:var(--text-muted);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:9px 6px;border-bottom:1px solid var(--border-strong);text-align:right;white-space:nowrap;z-index:2;} #rep-view-video-serp table.vs-vt thead th.l{text-align:left;} #rep-view-video-serp table.vs-vt thead th.grp{border-left:1px solid var(--border);} #rep-view-video-serp table.vs-vt thead th.sortable{cursor:pointer;} #rep-view-video-serp table.vs-vt thead th.sorted{color:var(--score);} #rep-view-video-serp table.vs-vt thead th.sortable:hover{color:var(--text);} #rep-view-video-serp table.vs-vt tbody td{padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:top;text-align:right;overflow:hidden;} #rep-view-video-serp table.vs-vt tbody td.l{text-align:left;} #rep-view-video-serp table.vs-vt tbody td.grp{border-left:1px solid var(--border);} #rep-view-video-serp table.vs-vt tbody tr:last-child td{border-bottom:none;} #rep-view-video-serp table.vs-vt tbody tr:hover td{background:var(--accent-tint);} /* untagged rows = warm cream */ #rep-view-video-serp tr.warm td{background:var(--warm-row);} #rep-view-video-serp tr.warm:hover td{background:var(--warm-row-hover);} /* NEGATIVE rows = red rail + red-tint bg, unmissable & distinct from warm */ #rep-view-video-serp tr.neg td{background:var(--neg-row);} #rep-view-video-serp tr.neg:hover td{background:var(--neg-row-hover);} #rep-view-video-serp td.vs-rownum{color:var(--text-faint);font-size:10.5px;padding-left:11px;text-align:left;width:24px;} #rep-view-video-serp .vs-v{display:block;font-weight:500;color:var(--text);} #rep-view-video-serp td.tnum .vs-v{font-variant-numeric:tabular-nums;} #rep-view-video-serp .vs-d{display:inline;font-size:10.5px;font-weight:600;margin-left:4px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-faint);} #rep-view-video-serp .vs-d.up::before{content:"\25B2\FE0E";font-size:7px;margin-right:1px;position:relative;top:-1px;} #rep-view-video-serp .vs-d.dn::before{content:"\25BC\FE0E";font-size:7px;margin-right:1px;position:relative;top:-1px;} #rep-view-video-serp .vs-d.flat{color:var(--text-faint);font-weight:500;} /* semantic delta color (restores green=improving / red=worsening; muted vs the dominant negative-row rails per decision 14). Applies to table (.vs-d) AND tile (.vs-delta) deltas; red here is a small-weight text token, not a rail. */ #rep-view-video-serp .vs-d-good{color:var(--success);} #rep-view-video-serp .vs-d-bad{color:var(--danger-text);} #rep-view-video-serp td.vs-scorecol .vs-v{color:var(--score);font-weight:700;font-size:13px;} #rep-view-video-serp td.vs-totcol .vs-v{font-weight:700;} #rep-view-video-serp td.pos .vs-v{color:var(--text-muted);font-weight:500;} #rep-view-video-serp .vs-urlcell{min-width:0;max-width:100%;} #rep-view-video-serp .vs-url{display:block;text-decoration:none;font-size:10px;color:var(--info);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;} #rep-view-video-serp a.vs-url:hover{text-decoration:underline;} #rep-view-video-serp .vs-url-goto{color:var(--text-faint);font-style:italic;} #rep-view-video-serp .vs-cities{font-size:9px;font-weight:600;color:var(--danger-text);background:var(--danger-tint);border-radius:4px;padding:1px 5px;white-space:nowrap;} #rep-view-video-serp .vs-titlecell{font-size:11px;color:var(--text);white-space:normal;} /* custom tag dropdown (type + sentiment) — the closed trigger matches the .vs-src source-badge geometry (4px radius, 9px/600, chevron room); semantic tints ride the --pc/--pb/--pbd custom props (colors load-bearing: negative=red etc.). The floating .vs-menu below replaces the native