/* ============================================================================
   Vivander Visibility — shared styles (Clarity refresh 2026-07)
   Lighter, friendlier product look: white chrome, cool neutrals, azure accent.
   Typography: Google Sans Text (Google Fonts) everywhere; serif reserved for
   quoted AI-response prose only.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* Brand palette */
  --accent: #24549E;
  --accent-light: #3B6FBE;
  --accent-dark: #183A73;
  --accent-bg: #EBF1FA;
  --heading: #1C2331;
  --green: #14703F;  /* 2026-10-16: was #177A45; 4.8:1 or better on every green tint (QA-02) */
  --green-bg: #E8F6EE;
  --red: #B02A2A;
  --red-bg: #FCEDED;
  --amber: #8F6200;
  --amber-bg: #FDF3DC;
  --muted: #4A5361;
  --section-bg: #F3F5F8;  /* inner tints, hover fills (the page itself is white) */
  --page-bg: #FFFFFF;
  --text: #1D242F;
  --rule: #D7DCE3;
  --card: #FFFFFF;
  --card-tint: #F7F8FA;
  --track: #EEF1F5;        /* segmented-control track and neutral label fill */

  /* AI platform colors */
  --chatgpt: #10A37F;
  --claude: #D97706;
  --perplexity: #3B82F6;
  --ai-overviews: #4285F4;
  --gemini: #8B5CF6;
  --copilot: #0078D4;

  /* Typography scale */
  --font-sans: 'Google Sans Text', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  /* Type scale in rem, so the root size below scales every signed-in page
     on wide monitors. 1rem = 16px at the default root. 2026-10-07: the app
     moved up one step (body 17px, smallest label 14px). */
  --text-xs:    0.875rem;  /* 14px  meta, dense labels                    */
  --text-sm:    1rem;      /* 16px  secondary body, table cells           */
  --text-base:  1.0625rem; /* 17px  body                                  */
  --text-md:    1.125rem;  /* 18px  prose paragraphs                      */
  --text-lg:    1.25rem;   /* 20px  sub-headings, large body              */
  --text-xl:    1.5rem;    /* 24px  small section title                   */
  --text-2xl:   1.75rem;   /* 28px  section titles                        */
  --text-3xl:   2.125rem;  /* 34px  page H1                               */
  --text-stat:  2.75rem;   /* 44px  secondary stat values                 */
  --text-hero:  3.5rem;    /* 56px  primary stat values, score-card hero  */

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Layout */
  --container-max: 1440px;
  /* The header and the website bar line up with the text edges of the page
     below them instead of running to the window edges. Pages with a section
     rail widen this to the rail's left edge (see the section rail block). */
  --chrome-pad: max(40px, calc((100vw - var(--container-max)) / 2 + 40px));
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-card-hover: 0 8px 22px rgba(16, 24, 40, 0.10);
  --shadow-drawer: -4px 0 24px rgba(23, 32, 48, 0.12);
  --shadow-modal: 0 16px 48px rgba(23, 32, 48, 0.16);

  /* Motion */
  --t-fast: 120ms ease;
  --t-base: 160ms ease;
  --t-slow: 240ms ease;
}

/* Public pages (body.mkt) keep the pre-2026-10-07 type scale; the step up
   above is for the signed-in app only. */
body.mkt {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
}

/* Wide monitors: the signed-in app grows with the screen instead of sitting
   small in the middle. Every app font size is in rem, so the root size scales
   all text and chart labels together; the content column widens with it.
   Marketing pages (body.mkt) keep their own sizing. */
@media (min-width: 1800px) {
  html:not(:has(body.mkt)) { font-size: 17px; }
  :root { --container-max: 1560px; }
}
@media (min-width: 2200px) {
  html:not(:has(body.mkt)) { font-size: 18px; }
  :root { --container-max: 1720px; }
}
@media (min-width: 2800px) {
  html:not(:has(body.mkt)) { font-size: 20px; }
  :root { --container-max: 1960px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); }
a:hover { color: var(--accent-light); }

/* Admin / client view toggle */
body.client-view .admin-only { display: none !important; }

/* ============================================================================
   App header (shared chrome — every authenticated page uses this)
   Light chrome: white bar, ink brand, pill-highlighted active link.
   ============================================================================ */
.app-header {
  background: var(--card);
  color: var(--heading);
  padding: 12px var(--chrome-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  z-index: 50;
}
.app-header .brand {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 1.0625rem;
  white-space: nowrap;
  color: var(--heading);
  text-decoration: none;
}
a.brand:hover { color: var(--accent); }
.app-header .brand::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: baseline;
}
.app-header .header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.app-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  align-items: center;
}
.app-header nav a,
header.app-header nav a {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: color var(--t-fast), background var(--t-fast);
}
.app-header nav a:hover { color: var(--heading); background: var(--section-bg); }
.app-header nav a.active,
header.app-header nav a.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-bg);
}
header > nav a.active { color: var(--accent); font-weight: 600; background: var(--accent-bg); border-radius: var(--radius-pill); }

/* Grouped nav (2026-10-03). One <details class="nav-group"> per group, defined
   once in components/app-nav.js and stamped onto every page. Native <details>
   opens and closes without JS; app.js adds one-open-at-a-time and
   close-on-outside-click. A group whose menu holds the current page carries
   .active so its pill reads as "you are here". */
.nav-group { position: relative; display: inline-block; }
.nav-group > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: color var(--t-fast), background var(--t-fast);
  user-select: none;
  white-space: nowrap;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: ' \25BE'; font-size: 0.875rem; }
.nav-group > summary[data-icon="gear"]::before { content: '\2699\FE0E'; margin-right: 5px; font-size: 0.9375rem; }
.nav-group > summary:hover { color: var(--heading); background: var(--section-bg); }
.nav-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-group.active > summary,
.nav-group[open] > summary { color: var(--accent); font-weight: 600; background: var(--accent-bg); }
/* The right-hand groups (Account, Admin) sit apart from the reading groups. */
.nav-group-right[data-group="account"] { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--rule); }
.nav-group .nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: 6px;
  display: flex;
  flex-direction: column;
  z-index: 200;
}
.nav-group-right .nav-menu { left: auto; right: 0; }
.nav-group .nav-menu a,
.app-header nav .nav-group .nav-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1rem;
  white-space: nowrap;
}
.nav-group .nav-menu a:hover { background: var(--section-bg); color: var(--heading); }
.nav-group .nav-menu a.active { background: var(--accent-bg); color: var(--accent); }
.nav-group .nav-menu a#logoutLink { margin-top: 4px; border-top: 1px solid var(--rule); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
/* Narrow screens: an opened group lists its pages inline, pushing the next
   group down, instead of floating a menu over it. */
@media (max-width: 720px) {
  .nav-group-right[data-group="account"] { margin-left: 0; padding-left: 0; border-left: 0; }
  .nav-group[open] { flex-basis: 100%; }
  .nav-group .nav-menu,
  .nav-group-right .nav-menu {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 2px 0 6px 12px;
    min-width: 0;
  }
}

.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 6px 14px;
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.view-toggle:hover {
  background: var(--section-bg);
  border-color: var(--muted);
  color: var(--heading);
}
.view-toggle-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  transition: background var(--t-fast);
}
body.client-view .view-toggle-dot { background: var(--green); }

