/* ═══════════════════════════════════════════════════════════════════════════
 * components.css — the shared UI component library
 * ═══════════════════════════════════════════════════════════════════════════
 * THE home for generic, reusable UI components used across any page. Extracted
 * verbatim from pages' inline <style> so nothing renders differently — only
 * where the CSS lives changes. Consumes brand-tokens.css.
 *
 * ── The shared-CSS map (which file do I add to?) ─────────────────────────────
 *   brand-tokens.css       design tokens — colors, --surface-card, --radius-*
 *   components.css  (HERE)  generic UI components — footer, tier-card, + future
 *                           button / field / badge / dot / bar. New reusable
 *                           primitives go HERE.
 *   report-components.css   report-specific DATA-VIZ (score/dimension/mentions
 *   + report-components.js  charts) — JS-paired render engine, only the report +
 *                           dashboard pages. NOT primitives; do not fold in here.
 *   signal-loader.css/.js   the standalone radar loading animation.
 *
 * A page links this file if it uses ANY component below.
 *
 * Components: .socket (footer) · .tier-grid/.tier-card (pricing tiers)
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ── Footer ── was duplicated in tech-dashboard, strategy-results, login ────────
   All three now render identically from here (Privacy/Terms links included). */
.socket {
  background: var(--near-black);   /* own dark ground — the grey text/links need it;
                                      pages with a light body (strategy-results) otherwise
                                      showed a white footer. No-op on dark-body pages. */
  border-top: 0.5px solid var(--border-dark);
  padding: 1.4rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.pw-link .pw { font-size: 11px; color: var(--grey); letter-spacing: 0.3px; }
.pw-link img { height: 22px; display: block; opacity: 0.85; transition: opacity 0.15s; }
.pw-link:hover img { opacity: 1; }
.socket-links {
  display: flex; align-items: center; gap: 1rem;
  margin-left: 1.4rem; padding-left: 1.4rem;
  border-left: 0.5px solid var(--border-dark);
}
.socket-links a { font-size: 11px; color: var(--grey); text-decoration: none; letter-spacing: 0.3px; }
.socket-links a:hover { color: var(--linen); }


/* ── Nav / header ── the top bar on every page: tier label (left) + logo (right).
   Own near-black ground (like .socket) so it reads dark on light-body pages
   (report, strategy-results) too. Logo markup + responsive padding stay page-local. */
.nav { background: var(--near-black); display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 2.5rem; border-bottom: 0.5px solid var(--border-dark); }
.nav-tier { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--linen); }


/* ── Tier cards ── the SOLUTIONS pricing grid (index, report, strategy-results) ─
   Prices fill from pricing-client.js (no hardcoded amounts).
   Structure:
     .tier-grid            3-up grid (default). Add .tier-grid--duo for 2-up.
     .tier-card            a card; modifiers .tier-left/.tier-right (fanned),
                           .tier-hero (raised, filled — the "most popular" card).
       .tier-badge  .tier-head( .tier-eyebrow .tier-name  .tier-price(.amt .unit) )
       .tier-items > li     ✓-bulleted feature list
       .tier-cta            full-width action button
     .tier-price.price-loading   skeleton shimmer until .amt is filled */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  /* Outer margin is the page's job (it varies per page) — not baked in here. */
}
.tier-grid--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-inline: auto;
}

.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid rgba(74, 143, 217, 0.3);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.1, 0.4, 1), border-color 0.3s, box-shadow 0.4s;
}
.tier-card.tier-left  { transform: rotate(-3deg); transform-origin: bottom right; }
.tier-card.tier-right { transform: rotate(3deg);  transform-origin: bottom left; }
.tier-card.tier-left:hover,
.tier-card.tier-right:hover {
  transform: rotate(0deg);
  border-color: rgba(74, 143, 217, 0.6);
  box-shadow: 0 0 28px 1px rgba(74, 143, 217, 0.35);
}
.tier-card.tier-hero {
  background: linear-gradient(160deg, #2B5FA8, #244e8c);
  border-color: rgba(74, 143, 217, 0.85);
  transform: translateY(-18px);
  z-index: 2;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 30px 1px rgba(74, 143, 217, 0.45);
}
.tier-card.tier-hero:hover {
  transform: translateY(-24px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 42px 2px rgba(74, 143, 217, 0.6);
}

.tier-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--linen); color: var(--near-black);
  font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 4px 12px; white-space: nowrap;
}

.tier-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 0.75rem; margin-bottom: 0.875rem;
}
.tier-eyebrow {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--grey); margin-bottom: 0.5rem;
}
.tier-hero .tier-eyebrow { color: rgba(244, 244, 242, 0.72); }
.tier-name {
  font-size: 20px; font-weight: 700; color: var(--linen);
  letter-spacing: -0.01em; margin-bottom: 0;
}

.tier-price { display: flex; flex-direction: column; align-items: flex-end; gap: 0; margin: 0; }
.tier-price .amt { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--linen); line-height: 1; }
.tier-price .unit { order: -1; font-size: 11px; font-weight: 400; color: var(--grey); margin: 0 0 3px; }
.tier-hero .tier-price .amt { font-size: 30px; }
.tier-hero .tier-price .unit { color: rgba(244, 244, 242, 0.65); }

.tier-price.price-loading .amt {
  display: inline-block; min-width: 3.2em; min-height: 0.9em; border-radius: 4px;
  background: linear-gradient(90deg, rgba(244,244,242,0.10), rgba(244,244,242,0.22), rgba(244,244,242,0.10));
  background-size: 200% 100%; animation: tier-skel 1.1s ease-in-out infinite;
}
.tier-price.price-loading .unit { visibility: hidden; }
@keyframes tier-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.tier-items { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.tier-items li {
  font-size: 14px; color: rgba(244, 244, 242, 0.7); line-height: 1.5;
  padding: 5px 0 5px 1.4rem; position: relative;
}
.tier-items li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.tier-hero .tier-items li { color: rgba(244, 244, 242, 0.88); }
.tier-hero .tier-items li::before { color: var(--linen); }

.tier-cta {
  display: block; width: 100%; border: 0; cursor: pointer; text-align: center; margin-top: auto;
  padding: 0.8125rem 1.25rem; background: var(--blue-dark); color: var(--linen);
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none;
}
.tier-cta:hover { background: var(--blue); }
.tier-hero .tier-cta { background: var(--linen); color: var(--near-black); }
.tier-hero .tier-cta:hover { background: var(--linen); opacity: 0.88; }
.tier-cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* .tier-ref — an emphasized tier NAME inline in prose (the "STRATEGY./TECH./RESULTS."
   mentions in the solutions blurb). Not a card. */
.tier-ref { color: var(--linen); font-weight: 700; }

@media (max-width: 780px) {
  .tier-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .tier-card.tier-left, .tier-card.tier-right, .tier-card.tier-hero { transform: none; }
  .tier-card.tier-hero:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tier-card { transition: none; }
  .tier-card.tier-left, .tier-card.tier-right { transform: none; }
  .tier-price.price-loading .amt { animation: none; }
}


/* ── Form fields ── the label-on-top field control (tech, login) ────────────────
   .field                 stacked label + control
   .field label           attached label (sits atop the input)
   .field input/select/textarea   the control (select has a caret; textarea no resize)
   .field-row/.field-row-3        arrange fields in a grid
   Page-local (not here): .form-stack wrapper width (varies per page) + any page's
   own field states (e.g. tech's .field.needs attention throb). */
.field { display: flex; flex-direction: column; margin-bottom: 1px; }
.field label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--linen); padding: 0.75rem 1.25rem 0.25rem; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.12); border-bottom: none; }
.field input, .field textarea { padding: 0.5rem 1.25rem 0.875rem; font-family: inherit; font-size: 14px; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.12); border-top: none; color: var(--linen); outline: none; resize: none; transition: background 0.2s, box-shadow 0.4s, border-color 0.3s; }
.field input:focus, .field textarea:focus { background: rgba(255,255,255,0.09); }
.field input::placeholder, .field textarea::placeholder { color: rgba(136,135,128,0.6); }
.field select { padding: 0.5rem 2.5rem 0.875rem 1.25rem; font-family: inherit; font-size: 14px; background-color: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.12); border-top: none; color: var(--linen); outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23888780' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; }
.field select:focus { background-color: rgba(255,255,255,0.09); }
/* Stacked fields share a hairline — the next label must not double it. (Was only in strategy.html's
   local copy; folded in when the purchase form's CSS was consolidated here.) */
