/* vccs-ai-core.css
 * AI@VCCS component styling. Fully scoped beneath .vccs-ai.
 * Consumes --vccs-ai-* custom properties, declared with VCCS v2 default
 * values on .vccs-ai itself so this file works standalone in preview.
 * A host adapter (vccs-ai-wordpress-adapter.css or vccs-ai-cascade-adapter.css)
 * loads AFTER this file and re-declares the same tokens from the live
 * template palette. Load order is the only thing that decides which wins;
 * only one adapter is ever present on a page.
 *
 * No unscoped selectors. No selector here targets a bare element, WordPress
 * theme class, or Cascade template class outside the .vccs-ai subtree.
 * No remote @import, no @font-face — see docs/wordpress-installation.md
 * and docs/cascade-installation.md for how the host supplies Roboto Slab.
 */

.vccs-ai {
  /* ---- tokens: default (VCCS v2) values ---- */
  --vccs-ai-primary: #00539B;
  --vccs-ai-on-primary: #FFFFFF;
  --vccs-ai-primary-dark: #003D6B;
  --vccs-ai-hero-surface: #1F529B;
  --vccs-ai-on-hero: #FFFFFF;
  --vccs-ai-accent: #98002E;
  --vccs-ai-accent-deep: #8B1F41;
  --vccs-ai-on-accent: #FFFFFF;
  --vccs-ai-surface: #FFFFFF;
  --vccs-ai-surface-alt: #F3F3F3;
  --vccs-ai-surface-primary-tint: #F2F6FA;
  --vccs-ai-surface-accent-tint: #FAF2F5;
  --vccs-ai-on-surface: #2D2D2D;
  --vccs-ai-on-surface-muted: #636363;
  --vccs-ai-border: #E2E8F0;
  --vccs-ai-chip-surface: #E8F0FA;
  --vccs-ai-callout-surface: #FAFAE1;
  --vccs-ai-link: #0066CC;
  --vccs-ai-success: #3FA45F;
  --vccs-ai-success-text: #2A7A44;

  /* fonts: family stacks only, no network dependency in this repo */
  --vccs-ai-font-slab: "Roboto Slab", Georgia, "Times New Roman", serif;
  --vccs-ai-font-headline: Georgia, "Times New Roman", serif;

  --vccs-ai-display-size: 48px;  --vccs-ai-display-weight: 700; --vccs-ai-display-lh: 1.2;
  --vccs-ai-h1-size: 42px;       --vccs-ai-h1-weight: 700;      --vccs-ai-h1-lh: 1.4;
  --vccs-ai-headline-size: 36px; --vccs-ai-headline-weight: 700;--vccs-ai-headline-lh: 1.25;
  --vccs-ai-h3-size: 22px;       --vccs-ai-h3-weight: 700;      --vccs-ai-h3-lh: 1.35;
  --vccs-ai-h4-size: 18px;       --vccs-ai-h4-weight: 700;      --vccs-ai-h4-lh: 1.4;
  --vccs-ai-lead-size: 19px;     --vccs-ai-lead-weight: 300;    --vccs-ai-lead-lh: 1.7;
  --vccs-ai-body-size: 16px;     --vccs-ai-body-weight: 400;    --vccs-ai-body-lh: 1.8;
  --vccs-ai-body-sm-size: 14px;  --vccs-ai-body-sm-weight: 400; --vccs-ai-body-sm-lh: 1.85;
  --vccs-ai-kicker-size: 13px;   --vccs-ai-kicker-weight: 700;  --vccs-ai-kicker-lh: 1.4;   --vccs-ai-kicker-tracking: 1.5px;
  --vccs-ai-eyebrow-size: 12px;  --vccs-ai-eyebrow-weight: 600; --vccs-ai-eyebrow-lh: 2;    --vccs-ai-eyebrow-tracking: 2px;
  --vccs-ai-button-size: 13px;   --vccs-ai-button-weight: 700;  --vccs-ai-button-lh: 1.5;   --vccs-ai-button-tracking: 1.3px;

  --vccs-ai-radius-none: 0px;
  --vccs-ai-radius-sm: 4px;
  --vccs-ai-radius-md: 8px;
  --vccs-ai-radius-pill: 999px;

  --vccs-ai-space-xs: 4px;
  --vccs-ai-space-sm: 8px;
  --vccs-ai-space-md: 16px;
  --vccs-ai-space-lg: 24px;
  --vccs-ai-space-xl: 32px;
  --vccs-ai-space-2xl: 48px;
  --vccs-ai-space-3xl: 64px;
  --vccs-ai-space-4xl: 96px;

  --vccs-ai-motion-fast: 150ms ease;
  --vccs-ai-focus-width: 2px;
  --vccs-ai-focus-offset: 2px;

  /* ---- base ---- */
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-body-size);
  font-weight: var(--vccs-ai-body-weight);
  line-height: var(--vccs-ai-body-lh);
  color: var(--vccs-ai-on-surface-muted);
  background-color: var(--vccs-ai-surface);
  max-width: 100%;
}

.vccs-ai h1, .vccs-ai h2, .vccs-ai h3, .vccs-ai h4, .vccs-ai h5, .vccs-ai h6 {
  font-family: var(--vccs-ai-font-slab);
  color: var(--vccs-ai-on-surface);
  margin: 0 0 var(--vccs-ai-space-md) 0;
}

.vccs-ai p { margin: 0 0 var(--vccs-ai-space-md) 0; }
.vccs-ai ul, .vccs-ai ol { margin: 0 0 var(--vccs-ai-space-md) 0; padding-left: 1.4em; }
.vccs-ai a { color: var(--vccs-ai-link); text-decoration: underline; }
.vccs-ai a:hover { color: var(--vccs-ai-primary-dark); }

/* Specificity trap, the same one documented on the base button rules below.
   ".vccs-ai a:hover" is (0,2,1) and outranks a component rule written as
   ".vccs-ai .vccs-ai-component" (0,2,0), so any link styled as a button
   silently loses its text colour on hover. Measured before this fix: the
   card footer link hovered to primary-dark text on a primary-dark
   background (1.00:1, invisible), and ghost buttons hovered to dark navy
   on the blue hero (2.25:1). Each component built on an <a> therefore
   restates its own hover colour here at (0,3,1). */
