/* Bookings redesign M10 (#2348) — sheet under 1024px, right panel from 1024px.
   The sheet reuses .modal/.modal-content; this only turns the dialog into a
   bottom sheet across the whole phone-and-tablet range (the shared modal does
   that only below 680px). */
@media (max-width: 1023px) {
  .bk-sheet { align-items: flex-end; padding: 0; }
  .bk-sheet .bk-sheet-content {
    max-width: 100%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    --sheet-y: 26px;
  }
}

.bk-detail-body { min-width: 0; }

.bk-panel-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-lg);
}
.bk-panel-title:focus { outline: none; }

/* Selected row: a bar, not colour alone — aria-current carries the meaning. */
[data-bookings-row][aria-current="true"] {
  box-shadow: inset 3px 0 0 var(--trip-main-accent, currentColor);
}

/* Desktop layout (#2649, D52/D53/D62): the list is the flexible column, the To
   decide pane a fixed ~360px one on the right, sticky. Below 1024px the pane is
   a block above the chips (order: -1) that folds. It is created by
   renderBookingsTab() and absent after the trip (.bk-layout-solo). */
.bk-title { display: none; margin: 0 auto 0 0; font-size: var(--fs-xl); font-weight: 700; }
.bk-layout { display: flex; flex-direction: column; }
.bk-list-col { min-width: 0; }
.bk-decide { order: -1; margin-bottom: var(--space-lg); border: 2px solid var(--df-ink); border-radius: var(--radius-md); background: var(--df-panel); }
.bk-decide-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.bk-decide-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--space-xl);
  border: 0;
  background: transparent;
  color: var(--df-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bk-decide-toggle:hover { background: var(--df-chip-fill); }
.bk-decide-count { font-variant-numeric: tabular-nums; color: var(--df-ink-soft); font-weight: 600; }
.bk-decide-chevron { margin-left: auto; font-size: var(--fs-xl); }
.bk-decide-toggle[aria-expanded="false"] .bk-decide-chevron { transform: rotate(-90deg); }
.bk-decide-body { padding: 0 0 var(--space-md); }
.bk-decide-empty { margin: 0; padding: var(--space-md) var(--space-xl); color: var(--df-ink-soft); }
.bk-decide-actions { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-md) var(--space-xl) 0; }
.bk-decide-actions .bk-btn { min-height: var(--tap-min); }
@media (min-width: 1024px) {
  .bk-title { display: block; }
  .bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-3xl); align-items: start; }
  .bk-layout.bk-layout-solo { grid-template-columns: minmax(0, 1fr); }
  .bk-decide {
    order: 0;
    margin-bottom: 0;
    position: sticky;
    top: var(--space-lg);
    max-height: calc(100dvh - 2 * var(--space-lg));
    overflow-y: auto;
    padding-top: var(--space-xl);
  }
  .bk-decide-title { padding: 0 var(--space-xl) var(--space-md); }
}

/* Add sheet (A1, #2352): upload first, then five kind tiles. */
.bk-add-upload { width: 100%; min-height: var(--tap-min); justify-content: center; margin-bottom: var(--space-md); }
.bk-add-drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-lg) var(--space-md); border: 2px dashed var(--border); border-radius: var(--radius-md); background: transparent; color: var(--text); cursor: pointer; text-align: center; }
.bk-add-drop i { font-size: 1.5rem; }
.bk-add-drop-title { font-weight: 600; }
.bk-add-drop-sub { font-size: 0.85rem; color: var(--text-muted); }
.bk-add-forward { margin-bottom: var(--space-md); }
.bk-add-forward-label, .bk-add-type-label { margin: 0 0 var(--space-xs); font-size: 0.85rem; color: var(--text-muted); }
.bk-add-forward-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.bk-add-forward-address { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; user-select: all; }
.bk-add-forward-copy, .bk-add-forward-guest-btn { min-height: var(--tap-min); min-width: var(--tap-min); }
.bk-add-forward-sub { display: block; font-size: 0.85rem; color: var(--text-muted); }
.bk-add-forward-note { margin-top: var(--space-sm); }
.bk-add-forward-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.bk-add-forward-actions .btn-primary, .bk-add-forward-actions .btn-secondary { min-height: var(--tap-min); }
.bk-add-note { margin-bottom: var(--space-md); }
.bk-add-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.bk-add-tile { min-height: var(--tap-min); justify-content: flex-start; }

/* The opened booking (#2355, M5): proof first, then place, cost and who booked.
   Targets are 44px; nothing here relies on colour alone. */
