/* SGPCC Decision Intelligence — Singapore Competitiveness Centre visual style */

:root {
    --navy: #0a1628;
    --navy-mid: #1a2d4a;
    --navy-light: #2a4060;
    --gold: #c9a227;
    --gold-light: #e8c547;
    --gold-muted: rgba(201, 162, 39, 0.15);
    --white: #ffffff;
    --off-white: #f7f8fa;
    --text: #1a1a2e;
    --text-muted: #5a6270;
    --border: #dde1e8;
    --shadow: 0 2px 12px rgba(10, 22, 40, 0.08);
    --shadow-lg: 0 8px 32px rgba(10, 22, 40, 0.12);
    --radius: 6px;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    background-color: var(--off-white);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */

.site-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    color: var(--white);
    padding: 2.5rem 0;
    border-bottom: 4px solid var(--gold);
}

.site-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold-light);
    margin-bottom: 0.5rem;
}

.site-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Main content */

main {
    flex: 1;
    padding: 3rem 0;
}

/* Hero (index) */

.hero {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 3rem;
    text-align: center;
    border-top: 3px solid var(--gold);
}

.lead {
    font-size: 1.125rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.philosophy {
    border-left: 4px solid var(--gold);
    background: var(--gold-muted);
    padding: 1.5rem 2rem;
    margin: 0 auto 2.5rem;
    max-width: 480px;
    text-align: left;
}

.philosophy p {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--navy);
    line-height: 1.8;
}

/* Buttons */

.btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-primary {
    background: var(--gold);
    color: var(--navy);
}

.btn-primary:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.35);
}

/* Progress steps */

.progress-steps {
    margin-bottom: 2rem;
}

.progress-steps ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.progress-steps .step {
    font-size: 0.8rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.progress-steps .step::before {
    content: "Step " counter(step-counter) " — ";
    counter-increment: step-counter;
    font-weight: 600;
    color: var(--navy-light);
}

.progress-steps ol {
    counter-reset: step-counter;
}

.progress-steps .step-active {
    background: var(--navy);
    color: var(--white);
    border-color: var(--gold);
    font-weight: 600;
}

.progress-steps .step-active::before {
    color: var(--gold-light);
}

/* Form section */

.form-section,
.result-section,
.diagnosis-section,
.theory-section {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 3rem;
    border-top: 3px solid var(--gold);
}

.form-section h2,
.result-section h2,
.diagnosis-section h2,
.theory-section h2 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.decision-form {
    margin-top: 2rem;
}

.decision-form label {
    display: block;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

.decision-form textarea {
    width: 100%;
    padding: 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 1.5rem;
}

.decision-form textarea:focus,
.diagnosis-form textarea:focus,
.diagnosis-form input:focus,
.diagnosis-form select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-muted);
}

/* Diagnosis section */

.diagnosis-block {
    margin-bottom: 2rem;
}

.diagnosis-block h3 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
}

.diagnosis-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--navy-mid);
}

.diagnosis-focus {
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.7;
    padding: 1rem 1.25rem;
    background: var(--gold-muted);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
}

.theory-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.theory-list-compact {
    margin-bottom: 0;
}

.theory-card {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    color: var(--navy);
}

.theory-note,
.section-intro {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.6;
}

.diagnosis-form {
    margin-top: 1rem;
}

.checklist-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

.checklist-item label {
    display: block;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.checklist-item input,
.checklist-item textarea,
.checklist-item select,
.decision-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.checklist-item textarea {
    resize: vertical;
}

.checklist-item select {
    cursor: pointer;
}

.back-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--navy-light);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--gold);
}

/* Result section */

.decision-question {
    background: var(--navy);
    color: var(--white);
    padding: 1.5rem 2rem;
    border-radius: var(--radius);
    margin: 1.5rem 0 2rem;
    border-left: 4px solid var(--gold);
}

.decision-question h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-light);
    margin-bottom: 0.5rem;
}

.decision-question p {
    font-size: 1.125rem;
    line-height: 1.6;
}

.decision-meta {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 2rem;
}

.decision-meta h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.decision-meta p {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
}

.context-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.context-item dt {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--navy-light);
    margin-bottom: 0.25rem;
}

.context-item dd {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.6;
}

.not-provided {
    color: var(--text-muted);
    font-style: italic;
}

.analysis-card-wide {
    grid-column: 1 / -1;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.analysis-card {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: box-shadow 0.2s;
}

.analysis-card:hover {
    box-shadow: var(--shadow);
}

.analysis-card h3 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
}

.analysis-card .placeholder {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-style: italic;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

/* Theory selection */

.theory-block {
    margin-bottom: 2.5rem;
}

.theory-block h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--navy);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
}

