/* AI Visibility Playbook — design system layer.
 *
 * The workspace accumulated four style generations that never shared a vocabulary:
 * cmw-* (the original), cmw-premium-*, tm-* (next-tabs) and the .tm-tabs-polished patches,
 * plus cmv2-*, aia-* and gai-*. Measured across the six tabs at 1440 and 390 that produced
 * 36 distinct font sizes, 10 corner radii, ~20 greys drawn from three unrelated ramps and
 * four accent colours — three of which failed WCAG AA as text.
 *
 * This sheet does not restyle those layers. It gives them one set of tokens and corrects the
 * places where the drift is either illegible or inaccessible. It loads LAST so it wins, and
 * it is deliberately additive: remove it and every earlier layer still renders as before.
 *
 * Contrast ratios in the comments are measured against the background the token actually
 * sits on in this product, not against white by default.
 */

:root {
  /* ── Ink ─────────────────────────────────────────────────────────────────── */
  --avp-ink:            #101828;  /* headings, primary copy */
  --avp-ink-soft:       #2b3749;  /* secondary headings */
  --avp-muted:          #667085;  /* 4.59:1 on --avp-paper-2, 4.97:1 on white */
  --avp-muted-strong:   #566274;  /* 5.71:1 on --avp-paper-2 — for text at the 11px floor */

  /* ── Ground ──────────────────────────────────────────────────────────────── */
  --avp-paper:          #ffffff;
  --avp-paper-2:        #f3f6fb;  /* the workspace canvas */
  --avp-paper-3:        #f8fafc;  /* inset panels */
  --avp-navy:           #060b18;  /* the executive card */
  --avp-line:           #dfe5ec;
  --avp-line-soft:      #edf1f5;

  /* ── Accent ──────────────────────────────────────────────────────────────── */
  /* One hue, two tokens, each AA in its own context. The old #10b981 was used on light
     grounds at 2.34:1 and #159f78 at 3.35:1; both failed as text. */
  --avp-accent:         #0f7a5a;  /* 5.31:1 on white, 4.91:1 on --avp-paper-2 */
  --avp-accent-on-dark: #10b981;  /* 7.75:1 on --avp-navy */
  --avp-accent-wash:    #eefaf5;
  --avp-accent-line:    #c6eadc;
  --avp-info:           #1b5fbf;  /* 5.64:1 on --avp-paper-2 */
  --avp-warn:           #92400e;
  --avp-danger:         #b42318;

  /* ── Type scale ──────────────────────────────────────────────────────────── */
  /* 11px is a hard floor. 289 elements rendered below it, 139 of them at 8.5px. */
  --avp-fs-micro:  11px;   /* eyebrows, chips, table headers, badges */
  --avp-fs-small:  12.5px; /* captions, evidence meta */
  --avp-fs-body:   14px;   /* prose */
  --avp-fs-lead:   16px;   /* section leads */

  /* ── Radius ──────────────────────────────────────────────────────────────── */
  /* Was 9/10/11/12/13/14/15/16/18/20. Now four steps. */
  --avp-r-sm:   8px;
  --avp-r-md:  12px;
  --avp-r-lg:  16px;
  --avp-r-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────────────────────── */
  --avp-shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --avp-shadow-lift: 0 8px 28px rgba(16, 24, 40, .06);
}

/* ── Ground and canvas ────────────────────────────────────────────────────── */

body { background: var(--avp-paper-2); color: var(--avp-ink); }

/* ── Accent correction ────────────────────────────────────────────────────── */
/* Every eyebrow/kicker in the workspace. This is the single most repeated contrast
   failure: 56 elements at 2.34:1. */
.cmw-eyebrow,
.cmv2-kicker,
.tm-report-steps span,
.cmv2-section > .cmw-eyebrow { color: var(--avp-accent); }

/* On the navy executive card the same family needs the light token instead. */
.cmv2-exec .cmv2-kicker,
.cmv2-exec .cmw-eyebrow,
.cmv2-exec-segments > span { color: var(--avp-accent-on-dark); }

/* Interactive text: "Open website ↗", "See what to do on …", evidence links. */
.tm-website-head > a,
.tm-task-top > a,
.tm-task summary,
.tm-gap-action,
.cmw-health-head a,
.aia-host-focus button,
.cmv2-priority-details summary,
.cmw-outreach summary { color: var(--avp-accent); }

.cmv2-fixitem a,
.cmv2-priority-details-body a,
.cmw-health-finding a,
#cmv2-root a:not(.cmw-btn) { color: var(--avp-accent); }

/* Blue kickers that sat at 4.46:1 on the canvas. */
.aia-detail-head > span,
.cmv2-priority-why > b,
.cmv2-priority-do > b,
.gai-surface > span { color: var(--avp-info); }

/* Step chips: emerald on a blue tint measured 1.46:1. */
.cmv2-step > span {
  background: var(--avp-accent-wash);
  border: 1px solid var(--avp-accent-line);
  color: var(--avp-accent);
}

/* ── Type floor ───────────────────────────────────────────────────────────── */
/* Nothing in a paid deliverable should render below 11px. Each rule below replaces a
   size between 7.9px and 10.9px that shipped in one of the four layers. */

.cmw-eyebrow,
.cmv2-kicker,
.cmw-pill,
.cmw-state,
.cmw-badge,
.cmv2-gap-tag,
.cmv2-ring-caption,
.cmw-health-label,
.cmv2-details-h,
.cmv2-metric span,
.cmv2-metric small,
.cmv2-exec-segments > span,
.cmv2-exec-bottom > div > span,
.aia-question-no,
.aia-sentiment-pill,
.aia-sentiment-badge,
.aia-engine-dots,
.aia-engine-dots b,
.aia-sentiment-insights span,
.aia-question-sentiment > span,
.aia-reader-sentiment span,
.gai-chip,
.gai-sentiment,
.gai-refs,
.gai-coverage,
.cmv2-table th,
.tm-status,
.tm-task-top span,
.tm-competitor-title span,
.tm-gap-top span,
.tm-report-steps span { font-size: var(--avp-fs-micro); }

