/* SCOPE 2026-08-19: component rules are scoped
   `:is(.vshr-blog, .e-content) .component` instead of `.vshr-blog .component`.
   :is() keeps specificity identical (0,1,0), so shell posts cascade exactly as
   before; the addition means a component pasted into a post WITHOUT the shell
   still gets its one canonical definition instead of rendering half-styled.
   Bare-element rules (h2/p/li under the shell) stay shell-only on purpose -
   shell-free body typography belongs to single-post.css. */
/* blog-editorial.css — the blog editorial component system
   ═══════════════════════════════════════════════════════════════════════════
   ADOPTED 2026-08-17. Replaces the component layer of blog-components.css,
   which was 14 merged per-post stylesheets: 1,478 !important across 1,015
   rules, 14 competing definitions of .insight-box, 14 of .checklist-card. What
   rendered was whichever declaration won the last specificity war, which is
   why nothing read as deliberate.

   Those 243 component rules are stripped out by
   _scripts/split-blog-components.mjs into public/blog-components-base.css.
   This file defines each component ONCE.

   ── IT TARGETS THE CLASSES POSTS ALREADY HAVE ──────────────────────────────
   182 published posts use .insight-box / .checklist-card / .pulse-snapshot /
   .practice-module / .faq-section. Renaming anything would have meant
   rewriting all of them, so the new design attaches to the existing names.
   No post content changes. The .ed-* names are aliases for new writing.

   ── THREE WEIGHTS ──────────────────────────────────────────────────────────
   Restraint is not sameness. Uniform white cards read as card soup down a long
   article and give the eye nothing to rank. Exactly three levels:

     note     no box — a 2px tone rail and a label. The DEFAULT aside.
              .insight-box, .vshr-callout, .tldr-box, .status-notice, …
     block    a bordered card, earned by STRUCTURE, not by wanting attention.
              .checklist-card, .pulse-snapshot, .practice-module, .vshr-panel
     primary  accent surface. ONE per article. A second and neither means
              anything. .insight-box.is-featured / .is-primary

   One accent, one hairline, one radius, one shadow, one 4px rhythm.
   ZERO !important — the base file no longer styles these components, so
   nothing here needs to shout. Keep it that way.
   ═══════════════════════════════════════════════════════════════════════════ */

:is(.vshr-blog, .e-content) {
  --ed-accent: #1479A3;
  --ed-accent-deep: #0F5C7F;
  --ed-accent-wash: #F0F6FA;
  --ed-accent-line: #C3DAE6;

  --ed-ink: #0D1829;
  --ed-body: #33475B;
  --ed-muted: #64768A;
  --ed-line: #E4EAF0;
  --ed-line-strong: #C8D3DE;
  --ed-surface: #FFFFFF;
  --ed-sunk: #F7F9FB;

  --ed-radius: 10px;
  --ed-shadow: 0 1px 2px rgba(13, 24, 41, .05);

  --ed-1: 4px;  --ed-2: 8px;  --ed-3: 12px; --ed-4: 16px;
  --ed-5: 20px; --ed-6: 24px; --ed-7: 32px;

  --ed-head: Poppins, system-ui, sans-serif;
  --ed-sans: Inter, system-ui, sans-serif;

  --ed-tone: var(--ed-accent);
  --ed-tone-wash: var(--ed-accent-wash);
}

