/* Styles used only on the /styleguide page. */

.sg-head {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-8) var(--space-7);
  border-bottom: 1px solid var(--rule-strong);
}
.sg-head p { margin: 0; }
.sg-head .label { margin-bottom: var(--space-4); }
@media (min-width: 64em) {
  .sg-head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
}

/* Section index on the left, content on the right */
.sg-layout { display: grid; gap: var(--space-5); }
@media (min-width: 64em) {
  .sg-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-8); }
  .sg-index { position: sticky; top: 0; align-self: start; padding-top: var(--space-7); }
}
.sg-index ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 64em) {
  .sg-index ol { grid-template-columns: 1fr; margin: 0; }
}
.sg-index a {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-1);
  font-size: var(--step--1);
  line-height: 1.5rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sg-index a:hover { color: var(--ink); }
.sg-index__num {
  min-width: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--catalog-ink);
}

.sg-body { min-width: 0; }
.sg-section {
  padding-block: var(--space-7);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--space-5);
}
.sg-section:first-child { border-top: 0; }
.sg-section__head { display: grid; gap: var(--space-2); max-width: 44rem; margin-bottom: var(--space-6); }
.sg-section__head p { margin: 0; }
.sg-note { max-width: 60ch; font-size: var(--step--1); line-height: 1.5rem; color: var(--ink-muted); }
.sg-subhead { margin: var(--space-6) 0 var(--space-4); }
.sg-section__head + .sg-subhead { margin-top: 0; }

/* Color swatches */
.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-swatch { display: grid; gap: var(--space-1); }
.sg-swatch__chip { display: block; height: 4.5rem; margin-bottom: var(--space-1); border: 1px solid var(--rule); }
.sg-swatch__name { font-family: var(--font-mono); font-size: var(--step--2); line-height: 1rem; }

/* Contrast table */
.sg-table-wrap { overflow-x: auto; }
.sg-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.25rem; }
.sg-table th {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sg-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.sg-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sg-table td:last-child { display: flex; align-items: center; gap: var(--space-2); color: var(--success); }
.sg-table td:last-child .icon { width: 1rem; height: 1rem; }

/* Type specimens */
.sg-type-row { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-bottom: 1px solid var(--rule); }
.sg-type-row p { margin: 0; }
.sg-type-row__spec { display: grid; gap: var(--space-1); align-content: start; }
.sg-type-row__sample { max-width: 48rem; }
@media (min-width: 48em) {
  .sg-type-row { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-5); align-items: baseline; }
}

/* Icons */
.sg-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.sg-icon {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-4);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.sg-icon .icon { width: 1.5rem; height: 1.5rem; }

/* Rows and columns of examples */
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.sg-cols { display: grid; gap: 0 var(--space-7); }
@media (min-width: 48em) {
  .sg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A hairline frame around full-size examples */
.sg-frame { padding: var(--space-4) var(--space-5) var(--space-5); border: 1px solid var(--rule); }
.sg-frame__label { margin: 0 0 var(--space-3); }
.sg-frame .paper { padding-top: var(--space-4); }
.sg-states { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); }
.sg-states .state { padding-block: var(--space-3); }

/* Guardrails list */
.sg-rules { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); }
.sg-rules li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  line-height: 1.5rem;
}
@media (min-width: 64em) {
  .sg-rules { columns: 2; column-gap: var(--space-7); }
  .sg-rules li { break-inside: avoid; }
}

/* Examples that span the full content column */
.sg-bleed { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
@media (min-width: 64em) { .sg-bleed { margin-inline: 0; } }
.sg-cols--gap { margin-block: var(--space-4) 0; gap: var(--space-4); }

/* Photography */
.sg-photos { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .sg-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-photo { margin: 0; }
.sg-photo img { width: 100%; height: auto; border: 1px solid var(--rule); opacity: var(--photo-opacity); }
.sg-photo figcaption { padding-top: var(--space-2); }
.sg-seal { margin-top: var(--space-6); flex-wrap: nowrap; align-items: center; }
.sg-seal img { width: 6rem; height: 6rem; flex: none; }
.sg-seal p { margin: 0; }

.sg-server-import { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--space-4); }
.sg-server-import .field { flex: 1 1 22rem; margin-bottom: var(--space-3); }
.sg-server-import .btn { margin-bottom: calc(var(--space-3) + 1.25rem + var(--space-2)); }