/* (u-activation) The guided first set-up (js/activation.js). It reuses setup v2's sheet (.su-sheet, .su-top, .su-h, .su-p, .su-go,
   .su-card, .su-busy); these are only the few extras. 44 px targets; light and dark follow the theme variables. */
.act-sheet .act-field { display: block; margin: 4px 0 10px; }
.act-sheet .act-field input { min-height: 52px; font-size: 17px; }
.act-sheet .act-picked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .06); margin: 8px 0 14px; min-width: 0; }
.act-sheet .act-picked .grow { min-width: 0; display: grid; gap: 2px; }
.act-sheet .act-picked b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.act-sheet .act-picked small { color: var(--muted); font-size: 13px; }
.act-sheet .act-picked .link { min-height: 44px; margin: -14px 0; padding: 0 2px; font-size: 13px; font-weight: 650; vertical-align: baseline; }
.act-sheet .act-pin { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft, color-mix(in srgb, var(--accent) 14%, transparent)); color: var(--accent); }
.act-sheet .act-label { margin: 6px 4px 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.act-sheet .act-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.act-sheet .act-chip { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid var(--line, rgba(128, 128, 128, .28)); background: var(--surface); color: var(--text); font: 650 15px/1 inherit; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; }
.act-sheet .act-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.act-sheet .act-chip:active { transform: scale(.96); }
.act-sheet .act-times .act-chip { flex: 1 1 calc(50% - 8px); min-height: 52px; font-size: 17px; font-variant-numeric: tabular-nums; }
.act-sheet .act-remind { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--surface); }
.act-sheet .act-remind .grow { display: grid; gap: 2px; }
.act-sheet .act-remind small { color: var(--muted); font-size: 13px; }
.act-sheet .act-change { display: block; margin: 10px auto 0; min-height: 44px; font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .act-sheet .act-chip { transition: none; } }
/* (u-day) "Here's your day": one card, a morning row and an afternoon row */
.act-sheet .act-day { gap: 12px; }
.act-sheet .act-day .su-c-big { font-size: 28px; }
.act-sheet .act-row { display: grid; gap: 8px; min-width: 0; }
.act-sheet .act-row + .act-row { padding-top: 14px; border-top: 1px solid var(--line, rgba(128, 128, 128, .22)); }
.act-sheet .act-when { font-size: 13px; font-weight: 750; color: var(--accent); }
.act-sheet .act-times-school .act-wide { flex: 1 1 100%; }
.act-sheet .act-honest { font-size: 12px; }
.act-sheet .act-day .su-c-bus { align-items: flex-start; } .act-sheet .act-day .su-c-bus > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; }

/* (activation_v1) Home: the one big "Set your usual trip" card, shown until a usual trip exists */
.act-usual-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px 16px; margin: 0; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px rgba(0, 0, 0, .09); }
.act-usual-card .act-usual-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--accent-soft, rgba(0, 120, 255, .12)); color: var(--accent, #0a6cff); }
.act-usual-card .grow { display: grid; gap: 3px; min-width: 0; }
.act-usual-card .grow b { font-size: 18px; }
.act-usual-card .grow small { font-size: 14px; opacity: .75; }
.act-usual-card .btn { grid-column: 1 / -1; min-height: 48px; font-size: 17px; width: 100%; }