/* Vehicle-cabin ambient exposure study.
   Scoped to this article. Everything here rides on top of /pages.css, which
   supplies the shared page shell, container, hero and section rhythm.

   Two layout rules govern the page:

   1. One spacing scale. Every gap and margin below comes from the --vx-space-*
      steps rather than from a value picked per component, so the vertical
      rhythm reads as one system.
   2. Prose gets a measure; data does not. The shared .container runs to 1360px,
      which is far too wide for reading - so headings and paragraphs are capped
      at a comfortable line length, while cards, tables and the chart keep the
      full width they need. */

.vx-hero,
.page-section {
  --vx-space-2xs: 0.35rem;
  --vx-space-xs: 0.5rem;
  --vx-space-sm: 0.75rem;
  --vx-space-md: 1rem;
  --vx-space-lg: 1.5rem;
  --vx-space-xl: 2rem;

  /* Comfortable reading measures. */
  --vx-measure: 72ch;
  --vx-measure-tight: 62ch;
}

/* ── Reading measure ───────────────────────────────────────────────────────
   Applied to direct children of the section container only, so anything
   deliberately laid out wide (cards, tables, figures) is untouched. */

.page-main .page-section > .container > h2,
.page-main .page-section > .container > p,
.page-main .page-section > .container > .vx-refs,
.page-main .page-section > .container > .vx-limits,
.page-main .page-section > .container > .vx-actions,
.page-main .page-section > .container > .vx-downloads {
  max-width: var(--vx-measure);
}

.page-main .page-section > .container > h2 {
  margin-bottom: var(--vx-space-md);
}

.page-main .page-section > .container > p {
  margin-bottom: var(--vx-space-md);
}

.page-main .page-section > .container > p:last-child {
  margin-bottom: 0;
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   .page-hero__eyebrow is already inline-flex in pages.css, and
   .page-hero__summary already carries its size, colour and bottom margin.
   Only the reading measures are added here. */

.vx-hero .page-hero__title {
  max-width: 24ch;
}

.vx-hero .page-hero__summary {
  max-width: var(--vx-measure-tight);
}

.vx-hero .page-hero__summary:last-of-type {
  margin-bottom: 0;
}

.vx-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-xs);
  margin: var(--vx-space-lg) 0 0;
  padding: 0;
}

.vx-badges li {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--vx-space-2xs) var(--vx-space-sm);
  border-radius: 999px;
  border: 1px solid rgba(0, 230, 255, 0.35);
  color: rgba(0, 230, 255, 0.9);
  background: rgba(0, 230, 255, 0.06);
}

/* ── Companion callout ─────────────────────────────────────────────────── */

.vx-callout {
  max-width: var(--vx-measure);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid rgba(0, 230, 255, 0.7);
  border-radius: 10px;
  padding: var(--vx-space-lg);
  background: rgba(255, 255, 255, 0.03);
}

.vx-callout h2 {
  margin-top: 0;
  margin-bottom: var(--vx-space-sm);
  font-size: 1.15rem;
}

.vx-callout p {
  margin-bottom: var(--vx-space-sm);
}

.vx-callout p:last-child {
  margin-bottom: 0;
}

.vx-link {
  font-weight: 600;
  color: rgba(0, 230, 255, 0.95);
}

/* ── Reference list ────────────────────────────────────────────────────── */

.vx-refs {
  list-style: none;
  padding: 0;
  margin: var(--vx-space-lg) 0 0;
  display: grid;
  gap: var(--vx-space-sm);
}

.vx-refs li {
  padding: var(--vx-space-md) var(--vx-space-lg);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  line-height: 1.6;
}

.vx-note {
  max-width: var(--vx-measure);
  margin-top: var(--vx-space-lg);
  font-size: 0.9rem;
  opacity: 0.78;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  padding-left: var(--vx-space-md);
  line-height: 1.6;
}

/* ── Summary cards ─────────────────────────────────────────────────────── */

