/* iCal import (S30): O-25's cards, O-26, O-19 of an imported booking, and on O-15 Airbnb's and Booking.com's bars
   (A, B), the nights closed there, and the double booking's outline and banner (O15_Conflict, F7_5_O15_AirbnbBars). */

/* The channels' marks: a letter on the channel's colour (design tokens --src-airbnb, --src-booking). */
.bh-imp-mark {
  flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
  background: var(--src-airbnb); color: var(--on-primary); font-size: var(--text-label); line-height: 16px; font-weight: var(--weight-bold);
}
.bh-imp-mark--booking { background: var(--src-booking); }
.bh-sync-head .bh-imp-mark { width: 28px; height: 28px; border-radius: var(--radius-control); font-size: var(--text-body); line-height: 28px; }

/* O-25 */
.bh-sync { display: grid; gap: var(--space-3); min-width: 0; overflow-wrap: anywhere; }
.bh-sync-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bh-sync-head h2 { margin: 0; flex: 1; min-width: 0; }
.bh-sync-form, .bh-sync-link, .bh-sync-ask { display: grid; gap: var(--space-3); min-width: 0; }
.bh-sync-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bh-sync-help summary { min-height: var(--target-min); display: flex; align-items: center; color: var(--primary); font-weight: var(--weight-bold); cursor: pointer; }
.bh-sync-facts { display: grid; gap: var(--space-1); margin: 0; }
.bh-sync-facts dt { font-size: var(--text-small); color: var(--ink-2); }
.bh-sync-facts dd { margin: 0; }
.bh-sync-link code { font-family: var(--font-mono); font-size: var(--text-small); overflow-wrap: anywhere; }

/* O-25's export half (S34): our link for the channel, first in each card, apart from the import half below it */
.bh-sync-export { display: grid; gap: var(--space-3); min-width: 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.bh-sync-export h3 { margin: 0; }
.bh-sync-export .bh-input { font-family: var(--font-mono); font-size: var(--text-small); }

/* O-26 and the O-19 cards */
.bh-conflict-side, .bh-conflict-ways, .bh-conflict-card { display: grid; gap: var(--space-2); justify-items: start; min-width: 0; overflow-wrap: anywhere; }
.bh-conflict-ways h3 { margin: var(--space-3) 0 0; }
.bh-conflict-card { border-color: var(--danger-ink); }
.bh-conflict-card h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.bh-conflict-card h2 > .bh-icon { color: var(--danger-ink); }
.bh-imp-form { display: grid; gap: var(--space-4); min-width: 0; }
.bh-imp-price { display: flex; align-items: center; gap: var(--space-2); }
.bh-imp-price .bh-input { max-width: 12rem; }

/* O-15: the sources' bars, the nights closed on a channel, and a double booking */
.bh-src--airbnb { background: var(--src-airbnb); }
.bh-src--booking { background: var(--src-booking); }
.bh-bar--airbnb { --bar: var(--src-airbnb); }
.bh-bar--booking { --bar: var(--src-booking); }
.bh-bar.has-conflict { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--danger-ink); z-index: 1; }
.bh-bar-conflict { flex: none; }
.bh-ocell .bh-imp-mark { width: 14px; height: 14px; font-size: 11px; line-height: 14px; }
.bh-imp-key { display: inline-grid; place-items: center; }
.bh-conflict-banner { margin-bottom: var(--space-4); }
.bh-conflict-banner .bh-btn { margin-top: var(--space-2); }