/* ==========================================================================
   /radar sample report (#sample): the restrained version. One accent (cyan), grey for everything that
   is not you, no glows, and the score-detail panel keeps one height whichever score is in focus.
   Loads after aeo-report.css and only on /ai-visibility (01 GEO Audit).
   ========================================================================== */
#sample { --ok: #01c2e1; --vio: #01c2e1; }

/* left list */
#sample .ar-list li::before { background: #2a2a2e; color: var(--fg-2); }
#sample .ar-list li.on::before { background: var(--fg); color: #000; }
#sample .ar-list li::after { background: var(--fg); }
#sample .ar-list li.on em { color: var(--fg); }

/* window chrome */
#sample .ar-window { box-shadow: none; background: #0b0b0c; }
#sample .ar-win-bar .meter b { background: #01c2e1; }
#sample .ar-brand i { width: 8px; height: 8px; border-radius: 50%; background: #01c2e1; }

/* panels: a thin line marks focus, nothing glows */
#sample .ar-panel { background: #0f0f10; }
#sample .ar-panel.on { border-color: rgba(1,194,225,.5); box-shadow: none; }
#sample .ar-window.focus .ar-panel:not(.on) { opacity: .6; }
#sample .ar-panel h4 { color: var(--fg-2); }

/* ranking: grey bars, your row in the accent */
#sample .ar-rrow .sw { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3d; }
#sample .ar-rrow.me .sw { background: #01c2e1; }
#sample .ar-rrow .bar b { background: #3a3a3d; }
#sample .ar-rrow.me { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
#sample .ar-rrow.me .bar b { background: #01c2e1; }

/* gauge: thinner arc, white number */
#sample .ar-gauge .bg { stroke-width: 9; }
#sample .ar-gauge .fg { stroke: #01c2e1 !important; stroke-width: 9; }
#sample .ar-gauge strong { color: var(--fg) !important; font-size: 34px; }

/* score detail: every variant occupies the same grid cell, so the panel height never changes */
#sample .ar-details { display: grid; }
#sample .ar-details > div { display: block; grid-area: 1 / 1; visibility: hidden; margin-top: 12px; }
#sample .ar-details > div.on { visibility: visible; }
#sample .ar-details .chk span.warn { color: var(--fg-2); border-color: rgba(216,163,94,.5); }

/* citations and who-AI-names */
#sample .ar-cite b::after { background: #3a3a3d; }
#sample .ar-cite div:has([style*="#08ffb6"]) b::after, #sample .ar-cite b[style*="01c2e1"]::after { background: #01c2e1; }
#sample .ar-sent { height: 6px; }
#sample .ar-quote { background: #0b0b0c; }
#sample .ar-quote mark { background: rgba(1,194,225,.16); }

/* keep the tallest detail variant compact so the fixed panel height stays close to the content */
#sample .ar-details p { font-size: 12px; line-height: 1.4; }
#sample .ar-details ul { gap: 6px; }
#sample .ar-details .chk { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--line-soft); }
#sample .ar-details .chk span { font-size: 11px; padding: 2px 7px; }