/* Status pill in header (e.g. "Last re-tested: ... · Next: ...") */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--track);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
}
.status-pill .sync-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}
.status-pill .sync-dot.warn  { background: #FBBF24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.6); }
.status-pill .sync-dot.error { background: #F87171; box-shadow: 0 0 6px rgba(248, 113, 113, 0.6); }

/* Preview / impersonation banner (admin-only context) */
.preview-bar {
  background: var(--amber);
  color: #fff;
  padding: 8px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ============================================================================
   Section rail v2 — left-hand SECTION SWITCHER (components/section-rail.js).
   Only the highlighted section renders, so there is no endless scroll: the
   rail is both the page's table of contents and its navigation. Opt-in: only
   present when a page marks >=3 section containers with data-section and the
   JS adds .has-section-rail to <body>.

   Wide screens (>=1280px): a fixed rail docked beside the content column,
   with a "Sections" heading on a tinted panel; rail and column are centered
   as one group, so the navigation sits next to what it navigates.
   Narrow screens: the rail stays in flow above the sections as wrap pills, so
   switching works identically on tablet/mobile.
   ============================================================================ */

/* The switcher moves reading focus to the freshly shown section for screen
   readers; the container itself should never draw a focus ring. */
[data-section][tabindex="-1"]:focus { outline: none; }

/* Sections the switcher hides must stay hidden regardless of their own
   display rules — on screen. Print restores every section (the switcher is
   an interaction model, not a statement about what belongs on paper). */
@media screen {
  [data-section][hidden] { display: none !important; }
}
@media print {
  [data-section][hidden] { display: block !important; }
  .section-rail { display: none !important; }
}

/* ── Narrow / default: in-flow pill tabs above the sections ─────────────── */
.section-rail { margin: 0 0 var(--space-5); }
.section-rail-about { display: none; }
.section-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.section-rail li { margin: 0; }
.section-rail-link {
  display: inline-block;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.section-rail-link:hover { color: var(--heading); border-color: var(--muted); }
.section-rail-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.section-rail-link.is-active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-bg);
  border-color: var(--accent);
}

/* Sections appear with a whisper of motion — disabled for reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-section]:not([hidden]) { animation: section-in 160ms ease both; }
  @keyframes section-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Wide: a docked rail beside the content column ────────────────────────
   Breakpoint 1280 (not 1180): below it the in-flow pills keep the full
   container width.

   The rail and the content column are one centered group: the rail sits
   --rail-gap to the left of the content's text edge (it overlaps the
   container's 40px left padding), so the section links read as this page's
   navigation rather than floating at the window edge. It is top-aligned with
   the page title and stays in view while the page scrolls (section-rail.js
   sets top and left from the live layout; the values here are the fallback).

   Group math, with W = --rail-w, G = --rail-gap, C = --rail-content-max
   (the container's max-width on this page, default --container-max) and the
   container's 40px side padding:
     rail left     R  = (100vw - W - G - C + 80px) / 2, at least 16px
     margin-left   ML = R + W + G - 40px = (100vw + W + G - C) / 2
     margin-right     = (100vw - W - G - C) / 2, at least 16px
   so the rail ends G before the content's text edge at every width. */
@media (min-width: 1280px) {
  body.has-section-rail {
    --rail-w: 200px;
    --rail-gap: 28px;
    --chrome-pad: max(16px, calc((100vw - var(--rail-w) - var(--rail-gap) - var(--rail-content-max, var(--container-max)) + 80px) / 2));
  }
  .section-rail {
    position: fixed;
    top: 140px;
    left: max(16px, calc((100vw - var(--rail-w) - var(--rail-gap) - var(--rail-content-max, var(--container-max)) + 80px) / 2));
    width: var(--rail-w);
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    margin: 0;
    padding: 0;
    z-index: 40;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }

  /* The panel: a tinted fill with a heading, so the column reads as
     navigation at a glance. Labels are fills, never borders. */
  .section-rail-head {
    display: block;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
    padding: 0 12px;
  }
  .section-rail ul {
    display: block;
    background: var(--section-bg);
    border-radius: var(--radius-md);
    padding: 6px;
  }
  .section-rail li { margin: 2px 0; }
  .section-rail-link {
    display: block;
    padding: 8px 12px;
    color: var(--text);
    background: none;
    border: none;
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    white-space: normal;
  }
  .section-rail-link:hover { color: var(--heading); background: var(--card); }
  .section-rail-link.is-active {
    color: var(--accent);
    font-weight: 600;
    background: var(--card);
    border-left-color: var(--accent);
    box-shadow: var(--shadow-card);
  }

  /* "About this section" — a quiet card beneath the links. */
  .section-rail-about {
    display: block;
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
  }
  .section-rail-about .sra-title {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 6px;
  }
  .section-rail-about p {
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 6px;
  }
  .section-rail-about p:last-child { margin-bottom: 0; }
  .section-rail-about a { color: var(--accent); }
  .section-rail-about .sra-more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.875rem; min-height: 28px; }
  .section-rail-about .sra-more[open] summary { margin-bottom: 6px; }

  /* The content column clears the rail and is centered together with it.
     See the group math above. */
  body.has-section-rail .container,
  body.has-section-rail main.container,
  body.has-section-rail .page-body {
    margin-left: max(calc(var(--rail-w) + var(--rail-gap) - 24px), calc((100vw + var(--rail-w) + var(--rail-gap) - var(--rail-content-max, var(--container-max))) / 2));
    margin-right: max(16px, calc((100vw - var(--rail-w) - var(--rail-gap) - var(--rail-content-max, var(--container-max))) / 2));
  }

  /* Fit-on-page: with one section at a time, the goal is the whole section
     visible without vertical scroll (tables may still grow downward). Trim
     the chrome above the section: tighter top padding, one-step-smaller H1,
     and the inline page-about paragraph yields to the rail's About box. */
  body.has-section-rail .container,
  body.has-section-rail main.container,
  body.has-section-rail .page-body { padding-top: var(--space-4); }
  body.has-section-rail h1 { font-size: var(--text-2xl); }
  body.has-section-rail .page-about-inline { display: none; }
}

/* ============================================================================
   Layout containers
   ============================================================================ */
.container,
main.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-10) var(--space-16);
}
.page-body {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-10) var(--space-16);
}

/* Page header (h1 + subtitle + right-side actions) */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.page-header h1,
h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-3xl);
  color: var(--heading);
  line-height: 1.15;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.page-header .sub,
.page-sub,
.section-desc {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin-top: 4px;
  line-height: 1.55;
}
.page-header .actions {
  display: flex;
  gap: var(--space-3);
  /* flex-end: labelled pickers (.ctx-field) and plain buttons share a bottom
     line (2026-10-08). */
  align-items: flex-end;
  flex-wrap: wrap;
}

/* h2 / h3 standardized */
h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--heading);
  line-height: 1.25;
  margin: var(--space-10) 0 var(--space-4);
  letter-spacing: -0.2px;
}
h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--heading);
  line-height: 1.3;
  margin: var(--space-6) 0 var(--space-3);
}
p { font-size: var(--text-base); line-height: 1.65; }

/* Page intro card (left-accent rule + body copy) */
.page-intro {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-6);
}
.page-intro h1 { margin-bottom: 6px; font-size: var(--text-2xl); }
.page-intro p {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text);
  line-height: 1.6;
  max-width: 820px;
}
.page-intro strong { color: var(--accent); font-weight: 700; }

/* Client context bar (website selector + run audit, lives under page header) */
.client-context-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.client-context-bar .ccb-label {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--muted);
  font-weight: 600;
}
.client-context-bar select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  min-width: 240px;
}
.client-context-bar select:focus { outline: none; border-color: var(--accent); }
.client-context-bar .ccb-spacer { flex: 1; }
.client-context-bar .ccb-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Generic section card */
.section-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-5);
}
.section-card-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--heading);
  margin-bottom: var(--space-3);
}
.section-card-desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  max-width: 820px;
}

/* Explainer card ("What this number means") */
.explainer-card {
  background: var(--card-tint);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-5) 0 var(--space-6);
}
.explainer-card h3,
.explainer-card .explainer-label {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.explainer-card p {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}
.explainer-card ul {
  margin: var(--space-3) 0 0 var(--space-5);
  font-size: var(--text-base);
  line-height: 1.7;
}
.explainer-card li { margin-bottom: 6px; }
.explainer-card strong { color: var(--accent); }

/* ============================================================================
   Buttons
   ============================================================================ */
.btn,
.btn:link,
.btn:visited,
button.btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:hover, .btn:focus, .btn:active {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: #fff;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.secondary,
.btn.secondary:link,
.btn.secondary:visited {
  background: var(--card);
  color: var(--accent);
  border-color: var(--rule);
}
.btn.secondary:hover, .btn.secondary:focus {
  background: var(--card-tint);
  border-color: var(--accent);
  color: var(--accent);
}
.btn.ghost {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
}
.btn.ghost:hover { background: var(--card-tint); border-color: var(--rule); }
.btn.danger {
  background: var(--red);
  border-color: var(--red);
}
.btn.danger:hover { background: #6F2222; border-color: #6F2222; }
.btn.block { width: 100%; display: flex; justify-content: center; }
.btn.lg { padding: 14px 24px; font-size: var(--text-base); }
.btn.sm { padding: 6px 12px; font-size: var(--text-xs); }

/* Btn-primary / btn-secondary aliases (some pages use these) */
.btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); padding: 10px 20px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: var(--accent-light); border-color: var(--accent-light); }
.btn-secondary { background: var(--card); color: var(--accent); border: 1px solid var(--rule); padding: 10px 20px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.btn-secondary:hover { background: var(--card-tint); border-color: var(--accent); }

/* Icon-only / inline buttons */
.icon-btn {
  background: none;
  border: 1px solid var(--rule);
  color: var(--muted);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  cursor: pointer;
  margin-right: 4px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--section-bg); color: var(--text); border-color: var(--accent); }
.icon-btn.danger:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }

