/* Material detail page */

.md__hero {
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;
  flex-wrap: wrap;
}

.md__info {
  flex: 1;
  min-width: 14rem;
}

/* .md__group uses .eyebrow .eyebrow--lg in markup. */
.md__group {
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-1);
}

.md__title {
  font-family: var(--font-playfair-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-regular);
  color: var(--ink-1);
  margin: 0 0 var(--space-2);
}

.md__locality {
  font-family: var(--font-barlow);
  font-size: var(--fs-base);
  color: var(--ink-7);
  margin-bottom: var(--space-6);
}

/* Properties list */
.md__props {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  font-family: var(--font-barlow);
  font-size: var(--fs-base);
}

.md__props dt {
  color: var(--ink-7);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-base);
}

.md__props dd {
  margin: 0;
  color: var(--ink-3);
}

/* Illuminant swatch columns */
.md__swatches {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.md__swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.md__swatch-gradient {
  width: 4rem;
  height: 12rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* .md__swatch-label uses .eyebrow in markup; the heavier weight reads better
   against the gradient-coloured swatches sitting just above. */
.md__swatch-label {
  font-weight: var(--fw-semi);
}

/* Depth strip */
.md__depth-strip {
  margin-top: var(--space-10);
}

/* .md__section-title uses .eyebrow .eyebrow--lg in markup. */
.md__section-title {
  letter-spacing: var(--tracking-wider);
  margin: 0 0 var(--space-3);
}

.md__depth-row {
  display: flex;
  gap: var(--space-2);
}

.md__depth-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.md__depth-color {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.md__depth-label {
  font-family: var(--font-barlow);
  font-size: var(--fs-2xs);
  color: var(--ink-8);
  font-variant-numeric: tabular-nums;
}

/* Absorption spectrum chart */
.md__spectrum {
  margin-top: var(--space-10);
}

.absorption-chart {
  max-width: 100%;
  height: auto;
}

.absorption-chart__tick {
  font-family: var(--font-barlow);
  font-size: var(--fs-2xs);
  fill: var(--ink-8);
}

.absorption-chart__label {
  font-family: var(--font-barlow);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  fill: var(--ink-7);
}

.absorption-chart__tooltip {
  font-family: var(--font-barlow);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  fill: rgba(255, 255, 255, 0.9);
}

/* ── Refraction-fit cards (materials detail page) ────────────────── */

.md__fits {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Sized to fit the 600px RefractionChart plus card padding. Long
     Sellmeier equations that exceed this width scroll horizontally. */
  max-width: 42rem;
}

/* .md__fit composes .surface-card for bg/radius/shadow/hover-lift. */
.md__fit {
  padding: var(--space-4) var(--space-5);
}

.md__fit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.md__fit-title {
  font-family: var(--font-barlow);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  margin: 0;
}

.md__fit-source {
  color: var(--ink-6);
  font-weight: var(--fw-regular);
  margin-left: var(--space-1);
}

.md__fit-badges {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.md__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--paper-4);
  color: var(--ink-4);
  font-family: var(--font-barlow);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-base);
  white-space: nowrap;
}

.md__badge--curated {
  background: var(--accent-gold-soft);
  color: var(--accent-gold);
}

.md__fit-reference {
  font-family: var(--font-barlow);
  font-size: var(--fs-sm);
  color: var(--ink-6);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--paper-6);
  line-height: 1.5;
}

.md__fit-reference a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md__fit-range {
  font-family: var(--font-barlow);
  font-size: var(--fs-xs);
  color: var(--ink-8);
  margin: var(--space-1) 0 0;
  font-variant-numeric: tabular-nums;
}

/* Per-axis block inside a fit card: title + stats, chart, equation */
.md__axes {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.md__axis {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.md__axis + .md__axis {
  padding-top: var(--space-4);
  border-top: 1px solid var(--paper-6);
}

.md__axis-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.md__axis-title {
  font-family: var(--font-barlow);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--ink-3);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.md__axis-kind {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--ink-7);
  font-style: italic;
}

.md__axis-stats {
  display: inline-flex;
  gap: var(--space-4);
  font-family: var(--font-barlow);
}

.md__axis-stat {
  font-size: var(--fs-sm);
  color: var(--ink-7);
  font-variant-numeric: tabular-nums;
}

.md__axis-stat-value {
  color: var(--ink-2);
  font-weight: var(--fw-medium);
}

.md__axis-equation {
  color: var(--ink-3);
  font-size: 0.9em;
  /* Horizontal scroll for very long Sellmeier sums. overflow-y is
     explicit so the implicit "auto" doesn't kick in on KaTeX's strut
     and create a spurious vertical scrollbar. */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25em 0;
}

.md__axis-equation .katex-display {
  margin: 0;
  text-align: left;
}

.md__axis-equation .katex {
  white-space: nowrap;
}

.refraction-chart {
  /* Fills the parent width; viewBox preserves the chart's aspect ratio. */
  width: 100%;
  height: auto;
  display: block;
}

.refraction-chart__tick {
  font-family: var(--font-barlow);
  font-size: var(--fs-2xs);
  fill: var(--ink-8);
  font-variant-numeric: tabular-nums;
}

.refraction-chart__axis-label {
  font-family: var(--font-barlow);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  fill: var(--ink-3);
}

.refraction-chart__tooltip {
  font-family: var(--font-barlow);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  fill: var(--ink-1);
}

/* ── Absorption-specimen cross-reference list ───────────────────── */

.md__absorptions {
  margin-top: var(--space-10);
  max-width: 42rem;
}


/* Mobile */
@media screen and (max-width: 800px) {
  .md__hero {
    flex-direction: column;
  }

  .md__swatches {
    width: 100%;
    justify-content: space-between;
  }

  .md__swatch-gradient {
    width: 3rem;
    height: 8rem;
  }

  .md__depth-row {
    flex-wrap: wrap;
  }

  .md__fit-head {
    flex-direction: column;
  }

  .md__fit-axes {
    grid-template-columns: 1fr;
  }
}