/* Reference page only (components.html). Portfolio pages never load this file. */

.doc-intro { padding-bottom: var(--space-10); }
.doc-intro-title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--font-primary);
}
.doc-intro-text {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-md);
  line-height: var(--line-height-relaxed);
  color: var(--font-muted);
}
.doc-intro-text code, .doc-desc code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-3);
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--font-secondary);
}

.doc-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-8);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-app);
}
.doc-overview-log {
  padding: var(--space-4) var(--space-4) 0 var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--card-radius);
  background: var(--bg-base);
}
.doc-overview-caption {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 0 var(--space-3) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--font-muted);
}
@media (max-width: 1100px) {
  .doc-overview { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .doc-overview { padding: var(--space-5) var(--space-4); }
}

.doc-section { padding-top: var(--space-16); }
.doc-desc {
  max-width: var(--measure-compact);
  margin: calc(var(--space-6) * -1 + var(--space-3)) 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
  color: var(--font-muted);
}

.preview {
  padding: var(--space-8);
  border: 1px solid var(--border-default);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: var(--bg-app);
}
.preview-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.preview-stack { display: grid; gap: var(--space-4); }
.preview-label {
  min-width: 88px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--font-muted);
}
@media (max-width: 600px) {
  .preview { padding: var(--space-5) var(--space-4); }
}

.snippet {
  border: 1px solid var(--border-default);
  border-top: 0;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  background: var(--code-bg);
}
.snippet summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--font-muted);
  cursor: pointer;
  list-style: none;
}
.snippet summary::-webkit-details-marker { display: none; }
.snippet summary:hover { color: var(--font-primary); }
.snippet summary .icon { transition: transform var(--transition-fast); }
.snippet[open] summary .icon { transform: rotate(90deg); }
.snippet summary .btn { margin-left: auto; }
.snippet pre {
  max-height: 360px;
  overflow: auto;
  padding: var(--space-4);
  border-top: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--code-text);
}
.snippet-only { border-top: 1px solid var(--border-default); border-radius: var(--card-radius); }

.swatch-groups { display: grid; gap: var(--space-8); }
.swatch-group-title { margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--font-primary); }
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: var(--space-3);
  list-style: none;
}
.swatch {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--card-radius);
  background: var(--bg-surface);
}
.swatch-chip { height: 56px; background: var(--swatch); border-bottom: 1px solid var(--border-default); }
.swatch-meta { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); }
.swatch-name { font-family: var(--font-mono); font-size: 11px; color: var(--font-primary); }
.swatch-value { font-family: var(--font-mono); font-size: 11px; color: var(--font-muted); text-transform: lowercase; }
.swatch-role { font-size: var(--text-xs); color: var(--font-muted); }

.type-specimens { display: grid; list-style: none; }
.type-specimen {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-default);
}
.type-specimen:first-child { padding-top: 0; }
.type-specimen:last-child { border-bottom: 0; padding-bottom: 0; }
.type-specimen-meta { display: grid; gap: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--font-muted); }
.type-specimen-meta strong { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--font-primary); }
.type-body { max-width: var(--measure); line-height: var(--line-height-relaxed); color: var(--font-secondary); }
.type-small { font-size: var(--text-sm); color: var(--font-secondary); }
.type-mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--font-secondary); }
@media (max-width: 600px) {
  .type-specimen { grid-template-columns: 1fr; }
}

.scale { display: grid; gap: var(--space-2); list-style: none; }
.scale-row { display: grid; grid-template-columns: 96px 44px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.scale-name { font-family: var(--font-mono); font-size: 11px; color: var(--font-secondary); }
.scale-px { font-family: var(--font-mono); font-size: 11px; color: var(--font-muted); text-align: right; }
.scale-bar { height: 12px; border-radius: 2px; background: var(--accent-primary); }

.radii { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); list-style: none; }
.radius-item { display: grid; justify-items: center; gap: var(--space-2); }
.radius-box {
  width: 64px;
  height: 64px;
  border: 2px solid var(--accent-primary);
  background: var(--accent-primary-soft);
}