/* ── Margin utilities ────────────────────────────────────── */
.m-0  { margin: 0; }
.mb-4 { margin-bottom: var(--s4); }
.mb-5 { margin-bottom: var(--s5); }
.mb-6 { margin-bottom: var(--s6); }
.mb-7 { margin-bottom: var(--s7); }
.mb-9 { margin-bottom: var(--s9); }
.mt-auto { margin-top: auto; }

/* ── Text size utilities ─────────────────────────────────── */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-md); }

/* ── Text color utilities ────────────────────────────────── */
.text-green  { color: var(--green); }
.text-amber  { color: var(--amber); }
.text-red    { color: var(--red); }

/* ── Font weight utilities ───────────────────────────────── */
.fw-600 { font-weight: 600; }

/* ── Line height utilities ───────────────────────────────── */
.lh-loose { line-height: var(--lh-body); }

/* ── Badge anchor (removes default link underline) ───────── */
a.badge {
  text-decoration: none;
}
a.badge:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* ── Badge size variants ─────────────────────────────────── */
.badge--sm {
  font-size: var(--fs-xs);
}
.badge--lg {
  padding: 0.4rem 0.75rem;
}
.search-shortcut-label {
  font-size: var(--fs-sm);
}

/* ── Note item anchor ────────────────────────────────────── */
a.note-item {
  text-decoration: none;
  color: inherit;
}

/* ── Note item sub-elements ──────────────────────────────── */
.note-item__location {
  font-size: var(--fs-xs);
  margin-top: var(--s2);
  color: var(--text-dim);
}
.note-item__tags {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
}

/* ── Lab notes field-site map ────────────────────────────── */
.notes-map-section {
  padding: var(--s6) 0;
}
.notes-field-map {
  height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-light);
  margin-top: var(--s4);
}
@media (min-width: 600px) {
  .notes-field-map { height: 400px; }
}

/* ── Note type filter tabs ───────────────────────────────── */
.note-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}

/* ── Page hero extras ────────────────────────────────────── */
.page-hero__tags {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s5);
}
.breadcrumb-sep {
  opacity: 0.5;
  margin: 0 4px;
}
.hero-location {
  font-size: var(--fs-sm);
}
.edu-audience {
  font-size: var(--fs-md);
}

/* ── Publications listing ────────────────────────────────── */
.pub-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}
.pub-year-header {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: var(--s8) 0 var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.pub-year-header:first-child {
  margin-top: var(--s4);
}
.pub-list {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}
.pub-card {
  padding: var(--s5) var(--s6);
  background: var(--surface-2);
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
}
.pub-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.pub-card__year {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pub-card__title {
  margin: 0 0 0.5rem;
  font-size: var(--fs-xl);
  line-height: var(--lh-title);
}
.pub-card__byline {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin-bottom: var(--s3);
}
.pub-card__doi {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--s3);
}
.pub-card__summary {
  margin-top: var(--s3);
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-base);
}
.pub-card__summary-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--s2);
}
.pub-card__actions {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s5);
}
.pub-empty {
  padding: var(--s7);
  text-align: center;
}

