/**
 * HOUSE HERMETICA - BASELINE PROFILE STYLES v4.3
 * Clean architecture - 02 February 2026
 */

/* Baseline Test (assessment): nigredo accent */
:root {
    --hh-accent: var(--hh-nigredo);
    --hh-accent-light: var(--hh-nigredo-light);
    --hh-accent-dark: var(--hh-nigredo-dark);
}

/* Results page (househermetica.org/baseline.html): rubedo to match site.
   accent-bg must be re-declared here because the :root nigredo override
   above prevents the core color-mix from resolving to rubedo via inheritance. */
.hh-page--baseline-results {
    --hh-accent: var(--hh-rubedo);
    --hh-accent-light: var(--hh-rubedo-light);
    --hh-accent-dark: var(--hh-rubedo-dark);
    --hh-accent-bg: color-mix(in srgb, var(--hh-rubedo) 20%, var(--hh-bg-dark));
}

/* Hexagram watermark — baseline results page (other platforms define their own) */
.hh-page--baseline-results .hh-section--accent-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -80 420 370'%3E%3Cpolygon points='180,-75 374.9,262.5 -14.9,262.5' fill='none' stroke='%23c9a961' stroke-width='1.8' opacity='0.04'/%3E%3Cpolygon points='180,285 63.1,82.5 296.9,82.5' fill='none' stroke='%23c9a961' stroke-width='1.3' opacity='0.03'/%3E%3Cpolygon points='180,69 250.1,190.5 109.9,190.5' fill='none' stroke='%23c9a961' stroke-width='0.9' opacity='0.02'/%3E%3Cpolygon points='180,199 137.6,125.5 222.4,125.5' fill='none' stroke='%23c9a961' stroke-width='0.6' opacity='0.015'/%3E%3Cline x1='180' y1='-75' x2='180' y2='150' stroke='%23c9a961' stroke-width='0.5' opacity='0.015'/%3E%3Cline x1='374.9' y1='262.5' x2='180' y2='150' stroke='%23c9a961' stroke-width='0.5' opacity='0.015'/%3E%3Cline x1='-14.9' y1='262.5' x2='180' y2='150' stroke='%23c9a961' stroke-width='0.5' opacity='0.015'/%3E%3Ccircle cx='180' cy='150' r='3' fill='%23c9a961' opacity='0.03'/%3E%3C/svg%3E");
    background-position: calc(100% + 4rem) 20%;
    background-size: auto 500%;
}

/* Main padding removed: hh-hero-section handles header clearance via padding-top: 9rem/7rem */

/* Fixed min-height on hero subtitles to prevent layout shift on stream toggle.
   Reduce bottom padding to compensate for the reserved space. */
.hh-section--accent-bg .hh-intro-text {
    min-height: 3.2em;
    margin-bottom: 1rem;
}
.hh-section--accent-bg {
    padding-bottom: clamp(2.5rem, 6vh, 5rem);
}

.baseline-section-anchor {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hh-border-dark);
}

.baseline-section-anchor:first-child {
    margin-top: 0;
    border-top: none;
}

.baseline-section-anchor .hh-label {
    margin-bottom: 0.5rem;
}

/* Reduce padding on dark sections */
.baseline-profile .hh-section--dark {
    padding: 2rem;
}

/* Landing hero uses core defaults (70vh, 7rem top) */

.baseline-section-anchor .hh-section-title {
    margin-bottom: 1rem;
}

.baseline-section-anchor .hh-intro-text {
    margin: 0 auto 1.5rem;
}


/* ============================================================================
   1: SCORE DISPLAY
   ============================================================================ */

.baseline-score {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.baseline-score__sidebar {
    position: relative;
    z-index: 1;
}

.baseline-score__circle {
	position: relative;
	  width: 300px;
	  height: 300px;
	  overflow: visible; /* Allow glow to extend */
	  padding: 10px; /* Space for glow */
	  margin: -10px; /* Compensate for padding */
}

.baseline-score__ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.baseline-score__ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 12;
}

.baseline-score__ring-fill {
    fill: none;
    stroke-width: 12;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    transition: stroke-dashoffset 1.5s ease-in-out;
    stroke-linecap: round;
}

.baseline-score__ring-fill--lead {
    stroke: var(--hh-metal-lead-flat);
}

.baseline-score__ring-fill--tin {
    stroke: var(--hh-metal-tin-flat);
}

.baseline-score__ring-fill--iron {
    stroke: var(--hh-metal-iron-flat);
}

.baseline-score__ring-fill--copper {
    stroke: var(--hh-metal-copper-flat);
}

.baseline-score__ring-fill--mercury {
    stroke: var(--hh-metal-mercury-flat);
}

.baseline-score__ring-fill--silver {
    stroke: var(--hh-metal-silver-flat);
}

.baseline-score__ring-fill--gold {
    stroke: var(--hh-metal-gold-flat);
}

.baseline-score__value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.baseline-score__number {
   display: block;
  font-family: var(--hh-font-serif);
  font-size: 5rem; /* Increased from 4rem */
  font-weight: 700;
  color: var(--hh-text-muted-dark);
  line-height: 1;
  }

/* ALTERNATIVE: Tier-aware pulse animations */
@keyframes pulse-lead {
  0%, 100% { filter: drop-shadow(0 0 8px var(--hh-metal-lead-flat)); }
  50% { filter: drop-shadow(0 0 12px var(--hh-metal-lead-flat)); }
}

@keyframes pulse-mercury {
  0%, 100% { filter: drop-shadow(0 0 16px var(--hh-metal-mercury-flat)); }
  50% { filter: drop-shadow(0 0 24px var(--hh-metal-mercury-flat)); }
}

@keyframes pulse-gold {
  0%, 100% { filter: drop-shadow(0 0 20px var(--hh-metal-gold-flat)); }
  50% { filter: drop-shadow(0 0 30px var(--hh-metal-gold-flat)); }
}


.baseline-score__number--mercury {
    animation: pulse-mercury 3s ease-in-out infinite;

}

.baseline-score__number--gold {
    animation: pulse-gold 3s ease-in-out infinite;
}

.baseline-score__number--lead {
    color: var(--hh-metal-lead-flat);
    filter: drop-shadow(0 0 8px var(--hh-metal-lead-flat));
    animation: pulse-lead 3s ease-in-out infinite;
}

.baseline-score__number--tin {
    color: var(--hh-metal-tin-flat);
    filter: drop-shadow(0 0 10px var(--hh-metal-tin-flat));
}

.baseline-score__number--iron {
    color: var(--hh-metal-iron-flat);
    filter: drop-shadow(0 0 10px var(--hh-metal-iron-flat));
}

.baseline-score__number--copper {
    color: var(--hh-metal-copper-flat);
    filter: drop-shadow(0 0 12px var(--hh-metal-copper-flat));
}

.baseline-score__number--mercury {
    background: var(--hh-gradient-mercury);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 16px var(--hh-metal-mercury-flat));
    animation: pulse-mercury 3s ease-in-out infinite;
}

.baseline-score__number--silver {
    background: var(--hh-gradient-silver);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 18px var(--hh-metal-silver-flat));
    animation: pulse-silver 3s ease-in-out infinite;
}

.baseline-score__number--gold {
    background: var(--hh-gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px var(--hh-metal-gold-flat));
    animation: pulse-gold 3s ease-in-out infinite;
}


.baseline-score__label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--hh-text-muted-dark);
  margin-top: 0.75rem; /* Increased spacing */
}


.baseline-score__details {
    display: flex;
    flex-direction: column;
}

/* Tighten gap between description and following h3 on median tabs */
.baseline-score__details h3 {
    margin-top: 0.25rem;
}

.baseline-score__type {
    font-family: var(--hh-font-serif);
    font-size: 2rem;
    font-weight: 500;
    color: var(--hh-text-light);

}

.baseline-score__intro {
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--hh-text-heading);
    margin-bottom: 1rem;
}

.baseline-score__description {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--hh-text-body);
    margin-bottom: 1.5rem;
}

/* --- Locus Panel --- */
.baseline-locus-panel {
    margin: 1.5rem 0;
    overflow: hidden;
    color: #fff;
}
.baseline-locus-panel--fire  { background: var(--hh-fire); }
.baseline-locus-panel--water { background: var(--hh-water); }
.baseline-locus-panel--air   { background: var(--hh-air); }
.baseline-locus-panel--earth { background: var(--hh-earth); }
.baseline-locus-panel--balance { background: linear-gradient(135deg, var(--hh-nigredo) 0%, #2a2218 100%); }

.baseline-locus-panel__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem 0;
}
.baseline-locus-panel__symbol {
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.85;
}
.baseline-locus-panel__name {
    font-family: var(--hh-font-serif);
    font-size: 1.25rem;
    font-weight: 500;
}
.baseline-locus-panel__copy {
    font-size: var(--hh-fs-body);
    line-height: 1.5;
    margin: 0;
    padding: 0.6rem 1rem 0;
}
.baseline-locus-panel__shadow {
    font-size: var(--hh-fs-body);
    line-height: 1.5;
    margin: 0;
    padding: 0.8rem 1rem 0;
    opacity: 0.8;
}
.baseline-locus-panel__nav {
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.baseline-locus-panel__nav .hh-btn--ghost {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.baseline-locus-panel__nav .hh-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}
.baseline-locus-panel--balance .baseline-locus-panel__name {
    color: var(--hh-citrinitas);
}

@media (max-width: 480px) {
    .baseline-locus-panel__header { padding: 0.75rem 0.75rem 0; }
    .baseline-locus-panel__copy { padding: 0.5rem 0.75rem 0; }
    .baseline-locus-panel__shadow { padding: 0.6rem 0.75rem 0; }
    .baseline-locus-panel__nav { padding: 0.75rem; flex-wrap: nowrap; }
    .baseline-locus-panel__nav .hh-btn--ghost { padding: 0.75rem 1rem; flex: 1; justify-content: center; }
    .baseline-locus-panel__symbol { font-size: 1.3rem; }
    .baseline-locus-panel__name { font-size: 1.1rem; }
}

.baseline-score__shadow-text {
    font-size: var(--hh-fs-body);
    line-height: 1.6;
    color: var(--hh-text-body);
    margin: 1.5rem 0 0.5rem;
}

/* ===== Profile Data Sidebar (below MQ circle) ===== */

.baseline-profile-data {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    width: 280px;
}

.baseline-profile-data__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom:1px solid var(--hh-border-dark);
}

.baseline-profile-data__label {
    color: var(--hh-text-muted-dark);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.baseline-profile-data__value {
    color: var(--hh-text-muted-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    
}

.baseline-profile-data__tier {
    color: var(--hh-citrinitas);
}

.baseline-profile-data__value--id {
    font-family: var(--hh-font-serif);
    letter-spacing: 0.12em;
}

/* MQ Tier row in profile data: phone-only (full metallic badge shows on tablet/desktop) */
.baseline-profile-data__row--mq-tier {
    display: none;
}

/* All rows keep border-bottom for consistent spacing */

/* Sidebar section labels: text, padding, border below, padding, then content */
.baseline-profile-data__row--section-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--hh-border-dark);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 280px;
}

/* Achievements sidebar */
.baseline-achievements-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    width: 280px;
}

