/* The end-of-trip control.
 *
 * A SEPARATE STYLESHEET ON PURPOSE. `app.css` belongs to the location session
 * and this directory is shared — two sessions editing one stylesheet is what
 * produced the mixed commit in `HANDOFF_CAPTURE_SESSION_2.md` §1.5. Everything
 * here is namespaced `.trip-end*`, uses only `tokens.css` variables and reuses
 * `app.css`'s `.btn` classes without redefining them.
 *
 * Loaded AFTER app.css so the shared `.btn` rules are already in place.
 */

.trip-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-m);
  padding: 22px var(--pad-screen) 26px;
}

/* The ask is DELIBERATELY QUIET. Ending the trip is a real destination but it is
 * not what the home screen is for, and a control styled like the tiles above it
 * would collect accidental taps — the thing N5 of the prediction forbids. */
.trip-end__ask {
  color: var(--ink-faint);
  font-weight: 600;
}

/* THE `[hidden]` GUARD, and it is load-bearing.
 *
 * `[hidden]` is only a UA `display: none` at (0,1,0)-equivalent weight, so the
 * `display: flex` below — a class selector, also (0,1,0) but later in the
 * cascade — OUTRANKS it and the confirm renders permanently. CLAUDE.md records
 * this exact defect shipping before. The `[hidden]` rule here is (0,2,0) and
 * wins outright.
 *
 * `tests/test_session_end_control.py` asserts this rule exists, because the
 * failure is silent: nothing throws, the markup is correct, and the shopper
 * simply sees a confirmation dialog that was never opened.
 */
.trip-end__confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-m);
  width: 100%;
  padding: 18px var(--pad-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--paper-warm);
  box-shadow: var(--shadow-card);
}

.trip-end__confirm[hidden] {
  display: none;
}

.trip-end__q {
  font: 700 17px var(--font);
  color: var(--ink);
  text-align: center;
}

.trip-end__note {
  font: 500 14px var(--font);
  color: var(--ink-muted);
  text-align: center;
}

.trip-end__row {
  display: flex;
  gap: var(--gap-m);
  width: 100%;
}

/* Both buttons carry the full touch target. The cancel is listed FIRST and is
 * the visually heavier of the two reads: backing out is the safe outcome and
 * should be the easy one. */
.trip-end__row > .btn {
  flex: 1 1 0;
  min-height: var(--touch-min);
}