/* Page-specific styles after shared-theme refactor. */
.hero { color:white; margin-bottom:22px; }
.hero h1 { font-size:44px; margin:0 0 6px; letter-spacing:-.04em; }
.hero p { margin:0; opacity:.88; }

.cards {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
    margin-bottom:18px;
}

.card,
.chart-card {
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.45);
    border-radius:24px;
    box-shadow:var(--shadow);
}

.card {
    padding:24px;
    position:relative;
    overflow:hidden;
}

.card::before {
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:7px;
    background:#10b981;
}

.card.normal::before { background:#10b981; }
.card.action::before { background:var(--action); }
.card.minor::before { background:var(--minor); }
.card.flood::before { background:var(--flood); }
.card.moderate::before { background:var(--moderate); }
.card.major::before { background:var(--major); }
.card.unknown::before { background:#94a3b8; }

.label {
    color:var(--muted);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.value {
    font-size:52px;
    line-height:1;
    margin:12px 0 6px;
    font-weight:900;
    letter-spacing:-.04em;
}

.unit { font-size:18px; color:var(--muted); }
.met.status-pill {
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:8px 12px;
    font-weight:800;
    font-size:14px;
    margin-top:12px;
}

.status-pill.normal { background:#dcfce7; color:#166534; }
.status-pill.action { background:#fef9c3; color:#854d0e; }
.status-pill.minor { background:#ffedd5; color:#9a3412; }
.status-pill.flood,
.status-pill.moderate { background:#fee2e2; color:#991b1b; }
.status-pill.major { background:#fae8ff; color:#86198f; }
.status-pill.unknown { background:#e2e8f0; color:#334155; }

.mini-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:16px;
}

.mini-stats div,
.stat {
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 8px;
    text-align:center;
}

.mini-stats strong {
    display:block;
    font-size:18px;
}

.mini-stats span {
    display:block;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}

.trend {
    font-size:34px;
    font-weight:900;
    margin:14px 0 4px;
}

.trend.rising { color:#dc2626; }
.trend.falling { color:#2563eb; }
.trend.steady { color:#475569; }

.estimate-box {
    margin-top:16px;
    padding:14px;
    border-radius:16px;
    background:#eef6ff;
    border:1px solid #bfdbfe;
}

.estimate-box strong {
    display:block;
    font-size:24px;
    margin-top:4px;
}

.estimate-box span {
    color:#475569;
    font-size:13px;
}

.estimate-target {
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    font-size:13px;
    color:#475569;
}

.estimate-target input {
    width:72px;
    border:1px solid #bfdbfe;
    border-radius:8px;
    padding:5px 7px;
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

.estimate-target button {
    padding:6px 10px;
    font-size:12px;
    background:#0f766e;
    color:white;
}

.chart-card {
    padding:22px;
    margin-bottom:18px;
}

.chart-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
}

.chart-head h2 { margin:0; font-size:26px; letter-spacing:-.03em; }
.buttons { display:flex; gap:8px; flex-wrap:wrap; }

button {
    border:0;
    border-radius:999px;
    padding:9px 14px;
    cursor:pointer;
    background:#e2e8f0;
    color:#0f172a;
    font-weight:800;
}

button.active { background:#0f766e; color:white; }

button:focus-visible,
input:focus-visible {
    outline:3px solid #0284c7;
    outline-offset:2px;
}

.chart-wrap {
    height:390px;
    margin-left:-8px;
    margin-right:-8px;
}

.legend-title {
    font-weight:900;
    margin-bottom:10px;
    color:#334155;
    margin-top:20px;
}

.stage-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.stage {
    text-align:center;
    padding:12px 8px;
    border-radius:14px;
    border-bottom:5px solid;
}

.stage strong { display:block; font-size:26px; }
.stage span { font-size:13px; color:#334155; }
.stage.action { background:#fffbea; border-color:var(--action); }
.stage.minor { background:#fff7ed; border-color:var(--minor); }
.stage.moderate { background:#fef2f2; border-color:var(--moderate); }
.stage.major { background:#faf5ff; border-color:var(--major); }

.flood-note { margin-top:12px; font-size:14px; color:#475569; }

.stats {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
    margin-top:16px;
}

.stat strong { display:block; font-size:22px; }
.stat span { color:var(--muted); font-size:13px; }

.source {
    margin-top:14px;
    color:rgba(255,255,255,.82);
    font-size:13px;
}

.source .flood-table {
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.flood-table th,
.flood-table td {
    text-align:left;
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.flood-table th {
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:800;
}

.flood-table tbody tr:hover { background:#f8fafc; }
.flood-table .pending { color:#dc2626; font-weight:700; }

@media (max-width:700px) {
    .hero h1 { font-size:34px; }
    .chart-head { align-items:flex-start; flex-direction:column; }
    .stage-grid { grid-template-columns:repeat(2,1fr); }
    .chart-wrap { height:340px; margin-left:-10px; margin-right:-10px; }
}

.card,.chart-card{background:linear-gradient(180deg,var(--glass-strong),var(--glass))}