.cmv2-table td,
.cmv2-q-col,
.cmv2-verdict,
.cmv2-score,
.cmv2-score-total,
.cmv2-quote figcaption,
.aia-question-copy small,
.aia-sentiment-compact,
.aia-sentiment-insights b,
.aia-sentiment-insights small,
.cmw-opp-reason,
.cmw-note,
.cmv2-fixitem .cmv2-details-note,
.aia-detail-head small,
.gai-question small { font-size: var(--avp-fs-small); }

/* Prose. 13px and 12.5px body copy in a document people are asked to act on. */
.cmv2-lead,
.cmv2-gap p,
.cmv2-step p,
.cmv2-priority-why p,
.cmv2-priority-do p,
.cmv2-fixitem p,
.cmv2-fixitem li,
.cmw-health-finding > p,
.cmw-health-issues li,
.tm-task-block p,
.tm-website-card > p,
.tm-competitor-main p { font-size: var(--avp-fs-body); line-height: 1.55; }

/* Greys that failed at the smaller sizes now carry the stronger token. */
.cmv2-quote figcaption,
.aia-question-copy small,
.aia-engine-dots,
.aia-engine-dots b,
.aia-sentiment-insights span,
.aia-sentiment-insights small,
.aia-detail-head small,
.aia-question-sentiment > small,
.cmw-note,
.gai-refs,
.gai-coverage,
.cmv2-table th { color: var(--avp-muted-strong); }

/* A dash meaning "this check could not run" was #94a3b8 at 2.56:1 — unreadable, and it is
   the mark that carries "never counted against you". */
.cmv2-score.is-na { color: var(--avp-muted-strong); }

/* ── Weight ───────────────────────────────────────────────────────────────── */
/* 750 and 850 round up to the 800 and 900 faces, so they read heavier than authored. */
.tm-filters button,
.tm-gap-action { font-weight: 700; }

/* ── Radius ───────────────────────────────────────────────────────────────── */

.cmw-card,
.cmw-upgrade,
.cmw-report-link-card,
.cmv2-priority,
.cmv2-gap,
.cmv2-step,
.cmv2-tablewrap,
.tm-website-card,
.tm-competitor-card,
.tm-gap-card,
.tm-task,
.tm-website-tools,
.tm-not-tasks,
.tm-more-competitors,
.cmw-health-panel,
.cmw-health-finding,
.aia-question-wrap,
.aia-question-detail,
.aia-sentiment-overview,
.aia-overview-card { border-radius: var(--avp-r-lg); }

.cmw-btn,
.cmw-input,
.tm-search input,
.aia-question-no,
.cmv2-rank,
.tm-rank,
.tm-task-no,
.cmv2-fixitem,
.aia-sentiment-insights > div,
.cmw-health-variants div { border-radius: var(--avp-r-md); }

.cmv2-metrics,
.cmv2-bucket,
.cmw-q-n { border-radius: var(--avp-r-sm); }

.cmw-pill,
.cmw-state,
.cmw-badge,
.cmw-step,
.tm-status,
.tm-filters button,
.tm-name-chips span,
.aia-sentiment-pill,
.aia-sentiment-badge,
.gai-chip { border-radius: var(--avp-r-pill); }

/* ── Navigation ───────────────────────────────────────────────────────────── */
/* The strip is 628px of tabs. On every phone width from 320 to 414 that left Competitors,
   Websites and Action plan off-screen behind a silent horizontal scroll, with "Competitors"
   cut mid-word so the row read as complete. Action plan is the deliverable.
   Below 760px it becomes a two-row control with every tab visible and touchable. */

.cmw-nav { gap: 4px; }

.cmw-tab {
  font-size: 13.5px;
  border-radius: var(--avp-r-sm) var(--avp-r-sm) 0 0;
}
.cmw-tab[aria-selected="true"] { border-bottom-color: var(--avp-accent); }
.cmw-tab:hover { color: var(--avp-ink); }

@media (max-width: 760px) {
  .cmw-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    border-bottom: 0;
    margin: 16px 0 22px;
  }
  .cmw-tab {
    margin-bottom: 0;
    padding: 11px 8px;
    min-height: 44px;              /* touch target */
    border: 1px solid var(--avp-line);
    border-radius: var(--avp-r-md);
    background: var(--avp-paper);
    color: var(--avp-muted-strong);
    font-size: 12.5px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
  .cmw-tab[aria-selected="true"] {
    background: var(--avp-navy);
    border-color: var(--avp-navy);
    color: #fff;
  }
}

@media (max-width: 380px) {
  .cmw-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Wide tables ──────────────────────────────────────────────────────────── */
/* .cmv2-tablewrap already scrolls, but with no affordance and no anchor: on a phone the
   question column scrolls out of view and the reader is left with a grid of bare Yes/No. */

.cmv2-tablewrap { position: relative; }

.cmv2-table .cmv2-q-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--avp-paper);
}
.cmv2-table th.cmv2-q-col { background: var(--avp-paper); }
.cmv2-table tr.is-you .cmv2-q-col { background: #f1fbf7; }

@media (max-width: 760px) {
  /* A fade at the trailing edge is the only honest signal that there is more to the right. */
  .cmv2-tablewrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    pointer-events: none;
    border-radius: 0 var(--avp-r-lg) var(--avp-r-lg) 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96));
  }
  .cmv2-table .cmv2-q-col { box-shadow: 1px 0 0 var(--avp-line-soft); }
}

/* ── Touch targets ────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .tm-website-head > a,
  .tm-task-top > a,
  .cmw-health-head a,
  .tm-gap-action,
  .cmv2-priority-details summary,
  .tm-task summary,
  .tm-website-card summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media print {
  /* The mobile grid and the scroll fade must never reach paper. */
  .cmw-nav { display: none !important; }
  .cmv2-tablewrap::after { display: none !important; }
  .cmv2-table .cmv2-q-col { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   The plan, and the working
   ───────────────────────────────────────────────────────────────────────────
   The overview used to run 6,760px on desktop and 10,134px on a 390px phone,
   with the plan's steps ("add 3 priority listings") separated from the actions
   they referred to by about 2,000px of tables. Each step now owns its actions
   and opens to reveal them; the evidence sits below, collapsed, in full.
   ═══════════════════════════════════════════════════════════════════════════ */

.avp-plan { margin-top: 34px; }

.avp-plan-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 28px;
  align-items: start;
  margin-bottom: 18px;
}
.avp-plan-copy h2 { margin: 0 0 8px; }
.avp-plan-copy .cmv2-lead { margin: 0; max-width: 62ch; }