/* ── Member profile publications ─────────────────────────── */
.member-pubs {
  margin-top: var(--s6);
}
.member-pub-list {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  margin-top: var(--s4);
}
.member-pub-item {
  padding: var(--s4) var(--s5);
  background: var(--surface-2);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.member-pub-title {
  font-weight: 600;
  margin-bottom: var(--s1);
}
.member-pub-byline {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* ── Education enquire section ───────────────────────────── */
.enquire-subject {
  font-size: var(--fs-xs);
}

/* ── Citation block (data citation on publications/data pages) ── */
.citation-block {
  padding: var(--s4);
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

/* ── Annual report page — key metrics ───────────────────── */
.annual-report-period {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text-dim);
}
.annual-report-metrics {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.metric-card {
  padding: var(--s5);
  text-align: center;
}
.metric-card__value {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--accent);
}
.metric-card__label {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: var(--s2);
}
.metric-card__value--red   { color: var(--red); }
.metric-card__value--amber { color: var(--amber); }
.metric-card__value--green { color: var(--green); }

/* ── Annual report index — report list ──────────────────── */
.report-list {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
a.report-list-item {
  text-decoration: none;
  color: inherit;
  display: block;
}
a.report-list-item:hover .card {
  border-color: var(--accent-dim);
}
.report-card {
  padding: var(--s6);
  display: flex;
  align-items: baseline;
  gap: var(--s6);
}
.report-card__year {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--accent);
  min-width: 4rem;
}
.report-card__title {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--heading);
  margin-bottom: var(--s2);
}
.report-card__meta {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ── Press page ──────────────────────────────────────────── */
.press-quote {
  border-left: 3px solid var(--accent);
  padding-left: var(--s5);
  margin: 0;
  color: var(--heading);
  font-size: var(--fs-xl);
  line-height: var(--lh-body);
}
.press-note {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-top: var(--s3);
}
.press-logo-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.press-logo-card {
  text-align: center;
  padding: var(--s6);
}
.press-logo-label {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  margin-bottom: var(--s3);
}
.press-logo-download {
  display: block;
  margin-top: var(--s4);
  font-size: var(--fs-sm);
  color: var(--accent);
}
.press-logo-download:hover {
  text-decoration: underline;
}
.press-facts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  max-width: 600px;
}
.press-facts-table tr {
  border-bottom: 1px solid var(--border);
}
.press-facts-table tr:last-child {
  border-bottom: none;
}
.press-facts-table td {
  padding: var(--s3) var(--s4);
}
.press-facts-table td:first-child {
  color: var(--text-dim);
  width: 180px;
}
.press-mention-list {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
/* Pre-launch panel — shown on the homepage data section + /data/ dashboard while
   no real hardware is logging, in place of empty reading cards / blank charts. */
.prelaunch__lead {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: var(--s3);
}
.prelaunch p { max-width: var(--w-prose); }

.press-mention {
  border-left: 2px solid var(--border);
  padding-left: var(--s5);
}
.press-mention__meta {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.press-mention__headline {
  color: var(--heading);
  text-decoration: none;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  display: block;
}
.press-mention__headline:hover {
  color: var(--accent-bright);
}

/* ── Partners page CTA ───────────────────────────────────── */
.section-cta {
  text-align: center;
  margin-top: var(--s7);
}
.section-cta p {
  max-width: 640px;
  margin: 1rem auto;
}
.section-cta .btn-primary {
  margin-top: var(--s4);
}
.partner-grid {
  margin-top: var(--s5);
}

/* ── Generic section grid (margin-top after a heading) ───── */
.section-grid {
  margin-top: var(--s5);
}

/* ── Info / notice box ───────────────────────────────────── */
.info-box {
  padding: var(--s6);
  background: var(--surface-2);
  border-radius: var(--radius);
  margin-top: var(--s5);
}

/* ── Opportunity cards ───────────────────────────────────── */
.opp-card-category {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: var(--s2);
}
.opp-card-title {
  margin: 0 0 0.75rem;
  font-size: var(--fs-lg);
}
.opp-card-body {
  font-size: var(--fs-base);
  margin: 0 0 1rem;
}
.opp-card-link {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--accent);
}
.opp-card-link:hover {
  color: var(--accent-bright);
}

/* ── Contact page ────────────────────────────────────────── */
.contact-direct {
  display: flex;
  flex-direction: column;
  gap: var(--s7);
}
.contact-email-link {
  font-size: var(--fs-base);
}
.contact-success-msg {
  line-height: var(--lh-body);
}

/* ── Instrument index page ───────────────────────────────── */
.open-hardware-note {
  font-size: var(--fs-base);
}

/* ── Station live widget alignment ──────────────────────── */
.station-live--end {
  justify-content: flex-end;
}

/* ── Home page charts & legend ───────────────────────────── */
.card-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s3);
}
.card-chart-header .card__label {
  margin: 0;
}
.chart-legend__swatch--accent { background: var(--accent); }
.chart-legend__swatch--green  { background: var(--green); }
.chart-legend__swatch--amber  { background: var(--amber); }
.map-legend {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.pipeline-section-top {
  border-top: 1px dashed var(--border);
  padding-top: var(--s5);
}
.home-gap-intro {
  font-size: var(--fs-base);
}
.home-prog-link-accent  { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.home-prog-link-amber   { font-size: var(--fs-sm); font-weight: 600; color: var(--amber); }
.home-prog-link-green   { font-size: var(--fs-sm); font-weight: 600; color: var(--green); }
.home-section-link      { font-size: var(--fs-md); font-weight: 600; }
.home-open-source-note  { font-size: var(--fs-base); }
.note-item--placeholder {
  border-bottom: 1px solid var(--border);
  padding: var(--s4) 0;
}
.note-item--placeholder .note-item__title,
.note-item--placeholder .note-item__summary {
  color: var(--text-dim);
}
.section-alt--pb {
  padding-bottom: var(--s8);
}

/* ── API docs page ───────────────────────────────────────── */
.api-intro {
  max-width: var(--w-prose);
  color: var(--text-muted);
  margin-bottom: var(--s5);
}
.api-base-url {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--s6);
}
.endpoint-list {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}
.endpoint-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.endpoint-header {
  background: var(--surface);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.method-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--accent);
  color: var(--bg);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.method-badge--post {
  background: var(--amber);
  color: var(--bg);
}
.method-badge--widget {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
  border: 1px solid var(--green);
}
.method-badge--cite {
  background: rgba(var(--amber-rgb), 0.15);
  color: var(--amber);
  border: 1px solid var(--amber);
}
.endpoint-path {
  font-size: var(--fs-base);
  color: var(--accent);
}
.endpoint-body {
  padding: var(--s5);
}
.endpoint-desc {
  color: var(--text-muted);
  margin-bottom: var(--s4);
}
.api-example {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.api-example__label {
  color: var(--text-dim);
  margin-bottom: var(--s2);
  font-size: var(--fs-xs);
}
.api-fields-header {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-bottom: var(--s3);
}
.field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.field-table thead tr {
  border-bottom: 1px solid var(--border);
}
.field-table tbody tr {
  border-bottom: 1px solid rgba(100, 120, 160, 0.1);
}
.field-table tbody tr:last-child {
  border-bottom: none;
}
.field-table th {
  text-align: left;
  padding: var(--s2) var(--s3);
  color: var(--text-dim);
}
.field-table td {
  padding: var(--s2) var(--s3);
}
.field-table td:first-child {
  font-family: var(--font-mono);
  color: var(--accent);
}
.field-table td:nth-child(2) {
  color: var(--text-dim);
}
.quality-flag--ok     { color: var(--green); }
.quality-flag--suspect { color: var(--amber); }
.quality-flag--invalid { color: var(--red); }
.api-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s4);
}
.api-station-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.api-station-table tr {
  border-bottom: 1px solid var(--border);
}
.api-station-table tr:last-child {
  border-bottom: none;
}
.api-station-table th,
.api-station-table td {
  text-align: left;
  padding: var(--s3) var(--s4);
}
.api-station-table th {
  color: var(--text-muted);
}
.api-station-table td:first-child {
  color: var(--accent);
}