.field + .field label { border-top: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.field-row-3 { grid-template-columns: 2fr 1fr 1fr; }
/* Grid children default to min-width:auto — let cells + inputs shrink so padded
   inputs don't bleed past the form's right edge. */
.field-row .field { min-width: 0; }
.field-row .field input { width: 100%; min-width: 0; }
@media (max-width: 520px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }


/* ── Error bar ── inline form/page error (tech, login, index) ───────────────────
   Shared visual treatment only; each page keeps its own positioning
   (margin-top / max-width / width) as a local .error-bar override. */
.error-bar {
  padding: 0.75rem 1.25rem;
  background: rgba(220,60,60,0.12);
  border: 0.5px solid rgba(220,60,60,0.4);
  color: #ff9090;
  font-size: 13px;
}


/* ── CTA button ── linen call-to-action (report, strategy-results, index) ───────
   Visual + hover shared. border/cursor are inert on <a> but needed for <button>
   usages; pages add their own transition/focus-visible as they already had. */
.btn-cta {
  display: inline-block; padding: 0.9375rem 2.5rem;
  background: var(--linen); color: var(--near-black);
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; text-decoration: none; border: none; cursor: pointer;
}
.btn-cta:hover { opacity: 0.88; }


/* ── Buttons ── two shared button components:
   .btn (+ -primary/-secondary/-ghost/-sm) — inline ACTION buttons (dashboard).
   .btn-submit — the full-width form submit (tech, login). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; line-height: 1; padding: 11px 16px; border-radius: 4px; border: 0.5px solid transparent; background: none; color: var(--linen); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.copied { border-color: var(--sev-pass); color: var(--sev-pass); }
.btn-primary { background: var(--blue-dark); color: var(--linen); }
.btn-primary:hover:not(:disabled) { background: var(--blue); }
.btn-secondary { color: var(--blue); border-color: var(--blue); }
.btn-secondary:hover:not(:disabled) { background: var(--blue); color: var(--linen); }
.btn-ghost { color: #aeada6; border-color: rgba(255,255,255,0.18); }
.btn-ghost:hover:not(:disabled) { color: var(--linen); border-color: rgba(255,255,255,0.4); }
.btn-sm { font-size: 10px; letter-spacing: 1.5px; padding: 0.4rem 0.85rem; }

.btn-submit { margin-top: 1rem; padding: 1rem; width: 100%; background: var(--blue-dark); color: var(--linen); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; border: none; cursor: pointer; transition: background 0.2s; }
.btn-submit:hover { background: var(--blue); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }


/* ── Status dot ── the 9px status/severity dot (color set by context) ───────────
   One shape; the legacy names (.status-dot/.code-dot/.fix-dot) all resolve here. */
.status-dot, .code-dot, .fix-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }


/* ── Eyebrow ── THE above-title label. One style everywhere it appears (TECH page
   headers, FREE/STRATEGY report section titles, form titles, dashboard subtitles).
   Title Case is a content convention (authored, not text-transform, so "Share of
   Model" keeps its lowercase "of"). Small UPPERCASE labels are a different element
   (.label) — an eyebrow is specifically the text ABOVE a title. */
.eyebrow { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--grey); margin-bottom: 0.25rem; }

/* ── Label ── the small UPPERCASE label (card / stat / status labels). NOT an
   eyebrow — an eyebrow is the Title-Case text above a title. One style for all the
   little uppercase labels that used to be scattered under *-eyebrow names. */
.label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); margin-bottom: 0.35rem; }
.label.r { text-align: right; }

/* ── Titles ── section / sub / hero. Color follows the page ground: default linen
   (dark pages); a light page sets .title{ color: var(--near-black) } locally. */
.title { font-size: clamp(28px, 4vw, 44px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; color: var(--linen); }
/* .title-sub — the page/section SUBTITLE (PRIORITIES., DIMENSIONS., landing section
   titles). Smaller than .title; one common element so it edits across all pages. */
.title-sub { font-size: clamp(24px, 3vw, 32px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; color: var(--linen); margin-bottom: 1.5rem; }
/* .title-xs — a smaller sentence-case prose heading (distinct from .title-sub). */
.title-xs { font-size: clamp(18px, 2.5vw, 26px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--linen); }
.title-hero { font-size: clamp(40px, 6vw, 58px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; color: var(--linen); }

/* ── Section header ── the composition: eyebrow + title (left) · summary + picker
   (right). .with-meta lays it out as a row; the picker (.mon-nav) sits upper-right. */
.sec-head { margin: 2.6rem 0 1.15rem; }
.sec-head.with-meta { display: flex; align-items: flex-end; justify-content: space-between; }
/* with-bar — a section title with a segmented bar running from just past it to the right
   edge, bottom-aligned with the title (the CODE FIXES header treatment, without the
   absolute positioning that one needs to anchor under a score number). The title keeps
   its natural width; the bar takes everything else. */
.sec-head.with-bar { display: flex; align-items: flex-end; gap: 1.75rem; }
.sec-head.with-bar > :first-child { flex-shrink: 0; }
.sec-head.with-bar .title-sub { margin-bottom: 0; }
.sec-head.with-bar .cd-funnel { flex: 1; min-width: 0; }
.sec-head .meta { font-size: 12px; color: var(--grey); white-space: nowrap; padding-bottom: 0.35rem; }

/* ── Month picker ── < MON > navigation, upper-right of a section (surfaces month 2+). */
.mon-nav { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.mon-arrow { background: none; border: 0.5px solid var(--border-dark); color: var(--linen); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; }
.mon-arrow:hover { border-color: var(--blue); color: var(--blue); }
.mon-arrow.off { visibility: hidden; pointer-events: none; }
.mon-label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); min-width: 58px; text-align: center; }


/* ── Mention badge ── yes / no / no-data pill (report, index) ───────────────────*/
.mention-badge { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 3px 7px; border: 0.5px solid; line-height: 1.6; }
.badge-yes { color: var(--blue); border-color: var(--blue); }
.badge-no  { color: var(--grey); border-color: rgba(136,135,128,0.4); }
.badge-nodata { color: var(--grey); border-style: dashed; border-color: rgba(136,135,128,0.55); }


/* ══ Report / landing content cards ═══════════════════════════════════════════
   Shared by the FREE report (report.html), the landing live-scan demo (index.html)
   and the paid STRATEGY report (strategy-results.html) — same markup on all three.
   Reconciled canon: surface + radius from tokens; the report is the real output so
   its spacing wins for status/prompt/stats. The .client-card uses the 18/28 size
   (was 20/30 on report/index) so long company names fit — Gordon 2026-07-13.
   Total tint stays page-local (strategy inlines blue). The card's own margin-bottom
   is layout, not the component → stays page-local (e.g. #radar-client-card). */

/* ── Your-mentions card ── company name + "X of N AI responses" + model bars ──── */
.client-card { border: 0.5px solid var(--border-dark); border-radius: var(--radius-card); padding: 1.5rem; }
.client-card-name { font-size: 18px; font-weight: 700; color: var(--linen); letter-spacing: -0.015em; line-height: 1.1; margin-bottom: 0.75rem; }
.client-card-total { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--linen); line-height: 1; }
.client-card-total .denom { font-size: 13px; color: var(--grey); font-weight: 400; letter-spacing: 0; }
.client-card-sub { font-size: 11px; color: var(--grey); margin: 0.5rem 0 1rem; }

/* ── Status card ── technical-readiness list (CODE section): head + hover rows ─── */
.status-card { background: var(--surface-card); border: 1px solid var(--border-dark); border-radius: var(--radius-card); overflow: hidden; }
.status-card-head { padding: 1.125rem 1.5rem; border-bottom: 0.5px solid var(--border-dark); }
.status-card-company { font-size: 16px; font-weight: 700; color: var(--linen); letter-spacing: -0.01em; }
.status-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.95rem 1.5rem; border-bottom: 0.5px solid rgba(255,255,255,0.05); transition: background 0.2s, outline-color 0.2s; outline: 1px solid transparent; outline-offset: -1px; }
/* last row: round the bottom corners to the card's INNER radius (card radius − 1px
   border) so the inset hover outline follows that curve and sits exactly inside the
   card's overflow:hidden clip — no cut corners, no gaps. (12px or 0 both misfit: 12px
   overshoots the 11px clip → cut; 0 leaves the rectangular outline's corners clipped
   → gaps.) */
