/*
 * Participant UX Pedagogy components — Civic Clarity v5.
 * Doctrine source of truth: prompts/PARTICIPANT_UX_PEDAGOGY_DOCTRINE.md
 *
 * Token contract: every colour, surface, and accent resolves through the
 * --cd-* tokens defined in civic-clarity.css. Fallbacks below are the v5
 * Braun palette literals so pedagogy components render correctly even if
 * loaded before the design-system stylesheet.
 *
 * Materials rule (Civic Clarity): one dominant surface per component.
 * Pedagogy components are content-layer (seafoam family) with aluminum
 * frames; orange is reserved for action and is used only on the active
 * journey-wayfinding step + tone="ok" / tone="warn" semantic accents.
 */

/* Pattern 1 — Journey Wayfinding ------------------------------------------ */
.journey-wayfinding {
  display: flex;
  gap: var(--cd-space-sm, 8px);
  align-items: center;
  font-size: 0.875rem;
  color: var(--cd-muted, #6a6a60);
  padding: var(--cd-space-sm, 8px) var(--cd-space-base, 16px);
  border-bottom: 1px solid var(--cd-alum-hi, #c7c9c0);
  flex-wrap: wrap;
}
.journey-wayfinding__previous {
  opacity: 0.6;
}
.journey-wayfinding__current {
  font-weight: 600;
  color: var(--cd-text, #2f2f2c);
}
.journey-wayfinding__next {
  opacity: 0.6;
  font-style: italic;
}
.journey-wayfinding__sep {
  opacity: 0.4;
  color: var(--cd-muted, #6a6a60);
}

/* Pattern 2 — Mechanism Reveal -------------------------------------------- */
.mechanism-reveal {
  font-size: 0.875rem;
  color: var(--cd-muted, #6a6a60);
  margin: var(--cd-space-sm, 8px) 0;
}
.mechanism-reveal__summary {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  color: var(--cd-text, #2f2f2c);
}
.mechanism-reveal[open] .mechanism-reveal__summary {
  font-weight: 600;
}
.mechanism-reveal__body {
  padding: var(--cd-space-sm, 8px) 0 var(--cd-space-xs, 4px) var(--cd-space-base, 16px);
  border-left: 2px solid var(--cd-alum-hi, #c7c9c0);
  margin-top: var(--cd-space-sm, 8px);
}
.mechanism-reveal__deep summary {
  cursor: pointer;
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* Pattern 4 — After-Action Moment + Pattern 7 companion ------------------- */
.after-action {
  display: flex;
  flex-direction: column;
  gap: var(--cd-space-sm, 8px);
  padding: var(--cd-space-base, 16px);
  background: var(--cd-seafoam-hi, #eaefe1);
  border: 1px solid var(--cd-alum-hi, #c7c9c0);
  border-left: 3px solid var(--cd-orange, #e38b42);
  border-radius: var(--cd-radius-sm, 8px);
  margin: var(--cd-space-base, 16px) 0;
  box-shadow: var(--cd-shadow-l1, inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(47, 47, 44, 0.06));
}
.after-action__action {
  font-weight: 600;
  color: var(--cd-text, #2f2f2c);
  margin: 0;
}
.after-action__consequence {
  color: var(--cd-text, #2f2f2c);
  margin: 0;
}
.after-action__companion {
  color: var(--cd-muted, #6a6a60);
  font-size: 0.875rem;
  font-style: italic;
  margin: 0;
}

/* Pattern 5 — Coalition Mirror -------------------------------------------- */
.coalition-mirror {
  padding: var(--cd-space-md, 12px) var(--cd-space-base, 16px);
  background: var(--cd-seafoam-lo, #dde3d4);
  border: 1px solid var(--cd-alum-hi, #c7c9c0);
  border-radius: var(--cd-radius-sm, 8px);
  margin: var(--cd-space-sm, 8px) 0;
}
.coalition-mirror__line {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--cd-text, #2f2f2c);
}
.coalition-mirror__names {
  list-style: none;
  padding: 0;
  margin: var(--cd-space-sm, 8px) 0 0 0;
  display: flex;
  gap: var(--cd-space-sm, 8px);
  flex-wrap: wrap;
}
.coalition-mirror__names li {
  font-size: 0.8125rem;
  color: var(--cd-muted, #6a6a60);
  padding: 2px var(--cd-space-sm, 8px);
  background: var(--cd-seafoam-hi, #eaefe1);
  border: 1px solid var(--cd-alum-hi, #c7c9c0);
  border-radius: var(--cd-radius-pill, 9999px);
}

/* Pattern 8 — System Confidence ------------------------------------------- */
.system-confidence {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cd-space-xs, 4px) var(--cd-space-md, 12px);
  align-items: baseline;
  padding: var(--cd-space-sm, 8px) var(--cd-space-md, 12px);
  margin: var(--cd-space-sm, 8px) 0;
  background: var(--cd-seafoam-hi, #eaefe1);
  border: 1px solid var(--cd-alum-hi, #c7c9c0);
  border-radius: var(--cd-radius-sm, 8px);
  font-size: 0.9375rem;
}
.system-confidence__label {
  font-weight: 600;
  color: var(--cd-text, #2f2f2c);
  margin: 0;
}
.system-confidence__value {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--cd-text, #2f2f2c);
}
.system-confidence__unit {
  font-size: 0.8125rem;
  opacity: 0.7;
  margin-left: 2px;
  color: var(--cd-muted, #6a6a60);
}
.system-confidence__basis {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--cd-muted, #6a6a60);
  font-style: italic;
}
.system-confidence--ok {
  border-left: 3px solid var(--cd-ok, #3baa6b);
}
.system-confidence--warn {
  border-left: 3px solid var(--cd-warn, #c47b2e);
}
.system-confidence--err {
  border-left: 3px solid var(--cd-err, #c5524a);
}
.system-confidence--info {
  border-left: 3px solid var(--cd-info, #4f7baf);
}

/* Pattern 9 — Lineage Record ---------------------------------------------- */
.lineage-record {
  margin: var(--cd-space-sm, 8px) 0;
  padding: var(--cd-space-sm, 8px) var(--cd-space-md, 12px);
  font-size: 0.875rem;
  color: var(--cd-text, #2f2f2c);
  background: var(--cd-seafoam-lo, #dde3d4);
  border: 1px solid var(--cd-alum-hi, #c7c9c0);
  border-left: 2px solid var(--cd-orange, #e38b42);
  border-radius: var(--cd-radius-sm, 8px);
}
.lineage-record__view {
  font-size: 0.8125rem;
  margin-left: var(--cd-space-sm, 8px);
  opacity: 0.85;
  color: var(--cd-orange-lo, #b8682c);
}

/* Pattern 10 — Opportunity Density ---------------------------------------- */
.opportunity-density {
  padding: var(--cd-space-base, 16px);
  margin: var(--cd-space-base, 16px) 0;
  background: var(--cd-seafoam-hi, #eaefe1);
  border: 1px dashed var(--cd-alum-hi, #c7c9c0);
  border-radius: var(--cd-radius-sm, 8px);
}
.opportunity-density__lede {
  margin: 0 0 var(--cd-space-md, 12px) 0;
  font-size: 0.875rem;
  color: var(--cd-muted, #6a6a60);
}
.opportunity-density__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cd-space-sm, 8px);
}
.opportunity-density__item {
  padding: var(--cd-space-sm, 8px) var(--cd-space-md, 12px);
  background: var(--cd-seafoam-lo, #dde3d4);
  border: 1px solid var(--cd-alum-hi, #c7c9c0);
  border-radius: var(--cd-radius-sm, 8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.opportunity-density__title {
  font-weight: 600;
  color: var(--cd-text, #2f2f2c);
}
.opportunity-density__hint {
  font-size: 0.8125rem;
  color: var(--cd-muted, #6a6a60);
}

/* Form-factor adaptations ------------------------------------------------- */
@media (max-width: 767px) {
  .journey-wayfinding {
    font-size: 0.8125rem;
    padding: var(--cd-space-xs, 4px) var(--cd-space-md, 12px);
  }
  .after-action {
    padding: var(--cd-space-md, 12px);
  }
}
@media (min-width: 1024px) {
  .journey-wayfinding {
    max-width: 64rem;
    margin: 0 auto;
  }
}