/*
 * Kitchen sink page chrome.
 *
 * This is scaffolding for the internal reference page only: the labels, swatch
 * grids and spec tables that describe the design system. It is NOT part of the
 * design system, which is why it lives in its own file and is enqueued only on
 * the kitchen-sink page. Nothing here should ever be used on a real page, and
 * nothing here may be referenced from cd-components.css.
 */

.cd-ks__spec {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cd-space-3);
  margin-block-end: var(--cd-space-3);
}
.cd-ks__name {
  font-family: var(--cd-font-mono); font-size: var(--cd-meta-size);
  letter-spacing: 0.02em; color: var(--cd-ink);
  background: var(--cd-grey-soft); border-radius: 4px; padding: 3px 7px;
}
.cd-ks__hex {
  font-family: var(--cd-font-mono); font-size: var(--cd-meta-size);
  color: var(--cd-ink-meta); text-transform: uppercase;
}
.cd-ks__note { font-size: var(--cd-small-size); color: var(--cd-ink-muted); }
.cd-ks__caption {
  font-size: var(--cd-small-size); color: var(--cd-ink-muted);
  max-width: var(--cd-measure-body); margin-block-start: var(--cd-space-5);
}
.cd-ks__group {
  font-family: var(--cd-font-display); font-size: var(--cd-card-size);
  text-transform: uppercase; letter-spacing: var(--cd-card-track);
  margin: var(--cd-space-8) 0 var(--cd-space-2);
}
.cd-ks__groupnote {
  font-size: var(--cd-small-size); color: var(--cd-ink-muted);
  max-width: var(--cd-measure-body); margin: 0 0 var(--cd-space-5);
}
.cd-ks__item { margin-block-end: var(--cd-space-5); }
.cd-ks__row { display: flex; flex-wrap: wrap; gap: var(--cd-space-7); align-items: flex-start; }
.cd-ks__panel { padding: var(--cd-space-6); border-radius: var(--cd-radius-base); }
.cd-ks__panel .cd-ks__name { background: rgba(255,255,255,0.12); color: var(--cd-on-navy); }
.cd-ks__panel .cd-ks__note { color: var(--cd-navy-body); }

/* colour swatches */
.cd-ks__swatches, .cd-ks__fams, .cd-ks__roles, .cd-ks__grounds, .cd-ks__spaces {
  list-style: none; margin: 0; padding: 0;
}
.cd-ks__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--cd-space-5); }
.cd-ks__swatch { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cd-ks__chip {
  display: block; width: 100%; height: 76px; border-radius: var(--cd-radius-base);
  border: 1px solid var(--cd-rule-light);
}
.cd-ks__chip.is-dark { border-color: transparent; }
/* Near-white rules are invisible on a white chip, so they are drawn on the dark
 * ground they are actually for, as a real line rather than a fill. */
.cd-ks__chip.on-navy { border: 0; display: flex; align-items: center; justify-content: center; }
.cd-ks__ruleline { display: block; width: 76%; height: 2px; }

/* type */
.cd-ks__fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--cd-space-6); }
.cd-ks__fam { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cd-ks__famsample { font-size: 40px; line-height: 1.1; color: var(--cd-ink); }
.cd-ks__roles { display: flex; flex-direction: column; gap: var(--cd-space-5); }
.cd-ks__role {
  display: flex; align-items: baseline; gap: var(--cd-space-6);
  border-top: 1px solid var(--cd-rule-light); padding-top: var(--cd-space-4);
}
.cd-ks__rolesample { flex: 0 0 auto; min-width: 150px; color: var(--cd-ink); overflow: hidden; }
.cd-ks__roleinfo { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* grounds */
.cd-ks__grounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--cd-space-4); }
.cd-ks__ground {
  padding: var(--cd-space-5); border-radius: var(--cd-radius-base);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  border: 1px solid var(--cd-rule-light);
}
.cd-ks__ground .cd-ks__name { background: rgba(127,127,127,0.16); color: inherit; }
.cd-ks__ground .cd-ks__note { color: inherit; opacity: 0.82; }

/* the cut */
.cd-ks__cut {
  width: 260px; height: 200px; background: var(--cd-navy);
  border-radius: var(--cd-radius-base) var(--cd-cut) var(--cd-radius-base) var(--cd-radius-base);
}

/* spacing */
.cd-ks__spaces { display: flex; flex-direction: column; gap: var(--cd-space-3); }
.cd-ks__space { display: flex; align-items: center; gap: var(--cd-space-4); }
.cd-ks__bar { height: 16px; background: var(--cd-blue); border-radius: 3px; flex: none; }

/* tables */
.cd-ks__table { width: 100%; border-collapse: collapse; font-size: var(--cd-small-size); }
.cd-ks__table th {
  text-align: left; font-family: var(--cd-font-mono); font-size: var(--cd-meta-size);
  letter-spacing: var(--cd-meta-track); text-transform: uppercase; color: var(--cd-ink-meta);
  border-bottom: 1px solid var(--cd-rule-light); padding: 0 var(--cd-space-5) var(--cd-space-3) 0;
}
.cd-ks__table td {
  vertical-align: top; padding: var(--cd-space-3) var(--cd-space-5) var(--cd-space-3) 0;
  border-bottom: 1px solid var(--cd-rule-light);
}

/* small parts */
.cd-ks__part {
  padding-block: var(--cd-space-6);
  border-top: 1px solid var(--cd-rule-light);
}
.cd-ks__demo { background: var(--cd-white); padding: var(--cd-space-5); border-radius: var(--cd-radius-base); }
.cd-ks__demo .cd-event-thumb, .cd-ks__demo .cd-post-thumb { background: var(--cd-grey-soft); }
.cd-ks__demo .cd-partner__mark { background: var(--cd-grey-soft); border-radius: 4px; }

/* hairline specimens
 *
 * Each row paints --cd-rule-light on the ground it is actually used on, because
 * the fault it exists to catch is a rule that looks fine on white and vanishes
 * on a tint. The line is given room on both sides so nothing but the ground is
 * touching it. */
.cd-ks__rules { list-style: none; margin: 0; padding: 0; }
.cd-ks__rule {
  display: flex;
  align-items: center;
  gap: var(--cd-space-5);
  padding: var(--cd-space-5) var(--cd-space-6);
}
.cd-ks__rule .cd-ks__name { flex: 0 0 140px; }
.cd-ks__rule .cd-ks__hex  { flex: 0 0 auto; }
.cd-ks__ruleline {
  flex: 1 1 auto;
  height: 1px;
  background: var(--cd-rule-light);
}
.cd-ks__rule--dark .cd-ks__name { background: rgba(255,255,255,0.12); color: var(--cd-on-navy); }
.cd-ks__rule--dark .cd-ks__hex  { color: var(--cd-navy-meta); }