/*
 * Area Signals — snapshot-tiles, Minimal Data-Forward ("Spec Sheet") family.
 * Ported from vr-signals-designlab minimal/snapshot-tiles.tsx +
 * snapshot-tiles.module.css. No build step — plain committed CSS, same
 * precedent as the avm module (avm/includes/class-assets.php).
 *
 * Everything is scoped under .vr-as-snapshot.vr-as--minimal so this file
 * can never leak into the rest of the page. No bare element selectors.
 *
 * v1 is a fully static render — no count-up, no hairline/detail reveal
 * animation (those were JS-inview-gated in the design lab); every value
 * here is already the final, literal text.
 */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

.vr-as-snapshot.vr-as--minimal {
  /* light (default) tokens */
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;

  background-color: var(--vras-surface);
  color: var(--vras-ink-primary);
}

[data-theme="dark"] .vr-as-snapshot.vr-as--minimal {
  --vras-surface: #161715;
  --vras-ink-primary: #f2f2ed;
  --vras-ink-secondary: #b6bab0;
  --vras-ink-muted: #8a8f86;
  --vras-hairline: #2c2d2a;
  --vras-accent: #5da487;
}

[data-theme="light"] .vr-as-snapshot.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;
}

.vr-as-snapshot.vr-as--minimal .vr-as-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px;
}

@media (max-width: 640px) {
  .vr-as-snapshot.vr-as--minimal .vr-as-container {
    padding: 48px 16px;
  }
}

.vr-as-snapshot.vr-as--minimal .vr-as-eyebrow {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-snapshot.vr-as--minimal .vr-as-hero {
  display: block;
  margin-top: 16px;
}

.vr-as-snapshot.vr-as--minimal .vr-as-hero-value {
  display: inline-flex;
  align-items: baseline;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 650;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
}

.vr-as-snapshot.vr-as--minimal .vr-as-heading {
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--vras-ink-primary);
  margin: 0;
}

.vr-as-snapshot.vr-as--minimal .vr-as-heading--with-hero {
  margin-top: 12px;
}

.vr-as-snapshot.vr-as--minimal .vr-as-hairline {
  height: 1px;
  background-color: var(--vras-hairline);
  margin-top: 32px;
}

.vr-as-snapshot.vr-as--minimal .vr-as-dl {
  margin: 0;
}

.vr-as-snapshot.vr-as--minimal .vr-as-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--vras-hairline);
  transition: background-color 120ms ease;
}

.vr-as-snapshot.vr-as--minimal .vr-as-row:hover {
  background-color: color-mix(in srgb, var(--vras-ink-primary) 4%, transparent);
}

.vr-as-snapshot.vr-as--minimal .vr-as-term {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--vras-ink-secondary);
  margin: 0;
}

.vr-as-snapshot.vr-as--minimal .vr-as-value {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  margin: 0;
}

.vr-as-snapshot.vr-as--minimal .vr-as-footnote {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  color: var(--vras-ink-muted);
  margin-top: 24px;
}

.vr-as-snapshot.vr-as--minimal .vr-as-sr-only,
.vr-as-snapshot.vr-as--minimal .vr-as-sr-only-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Area Signals — market-gauge, Minimal Data-Forward ("Spec Sheet") family.
 * Ported from vr-signals-designlab minimal/market-gauge.tsx.
 *
 * .vr-as-market is a sibling section to .vr-as-snapshot (not a descendant),
 * so the --vras-* custom properties above don't cascade to it — redeclared
 * here with the SAME names/values rather than inventing a parallel token
 * system, per the family's existing light/dark/`[data-theme]` convention.
 */

.vr-as-market.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;

  background-color: var(--vras-surface);
  color: var(--vras-ink-primary);
}

[data-theme="dark"] .vr-as-market.vr-as--minimal {
  --vras-surface: #161715;
  --vras-ink-primary: #f2f2ed;
  --vras-ink-secondary: #b6bab0;
  --vras-ink-muted: #8a8f86;
  --vras-hairline: #2c2d2a;
  --vras-accent: #5da487;
}

