/* ==========================================================
   Step 2 — Is This The Right Time? — five-section layout
   Namespaced with s2- to avoid collisions with shared shell CSS.
   ========================================================== */

.s2-wrap {
    display: flex;
    flex-direction: column;
    padding: var(--space-4, 4px) var(--space-4, 4px) var(--space-8, 8px);
}

.s2-section {
    position: relative;
    padding-left: var(--space-44, 44px);
    padding-bottom: var(--space-4, 4px);   /* space BEFORE the divider line */
    margin-bottom: var(--space-4, 4px);    /* space AFTER the divider line */
    border-bottom: 1px solid var(--color-border, #e6e8ec);
}

.s2-section:last-child {
    border-bottom: none;    /* no trailing line after the final section */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* .s2-section-num styling now lives in journey-layout.css, shared
   with steps 3-6. */

.s2-loading,
.s2-error {
    padding: var(--space-24, 24px);
    text-align: center;
    color: var(--color-gray-muted, #6b7280);
    font-size: var(--font-size-14, 14px);
}

/* ---------- Section 1: Best vs Worst (3-card layout) ---------- */

.s2-compare {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
}

.s2-compare-card {
    flex: 1;
    /* min-width: 220px; */
    display: flex;
    align-items: center;
    gap: 2px;
    padding: var(--space-2, 2px);
}

.s2-compare-card--best { background: #f2faf5; }
.s2-compare-card--worst { background: #fdf6f4; }
.s2-compare-card--note { background: #f2faf5; align-items: center; }

.s2-compare-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-circle, 50%);
    background: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-20, 20px);
}

.s2-compare-icon svg {
    width: 26px;
    height: 26px;
}

.s2-compare-text {
    flex: 1;
    min-width: 0;
}

.s2-compare-label {
    font-weight: 700;
    font-size: var(--font-size-10, 10px);
    margin-bottom: var(--space-1, 1px);
}

.s2-compare-detail {
    font-size: var(--font-size-10, 10px);
    color: var(--color-gray-slate, #4b5563);
    margin-bottom: var(--space-2, 2px);
}

.s2-compare-arrow {
    font-size: var(--font-size-11, 11px);
    color: var(--color-ink, #1f2733);
}

.s2-compare-sub {
    font-size: var(--font-size-11, 11px);
    color: var(--color-gray-light, #9aa1ab);
    margin-top: var(--space-2, 2px);
}

.s2-compare-note {
    font-weight: 500;
    font-size: var(--font-size-14, 14px);
}

/* ---------- Section 2: Timeline (real range bars) ---------- */

.s2-tl-title {
    font-family: var(--ev-font-heading, "Playfair Display", serif);
    font-size: var(--font-size-12, 12px);
    color: var(--ev-color-navy, #173763);
    margin: 0 0 4px;
}

.s2-tl-sub {
    font-size: var(--font-size-10, 10px);
    color: var(--color-gray-muted, #6b7280);
    margin: 0 0 4px;
}

.s2-tl-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
}

.s2-tl-item {
    min-width: 0;
    text-align: center;
}

.s2-tl-year {
    font-size: var(--font-size-10, 10px);
    font-weight: 500;
    color: var(--color-gray-slate, #4b5563);
    margin-bottom: var(--space-3, 3px);
}

.s2-tl-bar {
    position: relative;
    height: 16px;
    margin: 4px 0;
}

.s2-tl-line {
    position: absolute;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
}

.s2-tl-cap {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 6px;
    transform: translate(-50%, -50%);
}

.s2-tl-dot {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-circle, 50%);
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-marker-ring, 0 0 0 2px var(--color-white, #fff));
}

.s2-tl-range {
    font-size: var(--font-size-10, 10px);
    color: var(--color-gray-muted, #6b7280);
    white-space: nowrap;
}

.s2-tl-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: var(--font-size-10, 10px);
    color: var(--color-gray-muted, #6b7280);
    margin-top: var(--space-6, 6px);
    flex-wrap: wrap;
}

.s2-tl-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle, 50%);
    margin-right: var(--space-4, 4px);
    vertical-align: middle;
}

/* ---------- Section 3: Face pictogram ---------- */

.s2-face-cols {
    display: grid;
    grid-template-columns: 1.15fr repeat(4, 1fr);
    gap: 8px;
    align-items: start;
}

.s2-face-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.s2-face-title {
    font-family: var(--ev-font-heading, "Playfair Display", serif);
    font-size: var(--font-size-12, 12px);
    color: var(--ev-color-navy, #173763);
    line-height: 1.25;
    margin: 0 0 4px;
}

.s2-face-sub {
    font-size: var(--font-size-10, 10px);
    color: var(--color-gray-muted, #6b7280);
    line-height: 1.35;
    margin: 0 0 4px;
}

.s2-face-col {
    text-align: center;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e6e8ec);
    border-radius: var(--radius-16, 16px);
    padding: var(--space-6, 6px);
}

.s2-face-heading {
    font-size: var(--font-size-10, 10px);
    font-weight: 600;
    color: var(--color-ink, #1f2733);
    margin-bottom: var(--space-4, 4px);
}

.s2-face-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    justify-items: center;
    margin-bottom: var(--space-6, 6px);
}

.s2-face {
    display: inline-flex;
}
.s2-face-wrap{
    display:flex;
    flex-direction:column;
    gap:2px;          /* controls the spacing */

}

.s2-face svg {
    width: 12px;
    height: 12px;
}

.s2-face-pct {
    font-size: var(--font-size-10, 10px);
    font-weight: 600;
    line-height: 1.2;
}

.s2-face-footer{
    margin:0;
    padding:0;
    font-size:var(--font-size-10, 10px);
    font-style:italic;
    color:var(--color-gray-muted, #6b7280);
    text-align:center;
    line-height:1.1;
}
/* ---------- Section 4: Cohort grid teaser ---------- */

.s2-grid-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.s2-grid-intro {
    flex: 1;
    min-width: 180px;
}

.s2-grid-main {
    flex: 3;
    min-width: 0;
}

.s2-grid-title {
    font-family: var(--ev-font-heading, "Playfair Display", serif);
    font-size: var(--font-size-12, 12px);
    color: var(--ev-color-navy, #173763);
    margin: 0 0 4px;
}

.s2-grid-sub {
    font-size: var(--font-size-10, 10px);
    color: var(--color-gray-muted, #6b7280);
    margin: 0 0 4px;
}

.s2-grid-scroll {
    padding-bottom: var(--space-2, 2px);
}

.s2-grid-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 2px;
    margin-bottom: var(--space-2, 2px);
}

.s2-grid-rowlabel {
    font-size: var(--font-size-10, 10px);
    font-weight: 700;
    color: var(--color-gray-muted, #6b7280);
    text-align: right;
}

.s2-grid-cells {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
}

.s2-grid-cell {
    height: 16px;
    border-radius: var(--radius-6, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-2, 2px) var(--space-2, 2px);
}

.s2-grid-cell--empty {
    background: transparent;
}

.s2-grid-spark {
    width: 100%;
    height: 100%;
}

.s2-grid-row--labels {
    margin-top: var(--space-2, 2px);
}

.s2-grid-yearlabel {
    text-align: center;
    font-size: var(--font-size-10, 10px);
    color: var(--color-gray-light, #9aa1ab);
}

@media (max-width: 900px) {
    .s2-face-cols { grid-template-columns: 1fr; }
    .s2-grid-cells { grid-template-columns: repeat(5, 1fr); }
    .s2-tl-row { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
    /* .s2-grid-main has min-width:0 so it can shrink to fit next to
       .s2-grid-intro's 180px floor instead of wrapping — on narrow
       phones that crushes the data grid to an unreadable sliver.
       Stack intro above the grid instead so the grid gets the full
       row width. */
    .s2-grid-layout {
        flex-direction: column;
        align-items: stretch;
    }
    .s2-grid-intro {
        min-width: 0;
    }
}
@media (max-width: 540px) {
    .s2-tl-row { grid-template-columns: repeat(3, 1fr); }
}