.status-row:last-child { border-bottom: none; border-bottom-left-radius: calc(var(--radius-card) - 1px); border-bottom-right-radius: calc(var(--radius-card) - 1px); }
.status-row:hover { background: rgba(255,255,255,0.03); outline-color: var(--row-color, var(--blue)); }
.status-label { font-size: 13px; color: rgba(244,244,242,0.85); flex: 1; }
.status-msg { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }

/* ── Prompt card ── a prompt + its AI response (mentions detail) ──────────────── */
.prompt-stack { display: flex; flex-direction: column; gap: 1px; }
.prompt-card { background: rgba(255,255,255,0.04); border: 0.5px solid var(--border-dark); padding: 1.25rem; }
.prompt-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.625rem; }
.prompt-q { font-size: 13px; font-weight: 700; color: var(--linen); line-height: 1.4; flex: 1; }
.prompt-source { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); margin-bottom: 5px; }
.prompt-response { font-size: 12px; color: var(--grey); line-height: 1.65; }

/* ── Stats bar ── summary stat row under a section (report · index) ───────────── */
.stats-bar { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.5rem; border-top: 0.5px solid var(--border-dark); }
.stat { display: flex; flex-direction: column; gap: 0.25rem; }
.stat-val { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--linen); }
.stat-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); }


/* ── Score bars ── the model-mention bar (client-card + orbital detail) and the
   dimension score bar. Shared by report · index · strategy-results · tech-dashboard.
   report-components.js's modelBarsHtml builds the .model-bar-* markup and sets the
   fill color inline (overriding the --blue default below). The .model-bars / .dim-bars
   flex CONTAINERS stay page-local — their spacing is per-context. (The fuller orbital
   render-engine convergence for report/index is tracked in UNIFICATION-PLAN.md TASK 4.) */
.model-bar-row { display: grid; grid-template-columns: 62px 1fr 32px; gap: 0.625rem; align-items: center; }
.model-bar-name { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--grey); }
.model-bar-track { height: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.model-bar-fill { height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.model-bar-val { font-size: 11px; font-weight: 700; color: var(--linen); text-align: right; }
@media (prefers-reduced-motion: reduce) { .model-bar-fill { transition: none; } }

.dim-bar-track { height: 2px; background: rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 0.375rem; }
.section-dark .dim-bar-track { background: rgba(255,255,255,0.1); }
.dim-bar-fill { height: 100%; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.4,0,0.2,1); }
@media (prefers-reduced-motion: reduce) { .dim-bar-fill { transition: none; } }


/* ── CTA band ── the blue "next step" section at the bottom of the paid/free
   reports (report, strategy-results — byte-identical). index has its own landing
   CTA variant (padding 4.5rem, dimmer eyebrow) that stays page-local and shadows
   this. Themes the shared .eyebrow/.title for the blue ground. */
.cta-section { background: var(--blue-dark); padding: 5rem 2.5rem; text-align: center; }
.cta-inner { max-width: 620px; margin: 0 auto; }
.cta-head { display: inline-block; text-align: center; }
.cta-section .eyebrow { color: rgba(244,244,242,0.6); }
.cta-section .title { color: var(--linen); }
.cta-sub { font-size: 15px; color: rgba(244,244,242,0.72); line-height: 1.65; margin: 1.125rem auto 2rem; max-width: 600px; }


/* ── Section wrappers ── the light/dark section grounds + centered inner column
   (index, report, strategy-results). Only the IDENTICAL bits live here: the
   backgrounds, the inner column's centering, and the .title-xs dark/light theming.
   Each page keeps its own section PADDING + .section-inner max-width locally
   (intentional per-report rhythm — Gordon). */
.section-light { background: var(--linen); }
.section-dark  { background: var(--near-black); }
.section-inner { margin: 0 auto; }
.section-dark  .title-xs { color: var(--linen); }
.section-light .title-xs { color: var(--near-black); }

/* ── Mini stat card (.know-card) — the "we already know you" proof block ────────────────────────────
   Extracted VERBATIM from tech.html (2026-07-18) so the account-setup step, the /upgrade page and any
   future surface render ONE card. Carries every stat; a consumer hides the rows it has no data for
   (e.g. a competitor has no fix list) rather than re-authoring a variant. Render: knowCard() in
   report-components.js. */
/* Fills its container — the CONSUMER sets the width (the form column here, the hero column on /upgrade),
   so it can't be narrower than the fields it sits with. */
.know-card { width: 100%; border: 0.5px solid var(--border-dark); background: rgba(255,255,255,0.03); margin-bottom: 1.5rem; text-align: left; }
.know-head { padding: 0.75rem 1.25rem; border-bottom: 0.5px solid var(--border-dark); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--grey); }
.know-body { padding: 1.1rem 1.25rem; }
.know-url { font-size: 15px; font-weight: 700; color: var(--linen); margin-bottom: 0.9rem; }
.know-scores { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.1rem 1.75rem; margin-bottom: 0; }
/* Every value area is the same height (the tallest — the big score), and its content centres inside, so
   the two-line competitor list sits on the scores' midline instead of hanging off the top. */
.know-score { display: flex; flex-direction: column; }
.know-score .val, .know-score .val-comp { flex: 1; display: flex; align-items: center; }
.know-score .lbl { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); margin-bottom: 0.2rem; }
/* .val is only the SIZE CONTEXT for the shared .score-fig — no local score styling. Change the number
   here and the whole figure (denominator, grade, marker) scales with it. */
.know-score .val { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--linen); }
.know-score .val-comp { font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--linen); }
/* The grade letter centres against the big number rather than sitting on its baseline. */

/* ── THE SCORE FIGURE (.score-fig) — one treatment, every surface ───────────────────────────────────
   Big number + /denominator + colour-coded grade anchored to the denominator's top-right, with a hair
   of space. Extracted from the canonical dashboard/report treatment (.sscore-* in report-components.css)
   so it stops being re-tuned per surface (Gordon 2026-07-18: "I should not be tweaking the design with
   you each time").

   SCALES FROM ONE VALUE: set `font-size` on .score-fig and everything follows in em. The dashboard's
   large cards and the mini stat card are the SAME element at different sizes — never different CSS.
     .score-fig { font-size: 64px }  → dashboard SCORE card
     .score-fig { font-size: 30px }  → mini stat card
   Ratios are the canonical ones (num 64 / denom 22 / grade 18).

   `.sfx` = a trailing marker (e.g. the "+" on an implied fix count): denominator styling, grade position. */
