/* Owner bookings (S20): O-18's lists, O-20's form, O-19's money, timeline and notes, O-04's section, and O-15's
   booking bars, which are the design system's BookingBar, copied from its bundle.css with the CSP's classes for the
   columns (no inline styles). The SourceChip and Timeline follow their READMEs. */

/* O-18 */
.bh-ob-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bh-ob-tabs { display: flex; gap: var(--space-1); margin: 0 calc(var(--page-pad) * -1); padding: 0 var(--page-pad); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.bh-ob-tab {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: 0 var(--space-3);
  border-bottom: 3px solid transparent; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.bh-ob-tab:hover { border-bottom-color: var(--line); color: var(--ink-1); }
.bh-ob-tab[aria-current="page"] { border-bottom-color: var(--primary); color: var(--ink-1); font-weight: var(--weight-bold); }
.bh-ob-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--sunken); color: var(--ink-1); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-regular);
}
.bh-ob-tab[aria-current="page"] .bh-ob-count, .bh-ob-home-title .bh-ob-count { background: var(--surface-inverse); color: var(--on-inverse); }
.bh-ob-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.bh-ob-group, .bh-ob-home, .bh-ob-month { display: grid; gap: var(--space-3); min-width: 0; }
.bh-ob-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bh-ob-row {
  display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--card); color: var(--ink-1); text-decoration: none; overflow-wrap: anywhere;
}
.bh-ob-row:hover { border-color: var(--ink-2); }
.bh-ob-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bh-ob-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bh-ob-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.bh-ob-empty { display: grid; gap: var(--space-2); justify-items: start; }
.bh-ob-start { justify-self: start; }

/* SourceChip: the source's colour with its mark */
.bh-src {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--src-direct); color: var(--on-primary); font-size: var(--text-label); line-height: var(--leading-label);
}
.bh-src--manual { background: var(--src-manual); }
.bh-src-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; }

/* O-20 */
.bh-ob-form { display: grid; gap: var(--space-6); min-width: 0; }
.bh-ob-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.bh-ob-languages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bh-ob-overlap { display: flex; align-items: flex-start; gap: var(--space-2); }
.bh-ob-overlap a { color: inherit; font-weight: var(--weight-bold); }

/* O-19 */
.bh-ob-money .bh-ob-sub { display: block; }
.bh-ob-payment dt { padding-left: var(--space-3); }
.bh-ob-due { padding-top: var(--space-2); border-top: 1px solid var(--line); }
.bh-ob-record { display: grid; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-control); background: var(--sunken); }
.bh-ob-record h3:focus { outline: none; }
.bh-ob-notes-foot { align-items: center; }
.bh-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.bh-timeline-item { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.bh-timeline-item:not(:last-child)::before { content: ""; position: absolute; top: 28px; bottom: 0; left: 13px; border-left: 2px solid var(--line); }
.bh-timeline-dot {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink-2);
}
.bh-timeline-item.is-planned .bh-timeline-dot { border-style: dashed; color: var(--ink-3); }
.bh-timeline-item.is-current .bh-timeline-dot { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.bh-timeline-text { display: grid; min-width: 0; padding-top: 2px; }

/* O-15's booking bars over each week's lanes (BookingBar, OwnerCalendarCell) */
.bh-oweek-bars { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--space-1); display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); grid-auto-rows: 20px; row-gap: 2px; pointer-events: none; }
.bh-bar {
  --bar: var(--src-direct);
  position: relative; pointer-events: auto; container-type: inline-size;
  display: flex; align-items: center; gap: var(--space-1); min-width: 0; height: 20px; padding: 0 var(--space-1);
  border-radius: var(--radius-control); background: var(--bar); color: var(--on-primary);
  font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold);
  white-space: nowrap; overflow: hidden;
}
a.bh-bar, a.bh-bar:hover { color: var(--on-primary); text-decoration: none; }
a.bh-bar.is-tentative, a.bh-bar.is-tentative:hover { color: var(--ink-1); }
a.bh-bar:focus-visible { outline: none; box-shadow: var(--focus-ring); z-index: 1; }
.bh-bar--direct { --bar: var(--src-direct); }
.bh-bar--manual { --bar: var(--src-manual); }
.bh-bar-mark { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; font-weight: var(--weight-bold); }
.bh-bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bh-bar-initials { display: none; }
@container (max-width: 76px) {
  .bh-bar-name { display: none; }
  .bh-bar-initials { display: inline; }
}
.bh-bar.is-tentative {
  background: repeating-linear-gradient(135deg, var(--card) 0 4px, color-mix(in srgb, var(--bar) 24%, var(--card)) 4px 8px);
  color: var(--ink-1); outline: 2px dashed var(--bar); outline-offset: -2px;
}
.bh-bar.is-cont-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bh-bar.is-cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bh-bar.is-mark-only { justify-content: center; padding-inline: 2px; pointer-events: none; }
.bh-oweek[data-bar-rows="2"] .bh-ocell { min-height: 86px; padding-bottom: 50px; }
/* The columns, without inline styles (CSP): a stay from the middle of its check-in day to the middle of its check-out day. */
.bh-bar-from-1 { grid-column-start: 1; } .bh-bar-from-2 { grid-column-start: 2; } .bh-bar-from-4 { grid-column-start: 4; }
.bh-bar-from-6 { grid-column-start: 6; } .bh-bar-from-8 { grid-column-start: 8; } .bh-bar-from-10 { grid-column-start: 10; }
.bh-bar-from-12 { grid-column-start: 12; } .bh-bar-from-14 { grid-column-start: 14; }
.bh-bar-to-2 { grid-column-end: 2; } .bh-bar-to-4 { grid-column-end: 4; } .bh-bar-to-6 { grid-column-end: 6; }
.bh-bar-to-8 { grid-column-end: 8; } .bh-bar-to-10 { grid-column-end: 10; } .bh-bar-to-12 { grid-column-end: 12; }
.bh-bar-to-14 { grid-column-end: 14; } .bh-bar-to-15 { grid-column-end: 15; }
.bh-bar-lane-1 { grid-row: 1; } .bh-bar-lane-2 { grid-row: 2; }
/* Phone and touch: each 20 px bar sits in the middle of its 44 px lane, and the whole lane under it is its target. */
@media (max-width: 1023.98px), (pointer: coarse) {
  .bh-oweek[data-bar-rows="2"] .bh-ocell { min-height: 132px; padding-bottom: calc(var(--target-min) * 2); }
  .bh-oweek-bars { bottom: 0; grid-auto-rows: var(--target-min); row-gap: 0; }
  .bh-oweek-bars > .bh-bar { align-self: center; overflow-x: clip; overflow-y: visible; }
  .bh-oweek-bars > .bh-bar::after { content: ""; position: absolute; inset: -12px 0; }
}
/* The legend's samples of a bar */
.bh-ob-key { flex: none; width: 34px; justify-content: center; padding: 0; }