.bk-opened { display: flex; flex-direction: column; gap: var(--space-lg); }
.bk-opened-sub { margin: 0; color: var(--df-ink-soft); }
.bk-ticket-badge {
  align-self: flex-start;
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  background: var(--df-brand);
  color: var(--df-brand-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.bk-ticket-ends { display: flex; align-items: flex-start; gap: var(--space-lg); }
.bk-ticket-end { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.bk-ticket-end-to { text-align: right; }
.bk-ticket-time { font-size: var(--fs-2xl, 1.75rem); font-weight: 800; line-height: 1; }
.bk-ticket-place { color: var(--df-ink-soft); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.bk-ticket-arrow { margin-top: var(--space-xs); }

.bk-proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 2px dashed var(--df-ink);
  border-radius: var(--df-radius-card);
}
.bk-proof-optional { margin: 0; font-size: var(--fs-sm); color: var(--df-ink-soft); }
.bk-proof-label { margin: 0; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--df-ink-soft); }
.bk-proof-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--tap-min);
  padding: 0 var(--space-lg);
  border: 2px solid var(--df-ink);
  border-radius: var(--df-radius-card);
  background: var(--df-panel);
  color: var(--df-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.bk-details { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

.bk-facts { list-style: none; margin: 0; padding: 0; }
.bk-fact {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-sm) 0;
  border: 0;
  border-bottom: 1px solid var(--df-hair);
  background: none;
  color: var(--df-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.bk-fact-link { cursor: pointer; }
.bk-fact-icon { flex: none; color: var(--df-ink-soft); }
.bk-fact-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bk-fact-action { font-weight: 700; text-decoration: underline; }
.bk-fact-btn { min-height: var(--tap-min); border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }

.bk-opened-actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-md); }
.bk-opened-edit { flex: 1; min-height: var(--tap-min); }
.bk-opened-more { min-width: var(--tap-min); min-height: var(--tap-min); }
.bk-opened-menu {
  flex-basis: 100%;
  border: 2px solid var(--df-ink);
  border-radius: var(--df-radius-card);
  background: var(--df-panel);
  overflow: hidden;
}
.bk-opened-menu[hidden] { display: none; }
.bk-menu-item {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-md) var(--space-lg);
  border: 0;
  background: none;
  color: var(--df-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bk-menu-item:hover { background: var(--df-hair); }
.bk-menu-item-danger { color: var(--vn-coral); }

/* D3 proof viewer (#2356): full screen on phones, a large dialog from 1024px. */
.bk-proof-modal .bk-proof-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 960px;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
}
.bk-proof-stage { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; background: var(--df-panel); }
.bk-proof-file { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.bk-proof-actions { display: flex; gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.bk-proof-actions .bk-proof-link { flex: 1; }
@media (min-width: 1024px) {
  .bk-proof-modal .bk-proof-viewer { height: 90vh; height: 90dvh; border-radius: var(--df-radius-card); }
}

/* M6 — Who has booked (#2364). Every photo is the same size; state is ring + tick + words. */
.bk-who-leg { padding: var(--space-md) 0; border-bottom: 1px solid var(--df-hair); }
.bk-who-meta { color: var(--df-ink-soft); margin-bottom: var(--space-sm); }
.bk-who-photos { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.bk-who-photo {
  position: relative;
  box-sizing: border-box;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border-radius: 50%;
  background: var(--df-panel);
  color: var(--df-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-who-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bk-who-photo.booked { border: 2px solid var(--df-ink); }
.bk-who-photo.pending { border: 2px dashed var(--df-ink-soft); opacity: 0.6; }
.bk-who-photo.sel { outline: 2px solid var(--df-ink); outline-offset: 2px; opacity: 1; }
.bk-who-tick {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--df-ink);
  color: var(--df-panel);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-who-line { margin: var(--space-sm) 0 0; }
.bk-who-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.bk-who-btn { min-height: var(--tap-min); }

/* Day list and category chips (#2648, D50/D51). The chips are the Expenses
   .exp-filter classes; this only lets them sit beside the other summary chip.
   A day folds with the hidden attribute: no animation, so nothing to answer in
   the reduced-motion block. */
.bk-summary { flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.bk-summary .bk-filters { margin-bottom: 0; max-width: 100%; }
.bk-day { margin-bottom: var(--space-xl); }
.bk-day-heading { margin: 0; }
.bk-day-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--space-xl);
  border: 0;
  border-bottom: 2px solid var(--df-ink);
  background: transparent;
  color: var(--df-ink);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.bk-day-toggle:hover { background: var(--df-chip-fill); }
.bk-day-label { flex: 1; min-width: 0; }
.bk-day-count { font-variant-numeric: tabular-nums; color: var(--df-ink-soft); font-weight: 600; }
.bk-day-chevron { font-size: var(--fs-xl); }
.bk-day-toggle[aria-expanded="false"] .bk-day-chevron { transform: rotate(-90deg); }

/* Opening in place (#2650, D53): from 1024px a booked row opens under itself and
   every To decide line is a disclosure with an arrow at its right end. Folding is
   the hidden state of the content, with no animation, so nothing to answer in the
   reduced-motion block. */
.bk-row-arrow { flex: none; margin-left: var(--space-sm); font-size: var(--fs-xl); }
.bk-row[aria-expanded="true"] .bk-row-arrow { transform: rotate(180deg); }
.bk-inline { padding: var(--space-md) var(--space-xl) var(--space-lg); border-bottom: 1px solid var(--df-hair); }
li.is-expanded > .bk-row { box-shadow: inset 3px 0 0 var(--trip-main-accent, currentColor); }