.score-fig { display: inline-flex; align-items: baseline; line-height: 1; }
.score-fig .num { font-size: 1em; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.score-fig .denom { font-size: 0.344em; font-weight: 700; color: var(--grey); position: relative; line-height: 1; }
.score-fig .grade { position: absolute; left: 100%; bottom: 100%; margin-left: 0.14em; font-size: 0.82em; font-weight: 700; line-height: 0.8; white-space: nowrap; }
/* No denominator (a bare count like Fixes) — the marker still needs an anchor to hang off. */
.score-fig .anchor { position: relative; font-size: 0.344em; line-height: 1; }
/* Trailing marker (the "+" on an implied count) — inline, ~2/3 the number's size, light, and centred on
   the number's midline (align-self overrides the figure's baseline alignment). */
.score-fig .sfx { font-size: 0.667em; font-weight: 400; color: var(--grey); align-self: center; }

/* ── THE HERO (.hero) ───────────────────────────────────────────────────────────────────────────────
   The AI Visibility lockup hero: spinning radar mark + eyebrow + title and supporting subtext on the
   LEFT, a gradient divider, then the headline + whatever the page asks for on the RIGHT. Extracted
   VERBATIM from index.html (was `.land-hero`, renamed — it's a shared element, not a landing one).
   Used by the landing page and the /upgrade states. Markup:
     <div class="hero">
       <div class="hero-left">
         <div class="hero-lockup">
           <span class="sig-mark hero-radar-mark"><span class="sig-ring r1"></span><span class="sig-ring r2"></span><span class="sig-sweep"></span><span class="sig-core"></span></span>
           <div class="hero-id"><p class="eyebrow">AI Visibility</p><h1 class="title-hero">AUDIT.</h1></div>
         </div>
         <p class="hero-sub">…</p>
       </div>
       <div class="hero-divider" aria-hidden="true"></div>
       <div class="hero-right"><p class="hero-tagline">…</p> …form / card… </div>
     </div>
   Requires /signal-loader.css for the radar mark. */
.hero {
  display: grid;
  grid-template-columns: minmax(0,300px) auto 520px;  /* content-sized cols (right = form width)… */
  justify-content: center;                            /* …block centered over the cards, equal padding */
  align-items: center;
  gap: 3rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 4rem 2rem 3.5rem;
}
.hero-left { display: flex; flex-direction: column; min-width: 0; position: relative; top: 11px; }  /* nudge down so the title lockup top-aligns */
.hero-lockup { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.5rem; }
.hero-radar-mark { width: 72px; height: 72px; }
.hero-radar-mark .sig-sweep { opacity: 1; animation: sigload-spin 3.2s linear infinite; }
.hero-sub { font-size: 15px; line-height: 1.6; color: var(--grey); margin-bottom: 1.75rem; max-width: 460px; }
.hero-divider { width: 2px; align-self: stretch; min-height: 150px; flex-shrink: 0; background: linear-gradient(180deg, var(--blue), rgba(74,143,217,0.15)); }
.hero-right { display: flex; flex-direction: column; min-width: 0; }
.hero-tagline { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.14; color: var(--linen); text-wrap: balance; margin-bottom: 1.75rem; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; align-items: flex-start; gap: 2rem; }
  .hero-divider { width: 100%; height: 2px; min-height: 0; align-self: auto; background: linear-gradient(90deg, var(--blue), rgba(74,143,217,0.15)); }
}

/* ── HERO INPUT ROW (.input-row / .url-input) — the joined field+button the hero uses. ─────────────── */
.input-row { display: flex; width: 100%; max-width: 520px; }
.url-input {
  flex: 1; padding: 0.875rem 1.25rem; font-family: inherit; font-size: 15px;
  background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.15); border-right: none;
  color: var(--linen); outline: none; border-radius: 0; transition: background 0.2s, border-color 0.2s; min-width: 0;
}
.url-input::placeholder { color: var(--grey); }
.url-input:focus { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); }
/* The joined button — same height as the field, no gap between them. Verbatim from the hero's .btn-primary
   so the whole unit is self-contained here; no page needs a local button rule. */
.input-row button {
  flex-shrink: 0; padding: 0.875rem 1.75rem; background: var(--blue-dark); color: var(--linen);
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  border: none; cursor: pointer; transition: background 0.2s; white-space: nowrap; border-radius: 0;
}
.input-row button:hover:not(:disabled) { background: var(--blue); }
.input-row button:disabled { opacity: 0.5; cursor: not-allowed; }
.input-row button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 600px) {
  .input-row { flex-direction: column; }
  .url-input { border-right: 0.5px solid rgba(255,255,255,0.15); }
  .input-row button { width: 100%; text-align: center; }
}

/* ── SOLUTIONS SECTION (.solutions) — centred eyebrow + title + subtext above the tier cards. ────────
   Extracted VERBATIM from index.html (was `.land-solutions`). The tier cards themselves are already
   shared (.tier-grid/.tier-card); this is the centred header block that goes above them. */
.solutions { text-align: center; margin: 3.5rem 0 1rem; }
.solutions .eyebrow { margin-bottom: 0.375rem; }
.solutions .title-sub { margin-bottom: 0.75rem; }
/* font-size + color match index.html's local .cell-sub (13/grey) so the upgrade page reads identically. */
.solutions .cell-sub { font-size: 13px; color: var(--grey); line-height: 1.6; margin: 0 auto 3rem; text-align: center; max-width: 620px; }
.solutions .tier-grid { margin-top: 4rem; }

/* ── Sub-tab strip ── the section-level tab row (CODE › Health/Pages/FAQ/Site, the
   ADMIN ACCOUNTS tier filter). Extracted verbatim from tech-dashboard's .cd-tabs so
   there's ONE definition; `.cd-*` stays as an alias until CODE's markup is renamed. */
.subtabs, .cd-tabs { display: flex; gap: 0.3rem; margin: 1.2rem 0 0; border-bottom: 0.5px solid var(--border-dark); }
.subtab, .cd-tab { background: none; border: 0.5px solid transparent; border-bottom: none; color: var(--grey); font-family: inherit; font-size: 15px; letter-spacing: 0.3px; padding: 0.55rem 1rem; margin-bottom: -0.5px; cursor: pointer; border-radius: 5px 5px 0 0; transition: color 0.15s; }
.subtab:hover, .cd-tab:hover { color: var(--linen); }
.subtab.active, .cd-tab.active { color: var(--linen); border-color: var(--border-dark); border-bottom: 0.5px solid var(--near-black); background: var(--near-black); }
/* New-this-cycle items behind an inactive sub-tab → throb to draw the click. */
.subtab.has-new:not(.active), .cd-tab.has-new:not(.active) { color: var(--linen); border-color: var(--blue); animation: cd-tab-throb 2.2s ease-in-out infinite; }
@keyframes cd-tab-throb { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,143,217,0); } 50% { box-shadow: 0 0 12px 0 rgba(74,143,217,0.55); } }
@media (prefers-reduced-motion: reduce) { .subtab.has-new, .cd-tab.has-new { animation: none; } }

/* Preference toggle row — a label + description on the left, a checkbox on the right.
   Shared by the Data & Preferences panel (TECH account drawer + partner ACCOUNT). */
.pref-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; font-size: 14px; color: var(--linen); }
.pref-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue); flex-shrink: 0; }

/* "This is the one that needs you" — the same pulse, freed from the sub-tab so any row
   or card can wear it. Glow only (no border/size change), so it never shifts layout.
   The throb stays reserved for a genuine click-me cue; it is not a decoration. */
.needs-you { animation: cd-tab-throb 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .needs-you { animation: none; } }

/* ── Icon dot ── THE circled status icon (the card icon-dot / score-card badge
   lineage: .cp-rowic, .sscore-badge, .dimc-dot). One shape; the level modifier
   carries the colour. Used by the ADMIN ACCOUNTS status row. */
.icon-dot { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 0.5px solid var(--border-dark); border-radius: 50%; background: none; color: var(--grey); font-size: 12px; font-weight: 700; line-height: 1; padding: 0; flex-shrink: 0; }
.icon-dot svg { width: 13px; height: 13px; }
.icon-dot.ok       { color: var(--sev-pass); border-color: rgba(74,196,122,0.55); }
.icon-dot.warn     { color: var(--sev-warn); border-color: rgba(224,162,59,0.6); }
.icon-dot.critical { color: var(--sev-fail); border-color: rgba(217,83,79,0.6); }
.icon-dot.off      { color: var(--grey); border-color: var(--border-dark); opacity: 0.5; }
/* `live` sits past `ok`: green = the step passed, blue = the thing is up and running.
   Blue is the brand's "active/connected" colour everywhere else, so it reads as a
   destination rather than another severity. */
