/* ============================================================================
   Style-guide chrome ONLY. Not part of the production system.
   Presentation for the guide itself: section index, swatches, spec tables,
   do/don't frames, demo shells. Production pages must not depend on this file.
   ============================================================================ */

.guide-top {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.guide-top__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 60px; }
.guide-top__tag { font-size: var(--step-fact); text-transform: uppercase; letter-spacing: var(--tracking-fact); color: var(--color-text-muted); }

/* section index */
.guide-index { border-bottom: 1px solid var(--color-line); }
.guide-index ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20);
  padding-block: var(--space-16); font-size: var(--step-caption);
}
.guide-index a { color: var(--color-text-muted); text-decoration: none; }
.guide-index a:hover { color: var(--color-accent); }
.guide-index b { color: var(--color-text); font-family: var(--font-display); font-weight: 400; margin-right: 4px; }

/* section header */
.guide-section { scroll-margin-top: 80px; border-top: 1px solid var(--color-line); }
.guide-section__num { font-family: var(--font-display); font-size: var(--step-h2); color: var(--color-text-muted); line-height: 1; }
.guide-section__head { display: grid; gap: var(--space-8); margin-bottom: var(--space-32); }
.guide-lede { max-width: var(--measure); color: var(--color-text-muted); font-size: var(--step-body-lg); line-height: var(--leading-relaxed); }

/* demo frame — isolates a live component with a caption */
.demo { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-24); }
.demo__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-8) var(--space-16); background: var(--color-surface); border-bottom: 1px solid var(--color-line);
  font-size: var(--step-caption); color: var(--color-text-muted); }
.demo__bar code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; color: var(--color-text); }
.demo__stage { padding: var(--space-32) var(--space-24); background: var(--color-bg); }
.demo__stage--flush { padding: 0; }
.demo__stage--dark { background: var(--214-ink); }
.demo__note { padding: var(--space-12) var(--space-16); border-top: 1px dashed var(--color-line); font-size: var(--step-caption); color: var(--color-text-muted); }

/* swatches */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-16); }
.swatch { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.swatch__chip { height: 96px; }
.swatch__meta { padding: var(--space-12) var(--space-16); display: grid; gap: 2px; background: var(--color-surface); }
.swatch__name { font-weight: 600; font-size: var(--step-caption); }
.swatch__val { font-family: ui-monospace, Menlo, monospace; font-size: var(--step-caption); color: var(--color-text-muted); }
.swatch__ratio { font-size: var(--step-fact); text-transform: uppercase; letter-spacing: var(--tracking-fact); }
.pass { color: #3f6b3f; } .warn { color: var(--214-gold); } .on-dark .pass { color: #9ec49e; }

/* spec table */
.spec { width: 100%; border-collapse: collapse; font-size: var(--step-caption); }
.spec th, .spec td { text-align: left; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-line); vertical-align: baseline; }
.spec th { font-size: var(--step-fact); text-transform: uppercase; letter-spacing: var(--tracking-fact); color: var(--color-text-muted); font-weight: 600; }
.spec code { font-family: ui-monospace, Menlo, monospace; color: var(--color-accent); }
.spec-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-md); }

/* type specimen rows */
.specimen { border-bottom: 1px solid var(--color-line); padding-block: var(--space-20); display: grid; gap: var(--space-8); }
.specimen__meta { font-size: var(--step-fact); text-transform: uppercase; letter-spacing: var(--tracking-fact); color: var(--color-text-muted); }

/* do / don't */
.dodont { display: grid; gap: var(--space-24); }
@media (min-width: 641px) { .dodont { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.card__tag { padding: var(--space-8) var(--space-16); font-size: var(--step-fact); text-transform: uppercase; letter-spacing: var(--tracking-fact); font-weight: 600; }
.card--do .card__tag { background: color-mix(in srgb, var(--214-olive) 22%, var(--color-bg)); color: #2c2f24; }
.card--dont .card__tag { background: color-mix(in srgb, var(--214-gold) 18%, var(--color-bg)); color: #4A3A15; }
.card__body { padding: var(--space-16); font-size: var(--step-caption); }
.card__body ul { padding-left: 1.1em; display: grid; gap: var(--space-8); }

/* spacing scale viz */
.space-row { display: flex; align-items: center; gap: var(--space-16); padding-block: var(--space-8); border-bottom: 1px solid var(--color-line); }
.space-bar { height: 14px; background: var(--214-gold); border-radius: var(--radius-sm); }
.space-row code { font-family: ui-monospace, Menlo, monospace; font-size: var(--step-caption); color: var(--color-text-muted); min-width: 9rem; }

/* motion demo */
.motion-demo { display: grid; gap: var(--space-16); }
.motion-box { height: 64px; background: var(--214-gold); color: var(--214-paper); display: grid; place-content: center;
  font-size: var(--step-caption); border-radius: var(--radius-sm); }
.motion-box.run { animation: demoSlide var(--dur-reveal) var(--ease-out); }
@keyframes demoSlide { from { opacity: 0; transform: translateY(var(--translate-max)); } to { opacity: 1; transform: none; } }

/* misc */
.pill { display: inline-flex; align-items: center; gap: var(--space-8); padding: 4px var(--space-12);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); font-size: var(--step-fact);
  text-transform: uppercase; letter-spacing: var(--tracking-fact); color: var(--color-text-muted); }
.two-col { display: grid; gap: var(--space-32); }
@media (min-width: 821px) { .two-col { grid-template-columns: 1fr 1fr; } }
.token-note { font-size: var(--step-caption); color: var(--color-text-muted); margin-top: var(--space-8); }
[hidden] { display: none !important; }