/* ── Data page ───────────────────────────────────────────── */
.badge--cta {
  background: var(--accent);
  color: var(--bg);
}
.data-legend {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: var(--s1);
  vertical-align: middle;
}
.legend-dot--active { background: var(--green); }
.legend-dot--building { background: var(--amber); }
.legend-dot--planned {
  background: transparent;
  border: 1.5px solid var(--text-dim);
}
.legend-dot--planned-env {
  background: transparent;
  border: 2px solid var(--text-dim);
}
.legend-dot--planned-muon {
  background: transparent;
  border: 2px solid var(--amber);
}
.legend-dot--openaq {
  background: #e879f9;
}
.data-comparison {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.data-stat-card {
  flex: 1;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  text-align: center;
}
.data-stat-card__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--s2);
}
.data-stat-card__sublabel {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: var(--s1);
}
.data-section-note {
  max-width: var(--w-prose);
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin-bottom: var(--s5);
}
.data-timeseries-note {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: var(--s2);
}
.data-richtext-desc {
  margin-bottom: var(--s5);
}
.data-diurnal-desc {
  max-width: var(--w-prose);
  margin-bottom: var(--s5);
}
.data-station-block {
  margin-bottom: var(--s7);
}
.data-station-heading {
  font-size: var(--fs-lg);
  margin-bottom: var(--s3);
  font-family: var(--font-mono);
}
.data-station-heading__meta {
  color: var(--text-muted);
  font-weight: 400;
}
.citation-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s6);
  margin-bottom: var(--s7);
}
.citation-box h2 {
  margin-bottom: var(--s4);
}
.citation-block--data {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-body);
  margin-bottom: var(--s5);
}
.citation-actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: center;
}
.citation-link {
  font-size: var(--fs-md);
  color: var(--accent);
}
.citation-link:hover {
  color: var(--accent-bright);
}
.citation-link--muted {
  color: var(--text-muted);
}
.citation-separator {
  color: var(--border);
}
.citation-note {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.data-section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  /* The eyebrow label inside owns the section's heading rhythm; cancel its own
     bottom margin so the link sits flush-centred and the row's spacing is even. */
  margin-bottom: var(--s5);
}
.data-section-heading-row .section__label {
  margin-bottom: 0;
}

/* ── Station card stats row ──────────────────────────── */
.station-card-stats {
  display: flex;
  gap: var(--s5);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-light);
}
.station-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.station-card-stat__value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--heading);
}
.station-card-stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Data download form ───────────────────────────────── */
.data-dl-form {
  margin-top: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5);
}
.data-dl-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s4);
}
.data-dl-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.data-dl-form__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.data-dl-form__input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  padding: 6px 10px;
  transition: border-color 0.15s;
}
.data-dl-form__input:focus:not(:focus-visible) { outline: none; }
.data-dl-form__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
}
.data-dl-form__footer {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
  flex-wrap: wrap;
}
.data-dl-form__note {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-family: var(--font-mono);
}
/* ── Chart container heights ─────────────────────────────── */
.chart-sm  { height: 160px; }
.chart-170 { height: 170px; }
.chart-md  { height: 180px; }
.chart-lg  { height: 220px; }
.chart-xl  { height: 240px; }
.chart-xxl { height: 320px; }
.chart-map {
  height: 320px;
  width: 100%;
}
.chart-legend--who {
  color: rgba(var(--amber-rgb), 0.7);
}

.data-api-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  margin-top: var(--s4);
}
.data-api-table tr {
  border-bottom: 1px solid var(--border);
}
.data-api-table tr:last-child {
  border-bottom: none;
}
.data-api-table th,
.data-api-table td {
  text-align: left;
  padding: var(--s3) var(--s4);
}
.data-api-table th {
  color: var(--text-muted);
}
.data-api-table td:first-child {
  color: var(--accent);
}
.data-api-table td:last-child {
  color: var(--text-muted);
}