html, body {
	background-color:#333;
}

body, button {
	color:white;
	font-family: "Fira Sans", sans-serif;
	font-size:1em;
}

[hidden] {
    display: none !important;
}

.formInput,
.formSelect {
    height: 40px;

    padding: 0 12px;

    color: #ddd;
    font: inherit;
    font-size: 14px;

    background: #242424;

    border: 1px solid #3a3a3a;
    border-radius: 7px;

    outline: none;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.formInput::placeholder {
    color: #707070;
}

.formInput:hover,
.formSelect:hover {
    border-color: #484848;
}

.formInput:focus,
.formSelect:focus {
    background: #272727;
    border-color: #4f86c6;

    box-shadow:
        0 0 0 3px rgba(79, 134, 198, .12);
}

.formInput:disabled,
.formSelect:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.inputGroup {
    position: relative;
    display: block;
}

.inputGroup > i {
    position: absolute;
    top: 50%;
    left: 13px;

    z-index: 1;

    color: #6f6f6f;
    font-size: 13px;

    pointer-events: none;

    transform: translateY(-50%);
}

.inputGroup > .formInput {
    width: 100%;
    padding-left: 36px;
}

.formCheckbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #aaa;
    font-size: 13px;

    cursor: pointer;
    user-select: none;
}

.formCheckbox input {
    width: 16px;
    height: 16px;
    margin: 0;

    accent-color: #4f86c6;

    cursor: pointer;
}

.formCheckbox:hover {
    color: #ddd;
}

/* =========================================================
   Buttons
   ========================================================= */

.button,
.primaryButton,
.secondaryButton,
.dangerButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 14px;

    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    border: 1px solid transparent;
    border-radius: 7px;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        opacity .15s ease,
        transform .1s ease;
}


/* Primary */

.primaryButton {
    color: #fff;

    background: #477fbd;
    border-color: #568dca;
}

.primaryButton:hover {
    background: #528bc9;
    border-color: #6398d2;
}

.primaryButton:active {
    transform: translateY(1px);
}

.downloadButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: fit-content;
    padding: 10px 16px;

    color: #fff;
    text-decoration: none;
    white-space: nowrap;

    font-weight: 500;

    cursor: pointer;
}

.downloadButton:visited,
.downloadButton:hover,
.downloadButton:focus {
    color: #fff;
    text-decoration: none;
}

.downloadButton i {
    font-size: 14px;
}


/* Secondary */

.secondaryButton {
    color: #bbb;

    background: #2b2b2b;
    border-color: #414141;
}

.secondaryButton:hover {
    color: #eee;

    background: #333;
    border-color: #505050;
}

.secondaryButton:active {
    transform: translateY(1px);
}


/* Danger */

.dangerButton {
    color: #e6a09a;

    background: rgba(177, 61, 50, .12);
    border-color: rgba(177, 61, 50, .35);
}

.dangerButton:hover {
    color: #f0b0aa;

    background: rgba(177, 61, 50, .2);
    border-color: rgba(177, 61, 50, .5);
}


/* Disabled */

.button:disabled,
.primaryButton:disabled,
.secondaryButton:disabled,
.dangerButton:disabled {
    opacity: .45;

    cursor: not-allowed;
    transform: none;
}


/* Icons */

.button i,
.primaryButton i,
.secondaryButton i,
.dangerButton i {
    font-size: 12px;
}

.buttonSmall {
    min-height: 32px;
    padding: 0 10px;

    font-size: 12px;
    border-radius: 6px;
}

.buttonIcon {
    width: 38px;
    padding: 0;
}

/* =========================================================
   SITE LAYOUT
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

.siteLayout {
    min-height: 100dvh;
    display: flex;
}

.siteContent {
    flex: 1;
    min-width: 0;

    padding: 30px;

    background: #333;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.mobileHeader,
.sidebarBackdrop,
.sidebarClose {
    display: none;
}


.siteSidebar {
    position: sticky;
    top: 0;

    flex: 0 0 270px;
    width: 270px;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    background: #181818;
    border-right: 1px solid #3a3a3a;
}


/* Logo */

.sidebarHeader {
    flex: 0 0 auto;

    padding: 22px 20px;

    border-bottom: 1px solid #303030;
}

.sidebarLogo {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #fff;
    text-decoration: none;
}

.sidebarLogoMark {
    width: 38px;
    height: 38px;
}

.sidebarLogoText {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.sidebarLogoText strong {
    font-size: 18px;
    letter-spacing: .03em;
}

.sidebarLogoText span {
    margin-top: 3px;

    color: #888;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}


/* Main sidebar area */

.sidebarPrimary {
    flex: 1 1 auto;

    padding: 20px 16px;

    overflow-y: auto;
}

.pageHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 24px;
}

.pageHeaderMain {
    min-width: 0;
}

.pageTitle {
    margin: 0;

    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
}

.pageDescription {
    margin: 6px 0 0;

    color: #888;
    font-size: 14px;
    line-height: 1.4;
}

.pageHeaderActions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 700px) {
    .pageHeader {
        align-items: flex-start;
        flex-direction: column;

        gap: 14px;
        margin-bottom: 20px;
    }

    .pageTitle {
        font-size: 24px;
    }

    .pageHeaderActions {
        width: 100%;
    }
}


/* =========================================================
   RANDOMIZER
   ========================================================= */