/* baseline-profile-data__separator removed (Session 65) — section labels handle dividers */

/* Baseline ID Section */
#baseline-id-sidebar {
    width: 280px;
    margin-top: 0;
    padding-top: 0;
}

.baseline-id-code {
    display: block;
    font-family: var(--hh-font-mono);
    font-size: 1rem;
    letter-spacing: 0.15em;
    color: var(--hh-citrinitas);
    background: rgba(201, 169, 97, 0.1);
    padding: 0.75rem;
    border: 1px solid rgba(201, 169, 97, 0.3);
    margin: 0.5rem 0;
    text-align: center;
}

.baseline-id-code--placeholder {
    opacity: 0.4;
}

.baseline-id-code--placeholder::after {
    content: ' (pending)';
    font-size: 0.7rem;
    color: var(--hh-text-muted);
}


.baseline-id-help {
    font-size: 0.75rem;
    color: var(--hh-text-muted-light);
    margin: 0.5rem 0 0;
    text-align: center;
}

/* ============================================================================
   AT A GLANCE BOX
   ============================================================================ */

.baseline-glance-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1rem;
    margin: 1rem 0 0;
}


.baseline-glance-box__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; /* Add gap for spacing */
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}

.baseline-glance-box__title {
    font-family: var(--hh-font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--hh-text-light);
    margin: 0;
    flex: 1; /* Take remaining space */
    min-width: 0; /* Allow shrinking */
}

.baseline-glance-box__badge {
    max-width: 250px; /* CHANGED from fixed width */
    width: auto; /* Flexible */
    flex-shrink: 0; /* Don't shrink below content */
    position: relative;
    z-index: 1;
}

.baseline-glance-box__badge .baseline-achievement-badge {
    width: 100%; /* Fill available space */
    max-width: 250px;
}

/* Rows */
.baseline-glance-row {
    margin-bottom: 1rem;
}

/* Fixed height for pathway labels */
.baseline-glance-row--pathways .hh-label {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.baseline-glance-row:last-child {
    margin-bottom: 0;
}

/* Row 1: Comparison Bar */
.baseline-glance-row--comparison {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    align-items: center;
    padding: 0.75rem 0;
}

.baseline-glance-comparison__text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--hh-text-body);
    margin:0;
}

.baseline-glance-comparison__text strong {
    color: var(--hh-citrinitas);
    font-weight: 600;
}

.baseline-glance-comparison__container {
    position: relative;
    z-index: 0;
}

.baseline-glance-comparison__bar {
    position: relative;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px; 
    overflow: visible
    margin-top: 1.75rem;
    }


.baseline-glance-comparison__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--hh-font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.08);
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
}

.baseline-glance-comparison__marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
}

.baseline-glance-comparison__marker--you {
    background: var(--hh-citrinitas);
    z-index: 2;
}

.baseline-glance-comparison__marker--median {
    background: var(--hh-text-muted-light);
    z-index: 1;
}

.baseline-glance-comparison__label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* "You" label above the bar, "Median" below */
.baseline-glance-comparison__marker--you .baseline-glance-comparison__label {
    bottom: calc(100% + 0.4rem);
    color: var(--hh-citrinitas);
}

.baseline-glance-comparison__marker--median .baseline-glance-comparison__label {
    top: calc(100% + 0.4rem);
    color: var(--hh-text-muted-light);
}

/* Responsive: glance section */
@media (max-width: 480px) {
    .baseline-glance-row--comparison {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .baseline-glance-box__header {
        flex-direction: row;
        gap: 0.75rem;
        align-items: center;
    }

    .baseline-glance-box__badge {
        max-width: 120px;
    }
}


/* Glance label variants: full on desktop, short on phone */
.glance-label-short { display: none; }
.glance-label-full { display: inline; }

/* Baseline ID row (inline on all sizes) */
.baseline-id-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--hh-border-dark);
    margin-top: 0.75rem;
}
.baseline-id-row__label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--hh-text-muted-light);
    white-space: nowrap;
}
.baseline-id-row .baseline-id-code {
    font-size: 0.8rem;
    padding: 0;
    background: none;
    border: none;
    letter-spacing: 0.15em;
}

/* Row 2 & 3: Metric Boxes */
.baseline-glance-row--scores,
.baseline-glance-row--pathways {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem; /* REDUCED from 1rem */
}

.baseline-glance-metric-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem 0.75rem; 
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
}

.baseline-glance-metric-box:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(201, 169, 97, 0.3);
    transform: translateY(-2px);
}

.baseline-glance-metric-box--highlight {
    border-color: rgba(201, 169, 97, 0.3);
    background: rgba(201, 169, 97, 0.05);
}
.baseline-glance-metric-box--highlight .baseline-glance-metric-box__value {
    font-weight: 800;
    font-size: 2.25rem;
}

.baseline-glance-metric-box .hh-label {
    margin-bottom: 0.5rem;
}
.baseline-glance-metric-box .hh-label.hh-color-fire { color: var(--hh-fire); }
.baseline-glance-metric-box .hh-label.hh-color-water { color: var(--hh-water); }
.baseline-glance-metric-box .hh-label.hh-color-air { color: var(--hh-air); }
.baseline-glance-metric-box--pathway .hh-label {
    min-height: 2.5rem; /* Accommodate 2-line wrapping */
    display: flex;
    align-items: center;
    justify-content: center;
}


.baseline-glance-metric-box__value {
    font-family: var(--hh-font-serif);
    font-size: 2rem; /* REDUCED from 2.5rem */
    font-weight: 600;
    line-height: 1;
    

}

.baseline-glance-metric-box__value--small {
    font-size: 0.875rem; /* REDUCED from 1rem */
    font-weight: 500;
    line-height: 1.3;
    font-family: var(--hh-font-sans);
}

.baseline-glance-metric-box__value--locked {
    color: var(--hh-text-muted-dark);
    font-style: italic;
}

