/* RoutePass PH - plain CSS, no framework. */

:root {
    color-scheme: light;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bg: #f3f5f9;
    --surface: #ffffff;
    --surface-2: #f6f8fb;
    --border: #e1e6ee;
    --border-strong: #c3ccd9;
    --text: #101b2b;
    --muted: #5a6778;
    --brand: #0b2f57;
    --brand-2: #114480;
    --primary: #1a5fd0;
    --primary-dark: #154cab;
    --primary-soft: #e8f0fe;
    --accent: #f59e0b;
    --focus: #f59e0b;
    --danger: #b42318;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 27, 43, 0.06), 0 1px 3px rgba(16, 27, 43, 0.08);
    --shadow-md: 0 6px 20px rgba(16, 27, 43, 0.12);
    --shadow-lg: 0 18px 48px rgba(11, 47, 87, 0.28);
    --panel-width: 408px;
    --pad: 1rem;

    /* Status colors: always paired with a text label, never used alone. */
    --ok-bg: #dcfce7;       --ok-fg: #14532d;       --ok-line: #16a34a;
    --caution-bg: #fef9c3;  --caution-fg: #713f12;  --caution-line: #ca8a04;
    --warn-bg: #ffedd5;     --warn-fg: #7c2d12;     --warn-line: #f59e0b;
    --bad-bg: #fee2e2;      --bad-fg: #7f1d1d;      --bad-line: #dc2626;
    --severe-bg: #7f1d1d;   --severe-fg: #ffffff;   --severe-line: #7f1d1d;
    --unknown-bg: #e5e7eb;  --unknown-fg: #374151;  --unknown-line: #6b7280;
}

*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

#app {
    height: 100%;
}

h1, h2, h3, p {
    margin: 0;
}

button, input, select {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.icon {
    flex: none;
    vertical-align: -0.18em;
}

.muted {
    color: var(--muted);
}

.small-text {
    font-size: 0.87rem;
}

.ok-text { color: var(--ok-fg); font-weight: 600; }
.bad-text { color: var(--danger); font-weight: 600; }
.warn-text { color: var(--warn-fg); }
.danger-text { color: var(--danger); }

.plain-list {
    margin: 0;
    padding-left: 1.1rem;
}

/* ------------------------------------------------------------------ buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.btn.primary {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn.primary:hover:not(:disabled) {
    background: var(--primary-dark);
}

.btn.outline {
    background: var(--surface);
    border-color: var(--border-strong);
}

.btn.outline:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.btn.ghost {
    color: var(--primary-dark);
}

.btn.ghost:hover:not(:disabled) {
    background: var(--primary-soft);
}

.btn.danger {
    background: var(--danger);
    color: #fff;
}

.btn.link {
    min-height: 0;
    padding: 0.2rem 0.25rem;
    color: var(--primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn.small {
    min-height: 2.1rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.88rem;
}

.btn.link.small {
    min-height: 0;
    padding: 0.2rem 0.25rem;
}

.btn.large {
    min-height: 3rem;
    font-size: 1rem;
}

.btn.block {
    display: flex;
    width: 100%;
}

.btn.grow {
    flex: 1;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
}

.icon-button:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.icon-button.danger-text:hover:not(:disabled) {
    border-color: var(--danger);
    color: var(--danger);
}

.icon-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.chip-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.84rem;
    font-weight: 600;
    color: #2b3a4d;
    cursor: pointer;
}

.chip-button.icon-only {
    justify-content: center;
    width: 2rem;
    padding: 0;
}

.chip-button:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.chip-button.danger-text {
    color: var(--danger);
}

.chip-button.danger-text:hover:not(:disabled) {
    border-color: var(--danger);
    background: var(--bad-bg);
    color: var(--danger);
}

.chip-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -0.15em;
    animation: spin 0.8s linear infinite;
}

.spinner.dark {
    border-color: rgba(26, 95, 208, 0.25);
    border-top-color: var(--primary);
}

.spinner.large {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 4px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.5s; }
    .skeleton i, .splash-mark, .boot-logo { animation: none; }
    .btn, .side-panel { transition: none; }
}

/* ------------------------------------------------------------------ forms */

.field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
}

.field > span {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2b3a4d;
}

