/* "Ask a parent to pay" and "My bus was late". Spacing steps of 4/8/12/16/24; radii 12 (chips) and 20 (cards); the main button is the
   dark pill, second-level the outline pill. Every colour is a theme variable, so every style and dark mode follow. */
.pro-parent { margin-top: var(--sp-3); }
.pro-parent .i { color: var(--accent); }

/* the trip page's row, and the "You made it" moment's button (it slides in once the record is there, then stays) */
.late-go { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); min-height: 54px; }
.late-go .late-min, .mo-late .late-min { color: var(--accent); font-weight: 800; }
.late-go .late-min { margin-left: var(--sp-1); }
.mo-late { max-height: 0; min-height: 0; margin-top: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height .3s var(--ease, ease-out), margin-top .3s var(--ease, ease-out), opacity .25s var(--ease, ease-out); }
.mo-late.on { max-height: 64px; min-height: 56px; margin-top: 12px; opacity: 1; pointer-events: auto; }
.mo-late[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mo-late { transition: opacity .15s linear; } }

/* the card screen */
.late-body { display: flex; flex-direction: column; gap: var(--sp-3); padding-bottom: calc(var(--safe-bot) + var(--sp-4)); }
.late-tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 2px 2px var(--sp-1); scrollbar-width: none; }
.late-tabs::-webkit-scrollbar { display: none; }
.late-tabs .chip[aria-selected="true"] { background: var(--text); color: var(--bg); }
.late-img { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1080 / 1350; margin: 0 auto; border-radius: var(--r-card, 20px); background: #15171C; box-shadow: var(--shadow); }
.late-say { margin: var(--sp-2) 0 0; font-size: var(--fs-body, 16px); line-height: 1.5; }
.late-fine { margin: 0; color: var(--muted); font-size: var(--fs-detail, 14px); line-height: 1.5; }
.late-foot { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
@media (max-width: 380px) { .late-img { max-width: 100%; } }