[data-theme="light"] .vr-as-market.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;
}

.vr-as-market.vr-as--minimal .vr-as-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px;
}

@media (max-width: 640px) {
  .vr-as-market.vr-as--minimal .vr-as-container {
    padding: 48px 16px;
  }
}

.vr-as-market.vr-as--minimal .vr-as-eyebrow {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-market.vr-as--minimal .vr-as-market-hero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 650;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vras-ink-primary);
}

.vr-as-market.vr-as--minimal .vr-as-market-hero-suffix {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 0.35em;
  color: var(--vras-ink-secondary);
}

.vr-as-market.vr-as--minimal .vr-as-market-scale {
  margin-top: 32px;
}

.vr-as-market.vr-as--minimal .vr-as-market-scale-track {
  position: relative;
  height: 1px;
  background-color: var(--vras-hairline);
}

.vr-as-market.vr-as--minimal .vr-as-market-scale-tick {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--vras-accent);
}

.vr-as-market.vr-as--minimal .vr-as-market-scale-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--vras-ink-secondary);
}

.vr-as-market.vr-as--minimal .vr-as-market-dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--vras-hairline);
}

@media (min-width: 640px) {
  .vr-as-market.vr-as--minimal .vr-as-market-dl {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vr-as-market.vr-as--minimal .vr-as-term {
  display: block;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--vras-ink-secondary);
  margin: 0;
}

.vr-as-market.vr-as--minimal .vr-as-value {
  display: block;
  margin-top: 4px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.vr-as-market.vr-as--minimal .vr-as-value--accent {
  color: var(--vras-accent);
}

.vr-as-market.vr-as--minimal .vr-as-market-stat-period {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--vras-ink-muted);
}

.vr-as-market.vr-as--minimal .vr-as-footnote {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  color: var(--vras-ink-muted);
  margin-top: 24px;
}

/*
 * Area Signals — value-histogram, Minimal Data-Forward ("Spec Sheet") family.
 * Ported from vr-signals-designlab minimal/value-histogram.tsx. No
 * thisHomeValue marker in this v1 port — every bar shares one neutral fill,
 * no accent bucket (see AGENTS.md).
 *
 * .vr-as-value is a sibling section to .vr-as-snapshot/.vr-as-market (not a
 * descendant), so the --vras-* custom properties above don't cascade to it
 * — redeclared here with the SAME names/values, same convention as
 * .vr-as-market's block.
 */

.vr-as-value.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;

  background-color: var(--vras-surface);
  color: var(--vras-ink-primary);
}

[data-theme="dark"] .vr-as-value.vr-as--minimal {
  --vras-surface: #161715;
  --vras-ink-primary: #f2f2ed;
  --vras-ink-secondary: #b6bab0;
  --vras-ink-muted: #8a8f86;
  --vras-hairline: #2c2d2a;
  --vras-accent: #5da487;
}

[data-theme="light"] .vr-as-value.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;
}

.vr-as-value.vr-as--minimal .vr-as-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px;
}

@media (max-width: 640px) {
  .vr-as-value.vr-as--minimal .vr-as-container {
    padding: 48px 16px;
  }
}

.vr-as-value.vr-as--minimal .vr-as-eyebrow {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-value.vr-as--minimal .vr-as-hero {
  display: block;
  margin-top: 16px;
}

.vr-as-value.vr-as--minimal .vr-as-hero-value {
  display: inline-flex;
  align-items: baseline;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 650;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
}

.vr-as-value.vr-as--minimal .vr-as-heading {
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--vras-ink-primary);
  margin: 0;
}

.vr-as-value.vr-as--minimal .vr-as-heading--with-hero {
  margin-top: 12px;
}

.vr-as-value.vr-as--minimal .vr-as-value-chart {
  margin-top: 32px;
}

.vr-as-value.vr-as--minimal .vr-as-value-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  border-bottom: 1px solid var(--vras-hairline);
}

