/* FILE-MAP:
purpose: >
  Guide-only layer of ORRERY: swatch table with measured contrast, variable-width
  type specimens (Archivo wdth 62.5/100/125), code blocks, technique demos and
  process timeline — all on top of main.css tokens.
plain: >
  Estilos exclusivos da página-guia: amostras de cor, espécimes de tipografia,
  blocos de código e a linha do processo.
depends_on:
  - path: main.css
    uses: [tokens, grid, plates, mono, reveal]
used_by:
  - path: ../guide/index.html
touches:
  db_tables: []
  env: []
  config_files: []
  cache_keys: []
effects: []
invariants:
  - same design system as /, no new colors introduced
category: frontend
kind: stylesheet
END-FILE-MAP */

/* guide chapters are single-column prose + demo plates */
.guide-hero { padding-block: calc(var(--baseline) * 2) var(--baseline); }
.guide-hero .cover-title { max-width: 14ch; }
.guide-intro { margin-top: var(--baseline); max-width: var(--measure); color: var(--ink-2); }

.gsec { border-top: 1px solid var(--line); padding-block: calc(var(--baseline) * 1.5); }
.gsec-head { display: flex; align-items: baseline; gap: 1.25rem; margin-bottom: var(--baseline); }
.gsec-title {
  font-stretch: 125%;
  font-weight: 740;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.gsec-copy p { max-width: var(--measure); color: var(--ink-2); }
.gsec-copy p + p { margin-top: 1rem; }
.gsec-copy strong { color: var(--ink); font-weight: 560; }
@media (min-width: 880px) {
  .gsec-copy { grid-column: 1 / 6; }
  .gsec-demo { grid-column: 6 / 13; }
}
.gsec-demo { margin-top: var(--baseline); }
@media (min-width: 880px) { .gsec-demo { margin-top: 0; } }

/* ---------- swatches ---------- */
.swatches { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.swatches li {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.swatch-chip {
  height: 2.25rem;
  border: 1px solid var(--line);
}
.swatches .sw-name { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.swatches .sw-hex, .swatches .sw-cr { font-family: var(--font-mono); font-size: 0.71875rem; color: var(--ink-2); }
.swatches .sw-cr { text-align: right; }

/* ---------- type specimens ---------- */
.specimen { border-top: 1px solid var(--line); }
.specimen-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.specimen-row .sp-label { font-family: var(--font-mono); font-size: 0.65625rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.sp-sample { font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.1; font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-62  { font-stretch: 62.5%; }
.sp-100 { font-stretch: 100%; }
.sp-125 { font-stretch: 125%; }
.sp-mono { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 400; }
/* narrow screens: stack label above sample and size the sample so the full
   phrase renders at every width axis — a specimen must never truncate */
@media (max-width: 879px) {
  .specimen-row { grid-template-columns: 1fr; gap: 0.375rem; }
  .sp-62, .sp-100, .sp-125 { font-size: clamp(1rem, 5.4vw, 2.5rem); }
}

/* ---------- code blocks ---------- */
.code {
  background: var(--section);
  border: 1px solid var(--line);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 0;
}
.code code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: pre;
}
.code .c-dim { color: var(--ink-2); }
.code-label {
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 1.25rem 0 0.5rem;
}

/* ---------- live demo strip ---------- */
.demo-strip {
  background: var(--section);
  border: 1px solid var(--line);
  padding: 1rem;
}
.demo-strip svg { width: 100%; height: auto; }

/* ---------- process timeline ---------- */
.process { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--line); }
.process li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.process li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--navy);
}
.process b { display: block; font-weight: 560; color: var(--ink); }
.process span { grid-column: 2; color: var(--ink-2); font-size: 0.9375rem; }

/* grid diagram (12 columns) */
.grid-demo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.5rem;
  height: 5.5rem;
}
.grid-demo i {
  background: rgba(31, 42, 68, 0.08);
  border: 1px solid var(--line-soft);
}
.grid-demo i.g-plate { background: rgba(31, 42, 68, 0.22); grid-column: span 3; }