.vccs-ai a.vccs-ai-button--primary:hover { color: var(--vccs-ai-on-primary); }
.vccs-ai a.vccs-ai-button--accent:hover { color: var(--vccs-ai-on-accent); }
.vccs-ai a.vccs-ai-button--white:hover { color: var(--vccs-ai-primary-dark); }
.vccs-ai a.vccs-ai-button--ghost:hover { color: var(--vccs-ai-on-hero); }
.vccs-ai a.vccs-ai-card-footer-link:hover { color: var(--vccs-ai-on-primary); }
.vccs-ai a.vccs-ai-card-footer-link--neutral:hover { color: var(--vccs-ai-on-surface); }
.vccs-ai a.vccs-ai-category-chip,
.vccs-ai a.vccs-ai-category-chip:hover { color: var(--vccs-ai-primary); }

.vccs-ai *:focus-visible {
  outline: var(--vccs-ai-focus-width) solid var(--vccs-ai-primary);
  outline-offset: var(--vccs-ai-focus-offset);
}

.vccs-ai-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* the only two !important declarations outside the reduced-motion block:
   a visually-hidden utility must win over any component rule that sets
   width/height/overflow, or skip-links and live-region text become visible. */
.vccs-ai-visually-hidden:not(:focus):not(:active) { clip-path: inset(50%); }

.vccs-ai-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--vccs-ai-space-lg);
}

/* ═══════════════ SKIP LINK ═══════════════ */
.vccs-ai-skip-link {
  position: absolute;
  left: var(--vccs-ai-space-md);
  top: -100px;
  background: var(--vccs-ai-primary);
  color: var(--vccs-ai-on-primary);
  padding: var(--vccs-ai-space-sm) var(--vccs-ai-space-md);
  border-radius: var(--vccs-ai-radius-sm);
  z-index: 100;
  transition: top var(--vccs-ai-motion-fast);
}
.vccs-ai-skip-link:focus { top: var(--vccs-ai-space-md); }

/* ═══════════════ SECTION NAVIGATION (persistent, all pages) ═══════════════
   The AI@VCCS section's own persistent nav, sitting directly under the
   hero on every page — matching the live site's own pattern (visible on
   every www.vccs.edu/ai-* sub-page). Flat, 5 links, no dropdowns, since
   the section itself is now flat (planning §3.2.2's fuller mega-menu
   concept doesn't apply to this smaller fast-launch IA). Current section
   is marked via aria-current="page" (set per page by
   scripts/inject-section-nav.js) — never by color alone. */
.vccs-ai-section-nav {
  background: var(--vccs-ai-surface);
  border-bottom: 1px solid var(--vccs-ai-border);
}
.vccs-ai-section-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--vccs-ai-space-sm) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vccs-ai-section-nav a {
  display: inline-block;
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-button-size);
  font-weight: var(--vccs-ai-button-weight);
  letter-spacing: var(--vccs-ai-button-tracking);
  text-transform: uppercase;
  color: var(--vccs-ai-primary);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--vccs-ai-radius-sm);
}
.vccs-ai-section-nav a:hover {
  background: var(--vccs-ai-surface-primary-tint);
  text-decoration: none;
}
.vccs-ai-section-nav a[aria-current="page"] {
  background: var(--vccs-ai-surface-primary-tint);
  color: var(--vccs-ai-primary-dark);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--vccs-ai-primary);
}
.vccs-ai-section-nav a:focus-visible {
  outline: var(--vccs-ai-focus-width) solid var(--vccs-ai-primary);
  outline-offset: var(--vccs-ai-focus-offset);
}

/* ═══════════════ BREADCRUMB ═══════════════ */
.vccs-ai-breadcrumb {
  padding: var(--vccs-ai-space-md) 0;
  border-bottom: 1px solid var(--vccs-ai-border);
}
.vccs-ai-breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  font-family: var(--vccs-ai-font-slab);
  font-size: 15px;
  font-weight: 600;
}
.vccs-ai-breadcrumb li { display: flex; align-items: center; }
/* Visible ">" separator. Rendered via ::after (generated content), which
   Chrome/Firefox/Safari do not expose to the accessibility tree, so
   screen readers do not announce it — no aria-hidden attribute is needed
   or possible on a pseudo-element. This satisfies planning §3.3's "a
   CSS-generated character, not text content" requirement while showing
   an actual ">" glyph rather than the previous abstract corner mark. */
.vccs-ai-breadcrumb li:not(:last-child)::after {
  content: ">";
  margin: 0 var(--vccs-ai-space-md);
  color: var(--vccs-ai-on-surface-muted);
  font-weight: 400;
}
.vccs-ai-breadcrumb a {
  text-decoration: none;
  color: var(--vccs-ai-on-surface);
}
.vccs-ai-breadcrumb a:hover { text-decoration: underline; color: var(--vccs-ai-primary); }
.vccs-ai-breadcrumb [aria-current="page"] { color: var(--vccs-ai-on-surface); font-weight: 600; }

/* ═══════════════ HERO ═══════════════ */
.vccs-ai-hero {
  background: var(--vccs-ai-hero-surface);
  color: var(--vccs-ai-on-hero);
  padding: var(--vccs-ai-space-3xl) 0;
}
.vccs-ai-hero .vccs-ai-container { display: flex; flex-direction: column; gap: var(--vccs-ai-space-md); align-items: flex-start; }
.vccs-ai-hero h1 {
  color: var(--vccs-ai-on-hero);
  font-size: var(--vccs-ai-display-size);
  font-weight: var(--vccs-ai-display-weight);
  line-height: var(--vccs-ai-display-lh);
  margin: 0;
}
/* Home page logo lockup: a real self-hosted asset (assets/images/), not a
   remote dependency — see docs/source-questions.md for the departure this
   records from the design system's own ban on this imagery style, per
   explicit, twice-confirmed user direction. Wrapped in the H1 itself so
   the image's alt text is the page's accessible h1 content. */
.vccs-ai-hero h1 .vccs-ai-hero-logo {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}
.vccs-ai-hero-lead {
  color: var(--vccs-ai-on-hero);
  opacity: .92;
  font-size: var(--vccs-ai-lead-size);
  font-weight: var(--vccs-ai-lead-weight);
  line-height: var(--vccs-ai-lead-lh);
  font-style: italic;
  max-width: 640px;
  margin: 0;
}
.vccs-ai-hero-actions { display: flex; gap: var(--vccs-ai-space-md); flex-wrap: wrap; margin-top: var(--vccs-ai-space-sm); }
.vccs-ai-hero .vccs-ai-eyebrow-chip { margin-bottom: 0; }

/* variant used on non-Home hero bands that carry a status banner instead of CTAs */
.vccs-ai-hero--compact { padding: var(--vccs-ai-space-2xl) 0; }

