/* Custom overrides — keep minimal; Bootstrap handles the rest. */

/* VIN-STORY-186: wizard step 4's selected-service description callout —
   distinct colour + subtle border so it reads as supporting detail, not
   another form control. */
.service-desc {
  margin: 0.25rem 0 0.75rem 1.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #eef6fb;
  border: 1px solid #bcdcf0;
  border-left: 3px solid #4a90c4;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: #1c4d6b;
}

/* VIN-STORY-202: wizard step breadcrumb, rebuilt as clickable chevron/arrow
   segments (clip-path, no images) — current step highlighted, completed
   steps visually distinct from upcoming. */
.wizard-steps {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard-steps__item {
  flex: 1 1 0;
  min-width: 0;
}

.wizard-steps__item a,
.wizard-steps__item > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  margin-left: -0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}

.wizard-steps__item:first-child a,
.wizard-steps__item:first-child > span {
  margin-left: 0;
  padding-left: 0.85rem;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

.wizard-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  font-size: 0.65rem;
}

.wizard-steps__item--upcoming a {
  background-color: #e9ecef;
  color: #6c757d;
}
.wizard-steps__item--upcoming a:hover {
  background-color: #dde1e5;
  color: #495057;
}
.wizard-steps__item--upcoming .wizard-steps__num {
  background-color: #ced4da;
  color: #495057;
}

.wizard-steps__item--completed a {
  background-color: #cfe2ff;
  color: #084298;
}
.wizard-steps__item--completed a:hover {
  background-color: #bcd5fb;
}
.wizard-steps__item--completed .wizard-steps__num {
  background-color: #084298;
  color: #fff;
}

.wizard-steps__item--current > span {
  background-color: #0d6efd;
  color: #fff;
}
.wizard-steps__item--current .wizard-steps__num {
  background-color: #fff;
  color: #0d6efd;
}

@media (max-width: 576px) {
  .wizard-steps__item a,
  .wizard-steps__item > span {
    padding: 0.5rem 0.35rem 0.5rem 1.4rem;
    font-size: 0.7rem;
  }
  .wizard-steps__label {
    display: none;
  }
}

/* VIN-STORY-204: wizard step 4 pricing restyle. .pricing-savings is
   deliberately italic/small — supporting information, not the headline.
   .pricing-final is the opposite: the visually dominant block, set apart in
   its own bordered panel with large bold figures, using real heading
   elements (not just bigger table text) so the emphasis survives for screen
   readers and print, not just sighted on-screen scanning. VIN-STORY-219:
   the line's colour moved from muted grey to Bootstrap's own danger
   variable (matching the .text-danger class on its <em> in step-4.html) so
   the badge icon, which inherits colour via fill="currentColor", follows
   it too, rather than a raw hex. */
.pricing-savings {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.pricing-savings__badge {
  color: var(--bs-danger);
  flex-shrink: 0;
}

.pricing-final {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
}
.pricing-final__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
}
.pricing-final__amount {
  font-size: 1.85rem;
  font-weight: 700;
  color: #0d3d80;
}
.pricing-final__unit {
  font-size: 1rem;
  font-weight: 500;
  color: #6c757d;
  margin-left: 0.2rem;
}

/* ── VIN-STORY-274/275: in-app audit dashboard visuals ──────────────────────
   The overall-readiness donut, finding-severity meter and cross-domain radar
   shown on /onboard and wizard step 6. Score-band status ramp reused from the
   in-app score bars (Bootstrap success/warning/danger) so the whole dashboard
   speaks one status language; the trio is CVD-separated (worst adjacent ΔE
   51.5) and every value is labelled, which is what a status ramp needs.
   Editorial report palette (report.html) is deliberately not pulled in here —
   unifying app and report palettes is VIN-STORY-279. Pure CSS/SVG, print-safe. */
:root {
  --vin-band-danger: #dc3545;
  --vin-band-warning: #ffc107;
  --vin-band-success: #198754;
  --vin-band-info: #6c757d;
  --vin-track: #e9ecef;
}

.vin-audit-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
}