.vx-cards {
  list-style: none;
  padding: 0;
  margin: var(--vx-space-xl) 0 0;
  display: grid;
  gap: var(--vx-space-md);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.vx-card {
  display: flex;
  flex-direction: column;
  padding: var(--vx-space-lg);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.vx-card__value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(0, 230, 255, 0.95);
}

.vx-card__label {
  margin: var(--vx-space-xs) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.vx-card__detail {
  margin: var(--vx-space-2xs) 0 0;
  font-size: 0.83rem;
  opacity: 0.75;
  line-height: 1.55;
}

.vx-headline {
  max-width: var(--vx-measure);
  margin-top: var(--vx-space-xl);
}

.vx-headline p {
  margin-bottom: var(--vx-space-md);
}

.vx-headline p:last-child {
  margin-bottom: 0;
}

.vx-headline strong {
  color: rgba(0, 230, 255, 0.95);
}

/* ── Chart ─────────────────────────────────────────────────────────────── */

.vx-figure {
  margin: var(--vx-space-xl) 0 0;
}

.vx-chart {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  padding: var(--vx-space-sm) 0;
}

.vx-bar {
  fill: rgba(0, 230, 255, 0.32);
  stroke: rgba(0, 230, 255, 0.75);
  stroke-width: 1;
}

.vx-mkt {
  stroke: #ffffff;
  stroke-width: 2;
}

.vx-rule {
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.vx-rule--hot { stroke: rgba(255, 96, 96, 0.75); }
.vx-rule--warm { stroke: rgba(255, 176, 82, 0.7); }
.vx-rule--crt { stroke: rgba(255, 255, 255, 0.4); }
.vx-rule--cold { stroke: rgba(120, 180, 255, 0.7); }

.vx-rule-label,
.vx-axis {
  fill: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-family: inherit;
}

.vx-axis--minor {
  fill: rgba(255, 255, 255, 0.45);
  font-size: 10px;
}

.vx-figure figcaption {
  max-width: var(--vx-measure);
  margin-top: var(--vx-space-sm);
  font-size: 0.85rem;
  opacity: 0.72;
  line-height: 1.6;
}

/* ── Tables ────────────────────────────────────────────────────────────── */

.vx-scroll {
  margin-top: var(--vx-space-xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vx-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.vx-table caption {
  caption-side: top;
  text-align: left;
  max-width: var(--vx-measure);
  font-size: 0.85rem;
  opacity: 0.75;
  padding-bottom: var(--vx-space-md);
  line-height: 1.6;
}

.vx-table th,
.vx-table td {
  padding: var(--vx-space-xs) var(--vx-space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  text-align: right;
  white-space: nowrap;
}

.vx-table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.8;
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.vx-table th[scope='row'],
.vx-table thead th:first-child {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.vx-table td {
  font-variant-numeric: tabular-nums;
}

/* Zebra striping keeps a 165-row table readable across its width. */
.vx-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.vx-table--dense {
  min-width: 560px;
  font-size: 0.85rem;
}

.vx-table--check {
  min-width: 480px;
}

/* ── Details, downloads, provenance ────────────────────────────────────── */

.vx-details {
  max-width: var(--vx-measure);
  margin-top: var(--vx-space-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: var(--vx-space-md) var(--vx-space-lg);
  background: rgba(255, 255, 255, 0.02);
}

.vx-details summary {
  cursor: pointer;
  font-weight: 600;
}

.vx-details[open] summary {
  margin-bottom: var(--vx-space-xs);
}

.vx-downloads {
  list-style: none;
  padding: 0;
  margin: var(--vx-space-lg) 0 0;
  display: grid;
  gap: var(--vx-space-sm);
}

.vx-downloads li {
  display: flex;
  flex-direction: column;
  gap: var(--vx-space-2xs);
  padding: var(--vx-space-md) var(--vx-space-lg);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.vx-downloads a {
  font-weight: 600;
  word-break: break-word;
}

.vx-downloads span {
  font-size: 0.83rem;
  opacity: 0.72;
}

.vx-provenance {
  margin-top: var(--vx-space-xl);
}

.vx-provenance h3 {
  max-width: var(--vx-measure);
  font-size: 1rem;
  margin-bottom: var(--vx-space-md);
}

.vx-meta {
  max-width: var(--vx-measure);
  margin: 0 0 var(--vx-space-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.vx-meta__row {
  display: grid;
  grid-template-columns: minmax(160px, 32%) 1fr;
  gap: var(--vx-space-sm);
  padding: var(--vx-space-sm) var(--vx-space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.vx-meta__row:last-child {
  border-bottom: 0;
}

.vx-meta dt {
  font-size: 0.85rem;
  opacity: 0.72;
}

.vx-meta dd {
  margin: 0;
  font-size: 0.85rem;
  word-break: break-all;
  line-height: 1.5;
}

/* ── Limitations and actions ───────────────────────────────────────────── */

.vx-limits,
.vx-actions {
  list-style: none;
  padding: 0;
  margin: var(--vx-space-lg) 0 0;
  display: grid;
  gap: var(--vx-space-sm);
}

.vx-limits li,
.vx-actions li {
  padding: var(--vx-space-md) var(--vx-space-lg);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  line-height: 1.65;
}

.vx-limits strong,
.vx-actions strong {
  display: block;
  margin-bottom: var(--vx-space-2xs);
}

.vx-limits span {
  font-size: 0.9rem;
  opacity: 0.8;
}

.vx-cta {
  margin-top: var(--vx-space-xl);
}

/* ── Narrow viewports ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .vx-meta__row {
    grid-template-columns: 1fr;
    gap: var(--vx-space-2xs);
  }

  .vx-card__value {
    font-size: 1.3rem;
  }

  .vx-callout,
  .vx-refs li,
  .vx-limits li,
  .vx-actions li,
  .vx-downloads li,
  .vx-details {
    padding: var(--vx-space-md);
  }
}