/* Harkham — the customer's own page (OPS-128). Only what exists on this surface.
 *
 * ⚠️ EVERY TOKEN AND EVERY SHARED PRIMITIVE LIVES IN `/shared/tokens.css`, WHICH `index.html` LOADS
 * BEFORE THIS FILE — the contract `/complete` and `/invoice` already keep. DO NOT DECLARE A CUSTOM
 * PROPERTY OR A HEX COLOUR HERE: `src/sharedDesignTokens.test.ts` fails on either, and this file is on
 * its list.
 */

/* The two sign-in cards: one column a phone can read without turning sideways. */
.narrow { max-width: 30rem; margin-left: auto; margin-right: auto }

/* One booking in the list — a row a customer reads, not a table cell (the completion page's reason). */
.bookingrow {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.bookingrow:last-child { border-bottom: 0 }
.bookingrow .bname { font-weight: 600; color: var(--ink) }
.bookingrow .bmeta { font-size: var(--t-small); color: var(--ink3); margin-top: 2px }
.bookingrow .bval { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }

/* The history: what happened, in order. */
.history { list-style: none; margin: 0; padding: 0 }
.history li { padding: var(--s2) 0; border-bottom: 1px solid var(--line) }
.history li:last-child { border-bottom: 0 }

@media (max-width: 767px) {
  .bookingrow { flex-direction: column; gap: var(--s2) }
  .bookingrow .bval { text-align: left }
}