:root {
    color-scheme: light;
    --forest: #1b3a32;
    --forest-deep: #10241f;
    --cream: #f4efe6;
    --paper: #fffdf8;
    --ink: #1c1a17;
    --muted: #6f6a62;
    --line: #e4ddd0;
    --coral: #e15b3a;
    --coral-dark: #c4472a;
    --good: #1f7a4d;
    --good-bg: #e5f6ec;
    --warn: #8a5a12;
    --warn-bg: #fff1d6;
    --bad: #8d2b2b;
    --bad-bg: #fde8e4;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 10% 0, rgba(27, 58, 50, .08), transparent 28rem),
        #e7e1d6;
    color: var(--ink);
    font-family: "Avenir Next", "Segoe UI", sans-serif;
    line-height: 1.45;
}

a {
    color: var(--forest);
}

.shell {
    max-width: 32rem;
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 1px rgba(27, 58, 50, .08);
}

.topbar {
    background:
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .08), transparent 42%),
        linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
    color: #f6f1e7;
    padding: 1.05rem 1.15rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.brand {
    color: inherit;
    text-decoration: none;
    font-family: Palatino, "Iowan Old Style", Georgia, serif;
    font-size: 1.45rem;
    letter-spacing: -.02em;
}

.top-sign-out {
    margin: 0;
}

.top-sign-out button {
    background: transparent;
    color: #f6f1e7;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font: inherit;
    font-size: .82rem;
    padding: .35rem .7rem;
    cursor: pointer;
}

main {
    padding: 1rem 1.05rem 1.5rem;
    flex: 1;
}

h1, h2, h3 {
    font-family: Palatino, "Iowan Old Style", Georgia, serif;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 .35rem;
}

h1 {
    font-size: 1.85rem;
    line-height: 1.1;
}

h2 {
    font-size: 1.05rem;
    margin: 1rem 0 .7rem;
}

p {
    margin: .2rem 0 .55rem;
}

.lede, .hint, .fine, .next, small {
    color: var(--muted);
}

.lede {
    margin-top: 0;
}

.back {
    margin: 0 0 .55rem;
}

.back a {
    text-decoration: none;
    font-weight: 750;
}

.signup-prompt {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .75rem .9rem;
}

.signup-prompt a {
    font-weight: 750;
}

.search, .signup {
    display: grid;
    gap: .45rem;
    margin: .8rem 0 1rem;
}

.search {
    grid-template-columns: 1fr auto;
}

.segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .2rem;
    margin: .2rem 0 .8rem;
}

.segment a {
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
    padding: .45rem .6rem;
    font-weight: 750;
    color: var(--ink);
}

.segment a[aria-current="true"] {
    background: var(--forest);
    color: #f6f1e7;
}

.near-me {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--forest);
    font: inherit;
    font-weight: 750;
    padding: .7rem .85rem;
    cursor: pointer;
    white-space: nowrap;
}

.near-me.button {
    border: 0;
    background: var(--coral);
    color: white;
}

.near-me.is-on {
    background: var(--forest);
    color: #f6f1e7;
    border-color: var(--forest);
}

#water-map {
    height: min(22rem, 52vh);
    min-height: 16rem;
    border-radius: 16px;
    border: 1px solid var(--line);
    margin: .2rem 0 .6rem;
}

.map-summary {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .85rem .9rem .95rem;
    margin: 0 0 1rem;
}

.map-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

#map-summary-bell,
#map-summary-bell form {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
}

.bell-label {
    font-size: .82rem;
    font-weight: 750;
    color: var(--forest);
}

.map-summary h2 {
    margin-bottom: .15rem;
}

.search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.search-field {
    position: relative;
    min-width: 0;
}

.search-x {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1;
}

.search input,
.signup input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 999px;
    padding: .75rem 1rem;
    font: inherit;
    font-size: 16px;
    color: inherit;
}

.search button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--coral);
    color: white;
    text-decoration: none;
    font: inherit;
    font-weight: 650;
    padding: .75rem 1rem;
    cursor: pointer;
}

.button:hover,
.search button:hover {
    background: var(--coral-dark);
}

[hidden] {
    display: none !important;
}

