/* Material tree — hierarchical list of refraction entries. Each row
   is laid out as a 6-column flex grid with a sticky header. */

.mat-tree {
  max-width: 52rem;
}

.mat-tree__filters {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-3) 0 var(--space-3);
  flex-wrap: wrap;
}

.mat-tree__toggles {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  flex-wrap: wrap;
}

/* Push the sort SegmentedControl to the right of the toggles row. */
.mat-tree__toggles-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Section heading for "More Materials" — extend horizontally the same amount
   as rows so the border-bottom reaches the pill edge. */
.mat-tree__heading {
  font-family: var(--font-barlow);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-8);
  margin: var(--space-8) calc(var(--space-2) * -1) var(--space-2);
  padding: 0 var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

/* Column widths — shared between header and every row so they line up.
   Negative horizontal margin pulls the hover/highlight background past the
   content edges so the text never sits flush against the pill edge. */
.mat-tree__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0.2rem var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  font-family: var(--font-barlow);
  font-size: var(--fs-base);
  border-radius: var(--radius-sm);
}

.mat-tree__name {
  flex: 1;
  min-width: 0;
}

.mat-tree__ri {
  flex: 0 0 6rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-7);
  font-size: var(--fs-sm);
  text-align: right;
}

.mat-tree__abbe {
  flex: 0 0 4.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-8);
  font-size: var(--fs-sm);
  text-align: right;
}

.mat-tree__system {
  flex: 0 0 5rem;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-9);
  text-align: left;
}

.mat-tree__fits {
  flex: 0 0 5rem;
  font-size: var(--fs-xs);
  color: var(--ink-8);
  font-variant-numeric: tabular-nums;
  text-align: right;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-2);
}

.mat-tree__colors {
  flex: 0 0 3rem;
  font-size: var(--fs-xs);
  color: var(--ink-8);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Sticky header row */
.mat-tree__table {
  position: relative;
}

.mat-tree__row--header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper-3);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--paper-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-7);
}

.mat-tree__row--header .mat-tree__ri,
.mat-tree__row--header .mat-tree__abbe,
.mat-tree__row--header .mat-tree__system,
.mat-tree__row--header .mat-tree__fits,
.mat-tree__row--header .mat-tree__colors {
  color: var(--ink-7);
  font-size: var(--fs-xs);
  font-variant-numeric: normal;
}

/* Depth indent applies only to the name cell via padding-left on the row.
   Keep the base horizontal padding (var(--space-2)) and add the indent on top. */
.mat-tree__row--d0 {
  padding-left: var(--space-2);
}
.mat-tree__row--d1 {
  padding-left: calc(var(--space-2) + 1.25rem);
}
.mat-tree__row--d2 {
  padding-left: calc(var(--space-2) + 2.5rem);
}

/* Full-row highlight on hover for easier horizontal scanning.
   Exclude the sticky header. */
.mat-tree__row:not(.mat-tree__row--header):hover {
  background: var(--paper-0);
}

.mat-tree__row--match .mat-tree__name {
  background: rgba(196, 162, 59, 0.12);
  border-radius: var(--radius-sm);
  padding: 0 0.2rem;
  margin: 0 -0.2rem;
}

/* Group labels (non-clickable) — match the weight of clickable rows so
   Garnet / Tourmaline sit flush with the species rows underneath. */
.mat-tree__group-label {
  color: var(--ink-3);
  letter-spacing: var(--tracking-base);
}

/* Whole-row links — clicking anywhere on a material row navigates. */
.mat-tree__row--link {
  color: var(--ink-3);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-base), background var(--t-base);
}

.mat-tree__row--link:hover {
  color: var(--accent-gold);
  text-decoration: none;
}

/* "approx" chip sits inline in the Fits column when the only fit is a
   Cauchy-from-(n,V) approximation rather than a measured Sellmeier. */
.mat-tree__approx {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-10);
  padding: 0 var(--space-1);
  border: 1px solid var(--paper-7);
  border-radius: var(--radius-sm);
}

.mat-tree__empty {
  font-family: var(--font-barlow);
  font-size: var(--fs-base);
  color: var(--ink-10);
  padding: var(--space-4) 0;
}

.mat-tree__section + .mat-tree__section {
  margin-top: var(--space-4);
}