/* Navigation chooser + "Did you make it?" card (static/cb-trip.js). Grey, square; colour only on the answer buttons. */
.trip-sheet { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 700px) { .trip-sheet { align-items: center; } }
.trip-card, .trip-ask { position: relative; background: #181818; color: #e4e4e7; border: 1px solid #333; box-shadow: 0 8px 30px rgba(0,0,0,0.45); font-family: var(--font, system-ui, sans-serif); }
.trip-card { width: 100%; max-width: 380px; padding: 1.25rem; }
.trip-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.875rem; }
.trip-apps { display: grid; gap: 0.5rem; margin-bottom: 0.875rem; }
.trip-app { min-height: 2.75rem; border: 1px solid #333; background: #101010; color: #e4e4e7; font: 600 0.9375rem var(--font, inherit); cursor: pointer; text-align: left; padding: 0 0.875rem; }
.trip-app:hover, .trip-app:focus-visible { border-color: #9a9a9a; background: #222; }
.trip-app.is-default { border-color: #9a9a9a; }
.trip-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: #a3a3a3; margin-top: 0.375rem; cursor: pointer; }
.trip-check input { accent-color: #a3a3a3; width: 1rem; height: 1rem; }
.trip-note { font-size: 0.75rem; color: #8a8a8a; margin-top: 0.5rem; line-height: 1.4; }
.trip-x { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: 0; color: #a3a3a3; font-size: 1.25rem; cursor: pointer; padding: 0.25rem 0.5rem; }
.trip-ask { position: fixed; z-index: 1150; left: 50%; transform: translateX(-50%); bottom: 4.5rem; width: calc(100% - 2rem); max-width: 420px; padding: 1rem 1rem 0.75rem; }
.trip-q { font-size: 0.9375rem; line-height: 1.4; padding-right: 1.5rem; margin-bottom: 0.75rem; }
.trip-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.trip-btns button { min-height: 2.75rem; background: transparent; font: 700 0.9375rem var(--font, inherit); cursor: pointer; }
.trip-yes { color: #22c55e; border: 1px solid rgba(34,197,94,0.45); }
.trip-no { color: #ef4444; border: 1px solid rgba(239,68,68,0.45); }
.trip-yes:hover { background: rgba(34,197,94,0.08); } .trip-no:hover { background: rgba(239,68,68,0.08); }
.trip-more { display: flex; gap: 1rem; justify-content: center; margin-top: 0.5rem; }
.trip-more button { background: none; border: 0; color: #a3a3a3; font-size: 0.8125rem; text-decoration: underline; cursor: pointer; padding: 0.25rem; }
.nav-app-hint { display: block; font-size: 0.75rem; color: var(--text-tertiary, #7a7a7a); margin-top: 0.375rem; }
.nav-app-hint button { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
body.light-mode .trip-card, body.light-mode .trip-ask { background: #fff; color: #18181b; border-color: #d4d4d4; box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
body.light-mode .trip-app { background: #f9f9f9; color: #18181b; border-color: #d4d4d4; }
body.light-mode .trip-app:hover, body.light-mode .trip-app.is-default { border-color: #71717a; background: #f3f3f3; }
body.light-mode .trip-check, body.light-mode .trip-more button, body.light-mode .trip-x { color: #52525b; }