/* Overall-readiness donut */
.vin-donut { flex: 0 0 auto; }
.vin-donut svg { display: block; }
.vin-donut-value { font-size: 2.1rem; font-weight: 700; fill: #212529; }
.vin-donut-cap { font-size: 0.62rem; fill: #6c757d; letter-spacing: 0.08em; text-transform: uppercase; }
.vin-donut-label { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; margin-top: 0.35rem; }

/* Finding-severity meter */
.vin-sev { flex: 1 1 260px; min-width: 220px; }
.vin-sev-title { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.vin-sev-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--vin-track);
  gap: 2px; /* 2px surface gap between stacked fills, per the dataviz spec */
}
.vin-sev-seg { display: block; min-width: 3px; }
.vin-sev-seg--high { background: var(--vin-band-danger); }
.vin-sev-seg--medium { background: var(--vin-band-warning); }
.vin-sev-seg--low { background: var(--vin-band-success); }
.vin-sev-seg--info { background: var(--vin-band-info); }
.vin-sev-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; padding: 0; margin: 0.6rem 0 0; font-size: 0.8rem; color: #495057; }
.vin-sev-legend li { display: flex; align-items: center; gap: 0.35rem; }
.vin-sev-dot { width: 0.7rem; height: 0.7rem; border-radius: 2px; flex-shrink: 0; }

/* Cross-domain readiness radar */
.vin-radar { flex: 0 0 auto; }
.vin-radar svg { display: block; max-width: 100%; height: auto; }
.vin-radar-axis-label { font-size: 9px; font-weight: 600; fill: var(--area, #495057); }
.vin-radar-axis-label--muted { fill: #adb5bd; }
.vin-radar-ring { fill: none; stroke: #e9ecef; stroke-width: 1; }
.vin-radar-spoke { stroke: #dee2e6; stroke-width: 1; }
.vin-radar-area { fill: rgba(13, 110, 253, 0.15); stroke: #0d6efd; stroke-width: 2; stroke-linejoin: round; }
.vin-radar-vertex { fill: #0d6efd; }

@media (prefers-color-scheme: dark) {
  /* left on light surfaces deliberately — the CRM operator UI is light-only
     today (VIN-STORY-279 owns any dark-mode system); tokens declared here so a
     future dark pass has one place to override. */
  :root { --vin-track: #e9ecef; }
}

/* VIN-STORY-276: competitor-matrix legend keyed to the numbered plot points.
   Styled for the in-app views (report.html/rfp.html carry their own CSS and
   fall back to a plain numbered list, which still reads). */
.vin-matrix-legend {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.2rem 1rem;
  font-size: 0.8rem;
  color: #495057;
}
.vin-matrix-legend li { display: flex; align-items: center; gap: 0.45rem; }
.vin-matrix-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bs-secondary, #6c757d);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
}
.vin-matrix-num--primary { background: var(--bs-primary, #0d6efd); }

/* ── VIN-STORY-307: growth-tab worm charts + sparklines + delta tiles ───────
   Same idiom as .vin-radar above: server-computed SVG geometry, plain CSS. */
.vin-worm { flex: 0 0 auto; }
.vin-worm svg { display: block; max-width: 100%; height: auto; }
.vin-worm-grid { stroke: #e9ecef; stroke-width: 1; }
.vin-worm-grid-label { font-size: 8px; fill: #adb5bd; }
.vin-worm-line { fill: none; stroke: #0d6efd; stroke-width: 2; stroke-linejoin: round; }
.vin-worm-dot { fill: #0d6efd; }
.vin-worm-dot--latest { fill: #0d6efd; stroke: #fff; stroke-width: 1.5; }
.vin-worm-empty { font-size: 0.85rem; color: #6c757d; padding: 1rem 0; text-align: center; }

.vin-sparkline { display: inline-block; }
.vin-sparkline svg { display: block; }
.vin-sparkline-line { fill: none; stroke: #6c757d; stroke-width: 1.5; }
.vin-sparkline-dot { fill: #6c757d; }
.vin-sparkline-dot--latest { fill: #212529; }
.vin-sparkline-label { font-size: 0.68rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.15rem; }
.vin-sparkline-value { font-size: 0.85rem; font-weight: 600; color: #212529; margin-left: 0.35rem; }

.vin-delta-tile { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 1rem; font-size: 0.8rem; font-weight: 600; }
.vin-delta-tile--up { background: rgba(25, 135, 84, 0.12); color: #146c43; }
.vin-delta-tile--down { background: rgba(220, 53, 69, 0.12); color: #b02a37; }
.vin-delta-tile--flat { background: rgba(108, 117, 125, 0.12); color: #495057; }
.vin-delta-tile-label { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.75; }

/* ── VIN-STORY-311: portfolio KPI strip (operator dashboard) ─────────────── */
.vin-portfolio-skill-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vin-portfolio-skill-badge { display: inline-flex; flex-direction: column; align-items: center; padding: 0.3rem 0.6rem; border: 1px solid #e9ecef; border-radius: 0.4rem; min-width: 4.5rem; }
.vin-portfolio-skill-badge-value { font-size: 1.1rem; font-weight: 700; color: #212529; }
.vin-portfolio-skill-badge-label { font-size: 0.62rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.02em; }

/* ── VIN-STORY-280: dashboard KPI stat-tiles + pipeline bar ────────────────── */
.vin-stat {
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  background: #fff;
  height: 100%;
}
.vin-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: #212529; }
.vin-stat-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #6c757d; margin-top: 0.15rem; }

.vin-pipeline-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: #e9ecef;
  gap: 2px; /* 2px surface gap between segments, per the dataviz spec */
}
.vin-pipeline-bar > span { display: block; min-width: 3px; }
.vin-pipeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  list-style: none;
  padding: 0;
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: #495057;
}
.vin-pipeline-legend li { display: flex; align-items: center; gap: 0.4rem; }
.vin-pipeline-dot { width: 0.7rem; height: 0.7rem; border-radius: 2px; flex-shrink: 0; }

/* ── VIN-STORY-332: Alpine show/hide vs Bootstrap display utilities ─────────
   Alpine's x-show toggles the element's inline `display` (no !important),
   but Bootstrap's d-* utilities are all !important — so a d-inline-flex on
   an x-show element stays visible forever. Every note/image/service
   delete-confirm had this bug: the "Delete this note?" strip rendered
   expanded from page load. These are the non-!important equivalents for
   Alpine-toggled elements, plus the standard [x-cloak] rule (referenced by
   templates since VIN-STORY-237 but never actually defined) that hides
   pre-init flashes. */
[x-cloak] { display: none !important; }
.vin-toggle-inline-flex { display: inline-flex; }
.vin-toggle-block { display: block; }

/* ── VIN-STORY-335: condensed client-details card (summary page) ────────────
   The Contact & presence column ran far taller than Profile / Projected
   budget, wasting the space beneath them. Smaller type + tight dl rows +
   the social links folded into a single "Links" row keep the three columns
   in balance. */
.vin-details dl { font-size: 0.85rem; margin-bottom: 0; }
.vin-details dt, .vin-details dd { margin-bottom: 0.125rem; line-height: 1.35; }
.vin-details .vin-details-note { font-size: 0.8rem; }
.vin-details-links a { white-space: nowrap; }

/* ── VIN-STORY-336: portal dashboard data-visualisation layer ──────────────── */

/* Score-history chart (D3, public/js/portal-charts.js) */
.vin-chart { position: relative; }
.vin-chart svg { display: block; width: 100%; height: auto; }
.vin-chart-tip {
  position: absolute;
  pointer-events: none;
  background: #212529;
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.12s ease;
  max-width: 240px;
  z-index: 10;
}
.vin-chart-tip strong { font-weight: 600; }
.vin-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; padding: 0; margin: 0.5rem 0 0; list-style: none; }
.vin-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #495057;
  border: 1px solid #dee2e6;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  background: #fff;
  cursor: pointer;
}
.vin-legend-chip[aria-pressed="false"] { opacity: 0.4; }
.vin-legend-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; flex-shrink: 0; }

/* AI-assistant visibility (query × engine grid) */
.vin-ai-tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.vin-ai-tile {
  flex: 1 1 160px;
  min-width: 150px;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.6rem 0.75rem;
}
.vin-ai-tile-engine { font-size: 0.78rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; }
.vin-ai-tile-stat { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.vin-ai-tile-stat .vin-ai-of { font-size: 0.8rem; font-weight: 400; color: #6c757d; }
.vin-ai-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #e9ecef; margin-top: 0.4rem; }
.vin-ai-bar span { display: block; }
.vin-ai-seg--cited { background: var(--vin-band-success); }
.vin-ai-seg--mentioned { background: var(--vin-band-warning); }
.vin-ai-grid td, .vin-ai-grid th { vertical-align: middle; }
.vin-ai-grid .vin-ai-query { max-width: 340px; }
.vin-ai-dot {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  vertical-align: -0.1em;
}
.vin-ai-dot--cited { background: var(--vin-band-success); }
.vin-ai-dot--mentioned { background: var(--vin-band-warning); }
.vin-ai-dot--absent { background: #dee2e6; }
.vin-ai-dot--untested { background: transparent; border: 1px dashed #ced4da; }

/* Competitor follower bars — server-rendered, width via --w custom property */
.vin-cmp-channel { margin-bottom: 1rem; }
.vin-cmp-channel:last-child { margin-bottom: 0; }
.vin-cmp-channel-label { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.vin-cmp-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.82rem; }
.vin-cmp-name { flex: 0 0 34%; max-width: 34%; text-align: right; color: #495057; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vin-cmp-row--you .vin-cmp-name { font-weight: 700; color: var(--bs-primary); }
.vin-cmp-track { flex: 1 1 auto; background: #f1f3f5; border-radius: 3px; height: 14px; overflow: hidden; }
.vin-cmp-bar {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: #adb5bd;
  border-radius: 3px;
  animation: vin-grow 0.7s ease-out;
}
.vin-cmp-row--you .vin-cmp-bar { background: var(--bs-primary); }
.vin-cmp-count { flex: 0 0 3.5rem; font-variant-numeric: tabular-nums; color: #495057; }
@keyframes vin-grow { from { width: 0; } }

/* Per-dimension mini-bars on the area score cards */
.vin-dim { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; margin-bottom: 0.25rem; }
.vin-dim-label { flex: 0 0 46%; max-width: 46%; color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vin-dim-track { flex: 1 1 auto; height: 8px; background: #f1f3f5; border-radius: 4px; overflow: hidden; }
.vin-dim-fill { display: block; height: 100%; border-radius: 4px; animation: vin-grow 0.7s ease-out; }
.vin-dim-fill--danger { background: var(--vin-band-danger); }
.vin-dim-fill--warning { background: var(--vin-band-warning); }
.vin-dim-fill--success { background: var(--vin-band-success); }
.vin-dim-val { flex: 0 0 2rem; text-align: right; font-variant-numeric: tabular-nums; color: #495057; }

/* Priority-issue severity accent */
.vin-issue { border-left: 4px solid transparent; }
.vin-issue--high { border-left-color: var(--vin-band-danger); }
.vin-issue--medium { border-left-color: var(--vin-band-warning); }
.vin-issue--low { border-left-color: #adb5bd; }

@media (prefers-reduced-motion: reduce) {
  .vin-cmp-bar, .vin-dim-fill { animation: none; }
}

/* Series groups fade via CSS (not d3.transition — rAF-throttle-proof). */
.vin-series { transition: opacity 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .vin-series { transition: none; } }

/* ── VIN-STORY-337: portal viz round 2 ─────────────────────────────────────── */

/* AI-assistant logo strip (partials/ai-engine-logos.html) */
.vin-ai-logos { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: center; margin-bottom: 1rem; }
.vin-ai-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.vin-ai-logo svg { display: block; }
.vin-ai-logo-name { font-size: 0.72rem; font-weight: 600; color: #6c757d; letter-spacing: 0.02em; }

/* Growth-plan tiles — counts + programme language, never the action text */
.vin-plan-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem; }
.vin-plan-tile {
  border: 1px solid #dee2e6;
  border-left: 4px solid var(--bs-primary);
  border-radius: 0.375rem;
  padding: 0.75rem 0.9rem;
  background: #fff;
}
.vin-plan-count { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.vin-plan-programme { font-weight: 600; font-size: 0.9rem; margin-top: 0.15rem; }
.vin-plan-area { font-size: 0.75rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; }

/* Share-of-audience legend */
.vin-share-legend { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.vin-share-legend li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.vin-share-legend--you .vin-share-name { font-weight: 700; color: var(--bs-primary); }
.vin-share-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vin-share-pct { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Positioning-matrix legend, readable size (the names ARE the content) */
.vin-matrix-legend--lg { font-size: 0.95rem; }
.vin-matrix-legend--lg li { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.vin-matrix-legend-item--you { font-weight: 700; color: var(--bs-primary); }

/* ── VIN-STORY-338: the portal's area colour system + section identity ───────
   One colour per audit area, used EVERYWHERE that area appears — chart
   lines (portal-charts.js SERIES_COLOURS mirrors these hex values; change
   both together), area cards, issue/strength chips, growth-plan tiles and
   the audit timeline — so the dashboard reads as one designed system. */
:root {
  --vin-area-seo: #2563eb;
  --vin-area-aeo: #7c3aed;
  --vin-area-digital-presence: #0d9488;
  --vin-area-brand: #d97706;
  --vin-area-competitor: #db2777;
  --vin-area-other: #64748b;
}
.vin-area--seo { --area: var(--vin-area-seo); }
.vin-area--aeo { --area: var(--vin-area-aeo); }
.vin-area--digital_presence { --area: var(--vin-area-digital-presence); }
.vin-area--brand { --area: var(--vin-area-brand); }
.vin-area--competitor { --area: var(--vin-area-competitor); }
.vin-area--other { --area: var(--vin-area-other); }

.vin-area-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--area, var(--vin-area-other));
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  white-space: nowrap;
}

.vin-area-card { border-top: 3px solid var(--area, var(--vin-area-other)) !important; }
.vin-plan-tile { border-left-color: var(--area, var(--bs-primary)); }

/* Icon-led, colour-tinted section headers — every card announces itself. */
.vin-sec {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  border-left: 4px solid var(--sec, var(--bs-primary));
  background: linear-gradient(90deg, color-mix(in srgb, var(--sec, #0d6efd) 13%, #ffffff), #ffffff 72%);
}
.vin-sec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--sec, var(--bs-primary));
  color: #fff;
  flex-shrink: 0;
}
.vin-sec-icon svg { width: 15px; height: 15px; }
.vin-sec--overview { --sec: #0d6efd; }
.vin-sec--progress { --sec: #2563eb; }
.vin-sec--scores { --sec: #6f42c1; }
.vin-sec--reach { --sec: #0891b2; }
.vin-sec--ai { --sec: #10a37f; }
.vin-sec--competitive { --sec: #db2777; }
.vin-sec--plan { --sec: #fd7e14; }
.vin-sec--audits { --sec: #495057; }
.vin-sec--attention { --sec: #dc3545; }
.vin-sec--working { --sec: #198754; }

/* Audit journey timeline — replaces the plain history table. */
.vin-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.vin-timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #e9ecef;
}
.vin-timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0;
  flex-wrap: wrap;
}
.vin-timeline-dot {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--area, var(--vin-area-other));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px #fff;
}
.vin-timeline-dot svg { width: 18px; height: 18px; }
.vin-timeline-title { font-weight: 600; line-height: 1.3; }
.vin-timeline-date { color: #6c757d; font-size: 0.82rem; }

/* Score pills, banded like every other verdict colour on the page. */
.vin-score-pill {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  font-size: 0.85rem;
  color: #fff;
  white-space: nowrap;
}
.vin-score-pill--danger { background: var(--vin-band-danger); }
.vin-score-pill--warning { background: var(--vin-band-warning); color: #212529; }
.vin-score-pill--success { background: var(--vin-band-success); }
.vin-score-pill--none { background: #e9ecef; color: #6c757d; }

/* Strength rows share the issues' edge-accent idiom, in green. */
.vin-issue--working { border-left-color: var(--vin-band-success); }

/* ── VIN-STORY-340: reach band, funnel, gauges, and density fixes ───────────── */

/* Compress area-card summaries — the score/dimensions/trend already carry
   the meaning, so the prose is capped to two lines (full text on hover). */
.vin-area-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reach band: funnel + reputation + audience, one dense row of tiles. */
/* VIN-STORY-342: flex (not grid) so a lone tile keeps a sensible width and
   left-aligns instead of stretching across the whole card. */
.vin-reach { display: flex; flex-wrap: wrap; gap: 1rem; }
.vin-reach-tile { flex: 1 1 240px; max-width: 380px; border: 1px solid #e9ecef; border-radius: 0.5rem; padding: 1rem; display: flex; flex-direction: column; }
.vin-reach-tile--empty { border-style: dashed; background: #fbfbfc; }
.vin-reach-tile h3 { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.75rem; }

/* Marketing funnel — three descending trapezoid bars, big count + label. */
.vin-funnel { display: flex; flex-direction: column; gap: 0.35rem; }
.vin-funnel-stage { position: relative; }
.vin-funnel-bar {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  color: #fff;
  border-radius: 4px;
  margin: 0 auto;
  transition: width 0.6s ease;
}
.vin-funnel-stage--1 .vin-funnel-bar { background: #2563eb; }
.vin-funnel-stage--2 .vin-funnel-bar { background: #7c3aed; }
.vin-funnel-stage--3 .vin-funnel-bar { background: #0d9488; }
.vin-funnel-stage--3.vin-funnel-zero .vin-funnel-bar { background: #adb5bd; }
.vin-funnel-count { font-weight: 700; font-size: 1.15rem; }
.vin-funnel-label { margin-left: 0.5rem; font-size: 0.8rem; opacity: 0.95; }
.vin-funnel-drop { font-size: 0.75rem; color: #6c757d; text-align: center; }

/* Reputation stars — a five-star row with a partial fill via clip. */
.vin-stars { position: relative; display: inline-block; font-size: 1.5rem; line-height: 1; letter-spacing: 2px; }
.vin-stars-bg { color: #dee2e6; }
.vin-stars-fg { color: #f5a623; position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
.vin-rep-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.vin-rep-sub { color: #6c757d; font-size: 0.85rem; }

/* Audience reach — big total + per-channel micro-rows. */
.vin-aud-total { font-size: 2rem; font-weight: 700; line-height: 1; }
.vin-aud-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: #495057; margin-top: 0.25rem; }
.vin-aud-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Semicircle gauge (AEO rates) — value in the arc, band-coloured. */
.vin-gauge { text-align: center; }
.vin-gauge svg { display: block; margin: 0 auto; }
.vin-gauge-value { font-size: 1.5rem; font-weight: 700; fill: #212529; }
.vin-gauge-label { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.15rem; }
.vin-gauge-sub { font-size: 0.75rem; color: #6c757d; }

/* Competitive sub-panels — the positioning matrix now sits in a real card
   with padding (VIN-STORY-340 fix), matching the other two sub-sections. */
.vin-cmp-panel { border: 1px solid #e9ecef; border-radius: 0.5rem; padding: 1rem; height: 100%; }
.vin-cmp-panel-title { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.75rem; }

/* Matrix legend as proper chips (not bare blue text) — numbered marker +
   name pill, "you" a solid primary chip. */
/* VIN-STORY-343: bigger chips, spread to fill the column so the legend's
   height matches the scatter beside it. */
.vin-matrix-legend--chips {
  display: flex; flex-direction: column; justify-content: space-evenly;
  gap: 0.5rem; width: 100%; margin: 0;
}
.vin-matrix-legend--chips li {
  display: flex; align-items: center; gap: 0.6rem;
  background: #f8f9fa; border-radius: 999px; padding: 0.45rem 1rem 0.45rem 0.45rem;
  font-size: 1.02rem; color: #212529;
}
.vin-matrix-legend--chips .vin-matrix-num { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
.vin-matrix-legend--chips li.vin-matrix-legend-item--you { background: color-mix(in srgb, var(--bs-primary) 14%, #fff); color: var(--bs-primary); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .vin-funnel-bar { transition: none; } }

/* ── VIN-STORY-341: 4-tier SCORE bands + category identity on cards ──────────
   Score performance colour (scoreBand() global): <20 red, <35 amber, <75
   sky-blue, ≥75 green. Sky-blue (not the indigo category/primary blue) so a
   page full of mid-band scores stays legible against category-blue SEO and
   the primary buttons. Kept separate from --vin-band-* (severity). */
:root {
  --vin-sband-red: #e5484d;
  --vin-sband-amber: #f5a623;
  --vin-sband-blue: #0ea5e9;
  --vin-sband-green: #1fa971;
}
.vin-sband--red { background: var(--vin-sband-red); }
.vin-sband--amber { background: var(--vin-sband-amber); }
.vin-sband--blue { background: var(--vin-sband-blue); }
.vin-sband--green { background: var(--vin-sband-green); }

/* Score sub-score bars now band by value (was danger/warning/success). */
.vin-dim-fill--red { background: var(--vin-sband-red); }
.vin-dim-fill--amber { background: var(--vin-sband-amber); }
.vin-dim-fill--blue { background: var(--vin-sband-blue); }
.vin-dim-fill--green { background: var(--vin-sband-green); }

/* Timeline score pills, banded by score. */
.vin-score-pill--red { background: var(--vin-sband-red); }
.vin-score-pill--amber { background: var(--vin-sband-amber); color: #212529; }
.vin-score-pill--blue { background: var(--vin-sband-blue); }
.vin-score-pill--green { background: var(--vin-sband-green); }

/* VIN-STORY-341 (item 4): the area card carries a light gradient of its own
   category colour (identity), while the donut/bars inside carry the score
   band (performance) — two orthogonal colour systems, kept from muddying by
   a very light tint here (7% → white). */
.vin-area-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--area, #64748b) 7%, #fff), #fff 62%);
}

/* Semicircle gauge value colour follows the score band. */
.vin-gauge-value--red { fill: var(--vin-sband-red); }
.vin-gauge-value--amber { fill: var(--vin-sband-amber); }
.vin-gauge-value--blue { fill: var(--vin-sband-blue); }
.vin-gauge-value--green { fill: var(--vin-sband-green); }

/* ── VIN-STORY-341: funnel key, accordion, timeline track, bigger logos ────── */

/* Funnel SVG + key (item 3) */
.vin-reach-tile > svg { display: block; margin: 0 auto; }
.vin-funnel-key { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.8rem; }
.vin-funnel-key li { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.15rem; color: #495057; }
.vin-funnel-key-dot { width: 0.7rem; height: 0.7rem; border-radius: 2px; flex-shrink: 0; }

/* Bigger, more prominent AI-assistant logos (item 5) */
.vin-ai-logos { gap: 1.4rem 2rem; }
.vin-ai-logos svg { width: 38px; height: 38px; }
.vin-ai-logo-name { font-size: 0.8rem; }

/* Attention accordion (item 8) — native <details>, no JS */
.vin-acc { width: 100%; }
.vin-acc-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
}
.vin-acc-summary::-webkit-details-marker { display: none; }
.vin-acc-chev { color: #adb5bd; font-size: 1.15rem; line-height: 1; transition: transform 0.15s ease; flex-shrink: 0; }
.vin-acc[open] .vin-acc-chev { transform: rotate(90deg); }
.vin-acc-title { font-weight: 600; }
.vin-acc-summary:hover { background: #f8f9fa; }
.vin-acc-body { padding: 0 1rem 0.85rem 2.1rem; }
@media (prefers-reduced-motion: reduce) { .vin-acc-chev { transition: none; } }

/* Audit-timeline score track (item 7) — fills the vacant middle */
.vin-timeline-head { flex: 0 0 auto; width: 190px; min-width: 150px; }
.vin-timeline-track {
  flex: 1 1 auto;
  min-width: 120px;
  position: relative;
  height: 10px;
  background: #f1f3f5;
  border-radius: 5px;
}
.vin-timeline-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; opacity: 0.85; }
.vin-timeline-mark {
  position: absolute; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.vin-timeline-track--empty { background: transparent; display: flex; align-items: center; }

/* Progress-chart goal dot — a gentle pulse to read as "aspiration". */
.vin-goal-dot { animation: vin-goal-pulse 2.4s ease-in-out infinite; }
@keyframes vin-goal-pulse { 0%,100% { opacity: 0.85; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .vin-goal-dot { animation: none; } }

/* ── VIN-STORY-343: print / PDF export of the client dashboard ──────────────
   window.print() from the "Download PDF" button. Colours must survive print
   (print-color-adjust: exact); interactive chrome is hidden; cards avoid
   splitting across pages; the accordion opens fully so nothing is lost. */
@media print {
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #fff; }
  main.container { max-width: 100% !important; width: 100% !important; }
  .card { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; border: 1px solid #dee2e6 !important; }
  /* keep every coloured fill/gradient (donuts, bands, funnel, tracks, chips) */
  .vin-sec, .vin-sec-icon, .vin-area-card, .vin-plan-tile, .vin-area-chip,
  .vin-timeline-dot, .vin-timeline-fill, .vin-timeline-mark, .vin-score-pill,
  .vin-cmp-bar, .vin-dim-fill, .vin-funnel-key-dot, .vin-legend-dot, .vin-badge,
  .badge, svg, svg * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* the accordion prints fully expanded, no chevrons */
  .vin-acc-body { display: block !important; }
  .vin-acc-chev { display: none !important; }
  .vin-acc-summary { cursor: default; }
  /* the goal-dot pulse and bar-grow animations settle to their end frame */
  .vin-goal-dot, .vin-cmp-bar, .vin-dim-fill, .vin-timeline-fill { animation: none !important; }
  /* legend chips read as a plain legend, not buttons */
  .vin-legend-chip { border: none; cursor: default; }
  a[href]::after { content: ""; } /* no ugly URL expansion */
}