.nx-hero-question {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--nx-tool-ohc-teal, #0d9488);
    margin: 0 0 0.35rem;
    line-height: 1.35;
}
.ohc-hero-panel {
    margin-top: 1rem;
}
/* Hover readout above the warming stripes — shows the hovered year, its
   heat-content value, and how far above the 1955-1990 baseline that sits.
   Year + value take the bar's fill colour so the eye instantly ties the
   number back to the strip below. Defaults to the latest year on first
   render so the readout is never empty. */
.ohc-stripes-readout {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    margin: 0.55rem 0 0.4rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ohc-stripes-readout-year {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: color 120ms ease-out;
}
.ohc-stripes-readout-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: color 120ms ease-out;
}
.ohc-stripes-readout-context {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
@media (min-width: 720px) {
    .ohc-stripes-readout-context {
        flex-basis: auto;
        margin-top: 0;
        margin-left: 0.25rem;
    }
}
.ohc-milestones {
    list-style: none;
    padding: 0.75rem 0 0;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}
.ohc-milestones li {
    padding: 0.2rem 0;
}
.chart-wrap { height: 300px; position: relative; margin-top: 0.75rem; }
.chart-note {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
    line-height: 1.5;
}
.units-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.unit-card { position: relative; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: 8px; text-align: center; }
.unit-card .unit-info-btn { position: absolute; top: 0.5rem; right: 0.5rem; }
.unit-card strong { display: block; font-size: 1.25rem; margin-bottom: 0.25rem; }
.nx-hero-badge-row { display: inline-flex; align-items: center; gap: 0.35rem; }
.nx-hero-status {
    background: var(--surface-elevated, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 0.35rem 0.75rem;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 500;
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Basin grid promoted to a signature panel beside the global stripes. */
.ohc-basin-panel .nx-basin-stripes-grid {
    gap: 1.1rem;
}
.ohc-basin-panel .nx-basin-stripe-label {
    font-weight: 600;
}

/* Cascade ladder — ocean heat as the engine for downstream dashboards. */
.ohc-cascade {
    list-style: none;
    counter-reset: cascade;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ohc-cascade-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem 0.7rem 2.4rem;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--nx-tool-ohc-teal, #0d9488);
    border-radius: 8px;
    background: var(--surface-elevated, rgba(255, 255, 255, 0.04));
}
.ohc-cascade-step::before {
    counter-increment: cascade;
    content: counter(cascade);
    position: absolute;
    left: 0.7rem;
    top: 0.7rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--nx-tool-ohc-teal, #0d9488);
}
.ohc-cascade-step--origin {
    border-left-color: #ea580c;
    border-left-width: 4px;
    background: rgba(234, 88, 12, 0.1);
    box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.2);
}
.ohc-cascade-step--origin::before {
    background: #ea580c;
}
.ohc-cascade-intro {
    margin: 0.5rem 0 0.5rem;
    padding: 0.75rem 0.9rem;
    background: rgba(234, 88, 12, 0.10);
    border-left: 4px solid #ea580c;
    border-radius: 8px;
    font-size: 1rem;
}
.ohc-cascade-arrow {
    text-align: center;
    margin: 0.4rem 0 0.4rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ohc-cascade-foot {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
}
/* Parallel impacts grid — radiating off the engine, not from each other. */
.ohc-cascade-subhead {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-body, var(--text-primary, #1f2937));
}
.ohc-cascade-grid {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.55rem;
}
.ohc-cascade-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--nx-tool-ohc-teal, #0d9488);
    border-radius: 8px;
    background: var(--surface-elevated, rgba(255, 255, 255, 0.04));
}
.ohc-cascade-tile .ohc-cascade-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.ohc-hero-scale-note {
    margin-top: 0.25rem;
    max-width: 38rem;
    font-size: 0.75rem;
    opacity: 0.92;
}
.ohc-cascade-rung {
    font-weight: 600;
    font-size: 1rem;
}
a.ohc-cascade-rung {
    color: var(--nx-tool-ohc-teal, #14b8a6);
    text-decoration: none;
}
a.ohc-cascade-rung::after {
    content: ' →';
    opacity: 0.7;
}
a.ohc-cascade-rung:hover { text-decoration: underline; }
.ohc-cascade-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}