/* Apartments (S05): O-05 to O-11, the apartment switcher (O-03) and the apartments on Home (O-04). The design
   system's form parts that the shared styles don't have yet (TextInput, Stepper, RadioCard, SaveBar and Checklist)
   are copied here from its bundle.css, as they are; the lead may move them to app.css. The chip tones are in app.css. */

/* Text that people type can be one long word: it wraps anywhere rather than scroll the page sideways. */
.bh-wrap { overflow-wrap: anywhere; }
.bh-mono { font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--leading-mono); }
.bh-flush { padding-inline: 0; justify-self: start; }
.bh-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bh-hp { display: none; }

/* The refusal's reason on O-06, with the admin's line breaks */
.bh-reason-text { font-weight: var(--weight-bold); white-space: pre-line; }

/* A task page: back link and title on top, the form, and the save bar (or O-05's action bar) where the tab bar was */
.bh-task-head { display: grid; gap: var(--space-2); }
.bh-back {
  display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start; min-height: var(--target-min);
  margin-left: calc(var(--space-1) * -1); padding-right: var(--space-2); font-weight: var(--weight-bold); text-decoration: none; overflow-wrap: anywhere;
}
.bh-apt-form { display: grid; gap: var(--space-8); }
.bh-section { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.bh-section > legend { padding: 0; margin-bottom: var(--space-1); }
.bh-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-t-h3 { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-shell:has(.bh-savebar, .bh-actionbar) .bh-tabbar { display: none; }
.bh-shell:has(.bh-savebar, .bh-actionbar) .bh-main { padding-bottom: 0; }

/* TextInput */
.bh-field-label { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); color: var(--ink-1); }
.bh-input {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0;
  padding: 11px var(--space-3); border: 1px solid var(--border-input); border-radius: var(--radius-control);
  background: var(--card); color: var(--ink-1); font-family: inherit; font-size: var(--text-body); line-height: var(--leading-body);
}
.bh-input:hover { border-color: var(--ink-2); }
.bh-input:focus { border-color: var(--primary); outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.bh-input[aria-invalid="true"] { border-color: var(--danger-ink); box-shadow: inset 0 0 0 1px var(--danger-ink); }
.bh-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--danger-ink), var(--focus-ring); }
.bh-textarea { min-height: 96px; resize: vertical; }
.bh-select[aria-invalid="true"] { border-color: var(--danger-ink); box-shadow: inset 0 0 0 1px var(--danger-ink); }
.bh-input-unit-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bh-input-unit-row > .bh-input { flex: 0 1 160px; }
.bh-unit { flex: none; color: var(--ink-2); }
.bh-count { justify-self: end; color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); font-variant-numeric: tabular-nums; }
.bh-count.is-over { color: var(--danger-ink); font-weight: var(--weight-bold); }
.bh-note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-1); }
.bh-note > .bh-icon { color: var(--info-ink); }
.bh-note--done { font-weight: var(--weight-bold); color: var(--success-ink); }
.bh-note--done > .bh-icon { color: var(--success-ink); }
.bh-reason { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-reason > .bh-icon { color: var(--info-ink); }
.bh-error-summary { display: grid; gap: var(--space-2); padding: var(--space-4); border: 2px solid var(--danger-ink); border-radius: var(--radius-card); background: var(--card); }
.bh-error-summary-title { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--danger-ink); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-error-summary ul { display: grid; gap: var(--space-1); padding-left: var(--space-5); list-style: disc; font-size: var(--text-small); line-height: var(--leading-small); }
.bh-error-summary a { color: var(--danger-ink); }

/* RadioCard */
.bh-radio-cards { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.bh-radio-cards > legend { padding: 0; margin-bottom: var(--space-2); }
.bh-radio-card {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-width: 0;
  border: 1px solid var(--border-input); border-radius: var(--radius-card); background: var(--card); cursor: pointer;
}
.bh-radio-card:hover { border-color: var(--ink-1); }
.bh-radio-card:has(:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); }
.bh-radio-card:has(:focus-visible) { box-shadow: var(--focus-ring); }
.bh-radio {
  -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
  border: 1px solid var(--border-input); border-radius: var(--radius-pill); background: var(--card); cursor: pointer;
}
.bh-radio:checked { border: 7px solid var(--primary); }
.bh-radio:focus-visible { box-shadow: none; }
.bh-radio-card-body { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--space-1); }
.bh-radio-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.bh-radio-card-title { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-radio-card-amount { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bh-radio-card-desc { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }

/* Checkbox rows (amenities, messengers) */
.bh-tick { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 48px; padding: var(--space-3) 0; cursor: pointer; }
.bh-tick + .bh-tick, .bh-tick-box > * + .bh-tick { border-top: 1px solid var(--line); }
.bh-tick-input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.bh-tick-text { display: grid; gap: 2px; min-width: 0; }
.bh-tick-box, .bh-amenity-group { min-width: 0; margin: 0; padding: var(--space-1) var(--space-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-tick-nested { padding: 0 0 var(--space-3) calc(24px + var(--space-3)); }
.bh-amenities { display: grid; gap: var(--space-3); }
.bh-amenity-legend { float: left; width: 100%; padding: var(--space-3) 0 var(--space-1); color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold); }
.bh-amenity-legend + .bh-tick { clear: both; }

/* Stepper */
.bh-steppers { padding: 0 var(--space-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-stepper-row { padding: var(--space-3) 0; }
.bh-stepper-row + .bh-stepper-row { border-top: 1px solid var(--line); }
.bh-stepper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: var(--target-min); }
.bh-stepper-text { display: grid; flex: 1 1 140px; min-width: 0; }
.bh-stepper-name { font-weight: var(--weight-bold); }
.bh-stepper-control { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.bh-stepper-btn {
  -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center; width: var(--target-min); height: var(--target-min);
  margin: 0; padding: 0; border: 1px solid var(--border-input); border-radius: var(--radius-pill); background: var(--card); color: var(--ink-1);
  font-family: inherit; font-size: var(--text-h2); line-height: 1; cursor: pointer;
}
.bh-stepper-btn:hover { border-color: var(--ink-1); background: var(--sunken); }
.bh-stepper-btn[aria-disabled="true"] { border-color: var(--disabled-bg); background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
.bh-stepper-value { min-width: 3ch; text-align: center; font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.bh-stepper-row .bh-reason { margin-top: var(--space-2); }
.bh-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* SaveBar: sticky at the bottom of a task page */
.bh-savebar {
  position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-3); min-height: var(--shell-actionbar-h); margin: 0 calc(var(--page-pad) * -1);
  padding: var(--space-3) var(--page-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow-overlay);
}
.bh-savebar .bh-save-slot { flex: 1 1 160px; min-width: 0; }
.bh-savebar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 1024px) {
  .bh-savebar { margin: 0; padding-inline: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card) var(--radius-card) 0 0; }
}

/* O-06: head, state banners, checklist, and the action, beside the list from 1024 px */
.bh-overview { display: grid; gap: var(--space-6); }
.bh-apt-head { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.bh-apt-head-text { display: grid; gap: var(--space-2); min-width: 0; }
.bh-slug-form { display: grid; gap: var(--space-3); }
.bh-slug-row > .bh-input { flex: 1 1 160px; }
.bh-slug-row { flex-wrap: wrap; }
.bh-overview-grid { display: grid; gap: var(--space-6); align-items: start; }
.bh-overview-main { display: grid; gap: var(--space-8); min-width: 0; }
.bh-overview-action { display: grid; gap: var(--space-3); }
.bh-overview-unpublish { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bh-overview-unpublish .bh-btn { justify-self: start; }
.bh-progress { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.bh-progress::-webkit-progress-bar { background: var(--line); border-radius: var(--radius-pill); }
.bh-progress::-webkit-progress-value { background: var(--primary); border-radius: var(--radius-pill); }
.bh-progress::-moz-progress-bar { background: var(--primary); border-radius: var(--radius-pill); }
.bh-ck-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-ck-list > li + li { border-top: 1px solid var(--line); }
.bh-ck-row { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); color: var(--ink-1); text-decoration: none; }
.bh-ck-row:hover { background: var(--sunken); color: var(--ink-1); }
.bh-ck-text { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.bh-ck-label { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-ck-done, .bh-ck-state-done { color: var(--success-ink); }
.bh-ck-todo, .bh-ck-chevron { color: var(--ink-3); }
.bh-ck-state-done, .bh-ck-state-todo { font-weight: var(--weight-bold); }
.bh-ck-state-todo { color: var(--ink-2); }
@media (min-width: 1024px) {
  .bh-overview-grid { grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); }
  .bh-overview-main { grid-column: 1; grid-row: 1; }
  .bh-overview-action { grid-column: 2; grid-row: 1; }
}

/* O-10: the maps, their failed state, the nudge buttons and the coordinates */
.bh-map { position: relative; height: 280px; overflow: hidden; border: 1px solid var(--border-input); border-radius: var(--radius-card); background: var(--sunken); }
.bh-map--area { height: 220px; }
.bh-map.leaflet-container { font-family: var(--font-sans); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-map .leaflet-control-attribution { color: var(--ink-2); }
.bh-map .leaflet-control-attribution a { color: var(--primary); }
.bh-map .leaflet-touch .leaflet-bar a, .bh-map .leaflet-bar a { width: var(--target-min); height: var(--target-min); line-height: var(--target-min); }
.bh-map-pin { color: var(--primary); }
.bh-map-pin svg { width: 40px; height: 40px; fill: var(--primary); stroke: var(--on-primary); stroke-width: 1.5; }
.bh-map-area { stroke: var(--map-area-stroke); stroke-width: 2; fill: var(--map-area-fill); fill-opacity: 1; }
.bh-map-failed, .bh-empty {
  display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center;
  border: 1px dashed var(--border-input); border-radius: var(--radius-card); background: var(--sunken);
}
.bh-map-failed > .bh-icon, .bh-empty > .bh-icon { color: var(--ink-2); }
.bh-nudge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.bh-coords { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.bh-coords > legend { padding: 0; margin-bottom: var(--space-1); }
.bh-coords-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 600px) { .bh-nudge { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* O-11: the Telegram @, and the contact card as guests see it */
.bh-at > .bh-input { flex: 1 1 auto; }
.bh-contact-card { display: grid; gap: var(--space-4); }
.bh-contact-block { display: grid; gap: var(--space-2); justify-items: start; }
.bh-messenger { justify-content: flex-start; gap: var(--space-2); font-weight: var(--weight-bold); }

/* O-03: the apartment switcher in the phone app bar, and at the top of the sidebar */
.bh-switcher { position: relative; min-width: 0; }
.bh-appbar > .bh-switcher { flex: 1 1 auto; margin-right: auto; }
.bh-switcher-btn {
  display: flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: var(--target-min);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); color: var(--ink-1);
}
.bh-switcher-btn:hover { background: var(--sunken); }
.bh-switcher-thumb { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-control); background: var(--primary-soft); color: var(--primary); }
.bh-switcher-text { display: grid; min-width: 0; text-align: left; }
.bh-switcher-name { font-weight: var(--weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-switcher-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-switcher-menu { left: 0; right: auto; width: min(320px, calc(100vw - 2 * var(--space-2))); }
.bh-switcher-title { padding: var(--space-2) var(--space-3); color: var(--ink-3); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-switcher-item { align-items: flex-start; }
.bh-switcher-item .bh-switcher-name { white-space: normal; overflow-wrap: anywhere; font-weight: var(--weight-regular); }
.bh-switcher-item[aria-current="true"] .bh-switcher-name { font-weight: var(--weight-bold); }
.bh-switcher-menu > .bh-btn { margin-top: var(--space-2); }
.bh-switcher--wide { flex: none; margin-bottom: var(--space-2); }
.bh-switcher--wide .bh-switcher-btn { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); }
.bh-switcher--wide .bh-switcher-name { white-space: normal; overflow-wrap: anywhere; font-size: var(--text-small); line-height: var(--leading-small); }
.bh-switcher--wide .bh-switcher-menu { width: 100%; }

/* O-04: the member's apartments */
.bh-home-apartments { display: grid; gap: var(--space-3); }
.bh-home-apartments > .bh-btn { justify-self: start; }
.bh-home-list { display: grid; gap: var(--space-3); }
.bh-home-apartment { display: grid; gap: var(--space-2); }
.bh-home-apartment-name { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); overflow-wrap: anywhere; }