input[type=text], input[type=email], input[type=password], input[type=search], select {
    width: 100%;
    min-height: 2.6rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color 0.12s, box-shadow 0.12s;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 95, 208, 0.18);
    outline: none;
}

input::placeholder {
    color: #8a96a6;
}

input[type=checkbox], input[type=radio] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--primary);
    flex: none;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.1rem;
    font-weight: 600;
    cursor: pointer;
}

.segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin-bottom: 0.9rem;
    padding: 3px;
    border-radius: 10px;
    background: #e7ecf3;
}

.segmented button {
    min-height: 2.3rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.segmented button.active {
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.segmented.compact {
    margin-bottom: 0;
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.1rem;
    padding: 0.2rem 0.75rem 0.2rem 0.55rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.pill:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.6rem 0;
    padding: 0.6rem 0.75rem;
    border-left: 4px solid;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
}

.alert.error { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-line); }
.alert.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.alert.info { background: var(--primary-soft); color: #12305e; border-color: var(--primary); }
.alert.success { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }

.alert-close {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.alert-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

.hint {
    margin: 0.4rem 0 0.7rem;
    font-size: 0.87rem;
    color: var(--muted);
}

.divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ------------------------------------------------------------------ splash, sign-in, welcome */

.splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 100%;
    color: var(--muted);
}

.splash-mark, .boot-logo {
    display: block;
    object-fit: contain;
    animation: pulse 1.6s ease-in-out infinite;
}

/* First paint, before the app has downloaded: the mark, a thin progress bar and the percentage. */
.boot {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.boot-bar {
    width: 160px;
    height: 4px;
    border-radius: 99px;
    background: #e1e6ee;
    overflow: hidden;
}

.boot-bar span {
    display: block;
    height: 100%;
    width: var(--blazor-load-percentage, 8%);
    background: linear-gradient(90deg, #0b2f57 0%, #1a5fd0 55%, #19c9f2 100%);
    transition: width 0.15s ease;
}

@keyframes pulse {
    50% { transform: scale(0.94); opacity: 0.85; }
}

.auth-page, .welcome {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100%;
    padding: 7vh 1rem 2.5rem;
    background: #e7eef9;
}

.auth-card, .welcome-card {
    width: 100%;
    max-width: 26.5rem;
    padding: 1.9rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px) saturate(1.2);
    animation: card-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* The official lockup: the mark above the wordmark, as on the logo. */
.brand.stacked {
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 0.2rem;
}

.brand-word {
    display: block;
    width: auto;
    height: 1.5rem;
    max-width: 100%;
    object-fit: contain;
}

.brand.stacked .brand-mark {
    width: 4.5rem;
    height: 4.5rem;
}

.brand.stacked .brand-word {
    height: 2rem;
}

.auth-card {
    text-align: center;
}

.auth-card .field, .auth-card .alert, .auth-card .auth-form {
    text-align: left;
}

.brand-mark {
    flex: none;
    width: 1.75em;
    height: 1.75em;
    object-fit: contain;
}

.app-header .brand-mark {
    width: 2.25rem;
    height: 2.25rem;
}

.auth-tagline {
    margin: 0.55rem 0 1.2rem;
    color: var(--muted);
}

.auth-subtitle {
    margin: 0.75rem 0 0.35rem;
    font-size: 1.1rem;
}

.auth-form {
    margin-top: 0.5rem;
}

.auth-card .btn.link {
    margin-top: 0.6rem;
}

.auth-foot {
    margin-top: 1.25rem;
    font-size: 0.8rem;
}

.google-g {
    flex: none;
}

/* The location prompt: a full page on the first visit, an overlay when changing it later. */
.welcome.overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    min-height: 0;
    overflow-y: auto;
    background: rgba(11, 27, 48, 0.6);
    backdrop-filter: blur(2px);
}

.welcome-card {
    text-align: center;
}

.welcome-card .search, .welcome-card .alert {
    text-align: left;
}

.welcome-art {
    display: inline-grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
}

.welcome-card h1 {
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--brand);
}

.welcome-lead {
    margin: 0.5rem 0 1.3rem;
    color: var(--muted);
}

.welcome-foot {
    display: flex;
    justify-content: center;
    margin-top: 1.1rem;
}

/* ------------------------------------------------------------------ app shell */

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.app-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
    min-height: 3.5rem;
    padding: 0.4rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(16, 27, 43, 0.06);
    z-index: 3;
}

.location-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    min-height: 2.1rem;
    margin-left: 0.4rem;
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.88rem;
    cursor: pointer;
}

