/*
 * Chrome for the /design viewer only — sidebar, swatch grids, spec tables.
 *
 * Deliberately thin. Everything being documented (buttons, fields, cards,
 * chips, the brand mark, type) is rendered with the site's real classes from
 * components.css, so this file must never restyle a component. If a component
 * looks wrong here, it looks wrong on the site too.
 */

.ds {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.ds > * { min-width: 0; }

/* --- Sidebar -------------------------------------------------------------*/

.ds-sidebar {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--jw-line);
  background: var(--jw-surface-veil);
  backdrop-filter: blur(var(--jw-topbar-blur));
}

.ds-sidebar-head {
  display: grid;
  gap: var(--jw-space-3);
  padding: var(--jw-space-6);
  border-bottom: 1px solid var(--jw-line);
}

.ds-sidebar-head .brand { font-size: var(--jw-text-base); }
.ds-sidebar-head .eyebrow { margin: 0; }

.ds-nav {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--jw-space-1);
  padding: var(--jw-space-5) var(--jw-space-3);
  overflow-y: auto;
}

.ds-nav a {
  border-radius: var(--jw-radius-sm);
  color: var(--jw-text-muted);
  font-size: var(--jw-text-sm);
  font-weight: var(--jw-weight-semibold);
  padding: var(--jw-space-2) var(--jw-space-3);
  transition:
    background var(--jw-duration-fast) var(--jw-ease-out),
    color var(--jw-duration-fast) var(--jw-ease-out);
}

.ds-nav a:hover { color: var(--jw-text-primary); background: var(--jw-surface-sunken); }

.ds-nav a[aria-current="true"] {
  background: var(--jw-accent-soft);
  color: var(--jw-text-primary);
}

.ds-sidebar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jw-space-3);
  padding: var(--jw-space-4) var(--jw-space-6);
  border-top: 1px solid var(--jw-line);
}

.ds-sidebar-foot a {
  color: var(--jw-text-muted);
  font-size: var(--jw-text-sm);
  font-weight: var(--jw-weight-semibold);
}

.ds-sidebar-foot a:hover { color: var(--jw-text-primary); }

/* --- Main ---------------------------------------------------------------*/

.ds-main {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  padding: var(--jw-space-12) clamp(24px, 5vw, 64px) var(--jw-space-24);
}

.ds-intro {
  max-width: 62ch;
  margin-bottom: var(--jw-space-16);
}

.ds-section {
  min-width: 0;
  max-width: 1100px;
  padding-top: var(--jw-space-12);
  margin-bottom: var(--jw-space-16);
  border-top: 1px solid var(--jw-line-faint);
  scroll-margin-top: var(--jw-space-6);
}

.ds-section > h2 { margin-bottom: var(--jw-space-2); }

.ds-section > .card-kicker { max-width: 62ch; margin-bottom: var(--jw-space-8); }

.ds-group { margin-bottom: var(--jw-space-10); }

.ds-group > h3 {
  margin-bottom: var(--jw-space-4);
  color: var(--jw-text-muted);
  font-size: var(--jw-text-xs);
  font-weight: var(--jw-weight-bold);
  letter-spacing: var(--jw-tracking-eyebrow);
  text-transform: uppercase;
}

/* --- Token swatches -----------------------------------------------------*/

.ds-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--jw-space-3);
}

.ds-swatch {
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius-md);
  background: var(--jw-surface);
  overflow: hidden;
}

