/*
 * Public past-24-hour rainfall utility.
 *
 * Activity-log note:
 *     This stylesheet is presentation-only. Source-refresh diagnostics belong
 *     in RainfallController; ordinary public page views remain unlogged.
 */
.rainfall-page {
    width: min(980px, calc(100% - 32px));
    margin: 28px auto 46px;
}

.rainfall-page__header,
.rainfall-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #c8ced8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.rainfall-page__header {
    padding: 22px 24px;
    margin-bottom: 16px;
}

.rainfall-page__header h1 {
    margin: 0 0 8px;
    color: var(--wwd-colour-dark-blue, #213663);
}

.rainfall-page__header p,
.rainfall-card__footer p {
    margin: 0;
    line-height: 1.5;
}

.rainfall-page__notice {
    margin: 0 0 16px;
    padding: 12px 15px;
    border-radius: 6px;
}

.rainfall-page__notice--warning {
    background: #fff4d6;
    border: 1px solid #d1a63e;
    color: #4d3909;
}

.rainfall-card {
    overflow: hidden;
}

.rainfall-table-wrap {
    overflow-x: auto;
}

.rainfall-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.rainfall-table th,
.rainfall-table td {
    padding: 13px 15px;
    border-bottom: 1px solid #dfe3e8;
    text-align: left;
    vertical-align: middle;
}

.rainfall-table thead tr:first-child th {
    background: var(--wwd-colour-dark-blue, #213663);
    color: #fff;
    border-bottom-color: #6075a0;
}

.rainfall-table__units th {
    padding-top: 7px;
    padding-bottom: 7px;
    background: #e8ecf4;
    color: #213663;
    font-size: 0.88rem;
}

.rainfall-table tbody tr:nth-child(even) {
    background: #f5f7fa;
}

.rainfall-table tbody tr:hover {
    background: #edf2fb;
}

.rainfall-table tbody th {
    color: #17294f;
    font-weight: 700;
}

.rainfall-table__amount {
    font-size: 1.08rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rainfall-table__unavailable,
.rainfall-card__empty {
    color: #626b78;
    font-style: italic;
}

.rainfall-card__empty {
    margin: 0;
    padding: 24px;
}

.rainfall-card__footer {
    padding: 16px 18px;
    background: #eef1f5;
    border-top: 1px solid #d2d7df;
    font-size: 0.92rem;
}

.rainfall-card__footer p + p {
    margin-top: 8px;
}

.rainfall-card__footer a {
    color: var(--wwd-colour-dark-blue, #213663);
    font-weight: 700;
}

@media (max-width: 700px) {
    .rainfall-page {
        width: min(100% - 18px, 980px);
        margin-top: 14px;
    }

    .rainfall-page__header {
        padding: 17px 16px;
    }

    .rainfall-table th,
    .rainfall-table td {
        padding: 11px 10px;
    }

    .rainfall-table th:last-child,
    .rainfall-table td:last-child {
        min-width: 150px;
    }
}