.location-chip .icon {
    color: var(--primary);
}

.location-chip:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.location-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.location-change {
    padding-left: 0.5rem;
    border-left: 1px solid var(--border-strong);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.user-box {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    margin-left: auto;
}

.user-email {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    color: var(--muted);
}

.avatar {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.avatar-initial {
    display: inline-grid;
    place-items: center;
    background: var(--accent);
    color: #1f2937;
    font-weight: 700;
}

.btn.header-button {
    border-color: var(--border-strong);
    color: var(--text);
}

.btn.header-button:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.side-panel {
    display: flex;
    flex-direction: column;
    flex: none;
    width: var(--panel-width);
    max-width: 100%;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 2px 0 12px rgba(16, 27, 43, 0.06);
    z-index: 2;
}

.tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.tabs button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 3rem;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.tabs button:hover {
    color: var(--text);
    background: var(--surface-2);
}

.tabs button.active {
    border-bottom-color: var(--primary);
    color: var(--primary-dark);
}

.tab-badge {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
}

.tab-badge::before {
    content: "·";
    margin-right: 0.3rem;
    color: var(--muted);
}

.side-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--pad);
    overscroll-behavior: contain;
}

.side-content > .alert:first-child {
    margin-top: 0;
}

.sheet-handle {
    display: none;
}

.map-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.map-host, .map {
    width: 100%;
    height: 100%;
}

.map {
    background: #dfe7ee;
    z-index: 0;
}

.map-error {
    position: absolute;
    inset: 1rem 1rem auto 1rem;
    z-index: 500;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--bad-bg);
    color: var(--bad-fg);
    box-shadow: var(--shadow-md);
}