.vr-as-value.vr-as--minimal .vr-as-value-bar-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.vr-as-value.vr-as--minimal .vr-as-value-bar {
  width: 100%;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background-color: var(--vras-ink-secondary);
  opacity: 0.4;
}

.vr-as-value.vr-as--minimal .vr-as-value-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--vras-ink-secondary);
}

.vr-as-value.vr-as--minimal .vr-as-value-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--vras-hairline);
}

.vr-as-value.vr-as--minimal .vr-as-value-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.vr-as-value.vr-as--minimal .vr-as-term {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-value.vr-as--minimal .vr-as-value-stat-value {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 12px;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.vr-as-value.vr-as--minimal .vr-as-footnote {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  color: var(--vras-ink-muted);
  margin-top: 24px;
}

.vr-as-value.vr-as--minimal .vr-as-sr-only,
.vr-as-value.vr-as--minimal .vr-as-sr-only-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Area Signals — climate-curve, Minimal Data-Forward ("Spec Sheet") family.
 * Ported from vr-signals-designlab minimal/climate-curve.tsx. No SVG line
 * chart in this v1 port — the 12-month comfort-temperature series renders
 * as plain CSS bars, same technique as .vr-as-value's histogram bars above.
 *
 * .vr-as-climate is a sibling section to .vr-as-snapshot/.vr-as-market/
 * .vr-as-value (not a descendant), so the --vras-* custom properties above
 * don't cascade to it — redeclared here with the SAME names/values, same
 * convention as .vr-as-market/.vr-as-value's blocks.
 */

.vr-as-climate.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;

  background-color: var(--vras-surface);
  color: var(--vras-ink-primary);
}

[data-theme="dark"] .vr-as-climate.vr-as--minimal {
  --vras-surface: #161715;
  --vras-ink-primary: #f2f2ed;
  --vras-ink-secondary: #b6bab0;
  --vras-ink-muted: #8a8f86;
  --vras-hairline: #2c2d2a;
  --vras-accent: #5da487;
}

[data-theme="light"] .vr-as-climate.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;
}

.vr-as-climate.vr-as--minimal .vr-as-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px;
}

@media (max-width: 640px) {
  .vr-as-climate.vr-as--minimal .vr-as-container {
    padding: 48px 16px;
  }
}

.vr-as-climate.vr-as--minimal .vr-as-eyebrow {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-climate.vr-as--minimal .vr-as-hero {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.vr-as-climate.vr-as--minimal .vr-as-hero-value {
  display: inline-flex;
  align-items: baseline;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 650;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
}

.vr-as-climate.vr-as--minimal .vr-as-climate-hero-suffix {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 16px;
  color: var(--vras-ink-secondary);
}

.vr-as-climate.vr-as--minimal .vr-as-heading {
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--vras-ink-primary);
  margin: 0;
}

.vr-as-climate.vr-as--minimal .vr-as-heading--with-hero {
  margin-top: 12px;
}

.vr-as-climate.vr-as--minimal .vr-as-climate-chart {
  margin-top: 32px;
}

.vr-as-climate.vr-as--minimal .vr-as-climate-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  border-bottom: 1px solid var(--vras-hairline);
}

.vr-as-climate.vr-as--minimal .vr-as-climate-bar-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.vr-as-climate.vr-as--minimal .vr-as-climate-bar {
  width: 100%;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background-color: var(--vras-accent);
  opacity: 0.5;
}

.vr-as-climate.vr-as--minimal .vr-as-climate-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--vras-ink-secondary);
}

.vr-as-climate.vr-as--minimal .vr-as-climate-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--vras-hairline);
}

