/* atur - 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 full logo: the wordmark above its tagline. */
.brand.stacked {
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.4rem;
}

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

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

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

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


.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-off {
    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;
    }

    .user-email, .header-button-text, .location-off {
        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-logo {
    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-logo, .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;
}

/* ==========================================================================
   atur design system. Structural/map rules above remain the foundation;
   this section defines the shared product surfaces and responsive shell.
   ========================================================================== */
:root {
    --font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bg: #eef3f9;
    --surface: #fff;
    --surface-2: #f5f8fc;
    --text: #14283f;
    --muted: #64748b;
    --brand: #0b2f57;
    --brand-2: #143e69;
    --primary: #2164d6;
    --primary-dark: #154eae;
    --primary-soft: #eaf1ff;
    --border: #e2e9f2;
    --border-strong: #c8d4e3;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 2px 6px rgb(18 45 77 / 4%);
    --shadow-card: 0 4px 18px rgb(18 45 77 / 5%);
    --shadow-md: 0 8px 30px rgb(18 45 77 / 10%);
    --shadow-lg: 0 24px 70px rgb(9 34 66 / 20%);
    --panel-width: clamp(380px, 32vw, 460px);
    --pad: clamp(1rem, 1.8vw, 1.5rem);
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
}
html { scroll-padding-top: 1rem; }
body { line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--primary-dark); text-underline-offset: .2em; }
.app-shell, .app-body, .side-panel, .side-content, .pane, .editor,
.route-text, .route-item, .result, .prefs, .news-group, .field,
.auth-card, .welcome-card, .dialog { min-width: 0; }
.pane, .editor, .field, .side-content { max-width: 100%; }
.pane p, .editor p, .news-item, .result p, .alert,
.route-meta, .auth-foot { overflow-wrap: anywhere; }
.prefs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
input:not([type]), input[type=text], input[type=email], input[type=password],
input[type=search], input[type=number], input[type=tel], input[type=url],
select, textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: .7rem .85rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}
input:not([type]):focus, input[type=text]:focus, input[type=email]:focus,
input[type=password]:focus, input[type=search]:focus, input[type=number]:focus,
input[type=tel]:focus, input[type=url]:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgb(33 100 214 / 12%);
}
input::placeholder, textarea::placeholder { color: #8392a6; }
.field { gap: .45rem; margin-bottom: 1rem; }
.field > span { font-size: .8rem; font-weight: 650; color: #405773; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
.btn, .btn.small, .chip-button, .icon-button, .location-chip, .pill {
    min-height: 44px;
}
.btn { padding: .65rem 1rem; border-radius: 12px; font-weight: 650; }
.btn.primary { background: var(--primary); box-shadow: 0 3px 10px rgb(33 100 214 / 16%); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 5px 16px rgb(33 100 214 / 22%); }
.btn.outline { background: #fff; border-color: var(--border-strong); }
.btn.link { box-shadow: none; }
.btn.small { padding: .5rem .8rem; font-size: .85rem; }
.chip-button { padding: .4rem .65rem; border-radius: 9px; }
.chip-button.icon-only, .icon-button { width: 44px; min-width: 44px; padding: .5rem; }
.btn:disabled, .chip-button:disabled { opacity: .5; }
.segmented { padding: 4px; background: #eaf0f7; border: 1px solid #e1e8f1; border-radius: 13px; }
.segmented button, .segmented.compact button { min-width: 0; min-height: 44px; line-height: 1.3; }
.segmented button.active { background: #fff; color: var(--brand); box-shadow: 0 2px 5px rgb(18 45 77 / 8%); }
.pill { padding: .5rem .7rem; border-radius: 11px; font-size: .84rem; }

/* Clear product hierarchy, from the brand to the page to the individual journey. */
.app-shell { overflow: clip; }
.app-header {
    min-height: 76px;
    gap: 1rem;
    padding: calc(.75rem + env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) .75rem max(1.25rem, env(safe-area-inset-left, 0px));
    border-top: 3px solid var(--brand);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 12px rgb(18 45 77 / 4%);
}
.app-header .brand { flex: 0 0 auto; gap: .7rem; }
.app-header .brand-word { height: 26px; }
.location-chip { margin-left: 1rem; max-width: min(32vw, 360px); padding: .5rem .85rem; border-color: var(--border); background: var(--surface-2); }
.location-name { min-width: 0; max-width: none; font-size: .85rem; }
.user-box { flex: 0 1 auto; gap: .65rem; }
.avatar { width: 34px; height: 34px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.avatar-initial { color: var(--primary-dark); background: var(--primary-soft); }
.user-email { max-width: 12rem; font-size: .8rem; }
.btn.header-button { background: var(--surface-2); border-color: var(--border); }
.side-panel { background: #f7f9fc; box-shadow: 6px 0 28px rgb(18 45 77 / 5%); }
.side-content { padding: var(--pad); gap: .75rem; scrollbar-width: thin; scrollbar-color: #c4d1e2 transparent; }
.tabs { margin: 1rem 1rem 0; padding: 5px; gap: 4px; background: #e9eff7; border: 0; border-radius: 14px; }
.tabs button { min-width: 0; min-height: 46px; padding: .5rem; border: 0; border-radius: 10px; font-size: .88rem; }
.tabs button.active { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 6px rgb(18 45 77 / 8%); }
.tabs button:hover:not(.active) { background: rgb(255 255 255 / 50%); }
.tab-badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; border-radius: 6px; background: var(--primary-soft); font-size: .7rem; }
.tab-badge::before { content: none; }
.pane-eyebrow { margin: .2rem 0 .45rem; font-size: .63rem; font-weight: 750; letter-spacing: .12em; color: var(--primary-dark); }
.pane-head { gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pane-head h2, .editor-head h2 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); letter-spacing: -.035em; color: var(--brand); line-height: 1.25; }
.pane-head h2 { flex: 1 1 120px; min-width: 0; }
.pane-intro { font-size: .88rem; margin: -.4rem 0 1.25rem; color: var(--muted); }
.count { font-size: .72rem; font-weight: 600; white-space: normal; }
.section-title { font-size: .65rem; letter-spacing: .1em; }
.hint { font-size: .85rem; margin-bottom: 1rem; color: var(--muted); }
.empty { gap: .8rem; padding: 2rem 1.25rem; border: 1px solid var(--border); background: linear-gradient(160deg, #fff, #f1f6ff); box-shadow: var(--shadow-card); }
.empty-art { width: 62px; height: 62px; border-radius: 20px; background: #e7efff; }
.empty-title { font-size: 1.12rem; line-height: 1.35; }
.empty > p:not(.empty-title) { max-width: 30ch; font-size: .88rem; }
.empty .btn { margin-top: .4rem; }
.route-list, .results { gap: .9rem; }
.route-item, .result { padding: 1rem; border-color: var(--border); box-shadow: var(--shadow-card); }
.route-item { border-left-width: 4px; }
.route-item.selected { background: #fff; border-color: #b8cef3; border-left-color: var(--route-color, var(--primary)); }
.route-name { font-size: .98rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.route-meta { margin-top: .35rem; font-size: .76rem; }
.route-actions { gap: .3rem; margin-top: .85rem; padding-left: 0; padding-top: .7rem; border-top: 1px solid var(--border); }
.route-actions .chip-button { font-size: .78rem; }
.action-bar { padding-top: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); background: rgb(247 249 252 / 97%); backdrop-filter: blur(12px); }
.editor-head { margin-bottom: 1.25rem; }
.editor-details, .prefs { border-radius: 16px; }
.result-head { gap: .4rem; }
.result-head h3 { white-space: normal; line-height: 1.35; overflow-wrap: anywhere; font-size: .96rem; }
.result-main { margin: 1rem 0; gap: .5rem; }
.result-main > div { min-width: 0; }
.eta { font-size: clamp(1.8rem, 3vw, 2.15rem); color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
.distance { color: var(--brand); font-variant-numeric: tabular-nums; }
.result.recommended { border-color: #91ceb1; box-shadow: 0 4px 18px rgb(21 100 61 / 7%); }
.result-pick { width: fit-content; padding: .3rem .65rem; border-radius: 7px; background: #eaf7ef; font-size: .72rem; margin-bottom: .8rem; }
.passable { padding: .65rem; font-size: .83rem; }
.facts { gap: .5rem; margin-top: .75rem; }
.fact { align-items: flex-start; padding: .65rem; font-size: .8rem; }
.fact span { min-width: 0; overflow-wrap: anywhere; }
.rain { gap: .4rem; }
.rain > div { min-width: 0; }
.rain dt { font-size: .68rem; }
.rain dd { font-size: .82rem; }
.vehicles { overflow-x: auto; }
.vehicles table { width: 100%; table-layout: fixed; font-size: .74rem; }
.vehicles th, .vehicles td { overflow-wrap: anywhere; }
summary { min-height: 44px; padding: .65rem 0; cursor: pointer; }
.news-timeline { min-width: 0; }
.news-group { margin-top: 1.25rem; }
.news-place { min-width: 0; }
.news-place-name { min-width: 0; overflow-wrap: anywhere; }
.news-items { min-width: 0; }
.news-item { border: 1px solid var(--border); border-radius: 12px; padding: .9rem; background: #fff; box-shadow: var(--shadow-sm); }
.news-title { font-weight: 650; line-height: 1.45; }
.analysis-meta { font-size: .75rem; }
.recommendation { padding: .85rem; border-left-width: 4px; }
.alert { border-radius: 12px; font-size: .83rem; }

/* Map controls look like part of the app, while preserving Leaflet hit areas. */
.map-wrap { overflow: hidden; }
.map-fab { width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); }
.usage-meter { min-width: 0; width: min(220px, calc(100% - 80px)); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.map-tools { max-width: calc(100% - 24px); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.map-tool { min-width: 0; min-height: 48px; padding: .4rem .55rem; }
.map-tip { border-radius: 12px; padding: .6rem .85rem; max-width: calc(100% - 88px); }
.leaflet-bar { border-radius: 12px !important; overflow: hidden; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; }
.leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; color: var(--brand); }
.auth-page, .welcome { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px)); }
.auth-card, .welcome-card { padding: clamp(1.4rem, 4vw, 2.25rem); border-radius: 24px; border-color: rgb(255 255 255 / 85%); box-shadow: var(--shadow-lg); }
.auth-subtitle { color: var(--brand); font-size: 1.2rem; }
.auth-foot { line-height: 1.6; }
.dialog { max-width: calc(100vw - 2rem); border-radius: 20px; }

@media (min-width: 1600px) { :root { --panel-width: 480px; --pad: 1.5rem; } }
@media (max-width: 1100px) {
    .user-email { display: none; }
    .location-chip { margin-left: .5rem; max-width: 32vw; }
}
@media (min-width: 761px) and (max-width: 900px) {
    :root { --panel-width: 380px; --pad: 1rem; }
    .app-header { gap: .65rem; padding-left: 1rem; padding-right: 1rem; }
    .location-off { display: none; }
}
@media (max-width: 760px) {
    :root { --pad: 1rem; }
    .app-header { min-height: 66px; gap: .6rem; padding: calc(.55rem + env(safe-area-inset-top, 0px)) max(.85rem, env(safe-area-inset-right, 0px)) .55rem max(.85rem, env(safe-area-inset-left, 0px)); }
    .app-header .brand-word { height: 22px; }
    .location-chip { flex: 1 1 auto; max-width: none; margin: 0; padding: .4rem .6rem; }
    .location-name { max-width: none; font-size: .78rem; }
    .user-box { flex: 0 0 auto; gap: .4rem; }
    .header-button-text { display: none; }
    .btn.header-button { width: 44px; padding: .5rem; }
    .side-panel { height: 62%; border-radius: 22px 22px 0 0; box-shadow: 0 -5px 24px rgb(18 45 77 / 10%); }
    .sheet-handle { height: 32px; min-height: 32px; }
    .sheet-grip { width: 38px; height: 4px; background: #c4d0df; }
    .tabs { margin: 0 1rem .2rem; }
    .tabs button { min-height: 44px; }
    .side-content { padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); }
    .sheet-collapsed .side-panel { height: auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .pane-head h2, .editor-head h2 { font-size: 1.35rem; }
    .map-fab { right: .75rem; bottom: 1.6rem; }
    .auth-page, .welcome { padding-top: max(1.25rem, env(safe-area-inset-top, 0px)); }
}
@media (max-width: 420px) {
    .app-header { gap: .4rem; }
    .user-box .avatar { display: none; }
    .pane-head { gap: .5rem; }
    .pane-head .btn { font-size: .78rem; padding: .5rem .65rem; }
    .route-item, .result { padding: .85rem; }
    .route-actions { gap: .2rem; }
    .route-actions .chip-button { padding: .35rem .5rem; }
    .route-actions .icon-only { min-width: 40px; width: 40px; }
    .result-head .icon-only { min-width: 40px; width: 40px; }
    .result-head { gap: .25rem; }
    .result-distance { max-width: 42%; }
    .location-name { font-size: .75rem; }
    .tabs button { gap: .3rem; font-size: .8rem; }
    .tab-badge { min-width: 17px; height: 17px; }
    .prefs-grid { gap: .5rem; }
    .auth-card, .welcome-card { border-radius: 20px; }
}
/* A side-by-side layout keeps the map usable when a phone is turned sideways. */
@media (min-width: 600px) and (max-width: 1000px) and (max-height: 560px) {
    :root { --panel-width: 360px; --pad: 1rem; }
    .app-header { min-height: 58px; padding-top: calc(.3rem + env(safe-area-inset-top, 0px)); padding-bottom: .3rem; }
    .app-body { flex-direction: row; }
    .side-panel, .sheet-collapsed .side-panel { width: min(55%, 380px); height: 100%; border-radius: 0; border-right: 1px solid var(--border); }
    .sheet-handle { display: none; }
    .sheet-collapsed .side-content { display: flex; }
    .tabs { margin-top: .6rem; }
    .map-wrap { flex: 1; }
    .map-wrap:has(.map-tools) .map-fab { bottom: 1.6rem; }
}
@media (max-width: 599px) and (max-height: 550px) {
    .side-panel { height: 68%; }
    .app-header { min-height: 58px; padding-top: .3rem; padding-bottom: .3rem; }
    .usage-meter { top: .5rem; right: .5rem; padding: .35rem .5rem; }
    .sheet-handle { height: 26px; min-height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .btn, input, select, textarea, .side-panel { transition: none; }
    .auth-card, .welcome-card, .brand.stacked .brand-logo { animation: none; }
}
@media (max-width: 760px) {
    .app-body.is-editing:not(.registration-mode) .side-panel { height: 75%; }
    .app-body.is-editing.sheet-collapsed:not(.registration-mode) .side-panel { height: auto; }
    .app-body.registration-mode .map-wrap { display: none; }
    .app-body.registration-mode .side-panel { width: 100%; height: 100%; border-radius: 0; border: 0; box-shadow: none; }
    .app-body.registration-mode .sheet-handle { display: none; }
    .app-body.registration-mode .side-content { display: flex; }
    .app-body.registration-mode .side-content { padding-top: 1.25rem; }
}
@media (min-width: 600px) and (max-width: 760px) and (max-height: 560px) {
    .app-body.is-editing:not(.registration-mode) .side-panel,
    .app-body.is-editing.sheet-collapsed:not(.registration-mode) .side-panel { height: 100%; }
}
/* Keep adornments clear of native input text after shared field styling. */
.search { min-width: 0; }
.search input { padding-left: 2.4rem; padding-right: 2.65rem; }
.search-clear { width: 40px; height: 40px; right: .2rem; }
.search-results { max-width: 100%; }
.search-results button { min-height: 48px; padding: .7rem; }
.search-name, .search-locality { overflow-wrap: anywhere; }
.waypoint { gap: .4rem; }
.waypoint-actions { gap: .2rem; }
.waypoint-actions .icon-button { min-width: 40px; width: 40px; min-height: 44px; }
.swatch-button { width: 40px; height: 40px; }
.suggestion { padding: .9rem; box-shadow: var(--shadow-sm); }
.suggestion-head { flex-wrap: wrap; }
.suggestion-head > strong { min-width: 0; overflow-wrap: anywhere; }
.suggestion-best { font-size: .7rem; }
@media (max-width: 420px) {
    .waypoint.via { grid-template-columns: 1.5rem minmax(0, 1fr); }
    .waypoint.via .waypoint-actions { grid-column: 2; justify-content: flex-end; }
}
.rp-drive-icon { background: none; border: 0; }
.rp-drive-position { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; font-size: 20px; line-height: 1; background: #2164d6; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 12px rgb(11 47 87 / 30%); }

/* ==========================================================================
   Create (Automatic / Manual), route check with its options, places and the
   floating vehicle-report and news panels.
   ========================================================================== */

/* Route list: one tap shows a route, one button checks it. */
.route-open { display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.route-open:hover .route-name { color: var(--primary-dark); }
.route-actions .route-analyze { margin-right: auto; }

/* Editor: the two ways to create a route, then the two ways to make one by hand. */
.editor-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
.editor-tabs button { justify-content: center; font-size: .95rem; }
.manual-modes { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
.route-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route-types button { justify-content: center; padding-inline: .35rem; }
.find-route { margin-bottom: 1rem; }
.found-route { display: grid; gap: .5rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid #91ceb1; border-left-width: 4px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.found-route.impassable { border-color: var(--bad-line); background: #fff7f7; }
.found-title { display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--ok-fg); }
.found-route.impassable .found-title { color: var(--bad-fg); }

/* Route check: heading, options, caveats. */
.review-title { min-width: 0; }
.review-title .pane-eyebrow { margin: 0 0 .15rem; }
.review-title h2 { overflow-wrap: anywhere; }
.review-heading { margin: 1.1rem 0 .3rem; font-size: 1rem; color: var(--brand); }
.review-heading + .hint { margin-bottom: .75rem; }
.options { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.option { min-width: 0; padding: .9rem; border: 1px solid var(--border); border-left: 4px solid var(--route-color, var(--primary)); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.option.selected { border-color: #b8cef3; border-left-color: var(--route-color, var(--primary)); box-shadow: 0 0 0 2px rgb(33 100 214 / 28%), var(--shadow-card); }
.option.blocked { background: #fffafa; }
.option-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .7rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.option-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--route-color, var(--primary)); color: #fff; font-size: .82rem; font-weight: 700; }
.option-title { display: grid; gap: .35rem; min-width: 0; }
.option-title strong { font-size: .98rem; line-height: 1.35; color: var(--brand); overflow-wrap: anywhere; }
.option-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.option-badges:empty { display: none; }
.option-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 7px; background: #eef2f7; color: #405773; font-size: .7rem; font-weight: 650; }
.option-badge.best { background: #eaf7ef; color: var(--ok-fg); }
.option-badge.own { background: var(--primary-soft); color: var(--primary-dark); }
.option-time { display: grid; justify-items: end; gap: .1rem; font-size: .78rem; white-space: nowrap; }
.option-eta { font-size: 1.35rem; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
.caveats { display: grid; gap: .3rem; margin: .8rem 0; padding: 0; list-style: none; }
.caveat { display: flex; align-items: flex-start; gap: .5rem; font-size: .83rem; line-height: 1.4; color: #405773; }
.caveat .icon { margin-top: .12rem; }
.caveat span { min-width: 0; overflow-wrap: anywhere; }
.caveat.good { color: var(--ok-fg); }
.caveat.warn { color: #9a3412; }
.caveat.bad { color: var(--danger); font-weight: 600; }
.option-actions { display: flex; align-items: center; gap: .5rem; }
.option-actions .grow { flex: 1; min-width: 0; }
.option-blocked { margin: .55rem 0 0; font-size: .78rem; }
.review .legend { margin-top: 1rem; }

/* Places: switches, the list, and the pins and cards on the map. */
.place-toggles { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0 .75rem; }
.place-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .7rem; border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; color: #405773; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.place-toggle .icon { color: var(--place-color, var(--primary)); }
.place-toggle:hover { border-color: var(--place-color, var(--primary)); }
.place-toggle.on { border-color: var(--place-color, var(--primary)); background: var(--place-color, var(--primary)); color: #fff; }
.place-toggle.on .icon { color: #fff; }
.route-places { margin: 0 0 .75rem; }
.route-places summary { font-weight: 600; font-size: .88rem; }
.route-place-list { display: grid; gap: .25rem; max-height: 18rem; margin: .5rem 0 0; padding: 0; overflow-y: auto; list-style: none; }
.route-place { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .35rem .5rem; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.route-place:hover { background: #eef3fa; }
.route-place-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--place-color, #475569); color: #fff; }
.route-place-text { display: grid; min-width: 0; font-size: .84rem; line-height: 1.35; }
.route-place-text strong { overflow-wrap: anywhere; }
.route-place-text .muted { font-size: .74rem; }
.rp-food { background: var(--place-color, #be185d); }
.rp-food.rp-food-logo { border-color: var(--place-color, #be185d); }
.rp-food.rp-food-large { border-color: #e2e9f2; }
.rp-place-card .rp-food-popup { align-items: flex-start; }
.rp-stop.rp-stop-small { width: 28px; height: 28px; }

/* Vehicle and preferences, folded away under the options. */
.review-prefs { margin-top: 1rem; border-top: 1px solid var(--border); }
.review-prefs > summary { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: #405773; }
.pref-switches { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 .6rem; }
.pref-switch { display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: #405773; font-size: .8rem; cursor: pointer; }
.pref-switch input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.pref-switch:has(input:checked) { border-color: #c9dbf8; background: var(--primary-soft); color: var(--primary-dark); }

/* The two floating buttons: on the map above "my location", and under the instruction while driving. */
.map-fabs { position: absolute; right: .75rem; bottom: 5.9rem; z-index: 500; display: flex; flex-direction: column; gap: .5rem; }
.map-fabs:empty { display: none; }
.map-fab-toggle { display: grid; place-items: center; gap: .1rem; width: 56px; min-height: 56px; padding: .35rem .2rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; color: var(--brand); font-size: .62rem; font-weight: 700; letter-spacing: .01em; box-shadow: var(--shadow-md); cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; }
.map-fab-toggle:hover { background: var(--primary-soft); }
.map-fab-toggle.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.drive-overlay .map-fabs { position: static; }

/* The panel a floating button opens: a card beside the map, a sheet on a phone. */
.floating-panel { position: fixed; top: calc(88px + env(safe-area-inset-top, 0px)); right: 5rem; bottom: 1rem; z-index: 1200; display: flex; flex-direction: column; width: min(420px, calc(100vw - 6rem)); border: 1px solid var(--border); border-radius: 20px; background: #f7f9fc; box-shadow: var(--shadow-lg); overflow: hidden; }
.drive-active .floating-panel { top: calc(1rem + env(safe-area-inset-top, 0px)); }
.floating-close { position: absolute; top: .6rem; right: .6rem; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.floating-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: var(--pad); overflow-y: auto; overscroll-behavior: contain; }
.floating-body .pane-head { padding-right: 3rem; }
.vehicle-table { width: 100%; border-collapse: collapse; font-size: .82rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.vehicle-table th, .vehicle-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.vehicle-table thead th { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: #f1f5fa; }
.vehicle-table tbody th { font-weight: 600; white-space: nowrap; }
.vehicle-table tbody tr:last-child th, .vehicle-table tbody tr:last-child td { border-bottom: 0; }
.vehicle-table tr.current { background: var(--primary-soft); }
.vehicle-note { display: block; font-size: .74rem; }
.vehicle-report .rain { margin-top: .9rem; }

@media (max-width: 760px) {
    .map-fabs { right: .75rem; bottom: 5.2rem; }
    .map-fab-toggle { width: 52px; min-height: 52px; }
    .floating-panel { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 78dvh; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .drive-active .floating-panel { top: auto; }
    .option { padding: .8rem; }
    .option-eta { font-size: 1.2rem; }
}
@media (max-width: 420px) {
    .route-types button { gap: .25rem; font-size: .78rem; }
    .option-pick { gap: .5rem; }
}
@media (min-width: 600px) and (max-width: 1000px) and (max-height: 560px) {
    .floating-panel { top: .5rem; right: 4.5rem; bottom: .5rem; left: auto; width: min(380px, 50vw); max-height: none; border-radius: 18px; border-bottom: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) {
    .place-toggle, .map-fab-toggle { transition: none; }
}

/* Cities along a route: chips on the chosen option and in the news panel, name tags on the map. */
.option-cities { display: grid; gap: .4rem; margin: 0 0 .8rem; padding: .65rem .7rem; border-radius: 12px; background: #f3f7fc; }
.option-cities-label { display: flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #405773; }
.city-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.city-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .3rem .7rem; border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; color: var(--brand); font-size: .8rem; font-weight: 600; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.city-chip:hover { border-color: var(--primary); background: var(--primary-soft); }
.city-chip.on { border-color: var(--primary); background: var(--primary); color: #fff; }
.city-chip b, .rp-city b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 9px; background: var(--accent); color: #3b2600; font-size: .68rem; font-weight: 700; }
.floating-body .city-chips { margin: 0 0 1rem; }
.rp-city-icon { background: none; border: 0; }
.rp-city { position: absolute; left: 0; top: 0; transform: translate(-50%, -135%); display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border: 1px solid var(--brand); border-radius: 999px; background: #fff; color: var(--brand); font: 700 .74rem/1.3 var(--font); white-space: nowrap; box-shadow: 0 2px 8px rgb(11 47 87 / 28%); cursor: pointer; }
.rp-city::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 9px; margin-left: -1px; background: var(--brand); }
.rp-city:hover { background: var(--primary-soft); }
@media (prefers-reduced-motion: reduce) { .city-chip { transition: none; } }

/* The required update prompt sits above everything else in the app. */
.update-backdrop { z-index: 4000; background: rgb(11 27 48 / 72%); }
.update-dialog { max-width: 24rem; border-top: 6px solid var(--primary); }
.update-dialog .update-art { background: var(--primary-soft); color: var(--primary); }
.update-dialog .btn.large { min-height: 52px; font-size: 1rem; }

/* Live road reports: the pins on the map and the list under the options. */
.rp-incident-icon, .rp-tour-icon { background: none; border: 0; }
.rp-flood, .rp-incident { position: relative; }
.rp-incident { width: 32px; height: 32px; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 2px 6px rgb(0 0 0 / 45%); background: #b45309; color: #fff; }
.rp-incident-crash, .rp-incident-road_closed { background: #b91c1c; }
.rp-incident-flooding { background: #1d4ed8; }
.legend-dot.crash { border-radius: 3px; background: #b91c1c; }
.incident-list { display: grid; gap: .35rem; margin: .5rem 0 .25rem; padding: 0; list-style: none; }
.incident { display: flex; align-items: flex-start; gap: .6rem; width: 100%; min-height: 44px; padding: .5rem .6rem; border: 1px solid #f0d9a8; border-radius: 12px; background: #fff8e8; color: #5b3a06; text-align: left; cursor: pointer; }
.incident:hover { border-color: #d9a441; }
.incident.crash { border-color: #f3c2c2; background: #fff1f1; color: #7f1d1d; }
.incident.crash:hover { border-color: #dc2626; }
.incident-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: #b45309; color: #fff; }
.incident.crash .incident-icon { background: #b91c1c; }
.incident-text { display: grid; min-width: 0; font-size: .82rem; line-height: 1.4; overflow-wrap: anywhere; }
.incident-text .muted { font-size: .74rem; }
.review-more { margin-top: .9rem; }
.tour-button { margin: .25rem 0 .5rem; }

/* Motion on the map: traffic creeps along its stretch, water and crashes ripple. */
.rp-traffic-flow { stroke-dasharray: 2 16; animation: rp-flow 1.5s linear infinite; pointer-events: none; }
.rp-traffic-flow-heavy { animation-duration: 2.8s; }
.rp-traffic-flow-standstill { animation-duration: 5s; }
@keyframes rp-flow { to { stroke-dashoffset: -18; } }
.rp-ripple { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #2563eb; opacity: 0; pointer-events: none; animation: rp-ripple 2.4s ease-out infinite; }
.rp-ripple-moderate { background: #d97706; }
.rp-ripple-high, .rp-ripple-crash { background: #dc2626; }
.rp-ripple-severe { background: #7f1d1d; }
@keyframes rp-ripple { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } }

/* The tour of the trouble spots: a ring and a name tag on the map, and what is shown above it. */
.rp-tour-ring { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border: 4px solid var(--tour-color, #dc2626); border-radius: 50%; box-shadow: 0 0 0 3px rgb(255 255 255 / 85%); pointer-events: none; animation: rp-tour-ring 1.3s ease-in-out infinite; }
@keyframes rp-tour-ring { 0%, 100% { transform: scale(.82); opacity: 1; } 50% { transform: scale(1.18); opacity: .55; } }
.rp-tour-callout { position: absolute; left: 0; top: 0; display: grid; gap: .1rem; width: max-content; max-width: min(250px, 70vw); padding: .5rem .7rem; border-radius: 12px; border-left: 5px solid var(--tour-color, #dc2626); background: #fff; color: #0b2f57; font: 500 .78rem/1.35 var(--font); box-shadow: 0 6px 22px rgb(11 47 87 / 30%); transform: translate(-50%, calc(-100% - 40px)); pointer-events: none; animation: rp-tour-in .35s ease-out both; }
.rp-tour-callout strong { font-size: .9rem; }
.rp-tour-place { font-weight: 650; }
.rp-tour-detail { color: #64748b; font-size: .72rem; }
@keyframes rp-tour-in { from { opacity: 0; transform: translate(-50%, calc(-100% - 28px)); } to { opacity: 1; transform: translate(-50%, calc(-100% - 40px)); } }
.rp-tour-glow { animation: rp-tour-glow 1.3s ease-in-out infinite; pointer-events: none; }
@keyframes rp-tour-glow { 0%, 100% { stroke-opacity: .2; } 50% { stroke-opacity: .5; } }
.tour-bar { position: absolute; top: .75rem; left: 50%; z-index: 700; display: flex; align-items: center; gap: .6rem; width: max-content; max-width: calc(100% - 1.5rem); padding: .4rem .45rem .4rem .7rem; border: 1px solid var(--border); border-radius: 14px; background: rgb(255 255 255 / 97%); color: var(--brand); box-shadow: var(--shadow-md); transform: translateX(-50%); }
.tour-count { flex: none; padding: .15rem .45rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tour-text { display: grid; min-width: 0; font-size: .8rem; line-height: 1.3; }
.tour-text strong, .tour-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-text span { color: var(--muted); font-size: .72rem; }
.tour-skip { flex: none; min-height: 40px; padding: .35rem .8rem; border: 0; border-radius: 10px; background: var(--primary); color: #fff; font-size: .8rem; font-weight: 700; cursor: pointer; }
.tour-skip:hover { background: var(--primary-dark); }
.map-wrap:has(.tour-bar) .usage-meter { display: none; }

/* Painting a route by driving it. */
.drive-paint { display: grid; gap: .6rem; margin: 0 0 1rem; padding: .8rem; border: 1px solid var(--border); border-radius: 14px; background: #f3f7fc; }
.drive-paint h3 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .92rem; color: var(--brand); }
.drive-paint .hint, .drive-paint .small-text, .drive-paint .route-status { margin: 0; }
.drive-paint .waypoints { margin: 0; }
.rec-dot { display: inline-block; width: 10px; height: 10px; margin-right: .4rem; border-radius: 50%; background: #94a3b8; vertical-align: middle; }
.rec-dot.live { background: #dc2626; animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.map-tool-status { display: flex; align-items: center; padding: 0 .6rem; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #2b3a4d; white-space: nowrap; }
.rp-track-dot { filter: drop-shadow(0 1px 3px rgb(0 0 0 / 40%)); }

/* Four floating buttons need the room of two columns where the map is short. */
@media (max-width: 760px), (max-height: 620px) {
    .map-fabs { display: grid; grid-template-columns: repeat(2, auto); justify-items: end; direction: rtl; }
    .map-fabs > * { direction: ltr; }
    .drive-overlay .map-fabs { display: flex; direction: ltr; }
}
/* The motion on the map is what was asked to be seen (where the trouble is), so it also plays on a
   device set to reduce motion, where the tour used to jump and nothing rippled. */

/* The map says so while a route is being checked or prepared: a still card until the tour starts. */
.map-loading { position: absolute; inset: 0; z-index: 650; display: grid; place-items: center; padding: 1rem; background: rgb(244 247 251 / 55%); pointer-events: none; }
.map-loading-card { display: grid; justify-items: center; gap: .35rem; max-width: 18rem; padding: 1.1rem 1.4rem; border: 1px solid var(--border); border-radius: 18px; background: #fff; color: var(--brand); text-align: center; box-shadow: var(--shadow-lg); }
.map-loading-card strong { font-size: 1rem; }
.map-loading-card span:last-child { font-size: .8rem; color: var(--muted); }
.map-wrap:has(.map-loading) .map-tip { display: none; }

/* A way's card is a button: say so. */
.option-view { display: flex; align-items: center; gap: .4rem; width: 100%; min-height: 40px; margin: .7rem 0 0; padding: .45rem .7rem; border: 1px dashed var(--border-strong); border-radius: 10px; background: #f7f9fc; color: var(--primary-dark); font-size: .8rem; font-weight: 650; text-align: left; cursor: pointer; }
.option-view span { flex: 1; min-width: 0; }
.option-view:hover { border-style: solid; border-color: var(--primary); background: var(--primary-soft); }
.option-view.on { border: 0; min-height: 0; padding: 0; background: none; color: var(--ok-fg); cursor: default; }
.option-view + .caveats { margin-top: .6rem; }

/* The route report: its count on the floating button and the line that opens it. */
.map-fab-toggle { position: relative; }
.fab-badge { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .3rem; border: 2px solid #fff; border-radius: 10px; background: #b91c1c; color: #fff; font-size: .68rem; font-weight: 700; }
.report-link { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; margin: .5rem 0 .25rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--brand); text-align: left; cursor: pointer; }
.report-link:hover { border-color: var(--primary); background: var(--primary-soft); }
.report-link.warn { border-color: #f0d9a8; background: #fff8e8; color: #5b3a06; }
.report-link.crash { border-color: #f3c2c2; background: #fff1f1; color: #7f1d1d; }
.report-link-text { display: grid; flex: 1; min-width: 0; font-size: .82rem; line-height: 1.4; }
.report-link-text span { font-size: .74rem; opacity: .8; }
.draw-check-sub { margin: .7rem 0 0; font-size: .78rem; font-weight: 700; }

/* The chosen way is unmistakable: framed in its colour, tinted, and labelled; the others step back. */
.option.selected { border: 2px solid var(--route-color, var(--primary)); border-left-width: 6px; background: linear-gradient(#eef4ff, #fff 6rem); box-shadow: 0 0 0 3px rgb(33 100 214 / 14%), var(--shadow-card); }
.option:not(.selected) { background: #fbfcfe; box-shadow: none; }
.option:not(.selected) .option-number { border: 2px solid var(--route-color, var(--primary)); background: #fff; color: var(--route-color, var(--primary)); }
.option:not(.selected) .option-eta { color: #405773; }
.option-view.on { display: inline-flex; width: auto; min-height: 30px; padding: .25rem .75rem; border: 0; border-radius: 999px; background: var(--route-color, var(--primary)); color: #fff; font-weight: 700; cursor: default; }

/* The panel can be put away, and says so: a labelled handle on a phone, a tab on its edge beside the map. */
.sheet-knob { display: none; }
.panel-tab { display: none; }
.route-place-list li { display: flex; align-items: center; gap: .4rem; }
.route-place-list .route-place { flex: 1; min-width: 0; }
.route-place-go { flex: none; order: 2; }
.rp-drive-position { transition: transform .3s linear; }
.rp-place-go { display: block; width: 100%; margin-top: .6rem; }
.rp-place-go[hidden] { display: none; }
@media (max-width: 760px) {
    /* Just a chevron: down to put the panel away, up to bring it back. The whole strip takes the tap. */
    .sheet-handle { height: auto; min-height: 36px; padding: .3rem 0 .15rem; }
    .sheet-knob { display: grid; place-items: center; width: 44px; height: 22px; border-radius: 999px; background: #e6edf7; color: #405773; animation: sheet-nudge 1.5s ease-in-out 2; }
    .sheet-handle:active .sheet-knob { background: #d3e2fb; }
    .sheet-collapsed .sheet-knob { background: var(--primary); color: #fff; }
}
@media (max-width: 599px) and (max-height: 550px) {
    .sheet-handle { min-height: 30px; padding: .15rem 0; }
}
@keyframes sheet-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
@media (min-width: 761px), (min-width: 600px) and (max-height: 560px) {
    .side-panel { position: relative; }
    .panel-tab { position: absolute; top: 50%; right: -24px; z-index: 5; display: grid; place-items: center; width: 24px; height: 68px; padding: 0; border: 1px solid var(--border); border-left: 0; border-radius: 0 12px 12px 0; background: #fff; color: var(--primary-dark); box-shadow: 4px 0 12px rgb(18 45 77 / 12%); transform: translateY(-50%); cursor: pointer; }
    .panel-tab:hover { background: var(--primary-soft); }
    .app-body.panel-hidden .side-panel { width: 0; min-width: 0; border-right: 0; box-shadow: none; }
    .app-body.panel-hidden .side-content { display: none; }
    .app-body.registration-mode .panel-tab { display: none; }
}
@media (max-width: 760px) { .leaflet-container.rp-touring .leaflet-control-zoom { display: none; } }

/* The driver's view while driving: the map is turned and leaned back by map.js; what stands on it stays upright. */
.map-host.rp-driver-view { position: relative; overflow: hidden; background: #dfe7ee; }
.map-host.rp-driver-view .map { position: absolute; max-width: none; transform-origin: 50% 50%; transition: transform .7s linear; will-change: transform; }
.map-host.rp-driver-view::after { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 24%; background: linear-gradient(#dfe7ee 0%, rgb(223 231 238 / 88%) 38%, rgb(223 231 238 / 0%)); pointer-events: none; }
.rp-heading-up .leaflet-control-container { display: none; }
.rp-heading-up .rp-flood-icon > *, .rp-heading-up .rp-incident-icon > *, .rp-heading-up .rp-food-icon > * { rotate: var(--rp-bearing, 0deg); transition: rotate .7s linear; }
.rp-heading-up .leaflet-popup-content-wrapper { rotate: var(--rp-bearing, 0deg); transform-origin: 50% calc(100% + 20px); }
.rp-heading-up .leaflet-popup-tip-container { display: none; }
.rp-map-credit { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 0 5px; background: rgb(255 255 255 / 80%); color: #333; font-size: 11px; line-height: 1.5; }
.rp-map-credit a { color: #0078a8; text-decoration: none; }

/* Analyze: the one or two ways to go. Each card has its own color and glow so that which is which is
   read before any word is: blue for the fastest way, green for the way that fits the settings. What
   is wrong on a way is said inside it, in red and amber. The glow and the pulses are the message, so
   they also play on a device set to reduce motion. */
.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: .35rem .1rem; }
.choices-note { margin: .8rem 0 .4rem; font-size: .78rem; }
.choice {
    --tone: #2563eb; --tone-rgb: 37 99 235; --tone-dark: #1d4ed8; --tone-ink: #12337e; --tone-soft: #e9f1ff;
    position: relative; min-width: 0; padding: .95rem; border: 2px solid rgb(var(--tone-rgb) / 70%); border-radius: 20px;
    background: linear-gradient(165deg, var(--tone-soft), #fff 58%);
    box-shadow: 0 0 0 1px rgb(var(--tone-rgb) / 10%), 0 0 16px rgb(var(--tone-rgb) / 34%), 0 10px 26px rgb(var(--tone-rgb) / 16%);
    animation: choice-glow 2.6s ease-in-out infinite;
    transition: opacity .25s, filter .25s, transform .25s;
}
.choice.tone-clear { --tone: #16a34a; --tone-rgb: 22 163 74; --tone-dark: #15803d; --tone-ink: #0d4a25; --tone-soft: #e8f9ee; animation-delay: -1.3s; }   /* the two cards breathe in turn, not together */
@keyframes choice-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgb(var(--tone-rgb) / 10%), 0 0 14px rgb(var(--tone-rgb) / 30%), 0 10px 26px rgb(var(--tone-rgb) / 14%); }
    50% { box-shadow: 0 0 0 3px rgb(var(--tone-rgb) / 20%), 0 0 30px rgb(var(--tone-rgb) / 62%), 0 12px 30px rgb(var(--tone-rgb) / 24%); }
}
.choice.selected { border-width: 3px; border-color: var(--tone); padding: calc(.95rem - 1px); }
.choice.blocked { --tone: #64748b; --tone-rgb: 100 116 139; --tone-dark: #475569; --tone-ink: #334155; --tone-soft: #f1f5f9; animation: none; }
.choice.dimmed { opacity: .45; filter: grayscale(.7); animation: none; }
.choice.choosing { animation: choice-chosen 1s ease-in-out infinite; }
.choice.choosing::after { content: ""; position: absolute; inset: -3px; border: 3px solid var(--tone); border-radius: inherit; pointer-events: none; animation: choice-ring 1.2s ease-out infinite; }
@keyframes choice-chosen {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgb(var(--tone-rgb) / 30%), 0 0 26px rgb(var(--tone-rgb) / 60%); }
    50% { transform: scale(1.015); box-shadow: 0 0 0 6px rgb(var(--tone-rgb) / 34%), 0 0 44px rgb(var(--tone-rgb) / 85%); }
}
@keyframes choice-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.07); } }

.choice-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.choice-pick:disabled { cursor: default; }
.choice-emblem { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(145deg, var(--tone), var(--tone-dark)); color: #fff; box-shadow: 0 0 0 4px rgb(var(--tone-rgb) / 16%), 0 6px 14px rgb(var(--tone-rgb) / 40%); }
.choice-title { display: grid; gap: .15rem; min-width: 0; }
.choice-label { font-size: .98rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tone-ink); overflow-wrap: anywhere; }
.choice-headline { font-size: .84rem; line-height: 1.35; color: #405773; overflow-wrap: anywhere; }
.choice-time { display: grid; justify-items: end; gap: .05rem; white-space: nowrap; }
.choice-eta { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--tone-ink); font-variant-numeric: tabular-nums; }
.choice-distance { font-size: .78rem; color: var(--muted); }

.choice-facts { display: grid; gap: .4rem; margin: .85rem 0; padding: 0; list-style: none; }
.choice-fact { display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: .35rem .65rem .35rem .4rem; border: 1px solid transparent; border-radius: 12px; font-size: .86rem; font-weight: 600; line-height: 1.3; }
.choice-fact > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.choice-fact-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; }
.choice-fact.good { background: #f0fbf4; color: var(--ok-fg); }
.choice-fact.good .choice-fact-icon { background: var(--ok-line); color: #fff; }
.choice-fact.info { background: #f1f5f9; color: #405773; }
.choice-fact.info .choice-fact-icon { background: #cbd5e1; color: #1e293b; }
.choice-fact.warn { border-color: #fdba74; background: var(--warn-bg); color: var(--warn-fg); font-weight: 700; }
.choice-fact.warn .choice-fact-icon { --pulse-rgb: 234 88 12; background: #ea580c; color: #fff; animation: fact-pulse 1.5s ease-in-out infinite; }
.choice-fact.bad { border-color: #fca5a5; background: var(--bad-bg); color: var(--bad-fg); font-weight: 700; }
.choice-fact.bad .choice-fact-icon { --pulse-rgb: 220 38 38; background: var(--bad-line); color: #fff; animation: fact-pulse 1.1s ease-in-out infinite; }
@keyframes fact-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--pulse-rgb) / 55%); transform: scale(1); }
    50% { box-shadow: 0 0 0 7px rgb(var(--pulse-rgb) / 0%); transform: scale(1.08); }
}
.choice.dimmed .choice-fact-icon { animation: none; }

.choice-onmap { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; padding: .2rem .7rem; border-radius: 999px; background: rgb(var(--tone-rgb) / 14%); color: var(--tone-ink); font-size: .74rem; font-weight: 700; }
.choice .option-cities { background: rgb(var(--tone-rgb) / 7%); }
.choice-go { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 52px; padding: .6rem 1rem; border: 0; border-radius: 14px; background: linear-gradient(145deg, var(--tone), var(--tone-dark)); color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: .01em; box-shadow: 0 6px 18px rgb(var(--tone-rgb) / 42%); cursor: pointer; transition: transform .12s, box-shadow .12s, filter .12s; }
.choice-go:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 8px 24px rgb(var(--tone-rgb) / 55%); }
.choice-go:active:not(:disabled) { transform: scale(.98); }
.choice-go:disabled { cursor: default; }
.choice:not(.choosing) .choice-go:disabled { background: #cbd5e1; color: #475569; box-shadow: none; }
.choice-save { display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem; color: var(--tone-ink); }
@media (max-width: 420px) {
    .choice { padding: .8rem; border-radius: 18px; }
    .choice.selected { padding: calc(.8rem - 1px); }
    .choice-pick { gap: .5rem; }
    .choice-emblem { width: 40px; height: 40px; border-radius: 13px; }
    .choice-label { font-size: .88rem; }
    .choice-eta { font-size: 1.3rem; }
}

/* A way was chosen: the map says which one, in the color of its card, until drive mode takes over. */
.choice-banner {
    --tone: #2563eb; --tone-rgb: 37 99 235; --tone-dark: #1d4ed8;
    position: absolute; top: .75rem; left: 50%; z-index: 710; display: flex; align-items: center; gap: .6rem;
    width: max-content; max-width: calc(100% - 1.5rem); padding: .5rem .5rem .5rem .6rem; border: 2px solid rgb(255 255 255 / 85%); border-radius: 18px;
    background: linear-gradient(145deg, var(--tone), var(--tone-dark)); color: #fff; transform: translateX(-50%);
    box-shadow: 0 0 0 4px rgb(var(--tone-rgb) / 28%), 0 0 34px rgb(var(--tone-rgb) / 70%), var(--shadow-md);
    animation: banner-in .45s cubic-bezier(.2, 1.3, .4, 1) both, banner-glow 1.6s ease-in-out .45s infinite;
}
.choice-banner.tone-clear { --tone: #16a34a; --tone-rgb: 22 163 74; --tone-dark: #15803d; }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, -140%) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes banner-glow {
    0%, 100% { box-shadow: 0 0 0 4px rgb(var(--tone-rgb) / 26%), 0 0 22px rgb(var(--tone-rgb) / 55%), var(--shadow-md); }
    50% { box-shadow: 0 0 0 8px rgb(var(--tone-rgb) / 20%), 0 0 44px rgb(var(--tone-rgb) / 90%), var(--shadow-md); }
}
.choice-banner-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgb(255 255 255 / 22%); }
.choice-banner-text { display: grid; min-width: 0; font-size: .74rem; line-height: 1.35; }
.choice-banner-text strong { font-size: .92rem; letter-spacing: .03em; text-transform: uppercase; }
.choice-banner-text span { opacity: .95; overflow-wrap: anywhere; }
.choice-banner-cancel { flex: none; min-height: 40px; padding: .35rem .8rem; border: 1px solid rgb(255 255 255 / 70%); border-radius: 11px; background: rgb(255 255 255 / 16%); color: #fff; font-size: .8rem; font-weight: 700; cursor: pointer; }
.choice-banner-cancel:hover { background: rgb(255 255 255 / 30%); }
/* The host pressed Start and is choosing the way: said over the map on every rider's phone. */
.ride-picking { position: absolute; top: .75rem; left: 50%; z-index: 705; display: flex; align-items: center; gap: .55rem; width: max-content; max-width: calc(100% - 1.5rem); padding: .55rem .95rem; border: 1px solid #b8cef3; border-radius: 999px; background: #fff; color: var(--primary-dark); font-size: .9rem; font-weight: 700; transform: translateX(-50%); box-shadow: var(--shadow-md); animation: banner-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.map-wrap:has(.ride-toast) .ride-picking { top: 5.2rem; }
.map-wrap:has(.ride-picking) .usage-meter { display: none; }

/* A rider of the group ride has something to say: drops in over the map, rings, and leaves by itself. */
.ride-toast {
    --rider-color: #16a34a;
    position: absolute; top: .75rem; left: 50%; z-index: 720; display: flex; align-items: center; gap: .65rem;
    width: max-content; max-width: calc(100% - 1.5rem); min-height: 56px; padding: .45rem .95rem .45rem .5rem; border: 3px solid var(--rider-color); border-radius: 999px;
    background: #fff; color: var(--text); text-align: left; cursor: pointer; transform: translateX(-50%);
    box-shadow: 0 0 0 4px rgb(255 255 255 / 70%), var(--shadow-lg);
    animation: banner-in .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.ride-toast.urgent { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-fg); }
.ride-toast-emoji { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); font-size: 1.5rem; line-height: 1; animation: ride-toast-ring 1s ease-in-out infinite; }
.ride-toast-text { display: grid; min-width: 0; font-size: .78rem; line-height: 1.3; color: var(--muted); }
.ride-toast-text strong { color: var(--text); font-size: 1rem; }
.ride-toast.urgent .ride-toast-text, .ride-toast.urgent .ride-toast-text strong { color: var(--bad-fg); }
.ride-toast-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ride-toast-ring { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(12deg) scale(1.1); } }
.map-wrap:has(.ride-toast) .tour-bar, .map-wrap:has(.ride-toast) .choice-banner { top: 5.2rem; }
.map-wrap:has(.ride-toast) .usage-meter { display: none; }

/* The stop of the tour sits right under the banner. */
.map-wrap:has(.choice-banner) .tour-bar { top: 5.4rem; }
.map-wrap:has(.choice-banner) .usage-meter { display: none; }
@media (max-width: 760px) { .map-wrap:has(.choice-banner) .tour-bar { top: 6.6rem; } }

.clear-flash { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 1rem; background: rgb(22 163 74 / 14%); pointer-events: none; animation: clear-fade .3s ease-out both; }
.clear-flash-card { display: grid; justify-items: center; gap: .4rem; max-width: 19rem; padding: 1.4rem 1.6rem; border: 2px solid #16a34a; border-radius: 22px; background: #fff; color: #0d4a25; text-align: center; box-shadow: 0 0 0 6px rgb(22 163 74 / 20%), 0 0 60px rgb(22 163 74 / 75%), var(--shadow-lg); animation: clear-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.clear-flash-card strong { font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; }
.clear-flash-card span:last-child { font-size: .84rem; color: #405773; }
.clear-flash-icon { --pulse-rgb: 22 163 74; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(145deg, #22c55e, #15803d); color: #fff; animation: fact-pulse 1.1s ease-in-out infinite; }
@keyframes clear-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes clear-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

/* Ride out: the button on a saved route, and the Ride button beside the map while a ride is on. */
.chip-button.ride-out { border-color: #bbe5c9; background: #f0fbf4; color: #15803d; font-weight: 700; }
.chip-button.ride-out:hover:not(:disabled) { border-color: #16a34a; background: #dcfce7; color: #14532d; }
.chip-button.ride-out.on { border-color: #16a34a; background: #16a34a; color: #fff; }
.map-fab-toggle.ride-fab { border-color: #16a34a; color: #15803d; box-shadow: 0 0 0 3px rgb(22 163 74 / 16%), var(--shadow-md); }
.map-fab-toggle.ride-fab:hover { background: #f0fbf4; }
.map-fab-toggle.ride-fab.active { border-color: #15803d; background: #16a34a; color: #fff; }
.map-fab-toggle.ride-fab .fab-badge { background: #15803d; }
.dialog p strong { overflow-wrap: anywhere; }

/* The price tag inside a button: how many requests one press spends (see ApiCost.razor). It takes
   the color of the button it sits in, so it reads on a filled and on an outlined one alike. */
.api-cost { display: inline-flex; align-items: center; gap: .1rem; flex: none; height: 1.25rem; min-width: 1.25rem; padding: 0 .38rem; margin-left: .15rem; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: .68rem; line-height: 1; letter-spacing: 0; vertical-align: middle; }
.api-cost b { font-weight: 800; font-variant-numeric: tabular-nums; }
.api-cost.soft { border-style: dashed; opacity: .85; }
.map-tool .api-cost { position: absolute; top: 3px; right: 3px; margin: 0; height: 1.05rem; min-width: 1.05rem; padding: 0 .25rem; font-size: .6rem; }
.map-tool:has(.api-cost) { position: relative; }

/* Refresh is a button you can see, not a link you have to find. */
.refresh-button { flex: none; }
.refresh-button .icon { transition: transform .5s ease; }
.refresh-button:hover .icon, .refresh-button:active .icon { transform: rotate(180deg); }
.chip-button.refresh-button { border-color: #c9dbf8; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.analysis-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

/* One dropdown for a filter: a native select dressed up (the city of the news)... */
.pick { display: flex; align-items: center; gap: .5rem; min-height: 46px; margin: 0 0 .75rem; padding: 0 .75rem; border: 1px solid var(--border-strong); border-radius: 12px; background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.pick:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(26 95 208 / 16%); }
.pick select { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0; background: none; color: var(--brand); font-size: .9rem; font-weight: 650; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.pick .icon:last-child { pointer-events: none; color: #5a6778; }

/* ...and one that holds several switches (the kinds of places). */
.dropdown { position: relative; margin: 0 0 .9rem; }
.dropdown-face { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 46px; padding: 0 .75rem; border: 1px solid var(--border-strong); border-radius: 12px; background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.dropdown.open .dropdown-face { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(26 95 208 / 16%); }
.dropdown-text { flex: 1; min-width: 0; overflow: hidden; color: var(--brand); font-size: .9rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-list { display: grid; gap: .15rem; margin: .4rem 0 0; padding: .35rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-md); list-style: none; transform-origin: top; animation: drop-in .2s ease-out both; }
.dropdown-item { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .3rem .55rem; border-radius: 10px; color: #405773; font-size: .86rem; cursor: pointer; transition: background-color .12s; }
.dropdown-item:hover { background: #eef3fa; }
.dropdown-item.on { color: var(--brand); font-weight: 650; }
.dropdown-item input { width: 18px; height: 18px; margin: 0; accent-color: var(--place-color, var(--primary)); }
.dropdown-item:not(.on) .route-place-icon { background: #e2e8f0; color: #475569; }
.dropdown-item-text { flex: 1; min-width: 0; }
@keyframes drop-in { from { opacity: 0; transform: scaleY(.92) translateY(-4px); } to { opacity: 1; transform: none; } }

/* News: one fold per town. */
.folds { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.fold { min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.fold.open { border-color: #c9dbf8; box-shadow: 0 0 0 2px rgb(33 100 214 / 12%), var(--shadow-sm); }
.fold-head { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 52px; padding: .5rem .75rem; border: 0; background: none; color: var(--brand); text-align: left; cursor: pointer; }
.fold-head:hover { background: var(--surface-2); }
.fold-name { flex: 1; min-width: 0; font-size: .95rem; font-weight: 650; overflow-wrap: anywhere; }
.fold-head .count { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 .4rem; border-radius: 12px; background: var(--accent); color: #3b2600; font-size: .72rem; font-weight: 700; }
.fold.quiet .fold-head .count { background: #e5e7eb; color: #4b5563; }
.fold.quiet .fold-name { color: #5a6778; font-weight: 600; }
.fold-head .news-dot { flex: none; position: static; margin: 0; }
.fold-body { display: grid; gap: .6rem; margin: 0; padding: .1rem .75rem .8rem; list-style: none; animation: fold-in .25s ease-out both; }
.fold-body .news-items { margin: 0; padding: 0; }
.fold-body .news-none { margin: 0; }
.fold-map { justify-self: start; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* The first-time settings step (SetupPanel.razor). */
.setup { display: grid; gap: .9rem; min-width: 0; padding: 1.1rem; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(165deg, #fff, #f1f6ff); box-shadow: var(--shadow-card); animation: rise-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.setup-head { display: flex; align-items: center; gap: .8rem; }
.setup-head h3 { font-size: 1.3rem; letter-spacing: -.03em; color: var(--brand); }
.setup-head p { font-size: .82rem; color: var(--muted); }
.setup-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(145deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 6px 16px rgb(26 95 208 / 30%); }
.setup h4 { margin: .3rem 0 -.3rem; font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #405773; }
.setup-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.setup-tile { display: grid; justify-items: center; gap: .35rem; min-height: 84px; padding: .7rem .3rem; border: 2px solid var(--border); border-radius: 14px; background: #fff; color: #5a6778; font-size: .8rem; font-weight: 650; line-height: 1.25; text-align: center; cursor: pointer; transition: transform .15s, border-color .15s, background-color .15s, color .15s, box-shadow .15s; }
.setup-tile:active { transform: scale(.96); }
.setup-tile.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); box-shadow: 0 4px 12px rgb(26 95 208 / 16%); }
.setup-tile.on .icon { animation: pop .3s ease-out; }
.setup .place-toggles { margin: 0; }
.setup-done { margin-top: .4rem; }

/* The pointer on the Settings button: shown once, so the choices are known to be changeable. */
.map-fab-toggle.nudge { border-color: var(--primary); animation: fab-nudge 1.4s ease-in-out infinite; }
@keyframes fab-nudge {
    0%, 100% { box-shadow: 0 0 0 0 rgb(26 95 208 / 50%), var(--shadow-md); }
    50% { box-shadow: 0 0 0 10px rgb(26 95 208 / 0%), var(--shadow-md); }
}
.fab-tip { position: absolute; top: 50%; right: calc(100% + 12px); width: max-content; max-width: min(13rem, 60vw); padding: .5rem .7rem; border-radius: 12px; background: var(--brand); color: #fff; font-size: .78rem; font-weight: 650; letter-spacing: 0; line-height: 1.35; text-align: left; box-shadow: var(--shadow-md); transform: translateY(-50%); animation: tip-in .35s cubic-bezier(.2, 1.3, .4, 1) both; pointer-events: none; }
.fab-tip::after { content: ""; position: absolute; top: 50%; left: 100%; border: 7px solid transparent; border-left-color: var(--brand); transform: translateY(-50%); }
@keyframes tip-in { from { opacity: 0; transform: translate(8px, -50%) scale(.9); } to { opacity: 1; transform: translateY(-50%); } }

/* A little life: things arrive rather than appear. Light and quick, and it plays on every device. */
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.side-content > .pane, .side-content > .editor, .floating-body > .pane { animation: rise-in .32s cubic-bezier(.2, .8, .2, 1) both; }
.route-list > li, .folds > li, .ride-members > li, .route-place-list > li, .incident-list > li { animation: rise-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.route-list > li:nth-child(2), .folds > li:nth-child(2), .ride-members > li:nth-child(2), .incident-list > li:nth-child(2) { animation-delay: .05s; }
.route-list > li:nth-child(3), .folds > li:nth-child(3), .ride-members > li:nth-child(3), .incident-list > li:nth-child(3) { animation-delay: .1s; }
.route-list > li:nth-child(4), .folds > li:nth-child(4), .ride-members > li:nth-child(4), .incident-list > li:nth-child(4) { animation-delay: .15s; }
.route-list > li:nth-child(n+5), .folds > li:nth-child(n+5), .ride-members > li:nth-child(n+5), .incident-list > li:nth-child(n+5) { animation-delay: .2s; }
.choices { animation: rise-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.floating-panel { animation: slide-in-right .26s cubic-bezier(.2, .8, .2, 1) both; }
.map-fabs > .map-fab-toggle { animation: pop .3s ease-out both; }
.map-fabs > .map-fab-toggle:nth-child(2) { animation-delay: .04s; }
.map-fabs > .map-fab-toggle:nth-child(3) { animation-delay: .08s; }
.map-fabs > .map-fab-toggle:nth-child(n+4) { animation-delay: .12s; }
.map-fabs > .map-fab-toggle.nudge { animation: pop .3s ease-out both, fab-nudge 1.4s ease-in-out .3s infinite; }
.map-fab-toggle:active, .map-fab:active, .chip-button:active:not(:disabled), .btn:active:not(:disabled) { transform: scale(.96); }
.map-fab-toggle, .map-fab, .chip-button { transition: transform .12s, background-color .12s, color .12s, border-color .12s, box-shadow .12s; }
.route-item { transition: transform .18s, box-shadow .18s, border-color .18s; }
.route-item:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(18 45 77 / 10%); }
.route-analyze .icon { transition: transform .2s; }
.route-analyze:hover .icon { transform: scaleY(1.2); }
.map-loading-card, .tour-bar { animation: pop .3s ease-out both; }
.tour-bar { animation-name: tour-in; }
@keyframes tour-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translateX(-50%); } }
.empty-art { animation: float 3.2s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.usage-bar i { transition: width .6s cubic-bezier(.2, .8, .2, 1); }

/* Less to read: section labels are gone, so the headings sit a little closer to the top. */
.pane-head { margin-bottom: .75rem; }
.review .analysis-meta { margin-bottom: .25rem; }

/* Phones and small tablets. */
@media (max-width: 760px) {
    .floating-panel { animation-name: slide-in-up; }
    /* The pointer sits above its button: beside it there is no room. */
    .fab-tip { top: auto; right: 0; bottom: calc(100% + 12px); transform: none; animation-name: tip-in-up; }
    .fab-tip::after { top: 100%; left: auto; right: 20px; border-left-color: transparent; border-top-color: var(--brand); transform: none; }
    .pane-head h2, .editor-head h2 { font-size: 1.25rem; }
    .route-item:hover { transform: none; }
}
@keyframes tip-in-up { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 380px) {
    .setup { padding: .85rem; }
    .setup-tile { min-height: 76px; font-size: .74rem; }
    .route-actions .chip-button.ride-out { padding-inline: .5rem; }
    .choice-banner-text span { display: none; }
}
/* Tablets in portrait: the panel should not squeeze the map. */
@media (min-width: 761px) and (max-width: 1024px) {
    :root { --panel-width: 360px; }
    .floating-panel { width: min(380px, calc(100vw - 6rem)); }
}
.panel-tools { display: flex; align-items: stretch; gap: .5rem; margin: 0 0 .75rem; }
.panel-tools .pick { flex: 1; min-width: 0; margin: 0; }
.panel-tools .refresh-button { min-height: 46px; margin-left: auto; }
/* A phone fits two big buttons in a row: Analyze and Ride out share the first, the small ones follow. */
@media (max-width: 480px) {
    .route-actions .route-analyze, .route-actions .ride-out { flex: 1 1 0; justify-content: center; min-height: 44px; margin-right: 0; }
    .route-actions .ride-out { order: 1; }
    .route-actions .route-analyze { order: 0; }
    .route-actions > :not(.route-analyze):not(.ride-out) { order: 2; }
    .route-actions::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
}

/* Joining a ride by its code, the cities of an analyzed route, and News while there is none to show. */
.join-ride { margin-top: .75rem; border-style: dashed; color: #15803d; }
.join-ride:hover:not(:disabled) { border-color: #16a34a; background: #f0fbf4; color: #14532d; }
.empty .join-ride { width: auto; }
.code-input { width: 100%; min-height: 56px; margin: .2rem 0 .6rem; padding: .4rem .6rem; border: 2px solid var(--border-strong); border-radius: 14px; background: #fff; color: var(--brand); font-size: 1.6rem; font-weight: 800; letter-spacing: .3em; text-align: center; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.code-input::placeholder { color: #c3ccd9; letter-spacing: .3em; }
.code-input:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px rgb(26 95 208 / 18%); }
.route-cities { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .74rem; color: var(--primary-dark); overflow-wrap: anywhere; }
.route-cities .icon { flex: none; }
.map-fab-toggle:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.map-fab-toggle:disabled:hover { background: #fff; }
.dialog-art.friendly { background: var(--primary-soft); color: var(--primary-dark); }

/* A phone that has not installed the app yet: offered once, and again a week after "Not now". */
.install-backdrop { z-index: 1350; }
.install-dialog { text-align: center; }
.install-mark { display: block; margin: 0 auto .6rem; border-radius: 14px; background: #fff; box-shadow: var(--shadow-md); animation: pop .35s ease-out both; }
.install-steps { display: grid; gap: .45rem; margin: .2rem 0 1rem; padding: 0; list-style: none; counter-reset: install; text-align: left; }
.install-steps li { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: .92rem; counter-increment: install; }
.install-steps li::before { content: counter(install); flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: .78rem; font-weight: 700; }
.install-steps li span { flex: 1; }
.install-steps .icon { flex: none; color: var(--primary-dark); }

/* The suggestions are out: the note carries the one button that searches another way. */
.search-note:has(.btn) { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.search-note:has(.btn) > span { flex: 1; min-width: 0; }
.search-results .search-note .btn { flex: none; align-items: center; width: auto; padding: .4rem .8rem; border: 1px solid var(--primary); border-radius: 9px; background: var(--primary); color: #fff; }
.search-results .search-note .btn:hover:not(:disabled) { background: var(--primary-dark); }

/* My location is read from the GPS, never picked: its chip in the header is a label, not a button.
   "Location off" says the GPS could not be read and this is the last known spot. */
.location-chip, .location-chip:hover { border-color: var(--border); background: var(--surface-2); cursor: default; }
.location-chip.off { border-style: dashed; border-color: var(--warn-line); }
.location-chip.off .icon { color: var(--warn-line); }
.location-off { flex: none; color: var(--warn-line); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.map-fab.locating .icon { animation: locating 1s ease-in-out infinite; }
@keyframes locating { 50% { transform: scale(.78); opacity: .4; } }

/* The briefing after Analyze: the four reports of the way on the map come up one by one over it,
   then each is pulled into its button on the right (js/map.js, pullBrief). Room is kept for those
   buttons, so a card never covers the one it is about to fly into. */
.brief { position: absolute; inset: 0; z-index: 720; display: grid; align-content: center; justify-items: center; gap: .55rem; padding: 1rem 4.75rem 1rem 1rem; pointer-events: none; }
.brief-card { --tone: var(--primary); --tone-soft: var(--primary-soft); display: flex; align-items: center; gap: .75rem; width: min(19rem, 100%); padding: .65rem .9rem .65rem .65rem; border: 1px solid var(--border); border-radius: 18px; background: #fff; color: var(--brand); font: inherit; text-align: left; box-shadow: var(--shadow-lg); cursor: pointer; pointer-events: auto; transform-origin: center; animation: brief-in .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.brief-card:nth-child(2) { animation-delay: .22s; }
.brief-card:nth-child(3) { animation-delay: .44s; }
.brief-card:nth-child(4) { animation-delay: .66s; }
.brief-card.good { --tone: #15803d; --tone-soft: #e7f6ec; }
.brief-card.warn { --tone: #b45309; --tone-soft: #fdf2df; }
.brief-card.bad { --tone: #b91c1c; --tone-soft: #fde8e8; }
.brief-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tone-soft); color: var(--tone); }
.brief-text { display: grid; min-width: 0; line-height: 1.3; }
.brief-text strong { font-size: 1rem; color: var(--tone); }
.brief-card:not(.good, .warn, .bad) .brief-text strong { color: var(--brand); }
.brief-text span { overflow: hidden; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.brief-text span:empty { display: none; }
@keyframes brief-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
.map-wrap:has(.brief) .usage-meter, .map-wrap:has(.clear-flash) .usage-meter { display: none; }
@media (max-width: 760px) {
    .brief { gap: .45rem; padding: .75rem 4.4rem .75rem .75rem; }
    .brief-card { padding: .55rem .8rem .55rem .55rem; border-radius: 16px; }
    .brief-icon { width: 40px; height: 40px; border-radius: 12px; }
}

/* "Join a ride": the camera view of the QR scanner sits between the title and the code box. */
.join-dialog .qr-scanner { margin: .2rem 0 .7rem; }
.join-dialog .code-input { min-height: 50px; font-size: 1.35rem; }