:root {
    --light-text-color: #202020;
    --light-muted-text-color: #aaa;
    --light-background-color: white;
    --light-overlay-background-color: white;
    --light-map-background-color: #eeeeee;
    --light-button-color: #eeeeee;
    --light-button-border-color: #bbbbbb;
    --light-pattern-color: #e8e8e8;
    --light-link-color: #4040c0;
    --light-danger-color: #e60c0c;
    --light-danger-background-color: #ffd4d4;
    --light-timeline-color: #ccc;
    --light-shadow-color: #c0c0c080;
}

:root {
    --dark-text-color: #e0e0e0;
    --dark-muted-text-color: #888;
    --dark-background-color: #202024;
    --dark-overlay-background-color: #303038;
    --dark-map-background-color: #282830;
    --dark-button-color: #303038;
    --dark-button-border-color: #505058;
    --dark-pattern-color: #303034;
    --dark-link-color: #8090cc;
    --dark-danger-color: #ff6969;
    --dark-danger-background-color: #491d1d;
    --dark-timeline-color: #777;
    --dark-shadow-color: #10101480;
}

:root:has(#color-scheme-light:checked) {
    --text-color: var(--light-text-color);
    --muted-text-color: var(--light-muted-text-color);
    --background-color: var(--light-background-color);
    --overlay-background-color: var(--light-overlay-background-color);
    --map-background-color: var(--light-map-background-color);
    --button-color: var(--light-button-color);
    --button-border-color: var(--light-button-border-color);
    --pattern-color: var(--light-pattern-color);
    --link-color: var(--light-link-color);
    --danger-color: var(--light-danger-color);
    --danger-background-color: var(--light-danger-background-color);
    --timeline-color: var(--light-timeline-color);
    --shadow-color: var(--light-shadow-color);
}

:root:has(#color-scheme-dark:checked) {
    --text-color: var(--dark-text-color);
    --muted-text-color: var(--dark-muted-text-color);
    --background-color: var(--dark-background-color);
    --overlay-background-color: var(--dark-overlay-background-color);
    --map-background-color: var(--dark-map-background-color);
    --button-color: var(--dark-button-color);
    --button-border-color: var(--dark-button-border-color);
    --pattern-color: var(--dark-pattern-color);
    --link-color: var(--dark-link-color);
    --danger-color: var(--dark-danger-color);
    --danger-background-color: var(--dark-danger-background-color);
    --timeline-color: var(--dark-timeline-color);
    --shadow-color: var(--dark-shadow-color);
}

@media(prefers-color-scheme: light) {
    :root:has(#color-scheme-auto:checked) {
        --text-color: var(--light-text-color);
        --muted-text-color: var(--light-muted-text-color);
        --background-color: var(--light-background-color);
        --overlay-background-color: var(--light-overlay-background-color);
        --map-background-color: var(--light-map-background-color);
        --button-color: var(--light-button-color);
        --button-border-color: var(--light-button-border-color);
        --pattern-color: var(--light-pattern-color);
        --link-color: var(--light-link-color);
        --danger-color: var(--light-danger-color);
        --danger-background-color: var(--light-danger-background-color);
        --timeline-color: var(--light-timeline-color);
        --shadow-color: var(--light-shadow-color);
    }
}

@media(prefers-color-scheme: dark) {
    :root:has(#color-scheme-auto:checked) {
        --text-color: var(--dark-text-color);
        --muted-text-color: var(--dark-muted-text-color);
        --background-color: var(--dark-background-color);
        --overlay-background-color: var(--dark-overlay-background-color);
        --map-background-color: var(--dark-map-background-color);
        --button-color: var(--dark-button-color);
        --button-border-color: var(--dark-button-border-color);
        --pattern-color: var(--dark-pattern-color);
        --link-color: var(--dark-link-color);
        --danger-color: var(--dark-danger-color);
        --danger-background-color: var(--dark-danger-background-color);
        --timeline-color: var(--dark-timeline-color);
        --shadow-color: var(--dark-shadow-color);
    }
}