.icon-dot.live     { color: var(--blue); border-color: rgba(74,143,217,0.6); }
.icon-dots { display: inline-flex; align-items: center; gap: 0.3rem; }
/* Chips in a table cell — same spacing rhythm as .icon-dots so a row of chips and a row
   of dots sit on the same grid. */
/* Chips stay on ONE line — a row that stacks its chips reads as three rows, and this
   list's whole promise is that a prospect is one clean line. The wrap scrolls instead. */
.acct-chips { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap; white-space: nowrap; justify-content: center; }
/* The row's action icons — shared .btn-icon controls kept on one line, tight enough to
   read as a single group rather than six separate decisions. */
.acct-acts { display: inline-flex; align-items: center; gap: 0.1rem; white-space: nowrap; }
.acct-acts .btn-icon { padding: 0.22rem 0.3rem; }
/* A ticket subject is free text from a client, so it gets one line and an ellipsis rather
   than being allowed to wrap and shove every other row's height around. The full text is
   the row's title on hover and the modal heading on open. */
.acct-subject { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The attachment icons INSIDE a table cell — tighter than the modal-header strip, centred
   in the column like the other icon groups. */
.acct-atts { display: inline-flex; align-items: center; gap: 0.1rem; justify-content: center; }
.acct-atts .btn-icon { padding: 0.15rem 0.2rem; }
.acct-atts .cp-ic { width: 14px; height: 14px; }

/* ── Detail modal ── the EXPLAINER modal, as distinct from the shell's `.acct-modal`
   (which is the account/FORM modal: eyebrow, title, fields, save). This one answers
   "what is this and what does it mean" — a title, a coloured status pill, prose, and a
   quiet note under a rule. Behind TECH's CODE check detail and the competitor dimension
   breakdown; extracted VERBATIM from tech-dashboard.html when ADMIN's health checks
   became its second consumer. Sits on the shell's shared modal recipe.
   `.cd-` prefix kept so the original page needed no edits (extract first, rename last). */
.cd-modal { z-index: 46; }
.cd-modal-panel { max-width: 460px; padding: 1.3rem 1.5rem 1.5rem; position: relative; }
.cd-modal-close { font-size: 22px; }
.cd-modal-title { font-size: 17px; font-weight: 700; color: var(--linen); margin-bottom: 0.5rem; }
.cd-modal-pill { display: inline-block; font-size: 10px; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 99px; }
.cd-modal-desc { font-size: 13px; color: var(--linen); line-height: 1.6; margin: 0.8rem 0; }
.cd-modal-fixlabel { font-size: 11px; color: var(--grey); margin-bottom: 0.4rem; }
.cd-modal-note { margin: 1rem 0 0; padding-top: 0.8rem; border-top: 0.5px solid var(--border-dark); font-size: 11px; line-height: 1.5; color: var(--grey); }
.cd-modal-acts { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.2rem; }

/* ── Filter / sort dropdown ── the compact select behind TECH's PRIORITIES filters
   (Difficulty · Impact), the CODE Pages sort, and ADMIN's SUPPORT filters. Extracted
   VERBATIM from tech-dashboard.html when SUPPORT became its second consumer. The `.cp-`
   prefix is kept so the original pages needed no edits (extract first, rename last).
   CONVENTION worth keeping: the top option is the "all" reset and is labeled as the
   DIMENSION itself (Status / Type), so an unfiltered control still says what it filters. */
.cp-sortsel { background: transparent; border: 0.5px solid var(--border-dark); border-radius: 5px; color: var(--grey); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 3px 22px 3px 8px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%23888780' stroke-width='1.5'><path d='M4 6 L8 10 L12 6'/></svg>"); background-repeat: no-repeat; background-position: right 6px center; }
.cp-sortsel:hover { border-color: var(--blue); }
.cp-sortsel:focus { outline: none; border-color: var(--blue); }
.cp-sortsel option { background: #1e1e1e; color: var(--linen); }
/* Two of them side by side in a section header (ADMIN SUPPORT). `margin-left:auto` pushes
   the pair to the RIGHT edge of the header row — the heading owns the left, the controls
   own the right, which is where the month pickers sit on every other panel. */
.sp-filters { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }

/* ── Ticket header strip (SUPPORT) — shared by BOTH dashboards ────────────────────────
   Attachment icons + the status chip on the CLOSE BUTTON'S line, reading right-to-left as
   × · status · what's attached. ONE anchored flex row rather than two separately-positioned
   pieces: the chip's width changes with its word ("Open" vs "In progress"), so any fixed
   offset for the icons would collide the moment the status changed. `right` clears the
   24px × plus its 0.9rem inset. */
.tk-head { position: absolute; top: 0.72rem; right: 2.6rem; z-index: 1; display: flex; align-items: center; gap: 0.35rem; }
/* Both groups must be flex CONTAINERS, not bare spans. `.chip` is inline, so inside a
   plain span it sits on that span's text BASELINE — which put the icons 2.8px above the
   chip's optical centre even though .tk-head already centres its children. Centring the
   chip inside its own wrapper is the fix; a margin nudge would only be right at one
   font-size. */
.tk-head > span { display: flex; align-items: center; gap: 0.35rem; }
.tk-head .btn-icon { padding: 0.15rem 0.25rem; }
.tk-head .cp-ic { width: 14px; height: 14px; }
/* Screenshot strip on a ticket message. Thumbnails, not a gallery: the picture is
   evidence you click through to at full size, and a support thread stays readable as a
   conversation. `object-fit: cover` keeps a tall phone screenshot and a wide desktop one
   the same size in the row, which is what makes several of them scan as a set. */
.att { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.1rem; }
.att a { display: block; width: 84px; height: 60px; border: 0.5px solid var(--border-dark); border-radius: 5px; overflow: hidden; background: rgba(255,255,255,0.03); }
.att a:hover { border-color: var(--blue); }
.att img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A non-image attachment (PDF, log, CSV) — a named row, because a broken <img> would read
   as a failed upload rather than as a file that was never a picture. Auto width so the
   name is legible; the thumbnails' fixed box would truncate it to nothing. */
.att a.att-file { width: auto; max-width: 100%; height: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; color: var(--linen); font-size: 12px; text-decoration: none; }
.att a.att-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att a.att-file .cp-ic { width: 13px; height: 13px; flex: none; color: var(--grey); }

/* ── Conversation well (SUPPORT threads) ──────────────────────────────────────────────
   A thread grows without limit, so it scrolls INSIDE a fixed box and the modal keeps one
   height whether there are two messages or twenty. Recessed onto --near-black (the page
   ground) against the #232323 panel, the same figure/ground the fix cards use, so it
   reads as a well the conversation sits in rather than another card stacked on a card. */
/* FIXED height, not a max: every ticket opens the same size whether the thread is one
   message or twenty, which is the point — a modal that resizes per ticket makes the
   reply box move under the cursor between tickets. Clamped rather than a flat px so it
   still breathes on a laptop vs a large display. Short threads leave the well part-empty,
   which is how every chat window behaves. */
.cn-list.cn-scroll { height: clamp(180px, 32vh, 320px); overflow-y: auto; background: var(--near-black); border: 0.5px solid var(--border-dark); border-radius: 8px; padding: 0.3rem 0.8rem; }
/* The last message shouldn't draw a divider against the floor of the well. */
.cn-list.cn-scroll > div:last-child { border-bottom: none; }
/* Chosen-but-not-yet-sent files on the compose form, as a plain count-and-names line —
   the file input already says what was picked; this only confirms it survived the pick. */
.att-picked { font-size: 11px; color: var(--grey); margin-top: 0.35rem; }

/* ── Collapsible card ── THE toggle card (the STRATEGY/CODE fix cards, the ADMIN
   partner cards). Header row is the toggle; the chevron rotates open. Extracted
   verbatim from tech-dashboard so there's one definition. Pairs with cdIcon('chev'). */
.cp-card { background: #232323; border: 1px solid rgba(136,135,128,0.25); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 0.9rem; }
.cp-chead { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0; margin: 0; background: none; border: none; color: inherit; text-align: left; font-family: inherit; cursor: pointer; }
.cp-card.locked .cp-chead { cursor: default; }
.cp-chead > .cp-chev, .cp-chead > .cp-ic { margin-left: auto; color: var(--grey); }
.cp-chev { display: inline-flex; transition: transform 0.2s; }
.cp-card.open .cp-chev { transform: rotate(180deg); }
.cp-cbody { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.cp-card.open .cp-cbody { max-height: 1600px; }
.cp-ctitle { font-size: 14px; font-weight: 700; color: var(--linen); }

/* ── Account table ── THE operator list shell (ADMIN ACCOUNTS + a partner's book).
   Column-driven: the same shell renders any subset of columns — see account-table.js.
   Wide tables scroll inside their own container, never the page. */
.acct-table-wrap { overflow-x: auto; }
table.acct-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
table.acct-table thead th { text-align: left; padding: 10px 12px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); border-bottom: 0.5px solid var(--border-dark); white-space: nowrap; }
table.acct-table thead th.c { text-align: center; }
table.acct-table tbody td { padding: 11px 12px; border-bottom: 0.5px solid var(--border-soft); color: var(--linen); }
table.acct-table tbody tr { cursor: pointer; }
table.acct-table tbody tr:hover { background: var(--blue-glass); }
/* readOnly list (e.g. a partner viewing their own book) — a plain list, no click-into. */
table.acct-table.readonly tbody tr { cursor: default; }
table.acct-table.readonly tbody tr:hover { background: none; }
table.acct-table td.c { text-align: center; }
table.acct-table td.tier { text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: var(--grey); }
/* Dot columns (health light, partner mark): header shares the cell metrics so its
   sort toggle centres over the dots, and drops the label gap. */
table.acct-table td.dotcell, table.acct-table th.dotcell { width: 34px; padding-left: 0; padding-right: 0; text-align: center; }
table.acct-table th.dotcell .sort-chev { margin-left: 0; }
table.acct-table th.sortable { cursor: pointer; user-select: none; }
table.acct-table th.sortable:hover { color: var(--linen); }
table.acct-table th.sortable.sorted { color: var(--linen); }
/* Sort affordance = the fix-card toggle chevron; blue on the active column, flipped up for ascending. */
.sort-chev { display: inline-flex; margin-left: 0.3rem; color: var(--grey); transition: transform 0.2s, color 0.15s; vertical-align: middle; }
table.acct-table th.sortable:hover .sort-chev { color: var(--linen); }
table.acct-table th.sortable.sorted .sort-chev { color: var(--blue); }
table.acct-table th.sortable.asc .sort-chev { transform: rotate(180deg); }
/* Score + movement: shared figure, chevron set off to its right on the number's baseline. */
.acct-scorecell { display: inline-flex; align-items: flex-end; gap: 0.5rem; }
.acct-fig .score-fig { font-size: 26px; }
.acct-chev { font-size: 11px; font-weight: 700; line-height: 1; padding-bottom: 3px; white-space: nowrap; }
/* The letter grade is absolutely positioned and overhangs the figure box — pay it back. */
.acct-scorecell.has-grade .acct-chev { margin-left: 0.4rem; }
.acct-sub { color: var(--grey); font-size: 11px; margin-top: 2px; }
.acct-muted { color: var(--grey); }
/* ── KPI strip ── the 4-across stat cards. Extracted VERBATIM from the TECH home STATS
   (tech-dashboard), still its first consumer; the ADMIN partner commission strip is the
   second. One label, one big figure, one movement line — the whole point is that four of
   them read as a set, so the grid is part of the element rather than a page's layout. */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: #232323; border: 1px solid var(--border-dark); border-radius: 12px; padding: 1.6rem 1.25rem; text-align: center; }
.kpi .lbl { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--grey); margin-bottom: 0.85rem; }
.kpi .val { font-size: clamp(34px, 4.6vw, 46px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.kpi .val .denom { font-size: 0.4em; color: var(--grey); font-weight: 700; letter-spacing: 0; position: relative; }
.kpi-grade { position: absolute; left: 100%; bottom: 100%; margin-left: 2px; font-size: 0.7em; font-weight: 700; line-height: 0.8; } /* colored grade superscript — matches .sscore-grade */
.kpi .delta { font-size: 12px; margin-top: 0.8rem; color: var(--grey); }
.kpi .delta.up { color: var(--sev-pass); }
.kpi .delta.down { color: var(--sev-fail); }
/* A KPI that opens a detail view says so twice: a resting `i` mark in the corner, and a
   border + mark that light BLUE on hover — blue being this product's "active/destination"
   colour, the same signal `.icon-dot.live` and the row hovers use. The mark is the shared
   `.icon-dot`, not a new shape. Only cards that actually open something get this, so a
   plain stat strip is unaffected. */
.kpi[role="button"] { position: relative; transition: border-color 0.15s; }
.kpi[role="button"]:hover, .kpi[role="button"]:focus-visible { border-color: var(--blue); outline: none; }
.kpi-more { position: absolute; top: 0.7rem; right: 0.7rem; width: 18px; height: 18px; font-size: 10px; transition: color 0.15s, border-color 0.15s; }
.kpi[role="button"]:hover .kpi-more, .kpi[role="button"]:focus-visible .kpi-more { color: var(--blue); border-color: var(--blue); }
/* ── Logo chip ── the round linen disc an AI platform's logo sits in. Extracted VERBATIM
   from index.html (its first consumer, the platform response cards); the ADMIN DATA. MODELS
   strip is the second. The four logos live at /images/ai/*.svg and are listed with their keys
   in report-components.js PLATFORMS — one source for the paths, so a card and a report can't
   disagree about which logo is Gemini's. The disc is deliberately linen on every skin: these
   are third-party marks, mostly monochrome, and they vanish against #232323. */
.logo-chip { width: 40px; height: 40px; border-radius: 50%; background: var(--linen); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-chip img { width: 24px; height: 24px; display: block; }
/* The strip's smaller variant — a KPI card is centred and its label sits above the figure,
   so the chip rides ABOVE the label rather than beside it (`.plat-id` in index.html is the
   horizontal lockup; this is the stacked one). Size only — no restyle of the disc itself. */
.kpi .logo-chip { width: 30px; height: 30px; margin: 0 auto 0.7rem; }
.kpi .logo-chip img { width: 18px; height: 18px; }

/* ── Stat card ── a titled card with ONE headline figure on each side and a labelled
   breakdown underneath. Extracted VERBATIM from the RADAR customer card (tech-dashboard),
   still its first consumer; the SALES money cards are the second. The two-figures-plus-
   split shape is the point: the numbers answer the question, the bars explain them.
   `.is-you` is the blue-bordered emphasis treatment (RADAR's "you" card).
   ⚠ Names keep the `rd-` prefix from the extraction so RADAR needed no edits — renaming
   is a separate pass (design-system method: extract verbatim, rename last). */
.rd-card { position: relative; border: 1px solid var(--border-dark); border-radius: 12px; padding: 1.4rem 1.5rem; background: rgba(255,255,255,0.015); }
.rd-card.is-you { border-color: rgba(74,143,217,0.6); box-shadow: 0 0 14px rgba(74,143,217,0.28); }
.rd-card-name { font-size: 17px; font-weight: 700; color: var(--linen); letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The stat pair — left reads normally, right is right-aligned so the two figures anchor
   to the card's edges rather than floating in the middle. */
.rd-stats { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.rd-stat-val { font-size: clamp(32px, 4.6vw, 46px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.rd-stat-val.r { text-align: right; }
.rd-stat-val .denom { font-size: 0.4em; color: var(--grey); font-weight: 700; letter-spacing: 0; }
.rd-you-bars { margin-top: 1.25rem; }
/* Wide values — the 32px value column fits "24/24" but not "$5,593/1" or "28.6% −1",
   which wrap to a second line and make sibling cards different heights.
   The CONTAINER becomes the grid and the rows dissolve into it (display:contents), so all
   rows share ONE set of columns: the value column sizes to the widest label in the set and
   every track is therefore the same length. Per-row grids would each size their own `auto`
   column, giving bars of different lengths in the same card — which reads as data. */
.model-bars.wide { display: grid; grid-template-columns: 62px 1fr auto; column-gap: 0.625rem; row-gap: 0.5rem; align-items: center; }
.model-bars.wide .model-bar-row { display: contents; }
.model-bars.wide .model-bar-val { white-space: nowrap; }

/* ── Segmented bar ── the boxed proportional graph beside a section title. Extracted
   VERBATIM from the CODE tab's FIXES funnel (tech-dashboard), which is still its first
   consumer; SALES uses it beside FREE. to show where leads came from. Segment widths are
   proportional to their values (set inline by the renderer, `segBarHtml`), so the bar is
   the distribution — labels sit over the numbers, right-aligned.
   ⚠ Class names keep the `cd-` prefix from the extraction so CODE needed no edits; a
   rename is a separate pass (design-system method: extract verbatim, rename last). */
.cd-funnel { position: absolute; bottom: 0; right: 0; display: flex; gap: 4px; align-items: flex-end; }
.cd-funnel-seg { display: flex; flex-direction: column; justify-content: flex-end; min-width: 84px; } /* fixed min so a 0 + its label always fit */
.cd-funnel-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; white-space: nowrap; text-align: right; padding-right: 0.55rem; } /* sits over the number */
.cd-funnel-bar { height: clamp(22px, 2.6vw, 28px); border: 1px solid; border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding: 0 0.55rem; box-sizing: border-box; }
.cd-funnel-num { font-size: clamp(15px, 1.9vw, 19px); font-weight: 700; line-height: 1; }
/* Inline (static) variant — fills its container from the left instead of being absolutely
   positioned against a header. This is the one a section header's meta slot wants. */
.cd-funnel.cd-funnel-inline { position: static; width: 100%; }
.cd-funnel-sm .cd-funnel-seg { min-width: 66px; }
.cd-funnel-sm .cd-funnel-label { font-size: 9px; margin-bottom: 4px; }
.cd-funnel-sm .cd-funnel-bar { height: 22px; border-radius: 3px; }
.cd-funnel-sm .cd-funnel-num { font-size: 14px; }
/* Segment colours — the product's existing vocabulary, no new palette: grey = quiet /
   background quantity, linen = the plain foreground, blue = the one that matters. */
.cd-funnel-seg.found  .cd-funnel-label, .cd-funnel-seg.found  .cd-funnel-num { color: var(--grey); }
.cd-funnel-seg.found  .cd-funnel-bar { border-color: rgba(136,135,128,0.6); background: rgba(136,135,128,0.15); }
.cd-funnel-seg.provided .cd-funnel-label, .cd-funnel-seg.provided .cd-funnel-num { color: var(--linen); }
.cd-funnel-seg.provided .cd-funnel-bar { border-color: rgba(244,244,242,0.6); background: rgba(244,244,242,0.10); }
.cd-funnel-seg.fixed  .cd-funnel-label, .cd-funnel-seg.fixed  .cd-funnel-num { color: var(--blue); }
.cd-funnel-seg.fixed  .cd-funnel-bar { border-color: var(--blue); background: var(--blue-glass); }
.cd-funnel-seg.total  .cd-funnel-label, .cd-funnel-seg.total  .cd-funnel-num { color: var(--grey); }
.cd-funnel-seg.total  .cd-funnel-bar { border-color: rgba(136,135,128,0.6); background: rgba(136,135,128,0.15); }

/* An actionable link inside a list row — the site URL, a mailto. Same treatment as the
   partner card's contact name: quiet until hovered, so a table of them doesn't read as
   a wall of links. Rows that click into GOmode ignore clicks that land on one of these. */
.acct-link { color: inherit; text-decoration: none; }
.acct-link:hover { color: var(--linen); text-decoration: underline; }

/* ── Checkbox ── THE brand checkbox (agreement accept, preference toggles). A native
   input styled directly: thin grey border on the card fill; checked flips border and
   tick to blue. Native `accent-color` can't do the bordered-box look, hence a real
   element rather than another one-off. */
.cbx { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; margin: 0;
  border: 0.5px solid var(--grey); border-radius: 3px; background: var(--surface-card);
  cursor: pointer; position: relative; transition: border-color 0.15s, box-shadow 0.15s; }
.cbx:hover { border-color: var(--linen); }
.cbx:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-glass); }
.cbx:checked { border-color: var(--blue); }
/* The tick is drawn, so it inherits the blue without an icon font or SVG. */
.cbx:checked::after { content: ''; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 10px;
  border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ── Alert card (public/alert-card.js) ─────────────────────────────────────────
   The shared "finish setting up" / alert card. ONE source for TECH (onboarding
   checklist), PARTNER (payout setup task) and ADMIN (operator alerts). TECH-only
   extras (progress count, impact dot, "do this next") are opt-in via the renderer;
   consumers suppress what they don't need. Moved here verbatim from tech-dashboard. */
.setup { border: 0.5px solid var(--border-dark); border-radius: 8px; background: rgba(74,143,217,0.05); margin-bottom: 0.5rem; }
.setup-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0.4rem 0.85rem 1.1rem; }
.setup-head-main { display: flex; align-items: baseline; gap: 0.7rem; }
.setup-head .t { font-size: 13px; font-weight: 700; }
.setup-head .prog { font-size: 11px; color: var(--grey); }
.setup-x { background: transparent; border: 0; color: var(--grey); font-size: 19px; line-height: 1; padding: 0 0.95rem; cursor: pointer; }
.setup-x:hover { color: var(--linen); }
.su[role="button"] { cursor: pointer; }
.setup-body { padding: 0 0.6rem 0.6rem; display: flex; flex-direction: column; gap: 6px; }
.setup.collapsed .setup-body { display: none; }
.su { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.8rem; border-radius: 6px; }
.su.next { background: var(--blue-glass); border: 1px solid var(--blue); }
.su:not(.next) { border: 0.5px solid var(--border-soft); }
.su .check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--grey); flex-shrink: 0; }
.su .sb { flex: 1; }
.su .st { font-size: 13px; font-weight: 700; }
.su .sw { font-size: 11px; color: var(--grey); margin-top: 1px; }
.su .tag { font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); margin-left: 6px; }
.su .add { background: var(--blue-dark); border: none; color: var(--linen); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 0.5rem 0.85rem; border-radius: 4px; min-width: 96px; text-align: center; flex-shrink: 0; }
.su .add:hover { background: var(--blue); }

/* ── WHEN-style option picker ─────────────────────────────────────────────────────────────────
   EXTRACTED VERBATIM from tech-dashboard.html (2026-07-29), unchanged, because the ADMIN
   dashboard's Refresh Question Data modal needs the same two-option control. It was written as a
   RADAR-local element and named for its first use ('when'); the name is kept so the extraction is
   a move rather than a rewrite — renaming it would have made every rule here a diff to review
   instead of a line to compare.

   Stacked full-width by default (its original behaviour on RADAR); a caller wanting them side by
   side supplies its own grid, as .vt-rr-pair does. */
    /* WHEN — two full-width options styled like the card CTAs: grey by default, blue on hover/select,
       with a bordered radio circle that fills on select (the graph-marker treatment). */
    .rd-when { margin-top: 1.5rem; }
    .rd-when-label { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--grey); margin-bottom: 0.6rem; }
    .rd-when-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: rgba(255,255,255,0.02); border: 1px solid var(--border-dark); border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 0.6rem; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; }
    .rd-when-opt:hover, .rd-when-opt:focus-visible, .rd-when-opt.sel { background: var(--blue-glass); border-color: var(--blue); outline: none; }
    .rd-when-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--blue); }
    .rd-when-x { flex: 1; }
    .rd-when-t { display: block; font-size: 13px; font-weight: 700; color: var(--linen); }
    .rd-when-s { display: block; font-size: 12px; color: var(--grey); line-height: 1.4; margin-top: 1px; }
    .rd-when-radio { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--grey); position: relative; transition: border-color 0.15s; }
    .rd-when-opt:hover .rd-when-radio, .rd-when-opt.sel .rd-when-radio { border-color: var(--blue); }
    .rd-when-opt.sel .rd-when-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue); }

