/*
 * Control-system product page — the manufacturer's own specification rows as groups of cards.
 * A row keeps its text; its shape decides how it is drawn: a short value is set large, a list becomes rows,
 * a number list becomes chips and a number series becomes bars.
 */
.lc-cs-mspec__tabs { margin-top: var(--lc-space-1); }
.lc-cs-mspec__tabs .lc-chip { min-height: 2rem; padding-inline: var(--lc-space-3); }

.lc-cs-mspec { display: grid; gap: var(--lc-space-8); min-width: 0; }
.lc-cs-mspec__group { display: grid; gap: var(--lc-space-3); min-width: 0; scroll-margin-top: calc(var(--lc-header-h) + var(--lc-space-4)); }
.lc-cs-mspec__group[hidden] { display: none; }

.lc-cs-mspec__title {
  display: flex;
  align-items: center;
  gap: var(--lc-space-3);
  margin: 0;
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-xs);
  font-weight: var(--lc-weight-medium);
  letter-spacing: var(--lc-tracking-caps);
  text-transform: uppercase;
  color: var(--lc-accent-text);
  scroll-margin-top: calc(var(--lc-header-h) + var(--lc-space-4));
}
.lc-cs-mspec__title::after { content: ""; flex: 1; height: 1px; background: var(--lc-border); }
.lc-cs-mspec__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--lc-radius-sm);
  background: color-mix(in srgb, var(--lc-accent) 14%, transparent);
  color: var(--lc-accent-text);
}
.lc-cs-mspec__icon .lc-icon { width: 1.125rem; height: 1.125rem; }

.lc-cs-mspec__cards {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  /* A wide card must not leave a hole beside the card before it. */
  grid-auto-flow: dense;
  gap: var(--lc-space-3);
}
.lc-cs-mspec__card {
  display: grid;
  gap: var(--lc-space-2);
  align-content: start;
  min-width: 0;
  padding: var(--lc-space-4);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: var(--lc-surface);
}
@media (min-width: 640px) { .lc-cs-mspec__card--wide { grid-column: span 2; } }

.lc-cs-mspec__card dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lc-space-2);
  color: var(--lc-text-muted);
  font-size: var(--lc-text-sm);
  line-height: var(--lc-leading-snug);
  overflow-wrap: anywhere;
}
.lc-cs-mspec__count {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-xs);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-xs);
  color: var(--lc-text);
}
.lc-cs-mspec__card dd {
  margin: 0;
  min-width: 0;
  color: var(--lc-text-muted);
  font-size: var(--lc-text-sm);
  line-height: var(--lc-leading-normal);
  overflow-wrap: anywhere;
}
.lc-cs-mspec__card dd p { margin: 0; }
/* Figures (resolutions, numbers with a unit) stand out of the sentence around them. */
.lc-cs-mspec__card dd b {
  font-family: var(--lc-font-mono);
  font-weight: var(--lc-weight-medium);
  color: var(--lc-text);
}

/* A short value: the answer itself, large. */
.lc-cs-mspec__card--stat dd {
  font-size: var(--lc-text-lg);
  font-weight: var(--lc-weight-semibold);
  line-height: var(--lc-leading-snug);
  color: var(--lc-text);
}
.lc-cs-mspec__card--stat dd b { font-family: inherit; font-weight: inherit; }

/* A list of statements; "name: value" keeps the name apart. */
.lc-cs-mspec__facts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--lc-space-2); }
.lc-cs-mspec__facts li {
  display: grid;
  gap: 0.1rem;
  padding-left: var(--lc-space-3);
  border-left: 2px solid var(--lc-border-strong);
}
.lc-cs-mspec__key {
  font-size: var(--lc-text-xs);
  color: var(--lc-text-subtle);
}
.lc-cs-mspec__key + span { color: var(--lc-text); }

/* A list of numbers. */
.lc-cs-mspec__chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.lc-cs-mspec__chips li {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-xs);
  background: var(--lc-surface-raised);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-xs);
  color: var(--lc-text);
}
.lc-cs-mspec__note { margin-top: var(--lc-space-2) !important; font-size: var(--lc-text-xs); color: var(--lc-text-subtle); }

/* A number series: name and value on one line, the bar under it. */
.lc-cs-mspec__bars {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--lc-space-3) var(--lc-space-6);
}
.lc-cs-mspec__bars li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem var(--lc-space-3);
  align-items: baseline;
}
.lc-cs-mspec__bar-label { font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); color: var(--lc-text-muted); }
.lc-cs-mspec__bar-value { font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); color: var(--lc-text); text-align: right; }
.lc-cs-mspec__bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: var(--lc-radius-pill);
  background: var(--lc-surface-hover);
  overflow: hidden;
}
.lc-cs-mspec__bar i { display: block; height: 100%; border-radius: inherit; background: var(--lc-accent); }