:root {
    --color-white: rgba(255, 255, 255, 1);
    --color-black: rgba(0, 0, 0, 1);
    --color-cream-50: rgba(252, 252, 249, 1);
    --color-cream-100: rgba(255, 255, 253, 1);
    --color-gray-200: rgba(245, 245, 245, 1);
    --color-gray-300: rgba(167, 169, 169, 1);
    --color-gray-400: rgba(119, 124, 124, 1);
    --color-slate-500: rgba(98, 108, 113, 1);
    --color-brown-600: rgba(94, 82, 64, 1);
    --color-charcoal-700: rgba(31, 33, 33, 1);
    --color-charcoal-800: rgba(38, 40, 40, 1);
    --color-slate-900: rgba(19, 52, 59, 1);
    --color-teal-300: rgba(50, 184, 198, 1);
    --color-teal-400: rgba(45, 166, 178, 1);
    --color-teal-500: rgba(33, 128, 141, 1);
    --color-teal-600: rgba(29, 116, 128, 1);
    --color-teal-700: rgba(26, 104, 115, 1);
    --color-teal-800: rgba(41, 150, 161, 1);
    --color-red-400: rgba(255, 84, 89, 1);
    --color-red-500: rgba(192, 21, 47, 1);
    --color-orange-400: rgba(230, 129, 97, 1);
    --color-orange-500: rgba(168, 75, 47, 1);
    --color-blue-400: rgba(59, 130, 246, 1);
    --color-purple-400: rgba(168, 85, 247, 1);
    --color-green-400: rgba(34, 197, 94, 1);

    --color-background: var(--color-cream-50);
    --color-surface: var(--color-cream-100);
    --color-text: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-500);
    --color-primary: var(--color-teal-500);
    --color-primary-hover: var(--color-teal-600);
    --color-primary-active: var(--color-teal-700);

    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 30px;

    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;

    --radius-sm: 6px;
    --radius-base: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
}

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

body {
    font-family: var(--font-family-base);
    background: #ffffff;
    color: var(--color-text);
    line-height: 1.5;
}

/* ── Assessment page header (back link + brand) ─────────── */
.ast-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-gray-200);
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.ast-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-teal-500);
    text-decoration: none;
}
.ast-back-link:hover { text-decoration: underline; }

.ast-brand {
    font-size: var(--font-size-sm);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-text);
    opacity: 0.5;
}

.ast-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-20);
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-16);
}

.header {
    text-align: center;
    margin-bottom: var(--space-32);
    padding-top: var(--space-16);
}

.header h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-8);
    color: var(--color-text);
}

.header p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
}

.progress-container {
    margin-bottom: var(--space-24);
}

#ast_contact_email {
  width: 100%;
  max-width: 400px;
  padding: 12px;
  margin: 10px 0;
  box-sizing: border-box;
}

.progress-bar {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-12);
}

.progress-fill {
    height: 100%;
    background: var(--color-teal-500);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 18px !important;
    color: var(--color-text-secondary);
    text-align: center;
}

.question-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
    margin-bottom: var(--space-20);
    box-shadow: var(--shadow-sm);
    display: none;
}

.question-section.active {
    display: block;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dimension-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-12);
}

.question-text {
    font-size: 22px !important;
    font-weight: 500;
    margin-bottom: var(--space-20);
    color: var(--color-text);
}

.options {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.option {
    position: relative;
    cursor: pointer;
}

.option input[type="radio"] {
    display: none;
}

.option input[type="radio"]:checked+label {
    border-color: var(--color-teal-500);
    border-width: 2.5px;
    background: rgba(33, 128, 141, 0.08);
    font-weight: 600;
    color: var(--color-teal-700);
    box-shadow: 0 0 0 3px rgba(33, 128, 141, 0.12);
}

.option label {
    display: block;
    padding: var(--space-16);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-white);
}

.option label:hover {
    border-color: var(--color-teal-400);
}

.button-group {
    display: flex;
    gap: var(--space-12);
    margin-top: var(--space-24);
    justify-content: space-between;
}

button {
    padding: var(--space-12) var(--space-20);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
    flex: 1;
}

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