/* ── THE FORM FIELD (.afield) ─────────────────────────────────────────────────
   The clean "label above, rounded control below" field, SHARED by the dashboard modals and the
   onboarding funnel form (moved here from dashboard-shell.css, 2026-07-29, C2 — the funnel loads this
   file but not that one). The funnel's OTHER field style (.field, above) is an attached-label header
   fused to a square control; the shared .dd dropdown has rounded corners and can't fuse with it, so
   two-axis onboarding uses .afield — which .dd-trigger was already built to match exactly. */
.afield { display: flex; flex-direction: column; margin-bottom: 0.75rem; }
.afield label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); margin-bottom: 0.35rem; }
.afield input { background: rgba(255,255,255,0.05); border: 0.5px solid var(--border-dark); color: var(--linen); font-family: inherit; font-size: 14px; padding: 0.6rem 0.75rem; border-radius: 4px; outline: none; }
.afield input:focus { border-color: var(--blue); background: rgba(255,255,255,0.08); }
.afield input[readonly] { opacity: 0.6; }
.afield select { background: rgba(255,255,255,0.05); border: 0.5px solid var(--border-dark); color: var(--linen); font-family: inherit; font-size: 14px; padding: 0.6rem 0.75rem; border-radius: 4px; outline: none; }
.afield select:focus { border-color: var(--blue); }
.afield textarea { background: rgba(255,255,255,0.05); border: 0.5px solid var(--border-dark); color: var(--linen); font-family: inherit; font-size: 14px; padding: 0.6rem 0.75rem; border-radius: 4px; outline: none; resize: vertical; min-height: 56px; max-height: 280px; overflow-y: auto; line-height: 1.5; }
.afield textarea:focus { border-color: var(--blue); background: rgba(255,255,255,0.08); }
/* Two afields side by side (the onboarding competitor pair). Collapses to one column on narrow. */
.afield-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 520px) { .afield-row { grid-template-columns: 1fr; } }