/* ── Progress ─────────────────────────────────────────────────────────────── */

.avp-progress {
  padding: 16px 18px;
  border: 1px solid var(--avp-line);
  border-radius: var(--avp-r-lg);
  background: var(--avp-paper);
  box-shadow: var(--avp-shadow-card);
}
.avp-progress-count { display: flex; align-items: baseline; gap: 6px; }
.avp-progress-count strong {
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--avp-ink);
}
.avp-progress-count span { color: var(--avp-muted); font-size: var(--avp-fs-small); }
.avp-progress-bar {
  margin: 12px 0 10px;
  height: 6px;
  border-radius: var(--avp-r-pill);
  background: var(--avp-line-soft);
  overflow: hidden;
}
.avp-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--avp-accent);
  transition: width .25s ease;
}
.avp-progress small { display: block; color: var(--avp-muted-strong); font-size: var(--avp-fs-micro); line-height: 1.45; }
.avp-progress.is-complete .avp-progress-count strong { color: var(--avp-accent); }

/* ── Steps ────────────────────────────────────────────────────────────────── */

.avp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.avp-step > details {
  border: 1px solid var(--avp-line);
  border-radius: var(--avp-r-lg);
  background: var(--avp-paper);
  box-shadow: var(--avp-shadow-card);
  overflow: hidden;
}
.avp-step > details[open] { box-shadow: var(--avp-shadow-lift); }

.avp-step summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.avp-step summary::-webkit-details-marker { display: none; }
.avp-step summary:hover { background: var(--avp-paper-3); }
.avp-step > details[open] summary { border-bottom: 1px solid var(--avp-line-soft); }

.avp-step-no {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--avp-r-md);
  background: var(--avp-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.avp-step-title { min-width: 0; }
.avp-step-title b { display: block; font-size: 18px; line-height: 1.25; color: var(--avp-ink); }
.avp-step-title small {
  display: block;
  margin-top: 3px;
  color: var(--avp-muted);
  font-size: var(--avp-fs-micro);
  font-weight: 700;
}
.avp-step-title small.is-complete { color: var(--avp-accent); }

/* A chevron drawn in CSS so it rotates with the disclosure and needs no icon font. */
.avp-step-toggle {
  justify-self: end;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--avp-muted);
  border-bottom: 2px solid var(--avp-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
details[open] > summary .avp-step-toggle { transform: rotate(-135deg) translate(-2px, -2px); }

.avp-step-body { padding: 18px 20px 20px; }
.avp-step-intro { margin: 0 0 16px; color: var(--avp-muted); font-size: var(--avp-fs-body); line-height: 1.55; max-width: 68ch; }
.avp-step-empty { margin: 0; color: var(--avp-muted); font-size: var(--avp-fs-body); line-height: 1.55; }

/* ── Actions ──────────────────────────────────────────────────────────────── */

.avp-actions { display: grid; gap: 12px; }

.avp-action {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--avp-line);
  border-radius: var(--avp-r-md);
  background: var(--avp-paper);
  transition: background .18s ease, border-color .18s ease;
}
.avp-action.is-done { background: var(--avp-accent-wash); border-color: var(--avp-accent-line); }
.avp-action.is-done .avp-action-body > :not(h4):not(details) { opacity: .62; }
/* Strike the host, not the source label beside it: line-through on the <h4> propagates to
   every inline descendant and cannot be cancelled on the child. */
.avp-action.is-done .avp-action-host { text-decoration: line-through; text-decoration-color: var(--avp-accent); }

/* The tick target is 44px tall even though the box it draws is 22px. */
.avp-tick { display: block; position: relative; width: 26px; min-height: 44px; cursor: pointer; }
.avp-tick input {
  position: absolute;
  top: 11px;
  left: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.avp-tick-box {
  position: absolute;
  top: 11px;
  left: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--avp-line);
  border-radius: 7px;
  background: var(--avp-paper);
  transition: background .15s ease, border-color .15s ease;
}
.avp-tick-box::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transition: transform .15s ease;
}
.avp-tick input:checked + .avp-tick-box { background: var(--avp-accent); border-color: var(--avp-accent); }
.avp-tick input:checked + .avp-tick-box::after { transform: rotate(45deg) scale(1); }
.avp-tick input:focus-visible + .avp-tick-box { outline: 2px solid var(--avp-info); outline-offset: 2px; }
.avp-tick input:disabled + .avp-tick-box { opacity: .5; cursor: not-allowed; }
.avp-tick-none { display: block; width: 26px; }

.avp-action-body { min-width: 0; }
.avp-action-body h4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
  font-size: 17px;
  line-height: 1.25;
  color: var(--avp-ink);
  overflow-wrap: anywhere;
}
.avp-action-body h4 small {
  color: var(--avp-muted-strong);
  font-size: var(--avp-fs-micro);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.avp-action-rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--avp-navy);
  color: #fff;
  font-size: var(--avp-fs-micro);
  font-weight: 800;
}
.avp-action-body p { margin: 0 0 10px; color: var(--avp-muted); font-size: var(--avp-fs-body); line-height: 1.55; max-width: 68ch; }
.avp-action-body p:last-child { margin-bottom: 0; }

.avp-action-problems { margin: 0 0 10px; padding-left: 20px; color: var(--avp-muted); }
.avp-action-problems li { margin: 5px 0; font-size: var(--avp-fs-body); line-height: 1.5; }

.avp-action-link a { font-weight: 700; text-decoration: none; }
.avp-action-link a:hover { text-decoration: underline; }

