/* stylelint-disable comment-empty-line-before */
/* stylelint-disable selector-class-pattern */
/* =========================================================================
   FILENAME: dynamic-pairwise-engine.css
   ROLE: Consolidated Core Architecture, Layout Framework & UI Component Integration
   SCOPE: Structural layouts, operational interfaces, tab engines, grids, and modal frames.
          DEPENDENCY: Requires a category-specific :root palette loaded first.
   ========================================================================= */

/* =========================================================================
   1. GLOBAL CANVAS & LAYOUT WRAPPERS
   ========================================================================= */
.app-frame {
  border: 2px solid var(--surface-border);
}

.wrap {
  background-color: var(--surface-primary);
  border-left: 1px solid var(--surface-border);
  border-right: 1px solid var(--surface-border);
  box-shadow: 0 4px 6px 2px var(--box-shadow-subtle);
}

.intro {
  background-color: var(--surface-primary);
  border-left: 1px solid var(--surface-border);
  border-right: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  box-shadow: 0 4px 6px 2px var(--box-shadow-subtle);
}

body {
  background-color: var(--page-bg);
  color: var(--text-primary);
}

section {
  background: var(--surface-primary);
}

footer {
  background: var(--page-bg);
}

.block {
  background: var(--surface-secondary);
}

.block.header {
  background: var(--surface-primary);
}

.lead-in {
  color: var(--text-primary);
  font-weight: bold;
}


/* =========================================================================
   2. NAVIGATION COMPONENT SKINS
   ========================================================================= */
.app-header-compact {
  background-color: var(--page-bg);
}

.page-title {
  color: var(--text-primary);
}

.nav-matrix-dropdown {
  background-color: var(--surface-primary);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
}

.nav-matrix-dropdown a {
  color: var(--text-secondary);
  font-weight: 500;
}

.nav-matrix-dropdown a:hover {
  color: var(--action-primary);
}

.app-top-nav { 
  background-color: var(--surface-primary); 
  border-bottom: 1px solid var(--surface-border, #eeeeee);
}

.top-nav-matrix {
  /* MAY NOT NEED STYLING */
}

/* Individual accordion navigation items */
.nav-matrix-item {
  border: 1px solid var(--surface-border, #d2dfe6);
  background-color: var(--surface-secondary, #f0f4f7);
}

/* =========================================================================
   3. NATIVE DETAILS ELEMENT WORKSPACE
   ========================================================================= */
section details {
  background-color: #ffffff;
  border: 1px solid var(--surface-border, #eeeeee);
}

section details summary.block.sm {
  background-color: var(--placeholder-primary);
}

section details summary.block.sm::marker {
  color: var(--text-primary);
}
section details summary.block.sm::-webkit-details-marker {
  color: var(--text-primary);
}

section details summary.block.sm h4 {
  color: var(--text-primary);
}

section details summary.block.sm p {
  color: var(--text-primary);
}

section details div.block {
  border-top: 1px solid var(--surface-border, #eeeeee);
  background-color: var(--placeholder-secondary);
}

section details div.block p {
  color: var(--text-primary);
}

/*
 * formerly in: components/evidence.css
 *
 * Responsibility: Styles for the evidence display component — presenting
 * supporting information, citations, and data that inform decision options.
 */


/* EEAT REFERENCE */
 .ref-cue {
	display: inline-block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

section .block.md + details summary h4::before {
	content: "ⓘ ";
	font-weight: 600;
	color: var(--text-muted);
}


/* =========================================================================
   SITE HEADER — shared across silo index and standalone pages
   ========================================================================= */

.site-header {
    padding: 1rem 0;
    border-bottom: 2px solid var(--surface-border, #e5e5e5);
    margin-bottom: 1.5rem;
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.site-header__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--text-primary, #1a3a5c);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.site-header__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #1a3a5c);
    letter-spacing: -0.01em;
}

.site-header__logo:hover .site-header__name {
    color: var(--action-primary);
}