html {
    font-family: sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

body {
    min-height: 100dvh;
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    margin: 0.5em 0;
}

.form-error {
    display: block;
    color: var(--danger-color);
    margin: 1rem;
    font-size: 0.9rem;
    font-weight: bold;
}

.gateway {
    display: flex;
    width: 100%;
    min-height: 420px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.gateway .site-icon {
    display: block;
    height: 120px;
    width: 120px;
}

#menu-head .site-icon {
    display: inline-block;
    height: 1.25em;
    width: 1.25em;
    margin-right: 0.5em;
}

.site-logo {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0 auto 2rem auto;
    clip-path: circle();
}

#menu h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

#menu-head a {
    text-decoration: none;
}

main {
    flex: 1 1 auto;
}

@media screen and (min-width: 1025px) {
    #menu-head {
        display: none;
    }

    main {
        padding: 1.5rem 3rem;
    }

    #menu-wrapper {
        background-color: var(--background-color);
        border-right: 1px solid var(--button-border-color);
        flex: 0 0 300px;
    }

    #menu-wrapper>nav {
        position: fixed;
        height: 100dvh;
        width: 300px;
        overflow: auto;
    }

    #menu {
        padding: 2rem 2rem;
    }
}

@media screen and (max-width: 1024px) {
    body {
        flex-direction: column;
    }

    #menu-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100dvw;
        z-index: 9000;
        background-color: var(--background-color);
    }

    #menu-head {
        display: flex;
        align-items: center;
        height: 3rem;
        font-size: 1.25rem;
        border-bottom: 1px solid var(--button-border-color);
    }

    #menu-head input[type=checkbox] {
        appearance: none;
        border: none;
        padding: 0.5rem 2rem 0.5rem 1rem;
    }

    #menu-head h1 {
        display: inline-block;
        margin: 0;
        font-size: 1em;
    }

    #menu-backdrop {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100dvw;
        height: 100dvh;
        z-index: 9000;
    }

    #menu {
        position: absolute;
        top: 3em;
        left: -300px;
        height: calc(100dvh - 3em);
        width: 300px;
        transition: left 0.2s;
        padding: 2rem;
        overflow: auto;
        z-index: 9001;
        background-color: var(--background-color);
    }

    #menu-wrapper:has(#menu-show:not(:checked)) #menu-backdrop {
        display: none;
    }

    #menu-wrapper:has(#menu-show:checked) #menu {
        left: 0;
        border-right: 1px solid var(--button-border-color);
        box-shadow: 10px -10px 10px var(--shadow-color);
        clip-path: inset(0 -20px 0 0);
    }

    body:has(#menu-show:checked) {
        overflow: hidden;
    }

    #menu-wrapper+main {
        margin-top: 3rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    main {
        padding: 1.5rem 2rem;
    }
}

@media screen and (max-width: 767px) {
    main {
        padding: 1.25rem 1rem;
    }
}

#color-scheme-controls input {
    margin-left: 0.5rem;
}

summary {
    cursor: pointer;
}

article.not-published {
    background-color: #e5e5f7;
    background: repeating-linear-gradient(-45deg, var(--pattern-color), var(--pattern-color) 10px, transparent 0px, transparent 20px);
}

.active-journey-list {
    margin-bottom: 2rem;
}

article.active-journey {
    padding: 0.5rem 0 2rem 0;
    border-bottom: 1px solid var(--button-border-color);
}

article.active-journey h3 {
    margin: 0 0 1rem 0;
}

.timeline article h3 a {
    text-decoration: none;
}

article.segment .read-more {
    text-transform: uppercase;
    font-size: 0.9em;
}

article.active-journey p.summary {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    font-style: italic;
}

article.active-journey .track-distance {
    font-size: 2rem;
    display: block;
}

article.active-journey .non-bicycle {
    font-size: 1.6rem;
}

article.active-journey .track-ascent,
article.active-journey .track-descent {
    font-size: 1rem;
}

.fulltext p.summary {
    margin: 1.5em 0;
    font-style: italic;
}

form.inline {
    display: inline;
}

input[type=file] {
    border: 0;
    padding: 0;
}

