/* Busdex UI contract. See AGENTS/CLAUDE.md. */
@font-face {
    font-family: Montserrat;
    src: url('fonts/Montserrat-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
:root {
    --font-ui: 'Montserrat', sans-serif;
    --action-primary: var(--dex-blue, #0879c1);
    --action-primary-hover: #06629d;
    --action-danger: #c81738;
    --action-danger-hover: #a8112d;
    --focus-ring: #0879c1;
    --text-strong: #1c2530;
    --text-muted: #596879;
    --text-info: #0879c1;
    --border-subtle: #dce3eb;
    --surface-muted: #f3f6fa;
    --surface-info: #edf7ff;
    --border-info: #badcf3;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-soft: 0 2px 6px #172d4510;
    --shadow-card: 0 4px 20px #172d4510;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
}
html body, html :is(button, input, select, textarea, pre, code, kbd, samp, .leaflet-container) { font-family: var(--font-ui); }
body { line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }

/* Explicit actions: feature classes remain as behavior hooks, not alternate skins.
   Deliberately outrank legacy page CSS, without changing layout/visibility. */
html .bdx-button,
html .bdx-popup .bdx-popup__button {
    --button-bg: var(--action-primary);
    --button-fg: #fff;
    --button-border: var(--action-primary);
    box-sizing: border-box;
    min-height: 44px;
    padding: 12px 20px !important;
    border: 1px solid var(--button-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--button-bg) !important;
    color: var(--button-fg) !important;
    font-family: var(--font-ui) !important;
    font-size: var(--text-sm) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}
html .bdx-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
html .bdx-button--secondary,
html .bdx-popup .bdx-popup__button--secondary,
html .bdx-popup .bdx-popup__button--quiet {
    --button-bg: #fff;
    --button-fg: var(--action-primary);
    --button-border: var(--action-primary);
}
html .bdx-button--danger,
html .bdx-popup .bdx-popup__button--danger {
    --button-bg: var(--action-danger);
    --button-fg: #fff;
    --button-border: var(--action-danger);
}
html .bdx-button:hover,
html .bdx-popup .bdx-popup__button:hover {
    --button-bg: var(--action-primary-hover);
    --button-border: var(--action-primary-hover);
    transform: none;
    filter: none;
}
html .bdx-button--secondary:hover,
html .bdx-popup :is(.bdx-popup__button--quiet, .bdx-popup__button--secondary):hover { --button-bg: var(--surface-info); }
html .bdx-button--danger:hover,
html .bdx-popup .bdx-popup__button--danger:hover { --button-bg: var(--action-danger-hover); --button-border: var(--action-danger-hover); }
/* User-requested claim actions retain their achievement/reward colours. */
html .bdx-button--gold {
    --button-bg: #d7a20f;
    --button-fg: #40330f;
    --button-border: #d7a20f;
}
html .bdx-button--gold:hover { --button-bg: #e4ad14; --button-border: #b98500; }
html .bdx-button--gold:active { --button-bg: #c9980e; --button-border: #b98500; }
html .bdx-button--success {
    --button-bg: rgba(92, 191, 96, 0.18);
    --button-fg: #2e7d32;
    --button-border: #b9dfbb;
}
html .bdx-button--success:hover { --button-bg: #d0ecd2; --button-border: #82c786; }
html .bdx-button--success:active { --button-bg: #b9dfbb; --button-border: #82c786; }
/* Disclosure actions are deliberately quieter than normal secondary actions. */
html .bdx-button--subtle,
html .bdx-popup .bdx-popup__button--subtle {
    --button-bg: transparent;
    --button-fg: var(--text-muted);
    --button-border: transparent;
    padding: 8px 12px !important;
    font-weight: 600 !important;
}
html .bdx-button--subtle:hover,
html .bdx-popup .bdx-popup__button--subtle:hover {
    --button-bg: var(--surface-muted);
    --button-fg: var(--action-primary);
    --button-border: transparent;
}
/* Small contextual actions, e.g. locating a bus within a route timeline. */
html .bdx-button--compact { min-height: 30px; padding: 5px 12px !important; font-size: 0.8rem !important; }
html .bdx-button:active { transform: none; }
html .bdx-button:disabled,
html .bdx-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
html .bdx-button--icon { width: 44px !important; height: 44px !important; flex: 0 0 44px; padding: 10px !important; }
html .bdx-button--icon-small { width: 28px !important; height: 28px !important; min-height: 28px; flex-basis: 28px; padding: 6px !important; border-radius: 8px !important; }
html .bdx-button--icon-small svg { width: 12px; height: 12px; }
html .bdx-button--block { width: 100%; }
html .bdx-button svg { flex-shrink: 0; }
html .bdx-button[hidden] { display: none; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 3px;
}

/* One field appearance, with persistent labels above inputs. */
html .bdx-input,
html .bdx-popup .np-input {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 16px !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    background: #fff;
    color: var(--text-strong);
    font-family: var(--font-ui);
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5;
    box-shadow: none;
}
html textarea.bdx-input { resize: vertical; min-height: 96px; }
html .float-field .pw-toggle { top: auto; bottom: 7px; transform: none; }
html .float-field.has-toggle > .bdx-input { padding-right: 48px !important; }
html .bdx-input:focus { border-color: var(--focus-ring) !important; box-shadow: 0 0 0 3px #0879c11f; }
html .bdx-input[aria-invalid="true"] { border-color: var(--action-danger) !important; }
html .bdx-input:disabled { background: var(--surface-muted); cursor: not-allowed; opacity: 0.7; }
html .bdx-input::placeholder { color: var(--text-muted); opacity: 1; }
html .bdx-label { display: block; color: var(--text-strong); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--action-primary); }

html .bdx-card {
    box-sizing: border-box;
    border: var(--card-border-width, 1px) var(--card-border-style, solid) var(--card-border-color, var(--border-subtle)) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-5) !important;
    background: #fff;
    box-shadow: var(--shadow-card) !important;
}
html .bdx-card > :is(h2, h3, h4):first-child { margin-top: 0; }
html .bdx-card--compact { padding: var(--space-3) !important; }
html .bdx-card--placeholder { --card-border-width: 2px; --card-border-style: dotted; --card-border-color: var(--text-muted); }
html .bdx-card > :last-child { margin-bottom: 0; }
html .bdx-auth { width: 100%; max-width: 440px; margin: 80px auto 24px; text-align: center; }
.bdx-container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--space-4); box-sizing: border-box; }
.bdx-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.bdx-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bdx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
.bdx-muted { color: var(--text-muted); }
.bdx-section-title { margin: 0 0 var(--space-4); color: var(--text-strong); text-align: left; font-size: var(--text-lg); }
.bdx-help { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.bdx-alert { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-info); border-radius: var(--radius-md); background: var(--surface-info); color: var(--text-info); }
.bdx-alert--danger { background: var(--surface-danger); border-color: var(--border-danger); color: var(--action-danger); }
.bdx-alert--success { background: var(--surface-success); border-color: var(--border-success); color: var(--text-success); }
/* Compound widgets share tokens while preserving selection and progress states. */
html .settings-app .settings-group > .settings-link-row:first-of-type { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
html .settings-app .settings-group > .settings-link-row:last-of-type { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
html .settings-app .settings-group-title { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
html .settings-app .settings-group { margin-bottom: var(--space-6); }
html .settings-toggle input:checked + .settings-toggle-slider { background: var(--action-primary); }
html .bdx-card:is(.active, .fr-request-card--incoming, .fr-suggestion-card) { border-color: var(--border-info) !important; }
html .bdx-card.archived { background: var(--surface-muted); }
@media (prefers-reduced-motion: reduce) {
    html .bdx-button, html .bdx-input, html .bdx-popup .bdx-popup__button { transition: none; }
}