/* ==========================================================================
   AI Fairness Observatory - Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Research Protocol Components
   -------------------------------------------------------------------------- */
.protocol-meta {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.meta-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.meta-value {
    font-size: var(--text-base);
    color: var(--color-text);
}

.status-active {
    color: var(--color-accent);
    font-weight: 500;
}

.research-question {
    text-align: center;
    margin: var(--space-8) 0;
}

.research-question h4 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.research-question p {
    font-size: var(--text-xl);
    color: var(--color-text);
    font-weight: 500;
}

.design-overview {
    margin: var(--space-8) 0;
}

.design-overview h4 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.design-overview ol {
    margin-top: var(--space-4);
}

/* Sample Grid */
.sample-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.sample-item {
    text-align: center;
    background: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.sample-number {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.sample-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Variable Table */
.variable-table,
.interpretation-table {
    margin: var(--space-6) 0;
    overflow-x: auto;
}

.variable-table table,
.interpretation-table table {
    width: 100%;
    border-collapse: collapse;
}

.variable-table th,
.variable-table td,
.interpretation-table th,
.interpretation-table td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.variable-table th,
.interpretation-table th {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    background: var(--color-surface);
}

.variable-table td,
.interpretation-table td {
    color: var(--color-text-secondary);
}

/* Outcomes Grid */
.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin: var(--space-6) 0;
}

.outcome-card {
    background: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.outcome-card h4 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.outcome-card ul {
    list-style: none;
    padding: 0;
}

.outcome-card li {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
}

/* Formula Box */
.formula-box {
    background: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    text-align: center;
    margin: var(--space-6) 0;
    border: 1px solid var(--color-border);
}

.formula-box code {
    font-size: var(--text-lg);
    background: none;
    padding: 0;
}

/* Literature Grid */
.literature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.lit-card h4 {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}

.lit-journal {
    font-size: var(--text-sm);
    color: var(--color-accent);
    font-style: italic;
    margin-bottom: var(--space-3);
}

.lit-card p:last-child {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Methodology Components
   -------------------------------------------------------------------------- */
.method-visual {
    margin: var(--space-10) 0;
    overflow-x: auto;
}

.method-visual {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    flex-wrap: nowrap;
    min-width: min-content;
}

.method-step {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-lg);
}

.step-content h4 {
    margin-bottom: var(--space-2);
}

.step-content p {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.step-result {
    background: var(--color-surface);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-success);
}

.step-conclusion {
    font-weight: 600;
    color: var(--color-warning);
}

.method-arrow {
    display: flex;
    align-items: center;
    font-size: var(--text-2xl);
    color: var(--color-text-muted);
    padding-top: var(--space-12);
}

/* Principle Grid */
.principle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.principle-card {
    text-align: center;
}

.principle-card h4 {
    font-size: var(--text-base);
}

.principle-card p {
    font-size: var(--text-sm);
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.category-card {
    background: var(--color-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.category-card h4 {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
    color: var(--color-accent);
}

.category-card ul {
    list-style: none;
    padding: 0;
}

.category-card li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.category-card li:last-child {
    border-bottom: none;
}

/* Symptom Grid */
.symptom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.symptom-category h4 {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}

.symptom-category ul {
    list-style: none;
    padding: 0;
}

.symptom-category li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: var(--space-2) 0;
}

/* Urgency Badges */
.urgency-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.urgency-badge.emergency {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.urgency-badge.urgent {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.urgency-badge.routine {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.urgency-badge.self-care {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

/* Profile Example */
.profile-example {
    margin: var(--space-8) 0;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.profile-id {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.profile-category {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.profile-content p {
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}

/* Effect Interpretation */
.effect-interpretation {
    margin: var(--space-8) 0;
}

.effect-level {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.effect-bar {
    width: 60px;
    height: 8px;
    border-radius: var(--radius-full);
}

.effect-bar.negligible {
    background: var(--color-text-muted);
    width: 20px;
}

.effect-bar.small {
    background: var(--color-warning);
    width: 40px;
}

.effect-bar.medium {
    background: #f97316;
    width: 60px;
}

.effect-bar.large {
    background: var(--color-danger);
    width: 80px;
}

.effect-info strong {
    margin-right: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.effect-info span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Transparency Box */
.transparency-box {
    text-align: center;
    margin: var(--space-10) 0;
}

.check-list {
    list-style: none;
    padding: 0;
    text-align: left;
    display: inline-block;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--color-text-secondary);
}

.check-list li::before {
    content: '✓';
    color: var(--color-success);
    font-weight: 700;
}

.transparency-cta {
    margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Interactive Demo Components
   -------------------------------------------------------------------------- */
.demo-intro {
    margin-bottom: var(--space-10);
}

.demo-intro h2 {
    margin-bottom: var(--space-4);
}

.demo-note {
    font-size: var(--text-sm);
    color: var(--color-warning);
    font-style: italic;
}

.demo-container {
    margin: var(--space-10) 0;
}

.demo-step {
    margin-bottom: var(--space-10);
}

.demo-step.hidden {
    display: none;
}

.step-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.step-header .step-number {
    width: 36px;
    height: 36px;
    font-size: var(--text-base);
}

.step-header h3 {
    margin-bottom: 0;
}

/* Scenario Selection */
.scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.scenario-btn {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-base);
}

.scenario-btn:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.scenario-btn.selected {
    border-color: var(--color-accent);
    background: rgba(59, 130, 246, 0.1);
}

.scenario-icon {
    font-size: var(--text-3xl);
    display: block;
    margin-bottom: var(--space-3);
}

.scenario-name {
    font-weight: 600;
    color: var(--color-text);
    display: block;
    margin-bottom: var(--space-1);
}

.scenario-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Symptom Display */
.symptom-display {
    margin-bottom: var(--space-6);
}

.symptom-display p {
    font-size: var(--text-lg);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.symptom-meta {
    display: flex;
    gap: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.step-instruction {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--space-4);
}

/* Name Pair Display */
.name-pair-display {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.name-card {
    flex: 1;
    text-align: center;
}

.name-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.name-value {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text);
}

.vs-badge {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Results Comparison */
.results-comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.result-card {
    padding: var(--space-6);
}

.result-name {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.result-a .result-name {
    color: var(--color-success);
}

.result-b .result-name {
    color: var(--color-warning);
}

.result-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.result-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.result-value {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
}

/* Bias Analysis */
.bias-analysis h4 {
    color: var(--color-warning);
    margin-bottom: var(--space-3);
}

.documented-source {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Education Section */
.education-section {
    margin-top: var(--space-16);
}

.education-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.education-card h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
}

.education-card p {
    font-size: var(--text-sm);
}

.research-callout {
    margin: var(--space-10) 0;
}

.research-callout h3 {
    margin-bottom: var(--space-4);
}

.research-callout ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-4);
}

.research-callout li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.research-callout li:last-child {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   Findings Components
   -------------------------------------------------------------------------- */
.status-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.status-icon {
    font-size: var(--text-4xl);
}

.status-content h2 {
    margin-bottom: var(--space-2);
}

.status-timeline {
    font-size: var(--text-sm);
    color: var(--color-accent);
    font-weight: 500;
    margin-top: var(--space-3);
}

/* Indicator Grid */
.indicator-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.indicator-card {
    padding: var(--space-6);
}

.indicator-category {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.indicator-finding {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.indicator-icon {
    font-size: var(--text-xl);
}

.indicator-icon.warning {
    color: var(--color-warning);
}

.indicator-icon.investigating {
    color: var(--color-accent);
}

.indicator-finding p {
    margin-bottom: 0;
}

.indicator-context {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Caveat Box */
.caveat-box {
    margin: var(--space-10) 0;
}

.caveat-box h3 {
    color: var(--color-warning);
    margin-bottom: var(--space-4);
}

.caveat-box ul {
    list-style: none;
    padding: 0;
}

.caveat-box li {
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Report Preview */
.report-preview {
    margin: var(--space-10) 0;
}

.report-section {
    margin-bottom: var(--space-8);
}

.report-section h4 {
    margin-bottom: var(--space-2);
}

.report-section p {
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.chart-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
}

.chart-placeholder span {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Disclosure Timeline */
.disclosure-timeline {
    margin: var(--space-8) 0;
}

.timeline-phase {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.timeline-phase:last-child {
    border-bottom: none;
}

.phase-marker {
    width: 24px;
    text-align: center;
    color: var(--color-text-muted);
}

.timeline-phase.completed .phase-marker {
    color: var(--color-success);
}

.timeline-phase.active .phase-marker {
    color: var(--color-accent);
}

.phase-content h4 {
    margin-bottom: var(--space-1);
    font-size: var(--text-base);
}

.phase-content p {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* Subscribe Box */
.subscribe-box {
    margin: var(--space-10) 0;
    text-align: center;
}

.subscribe-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.subscribe-method {
    text-align: center;
}

.subscribe-method h4 {
    margin-bottom: var(--space-2);
}

.subscribe-method p {
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Ethics Components
   -------------------------------------------------------------------------- */
.ethics-statement {
    text-align: center;
    margin-bottom: var(--space-12);
}

.statement-text {
    font-size: var(--text-xl);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin: var(--space-10) 0;
}

.principle-card .principle-icon {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

.dont-list {
    margin: var(--space-8) 0;
}

.dont-list ul {
    list-style: none;
    padding: 0;
}

.dont-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.dont-list li:last-child {
    border-bottom: none;
}

.dont-icon {
    color: var(--color-danger);
    font-weight: 700;
}

.consideration-box,
.tos-section {
    margin: var(--space-8) 0;
}

.consideration-box h3,
.tos-section h3 {
    margin-bottom: var(--space-4);
}

/* Process Steps */
.disclosure-process {
    margin: var(--space-10) 0;
}

.process-step {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}

.process-step:last-child {
    border-bottom: none;
}

.process-step .step-number {
    flex-shrink: 0;
}

.process-step .step-content h4 {
    margin-bottom: var(--space-2);
}

.process-step .step-content p {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* Importance Section */
.importance-section {
    margin: var(--space-10) 0;
}

.importance-section h3 {
    margin-bottom: var(--space-4);
}

/* Hopes Grid */
.hopes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin: var(--space-10) 0;
}

.hope-card h4 {
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.hope-card p {
    font-size: var(--text-sm);
}

.contact-box {
    margin: var(--space-10) 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Resources Components
   -------------------------------------------------------------------------- */
.open-science-banner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.banner-icon {
    font-size: var(--text-4xl);
}

.banner-content h2 {
    margin-bottom: var(--space-2);
}

/* Download Grid */
.download-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.download-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.download-card .download-icon {
    font-size: var(--text-3xl);
}

.download-content h3 {
    margin-bottom: var(--space-1);
    font-size: var(--text-base);
}

.download-content p {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.download-meta {
    display: flex;
    gap: var(--space-4);
}

.download-meta span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.download-btn {
    margin-top: auto;
}

/* Repository Card */
.repo-card {
    margin: var(--space-10) 0;
}

.repo-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.repo-icon {
    font-size: var(--text-3xl);
}

.repo-info h3 {
    font-family: var(--font-mono);
    margin-bottom: var(--space-1);
}

.repo-info p {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

.repo-contents h4 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.repo-tree {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-6);
}

.repo-tree li {
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.repo-tree code {
    color: var(--color-accent);
    margin-right: var(--space-2);
}

.repo-actions {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.repo-meta {
    display: flex;
    gap: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Literature List */
.literature-list {
    margin: var(--space-8) 0;
}

.lit-item {
    margin-bottom: var(--space-6);
}

.lit-citation h4 {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}

.lit-title {
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.lit-item .lit-journal {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.lit-relevance {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: var(--space-3) 0;
}

.lit-link {
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Citation Box */
.citation-box {
    margin: var(--space-10) 0;
}

.citation-box h4 {
    margin-bottom: var(--space-4);
}

.citation-text {
    background: var(--color-surface);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.citation-text code {
    display: block;
    white-space: pre-wrap;
    background: none;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Collaboration Section */
.collab-section {
    margin: var(--space-10) 0;
}

.collab-section h3 {
    margin-bottom: var(--space-4);
}

.collab-section ul {
    list-style: none;
    padding: 0;
}

.collab-section li {
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* License Section */
.license-section {
    margin: var(--space-10) 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.license-item h4 {
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
}

.license-item p {
    font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .method-visual {
        flex-wrap: wrap;
    }
    
    .method-arrow {
        display: none;
    }
    
    .method-step {
        min-width: 45%;
    }
}

@media (max-width: 768px) {
    .sample-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .outcomes-grid,
    .literature-grid,
    .principle-grid,
    .category-grid,
    .symptom-grid,
    .indicator-grid,
    .principles-grid,
    .hopes-grid,
    .download-grid,
    .education-grid {
        grid-template-columns: 1fr;
    }
    
    .scenario-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .results-comparison {
        grid-template-columns: 1fr;
    }
    
    .name-pair-display {
        flex-direction: column;
    }
    
    .subscribe-methods {
        grid-template-columns: 1fr;
    }
    
    .license-section {
        grid-template-columns: 1fr;
    }
    
    .status-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .open-science-banner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .sample-grid {
        grid-template-columns: 1fr;
    }
    
    .scenario-grid {
        grid-template-columns: 1fr;
    }
    
    .method-step {
        min-width: 100%;
    }
    
    .repo-actions {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Press Kit Components
   -------------------------------------------------------------------------- */
.press-summary {
    max-width: 900px;
    margin: 0 auto;
}

.summary-section {
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
}

.summary-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.summary-section h3 {
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.headline-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.headline-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.headline-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
}

.headline-text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.headline-text strong {
    color: var(--color-text);
}

/* Quote Grid */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.quote-card {
    text-align: center;
}

.quote-stat {
    font-size: var(--text-4xl);
    font-weight: 700;
    font-family: var(--font-mono);
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-3);
}

.quote-context {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}

.quote-source {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* FAQ */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.faq-item h4 {
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.faq-item p {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* Graphics Grid */
.graphics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.graphic-card {
    display: flex;
    flex-direction: column;
}

.graphic-preview {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    aspect-ratio: 2/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-svg {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
}

.graphic-info h4 {
    margin-bottom: var(--space-2);
}

.graphic-info p {
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* Contact Press */
.contact-press {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.contact-press h2 {
    margin-bottom: var(--space-4);
}

.contact-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.contact-method h4 {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.contact-method p {
    font-family: var(--font-mono);
    color: var(--color-accent);
    margin-bottom: 0;
}

.contact-note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Press Kit Responsive */
@media (max-width: 768px) {
    .quote-grid {
        grid-template-columns: 1fr;
    }
    
    .graphics-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-methods {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Enhanced Demo Components
   -------------------------------------------------------------------------- */
.vignette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.vignette-btn {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.vignette-btn:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.vignette-btn.selected {
    border-color: var(--color-accent);
    background: rgba(59, 130, 246, 0.1);
}

.vignette-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent);
}

.vignette-name {
    font-weight: 600;
    color: var(--color-text);
}

.category-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.category-badge .badge {
    background: var(--color-accent);
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.category-badge .vignette-id {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Open Science Badges
   -------------------------------------------------------------------------- */
.open-science-badges {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: var(--space-6) 0;
}

.os-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.os-badge-icon {
    font-size: var(--text-base);
}

.os-badge-verified {
    border-color: var(--color-success);
    background: rgba(16, 185, 129, 0.1);
}

.os-badge-verified .os-badge-icon {
    color: var(--color-success);
}

/* --------------------------------------------------------------------------
   Pre-registration Notice
   -------------------------------------------------------------------------- */
.prereg-notice {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.prereg-icon {
    font-size: var(--text-3xl);
    flex-shrink: 0;
}

.prereg-content h4 {
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.prereg-content p {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.prereg-date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Enhanced Demo Components (Category-Based)
   -------------------------------------------------------------------------- */

/* Demo Introduction */
.demo-intro {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    margin-bottom: var(--space-10);
}

.intro-icon {
    font-size: var(--text-4xl);
    flex-shrink: 0;
}

.intro-content {
    flex: 1;
}

.intro-content h2 {
    margin-bottom: var(--space-3);
}

.intro-content p {
    margin-bottom: var(--space-4);
}

.intro-steps {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.intro-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.intro-step .step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.category-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    cursor: pointer;
    transition: all var(--transition-base);
}

.category-btn:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.category-btn.selected {
    border-color: var(--color-accent);
    background: rgba(59, 130, 246, 0.15);
}

.category-icon {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-3);
}

.category-name {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.category-count {
    font-size: var(--text-xs);
    color: var(--color-accent);
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.category-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

/* Step Note */
.step-note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Symptom Display Enhanced */
.symptom-badge-row {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.category-badge {
    background: var(--color-accent);
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.vignette-badge {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-surface-elevated);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.symptom-display h4 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.symptom-text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

/* Result Card Enhanced */
.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.result-header .result-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.result-header .result-name {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0;
    padding: 0;
    border: none;
}

.result-a .result-header .result-name {
    color: var(--color-success);
}

.result-b .result-header .result-name {
    color: var(--color-warning);
}

.result-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-2) 0;
}

.result-row .result-key {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.result-row .result-value {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    text-align: right;
}

/* Analysis Box */
.analysis-box {
    margin-bottom: var(--space-8);
}

.analysis-box h4 {
    margin-bottom: var(--space-3);
}

.analysis-note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* Result Actions */
.result-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
}

/* Back Button */
.btn-text {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--space-2) 0;
    transition: color var(--transition-fast);
}

.btn-text:hover {
    color: var(--color-accent);
}

.back-btn {
    margin-top: var(--space-4);
}

/* Run Button */
.run-btn {
    margin-top: var(--space-6);
}

/* Education Section */
.education-section {
    margin-top: var(--space-16);
}

.education-section h2 {
    margin-bottom: var(--space-8);
}

.education-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.education-card {
    text-align: center;
}

.edu-icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}

.education-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}

.education-card p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Literature Callout */
.literature-callout {
    margin-bottom: var(--space-10);
}

.literature-callout h3 {
    margin-bottom: var(--space-6);
}

.lit-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lit-list li {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.lit-list li:last-child {
    border-bottom: none;
}

.lit-list strong {
    color: var(--color-text);
}

.lit-conclusion {
    margin-top: var(--space-6);
    font-weight: 500;
    color: var(--color-text);
}

/* CTA Section */
.cta-section {
    text-align: center;
}

.cta-section h3 {
    margin-bottom: var(--space-3);
}

.cta-section p {
    margin-bottom: var(--space-6);
}

.cta-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Demo Responsive */
@media (max-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .education-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .demo-intro {
        flex-direction: column;
    }
    
    .intro-steps {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .category-grid {
        grid-template-columns: 1fr;
    }
    
    .name-pair-display {
        flex-direction: column;
    }
    
    .vs-badge {
        padding: var(--space-2) 0;
    }
    
    .results-comparison {
        grid-template-columns: 1fr;
    }
    
    .result-actions {
        flex-direction: column;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}