/* ── THE DROPDOWN ─────────────────────────────────────────────────────────────
   ONE dropdown format for the product. Before this there were four answers to the
   same question — `.rd-dd` on RADAR, `.cp-sortsel`, a native <select>, and a
   bespoke picker — each offset differently and none of them a list you could read.

   ⚠ IT IS THE HOUSE LIST IN A PANEL. The rows are `.rd-list-row` (above), so a
   dropdown reads exactly like the Share-of-Model list it was modelled on:
   headings, thin rules, hover, and weight/colour carrying meaning.

   ⚠ INLINE WITH THE FIELD, never offset (Gordon). The panel spans the trigger's
   full width and opens directly against its edge — below by default, flipped
   above when there is not room. `.dd.up` is set by the opener after measuring.

   ⚠ SELECTION IS THE ROW'S COLOUR, not a checkbox. A selected row goes from thin
   linen to blue; nothing else is added. The control already has one signal, and a
   checkbox beside a colour change is two elements saying the same thing. */
.dd { position: relative; }
/* ⚠ MATCHES `.afield input` EXACTLY — same padding, radius, border, fill and size. The trigger is
   a FIELD, and one sitting a few pixels taller with a different fill is the thing that made it read
   as a foreign control dropped into the form. */
.dd-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; background: rgba(255,255,255,0.05); color: var(--linen);
  border: 0.5px solid var(--border-dark); border-radius: 4px; padding: 0.6rem 0.75rem;
  font-family: inherit; font-size: 14px; line-height: 1.2; cursor: pointer; text-align: left; }
