/* The catalog shell: @elements/ui with every theme, the tree and the toolbar.
   What is here is only the guide's own figures: swatch grids, the type scale,
   the spacing bars, the drawn radii and shadows. */
@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.sg-jumps { margin: 0 0 var(--space-12); }

/* A labelled figure inside a section. */
.sg-block { min-width: 0; }
.sg-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--weight-bold);
  margin: var(--space-4) 0 var(--space-3);
}

/* A token name and the value the browser computed for it. */
.sg-value,
.sg-px,
.sg-meta,
.sg-pairs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.sg-value, .sg-px, .sg-meta span { color: var(--ink-dim); }
.sg-meta em {
  font-style: normal;
  color: var(--ink-faint);
}
.sg-value, .sg-px, .sg-swatch-value, .sg-step-value, .sg-font-stack { overflow-wrap: anywhere; }
.sg-block code,
.sg-spaces code,
.sg-pairs code {
  font-family: var(--font-mono);
  font-size: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
}
.sg-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sg-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0 var(--space-8);
}
.sg-pairs {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}
.sg-pairs li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1-5) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.sg-pairs code { flex-shrink: 0; }
.sg-pairs .sg-value { margin-left: auto; min-width: 0; text-align: right; }
.sg-pairs .sg-px { color: var(--ink-faint); min-width: 3.5rem; text-align: right; }
.sg-pairs .sg-px:empty { display: none; }

/* Color: the ramps as strips of eleven, the semantic tokens as cards. */
.sg-ramp + .sg-ramp { margin-top: var(--space-5); }
.sg-ramp-name,
.sg-group-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.sg-ramp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: var(--space-1-5);
}
.sg-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.sg-step-swatch {
  display: block;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent);
}
.sg-step .sg-step-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink);
}
.sg-step .sg-step-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.35;
  color: var(--ink-dim);
}

.sg-swatch-group + .sg-swatch-group { margin-top: var(--space-6); }
.sg-swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-3);
}
.sg-swatch {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
}
.sg-swatch-color {
  display: block;
  height: 3.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
/* Named with the card, so the block's own `code` rule below does not take
   the size and the padding back. */
.sg-swatch .sg-swatch-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--space-3) var(--space-3) 0;
  overflow-wrap: anywhere;
}
.sg-swatch .sg-swatch-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.4;
  color: var(--ink-dim);
  padding: var(--space-1) var(--space-3) var(--space-3);
}

/* Type: one row per size, the name and value in a fixed column so the
   samples line up on the left. */
.sg-type,
.sg-fonts,
.sg-spaces,
.sg-shells {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-type-row,
.sg-font-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule-soft);
}
.sg-type-row:first-child,
.sg-font-row:first-child { border-top: 0; }
.sg-type-sample {
  display: block;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sg-font-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-width: 0;
}
.sg-font-sample {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.sg-font-stack {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-dim);
}

.sg-weights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-3);
}
.sg-weight {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.sg-weight-sample {
  font-size: var(--text-3xl);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}
.sg-weight code { font-size: var(--text-xs); }

/* Spacing: a bar as wide as the token. */
.sg-space-row {
  display: grid;
  grid-template-columns: 7.5rem 5rem 4rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: 5px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.sg-bar {
  display: block;
  height: 0.875rem;
  max-width: 100%;
  background: var(--accent);
  border-radius: var(--radius-xs);
}

/* Radius and shadow: the token applied to a box. */
.sg-radii,
.sg-shadows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.sg-radii { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.sg-radius,
.sg-shadow {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.sg-radius code,
.sg-shadow code { font-size: var(--text-xs); margin-top: var(--space-1); }
.sg-radius-box {
  display: block;
  width: 5rem;
  height: 5rem;
  background: var(--bg-muted);
  border: 1px solid var(--rule-strong);
}
.sg-shadows {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-6) var(--space-5);
  padding: var(--space-6);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
}
.sg-shadow-box {
  display: block;
  height: 5rem;
  background: var(--bg);
  border-radius: var(--radius-md);
}
.sg-shadow-box.is-ring { border: 1px solid var(--rule); }

/* Layout: the shell widths as bars, the primitives as boxes in boxes. */
.sg-shell-row {
  display: grid;
  grid-template-columns: 7.5rem 11rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.sg-shell-variant code { font-size: var(--text-xs); }
.sg-shell-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.sg-shell-bar {
  display: block;
  height: 1rem;
  max-width: 100%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  border-radius: var(--radius-xs);
  /* ch is measured in the bar's own font, so it takes the page's. */
  font-family: var(--font-sans);
  font-size: var(--text-base);
}
.sg-shell-use {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.sg-primitives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-5);
}
.sg-primitive {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.sg-primitive figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.sg-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--space-3);
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 1px solid var(--accent-edge);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Components: each demo is a cluster of the real thing. */
.sg-demo + .sg-demo { margin-top: var(--space-4); }
.sg-block-button { width: 20rem; max-width: 100%; }
.sg-form { max-width: 40rem; }
.sg-callouts {
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
}
.sg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.sg-tabs { max-width: 40rem; }
.sg-tabs .tab-panel {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: var(--leading-body);
}
.sg-table { overflow-x: auto; }
.sg-table table { margin: 0; }
.sg-utilities td:first-child { white-space: nowrap; }
.sg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.sg-chips code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink);
  background: var(--bg-muted);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
}

.sg-foot {
  margin-top: var(--space-20);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--ink-dim);
}

@media (max-width: 640px) {
  .sg-type-row,
  .sg-font-row,
  .sg-shell-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .sg-space-row { grid-template-columns: 6.5rem 4rem 3rem minmax(0, 1fr); gap: var(--space-2); }
  .sg-ramp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}