/* ============================================================================
   Forms
   ============================================================================ */
form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-5);
}
form label,
.form-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--heading);
}
form input[type="email"],
form input[type="password"],
form input[type="text"],
form input[type="url"],
form input[type="number"],
form input[type="search"],
form input[type="tel"],
form input[type="date"],
form textarea,
form select,
.form-input {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text);
  background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
form input:focus,
form textarea:focus,
form select:focus,
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,58,92,0.14);
}
form textarea { resize: vertical; min-height: 80px; }

/* ============================================================================
   Alerts
   ============================================================================ */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
  font-family: var(--font-sans);
}
.alert.error   { background: var(--red-bg);   color: var(--red);   border-color: var(--red); }
.alert.success { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.alert.info    { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.alert.warn    { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }

/* ============================================================================
   KPI / Stat tiles
   ============================================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.kpi-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6);
  box-shadow: var(--shadow-card);
}
.kpi-card .label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.kpi-card .value {
  font-family: var(--font-sans);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kpi-card .ci,
.kpi-card .sub {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 6px;
}
.kpi-card .delta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  font-weight: 600;
}
.kpi-card .delta.up   { color: var(--green); }
.kpi-card .delta.down { color: var(--red); }
.kpi-card .delta.flat { color: var(--muted); }

/* Pillar tile — the LVS 7-component cards (matches the dashboard screenshot) */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.pillar-tile {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-card);
  position: relative;
  text-align: center;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.pillar-tile:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.pillar-tile .help {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 0;
  color: var(--muted);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  background: var(--track);
}
.pillar-tile .help:hover { color: var(--accent); background: var(--accent-bg); }
.pillar-tile .pt-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
  margin-bottom: var(--space-3);
}
.pillar-tile .pt-value {
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1;
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.pillar-tile .pt-band { margin-bottom: var(--space-3); }
.pillar-tile .pt-desc {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}

/* Presence trio — the green/amber/red Georgia numerals from the screenshot */
.presence-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.presence-trio .pt-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.presence-trio .pt-num {
  font-family: var(--font-sans);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.presence-trio .pt-card.is-positive .pt-num { color: var(--green); }
.presence-trio .pt-card.is-warning  .pt-num { color: var(--amber); }
.presence-trio .pt-card.is-negative .pt-num { color: var(--red); }
.presence-trio .pt-name {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
.presence-trio .pt-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Generic stat-tile (smaller, used in summary strips) */
.stat-tile {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5);
  box-shadow: var(--shadow-card);
}
.stat-tile .st-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.stat-tile .st-value {
  font-family: var(--font-sans);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat-tile .st-sub {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 4px;
}
.stat-tile.is-positive .st-value { color: var(--green); }
.stat-tile.is-warning  .st-value { color: var(--amber); }
.stat-tile.is-negative .st-value { color: var(--red); }

/* Compact summary strip (legacy class — keeps existing pages working) */
.summary-strip {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}
.summary-metric {
  text-align: center;
  min-width: 110px;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
  flex: 1;
}
.summary-metric:hover { background: var(--section-bg); }
.sm-value {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.sm-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 500;
  margin-top: 4px;
}

/* ============================================================================
   Score-card hero (used on assessment + can be lifted to other pages)
   ============================================================================ */
.score-card-hero {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-10);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.score-card-hero.audit { border-left: 4px solid #6B4A8A; }
.score-card-hero.live  { border-left: 4px solid var(--green); }
.score-card-hero .sch-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.score-card-hero .sch-value {
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1;
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.score-card-hero .sch-band {
  margin-bottom: var(--space-3);
}
.score-card-hero .sch-meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
}

/* ============================================================================
   Bands — 5-band ladder + chips
   ============================================================================ */
.band-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.band-chip--invisible  { background: var(--red-bg);   color: var(--red); }
.band-chip--reactive   { background: var(--amber-bg); color: var(--amber); }
.band-chip--structured { background: #EEF0F3;         color: var(--muted); }
.band-chip--integrated { background: var(--green-bg); color: var(--green); }
.band-chip--optimized  { background: #D8EFDD;         color: var(--green); font-weight: 700; }
.band-chip--unknown    { background: #EEF0F3;         color: var(--muted); }

.book-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
}
.book-pill.invisible   { background: var(--red-bg);   color: var(--red); }
.book-pill.reactive    { background: var(--amber-bg); color: var(--amber); }
.book-pill.structured  { background: #EEF0F3;         color: var(--muted); }
.book-pill.integrated  { background: var(--green-bg); color: var(--green); }
.book-pill.optimized   { background: #D8EFDD;         color: var(--green); font-weight: 700; }

.band-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.band-ladder-cell {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}
.band-ladder-cell .blc-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 4px;
}
.band-ladder-cell .blc-range {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
}
.band-ladder-cell.invisible   { border-left: 4px solid var(--red);   background: #FDF6F6; }
.band-ladder-cell.reactive    { border-left: 4px solid var(--amber); background: #FDF9EE; }
.band-ladder-cell.structured  { border-left: 4px solid #9AA2AE;      background: #F4F5F7; }
.band-ladder-cell.integrated  { border-left: 4px solid var(--green); background: #F2F9F4; }
.band-ladder-cell.optimized   { border-left: 4px solid var(--green); background: #E9F5EC; }
.band-ladder-cell.you-are-here {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================================
   Platform pills (AI surfaces — ChatGPT, Claude, Perplexity, Gemini, etc.)
   ============================================================================ */
.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
  background: var(--muted);
  white-space: nowrap;
}
.platform-pill.outline {
  background: var(--card);
  border: 1px solid currentColor;
}
.platform-pill[data-platform="chatgpt"],
.platform-pill.chatgpt        { background: var(--chatgpt); }
.platform-pill[data-platform="claude"],
.platform-pill.claude         { background: var(--claude); }
.platform-pill[data-platform="perplexity"],
.platform-pill.perplexity     { background: var(--perplexity); }
.platform-pill[data-platform="ai-overviews"],
.platform-pill[data-platform="aio"],
.platform-pill.ai-overviews,
.platform-pill.aio            { background: var(--ai-overviews); }
.platform-pill[data-platform="gemini"],
.platform-pill.gemini         { background: var(--gemini); }
.platform-pill[data-platform="copilot"],
.platform-pill.copilot        { background: var(--copilot); }

.platform-pill.outline[data-platform="chatgpt"],
.platform-pill.outline.chatgpt        { color: var(--chatgpt); }
.platform-pill.outline[data-platform="claude"],
.platform-pill.outline.claude         { color: var(--claude); }
.platform-pill.outline[data-platform="perplexity"],
.platform-pill.outline.perplexity     { color: var(--perplexity); }
.platform-pill.outline[data-platform="ai-overviews"],
.platform-pill.outline[data-platform="aio"],
.platform-pill.outline.ai-overviews,
.platform-pill.outline.aio            { color: var(--ai-overviews); }
.platform-pill.outline[data-platform="gemini"],
.platform-pill.outline.gemini         { color: var(--gemini); }
.platform-pill.outline[data-platform="copilot"],
.platform-pill.outline.copilot        { color: var(--copilot); }

.platform-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted);
  vertical-align: middle;
}
.platform-dot[data-platform="chatgpt"],
.platform-dot.chatgpt    { background: var(--chatgpt); }
.platform-dot[data-platform="claude"],
.platform-dot.claude     { background: var(--claude); }
.platform-dot[data-platform="perplexity"],
.platform-dot.perplexity { background: var(--perplexity); }
.platform-dot[data-platform="ai-overviews"],
.platform-dot[data-platform="aio"],
.platform-dot.ai-overviews,
.platform-dot.aio        { background: var(--ai-overviews); }
.platform-dot[data-platform="gemini"],
.platform-dot.gemini     { background: var(--gemini); }
.platform-dot[data-platform="copilot"],
.platform-dot.copilot    { background: var(--copilot); }

.platform-strip {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================================
   Tabs
   ============================================================================ */
.tab-strip,
.metric-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--rule);
  flex-wrap: wrap;
}
.tab-strip button,
.metric-tab {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 12px 22px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  margin-bottom: -2px;
}
.tab-strip button:hover,
.metric-tab:hover { color: var(--accent); }
.tab-strip button.active,
.metric-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================================
   Charts
   ============================================================================ */
.chart-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
}
.chart-title {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: var(--space-3);
}
.chart-canvas-wrap { position: relative; }

/* Change-log caption — the readable companion to the numbered chart badges.
   Sits directly under the chart; each item deep-links to its change-log
   entry. Rendered by dashboard.js renderAnnotationCaption(). */
.chart-ann-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.chart-ann-caption .cac-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
  max-width: 100%;
}
.chart-ann-caption .cac-item:hover { color: var(--heading); }
.chart-ann-caption .cac-lead {
  flex: 1 0 100%;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}
.chart-ann-caption .cac-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #B45309;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}
.chart-canvas-wrap--standard { height: 320px; width: 100%; }
.chart-canvas-wrap--tall     { height: 420px; width: 100%; }
.chart-canvas-wrap--compact  { height: 220px; width: 100%; }

.two-col-even {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.three-col-even {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

/* ============================================================================
   Tables
   ============================================================================ */
.data-table,
table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.data-table thead tr { background: var(--card-tint); }
.data-table th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  color: var(--text);
}
.data-table tbody tr:nth-child(even) td { background: rgba(246, 247, 249, 0.6); }
.data-table tbody tr:hover td { background: var(--section-bg); }
.data-table tr:last-child td { border-bottom: none; }
.data-table .num { font-variant-numeric: tabular-nums; text-align: right; }

/* Legacy table classes get the same treatment so existing pages improve without
   classname migration. */
.queries-table,
.clients-table,
.h2h-scorecard,
.own-citations-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.queries-table thead tr,
.clients-table thead tr,
.h2h-scorecard thead tr,
.own-citations-table thead tr { background: var(--card-tint); }
.queries-table th,
.clients-table th,
.h2h-scorecard th,
.own-citations-table th {
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.queries-table td,
.clients-table td,
.h2h-scorecard td,
.own-citations-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.queries-table tbody tr:nth-child(even) td,
.clients-table tbody tr:nth-child(even) td { background: rgba(246, 247, 249, 0.6); }
.queries-table tbody tr:hover td,
.clients-table tbody tr:hover td,
.h2h-scorecard tbody tr:hover td,
.own-citations-table tbody tr:hover td { background: var(--section-bg); }

/* ============================================================================
   Pills (categorization labels)
   ============================================================================ */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  background: #EEF0F3;
  color: var(--muted);
}
.pill.key       { background: var(--accent-bg); color: var(--accent); }
.pill.standard  { background: #F4EEDF; color: #7A5A10; }
.pill.long-tail { background: #EEF0F3; color: var(--muted); }
.pill.brand     { background: var(--accent-bg); color: var(--accent); }
.pill.service   { background: #F4EEDF; color: #7A5A10; }
.pill.category  { background: #E4F1E6; color: var(--green); }
.pill.bridge    { background: #EAEAF4; color: #4B4B78; }
.pill.problem   { background: #F8E8E8; color: var(--red); }
.pill.persona   { background: #EDE4F4; color: #5F3D7E; }
.pill-new       { background: var(--green-bg); color: var(--green); }
.pill-fading    { background: var(--red-bg);   color: var(--red); }
.pill-active    { background: #EDEDEA; color: var(--muted); }

/* The Pages Cited table has six columns, one of them a six-chip strip, and
   has to fit the section card without a sideways scroll at ordinary widths
   (2026-10-03): tighter cells than the shared table rule, numbers that never
   wrap, and a page column that takes what is left and wraps its name. */
#ownCitationsSection .own-citations-table th,
#ownCitationsSection .own-citations-table td { padding: 8px 10px; }
#ownCitationsSection .own-citations-table th { white-space: normal; vertical-align: bottom; }
#ownCitationsSection .own-citations-table .th-hint {
  display: block; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 0.875rem;
}
#ownCitationsSection .own-citations-table td:nth-child(2),
#ownCitationsSection .own-citations-table td:nth-child(3),
#ownCitationsSection .own-citations-table td:nth-child(4) { white-space: nowrap; }
#ownCitationsSection .own-citations-table td:first-child a { overflow-wrap: anywhere; }

/* Every tracked platform in one fixed grid (dashboard.js platStrip): three
   columns, two rows, the same slot for the same platform on every row, so a
   platform that did not cite the page shows as a faint chip, not a gap that
   shifts the others. Rows stay one height and the dates keep their columns. */
.plat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 3px 4px;
  width: max-content;
  max-width: 100%;
}
.plat-chip--slot { margin: 0; font-size: 0.875rem; padding: 1px 6px; }
.plat-chip--absent { font-weight: 500; }

/* A platform named in words inside a table cell (dashboard.js platChips). */
.plat-chip {
  display: inline-block;
  padding: 1px 7px;
  margin: 1px 0;
  border: 1px solid #D4D4CC;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  background: #fff;
}

.tier-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  background: #EDEDEA;
  color: var(--muted);
}
.tier-pill--1 { background: var(--green-bg); color: var(--green); }
.tier-pill--2 { background: #EDF3F8;          color: var(--accent-light); }
.tier-pill--3 { background: var(--amber-bg);  color: var(--amber); }
.tier-pill--4 { background: #EDEDE7;          color: var(--muted); }
.tier-pill--5 { background: var(--red-bg);    color: var(--red); }
.tier-pill--unknown { background: #EDEDE7; color: var(--muted); }

/* "deterministic" vs "probabilistic" badges */
.badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  margin-left: var(--space-2);
  vertical-align: middle;
}
.badge.deterministic { background: var(--green-bg); color: var(--green); }
.badge.probabilistic { background: var(--amber-bg); color: var(--amber); }

/* ============================================================================
   Auth pages
   ============================================================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--section-bg) 0%, #E9EEF6 100%);
}
.auth-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  width: 100%;
  max-width: 460px;
  box-shadow: 0 8px 28px rgba(15, 36, 57, 0.08);
}
.auth-card h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--accent);
  margin-bottom: 6px;
  line-height: 1.2;
}
.auth-card .subtitle {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}
.auth-card .alt {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
}
.auth-brand {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.2px;
  color: var(--heading);
  margin-bottom: var(--space-6);
}
.auth-brand::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--accent);
  margin-right: 8px;
}

/* ============================================================================
   Empty / loading states
   ============================================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--muted);
}
.empty-state h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  color: var(--heading);
  margin: 0 0 var(--space-3);
  border: none;
  padding: 0;
}
.empty-state p { font-size: var(--text-base); max-width: 480px; margin: 0 auto; }
.spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   Drawers (right-side slide-in panels)
   ============================================================================ */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 36, 57, 0.5);
  display: none;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.drawer-backdrop.open { display: block; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(480px, 92vw);
  max-width: 100vw;
  height: 100vh;
  background: var(--card);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform var(--t-slow);
  z-index: 101;
  overflow-y: auto;
  padding: var(--space-8) var(--space-8);
}
.drawer.open { transform: translateX(0); }
.drawer h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  color: var(--heading);
  margin: 0 0 var(--space-5);
  padding: 0;
  border: none;
}
.drawer .close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.625rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.drawer .close-btn:hover { background: var(--section-bg); color: var(--text); }

/* ============================================================================
   Help/info panel for table or section context (data-help-title)
   ============================================================================ */
.business-highlight { font-weight: 700; color: var(--accent); }

/* ============================================================================
   Visibility Funnel
   ----------------------------------------------------------------------------
   Built from divs rather than a Chart.js canvas on purpose. The funnel is four
   proportional bars and three conversion labels — a canvas would make the
   numbers unselectable, invisible to screen readers, and absent from print,
   for no gain over CSS widths.

   Stage bars are CUMULATIVE (see the /funnel endpoint header): each bar's
   width is its share of the answers sampled, so every bar is nested inside the
   one above it and the shape can only narrow.
   ============================================================================ */
.funnel-stages { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }

.funnel-stage { display: block; }

.funnel-stage__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 5px;
}
.funnel-stage__label {
  font-family: var(--font-sans); font-size: var(--text-sm);
  font-weight: 700; color: var(--text);
}
.funnel-stage__figures {
  font-family: var(--font-sans); font-size: var(--text-xs);
  color: var(--muted); white-space: nowrap;
}
.funnel-stage__count { font-weight: 700; color: var(--text); }

.funnel-stage__track {
  position: relative; height: 34px; border-radius: 6px;
  background: var(--section-bg); border: 1px solid var(--rule); overflow: hidden;
}
.funnel-stage__fill {
  height: 100%; border-radius: 5px 0 0 5px;
  transition: width 320ms ease;
  min-width: 2px;
}
.funnel-stage__pct {
  position: absolute; top: 0; right: 10px; height: 100%;
  display: flex; align-items: center;
  font-family: var(--font-sans); font-size: var(--text-xs);
  font-weight: 700; color: var(--muted);
}

/* Stage colors darken down the ladder: the deeper the stage, the scarcer and
   the more valuable the outcome. */
.funnel-stage--sampled     .funnel-stage__fill { background: #C7CFDB; }
.funnel-stage--mentioned   .funnel-stage__fill { background: var(--accent-light); }
.funnel-stage--cited       .funnel-stage__fill { background: var(--accent); }
.funnel-stage--recommended .funnel-stage__fill { background: var(--green); }

/* The connector carries the conversion rate — the actual point of the chart.
   It sits between two bars and reads "of the stage above, this share made it
   down". */
.funnel-connector {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0 7px 14px; margin: 2px 0;
  border-left: 2px dashed var(--rule); margin-left: 16px;
}
.funnel-connector__rate {
  font-family: var(--font-sans); font-size: var(--text-sm);
  font-weight: 700; color: var(--text);
  background: var(--accent-bg); border: 1px solid var(--rule);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.funnel-connector__rate--weak { background: var(--red-bg); color: var(--red); border-color: #F3D3D3; }
.funnel-connector__rate--mid  { background: var(--amber-bg); color: var(--amber); border-color: #F0DEB2; }
.funnel-connector__rate--good { background: var(--green-bg); color: var(--green); border-color: #C9E7D5; }
.funnel-connector__text {
  font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted);
}
.funnel-connector__lost { color: var(--red); font-weight: 700; }

/* Drop-off reasons — the "why" beside the "how many". */
.funnel-dropoff { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.funnel-dropoff__row { display: block; }
.funnel-dropoff__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-sans); font-size: var(--text-xs); margin-bottom: 4px;
}
.funnel-dropoff__label { color: var(--text); font-weight: 600; }
.funnel-dropoff__figures { color: var(--muted); white-space: nowrap; }
.funnel-dropoff__track {
  height: 8px; border-radius: 4px; background: var(--section-bg);
  border: 1px solid var(--rule); overflow: hidden;
}
.funnel-dropoff__fill { height: 100%; background: var(--muted); min-width: 2px; }
/* named_not_offered is the one drop-off reason that means the model KNOWS the
   brand. It earns its own color because the fix is different. */
.funnel-dropoff__fill--named_not_offered { background: var(--amber); }
.funnel-dropoff__fill--negative_mention  { background: var(--red); }
.funnel-dropoff__fill--invisible         { background: #A9B2C0; }

.funnel-note {
  font-family: var(--font-sans); font-size: var(--text-xs);
  color: var(--muted); margin: 10px 0 0; line-height: 1.5;
}
/* Method notes (2026-10-02). The counting rules are true and worth keeping,
   and a seven-line gray paragraph under every chart buried the chart. They
   fold behind one line; nothing is removed. */
.method-note { margin: 12px 0 0; font-family: var(--font-sans); }
.method-note > summary {
  cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--accent);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.method-note > summary::-webkit-details-marker { display: none; }
.method-note > summary::before { content: '▸'; font-size: 0.875rem; }
.method-note[open] > summary::before { content: '▾'; }
.method-note > .funnel-note { margin-top: 6px; max-width: 110ch; }

/* READABILITY FLOOR (2026-10-02). Hundreds of inline styles across the app
   set 10px and 11px text for sublabels, keys and table notes; on a laptop
   that is below what most people read comfortably and it was the first thing
   a client said about the dashboard. One rule lifts every such inline size
   to 12px instead of touching each attribute. */
[style*="font-size: 0.875rem"], [style*="font-size: 0.875rem"],
[style*="font-size: 0.875rem"], [style*="font-size: 0.875rem"] { font-size: 0.875rem !important; }
.funnel-anomaly {
  font-family: var(--font-sans); font-size: var(--text-xs);
  color: var(--red); background: var(--red-bg);
  border: 1px solid #F3D3D3; border-radius: 6px;
  padding: 8px 10px; margin: 10px 0 0;
}

@media (max-width: 720px) {
  .funnel-stage__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .funnel-connector { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 1100px) {
  .two-col-even { grid-template-columns: 1fr; }
  .three-col-even { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .app-header { padding: 12px 20px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .app-header nav { gap: 4px 14px; }
  .app-header nav a { margin: 0; font-size: 0.9375rem; }
  .container, .page-body, main.container { padding: var(--space-5) var(--space-4) var(--space-10); }
  .auth-card { padding: var(--space-6) var(--space-5); }
  .page-header h1 { font-size: 1.625rem; }
  h2 { font-size: 1.5rem; }
  .pillar-tile .pt-value { font-size: 2.75rem; }
  .presence-trio .pt-num { font-size: 3.25rem; }
  .score-card-hero .sch-value { font-size: 2.75rem; }
  .score-card-hero { padding: var(--space-6) var(--space-5); }
  .three-col-even { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  .app-header { padding: 12px 16px; gap: 8px; }
  .app-header nav { display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%; }
  .app-header nav a { margin: 0; font-size: 0.875rem; padding: 4px 0; }
  main.page-body, .page-body, .container, main.container {
    padding: var(--space-4) var(--space-4) var(--space-10);
  }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-header h1 { font-size: 1.5rem; }

  .kpi-grid,
  .pillar-grid,
  .summary-grid,
  .summary-strip,
  .two-col,
  .two-col-even,
  .three-col-even,
  .comp-grid,
  .stat-strip,
  .pillar-track,
  .maturity-track { grid-template-columns: 1fr !important; gap: 12px !important; }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px;
  }
  .filter-bar input[type="date"],
  .filter-bar select { width: 100%; box-sizing: border-box; }
  .filter-bar .filter-actions { margin-left: 0; }
  .filter-bar .filter-actions .btn { flex: 1; }
  .platform-checks,
  .entity-checks { flex-wrap: wrap; max-width: 100% !important; }

  table { display: block; overflow-x: auto; }
  .view-toggle { margin-left: 0; }

  .drawer {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 22px 18px !important;
  }
  .drawer .close-btn { min-width: 44px; min-height: 44px; font-size: 1.5rem; padding: 8px; }

  .pillar-tile .pt-value { font-size: 2.375rem; }
  .presence-trio .pt-num { font-size: 2.75rem; }
  .score-card-hero .sch-value { font-size: 2.375rem; }
}

/* ============================================================================
   Print
   ============================================================================ */
@media print {
  .app-header, .preview-bar, .filter-bar, .actions, .drawer-backdrop, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
  .container, .page-body { padding: 0; max-width: none; }
  .section-card, .kpi-card, .pillar-tile, .stat-tile, .chart-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* Row actions stay on one line (2026-10-02). Four buttons stacked in a 90px
   column made every prompt row 137px tall. */
.q-actions { text-align: right; white-space: nowrap; }
.q-actions .icon-btn { margin: 0 0 0 4px; }

/* ============================================================================
   PHONE WIDTHS (2026-10-02)
   ----------------------------------------------------------------------------
   Below 480px the page used to hide whatever ran past the right edge
   (html, body { overflow-x: hidden }). Hidden is not fitted: on a phone the
   Prompts buttons, the AI Answers tabs, every wide table and half the stat
   tiles were cut off and could not be reached. These rules make the content
   fit, and where a table cannot fit it scrolls sideways inside its own box.
   Page <style> blocks load after this file, so layout overrides here carry
   !important; they apply only inside this media query.
   ============================================================================ */
@media (max-width: 720px) {
  /* clip, not hidden: hidden on both html and body made <body> the scroller,
     which broke window scrolling and in-page anchors on phones. */
  html, body { overflow-x: clip; }
  select, input, textarea, button { max-width: 100%; }
  canvas, img, svg { max-width: 100%; }

  /* A table that cannot fit scrolls inside its own box. */
  table { display: block !important; overflow-x: auto !important; max-width: 100%; -webkit-overflow-scrolling: touch; }

  /* Stat-tile grids set inline as repeat(4,1fr) or repeat(3,1fr). */
  [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  .two-col-even, .three-col-even { grid-template-columns: 1fr !important; }
  .chart-card { min-width: 0; overflow-wrap: anywhere; }

  /* Tab strips scroll sideways instead of running off the screen. */
  .vv-tabs, .metric-tabs { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .vv-tab, .metric-tab { flex: 0 0 auto; }

  /* Header rows and filter rows wrap; a control never exceeds its row. */
  .vv-header, .page-header, .actions-row, .chart-title-row, #trendChartToggles,
  .vv-header > div, .lvs-trend-header { flex-wrap: wrap !important; }
  .vv-filters .filter-group, .ccr-filter-group, .ba-filter-group { flex-wrap: wrap; max-width: 100%; }
  .vv-filters select, .vv-filters input[type=text], .ccr-filters select, .actions-row select { max-width: 100%; min-width: 0 !important; }
  #topClientSelect { min-width: 0 !important; width: 100%; }
  .page-header > *, .vv-header > *, .actions-row > *, .client-switch { min-width: 0; max-width: 100%; }
  .client-switch select, #clientPicker, #tenantPicker, #clientPick { width: 100%; }

  /* A filter popover opens across the row, not off the right edge. */
  .module-filter-row { position: relative; }
  .module-filter-row .filter-pill { position: static !important; }
  .module-filter-row .filter-pill__pop { left: 0 !important; right: 0 !important; min-width: 0 !important; }

  /* Row feeds stack: date and pills on one line, the question beneath. */
  .vv-row-header, .cap-head { display: none !important; }
  .vv-row, .cap-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px !important; }
  .vv-row > div:last-child, .cap-row .cap-query { flex: 1 0 100%; min-width: 0; }

  /* The menu folds behind one button (app.js mounts it). */
  .has-nav-toggle .nav-toggle { display: inline-flex; }
  .has-nav-toggle nav { display: none !important; }
  .has-nav-toggle.nav-open nav { display: flex !important; flex-wrap: wrap; gap: 2px 6px; width: 100%; }
  .has-nav-toggle.nav-open nav a { padding: 8px 10px; font-size: 1rem; }

  /* Comfortable touch targets. */
  .icon-btn, .collapse-btn, .btn, .metric-tab, .vv-tab { min-height: 36px; }
  .q-actions { white-space: nowrap; }

  /* A sideways-scrolling table keeps its text column readable instead of
     crushing it to one word a line. */
  td.qtext, td.cl-title, .data-table td:first-child { min-width: 200px; }

  /* A chart with a long key needs the height for it. */
  .ccr-canvas-wrap { height: 460px !important; }
  .chart-canvas-wrap--standard { height: 340px !important; }
}

/* The phone menu button. Hidden at desktop widths; the phone block above shows
   it once app.js has mounted it (.has-nav-toggle outranks this rule). */
.nav-toggle {
  display: none; align-items: center; gap: 10px;
  padding: 8px 14px; min-height: 40px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--card); color: var(--heading);
  font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; cursor: pointer;
}
.nav-toggle__bars { width: 16px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }

/* Small round help and drill buttons keep their look and get a finger-sized
   hit area on touch screens. */
@media (pointer: coarse) {
  .help-icon::after, .vv-help-icon::after, .lvs-trend-legend-help::after, .lvs-trend-legend-drill::after {
    content: ''; position: absolute; inset: -9px;
  }
}

/* ============================================================================
   Labels and controls (2026-10-03)
   One rule across every page: a border means "you can type or pick here".
   Static labels (status, tier, source, counts) are tinted fills with no
   outline. Help marks are quiet glyphs. A group of mutually exclusive
   options is a segmented control: one track, the chosen option raised.
   ============================================================================ */

/* Dropdowns. :where() keeps this at zero specificity, so any page that styles
   its own select keeps every property it sets; an unstyled select stops
   rendering with the browser's heavy default frame. */
:where(select) {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text);
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 5px 8px;
  min-height: 32px;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
:where(select):hover { border-color: #C9CED6; }
:where(select):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(36, 84, 158, 0.15);
}

/* A control label beside its dropdown: quiet text, aligned to the box. */
.ctl-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

/* Segmented control. Pages put .seg on the group and .seg-opt on each
   option; the selected option carries .active or .is-active. */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--track);
  border-radius: 8px;
}
.seg .seg-opt {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 5px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.seg .seg-opt:hover { color: var(--heading); background: rgba(255, 255, 255, 0.6); }
.seg .seg-opt.active,
.seg .seg-opt.is-active,
.seg .seg-opt[aria-selected="true"] {
  background: var(--card);
  color: var(--heading);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(23, 32, 48, 0.12), 0 0 0 1px rgba(23, 32, 48, 0.04);
}
.seg .seg-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A text button: an action that reads as a link (2026-10-08, retry and edit links). */
.btn-link { background: none; border: 0; padding: 0; color: var(--accent, #1A3A5C); text-decoration: underline; cursor: pointer; font: inherit; }

/* Read-only access (2026-10-09). app.js adds body.read-only for a person
   invited with Read-only access. The server refuses every change
   (middleware/requireWriter.js); these rules keep the controls out of view.
   The badge and the notice are labels, so they carry fills, not borders. */
body.read-only .write-only { display: none !important; }
.read-only-badge {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--card-tint);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.read-only-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: #fff;
  font-size: var(--text-sm);
  line-height: 1.5;
  box-shadow: var(--shadow-card);
  z-index: 10000;
}

/* Download CSV (components/table-csv.js). The button is a control, so it has
   a border; the bar around it does not. */
.csv-export-bar { display: flex; justify-content: flex-end; margin: 4px 0 6px; }
.csv-export-btn {
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--accent);
  cursor: pointer;
}
/* ============================================================================
   CONTEXT PICKERS AND THE SITE CONTEXT STRIP (2026-10-08)
   ----------------------------------------------------------------------------
   Owner feedback: on AI Answers the organization select had a label and the
   website select had none, so the two boxes sat at different heights; and
   the website name scrolled away, so a reader deep in a page lost which site
   they were checking.

   1. Pickers. Every page header that chooses an organization or a website
      uses one shape: a label above the control (.ctx-field > .ctx-label +
      .ctx-select), one control height, bottoms aligned (.ctx-pickers).
      Labels are plain captions, never bordered; only the select is a control.
   2. Strip. app.js mounts one fixed strip (.ctx-strip) under the top of the
      window once the page's website picker has scrolled out of view. It names
      the website and offers a way back to the picker. app.js sets
      --ctx-offset (the strip's height while shown, else 0) so other sticky
      bars, such as the Prompt View chooser, sit under it, and --ctx-strip-h
      (its height once mounted) so in-page jumps land below it.
   ============================================================================ */
html { scroll-padding-top: calc(var(--ctx-strip-h, 0px) + var(--sticky-extra, 0px) + 12px); }

.ctx-pickers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
/* In a header row the pickers keep their width and the title block wraps. */
.page-header > .ctx-pickers,
.vv-header > .ctx-pickers { flex: 0 0 auto; max-width: 100%; }
.ctx-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ctx-field[hidden],
.ctx-field:has(> select[hidden]) { display: none; }
.ctx-label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0;
}
select.ctx-select {
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background-color: var(--card);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  min-width: 200px;
  max-width: 100%;
  margin: 0;
}
select.ctx-select--site { min-width: 280px; }

/* Organization panel on the Websites page (owner, 2026-10-12): the account's
   own name, which its websites sit under. A tinted fill, not a border: it is
   a label; the Rename button is the control. */
.org-panel {
  background: var(--section-bg);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 18px;
  font-family: var(--font-sans);
}
.org-panel[hidden], .org-panel [hidden] { display: none !important; }
.org-panel__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.org-panel__chip {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--accent); background: var(--accent-bg); border-radius: var(--radius-pill); padding: 3px 10px;
}
.org-panel__name { margin: 0; font-size: 1.25rem; }
.org-panel__count { color: var(--muted); font-size: 0.9375rem; }
.org-panel__head .btn { margin-left: auto; padding: 6px 14px; font-size: 0.875rem; }
.org-panel__form { margin-top: 12px; }
.org-panel__row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.org-panel__row input { flex: 1 1 260px; min-width: 0; }
.org-panel__hint { margin: 8px 0 0; color: var(--muted); font-size: 0.875rem; }
select.ctx-select:hover { border-color: var(--accent-light); }
select.ctx-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The strip. Fixed, so showing it never shifts the page; hidden above the
   window until app.js adds .is-shown. */
.ctx-strip {
  position: fixed;
  top: var(--ctx-top, 0px);
  left: 0;
  right: 0;
  z-index: 45;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
  transform: translateY(calc(-100% - var(--ctx-top, 0px) - 4px));
  visibility: hidden;
  transition: transform var(--t-base), visibility 0s linear 160ms;
}
.ctx-strip.is-shown {
  transform: none;
  visibility: visible;
  transition: transform var(--t-base), visibility 0s;
}
.ctx-strip__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px var(--chrome-pad, 40px);
  box-sizing: border-box;
  font-family: var(--font-sans);
}
.ctx-strip__chip {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-dark);
  background: var(--accent-bg);
  padding: 3px 8px;
  border-radius: 4px;
}
.ctx-strip__name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-strip__org {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-strip__change {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--accent);
  cursor: pointer;
}
.csv-export-btn:hover, .csv-export-btn:focus-visible { background: var(--card-tint); }
.csv-export-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media print { .csv-export-bar { display: none; } }

/* Export menu (components/page-export.js): one button in the page header with
   CSV, Word and PDF. The button and the menu items are controls; the menu
   panel is not, so it has a shadow rather than a border. */
.page-export { position: relative; display: inline-flex; align-self: flex-end; }
.page-export-btn {
  font: inherit; font-size: var(--text-sm, 0.875rem); font-weight: 600;
  padding: 6px 14px; min-height: 34px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm, 4px);
  background: var(--card); color: var(--accent); cursor: pointer;
}
.page-export-btn::after { content: ""; display: inline-block; margin-left: 8px; vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.page-export-btn:hover, .page-export-btn:focus-visible { background: var(--card-tint); }
.page-export-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-export.is-busy .page-export-btn { cursor: progress; color: var(--muted); }
.page-export-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  min-width: 240px; max-width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  padding: 6px; background: var(--card); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(28, 35, 49, 0.18);
}
.page-export-group { padding: 6px 8px 2px; font-size: var(--text-xs, 0.8125rem); font-weight: 700; color: var(--muted); }
.page-export-item {
  display: block; width: 100%; text-align: left; font: inherit; font-size: var(--text-sm, 0.875rem);
  padding: 7px 10px; margin: 2px 0; border: 1px solid var(--rule); border-radius: var(--radius-sm, 4px);
  background: var(--card); color: var(--text); cursor: pointer;
}
.page-export-item--sub { padding-left: 14px; }
.page-export-item:hover:not([disabled]), .page-export-item:focus-visible { background: var(--accent-bg); color: var(--accent-dark); }
.page-export-item[disabled] { color: var(--muted); cursor: not-allowed; }
.page-export-status { padding: 4px 8px 2px; font-size: var(--text-xs, 0.8125rem); color: var(--muted); }
.page-export-status:empty { display: none; }
.page-export-status.is-error { color: var(--red); }
@media print { .page-export { display: none; } }
.ctx-strip__change:hover { border-color: var(--accent); }
.ctx-strip__change:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 720px) {
  .ctx-pickers, .ctx-field { width: 100%; }
  select.ctx-select, select.ctx-select--site { width: 100%; min-width: 0; }
  .ctx-strip__inner { padding: 6px 16px; gap: 8px; min-height: 40px; }
  .ctx-strip__org { display: none; }
}
@media print {
  .ctx-strip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ctx-strip, .ctx-strip.is-shown { transition: none; }
}

/* ── Area pages and the context bar (handoff UI-01, UI-03; 2026-10-15) ──────
   .area-pages: the pages of the area the reader is in, as links under the
   header (app.js). .vctx: the context row (components/context-bar.js). The
   row itself is a tinted label area with no border; only its controls carry
   borders (borders mean actionable). */
.area-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0 0 var(--space-3);
}
.area-pages__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: none;
}
.area-pages__link:hover { color: var(--heading); background: var(--card-tint); }
.area-pages__link[aria-current="page"] { color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.area-pages__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vctx {
  background: var(--card-tint);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 0 0 var(--space-5);
}
.vctx__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
}
.vctx__field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vctx__field label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.vctx select,
.vctx input[type="date"] {
  min-height: 36px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
}
.vctx select:disabled { color: var(--muted); background: transparent; cursor: not-allowed; }
.vctx select:focus-visible,
.vctx input:focus-visible,
.vctx__reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vctx__reset {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.vctx__summary { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text); overflow-wrap: break-word; }
.vctx__summary:first-child { margin-top: 0; }
.vctx__lead { font-weight: 600; color: var(--heading); }
.vctx__site { color: var(--muted); }
.vctx__note { margin: 4px 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--muted); }
.vctx__warn { color: var(--amber); font-weight: 600; }
@media (max-width: 600px) {
  .vctx__field { flex: 1 1 100%; }
  .vctx__field--date { flex: 1 1 calc(50% - 7px); }
  .vctx select, .vctx input[type="date"] { width: 100%; }
}
/* A page control the context bar replaces (data-context-owned) leaves the
   screen once the bar mounts; display rules on the control's own class must
   not bring it back. */
[data-context-owned][hidden] { display: none !important; }

/* Chart numbers as a table (components/chart-table.js, handoff UI-05). */
.chart-table { margin: 8px 0 0; font-size: var(--text-sm); }
.chart-table > summary {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--accent); cursor: pointer; font-weight: 600;
}
.chart-table > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.chart-table__wrap { overflow-x: auto; margin-top: 6px; max-width: 100%; }
.chart-table__wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chart-table__table { min-width: 0; }
.chart-table__table th[scope="row"] { font-weight: 600; text-align: left; white-space: nowrap; }
.chart-table__table td { text-align: right; font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Export menu scope lines (components/page-export.js, handoff UI-06). */
.page-export-scope { display: block; font-weight: 400; color: var(--muted); max-width: 32ch; overflow-wrap: break-word; }
.page-export-group--all { margin-top: 10px; }
a.page-export-item { display: block; text-decoration: none; color: inherit; }

/* Wide tables scroll in their own box (components/table-scroll.js, handoff
   UI-04). The page never scrolls sideways; the box does, says so, and keeps a
   question column pinned. Headers wrap between words, never inside one. */
.table-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table-scroll.is-overflowing:not(.at-end) { box-shadow: inset -14px 0 12px -12px rgba(28, 35, 49, 0.28); }
.table-scroll__cue { margin: 4px 0; font-size: var(--text-xs); color: var(--muted); }
.table-scroll th { overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
.table-scroll .table-scroll__pinned {
  position: sticky;
  z-index: 1;
  /* Opaque: a striped row tints its cells with a see-through color, and the
     columns scrolling underneath would read through it. */
  background-color: var(--card) !important;
}
.table-scroll .table-scroll__pinned--last { box-shadow: 1px 0 0 var(--rule); }
.table-scroll thead .table-scroll__pinned { z-index: 2; }
@media (max-width: 600px) {
  /* A pinned question column may take at most 55% of a phone screen, so the
     columns beside it stay reachable. */
  .table-scroll .table-scroll__pinned--last { max-width: 55vw; min-width: 9rem; }
}
/* Shared measurement states (lib/viv-states.js, handoff UI-02, 2026-10-15).
   A state is text in the body face, never a number-sized dash; a measured
   zero keeps its value and its denominator. */
.viv-state { font-family: var(--font-sans); font-size: 0.9375rem; color: var(--muted); }
.viv-state--measured, .viv-state--zero { color: var(--text); }
.viv-state__value { font-weight: 700; }
.viv-state__of, .viv-state__coverage, .viv-state__asof, .viv-state__reason, .viv-state__next { color: var(--muted); }
.viv-state__head { font-weight: 600; }
.viv-state__retry { margin-left: 6px; }
/* Inside .table-scroll the box is the one scroller: the phone rule above that
   makes every table its own scrolling block would hide the box's overflow
   from the cue and break the pinned question column. */
.table-scroll > table { display: table !important; overflow-x: visible !important; max-width: none; }

/* "Back to ..." from an evidence page to the finding it came from (2026-10-17). */
.viv-return-link { display: inline-flex; align-items: center; min-height: 36px; margin: 8px 0 4px; font-weight: 600; color: var(--accent); }

/* ---------------------------------------------------------------------------
   One visual system for every app page (owner, 2026-10-17: "use the same
   approach we did for the overview for all pages, to keep consistent").
   - One tint per kind of content: neutral, progress, strength, gap.
   - Tinted fills for panels and tiles; borders only on controls.
   - Sentence-case labels; numbers beside their base; generous space.
   Pages read these tokens; components/decision-summary.css is the reference
   use. --------------------------------------------------------------------- */
:root {
  --viv-tint-neutral: #F3F6FA;
  --viv-tint-progress: #EAF1FB;
  --viv-tint-good: #E9F5EE;
  --viv-tint-gap: #FBF2E0;
  --viv-strong: #183A73;
  --viv-divider: rgba(28, 35, 49, 0.10);
  --viv-radius-panel: 18px;
  --viv-radius-tile: 14px;
  --viv-gap-band: 56px;
  --viv-measure: 72ch;
}

/* The meaning palette (owner, 2026-10-17: "colors to show points of
   differentiation; light and readable"). Each pair is a pale fill with a
   dark ink that passes contrast on it, and every color appears with words:
     good  AI offered or recommended you; a strength
     info  AI named you; neutral information; progress
     gap   AI left you out; a weakness to look at
   *-row is a lighter fill for table rows and list lines. */
:root {
  --viv-good-bg: #DDF0E4; --viv-good-ink: #155C35; --viv-good-row: #F0F8F3;
  --viv-info-bg: #DFE9F8; --viv-info-ink: #1B4686; --viv-info-row: #F1F5FC;
  --viv-gap-bg:  #F8E8C8; --viv-gap-ink:  #7A5200; --viv-gap-row:  #FDF7EC;
}

/* ---------------------------------------------------------------------------
   App pages share the Overview's look (owner, 2026-10-17: "use more shading
   across all pages; light and readable"). Scoped to app pages (marketing
   pages carry body.mkt) and written as body-prefixed selectors so they win
   over each page's own section rules without !important.
   - A section is a light tinted panel with space around it, not a white box
     with a hairline border; white items inside it stand out against the tint.
   - Section titles read as headings; descriptions stay under ~72ch.
   - Table headers and small labels in sentence case; tables sit on white
     with a tinted header row and light zebra rows.
   Color with meaning comes from the --viv-good/info/gap palette above, set by
   each page where it marks a result. -------------------------------------- */
body:not(.mkt) .section-card,
body:not(.mkt) .ccr-section,
body:not(.mkt) .cl-section,
body:not(.mkt) .ca-section {
  background: var(--viv-tint-neutral);
  border: 0;
  box-shadow: none;
  border-radius: var(--viv-radius-panel);
  padding: 28px 32px 30px;
  margin-bottom: 36px;
}
body:not(.mkt) .section-card-title,
body:not(.mkt) .cl-section-title,
body:not(.mkt) .ca-title { font-size: 1.25rem; font-weight: 700; color: var(--heading); line-height: 1.35; margin-bottom: 8px; }
body:not(.mkt) .section-card-desc,
body:not(.mkt) .ca-sub { font-size: 0.9375rem; line-height: 1.6; max-width: var(--viv-measure); margin-bottom: 20px; }
body:not(.mkt) .section-card table,
body:not(.mkt) .ccr-section table,
body:not(.mkt) .cl-section table,
body:not(.mkt) .ca-section table { background: #fff; border-radius: 12px; }
body:not(.mkt) .data-table { border: 0; border-radius: 12px; }
body:not(.mkt) .data-table thead tr { background: #EEF2F7; }
body:not(.mkt) .data-table tbody tr:nth-child(even) td { background: #F9FAFC; }
body:not(.mkt) th { text-transform: none; letter-spacing: 0; }
body:not(.mkt) .filter-group label,
body:not(.mkt) .filter-label { text-transform: none; letter-spacing: 0; font-weight: 600; }
body:not(.mkt) .empty-state { background: #fff; border-radius: 14px; }
@media (max-width: 760px) {
  body:not(.mkt) .section-card,
  body:not(.mkt) .ccr-section,
  body:not(.mkt) .cl-section,
  body:not(.mkt) .ca-section { padding: 20px 18px 22px; margin-bottom: 24px; }
}

/* ---------------------------------------------------------------------------
   Card text size, every app page (owner, 2026-10-17: "the text still needs
   to be larger, the label and the body text in the card"). One scale for
   every tile and card that shows a result:
     label        1.1875rem (19px), bold, heading color
     value        2rem and up (unchanged where a page already sets larger)
     unit / base  1.125rem (18px)
     body text    1.0625rem (17px), line-height 1.55
   body:not(.mkt) outranks each page's own body-prefixed tile rules. ------- */
body:not(.mkt) .ds-stat dt,
body:not(.mkt) .ds-metric-lab,
body:not(.mkt) .ds-status .ds-next .ds-k,
body:not(.mkt) .cr-card .cr-lab,
body:not(.mkt) .opp-stat .lbl,
body:not(.mkt) .vv-summary-cell .label,
body:not(.mkt) .cmp-tile-label,
body:not(.mkt) .eng-stat__label,
body:not(.mkt) #summaryStrip .kpi-card .label,
body:not(.mkt) .aeo-tile__k,
body:not(.mkt) .mission-summary .ms-label,
body:not(.mkt) .score-card-title-big { font-size: 1.1875rem; font-weight: 700; color: var(--heading); line-height: 1.35; }

body:not(.mkt) .ds-stat-unit,
body:not(.mkt) .ds-metric-of,
body:not(.mkt) .cr-card .cr-of { font-size: 1.125rem; }

body:not(.mkt) .ds-stat .ds-basis,
body:not(.mkt) .ds-metric-means,
body:not(.mkt) .ds-metric-go,
body:not(.mkt) .ds-stat-link,
body:not(.mkt) .ds-status .ds-next-why,
body:not(.mkt) .cr-card .cr-cell,
body:not(.mkt) .cr-card .cr-q,
body:not(.mkt) .cr-card .cr-def,
body:not(.mkt) .opp-stat .sub,
body:not(.mkt) .vv-summary-cell .sub,
body:not(.mkt) .cmp-tile-sub,
body:not(.mkt) .cmp-tile-value--words,
body:not(.mkt) #summaryStrip .kpi-card .sub,
body:not(.mkt) .aeo-tile__src,
body:not(.mkt) .aeo-tile__why,
body:not(.mkt) .score-card-meta,
body:not(.mkt) .ds-list li,
body:not(.mkt) .ds-action-why,
body:not(.mkt) .ds-action-next,
body:not(.mkt) .proj-reason,
body:not(.mkt) .proj-next { font-size: 1.0625rem; line-height: 1.55; }

body:not(.mkt) .ds-stat-value { font-size: 2rem; }
body:not(.mkt) .ds-status .ds-next-title { font-size: 1.3125rem; }
body:not(.mkt) .ds-stat .ds-basis { max-width: 32ch; }

/* The Next action tile is the one dark tile: its label stays light. */
body:not(.mkt) .ds-status .ds-next .ds-k { color: #DCE7F7; }

/* ---------------------------------------------------------------------------
   The four signals, one color each, everywhere they appear (owner,
   2026-10-17: "use the mentioned, cited, recommended colors on the overview
   cards; they all blend together"). Distinct hues, pale fills, dark inks:
     named        AI mentioned you              blue
     offered      AI listed you as an option    teal
     recommended  AI recommended you            green
     cited        AI linked your website        violet
   The dashboard cards, the funnel stages and the trend line read these. -- */
:root {
  --viv-sig-named: #2F6FD0;       --viv-sig-named-bg: #EAF1FC;       --viv-sig-named-ink: #1C4E9E;
  --viv-sig-offered: #13838F;     --viv-sig-offered-bg: #E4F4F5;     --viv-sig-offered-ink: #0E5E67;
  --viv-sig-recommended: #2E9157; --viv-sig-recommended-bg: #E7F5EC; --viv-sig-recommended-ink: #1A6339;
  --viv-sig-cited: #7552C7;       --viv-sig-cited-bg: #F0EBFA;       --viv-sig-cited-ink: #503294;
}
.funnel-stage--mentioned   .funnel-stage__fill { background: var(--viv-sig-named); }
.funnel-stage--cited       .funnel-stage__fill { background: var(--viv-sig-cited); }
.funnel-stage--recommended .funnel-stage__fill { background: var(--viv-sig-recommended); }