.vr-as-climate.vr-as--minimal .vr-as-climate-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.vr-as-climate.vr-as--minimal .vr-as-term {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-climate.vr-as--minimal .vr-as-climate-stat-value {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 12px;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.vr-as-climate.vr-as--minimal .vr-as-footnote {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  color: var(--vras-ink-muted);
  margin-top: 24px;
}

.vr-as-climate.vr-as--minimal .vr-as-sr-only,
.vr-as-climate.vr-as--minimal .vr-as-sr-only-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Area Signals — commute-bars, Minimal Data-Forward ("Spec Sheet") family.
 * Ported from vr-signals-designlab minimal/commute-bars.tsx. The TSX's real
 * SVG bars (ResizeObserver-measured pixel widths) + CSS count-up hero +
 * hover tooltips are NOT ported — mode-share bars render as plain CSS
 * `width: X%` fills inside a semantic `<dl>` (dt label / dd bar / dd
 * value), no SVG, no JS. The single family accent goes on the
 * most-common mode's bar (`mode.is_top`), matching the TSX's one
 * deliberate accent choice.
 *
 * .vr-as-commute is a sibling section to .vr-as-snapshot/.vr-as-market/
 * .vr-as-value/.vr-as-climate (not a descendant), so the --vras-* custom
 * properties above don't cascade to it — redeclared here with the SAME
 * names/values, same convention as the other 3 modules' blocks.
 */

.vr-as-commute.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;

  background-color: var(--vras-surface);
  color: var(--vras-ink-primary);
}

[data-theme="dark"] .vr-as-commute.vr-as--minimal {
  --vras-surface: #161715;
  --vras-ink-primary: #f2f2ed;
  --vras-ink-secondary: #b6bab0;
  --vras-ink-muted: #8a8f86;
  --vras-hairline: #2c2d2a;
  --vras-accent: #5da487;
}

[data-theme="light"] .vr-as-commute.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;
}

.vr-as-commute.vr-as--minimal .vr-as-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px;
}

@media (max-width: 640px) {
  .vr-as-commute.vr-as--minimal .vr-as-container {
    padding: 48px 16px;
  }
}

.vr-as-commute.vr-as--minimal .vr-as-eyebrow {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-commute.vr-as--minimal .vr-as-hero {
  display: block;
  margin-top: 16px;
}

.vr-as-commute.vr-as--minimal .vr-as-hero-value {
  display: inline-flex;
  align-items: baseline;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 650;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
}

.vr-as-commute.vr-as--minimal .vr-as-heading {
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--vras-ink-primary);
  margin: 0;
}

.vr-as-commute.vr-as--minimal .vr-as-heading--with-hero {
  margin-top: 12px;
}

.vr-as-commute.vr-as--minimal .vr-as-commute-summary {
  margin: 12px 0 0;
  max-width: 62ch;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vras-ink-secondary);
}

.vr-as-commute.vr-as--minimal .vr-as-commute-rows {
  margin: 32px 0 0;
}

.vr-as-commute.vr-as--minimal .vr-as-commute-row {
  display: grid;
  grid-template-columns: 132px 1fr 48px;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--vras-hairline);
}