.avp-action-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: var(--avp-r-sm);
  background: var(--avp-paper-3);
}
.avp-action-facts span { display: grid; gap: 2px; min-width: 0; }
.avp-action-facts b {
  color: var(--avp-muted-strong);
  font-size: var(--avp-fs-micro);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.avp-action-facts i { font-style: normal; font-weight: 700; color: var(--avp-ink); font-size: var(--avp-fs-small); }
.avp-action-facts i.is-missing { color: var(--avp-danger); }
.avp-action-facts i.is-present { color: var(--avp-accent); }

.avp-action-do b {
  display: block;
  color: var(--avp-ink);
  font-size: var(--avp-fs-micro);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.avp-action-note {
  color: var(--avp-muted-strong) !important;
  font-size: var(--avp-fs-small) !important;
}

.avp-action .cmv2-priority-details { margin-top: 12px; }
.avp-action .cmv2-priority-details summary { min-height: 44px; display: flex; align-items: center; }

/* ── The working ──────────────────────────────────────────────────────────── */

.avp-evidence { margin-top: 40px; }
.avp-evidence-list { display: grid; gap: 8px; margin-top: 16px; }

.avp-evidence-item {
  border: 1px solid var(--avp-line);
  border-radius: var(--avp-r-md);
  background: var(--avp-paper);
}
.avp-evidence-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--avp-ink);
}
.avp-evidence-item > summary::-webkit-details-marker { display: none; }
.avp-evidence-item > summary:hover { background: var(--avp-paper-3); }
.avp-evidence-item[open] > summary { border-bottom: 1px solid var(--avp-line-soft); }
.avp-evidence-body { padding: 4px 18px 18px; }

