/* -----------------------------------------------------------------------------
 * File: css/chapters/06-08.css
 * Purpose: Chapter-scoped styles for Chapter 06 (API Endpoints), Chapter 07
 *          (Data Quality), and the Roadmap (originally Chapter 08, renumbered
 *          to Chapter 09 when Chapter 08 — Data Governance was inserted;
 *          filename kept as-is to avoid churning working links, but the
 *          .roadmap-* classes below now apply to #chapter-09). Extends
 *          main.css component classes; consumes tokens.css exclusively.
 *          Loaded after main.css.
 * -------------------------------------------------------------------------- */

/* ============================ Chapter 06: API Endpoints ============================ */

.domain-bars {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.domain-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: var(--sp-4);
}

.domain-bar-label {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  text-align: right;
}

.domain-bar-track {
  background: var(--c-bg-tertiary);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  height: 32px;
}

.domain-bar-fill {
  height: 100%;
  width: var(--pct, 10%);
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: var(--sp-3);
  background: linear-gradient(90deg, var(--c-accent-soft), var(--c-accent-glow));
  border-right: 2px solid var(--c-accent);
}

.domain-bar-fill.is-secondary {
  background: var(--c-bg-secondary);
  border-right: 2px solid var(--c-text-muted);
}

.domain-bar-value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-primary);
}

@media (max-width: 640px) {
  .domain-bar-row { grid-template-columns: 84px 1fr; }
  .domain-bar-label { font-size: var(--fs-xs); }
}

.format-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (max-width: 800px) {
  .format-tier-grid { grid-template-columns: 1fr; }
}

.format-tier-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.format-tier-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}

.format-pill-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.format-pill-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}

.tier-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.tier-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}

.tier-list strong {
  margin-left: auto;
  color: var(--c-text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.tier-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

.tier-dot.is-fast { background: var(--c-success); }
.tier-dot.is-mid { background: var(--c-info); }
.tier-dot.is-slow { background: var(--c-warning); }

.request-anatomy {
  display: grid;
  gap: var(--sp-4);
}

.anno-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  background: var(--c-bg-secondary);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}

.anno-key {
  font-family: var(--font-mono);
  color: var(--c-accent);
  font-weight: 700;
  margin-right: var(--sp-2);
}

.req-anno {
  border-bottom: 1px dashed var(--c-accent);
}

/* ============================ Chapter 07: Data Quality ============================ */

.cadence-bands {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cadence-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}

.cadence-freq {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cadence-detail {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.cadence-band-bar {
  display: flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

.cadence-band-bar.cadence-fast {
  background: linear-gradient(90deg, var(--c-accent-soft), transparent);
  border-left: 3px solid var(--c-accent);
}

.cadence-band-bar.cadence-deploy {
  background: linear-gradient(90deg, rgba(116, 192, 252, 0.14), transparent);
  border-left: 3px solid var(--c-info);
}

.cadence-band-bar.cadence-daily {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), transparent);
  border-left: 3px solid var(--c-warning);
}

.cadence-band-bar.cadence-continuous {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.12), transparent);
  border-left: 3px solid var(--c-success);
}

.gate-pipeline {
  justify-content: flex-start;
}

/* ============================ Chapter 09: Roadmap ============================ */

.roadmap-lanes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.roadmap-lane {
  border-left: 3px solid var(--c-border);
  padding-left: var(--sp-6);
}

.roadmap-p0 { border-left-color: var(--c-danger); }
.roadmap-p1 { border-left-color: var(--c-warning); }
.roadmap-p2 { border-left-color: var(--c-info); }
.roadmap-p3 { border-left-color: var(--c-text-muted); }

.roadmap-lane-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.roadmap-lane-window {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
}

.roadmap-chip-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--sp-4);
}

.roadmap-chip {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.roadmap-chip-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-primary);
}

.roadmap-chip-body {
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  line-height: 1.5;
}

.roadmap-chip-date {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-accent);
  border-top: 1px solid var(--c-border-soft);
}