/* ==========================================================================
   styleguide.css - styles used only by styleguide.html to present the
   system. Nothing here is part of the design system itself.
   ========================================================================== */

.sg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-9);
  align-items: flex-start;
}

.sg-layout > :last-child {
  min-width: 0;
}

.sg-toc {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.sg-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

.sg-toc__summary::after {
  content: "+";
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.sg-toc[open] .sg-toc__summary::after {
  content: "−";
}

.sg-toc[open] .sg-toc__summary {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.sg-toc__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-6);
}

@media (min-width: 1200px) {
  .sg-layout {
    grid-template-columns: 12.5rem minmax(0, 1fr);
  }

  .sg-toc {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-6));
    max-height: calc(100dvh - var(--navbar-height) - var(--space-9));
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .sg-toc__groups {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

.sg-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-toc__list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
}

.sg-toc__list a:hover {
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface-hover);
}

.sg-toc__heading {
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.sg-section {
  min-width: 0;
  isolation: isolate;
  scroll-margin-top: calc(var(--navbar-height) + var(--space-5));
}

.sg-section + .sg-section {
  margin-top: var(--space-6);
  padding-top: var(--space-9);
  border-top: var(--border-width) solid var(--color-border);
}

.sg-section__intro {
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  max-width: var(--container-prose);
}

.sg-demo {
  min-width: 0;
  padding: var(--space-7);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.sg-demo > * {
  min-width: 0;
  max-width: 100%;
}

.sg-demo .sg-row > *,
.sg-demo .sg-cols > * {
  min-width: 0;
  max-width: 100%;
}

.sg-demo--surface {
  background-color: var(--color-surface);
  border-style: solid;
}

.sg-demo--tall {
  min-height: 14rem;
}

.sg-demo + .sg-demo {
  margin-top: var(--space-4);
}

.sg-demo__label {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}

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

.sg-row--start {
  align-items: flex-start;
}

.sg-row + .sg-row {
  margin-top: var(--space-5);
}

.sg-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 28rem;
  width: 100%;
}

.sg-cols {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  align-items: start;
}

.sg-code {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}

.sg-code code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Token swatches */
.sg-swatches {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
}

.sg-swatch {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-surface);
}

.sg-swatch__chip {
  height: 4rem;
  background-color: var(--chip);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.sg-swatch__name {
  padding: var(--space-2) var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  word-break: normal;
  overflow-wrap: anywhere;
}

.sg-swatch__value {
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

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

.sg-spacing__row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
}

.sg-spacing__bar {
  height: 0.75rem;
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
}

.sg-type__row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  overflow-wrap: anywhere;
}

.sg-type__meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.sg-radius {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.sg-radius__box {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-content: center;
  border: var(--border-width) solid var(--color-border-strong);
  background-color: var(--color-surface);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.sg-shadow__box {
  width: 8rem;
  height: 5rem;
  display: grid;
  place-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.sg-z {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
  gap: var(--space-3);
}

.sg-z__item {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  font-size: var(--text-xs);
}

.sg-z__item strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

/* Box helpers for layout demos */
.sg-box {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-accent);
  color: var(--color-text);
  font-size: var(--text-xs);
  text-align: center;
}

/* Static previews of fixed / sticky chrome */
.sg-navbar-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--radius-md);
}

.sg-navbar-scroll:has(.dropdown[open]) {
  padding-bottom: 23rem;
}

.navbar--demo {
  --navbar-height: 4.5rem;
  position: static;
  min-width: 54rem;
}

.navbar--demo .navbar__inner {
  min-width: 54rem;
}

.sg-demo .navbar__search {
  min-width: 0;
}

.sg-demo .pitch,
.sg-demo .radar {
  max-width: 100%;
}

.sg-demo .pagination__list {
  flex-wrap: wrap;
}

.sidebar--demo {
  position: static;
  transform: none;
  visibility: visible;
  width: 14rem;
  max-width: 100%;
  height: auto;
  box-shadow: none;
  transition: none;
  border: var(--border-width) solid var(--color-border);
}

.sidebar--demo .sidebar__heading,
.sidebar--demo .sidebar__label,
.sidebar--demo .sidebar__footer,
.sidebar--demo .sidebar__sublist {
  display: block;
}

.sidebar--demo .sidebar__count {
  display: inline;
}

.sidebar--demo .sidebar__link {
  justify-content: flex-start;
  padding-inline: var(--space-6);
  min-height: 2.25rem;
}

.sidebar--demo .sidebar__link::after {
  display: none;
}

.sidebar--demo .sidebar__close {
  display: none;
}

.sidebar--demo.sidebar--rail {
  width: var(--sidebar-rail-width);
}

.sidebar--demo.sidebar--rail .sidebar__heading,
.sidebar--demo.sidebar--rail .sidebar__label,
.sidebar--demo.sidebar--rail .sidebar__count,
.sidebar--demo.sidebar--rail .sidebar__footer {
  display: none;
}

.sidebar--demo.sidebar--rail .sidebar__link {
  justify-content: center;
  padding-inline: 0;
}

.modal--demo {
  position: static;
  display: flex;
  height: auto;
  padding: 0;
}

.modal--demo .modal__panel {
  animation: none;
}

.tooltip--demo-open::after,
.tooltip--demo-open::before {
  display: block;
}

@media (max-width: 639px) {
  .sg-layout {
    gap: var(--space-7);
  }

  .sg-demo {
    padding: var(--space-6);
  }

  .sg-type__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .sg-toc__list a {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
  }

  .sg-demo .gantt {
    --gantt-label: 7rem !important;
  }

  .sg-demo .navbar--demo .navbar__inner {
    display: flex;
    flex-wrap: nowrap;
  }

  .sg-demo .navbar--demo .navbar__search {
    width: auto;
    order: 0;
  }
}