/* The nested section keeps its own heading in print; on screen the summary is the heading. */
.avp-evidence-body .cmv2-section { margin-top: 0; }
.avp-evidence-body .cmv2-section > .cmw-eyebrow,
.avp-evidence-body .cmv2-section > h2 { display: none; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* Natural order on a phone: the plan's headline explains what the count is counting, so the
     progress card follows the copy rather than floating above it. */
  .avp-plan-head { grid-template-columns: 1fr; gap: 16px; }
  .avp-step summary { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 11px; padding: 15px 15px; }
  .avp-step-no { width: 30px; height: 30px; font-size: 13px; }
  .avp-step-title b { font-size: 16px; }
  .avp-step-body { padding: 15px 15px 17px; }
  .avp-action { grid-template-columns: 26px minmax(0, 1fr); gap: 11px; padding: 14px 15px; }
  .avp-action-body h4 { font-size: 16px; }
  .avp-action-facts { flex-direction: column; gap: 10px; }
  .avp-evidence-body { padding: 4px 12px 15px; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */

@media print {
  /* The overview does not print: citation-map-next-tabs.css hides it and shows #cm-panel-report,
     which is what the PDF renderer measures. These rules are therefore inert TODAY and exist so
     that a collapsed disclosure can never become a silently missing page if the overview is ever
     made printable. Verified against the live print stylesheet rather than assumed. */
  .avp-step > details,
  .avp-evidence-item { display: block !important; }
  .avp-step-body,
  .avp-evidence-body { display: block !important; }
  .avp-step-toggle,
  .avp-tick { display: none !important; }
  .avp-action { grid-template-columns: 1fr; break-inside: avoid; }
  .avp-evidence-body .cmv2-section > .cmw-eyebrow,
  .avp-evidence-body .cmv2-section > h2 { display: block; }
  .avp-progress { break-inside: avoid; }
}

/* Weakest and strongest, read as one comparison. */
.avp-standing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.avp-standing > .cmv2-section { margin-top: 30px; }
.avp-standing .cmv2-gaps { height: 100%; }

@media (max-width: 860px) {
  .avp-standing { grid-template-columns: 1fr; gap: 0; }
  .avp-standing > .cmv2-section + .cmv2-section { margin-top: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Second pass: the selectors the first pass could not reach
   ───────────────────────────────────────────────────────────────────────────
   Two reasons a rule above did not land, both worth knowing before adding more:

   1. The Google AI tab injects its stylesheet from JavaScript at runtime
      (citation-map-google-ai-handoff.js), so it is appended to <head> AFTER
      this linked sheet and wins every tie on specificity. The gai-* rules
      below are scoped to #cm-ready purely to outrank it.
   2. .cmw-premium-section-head raises the specificity of the eyebrow and lead
      inside every tab header, so the bare .cmw-eyebrow rule above lost there.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tab headers ──────────────────────────────────────────────────────────── */

.cmw-premium-section-head .cmw-eyebrow,
.cmw-section-head .cmw-eyebrow { color: var(--avp-accent); }
.cmw-premium-section-head p,
.cmw-section-head p { color: var(--avp-muted); font-size: var(--avp-fs-body); line-height: 1.55; }

/* ── AI answers ───────────────────────────────────────────────────────────── */

#cm-ai-answers .aia-consistency span,
#cm-ai-answers .aia-consistency small,
#cm-ai-answers .aia-legend small,
#cm-ai-answers .aia-legend span,
#cm-ai-answers .aia-overview-main span,
#cm-ai-answers .aia-overview-insights span,
#cm-ai-answers .aia-overview-insights small,
#cm-ai-answers .aia-sentiment-head small,
#cm-ai-answers .aia-sentiment-pill b,
#cm-ai-answers .aia-check span,
#cm-ai-answers .aia-check b { font-size: var(--avp-fs-micro); }

#cm-ai-answers .aia-consistency span,
#cm-ai-answers .aia-consistency small,
#cm-ai-answers .aia-legend small,
#cm-ai-answers .aia-overview-main span,
#cm-ai-answers .aia-overview-insights span,
#cm-ai-answers .aia-overview-insights small,
#cm-ai-answers .aia-sentiment-head small,
#cm-ai-answers .aia-question-sentiment > span { color: var(--avp-muted-strong); }

/* Decorative, but it is the only affordance saying a question row opens. */
#cm-ai-answers .aia-question-chevron { color: var(--avp-muted); }

/* ── Google AI ────────────────────────────────────────────────────────────── */

#cm-ready .gai-sentiment,
#cm-ready .gai-pass b,
#cm-ready .gai-refs,
#cm-ready .gai-refs span,
#cm-ready .gai-coverage,
#cm-ready .gai-surface-head span,
#cm-ready .gai-q b,
#cm-ready .gai-source-shelf > div > span,
#cm-ready .gai-source-shelf small,
#cm-ready .gai-source-shelf > p,
#cm-ready .gai-unresolved,
#cm-ready .gai-source-shelf .gai-unresolved { font-size: var(--avp-fs-micro); }

#cm-ready .gai-coverage,
#cm-ready .gai-refs,
#cm-ready .gai-refs span,
#cm-ready .gai-note,
#cm-ready .gai-note b { color: var(--avp-muted-strong); }

#cm-ready .gai-surface-head span { color: var(--avp-info); }
#cm-ready .gai-chip.unknown { background: #f2efe8; color: var(--avp-warn); }

/* The dark footer's eyebrow inherits the light-ground accent and drops to 3.58:1 on navy. */
#cm-ready .gai-foot .cmw-eyebrow,
#cm-ready .gai-source-shelf .cmw-eyebrow { color: var(--avp-accent-on-dark); }

/* ── Evidence meta on the Websites and Competitors tabs ───────────────────── */

.tm-website-card > small,
.tm-gap-card small,
.tm-competitor-card small { color: var(--avp-muted); }

/* ── Radius stragglers, including this sheet's own ────────────────────────── */

.avp-tick-box,
.avp-action-rank,
.gai-pass,
.gai-chip,
.gai-score { border-radius: var(--avp-r-sm); }
.aia-question-no,
.gai-q b { border-radius: var(--avp-r-sm); }

/* Last three: two below the floor, one at 4.33:1 on its own chip background. */
#cm-ai-answers .aia-detail-head > span,
#cm-ai-answers .aia-consistency > div > b { font-size: var(--avp-fs-micro); }
#cm-ready .gai-pass { color: var(--avp-muted-strong); }

/* Radius, final sweep. 50% on the ring and the numbered circles is deliberate and stays. */
#cm-ready .gai-chip,
#cm-ready .gai-pass,
#cm-ready .aia-check,
#cm-ai-answers .aia-check { border-radius: var(--avp-r-sm); }
#cm-ready .gai-score,
#cm-ready .gai-intro { border-radius: var(--avp-r-md); }
.cmv2-exec,
.aia-tracker-cta,
.cmw-insight-card { border-radius: var(--avp-r-lg); }

/* ── Google answer drill-down ──────────────────────────────────────────────────────────────
 * The pass summary became a <button> so the 40 Google checks can be opened and read, the way
 * the six assistants already could. These rules only undo the browser's button chrome: the
 * look is still whatever .gai-pass above says it is, so the two stay in step by construction.
 * The reader itself is the .aia-reader* component from citation-map-ai-answers.css, reused
 * rather than reimplemented.
 */
#cm-ready .gai-pass-open {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border: 1px solid transparent; background: none; font: inherit; text-align: left;
  cursor: pointer; padding: 4px 6px; transition: background .12s, border-color .12s;
}
#cm-ready .gai-pass-open:hover,
#cm-ready .gai-pass-open:focus-visible { border-color: #cfdae6; background: #f6f9fc; }
#cm-ready .gai-pass-cue {
  font-size: var(--avp-fs-micro); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #3977b8; opacity: 0; transition: opacity .12s;
}
#cm-ready .gai-pass-open:hover .gai-pass-cue,
#cm-ready .gai-pass-open:focus-visible .gai-pass-cue { opacity: 1; }
/* Never hide the affordance where hover does not exist. */
@media (hover: none) {
  #cm-ready .gai-pass-cue { opacity: 1; }
}

.gai-excerpt-note {
  margin: 14px 22px 0; color: #68768a; font-size: 10.5px; line-height: 1.5;
}
.aia-answer-text.gai-answer-empty { color: #68768a; font-style: normal; white-space: normal; }
.gai-reader-sources a, .gai-reader-sources span, .gai-reader-rivals span { word-break: break-word; }
.gai-reader-check-url { padding: 10px 22px 0; }
.gai-reader-check-url a { color: #16856d; font-size: 10.5px; font-weight: 800; }

/* ── Page one ──────────────────────────────────────────────────────────────────────────────
 *
 * Owner brief, 2026-08-29. The page this replaces led with a percentage ring and five metric
 * tiles; a reader had to do arithmetic before any meaning arrived.
 *
 * TWO ZONES, and the split carries the argument. Dark is the diagnosis - the verdict and the
 * proof of it. Light is what you do about it. A reader learns that code without being told,
 * and the light ground is what lets the four cards hold real colour: a tinted panel says
 * "this one is the gap" from across a desk, where the 3px rule a dark ground allows does not.
 *
 * SPACING IS A SCALE, not a habit. Everything below picks from --avp-s-*, tight inside a
 * group and generous between groups, so the page groups itself before it is read. The version
 * this replaces used one 22px gap everywhere, which is why it read as an even wall.
 *
 * Every colour is a token from the top of this file, so the contrast ratios measured there
 * still hold, and each tone is derived from that card's own result - green always means
 * working, red always means gap. Nothing is tinted by position.
 */

:root {
  --avp-s-1: 6px;
  --avp-s-2: 10px;
  --avp-s-3: 16px;
  --avp-s-4: 24px;
  --avp-s-5: 34px;
  --avp-s-6: 48px;

  /* Card tints. Each pairs a wash with ink measured AA ON THAT WASH, not against white, which
     is the convention the rest of this file uses. Ratios are the card's own number colour;
     the label (--avp-muted-strong) measures 5.61 to 5.78 on all four. Worst pair: 4.97. */
  --avp-tint-good:    #eefaf5;  --avp-tint-good-line:    #bfe8d8;  --avp-tint-good-ink:    #0f7a5a; /* 4.97:1 */
  --avp-tint-watch:   #fff6e8;  --avp-tint-watch-line:   #f2dcb4;  --avp-tint-watch-ink:   #92400e; /* 6.62:1 */
  --avp-tint-gap:     #fef3f2;  --avp-tint-gap-line:     #f6cfcb;  --avp-tint-gap-ink:     #b42318; /* 6.05:1 */
  --avp-tint-action:  #eff4ff;  --avp-tint-action-line:  #cbdbfa;  --avp-tint-action-ink:  #1b5fbf; /* 5.55:1 */
  --avp-tint-neutral: #f6f8fb;  --avp-tint-neutral-line: #e2e8f0;  --avp-tint-neutral-ink: #101828; /* 16.68:1 */
}

.avp-summary {
  background: var(--avp-paper);
  color: var(--avp-ink);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--avp-line);
}

/* ── The dark band: verdict, and the proof of it ────────────────────────────── */
.avp-hero {
  background: var(--avp-navy);
  color: #fff;
  padding: var(--avp-s-5) var(--avp-s-5) var(--avp-s-5);
}
.avp-hero-grid {
  margin-top: var(--avp-s-3);
  display: grid;
  /* The verdict gets the wider column: at equal widths it wrapped to six lines and swamped
     the exhibit beside it. */
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: var(--avp-s-5);
  align-items: start;
}
/* No exhibit - withheld on the public sample, or no usable question - so the verdict takes the
   whole measure rather than leaving a dead column beside it. */
.avp-hero-grid.avp-hero-solo { grid-template-columns: 1fr; }
.avp-hero-solo .avp-verdict h1 { max-width: 26ch; }

.avp-verdict h1 {
  margin: 0;
  font-size: clamp(23px, 2.65vw, 33px);
  line-height: 1.16;
  letter-spacing: -.02em;
  text-wrap: balance;
  font-weight: 800;
}
.avp-verdict h1 em {
  display: block;
  font-style: normal;
  color: var(--avp-accent-on-dark);
  margin-top: var(--avp-s-1);
}
.avp-goodnews {
  margin: var(--avp-s-4) 0 0;
  font-size: var(--avp-fs-lead);
  line-height: 1.5;
  color: #cfd8e6;
  padding-left: var(--avp-s-3);
  border-left: 3px solid var(--avp-accent-on-dark);
}

/* ── The exhibit ───────────────────────────────────────────────────────────── */
/* A real question and the real names that came back. It is the only thing on the page that is
   evidence rather than summary, so it gets the panel treatment and sits level with the claim
   it supports. */
.avp-example {
  margin: 0;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--avp-r-md);
  padding: var(--avp-s-3) var(--avp-s-3) var(--avp-s-3);
}
.avp-example figcaption,
.avp-example-lead {
  display: block;
  font-size: var(--avp-fs-micro);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #93a3ba;
}
.avp-example blockquote {
  margin: var(--avp-s-2) 0 var(--avp-s-3);
  font-size: 15.5px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border-radius: var(--avp-r-sm);
  padding: var(--avp-s-2) var(--avp-s-3);
}
.avp-example blockquote::before { content: '\201C'; }
.avp-example blockquote::after  { content: '\201D'; }
.avp-example-list {
  list-style: none;
  margin: var(--avp-s-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--avp-s-1);
}
.avp-example-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: var(--avp-s-2);
  padding: 8px var(--avp-s-2);
  border-radius: var(--avp-r-sm);
  background: rgba(255, 255, 255, .05);
  font-size: var(--avp-fs-body);
  color: #e3e9f2;
}
.avp-example-list li b {
  font-size: var(--avp-fs-small);
  color: #93a3ba;
  font-weight: 800;
  text-align: center;
}
/* The reader's own row. On a miss it is the only red thing in the panel and it is the point. */
.avp-example-you { font-weight: 700; }
.avp-example-you em { font-style: normal; font-size: var(--avp-fs-small); font-weight: 700; }
.avp-example-missed .avp-example-you {
  background: rgba(255, 143, 122, .13);
  border: 1px solid rgba(255, 143, 122, .42);
  color: #ffb3a3;
}
.avp-example-missed .avp-example-you b { color: #ff8f7a; font-size: 15px; }
.avp-example-named .avp-example-you {
  background: rgba(16, 185, 129, .13);
  border: 1px solid rgba(16, 185, 129, .42);
  color: #86efc4;
}
.avp-example-named .avp-example-you b { color: var(--avp-accent-on-dark); font-size: 15px; }
.avp-example > small {
  display: block;
  margin-top: var(--avp-s-2);
  font-size: var(--avp-fs-small);
  line-height: 1.45;
  color: #93a3ba;
}

/* ── The light band: what you do about it ──────────────────────────────────── */
.avp-body {
  padding: var(--avp-s-5);
  display: grid;
  gap: var(--avp-s-5);
}

/* ── The four cards ────────────────────────────────────────────────────────── */
/* Label, then the statement, then the number: the reader learns what is being counted before
   the count arrives. Values land on one baseline however deep the labels wrap. */
.avp-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--avp-s-3);
}
/* FLEX, not a three-row grid.
   The card grew two optional children - the head (mark and share chip) and the meter - and
   with fixed grid rows a card that has them puts its value in the row the label expects. Flex
   lets the three permanent children keep their behaviour (the sub takes the slack, so values
   land on one baseline however deep the labels wrap) while the two new ones simply are not
   there when the model has not sent them. */
