/* module-design-systems.css — Settings → Design system picker (MMDB-1688).
   Linked from src/app/layout.tsx next to the other module-*.css sheets.
   Consumed by src/app/app/settings/DesignSystemPicker.tsx. Every colour
   here is an existing central-design-system token referenced with var() —
   see RULES.md and design-system.manifest.json's own palette. Swatches are
   the ONE place a design system's own literal colours legitimately need to
   render for preview; today's single registered package IS the running
   central design system, so its swatches reuse the running tokens rather
   than introducing new hex values. */

.ds-designsystem-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ds-designsystem-card {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper-2);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-designsystem-card[data-active="1"] {
  border-color: var(--baobab);
}

.ds-designsystem-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ds-designsystem-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: calc(19px * var(--fs-scale, 1));
  color: var(--ink);
  line-height: 1.15;
}

.ds-designsystem-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 2px 0;
}

.ds-designsystem-meta-row dt {
  font-family: var(--font-mono);
  font-size: calc(9.5px * var(--fs-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.ds-designsystem-meta-row dd {
  margin: 3px 0 0;
  font-weight: 600;
  font-size: calc(13px * var(--fs-scale, 1));
  color: var(--ink);
}

.ds-designsystem-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-designsystem-swatch {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid var(--hairline);
  display: inline-block;
}

.ds-designsystem-swatch-accent { background: var(--baobab); }
.ds-designsystem-swatch-paper { background: var(--paper); }
.ds-designsystem-swatch-ink { background: var(--ink); }
.ds-designsystem-swatch-hairline { background: var(--hairline); }

@media (max-width: 720px) {
  .ds-designsystem-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}