/* ===========================================================================
   Compound Specifications
   ---------------------------------------------------------------------------
   Five fields per compound, on the product page and on every product card.
   Colours, type and spacing are the theme's own tokens, read through var(), so
   the section follows whichever direction re-bases :root (nxxs-bright.css
   today). The values new to this section are declared once, below.

   Flexbox only. A row is a term and a value side by side; on a phone, and on
   a card, the value sits under its term so a long name or formula never has
   to share a line with its label.
   =========================================================================== */

:root {
  --cspec-pad:        var(--s-5);
  --cspec-pad-card:   var(--s-3);
  --cspec-gap:        var(--s-3);
  --cspec-gap-card:   var(--s-2);
  --cspec-row-pad:    var(--s-2);
  --cspec-term-w:     11.5rem;
  --cspec-term-w-card: 6.75rem;
  --cspec-card-max:   13.5rem;
  --cspec-space-top:  var(--s-6);
  --cspec-sub-shift:  -0.25em;
  --cspec-sub-size:   0.75em;
}

.cspec {
  display: flex;
  flex-direction: column;
  gap: var(--cspec-gap);
  margin-block: var(--cspec-space-top);
  padding: var(--cspec-pad);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-sunken);
  color: var(--c-text);
  font-family: var(--font-body);
}

.cspec-title {
  margin: var(--s-0);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.cspec-part {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.cspec-part-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
  margin: var(--s-0);
  padding-block-start: var(--s-2);
  border-block-start: var(--bw-1) solid var(--c-line);
}

.cspec-part:first-of-type .cspec-part-name {
  padding-block-start: var(--s-0);
  border-block-start: var(--s-0);
}

.cspec-part-count {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.cspec-part-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.cspec-list {
  display: flex;
  flex-direction: column;
  margin: var(--s-0);
  padding: var(--s-0);
}

.cspec-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--cspec-row-pad);
  border-block-end: var(--bw-1) solid var(--c-line);
}

.cspec-list:last-child .cspec-row:last-child { border-block-end: var(--s-0); }

.cspec-term {
  flex: 0 0 var(--cspec-term-w);
  margin: var(--s-0);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: var(--lh-snug);
}

.cspec-value {
  flex: 1 1 0;
  min-width: 0;
  margin: var(--s-0);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.cspec-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cspec-sub,
.cspec-sup {
  font-size: var(--cspec-sub-size);
  line-height: var(--s-0);
}

.cspec-value[data-cspec-state="none"] {
  font-style: italic;
  color: var(--c-text-3);
}

/* ---- On a card ------------------------------------------------------------ */

/* The same five fields, set smaller, term beside value, so a card keeps its
   width and its controls stay where a shopper expects them. */
.cspec[data-cspec="card"] {
  gap: var(--cspec-gap-card);
  margin-block: var(--s-0);
  padding: var(--cspec-pad-card);
}

.cspec[data-cspec="card"] .cspec-row {
  gap: var(--s-0) var(--s-2);
  padding-block: var(--s-1);
}

.cspec[data-cspec="card"] .cspec-term {
  flex: 0 0 var(--cspec-term-w-card);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--c-text-3);
}

.cspec[data-cspec="card"] .cspec-value {
  font-size: var(--fs-xs);
}

.cspec[data-cspec="card"] .cspec-part-label { font-size: var(--fs-xs); }

/* A blend lists every component, and a card in a row is only as tall as its
   tallest neighbour, so a blend's fields are held to the height of a single
   compound's and scroll inside the section rather than stretching the row. */
.cspec[data-cspec="card"][data-cspec-parts="many"] {
  max-height: var(--cspec-card-max);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- Screens ---------------------------------------------------------------- */

@media (max-width: 767px) {
  :root { --cspec-pad: var(--s-4); }

  .cspec[data-cspec="page"] .cspec-row {
    flex-direction: column;
    gap: var(--s-0);
  }

  .cspec[data-cspec="page"] .cspec-term {
    flex: none;
    font-size: var(--fs-xs);
    color: var(--c-text-3);
  }
}