.button.ghost,
.search button.ghost,
button.ghost {
    background: transparent;
    color: var(--forest);
    border: 1px solid var(--line);
}

.search button.small,
button.small {
    grid-column: 1 / -1;
    justify-self: start;
    padding: .4rem .85rem;
    font-size: .88rem;
}

.button.wide {
    width: 100%;
}

.hp {
    position: absolute;
    left: -10000px;
    height: 0;
    overflow: hidden;
}

.lake-list,
.history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.lake-list li,
.history li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .75rem .85rem;
}

.lake-list li {
    display: grid;
    gap: .35rem;
}

.lake-row {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    text-decoration: none;
    color: inherit;
}

.lake-row strong {
    display: block;
}

.miles {
    font-style: normal;
    font-weight: 750;
    color: var(--forest);
    white-space: nowrap;
}

.locate {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .9rem 1rem .4rem;
    margin: 0 0 .9rem;
}

.locate h2 {
    margin-bottom: .2rem;
}

.place-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .8rem;
    margin: 0 0 .6rem;
}

.place-switch a {
    font-weight: 750;
    text-decoration: none;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    margin: .2rem 0 .6rem;
}

.lake-row small,
.next {
    display: block;
}

.directions {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.pin,
.bell svg {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.water-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.bell {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--forest);
    display: grid;
    place-items: center;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}

.bell svg {
    width: 1.35rem;
    height: 1.35rem;
}

.bell.is-on {
    background: var(--forest);
    color: #f6f1e7;
    border-color: var(--forest);
}

.bell-form {
    margin: 0;
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .45rem;
}

.card-top .lake-row {
    flex: 1;
    min-width: 0;
}

.toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(4.4rem + env(safe-area-inset-bottom));
    z-index: 20;
    width: min(30rem, calc(100% - 1.4rem));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    background: var(--forest);
    color: #f6f1e7;
    border-radius: 14px;
    padding: .7rem .85rem;
    box-shadow: 0 8px 24px rgba(27, 58, 50, .25);
}

.toast p {
    margin: 0;
    font-weight: 650;
}

.toast form {
    margin: 0;
}

.toast button {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    font: inherit;
    font-weight: 750;
    padding: .3rem .75rem;
    cursor: pointer;
}

.history {
    margin-bottom: .8rem;
}

.when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
}

.chip {
    font-style: normal;
    font-size: .75rem;
    font-weight: 750;
    border-radius: 999px;
    padding: .1rem .5rem;
}

.chip.upcoming {
    background: var(--warn-bg);
    color: var(--warn);
}

.note {
    background: var(--warn-bg);
    color: var(--warn);
    border-radius: 14px;
    padding: .7rem .85rem;
}

.source a {
    font-weight: 700;
}

.sort {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .8rem;
    margin: .2rem 0 .8rem;
}

.sort a {
    font-weight: 700;
    text-decoration: none;
}

.sort a[aria-current="true"] {
    text-decoration: underline;
}

.text-button {
    background: none;
    border: 0;
    color: var(--forest);
    font: inherit;
    padding: .2rem 0;
    cursor: pointer;
    text-decoration: underline;
}

.view-switch {
    margin: 0 0 .6rem;
}

.view-switch a {
    font-weight: 750;
    text-decoration: none;
}

.empty {
    background: var(--paper);
    border-radius: 14px;
    padding: .8rem .9rem;
}

.form-error {
    color: var(--bad);
    margin: 0;
}

#water-map {
    height: min(22rem, 52vh);
    min-height: 16rem;
    border-radius: 16px;
    border: 1px solid var(--line);
    margin: .4rem 0 .6rem;
}

.legal {
    padding: .2rem 1.05rem 5.2rem;
    color: var(--muted);
    font-size: .82rem;
}

.tabbar {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: var(--paper);
    border-top: 1px solid var(--line);
}

.tabbar a {
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    font-weight: 650;
    font-size: .82rem;
    padding: .85rem .25rem calc(.85rem + env(safe-area-inset-bottom));
}

.ad-slot:empty {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
}

li.ad-slot:empty {
    display: none;
}

.active-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .7rem;
}

a.clear-search {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .15rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--forest);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
}

h1:focus {
    outline: none;
}