/* Responsive */
@media (max-width: 968px) {
    .baseline-glance-row--scores,
    .baseline-glance-row--pathways {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 568px) {
    /* Keep 2-col even on small phones */
    .baseline-glance-row--scores,
    .baseline-glance-row--pathways {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .baseline-glance-box__header {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .baseline-glance-box__badge {
        width: 100%;
    }

    .baseline-glance-comparison__label {
        font-size: 0.65rem;
    }

    .baseline-glance-metric-box__value {
        font-size: 1.5rem;
    }

    .baseline-glance-metric-box {
        padding: 0.5rem;
    }
}


/* ============================================================================
   2: CHARTS (LARGE)
   ============================================================================ */

.baseline-charts-section {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 3rem;
    max-width: 1600px;
    margin: 0.5rem auto 3rem;
    padding: 2rem 2rem 0;
    border-top: 1px solid var(--hh-border-dark);
}

/* Chart + legend pair: side by side on desktop, stacked on phone */
.baseline-chart-pair {
    flex: 1 1 650px;
    max-width: 750px;
    display: flex;
    flex-direction: column;
}

.baseline-chart-pair .baseline-legend {
    flex: 1;
}

.baseline-chart-wrapper {
    width: 100%;
    
}

.baseline-chart-wrapper:first-child {

}

.baseline-chart-wrapper h3 {
    font-family: var(--hh-font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 1rem 0 0;
    text-align: center;
    color: var(--hh-text-muted-light);
}

.baseline-chart-inner {
    width: 100%;
    aspect-ratio: 500 / 440;
}


.baseline-chart-wrapper svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    animation: fadeInChart 0.8s ease-in-out 0.2s forwards;
}

@keyframes fadeInChart {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.baseline-categories-detailed-grid {
    opacity: 0;
    animation: fadeInChart 0.8s ease-in-out 0.4s forwards;
}

/* Chart Entrance Animation - applied via JS */
.baseline-chart-wrapper {
  transition: opacity 0.6s ease, transform 0.6s ease;
}


/* Additional tightening for baseline-specific sections */
#personal-results-container,
#human-results-container,
#ai-results-container {
	margin-top:0;
    padding-top: 0;
}

/* Reduce bottom padding on results sections to tighten gap before methodology */
.hh-section--dark:has(#personal-results-container),
.hh-section--dark:has(#human-results-container),
.hh-section--dark:has(#ai-results-container) {
    padding-bottom: 2rem;
}

/* ============================================================================
   LAYER 2b: SIMPLE LEGENDS
   ============================================================================ */

.baseline-legends-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
    max-width: 1600px;
    margin: 1.5rem auto 3rem;
    padding: 0 2rem;
}

.baseline-legend {
    flex: 1 1 650px;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
    padding: 1.5rem;
    border: 1px solid var(--hh-border-dark);
    background: var(--hh-surface-dark);
    }

.baseline-legend__item {
    display: flex;
    align-items: flex-start; /* Top align for multi-line */
    gap: 0.75rem;
    margin-bottom: 1rem;
    }

.baseline-legend__color {
        width: 18px;
        height: 18px;
        border-radius: 50%; /* Circle not rounded square */
        flex-shrink: 0;
        margin-top: 0.25rem; /* Align with text baseline */
}

.baseline-legend__label {
    color: var(--hh-text-body);
	line-height: 1.6;
    flex: 1;
    font-size: 0.875rem;
    }

.baseline-legend__label strong {
    color: var(--hh-text-light);
}

.baseline-legend__item:last-child {
    margin-bottom: 0;
}

/* ── Score display beneath each chart ───────────────────── */

.baseline-chart-score {
    text-align: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--hh-border-dark);
    margin-top: 0.5rem;
}

/* ── Inline legend (3-item row, no bordered box) ─────────── */
.baseline-legends-section--inline {
    align-items: center;
    margin-top: 1.25rem;
    margin-bottom: 0;
}
.baseline-legends-section--inline .baseline-legend__item {
    align-items: center;
    margin-bottom: 0;
}
.baseline-legends-section--inline .baseline-legend__color {
    margin-top: 0;
}
/* ============================================================================
   LAYER 3: TRINITI DIMENSION HEADERS
   ============================================================================ */

.baseline-dimension-headers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 0;
    border: 1px solid var(--hh-border-dark);
}

.baseline-dimension-header {
    padding: 2rem 1.5rem;
    text-align: center;
    border-right: 1px solid var(--hh-border-dark);
    background: rgba(255, 255, 255, 0.02);
}

.baseline-dimension-header:last-child {
    border-right: none;
}

.baseline-dimension-header--fire {
    border-top: 3px solid #b35632;
}

.baseline-dimension-header--water {
    border-top: 3px solid #315a7a;
}

.baseline-dimension-header--air {
    border-top: 3px solid #4c5b3e;
}

.baseline-dimension-headers--earth {
    grid-template-columns: 1fr;
    border-top: 3px solid var(--hh-earth);
}

.baseline-dimension-headers--earth .baseline-dimension-header {
       display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    }

.baseline-dimension-headers--earth .baseline-dimension-header__symbol {
    margin-bottom: 1rem;
}

.baseline-dimension-headers--earth .baseline-dimension-header__label {
    margin-bottom: 1rem;
}

/* Hide score in earth header */
.baseline-dimension-headers--earth .baseline-dimension-header__score {
    display: none;
}

.baseline-dimension-header__text {
    font-size: 0.875rem;
    color: var(--hh-text-body);
    font-style: normal;
    text-align: left;
    max-width: 800px;
}

.baseline-dimension-header__symbol {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.baseline-dimension-header__label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    color: var(--hh-text-muted-light);
}

.baseline-dimension-header__score {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--hh-font-serif);
    color: var(--hh-citrinitas);
    line-height: 1;
}

/* Dimension Header Icon Animation */
.baseline-dimension-header__symbol {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.baseline-dimension-header:hover .baseline-dimension-header__symbol {
  transform: scale(1.15) rotate(5deg);
}

.baseline-dimension-header__label > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.baseline-dimension-header__label > div > div:first-child {
    font-family: var(--hh-font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hh-text-light);
}

.baseline-dimension-header__label > div > div:last-child {
    font-family: var(--hh-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hh-text-muted-light);
    opacity: 0.7;
}

/* Earth CTA styling */
.baseline-earth-cta {
    text-align: center;
    padding: 2rem;
    margin: 3rem 0;
    background: var(--hh-surface-dark);
    border: 1px solid var(--hh-border-dark);
    border-top: 2px solid var(--hh-citrinitas);
}

.baseline-earth-cta__logo {
    max-width: 120px;
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
    opacity: 0.9;
}

.baseline-earth-cta__text {
    margin: 1rem 0 1.5rem;
    color: var(--hh-text-body);
}

.baseline-earth-cta--gold {
    border-top-color: var(--hh-citrinitas);
}

/* ============================================================================
   WHAT'S NEXT — Platform CTA Grid (2x2)
   ============================================================================ */

.baseline-whats-next-section {
    margin: 2rem 0 1rem;
}

.baseline-whats-next-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.baseline-whats-next-card {
    background: var(--hh-surface-dark);
    border: 1px solid var(--hh-border-dark);
    padding: 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.baseline-whats-next-card:hover {
    border-color: rgba(201, 169, 97, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.baseline-whats-next-card__logo {
    max-width: 100px;
    height: auto;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.baseline-whats-next-card__name {
    font-family: var(--hh-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--hh-text-muted-light);
    margin: 0;
}

.baseline-whats-next-card__subtitle {
    font-family: var(--hh-font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hh-text-light);
    margin: 0;
}

.baseline-whats-next-card__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--hh-text-body);
    margin: 0.5rem 0 1rem;
    max-width: 400px;
}

.baseline-whats-next-card__btn {
    margin-top: auto;
}

/* Platform accent button colours */
.baseline-whats-next-card__btn--praxis {
    background-color: var(--hh-rubedo);
    border-color: var(--hh-rubedo);
}
.baseline-whats-next-card__btn--praxis:hover {
    background-color: var(--hh-rubedo-light);
    border-color: var(--hh-rubedo-light);
}

.baseline-whats-next-card__btn--triniti {
    background-color: var(--hh-albedo-dark);
    border-color: var(--hh-albedo-dark);
    color: var(--hh-text-dark);
}
.baseline-whats-next-card__btn--triniti:hover {
    background-color: var(--hh-albedo);
    border-color: var(--hh-albedo);
    color: var(--hh-text-dark);
}

/* Platform accent top borders (alchemical stage, NOT element colours) */
.baseline-whats-next-card[data-platform="praxis"] {
    border-top: 3px solid var(--hh-rubedo);
}
.baseline-whats-next-card[data-platform="portica"] {
    border-top: 3px solid var(--hh-nigredo-light);
}
.baseline-whats-next-card[data-platform="palatium"] {
    border-top: 3px solid var(--hh-citrinitas);
}
.baseline-whats-next-card[data-platform="triniti"] {
    border-top: 3px solid var(--hh-albedo);
}

@media (max-width: 480px) {
    .baseline-whats-next-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .baseline-whats-next-card {
        padding: 1.5rem 1rem;
    }

    .baseline-whats-next-card__subtitle {
        font-size: 1rem;
    }

    .baseline-whats-next-card__desc {
        font-size: 0.8125rem;
    }
}

/* ============================================================================
   LAYER 3b: DETAILED CATEGORIES (3x4 with descriptions)
   ============================================================================ */

.baseline-categories-section {
    margin-bottom: 4rem;
}

.baseline-categories-detailed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--hh-border-dark);
    border-top: none;
}

.baseline-category-detail-card {
    padding: 2rem;
	border-right: 1px solid var(--hh-border-dark);
    border-bottom: 1px solid var(--hh-border-dark);
    background: var(--hh-surface-dark);    
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Category codes are white; element differentiation via score colour */

/* Add element-specific top border tint */
.baseline-category-detail-card[data-element="fire"] {
    border-top: 2px solid var(--hh-fire);
}

.baseline-category-detail-card[data-element="water"] {
    border-top: 2px solid var(--hh-water);
}

.baseline-category-detail-card[data-element="air"] {
    border-top: 2px solid var(--hh-air);
}

.baseline-category-detail-card[data-element="earth"] {
    border-top: 2px solid var(--hh-earth);
}

.baseline-category-detail-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border-color: rgba(212, 175, 55, 0.4);
}

.baseline-category-detail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(212, 175, 55, 0) 0%, 
    rgba(212, 175, 55, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.baseline-category-detail-card:hover::before {
  opacity: 1;
}

.baseline-category-detail-card:nth-child(3n) {
    border-right: none;
}

.baseline-category-detail-card:nth-child(n+10) {
    border-bottom: none;
}

.baseline-category-detail-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.baseline-category-detail-card__code {
    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--hh-font-sans);
    color: var(--hh-text-muted-dark);
    letter-spacing: 0.1em;
}

.baseline-category-detail-card__score {
    font-size: 2.25rem;
    font-weight: 700;
    font-family: var(--hh-font-serif);
    color: var(--hh-citrinitas);
    line-height: 1;
}

.baseline-category-detail-card__title {
    font-family: var(--hh-font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--hh-text-light);
    margin: 0 0 0.75rem;
    line-height: 1.3;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.baseline-category-detail-card__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--hh-text-body);
    margin: 0;
}



.baseline-category-detail-card__title > div {
    display: flex;
    flex-direction: column;
}

.baseline-category-detail-card__title > div > div:first-child {
    font-style: normal;
}

.baseline-category-detail-card__title > div > div:last-child {
    font-size: 0.8rem;
    font-style: normal;
    opacity: 0.7;
    margin-top: 0.25rem;
}


/* ============================================================================
   4a: SECTIONS: ARCHETYPE
   ============================================================================ */

.baseline-archetype-section {
    padding: 0rem 2rem 4rem; 
    margin: 0 0 4rem; 
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align:center;
}

.baseline-archetype-section__title {
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
    color: var(--hh-text-light);
    }

.baseline-archetype-section__intro {
    font-size: 1rem;
    color: var(--hh-text-body);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.baseline-archetype-section__logo {
    max-width: 160px;
    height: auto;
    margin: 0 auto 2rem;
    display: block;
    opacity: 0.9;
}


.baseline-archetype-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.baseline-archetype-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Base: 5 columns */
    gap: 2rem;
    margin: 2rem 0;
}


.baseline-archetype-grid--four {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem; 
    max-width: 100%; 
}

.baseline-archetype-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(201, 169, 97, 0.3);
}

.baseline-archetype-card__symbol {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--hh-citrinitas);
}

.baseline-archetype-card__name {
    font-family: var(--hh-font-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--hh-text-light);
    margin-bottom: 0.5rem;
}

.baseline-archetype-card__code {
    font-family: var(--hh-font-sans);
    font-size: 0.75rem;
    color: var(--hh-text-muted-light);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.baseline-archetype-card__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--hh-text-muted-light);
}

.baseline-archetype-cta {
    text-align: center;
    padding: 3rem 2rem;
    margin-top: 3rem;
    background: rgba(201, 169, 97, 0.08);
    border: 1px solid rgba(201, 169, 97, 0.2);
}

.baseline-archetype-cta__title {
    font-size: 1.75rem;
    color: var(--hh-citrinitas);
    margin-bottom: 1.5rem;
        margin-top: 3rem;
}

.baseline-archetype-cta__text {
    font-size: 1rem;
    color: var(--hh-text-body);
    margin-bottom: 1.5rem;
}

.baseline-archetype-cta__text--secondary {
    margin-top: 2rem;
}

.baseline-archetype-cta__badge {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--hh-text-muted-light);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.baseline-archetype-cta__features {
    margin: 2rem auto;
    text-align: left;
    max-width: 700px;
}

.baseline-archetype-cta__features-title {
    font-size: 1rem;
    color: var(--hh-citrinitas);
    margin-bottom: 1rem;
    font-weight: 600;
}

.baseline-archetype-cta__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.baseline-archetype-cta__list-item {
    margin-bottom: 0.875rem;
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.6;
}

.baseline-archetype-cta__icon {
    position: absolute;
    left: 0;
    color: var(--hh-citrinitas);
}