.vr-as-commute.vr-as--minimal .vr-as-commute-row-label {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 12px;
  color: var(--vras-ink-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vr-as-commute.vr-as--minimal .vr-as-commute-row--top .vr-as-commute-row-label {
  color: var(--vras-ink-primary);
  font-weight: 500;
}

.vr-as-commute.vr-as--minimal .vr-as-commute-row-track {
  position: relative;
  height: 14px;
  margin: 0;
  border-left: 1px solid var(--vras-hairline);
}

.vr-as-commute.vr-as--minimal .vr-as-commute-row-bar {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background-color: var(--vras-ink-secondary);
  opacity: 0.4;
}

.vr-as-commute.vr-as--minimal .vr-as-commute-row--top .vr-as-commute-row-bar {
  background-color: var(--vras-accent);
  opacity: 1;
}

.vr-as-commute.vr-as--minimal .vr-as-commute-row-value {
  margin: 0;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--vras-ink-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.vr-as-commute.vr-as--minimal .vr-as-commute-row--top .vr-as-commute-row-value {
  color: var(--vras-ink-primary);
  font-weight: 500;
}

.vr-as-commute.vr-as--minimal .vr-as-commute-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--vras-hairline);
}

.vr-as-commute.vr-as--minimal .vr-as-commute-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.vr-as-commute.vr-as--minimal .vr-as-term {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-commute.vr-as--minimal .vr-as-commute-stat-value {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 12px;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.vr-as-commute.vr-as--minimal .vr-as-footnote {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  color: var(--vras-ink-muted);
  margin-top: 24px;
}

.vr-as-commute.vr-as--minimal .vr-as-sr-only,
.vr-as-commute.vr-as--minimal .vr-as-sr-only-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * Area Signals — schools-panel, Minimal Data-Forward ("Spec Sheet")
 * family. Fresh build against the live, VERIFIED `/api/v1/schools`
 * response shape (see Athena\AreaSignals::buildSchoolsView()'s docblock
 * and AGENTS.md — NOT the stale flat shape `docs/api-reference.md` in
 * `attom-api-repo` documents). A genuinely schools-focused module — NOT
 * the original design-lab exploration's housing-vintage/structure-census
 * "schools-panel" (see AGENTS.md for the departure). No SVG/JS: the hero
 * count and each school row (name, grade span, rating badge, distance,
 * district) are all final literal strings resolved in PHP.
 *
 * .vr-as-schools is a sibling section to .vr-as-snapshot/.vr-as-market/
 * .vr-as-value/.vr-as-climate/.vr-as-commute (not a descendant), so the
 * --vras-* custom properties above don't cascade to it — redeclared here
 * with the SAME names/values, same convention as the other 5 modules'
 * blocks.
 */

.vr-as-schools.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;

  background-color: var(--vras-surface);
  color: var(--vras-ink-primary);
}

[data-theme="dark"] .vr-as-schools.vr-as--minimal {
  --vras-surface: #161715;
  --vras-ink-primary: #f2f2ed;
  --vras-ink-secondary: #b6bab0;
  --vras-ink-muted: #8a8f86;
  --vras-hairline: #2c2d2a;
  --vras-accent: #5da487;
}

[data-theme="light"] .vr-as-schools.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;
}

.vr-as-schools.vr-as--minimal .vr-as-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px;
}

@media (max-width: 640px) {
  .vr-as-schools.vr-as--minimal .vr-as-container {
    padding: 48px 16px;
  }
}

.vr-as-schools.vr-as--minimal .vr-as-eyebrow {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-schools.vr-as--minimal .vr-as-hero {
  display: block;
  margin-top: 16px;
}

.vr-as-schools.vr-as--minimal .vr-as-hero-value {
  display: inline-flex;
  align-items: baseline;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 650;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
}

.vr-as-schools.vr-as--minimal .vr-as-heading {
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--vras-ink-primary);
  margin: 0;
}

.vr-as-schools.vr-as--minimal .vr-as-heading--with-hero {
  margin-top: 12px;
}

.vr-as-schools.vr-as--minimal .vr-as-schools-rows {
  margin: 32px 0 0;
}

.vr-as-schools.vr-as--minimal .vr-as-schools-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--vras-hairline);
}

.vr-as-schools.vr-as--minimal .vr-as-schools-row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--vras-ink-primary);
}

.vr-as-schools.vr-as--minimal .vr-as-schools-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--vras-accent);
  border: 1px solid var(--vras-accent);
}

.vr-as-schools.vr-as--minimal .vr-as-schools-row-meta {
  margin: 4px 0 0;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 12px;
  color: var(--vras-ink-secondary);
}

.vr-as-schools.vr-as--minimal .vr-as-footnote {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  color: var(--vras-ink-muted);
  margin-top: 24px;
}