.btn-primary:disabled {
    background: var(--color-gray-300);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-secondary {
    background: var(--color-gray-200);
    color: var(--color-text);
}

.btn-secondary:hover {
    background: var(--color-gray-300);
}

/* Results Sections */
.results-container {
    display: none;
}

.results-container.show {
    display: block;
}

.results-tier1 {
    background: linear-gradient(135deg, var(--color-teal-500) 0%, var(--color-teal-700) 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--space-32);
    text-align: center;
    margin-bottom: var(--space-32);
    box-shadow: var(--shadow-md);
}

.results-tier1 h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-12);
}

.archetype-name {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--space-16);
    line-height: 1.4;
}

.archetype-descriptor {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    margin-bottom: var(--space-24);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.core-traits {
    display: flex;
    justify-content: center;
    gap: var(--space-16);
    flex-wrap: wrap;
    margin-bottom: var(--space-24);
}

.trait-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-12);
    margin-top: var(--space-24);
}

.share-btn {
    color: white;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn:hover {
    background: rgba(83, 81, 81, 0.824);
}

.results-tier2 {
    display: none;
}

.results-tier2.show {
    display: block;
}

.dimension-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-20);
    margin-bottom: var(--space-20);
    box-shadow: var(--shadow-sm);
}

.dimension-card h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-16);
    color: var(--color-text);
}

.bar-chart {
    margin-bottom: var(--space-16);
}

.bar-item {
    margin-bottom: var(--space-12);
}

.bar-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

.bar-bg {
    height: 20px;
    background: var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.interpretation {
    background: rgba(33, 128, 141, 0.08);
    padding: var(--space-12);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    border-left: 3px solid var(--color-teal-500);
}

.blind-spots-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-20);
    margin-bottom: var(--space-20);
}

.blind-spot {
    margin-bottom: var(--space-20);
    padding-bottom: var(--space-20);
    border-bottom: 1px solid var(--color-gray-200);
}

.blind-spot:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.blind-spot h4 {
    color: var(--color-text);
    margin-bottom: var(--space-12);
    font-size: var(--font-size-lg);
}

.blind-spot p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    font-size: var(--font-size-sm);
}

.growth-path {
    background: rgba(34, 197, 94, 0.08);
    padding: var(--space-12);
    border-radius: var(--radius-base);
    border-left: 3px solid var(--color-green-400);
    margin-top: var(--space-12);
}

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

.debate-matches {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-20);
    margin-bottom: var(--space-20);
}

.match-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    padding: var(--space-16);
    margin-bottom: var(--space-12);
    transition: all 0.2s ease;
}

.match-card:hover {
    border-color: var(--color-teal-500);
    box-shadow: var(--shadow-sm);
}

.match-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-8);
}

.match-profile {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

.match-reason {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: rgba(33, 128, 141, 0.05);
    padding: var(--space-8);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-12);
}

.cta-buttons {
    display: flex;
    gap: var(--space-12);
    margin-top: var(--space-20);
    flex-wrap: wrap;
}

.cta-btn {
    flex: 1;
    min-width: 150px;
    padding: var(--space-12) var(--space-16);
    border: 2px solid var(--color-teal-500);
    background: white;
    color: var(--color-teal-500);
    border-radius: var(--radius-base);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.cta-btn:hover {
    background: var(--color-teal-500);
    color: white;
}

.tabs {
    display: flex;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
    border-bottom: 2px solid var(--color-gray-200);
}

.tab-btn {
    background: none;
    border: none;
    padding: var(--space-12) var(--space-16);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.tab-btn.active {
    color: var(--color-teal-500);
    border-bottom-color: var(--color-teal-500);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.intro-screen {
    text-align: center;
    padding: var(--space-32);
}

.intro-screen h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-16);
}

.intro-screen p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-12);
}

.intro-icon {
    font-size: 2.5rem;
    color: var(--color-teal-500);
    margin-bottom: var(--space-16);
    line-height: 1;
}

.intro-bullets {
    list-style: disc;
    text-align: left;
    display: inline-block;
    padding-left: 1.25rem;
    margin: 0 0 var(--space-16);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}
.intro-bullets li { margin-bottom: 0.35rem; }

.intro-cta {
    background: var(--color-teal-500);
    color: white;
    padding: var(--space-16) var(--space-32);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: var(--space-24);
    min-width: 160px;
}

.intro-cta:hover {
    background: var(--color-teal-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 128, 141, 0.3);
}

#resumeBtn {
    background: var(--color-teal-500);
    color: white;
}

.moral-foundation-grid {
    display: grid;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}

