/* 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 ---
   The sector palette that supplies these is not implemented, so every one of
   them resolved to nothing and the colour silently fell back to inherit. The
   fallback makes each declaration valid on its own while still deferring to
   the palette if a sector theme later defines it. */
.status-available { color: var(--status-available, currentColor); }
.status-partial { color: var(--status-partial, currentColor); }
.status-ai-draft { color: var(--status-ai-draft, currentColor); }
.status-not-authored { color: var(--status-not-authored, currentColor); }
.status-not-connected { color: var(--status-not-connected, currentColor); }
.status-not-applicable { color: var(--status-not-applicable, currentColor); }
.status-blocked-by-human-governance { color: var(--status-blocked-by-human-governance, currentColor); }
.status-runtime-not-observed { color: var(--status-runtime-not-observed, currentColor); }

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

/* 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; }