.avp-card {
  border-radius: var(--avp-r-md);
  padding: var(--avp-s-3);
  display: flex;
  flex-direction: column;
  gap: var(--avp-s-1);
  min-height: 138px;
  background: var(--avp-tint-neutral);
  border: 1px solid var(--avp-tint-neutral-line);
}
.avp-card-sub { flex: 1 1 auto; }

/* The mark and the share, on one line above the label.
   Both are the SECOND ENCODING for a palette whose green and amber sit at dE 6.8 under
   protanopia, so neither is ornament: drop them and the two most-read cards differ by hue
   alone. The mark inherits the tone's ink, which is why it is never set here. */
.avp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--avp-s-2);
  min-height: 20px;
}
.avp-card-chip {
  font-size: var(--avp-fs-micro);
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The meter is the ratio as a SHAPE. It is what makes 21% and 100% differ before the digits
   have been read, and the one part of the card that survives being photocopied badly. */
.avp-card-meter {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  overflow: hidden;
  margin-top: auto;
}
.avp-card-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The mark itself. Sized in em so it tracks whatever type it sits beside, and stroked rather
   than filled so it stays legible at the 8px the print composition uses. */
.cmv2-ic {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.125em;
}
.avp-card-label {
  font-size: var(--avp-fs-micro);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--avp-muted-strong);
  line-height: 1.35;
  min-height: 2.7em;
}
.avp-card-sub { font-size: var(--avp-fs-small); color: var(--avp-muted-strong); line-height: 1.4; }
.avp-card-value {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -.024em;
  line-height: 1;
  align-self: end;
  margin-top: var(--avp-s-1);
  color: var(--avp-tint-neutral-ink);
}
/* One selector list per tone, so the value, the mark, the chip and the meter fill can never
   drift apart into four different greens. The tint inks are the audited ones: every ratio in
   the token block above is against its own tint, not against white. */