.theory-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.theory-detail-card {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.theory-detail-header h4 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.theory-attribution {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.theory-kind {
    font-size: 0.85rem;
    color: var(--navy-light);
    font-weight: 400;
}

.theory-detail-section {
    margin-bottom: 1.25rem;
}

.theory-detail-section:last-child {
    margin-bottom: 0;
}

.theory-detail-section h5 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy-light);
    margin-bottom: 0.5rem;
}

.theory-detail-section p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
}

.lens-list,
.question-list {
    margin-left: 1.25rem;
    font-size: 0.95rem;
    color: var(--text);
}

.lens-list li,
.question-list li {
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

.theory-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.theory-support-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.theory-support-card h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.theory-support-relevance {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 0.75rem;
}

.integration-block {
    background: var(--gold-muted);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.integration-summary {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.sequence-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy-light);
    margin-bottom: 0.75rem;
}

.analysis-sequence {
    margin-left: 1.25rem;
    font-size: 0.95rem;
    color: var(--text);
}

.analysis-sequence li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.analysis-sequence-compact {
    margin-left: 1rem;
    margin-bottom: 0;
}

.theory-continue-form {
    margin-top: 2rem;
}

.theory-result-group {
    margin-bottom: 1.5rem;
}

.theory-result-group:last-child {
    margin-bottom: 0;
}

.theory-result-group h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy-light);
    margin-bottom: 0.75rem;
}

.theory-trace-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.theory-trace-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

.theory-trace-name {
    font-weight: 600;
    color: var(--navy);
    font-size: 0.95rem;
}

.theory-trace-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.theory-trace-relevance {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.6;
    margin-top: 0.5rem;
}

.theory-trace-list-compact .theory-trace-item {
    padding: 0.75rem 1rem;
}

/* Theory-based analysis */

.analysis-section-block {
    margin-bottom: 2.5rem;
}

.analysis-section-block > h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--navy);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
}

.evidence-quality-block {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.evidence-quality-warning {
    border-left-color: #c45c26;
    background: #fef8f4;
}

.evidence-quality-block h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.evidence-quality-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.quality-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quality-strong { background: #e6f4ea; color: #1e6b3a; }
.quality-moderate { background: var(--gold-muted); color: var(--navy); }
.quality-limited { background: #fef3e0; color: #8a5a00; }
.quality-insufficient { background: #fdecea; color: #8b2e1f; }

.quality-coverage,
.quality-counts {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.evidence-warning {
    font-size: 0.95rem;
    color: #8b2e1f;
    font-weight: 600;
    margin-top: 0.75rem;
    line-height: 1.6;
}

.theory-analysis-card {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.theory-analysis-header h4 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.theory-mgmt-question {
    font-size: 0.95rem;
    color: var(--text);
    margin: 1rem 0 0.5rem;
    line-height: 1.6;
}

.theory-overall-confidence {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.lens-analysis-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1.25rem;
}

.lens-dimension {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--navy);
    margin-bottom: 1rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
}

.analysis-field {
    margin-bottom: 0.875rem;
}

.analysis-field:last-child {
    margin-bottom: 0;
}

.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy-light);
    margin-bottom: 0.25rem;
}

.field-evidence {
    background: #f0f4f8;
    border-left: 3px solid var(--navy-light);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.field-finding {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.6;
}

.field-implication {
    font-size: 0.95rem;
    color: var(--navy-mid);
    line-height: 1.6;
    font-style: italic;
}

.confidence-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.confidence-high { background: #e6f4ea; color: #1e6b3a; }
.confidence-medium { background: var(--gold-muted); color: var(--navy); }
.confidence-low { background: #fef3e0; color: #8a5a00; }
.confidence-insufficient { background: #fdecea; color: #8b2e1f; }

.theory-summary-block {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--gold-muted);
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.7;
}

.theory-sub-block {
    margin-top: 1rem;
}

.theory-sub-block h6 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy-light);
    margin-bottom: 0.5rem;
}

.theory-sub-block ul {
    margin-left: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.supporting-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.supporting-analysis-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    font-size: 0.9rem;
}

.supporting-analysis-card h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.supporting-insight {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.supporting-analysis-card h6 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy-light);
    margin: 0.75rem 0 0.35rem;
}

.synthesis-block {
    background: var(--gold-muted);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.synthesis-sub {
    margin-bottom: 1.5rem;
}

.synthesis-sub:last-child {
    margin-bottom: 0;
}

.synthesis-sub h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy-light);
    margin-bottom: 0.5rem;
}

.synthesis-sub ul,
.synthesis-sub ol {
    margin-left: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
}

.readiness-block {
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 2rem;
    border: 2px solid var(--border);
}

.readiness-ready {
    background: #e6f4ea;
    border-color: #1e6b3a;
}

.readiness-conditional {
    background: #fef8f4;
    border-color: #c45c26;
}

.readiness-not_ready {
    background: #fdecea;
    border-color: #8b2e1f;
}

.readiness-block h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.readiness-status {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.readiness-reason {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.readiness-note {
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 1rem;
    color: var(--text-muted);
}

.readiness-block h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy-light);
    margin-bottom: 0.5rem;
}

.readiness-block ul {
    margin-left: 1.25rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.btn-disabled {
    background: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.8;
}

.btn-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Evidence readiness dashboard */

.evidence-readiness-dashboard {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.evidence-readiness-dashboard h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.dashboard-explanation {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.evidence-indicators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.evidence-indicator {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

.evidence-indicator-overall {
    border-left: 3px solid var(--gold);
}

.indicator-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy-light);
    margin-bottom: 0.5rem;
}

/* Evidence architecture unresolved items */

.evidence-architecture-block {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.unresolved-category {
    margin-bottom: 2rem;
}

.unresolved-category:last-child {
    margin-bottom: 0;
}

.unresolved-category h4 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.category-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-style: italic;
}

.unresolved-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.unresolved-evidence {
    border-left: 3px solid var(--navy-light);
}

.unresolved-decision {
    border-left: 3px solid var(--gold);
}

.unresolved-assumption {
    border-left: 3px solid #8a5a00;
}

.unresolved-capability {
    border-left: 3px solid var(--navy-mid);
}

.unresolved-item-title {
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.35rem;
}

.unresolved-description {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.unresolved-meta,
.unresolved-action {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 0.25rem;
}

.status-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--gold-muted);
    color: var(--navy);
    margin-left: 0.5rem;
    vertical-align: middle;
}

.status-untested {
    background: #fef3e0;
    color: #8a5a00;
}

.status-potential {
    background: #e8edf4;
    color: var(--navy-mid);
}

/* Evidence workspace */

.evidence-section {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 3rem;
    border-top: 3px solid var(--gold);
}

.evidence-section h2 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.research-task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}

.research-task-card {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    border-left: 4px solid var(--gold);
}

.research-task-card.priority-critical {
    border-left-color: var(--navy);
}

.task-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.task-id {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.05em;
}

.priority-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--gold-muted);
    color: var(--navy);
}

