/* Design-system sheet only: labels and specimen layout. */

.sys-heading {
  margin-block-end: var(--space-xl);
}
.sys-label {
  font-family: var(--font-latin);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  color: var(--color-text-muted);
}
.sys-label:lang(ar) {
  font-family: var(--font-arabic);
}

.sys-roles {
  display: flex;
  flex-direction: column;
}
.sys-role {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-l);
  align-items: baseline;
  padding-block: var(--space-l);
  border-block-end: var(--rule);
}
.sys-role .sys-label {
  font-family: var(--font-latin);
}
@media (max-width: 40rem) {
  .sys-role {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }
}

.sys-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-l);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}
.sys-swatches li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.sys-swatches code {
  font-size: var(--type-caption-size);
  color: var(--color-text-muted);
}
.sys-swatch {
  display: block;
  height: 5rem;
  margin-block-end: var(--space-xs);
  border: var(--rule);
  border-radius: var(--radius-s);
}

.sys-states,
.sys-row {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: var(--space-m) var(--space-xl);
  align-items: center;
}
.sys-states {
  margin-block-end: var(--space-s);
}
.sys-states .sys-label {
  min-width: 9rem;
}
.sys-row {
  margin-block-end: var(--space-l);
}
.sys-row .btn {
  min-width: 9rem;
}
.sys-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  margin-block-start: var(--space-xl);
}
@media (max-width: 40rem) {
  .sys-states {
    display: none;
  }
  .sys-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sys-row .btn {
    min-width: 0;
  }
}

.sys-media {
  background:
    radial-gradient(circle at 70% 38%, var(--color-accent) 0 7%, transparent 7.5%),
    linear-gradient(to bottom, var(--color-surface) 0 62%, var(--color-line) 62%);
}

.sys-sublabel {
  margin-block-end: var(--space-m);
}
.sys-process-full {
  margin-block-start: var(--space-3xl);
}

.sys-motif {
  --contours: 0.5;
  display: flex;
  align-items: flex-end;
  min-height: 18rem;
  padding: var(--space-xl);
  border-radius: var(--radius-m);
  background: var(--color-text);
  color: var(--color-background);
}
.sys-motif .t-lead {
  max-width: 22rem;
}
.sys-motif__sun {
  --sun: 1.5rem;
  position: absolute;
  inset-block-start: var(--space-xl);
  inset-inline-end: var(--space-xl);
}
.sys-prices {
  border-collapse: collapse;
  width: 100%;
}
.sys-prices th,
.sys-prices td {
  padding-block: var(--space-s);
  border-block-end: var(--rule);
  text-align: start;
}
.sys-prices thead th {
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.sys-prices tbody th {
  font-weight: var(--font-weight-medium);
}