button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=file]::file-selector-button,
a[role=button]:not([class^=leaflet-]) {
    display: inline-block;
    color: var(--text-color);
    background-color: var(--button-color);
    border: 1px solid var(--button-border-color);
    border-radius: 0.25rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0.3rem 0.5rem;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

button.danger,
input[type=reset].danger,
input[type=button].danger,
input[type=submit].danger,
input[type=file].danger::file-selector-button,
a[role=button]:not([class^=leaflet-]).danger {
    background-color: var(--danger-background-color);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

input[type=text],
input[type=number],
input[type=date],
input[type=datetime],
input[type=password],
textarea,
select {
    border: 1px solid var(--button-border-color);
    border-radius: 0.25rem;
    font-size: 0.9rem;
}

hr {
    color: var(--button-border-color);
    margin: 2em 0;
}

.map {
    height: 400px;
    margin: 2rem 0 0.5rem 0;
}

.map-legend {
    display: block;
    list-style-type: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.map-legend li i {
  margin-right: 0.25rem;
}

.map-legend li {
    display: inline-block;
}

.map-legend li + li {
    margin-left: 1rem;
}

.gpxview {
    width: 100%;
    height: 500px;
    margin: 1rem 0;
}

.gpxview>div>.leaflet-container {
    top: 0 !important;
}

.leaflet-container {
    background: var(--map-background-color);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    color: var(--text-color);
    background: var(--background-color);
}

@media(prefers-color-scheme: dark) {

    .leaflet-control-layers,
    .leaflet-touch .leaflet-control-layers,
    .leaflet-touch .leaflet-bar,
    .leaflet-bar a,
    .leaflet-bar a:hover,
    .leaflet-bar a:focus,
    .leaflet-control-scale-line,
    .leaflet-container .leaflet-control-attribution {
        color: var(--text-color);
        background: var(--overlay-background-color);
        border-color: var(--button-border-color);
    }

    .leaflet-container .leaflet-control-attribution a {
        color: var(--link-color);
    }
}

nav ul {
    list-style-type: disc;
    padding-left: 2em;
}

p.date {
    font-size: 0.8em;
    margin: 0.5em 0;
}

p.status {
    font-size: 0.8em;
    font-weight: bold;
}

a {
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
}

a:link,
a:hover,
a:active,
a:visited {
    color: unset;
}

a:has(article) {
    display: block;
    max-width: 600px;
    text-decoration: none;
    color: var(--text-color);
    margin: 1rem 0;
}

a.back {
    display: block;
    font-size: 0.8em;
    text-transform: uppercase;
}

a.back::before {
    content: '< ';
}

article>*:first-child {
    margin-top: 0;
}

article>*:last-child {
    margin-bottom: 0;
}

ul.timeline {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.timeline>li:not(:last-child) {
    margin-bottom: 3rem;
}

ul.timeline a.source {
    display: block;
    padding: 0.2rem 0;
    margin-bottom: 0.5rem;
    font-size: 0.8em;
    text-transform: uppercase;
}

.nowrap {
    white-space: nowrap;
}

@media screen and (width >=600px) {
    ul.timeline {
        border-left: 0.25rem solid var(--timeline-color);
        padding: 0.5rem 0;
    }

    ul.timeline>li {
        min-height: 2rem;
        position: relative;
        padding-left: 2rem;
    }

    ul.timeline>li::before {
        content: "";
        position: absolute;
        left: -0.625rem;
        top: 0.3rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: var(--timeline-color);
    }

    ul.timeline>li:has(> a.source:first-child)::before {
        top: 2.4rem;
    }
}

picture.thumb,
picture.thumb img {
    height: 160px;
    width: auto;
}

@media screen and (max-width: 1024px) {
    picture.thumb,
    picture.thumb img {
        height: 240px;
        width: 240px;
        object-fit: cover;
    }
}

html[data-show-overlay] {
    overflow: hidden;
}

#image-viewer {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    z-index: 9010;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
}

html[data-show-overlay] #image-viewer {
    display: block;
}

.image-viewer-control {
    display: inline-block;
    line-height: 1;
    background: #00000080;
    color: white;
    text-align: center;
    vertical-align: middle;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
    cursor: pointer;
    user-select: none;
}

@media screen and (max-width: 767px) {
    .image-viewer-control {
        font-size: 1rem;
        padding: 1rem 0.75rem;
    }
}

.image-viewer-control:hover,
.image-viewer-control:active {
    background: #000000c0;
    color: #fff;
}

#image-viewer-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9011;
}

#image-viewer-prev {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 9011;
}