.priority-badge.priority-critical {
    background: var(--navy);
    color: var(--gold-light);
}

.task-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
}

.status-open { background: #fdecea; color: #8b2e1f; }
.status-in_progress { background: #fef3e0; color: #8a5a00; }
.status-evidence_collected { background: #e6f4ea; color: #1e6b3a; }

.research-task-card h4 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.task-gap-ref,
.task-question,
.task-why {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.task-detail {
    margin-bottom: 1rem;
}

.task-detail h5 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy-light);
    margin-bottom: 0.35rem;
}

.task-detail ul {
    margin-left: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.source-type-list {
    list-style: disc;
}

.btn-small {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
}

.btn-secondary {
    background: var(--white);
    color: var(--navy);
    border: 2px solid var(--gold);
}

.btn-secondary:hover {
    background: var(--gold-muted);
}

.research-evidence-form {
    display: inline;
}

.evidence-registry-table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.evidence-registry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.evidence-registry-table th,
.evidence-registry-table td {
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.evidence-registry-table th {
    background: var(--navy);
    color: var(--white);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.evidence-registry-table tr:nth-child(even) {
    background: var(--off-white);
}

.row-contradiction {
    background: #fef8f4 !important;
    border-left: 3px solid #c45c26;
}

.claim-cell {
    max-width: 200px;
}

.mapping-cell {
    min-width: 140px;
}

.mapping-tag {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    color: var(--navy-light);
}

.evidence-detail-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.evidence-detail-card {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.evidence-detail-card summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
    font-size: 0.9rem;
}

.evidence-detail-dl {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.evidence-detail-dl dt {
    font-weight: 600;
    color: var(--navy-light);
    margin-top: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.evidence-detail-dl dd {
    margin-left: 0;
    line-height: 1.6;
    color: var(--text);
}

.task-context-block {
    background: var(--gold-muted);
    border-left: 4px solid var(--gold);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.7;
}

.evidence-entry-form select,
.evidence-entry-form input[type="text"],
.evidence-entry-form input[type="url"],
.evidence-entry-form input[type="date"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}

.evidence-entry-form label {
    display: block;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.evidence-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.mock-mode-banner {
    background: #fef3e0;
    border: 2px solid #c45c26;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.mock-mode-banner strong {
    color: #8b2e1f;
    display: block;
    margin-bottom: 0.35rem;
}

.live-mode-banner {
    background: #eaf6ff;
    border: 2px solid #1e6bba;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.live-mode-banner strong {
    color: #0f3b73;
    display: block;
    margin-bottom: 0.35rem;
}

.invalid-evidence-card {
    border: 1px solid #c45c26 !important;
    background: #fff8f4;
}

.validity-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    margin-left: 0.45rem;
}

.validity-not-evidence,
.validity-failed {
    background: #fdecea;
    color: #8b2e1f;
}

.validity-weak {
    background: #fef3e0;
    color: #8a5a00;
}

.validity-valid {
    background: #e6f4ea;
    color: #1e6b3a;
}

.validity-reasons {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: #fff4ec;
    border-left: 3px solid #c45c26;
}

.validity-reasons ul {
    margin: 0.35rem 0 0 1.1rem;
}

.mock-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: #fdecea;
    color: #8b2e1f;
    margin-left: 0.5rem;
}

.mock-data-card {
    border: 1px dashed #c45c26 !important;
    background: #fef8f4 !important;
}

.task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.inline-form {
    display: inline;
}

.candidate-source-card,
.candidate-evidence-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.candidate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.status-researched { background: #e8edf4; color: var(--navy-mid); }
.status-evidence_under_review { background: #fef3e0; color: #8a5a00; }
.status-evidence_collected { background: #e6f4ea; color: #1e6b3a; }

/* Footer */

.site-footer {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.7);
    padding: 1.25rem 0;
    font-size: 0.85rem;
    margin-top: auto;
}

/* Responsive */

@media (max-width: 640px) {
    .hero,
    .form-section,
    .result-section,
    .diagnosis-section,
    .theory-section,
    .evidence-section {
        padding: 1.75rem 1.25rem;
    }

    .progress-steps .step {
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
    }

    .site-header {
        padding: 1.75rem 0;
    }

    main {
        padding: 1.5rem 0;
    }

    .result-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* V0.3C preference form layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.25rem;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--navy);
}

/* V0.4.1 — Integration UX */
.workflow-12 ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin-bottom: 1.25rem;
}
.workflow-12 .step {
    font-size: 0.68rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 4px;
    color: var(--text-muted);
}
.workflow-12 .step-active {
    border-color: var(--gold);
    background: var(--gold-muted);
    color: var(--navy);
    font-weight: 600;
}
.workflow-12 .step-done {
    border-color: var(--navy-light);
    color: var(--navy-mid);
}
.workflow-12 .step-num {
    display: inline-block;
    margin-right: 0.2rem;
    opacity: 0.7;
}
.session-summary {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.session-summary-grid {
    display: grid;
    gap: 0.75rem;
}
.ss-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.ss-question {
    font-size: 0.95rem;
    color: var(--navy);
    margin-top: 0.25rem;
}
.ss-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.stale-banner {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff6e8;
    border: 1px solid #e0b35a;
    color: #5a3d0a;
    border-radius: var(--radius);
}
.next-action-inline {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}
.view-mode-toggle {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.btn-sm {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
}
.btn-primary-cta {
    display: inline-block;
    margin-top: 1rem;
}
.trace-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: ui-monospace, Consolas, monospace;
}
.review-links {
    margin: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    align-items: center;
    font-size: 0.85rem;
}
.review-links a {
    color: var(--navy-mid);
}
.dashboard-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
}
.dash-card {
    background: var(--off-white);
    border: 1px solid var(--border);
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
}
.dash-card h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    font-weight: 600;
}
.next-best-action-block {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 2px solid var(--gold);
    background: var(--gold-muted);
    border-radius: var(--radius);
}
.theory-gap-notice {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px dashed var(--navy-light);
    background: #f0f4f8;
    border-radius: var(--radius);
}
.active-decision-panel {
    margin-top: 1.5rem;
    text-align: left;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.active-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    margin-bottom: 0.5rem;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.25rem;
}
.storage-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
}
.edit-warning {
    font-size: 0.85rem;
    color: #7a5a10;
    margin: 0.75rem 0;
}
.hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.inline-form {
    display: inline;
}

/* V0.4.2 persistence UI */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}
.data-table th,
.data-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 0.5rem;
    text-align: left;
    vertical-align: top;
}
.data-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.table-actions a,
.table-actions .linkish {
    font-size: 0.8rem;
}
button.linkish {
    background: none;
    border: none;
    color: var(--navy-mid);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font: inherit;
}