.vr-as-schools.vr-as--minimal .vr-as-sr-only,
.vr-as-schools.vr-as--minimal .vr-as-sr-only-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * Area Signals — scorecard, Minimal Data-Forward ("Spec Sheet") family.
 * Ported from vr-signals-designlab minimal/scorecard.tsx — the SEVENTH and
 * FINAL Area Signals module (all 7 design-lab modules now ported). No SVG/
 * JS/count-up/reveal animation, same convention as every other module.
 * Composite grade renders as a hairline-outlined mono "stamp", never a
 * filled/colored badge — the minimal family's one accent hue stays
 * reserved for magnitude (row progress fills), never a qualitative
 * "good/bad" color.
 *
 * .vr-as-scorecard is a sibling section to .vr-as-snapshot/.vr-as-market/
 * .vr-as-value/.vr-as-climate/.vr-as-commute/.vr-as-schools (not a
 * descendant), so the --vras-* custom properties above don't cascade to it
 * — redeclared here with the SAME names/values, same convention as the
 * other 6 modules' blocks.
 */

.vr-as-scorecard.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;

  background-color: var(--vras-surface);
  color: var(--vras-ink-primary);
}

[data-theme="dark"] .vr-as-scorecard.vr-as--minimal {
  --vras-surface: #161715;
  --vras-ink-primary: #f2f2ed;
  --vras-ink-secondary: #b6bab0;
  --vras-ink-muted: #8a8f86;
  --vras-hairline: #2c2d2a;
  --vras-accent: #5da487;
}

[data-theme="light"] .vr-as-scorecard.vr-as--minimal {
  --vras-surface: #fafaf7;
  --vras-ink-primary: #141613;
  --vras-ink-secondary: #5a5f58;
  --vras-ink-muted: #6e736b;
  --vras-hairline: #e3e2db;
  --vras-accent: #256650;
}

.vr-as-scorecard.vr-as--minimal .vr-as-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px;
}

@media (max-width: 640px) {
  .vr-as-scorecard.vr-as--minimal .vr-as-container {
    padding: 48px 16px;
  }
}

.vr-as-scorecard.vr-as--minimal .vr-as-eyebrow {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vras-ink-muted);
  margin: 0;
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-hero-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-hero-value {
  display: inline-flex;
  align-items: baseline;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 650;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-hero-suffix {
  margin-left: 8px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 0.35em;
  color: var(--vras-ink-secondary);
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-grade-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  padding: 8px 16px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vras-ink-primary);
  border: 1px solid var(--vras-hairline);
}

.vr-as-scorecard.vr-as--minimal .vr-as-heading {
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--vras-ink-primary);
  margin: 0;
}

.vr-as-scorecard.vr-as--minimal .vr-as-heading--with-hero {
  margin-top: 4px;
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-summary {
  margin: 12px 0 0;
  max-width: 62ch;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vras-ink-secondary);
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-rows {
  margin: 32px 0 0;
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "label score grade"
    "basis basis basis";
  align-items: baseline;
  column-gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--vras-hairline);
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-row-label {
  grid-area: label;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--vras-ink-primary);
  margin: 0;
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-row-score {
  grid-area: score;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 24px;
  color: var(--vras-ink-primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-align: right;
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-row-grade {
  grid-area: grade;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 13px;
  color: var(--vras-ink-secondary);
  margin: 0;
  text-align: right;
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-row-basis {
  grid-area: basis;
  margin: 8px 0 0;
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-row-basis p {
  margin: 0;
  max-width: 46ch;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--vras-ink-secondary);
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-track {
  position: relative;
  margin-top: 8px;
  height: 2px;
  width: 100%;
  max-width: 220px;
  background-color: var(--vras-hairline);
}

.vr-as-scorecard.vr-as--minimal .vr-as-scorecard-fill {
  display: block;
  height: 100%;
  background-color: var(--vras-accent);
}

.vr-as-scorecard.vr-as--minimal .vr-as-footnote {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: 11px;
  color: var(--vras-ink-muted);
  margin-top: 24px;
}

.vr-as-scorecard.vr-as--minimal .vr-as-sr-only,
.vr-as-scorecard.vr-as--minimal .vr-as-sr-only-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}