/* Styleguide chrome.
 *
 * Kept under system/ on purpose: that puts it under the same no-literal-colour
 * test as the components, so the page documenting the design system is itself
 * built from the design system and re-skins along with it. A styleguide with
 * its own private palette is a styleguide that stops telling the truth.
 */

.sg-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sg-head { display: flex; flex-direction: column; gap: var(--space-4); }

.sg-head__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  text-transform: var(--title-transform);
  color: var(--ink-primary);
}

.sg-head__lede {
  color: var(--ink-secondary);
  font-size: var(--text-md);
  max-width: 68ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------- sections */

.sg-section { display: flex; flex-direction: column; gap: var(--space-4); }

.sg-section__head { display: flex; flex-direction: column; gap: var(--space-1); }

.sg-section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  text-transform: var(--title-transform);
  color: var(--accent);
}

.sg-section__note {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  max-width: 74ch;
  text-wrap: pretty;
}

.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.sg-specimen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--edge-radius);
  border: var(--edge-width) solid var(--edge-hairline);
  min-width: 0;
}

.sg-specimen__label {
  font-family: var(--font-label);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  font-weight: var(--label-weight);
  color: var(--ink-muted);
}

.sg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* -------------------------------------------------------- token reference */

/* Columns rather than a grid: token groups vary wildly in length (edge has 14,
   motion has 3), and grid rows size to the tallest member, which left a screen
   of dead space under the short ones. */
.sg-tokens {
  columns: 330px;
  column-gap: var(--space-5);
}

.sg-tokens__group {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.sg-tokens__name {
  font-family: var(--font-label);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--accent);
}

.sg-token {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--edge-width) solid var(--edge-hairline);
}

.sg-token__key {
  font-family: var(--font-readout);
  font-size: var(--text-md);
  color: var(--ink-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sg-token__doc {
  grid-column: 1 / -1;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

/* A live sample of what the token currently resolves to under this skin.
   The checkerboard underlay means a `transparent` token looks transparent
   instead of looking like a colour that failed to load, and it works for
   gradients too -- no branching on the shape of the value. */
.sg-token__value {
  justify-self: end;
  align-self: center;
  min-width: 44px;
  height: 16px;
  overflow: hidden;
  border-radius: var(--edge-radius-sm);
  border: var(--edge-width) solid var(--edge-hairline);
  background-color: var(--surface-raised);
  background-image:
    conic-gradient(var(--surface-sunken) 25%, transparent 0 50%,
                   var(--surface-sunken) 0 75%, transparent 0);
  background-size: 8px 8px;
}

.sg-token__fill { display: block; width: 100%; height: 100%; }

.sg-note {
  padding: var(--space-4);
  background: var(--surface-panel);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--edge-radius-sm);
  color: var(--ink-secondary);
  font-size: var(--text-sm);
  text-wrap: pretty;
  max-width: 82ch;
}

.sg-note code {
  font-family: var(--font-readout);
  color: var(--accent);
}

/* Two-column split used by the composed room demo. */
.sg-split {
  display: flex;
  gap: var(--space-5);
  align-items: stretch;
  flex-wrap: wrap;
}