.avp-card-good    { background: var(--avp-tint-good);   border-color: var(--avp-tint-good-line); }
.avp-card-good    .avp-card-value, .avp-card-good .avp-card-head,
.avp-card-good    .avp-card-meter { color: var(--avp-tint-good-ink); }
.avp-card-watch   { background: var(--avp-tint-watch);  border-color: var(--avp-tint-watch-line); }
.avp-card-watch   .avp-card-value, .avp-card-watch .avp-card-head,
.avp-card-watch   .avp-card-meter { color: var(--avp-tint-watch-ink); }
.avp-card-gap     { background: var(--avp-tint-gap);    border-color: var(--avp-tint-gap-line); }
.avp-card-gap     .avp-card-value, .avp-card-gap .avp-card-head,
.avp-card-gap     .avp-card-meter { color: var(--avp-tint-gap-ink); }
.avp-card-action  { background: var(--avp-tint-action); border-color: var(--avp-tint-action-line); }
.avp-card-action  .avp-card-value, .avp-card-action .avp-card-head,
.avp-card-action  .avp-card-meter { color: var(--avp-tint-action-ink); }
/* The neutral card is the DENOMINATOR, so its meter is always full - and at full width in the
   value's near-black it became the heaviest mark on page one while being the least important
   card there. The mark and chip keep the readable ink; only the bar drops to the muted tone, so
   it still reads as "all of it" without out-shouting the two cards that carry the finding. */
.avp-card-neutral .avp-card-head { color: var(--avp-tint-neutral-ink); }
.avp-card-neutral .avp-card-meter { color: var(--avp-muted-strong); }

/* ── Where you were placed, at screen size ─────────────────────────────────────
   The strip's own rules live in citation-map-print-v2.css, sized for an A4 sheet
   where a block is 19px and the caption is 9.5px. The workspace loads that sheet
   too, so the strip already renders here - just small enough to look like a
   footnote next to the figures it explains.

   Scoped to #cmv2-root, which is the dashboard's own composition, so it cannot
   reach inside #cmv2-print and quietly resize the printed document. A media query
   would also work; this is narrower and states which surface it is for. */
#cmv2-root .cmv2-posstrip { margin-top: var(--avp-s-4); padding-top: var(--avp-s-3); }
#cmv2-root .cmv2-posstrip-head b { font-size: var(--avp-fs-body); }
#cmv2-root .cmv2-posstrip-head span { font-size: var(--avp-fs-small); margin-top: 3px; }
#cmv2-root .cmv2-posstrip-chips { gap: 4px; margin-top: var(--avp-s-2); }
#cmv2-root .cmv2-posstrip-chips b {
  width: 26px;
  height: 28px;
  border-radius: 5px;
  font-size: 12px;
}
#cmv2-root .cmv2-posstrip-note { font-size: var(--avp-fs-small); margin-top: var(--avp-s-2); }

/* ── What this means / what we did ─────────────────────────────────────────── */
.avp-explain { display: grid; grid-template-columns: 1.12fr 1fr; gap: var(--avp-s-3); }
.avp-explain-block {
  background: var(--avp-paper-3);
  border: 1px solid var(--avp-line-soft);
  border-radius: var(--avp-r-md);
  padding: var(--avp-s-4);
}
.avp-explain-block h2 {
  margin: 0 0 var(--avp-s-2);
  font-size: var(--avp-fs-micro);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--avp-accent);
}
.avp-explain-block p {
  margin: 0 0 var(--avp-s-2);
  font-size: var(--avp-fs-body);
  line-height: 1.6;
  color: var(--avp-ink-soft);
}
.avp-explain-block p:last-child { margin-bottom: 0; }
/* The first paragraph of each block is the point of the block. */
.avp-explain-block p:first-of-type { color: var(--avp-ink); font-weight: 700; font-size: var(--avp-fs-lead); line-height: 1.45; }

/* ── What the rest of the Playbook shows ───────────────────────────────────── */
.avp-next { border-top: 1px solid var(--avp-line); padding-top: var(--avp-s-4); }
.avp-next h2,
.avp-detail-item span,
.avp-method span {
  font-size: var(--avp-fs-micro);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.avp-next h2 { margin: 0 0 var(--avp-s-3); color: var(--avp-accent); }
.avp-next ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--avp-s-2) var(--avp-s-5);
}
.avp-next li {
  font-size: var(--avp-fs-body); line-height: 1.45; color: var(--avp-ink-soft);
  padding-left: 20px; position: relative;
}
.avp-next li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--avp-accent);
}

/* ── The detail strip, and the method ──────────────────────────────────────── */
/* The secondary facts, demoted rather than deleted: the rated-mention row is the only place
   the sentiment denominator is stated, and a rate without its denominator is the failure the
   report model exists to prevent. */
