/* ═══════════════════════════════════════════════════════════════
   SimpleFeasibility — Professional Report Content Design System
   Bankable-grade feasibility report typography & components
   ═══════════════════════════════════════════════════════════════ */

/* ── Section Heading Hierarchy ─────────────────────────────── */
.rpt h1 { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); margin: 0 0 1.25rem; letter-spacing: -0.02em; line-height: 1.3; }
.rpt h2 { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-primary-500); line-height: 1.35; }
.rpt h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 2rem 0 0.75rem; line-height: 1.4; }
.rpt h4 { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); margin: 1.5rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; }
.rpt h2:first-child { margin-top: 0; }

/* ── Body Text ─────────────────────────────────────────────── */
.rpt { line-height: 1.8; color: var(--text-secondary); font-size: 0.9rem; }
.rpt p { margin: 0 0 1rem; }
.rpt strong { color: var(--text-primary); font-weight: 600; }
.rpt em { font-style: italic; }

/* ── Lists ─────────────────────────────────────────────────── */
.rpt ul, .rpt ol { padding-left: 1.5rem; margin: 0.75rem 0 1.25rem; }
.rpt ul { list-style: none; }
.rpt ul > li { position: relative; padding-left: 1rem; margin-bottom: 0.5rem; line-height: 1.7; }
.rpt ul > li::before {
    content: '';
    position: absolute; left: 0; top: 0.65em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-primary-500);
}
.rpt ol { list-style: none; counter-reset: rpt-ol; }
.rpt ol > li { position: relative; padding-left: 2rem; margin-bottom: 0.5rem; line-height: 1.7; counter-increment: rpt-ol; }
.rpt ol > li::before {
    content: counter(rpt-ol);
    position: absolute; left: 0; top: 0.1em;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-primary-500); color: white;
    font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ── KPI / Metric Cards ────────────────────────────────────── */
.rpt-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 1.75rem;
}
.rpt-kpi {
    background: var(--surface-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid var(--border-primary);
    transition: border-color 0.2s, transform 0.2s;
}
.rpt-kpi:hover { border-color: var(--color-primary-500); transform: translateY(-1px); }
.rpt-kpi-label {
    display: block; font-size: 0.65rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem;
}
.rpt-kpi-value {
    display: block; font-size: 1.6rem; font-weight: 800;
    color: var(--text-primary); line-height: 1.2; font-variant-numeric: tabular-nums;
}
.rpt-kpi-sub { display: block; font-size: 0.72rem; color: var(--text-tertiary); margin-top: 0.35rem; }
.rpt-kpi.positive .rpt-kpi-value { color: var(--color-success-400); }
.rpt-kpi.negative .rpt-kpi-value { color: var(--color-error-400); }
.rpt-kpi.highlight { border-color: var(--color-gold-500); background: linear-gradient(135deg, var(--surface-secondary), rgba(245,158,11,0.05)); }

/* ── Tables ────────────────────────────────────────────────── */
.rpt table {
    width: 100%; border-collapse: collapse;
    font-size: 0.85rem; margin: 1rem 0 1.5rem;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border-primary);
}
.rpt thead { background: var(--surface-secondary); }
.rpt th {
    padding: 0.75rem 1rem; text-align: left;
    font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    font-weight: 700; border-bottom: 2px solid var(--border-primary);
    white-space: nowrap;
}
.rpt td {
    padding: 0.65rem 1rem; border-bottom: 1px solid var(--border-primary);
    color: var(--text-secondary); line-height: 1.5; vertical-align: top;
}
.rpt tbody tr:last-child td { border-bottom: none; }
.rpt tbody tr:hover td { background: var(--surface-hover); }
.rpt td.num, .rpt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rpt td strong, .rpt tfoot td { color: var(--text-primary); font-weight: 600; }
.rpt tfoot { background: var(--surface-secondary); }
.rpt tfoot td { border-top: 2px solid var(--border-primary); font-weight: 700; padding: 0.75rem 1rem; }

