(10–50%)
(> 50%)
`data-state` drives color, verdict chip, and meter marker
tone. Nothing else in the markup needs to change per-state.
4. Populate the four dynamic text slots (see handoff.md):
.cs-r2__tick-time → "2.1" (scan seconds, 1 decimal)
.cs-r2__tick-words → "247" (word count, comma-grouped)
.cs-r2__tick-verdict→ "HUMAN" (uppercase classification)
.cs-r2__pct → "1" (0–100 integer)
.cs-r2__marker → style="left: 1%" (matches pct)
DEPENDENCIES
------------
Requires the CoverSentry design-token CSS (colors_and_type.css)
to be loaded above this one. Uses: --cs-ink, --cs-ink-3,
--cs-ink-5, --cs-line, --cs-primary, --cs-font-body,
--cs-font-mono. If absent, sane fallbacks kick in below.
============================================================ */
.cs-r2 {
/* --- token fallbacks so this file works stand-alone --- */
--r2-ink: var(--cs-ink, #2d3748);
--r2-ink-3: var(--cs-ink-3, #4a5568);
--r2-ink-5: var(--cs-ink-5, #718096);
--r2-line: var(--cs-line, #e2e8f0);
--r2-surface: #ffffff;
--r2-surface-2: #fafbfc;
--r2-safe: var(--cs-primary, #00d1b2);
--r2-watch: #d08a4a;
--r2-flag: #b45454;
--r2-font-body: var(--cs-font-body, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
--r2-font-mono: var(--cs-font-mono, 'Courier New', Courier, monospace);
/* state-scoped tone — everything reads `var(--r2-tone)` */
--r2-tone: var(--r2-safe);
--r2-tone-soft: color-mix(in srgb, var(--r2-safe) 9%, transparent);
background: var(--r2-surface);
color: var(--r2-ink);
font-family: var(--r2-font-body);
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--r2-line);
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.cs-r2[data-state="human"],
.cs-r2[data-state="safe"] { --r2-tone: var(--r2-safe); --r2-tone-soft: color-mix(in srgb, var(--r2-safe) 9%, transparent); }
.cs-r2[data-state="watch"],
.cs-r2[data-state="mixed"] { --r2-tone: var(--r2-watch); --r2-tone-soft: color-mix(in srgb, var(--r2-watch) 9%, transparent); }
.cs-r2[data-state="flagged"],
.cs-r2[data-state="ai"] { --r2-tone: var(--r2-flag); --r2-tone-soft: color-mix(in srgb, var(--r2-flag) 9%, transparent); }
/* ---------- Top accent bar (4px hairline carries state) ---------- */
.cs-r2__accent {
height: 4px;
background: var(--r2-tone);
}
/* ---------- Ticker header (terminal line) ---------- */
.cs-r2__ticker {
background: var(--r2-ink);
color: #e6e6e6;
padding: 9px 22px;
font: 500 12px/1 var(--r2-font-mono);
letter-spacing: .06em;
display: flex;
align-items: center;
gap: 14px;
}
.cs-r2__ticker-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--r2-tone);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--r2-tone) 20%, transparent);
}
.cs-r2__ticker-text { opacity: .95; }
.cs-r2__ticker-url { margin-left: auto; color: #888; font-size: 11px; }
/* ---------- Body wrapper ---------- */
.cs-r2__body {
padding: 32px 44px 40px;
background: var(--r2-tone-soft);
}
/* ---------- Verdict header row (title + big pct readout) ---------- */
.cs-r2__verdict {
display: flex;
align-items: baseline;
gap: 18px;
margin-bottom: 28px;
}
.cs-r2__verdict-main { flex: 1 1 auto; min-width: 0; }
.cs-r2__eyebrow {
font: 500 11px/1 var(--r2-font-body);
letter-spacing: .12em;
text-transform: uppercase;
color: #32363b;
margin-bottom: 6px;
}
.cs-r2__eyebrow--mono {
font-family: var(--r2-font-mono);
}
.cs-r2__title {
margin: 0;
font: 700 28px/1.2 var(--r2-font-body);
letter-spacing: -0.015em;
color: var(--r2-ink);
}
.cs-r2__sub {
margin-top: 6px;
font: 400 14px/1.5 var(--r2-font-body);
color: var(--r2-ink-3);
}
.cs-r2__signal { text-align: right; flex: 0 0 auto; }
.cs-r2__pct-wrap {
font: 700 46px/1 var(--r2-font-body);
color: var(--r2-tone);
letter-spacing: -0.02em;
}
.cs-r2__pct-unit {
font-size: 26px;
opacity: .65;
margin-left: 1px;
}
/* ---------- Risk meter (Safe / Watch / Flagged) ---------- */
.cs-r2__meter-wrap {
margin-bottom: 28px;
}
.cs-r2__meter {
position: relative;
height: 44px;
display: flex;
border: 1px solid var(--r2-line);
border-radius: 8px;
overflow: hidden;
}
.cs-r2__meter-seg {
padding: 7px 12px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--r2-surface-2);
border-right: 1px solid var(--r2-line);
min-width: 0;
}
.cs-r2__meter-seg:last-child { border-right: 0; }
.cs-r2__meter-seg--safe { flex: 5; } /* 0–5% */
.cs-r2__meter-seg--watch { flex: 35; } /* 5–40% */
.cs-r2__meter-seg--flag { flex: 60; } /* 40–100% */
.cs-r2__meter-label {
font: 600 11px/1 var(--r2-font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--r2-ink-5);
}
.cs-r2__meter-range {
font: 400 11px/1 var(--r2-font-mono);
color: var(--r2-ink-5);
margin-top: 3px;
}
/* Active segment — tinted by state */
.cs-r2[data-state="human"] .cs-r2__meter-seg--safe,
.cs-r2[data-state="safe"] .cs-r2__meter-seg--safe,
.cs-r2[data-state="watch"] .cs-r2__meter-seg--watch,
.cs-r2[data-state="mixed"] .cs-r2__meter-seg--watch,
.cs-r2[data-state="flagged"] .cs-r2__meter-seg--flag,
.cs-r2[data-state="ai"] .cs-r2__meter-seg--flag {
background: var(--r2-tone-soft);
}
.cs-r2[data-state="human"] .cs-r2__meter-seg--safe .cs-r2__meter-label,
.cs-r2[data-state="safe"] .cs-r2__meter-seg--safe .cs-r2__meter-label,
.cs-r2[data-state="watch"] .cs-r2__meter-seg--watch .cs-r2__meter-label,
.cs-r2[data-state="mixed"] .cs-r2__meter-seg--watch .cs-r2__meter-label,
.cs-r2[data-state="flagged"] .cs-r2__meter-seg--flag .cs-r2__meter-label,
.cs-r2[data-state="ai"] .cs-r2__meter-seg--flag .cs-r2__meter-label {
color: var(--r2-tone);
}
.cs-r2[data-state="human"] .cs-r2__meter-seg--safe .cs-r2__meter-range,
.cs-r2[data-state="safe"] .cs-r2__meter-seg--safe .cs-r2__meter-range,
.cs-r2[data-state="watch"] .cs-r2__meter-seg--watch .cs-r2__meter-range,
.cs-r2[data-state="mixed"] .cs-r2__meter-seg--watch .cs-r2__meter-range,
.cs-r2[data-state="flagged"] .cs-r2__meter-seg--flag .cs-r2__meter-range,
.cs-r2[data-state="ai"] .cs-r2__meter-seg--flag .cs-r2__meter-range {
color: var(--r2-ink);
}
/* Marker — set left: XX% inline to match the percentage */
.cs-r2__marker {
position: absolute;
top: -6px;
bottom: -6px;
width: 2px;
background: var(--r2-ink);
transition: left .6s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
box-shadow:
-1px 0 10px 0 color-mix(in srgb, var(--r2-tone) 70%, transparent),
1px 0 10px 0 color-mix(in srgb, var(--r2-tone) 70%, transparent);
}
.cs-r2__marker::before,
.cs-r2__marker::after { /* diamond caps (top + bottom) */
content: '';
position: absolute;
left: -6px;
width: 14px;
height: 14px;
background: var(--r2-ink);
border-radius: 3px;
transform: rotate(45deg);
}
.cs-r2__marker::before { top: -8px; }
.cs-r2__marker::after { bottom: -8px; }
.cs-r2__marker-pct {
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
font: 700 11px/1 var(--r2-font-mono);
color: var(--r2-ink);
white-space: nowrap;
}
/* ---------- Notes grid ---------- */
.cs-r2__notes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 36px;
}
.cs-r2__note-head {
font: 500 11px/1 var(--r2-font-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: #32363b;
margin-bottom: 10px;
}
.cs-r2__note-body {
margin: 0;
font: 400 14px/1.6 var(--r2-font-body);
color: #282c33;
}
.cs-r2__note-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
.cs-r2__note-item {
display: grid;
grid-template-columns: 22px 1fr;
gap: 4px;
font: 400 13.5px/1.55 var(--r2-font-body);
color: #282c33;
}
.cs-r2__note-item::before {
/* numbered counter, tinted */
counter-increment: cs-r2-note;
content: "0" counter(cs-r2-note);
font: 600 12px/1 var(--r2-font-mono);
color: var(--r2-tone);
padding-top: 2px;
}
.cs-r2__note-list { counter-reset: cs-r2-note; }
.cs-r2__note-item em,
.cs-r2__note-item i { font-style: italic; }
/* Link to AI detection guide, under the review notes list */
.cs-r2__note-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font: 500 13px/1.4 var(--r2-font-body);
color: var(--r2-ink);
text-decoration: underline;
text-decoration-color: var(--r2-line);
text-underline-offset: 3px;
transition: text-decoration-color .15s;
}
.cs-r2__note-link:hover {
text-decoration-color: var(--r2-ink-3);
}
.cs-r2__note-link-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--r2-tone);
}
/* ---------- Divider + CTA row ---------- */
.cs-r2__rule {
height: 1px;
background: var(--r2-line);
margin: 32px 0 24px;
border: 0;
}
.cs-r2__cta-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.cs-r2__cta-lead {
font: 500 11px/1 var(--r2-font-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--r2-ink-5);
}
.cs-r2__btn {
appearance: none;
cursor: pointer;
border-radius: 8px;
font: 500 14px/1 var(--r2-font-body);
padding: 12px 18px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: filter .15s, background .15s, box-shadow .15s;
}
.cs-r2__btn--primary {
background: var(--r2-tone);
color: #fff;
border: 0;
font-weight: 600;
padding: 12px 20px;
}
.cs-r2__btn--primary:hover { filter: brightness(1.06); }
.cs-r2__btn--secondary {
background: #fff;
color: var(--r2-ink);
border: 1px solid var(--r2-line);
}
.cs-r2__btn--secondary:hover { background: var(--r2-surface-2); }
.cs-r2__cta-foot {
margin-left: auto;
font: 400 12px/1.4 var(--r2-font-body);
color: var(--r2-ink-5);
}
.cs-r2__cta-foot a {
color: var(--r2-ink);
text-decoration: underline;
text-decoration-color: var(--r2-line);
text-underline-offset: 3px;
}
.cs-r2__cta-foot a:hover {
text-decoration-color: var(--r2-ink-3);
}
/* ---------- Responsive ---------- */
@media (max-width: 720px) {
.cs-r2__body { padding: 24px 20px 28px; }
.cs-r2__verdict { flex-direction: column; gap: 10px; align-items: stretch; margin-bottom: 24px; }
.cs-r2__signal { text-align: left; }
.cs-r2__pct-wrap { font-size: 38px; }
.cs-r2__title { font-size: 22px; }
.cs-r2__notes { grid-template-columns: 1fr; gap: 20px; }
.cs-r2__ticker { padding: 9px 16px; font-size: 11px; gap: 10px; flex-wrap: wrap; }
.cs-r2__ticker-url { display: none; }
.cs-r2__meter-seg { padding: 5px 8px; }
.cs-r2__meter-range { display: none; }
}