:root {
    color-scheme: light;
}

[data-theme="sputi"] {
    color-scheme: light;
    --color-base-100: oklch(98% 0.009 145);
    --color-base-200: oklch(94.5% 0.018 145);
    --color-base-300: oklch(89.5% 0.025 145);
    --color-base-content: oklch(20% 0.034 155);
    --color-primary: oklch(59% 0.17 149);
    --color-primary-content: oklch(98% 0.012 145);
    --color-secondary: oklch(80% 0.145 133);
    --color-secondary-content: oklch(21% 0.055 145);
    --color-accent: oklch(70% 0.15 164);
    --color-accent-content: oklch(98% 0.012 145);
    --color-neutral: oklch(20% 0.043 158);
    --color-neutral-content: oklch(96% 0.012 145);
    --color-info: oklch(68% 0.13 235);
    --color-success: oklch(70% 0.15 155);
    --color-warning: oklch(78% 0.15 80);
    --color-error: oklch(64% 0.21 25);
    --radius-selector: 9999px;
    --radius-field: 0.8rem;
    --radius-box: 1.4rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

[data-theme="sputi-night"] {
    color-scheme: dark;
    --color-base-100: oklch(14.5% 0.028 158);
    --color-base-200: oklch(18.5% 0.034 158);
    --color-base-300: oklch(23% 0.04 158);
    --color-base-content: oklch(94.5% 0.015 145);
    --color-primary: oklch(72% 0.17 149);
    --color-primary-content: oklch(14% 0.04 155);
    --color-secondary: oklch(81% 0.145 133);
    --color-secondary-content: oklch(16% 0.045 145);
    --color-accent: oklch(74% 0.15 164);
    --color-accent-content: oklch(14% 0.04 155);
    --color-neutral: oklch(11% 0.026 158);
    --color-neutral-content: oklch(96% 0.012 145);
    --color-info: oklch(70% 0.13 235);
    --color-success: oklch(72% 0.15 155);
    --color-warning: oklch(80% 0.15 80);
    --color-error: oklch(66% 0.21 25);
    --radius-selector: 9999px;
    --radius-field: 0.8rem;
    --radius-box: 1.4rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

[x-cloak] {
    display: none !important;
}

html {
    background: var(--color-base-100);
}

body {
    font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

a,
button,
select {
    -webkit-tap-highlight-color: transparent;
}

a:active,
button:active,
.btn:active {
    transform: scale(0.97);
}

.font-display {
    font-family: "Manrope", "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

.trace-page {
    min-height: 100vh;
    isolation: isolate;
}

.trace-ambient {
    position: fixed;
    inset: 0 0 auto;
    z-index: -1;
    height: min(42rem, 80vh);
    overflow: hidden;
    pointer-events: none;
    opacity: 0.75;
    mask-image: linear-gradient(to bottom, #000 10%, transparent 94%);
}

.trace-ambient::before {
    position: absolute;
    inset: -15rem 20% auto -15rem;
    height: 36rem;
    content: "";
    background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 14%, transparent), transparent 68%);
    filter: blur(20px);
}

.trace-ambient svg {
    width: 100%;
    height: 100%;
}

.trace-ambient path {
    fill: none;
    stroke: color-mix(in oklab, var(--color-primary) 18%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 5 12;
}

.trace-mark {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    color: var(--color-primary);
    background: color-mix(in oklab, var(--color-primary) 14%, var(--color-base-100));
    box-shadow: 0 12px 28px color-mix(in oklab, var(--color-primary) 28%, transparent);
    transition: transform 180ms ease;
}

.group:hover .trace-mark {
    transform: rotate(-4deg) scale(1.04);
}

.trace-mark svg {
    width: 1.6rem;
    height: 1.6rem;
}

.trace-mark path {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trace-mark .sputi-road {
    stroke: currentColor;
    stroke-width: 7.5;
}

.trace-mark .sputi-lane {
    stroke: oklch(97% 0.025 140);
    stroke-width: 1.35;
    stroke-dasharray: 2.4 3.2;
}

.trace-language-switch {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in oklab, var(--color-base-200) 68%, transparent);
}

.trace-language-switch a {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    opacity: 0.48;
    filter: saturate(0.55);
    transition: opacity 160ms ease, filter 160ms ease, background 160ms ease, transform 120ms ease;
}

.trace-language-switch a:hover {
    opacity: 0.8;
    filter: saturate(0.85);
}

html[lang="ru"] .trace-language-switch [data-language-option="ru"],
html[lang="en"] .trace-language-switch [data-language-option="en"] {
    background: var(--color-base-100);
    box-shadow: 0 3px 12px color-mix(in oklab, var(--color-neutral) 12%, transparent);
    opacity: 1;
    filter: none;
}

.trace-card {
    border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
    border-radius: var(--radius-box);
    background: color-mix(in oklab, var(--color-base-100) 92%, transparent);
    box-shadow:
        0 1px 1px color-mix(in oklab, var(--color-neutral) 4%, transparent),
        0 18px 50px color-mix(in oklab, var(--color-neutral) 5%, transparent);
}

.trace-card-hero {
    position: relative;
    min-height: 22rem;
    border-color: color-mix(in oklab, white 9%, transparent);
    background:
        radial-gradient(circle at 78% 14%, color-mix(in oklab, var(--color-primary) 38%, transparent), transparent 34%),
        linear-gradient(145deg, #194c35 0%, #08291d 64%);
}

.trace-hero-route {
    position: absolute;
    inset: 0 0 0 auto;
    width: 78%;
    height: 100%;
    opacity: 0.82;
}

.trace-hero-route path:not(.trace-hero-route-shadow) {
    stroke: var(--color-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trace-hero-route-shadow {
    stroke: color-mix(in oklab, var(--color-primary) 45%, transparent);
    stroke-width: 18;
    filter: blur(9px);
}

.trace-hero-route circle {
    fill: var(--color-secondary);
    stroke: #08291d;
    stroke-width: 4;
}

.trace-activity-card {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.trace-activity-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--color-primary) 36%, transparent);
    box-shadow: 0 22px 58px color-mix(in oklab, var(--color-neutral) 10%, transparent);
}

.trace-activity-card:active {
    transform: translateY(0) scale(0.992);
}

.trace-route-preview {
    color: white;
}

.trace-route-preview::before,
.trace-route-preview::after {
    position: absolute;
    content: "";
    border-radius: 999px;
    filter: blur(35px);
}

.trace-route-preview::before {
    top: -20%;
    right: -15%;
    width: 70%;
    height: 70%;
    background: color-mix(in oklab, var(--color-primary) 22%, transparent);
}

.trace-route-preview::after {
    bottom: -25%;
    left: -10%;
    width: 60%;
    height: 65%;
    background: color-mix(in oklab, var(--color-secondary) 14%, transparent);
}

.trace-route-preview .route-halo,
.trace-route-preview .route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trace-route-preview .route-halo {
    stroke: color-mix(in oklab, var(--color-primary) 50%, transparent);
    stroke-width: 13;
    filter: blur(7px);
}

.trace-route-preview .route-line {
    stroke: var(--color-primary);
    stroke-width: 4;
}

.trace-detail-map {
    color: white;
    background: #07271b;
}

.trace-detail-map .leaflet-container {
    width: 100%;
    height: 100%;
    background: #dce7df;
    font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

.trace-detail-map .leaflet-bar {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 38%);
    border-radius: 0.9rem;
    box-shadow: 0 8px 24px rgb(6 32 22 / 22%);
}

.trace-detail-map .leaflet-bar a {
    color: #063b29;
    background: rgb(255 255 255 / 92%);
}

.trace-detail-map .leaflet-control-attribution {
    color: #365248;
    background: rgb(255 255 255 / 82%);
    backdrop-filter: blur(10px);
}

.trace-map-state {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 650;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
    color: white;
    background: rgb(2 25 17 / 82%);
    box-shadow: 0 16px 42px rgb(0 0 0 / 24%);
    font-size: 0.8rem;
    font-weight: 700;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(16px);
}

.trace-map-state--error {
    color: #fff7dc;
    border-color: rgb(244 201 93 / 30%);
    background: rgb(67 47 8 / 90%);
}

.trace-map-state[hidden] {
    display: none;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: flex;
}

.trace-navigation-progress.htmx-indicator {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    display: block;
    height: 0;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 120ms ease;
}

.trace-navigation-progress.htmx-request {
    opacity: 1;
    visibility: visible;
}

.trace-navigation-progress__bar {
    display: block;
    width: 38%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #10b981 38%, #6ee7b7 68%, transparent);
    animation: trace-progress 1s ease-in-out infinite;
}

.trace-navigation-progress__pill {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    border-radius: 999px;
    color: var(--color-base-content);
    background: color-mix(in oklab, var(--color-base-100) 92%, transparent);
    box-shadow: 0 12px 35px color-mix(in oklab, var(--color-neutral) 18%, transparent);
    font-size: 0.75rem;
    font-weight: 700;
    transform: translateX(-50%);
    backdrop-filter: blur(18px);
}

.trace-request-error {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    display: flex;
    max-width: min(28rem, calc(100vw - 2rem));
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.9rem 0.85rem 1rem;
    border: 1px solid color-mix(in oklab, var(--color-error) 26%, transparent);
    border-radius: 1rem;
    color: var(--color-base-content);
    background: color-mix(in oklab, var(--color-base-100) 94%, transparent);
    box-shadow: 0 18px 48px color-mix(in oklab, var(--color-neutral) 22%, transparent);
    font-size: 0.82rem;
    font-weight: 650;
    backdrop-filter: blur(18px);
}

.trace-request-error[hidden] {
    display: none;
}

.trace-request-error button {
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    color: var(--color-error);
    background: color-mix(in oklab, var(--color-error) 10%, transparent);
    font-size: 0.72rem;
    font-weight: 800;
}

#app-shell.htmx-swapping main {
    opacity: 0.45;
    transform: translateY(2px);
}

#app-shell main {
    transition: opacity 150ms ease, transform 150ms ease;
}

form select:disabled {
    cursor: wait;
    opacity: 0.55;
}

.trace-filter-indicator {
    display: none;
}

html[data-request-busy="true"] .trace-filter-indicator {
    display: flex;
}

@keyframes trace-progress {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(265%);
    }
}

@media (width < 48rem) {
    .trace-request-error {
        right: 1rem;
        bottom: 5.5rem;
        left: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}