.baseline-archetype-cta__footer {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.baseline-archetype-cta__footer-text {
    font-size: 0.9375rem;
    color: var(--hh-text-muted-light);
    margin-bottom: 1.5rem;
}


@media (max-width: 968px) {
  
    .baseline-archetype-grid--four {
            grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 640px) {
    .baseline-archetype-grid--four {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 568px) {
    .baseline-archetype-grid--four {
        grid-template-columns: 1fr;
    }
}

/* ===== Derived Metrics / Gaming Flags Section ===== */
.baseline-metrics-section {
    margin: 3rem 0 0;
    padding: 3rem 2rem;
    background: rgba(45, 62, 80, 0.05); 
    border: 1px solid rgba(45, 62, 80, 0.2);}

.baseline-metrics-header {
    text-align: center;
    margin-bottom: 3rem;
}

.baseline-metrics-intro {
    font-size: 1.125rem;
    color: var(--hh-text-body);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.baseline-metrics-growth-intro {
    margin-top: 2rem;
    padding: 2rem;
    background: rgba(201, 169, 97, 0.1);
    border-left: 4px solid var(--hh-citrinitas);
}

.baseline-metrics-growth-intro p:first-child {
    font-weight: 600;
    color: var(--hh-citrinitas);
    margin-bottom: 1rem;
}

/*
.baseline-metrics-section__title {
    font-family: var(--hh-font-serif);
    font-size: 1.75rem;
    color: var(--hh-text-light);
    margin-bottom: 0.75rem;
}

.baseline-metrics-section__subtitle {
    font-size: 1rem;
    color: var(--hh-text-muted-light);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}*/

.baseline-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    }

.baseline-metric-card {
    background: var(--hh-nigredo);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
}

.baseline-metric-card:hover {
    border-color: rgba(201, 169, 97, 0.3);
    transform: translateY(-2px);
}

.baseline-metric-card__icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.7;
    text-align: center;
    color: var(--hh-citrinitas);
}

.baseline-metric-card__header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--hh-text-light);
    margin: 0 0 1rem;
    text-align: center;
}


.baseline-metric-card__body {
    text-align: left;
}

.baseline-metric-card__value--excellent {
    color: var(--hh-water);
}

.baseline-metric-card__value--good {
    color: var(--hh-citrinitas);
}

.baseline-metric-card__value--moderate {
    color: #c9a961;
}

.baseline-metric-card__value--low {
    color: var(--hh-text-muted-light);
}

.baseline-metric-card__value--warning {
    color: var(--hh-fire);
}

.baseline-metrics-cta__text {
    font-size: 1rem;
    color: var(--hh-text-body);
    margin-bottom: 1.5rem;
}

@media (max-width: 968px) {
    .baseline-metrics-grid {
        grid-template-columns: 1fr;
    }
}



/* Metrics CTA */
.baseline-metrics-cta {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(201, 169, 97, 0.08);
    padding: 2rem;
    text-align: center;
}

.baseline-metrics-cta h3 {
    font-family: var(--hh-font-serif);
    font-size: 1.5rem;
    color: var(--hh-citrinitas);
    margin-bottom: 1rem;
}

.baseline-metrics-cta p {
    color: var(--hh-text-muted-light);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.baseline-metrics-cta ul {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.baseline-metrics-cta ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
    color: var(--hh-text-light);
    line-height: 1.6;
}

.baseline-metrics-cta ul li::before {
    content: '☿';
    position: absolute;
    left: 0;
    color: var(--hh-citrinitas);
}

@media (max-width: 480px) {
    .baseline-pathway-bar {
        grid-template-columns: 80px 1fr 40px;
        gap: 0.5rem;
    }
}


/* ============================================================================
   5: ACHIEVEMENT BADGES, NOTIFICATIONS, TOOLTIPS
   ============================================================================ */

.baseline-achievements-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.baseline-achievement-badge {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 48px;
    width: 280px;
    cursor: help;
    transition: all 0.2s ease;
}

.baseline-achievement-badge:hover {
	filter: brightness(1.15);
}

.baseline-achievement-badge__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    border-right: 3px solid rgba(0, 0, 0, 0.3); /* VISIBLE SEPARATOR */

}

.baseline-achievement-badge__text {
    flex: 1;
    height: 48px;
    padding: 0 1rem;
    display: flex;
    align-items: center;

}

.baseline-achievement-badge__name {
    font-family: var(--hh-font-serif);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.2;
}


/* Badge tooltip styles moved to house-hermetica-core.css (Session 71) */


/* Badge base (structural only; colours live in house-hermetica-core.css) */
.hh-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* New badge glow */
.baseline-achievement-badge--new {
    animation: badge-glow 1.5s ease-in-out 1;
}
@keyframes badge-glow {
    0%   { box-shadow: 0 0 0 0 rgba(186, 152, 89, 0); }
    40%  { box-shadow: 0 0 12px 4px rgba(186, 152, 89, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(186, 152, 89, 0); }
}


/* ===== Notification Toast System ===== */
.hh-notification-container {
    position: fixed;
    top: 100px;
    right: 2rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 400px;
}

.hh-notification {
    background: var(--hh-scientific);
    color: #ffffff;
    padding: 1rem 1.5rem;
    border: none;
    font-family: var(--hh-font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.hh-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.hh-notification__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    line-height: 1;
}

.hh-notification__content {
    flex: 1;
}

.hh-notification__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1rem;
}

.hh-notification__message {
    font-weight: 400;
    opacity: 0.95;
}

.hh-notification__close {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    padding: 0;
}

.hh-notification__close:hover {
    opacity: 1;
}

/* Achievement variant */
.hh-notification--achievement {
    background: rgba(30, 30, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--hh-text-light);
}

.hh-notification--achievement .hh-notification__title {
    color: var(--hh-text-light);
}

.hh-notification--achievement .hh-notification__close {
    color: var(--hh-text-muted-light);
}

/* Warning variant */
.hh-notification--warning {
    background: #b35632;
}

/* Tooltips moved to house-hermetica-core.css (Session 48) */
/* ============================================================================
   7: LOADING STATES
   ============================================================================ */

.baseline-loading {
  text-align: center;
  padding: 4rem 2rem;
}

.baseline-loading__symbols {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
}

.baseline-loading__symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  opacity: 0;
  animation: element-cycle 4s ease-in-out infinite;
}

.baseline-loading__symbol--fire {
  color: #b35632;
  animation-delay: 0s;
}

.baseline-loading__symbol--water {
  color: #315a7a;
  animation-delay: 1s;
}

.baseline-loading__symbol--air {
  color: #4c5b3e;
  animation-delay: 2s;
}

.baseline-loading__symbol--earth {
  color: #3d3229;
  animation-delay: 3s;
}


@keyframes element-cycle {
  0%, 100% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.8);
  }
  12.5%, 20% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.2);
  }
  25% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.8);
  }
}

.baseline-loading__text {
  font-size: 1.125rem;
  color: var(--hh-text-muted-light);
  font-style: italic;
}

/* ============================================================================
   8: TAB POSITIONING
   ============================================================================ */


/* Standalone sticky tab section — sits outside tab content divs */
.baseline-tabs-section {
  position: sticky;
  top: var(--hh-header-offset, 0px);
  z-index: 99;
  background: var(--hh-bg-dark);
  padding: 0;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: top 0.3s ease;
}

.baseline-tabs {
  margin: 0;
}

.hh-tabs {
  display: flex;
  gap: 0.5rem;
}

.hh-tab-trigger__label {
  white-space: nowrap;
}

/* Baseline tab overrides — scoped to avoid core specificity conflicts */
.baseline-tabs-section .hh-tab-trigger {
  padding: 1rem 2rem;
  background: transparent;
  border: none;
  color: var(--hh-text-muted-light);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--hh-font-sans);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.baseline-tabs-section .hh-tab-trigger:hover:not(.active) {
  color: var(--hh-citrinitas-light);
  background: rgba(255, 255, 255, 0.03);
}

.baseline-tabs-section .hh-tab-trigger.active {
  color: var(--hh-citrinitas);
  background: rgba(212, 175, 55, 0.05);
}

/* ============================================================================
   9: BASELINE LANDING.HTML STYLES
   ============================================================================ */


/* Chart section: muted accent background */
.landing-section--charts {
    background: var(--hh-accent-bg);
}

.landing-section--lab {
    background: var(--hh-surface-dark);
    border-top: 1px solid var(--hh-border-dark);
}

/* ============================================================================
   10: BASELINE ASSESSMENT STYLES
   ============================================================================ */