.moral-item {
    background: var(--color-white);
    padding: var(--space-12);
    border-radius: var(--radius-base);
    border-left: 4px solid var(--color-teal-500);
}

.moral-rank {
    font-weight: 600;
    color: var(--color-teal-500);
    margin-bottom: var(--space-4);
}

.moral-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.moral-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

@media (max-width: 600px) {
    .container {
        padding: var(--space-12);
    }

    .results-tier1 {
        padding: var(--space-20);
    }

    .archetype-name {
        font-size: var(--font-size-xl);
    }

    .tabs {
        flex-wrap: wrap;
    }
}

/* Assessment Code Display */
/* Civic action CTA shown immediately after tier-1 results */
.civic-cta-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 0.5rem;
}

.civic-cta-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--color-teal-500, #21808d);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: background 0.15s;
}
.civic-cta-btn:hover { background: var(--color-teal-600, #1a666f); }

.civic-cta-secondary {
    display: block;
    width: 100%;
    background: none;
    border: 1px solid rgba(33,128,141,0.35);
    border-radius: 10px;
    color: var(--color-teal-600, #1a666f);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.65rem 1rem;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background 0.12s;
}
.civic-cta-secondary:hover { background: rgba(33,128,141,0.06); }

.civic-cta-retake {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    text-decoration: underline;
}
.civic-cta-retake:hover { color: #6b7280; }

/* Keep the code-display and assessment-code-display hidden (removed from flow) */
#codeDisplay, .assessment-code-display { display: none !important; }

/* ── Intro resume / in-progress state ──────────────────────── */
.intro-progress {
    text-align: left;
    margin: 1rem auto;
    max-width: 340px;
}
.intro-progress-bar {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.intro-progress-fill {
    height: 100%;
    background: var(--color-teal-500);
    border-radius: 3px;
    min-width: 4px;
    transition: width 0.4s ease;
}
.intro-progress-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}
.intro-fresh-link {
    margin-top: 0.9rem;
    font-size: 0.82rem;
}
.intro-fresh-link a {
    color: #9ca3af;
    text-decoration: underline;
}
.intro-fresh-link a:hover { color: #6b7280; }

.intro-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    margin-top: 0.75rem;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.intro-resume {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-gray-200);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.intro-code-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    text-align: center;
    letter-spacing: 2px;
}
.intro-code-input:focus {
    outline: none;
    border-color: var(--color-teal-500);
}

/* Code input styling */
#resumeCodeInput {
    font-weight: 600;
    letter-spacing: 1px;
}

#resumeCodeInput::placeholder {
    font-weight: 400;
    letter-spacing: normal;
}

/* Question Navigator */
.question-navigator {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.question-navigator h3 {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.question-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 8px;
}

.question-nav-item {
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
}

.question-nav-item:hover {
    border-color: #2196F3;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

.question-nav-item.answered {
    background: #4CAF50;
    border-color: #4CAF50;
    color: white;
}

.question-nav-item.current {
    border-color: #2196F3;
    border-width: 3px;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.question-nav-item.answered.current {
    background: #2196F3;
    border-color: #2196F3;
}

/* Improved Answer Options */
.options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0;
}

.options .radio {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    line-height: 1.5;
}

.options .radio:hover {
    border-color: #2196F3;
    background: #f5f9ff;
    transform: translateX(4px);
}

.options input[type="radio"] {
    margin-right: 16px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.options input[type="radio"]:checked + span,
.options label:has(input[type="radio"]:checked) {
    border-color: #2196F3;
    background: #e3f2fd;
    font-weight: 500;
}

/* Improved Buttons */
.button-group {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #f0f0f0;
}

.button-group input[type="submit"],
.button-group button {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

.btn-primary,
input[value="Next"],
input[value="Review & Submit"] {
    background: var(--color-teal-500);
    color: white;
    flex: 2;
}

.btn-primary:hover,
input[value="Next"]:hover,
input[value="Review & Submit"]:hover {
    background: var(--color-teal-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 128, 141, 0.35);
}

.btn-secondary,
input[value="Previous"] {
    background: white;
    color: #666;
    border: 2px solid #e0e0e0;
    flex: 1;
}

.btn-secondary:hover,
input[value="Previous"]:hover {
    border-color: var(--color-teal-500);
    color: var(--color-teal-500);
    transform: translateY(-1px);
}

/* Question Text Styling */
.question-text {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* Progress Bar Improvements */
.progress-container {
    background: white;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.progress-bar {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--color-teal-500);
    transition: width 0.4s ease;
}

.progress-text {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}
.form-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff4f4;
  border-left: 4px solid #d33;
  color: #700;
  font-size: 14px;
}

.error_message {
  margin-top: 24px;
  padding: 10px 12px;
  background: #fff4f4;
  border-left: 4px solid #d33;
  color: #700;
  font-size: 14px;
}

.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.dimension-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.dimension-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dimension-score {
  font-size: 28px;
  font-weight: 700;
  color: #5a67d8;
}

.dimension-bar {
  height: 8px;
  background: #eee;
  border-radius: 8px;
  overflow: hidden;
  margin: 12px 0;
}

.dimension-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.dimension-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #777;
}

.dimension-interpretation {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.results-summary {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  background: #0f172a;
  color: #e5e7eb;
  padding: 24px;
  border-radius: 12px;
}

/* Loading States */
.button-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.button-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: button-spinner 0.6s linear infinite;
}

.btn-secondary.button-loading::after {
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #666;
}

@keyframes button-spinner {
    to { transform: rotate(360deg); }
}

/* Disable pointer events on form while loading */
.form-loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Optional: Smooth transition for question changes */
.question-section {
    transition: opacity 0.2s ease;
}

.question-section.transitioning {
    opacity: 0.5;
}

/* ============================================================
   Question meta (dimension badge + question number)
   ============================================================ */

.question-meta {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.question-num {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.question-dim {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-teal-600);
    background: rgba(33, 128, 141, 0.10);
    padding: 2px 10px;
    border-radius: var(--radius-lg);
}

/* ============================================================
   Question navigator — collapsible
   ============================================================ */

.question-navigator {
    margin-bottom: var(--space-16);
}

.nav-toggle {
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    padding: var(--space-8) var(--space-16);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s;
}

.nav-toggle:hover {
    background: var(--color-gray-200);
}

.nav-toggle-icon::before {
    content: '+';
    font-size: 14px;
    font-weight: 700;
}

#questionNavigator:not(.nav-collapsed) ~ * .nav-toggle-icon::before,
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
    content: '-';
}

#questionNavigator.nav-collapsed {
    display: none;
}

#questionNavigator:not(.nav-collapsed) {
    display: block;
    padding-top: var(--space-8);
}

/* ============================================================
   Political Spectrum Bar (inside .results-tier1 teal card)
   ============================================================ */

.spectrum-section {
    margin: var(--space-20) 0 var(--space-8);
}

.spectrum-track {
    position: relative;
    height: 36px;
    margin-bottom: var(--space-8);
}

.spectrum-gradient-bar {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 10px;
    transform: translateY(-50%);
    border-radius: var(--radius-lg);
    background: linear-gradient(to right,
        rgba(99, 149, 237, 0.95)  0%,
        rgba(120, 200, 220, 0.85) 25%,
        rgba(255, 255, 255, 0.60) 50%,
        rgba(255, 175, 95,  0.85) 75%,
        rgba(205, 80,  80,  0.95) 100%
    );
}

.spectrum-pin {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.spectrum-pin-dot {
    width: 18px;
    height: 18px;
    background: white;
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    margin-bottom: var(--space-4);
}

.spectrum-pin-label {
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: rgba(0, 0, 0, 0.28);
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.spectrum-ends {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    opacity: 0.75;
    color: white;
}

/* ============================================================
   Dimension Profile Card (white card below the teal card)
   ============================================================ */

#dimProfileCard {
    margin-bottom: var(--space-32);
}

.dim-profile-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
    box-shadow: var(--shadow-sm);
}

.dim-profile-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-8);
}

.dim-profile-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-20);
}