/* ═══════════════ EYEBROW / KICKER ═══════════════ */
.vccs-ai-eyebrow-chip {
  display: inline-block;
  background: var(--vccs-ai-accent-deep);
  color: var(--vccs-ai-on-accent);
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-eyebrow-size);
  font-weight: var(--vccs-ai-eyebrow-weight);
  line-height: var(--vccs-ai-eyebrow-lh);
  letter-spacing: var(--vccs-ai-eyebrow-tracking);
  text-transform: uppercase;
  border-radius: var(--vccs-ai-radius-none);
  padding: 3px 10px;
}

.vccs-ai-kicker-heading {
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-kicker-size);
  font-weight: var(--vccs-ai-kicker-weight);
  line-height: var(--vccs-ai-kicker-lh);
  letter-spacing: var(--vccs-ai-kicker-tracking);
  text-transform: uppercase;
  color: var(--vccs-ai-primary);
  margin: 0 0 var(--vccs-ai-space-sm) 0;
}

/* ═══════════════ SECTION HEADING (headline + accent word) ═══════════════ */
.vccs-ai-section-heading {
  font-family: var(--vccs-ai-font-headline);
  font-size: var(--vccs-ai-headline-size);
  font-weight: var(--vccs-ai-headline-weight);
  line-height: var(--vccs-ai-headline-lh);
  color: var(--vccs-ai-primary);
  margin: 0 0 var(--vccs-ai-space-lg) 0;
}
.vccs-ai-accent-word { color: var(--vccs-ai-accent); }

/* ═══════════════ BANDS ═══════════════ */
.vccs-ai-band { padding: var(--vccs-ai-space-3xl) 0; }
.vccs-ai-band--surface { background: var(--vccs-ai-surface); }
.vccs-ai-band--surface-alt { background: var(--vccs-ai-surface-alt); }
.vccs-ai-band--primary-tint { background: var(--vccs-ai-surface-primary-tint); }
.vccs-ai-band--accent-tint { background: var(--vccs-ai-surface-accent-tint); }
.vccs-ai-band--primary { background: var(--vccs-ai-hero-surface); color: var(--vccs-ai-on-hero); }
.vccs-ai-band--accent { background: var(--vccs-ai-accent-deep); color: var(--vccs-ai-on-accent); }

.vccs-ai-band--accent-tint .vccs-ai-kicker-heading { color: var(--vccs-ai-accent); }

/* solid bands: full white inversion */
.vccs-ai-band--primary .vccs-ai-section-heading,
.vccs-ai-band--accent .vccs-ai-section-heading,
.vccs-ai-band--primary h2, .vccs-ai-band--primary h3, .vccs-ai-band--primary h4,
.vccs-ai-band--accent h2, .vccs-ai-band--accent h3, .vccs-ai-band--accent h4,
.vccs-ai-band--primary p, .vccs-ai-band--accent p,
.vccs-ai-band--primary .vccs-ai-kicker-heading, .vccs-ai-band--accent .vccs-ai-kicker-heading {
  color: var(--vccs-ai-on-hero);
}
.vccs-ai-band--primary .vccs-ai-accent-word, .vccs-ai-band--accent .vccs-ai-accent-word { color: inherit; }
.vccs-ai-band--primary a:not(.vccs-ai-button), .vccs-ai-band--accent a:not(.vccs-ai-button) {
  color: var(--vccs-ai-on-hero); text-decoration: underline;
}
.vccs-ai-band--primary *:focus-visible, .vccs-ai-band--accent *:focus-visible {
  outline-color: var(--vccs-ai-on-hero);
}
.vccs-ai-band--primary .vccs-ai-eyebrow-chip, .vccs-ai-band--accent .vccs-ai-eyebrow-chip { display: none; }
.vccs-ai-hero.vccs-ai-band--primary .vccs-ai-eyebrow-chip { display: inline-block; } /* hero eyebrow is the one sanctioned exception — .vccs-ai-hero and .vccs-ai-band--primary are the SAME element, so this must be a compound selector, not a descendant chain */

/* ═══════════════ BUTTONS ═══════════════
   SPECIFICITY NOTE: buttons are almost always <a> elements. The base link
   rule ".vccs-ai a" (a class + an element = 0,1,1) otherwise outranks a
   bare ".vccs-ai-button" or ".vccs-ai-button--primary" (0,1,0), so every
   button rendered as an underlined, link-colored anchor instead of a
   button — found by visual review. Every base (non-hover, non-disabled)
   button rule below is therefore qualified with the ".vccs-ai" ancestor
   to reach (0,2,0), which safely outranks (0,1,1) on the classes tier
   alone. :hover/:active/[disabled] variants already carry 2 selectors in
   the classes tier and do not need the same treatment, but the prefix is
   applied uniformly here for consistency and to avoid re-introducing this
   bug if a variant is ever simplified back to one class. */
.vccs-ai .vccs-ai-button {
  display: inline-block;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-button-size);
  font-weight: var(--vccs-ai-button-weight);
  line-height: var(--vccs-ai-button-lh);
  letter-spacing: var(--vccs-ai-button-tracking);
  text-transform: uppercase;
  border-radius: var(--vccs-ai-radius-md);
  padding: 12px 24px;
  transition: background-color var(--vccs-ai-motion-fast), transform var(--vccs-ai-motion-fast);
}
.vccs-ai .vccs-ai-button:active { transform: translateY(1px); }
.vccs-ai .vccs-ai-button--primary { background: var(--vccs-ai-primary); color: var(--vccs-ai-on-primary); }
.vccs-ai .vccs-ai-button--primary:hover { background: var(--vccs-ai-primary-dark); color: var(--vccs-ai-on-primary); }
.vccs-ai .vccs-ai-button--accent { background: var(--vccs-ai-accent-deep); color: var(--vccs-ai-on-accent); }
.vccs-ai .vccs-ai-button--accent:hover { background: var(--vccs-ai-accent); color: var(--vccs-ai-on-accent); }
.vccs-ai .vccs-ai-button--white { background: var(--vccs-ai-surface); color: var(--vccs-ai-primary-dark); border: 1px solid var(--vccs-ai-border); }
.vccs-ai .vccs-ai-button--white:hover { background: var(--vccs-ai-surface-alt); }
.vccs-ai .vccs-ai-button--ghost { background: rgba(255,255,255,.08); color: var(--vccs-ai-on-hero); border: 1px solid rgba(255,255,255,.15); padding: 11px 26px; }
.vccs-ai .vccs-ai-button--ghost:hover { background: rgba(255,255,255,.18); }
.vccs-ai-button[disabled], .vccs-ai-button[aria-disabled="true"] {
  background: var(--vccs-ai-border); color: var(--vccs-ai-on-surface-muted); cursor: not-allowed;
}
.vccs-ai-band--primary .vccs-ai-button--primary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: var(--vccs-ai-on-hero); }
.vccs-ai-band--primary .vccs-ai-button--primary:hover { background: rgba(255,255,255,.18); }
.vccs-ai-band--accent .vccs-ai-button--primary, .vccs-ai-band--accent .vccs-ai-button--accent {
  background: var(--vccs-ai-surface); color: var(--vccs-ai-primary-dark); border: none;
}
.vccs-ai-band--accent .vccs-ai-button--primary:hover, .vccs-ai-band--accent .vccs-ai-button--accent:hover { background: var(--vccs-ai-surface-alt); }