/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 968px) {

    /* Score ring: stack on non-tablet screens (tablet block overrides to 2-col) */
    .baseline-score {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .baseline-score__circle {
        margin: 0 auto;
    }

    .baseline-score__info {
        text-align: center;
    }

    /* Charts: tighten gap */
    .baseline-charts-section {
        gap: 2rem;
    }

    .baseline-chart-pair {
        flex: 1 1 500px;
        max-width: 600px;
    }

    .baseline-chart-wrapper,
    .baseline-legend {
        max-width: 600px;
        width: 100%;
    }

    .baseline-earth-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Tablet (768-1024px): dedicated rules ── */
@media (min-width: 481px) and (max-width: 1024px) {

    /* Score: keep 2-col layout (profile left, content right) */
    .baseline-score {
        grid-template-columns: 260px 1fr;
        gap: 2rem;
    }

    .baseline-score__circle {
        width: 260px;
        height: 260px;
    }

    /* Profile data: slightly narrower */
    .baseline-profile-data,
    .baseline-achievements-sidebar,
    .baseline-profile-data__row--section-label,
    #baseline-id-sidebar {
        width: 260px;
    }

    /* Dimension headers: keep 3-col, tighter */
    .baseline-dimension-headers {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Earth header: override back to 1fr (base rule overridden by 3-col above) */
    .baseline-dimension-headers--earth {
        grid-template-columns: 1fr;
    }
    .baseline-dimension-headers--earth .baseline-dimension-header {
        padding: 1rem 0.75rem;
    }

    .baseline-dimension-header {
        padding: 1.25rem 0.75rem;
    }

    .baseline-dimension-header__symbol { font-size: 1.75rem; }
    .baseline-dimension-header__score { font-size: 1.75rem; }
    .baseline-dimension-header__text { font-size: 0.8rem; }

    /* Category cards: 3-col, tighter */
    .baseline-categories-detailed-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .baseline-category-detail-card { padding: 1rem 0.75rem; }
    .baseline-category-detail-card__name { font-size: 0.75rem; }
    .baseline-category-detail-card__desc { font-size: 0.75rem; }

    /* Charts: 2-col side by side, legends balanced height */
    .baseline-charts-section {
        gap: 1.5rem;
        padding: 1.5rem 1.5rem 0;
        align-items: stretch;
    }

    .baseline-chart-pair {
        flex: 1 1 300px;
        max-width: 500px;
        display: flex;
        flex-direction: column;
    }

    .baseline-legend {
        font-size: 0.75rem;
        padding: 1rem;
        gap: 0.5rem;
        flex: 1;
    }

    .baseline-chart-wrapper h3 { font-size: 0.9rem; }
    .baseline-legend__color { width: 12px; height: 12px; }
    .baseline-legend__label { font-size: 0.75rem; }
    .baseline-legend__item { gap: 0.5rem; margin-bottom: 0.5rem; }

    /* What's Next: 2-col */
    .baseline-whats-next-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tabs: slightly smaller */
    .hh-tab-trigger {
        padding: 0.65rem 1rem;
        font-size: 0.8rem;
    }

    /* Glance comparison: keep 2-col */
    .baseline-glance-row--comparison {
        grid-template-columns: 1fr 2fr;
    }

    /* Achievement badges: compact */
    .baseline-achievement-badge { width: 260px; height: 40px; }
    .baseline-achievement-badge__icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .baseline-achievement-badge__text { height: 40px; }
    .baseline-achievement-badge__name { font-size: 0.7rem; }

    /* Landing: Motus quote as compact inline line at tablet */
    .landing-mq-quote {
        flex-direction: row;
        align-items: baseline;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        width: fit-content;
        background: transparent;
        border-left-width: 2px;
    }
    .landing-mq-quote__latin {
        font-size: 0.95rem;
        white-space: nowrap;
    }
    .landing-mq-quote__translation {
        font-size: 0.95rem;
        white-space: nowrap;
    }
}

/* ── Phone (max 480px): compact, dense, readable ── */
@media (max-width: 480px) {

    /* 1. Hero spacing: handled by .hh-hero-section in core CSS (9rem desktop, 7rem mobile) */

    /* 2. Hero intro text: slightly bigger */
    .hh-page--baseline-results .hh-section--accent-bg .hh-intro-text {
        font-size: 0.95rem;
    }

    /* 3. Tabs: keep original titles, allow two-line wrapping */
    .hh-tab-trigger .hh-tab-trigger__label {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        font-size: 0.7rem;
    }
    .hh-tab-trigger {
        padding: 0.5rem 0.35rem;
        flex: 1;
        min-width: 0;
    }

    /* 4. Score: stack, ring fills screen space */
    .baseline-score {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .baseline-score__circle {
        width: min(70vw, 260px);
        height: min(70vw, 260px);
        margin: 0 auto;
    }

    .baseline-score__number {
        font-size: clamp(4.5rem, 16vw, 6.5rem);
    }

    .baseline-score__label {
        font-size: clamp(1.2rem, 4.5vw, 1.6rem);
    }

    .baseline-score__info {
        text-align: center;
    }

    /* 5. Profile data: 2-col grid */
    .baseline-profile-data {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 0.5rem;
        font-size: 0.75rem;
    }

    .baseline-profile-data__row {
        padding: 0.2rem 0;
    }

    .baseline-profile-data__label { font-size: 0.65rem; }
    .baseline-profile-data__value { font-size: 0.65rem; }
    .baseline-profile-data__value--id { font-family: var(--hh-font-serif); letter-spacing: 0.12em; }

    /* Baseline ID: full-width row on phone */
    .baseline-profile-data__row:has(.baseline-profile-data__value--id) {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* MQ Tier section label + metallic badge: hide on phone (compact row in profile data instead) */
    .baseline-score > div > .baseline-profile-data__row--section-label:has(+ #mq-tier-badge),
    #mq-tier-badge {
        display: none;
    }

    /* MQ Tier compact row: show on phone only */
    .baseline-profile-data__row--mq-tier {
        display: grid;
    }

    /* Section labels span full width */
    .baseline-profile-data__row--section-label {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    /* 6. Achievement badges: icon-only strip, left-aligned */
    .baseline-achievements-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
        justify-content: flex-start;
    }

    .baseline-achievement-badge {
        width: 36px;
        height: 36px;
    }

    .baseline-achievement-badge__icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        border-right: none;
    }

    .baseline-achievement-badge__text {
        display: none;
    }

    /* Tooltip: show below badge on phone, wide for readability */
    .baseline-achievement-badge__tooltip {
        left: 0;
        right: auto;
        top: calc(100% + 0.5rem);
        transform: none;
        font-size: 0.75rem;
        min-width: 220px;
        max-width: 85vw;
        white-space: normal;
    }

    #baseline-id-sidebar {
        width: 100%;
    }

    /* 7. Glance: title left, badge right, same line (override 568px column rule) */
    .baseline-glance-box__header {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.75rem;
    }
    .baseline-glance-box__title {
        font-size: 0.95rem;
        font-weight: 400;
        flex: 1;
    }
    .baseline-glance-box__badge {
        max-width: 120px;
        width: auto;
        flex-shrink: 0;
    }

    /* Glance comparison: stack text above bar */
    .baseline-glance-row--comparison {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .baseline-glance-comparison__bar {
        height: 30px;
    }

    /* 8. Glance dimension scores: 4-col single row, BIG labels + scores */
    .baseline-glance-row--scores,
    .baseline-glance-row--pathways {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.35rem;
    }

    .glance-label-full { display: none; }
    .glance-label-short { display: inline; }

    .baseline-glance-metric-box { padding: 0.6rem 0.35rem; }
    .baseline-glance-metric-box__value { font-size: 1.75rem; }
    .baseline-glance-metric-box .hh-label { font-size: 1rem; }

    /* 9. Dimension headers: 3-col on results page, stack on landing */
    .baseline-categories-section {
        margin-bottom: 2rem;
    }

    .hh-page--baseline-results .baseline-dimension-headers {
        grid-template-columns: repeat(3, 1fr);
    }

    .baseline-dimension-headers {
        grid-template-columns: 1fr;
    }

    /* Results page: tight sizing for 3-col */
    .hh-page--baseline-results .baseline-dimension-header {
        padding: 0.5rem 0.25rem;
    }
    .hh-page--baseline-results .baseline-dimension-header__symbol { font-size: 0.9rem; margin-bottom: 0.15rem; }
    .hh-page--baseline-results .baseline-dimension-header__label { font-size: 0.5rem; letter-spacing: 0.02em; margin-bottom: 0.15rem; }
    .hh-page--baseline-results .baseline-dimension-header__label > div > div:first-child { font-size: 0.55rem; letter-spacing: 0.04em; }
    .hh-page--baseline-results .baseline-dimension-header__label > div > div:last-child { font-size: 0.45rem; letter-spacing: 0.02em; }
    .hh-page--baseline-results .baseline-dimension-header__score { font-size: 1rem; }
    .hh-page--baseline-results .baseline-dimension-header__subtitle { font-size: 0.45rem; }
    .hh-page--baseline-results .baseline-dimension-header__text { font-size: 0.7rem; }

    /* Landing page: stacked 1fr, match baseline.html proportions */
    .baseline-dimension-header {
        padding: 1rem 1.25rem;
    }
    .baseline-dimension-header__text { font-size: 0.85rem; }

    /* Earth header: override back to 1fr (base rule gets overridden by 3-col above) */
    .baseline-dimension-headers--earth {
        grid-template-columns: 1fr;
    }
    .baseline-dimension-headers--earth .baseline-dimension-header {
        padding: 0.75rem 0.5rem;
    }
    .baseline-dimension-headers--earth .baseline-dimension-header__symbol {
        margin-bottom: 0.15rem;
    }
    .baseline-dimension-headers--earth .baseline-dimension-header__text {
        display: block;
        font-size: 0.7rem;
    }

    /* 10. Categories: 3-col aligned to headers, consistent text size */
    .baseline-categories-detailed-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .baseline-category-detail-card {
        padding: 0.75rem 0.5rem;
        gap: 0.4rem;
    }

    .baseline-category-detail-card__header {
        margin-bottom: 0.25rem;
    }

    .baseline-category-detail-card__code {
        font-size: 0.45rem;
    }

    .baseline-category-detail-card__score {
        font-size: 0.9rem;
    }

    /* Title: primary name slightly bigger, subtitle (element name) smaller */
    .baseline-category-detail-card__title {
        font-size: 0.55rem;
        height: auto;
        margin: 0 0 0.25rem;
        line-height: 1.2;
    }
    .baseline-category-detail-card__title > div > div:first-child {
        font-size: 0.55rem;
    }
    .baseline-category-detail-card__title > div > div:last-child {
        font-size: 0.45rem;
    }

    /* Descriptions: consistent with legends and earth intro (0.7rem) */
    /* Specificity boost: must beat .hh-page--baseline-results p { 0.8rem } below */
    .hh-page--baseline-results .baseline-category-detail-card__desc {
        font-size: 0.7rem;
        line-height: 1.4;
        color: var(--hh-text-muted-light);
    }

    /* 11. Charts: stack pairs vertically, legends full width */
    .baseline-charts-section {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem 0 0;
    }

    .baseline-chart-pair {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .baseline-chart-wrapper {
        max-width: 100%;
        margin: 0 auto;
    }

    .baseline-chart-wrapper h3 {
        font-size: 0.8rem;
        margin: 0.5rem 0 0;
    }

    /* Legends: full width, consistent size */
    .baseline-legend {
        font-size: 0.7rem;
        padding: 0.75rem;
        gap: 0.25rem;
        max-width: 100%;
    }

    .baseline-legend__item { gap: 0.4rem; margin-bottom: 0.4rem; }
    .baseline-legend__color { width: 10px; height: 10px; }
    .baseline-legend__label { font-size: 0.7rem; line-height: 1.4; }

    /* 12. What's Next: full width per card */
    .baseline-whats-next-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .baseline-whats-next-card { padding: 1.25rem 1rem; }
    .baseline-whats-next-card__subtitle { font-size: 0.85rem; }
    .baseline-whats-next-card__desc { font-size: 0.75rem; }

    /* Stream bar: decan truncation moved to core CSS (applies to all pages) */

    /* Global baseline text scaling */
    .hh-page--baseline-results h2 { font-size: 1.5rem; }
    .hh-page--baseline-results h3 { font-size: 1.1rem; }
    .hh-page--baseline-results .hh-intro-text { font-size: 0.9rem; }
    .hh-page--baseline-results p { font-size: 0.8rem; }
}

/* ============================================================================
   LANDING PAGE — ADDITIONAL STYLES
   ============================================================================ */

/* Section divider */
.hh-section-divider {
    height: 1px;
    background: var(--hh-border-dark);
    margin: 0;
}

/* ── Chart container div (landing page) ── */
.landing-chart {
    width: 100%;
    aspect-ratio: 500 / 440;
}

.landing-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── MQ intro block ── */
.landing-mq-intro {
    max-width: 820px;
    margin-bottom: 3rem;
}

.landing-mq-intro__body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--hh-text-body);
    margin-bottom: 1.25rem;
}

.landing-mq-quote {
    padding: 1.5rem 2rem;
    border-left: 3px solid var(--hh-citrinitas);
    background: rgba(201, 169, 97, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.landing-mq-quote__latin {
    font-family: var(--hh-font-serif);
    font-size: 1.375rem;
    font-style: italic;
    color: var(--hh-citrinitas);
    letter-spacing: 0.02em;
}

.landing-mq-quote__translation {
    font-size: 0.9375rem;
    color: var(--hh-text-muted-light);
    line-height: 1.5;
}

/* ── TRINITI header ── */
.landing-triniti-header {
    margin-bottom: 0;
    padding-top: 2rem;
    border-top: 1px solid var(--hh-border-dark);
}

/* ── Primary CTA block (Section 3) ── */
.landing-cta-block {
    text-align: center;
    margin-top: 3rem;
    padding: 2.5rem 2rem;
    border: 1px solid var(--hh-border-dark);
    border-top: 2px solid var(--hh-citrinitas);
    background: rgba(201, 169, 97, 0.04);
}

.landing-cta-block__copy {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--hh-text-body);
    max-width: 600px;
    margin: 0 auto 1.75rem;
}

.landing-cta-block__note {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--hh-text-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Lab section copy (left column) ── */
.landing-lab-copy {
    color: var(--hh-text-body);
}

.landing-lab-copy p {
    color: var(--hh-text-body);
}

.landing-lab-copy h2 {
    color: var(--hh-text-light);
}

/* ── Lab section panels (right column) ── */
.landing-lab-panels {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.landing-lab-panels .baseline-earth-cta {
    margin: 0;
    padding: 1.5rem;
}

.landing-lab-panels .baseline-earth-cta h3 {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    color: var(--hh-citrinitas);
}

.landing-lab-panels .baseline-earth-cta__text {
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}

@media (min-width: 481px) and (max-width: 968px) {
    .landing-lab-panels {
        flex-direction: row;
        gap: 1rem;
    }
    .landing-lab-panels .baseline-earth-cta {
        flex: 1;
    }
}


/* ===================================================================
   ASSESSMENT ENGINE — start.html
   House Hermetica Baseline Test v4.0
   Added: 2026-02-20
   =================================================================== */

/* ── Loading Screen ── */
#loading-screen {
    position: fixed;
    inset: 0;
    background: var(--hh-bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#loading-screen .loading-content {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
}

#loading-screen .hermetic-symbol {
    font-size: 4rem;
    color: var(--hh-citrinitas);
    display: block;
    margin-bottom: 1.5rem;
    animation: ae-pulse 2s ease-in-out infinite;
}

#loading-screen .loading-text {
    font-family: var(--hh-font-serif);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--hh-text-muted-light);
    margin-bottom: 2rem;
}

#loading-screen .loading-bar {
    width: 100%;
    height: 2px;
    background: #1e1e1e;
    overflow: hidden;
}

#loading-screen .loading-progress {
    height: 100%;
    background: var(--hh-citrinitas);
    width: 0;
    animation: ae-loading-bar 3s ease-in-out infinite;
}