.sidebarRandomizer {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 15px 16px;

    border: 1px solid #679cf5;
    border-radius: 9px;

    background: #4c8bf5;
    color: #fff;

    text-align: left;

    cursor: pointer;

    transition:
        background .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.sidebarRandomizer:hover {
    background: #679cf5;

    transform: translateY(-1px);

    box-shadow: 0 5px 14px rgba(0, 0, 0, .25);
}

.sidebarRandomizer > i {
    width: 26px;

    font-size: 21px;
    text-align: center;
}

.sidebarRandomizer span {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebarRandomizer strong {
    font-size: 15px;
}

.sidebarRandomizer small {
    color: rgba(255, 255, 255, .75);

    font-size: 11px;
    font-weight: 400;
}


/* =========================================================
   CURRENT ACTIVITY
   ========================================================= */

.sidebarActivity {
    margin-top: 28px;
}

.sidebarSectionTitle {
    margin: 0 8px 9px;

    color: #777;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sidebarActivityCard {
    width: 100%;

    overflow: hidden;

    display: block;

    padding: 0;

    border: 1px solid #383838;
    border-radius: 9px;

    background: #222;
    color: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.sidebarActivityCard:hover {
    border-color: #555;
    background: #272727;

    transform: translateY(-1px);
}

.sidebarActivityImage {
    --side-route-art: none;

    position: relative;

    height: 75px;

    background-image: var(--side-route-art);
    background-size: cover;
    background-position: center;
}

.sidebarActivityImageShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(20, 20, 20, .2),
            rgba(20, 20, 20, .9)
        );
}

.sidebarActivityStatus {
    position: absolute;
    left: 12px;
    bottom: 9px;

    display: flex;
    align-items: center;
    gap: 6px;

    color: #ccc;

    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sidebarActivityStatusCompleted i {
    color: #6fcf97;
    font-size: 11px;
    font-weight: 700;
}

.sidebarActivityDot {
    position: relative;

    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #6fcf97;
}

.sidebarActivityDot::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;
    background: #6fcf97;

    animation: activityPulse 2s ease-out infinite;
}

@keyframes activityPulse {
    0% {
        transform: scale(1);
        opacity: .65;
    }

    70% {
        transform: scale(2.5);
        opacity: 0;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.sidebarActivityBody {
    padding: 12px 13px 13px;
}

.sidebarActivityRoute {
    display: block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    margin-bottom: 10px;

    color: #ddd;

    font-size: 13px;
    font-weight: 500;
}

.sidebarActivityName {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    line-clamp: 2;
    line-height: 1.25;

    margin-bottom: 2px;

    color: #fff;

    font-size: 15px;
    font-weight: 600;
}

.sidebarActivityMeta {
    display: block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #888;

    font-size: 12px;
}

.sidebarActivityFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 13px;
    padding-top: 10px;

    border-top: 1px solid #333;

    color: #777;

    font-size: 11px;
}

.sidebarActivityFooter span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebarActivityEmpty {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px;

    border: 1px solid #333;
    border-radius: 9px;

    background: #202020;
}

.sidebarActivityEmptyIcon {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #666;
    font-size: 18px;
}

.sidebarActivityEmpty > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebarActivityEmpty strong {
    color: #bbb;
    font-size: 13px;
}

.sidebarActivityEmpty span {
    color: #777;
    font-size: 11px;
    line-height: 1.35;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.sidebarNav {
    display: flex;
    flex-direction: column;

    gap: 3px;

    margin-top: 25px;
}

.sidebarNavItem {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 44px;

    padding: 0 13px;

    border-radius: 7px;

    color: #aaa;

    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    transition:
        color .15s ease,
        background .15s ease;
}

.sidebarNavItem > i {
    width: 19px;

    color: #777;

    text-align: center;
}

.sidebarNavItem:hover {
    background: #252525;
    color: #fff;
}

.sidebarNavItem:hover > i {
    color: #aaa;
}

.sidebarNavItem.active {
    background: #292929;
    color: #fff;
}

.sidebarNavItem.active > i {
    color: #6fa5ff;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.sidebarBottom {
    flex: 0 0 auto;

    padding: 12px 16px 18px;

    border-top: 1px solid #303030;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    body {
        overflow-x: hidden;
    }

    body.sidebarOpen {
        overflow: hidden;
    }

    /*
     * Mobile top bar
     */
    .mobileHeader {
        position: sticky;
        top: 0;
        z-index: 900;

        height: 58px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 16px;

        background: #181818;
        border-bottom: 1px solid #303030;
    }

    .mobileLogo {
        display: flex;
        align-items: center;
        gap: 9px;

        color: #fff;
        text-decoration: none;
    }

    .mobileLogo img {
        width: 29px;
        height: 29px;
        object-fit: contain;
    }

    .mobileLogo strong {
        font-size: 14px;
        letter-spacing: .03em;
    }

    .mobileMenuButton,
    .sidebarClose {
        width: 40px;
        height: 40px;

        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;
        background: transparent;

        color: #aaa;
        font-size: 20px;

        cursor: pointer;
    }

    .mobileMenuButton {
        display: flex;
    }


    /*
     * Sidebar becomes drawer
     */
    .siteSidebar {
        position: fixed;
        top: 0;
        left: 0;

        z-index: 1100;

        width: min(320px, 88vw);
        height: 100dvh;

        transform: translateX(-100%);

        box-shadow: 8px 0 30px rgba(0, 0, 0, .35);

        transition: transform .25s ease;
    }

    .siteSidebar.mobileOpen {
        transform: translateX(0);
    }


    /*
     * Sidebar header
     */
    .sidebarHeader {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sidebarClose {
        display: flex;
        flex: 0 0 auto;
    }


    /*
     * Darken page behind drawer
     */
    .sidebarBackdrop {
        position: fixed;
        inset: 0;

        z-index: 1000;

        background: rgba(0, 0, 0, .65);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    .sidebarBackdrop.visible {
        display: block;
        opacity: 1;
        visibility: visible;
    }


    /*
     * Main content now gets full width
     */
    .siteLayout {
        display: block;
        min-height: calc(100dvh - 58px);
    }

    .siteContent {
        width: 100%;
        padding: 20px 16px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .sidebarActivityDot::after {
        animation: none;
    }
}


/* ===== Popup ===== */

.popupOverlay {
	position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(0, 0, 0, 0.65);

    z-index: 1000;
}
.popupPanel {
    width: min(1100px, 100%);
    max-height: calc(100dvh - 60px);

    background: #222;
    border: 1px solid #444;
    border-radius: 14px;

    overflow: hidden;
}
.popupView {
    max-height: calc(100dvh - 60px);
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}
.popupHeader {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 24px;

    border-bottom: 1px solid #3a3a3a;
}
.popupHeader h2 {
    margin: 0;
}
.popupHeader p {
    margin: 5px 0 0;

    color: #aaa;
    font-size: 0.9rem;
}
.popupClose {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    background: none;

    color: #aaa;
    font-size: 1.25rem;

    cursor: pointer;
}

.popupClose:hover {
    color: #fff;
}
.popupContent {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 20px 24px;

    background: #181818;
}

.popupActions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 18px 24px;

    border-top: 1px solid #3a3a3a;

    background: #222;
}

.popupActionPrimary {
    padding: 12px 22px;

    border: 1px solid #4c8bf5;
    border-radius: 7px;

    background: #4c8bf5;
    color: #fff;

    font-size: 1rem;
    font-weight: bold;

    cursor: pointer;
}

.popupActionPrimary:hover {
    background: #679cf5;
}

.popupActionPrimary:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.popupActionSecondary {
    padding: 8px 0;

    border: 0;
    background: none;

    color: #aaa;

    cursor: pointer;
}

.popupActionSecondary:hover {
    color: #fff;
}


.randomizerView {

}

/* FOUR RANDOMIZER COLUMNS */

.randomizerContent {
	--gap: 18px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: var(--gap);
}

.randomizerContent.loading {
    opacity: 0.5;
    pointer-events: none;
}


.randomizerOption {
	position: relative;
    overflow: hidden;

    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 16px;

    border: 1px solid #3d3d3d;
    border-radius: 10px;

}

.randomizerOption::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: calc(400% + (var(--gap) * 3));

    background-image:
        linear-gradient(
            rgba(10, 10, 10, 0.62),
                rgba(10, 10, 10, 0.72)
        ),
        var(--route-art);

    background-size: cover;
    background-position: center;

    z-index: 0;
}

.randomizerOption:nth-child(1)::before {
    left: 0;
}

.randomizerOption:nth-child(2)::before {
    left: calc(-100% - var(--gap));
}

.randomizerOption:nth-child(3)::before {
    left: calc(-200% - (var(--gap) * 2));
}

.randomizerOption:nth-child(4)::before {
    left: calc(-300% - (var(--gap) * 3));
}

.randomizerOption > * {
    position: relative;
    z-index: 1;
}

.randomizerOption.randomizerJourney {
	border: 1px solid #fecd52;
}

.randomizerOptionTitle {
    margin-bottom: 16px;

    color: #999;

    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.randomizerOption.randomizerJourney .randomizerOptionTitle {
	color:#fecd52;
}

.randomizerCompleted, .randomizerFavourite {
	float:right;
	font-size:1rem;
}

.randomizerCompleted {
    color: #6fcf97;
}

.randomizerOptionContent {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-bottom: 18px;
}


.randomizerOptionContent strong {
    font-size: 1.05rem;
}


.randomizerSecondary {
    color: #aaa;
    font-size: 0.85rem;
}


.randomizerDuration {
    margin-top: 5px;

    font-size: 0.9rem;
    font-weight: bold;
}


.randomizerFlag {
	height:15px;margin-right:8px;position:relative;top:2px;
}

.randomizerWeatherIcon {
    margin-bottom: 4px;

    font-size: 1.6rem;
}


.randomizerReroll {
    width: 100%;

    padding: 10px;

    background: rgba(0,0,0,0.4);
    border: 1px solid #4b4b4b;
    border-radius: 6px;

    color: #ddd;

    cursor: pointer;
}

.randomizerReroll:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}


.randomizerReroll:hover {
    background: rgba(100,100,100,0.3);
}


/* SETTINGS */

.randomizerSettings {
    padding: 0 24px 20px;
}


.randomizerSettingsButton {
    padding: 8px 0;

    border: 0;
    background: none;

    color: #aaa;

    cursor: pointer;
}


/* BOTTOM ACTIONS */

.randomizerGo {
    padding: 12px 22px;

    border-radius: 7px;

    font-size: 1rem;
    font-weight: bold;

    cursor: pointer;

    background: #4c8bf5;
    border: 1px solid #4c8bf5;

    color: white;
}

.randomizerGo:hover {
    background:#679cf5;
}

.randomizerGo:disabled {
	opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.randomizerEmpty {
    grid-column: 1 / -1;

    min-height: 200px;

    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    text-align: center;
    color: #aaa;
}

.randomizerEmpty i {
    font-size: 2rem;
}

.randomizerEmpty strong {
    font-size: 1.2rem;
    color: #fff;
}

@media (max-width: 700px) {

    .popupOverlay {
        padding: 12px;
    }


    .randomizerContent {
        grid-template-columns: 1fr;
        grid-auto-rows: max-content;

        overflow-y: auto;
    }

	.randomizerOption::before {
        inset: 0;

        width: 100%;
        height: 100%;

        background-image:
            linear-gradient(
                rgba(10, 10, 10, 0.62),
                rgba(10, 10, 10, 0.72)
            ),
            var(--route-art);

        background-size: 180% auto;
        background-repeat: no-repeat;
    }

	.randomizerOption:nth-child(n)::before {
        left: 0;

        width: 100%;
        height: 100%;
    }


    .randomizerOption:nth-child(1)::before {
        background-position: 0% center;
    }

    .randomizerOption:nth-child(2)::before {
        background-position: 33% center;
    }

    .randomizerOption:nth-child(3)::before {
        background-position: 66% center;
    }

    .randomizerOption:nth-child(4)::before {
        background-position: 100% center;
    }

    .randomizerOption {
        min-height: auto;
    }


    .randomizerOptionContent {
        margin-bottom: 12px;
    }

    .randomizerReroll {
        width: auto;
        align-self: flex-end;

        padding: 7px 12px;

        background: rgba(40, 40, 40, 0.8);

        font-size: 0.85rem;
    }

}

.currentActivityView {

}

.currentActivityContent {
    --route-art: none;

    padding: 0;
}


/* -------------------------
   Route hero
------------------------- */

.currentActivityHero {
    position: relative;

    display: flex;
    align-items: flex-end;

    background-image: var(--route-art);
    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.currentActivityHeroShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(24, 24, 24, 0.6) 0%,
            rgba(24, 24, 24, 1) 100%
        );
}

.currentActivityRouteName {

    position: relative;
    z-index: 1;

    padding: 30px 36px;

    margin-bottom: 5px;

    text-shadow:1px 1px rgba(0,0,0,1);
    line-height: 1.1;

    color: #ddd;
}

.currentActivityRouteName a {
    text-decoration:none;
    color:#ddd;
    font-size: 20px;
    font-weight:300;
}

.currentActivityRouteName i {
    font-size:14px;
    margin-left:5px;
}


/* -------------------------
   Body
------------------------- */

.currentActivityBody {
    padding: 28px 36px 30px;
}


/* -------------------------
   Activity details
------------------------- */

.currentActivityDetails {
    margin-bottom: 24px;
}

.currentActivitySection {
    padding-left: 18px;

    border-left: 3px solid #4d8df7;
}

.currentActivitySection + .currentActivitySection {
    margin-top: 22px;
}

.currentActivityJourney {
    border-left-color: #fecd52;
}

.currentActivityType {
    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #7eaeff;
}

.currentActivityJourney .currentActivityType {
    color: #fecd52;
}

.currentActivityName {
    display: block;

    margin-bottom: 5px;

    font-size: 20px;
    line-height: 1.25;

    color: #fff;
}

.currentActivityMeta {
    display: block;

    font-size: 16px;
    color: #aaa;
}


/* -------------------------
   Normal service info
------------------------- */

.currentActivityServiceLayout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 50px;
    align-items: center;
}

.currentActivityInfo {
    display: flex;
    flex-direction: column;
    gap: 18px;

    margin: 0;
    padding: 0;

    border: 0;
}

@media (max-width: 700px) {
    .currentActivityServiceLayout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .currentActivityInfo {
        flex-direction: row;
        gap: 25px;
    }

    .currentActivityInfo > div {
        flex: 1;
    }
}

.currentActivityInfo > div {
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.currentActivityInfo span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;

    color: #777;
}

.currentActivityInfo strong {
    font-size: 16px;
    color: #ddd;
}


/* -------------------------
   Started
------------------------- */

.currentActivityStartedRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin: 28px 0;

    color: #aaa;
}

.currentActivityStartedRow i {
    font-size: 18px;
}

.currentActivityStarted {
    font-size: 15px;
}


/* -------------------------
   Sync message
------------------------- */

.currentActivitySync {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 18px 20px;

    border: 1px solid rgba(77, 141, 247, .55);
    border-radius: 10px;

    background: rgba(77, 141, 247, .08);
}

.currentActivitySyncIcon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;

    color: #6fa5ff;
}

.currentActivitySyncText {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.currentActivitySyncText strong {
    font-size: 16px;
    color: #ddd;
}

.currentActivitySyncText span {
    font-size: 14px;
    color: #aaa;
}

.currentActivitySyncText small {
    margin-top: 4px;

    font-size: 13px;
    color: #777;
}

.currentActivitySyncText a {
    color: #6fa5ff;
    text-decoration: none;
}

.currentActivitySyncText a:hover {
    text-decoration: underline;
}

.currentActivityEmpty {
    padding: 60px 30px;
    text-align: center;
}

.currentActivityEmptyIcon {
    margin-bottom: 18px;
    color: #777;
    font-size: 2.5rem;
}

.currentActivityEmpty h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
}

.currentActivityEmpty p {
    margin: 0 0 24px;
    color: #999;
}