/* ═══════════════ CHIPS / STATUS ═══════════════ */
.vccs-ai-category-chip {
  display: inline-block;
  background: var(--vccs-ai-chip-surface);
  color: var(--vccs-ai-primary);
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-eyebrow-size);
  font-weight: var(--vccs-ai-eyebrow-weight);
  letter-spacing: var(--vccs-ai-eyebrow-tracking);
  text-transform: uppercase;
  border-radius: var(--vccs-ai-radius-sm);
  padding: 4px 12px;
}
.vccs-ai-band--secondary .vccs-ai-category-chip, .vccs-ai-band--accent .vccs-ai-category-chip { display: none; }

.vccs-ai-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-size: var(--vccs-ai-body-sm-size); font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--vccs-ai-radius-sm);
  border: 1px solid currentColor;
}
.vccs-ai-status-badge::before { content: ""; width: 8px; height: 8px; border-radius: var(--vccs-ai-radius-pill); background: currentColor; flex-shrink: 0; }
.vccs-ai-status-badge--approved { color: var(--vccs-ai-success-text); }
.vccs-ai-status-badge--draft { color: #8A6D00; }
.vccs-ai-status-badge--review { color: var(--vccs-ai-primary-dark); }
.vccs-ai-status-badge--prohibited { color: var(--vccs-ai-accent); }
.vccs-ai-status-badge--superseded { color: var(--vccs-ai-on-surface-muted); }
.vccs-ai-tool-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-self: flex-start;
}

/* ═══════════════ STATUS BANNER (governance / document pages) ═══════════════ */
.vccs-ai-status-banner {
  border: 1px solid var(--vccs-ai-border);
  border-left: 4px solid var(--vccs-ai-primary);
  border-radius: var(--vccs-ai-radius-sm);
  padding: var(--vccs-ai-space-md) var(--vccs-ai-space-lg);
  margin: var(--vccs-ai-space-lg) 0;
  background: var(--vccs-ai-surface);
}
.vccs-ai-status-banner--draft { border-left-color: #8A6D00; }
.vccs-ai-status-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--vccs-ai-space-md);
  margin-top: var(--vccs-ai-space-sm);
}
.vccs-ai-status-banner-grid dt {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--vccs-ai-on-surface-muted); margin: 0;
}
.vccs-ai-status-banner-grid dd { font-size: var(--vccs-ai-body-sm-size); font-weight: 600; color: var(--vccs-ai-on-surface); margin: 2px 0 0 0; }

/* ═══════════════ QUICK ANSWER PANEL ═══════════════ */
.vccs-ai-quick-answer {
  background: var(--vccs-ai-callout-surface);
  border: 1px solid #E4E4C0;
  border-radius: var(--vccs-ai-radius-sm);
  padding: var(--vccs-ai-space-lg);
  margin: var(--vccs-ai-space-lg) 0;
}
.vccs-ai-quick-answer h2 { margin-top: 0; font-size: var(--vccs-ai-h3-size); }
.vccs-ai-quick-answer ul { margin-bottom: 0; }
.vccs-ai-quick-answer li { margin-bottom: var(--vccs-ai-space-sm); }

/* ═══════════════ CALLOUT ═══════════════ */
.vccs-ai-callout {
  background: var(--vccs-ai-callout-surface);
  border: 1px solid #E4E4C0;
  border-radius: var(--vccs-ai-radius-sm);
  padding: var(--vccs-ai-space-md) var(--vccs-ai-space-lg);
  font-size: var(--vccs-ai-body-sm-size);
  line-height: 1.7;
  color: var(--vccs-ai-on-surface);
  margin: var(--vccs-ai-space-lg) 0;
}

/* ═══════════════ FAQ CENTER ═══════════════ */
/* Category strip. Reuses the house category chip; the current category is
   filled rather than tinted so it reads as selected without a new colour. */
.vccs-ai-faq-tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--vccs-ai-space-lg) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vccs-ai-space-sm);
}
.vccs-ai .vccs-ai-faq-tabs a { text-decoration: none; }
.vccs-ai .vccs-ai-faq-tabs a:hover { background: var(--vccs-ai-surface-primary-tint); }
.vccs-ai .vccs-ai-faq-tabs a[aria-current="page"] {
  background: var(--vccs-ai-primary);
  color: var(--vccs-ai-on-primary);
}
.vccs-ai-faq-tabs a:focus-visible {
  outline: var(--vccs-ai-focus-width) solid var(--vccs-ai-primary);
  outline-offset: var(--vccs-ai-focus-offset);
}

/* Clause reference on an accordion row, and the source/reviewed line inside
   the panel. Both are supporting metadata, so they sit in muted body-small
   rather than competing with the question. */
.vccs-ai-faq-citation {
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-eyebrow-size);
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--vccs-ai-on-surface-muted);
  flex-shrink: 0;
}
.vccs-ai-faq-meta {
  font-size: var(--vccs-ai-body-sm-size);
  color: var(--vccs-ai-on-surface-muted);
}

/* ═══════════════ FAQ SEARCH ═══════════════ */
.vccs-ai-faq-search {
  position: relative;
  margin: 0 0 var(--vccs-ai-space-xl) 0;
}
.vccs-ai-faq-search-label {
  display: block;
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-kicker-size);
  font-weight: var(--vccs-ai-kicker-weight);
  letter-spacing: var(--vccs-ai-kicker-tracking);
  text-transform: uppercase;
  color: var(--vccs-ai-primary);
  margin: 0 0 var(--vccs-ai-space-sm) 0;
}
.vccs-ai-faq-search-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-body-size);
  color: var(--vccs-ai-on-surface);
  background: var(--vccs-ai-surface);
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-md);
  padding: 12px 14px;
}
.vccs-ai-faq-search-input:focus-visible {
  outline: var(--vccs-ai-focus-width) solid var(--vccs-ai-primary);
  outline-offset: var(--vccs-ai-focus-offset);
}
/* Suggestion list overlays the content below rather than pushing it down,
   so the page does not jump as the reader types. */