@keyframes ae-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes ae-loading-bar {
    0% { width: 0; }
    70% { width: 100%; }
    100% { width: 100%; }
}

/* ── Trinity Progress Header ── */
/* z-index: 1 — sits behind .assessment-card (z-index: 2) for scroll blur */
#trinity-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--hh-bg-dark);
}

#trinity-progress-container.hidden {
    display: none;
}

#trinity-progress-indicator {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
}

/* Rotation — added by assessment-ui.js after TrinityGate completes */
.ae-trinity-rotating {
    animation: ae-trinity-rotate 120s linear infinite;
}

@keyframes ae-trinity-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Main Container ── */
#main-container {
    padding-top: 80px; /* clear fixed trinity header */
    min-height: 100vh;
    background: var(--hh-bg-dark);
}

#main-container.hidden {
    display: none;
}

/* ── Assessment Page Sections ── */
.assessment-page-section {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
}

.assessment-page-section.hidden {
    display: none;
}

/* ── Assessment Container ── */
.assessment-container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ── Assessment Card ── */
/* z-index: 2 + backdrop-filter = card blurs over the fixed trinity header as
   content scrolls up — the intended visual effect for start.html */
.assessment-card {
    position: relative;
    z-index: 2;
    background: rgba(18, 18, 18, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    padding: 3rem 2.5rem;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55), 6px 8px 24px rgba(0, 0, 0, 0.6);
}

.assessment-card--welcome {
    text-align: center;
    padding: 4.5rem 2.5rem;
}

.assessment-card--welcome h1 {
    font-family: var(--hh-font-serif);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hh-text-light);
    margin-bottom: 1.25rem;
}

/* ── Before We Begin ── */
.before-begin-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(201, 169, 97, 0.2);
}

.before-begin-header h2 {
    font-family: var(--hh-font-serif);
    font-size: 1.9rem;
    color: var(--hh-text-light);
    margin-bottom: 0.75rem;
}

.before-begin-header p {
    font-size: 1rem;
    color: var(--hh-text-muted-light);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto;
}

.assessment-form .form-group {
    margin-bottom: 1.75rem;
}

.form-label {
    display: block;
    font-family: var(--hh-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hh-text-muted-light);
    margin-bottom: 0.6rem;
}

.form-input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: #0c0c0c;
    border: 1px solid rgba(201, 169, 97, 0.22);
    color: var(--hh-text-light);
    font-family: var(--hh-font-sans);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--hh-citrinitas);
}

.form-hint {
    display: block;
    font-size: 0.85rem;
    color: var(--hh-text-muted-light);
    margin-top: 0.4rem;
    font-style: italic;
}

/* Age Group Radios */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.radio-option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(245, 245, 244, 0.08);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.radio-option:hover {
    border-color: rgba(201, 169, 97, 0.32);
    background: rgba(201, 169, 97, 0.04);
}

.radio-option:has(input[type=radio]:checked) {
    border-color: var(--hh-citrinitas);
    background: rgba(201, 169, 97, 0.06);
}

.radio-option input[type=radio] {
    margin-right: 0.75rem;
    accent-color: var(--hh-citrinitas);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.radio-option label {
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--hh-text-light);
    flex: 1;
    margin: 0;
}

.radio-option:has(input[type=radio]:checked) label {
    color: var(--hh-citrinitas-light);
}

.special-category {
    border-color: rgba(76, 91, 62, 0.35);
}

.special-category:hover {
    border-color: rgba(76, 91, 62, 0.7);
    background: rgba(76, 91, 62, 0.06);
}

/* Agreement Checkboxes */
.agreement-items {
    margin-bottom: 2rem;
}

.agreement-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid rgba(245, 245, 244, 0.08);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.agreement-item:hover {
    border-color: rgba(201, 169, 97, 0.28);
    background: rgba(201, 169, 97, 0.03);
}

.agreement-item:has(input:checked) {
    border-color: rgba(201, 169, 97, 0.4);
}

.agreement-item input[type=checkbox] {
    margin-right: 0.875rem;
    margin-top: 0.2rem;
    accent-color: var(--hh-citrinitas);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.agreement-item span {
    color: var(--hh-text-muted-light);
    line-height: 1.65;
    font-size: 0.95rem;
}

/* Dev mode controls */
#dev-mode-controls {
    display: none;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px dashed rgba(179, 86, 50, 0.4);
    text-align: center;
}

#start-journey {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto;
}

#start-journey:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Progress Bar ── */
.progress-container {
    margin-bottom: 2rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(245, 245, 244, 0.12);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-fill {
    height: 100%;
    background: var(--hh-citrinitas);
    border-radius: 4px;
    transition: width 0.4s ease;
    width: 0%;
}

.progress-text {
    text-align: center;
    font-family: var(--hh-font-sans);
    font-size: var(--hh-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--hh-letter-label);
    color: var(--hh-text-muted-light);
}

/* ── Question Card ── */
.question-category {
    display: none;
    font-size: 0.72rem;
    font-family: var(--hh-font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.28rem 0.7rem;
    border: 1px solid;
    margin-bottom: 1.5rem;
    background: transparent;
}

body[data-developer-mode=true] .question-category {
    display: inline-block;
}

.category-motion { border-color: var(--hh-fire);  color: var(--hh-fire); }
.category-wisdom { border-color: var(--hh-water); color: var(--hh-water); }
.category-harmony { border-color: var(--hh-air);  color: var(--hh-air); }

.question-text {
    font-family: var(--hh-font-serif);
    font-size: 1.4rem;
    line-height: 1.65;
    color: var(--hh-text-light);
    margin-bottom: 2rem;
    text-align: left;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 2rem;
}

/* Generous touch target; slight left-slide hover for kinetic feel */
.option-button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(245, 245, 244, 0.1);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.38s ease, background 0.38s ease, box-shadow 0.38s ease;
    min-height: 3.5rem;
}

.option-button:hover {
    border-color: color-mix(in srgb, var(--hh-accent) 45%, rgba(245, 245, 244, 0.3));
    background: color-mix(in srgb, var(--hh-accent) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hh-accent) 25%, transparent),
                0 0 12px color-mix(in srgb, var(--hh-accent) 10%, transparent);
}

.option-button.selected {
    border-color: var(--hh-citrinitas);
    background: rgba(201, 169, 97, 0.07);
    box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.12);
}

.option-text {
    font-family: var(--hh-font-sans);
    font-size: 0.975rem;
    line-height: 1.55;
    color: var(--hh-text-light);
    flex: 1;
}

/* ── UFV / Confidence Buttons ── */
/* ufv-system.js injects buttons into #uncertainty-container */
.confidence-button {
    background: rgba(215, 208, 195, 0.88);
    border: none;
    border-radius: 0;
    color: #111;
    padding: 0.6rem;
    cursor: pointer;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.12s ease;
    flex-shrink: 0;
}

.confidence-button img {
    width: 36px;
    height: 36px;
    display: block;
}

.confidence-button:hover {
    background: rgba(230, 222, 208, 1);
    transform: translateY(-2px);
}

.confidence-button.selected {
    background: rgba(201, 169, 97, 0.9);
    outline: 2px solid var(--hh-citrinitas);
    outline-offset: 1px;
}

.confidence-button:disabled,
.ufv-locked .confidence-button {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}

/* UFV section layout */
.confidence-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(245, 245, 244, 0.08);
}

.confidence-label {
    font-family: var(--hh-font-sans);
    font-size: var(--hh-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--hh-letter-label);
    color: var(--hh-text-muted-light);
    text-align: center;
    margin-bottom: 0.75rem;
}

.confidence-button-group {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

/* Left-align UFV demo in BWB panel only */
#before-we-begin .confidence-button-group {
    justify-content: flex-start;
}

