:root {
    --ink: #0F2A3D; --lagoon: #0C7A7C; --lagoon-dark: #095F61; --amber: #E8A33D;
    --alert: #C73E3A; --paper: #F3F6F8; --line: #D5DEE5; --muted: #546574;
    --bs-body-bg: var(--paper); --bs-body-color: var(--ink);
    --bs-link-color-rgb: 12, 122, 124; --bs-link-hover-color-rgb: 9, 95, 97;
}
body { font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.0625rem; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .navbar-brand {
    font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em;
}
.text-muted { color: var(--muted) !important; }
.text-over { color: var(--alert); }
.btn-primary {
    --bs-btn-bg: var(--lagoon); --bs-btn-border-color: var(--lagoon);
    --bs-btn-hover-bg: var(--lagoon-dark); --bs-btn-hover-border-color: var(--lagoon-dark);
    --bs-btn-active-bg: var(--lagoon-dark); --bs-btn-active-border-color: var(--lagoon-dark);
}
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.app-nav { background: var(--ink); }
.app-nav .navbar-brand { color: #fff; }
.nav-user { color: #C9D6DF; }
.form-narrow { max-width: 640px; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; }
.empty-state { background: #fff; border: 1px dashed var(--line); border-radius: 12px; padding: 2.5rem 1.5rem; text-align: center; }

.auth-card { width: 100%; max-width: 420px; margin: 8vh auto 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 2rem; }

/* trip "boarding pass" cards */
.pass { display: flex; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line);
        border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .15s ease; }
.pass:hover { border-color: var(--lagoon); color: inherit; }
.pass-main { flex: 1 1 auto; padding: 1.25rem 1.5rem; min-width: 0; }
.pass-stub { position: relative; flex: 0 0 230px; padding: 1.25rem 1.5rem; border-left: 2px dashed var(--line); }
.pass-stub::before, .pass-stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); }
.pass-stub::before { top: -11px; }
.pass-stub::after { bottom: -11px; }
@media (max-width: 575.98px) {
    .pass { flex-direction: column; }
    .pass-stub { flex-basis: auto; border-left: 0; border-top: 2px dashed var(--line); }
    .pass-stub::before, .pass-stub::after { top: -11px; bottom: auto; }
    .pass-stub::before { left: -11px; }
    .pass-stub::after { left: auto; right: -11px; }
}

/* budget progress bar: teal, amber from 80%, red when over budget */
.meter { height: 12px; background: #E1E9EE; border-radius: 999px; overflow: hidden; }
.meter-lg { height: 24px; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--lagoon); animation: meter-grow .8s ease-out; }
.meter-fill.is-warning { background: var(--amber); }
.meter-fill.is-over { background: var(--alert); }
@keyframes meter-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .meter-fill { animation: none; } .pass { transition: none; } }

.stats dt { font-weight: 400; color: var(--muted); font-size: .95rem; }
.stats dd { margin: 0; font-weight: 600; font-size: 1.25rem; }
.cat-row + .cat-row { margin-top: 1rem; }
.cat-track { height: 8px; background: #E1E9EE; border-radius: 999px; margin-top: .35rem; overflow: hidden; }
.cat-fill { height: 100%; border-radius: 999px; }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; }
.table > :not(caption) > * > * { background: transparent; }