.vccs-ai-faq-suggestions {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  list-style: none;
  margin: 4px 0 0 0;
  padding: 4px;
  background: var(--vccs-ai-surface);
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  max-height: 22em;
  overflow-y: auto;
}
.vccs-ai-faq-suggestions [role="option"] {
  padding: 8px 10px;
  border-radius: var(--vccs-ai-radius-sm);
  cursor: pointer;
  font-size: var(--vccs-ai-body-sm-size);
  line-height: var(--vccs-ai-body-sm-lh);
}
.vccs-ai-faq-suggestions [role="option"]:hover,
.vccs-ai-faq-suggestion--active {
  background: var(--vccs-ai-surface-primary-tint);
}
.vccs-ai-faq-search-count {
  font-size: var(--vccs-ai-body-sm-size);
  color: var(--vccs-ai-on-surface-muted);
  margin: var(--vccs-ai-space-sm) 0 0 0;
}
.vccs-ai-faq-result-list {
  list-style: none;
  padding: 0;
  margin: var(--vccs-ai-space-md) 0 0 0;
}
.vccs-ai-faq-result-list li {
  padding: var(--vccs-ai-space-sm) 0;
  border-bottom: 1px solid var(--vccs-ai-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--vccs-ai-space-sm);
  justify-content: space-between;
  align-items: baseline;
}
.vccs-ai-faq-result-cat {
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-eyebrow-size);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--vccs-ai-on-surface-muted);
  flex-shrink: 0;
}
.vccs-ai-faq-zero {
  margin: var(--vccs-ai-space-md) 0 0 0;
  padding: var(--vccs-ai-space-lg);
  background: var(--vccs-ai-surface-primary-tint);
  border-radius: var(--vccs-ai-radius-sm);
}
.vccs-ai-faq-zero h3 {
  font-size: var(--vccs-ai-h4-size);
  margin: var(--vccs-ai-space-md) 0 var(--vccs-ai-space-sm) 0;
}
.vccs-ai-faq-zero p:first-child { margin-top: 0; }

/* ═══════════════ COMMUNITY OF PRACTICE ═══════════════ */
/* Status and cadence under the hero lead. On a solid brand band every
   component inverts to white, so this is plain inverted text rather than
   the coloured status badge, which is reserved for the directory cards. */
.vccs-ai-hero-meta {
  color: var(--vccs-ai-on-hero);
  opacity: .92;
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-body-sm-size);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 0 var(--vccs-ai-space-md) 0;
}

/* Functional areas represented in a community. Reads as a scannable set
   rather than a long single column, and collapses to one column on a phone. */
.vccs-ai-role-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--vccs-ai-space-lg) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px var(--vccs-ai-space-lg);
}
.vccs-ai-role-list li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--vccs-ai-body-sm-size);
  line-height: var(--vccs-ai-body-sm-lh);
}
.vccs-ai-role-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: var(--vccs-ai-radius-pill);
  background: var(--vccs-ai-primary);
}

/* Shown only where a zone's absence is itself the honest message — a
   community that is genuinely still forming. Never used to paper over
   content that simply has not been collected yet. */
.vccs-ai-empty-state {
  border: 1px dashed var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-sm);
  padding: var(--vccs-ai-space-lg);
  margin: 0 0 var(--vccs-ai-space-lg) 0;
  color: var(--vccs-ai-on-surface-muted);
  font-size: var(--vccs-ai-body-sm-size);
}
.vccs-ai-empty-state p { margin: 0; }

/* Named community leads (§5.7). Photo above name at narrow widths; text
   never wraps around the photo. */
.vccs-ai-person-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--vccs-ai-space-lg) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--vccs-ai-space-lg);
}
.vccs-ai-person {
  display: flex;
  flex-direction: column;
  gap: var(--vccs-ai-space-sm);
  background: var(--vccs-ai-surface);
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-sm);
  padding: var(--vccs-ai-space-lg);
}
.vccs-ai-person-photo {
  width: 72px; height: 72px;
  border-radius: var(--vccs-ai-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.vccs-ai-person-body h3 { margin: 0 0 4px 0; font-size: var(--vccs-ai-h4-size); }
.vccs-ai-person-body p { margin: 0 0 4px 0; font-size: var(--vccs-ai-body-sm-size); }
/* Qualified with the parent so it outranks ".vccs-ai-person-body p" above
   on specificity rather than with !important — this file keeps only the two
   documented !important declarations. */
.vccs-ai-person-body p.vccs-ai-person-role {
  font-family: var(--vccs-ai-font-slab);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: var(--vccs-ai-eyebrow-size);
  color: var(--vccs-ai-primary);
}
.vccs-ai-person-affiliation { color: var(--vccs-ai-on-surface-muted); }

.vccs-ai-output-kind {
  font-family: var(--vccs-ai-font-slab);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: var(--vccs-ai-eyebrow-size);
  color: var(--vccs-ai-on-surface-muted);
}

/* DESIGN SYSTEM OVERRIDE, per explicit user direction (see
   docs/source-questions.md). The band mapping otherwise inverts every
   component to white on a solid brand band, which is why status was
   previously plain text here.
   The semantic colours cannot sit directly on the hero blue: measured,
   they land at 1.45-1.56:1, far under WCAG 1.4.3. So the badge keeps its
   colour coding but gains a solid light chip to sit on, which puts the
   same three colours at 4.92-11.17:1 against their own background, and
   the chip itself at 7.67:1 against the band for 1.4.11. */
.vccs-ai-hero .vccs-ai-status-badge {
  background: var(--vccs-ai-surface);
  padding: 4px 12px;
  margin-bottom: var(--vccs-ai-space-md);
}

/* Directory card. Fields degrade: a community with no status or cadence
   simply shows fewer lines rather than an empty label. */
.vccs-ai-community-card .vccs-ai-community-cadence {
  font-family: var(--vccs-ai-font-slab);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: var(--vccs-ai-eyebrow-size);
  color: var(--vccs-ai-primary);
  margin: 0;
}
.vccs-ai-community-card .vccs-ai-community-audience {
  margin: 0;
  padding-top: var(--vccs-ai-space-sm);
  border-top: 1px solid var(--vccs-ai-border);
}
.vccs-ai-community-audience-label {
  font-family: var(--vccs-ai-font-slab);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--vccs-ai-on-surface);
}

/* The one place the site sends a visitor off vccs.edu on purpose. Given a
   prominent block of its own so the handoff is deliberate rather than an
   inline link the reader skims past. */
.vccs-ai-external-cta {
  background: var(--vccs-ai-surface-primary-tint);
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-sm);
  padding: var(--vccs-ai-space-lg);
  margin: 0 0 var(--vccs-ai-space-lg) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vccs-ai-space-md);
  align-items: center;
}

