/* ==========================================================
   Step 1 — Should I Invest? — card-grid styling
   Namespaced with s1- to avoid collisions with shared shell CSS.
   Colors (headline, pill, icon accent, sparkline) are applied
   inline from step1.js, driven by colors.js — this file only
   handles layout/structure, not the color system itself.
   ========================================================== */

.s1-wrap {
    padding: 4px 0 8px;
}

.s1-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-6, 6px);
}

.s1-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;
}

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

.s1-toggle {
    display: inline-flex;
}

.s1-toggle-btn {
    padding: var(--space-8, 8px) var(--space-14, 14px);
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.s1-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: var(--space-6, 6px);
}

@media (max-width: 980px) {
    .s1-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .s1-grid { grid-template-columns: 1fr; }
}

.s1-card {
    padding: var(--space-4, 4px);
}

.s1-card--missing {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-light, #9aa1ab);
    font-size: var(--font-size-12, 12px);
    text-align: center;
    min-height: 160px;
}

.s1-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-6, 6px);
}

.s1-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-circle, 50%);
    flex-shrink: 0;
}

.s1-card-name {
    font-weight: 600;
    font-size: var(--font-size-12, 12px);
    color: var(--color-ink, #1f2733);
}

.s1-headline {
    font-size: var(--font-size-18, 18px);
    font-weight: 600;
    line-height: 1.1;
    /* color set inline per card via getHeatColor() */
}

.s1-sublabel {
    font-size: var(--font-size-10, 10px);
    color: #8a919c;
    margin: 2px 0 2px;
}

.s1-centered {
    text-align: center;
}

.s1-pospill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-9, 9px);
    font-weight: 600;
    padding: var(--space-4, 4px) var(--space-4, 4px);
    border-radius: var(--radius-8, 8px);
    margin-bottom: var(--space-2, 2px);
    margin-left:var(--space-20, 20px);
    /* background/color set inline via semantic.positive */
}

.s1-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-circle, 50%);
    color: var(--color-white, #fff);
    font-size: var(--font-size-9, 9px);
    /* background set inline via semantic.positive */
}

.s1-spark-svg {
    width: 100%;
    height: 36px;
    display: block;
}

.s1-probbar {
    border: 1px solid #f0dfae;
    background: #fdf8ec;
    border-radius: var(--radius-12, 12px);
    padding: var(--space-4, 4px) var(--space-4, 4px);
}

.s1-probbar-title {
    font-size: var(--font-size-12, 12px);
    font-weight: 700;
    color: var(--color-ink, #1f2733);
    margin-bottom: var(--space-2, 2px);
}

.s1-probbar-sub {
    font-weight: 400;
    color: #8a919c;
}

.s1-probbar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}


.s1-prob-cell {
    min-width: 70px;
}

.s1-prob-h {
    font-size: var(--font-size-12, 12px);
    color: var(--color-gray-muted, #6b7280);
    margin-bottom: var(--space-2, 2px);
}

.s1-prob-v {
    font-size: var(--font-size-10, 10px);
    font-weight: 700;
    /* color set inline via semantic.positive */
}

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

@media (max-width: 900px) {
    .s1-probbar-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
    .s1-probbar-grid { grid-template-columns: repeat(3, 1fr); }
}