.avp-detail {
  border-top: 1px solid var(--avp-line);
  padding-top: var(--avp-s-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
  gap: var(--avp-s-3) var(--avp-s-4);
}
.avp-detail-item { display: grid; gap: 3px; align-content: start; }
.avp-detail-item span { color: var(--avp-muted-strong); line-height: 1.3; }
.avp-detail-item strong { font-size: 18px; font-weight: 800; letter-spacing: -.012em; color: var(--avp-ink); }
.avp-detail-item small { font-size: var(--avp-fs-small); line-height: 1.4; color: var(--avp-muted); }

.avp-method {
  border-top: 1px solid var(--avp-line);
  padding-top: var(--avp-s-3);
  display: grid;
  gap: var(--avp-s-1);
}
.avp-method span { display: block; color: var(--avp-muted); margin-bottom: 4px; }
.avp-method small,
.avp-method-scope {
  display: block; font-size: var(--avp-fs-small); line-height: 1.55; color: var(--avp-muted-strong); margin: 0;
}
.avp-method-note { margin: 0; font-size: var(--avp-fs-small); color: var(--avp-accent); font-weight: 700; }

/* ── Narrow screens ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .avp-hero-grid { grid-template-columns: 1fr; gap: var(--avp-s-4); }
  .avp-cards { grid-template-columns: repeat(2, 1fr); }
  .avp-explain { grid-template-columns: 1fr; }
  .avp-next ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .avp-hero, .avp-body { padding: var(--avp-s-4) var(--avp-s-3); }
  .avp-cards { grid-template-columns: 1fr; }
  .avp-card { min-height: 0; }
  .avp-card-label { min-height: 0; }
  .avp-next ul { grid-template-columns: 1fr; }
}

/* ── The consequence chain ─────────────────────────────────────────────────────────────────
 * Three steps with arrows between them. A state ("you are missed in discovery") is not the same
 * as a consequence ("so competitors get chosen first"), and a layperson needs the second. Three
 * boxes make the causal link visible at a glance where three paragraphs make them reconstruct
 * it. The prose beneath still says it in full for a reader who wants that.
 *
 * The arrow is a pseudo-element on the gap between steps, so it cannot be read by a screen
 * reader as content and cannot survive into a single-column layout where it would point nowhere.
 */
.avp-chain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--avp-s-5);
  position: relative;
}
.avp-chain-step {
  background: var(--avp-paper-3);
  border: 1px solid var(--avp-line-soft);
  border-left: 3px solid var(--avp-line);
  border-radius: var(--avp-r-md);
  padding: var(--avp-s-3);
  display: grid;
  gap: 5px;
  align-content: start;
  position: relative;
}
.avp-chain-step + .avp-chain-step::before {
  content: "";
  position: absolute;
  left: calc(var(--avp-s-5) / -2 - 5px);
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--avp-line);
  border-right: 2px solid var(--avp-line);
  transform: rotate(45deg);
}
.avp-chain-step b {
  font-size: var(--avp-fs-lead);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--avp-ink);
}
.avp-chain-step span { font-size: var(--avp-fs-small); line-height: 1.5; color: var(--avp-muted-strong); }
.avp-chain-good { border-left-color: var(--avp-accent); background: var(--avp-tint-good); border-color: var(--avp-tint-good-line); }
.avp-chain-good b { color: var(--avp-tint-good-ink); }
.avp-chain-gap  { border-left-color: var(--avp-danger); background: var(--avp-tint-gap); border-color: var(--avp-tint-gap-line); }
.avp-chain-gap b { color: var(--avp-tint-gap-ink); }

@media (max-width: 1000px) {
  .avp-chain { grid-template-columns: 1fr; gap: var(--avp-s-2); }
  .avp-chain-step + .avp-chain-step::before { display: none; }
}

/* ── The four-question spine ───────────────────────────────────────────────────────────────
 * The whole product answers four questions, and this is where a reader decides whether to keep
 * going. Question in the ink colour and weight of a heading, answer beneath it in body colour,
 * so the four questions scan as a list on their own and the answers are there for whoever
 * slows down.
 */
.avp-spine {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--avp-s-3) var(--avp-s-5);
}
.avp-spine > div {
  padding-left: var(--avp-s-3);
  border-left: 2px solid var(--avp-accent-line);
}
.avp-spine dt {
  font-size: var(--avp-fs-lead);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: var(--avp-ink);
}
.avp-spine dd {
  margin: 4px 0 0;
  font-size: var(--avp-fs-body);
  line-height: 1.5;
  color: var(--avp-muted-strong);
}
@media (max-width: 1000px) { .avp-spine { grid-template-columns: 1fr; } }

/* ── Ticking an action off ─────────────────────────────────────────────────────────────────
 * The dashboard owns the ticking; the printed report shows the same state as a record and
 * points back here. A paper tick cannot update the copy everyone else reads.
 */
.cmv2-tick {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--avp-line);
  border-radius: var(--avp-r-pill);
  background: var(--avp-paper);
  font-size: var(--avp-fs-small);
  font-weight: 700;
  color: var(--avp-muted-strong);
  cursor: pointer;
  white-space: nowrap;
}
.cmv2-tick input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--avp-accent); }
.cmv2-tick:hover { border-color: var(--avp-accent-line); }
.cmv2-tick.is-done { background: var(--avp-tint-good); border-color: var(--avp-tint-good-line); color: var(--avp-tint-good-ink); }
/* A share link can read the ticks and never write them, which the endpoint enforces. Saying so
   before the click is kinder than a refusal after it. */
.cmv2-tick input:disabled { cursor: not-allowed; }
.cmv2-tick:has(input:disabled) { opacity: .55; cursor: not-allowed; }
/* A completed action stays legible and stays in place: struck through would make the one thing
   the customer just achieved the hardest thing on the page to read. */
.cmv2-priority.is-done { border-color: var(--avp-tint-good-line); background: linear-gradient(0deg, var(--avp-tint-good), var(--avp-tint-good)) padding-box; }
.cmv2-priority.is-done .cmv2-rank { background: var(--avp-accent); color: #fff; }