/* Directory-card status. Sits on white, so the semantic colours apply. */
.vccs-ai-status-badge--forming { color: #8A6D00; }
.vccs-ai-status-badge--recruiting { color: var(--vccs-ai-primary-dark); }

/* ═══════════════ TOOL FILTER (AI Tools & Resources) ═══════════════ */
.vccs-ai-tools-layout {
  display: block;
}
@media (min-width: 769px) {
  .vccs-ai-tools-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--vccs-ai-space-lg);
    align-items: start;
  }
  .vccs-ai-tool-filter--sidebar { margin: 0; }
  .vccs-ai-tool-list { margin: 0; }
}
.vccs-ai-filter-tabs--stacked {
  flex-direction: column;
  align-items: stretch;
}
.vccs-ai-filter-tabs--stacked .vccs-ai-filter-tab {
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.vccs-ai-tool-filter {
  background: var(--vccs-ai-surface);
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-sm);
  padding: var(--vccs-ai-space-lg);
  margin: var(--vccs-ai-space-lg) 0;
}
.vccs-ai-tool-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-body-size);
  color: var(--vccs-ai-on-surface);
  background: var(--vccs-ai-surface);
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-md);
  padding: 10px 14px;
  margin: 0 0 var(--vccs-ai-space-md) 0;
}
.vccs-ai-tool-search:focus-visible {
  outline: var(--vccs-ai-focus-width) solid var(--vccs-ai-primary);
  outline-offset: var(--vccs-ai-focus-offset);
}
.vccs-ai-filter-tabs {
  display: flex; flex-wrap: wrap; gap: var(--vccs-ai-space-sm);
  margin: 0;
}
.vccs-ai-filter-tab {
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-button-size);
  font-weight: var(--vccs-ai-button-weight);
  letter-spacing: var(--vccs-ai-button-tracking);
  text-transform: uppercase;
  background: var(--vccs-ai-surface-primary-tint);
  color: var(--vccs-ai-primary-dark);
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-md);
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--vccs-ai-motion-fast), color var(--vccs-ai-motion-fast);
}
.vccs-ai-filter-tab:hover { background: var(--vccs-ai-chip-surface); }
.vccs-ai-filter-tab[aria-pressed="true"] {
  background: var(--vccs-ai-primary);
  color: var(--vccs-ai-on-primary);
  border-color: var(--vccs-ai-primary);
}
.vccs-ai-filter-tab:focus-visible {
  outline: var(--vccs-ai-focus-width) solid var(--vccs-ai-primary);
  outline-offset: var(--vccs-ai-focus-offset);
}
.vccs-ai-tool-count {
  font-size: var(--vccs-ai-body-sm-size);
  color: var(--vccs-ai-on-surface-muted);
  margin: var(--vccs-ai-space-md) 0 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .vccs-ai-filter-tab { transition: none; }
}

.vccs-ai-tool-list {
  display: flex;
  flex-direction: column;
  gap: var(--vccs-ai-space-lg);
  margin: var(--vccs-ai-space-lg) 0;
}
@media (min-width: 1000px) {
  .vccs-ai-tool-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}
.vccs-ai-tool-card[hidden] { display: none; }
/* Beats ".vccs-ai-card p { margin: 0 }" below via ancestor-qualified specificity, so a
   multi-paragraph note inside a tool card's callout (e.g. availability + a data-handling
   warning) keeps a visible gap between paragraphs instead of running together. */
.vccs-ai-card .vccs-ai-callout p + p { margin-top: var(--vccs-ai-space-sm); }
.vccs-ai-tool-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 var(--vccs-ai-space-sm) 0;
}
.vccs-ai-tool-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--vccs-ai-space-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vccs-ai-tool-features li {
  position: relative;
  padding-left: 1.6em;
  font-size: var(--vccs-ai-body-sm-size);
  line-height: var(--vccs-ai-body-sm-lh);
  color: var(--vccs-ai-on-surface);
}
.vccs-ai-tool-features li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: 0;
  color: var(--vccs-ai-success-text);
  font-weight: 700;
}
.vccs-ai-card.vccs-ai-tool-card--prohibited,
.vccs-ai-card.vccs-ai-tool-card--prohibited:hover { border-color: var(--vccs-ai-accent); }
.vccs-ai-card.vccs-ai-tool-card--prohibited::before { background: var(--vccs-ai-accent); }
.vccs-ai .vccs-ai-card-footer-link.vccs-ai-card-footer-link--neutral {
  background: var(--vccs-ai-surface-alt);
  color: var(--vccs-ai-on-surface);
}
.vccs-ai .vccs-ai-card-footer-link.vccs-ai-card-footer-link--neutral:hover { background: var(--vccs-ai-border); }

/* ═══════════════ CARDS ═══════════════ */
.vccs-ai-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--vccs-ai-space-lg);
  margin: var(--vccs-ai-space-lg) 0;
}
.vccs-ai-card-grid--two-col {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  .vccs-ai-card-grid--two-col { grid-template-columns: 1fr; }
}
.vccs-ai-card {
  position: relative;
  background: var(--vccs-ai-surface);
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-sm);
  padding: var(--vccs-ai-space-lg);
  display: flex; flex-direction: column; gap: var(--vccs-ai-space-sm);
  transition: border-color var(--vccs-ai-motion-fast);
}
.vccs-ai-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--vccs-ai-primary);
  border-radius: var(--vccs-ai-radius-sm) var(--vccs-ai-radius-sm) 0 0;
}
.vccs-ai-card:hover { border-color: var(--vccs-ai-primary); }
.vccs-ai-band--primary-tint .vccs-ai-card::before,
.vccs-ai-band--accent-tint .vccs-ai-card::before,
.vccs-ai-band--primary .vccs-ai-card::before,
.vccs-ai-band--accent .vccs-ai-card::before { display: none; }
.vccs-ai-band--primary .vccs-ai-card, .vccs-ai-band--accent .vccs-ai-card {
  background: var(--vccs-ai-surface);
}
.vccs-ai-band--primary .vccs-ai-card h3, .vccs-ai-band--primary .vccs-ai-card h4,
.vccs-ai-band--accent .vccs-ai-card h3, .vccs-ai-band--accent .vccs-ai-card h4 { color: var(--vccs-ai-on-surface); }
.vccs-ai-band--primary .vccs-ai-card p, .vccs-ai-band--accent .vccs-ai-card p { color: var(--vccs-ai-on-surface-muted); }

