/* Extracted from pages/learn.html */
.learn-wrap { max-width: 900px; margin: 0 auto; padding: 0 1.5rem 4rem; }

/* Section headers */
.section-divider {
    border-top: 2px solid var(--border);
    padding-top: 2rem;
    margin-top: 2rem;
}

/* Condition grid */
.cond-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 2px solid var(--border);
    margin: 1.5rem 0;
}
.cond-cell {
    padding: 1.25rem;
    border-right: 2px solid var(--border);
}
.cond-cell:last-child { border-right: none; }
.cond-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    margin-bottom: 0.5rem;
}
.cond-cell h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.cond-cell p { font-size: 0.83rem; color: var(--text-dim); line-height: 1.5; }

/* Cascade diagram */
.cascade {
    border: 2px solid var(--border);
    padding: 1.25rem;
    margin: 1.5rem 0;
}
.cascade-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.cascade-step {
    flex: 1;
    padding: 1rem;
    border-right: 2px solid var(--border);
}
.cascade-step:last-child { border-right: none; }
.cascade-step-id {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    margin-bottom: 0.4rem;
}
.cascade-step-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.4rem; }
.cascade-step p { font-size: 0.8rem; color: var(--text-dim); line-height: 1.4; }
.cascade-arrow {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--text-faint);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Phase table */
.phase-table { border: 2px solid var(--border); margin: 1.5rem 0; }
.phase-row {
    display: grid;
    grid-template-columns: 100px 80px 1fr;
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.phase-row:last-child { border-bottom: none; }
.phase-row.header { background: var(--surface-2); }
.phase-row > div { padding: 0.75rem 1rem; font-size: 0.83rem; }
.phase-row.header > div { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.phase-row .phase-name { font-weight: 700; }
.phase-row .phase-range { font-family: var(--font-mono); }

/* Evidence stats */
.evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 2px solid var(--border);
    margin: 1.5rem 0;
}
.evidence-cell {
    padding: 1.25rem;
    border-right: 2px solid var(--border);
    text-align: center;
}
.evidence-cell:last-child { border-right: none; }
.evidence-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.5rem;
    letter-spacing: -0.03em;
    display: block;
}
.evidence-desc { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.25rem; }

/* Safe design principles */
.principles { display: flex; flex-direction: column; gap: 0; margin: 1.5rem 0; }
.principle {
    display: grid;
    grid-template-columns: 60px 1fr;
    border: 2px solid var(--border);
    border-bottom: none;
    align-items: start;
}
.principle:last-child { border-bottom: 2px solid var(--border); }
.principle-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 1rem;
    border-right: 2px solid var(--border);
    letter-spacing: 0.06em;
}
.principle-body { padding: 1rem; }
.principle-body h4 { font-size: 0.9rem; margin-bottom: 0.3rem; }
.principle-body p { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; margin: 0; }

/* Cases grid */
.cases-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 2px solid var(--border);
    margin: 1.5rem 0;
}
.case-cell {
    padding: 1.25rem;
    border-right: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
}
.cases-grid > .case-cell:nth-last-child(-n+2) { border-bottom: none; }
.cases-grid > .case-cell:nth-child(2n) { border-right: none; }
.case-domain {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    margin-bottom: 0.4rem;
}
.case-cell h4 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.case-cell p { font-size: 0.8rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 0.5rem; }
.case-score {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
}

/* SVG figures */
.fig-block {
    margin: 1.5rem 0;
    border: 2px solid var(--border);
    background: var(--bg-card);
    overflow: hidden;
}
.fig-block img { width: 100%; height: auto; display: block; }
.fig-caption {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-faint);
    padding: 0.4rem 1rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
    .cond-grid { grid-template-columns: 1fr; }
    .cond-cell { border-right: none; border-bottom: 2px solid var(--border); }
    .cond-cell:last-child { border-bottom: none; }
    .cascade-steps { flex-direction: column; }
    .cascade-step { border-right: none; border-bottom: 2px solid var(--border); }
    .cascade-step:last-child { border-bottom: none; }
    .cascade-arrow { display: none; }
    .evidence-grid { grid-template-columns: 1fr; }
    .evidence-cell { border-right: none; border-bottom: 2px solid var(--border); }
    .evidence-cell:last-child { border-bottom: none; }
    .cases-grid { grid-template-columns: 1fr; }
    .case-cell { border-right: none; }
    .cases-grid > .case-cell:nth-last-child(-n+2) { border-bottom: 2px solid var(--border); }
    .cases-grid > .case-cell:last-child { border-bottom: none; }
}