/* ── Callout / Highlight Box ───────────────────────────────── */
.rpt-callout {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin: 1.25rem 0;
    font-size: 0.88rem;
    line-height: 1.7;
    border-left: 4px solid;
}
.rpt-callout.info { background: rgba(59,130,246,0.06); border-color: var(--color-primary-500); color: var(--text-secondary); }
.rpt-callout.success { background: rgba(16,185,129,0.06); border-color: var(--color-success-500); }
.rpt-callout.warning { background: rgba(245,158,11,0.06); border-color: var(--color-warning-500); }
.rpt-callout.danger { background: rgba(239,68,68,0.06); border-color: var(--color-error-500); }
.rpt-callout strong { display: block; margin-bottom: 0.25rem; color: var(--text-primary); }
.rpt-callout p { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.45; }

/* ── Verdict / Assessment Badge ────────────────────────────── */
.rpt-verdict {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; border-radius: 8px;
    font-size: 0.85rem; font-weight: 700; margin: 0.75rem 0;
}
.rpt-verdict.viable { background: rgba(16,185,129,0.12); color: var(--color-success-400); }
.rpt-verdict.caution { background: rgba(245,158,11,0.12); color: var(--color-warning-400); }
.rpt-verdict.not-viable { background: rgba(239,68,68,0.12); color: var(--color-error-400); }
.rpt-verdict::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }

/* ── Two-Column / Grid Layout ──────────────────────────────── */
.rpt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.5rem; }
.rpt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 1.5rem; }

/* ── Info Card (mini section within a grid) ────────────────── */
.rpt-card {
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.rpt-card-title {
    font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    font-weight: 700; margin-bottom: 0.5rem;
}
.rpt-card p { margin: 0.25rem 0; }

/* ── Progress / Bar ────────────────────────────────────────── */
.rpt-bar-row {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 0.5rem 0; font-size: 0.82rem;
}
.rpt-bar-label { min-width: 120px; color: var(--text-secondary); font-weight: 500; }
.rpt-bar-track {
    flex: 1; height: 8px; background: var(--surface-secondary);
    border-radius: 4px; overflow: hidden;
}
.rpt-bar-fill { height: 100%; border-radius: 4px; background: var(--color-primary-500); transition: width 0.4s ease; }
.rpt-bar-value { min-width: 48px; text-align: right; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Comparison Table (SWOT / pros-cons) ───────────────────── */
.rpt-comparison {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem; margin: 1rem 0 1.5rem;
}
.rpt-pros, .rpt-cons {
    border-radius: 10px; padding: 1rem 1.25rem;
}
.rpt-pros { background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.15); }
.rpt-cons { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.15); }
.rpt-pros .rpt-card-title { color: var(--color-success-400); }
.rpt-cons .rpt-card-title { color: var(--color-error-400); }

/* ── Timeline / Steps ──────────────────────────────────────── */
.rpt-timeline { padding-left: 2rem; border-left: 2px solid var(--border-primary); margin: 1rem 0 1.5rem; }
.rpt-timeline-item { position: relative; padding-bottom: 1.25rem; }
.rpt-timeline-item::before {
    content: '';
    position: absolute; left: -2.35rem; top: 0.25rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-primary-500); border: 2px solid var(--surface-primary);
}
.rpt-timeline-item:last-child { padding-bottom: 0; }
.rpt-timeline-label { font-weight: 700; color: var(--text-primary); font-size: 0.88rem; margin-bottom: 0.25rem; }
.rpt-timeline-desc { font-size: 0.82rem; color: var(--text-tertiary); line-height: 1.6; }

/* ── Section Divider ───────────────────────────────────────── */
.rpt hr {
    border: none; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-primary), transparent);
    margin: 2rem 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .rpt-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .rpt-grid-2, .rpt-grid-3 { grid-template-columns: 1fr; }
    .rpt-comparison { grid-template-columns: 1fr; }
    .rpt h1 { font-size: 1.4rem; }
    .rpt h2 { font-size: 1.15rem; }
    .rpt-kpi-value { font-size: 1.3rem; }
}