.vccs-ai-card h3, .vccs-ai-card h4 {
  font-size: var(--vccs-ai-h3-size);
  margin: 0;
}
.vccs-ai-card h3 a, .vccs-ai-card h4 a { color: inherit; text-decoration: none; }
.vccs-ai-card h3 a:hover, .vccs-ai-card h4 a:hover { text-decoration: underline; }
.vccs-ai-card p { font-size: var(--vccs-ai-body-sm-size); line-height: var(--vccs-ai-body-sm-lh); color: var(--vccs-ai-on-surface-muted); margin: 0; }
.vccs-ai-card-meta {
  display: flex; flex-wrap: wrap; gap: var(--vccs-ai-space-sm);
  font-size: 12px; color: var(--vccs-ai-on-surface-muted);
  margin: 0;
}
.vccs-ai-card-meta dt { font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.vccs-ai-card-meta dt::after { content: ":"; margin-right: 3px; }
.vccs-ai-card-meta > div { display: flex; gap: 4px; }
/* Same ".vccs-ai a" specificity trap as the buttons above — qualified with the ancestor for the same reason. */
.vccs-ai .vccs-ai-card-footer-link {
  display: block; text-align: center;
  background: var(--vccs-ai-primary); color: var(--vccs-ai-on-primary);
  font-family: var(--vccs-ai-font-slab); font-size: var(--vccs-ai-button-size); font-weight: var(--vccs-ai-button-weight);
  letter-spacing: var(--vccs-ai-button-tracking); text-transform: uppercase;
  border-radius: var(--vccs-ai-radius-md); padding: 12px; text-decoration: none;
  margin-top: auto;
}
.vccs-ai .vccs-ai-card-footer-link:hover { background: var(--vccs-ai-primary-dark); }

/* ═══════════════ DOCUMENT LINK BLOCK ═══════════════ */
.vccs-ai-document-link {
  display: flex; flex-wrap: wrap; gap: var(--vccs-ai-space-md); align-items: center;
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-sm);
  padding: var(--vccs-ai-space-lg);
  margin: var(--vccs-ai-space-lg) 0;
  background: var(--vccs-ai-surface-alt);
}
.vccs-ai-document-link-icon { flex-shrink: 0; width: 40px; height: 40px; color: var(--vccs-ai-primary); }
.vccs-ai-document-link-body { flex: 1 1 260px; }
.vccs-ai-document-link-body p { margin: 4px 0 0 0; font-size: 13px; color: var(--vccs-ai-on-surface-muted); }
.vccs-ai-document-link a.vccs-ai-button { flex-shrink: 0; }

/* ═══════════════ RELATED CONTENT ═══════════════ */
.vccs-ai-related-content {
  border-top: 1px solid var(--vccs-ai-border);
  padding-top: var(--vccs-ai-space-lg);
  margin-top: var(--vccs-ai-space-2xl);
}
.vccs-ai-related-content h2 { font-size: var(--vccs-ai-h3-size); }
.vccs-ai-related-content ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--vccs-ai-space-sm); }
.vccs-ai-related-content li { padding: var(--vccs-ai-space-sm) 0; border-bottom: 1px solid var(--vccs-ai-border); }
.vccs-ai-related-content li:last-child { border-bottom: none; }
.vccs-ai-related-content p { margin: 2px 0 0 0; font-size: 13px; }

/* ═══════════════ COMPACT LIST (e.g. the Use Case repository) ═══════════════
   A plain two-column table is wasteful for a long list of single-fact
   items (a reference number + a title) — it stacks into a full card per
   row below the table breakpoint, which is verbose at 50+ items. This is
   a denser alternative: a numbered reference tag inline with the title,
   wrapping naturally, no per-item card chrome. */
.vccs-ai-use-case-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--vccs-ai-space-lg) 0;
  display: grid;
  gap: 4px;
}
.vccs-ai-use-case-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--vccs-ai-border);
  font-size: var(--vccs-ai-body-sm-size);
}
.vccs-ai-use-case-list li:last-child { border-bottom: none; }
.vccs-ai-use-case-number {
  display: inline-block;
  min-width: 2em;
  font-family: var(--vccs-ai-font-slab);
  font-weight: 700;
  color: var(--vccs-ai-on-surface-muted);
  font-size: 12px;
}

/* ═══════════════ RESPONSIVE TABLE ═══════════════ */
.vccs-ai-table-scroll { overflow-x: auto; }
.vccs-ai-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vccs-ai-body-sm-size);
}
.vccs-ai-table caption {
  text-align: left; font-weight: 700; margin-bottom: var(--vccs-ai-space-sm); color: var(--vccs-ai-on-surface);
}
.vccs-ai-table th, .vccs-ai-table td {
  border: 1px solid var(--vccs-ai-border);
  padding: var(--vccs-ai-space-sm) var(--vccs-ai-space-md);
  text-align: left;
  vertical-align: top;
}
.vccs-ai-table th { background: var(--vccs-ai-surface-alt); font-weight: 700; }

@media (max-width: 640px) {
  .vccs-ai-table--stack, .vccs-ai-table--stack thead, .vccs-ai-table--stack tbody,
  .vccs-ai-table--stack th, .vccs-ai-table--stack td, .vccs-ai-table--stack tr { display: block; }
  .vccs-ai-table--stack thead tr { position: absolute; top: -9999px; left: -9999px; }
  .vccs-ai-table--stack tr { border: 1px solid var(--vccs-ai-border); border-radius: var(--vccs-ai-radius-sm); margin-bottom: var(--vccs-ai-space-md); padding: var(--vccs-ai-space-sm); }
  .vccs-ai-table--stack td { border: none; padding: 6px 0; }
  .vccs-ai-table--stack td::before { content: attr(data-label) ": "; font-weight: 700; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--vccs-ai-on-surface-muted); }
}