.dd-trigger:hover, .dd.open .dd-trigger { border-color: var(--blue); }
/* Placeholder reads as a prompt; a chosen value reads as an answer. */
.dd-trigger.empty { color: var(--grey); }
/* ⚠ ONE ROW HIGH, like every other field. Three selections can outrun the width, so the summary
   ellipsises rather than wrapping the control to a second line and making it the odd one out. */
.dd-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret { color: var(--grey); font-size: 10px; flex-shrink: 0; transition: transform 0.15s; }
.dd.open .dd-caret { transform: rotate(180deg); }
/* Flush against the trigger — no gap, so the two read as one control rather than
   a menu floating near a field. */
.dd-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--surface-card); border: 0.5px solid var(--blue); border-top: none;
  border-radius: 0 0 4px 4px; padding: 0 0.8rem 0.6rem; max-height: 340px; overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55); }
.dd.up .dd-panel { top: auto; bottom: 100%; border-top: 0.5px solid var(--blue);
  border-bottom: none; border-radius: 4px 4px 0 0; }
.dd.open .dd-trigger { border-color: var(--blue); border-radius: 4px 4px 0 0; }
.dd.open.up .dd-trigger { border-radius: 0 0 4px 4px; }
/* GROUP SUBTITLES — the same 9px uppercase key the list headings use, so a group
   label and a column heading are one idea. Sticky, because a 50-row list scrolls
   past its own headings otherwise. */
.dd-group { position: sticky; top: 0; background: var(--surface-card); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey);
  padding: 0.7rem 0 0.4rem; border-bottom: 0.5px solid var(--border-dark); }
.dd-panel .rd-list-row { grid-template-columns: 1fr; }
/* Unselected rows are the list's own "found" treatment — thin linen. Selected goes
   blue, which is the entire selection affordance. */
.dd-panel .rd-list-row .rd-list-name { color: rgba(244,244,242,0.92); font-weight: 400; }
.dd-panel .rd-list-row.sel .rd-list-name { color: var(--blue); font-weight: 700; }
.dd-panel .rd-list-row.maxed { opacity: 0.35; cursor: not-allowed; }
.dd-panel .rd-list-row.maxed:hover { background: none; }
.dd-note { font-size: 12px; color: var(--grey); margin: 0.4rem 0 0; }

/* ── The house LIST format ────────────────────────────────────────────────────
   EXTRACTED VERBATIM from tech-dashboard.html (2026-07-29), where it was the RADAR
   Share-of-Model list. It is the best list on the product — column headings, thin
   rules, hover, and weight/colour variants that carry meaning rather than
   decoration — so it becomes the standard, and the shared dropdown below is built
   from it rather than inventing a second list format.

   Named for its first use, like `.rd-when-*`; the name is kept so the extraction
   stays a MOVE rather than a rewrite nobody can diff. */
    .rd-list-head { display: grid; grid-template-columns: 46px 1fr auto; gap: 0.6rem; padding: 0 0 0.5rem; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); border-bottom: 0.5px solid var(--border-dark); }
    .rd-list-head .r3 { text-align: right; }
    .rd-list-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 0.6rem; align-items: center; padding: 0.55rem 0; border-bottom: 0.5px solid var(--border-dark); cursor: pointer; transition: background 0.15s; }
    .rd-list-row:hover { background: rgba(255,255,255,0.03); }
    .rd-list-row.is-you { cursor: default; }
    .rd-list-row.is-you:hover { background: none; }
    .rd-list-rank { font-size: 12px; font-weight: 700; color: var(--grey); }
    .rd-list-name { font-size: 13px; font-weight: 700; color: var(--linen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rd-list-row.is-you .rd-list-name { color: var(--blue); }
    .rd-list-row.is-named .rd-list-name { color: var(--grey); font-weight: 700; } /* primary = grey bold (D52) */
    .rd-list-row.is-found .rd-list-name { color: rgba(244,244,242,0.92); font-weight: 400; }
    .rd-list-row.is-former .rd-list-name { color: #D98A4A; font-weight: 700; } /* swapped-out, still monitored */
    .rd-list-ct { font-size: 13px; font-weight: 700; color: var(--linen); text-align: right; }
    .rd-list-row.is-you .rd-list-ct { color: var(--blue); }
    .rd-list-row.is-named .rd-list-ct { color: var(--grey); }
    .rd-list-row.is-former .rd-list-ct { color: #D98A4A; }