.ufv-back-btn {
    display: block;
    background: none;
    border: none;
    color: var(--hh-text-muted-light);
    font-family: var(--hh-font-sans);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.5rem 0;
    text-align: center;
    width: 100%;
    margin-top: 0.75rem;
    transition: color 0.18s ease;
    text-decoration: none;
}

.ufv-back-btn:hover {
    color: var(--hh-text-light);
}

.ufv-back-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}

/* ── Likert Continue Button ── */
/* Replaces UFV confidence buttons on 7-item scale questions.
   White variant of .confidence-button — centred, full-width-ish. */
.likert-continue-btn {
    background: rgba(255, 255, 255, 0.88);
    border: none;
    border-radius: 0;
    color: #111;
    font-family: var(--hh-font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.6rem 2.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
}

.likert-continue-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 1);
}

.likert-continue-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Demographic Breaks ── */
.demographic-break {
    text-align: center;
    padding: 3rem 2rem;
    border: 1px solid rgba(201, 169, 97, 0.18);
    background: rgba(10, 10, 10, 0.55);
}

.demographic-break-header {
    margin-bottom: 2rem;
}

.demographic-break-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.demographic-break-title {
    font-family: var(--hh-font-serif);
    font-size: 1.7rem;
    color: var(--hh-text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.demographic-break-subtitle {
    font-family: var(--hh-font-sans);
    font-size: 1.05rem;
    color: var(--hh-text-muted-light);
    font-style: italic;
}

.demographic-break-description {
    max-width: 580px;
    margin: 0 auto 2rem;
    line-height: 1.8;
    text-align: left;
    font-size: 1rem;
    color: var(--hh-text-muted-light);
}

.demographic-break-description p {
    margin-bottom: 0.75rem;
}

.demographic-continue-section {
    text-align: center;
    margin-top: 1.5rem;
}

/* ── Results / Completion Section ── */
.results-section {
    padding: 2rem;
    min-height: calc(100vh - 80px);
}

.results-section.hidden {
    display: none;
}

/* ── HH Modal (completion interstitial) ── */
.hh-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    padding: 1rem;
}

.hh-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* core.css sets .hh-modal { display: none } — override when overlay is active */
.hh-modal-overlay.active .hh-modal {
    display: block;
}

.hh-modal {
    background: var(--hh-bg-dark);
    border: 1px solid rgba(201, 169, 97, 0.28);
    position: relative; /* override core.css position: fixed */
    max-width: 560px;
    width: 100%;
    padding: 2.5rem 2.5rem 1.5rem;
}

.hh-modal__content {
    text-align: center;
}

/* ── Completion Modal Content ── */
.assessment-complete__icon {
    font-size: 3rem;
    color: var(--hh-citrinitas);
    display: block;
    margin-bottom: 1.25rem;
}

.assessment-complete__title {
    font-family: var(--hh-font-serif);
    font-size: 1.7rem;
    color: var(--hh-text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.assessment-complete__name {
    font-family: var(--hh-font-sans);
    font-size: 1.2rem;
    color: var(--hh-citrinitas-light);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.assessment-complete__message {
    color: var(--hh-text-muted-light);
    line-height: 1.75;
    margin-bottom: 1.5rem;
    font-size: 0.975rem;
}

.assessment-complete__redirect {
    font-size: 0.9rem;
    color: var(--hh-text-muted-light);
    margin-bottom: 1.5rem;
}

.assessment-complete__redirect span {
    color: var(--hh-citrinitas);
    font-weight: 600;
}

/* ── Baseline Intro Modal (welcome + results) ── */
.hh-modal--baseline-intro {
    max-width: 620px;
}

.baseline-modal {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.baseline-modal__icon {
    display: block;
    margin: 0 auto;
}

.baseline-modal__title {
    font-family: var(--hh-font-serif);
    font-size: 2.25rem;
    font-weight: 400;
    color: var(--hh-text-light);
    margin: 0;
    line-height: 1.15;
}

.baseline-modal__subtitle {
    font-family: var(--hh-font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--hh-citrinitas);
    margin: 0.15em 0 0;
}

.baseline-modal__intro p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hh-text-body);
    margin: 0;
}

.baseline-modal__steps {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 520px;
    margin: 0 auto;
}

.baseline-modal__step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.baseline-modal__num {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(186, 152, 89, 0.15);
    color: var(--hh-citrinitas);
    font-size: 0.875rem;
    font-weight: 600;
}

.baseline-modal__step p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--hh-text-body);
    margin: 0;
}

.baseline-modal__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.baseline-modal__footer {
    font-size: 0.875rem;
    color: var(--hh-text-muted);
    margin: 0;
}

@media (max-width: 480px) {
    .baseline-modal__title {
        font-size: 1.75rem;
    }

    .hh-modal--baseline-intro {
        max-width: 100%;
    }

    .baseline-modal__actions {
        flex-direction: column;
    }

    .baseline-modal__actions .hh-btn-primary,
    .baseline-modal__actions .hh-btn-secondary {
        width: 100%;
    }
}

/* ── Assessment Footer ── */
.assessment-footer {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--hh-text-muted-light);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .assessment-card {
        padding: 2rem 1.25rem;
    }

    .assessment-card--welcome {
        padding: 2.75rem 1.25rem;
    }

    .question-text {
        font-size: 1.2rem;
    }

    .option-button {
        min-height: 3.75rem; /* larger touch target on mobile */
        padding: 1rem;
    }

    .hh-modal {
        padding: 2rem 1.5rem;
    }

    .assessment-complete__title {
        font-size: 1.4rem;
    }
}


/* ── Loading screen override — ID specificity fix ── */
/* app.js adds/removes .hidden class; ID selector would otherwise win */
#loading-screen.hidden { display: none !important; }

/* ── Loading screen element symbol cycling ── */
#loading-screen {
    flex-direction: column;
    gap: 0;
}

#loading-screen .baseline-loading__symbols {
    width: 56px;
    height: 56px;
}

#loading-screen .baseline-loading__symbol {
    font-size: 3.5rem;
}

#loading-screen .baseline-loading__text {
    font-family: var(--hh-font-serif);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--hh-text-muted-light);
    font-style: normal;
}

/* ── Master assessment timer (in trinity header) ── */
#ae-master-timer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--hh-font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--hh-text-muted-dark);
    opacity: 0;
    transition: opacity 0.4s ease;
    font-variant-numeric: tabular-nums;
}

#ae-master-timer.active {
    opacity: 1;
}


/* ── Option button click flash ── */
@keyframes ae-option-flash {
    0%   { border-color: var(--hh-accent); background: color-mix(in srgb, var(--hh-accent) 22%, transparent); }
    100% { border-color: var(--hh-citrinitas); background: rgba(153, 122, 63, 0.07); }
}
.option-button.flash {
    animation: ae-option-flash 0.3s ease forwards;
}

/* ── Reflection Probe ── */
.reflection-probe-section {
    padding: 1.25rem 1rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.reflection-probe-card {
    background: rgba(18, 18, 18, 0.72);
    border: none;
    padding: 2.5rem 2rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
}

.reflection-probe-card .probe-label {
    font-family: var(--hh-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--hh-citrinitas);
    margin-bottom: 1.5rem;
    display: block;
    text-align: center;
}

.reflection-probe-card .probe-prompt {
    font-family: var(--hh-font-serif);
    font-size: 1.2rem;
    line-height: 1.65;
    color: var(--hh-text-light);
    margin-bottom: 1.5rem;
}

.reflection-textarea {
    width: 100%;
    min-height: 160px;
    padding: 1rem;
    background: rgba(8, 8, 8, 0.9);
    border: 1px solid rgba(201, 169, 97, 0.2);
    color: var(--hh-text-light);
    font-family: var(--hh-font-sans);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}

.reflection-textarea:focus {
    outline: none;
    border-color: var(--hh-citrinitas);
}

.reflection-timer-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.25rem 0;
    padding: 0.5rem 1rem;
    border-radius: 0;
    background: rgba(201, 169, 97, 0.08);
    border: 1px solid rgba(201, 169, 97, 0.15);
    transition: background 0.4s, border-color 0.4s;
}

.reflection-timer-bar #reflection-timer {
    font-family: var(--hh-font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--hh-citrinitas);
    transition: color 0.4s;
}

.reflection-timer-bar.reflection-timer-warn {
    background: rgba(201, 169, 97, 0.14);
    border-color: rgba(201, 169, 97, 0.3);
}

.reflection-timer-bar.reflection-timer-warn #reflection-timer {
    color: var(--hh-citrinitas);
}

.reflection-timer-bar.reflection-timer-urgent {
    background: rgba(179, 86, 50, 0.12);
    border-color: rgba(179, 86, 50, 0.35);
    animation: timer-pulse 1s ease-in-out infinite;
}

.reflection-timer-bar.reflection-timer-urgent #reflection-timer {
    color: var(--hh-fire);
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.reflection-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    color: var(--hh-text-muted-light);
    font-family: var(--hh-font-sans);
    font-size: 0.82rem;
}

.reflection-words-met {
    color: var(--hh-air) !important;
}

/* ── Probe break content (quote + message above probe question) ── */
.probe-break-content {
    margin-bottom: 0.5rem;
    padding-bottom: 0;
    text-align: center;
}

.probe-break-title {
    font-family: var(--hh-font-serif);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--hh-citrinitas);
    margin-bottom: 0.75rem;
}

.probe-break-message {
    font-size: 0.95rem;
    color: var(--hh-text-muted-light);
    margin-bottom: 0.75rem;
    line-height: 1.65;
}

.probe-break-quote {
    font-family: var(--hh-font-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--hh-text-muted-light);
    opacity: 0.75;
    margin: 0;
    padding: 0 1rem;
}

.reflection-submit-wrap {
    margin-top: 1.25rem;
    text-align: center;
}

/* Probe sacred geometry CSS removed (Session 69) — SVGs parked */

/* ── TrinityGate layout ── */
.trinity-gate-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: center;
}

.trinity-gate-intro {
    font-family: var(--hh-font-serif);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--hh-text-muted-light);
    margin: 0 auto 1rem;
    max-width: 680px;
}

.principles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin: 0.75rem 0 1rem;
    text-align: left;
}

.principle-column {
    padding: 1rem 1.25rem;
    border-top: 3px solid rgba(245, 245, 244, 0.15);
}

.principle-column.initiation-column    { border-top-color: var(--hh-fire); }
.principle-column.investigation-column { border-top-color: var(--hh-water); }
.principle-column.integration-column   { border-top-color: var(--hh-air); }

.principle-column h4 {
    font-family: var(--hh-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 0.4rem;
}

.principle-column.initiation-column    h4 { color: var(--hh-fire); }
.principle-column.investigation-column h4 { color: var(--hh-water); }
.principle-column.integration-column   h4 { color: var(--hh-air); }

.principle-column p {
    font-family: var(--hh-font-sans);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--hh-text-muted-light);
    margin: 0;
}