.dim-row {
    display: grid;
    grid-template-columns: 130px 1fr 38px;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}

.dim-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.dim-track {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.dim-end {
    font-size: 10px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    min-width: 62px;
}

.dim-end-right {
    text-align: right;
}

.dim-bar {
    flex: 1;
    position: relative;
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: visible;
}

.dim-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-teal-500);
    border-radius: var(--radius-lg);
    transition: width 0.6s ease;
}

.dim-knob {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--color-teal-600);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.dim-pct {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: right;
}

@media (max-width: 600px) {
    .dim-row {
        grid-template-columns: 110px 1fr 34px;
        gap: var(--space-8);
    }
    .dim-end {
        min-width: 46px;
        font-size: 9px;
    }
}

/* Each HFH button is wrapped in a <div> — make those divs flex participants */
.button-group > div {
    display: flex;
    flex: 1;
}
.button-group > div input[type="submit"] {
    flex: 1;
    width: 100%;
}

@media (max-width: 640px) {
    /* Stack buttons vertically: Next on top (col-reverse), Previous below as ghost */
    .button-group {
        flex-direction: column-reverse;
        gap: 6px;
        align-items: stretch;
    }
    .button-group > div { flex: none; }
    .button-group > div input[type="submit"] {
        padding: 15px;
        font-size: 16px;
    }
    .button-group > div:first-child input[value="Previous"] {
        background: none;
        border: 1px solid #e5e7eb;
        color: #9ca3af;
        font-size: 0.82rem;
        padding: 9px 18px;
        width: auto;
    }
}
/* ── Scroll-layout profile sections ─────────────────────────────────────── */

