/* 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. */
/* RELLENO NEGRO, NO FANTASMA. `2p` y `2r` lo dibujan sólido: 66px, radio 20px,
   #0A0A0C, blanco 700/20px. Era un `btn--ghost` gris y quedaba como el control menos
   importante del cajón cuando es el único irreversible.
   Gana a `.btn--ghost` por ORDEN DE FUENTE y no por especificidad — las dos reglas
   son (0,1,0) y este fichero se carga después de `app.css` en `index.html`. Si
   alguien invierte ese orden, el botón vuelve a ser gris sin que nada falle, así que
   un test afirma el orden de los `<link>`. */
.trip-end__ask {
  width: 100%;
  height: 66px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-tile);
  background: var(--ink-black);
  color: var(--paper);
  font: 700 20px var(--font);
  box-shadow: 0 8px 22px rgba(10, 10, 12, 0.22);
}

/* 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.
 *
 * THE TWO BOXES ARE MADE IDENTICAL HERE (BE3). `.btn--primary` brings
 * `font: 700 20px`, `height: 66px` and `width: 100%` from the shared sheet, and at
 * half width "Yes, I'm done" wrapped to three lines and overflowed the shape. The
 * label is now "Done" (copy.js) and the type is matched to the ghost beside it.
 *
 * `padding` and a reserved transparent border are the same border-box arithmetic
 * the read-back's action row needed: under `box-sizing: border-box` a
 * `flex-basis: 0` cannot resolve below the item's own padding + border, so the
 * ghost's `0 20px` + 1px border floors its basis above the primary's and two rules
 * that both say `flex: 1 1 0` measure ~30px apart. Asserted on the computed
 * widths, not on this rule. */
.trip-end__row > .btn {
  flex: 1 1 0;
  min-height: var(--touch-min);
  width: auto;
  min-width: 0;
  height: 52px;
  font: 600 16px var(--font);
  padding: 0 12px;
  border: 1px solid transparent;
}


/* El subtítulo permanente de `2p`/`2r`, bajo el botón y fuera del confirm. */
.trip-end__sub {
  margin-top: 10px;
  font: 500 12.5px/1.5 var(--font);
  color: var(--ink-faint);
}