.vshr-blog [data-tone="caution"] { --ed-tone: #A55A07; --ed-tone-wash: #FFFAF0; }
.vshr-blog [data-tone="action"]  { --ed-tone: #B4460E; --ed-tone-wash: #FFF7F2; }
.vshr-blog [data-tone="urgent"]  { --ed-tone: #A81E14; --ed-tone-wash: #FEF4F3; }
.vshr-blog [data-tone="plan"]    { --ed-tone: #046B4E; --ed-tone-wash: #F1FBF7; }

/* ── label ──────────────────────────────────────────────────────────────── */
:is(.vshr-blog, .e-content) .insight-box .label,
:is(.vshr-blog, .e-content) .vshr-callout .label,
:is(.vshr-blog, .e-content) .ed-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 var(--ed-2);
  color: var(--ed-tone);
  font-family: var(--ed-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* ── WEIGHT 1 — note. The default aside. ────────────────────────────────── */
/* A tinted wash behind the rail, so the note reads as a component on the
   page instead of an indented paragraph (owner review 2026-09-01: the
   hairline-only version was invisible next to the block-weight cards). */
:is(.vshr-blog, .e-content) .insight-box,
:is(.vshr-blog, .e-content) .vshr-callout,
:is(.vshr-blog, .e-content) .tldr-box,
:is(.vshr-blog, .e-content) .status-notice,
:is(.vshr-blog, .e-content) .diagnostic-callout,
:is(.vshr-blog, .e-content) .day-zero-callout,
:is(.vshr-blog, .e-content) .starter-kit,
:is(.vshr-blog, .e-content) .ed-note {
  margin: var(--ed-6) 0;
  padding: var(--ed-4) var(--ed-5) var(--ed-4) var(--ed-5);
  background: var(--ed-tone-wash);
  border: 0;
  border-left: 4px solid var(--ed-tone);
  border-radius: 0 var(--ed-radius) var(--ed-radius) 0;
  box-shadow: var(--ed-shadow);
}
:is(.vshr-blog, .e-content) .insight-box > :last-child,
:is(.vshr-blog, .e-content) .vshr-callout > :last-child,
:is(.vshr-blog, .e-content) .ed-note > :last-child { margin-bottom: 0; }

/* tone aliases for the legacy per-post callout names */
:is(.vshr-blog, .e-content) .status-notice { --ed-tone: #A55A07; --ed-tone-wash: #FFFAF0; }
:is(.vshr-blog, .e-content) .diagnostic-callout { --ed-tone: #B4460E; --ed-tone-wash: #FFF7F2; }
:is(.vshr-blog, .e-content) .day-zero-callout { --ed-tone: #A81E14; --ed-tone-wash: #FEF4F3; }
:is(.vshr-blog, .e-content) .starter-kit { --ed-tone: #046B4E; --ed-tone-wash: #F1FBF7; }
:is(.vshr-blog, .e-content) .vshr-callout--caution { --ed-tone: #A55A07; --ed-tone-wash: #FFFAF0; }
:is(.vshr-blog, .e-content) .vshr-callout--action { --ed-tone: #B4460E; --ed-tone-wash: #FFF7F2; }
:is(.vshr-blog, .e-content) .vshr-callout--urgent { --ed-tone: #A81E14; --ed-tone-wash: #FEF4F3; }
:is(.vshr-blog, .e-content) .vshr-callout--plan { --ed-tone: #046B4E; --ed-tone-wash: #F1FBF7; }

/* ── WEIGHT 2 — block. Earned by structure. ─────────────────────────────── */
:is(.vshr-blog, .e-content) .checklist-card,
:is(.vshr-blog, .e-content) .pulse-snapshot,
:is(.vshr-blog, .e-content) .rule-snapshot,
:is(.vshr-blog, .e-content) .practice-module,
:is(.vshr-blog, .e-content) .vshr-panel,
:is(.vshr-blog, .e-content) .paga-timeline,
:is(.vshr-blog, .e-content) .key-takeaways,
/* Two more per-post block names whose only styling used to come from the
   .vshr-module-* wrappers. Once those were removed they had nothing left, so
   they join the block weight explicitly rather than by accident. */
:is(.vshr-blog, .e-content) .checklist-box,
:is(.vshr-blog, .e-content) .vshr-state-comparison,
:is(.vshr-blog, .e-content) .ed-block {
  margin: var(--ed-7) 0;
  padding: var(--ed-5) var(--ed-6);
  background: var(--ed-surface);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow);
  overflow: hidden;
}
:is(.vshr-blog, .e-content) .checklist-card > :last-child,
:is(.vshr-blog, .e-content) .pulse-snapshot > :last-child,
:is(.vshr-blog, .e-content) .practice-module > :last-child,
:is(.vshr-blog, .e-content) .vshr-panel > :last-child,
:is(.vshr-blog, .e-content) .ed-block > :last-child { margin-bottom: 0; }

/* block headers — a rule, not a filled bar */
:is(.vshr-blog, .e-content) .checklist-card h3,
:is(.vshr-blog, .e-content) .practice-module .practice-module-title,
:is(.vshr-blog, .e-content) .rule-snapshot .rule-snapshot-title,
:is(.vshr-blog, .e-content) .pulse-snapshot .pulse-snapshot-title,
:is(.vshr-blog, .e-content) .ed-block > .ed-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 var(--ed-4);
  padding: 0 0 var(--ed-3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ed-line);
  color: var(--ed-ink);
  font-family: var(--ed-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  text-transform: none;
}
:is(.vshr-blog, .e-content) .pulse-snapshot .pulse-snapshot-subtitle {
  margin: calc(var(--ed-4) * -1 + 2px) 0 var(--ed-4);
  color: var(--ed-body);
  font-family: var(--ed-sans);
  font-size: 14px;
  line-height: 1.55;
}
:is(.vshr-blog, .e-content) .pulse-snapshot .pulse-snapshot-meta {
  margin: 0 0 var(--ed-4);
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
:is(.vshr-blog, .e-content) .checklist-card h3 .card-title-text { font: inherit; color: inherit; }

/* ── WEIGHT 3 — primary. One per article. ───────────────────────────────── */
:is(.vshr-blog, .e-content) .insight-box.is-featured,
:is(.vshr-blog, .e-content) .is-primary {
  padding: var(--ed-5) var(--ed-6);
  background: var(--ed-tone-wash);
  border: 1px solid var(--ed-accent-line);
  border-radius: var(--ed-radius);
}
:is(.vshr-blog, .e-content) .insight-box.is-featured .label,
:is(.vshr-blog, .e-content) .is-primary > .ed-label { margin-bottom: var(--ed-3); }

/* ── checklist rows ─────────────────────────────────────────────────────── */
:is(.vshr-blog, .e-content) .check-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0 var(--ed-4);
  margin: 0;
  padding: var(--ed-4) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ed-line);
  border-radius: 0;
}
:is(.vshr-blog, .e-content) .check-item:first-of-type { padding-top: 0; border-top: 0; }
:is(.vshr-blog, .e-content) .check-item:last-child { padding-bottom: 0; }
/* A bare 12px digit disappeared next to two-line item titles - the reader had
   no anchor to scan the list by. A quiet wash pill keeps the editorial calm
   but gives each path a findable marker. */
:is(.vshr-blog, .e-content) .check-num {
  align-self: start;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--ed-accent-wash);
  border: 1px solid var(--ed-accent-line);
  border-radius: 50%;
  box-shadow: none;
  color: var(--ed-accent-deep);
  font-family: var(--ed-sans);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  line-height: 1.75;
}
:is(.vshr-blog, .e-content) .check-content { min-width: 0; }
:is(.vshr-blog, .e-content) .check-content > strong {
  display: block;
  margin-bottom: var(--ed-1);
  color: var(--ed-ink);
  font-family: var(--ed-sans);
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.45;
}
/* The span had no size of its own, so it inherited the article base (18.16px)
   and rendered LARGER than the 15.5px item title above it - inverted hierarchy
   on every checklist. Pin it to the editorial body-small scale. */
:is(.vshr-blog, .e-content) .check-content > span { display: block; color: var(--ed-body); font-size: 15px; line-height: 1.65; }
:is(.vshr-blog, .e-content) .check-content > span strong { color: var(--ed-ink); }

/* proof / red-flag: a label column, not a tinted box */
:is(.vshr-blog, .e-content) .check-proof,
:is(.vshr-blog, .e-content) .check-redflag {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 0 var(--ed-3);
  margin: var(--ed-2) 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 14px;
  line-height: 1.55;
}
:is(.vshr-blog, .e-content) .check-proof .callout-label,
:is(.vshr-blog, .e-content) .check-redflag .callout-label {
  color: var(--ed-accent-deep);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.85;
}
:is(.vshr-blog, .e-content) .check-redflag { --ed-tone: #A81E14; }
:is(.vshr-blog, .e-content) .check-redflag .callout-label { color: #A81E14; }

/* ── snapshot / facts ───────────────────────────────────────────────────── */
:is(.vshr-blog, .e-content) .snapshot-grid,
:is(.vshr-blog, .e-content) .ed-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 var(--ed-7);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
:is(.vshr-blog, .e-content) .snapshot-cell,
:is(.vshr-blog, .e-content) .ed-facts > div {
  padding: var(--ed-3) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ed-line);
  border-radius: 0;
}
:is(.vshr-blog, .e-content) .snapshot-cell:first-child,
:is(.vshr-blog, .e-content) .snapshot-cell:nth-child(2),
:is(.vshr-blog, .e-content) .ed-facts > div:first-child,
:is(.vshr-blog, .e-content) .ed-facts > div:nth-child(2) { border-top: 0; padding-top: 0; }
:is(.vshr-blog, .e-content) .snapshot-label,
:is(.vshr-blog, .e-content) .ed-facts dt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--ed-1);
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
:is(.vshr-blog, .e-content) .snapshot-value,
:is(.vshr-blog, .e-content) .ed-facts dd {
  display: block;
  margin: 0;
  color: var(--ed-ink);
  font-family: var(--ed-head);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
:is(.vshr-blog, .e-content) .snapshot-note {
  margin: var(--ed-4) 0 0;
  padding: var(--ed-3) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ed-line);
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 14px;
  font-style: normal;
  line-height: 1.6;
}

/* ── factor cards ───────────────────────────────────────────────────────── */
:is(.vshr-blog, .e-content) .factor-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ed-4);
  margin: var(--ed-7) 0;
  padding: 0;
  background: none;
  border: 0;
}
:is(.vshr-blog, .e-content) .factor-card {
  margin: 0;
  padding: var(--ed-4);
  background: var(--ed-sunk);
  border: 1px solid var(--ed-line);
  border-radius: 8px;
  box-shadow: none;
}
:is(.vshr-blog, .e-content) .factor-card h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 var(--ed-2);
  color: var(--ed-ink);
  font-family: var(--ed-head);
  font-size: 14.5px;
  font-weight: 700;
}
:is(.vshr-blog, .e-content) .factor-card p { margin: 0 0 var(--ed-2); color: var(--ed-body); line-height: 1.6; }
:is(.vshr-blog, .e-content) .factor-card p:last-child { margin-bottom: 0; }

/* ── practice module (do / don't) ───────────────────────────────────────── */
:is(.vshr-blog, .e-content) .practice-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ed-6);
  padding: 0;
  background: none;
  border: 0;
}
:is(.vshr-blog, .e-content) .practice-col {
  padding: var(--ed-3) 0 0;
  background: none;
  border: 0;
  border-top: 2px solid var(--ed-line-strong);
  border-radius: 0;
}
:is(.vshr-blog, .e-content) .practice-col:first-child { border-top-color: #046B4E; }
:is(.vshr-blog, .e-content) .practice-col:last-child { border-top-color: #A81E14; }
:is(.vshr-blog, .e-content) .practice-col h4 {
  margin: 0 0 var(--ed-2);
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
:is(.vshr-blog, .e-content) .practice-col:first-child h4 { color: #046B4E; }
:is(.vshr-blog, .e-content) .practice-col:last-child h4 { color: #A81E14; }
:is(.vshr-blog, .e-content) .practice-col ul { margin: 0; padding: 0; list-style: none; }
:is(.vshr-blog, .e-content) .practice-col li {
  position: relative;
  margin: 0 0 var(--ed-2);
  padding-left: var(--ed-4);
  color: var(--ed-body);
  line-height: 1.55;
}
:is(.vshr-blog, .e-content) .practice-col li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ed-line-strong);
}
:is(.vshr-blog, .e-content) .practice-note {
  margin: var(--ed-4) 0 0;
  padding: var(--ed-3) 0 0;
  border-top: 1px solid var(--ed-line);
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 14px;
  font-style: normal;
  line-height: 1.6;
}

/* ── reference grid ─────────────────────────────────────────────────────── */
:is(.vshr-blog, .e-content) .vshr-ref-grid,
:is(.vshr-blog, .e-content) .labor-code-grid,
:is(.vshr-blog, .e-content) .ed-refs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ed-2);
  margin: var(--ed-7) 0;
}
:is(.vshr-blog, .e-content) .vshr-ref-grid > *,
:is(.vshr-blog, .e-content) .labor-code-grid > *,
:is(.vshr-blog, .e-content) .ed-refs > * {
  margin: 0;
  padding: var(--ed-3) var(--ed-4);
  background: var(--ed-sunk);
  border: 1px solid var(--ed-line);
  border-radius: 7px;
  color: var(--ed-body);
  line-height: 1.5;
}
:is(.vshr-blog, .e-content) .vshr-ref-grid b, :is(.vshr-blog, .e-content) .vshr-ref-grid strong,
:is(.vshr-blog, .e-content) .labor-code-grid b, :is(.vshr-blog, .e-content) .labor-code-grid strong,
:is(.vshr-blog, .e-content) .ed-refs b { color: var(--ed-accent-deep); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
:is(.vshr-blog, .e-content) .faq-section {
  margin: var(--ed-7) 0;
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ed-line);
  border-radius: 0;
  box-shadow: none;
}
:is(.vshr-blog, .e-content) .faq-section > h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: var(--ed-5) 0 var(--ed-3);
  color: var(--ed-ink);
  font-family: var(--ed-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.012em;
}
:is(.vshr-blog, .e-content) .faq-item {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ed-line);
  border-radius: 0;
  box-shadow: none;
}
:is(.vshr-blog, .e-content) .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ed-4);
  width: 100%;
  margin: 0;
  padding: var(--ed-4) 2px;
  background: none;
  border: 0;
  color: var(--ed-ink);
  font-family: var(--ed-head);
  /* 17px question over a 16px answer: the question leads. Was 15.5px while
     the answer inherited the 18px body, so the hierarchy read upside down
     (owner, 2026-09-11, Compliance Watch items). */
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
:is(.vshr-blog, .e-content) .faq-question:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; }
:is(.vshr-blog, .e-content) .faq-item .faq-chevron { transition: transform .18s ease; }
:is(.vshr-blog, .e-content) .faq-item.active .faq-question { color: var(--ed-accent-deep); }
:is(.vshr-blog, .e-content) .faq-item.active .faq-chevron,
.vshr-blog details[open] .faq-chevron { transform: rotate(180deg); }
/* Both dialects: .faq-item.active (button + JS) and <details open>. */
:is(.vshr-blog, .e-content) .faq-answer { display: none; max-height: none; overflow: visible; }
:is(.vshr-blog, .e-content) .faq-item.active .faq-answer,
.vshr-blog details[open] .faq-answer { display: block; }
:is(.vshr-blog, .e-content) .faq-answer-inner {
  padding: 0 2px var(--ed-4);
  color: var(--ed-body);
  font-family: var(--ed-sans);
  font-size: 16px;
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  :is(.vshr-blog, .e-content) .faq-item .faq-chevron { transition: none; }
}

@media (max-width: 600px) {
  :is(.vshr-blog, .e-content) .checklist-card,
  :is(.vshr-blog, .e-content) .pulse-snapshot,
  :is(.vshr-blog, .e-content) .practice-module,
  :is(.vshr-blog, .e-content) .vshr-panel,
  :is(.vshr-blog, .e-content) .ed-block { padding: var(--ed-4); margin: var(--ed-6) 0; }
  :is(.vshr-blog, .e-content) .snapshot-grid, :is(.vshr-blog, .e-content) .ed-facts { gap: 0; }
  :is(.vshr-blog, .e-content) .snapshot-cell:nth-child(2),
  :is(.vshr-blog, .e-content) .ed-facts > div:nth-child(2) { border-top: 1px solid var(--ed-line); padding-top: var(--ed-3); }
  :is(.vshr-blog, .e-content) .practice-cols { gap: var(--ed-4); }
  :is(.vshr-blog, .e-content) .check-proof,
  :is(.vshr-blog, .e-content) .check-redflag { grid-template-columns: 1fr; gap: 0; }
  :is(.vshr-blog, .e-content) .check-proof .callout-label,
  :is(.vshr-blog, .e-content) .check-redflag .callout-label { line-height: 1.4; }
}

/* ── legacy inline icons shipped inside post content ────────────────────────
   Older posts embed <svg> directly in .faq-question and module labels. Their
   sizing rules lived in the component layer that was removed, so without this
   they render at the SVG default. New patterns use <span data-icon> instead
   (kses deletes <svg>), but these have to keep working. */
:is(.vshr-blog, .e-content) .faq-question svg,
:is(.vshr-blog, .e-content) .faq-question .faq-chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--ed-muted);
  transition: transform .18s ease;
}
:is(.vshr-blog, .e-content) .faq-item.active .faq-question svg { transform: rotate(180deg); color: var(--ed-accent); }
:is(.vshr-blog, .e-content) .insight-box .label svg,
:is(.vshr-blog, .e-content) .vshr-callout .label svg,
:is(.vshr-blog, .e-content) .ed-label svg,
:is(.vshr-blog, .e-content) .factor-card h4 svg,
:is(.vshr-blog, .e-content) .practice-module-title svg,
:is(.vshr-blog, .e-content) .pulse-snapshot-title svg,
:is(.vshr-blog, .e-content) .checklist-card h3 svg,
:is(.vshr-blog, .e-content) .snapshot-label svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: currentColor;
}
:is(.vshr-blog, .e-content) .checklist-card h3 svg { flex-basis: 16px; width: 16px; height: 16px; color: var(--ed-accent); }