#image-viewer-next {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 9011;
}

#image-viewer img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

#toast-rack:empty {
    display: none;
}

.track-metrics {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
}

.track-distance {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1.1em;
    margin: 0.25rem 0;
}

.track-ascent,
.track-descent {
    display: inline-block;
    font-size: 0.9rem;
}

.non-bicycle {
  font-size: 1.2rem;
  color: var(--muted-text-color);
}

.track {
    width: 5.5rem;
    height: 5.5rem;
}

article > .segment-counters {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 1rem 0;
}

article > .segment-counters > span {
  display: block;
}

.timeline article>h3 {
    margin: 0;
}

article.segment header {
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    overflow-x: auto;
}

.segment-details {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

@media screen and (width < 500px) {

    article.segment header,
    .segment-details {
        gap: 1.5rem;
    }
}

.segment td {
    padding: 0.25rem 0;
}

.segment-ends {
    font-size: 0.9rem;
    white-space: nowrap;
}

.segment-ends .prefix {
    text-align: right;
    padding-right: 1rem;
}

.segment-ends img {
    height: 1.5em;
    width: auto;
    margin-right: 0.25rem;
}

.segment-indicators {
    display: inline-flex;
    gap: 1rem;
    margin: -0.5rem 0;
    font-size: 2rem;
    line-height: 1;
}

@media screen and (max-width: 767px) {
  .segment-indicators {
    gap: 0.75rem;
    font-size: 1.5rem;
  }
}

.ratings-table {
  margin: 0;
}

.ratings-table tr td:first-child {
  font-weight: 700;
  padding-right: 1.5rem;
}

.ratings-table tr td:nth-child(2) {
  letter-spacing: 0.25rem;
}

.buttons {
    margin: 0.5rem 0;
}

.comment {
    font-size: 0.8rem;
    margin: 0 0.25rem;
}

.album:empty,
.album:-moz-only-whitespace {
    display: none;
}

.album {
    display: flex;
    gap: 0.5rem;
}

article.fulltext .album {
    margin: 1rem 0;
}

article.segment .album:not(last-child) {
    margin: 1rem 0;
}

@media screen and (max-width: 1024px) {
    .album {
        position: relative;
        overflow-x: auto;
    }
}

@media screen and (min-width: 1025px) {
    .album {
        flex-wrap: wrap;
    }
}

nav.pagination {
    width: calc(min(100%, 600px));
    margin: 2rem 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9em;
}

.content img {
    max-width: 100%;
    height: auto;
}

.reactions {
    margin: 1rem -0.25rem;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}

.reactions:has(+.comment-count) {
    margin-bottom: 0.25rem;
}

.reactions form {
    border: 1px solid transparent;
    padding: 0.25rem;
}

.reactions span.count {
    margin-right: 0.25rem;
}

.reactions form.my-reaction {
    border-color: var(--button-border-color);
    font-weight: bold;
    border-radius: 0.5rem;
}

.reactions form.zero {
    filter: saturate(0);
}

.comment-count {
    margin-bottom: 1rem;
}

.reactions form input[type=submit],
.comment-count a[role=button] {
    border: 0;
    background-color: unset;
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.1;
}

.comments {
    margin-top: 1rem;
    border-top: 1px solid var(--button-border-color);
    padding-top: 0.5rem;
}

.comments h2 {
    font-size: 100%;
    margin: 0.75rem 0 1.25rem 0;
}

.comments form {
    margin: 1.5rem 0;
}

.comments form:first-child {
    margin-top: 0;
}

.comments ul {
    list-style-type: none;
    padding: 0;
}

.comments ul li {
    margin: 0;
}

.comments ul li+li {
    margin-top: 0.5rem;
}

.comments li input[type=submit] {
    border: 0;
    background-color: unset;
    padding: 0;
    margin: 0 0 0 0.5rem;
    font-size: 110%;
    line-height: 1.1;
}

.comments .commenter-name {
    font-weight: bold;
    margin-right: 1rem;
}

.comments form p {
    margin-bottom: 0.25rem;
    font-size: 90%;
}

.comments form textarea {
    display: block;
    width: calc(min(100%, 500px));
    margin-bottom: 0.5rem;
}