/* Universal Design System — adoption layer (Phase 2 · Package 3B)
 *
 * This stylesheet DEFINES NO COLOUR. Every value is a var(--sector-*) or
 * var(--status-*) supplied at runtime by universal-design-system.js through
 * the public API payload. That is the whole point: identity has exactly one
 * authority, and a page consumes it rather than choosing it.
 *
 * If a hex literal ever appears in this file, adoption has been broken and the
 * governed authority has been bypassed — a test asserts that it never does.
 *
 * Fallbacks reference the existing neutral tokens in tokens.css so a surface
 * that loads before its sector is resolved degrades to the platform neutral
 * rather than to an unstyled or invisible state.
 */

/* --- hero: the first thing that tells a client which sector they are in --- */
.sector-identity-hero,
.pub-hero {
  background-image: var(--sector-gradient, none);
}

.sector-identity-hero .eyebrow,
.pub-hero .eyebrow {
  color: var(--sector-accent, var(--text-secondary));
}

/* --- section furniture --- */
.sector-section-head .eyebrow {
  color: var(--sector-secondary, var(--text-secondary));
}

.sector-section-head h2 {
  border-inline-start: 3px solid var(--sector-primary, var(--border-interactive));
  padding-inline-start: var(--space-3, .75rem);
}

/* --- chips, tags, badges --- */
.sector-chip {
  border: 1px solid var(--sector-primary, var(--border-subtle));
}

.sector-chip a {
  color: var(--sector-primary, var(--text-primary));
}

.sector-badge {
  background: var(--sector-primary, var(--surface-emphasis));
  color: var(--sector-on-primary, var(--text-primary));
}

.sector-tag {
  background: var(--sector-accent, var(--surface-raised));
  color: var(--sector-ink, var(--text-primary));
}

/* --- KPI + cards --- */
.sector-kpi {
  border-top: 3px solid var(--sector-accent, var(--border-interactive));
}

.sector-stat-value {
  color: var(--sector-primary, var(--text-primary));
}

.sector-card {
  border-inline-start: 4px solid var(--sector-primary, var(--border-subtle));
}

/* --- CTA --- */
.sector-identity-cta.btn-primary,
.pub-hero .btn-primary {
  background: var(--sector-primary, var(--surface-emphasis));
  color: var(--sector-on-primary, var(--text-primary));
  border-color: var(--sector-primary, var(--border-interactive));
}

.sector-identity-cta.btn-primary:hover,
.pub-hero .btn-primary:hover {
  background: var(--sector-secondary, var(--surface-emphasis));
  border-color: var(--sector-secondary, var(--border-interactive));
}

/* --- product surfaces accent the sector, never replace it --- */
.product-accent,
.fsl-dl {
  border-color: var(--product-accent, var(--sector-accent, var(--border-subtle)));
}

.product-cover {
  background-image: var(--sector-gradient, none);
  border-bottom: 4px solid var(--product-accent, var(--sector-accent, transparent));
}

/* --- governed status colours: never chosen locally --- */
.status-available { color: var(--status-available); }
.status-partial { color: var(--status-partial); }
.status-ai-draft { color: var(--status-ai-draft); }
.status-not-authored { color: var(--status-not-authored); }
.status-not-connected { color: var(--status-not-connected); }
.status-not-applicable { color: var(--status-not-applicable); }
.status-blocked-by-human-governance { color: var(--status-blocked-by-human-governance); }
.status-runtime-not-observed { color: var(--status-runtime-not-observed); }

/* --- chart series inherit the sector palette --- */
.chart-series-1 { color: var(--sector-chart-1); }
.chart-series-2 { color: var(--sector-chart-2); }
.chart-series-3 { color: var(--sector-chart-3); }

/* Accessibility: identity is never the only signal. Status classes pair with
 * an icon in markup, and reduced-motion users get no identity animation. */
@media (prefers-reduced-motion: reduce) {
  .sector-identity-hero,
  .pub-hero {
    transition: none;
    animation: none;
  }
}

/* --- Knowledge Ecosystem discovery experience (Package 4A-i Chunk 2) ---
 * Consumes governed variables only; defines no colour of its own. */
.ke-discovery-head h3 { margin-bottom: .25rem; }
.ke-filters {
  display: grid; gap: var(--space-4, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: var(--space-5, 1.25rem) 0;
}
.ke-filter-search { grid-column: 1 / -1; }
.ke-filter-field label { display: block; font-size: .8rem; margin-bottom: .3rem; }
.ke-filter-field select,
.ke-filter-field input[type="search"] {
  width: 100%; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid var(--sector-primary, var(--border-subtle));
  background: var(--surface-base); color: var(--text-primary);
}
.ke-filter-field select:focus-visible,
.ke-filter-field input:focus-visible,
.ke-chip-x:focus-visible {
  outline: 3px solid var(--sector-accent, var(--border-interactive)); outline-offset: 2px;
}
.ke-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: var(--space-4, 1rem); }
.ke-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid var(--sector-primary, var(--border-subtle));
  font-size: .85rem;
}
.ke-chip-key { opacity: .75; }
.ke-chip-x { background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; color: inherit; }
.ke-count {
  font-weight: 600;
  /* An existing site rule tinted this element amber, measuring 2.95 against the
   * page background. The result count is load-bearing information, so it takes
   * a governed high-contrast token rather than inheriting decorative colour. */
  color: var(--sector-ink, var(--text));
}
.ke-why summary { cursor: pointer; }
.ke-empty-actions { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 480px) { .ke-filters { grid-template-columns: 1fr; } }

/* --- Explorer views and unified search (Chunk 3) — variables only --- */
.ke-viewnav { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--space-4, 1rem); }
.ke-viewnav [role="tab"][aria-selected="true"] {
  border-color: var(--sector-primary, var(--border-interactive));
  box-shadow: inset 0 -2px 0 var(--sector-primary, var(--border-interactive));
}
.ke-badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  border: 1px solid var(--sector-secondary, var(--border-subtle));
}
.ke-badge-curated { border-style: dashed; }
.ke-search-group { margin-top: var(--space-5, 1.25rem); }
.ke-search-group h4 { margin-bottom: .4rem; }