.currentActivityFind {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   COMPLETION
   ========================================================= */

.completionContent {
    --route-art: none;
    padding: 0;
}

.completionInterior {
    padding: 24px 36px 28px;
}


/* Celebration */

.completionCelebration {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    padding: 10px 30px 28px 30px;
}

.completionCelebrationMain,
.completionScore {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.completionCelebrationMain {
    gap: 16px;
}

.completionCelebrationText {
    text-align: center;
}

.completionCelebrationText h2,
.completionCelebrationText p {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 700px) {

    .completionCelebration {
        grid-template-columns: 1fr;
        gap: 22px;
    }

}

.completionCheck {
    flex: 0 0 auto;

    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;

    border-radius: 50%;
    border: 2px solid #4caf50;

    background: rgba(76, 175, 80, .15);
    color: #69c96d;

    font-size: 24px;
}

.completionCelebrationText {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.completionCelebration h2 {
    margin: 0;

    font-size: 24px;
    color: #fff;
}

.completionCelebration p {
    margin: 0;

    font-size: 16px;
    color: #aaa;
}


/* Score */


.completionScore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.completionView.noScore .completionCelebration {
    grid-template-columns: 1fr;
}

.completionScoreValue {
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #ddd;
}

.completionMedal {
    font-size: 2.2rem;
    opacity: 0;
    transform: scale(1.5);
}

.completionMedal[data-medal="bronze"] {
    color: #cd7f32;
}

.completionMedal[data-medal="silver"] {
    color: #c0c0c0;
}

.completionMedal[data-medal="gold"] {
    color: #ffd700;
}

.completionMedal[data-medal="platinum"] {
    color: #8fe7ff;
    filter: drop-shadow(0 0 6px rgba(143, 231, 255, .35));
}

.completionMedal.medalReveal {
    animation: completionMedalReveal 450ms ease-out forwards;
}

@keyframes completionMedalReveal {
    from {
        opacity: 0;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Progress */

.completionProgress {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.completionProgressRow {
    position: relative;
}

.completionProgressHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 8px;
}

.completionProgressLabel {
    font-size: 15px;
    font-weight: 600;

    color: #ddd;
}

.completionProgressChange {
    font-size: 15px;
    font-weight: 700;

    color: #69c96d;

    opacity: 0;
    transform: translateY(4px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.completionProgressChange.show {
    opacity: 1;
    transform: translateY(0);
}


/* Bar */

.completionProgressBar {
    height: 10px;
    overflow: visible;
    border-radius: 5px;
    background: #333;

    position: relative;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

/* Currently animating */
.completionProgressRow.animating .completionProgressBar {
    transform: translateY(-4px) scaleY(1.25);

    box-shadow:
        0 5px 10px rgba(0, 0, 0, .35),
        0 0 8px rgba(255, 255, 255, .12);
}

.completionProgressFill {
    height: 100%;
    border-radius: inherit;

    transition:
        width 1.8s cubic-bezier(.22, .61, .36, 1),
        background-color 1.8s linear;
}

.completionProgressRow {
    transition: transform .35s ease;
}

.completionProgressRow.animating {
    transform: scale(1.015);
}

.completionProgressRow.animating .completionProgressLabel {
    color: #fff;
}


/* Numbers */

.completionProgressNumbers {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 7px;

    font-size: 13px;

    color: #888;
}

.completionProgressBefore {
    transition:
        opacity .3s ease,
        color .3s ease;
}

.completionProgressBefore.old {
    opacity: .45;
}

.completionProgressArrow,
.completionProgressAfter {
    opacity: 0;

    transition: opacity .3s ease;
}

.completionProgressArrow {
    font-size: 10px;
    color: #666;
}

.completionProgressAfter {
    font-weight: 600;
    color: #ccc;
}

.completionProgressArrow.show,
.completionProgressAfter.show {
    opacity: 1;
}


/* 100% category */

.completionProgressComplete {
    margin-left: 2px;

    color: #69c96d;

    opacity: 0;
    transform: scale(.5);

    transition:
        opacity .25s ease,
        transform .35s ease;
}

.completionProgressComplete.show {
    opacity: 1;
    transform: scale(1);
}

.completionProgressRow.completed
.completionProgressFill {
    box-shadow: 0 0 10px rgba(105, 201, 109, .45);
}

.completionNextActions {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* More */

.completionMore {
    position: relative;
}

.completionMoreButton {
    min-height: 38px;
}

.completionMoreButton i {
    font-size: 10px;

    transition:
        transform .15s ease;
}

.completionMoreButton[aria-expanded="true"] i {
    transform: rotate(180deg);
}


/* Dropdown */

.completionMoreMenu {
    position: absolute;

    right: 0;
    bottom: calc(100% + 8px);

    z-index: 20;

    width: 210px;

    padding: 6px;

    background: #242424;

    border: 1px solid #444;
    border-radius: 8px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .4);
}

.completionMoreMenu button {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 11px;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: #bbb;

    font: inherit;
    font-size: 13px;

    text-align: left;

    cursor: pointer;
}

.completionMoreMenu button:hover {
    background: #333;
    color: #fff;
}

.completionMoreMenu button i {
    width: 16px;

    color: #888;

    text-align: center;
}


/* Contextual next action */

.completionNext {
    min-height: 42px;
    padding: 0 18px;
}


/* Mobile */

@media (max-width: 700px) {

    .completionContent {
        padding: 0;
    }

    .completionInterior {
        padding: 26px 24px 34px;
    }

    .completionCelebration {
        margin-bottom: 32px;
    }
}

@media (max-width: 600px) {

    .completionActions {
        gap: 10px;
    }

    .completionNextActions {
        gap: 7px;
    }

    .completionNext {
        padding-left: 12px;
        padding-right: 12px;
    }

    .completionMoreMenu {
        width: 200px;
    }

}

.routeFavouritePicker {
    position: fixed;
    z-index: 10000;

    padding: 0.75rem;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;

    background: #1b1b1b;

    box-shadow:
        0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

.routeFavouritePicker[hidden] {
    display: none;
}

.routeFavouritePickerTitle {
    margin-bottom: 0.55rem;

    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    opacity: 0.7;
}

.routeFavouriteColours {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.routeFavouriteColour,
.routeFavouriteRemove {
    position: relative;

    width: 1.8rem;
    height: 1.8rem;

    padding: 0;

    border: 2px solid transparent;
    border-radius: 50%;

    cursor: pointer;

    transition:
        transform 0.12s ease,
        border-color 0.12s ease;
}

.routeFavouriteColour {
    background: var(--favourite-option);
}

.routeFavouriteColour:hover,
.routeFavouriteRemove:hover {
    transform: scale(1.12);
}

.routeFavouriteColour.selected {
    border-color: white;
}

.routeFavouriteColour.selected::after {
    content: "";

    position: absolute;
    inset: 3px;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

.routeFavouriteRemove {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #b92d2d;

    color: white;

    font-size: 0.8rem;
}

.routeFavouriteRemove.selected {
    border-color: white;
}

.routeNotesContent {
    --route-art: none;

    padding: 0;
}

.routeNotesRouteName {
    font-size: 20px;
    font-weight: 300;
}

.routeNotesBody {
    padding: 28px 36px 32px;
}

.routeNotesLabel {
    display: block;

    margin-bottom: 8px;

    color: #aaa;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.routeNotesTextarea {
    width: 100%;
    min-height: 220px;

    display: block;

    padding: 14px 16px;

    resize: vertical;

    border: 1px solid #3a3a3a;
    border-radius: 8px;

    outline: none;

    background: #242424;
    color: #ddd;

    font: inherit;
    font-size: 14px;
    line-height: 1.5;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.routeNotesTextarea::placeholder {
    color: #707070;
}

.routeNotesTextarea:hover {
    border-color: #484848;
}

.routeNotesTextarea:focus {
    background: #272727;
    border-color: #4f86c6;

    box-shadow:
        0 0 0 3px rgba(79, 134, 198, .12);
}

@media (max-width: 700px) {

    .routeNotesBody {
        padding: 22px 20px 24px;
    }

    .routeNotesTextarea {
        min-height: 180px;
    }

}

.routeNotesButton.hasNotes {
    color: #6fa5ff;
}

.routeSettingsContent {
    --route-art: none;

    padding: 0;
}

.routeSettingsRouteName {
    font-size: 20px;
    font-weight: 300;
}

.routeSettingsBody {
    padding: 28px 36px 32px;
}

.routeSettingOption {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 18px 20px;

    border: 1px solid #3a3a3a;
    border-radius: 9px;

    background: #222;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}

.routeSettingOption:hover {
    background: #272727;
    border-color: #484848;
}

.routeSettingControl {
    flex: 0 0 auto;

    padding-top: 2px;
}

.routeSettingControl input {
    width: 18px;
    height: 18px;

    margin: 0;

    accent-color: #4f86c6;

    cursor: pointer;
}

.routeSettingText {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.routeSettingText strong {
    color: #ddd;
    font-size: 15px;
}

.routeSettingText small {
    color: #888;

    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 700px) {

    .routeSettingsBody {
        padding: 22px 20px 24px;
    }

}



.dashboardWelcome {
    margin-bottom: 26px;
}

.dashboardWelcome h1 {
    margin: 0 0 7px;

    color: #ddd;

    font-size: 28px;
    font-weight: 500;
}

.dashboardWelcomeFact {
    color: #888;

    font-size: 15px;
    line-height: 1.5;
}

.dashboardWelcomeFact strong {
    color: #bbb;
    font-weight: 500;
}

.dashboardHeader {
    display: flex;
    align-items: stretch;
    gap: 24px;

    margin-bottom: 26px;
}

.dashboardHeader .dashboardWelcome {
    flex: 1 1 260px;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-bottom: 0;
}

.dashboardNews {
    flex: 0 1 390px;
    min-width: 0;

    position: relative;

    min-height: 82px;

    padding: 13px 16px 12px;

    border: 1px solid #3a3a3a;
    border-radius: 8px;

    background: #222;
}


.dashboardNewsLabel {
    margin-bottom: 7px;

    color: #777;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.dashboardNewsItems {
    position: relative;

    min-height: 37px;
}


.dashboardNewsItem {
    display: none;

    animation: dashboardNewsFade .25s ease;
}


.dashboardNewsItem.active {
    display: block;
}


.dashboardNewsItem strong {
    display: block;

    margin-bottom: 2px;

    color: #ccc;

    font-size: 13px;
    font-weight: 600;
}


.dashboardNewsItem span {
    display: block;

    color: #888;

    font-size: 12px;
    line-height: 1.4;
}


.dashboardNewsLink {
    display: block;

    color: inherit;
    text-decoration: none;
}


.dashboardNewsLink:hover strong {
    color: #eee;
}


.dashboardNewsDots {
    display: flex;
    gap: 5px;

    margin-top: 9px;
}


.dashboardNewsDot {
    width: 5px;
    height: 5px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #555;

    cursor: pointer;

    transition:
        background .15s ease,
        transform .15s ease;
}


.dashboardNewsDot.active {
    background: #aaa;
    transform: scale(1.2);
}


@keyframes dashboardNewsFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@media (max-width: 800px) {

    .dashboardHeader {
        display: block;
    }


    .dashboardHeader .dashboardWelcome {
        margin-bottom: 18px;
    }


    .dashboardNews {
        width: auto;
    }

}

.dashboardSection {
    margin-top: 34px;
}

.dashboardSection:first-child {
    margin-top: 0;
}

/* =========================================================
   DASHBOARD OVERALL PROGRESS
   ========================================================= */

.dashboardProgress {
    padding: 20px;

    border: 1px solid #3a3a3a;
    border-radius: 9px;

    background: #222;
}


/* HEADER */

.dashboardProgressHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
}

.dashboardProgressHeader h2 {
    margin: 0;

    color: #ddd;

    font-size: 18px;
    font-weight: 600;
}

.dashboardProgressOverall strong {
    color: #ddd;

    font-size: 28px;
    font-weight: 600;
}


/* =========================================================
   SEGMENTED PROGRESS BAR
   ========================================================= */

.dashboardProgressBar {
    display: flex;

    width: 100%;
    height: 14px;

    overflow: hidden;

    border-radius: 7px;
}

.dashboardProgressSegment {
    position: relative;

    flex: 0 0 var(--segment-size);
    height: 100%;

    overflow: hidden;

    /*
     * The entire category allocation remains visible,
     * even where it has not been completed yet.
     */
    background:
        color-mix(
            in srgb,
            var(--category-colour) 20%,
            #181818
        );
}

.dashboardProgressSegment + .dashboardProgressSegment {
    border-left: 2px solid rgba(0, 0, 0, .35);
}

.dashboardProgressFill {
    width: var(--segment-progress);
    height: 100%;

    background: var(--category-colour);
}


/* =========================================================
   CATEGORY LEGEND
   ========================================================= */

.dashboardProgressLegend {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    margin-top: 20px;
}

.dashboardProgressCategory {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;

    gap: 9px;
    padding: 3px 14px;
}

.dashboardProgressCategory:first-child {
    padding-left: 0;
    border-left: 0;
}

.dashboardProgressCategory + .dashboardProgressCategory {
    border-left: 1px solid #333;
}


/* ICON */

.dashboardProgressCategoryIcon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    background-color: var(--category-colour);

    color: rgba(255, 255, 255, .9);

    font-size: 12px;
}


/* LABEL + COUNT */

.dashboardProgressCategoryText {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.dashboardProgressCategoryText span {
    overflow: hidden;

    color: #aaa;
    font-size: 11px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboardProgressCategoryText strong {
    color: #777;

    font-size: 11px;
    font-weight: 400;

    white-space: nowrap;
}


/* PERCENTAGE */

.dashboardProgressCategoryPercent {
    color: #aaa;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 951px) and (max-width: 1250px) {

    .dashboardProgressLegend {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .dashboardProgressCategory {
        padding: 3px 14px;
        border-left: 1px solid #333;
    }

    /* First column */
    .dashboardProgressCategory:nth-child(3n + 1) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (min-width: 451px) and (max-width: 950px) {

    .dashboardProgress {
        padding: 16px;
    }

    .dashboardProgressLegend {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px 0;
    }

    .dashboardProgressCategory {
        padding: 3px 14px;
        border-left: 1px solid #333;
    }

    /* First column */
    .dashboardProgressCategory:nth-child(2n + 1) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 450px) {

    .dashboardProgress {
        padding: 16px;
    }

    .dashboardProgressLegend {
        grid-template-columns: 1fr;
        gap: 16px 0;
    }

    .dashboardProgressCategory {
        padding: 3px 0;
        border-left: 0;
    }
}

/* =========================================================
   DASHBOARD SHELVES
   ========================================================= */

.dashboardShelf {

}

.dashboardShelfHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 12px;
}

.dashboardShelfHeader h2 {
    margin: 0 0 3px;

    color: #ddd;

    font-size: 20px;
    font-weight: 600;
}

.dashboardShelfHeader > div:first-child > span {
    color: #777;

    font-size: 13px;
}


/* =========================================================
   SHELF CONTROLS
   ========================================================= */

.dashboardShelfControls {
    display: flex;
    gap: 6px;
}

.dashboardShelfArrow {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #414141;
    border-radius: 6px;

    background: #292929;
    color: #888;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        opacity .15s ease;
}

.dashboardShelfArrow:hover {
    background: #303030;
    border-color: #555;

    color: #ccc;
}

.dashboardShelfArrow:disabled {
    opacity: .3;
    cursor: default;
}


/* =========================================================
   ROUTE SCROLLER
   ========================================================= */

.dashboardRouteScroller {
    display: flex;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 2px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    /* Firefox */
    scrollbar-width: none;
}

.dashboardRouteScroller::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   ROUTE CARD
   ========================================================= */

.dashboardRouteCard {
    --route-art: none;
    --favourite-color: transparent;

    position: relative;

    flex: 0 0 clamp(330px, 31%, 430px);

    min-width: 0;

    overflow: hidden;

    border: 1px solid #3a3a3a;
    border-radius: 9px;

    background:
        #222
        var(--route-art)
        center / cover no-repeat;

    scroll-snap-align: start;
}

.dashboardRouteCard::after {
    content: "";

    position: absolute;
    z-index: 3;
    inset: 0;

    border: 1px solid transparent;
    border-radius: inherit;

    pointer-events: none;
}

.dashboardRouteCard.isFavourite::after {
    border-color: var(--favourite-colour);

    box-shadow:
        inset 0 0 14px
        color-mix(
            in srgb,
            var(--favourite-colour) 50%,
            transparent
        );
}

/*
 * Darkens the route artwork while still allowing
 * enough of it through to identify the route.
 */

.dashboardRouteCardShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(25, 25, 25, .68),
            rgba(25, 25, 25, .90)
        );

    pointer-events: none;
}

.dashboardRouteCardLink {
    position: absolute;
    z-index: 2;
    inset: 0;

    border-radius: inherit;
}

.dashboardRouteCardContent {
    position: relative;
    z-index: 3;

    padding: 14px;
    pointer-events:none;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.dashboardRouteHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.dashboardRouteName {
    min-width: 0;

    overflow: hidden;

    color: #ddd;

    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;

    text-shadow: 1px 1px rgba(0, 0, 0, .8);
}

.dashboardRouteName img {
    height: 13px;

    margin-right: 6px;

    position: relative;
    top: 1px;
}

.dashboardRouteHead > strong {
    flex: 0 0 auto;

    color: #bbb;

    font-size: 14px;
    font-weight: 600;

    text-shadow: 1px 1px rgba(0, 0, 0, .8);
}


/* =========================================================
   OVERALL ROUTE PROGRESS
   ========================================================= */

.dashboardRouteProgress {
    height: 3px;

    margin-top: 7px;

    overflow: hidden;

    border-radius: 3px;

    background: rgba(255, 255, 255, .1);
}

.dashboardRouteProgress > div {
    height: 100%;
}

.dashboardRouteProgress.complete {
    box-shadow:
        0 0 6px rgba(57, 174, 72, 1);
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.dashboardRouteCategories {
    display: flex;

    width: 100%;

    margin-top: 14px;

    overflow: hidden;

    border-radius: 6px;
}


/*
 * Incomplete categories expand to fill the available room.
 *
 * Since we're not showing category names, these contain:
 *
 *     icon
 *     value / total
 *     progress line
 */

.dashboardRouteCategory {
    position: relative;

    flex: 1 1 0;

    min-width: 0;
    min-height: 68px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 8px;

    border: 1px solid rgba(255, 255, 255, .15);

    background: rgba(0, 0, 0, .10);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    color: white;

    overflow: hidden;
}

.dashboardRouteCategory + .dashboardRouteCategory {
    border-left: 0;
}

.dashboardRouteCategory:first-child {
    border-radius: 5px 0 0 5px;
}

.dashboardRouteCategory:last-child {
    border-radius: 0 5px 5px 0;
}


/* Category icon */

.dashboardRouteCategory > i:first-child {
    color: rgba(255, 255, 255, .6);

    font-size: 13px;

    text-shadow:
        1px 1px rgba(0, 0, 0, .8);
}


/* Actual completed / total value */

.dashboardRouteCategoryCount {
    color: rgba(255, 255, 255, .8);

    font-size: 11px;

    white-space: nowrap;

    text-shadow:
        1px 1px rgba(0, 0, 0, .8);
}


/* =========================================================
   COMPLETED CATEGORIES
   ========================================================= */

.dashboardRouteCategory.complete {
    flex: 0 0 48px;

    padding-left: 5px;
    padding-right: 5px;
}


/*
 * If all five categories are complete, let them all expand
 * evenly rather than leaving five tiny boxes.
 */

.dashboardRouteCategories:not(:has(.dashboardRouteCategory:not(.complete)))
.dashboardRouteCategory {
    flex: 1 1 0;
}


/* Glowing completion check */

.dashboardRouteCheck {
    margin-top: 4px;
    color: var(--progress-colour);
    font-size: 10px;
    text-shadow:
        0 0 6px var(--progress-colour);
}


/* =========================================================
   CATEGORY PROGRESS
   ========================================================= */

.dashboardRouteCategoryProgress {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: rgba(255, 255, 255, .07);
}

.dashboardRouteCategoryProgress > div {
    height: 100%;
    background: var(--progress-colour);
    opacity: .85;
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.dashboardRouteFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 12px;
}

.dashboardRouteReason {
    min-width: 0;

    overflow: hidden;

    color: #888;

    font-size: 11px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboardRouteReason i {
    margin-right: 5px;

    color: #777;
}


/* =========================================================
   CARD ACTIONS
   ========================================================= */


.dashboardRouteActions {
    position: relative;
    z-index: 5;

    flex: 0 0 auto;

    display: flex;
    gap: 4px;

    pointer-events: auto;
}

.dashboardRouteActions button {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 4px;

    background: rgba(0, 0, 0, .12);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    color: rgba(255, 255, 255, .55);

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.dashboardRouteActions button:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);

    color: #ccc;
}


/* Favourite */

.dashboardRouteActions
.routeFavouriteButton {
    color: #888;
}

.dashboardRouteActions
.routeFavouriteButton.isFavourite {
    color: var(--favourite-colour);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .dashboardShelf {
        margin-top: 28px;
    }

    .dashboardRouteCard {
        flex-basis: min(85vw, 360px);
    }

    .dashboardRouteCategory {
        min-height: 64px;
    }

    .dashboardRouteCategory.complete {
        flex-basis: 44px;
    }

}




.routeList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/*
 * Route
 */

/* Desktop */
.routeToolbar {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 14px;
}

.routeSearch {
    width: min(500px, 100%);
    margin-right: auto;
}

.routeSortControl {
    display: flex;
    align-items: center;
    gap: 10px;
}

.routeSortLabel {
    color: #888;
    font-size: 13px;
    white-space: nowrap;
}

.routeSort {
    width: 220px;
    min-width: 220px;
}

.routeHideComplete {
    white-space: nowrap;
}


/*
 * Tablet / mobile
 */
@media (max-width: 1000px) {

    .routeToolbar {
        flex-wrap: wrap;
        gap: 12px 16px;
    }

    .routeSearch {
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
        margin-right: 0;
    }

    .routeSortControl {
        flex: 1 1 auto;
    }

    .routeSort {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .routeHideComplete {
        flex: 0 0 auto;
    }

}


/*
 * Small phones
 */
@media (max-width: 520px) {

    .routeToolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .routeSearch {
        width: 100%;
    }

    .routeSortControl {
        width: 100%;
    }

    .routeSort {
        flex: 1;
        width: 100%;
        min-width: 0;
    }

    .routeHideComplete {
        width: 100%;
        padding: 3px 0;
    }

}

.routeListEmpty {
    padding: 60px 20px;

    color: #777;
    text-align: center;
}

.routeListEmpty i {
    display: block;

    margin-bottom: 12px;

    color: #555;
    font-size: 24px;
}

.routeListEmpty span {
    display: block;

    color: #aaa;
    font-size: 15px;
    font-weight: 600;
}

.routeListEmpty small {
    display: block;

    margin-top: 5px;

    font-size: 12px;
}

.routeListItem {
    --favourite-colour: #888;

    display: block;

    padding: 15px 16px 13px;

    color: #fff;
    text-decoration: none;

    background: #252525;

    border: 1px solid #383838;
    border-radius: 9px;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.routeListItem:hover {
    background: #2a2a2a;
    border-color: #4a4a4a;
}


/*
 * Favourite
 */

.routeListItem.isFavourite {
    border-color:
        color-mix(
            in srgb,
            var(--favourite-colour) 65%,
            #383838
        );

    box-shadow:
        inset 3px 0 0 var(--favourite-colour);
}


/*
 * Header
 */

.routeListHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.routeListIdentity {
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 10px;
}

.routeCountry {
    flex: 0 0 auto;
}

.routeCountry img {
    margin-top:1px;
    height:16px;
}

.routeListNames {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.routeListName {
    overflow: hidden;

    font-size: 16px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.routeListEndpoints {
    overflow: hidden;

    color: #999;
    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.routeListEndpoints i {
    margin: 0 5px;

    color: #666;
    font-size: 9px;
}


/*
 * Right side
 */

.routeListRight {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 11px;
}

.routeListFavourite {
    color: var(--favourite-colour);
    font-size: 13px;
}

.routeListPercent {
    min-width: 38px;

    color: #ddd;

    font-size: 15px;
    font-weight: 600;

    text-align: right;
}

.routeListChevron {
    color: #666;
    font-size: 11px;

    transition:
        color .15s ease,
        transform .15s ease;
}

.routeListItem:hover .routeListChevron {
    color: #bbb;
    transform: translateX(2px);
}


/*
 * Overall progress
 */

.routeListProgress {
    height: 3px;
    margin-top: 10px;

    border-radius: 10px;
}


/*
 * Category summary
 */

.routeListCategories {
    display: flex;
    align-items: center;

    gap: 22px;

    margin-top: 10px;
}

.routeListCategory {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #aaa;
    font-size: 12px;
}

.routeListCategory i {
    width: 15px;

    color: #777;

    text-align: center;
}

.routeListCategory.complete {
    opacity:0.6;
}

.routeCategoryDivider {
    color: #666;
}

@media (max-width: 700px) {

    .routeListItem {
        padding: 12px;
    }

    .routeListHeader {
        gap: 10px;
    }

    .routeListName {
        font-size: 15px;
    }

    .routeListEndpoints {
        font-size: 11px;
    }

    .routeListCategories {
        display: grid;
        grid-template-columns: repeat(3, max-content);

        gap: 8px 18px;
    }

    .routeListCategory {
        font-size: 11px;
    }

}


@media (max-width: 450px) {

    .routeListCategories {
        grid-template-columns: repeat(2, max-content);
    }

    .routeListPercent {
        min-width: auto;
    }

}

.routeHero {
    --route-art: none;
    --favourite-colour: #888;

    position: relative;

    min-height: 200px;

    overflow: hidden;

    background-image: var(--route-art);
    background-position: center;
    background-size: cover;

    border: 1px solid #444;
    border-radius: 10px;
}

.routeHeroShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20,20,20,.96) 0%,
            rgba(20,20,20,.82) 50%,
            rgba(20,20,20,.48) 100%
        ),
        linear-gradient(
            0deg,
            rgba(20,20,20,.85),
            transparent 65%
        );
}

.routeHeroContent {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    min-height: 200px;

    padding: 24px;
}

.routeHeroTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.routeHeroIdentity h1 {
    margin: 0;

    color: #fff;

    font-size: 28px;
    font-weight: 600;
}

.routeHeroEndpoints {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 6px;

    color: #aaa;
    font-size: 14px;
}

.routeHeroEndpoints i {
    color: #777;
    font-size: 10px;
}

.routeHeroActions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.routeHeroAction {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    padding: 0;

    color: #aaa;
    background: rgba(20, 20, 20, .55);

    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;

    cursor: pointer;

    backdrop-filter: blur(4px);

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.routeHeroAction:hover {
    color: #fff;
    background: rgba(40, 40, 40, .8);
    border-color: rgba(255, 255, 255, .18);
}

.routeHeroAction.routeRandomizeButton {
    color: #fff;
    background: #477fbd;
    border-color: #568dca;
}

.routeHeroAction.routeRandomizeButton:hover {
    background: #528bc9;
    border-color: #6398d2;
}

.routeFavouriteButton.isFavourite {
    color: var(--favourite-colour);

    background:
        color-mix(
            in srgb,
            var(--favourite-colour) 12%,
            rgba(20, 20, 20, .55)
        );

    border-color:
        color-mix(
            in srgb,
            var(--favourite-colour) 35%,
            rgba(255, 255, 255, .1)
        );
}

.routeHeroProgressHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    margin-bottom: 7px;

    color: #aaa;
    font-size: 12px;
}

.routeHeroProgressHeader strong {
    color: #fff;
    font-size: 16px;
}

.routeHeroProgress {
    height: 5px;

    border-radius: 10px;
}

.routeHeroProgressMeta {
    margin-top: 7px;

    color: #888;
    font-size: 11px;
}

.routeTabs {
    display: flex;
    align-items: stretch;

    margin: 18px 0 24px;

    overflow-x: auto;
    overflow-y:hidden;

    border-bottom: 1px solid #3a3a3a;
}

.routeTab {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;

    padding: 13px 18px;

    color: #888;
    text-decoration: none;

    font-size: 13px;
    font-weight: 500;

    transition:
        color .15s ease,
        background .15s ease;
}

.routeTab:hover {
    color: #ccc;
    background: rgba(255,255,255,.025);
}

.routeTab.active {
    color: #fff;
}

.routeTab.active::after {
    content: "";

    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;

    height: 2px;

    background: #4f8ef7;
    border-radius: 2px 2px 0 0;
}

.routeTab i {
    color: #777;
}

.routeTab.active i {
    color: #6ca0f5;
}

@media (max-width: 700px) {

    .routeHero,
    .routeHeroContent {
        min-height: 175px;
    }

    .routeHeroContent {
        padding: 18px;
    }

    .routeHeroShade {
        background:
            linear-gradient(
                90deg,
                rgba(20,20,20,.94),
                rgba(20,20,20,.65)
            ),
            linear-gradient(
                0deg,
                rgba(20,20,20,.9),
                transparent
            );
    }

    .routeHeroIdentity h1 {
        font-size: 22px;
    }

    .routeHeroEndpoints {
        font-size: 12px;
    }

    .routeTabs {
        margin-top: 14px;
    }

    .routeTab {
        padding: 12px 14px;
    }

}


@media (max-width: 480px) {

    .routeTab {
        gap: 6px;
        padding: 12px;
    }

    .routeTab i {
        display: none;
    }

}

.routeOverview {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* Sections */

.routeOverviewSection {
    min-width: 0;
}

.routeSectionTitle {
    margin: 0 0 12px;

    color: #ddd;
    font-size: 16px;
    font-weight: 600;
}


/* Category progress */

.routeCategoryGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    overflow: hidden;

    background: #222;
    border: 1px solid #383838;
    border-radius: 10px;
}

.routeCategoryCard {
    position: relative;

    min-width: 0;
    padding: 16px;

    border-right: 1px solid #383838;

    cursor:pointer;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

.routeCategoryCard:last-child {
    border-right: 0;
}

.routeCategoryHeader {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 15px;

    color: #aaa;
    font-size: 13px;
}

.routeCategoryIcon {
    width: 18px;

    color: #888;
    text-align: center;
}

.routeCategoryNumbers {
    display: flex;
    align-items: baseline;
    gap: 4px;

    margin-bottom: 10px;
}

.routeCategoryNumbers strong {
    color: #eee;
    font-size: 20px;
    font-weight: 600;
}

.routeCategoryNumbers span {
    color: #777;
    font-size: 13px;
}

.routeCategoryProgress {
    height: 3px;

    border-radius: 10px;
}

.routeCategoryPercent {
    margin-top: 6px;

    color: #777;
    font-size: 11px;
    text-align: right;
}

.routeCategoryCard:hover {
    background-color: #292929;
}

.routeCategoryCard .routeCategoryIcon {
    transition: color 0.15s ease;
}

.routeCategoryCard:hover .routeCategoryIcon {
    color: #eee;
}

.routeCategoryCard .routeCategoryHeader span {
    transition: color 0.15s ease;
}

.routeCategoryCard:hover .routeCategoryHeader span {
    color: #ddd;
}


/*
 * Same philosophy as All Routes:
 * completed categories recede.
 */
.routeCategoryCard.complete .routeCategoryHeader,
.routeCategoryCard.complete .routeCategoryNumbers,
.routeCategoryCard.complete .routeCategoryPercent {
    opacity: .55;
}

.routeCategoryCard.unavailable {
    opacity: .45;
}

.routeCategoryCard.unavailable .routeCategoryProgress {
    opacity: .5;
}


/* Statistics */

.routeStatsGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    background: #222;
    border: 1px solid #383838;
    border-radius: 10px;
}

.routeStat {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 16px 18px;

    border-right: 1px solid #383838;
}

.routeStat:last-child {
    border-right: 0;
}

.routeStat span {
    color: #777;
    font-size: 12px;
}

.routeStat strong {
    color: #ddd;
    font-size: 15px;
    font-weight: 500;
}

.routeStatCountryFlag {
    height:12px;margin-right:6px;position:relative;top:1px;
}

@media (max-width: 900px) {

    .routeCategoryGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .routeCategoryCard {
        border-bottom: 1px solid #383838;
    }

    .routeStatsGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {


    .routeCategoryGrid,
    .routeStatsGrid {
        grid-template-columns: 1fr;
    }

    .routeCategoryCard,
    .routeStat {
        border-right: 0;
        border-bottom: 1px solid #383838;
    }

    .routeCategoryCard:last-child,
    .routeStat:last-child {
        border-bottom: 0;
    }
}

.routeGameStatistics {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.routeStatGroupTitle {
    margin: 0 0 7px;

    color: #888;
    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .06em;
}

/* =========================================================
   Collectables
   ========================================================= */

.routeSectionHeading {
    margin-bottom: 12px;
}

.routeSectionHeading .routeSectionTitle {
    margin-bottom: 4px;
}

.routeSectionDescription {
    margin: 0;

    color: #777;
    font-size: 12px;
    line-height: 1.4;
}


.collectableList {
    overflow: hidden;

    background: #222;
    border: 1px solid #383838;
    border-radius: 10px;
}


.collectableRow {
    padding: 16px 20px;

    border-bottom: 1px solid #383838;
}

.collectableRow:last-child {
    border-bottom: 0;
}


.collectableRowHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.collectableInfo {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.collectableIcon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    object-fit: contain;
}

.collectableName {
    min-width: 0;

    color: #ddd;
    font-size: 14px;
    font-weight: 600;
}


/* Edit/count button */

.collectableEdit {
    display: flex;
    align-items: baseline;
    gap: 4px;

    flex: 0 0 auto;

    padding: 5px 8px;

    color: #ddd;
    font: inherit;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.collectableEdit strong {
    color: inherit;
    font-size: 15px;
    font-weight: 600;
}

.collectableEdit span {
    color: #777;
    font-size: 12px;
}

.collectableEdit .fa-pen {
    margin-left: 5px;

    color: #777;
    font-size: 9px;

    opacity: 0;

    transition:
        opacity .15s ease,
        color .15s ease;
}

.collectableEdit:hover {
    background: #292929;
    border-color: #404040;
}

.collectableEdit:hover .fa-pen {
    opacity: 1;
}


/* Progress */

.collectableProgressRow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 10px;
}

.collectableProgress {
    flex: 1;

    height: 3px;

    border-radius: 10px;
}

.collectablePercent {
    flex: 0 0 38px;

    color: #666;
    font-size: 11px;
    text-align: right;
}


/* Completed rows recede */

.collectableRow.complete .collectableName,
.collectableRow.complete .collectableEdit,
.collectableRow.complete .collectablePercent {
    opacity: .55;
}

.collectableRow.complete .collectableEdit:hover {
    opacity: 1;
}


/* =========================================================
   Collectable editor
   ========================================================= */

.collectableEditor {
    position: fixed;
    z-index: 1000;

    width: 260px;
    padding: 16px;

    background: #242424;

    border: 1px solid #444;
    border-radius: 9px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .4);
}

.collectableEditor[hidden] {
    display: none;
}


.collectableEditorTitle {
    margin-bottom: 15px;

    color: #eee;
    font-size: 15px;
    font-weight: 600;
}


.collectableEditorLabel {
    display: block;

    margin-bottom: 6px;

    color: #888;
    font-size: 12px;
}


.collectableEditorInputRow {
    display: flex;
    align-items: center;
    gap: 7px;
}


.collectableEditorInput {
    width: 90px;
    min-width: 0;

    text-align: center;
}


.collectableEditorAdjust {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    padding: 0;

    color: #aaa;

    background: #2d2d2d;
    border: 1px solid #414141;
    border-radius: 7px;

    cursor: pointer;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.collectableEditorAdjust:hover {
    color: #fff;
    background: #333;
    border-color: #505050;
}


.collectableEditorTotal {
    margin-top: 5px;
    margin-left: 47px;

    color: #777;
    font-size: 11px;
    text-align: center;

    width: 90px;
}


.collectableEditorComplete {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 14px;
    padding: 0;

    color: #8aaa98;
    font: inherit;
    font-size: 12px;

    background: none;
    border: 0;

    cursor: pointer;
}

.collectableEditorComplete:hover {
    color: #a8cbb7;
}


.collectableEditorActions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 18px;
    padding-top: 12px;

    border-top: 1px solid #393939;
}

/* =========================================================
   Timetable Browser
   ========================================================= */

.timetableBrowser {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);

    overflow: hidden;

    background: #222;
    border: 1px solid #383838;
    border-radius: 10px;
}


/* =========================================================
   Sidebar
   ========================================================= */

.timetableSidebar {
    min-width: 0;

    background: #1f1f1f;
    border-right: 1px solid #383838;
}

.timetableSidebarSection {
    padding: 18px 12px;
}

.timetableSidebarSection + .timetableSidebarSection {
    border-top: 1px solid #383838;
}

.timetableSidebarTitle {
    margin: 0 8px 9px;

    color: #777;
    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .07em;
}


/* Sidebar options */

.timetableOptionList {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.timetableOption {
    width: 100%;

    display: block;

    padding: 9px 10px;

    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;

    background: transparent;
    border: 0;
    border-radius: 7px;

    cursor: pointer;
    appearance: none;

    transition:
        background .15s ease,
        opacity .15s ease;
}

.timetableOption:hover {
    background: #292929;
}

.timetableOption.active {
    background: #2d2d2d;
}

.timetableOption:focus-visible {
    outline: 2px solid #4f86c6;
    outline-offset: -2px;
}

.timetableOptionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.timetableOptionName {
    min-width: 0;

    overflow: hidden;

    color: #bbb;
    font-size: 13px;
    font-weight: 500;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.timetableOptionCount {
    flex: 0 0 auto;

    color: #666;
    font-size: 10px;
}

.timetableOption.active .timetableOptionName {
    color: #eee;
}

.timetableOptionProgress {
    height: 2px;

    margin-top: 7px;

    border-radius: 10px;
}

.timetableOption.complete:not(.active) {
    opacity: .55;
}


/* =========================================================
   Services
   ========================================================= */

.timetableServices {
    min-width: 0;
}

.timetableServicesHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 20px 14px;
}

.timetableServicesTitle {
    margin: 0;

    color: #eee;
    font-size: 18px;
    font-weight: 600;
}

.timetableServicesCount {
    margin-top: 4px;

    color: #777;
    font-size: 12px;
}

.timetableServicesCount strong {
    color: #aaa;
    font-weight: 600;
}


/* Toolbar */

.timetableToolbar {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 0 20px 14px;

    border-bottom: 1px solid #383838;
}

.timetableSearch {
    width: min(420px, 100%);

    margin-right: auto;
}

.timetableHideComplete {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #999;
    font-size: 12px;

    white-space: nowrap;
    cursor: pointer;
}

.timetableHideComplete input {
    accent-color: #4f86c6;
}


/* =========================================================
   Service rows
   ========================================================= */

.serviceList {
    min-width: 0;
}

.serviceRow {
    display: grid;
    grid-template-columns:
        58px
        minmax(0, 1fr)
        70px
        38px;

    align-items: center;
    gap: 12px;

    min-height: 64px;
    padding: 10px 18px;

    border-bottom: 1px solid #343434;

    transition:
        background .15s ease,
        opacity .15s ease;
}

.serviceRow:last-of-type {
    border-bottom: 0;
}

.serviceRow:hover {
    background: #262626;
}

.serviceTime {
    color: #aaa;

    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.serviceMain {
    min-width: 0;
}

.serviceName {
    overflow: hidden;

    color: #ddd;
    font-size: 13px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.serviceMeta {
    display: flex;
    align-items: center;
    gap: 0;

    margin-top: 4px;

    color: #707070;
    font-size: 11px;
}

.serviceMeta span + span::before {
    content: "·";

    margin: 0 7px;

    color: #555;
}

.serviceDuration {
    color: #888;

    font-size: 12px;
    text-align: right;

    white-space: nowrap;
}

.timetableEditActions {
    display: flex;
    align-items: center;
    gap: 7px;
}


/*
 * Edit mode
 */

.timetableServices.editing .serviceRow {
    cursor: pointer;
}

.timetableServices.editing .serviceRow:hover {
    background: #292929;
}

.timetableServices.editing .serviceRow.changed {
    background: rgba(79, 134, 198, .13);
}

.timetableServices.editing .serviceRow.changed:hover {
    background: rgba(79, 134, 198, .20);
}


/*
 * Edit checkbox
 */

.serviceEditCheckbox {
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.serviceEditCheckbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.serviceEditCheckbox span {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #555;
    border-radius: 6px;

    background: #252525;
    color: transparent;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.serviceEditCheckbox:hover span {
    border-color: #777;
}

.serviceEditCheckbox input:checked + span {
    background: #477fbd;
    border-color: #568dca;
    color: #fff;
}

.serviceEditCheckbox span i {
    font-size: 11px;
}


/* Completed */

.serviceRow.complete {
    opacity: .52;
}

.serviceRow.complete:hover {
    opacity: .75;
}

.serviceCompletedIcon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    color: #6fcf97;

    font-size: 11px;
}


/* Play */

.serviceStatus {
    display: flex;
    justify-content: flex-end;
}

.servicePlayButton {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    padding: 0;

    color: #8bb4df;

    background: rgba(79, 134, 198, .10);
    border: 1px solid rgba(79, 134, 198, .22);
    border-radius: 6px;

    cursor: pointer;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.servicePlayButton:hover {
    color: #fff;

    background: #477fbd;
    border-color: #568dca;
}

.servicePlayButton i {
    font-size: 10px;
}


/* Empty state */

.serviceEmptyState {
    padding: 45px 20px;

    color: #777;
    font-size: 13px;
    text-align: center;
}

.serviceEmptyState[hidden] {
    display: none !important;
}


/* =========================================================
   Mobile selectors
   ========================================================= */

.timetableMobileSelectors {
    display: none;
}

.timetableMobileField {
    display: flex;
    flex-direction: column;
    gap: 6px;

    min-width: 0;
}

.timetableMobileField > span {
    color: #777;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .06em;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {

    .timetableMobileSelectors {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;

        margin-bottom: 12px;
    }

    .timetableSidebar {
        display: none;
    }

    .timetableBrowser {
        display: block;
    }

}


@media (max-width: 600px) {

    .timetableMobileSelectors {
        grid-template-columns: 1fr;
    }

    .timetableServicesHeader {
        padding:
            16px
            14px
            12px;
    }

    .timetableToolbar {
        flex-wrap: wrap;

        padding:
            0
            14px
            12px;
    }

    .timetableSearch {
        width: 100%;
    }

    .serviceRow {
        grid-template-columns:
            45px
            minmax(0, 1fr)
            34px;

        gap: 9px;

        padding:
            11px
            14px;
    }

    .serviceDuration {
        grid-column: 2;
        grid-row: 2;

        text-align: left;
    }

    .serviceStatus {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

}

/* =========================================================
   Journey Mode
   ========================================================= */

.journeyView {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);

    min-height: 500px;

    background: #222;
    border: 1px solid #383838;
    border-radius: 10px;

    overflow: hidden;
}


/* =========================================================
   Journey selector
   ========================================================= */

.journeySelector {
    padding: 16px 10px;

    background: #202020;
    border-right: 1px solid #383838;
}

.journeySelectorLabel {
    padding: 0 10px 10px;

    color: #777;
    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.journeySelectorList {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.journeySelectorOption {
    width: 100%;

    display: block;

    padding: 9px 10px;

    color: inherit;
    font: inherit;
    text-align: left;

    background: transparent;
    border: 0;
    border-radius: 7px;

    cursor: pointer;

    transition:
        background .15s ease,
        opacity .15s ease;
}

.journeySelectorOption:hover {
    background: #292929;
}

.journeySelectorOption.active {
    background: #2d2d2d;
}

.journeySelectorOption:focus-visible {
    outline: 2px solid #4f86c6;
    outline-offset: -2px;
}

.journeySelectorOption.complete:not(.active) {
    opacity: .55;
}

.journeySelectorHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.journeySelectorName {
    min-width: 0;

    overflow: hidden;

    color: #bbb;
    font-size: 13px;
    font-weight: 500;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.journeySelectorOption.active
.journeySelectorName {
    color: #eee;
}

.journeySelectorCount {
    flex: 0 0 auto;

    color: #666;
    font-size: 10px;
}

.journeySelectorProgress {
    height: 2px;

    margin-top: 7px;

    border-radius: 10px;
}


/* =========================================================
   Journey header
   ========================================================= */

.journeyContent {
    min-width: 0;
}

.journeyHeader {
    padding: 20px;

    border-bottom: 1px solid #383838;
}

.journeyHeaderMain {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.journeyTitle {
    margin: 0;

    color: #eee;
    font-size: 21px;
    font-weight: 600;
}

.journeyProgressCount {
    margin-top: 5px;

    color: #777;
    font-size: 12px;
}

.journeyProgressCount strong {
    color: #aaa;
}

.journeyHeaderActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.journeyProgressHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 20px;

    color: #777;
    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.journeyProgressHeader strong {
    color: #aaa;
}

.journeyProgress {
    height: 4px;

    margin-top: 7px;

    border-radius: 10px;
}

.journeyNormalActions,
.journeyEditActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.journeyNormalActions[hidden],
.journeyEditActions[hidden] {
    display: none;
}

.journeyEditActions {
    margin-top: 0;
}


/* =========================================================
   Chapters
   ========================================================= */

.journeyChapters {
    padding: 16px;
}

.journeyChapter {
    margin-bottom: 12px;

    background: #252525;
    border: 1px solid #383838;
    border-radius: 8px;

    overflow: hidden;
}

.journeyChapter:last-child {
    margin-bottom: 0;
}

.journeyChapter.complete {
    background: #232823;
}

.journeyChapterHeader {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 14px 16px;

    color: inherit;
    font: inherit;
    text-align: left;

    background: transparent;
    border: 0;

    cursor: pointer;
}

.journeyChapterHeader:hover {
    background: rgba(255, 255, 255, .025);
}

.journeyChapterHeader:focus-visible {
    outline: 2px solid #4f86c6;
    outline-offset: -2px;
}

.journeyChapterNumber {
    margin-bottom: 3px;

    color: #666;
    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.journeyChapterName {
    margin: 0;

    color: #ddd;
    font-size: 15px;
    font-weight: 600;
}

.journeyChapterRight {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #777;
}

.journeyChapterCount {
    font-size: 11px;
}

.journeyChapterCount strong {
    color: #aaa;
}

.journeyChapterCheck {
    color: #67b56b;
}

.journeyChapterChevron {
    width: 12px;

    color: #666;
    font-size: 11px;

    transition: transform .15s ease;
}

.journeyChapter.expanded
.journeyChapterChevron {
    transform: rotate(180deg);
}

.journeyChapterProgressWrap {
    padding: 0 16px 12px;
}

.journeyChapterProgress {
    height: 3px;

    border-radius: 10px;
}


/* =========================================================
   Journey events
   ========================================================= */

.journeyEventList {
    border-top: 1px solid #383838;
}

.journeyEventList[hidden] {
    display: none;
}

.journeyEvent {
    display: grid;
    grid-template-columns:
        34px
        minmax(0, 1fr)
        40px;

    align-items: center;

    min-height: 62px;

    padding: 8px 14px;

    border-bottom: 1px solid #333;

    transition:
        background .15s ease,
        opacity .15s ease;
}

.journeyEvent:last-child {
    border-bottom: 0;
}

.journeyEvent:hover {
    background: #292929;
}

.journeyEvent.complete {
    opacity: .58;
}

.journeyEvent.next {
    background: #292929;
}

.journeyEvent.next:hover {
    background: #2c2c2c;
}

.journeyEventStatus {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.journeyEventCheck {
    color: #67b56b;
    font-size: 14px;
}

.journeyEventDot {
    display: block;

    width: 10px;
    height: 10px;

    border: 2px solid #666;
    border-radius: 50%;

    margin-left:4px;
}

.journeyEventMain {
    min-width: 0;
}

.journeyNextLabel {
    margin-bottom: 2px;

    color: #4f86c6;
    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.journeyEventName {
    overflow: hidden;

    color: #ddd;
    font-size: 13px;
    font-weight: 500;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.journeyEventMeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 4px;

    color: #777;
    font-size: 11px;
}

.journeyEventMeta span + span::before {
    content: "·";

    margin-right: 7px;

    color: #555;
}

.journeyEventType {
    color: #888;

    text-transform: uppercase;
}

.journeyEventType i {
    margin-right: 4px;

    font-size: 9px;
}

.journeyEventAction {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* =========================================================
   Journey edit mode
   ========================================================= */

.journeyContent.editing
.journeyEvent {
    cursor: pointer;
}

.journeyContent.editing
.journeyEvent:hover {
    background: #2b2b2b;
}

.journeyEvent.changed {
    background: #2d2b24;
}

.journeyEventEditCheckbox {
    display: flex;
    align-items: center;
}

.journeyEventEditCheckbox[hidden] {
    display: none;
}


/* =========================================================
   Journey responsive
   ========================================================= */

@media (max-width: 1100px) {

    .journeyView {
        display: block;
    }

    .journeySelector {
        border-right: 0;
        border-bottom: 1px solid #383838;
    }

    .journeySelectorList {
        flex-direction: row;

        overflow-x: auto;

        padding-bottom: 3px;
    }

    .journeySelectorOption {
        flex: 0 0 190px;
    }

    .journeyHeaderMain {
        display: block;
    }

    .journeyHeaderActions {
        margin-top: 14px;
    }

}


@media (max-width: 550px) {

    .journeyHeader {
        padding: 16px;
    }

    .journeyChapters {
        padding: 10px;
    }

    .journeyHeaderActions {
        flex-wrap: wrap;
    }

    .journeyContinueButton {
        flex: 1;
    }

    .journeyEvent {
        grid-template-columns:
            28px
            minmax(0, 1fr)
            36px;

        padding-left: 12px;
        padding-right: 10px;
    }

}

/*
 * =========================================================
 * Scenarios & Training
 * =========================================================
 */

.scenarioView {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scenarioToolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-height: 36px;
}

.scenarioNormalActions,
.scenarioEditActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scenarioNormalActions[hidden],
.scenarioEditActions[hidden] {
    display: none;
}


/*
 * Section
 */

.scenarioSection {
    overflow: hidden;
    border: 1px solid #333;
    border-radius: 8px;
    background: #202020;
}

.scenarioSectionHeader {
    padding: 16px 18px 0;
    background: #252525;
}

.scenarioSectionTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.scenarioSectionTitle h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 18px;
}

.scenarioSectionTitle h2 i {
    color: #aaa;
    font-size: 15px;
}

.scenarioSectionCount {
    color: #999;
    font-size: 14px;
}

.scenarioSectionCount strong {
    color: #ddd;
}

.scenarioSectionProgressHeader {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.scenarioSectionProgressHeader strong {
    color: #bbb;
}

.scenarioSectionProgress {
    height: 4px;
    margin-top: 7px;
}


/*
 * Rows
 */

.scenarioList {
    display: flex;
    flex-direction: column;
}

.scenarioRow {
    display: grid;
    grid-template-columns:
        34px
        minmax(0, 1fr)
        40px;

    align-items: center;

    min-height: 66px;
    padding: 12px 14px;

    border-bottom: 1px solid #333;

    transition:
        background-color .15s ease,
        opacity .15s ease;
}

.scenarioRow:last-child {
    border-bottom: 0;
}

.scenarioRow:hover {
    background: #262626;
}

.scenarioRow.complete {
    background: #1d1d1d;
}

.scenarioRow.complete .scenarioMain {
    opacity: .6;
}

.scenarioStatus {
    display: flex;
    align-items: center;
}

.scenarioCheck {
    color: #5dbb63;
}

.scenarioDot {
    display: block;

    width: 10px;
    height: 10px;

    border: 2px solid #666;
    border-radius: 50%;

    margin-left:4px;
}

.scenarioMain {
    min-width: 0;
}

.scenarioName {
    overflow: hidden;

    color: #eee;
    font-size: 15px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.scenarioMeta {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 5px;

    color: #888;
    font-size: 12px;
}

.scenarioType {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.scenarioAction {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/*
 * Edit mode
 */

.scenarioView.editing .scenarioRow {
    cursor: pointer;
}

.scenarioView.editing .scenarioRow:hover {
    background: #292929;
}

.scenarioRow.changed {
    background: #292929;
}

.scenarioRow.changed.complete {
    background: #292929;
}


/*
 * Empty section
 */

.scenarioEmptyState {
    padding: 22px 18px;
    color: #777;
    font-size: 14px;
}


/*
 * Mobile
 */

@media (max-width: 550px) {

    .scenarioViewHeader {
        align-items: stretch;
        flex-direction: column;
    }

    .scenarioViewActions {
        align-self: flex-end;
    }

    .scenarioSectionHeader {
        padding-left: 14px;
        padding-right: 14px;
    }

    .scenarioRow {
        grid-template-columns:
            28px
            minmax(0, 1fr)
            36px;

        padding-left: 12px;
        padding-right: 10px;
    }

    .scenarioName {
        white-space: normal;
    }
}

.scenarioDescription {
    margin-top: 4px;

    color: #999;
    font-size: 13px;
    line-height: 1.4;
}

.scenarioTime {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.scenarioDifficulty {
    display: inline-flex;
    align-items: center;
    gap: 2px;

    font-size: 11px;
}

.scenarioDifficulty .fa-solid {
    color: #d6a84b;
}

.scenarioDifficulty .fa-regular {
    color: #555;
}


.historyPage {
    width: 100%;
}

.historyTimeline {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.historyDay {
    min-width: 0;
}


/*
 * ============================================================
 * DAY HEADER
 * ============================================================
 */

.historyDayHeader {
    margin-bottom: 0.75rem;

    color: #777;

    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.historyDayItems {
    position: relative;
}


/*
 * Continuous timeline line
 */

.historyDayItems::before {
    content: "";

    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    left: 1.05rem;

    width: 2px;

    background: #484848;
}


/*
 * ============================================================
 * ITEM
 * ============================================================
 */

.historyItem {
    position: relative;

    display: grid;
    grid-template-columns:
        2.1rem
        5.5rem
        minmax(0, 1fr);

    gap: 0.75rem;

    padding: 0.55rem 0;

    min-width: 0;
}


/*
 * Timeline marker
 */

.historyMarker {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.historyMarker span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.1rem;
    height: 2.1rem;

    border: 2px solid #484848;
    border-radius: 50%;

    background: #292929;
    color: #aaa;

    font-size: 0.8rem;
}


/*
 * Time
 */

.historyTime {
    padding-top: 0.45rem;

    white-space: nowrap;

    color: #777;

    font-size: 0.82rem;
    font-weight: 600;
}


/*
 * ============================================================
 * CONTENT
 * ============================================================
 */

.historyContent {
    min-width: 0;

    padding: 0.9rem 1rem;

    border: 1px solid #3a3a3a;
    border-radius: 8px;

    background: #222;

    transition:
        background .15s ease,
        border-color .15s ease;
}

.historyItem:hover .historyContent {
    background: #272727;
    border-color: #484848;
}


/*
 * ============================================================
 * TOP LINE
 * ============================================================
 */

.historyTopLine {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 0.3rem;
}

.historyType {
    color: #888;

    font-size: 0.68rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.historyActivity {
    color: #666;

    font-size: 0.7rem;
}


/*
 * ============================================================
 * JOURNEY
 * ============================================================
 */

.historyJourney {
    margin-bottom: 0.3rem;

    color: #888;

    font-size: 0.8rem;
}

.historyJourneyName {
    color: #aaa;
    font-weight: 600;
}

.historySeparator {
    margin: 0 0.2rem;

    color: #666;
}


/*
 * ============================================================
 * TITLE / META
 * ============================================================
 */

.historyTitle {
    overflow: hidden;

    color: #ddd;

    font-size: 1rem;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.historyMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.4rem 1rem;

    margin-top: 0.45rem;

    color: #888;

    font-size: 0.78rem;
}

.historyMeta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.historyMeta i {
    color: #666;
}


/*
 * ============================================================
 * ACTIVITY ENRICHMENT
 * ============================================================
 */

.historyPlayInfo {
    display: flex;
    flex-wrap: wrap;

    gap: 0.4rem 1rem;

    margin-top: 0.65rem;
    padding-top: 0.6rem;

    border-top: 1px solid #333;

    color: #777;

    font-size: 0.75rem;
}

.historyPlayInfo span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.historyPlayInfo i {
    color: #666;
}


/*
 * ============================================================
 * EMPTY
 * ============================================================
 */

.historyEmpty {
    display: flex;
    align-items: center;

    gap: 1rem;

    padding: 2rem;

    border: 1px solid #3a3a3a;
    border-radius: 8px;

    background: #222;

    color: #888;
}

.historyEmpty > i {
    color: #666;

    font-size: 1.5rem;
}

.historyEmpty strong {
    display: block;

    margin-bottom: 0.25rem;

    color: #bbb;
}

.historyEmpty p {
    margin: 0;

    color: #777;
}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 700px) {

    .historyTimeline {
        gap: 1.5rem;
    }

    .historyItem {
        grid-template-columns:
            2.1rem
            minmax(0, 1fr);

        gap: 0.65rem;

        padding: 0.5rem 0;
    }

    .historyTime {
        grid-column: 2;

        padding-top: 0;

        font-size: 0.72rem;
    }

    .historyContent {
        grid-column: 2;

        margin-top: -0.35rem;
        padding: 0.8rem 0.9rem;
    }

    .historyMarker {
        grid-row: 1 / span 2;
    }

    .historyTitle {
        white-space: normal;
    }

}



.settingsPage {
    max-width: 1000px;
}

.settingsPageHeader {
    margin-bottom: 30px;
}

.settingsPageHeader h1 {
    margin: 0 0 5px;
    color: #ddd;
    font-size: 28px;
    font-weight: 600;
}

.settingsPageHeader p {
    margin: 0;
    color: #888;
    font-size: 14px;
}


.settingsSection {
    margin-bottom: 28px;
}

.settingsSectionHeader {
    margin-bottom: 10px;
}

.settingsSectionHeader h2 {
    margin: 0 0 3px;
    color: #ccc;
    font-size: 16px;
    font-weight: 600;
}

.settingsSectionHeader p {
    margin: 0;
    color: #777;
    font-size: 12px;
}


.settingsRows {
    overflow: hidden;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    background: #222;
}

.settingsRow {
    display: grid;
    grid-template-columns:
        minmax(300px, 1fr)
        minmax(200px, 320px)
        180px;

    align-items: center;
    gap: 24px;

    min-height: 74px;
    padding: 15px 28px;
}

.settingsRowText {
    min-width: 0;
}

.settingsRowText strong {
    display: block;
    margin-bottom: 4px;
    color: #ccc;
    font-size: 14px;
    font-weight: 500;
}

.settingsRowText span {
    display: block;
    color: #777;
    font-size: 12px;
    line-height: 1.4;
}

.settingsRowValue {
    grid-column: 2;
    color: #aaa;
    font-size: 13px;
}

.settingsRowAction {
    grid-column: 3;
    display: flex;
    justify-content: flex-end;
}

/* Interactive controls that don't have a separate value */
.settingsRowControl {
    grid-column: 2 / 4;
    display: flex;
    justify-content: flex-end;
}

.settingsRow + .settingsRow {
    border-top: 1px solid #363636;
}

.settingsAccountValue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.settingsCurrentValue {
    color: #999;
    font-size: 13px;
    display: block;
    text-align: left;
}

.settingsEmailVerification {
    display: flex;
    align-items: center;
    gap: 7px;

    width: fit-content;
    margin-top: 10px;
    padding: 7px 10px;

    border: 1px solid rgba(214, 168, 75, .25);
    border-radius: 5px;

    background: rgba(214, 168, 75, .08);
    color: #a89b82;

    font-size: 11px;
}

.settingsEmailVerification i {
    color: #c49a4c;
    font-size: 10px;
}

.settingsEmailVerification button {
    padding: 0;
    border: 0;
    background: none;

    color: #c7b17f;
    font: inherit;
    font-weight: 500;

    cursor: pointer;
}

.settingsEmailVerification button:hover {
    color: #e0ca94;
    text-decoration: underline;
}


.settingsSelect {
    min-width: 230px;
    padding: 9px 32px 9px 11px;
    border: 1px solid #444;
    border-radius: 5px;
    background: #292929;
    color: #ccc;
    font-family: inherit;
    font-size: 13px;
}

.settingsSelect:focus {
    outline: none;
    border-color: #666;
}


.settingsPlatformOptions {
    grid-column: 2 / 4;
    display: flex;
    justify-content: flex-end;
    display: flex;
    gap: 7px;
}

.settingsPlatformOption {
    min-width: 92px;
    padding: 10px 13px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #292929;
    color: #888;
    font-family: inherit;
    cursor: pointer;
    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.settingsPlatformOption i {
    margin-right: 5px;
}

.settingsPlatformOption:hover {
    background: #303030;
    border-color: #555;
    color: #bbb;
}

.settingsPlatformOption.selected {
    border-color: #777;
    background: #343434;
    color: #ddd;
}

@media (max-width: 1200px) {

    .settingsRow {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
    }

    .settingsRowText {
        grid-column: 1;
    }

    .settingsRowValue {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .settingsRowAction {
        grid-column: 2;
        justify-content: flex-end;
    }

    /*
     * Email needs both a value and action, so let them
     * live together on the right.
     */
    .settingsRow:has(.settingsRowValue:not(:empty) + .settingsRowAction:not(:empty)) {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .settingsRow:has(.settingsRowValue:not(:empty) + .settingsRowAction:not(:empty))
    .settingsRowValue {
        grid-column: 2;
    }

    .settingsRow:has(.settingsRowValue:not(:empty) + .settingsRowAction:not(:empty))
    .settingsRowAction {
        grid-column: 3;
    }

    .settingsRowControl,
    .settingsPlatformOptions {
        grid-column: 2;
        justify-content: flex-end;
    }
}

.settingsSave {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 16px;
}

#settingsSaveStatus {
    color: #888;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .settingsPlatformOptions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .settingsPlatformOption {
        width: 100%;
    }
}

@media (max-width: 800px) {

    .settingsRow {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 18px;
    }

    .settingsRowText,
    .settingsRowValue,
    .settingsRowAction,
    .settingsRowControl,
    .settingsPlatformOptions {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
    }

    .settingsRowText {
        margin-bottom: 0;
    }

    .settingsRowValue {
        justify-self: stretch;
    }

    .settingsRowAction {
        justify-content: flex-start;
    }

    .settingsRow:has(
        .settingsRowValue:not(:empty) +
        .settingsRowAction:not(:empty)
    ) {
        grid-template-columns: 1fr;
    }

    .settingsRow:has(
        .settingsRowValue:not(:empty) +
        .settingsRowAction:not(:empty)
    ) .settingsRowValue,
    .settingsRow:has(
        .settingsRowValue:not(:empty) +
        .settingsRowAction:not(:empty)
    ) .settingsRowAction {
        grid-column: 1;
        grid-row: auto;
    }

    .settingsSelect {
        width: 100%;
    }
}

/* Dashboard settings */

.settingsDashboardList {
    display: flex;
    flex-direction: column;
}

.settingsDashboardItem {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 28px;
    border-bottom: 1px solid #3a3a3a;
    background: #222;
}

.settingsDashboardItem:last-child {
    border-bottom: none;
}

.settingsDashboardItem.dragging {
    opacity: .45;
}

.settingsDashboardItem.dragOver {
    box-shadow: inset 0 2px #777;
}

.settingsDashboardHandle {
    color: #777;
    cursor: grab;
    padding: 8px;
    touch-action: none;
}

.settingsDashboardHandle:active {
    cursor: grabbing;
}

.settingsDashboardText {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.settingsDashboardText strong {
    font-size: 14px;
    color: #ddd;
}

.settingsDashboardText span {
    font-size: 12px;
    color: #888;
}

.settingsDashboardToggle {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
}

.settingsDashboardToggle input {
    accent-color: #619b75;
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.settingsDashboardItem:has(input:not(:checked))
.settingsDashboardText {
    opacity: .5;
}

.settingsSave #restoreDashboardDefaults {
    margin-right: auto;
}

#dashboardSaveStatus {
    color: #888;
    font-size: 12px;
}

@media (max-width: 800px) {

    .settingsDashboardItem {
        padding: 16px;
        gap: 12px;
    }

    .settingsDashboardToggle span {
        display: none;
    }

    .settingsSave {
        flex-wrap: wrap;
    }

}

.settingsDashboardMove {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settingsDashboardMove button {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 3px 6px;
}

.settingsDashboardMove button:hover:not(:disabled) {
    color: #ddd;
}

.settingsDashboardMove button:disabled {
    opacity: .2;
    cursor: default;
}

.settingsRandomizerOption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 24px;
    background: #222;
    border-bottom: 1px solid #3a3a3a;
    cursor: pointer;
}

.settingsRandomizerOption:last-child {
    border-bottom: none;
}

.settingsRandomizerOptionText {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.settingsRandomizerOptionText strong {
    color: #ddd;
    font-size: 14px;
    font-weight: 600;
}

.settingsRandomizerOptionText > span {
    color: #888;
    font-size: 12px;
    line-height: 1.5;
}

.settingsRandomizerOption input,
.settingsRandomizerType input {
    width: 17px;
    height: 17px;
    accent-color: #619b75;
    cursor: pointer;
    flex-shrink: 0;
}

.settingsRandomizerTypes {
    display: flex;
    flex-direction: column;
}

.settingsRandomizerType {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 24px;
    background: #222;
    border-bottom: 1px solid #3a3a3a;
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
}

.settingsRandomizerType:last-child {
    border-bottom: none;
}

.settingsRandomizerType:has(input:checked) {
    color: #ddd;
    background: #29362e;
}

.settingsRandomizerType:hover,
.settingsRandomizerOption:hover {
    background: #292929;
}

.settingsSave #restoreRandomizerDefaults {
    margin-right: auto;
}

#randomizerSaveStatus {
    color: #888;
    font-size: 12px;
}

/* Ownership notice */

.settingsOwnershipNotice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: #29332c;
    border-left: 3px solid #619b75;
}

.settingsOwnershipNotice > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settingsOwnershipNotice strong {
    color: #ddd;
    font-size: 14px;
}

.settingsOwnershipNotice span {
    color: #aaa;
    font-size: 12px;
    line-height: 1.5;
}

.settingsOwnershipNotice a {
    color: #a2c5ab;
    font-size: 13px;
    white-space: nowrap;
}


/* Filters */

.settingsOwnershipFilters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 24px;
}

.settingsOwnershipFilters input,
.settingsOwnershipFilters select {
    background: #292929;
    border: 1px solid #444;
    border-radius: 5px;
    color: #ddd;
    padding: 10px 12px;
    min-width: 0;
}

.settingsOwnershipFilters input {
    flex: 2 1 220px;
}

.settingsOwnershipFilters select {
    flex: 1 1 145px;
}


/* Summary */

.settingsOwnershipSummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 24px;
    color: #999;
    font-size: 12px;
    border-top: 1px solid #383838;
}

.settingsOwnershipBulk {
    display: flex;
    gap: 8px;
}

.settingsOwnershipBulk button {
    background: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    color: #aaa;
    cursor: pointer;
    padding: 7px 10px;
    font-size: 12px;
}

.settingsOwnershipBulk button:hover {
    color: #ddd;
    border-color: #666;
}


/* DLC list */

.settingsOwnershipList {
    max-height: 620px;
    overflow-y: auto;
}

.settingsOwnershipListHeader,
.settingsOwnershipItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 75px 125px;
    align-items: center;
    gap: 12px;
    padding: 13px 24px;
}

.settingsOwnershipListHeader {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #292929;
    color: #999;
    font-size: 12px;
    font-weight: 600;
}

.settingsOwnershipListHeader span:not(:first-child) {
    text-align: center;
}

.settingsOwnershipItem {
    border-top: 1px solid #383838;
    background: #222;
}

.settingsOwnershipItem:hover {
    background: #292929;
}

.settingsOwnershipItem.changed {
    background: #29332c;
}

.settingsOwnershipDlc {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.settingsOwnershipDlc strong {
    color: #ddd;
    font-size: 13px;
}

.settingsOwnershipDlc span {
    color: #888;
    font-size: 12px;
}

.settingsOwnershipDlc img {
    height:11px;
    position:relative;
    top:1px;
}

.settingsOwnershipCheckbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.settingsOwnershipCheckbox input {
    width: 17px;
    height: 17px;
    accent-color: #619b75;
    cursor: pointer;
}

.settingsOwnershipEmpty {
    padding: 30px;
    text-align: center;
    color: #999;
}

.settingsOwnershipEmpty[hidden],
.settingsOwnershipItem[hidden] {
    display: none;
}

@media (max-width: 650px) {
    .settingsOwnershipListHeader,
    .settingsOwnershipItem {
        grid-template-columns: minmax(0, 1fr) 50px 75px;
        gap: 8px;
        padding: 12px;
    }

    .settingsOwnershipNotice {
        flex-wrap: wrap;
    }

    .settingsOwnershipBulk {
        flex-wrap: wrap;
    }
}

.settingsSave #ownershipReset {
    margin-right: auto;
}

#ownershipSaveStatus {
    color: #888;
    font-size: 12px;
}


/* =========================================================
   SYNC & DATA SETTINGS
   ========================================================= */

.settingsSyncCheckboxRow {
    cursor: pointer;
}

.settingsSyncCheckboxRow input {
    width: 18px;
    height: 18px;

    accent-color: #619b75;

    cursor: pointer;
}

.settingsSyncStatus,
.settingsSyncMuted {
    color: #888;
    font-size: 12px;
}


/* Dialog */

.settingsSyncDialog {
    width: min(520px, calc(100vw - 32px));
    max-height: min(85vh, 720px);

    padding: 24px;

    color: #ddd;
    background: #222;

    border: 1px solid #454545;
    border-radius: 10px;

    box-shadow: 0 15px 60px #0009;
}

.settingsSyncDialog::backdrop {
    background: #000a;
}

.settingsSyncDialogHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.settingsSyncDialogHeader h2 {
    margin: 0;
    font-size: 19px;
}

.settingsSyncDialogBody {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    margin-top: 20px;
}

.settingsSyncDialogBody p {
    margin: 0;

    color: #aaa;
    font-size: 13px;
    line-height: 1.6;
}


/* Generated Sync Key */

.settingsSyncKey {
    display: block;
    width: 100%;

    overflow-wrap: anywhere;
    user-select: all;

    padding: 13px;

    color: #d9eaff;
    background: #171717;

    border: 1px solid #444;
    border-radius: 6px;

    font-size: 13px;
}


/* ==========================================
   AUTHENTICATION
   ========================================== */

.authPage {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.authContainer {
    width: 100%;
    max-width: 420px;
}

.authBrand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 28px;
}

.authBrand .sidebarLogoMark {
    width: 46px;
    height: 46px;
}

.authPanel {
    overflow: hidden;

    background: #222;
    border: 1px solid #444;
    border-radius: 12px;
}

.authHeader {
    padding: 26px 28px 22px;
    border-bottom: 1px solid #3a3a3a;
}

.authContent {
    padding: 26px 28px 30px;
}

.authForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.authField label {
    display: block;
    margin-bottom: 8px;

    color: #bbb;
    font-size: 13px;
    font-weight: 600;
}

.authField .formInput {
    width: 100%;
}

.authSubmit {
    width: 100%;
    margin-top: 4px;
}

.authError {
    padding: 12px 14px;
    margin-bottom: 22px;

    background: rgba(177, 61, 50, .12);
    border: 1px solid rgba(177, 61, 50, .4);
    border-radius: 7px;

    color: #e6a09a;
    font-size: 13px;
    line-height: 1.5;
}

.authFooter {
    margin-top: 22px;
    color: #888;
    font-size: 13px;
    text-align: center;
}

.authFooter a {
    color: #7eaeff;
    text-decoration: none;
}

.authFooter a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .authHeader {
        padding: 24px 20px 20px;
    }

    .authContent {
        padding: 24px 20px;
    }
}

.sidebarLogout {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.sidebarLogout:hover {
    background: #252525;
}

.settingsMessage {
    padding: 12px 14px;
    margin-bottom: 20px;
    border: 1px solid;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.5;
}

.settingsMessage.success {
    color: #8fd3a7;
    background: rgba(54, 145, 86, .12);
    border-color: rgba(54, 145, 86, .4);
}

.settingsMessage.error {
    color: #e6a09a;
    background: rgba(177, 61, 50, .12);
    border-color: rgba(177, 61, 50, .4);
}

.authFieldHelp {
    margin-top: -12px;
    text-align: right;
    font-size: 13px;
}

.authFieldHelp a {
    color: #7eaeff;
    text-decoration: none;
}

.authFieldHelp a:hover {
    text-decoration: underline;
}

.authRemember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
}

.authRemember input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.registrationHoneypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dashboardEmailNotice {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 24px;
    padding: 13px 15px;

    background: #29271f;
    border: 1px solid #514a2d;
    border-radius: 8px;
}

.dashboardEmailNoticeIcon {
    flex: 0 0 auto;

    color: #d6a84b;
    font-size: 18px;
}

.dashboardEmailNoticeText {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboardEmailNoticeText strong {
    color: #ddd;
    font-size: 13px;
}

.dashboardEmailNoticeText span {
    color: #888;
    font-size: 12px;
}

.dashboardEmailResend {
    flex: 0 0 auto;
}

@media (max-width: 600px) {

    .dashboardEmailNotice {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashboardEmailNoticeText {
        flex-basis:
            calc(100% - 40px);
    }

    .dashboardEmailResend {
        width: 100%;
    }
}