@media (max-width: 480px) {
    .principles-grid {
        gap: 0.35rem;
    }
    .principle-column {
        padding: 0.5rem 0.5rem;
    }
    .principle-column h4 {
        font-size: 0.55rem;
        letter-spacing: 0.08em;
        margin-bottom: 0.2rem;
    }
    .principle-column p {
        font-size: 0.6rem;
        line-height: 1.4;
    }
}

.trinity-gate-restore {
    font-family: var(--hh-font-serif);
    font-size: 1.1rem;
    color: var(--hh-text-muted-light);
    margin: 0 auto 1.25rem;
    line-height: 1.6;
    max-width: 620px;
}

.trinity-gate-canvas-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto 1rem;
}

.consciousness-gate-svg {
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 760; /* matches viewBox="0 40 900 760" — crops dead top/bottom space */
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

#gate-timer-display {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 200px;
    margin: 0 auto 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0;
    background: rgba(201, 169, 97, 0.08);
    border: 1px solid rgba(201, 169, 97, 0.15);
    transition: background 0.4s, border-color 0.4s;
}

#gate-timer-display #timer-span {
    font-family: var(--hh-font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--hh-citrinitas);
    transition: color 0.4s;
}

#gate-timer-display.gate-timer-warn {
    background: rgba(201, 169, 97, 0.14);
    border-color: rgba(201, 169, 97, 0.3);
}

#gate-timer-display.gate-timer-urgent {
    background: rgba(179, 86, 50, 0.12);
    border-color: rgba(179, 86, 50, 0.35);
    animation: timer-pulse 1s ease-in-out infinite;
}

#gate-timer-display.gate-timer-urgent #timer-span {
    color: var(--hh-fire);
}

.gate-continue-section {
    text-align: center;
    margin: 1rem 0;
}

/* ── Assessment "all done" section ── */
#assessment-allDone {
    text-align: center;
    padding: 3.5rem 2rem;
}

#assessment-allDone h2 {
    font-family: var(--hh-font-serif);
    font-size: 2rem;
    color: var(--hh-citrinitas);
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
}

#assessment-allDone p {
    color: var(--hh-text-muted-light);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* ── BBN items (Before We Begin notes) — dark context ── */
.bbn-item {
    color: var(--hh-text-muted-light);
}

.bbn-item p {
    color: var(--hh-text-muted-light);
}

.before-begin-header .intro-text {
    font-size: 0.975rem;
    color: var(--hh-text-muted-light);
    line-height: 1.8;
    max-width: 580px;
    margin: 0 auto;
}

/* ── Probe break content (title / message / quote above probe question) ── */
.probe-break-content {
    text-align: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}

.probe-break-title {
    font-family: var(--hh-font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--hh-citrinitas);
    margin-bottom: 1rem;
}

.probe-break-message {
    font-family: var(--hh-font-sans);
    font-size: 1rem;
    color: var(--hh-text-muted-light);
    line-height: 1.65;
    margin-bottom: 0.75rem;
}

.probe-break-quote {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--hh-text-muted-light);
    opacity: 0.8;
    line-height: 1.65;
}

/* ── Reflection probe — centred submit button ── */
.reflection-submit-wrap {
    text-align: center;
    margin-top: 1.25rem;
}

/* ════════════════════════════════════════════════════════════════
   SESSION 8 ADDITIONS — Feb 2026
   ════════════════════════════════════════════════════════════════ */

/* Reserve space for Proceed button at all times — prevents panel resize on reveal */
.gate-continue-section.hidden {
    visibility: hidden;
}

.trinity-gate-wrapper {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.trinity-gate-canvas-container {
    margin-bottom: 0.5rem;
}

/* ── TrinityGate: dark panel on the container (wraps label + gate interface) ── */
/* z-index: 2 matches .assessment-card so gate scrolls over the fixed header */
#trinity-gate-section .assessment-container {
    position: relative;
    z-index: 2;
    background: rgba(18, 18, 18, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55), 6px 8px 24px rgba(0, 0, 0, 0.6);
    padding: 2rem 2.5rem;
}

/* ── TrinityGate: flex column layout + element order ── */
.trinity-gate-wrapper {
    display: flex;
    flex-direction: column;
}
/* Restore (instructions) → canvas → timer → intro → dimensions → continue */
.trinity-gate-restore        { order: 1; color: var(--hh-text-light) !important; }
.trinity-gate-canvas-container { order: 2; width: 100%; }
#gate-timer-display          { order: 3; }
.trinity-gate-intro          { order: 4; }
.principles-grid             { order: 5; }
.gate-continue-section       { order: 6; }

/* ── TrinityGate: hint flash system ── */
.hint-blink-text {
    animation: hint-triple-blink-text 0.45s step-end forwards;
}
.hint-blink-orb {
    animation: hint-triple-blink-orb 0.45s step-end forwards;
}

@keyframes hint-triple-blink-text {
    0%        { opacity: 0; }
    11%       { opacity: 1; }
    22%       { opacity: 0; }
    33%       { opacity: 1; }
    44%       { opacity: 0; }
    55%       { opacity: 1; }
    100%      { opacity: 1; }
}

@keyframes hint-triple-blink-orb {
    0%        { fill: #fff; filter: drop-shadow(0 0 12px rgba(255,255,255,0.5)); }
    11%       { fill: var(--orb-fill); filter: none; }
    22%       { fill: #fff; filter: drop-shadow(0 0 12px rgba(255,255,255,0.5)); }
    33%       { fill: var(--orb-fill); filter: none; }
    44%       { fill: #fff; filter: drop-shadow(0 0 12px rgba(255,255,255,0.5)); }
    55%       { fill: var(--orb-fill); filter: none; }
    100%      { fill: var(--orb-fill); filter: none; }
}

.vertex-hint-circle {
    animation: vertex-hint-pulse 2s ease-in-out infinite;
}

@keyframes vertex-hint-pulse {
    0%, 100% { opacity: 0.25; stroke-width: 1.5; }
    50% { opacity: 0.7; stroke-width: 2.5; }
}

/* ── Likert: horizontal radio-style buttons ── */
.likert-scale {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.likert-scale .option-button {
    flex: 1;
    min-width: 90px;
    max-width: 160px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 1rem 0.75rem 0.9rem;
    min-height: 5.5rem;
    gap: 0.5rem;
}
/* Fake radio circle above the label */
.likert-scale .option-button::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(245, 245, 244, 0.28);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.likert-scale .option-button.selected::before {
    background: var(--hh-citrinitas);
    border-color: var(--hh-citrinitas);
}
.likert-scale .option-text {
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Tablet: shrink Likert buttons to prevent wrapping */
@media (min-width: 481px) and (max-width: 1024px) {
    .likert-scale {
        gap: 0.3rem;
    }
    .likert-scale .option-button {
        min-width: 0;
        max-width: 120px;
        padding: 0.6rem 0.4rem 0.5rem;
        min-height: 4rem;
        gap: 0.3rem;
    }
    .likert-scale .option-button::before {
        width: 13px;
        height: 13px;
    }
    .likert-scale .option-text {
        font-size: 0.72rem;
        line-height: 1.3;
    }
}

/* Phone: stack Likert vertically */
@media (max-width: 480px) {
    .likert-scale {
        flex-direction: column;
        gap: 0.3rem;
    }
    .likert-scale .option-button {
        flex-direction: row;
        max-width: 100%;
        min-height: auto;
        padding: 0.6rem 0.8rem;
        gap: 0.5rem;
    }
    .likert-scale .option-text {
        font-size: 0.8rem;
    }
}

/* ── Panel label for question cards (ASSESSMENT QUESTION / OPINION SCALE) ── */
.question-panel-label {
    font-family: var(--hh-font-sans);
    font-size: var(--hh-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--hh-letter-label);
    color: var(--hh-citrinitas);
    margin-bottom: 1.5rem;
    display: block;
    text-align: center;
}

/* ── BWB: bbn-num top alignment fix ── */
.bbn-num {
    align-self: flex-start;
    margin-top: 0;
    line-height: 0.85;
}

/* ── BWB: timing notice (replaces inline styles) ── */
.bbn-timing-notice {
    font-size: 0.9rem;
    color: var(--hh-text-muted-light);
    text-align: center;
    line-height: 1.7;
    max-width: 580px;
    margin: 0 auto 1.5rem;
}

/* ── BWB: confirm text under second checkbox ── */
.bbn-confirm-text {
    font-family: var(--hh-font-sans);
    font-size: var(--hh-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--hh-letter-label);
    color: var(--hh-text-muted-light);
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* ── Disabled button pattern (mirrors #start-journey:disabled) ── */
.hh-btn-primary:disabled,
.hh-btn-secondary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   MODAL SYSTEM — DARK ASSESSMENT CONTEXT
   Unified style for completion modal, honeypot, and any future
   assessment-context overlays. Uses .hh-modal-overlay / .hh-modal
   from start.html or the honeypot classes where JS is fixed.
   ════════════════════════════════════════════════════════════════ */

/* ── Honeypot modal: harmonised with .hh-modal-overlay pattern ── */
.honeypot-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 1rem;
    animation: ae-modal-fade-in 0.25s ease;
}

.honeypot-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

.honeypot-content {
    position: relative;
    z-index: 1;
    background: var(--hh-bg-dark, #0a0a0a);
    border: 1px solid rgba(201, 169, 97, 0.28);
    max-width: 520px;
    width: 100%;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55), 6px 8px 24px rgba(0, 0, 0, 0.6);
    animation: ae-modal-slide-up 0.3s ease;
}

.honeypot-icon {
    font-size: 2rem;
    color: var(--hh-citrinitas, #c9a961);
    display: block;
    margin-bottom: 0.5rem;
}

.honeypot-title {
    font-family: var(--hh-font-serif);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hh-text-light, #f5f5f4);
    margin-bottom: 0.75rem;
}

.honeypot-text {
    font-family: var(--hh-font-sans);
    font-size: 0.95rem;
    color: var(--hh-text-muted-light, #a3a3a3);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.honeypot-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Honeypot answer buttons match .option-button styling */
.honeypot-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.9rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(245, 245, 244, 0.1);
    color: var(--hh-text-light, #f5f5f4);
    font-family: var(--hh-font-sans);
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.28s ease, background 0.28s ease;
}
.honeypot-option:hover {
    border-color: color-mix(in srgb, var(--hh-accent) 55%, transparent);
    background: color-mix(in srgb, var(--hh-accent) 7%, transparent);
}

@keyframes ae-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ae-modal-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}