.results-tier2 {
    display: block !important;
}

.profile-narrative-section {
    margin: 2rem 0;
    padding: 1.75rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
}

.profile-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.profile-section-intro {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* Narrative blocks (reasoning profile) */
.narrative-blocks {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.narrative-block {
    padding: 1rem 1.1rem;
    background: #f8fafc;
    border-left: 3px solid #14b8a6;
    border-radius: 0 8px 8px 0;
}

.narrative-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #0d9488;
    margin-bottom: 0.4rem;
}

.narrative-text {
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.65;
    margin: 0;
}

/* Dimension detail cards */
.dim-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dim-detail-card {
    padding: 1.1rem 1.2rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.dim-detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    gap: 0.75rem;
}

.dim-detail-name {
    font-weight: 700;
    font-size: 1rem;
    color: #0f172a;
}

.dim-detail-archetype {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0d9488;
    background: #ccfbf1;
    padding: 0.15rem 0.55rem;
    border-radius: 99px;
    white-space: nowrap;
}

.dim-detail-bar-wrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.dim-detail-end {
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
}

.dim-detail-track {
    position: relative;
    height: 8px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: visible;
}

.dim-detail-fill {
    height: 100%;
    background: linear-gradient(90deg, #5eead4, #0d9488);
    border-radius: 99px;
}

.dim-detail-knob {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: #0d9488;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.dim-detail-score-label {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 0.6rem;
}

.dim-detail-text {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.6;
    margin: 0 0 0.5rem;
}

.dim-detail-sub {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.55;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border-radius: 6px;
    margin-top: 0.4rem;
    border: 1px solid #e2e8f0;
}

.dim-detail-growth {
    border-left: 3px solid #f59e0b;
}

/* Moral foundation */
.mf-detail-card {
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.mf-foundations {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.mf-foundation-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.mf-foundation-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

.mf-primary-item .mf-foundation-value {
    color: #0d9488;
}

.mf-rationale {
    font-size: 0.92rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 0.9rem;
}

.mf-signals-head {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mf-signals {
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mf-signals li {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
}

/* Blind spots */
.blindspots-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.blindspot-detail-card {
    padding: 1rem 1.1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 0 8px 8px 0;
}

.blindspot-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #92400e;
    margin-bottom: 0.4rem;
}

.blindspot-detail-card p {
    font-size: 0.88rem;
    color: #78350f;
    line-height: 1.55;
    margin: 0;
}

/* ── Shareable results URL ──────────────────────────── */
.result-share-block {
    margin: 2rem auto 1rem;
    max-width: 520px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.result-share-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0369a1;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}
.result-share-url-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.result-share-url {
    flex: 1;
    padding: 0.45rem 0.75rem;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 0.82rem;
    background: #fff;
    color: #0c4a6e;
    min-width: 0;
}
.result-share-copy {
    padding: 0.45rem 0.75rem;
    background: #0284c7;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 0.15s;
}
.result-share-copy:hover { background: #0369a1; }
.result-share-hint {
    font-size: 0.77rem;
    color: #0369a1;
    margin-top: 0.4rem;
    margin-bottom: 0;
}

/* ── Profile gate hero — always visible ─────────────── */
.profile-gate-hero--always {
    margin-bottom: 0.5rem;
}