.eh-flood {
    font-family: inherit;
}
.eh-flood__hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.eh-flood__hero h2 {
    margin: 0 0 .25rem;
}
.eh-flood__hero p {
    margin: 0;
    color: #666;
}
.eh-flood__updated {
    color: #666;
    font-size: .88rem;
    white-space: nowrap;
}
.eh-flood__status {
    border: 1px solid #ddd;
    border-left-width: 6px;
    border-radius: 6px;
    padding: .9rem 1rem;
    margin: 1rem 0;
}
.eh-flood__status strong,
.eh-flood__status span {
    display: block;
}
.eh-flood__status span {
    margin-top: .2rem;
}
.eh-flood__status.is-clear {
    border-left-color: #45845c;
    background: #f3faf5;
}
.eh-flood__status.is-alert {
    border-left-color: #d6a300;
    background: #fffbec;
}
.eh-flood__status.is-warning {
    border-left-color: #d96700;
    background: #fff6ed;
}
.eh-flood__status.is-severe {
    border-left-color: #b42318;
    background: #fff2f0;
}
.eh-flood__warnings {
    display: grid;
    gap: .8rem;
}
.eh-flood-warning {
    border: 1px solid #ddd;
    border-left-width: 6px;
    border-radius: 6px;
    padding: 1rem;
    background: #fff;
}
.eh-flood-warning.is-alert {
    border-left-color: #d6a300;
}
.eh-flood-warning.is-warning {
    border-left-color: #d96700;
}
.eh-flood-warning.is-severe {
    border-left-color: #b42318;
}
.eh-flood-warning__badge {
    display: inline-block;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: .35rem;
}
.eh-flood-warning h3 {
    margin: 0 0 .5rem;
}
.eh-flood-warning__message p {
    margin: .45rem 0;
}
.eh-flood-warning__time {
    margin-top: .65rem;
    color: #666;
    font-size: .82rem;
}
.eh-flood__surface-note {
    border: 1px solid #d8d8d8;
    padding: .85rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
}
.eh-flood__levels {
    margin-top: 1.4rem;
}
.eh-flood__section-head h3 {
    margin-bottom: .25rem;
}
.eh-flood__section-head p {
    margin-top: 0;
    color: #666;
}
.eh-flood__station-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .8rem;
}
.eh-flood-station {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: .9rem;
}
.eh-flood-station__top {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}
.eh-flood-station h4 {
    margin: 0;
}
.eh-flood-station__river,
.eh-flood-station__distance,
.eh-flood-station__range,
.eh-flood-station__time {
    color: #666;
    font-size: .82rem;
}
.eh-flood-station__distance {
    white-space: nowrap;
}
.eh-flood-station__reading {
    margin: .8rem 0 .35rem;
}
.eh-flood-station__reading strong {
    font-size: 1.6rem;
}
.eh-flood-station__reading span {
    margin-left: .2rem;
}
.eh-flood-station__reading.is-missing {
    color: #666;
    font-size: .9rem;
}
.eh-flood__range-note {
    color: #666;
    font-size: .82rem;
}
.eh-flood__cleared {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: .8rem 0;
    margin-top: 1rem;
}
.eh-flood__cleared summary {
    cursor: pointer;
    font-weight: 700;
}
.eh-flood__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .75rem;
    margin-top: 1.2rem;
}
.eh-flood__actions a {
    display: block;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: .9rem 1rem;
    color: inherit !important;
    text-decoration: none !important;
}
.eh-flood__actions a:hover,
.eh-flood__actions a:focus {
    border-color: #999;
}
.eh-flood__actions strong,
.eh-flood__actions span {
    display: block;
}
.eh-flood__actions span {
    margin-top: .2rem;
    color: #666;
    font-size: .86rem;
}
.eh-flood__emergency {
    border-top: 1px solid #ddd;
    margin-top: 1.2rem;
    padding-top: 1rem;
}
.eh-flood__emergency h3 {
    margin-bottom: .3rem;
}
.eh-flood__emergency p {
    margin-top: 0;
}
.eh-flood__footer {
    border-top: 1px solid #ddd;
    margin-top: 1rem;
    padding-top: .75rem;
    color: #666;
    font-size: .8rem;
}
@media (max-width: 720px) {
    .eh-flood__hero {
        display: block;
    }
    .eh-flood__updated {
        margin-top: .45rem;
        white-space: normal;
    }
    .eh-flood__station-grid,
    .eh-flood__actions {
        grid-template-columns: 1fr;
    }
}