/* ═══════════════ ACCORDION ═══════════════ */
.vccs-ai-accordion { max-width: 100%; }
.vccs-ai-accordion-item {
  background: var(--vccs-ai-surface);
  border: 1px solid var(--vccs-ai-border);
  border-left: 4px solid var(--vccs-ai-primary);
  border-radius: var(--vccs-ai-radius-sm);
  margin-bottom: var(--vccs-ai-space-sm);
}
.vccs-ai-accordion-item h3, .vccs-ai-accordion-item h4 { margin: 0; }
.vccs-ai-accordion-trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--vccs-ai-space-md);
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 18px 24px;
  font-family: var(--vccs-ai-font-slab);
  font-size: var(--vccs-ai-h4-size);
  font-weight: var(--vccs-ai-h4-weight);
  line-height: var(--vccs-ai-h4-lh);
  color: var(--vccs-ai-primary-dark);
  transition: background-color var(--vccs-ai-motion-fast);
}
.vccs-ai-accordion-trigger:hover { background: var(--vccs-ai-surface-primary-tint); }
.vccs-ai-accordion-icon { flex-shrink: 0; font-size: 22px; font-weight: 400; color: var(--vccs-ai-primary); line-height: 1; }
.vccs-ai-accordion-trigger[aria-expanded="true"] .vccs-ai-accordion-icon-closed { display: none; }
.vccs-ai-accordion-trigger[aria-expanded="false"] .vccs-ai-accordion-icon-open { display: none; }
.vccs-ai-accordion-panel {
  padding: 0 24px 20px;
  font-size: var(--vccs-ai-body-sm-size);
  line-height: var(--vccs-ai-body-sm-lh);
  color: var(--vccs-ai-on-surface-muted);
}
.vccs-ai-accordion-panel[hidden] { display: none; }
.vccs-ai-accordion-meta {
  display: flex; flex-wrap: wrap; gap: var(--vccs-ai-space-md);
  font-size: 12px; margin-top: var(--vccs-ai-space-md);
  padding-top: var(--vccs-ai-space-sm);
  border-top: 1px dashed var(--vccs-ai-border);
}
.vccs-ai-accordion-controls { display: flex; gap: var(--vccs-ai-space-md); margin-bottom: var(--vccs-ai-space-md); }
.vccs-ai-accordion-controls button {
  background: transparent; border: 1px solid var(--vccs-ai-border); cursor: pointer;
  padding: 6px 14px; border-radius: var(--vccs-ai-radius-sm); font-size: 13px; color: var(--vccs-ai-primary);
}
.vccs-ai-accordion-controls button:hover { background: var(--vccs-ai-surface-alt); }

/* ═══════════════ CHANGE LOG ═══════════════ */
.vccs-ai-changelog { font-size: var(--vccs-ai-body-sm-size); }
.vccs-ai-changelog dt { font-weight: 700; color: var(--vccs-ai-on-surface); }
.vccs-ai-changelog dd { margin: 0 0 var(--vccs-ai-space-sm) 0; }

/* ═══════════════ FORMS ═══════════════ */
.vccs-ai-field { margin-bottom: var(--vccs-ai-space-lg); }
.vccs-ai-field label, .vccs-ai-field legend {
  display: block; font-weight: 700; margin-bottom: 6px; color: var(--vccs-ai-on-surface);
}
.vccs-ai-field input[type="text"], .vccs-ai-field input[type="email"], .vccs-ai-field textarea, .vccs-ai-field select {
  width: 100%; max-width: 480px;
  font-family: var(--vccs-ai-font-slab); font-size: var(--vccs-ai-body-size);
  padding: 10px 12px;
  border: 1px solid var(--vccs-ai-border);
  border-radius: var(--vccs-ai-radius-sm);
}
.vccs-ai-field-hint { font-size: 13px; color: var(--vccs-ai-on-surface-muted); margin: 4px 0; }
.vccs-ai-field fieldset { border: 1px solid var(--vccs-ai-border); border-radius: var(--vccs-ai-radius-sm); padding: var(--vccs-ai-space-md); }
.vccs-ai-error-summary { border: 2px solid var(--vccs-ai-accent); border-radius: var(--vccs-ai-radius-sm); padding: var(--vccs-ai-space-md); margin-bottom: var(--vccs-ai-space-lg); }
.vccs-ai-error-summary h2 { color: var(--vccs-ai-accent); font-size: var(--vccs-ai-h4-size); margin-top: 0; }

/* ═══════════════ HELPFULNESS ═══════════════ */
.vccs-ai-helpfulness { display: flex; align-items: center; gap: var(--vccs-ai-space-md); font-size: 13px; }
.vccs-ai-helpfulness button { border: 1px solid var(--vccs-ai-border); background: var(--vccs-ai-surface); border-radius: var(--vccs-ai-radius-sm); padding: 6px 14px; cursor: pointer; }
.vccs-ai-helpfulness button:hover { background: var(--vccs-ai-surface-alt); }

/* ═══════════════ REDUCED MOTION / FORCED COLORS ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .vccs-ai *, .vccs-ai *::before, .vccs-ai *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* justification for the three !important above: identical to the carried-over
   rationale in design-language.css §13 — a universal rule at normal specificity
   cannot reliably outrank scattered host-template transition rules, and this is
   the only mechanism that guarantees the reduced-motion contract holds. */

@media (forced-colors: active) {
  .vccs-ai-button, .vccs-ai-card, .vccs-ai-accordion-item, .vccs-ai-status-banner { border: 1px solid CanvasText; }
  .vccs-ai *:focus-visible { outline: 2px solid Highlight; }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 767px) {
  .vccs-ai-hero h1 { font-size: 32px; }
  .vccs-ai-section-heading { font-size: 26px; }
  .vccs-ai-card-grid { grid-template-columns: 1fr; }
  .vccs-ai-band { padding: var(--vccs-ai-space-2xl) 0; }
  .vccs-ai-container { padding: 0 var(--vccs-ai-space-md); }
}

/* ═══════════════ LAYOUT UTILITIES ═══════════════
   Small, named, reused utilities — the alternative to any inline style
   attribute (forbidden in production fragments by the portability rule). */
.vccs-ai-icon--primary { color: var(--vccs-ai-primary); }
.vccs-ai-band--tight { padding-top: 0; }
.vccs-ai-callout--row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vccs-ai-space-md); justify-content: space-between;
}
.vccs-ai-callout--row p { margin: 0; }
.vccs-ai-cta-row { margin: var(--vccs-ai-space-lg) 0; }
.vccs-ai-flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--vccs-ai-space-sm); }

/* target size: interactive controls at least 24x24 CSS px (WCAG 2.5.8) */
.vccs-ai-button, .vccs-ai-accordion-trigger, .vccs-ai-helpfulness button,
.vccs-ai-accordion-controls button, .vccs-ai-breadcrumb a {
  min-height: 24px; min-width: 24px;
}