/* Checkerboard shows through translucent tokens so alpha is visible. */
.ds-swatch-chip {
  height: 74px;
  border-bottom: 1px solid var(--jw-line);
  background-image:
    linear-gradient(45deg, var(--jw-surface-sunken) 25%, transparent 25%, transparent 75%, var(--jw-surface-sunken) 75%),
    linear-gradient(45deg, var(--jw-surface-sunken) 25%, transparent 25%, transparent 75%, var(--jw-surface-sunken) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}

.ds-swatch-chip > span {
  display: block;
  width: 100%;
  height: 100%;
}

.ds-swatch-body {
  display: grid;
  gap: 3px;
  padding: var(--jw-space-3);
}

.ds-swatch code {
  color: var(--jw-text-strong);
  font-family: var(--jw-font-mono);
  font-size: var(--jw-text-2xs);
  overflow-wrap: anywhere;
}

.ds-swatch .ds-value {
  color: var(--jw-text-subtle);
  font-family: var(--jw-font-mono);
  font-size: var(--jw-text-2xs);
  overflow-wrap: anywhere;
}

.ds-swatch p {
  padding-top: var(--jw-space-1);
  color: var(--jw-text-muted);
  font-size: var(--jw-text-2xs);
  line-height: var(--jw-leading-snug);
}

/* --- Spec rows (non-color tokens) ---------------------------------------*/

.ds-rows {
  display: grid;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius-md);
  overflow: hidden;
}

.ds-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--jw-space-4);
  align-items: center;
  padding: var(--jw-space-3) var(--jw-space-4);
  border-top: 1px solid var(--jw-line-faint);
  background: var(--jw-surface);
}

.ds-row:first-child { border-top: 0; }

.ds-row code {
  color: var(--jw-text-strong);
  font-family: var(--jw-font-mono);
  font-size: var(--jw-text-2xs);
  overflow-wrap: anywhere;
}

.ds-row .ds-value {
  min-width: 0;
  color: var(--jw-text-subtle);
  font-family: var(--jw-font-mono);
  font-size: var(--jw-text-2xs);
  overflow-wrap: anywhere;
}

.ds-row .ds-demo { justify-self: stretch; }

.ds-bar {
  height: 12px;
  border-radius: var(--jw-radius-pill);
  background: var(--jw-accent);
}

.ds-radius-demo {
  width: 64px;
  height: 40px;
  border: 1px solid var(--jw-line-strong);
  background: var(--jw-accent-soft);
}

.ds-shadow-demo {
  width: 84px;
  height: 44px;
  border-radius: var(--jw-radius-md);
  background: var(--jw-surface-raised);
  border: 1px solid var(--jw-line-faint);
}

/* --- Component specimens ------------------------------------------------*/

.ds-specimen {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jw-space-3);
  padding: var(--jw-space-6);
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius-md);
  background: var(--jw-surface-sunken);
}

.ds-specimen.stack {
  display: grid;
  align-items: stretch;
  gap: var(--jw-space-4);
}

.ds-specimen.on-surface { background: var(--jw-surface); }

.ds-type-row {
  display: grid;
  gap: var(--jw-space-2);
  padding-block: var(--jw-space-5);
  border-top: 1px solid var(--jw-line-faint);
}

.ds-type-row:first-child { border-top: 0; padding-top: 0; }

.ds-type-meta {
  color: var(--jw-text-subtle);
  font-family: var(--jw-font-mono);
  font-size: var(--jw-text-2xs);
}

.ds-motion-demo {
  width: 100%;
  height: 46px;
  display: grid;
  align-items: center;
  border-radius: var(--jw-radius-md);
  background: var(--jw-surface-sunken);
  overflow: hidden;
}

.ds-motion-demo span {
  width: 40px;
  height: 40px;
  margin: 3px;
  border-radius: var(--jw-radius-sm);
  background: var(--jw-accent);
}

/* --- Responsive ---------------------------------------------------------*/

@media (max-width: 900px) {
  .ds { grid-template-columns: 1fr; }
  .ds-sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--jw-line); }
  .ds-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; overscroll-behavior-x: contain; }
  .ds-main { padding-top: var(--jw-space-8); }
  .ds-row { grid-template-columns: 1fr; gap: var(--jw-space-2); }
}

.ds-logo-state {
  display: grid;
  gap: var(--jw-space-2);
  justify-items: center;
  --jw-mark-width: 72px;
}

.ds-logo-state code {
  color: var(--jw-text-subtle);
  font-family: var(--jw-font-mono);
  font-size: var(--jw-text-2xs);
}