.map-fab {
    position: absolute;
    right: 0.75rem;
    bottom: 2rem;
    z-index: 500;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.map-fab:hover {
    background: var(--primary-soft);
}

/* ------------------------------------------------------------------ panes, lists */

.pane {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.2rem;
    margin-bottom: 0.6rem;
}

.pane-head h2, .editor-head h2 {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.section-title {
    margin-bottom: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.count {
    margin-left: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.75rem 1.1rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    text-align: center;
}

.empty-art {
    display: inline-grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
}

.empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.empty .btn {
    margin-top: 0.4rem;
}

.skeleton {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.skeleton i {
    display: block;
    height: 4rem;
    border-radius: var(--radius);
    background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}

.route-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.route-item {
    padding: 0.65rem 0.7rem 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--route-color, var(--primary));
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.route-item.selected {
    background: #fbfcff;
    border-color: #c9d8f3;
    border-left-color: var(--route-color, var(--primary));
}

.route-item.highlighted, .result.highlighted {
    box-shadow: 0 0 0 2px rgba(26, 95, 208, 0.35), var(--shadow-sm);
}

.route-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
    cursor: pointer;
}

.route-check input {
    margin-top: 0.15rem;
}

.route-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.route-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.route-meta {
    font-size: 0.82rem;
    color: var(--muted);
}

.route-actions, .confirm-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding-left: 1.75rem;
    font-size: 0.87rem;
}

.confirm-row span {
    flex: 1 1 100%;
    font-weight: 600;
    color: var(--danger);
}

.swatch {
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Primary action pinned to the bottom of the panel while its content scrolls. */
.action-bar {
    position: sticky;
    bottom: calc(var(--pad) * -1);
    z-index: 5;
    display: flex;
    gap: 0.5rem;
    margin: auto calc(var(--pad) * -1) calc(var(--pad) * -1);
    padding: 0.7rem var(--pad);
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.96);
}

.pane > .route-list, .pane > .editor-details {
    margin-bottom: 0.9rem;
}

/* ------------------------------------------------------------------ editor */

.editor {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.editor-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.waypoints {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.waypoint {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

/* The dotted line that joins Start, the stops and End. */
.waypoint:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(0.75rem - 1px);
    top: calc(50% + 0.8rem);
    height: calc(100% - 1.1rem);
    border-left: 2px dotted var(--border-strong);
}

.waypoint-mark {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--border-strong);
    background: var(--surface);
    z-index: 1;
}

.waypoint-dot {
    width: 0.7rem;
    height: 0.7rem;
    border: 3px solid currentColor;
    border-radius: 50%;
    background: var(--surface);
}

.waypoint-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.waypoint-actions {
    display: flex;
    gap: 0.25rem;
}

.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.swatch-button {
    width: 1.9rem;
    height: 1.9rem;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-strong);
    cursor: pointer;
}

.swatch-button.active {
    box-shadow: 0 0 0 3px var(--text);
}

.search {
    position: relative;
}

.search input {
    padding-left: 2.1rem;
    padding-right: 2.1rem;
    text-overflow: ellipsis;
}

.search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    color: var(--muted);
    pointer-events: none;
}

.search-clear {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.search-clear:hover {
    background: #e7ecf3;
    color: var(--text);
}

.search-results {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 18rem;
    margin: 0;
    padding: 0.3rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.search-results button {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.55rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.search-results li.active button, .search-results button:hover {
    background: var(--primary-soft);
}

.search-pin {
    display: grid;
    margin-top: 0.15rem;
    color: var(--primary);
}

.search-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-name {
    font-weight: 600;
}

.search-locality {
    font-size: 0.82rem;
    color: var(--muted);
}

.search-note {
    padding: 0.55rem 0.6rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.tool-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.4rem;
}

.route-status {
    margin: 0.5rem 0 1rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: 0.92rem;
}

.route-stat strong {
    font-size: 1.1rem;
}

/* ------------------------------------------------------------------ compare */

.prefs {
    margin-bottom: 0.9rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.prefs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.analysis-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.5rem;
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.recommendation {
    margin: 0.8rem 0 0.5rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ok-line);
    border-left-width: 5px;
    border-radius: var(--radius);
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.recommendation.none {
    border-color: var(--bad-line);
    background: var(--bad-bg);
    color: var(--bad-fg);
}

.recommendation-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.disclaimer {
    margin: 0.6rem 0 0.8rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    background: #eef2f7;
    font-size: 0.82rem;
    color: #3b4654;
}

.results {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
}

.result {
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.result.recommended {
    border-color: var(--ok-line);
    box-shadow: 0 0 0 1px var(--ok-line), var(--shadow-sm);
}

.result.impassable {
    background: #fff7f7;
}

.result-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.result-head h3 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
}

.result-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.55rem 0;
}

.eta {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.result-distance {
    text-align: right;
}

.distance {
    font-size: 1.05rem;
    font-weight: 600;
}

.passable {
    margin: 0.35rem 0;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
}

.passable.ok { background: var(--ok-bg); color: var(--ok-fg); }
.passable.bad { background: var(--bad-bg); color: var(--bad-fg); }
.passable .icon { margin-right: 0.15rem; }

.result-pick {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ok-fg);
}

.facts {
    display: grid;
    gap: 0.35rem;
    margin: 0.45rem 0;
    padding: 0;
    list-style: none;
}

.fact {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    border-left: 4px solid;
    border-radius: 6px;
    font-size: 0.88rem;
}

.level-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.level-caution { background: var(--caution-bg); color: var(--caution-fg); border-color: var(--caution-line); }
.level-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.level-bad { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-line); }
.level-severe { background: var(--severe-bg); color: var(--severe-fg); border-color: #000; }
.level-unknown { background: var(--unknown-bg); color: var(--unknown-fg); border-color: var(--unknown-line); }

.mmda, .summary {
    margin: 0.3rem 0;
    font-size: 0.88rem;
}

.mmda abbr {
    font-weight: 700;
    text-decoration: none;
}

.rain {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.rain div {
    padding: 0.35rem 0.45rem;
    border-radius: var(--radius-sm);
    background: #eef2f7;
}

.rain dt {
    font-size: 0.72rem;
    color: var(--muted);
}

.rain dd {
    margin: 0;
    font-weight: 600;
}

.vehicles {
    margin-top: 0.4rem;
}

.vehicles summary {
    padding: 0.25rem 0;
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
}

.vehicles table {
    width: 100%;
    margin-top: 0.3rem;
    border-collapse: collapse;
    font-size: 0.87rem;
}

.vehicles th, .vehicles td {
    padding: 0.3rem 0.35rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.vehicles thead th {
    font-size: 0.75rem;
    color: var(--muted);
}

.vehicles tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.vehicles tr.current {
    background: var(--primary-soft);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    margin-top: 0.8rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.legend-line {
    width: 1.4rem;
    height: 0;
    border-top: 5px solid;
}

.legend-line.moderate { border-color: #f59e0b; }
.legend-line.heavy { border-color: #dc2626; }
.legend-line.standstill { border-color: #7f1d1d; }
.legend-line.closed { border-color: #111827; border-top-style: dotted; }

.legend-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
}

.legend-dot.flood { background: #1d4ed8; }
.legend-dot.food { background: #be185d; }

/* ------------------------------------------------------------------ news */

.news-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    color: var(--muted);
}

.news-timeline {
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.news-group {
    position: relative;
    padding: 0 0 1.1rem 2.1rem;
}

.news-group.official {
    margin-top: 0.9rem;
    padding-bottom: 0.4rem;
}

/* The line that joins the places in travel order. */
.news-timeline .news-group:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(0.7rem - 1px);
    top: 1.5rem;
    bottom: 0;
    border-left: 2px solid var(--border-strong);
}

.news-place {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.5rem;
    font-size: 1rem;
}

.news-dot {
    position: absolute;
    left: 0.3rem;
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid var(--brand-2);
    border-radius: 50%;
    background: var(--surface);
}

.news-dot.end, .news-dot.official {
    left: 0;
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border: 0;
    color: var(--brand-2);
}

.news-dot.official {
    color: var(--ok-fg);
}

.news-place-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.news-place-name.as-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.news-place-name.as-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.news-place .count {
    margin-left: auto;
}

.news-none {
    margin-top: 0.25rem;
    font-size: 0.87rem;
    color: var(--muted);
}

.news-items {
    display: grid;
    gap: 0.45rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.news-item {
    display: grid;
    gap: 0.25rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.news-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.news-tag.flood { color: #1d4ed8; }
.news-tag.traffic { color: #b45309; }
.news-tag.weather { color: #0f766e; }
.news-tag.other { color: var(--muted); }

.news-title {
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    text-decoration: none;
}

a.news-title:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.news-title .icon {
    margin-left: 0.3rem;
    color: var(--muted);
}

.news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.4rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.news-meta span + span::before {
    content: "·";
    margin-right: 0.4rem;
}

.news-official {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 700;
    color: var(--ok-fg);
}

/* ------------------------------------------------------------------ map widgets (Leaflet) */

.leaflet-container {
    font-family: var(--font);
}

.leaflet-container.rp-adding {
    cursor: crosshair;
}

/* While painting, the browser must not pan/zoom the page with the same gesture. */
.leaflet-container.rp-painting {
    cursor: crosshair;
    touch-action: none !important;
}

.rp-stop-icon, .rp-flood-icon, .rp-food-icon {
    background: none;
    border: 0;
}

.rp-icon {
    display: grid;
    place-items: center;
}

.rp-stop {
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    color: #fff;
}

.rp-via {
    display: block;
    width: 20px;
    height: 20px;
    border: 5px solid;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.rp-flood {
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    background: #1d4ed8;
    color: #fff;
}

.rp-flood-none, .rp-flood-low { background: #2563eb; }
.rp-flood-moderate { background: #d97706; }
.rp-flood-high { background: #dc2626; }
.rp-flood-severe { background: #7f1d1d; }
.rp-flood-unknown { background: #6b7280; }

.rp-popup strong {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.95rem;
}

.rp-popup div {
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------ phones: side panel becomes a bottom sheet */

@media (max-width: 760px) {
    :root {
        --pad: 0.85rem;
    }

    .app-body {
        flex-direction: column-reverse;
    }

    .side-panel {
        width: 100%;
        height: 60%;
        border-right: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 20px rgba(16, 27, 43, 0.16);
        transition: height 0.18s ease;
    }

    .sheet-collapsed .side-panel {
        height: auto;
    }

    .sheet-collapsed .side-content {
        display: none;
    }

    .sheet-handle {
        display: grid;
        place-items: center;
        flex: none;
        width: 100%;
        height: 1.4rem;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .sheet-grip {
        width: 2.6rem;
        height: 4px;
        border-radius: 2px;
        background: var(--border-strong);
    }

    .tabs button {
        min-height: 2.75rem;
    }

    .app-header {
        gap: 0.5rem;
        padding: 0.4rem 0.75rem;
    }

    .app-header .brand-word, .user-email, .header-button-text, .location-change {
        display: none;
    }

    .location-chip {
        margin-left: 0;
    }

    .location-name {
        max-width: 9.5rem;
    }

    .map-fab {
        bottom: 1.6rem;
    }

    .auth-page, .welcome {
        padding-top: 4vh;
    }
}

/* ------------------------------------------------------------------ Blazor scaffold */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 3000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress-text {
    font-size: 0.8125rem;
    color: #5a6778;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Headings focused by the router after navigation are not interactive: no focus ring. */
h1[tabindex="-1"]:focus {
    outline: none;
}


/* ------------------------------------------------------------------ on the map: usage meter, tools, pins */

.usage-meter {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 11rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-md);
    color: var(--ok-line);
}

.usage-meter.warn { color: var(--warn-line); }
.usage-meter.bad { color: var(--bad-line); }

.usage-body {
    flex: 1;
    min-width: 0;
    color: var(--text);
}

.usage-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.78rem;
}

.usage-label {
    color: var(--muted);
}

.usage-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.usage-bar {
    height: 5px;
    margin-top: 0.3rem;
    border-radius: 3px;
    background: #e7ecf3;
    overflow: hidden;
}

.usage-bar i {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: 3px;
    background: var(--ok-line);
}

.usage-meter.warn .usage-bar i { background: var(--warn-line); }
.usage-meter.bad .usage-bar i { background: var(--bad-line); }

.usage-note {
    margin-top: 0.25rem;
    font-size: 0.74rem;
    color: var(--bad-fg);
}

.map-tools {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.3rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow-md);
}

.map-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 3.5rem;
    min-height: 3.25rem;
    padding: 0.3rem 0.5rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 0.74rem;
    font-weight: 600;
    color: #2b3a4d;
    cursor: pointer;
}

.map-tool:hover:not(:disabled) {
    background: var(--surface-2);
}

.map-tool.active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.map-tool.done {
    background: var(--primary);
    color: #fff;
}

.map-tool.done:hover {
    background: var(--primary-dark);
}

.map-tool:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.map-tools-gap {
    width: 1px;
    margin: 0.35rem 0.2rem;
    background: var(--border);
}

.map-tip {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    z-index: 500;
    max-width: calc(100% - 7rem);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(16, 27, 43, 0.82);
    color: #fff;
    font-size: 0.82rem;
    text-align: center;
    pointer-events: none;
}

.leaflet-interactive.rp-route-hit {
    cursor: grab;
}

.leaflet-container.rp-shaping, .leaflet-container.rp-shaping .leaflet-interactive {
    cursor: grabbing;
}

.rp-food {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    background: #be185d;
    color: #fff;
    overflow: hidden;
}

.rp-food.rp-food-logo {
    background: #fff;
    border-color: #be185d;
}

.rp-food img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.rp-food.rp-food-large img {
    width: 34px;
    height: 34px;
}

.rp-food-popup {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rp-food.rp-food-large {
    flex: none;
    width: 44px;
    height: 44px;
    box-shadow: none;
    border-color: #f3d3e1;
}

.rp-popup-button {
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--danger);
    cursor: pointer;
}

.rp-popup-button:hover {
    border-color: var(--danger);
    background: var(--bad-bg);
}

@media (max-width: 760px) {
    .usage-meter {
        top: 0.5rem;
        right: 0.5rem;
        min-width: 9.5rem;
        padding: 0.4rem 0.55rem;
    }

    /* The drawing tools sit under the meter so the two never overlap on a narrow screen. */
    .map-tools {
        top: auto;
        bottom: 2.6rem;
    }

    .map-tip {
        bottom: 0.4rem;
        max-width: calc(100% - 1rem);
    }

    .map-tool {
        min-width: 3.1rem;
    }
}

/* While the drawing tools are open the my-location button moves above them on a phone. */
@media (max-width: 760px) {
    .map-wrap:has(.map-tools) .map-fab {
        bottom: 6.8rem;
    }
}

/* ------------------------------------------------------------------ sign-in backdrop: map, routes, motion */

/* A real map of the app's home corridor, softened so the card stays the focus. */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* The map picture sits inside the SVG, under the routes (see AuthBackdrop.razor). */
.auth-map {
    filter: blur(2.5px) saturate(1.08);
    opacity: 0.62;
    animation: map-in 1.2s ease both;
}

/* A light wash with a touch of brand navy towards the bottom. */
.auth-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(231, 238, 249, 0.12) 0%, rgba(11, 47, 87, 0.15) 100%);
}

/* Sized like a "cover" background (the picture is 1600 x 1000) with a little spare so the blurred
   edges never show. */
.auth-routes {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(104vw, 166.4vh);
    height: max(104vh, 65vw);
    transform: translate(-50%, -50%);
}

/* Each route draws itself from Start to End, one after the other. */
.auth-route {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.9;
    filter: blur(0.5px) drop-shadow(0 0 2px rgba(255, 255, 255, 0.95));
    animation: route-draw 2.4s cubic-bezier(0.6, 0.05, 0.2, 1) forwards;
}

.auth-route.r1 { stroke: #2563eb; animation-delay: 0.4s; }
.auth-route.r2 { stroke: #c026d3; animation-delay: 0.9s; }
.auth-route.r3 { stroke: #0d9488; animation-delay: 1.4s; }

/* A dot travels each finished route (moved by the SVG itself, see AuthBackdrop.razor). */
.auth-car {
    fill: #fff;
    stroke-width: 4;
    opacity: 0;
    animation: fade-in 0.5s ease forwards;
}

.auth-car.r1 { stroke: #2563eb; animation-delay: 2.8s; }
.auth-car.r2 { stroke: #c026d3; animation-delay: 3.3s; }
.auth-car.r3 { stroke: #0d9488; animation-delay: 3.8s; }

.auth-pin {
    transform-box: fill-box;
    transform-origin: center;
    animation: pin-pop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.auth-pin circle {
    fill: #fff;
    stroke: #0b2f57;
    stroke-width: 4;
}

.auth-pin .core {
    stroke: none;
    fill: #1a5fd0;
}

.auth-pin.start { animation-delay: 0.2s; }
.auth-pin.end { animation-delay: 2.6s; }
.auth-pin.end .core { fill: #f59e0b; }

.auth-ping {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 4;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: ping 2.4s ease-out 3.2s infinite;
}

.map-credit {
    position: fixed;
    right: 0.6rem;
    bottom: 0.4rem;
    z-index: 1;
    margin: 0;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    color: #3b4654;
}

.map-credit a {
    color: var(--primary-dark);
}

/* The card rises in, then its contents follow one after another. */
.auth-card > *, .welcome-card > * {
    animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.auth-card > :nth-child(1), .welcome-card > :nth-child(1) { animation-delay: 0.12s; }
.auth-card > :nth-child(2), .welcome-card > :nth-child(2) { animation-delay: 0.18s; }
.auth-card > :nth-child(3), .welcome-card > :nth-child(3) { animation-delay: 0.24s; }
.auth-card > :nth-child(4), .welcome-card > :nth-child(4) { animation-delay: 0.3s; }
.auth-card > :nth-child(n + 5), .welcome-card > :nth-child(n + 5) { animation-delay: 0.36s; }

.brand.stacked .brand-mark {
    animation: float 5s ease-in-out 0.8s infinite;
}

.auth-card .btn.primary, .welcome-card .btn.primary {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.12s;
}

.auth-card .btn.primary:hover:not(:disabled), .welcome-card .btn.primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(26, 95, 208, 0.35);
}

/* ------------------------------------------------------------------ dialogs */

.dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(11, 27, 48, 0.55);
    backdrop-filter: blur(3px);
    animation: fade-in 0.18s ease both;
}

.dialog {
    width: 100%;
    max-width: 22rem;
    padding: 1.5rem 1.4rem 1.25rem;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
    animation: dialog-pop 0.28s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.dialog-art {
    display: inline-grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 0.7rem;
    border-radius: 50%;
    background: var(--bad-bg);
    color: var(--danger);
}

.dialog h2 {
    font-size: 1.2rem;
}

.dialog p {
    margin-top: 0.35rem;
    color: var(--muted);
}

.dialog-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
}

@keyframes map-in {
    from { opacity: 0; }
}

@keyframes route-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pin-pop {
    from { opacity: 0; transform: scale(0.2); }
}

@keyframes ping {
    0% { opacity: 0.9; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(2.6); }
}

@keyframes float {
    50% { transform: translateY(-6px); }
}

@keyframes dialog-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.92); }
}

/* People who ask for less motion get the finished picture straight away. */
@media (prefers-reduced-motion: reduce) {
    .auth-card, .welcome-card, .auth-card > *, .welcome-card > *, .auth-map, .auth-pin,
    .brand.stacked .brand-mark, .dialog, .dialog-backdrop {
        animation: none;
    }

    .auth-route {
        animation: none;
        stroke-dashoffset: 0;
    }

    .auth-car, .auth-ping {
        display: none;
    }
}

/* Wide screens: the card moves to the right so the routes on the left of the map stay in view. */
@media (min-width: 1100px) {
    .auth-page, .welcome:not(.overlay) {
        justify-content: flex-end;
        padding-right: clamp(2rem, 10vw, 11rem);
    }
}

/* Tall, narrow screens: slide the picture so the routes (35% across it) sit behind the middle. */
@media (max-aspect-ratio: 1/1) {
    .auth-routes {
        transform: translate(-35%, -50%);
    }
}

/* ------------------------------------------------------------------ icons inside controls */

.segmented button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.2rem 0.4rem;
}

.pill .icon {
    color: var(--muted);
}

.pill:has(input:checked) .icon {
    color: var(--primary);
}

/* A select with the icon of its current choice on the left. */
.field > .select-icon {
    position: relative;
    display: block;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.select-icon > .icon {
    position: absolute;
    top: 50%;
    left: 0.65rem;
    transform: translateY(-50%);
    color: var(--primary);
    pointer-events: none;
}

.select-icon > select {
    padding-left: 2.35rem;
}

/* ------------------------------------------------------------------ editor: suggested routes */

.suggest {
    margin: 0 0 1rem;
}

.suggest .hint {
    margin-bottom: 0;
}

.suggestions {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.suggestion {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.suggestion:hover {
    border-color: var(--primary);
}

.suggestion.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 1px var(--primary);
}

.suggestion.impassable {
    background: #fff7f7;
}

.suggestion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.suggestion-best {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ok-fg);
}

.suggestion-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.87rem;
}

.suggestion-eta {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
}

.suggestion-tags, .suggestion-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
}

.mini-fact {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

.leaflet-interactive.rp-alt-hit {
    cursor: pointer;
}

/* ------------------------------------------------------------------ editor: check of a drawn route */

.draw-check {
    margin: 0 0 1rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--unknown-line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: 0.9rem;
}

.draw-check.ok { border-left-color: var(--ok-line); background: var(--ok-bg); }
.draw-check.info { border-left-color: var(--primary); background: var(--primary-soft); }
.draw-check.warning { border-left-color: var(--warn-line); background: #fff8ef; }
.draw-check.blocked { border-left-color: var(--bad-line); background: #fff5f5; }

.draw-check-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.draw-check.ok .draw-check-title { color: var(--ok-fg); }
.draw-check.warning .draw-check-title { color: var(--warn-fg); }
.draw-check.blocked .draw-check-title { color: var(--bad-fg); }

.draw-check-list {
    display: grid;
    gap: 0.4rem;
    margin: 0.5rem 0;
    padding: 0;
    list-style: none;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.check-item > .icon {
    margin-top: 0.15rem;
    color: var(--unknown-line);
}

.check-item.info > .icon { color: var(--primary); }
.check-item.warning > .icon { color: #b45309; }
.check-item.blocked > .icon { color: var(--bad-line); }

.check-item > div {
    flex: 1;
    min-width: 0;
}

.check-item strong, .check-item span {
    display: block;
}

.check-item span {
    font-size: 0.85rem;
    color: var(--muted);
}

.draw-check .tool-row {
    margin: 0.5rem 0 0;
}

.draw-check .disclaimer {
    margin: 0.5rem 0 0;
}

.rp-check-icon {
    background: none;
    border: 0;
}

.rp-check {
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    color: #fff;
}

/* Vehicle and Priority share one row, on phones too: keep the two buttons compact. */
.segmented.compact button {
    gap: 0.25rem;
    padding: 0.2rem 0.3rem;
    font-size: 0.9rem;
}

.select-icon > select {
    text-overflow: ellipsis;
}