@media (prefers-reduced-motion: reduce) {
  :is(.vshr-blog, .e-content) .faq-question svg { transition: none; }
}

/* ── alternate dialects shipped by the Flask exporter ───────────────────────
   Some posts express the same Proof / Red flag / Owner rows as
   .check-meta-row > .check-meta-label + .check-meta-value instead of
   .check-proof / .check-redflag. Same component, different markup — give both
   the identical treatment rather than leaving one of them undressed. */
/* Three children per row — icon, label, value — so this is flex, not a
   two-column grid. A grid put the value in the 74px label column and turned
   every proof row into a one-word-per-line ribbon. Flex also degrades cleanly
   on the rows that ship no icon. */
:is(.vshr-blog, .e-content) .check-meta-row {
  display: flex;
  align-items: baseline;
  gap: var(--ed-2);
  margin: var(--ed-2) 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
:is(.vshr-blog, .e-content) .check-meta-row .cm-icon { flex: 0 0 13px; align-self: center; }
:is(.vshr-blog, .e-content) .check-meta-label {
  flex: 0 0 62px;
  color: var(--ed-accent-deep);
  font-family: var(--ed-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.7;
  white-space: nowrap;
}
:is(.vshr-blog, .e-content) .check-meta-value {
  flex: 1 1 0;
  min-width: 0;
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 14px;
  line-height: 1.55;
}
:is(.vshr-blog, .e-content) .check-meta-label.label-redflag,
:is(.vshr-blog, .e-content) .row-redflag .check-meta-label { color: #A81E14; }
:is(.vshr-blog, .e-content) .check-meta-label.label-owner { color: var(--ed-muted); }
:is(.vshr-blog, .e-content) .check-meta-label.label-proof { color: #046B4E; }

/* rule-snapshot body: the label/value pairs live one level deeper here */
:is(.vshr-blog, .e-content) .rule-snapshot-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 var(--ed-7);
  margin: 0;
}

/* ownership / responsibility blocks — the rows carry their own treatment */
:is(.vshr-blog, .e-content) .ownership-table { margin: var(--ed-7) 0; }

/* inline links inside a snapshot keep the accent but lose the underline noise */
:is(.vshr-blog, .e-content) .pulse-inline-link { color: var(--ed-accent-deep); font-weight: 600; }

/* ── decorative icon floor ──────────────────────────────────────────────────
   LOAD-BEARING. blog-components.css carried a rule commented "Constrain all
   decorative SVG icons to prevent oversized rendering", and removing the
   component layer took it with it. Inline <svg> with no width/height and a
   24-unit viewBox then expands to fill its container: measured 493px and 524px
   .mod-icon on the AI and contractor posts, and a 255px .snap-icon.

   This is the catch-all, independent of parent. Context-specific sizes above
   are more specific and still win. Do not remove without replacing. */
:is(.vshr-blog, .e-content) .mod-icon,
.vshr-blog svg.mod-icon,
:is(.vshr-blog, .e-content) .snap-icon,
.vshr-blog svg.snap-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  vertical-align: -2px;
}
:is(.vshr-blog, .e-content) .section-eyebrow svg,
.vshr-blog h2 > svg,
.vshr-blog h3 > svg,
.vshr-blog h4 > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  vertical-align: -2px;
}
/* Anything else the content ships inline: never taller than a line of text. */
.vshr-blog p > svg,
.vshr-blog li > svg,
.vshr-blog span > svg { max-width: 1.25em; max-height: 1.25em; }

/* ── heading rail ───────────────────────────────────────────────────────────
   Every h2 carried `border-left: 4px solid #1479A3` with `padding-left: 0`, so
   the rail sat flush against the first letter with no gap. Removed rather than
   padded: the type scale already separates sections, and the rail read as a
   stray mark next to "Frequently Asked Questions". Applies to every post,
   current and future, because it is scoped to .vshr-blog and nothing else. */
.vshr-blog h2,
:is(.vshr-blog, .e-content) .faq-section > h2 { border-left: 0; padding-left: 0; }


/* ── S5 CTA BUTTON — ported 2026-08-19 ─────────────────────────────────────
   Five posts use the .vshr-s5 CTA dialect. Its container survived the 8/17
   split into blog-components-base.css, but every .s5-btn rule stayed behind
   in blog-components.css - which no longer loads - so the button rendered
   white-on-transparent: an invisible ghost with white text. One canonical
   definition here, on the editorial accent (the dead file held four competing
   looks; the loud #e8175d magenta died with it on purpose). */
:is(.vshr-blog, .e-content) .s5-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ed-accent); color: #fff;
  font-family: var(--ed-sans); font-size: 14px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; box-shadow: 0 4px 14px rgba(20, 121, 163, .22);
  transition: background .2s ease, transform .18s ease, box-shadow .2s ease;
}
:is(.vshr-blog, .e-content) .s5-btn:hover {
  background: var(--ed-accent-deep); color: #fff; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 121, 163, .3);
}
:is(.vshr-blog, .e-content) .s5-btn:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 3px; }
:is(.vshr-blog, .e-content) .s5-btn svg { width: 18px; height: 18px; }