/* css/tokens.css */
/* bookhome.ge design tokens, v0.3 (2026-10-06).
   Source: docs/design/ux-review.md §D. The UX review computed the contrast ratios noted below;
   keep them at WCAG 2.2 AA (4.5:1 text, 3:1 UI) when changing any value. */

:root {
  /* Colour: brand and text */
  --primary: #1F5F5B;          /* pine; white text 7.4:1 */
  --primary-hover: #174A47;
  --primary-soft: #E3F0EE;
  --ink-1: #1F2328;            /* 15.8:1 */
  --ink-2: #4A5058;            /* 8.1:1 */
  --ink-3: #646A71;            /* meta text; 5.5:1 on white, 5.0:1 on --sunken */
  --on-primary: #FFFFFF;

  /* Colour: surfaces and lines */
  --page: #FAF8F5;
  --card: #FFFFFF;
  --sunken: #F4F4F2;
  --border-input: #838990;     /* controls; 3.5:1 on white, >= 3.0:1 on every tinted background (v0.2) */
  --line: #E4E4E0;             /* decorative dividers only */

  /* Colour: status (ink on its own background) */
  --success-ink: #1E6B3A;  --success-bg: #E6F4EA;   /* 5.7:1 */
  --warning-ink: #8A4B00;  --warning-bg: #FFF3DC;   /* 6.2:1 */
  --danger-ink:  #A3262A;  --danger-bg:  #FDECEC;   /* 6.4:1; white on --danger-ink 7.3:1 */
  --danger-hover: #8A1F23;                          /* pressed/hover for destructive buttons */
  --info-ink:    #1F4E8C;  --info-bg:    #E8F0FB;   /* 7.2:1 */

  /* Colour: booking sources (always paired with a letter or glyph, never colour alone) */
  --src-direct: var(--primary);   /* D */
  --src-manual: #4A5058;          /* M */
  --src-airbnb: #C13550;          /* A; white text 5.4:1 */
  --src-booking: #003580;         /* B; white text 11.5:1 */

  /* Focus: 2 px white offset + 2 px primary ring; invert on dark surfaces */
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--primary);
  --focus-ring-inverse: 0 0 0 2px var(--ink-1), 0 0 0 4px #FFFFFF;

  /* Overlays and dark surfaces (v0.2) */
  --scrim: rgba(31, 35, 40, 0.5);                   /* behind dialogs and sheets */
  --shadow-overlay: 0 8px 24px rgba(31, 35, 40, 0.18);
  --surface-inverse: #1F2328;                       /* photo viewer, snackbars */
  --on-inverse: #FFFFFF;

  /* Map (v0.2): approximate-area circle, D6 */
  --map-area-fill: rgba(227, 240, 238, 0.6);       /* --primary-soft at 60% */
  --map-area-stroke: var(--primary);

  /* Type: Noto Sans + Noto Sans Georgian, weights 400 and 700 only, no italics, never uppercase */
  --font-sans: "Noto Sans", "Noto Sans Georgian", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* system fonts; nothing extra to self-host */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Type scale, mobile (size / line height) */
  --text-display: 28px;  --leading-display: 36px;
  --text-h1: 24px;       --leading-h1: 32px;
  --text-h2: 20px;       --leading-h2: 28px;
  --text-h3: 17px;       --leading-h3: 24px;   /* bold */
  --text-body: 16px;     --leading-body: 24px; /* ru, ka: 26px */
  --text-small: 14px;    --leading-small: 20px; /* ka: 22px */
  --text-label: 13px;    --leading-label: 18px; /* smallest size for words */
  --text-cal: 12px;      --leading-cal: 16px;   /* digits only */
  --text-amount: 32px;   --leading-amount: 40px; /* tabular figures */
  --text-mono: 15px;     --leading-mono: 22px;   /* addresses, codes */

  /* Spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --page-pad: 16px;            /* 24px from 768, 48px from 1200 */

  /* Radii */
  --radius-control: 8px;       /* inputs, buttons */
  --radius-card: 12px;
  --radius-sheet: 16px;        /* bottom-sheet top corners */
  --radius-pill: 999px;        /* chips */

  /* Targets */
  --target-min: 44px;          /* primary actions, picker days, calendar cells; never below 24px */

  /* Motion */
  --dur-press: 100ms;
  --dur-fade: 200ms;
  --dur-sheet-in: 250ms;
  --dur-sheet-out: 200ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* Breakpoints: 360 · 600 · 768 (two-month picker) · 1024 (sidebar) · 1200 (max width) */
@media (min-width: 768px) {
  :root {
    --page-pad: 24px;
    --text-display: 36px; --leading-display: 44px;
    --text-h1: 28px;      --leading-h1: 36px;
    --text-h2: 22px;      --leading-h2: 30px;
  }
}
@media (min-width: 1200px) {
  :root { --page-pad: 48px; }
}

:lang(ru), :lang(ka) { --leading-body: 26px; }
:lang(ka) { --leading-small: 22px; }

/* Reduced motion: no movement; opacity fades stay (ux-review §D, Motion) */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-sheet-in: 0ms; --dur-sheet-out: 0ms; }
}

/* v0.3 additions (2026-10-06). Additions only: no value above changes. */
:root {
  /* Shell (v0.3): the owner dashboard frame, from the owner-shell canvas (owner-shell-system/project/bh.css).
     Slots stack top to bottom: environment strip, act-as banner, app bar. Heights are minimums where
     text can wrap; the tab bar and the action bar add the safe-area inset. */
  --shell-env-h: 28px;               /* S-04 environment strip */
  --shell-actas-h: 56px;             /* A-16 act-as banner */
  --shell-appbar-h: 56px;            /* phone app bar, below 1024px */
  --shell-tabbar-h: 64px;            /* phone tab bar, below 1024px; 5 tabs of 72px at 360px */
  --shell-actionbar-h: 72px;         /* sticky action (save) bar on task pages */
  --shell-sidebar-w: 256px;          /* desktop sidebar, from 1024px; replaces app bar and tab bar */
  --shell-content-max: 960px;        /* dashboard content, left-aligned */
  --shell-content-max-wide: 1200px;  /* wide pages: calendars, grids, tables */

  /* Controls and states (v0.3): requests from the area designers */
  --disabled-bg: #E4E4E0;            /* disabled buttons; --disabled-ink on it 6.4:1 */
  --disabled-ink: #4A5058;
  --neutral-bg: #F4F4F2;             /* neutral chips; --neutral-ink on it 7.4:1; draw a 1px --line edge */
  --neutral-ink: #4A5058;
  --hatch-unavailable: #EDEDEA;      /* unavailable-day hatch; --ink-3 digits keep 4.7:1 over it (4.3:1 over --line) */
  --target-compact: 40px;            /* dense desktop admin rows only; never on phones, never for the main action */
  --text-code: 24px;     --leading-code: 32px;   /* door, lockbox and alarm codes: --font-mono, bold */
  --radius-inline: 4px;              /* marks inside running text: the masked span */
}

/* Email dark (proposed, needs sign-off): dark-mode emails only, never in the product.
   Text 14.9:1 on the page and 12.8:1 on blocks; links 8.7:1 and 7.5:1; button labels in
   --email-dark-page on --email-dark-primary 8.7:1. */
:root {
  --email-dark-page: #161A1D;        /* background */
  --email-dark-card: #22272B;        /* blocks */
  --email-dark-ink: #ECEDEA;         /* text */
  --email-dark-primary: #7CC4BB;     /* links and buttons */
}
/* css/app.css */
/* bookhome.ge base styles on top of tokens.css (a copy of docs/design/tokens.css): fonts, the base elements, and the
   design system's shared components (bh- classes). Each feature keeps its own styles in css/<feature>.css, which it
   registers as a Stylesheet. No inline styles anywhere: the CSP allows stylesheets from our origin only. */

/* Fonts (ADR-020 §18): Noto Sans cut into one file per script, the weight axis kept to 400–700, each file at most 40 KB.
   A page preloads only its language's script (App.razor), and the browser fetches another only for the characters
   that need it. Made from the design system's variable files with fonttools: varLib.instancer wght=400:700 wdth=100,
   then subset to these unicode ranges (Google Fonts' latin, latin-ext, cyrillic and cyrillic-ext, with ₾ in latin).
   "Noto Sans Fallback" is the local Arial (or Roboto) sized to Noto Sans's metrics, so text doesn't shift when the
   font swaps in. */
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BE, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20BD, U+20BF-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-cyrillic.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-cyrillic-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Noto Sans Georgian";
  src: url("../fonts/noto-sans-georgian.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}

@font-face {
  font-family: "Noto Sans Fallback";
  src: local("Arial"), local("Roboto");
  size-adjust: 107.15%;
  ascent-override: 99.77%;
  descent-override: 27.35%;
  line-gap-override: 0%;
}

:root { --font-sans: "Noto Sans", "Noto Sans Georgian", "Noto Sans Fallback", system-ui, sans-serif; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink-1);
  font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body);
  font-weight: var(--weight-regular); font-synthesis: none; letter-spacing: 0;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--primary-hover); text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; letter-spacing: 0; }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
[hidden] { display: none !important; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* Type */
.bh-t-display { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-bold); }
.bh-t-h1 { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: var(--weight-bold); }
.bh-t-h2 { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-bold); }
.bh-muted { color: var(--ink-2); }
.bh-small { font-size: var(--text-small); line-height: var(--leading-small); }
.bh-meta { color: var(--ink-3); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-label { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-hint { color: var(--ink-3); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Icons: Lucide at a 1.5 px stroke at every size */
.bh-icon { flex: none; width: 20px; height: 20px; stroke-width: 1.5; vertical-align: -0.25em; }
.bh-icon * { vector-effect: non-scaling-stroke; }
.bh-icon--16 { width: 16px; height: 16px; }
.bh-icon--24 { width: 24px; height: 24px; }
.bh-spin { animation: bh-spin 1s linear infinite; }
@keyframes bh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bh-spin { animation: none; } }

/* Buttons and links */
.bh-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--target-min); min-width: var(--target-min); max-width: 100%; margin: 0; padding: var(--space-2) var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink-1);
  font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-bold);
  text-align: center; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease);
}
.bh-btn:hover { text-decoration: none; }
.bh-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.bh-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.bh-btn--secondary { background: var(--card); border-color: var(--primary); color: var(--primary); }
.bh-btn--secondary:hover { background: var(--primary-soft); color: var(--primary-hover); }
.bh-btn--tertiary { padding-inline: var(--space-3); color: var(--primary); }
.bh-btn--tertiary:hover { background: var(--primary-soft); color: var(--primary-hover); }
.bh-btn--danger { background: var(--danger-ink); border-color: var(--danger-ink); color: var(--on-primary); }
.bh-btn--danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--on-primary); }
.bh-btn--block { display: flex; width: 100%; }
.bh-btn--small { min-height: var(--target-min); padding: var(--space-1) var(--space-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-btn[aria-disabled="true"] { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
.bh-btn--tertiary[aria-disabled="true"] { background: transparent; border-color: transparent; }
.bh-btn[aria-busy="true"] { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); cursor: progress; }
.bh-arrow-link {
  display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; min-height: var(--target-min);
  font-weight: var(--weight-bold); text-decoration: none;
}

/* Wordmark */
.bh-wordmark {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-bold); color: var(--ink-1); text-decoration: none; white-space: nowrap;
}
/* The mark grows with the name beside it, and never shrinks when the row is tight. */
.bh-mark { flex: none; width: auto; height: 1.15em; }
a.bh-wordmark { display: inline-flex; align-items: center; min-height: var(--target-min); }
a.bh-wordmark, a.bh-wordmark:hover { color: var(--ink-1); text-decoration: none; }

/* Menus: <details> with a <summary> button, so they work without JavaScript */
.bh-menu {
  display: grid; gap: 2px; min-width: 220px; margin: 0; padding: var(--space-2);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay);
}
.bh-menu-pop { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 10; }
.bh-menu-item {
  appearance: none; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--target-min); margin: 0;
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent;
  color: var(--ink-1); text-align: left; text-decoration: none; cursor: pointer;
}
.bh-menu-item:hover { background: var(--sunken); color: var(--ink-1); }
.bh-menu-item[aria-current="true"] { font-weight: var(--weight-bold); }
.bh-menu-item-tick { margin-left: auto; color: var(--primary); }

/* Page column, icon tile, copy field, chip, banner, card and form field */
.bh-page { display: grid; gap: var(--space-4); align-content: start; width: 100%; max-width: 560px; margin: 0 auto; padding: var(--space-8) var(--page-pad) var(--space-10); }
.bh-sys-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-card); background: var(--primary-soft); color: var(--primary); }
.bh-sys-icon--danger { background: var(--danger-bg); color: var(--danger-ink); }
.bh-sys-icon--info { background: var(--info-bg); color: var(--info-ink); }
.bh-copyf {
  padding: var(--space-3); border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--card);
  font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--leading-mono); overflow-wrap: anywhere;
}
.bh-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; padding: 2px 8px; vertical-align: middle;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--neutral-bg); color: var(--neutral-ink);
}
.bh-chip--success { border-color: transparent; background: var(--success-bg); color: var(--success-ink); }
.bh-chip--neutral { border-color: var(--line); background: var(--neutral-bg); color: var(--neutral-ink); }
.bh-chip--info { border-color: transparent; background: var(--info-bg); color: var(--info-ink); }
.bh-chip--primary { border-color: transparent; background: var(--primary-soft); color: var(--primary); }
.bh-chip--warning { border-color: transparent; background: var(--warning-bg); color: var(--warning-ink); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-chip--neutral, .bh-chip--info, .bh-chip--success, .bh-chip--primary { font-size: var(--text-label); line-height: var(--leading-label); }
.bh-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--info-bg); }
.bh-banner > .bh-icon { margin-top: 2px; color: var(--info-ink); }
.bh-banner--error { background: var(--danger-bg); }
.bh-banner--error > .bh-icon { margin-top: 2px; color: var(--danger-ink); }
.bh-banner--warning { background: var(--warning-bg); }
.bh-banner--warning > .bh-icon { margin-top: 2px; color: var(--warning-ink); }
.bh-banner--success { background: var(--success-bg); }
.bh-banner--success > .bh-icon { margin-top: 2px; color: var(--success-ink); }
.bh-banner-body { display: grid; gap: var(--space-1); min-width: 0; }
.bh-banner-title { font-weight: var(--weight-bold); }
.bh-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); }
.bh-field { display: grid; gap: var(--space-2); }
.bh-input--num { font-variant-numeric: tabular-nums; }
.bh-select {
  width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--border-input); border-radius: var(--radius-control);
  background: var(--card); color: var(--ink-1); font-size: var(--text-body); line-height: var(--leading-body);
}

/* Fields: label, error, text input, search (the design system's TextInput and Search) */
.bh-field-label { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); color: var(--ink-1); }
.bh-error { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-small); line-height: var(--leading-small); color: var(--danger-ink); }
.bh-input {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; min-height: var(--target-min); margin: 0;
  padding: var(--space-2) 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);
  transition: border-color var(--dur-press) var(--ease);
}
.bh-input::placeholder { color: var(--ink-3); opacity: 1; }
.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); }
textarea.bh-input { min-height: 96px; resize: vertical; }
.bh-search { position: relative; }
.bh-search > .bh-icon { position: absolute; left: var(--space-3); top: 12px; color: var(--ink-2); pointer-events: none; }
.bh-search > .bh-input { padding-left: var(--space-10); }

/* Icon-only buttons: close, back and copy only. Always with aria-label. */
.bh-icon-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-grid; place-items: center; flex: none;
  width: var(--target-min); height: var(--target-min); margin: 0; padding: 0;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink-1); cursor: pointer;
}
.bh-icon-btn:hover { background: var(--sunken); }

/* Switch: an on/off setting, on <input type="checkbox" role="switch"> */
.bh-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--target-min); cursor: pointer; }
.bh-switch-text { display: grid; min-width: 0; }
.bh-switch-name { font-weight: var(--weight-bold); }
.bh-switch-desc { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-switch-control { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.bh-switch-input { position: absolute; left: 0; top: 50%; width: 44px; height: 24px; margin: -12px 0 0; opacity: 0; cursor: pointer; }
.bh-switch-track { position: relative; flex: none; width: 44px; height: 24px; border-radius: var(--radius-pill); background: var(--border-input); transition: background-color var(--dur-fade) var(--ease); }
.bh-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--card); transition: transform var(--dur-fade) var(--ease); }
.bh-switch-input:checked + .bh-switch-track { background: var(--primary); }
.bh-switch-input:checked + .bh-switch-track::after { transform: translateX(20px); }
.bh-switch-input:focus-visible + .bh-switch-track { box-shadow: var(--focus-ring); }
.bh-switch-state { min-width: 3ch; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-switch-on { display: none; }
.bh-switch-input:checked ~ .bh-switch-state .bh-switch-on { display: inline; }
.bh-switch-input:checked ~ .bh-switch-state .bh-switch-off { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bh-switch-track::after { transition: none; }
}

/* Bottom sheet and dialog: a native modal <dialog>, a sheet on phones and centred from 768 px */
@keyframes bh-fade-in { from { opacity: 0; } }
@keyframes bh-sheet-in { from { transform: translateY(100%); } }
.bh-sheet {
  position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: none; max-height: calc(100dvh - var(--space-12));
  margin: 0; padding: 0; border: 0; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--card); color: var(--ink-1); box-shadow: var(--shadow-overlay); overflow: hidden;
}
.bh-sheet[open] { display: flex; flex-direction: column; animation: bh-sheet-in var(--dur-sheet-in) var(--ease); }
.bh-sheet::backdrop { background: var(--scrim); }
@media (min-width: 768px) {
  .bh-sheet { inset: 0; width: min(560px, calc(100% - var(--space-12))); height: fit-content; max-height: calc(100dvh - var(--space-16)); margin: auto; border-radius: var(--radius-card); }
  .bh-sheet.bh-dialog--confirm { width: min(440px, calc(100% - var(--space-12))); }
  .bh-sheet[open] { animation-name: bh-fade-in; }
}
@media (prefers-reduced-motion: reduce) {
  .bh-sheet[open] { animation: bh-fade-in var(--dur-fade) var(--ease); }
}
.bh-sheet-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.bh-sheet-title { flex: 1 1 auto; min-width: 0; font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-sheet-body { flex: 1 1 auto; display: grid; gap: var(--space-4); align-content: start; padding: var(--space-4); overflow: auto; }
.bh-sheet-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--card); }
.bh-sheet-foot > .bh-btn { flex: 1 1 140px; }

/* Save bar: the sticky action bar of task pages */
.bh-savebar { position: sticky; bottom: 0; z-index: 3; display: grid; gap: var(--space-1); align-content: center; min-height: var(--shell-actionbar-h); padding: var(--space-3) var(--space-4) 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-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bh-savebar-status { flex: 1 1 140px; min-width: 0; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-savebar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
/* css/accounts.css */
/* Sign-in (S-05) and the in-app browser screen (S-06a) */
.bh-btn--google { min-height: 48px; gap: var(--space-3); background: var(--card); border-color: var(--border-input); color: var(--ink-1); }
.bh-btn--google:hover { background: var(--sunken); color: var(--ink-1); }
.bh-google-mark { flex: none; width: 20px; height: 20px; }
.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-checks { display: grid; gap: var(--space-2); }
.bh-checks li { display: flex; gap: var(--space-2); align-items: flex-start; }
.bh-checks .bh-icon { margin-top: 2px; color: var(--success-ink); }
.bh-steps { display: grid; gap: var(--space-3); }
.bh-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.bh-step {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold);
}
.bh-aside { display: grid; gap: var(--space-1); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bh-copy { display: grid; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bh-btn--secondary.is-copied { border-color: var(--success-ink); color: var(--success-ink); }
.bh-btn:not(.is-copied) .bh-icon--copied, .bh-btn.is-copied .bh-icon--copy { display: none; }
/* css/act-as.css */
/* S45, acting as an owner: the A-16 banner (slot 2 of the dashboard shell) and its start page on the admin host. */

/* The banner, as the owner-shell canvas draws it: info-ink with on-inverse text (8.31:1), at least shell-actas-h tall,
   growing when the sub-line wraps. Stop keeps its width; the sub-line wraps instead. */
.bh-actas {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--shell-actas-h); padding: 6px var(--space-2) 6px var(--space-4);
  background: var(--info-ink); color: var(--on-inverse);
}
.bh-actas > .bh-icon { flex: none; }
.bh-actas-text { flex: 1 1 auto; min-width: 0; display: grid; }
.bh-actas-title { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-actas-sub { font-size: var(--text-label); line-height: var(--leading-label); }
.bh-actas > form { flex: none; }
/* Stop is the on-dark button: the banner's own colours, with the inverse focus ring. */
.bh-actas-stop { background: transparent; border-color: var(--on-inverse); color: var(--on-inverse); }
.bh-actas-stop:hover { background: rgb(255 255 255 / 12%); color: var(--on-inverse); }
.bh-actas-stop:focus-visible { box-shadow: 0 0 0 2px var(--info-ink), 0 0 0 4px var(--on-inverse); }

/* From 1024 px the shell's sidebar is sticky under the strips above it (dashboard.css), so the banner joins them:
   it sticks below the environment strip, where there is one, and the shell counts its height. */
@media (min-width: 1024px) {
  .bh-actas { position: sticky; top: 0; z-index: 3; }
  .bh-env:has(+ .bh-actas) { position: sticky; top: 0; z-index: 4; }
  .bh-env + .bh-actas { top: var(--shell-env-h); }
  .bh-actas + .bh-shell { --bh-env-h: var(--shell-actas-h); }
  .bh-env + .bh-actas + .bh-shell { --bh-env-h: calc(var(--shell-env-h) + var(--shell-actas-h)); }
}

/* A-16's start page: the limits, then the reason. */
.bh-actas-start { display: grid; gap: var(--space-4); }
.bh-actas-limits { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--text-small); line-height: var(--leading-small); }
.bh-actas-limits > li { display: flex; align-items: flex-start; gap: var(--space-2); }
.bh-actas-limits > li > .bh-icon { flex: none; color: var(--ink-2); }
.bh-actas-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.bh-actas-actions > .bh-recorded { flex: 1 1 100%; margin: 0; }
@media (min-width: 768px) {
  .bh-actas-actions > .bh-recorded { flex: 1 1 auto; }
}
/* css/admin.css */
/* The admin host: the admin shell with AdminNav (sidebar from 1024 px, behind Menu on phones), A-01 and A-17 */
.bh-admin-brand { color: var(--ink-1); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-bold); text-decoration: none; white-space: nowrap; }
a.bh-admin-brand:hover { color: var(--ink-1); text-decoration: none; }
.bh-admin-brand span { color: var(--ink-3); font-size: var(--text-small); font-weight: var(--weight-regular); }
.bh-admin-bar {
  position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--shell-appbar-h);
  padding: var(--space-1) var(--page-pad); background: var(--card); border-bottom: 1px solid var(--line);
}
.bh-admin-menu > summary { gap: var(--space-2); }
.bh-admin-menu[open] > .bh-admin-nav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10; max-height: calc(100dvh - var(--shell-appbar-h)); overflow-y: auto;
  background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-overlay);
}
.bh-admin-side { display: none; }
.bh-admin-nav { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-6); }
.bh-admin-nav .bh-nav-section { margin-top: var(--space-2); }
.bh-admin-foot { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bh-admin-foot .bh-account-head { padding: 0 var(--space-3); border: 0; margin: 0; }
.bh-admin-foot .bh-lang-btn { width: 100%; gap: var(--space-3); padding: 0 var(--space-3); font-weight: var(--weight-regular); }
.bh-admin-main { min-width: 0; }
.bh-admin-page { display: grid; gap: var(--space-6); width: 100%; max-width: var(--shell-content-max-wide); padding: var(--space-6) var(--page-pad) var(--space-10); }
.bh-admin-head { display: grid; gap: var(--space-1); }
.bh-admin-table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); font-size: var(--text-small); line-height: var(--leading-small);
}
.bh-admin-table th {
  padding: 10px 12px; background: var(--sunken); color: var(--ink-2); border-bottom: 1px solid var(--border-input);
  font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold); text-align: left;
}
.bh-admin-table td { padding: var(--space-3); vertical-align: top; overflow-wrap: anywhere; }
.bh-admin-table tr + tr td { border-top: 1px solid var(--line); }
.bh-admin-signin { max-width: 480px; }
.bh-admin-signedin { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bh-admin-facts .bh-icon { color: var(--ink-3); }

@media (min-width: 1024px) {
  .bh-admin { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
  .bh-admin-bar { display: none; }
  .bh-admin-side {
    position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-2); height: 100dvh; overflow-y: auto;
    padding-top: var(--space-5); background: var(--card); border-right: 1px solid var(--line);
  }
  .bh-admin-side > .bh-admin-brand { padding: 0 var(--space-6); }
  .bh-admin-page { padding: var(--space-8) var(--space-8) var(--space-12); }
}
/* css/admin-bookings.css */
/* A-10 (S35): the views as links, the filters, the tables, and a booking's own page */
.bh-ab-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); border-bottom: 1px solid var(--line); }
.bh-ab-tabs > a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); margin-bottom: -1px;
  border-bottom: 3px solid transparent; color: var(--ink-2); font-weight: var(--weight-bold); text-decoration: none;
}
.bh-ab-tabs > a[aria-current="page"] { border-bottom-color: var(--primary); color: var(--ink-1); }
.bh-ab-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); }
.bh-ab-filters > .bh-field { flex: 1 1 160px; }
.bh-ab-filters > .bh-ab-search { flex: 2 1 240px; }
.bh-ab-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: 44px; }
.bh-ab-list { display: grid; gap: var(--space-3); min-width: 0; }
.bh-ab-list > h2, .bh-ab-list > p { margin: 0; }
.bh-ab-empty { display: grid; gap: var(--space-1); }
.bh-ab-empty > p { margin: 0; }
.bh-ab-sub { display: block; }
.bh-admin-table .bh-ab-n { text-align: end; white-space: nowrap; }
.bh-ab-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.bh-ab-card { display: grid; gap: var(--space-3); max-width: 760px; overflow-wrap: anywhere; }
.bh-ab-card > * { margin: 0; }
.bh-ab-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.bh-ab-facts dt { color: var(--ink-2); }
.bh-ab-facts dd { margin: 0; }
.bh-ab-cancel { display: grid; gap: var(--space-3); justify-items: start; max-width: 520px; }
.bh-ab-cancel > .bh-field { width: 100%; }
/* css/admin-conversations.css */
/* A-11 (S44): the list's filters and table, a conversation's page with its reports and, after "Open", the original
   messages (S43's thread and bubbles, with the hidden parts marked); and the report card under B-10 and O-31's thread */
.bh-ac-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); }
.bh-ac-filters > .bh-field { flex: 1 1 160px; }
.bh-ac-filters > .bh-ac-search { flex: 2 1 240px; }
.bh-ac-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: 44px; }
.bh-ac-section { display: grid; gap: var(--space-3); min-width: 0; }
.bh-ac-section > h2, .bh-ac-section > p { margin: 0; }
.bh-ac-empty { display: grid; gap: var(--space-1); }
.bh-ac-empty > p { margin: 0; }
.bh-admin-table .bh-ac-n { text-align: end; white-space: nowrap; }
.bh-ac-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.bh-ac-card { display: grid; gap: var(--space-3); max-width: 760px; overflow-wrap: anywhere; }
.bh-ac-card > * { margin: 0; }
.bh-ac-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.bh-ac-facts dt { color: var(--ink-2); }
.bh-ac-facts dd { margin: 0; }
.bh-ac-member { display: block; }
.bh-ac-do { display: grid; gap: var(--space-2); justify-items: start; }
.bh-ac-note { display: grid; gap: var(--space-1); }
.bh-ac-note > blockquote { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--line); white-space: pre-wrap; }
.bh-ac-thread { max-width: 760px; padding: var(--space-4); border-radius: var(--radius-card); background: var(--sunken); }
.bh-ac-hidden {
  padding: 0 var(--space-1); border-radius: var(--radius-inline); background: var(--warning-bg); color: var(--ink-1);
  outline: 1px dashed var(--warning-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.bh-report { display: grid; min-width: 0; }
.bh-report-form > .bh-field, .bh-report-form > .bh-banner { width: 100%; }
.bh-report-input { width: 100%; min-height: 96px; resize: vertical; }
.bh-report-sent { display: flex; align-items: flex-start; gap: var(--space-2); }
.bh-report-sent > .bh-icon { flex: none; margin-top: 2px; }
/* css/affiliates.css */
/* Affiliates (S31): the design system's QrBlock (O-32, O-23), O-32's list, page and form, and O-19's commission line.
   The list rows and the form parts are promo.css's and apartments.css's. */

/* QrBlock (bundle.css): the code in ink on a card, with a quiet zone of 4 modules, at least 160 px wide. From 768 px
   it is open; on phones it sits behind "Show QR code", a <details>. */
.bh-qr { display: grid; gap: var(--space-3); justify-items: start; margin: 0; }
.bh-qr-code { display: grid; place-items: center; width: 200px; max-width: 100%; aspect-ratio: 1; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); color: var(--ink-1); }
.bh-qr-code svg { display: block; width: 100%; height: 100%; }
.bh-qr-caption { max-width: 32ch; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-qrblock-wide { display: none; }
.bh-qrblock-phone > summary { list-style: none; }
.bh-qrblock-phone > summary::-webkit-details-marker { display: none; }
.bh-qrblock-phone[open] > summary { margin-bottom: var(--space-3); }
.bh-qrblock-phone:not([open]) .bh-qrblock-hide, .bh-qrblock-phone[open] .bh-qrblock-show { display: none; }
@media (min-width: 768px) {
  .bh-qrblock-phone { display: none; }
  .bh-qrblock-wide { display: block; }
}

/* O-32: the empty page, what the Owner owes, and a row's figures */
.bh-af-empty { display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-8) var(--space-4); text-align: center; }
.bh-af-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); }
.bh-af-owe { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--warning-bg); }
.bh-af-owe > .bh-icon { flex: none; margin-top: 2px; color: var(--warning-ink); }
.bh-af-owe-body { display: grid; gap: var(--space-1); min-width: 0; }
.bh-af-owe-title { color: var(--warning-ink); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-af-code { color: var(--ink-1); overflow-wrap: anywhere; }
.bh-af-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.bh-af-figures > span { display: grid; }
.bh-af-figures .is-owed, .bh-af-figures .is-owed > .bh-muted, .bh-af-totals .is-owed, .bh-af-owed-text { color: var(--warning-ink); }

/* O-32, one affiliate: the commission card, a link with its QR code, the code, and the bookings */
.bh-af-card { display: grid; gap: var(--space-3); min-width: 0; }
.bh-af-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.bh-af-totals > div { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-control); background: var(--sunken); }
.bh-af-totals dt { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-af-totals .is-owed > dt { color: var(--warning-ink); font-weight: var(--weight-bold); }
.bh-af-totals dd { margin: 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-af-owed { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4); border-radius: var(--radius-card); background: var(--warning-bg); }
.bh-af-pay > summary { list-style: none; }
.bh-af-pay > summary::-webkit-details-marker { display: none; }
.bh-af-confirm { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-3); }
.bh-af-url { font-family: var(--font-mono); font-size: var(--text-small); line-height: var(--leading-small); overflow-wrap: anywhere; }
.bh-af-copy { justify-self: start; }
.bh-af-copy.is-copied { border-color: var(--success-ink); color: var(--success-ink); }
.bh-af-codeline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--sunken); }
.bh-af-bookings { display: grid; gap: var(--space-3); }
.bh-af-row-head { display: flex; justify-content: space-between; gap: var(--space-3); }

/* O-32's form */
.bh-af-percent { display: flex; align-items: center; gap: var(--space-3); }
.bh-af-percent > .bh-input { flex: none; width: 96px; }
.bh-af-how { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: decimal; }

/* O-19: the commission line, at the end of the money card */
.bh-af-o19 { display: grid; gap: var(--space-2); justify-items: start; margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.bh-af-o19 > * { margin: 0; }
/* css/apartments.css */
/* 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); }
/* This menu is as wide as the sidebar, not as wide as its longest word: a grid item's own minimum is that word unless
   it is told otherwise, and Safari — unlike Chromium — does not let "overflow-wrap: anywhere" lower it. Without this
   "Добавить квартиру" made the column wider than the panel and the button hung out of it (the owner, 2026-10-13).
   The menus that size themselves by their content, the language one among them, keep their own minimum. */
.bh-switcher-menu > * { min-width: 0; }
.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; }
/* css/approvals.css */
/* A-02's counter, A-19 the approval queue and A-20 the decision page (D35) */
.bh-queues { display: grid; gap: var(--space-3); }
.bh-queue-card { display: grid; gap: var(--space-1); max-width: 320px; color: var(--ink-1); text-decoration: none; }
.bh-queue-card:hover { border-color: var(--border-input); color: var(--ink-1); text-decoration: none; }
.bh-queue-label { font-weight: var(--weight-bold); }
.bh-queue-count { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: var(--weight-bold); }

.bh-review-card { display: grid; gap: var(--space-3); max-width: 760px; }
.bh-review-flags { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bh-review-flags li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.bh-review-match { padding: 0 var(--space-1); border-radius: 4px; background: var(--sunken); overflow-wrap: anywhere; }
.bh-review-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.bh-review-facts dt { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-review-facts dd { display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); }
.bh-review-facts dd p { margin: 0; }
.bh-review-form { display: grid; gap: var(--space-3); }
.bh-review-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bh-review-listing { display: grid; gap: var(--space-3); }
.bh-review-frame { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--page); }

@media (min-width: 768px) {
  .bh-review-facts { grid-template-columns: 160px minmax(0, 1fr); }
  .bh-review-facts dd { margin: 0; }
}
/* css/audit.css */
/* "Recorded": the admin canvas's note next to any button whose action writes an audit row. The confirmation dialog
   (Audit/ReasonDialog) is the design system's sheet, field and icon button, from app.css. */
.bh-recorded { display: inline-flex; align-items: flex-start; gap: var(--space-1); color: var(--info-ink); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-recorded > .bh-icon { margin-top: 0; }
/* css/booking-access.css */
/* Booking access (S18): B-01, B-07, the "Open your booking" step, sign-out and hand-off pages. */
.bh-ba, .bh-ba-find { gap: var(--space-4); }
.bh-ba-status { display: grid; gap: var(--space-2); justify-items: start; }
.bh-ba-stay, .bh-ba-access, .bh-ba-inapp { display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.bh-ba-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.bh-ba-dates dd { display: grid; margin: 0; }
.bh-ba-access .bh-btn { justify-self: start; }
.bh-ba-form { display: grid; gap: var(--space-4); }
.bh-ba-find .bh-banner p { margin: 0; }
/* css/calendar-sync.css */
/* 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); }
/* css/cancellation.css */
/* Free-tier cancellation (S22): B-01's cancel card, B-04, B-05, and O-19's cancel part (requests.css has its card). */
.bh-cx { gap: var(--space-4); }
.bh-cx-card { display: grid; gap: var(--space-3); justify-items: start; overflow-wrap: anywhere; }
.bh-cx-form { display: grid; gap: var(--space-4); }
.bh-cx-reasons { display: grid; gap: var(--space-1); min-width: 0; margin: 0; }
.bh-cx-reasons > legend { float: left; width: 100%; padding: 0; }
.bh-cx-reasons > legend + * { clear: both; }
.bh-cx-reason { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); cursor: pointer; }
.bh-cx-reason > input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.bh-cx-steps { display: grid; gap: var(--space-3); }
.bh-cx-steps ol { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.bh-cx-code { max-width: 14ch; font-size: var(--text-h3); letter-spacing: 0.2em; }
.bh-cx-help > summary {
  display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--primary);
  font-weight: var(--weight-bold); cursor: pointer;
}
.bh-cx-help > ul { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding-left: var(--space-5); list-style: disc; }
.bh-cx-resend { display: grid; gap: var(--space-1); justify-items: start; }
.bh-cx-resend .bh-btn { margin-left: calc(var(--space-3) * -1); }
/* css/cards.css */
/* Cards (S24): C-02 and C-03, B-02, and B-01's payment rows and money card. */
.bh-cd { gap: var(--space-4); }
.bh-cd-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.bh-cd-card, .bh-cd-receipt { display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.bh-cd-card > *, .bh-cd-receipt > * { margin: 0; }
.bh-cd-money, .bh-cd-facts { display: grid; gap: var(--space-2); margin: 0; }
.bh-cd-money > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.bh-cd-money dt { display: grid; }
.bh-cd-money dd, .bh-cd-facts dd { margin: 0; }
.bh-cd-total { padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); font-weight: var(--weight-bold); }
.bh-cd-facts > div { display: grid; gap: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.bh-cd-facts dt { color: var(--ink-3); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-cd-amount { font-size: var(--text-amount); line-height: var(--leading-amount); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.bh-cd-back { display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start; }
@media print {
  .bh-cd-back, .bh-cd > .bh-btn { display: none; }
}
/* css/checkout.css */
/* C-01 (S15), and the booking page that checkout leads to until B-01 (S18). One column on phones, with the stay and the
   price before the form; from 1024 px the form on the left and the stay and price on the right, sticky (C01_Desktop). */
.bh-co {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row dense; gap: var(--space-6);
  max-width: 1184px; margin: 0 auto; padding: var(--space-2) var(--page-pad) var(--space-12);
}
.bh-co > * { min-width: 0; }
.bh-co-back {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min);
  margin-left: calc(var(--space-2) * -1); padding: 0 var(--space-2); color: var(--primary); font-weight: var(--weight-bold);
  text-decoration: none; overflow-wrap: anywhere;
}
.bh-co-head { display: grid; gap: var(--space-2); justify-items: start; }
.bh-co-side, .bh-co-form { display: grid; gap: var(--space-4); align-content: start; }
.bh-co-stay { display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.bh-co-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.bh-co-dates dd { display: grid; margin: 0; }
.bh-co-link { display: inline-flex; align-items: center; justify-self: start; min-height: var(--target-min); color: var(--primary); font-weight: var(--weight-bold); }
.bh-co-price-title { margin-bottom: var(--space-3); }
.bh-co-fields { display: grid; gap: var(--space-4); min-width: 0; margin: 0; }
.bh-co-fields > legend { float: left; width: 100%; padding: 0; }
.bh-co-fields > legend + * { clear: both; }
.bh-co-terms { display: grid; gap: var(--space-3); }
.bh-co-consent-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.bh-co-consent-links a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--primary); }
.bh-co-submit { display: grid; gap: var(--space-2); }
.bh-co-trust { display: grid; gap: var(--space-2); }
.bh-co-trust > li { display: flex; gap: var(--space-2); align-items: flex-start; }
.bh-co-noemail { display: grid; gap: var(--space-3); }
@media (min-width: 1024px) {
  .bh-co { grid-template-columns: minmax(0, 1fr) 432px; column-gap: var(--space-8); align-items: start; padding-top: var(--space-4); }
  .bh-co > .bh-co-back, .bh-co > .bh-co-head, .bh-co > .bh-co-wide { grid-column: 1 / -1; }
  .bh-co > .bh-co-side { grid-column: 2; position: sticky; top: var(--space-6); }
  .bh-co > .bh-co-form { grid-column: 1; }
}
/* css/countries.css */
/* A-09 country list: search in three languages, the list with its unsaved changes and the special codes. The search
   field, chips, banners and save bar are the design system's, from app.css. */
.bh-countries, .bh-special { display: grid; gap: var(--space-4); }

.bh-matches {
  display: grid; gap: 2px; padding: var(--space-2); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-overlay);
}
.bh-match { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); min-height: var(--target-min); padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); }
.bh-match:hover { background: var(--sunken); }
.bh-match-text { display: grid; min-width: 0; }
.bh-match-name { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-match-listed { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--success-ink); font-weight: var(--weight-bold); }

.bh-country-list { overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-country-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "place action" "added action";
  align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3);
}
.bh-country-row + .bh-country-row { border-top: 1px solid var(--line); }
.bh-country-row.is-pending { background: var(--warning-bg); }
.bh-country-row.is-pending .bh-chip--warning { background: var(--card); box-shadow: inset 0 0 0 1px var(--warning-ink); }
.bh-country-place { grid-area: place; min-width: 0; overflow-wrap: anywhere; }
.bh-country-place code { margin-left: var(--space-1); font-family: var(--font-mono); font-size: var(--text-small); color: var(--ink-2); }
.bh-country-added { grid-area: added; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-country-row > .bh-btn { grid-area: action; }
@media (min-width: 768px) {
  .bh-country-row { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem) auto; grid-template-areas: "place added action"; }
}

.bh-special-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.bh-special-row > p { flex: 1 1 260px; min-width: 0; }
/* css/dashboard.css */
/* Dashboard: the O-03 shell, the account menu, O-04, the SaveStatus and the S-08 reconnect overlay */
.bh-account { position: relative; }

/* Dashboard shell (O-03): app bar and bottom tabs on phones; the 256 px sidebar from 1024 px */
.bh-appbar {
  display: flex; align-items: center; gap: var(--space-1); min-height: var(--shell-appbar-h);
  padding: 0 var(--space-1) 0 var(--space-2); background: var(--card); border-bottom: 1px solid var(--line);
}
.bh-appbar > .bh-wordmark { margin-right: auto; padding: 0 var(--space-2); }
.bh-sidebar { display: none; }
.bh-main { padding-bottom: calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
.bh-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--card); border-top: 1px solid var(--line);
}
.bh-tabbar-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
  min-height: var(--shell-tabbar-h); padding: 6px 0; color: var(--ink-2); text-align: center; text-decoration: none;
  font-size: var(--text-label); line-height: var(--leading-label); overflow-wrap: normal; hyphens: manual;
}
.bh-tabbar-item:hover { background: var(--sunken); color: var(--ink-1); }
.bh-tabbar-item[aria-current="page"] { color: var(--primary); }
.bh-tabbar-item[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 3px; margin-left: -16px;
  border-radius: 0 0 var(--radius-pill) var(--radius-pill); background: var(--primary);
}
.bh-tabbar-item:focus-visible { box-shadow: none; outline: 2px solid var(--primary); outline-offset: -4px; }
/* A control that Tab reaches is never left under the fixed bar: the browser scrolls it into view above the bar, not to
   the viewport's edge (as picker.css and owner-calendar.css do for their bars). */
html:has(.bh-tabbar) { scroll-padding-bottom: calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom, 0px)); }

.bh-nav { display: grid; gap: 2px; }
.bh-nav-item {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control); color: var(--ink-2); text-decoration: none; font-size: var(--text-small); line-height: var(--leading-small);
}
.bh-nav-item:hover { background: var(--sunken); color: var(--ink-1); }
.bh-nav-item[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: var(--weight-bold); }
.bh-nav-label { display: grid; justify-items: start; gap: 2px; flex: 1 1 auto; min-width: 0; text-align: left; }
.bh-nav-section {
  margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-3); color: var(--ink-3);
  font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold);
}
.bh-chip--compact { min-height: 20px; padding: 0 6px; font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-regular); }

.bh-avatar {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold);
}
.bh-account-btn { display: grid; place-items: center; width: var(--target-min); height: var(--target-min); border-radius: var(--radius-control); }
.bh-account-btn:hover { background: var(--sunken); }
.bh-account-head { display: grid; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.bh-account-text { display: grid; flex: 1 1 auto; min-width: 0; text-align: left; }
.bh-account-name { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-account-email { color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); overflow-wrap: anywhere; }
.bh-account--wide .bh-account-btn { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: auto; min-height: var(--target-min); padding: var(--space-2) var(--space-3); }
.bh-account--wide .bh-account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dashboard content: O-04 and the language setting with its SaveStatus */
.bh-dash { display: grid; gap: var(--space-6); width: 100%; max-width: var(--shell-content-max); padding: var(--space-4) var(--page-pad) var(--space-8); }
.bh-dash-head { display: grid; gap: var(--space-1); }
.bh-first { display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-4); }
.bh-thumb { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-card); background: var(--primary-soft); color: var(--primary); }
.bh-setting { display: grid; gap: var(--space-4); }

/* More (phones): the account's pages and the apartment's, then settings and help, as rows of one card per group */
.bh-more { display: grid; gap: var(--space-2); }
.bh-more-head { padding: 0 var(--space-1); color: var(--ink-3); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-more-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-more-list > li + li { border-top: 1px solid var(--line); }
.bh-more-list .bh-lang { display: block; }
.bh-more-item, .bh-more-list .bh-lang-btn {
  appearance: none; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; margin: 0;
  padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-card); background: none; color: var(--ink-1);
  font: inherit; font-weight: var(--weight-regular); text-align: left; text-decoration: none; cursor: pointer;
}
.bh-more-item:hover, .bh-more-list .bh-lang-btn:hover { background: var(--sunken); color: var(--ink-1); }
.bh-more-item--strong { font-weight: var(--weight-bold); }
.bh-more-chevron { margin-left: auto; color: var(--ink-3); }
.bh-more-list .bh-lang-btn .bh-nav-label { flex: 1 1 auto; }
.bh-save-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bh-save-slot { display: flex; align-items: center; min-height: var(--target-min); }
.bh-save {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 24px; color: var(--ink-2);
  font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
}
.bh-save.is-saved { color: var(--success-ink); }
.bh-save.is-error { color: var(--danger-ink); }
.bh-save.is-offline { display: none; color: var(--warning-ink); }
.bh-offline .bh-save[data-save-status] { display: none; }
.bh-offline .bh-save.is-offline { display: inline-flex; }

/* S-08 reconnect overlay: covers the content and the navigation, never the environment strip */
#components-reconnect-modal { display: none; }
#components-reconnect-modal[data-state] { display: block; position: fixed; inset: 0; z-index: 20; }
.bh-reconnect-scrim { position: absolute; inset: 0; background: var(--scrim); }
.bh-reconnect-slot { position: absolute; left: var(--space-4); right: var(--space-4); bottom: calc(var(--shell-tabbar-h) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.bh-reconnect {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay);
}
.bh-reconnect > .bh-icon { color: var(--primary); }
.bh-reconnect.is-failed > .bh-icon { color: var(--danger-ink); }
.bh-reconnect-body { display: grid; flex: 1 1 auto; gap: var(--space-2); min-width: 0; }
.bh-reconnect-title { font-weight: var(--weight-bold); }
.bh-reconnect-text { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-reconnect[data-reconnect="failed"] { display: none; }
#components-reconnect-modal:is([data-state="failed"], [data-state="resume-failed"], [data-state="paused"]) [data-reconnect="retrying"] { display: none; }
#components-reconnect-modal:is([data-state="failed"], [data-state="resume-failed"], [data-state="paused"]) [data-reconnect="failed"] { display: flex; }

/* Blazor shows this when a dashboard circuit fails */
#blazor-error-ui {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: var(--space-3) var(--space-4);
  background: var(--surface-inverse); color: var(--on-inverse);
}
#blazor-error-ui a { color: var(--on-inverse); }

@media (min-width: 1024px) {
  .bh-env:has(+ .bh-shell) { position: sticky; top: 0; }
  .bh-env + .bh-shell { --bh-env-h: var(--shell-env-h); }
  .bh-shell { display: grid; grid-template-columns: var(--shell-sidebar-w) minmax(0, 1fr); align-items: start; }
  .bh-shell > .bh-appbar, .bh-tabbar { display: none; }
  html:has(.bh-tabbar) { scroll-padding-bottom: 0; } /* the bar is gone, so nothing hides under it */
  .bh-sidebar {
    position: sticky; top: var(--bh-env-h, 0px); display: flex; flex-direction: column; gap: 2px;
    height: calc(100dvh - var(--bh-env-h, 0px)); padding: var(--space-3); background: var(--card); border-right: 1px solid var(--line);
  }
  .bh-sidebar > .bh-wordmark { flex: none; padding: var(--space-1) var(--space-3) var(--space-2); }
  .bh-sidebar-mid { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 calc(var(--space-3) * -1); padding: var(--space-1) var(--space-3); }
  .bh-sidebar-foot { flex: none; display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--line); }
  .bh-sidebar-foot .bh-menu-pop { top: auto; bottom: calc(100% + var(--space-1)); left: 0; right: auto; }
  .bh-main { padding-bottom: 0; }
  .bh-dash { padding-top: var(--space-10); }
  .bh-reconnect-slot { left: calc(var(--shell-sidebar-w) + var(--page-pad)); right: auto; bottom: auto; top: calc(var(--bh-env-h, 0px) + var(--space-6)); width: min(480px, calc(100% - var(--shell-sidebar-w) - 2 * var(--page-pad))); }
}
/* css/embed.css */
/* The calendar an owner embeds on their own website, and O-06's snippet for it. The day cells, the months and the
   legend are the picker's (picker.css); these rules only lay the frame out and make links behave like its buttons. */

/* The frame is as wide and as tall as the owner's iframe, so the page fills it and pads itself instead of centring
   in a column: on their site this is a panel, not a page. */
.bh-embed {
  display: grid; align-content: start; gap: var(--space-4);
  max-width: 480px; margin: 0 auto; padding: var(--space-4);
}
.bh-embed-head { display: grid; gap: var(--space-1); }
.bh-embed-title { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-bold); }
.bh-embed-from { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-embed-status { font-size: var(--text-small); line-height: var(--leading-small); }
.bh-embed-clear { margin-inline-start: var(--space-1); white-space: nowrap; }
/* The legend keeps two columns even in a narrow frame. One column adds about 90 px of height, and the frame's height
   is a number the owner pastes once (EmbedSnippet), so the page has to stay the same height at every width. */
.bh-embed .bh-legend { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* A day and a month control are links here, not buttons: they need the hover and the reset that picker.css gives
   `button.bh-day`, and no underline, which would cut through the date. */
a.bh-day, a.bh-month-nav { text-decoration: none; }
a.bh-day:hover { background-color: var(--sunken); }
a.bh-day.is-start:hover { background-color: var(--primary); }
.bh-embed .bh-month-nav[aria-disabled="true"] { cursor: default; }

/* O-06's snippet: the tag is code, so it keeps its own font and wraps instead of scrolling sideways. */
.bh-embed-code { min-height: 0; font-family: var(--font-mono); font-size: var(--text-small); white-space: pre-wrap; overflow-wrap: anywhere; }
/* css/guest-accounts.css */
/* Guest accounts (S42): B-08 My bookings, its code card, and the S-06b in-app browser banner. B-05's code page uses
   cancellation.css's .bh-cx rules, as S22's B-05 does. */
.bh-ga { gap: var(--space-6); }
.bh-ga-head { display: grid; gap: var(--space-1); overflow-wrap: anywhere; }
.bh-ga-card { display: grid; gap: var(--space-4); justify-items: start; overflow-wrap: anywhere; }
.bh-ga-card > form { width: 100%; }
.bh-ga-badge {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill);
  background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line);
}
.bh-ga-badge--warning { background: var(--warning-bg); border-color: var(--warning-bg); color: var(--warning-ink); }

/* The list: a card of rows, each a button of one form (B08-list's list rows). */
.bh-ga-lists { display: grid; gap: var(--space-6); }
.bh-ga-section { display: grid; gap: var(--space-2); }
.bh-ga-label { margin: 0; font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-ga-list {
  display: grid; margin: 0; padding: 0; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
}
.bh-ga-list > li + li { border-top: 1px solid var(--line); }
.bh-ga-row {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 72px; margin: 0; padding: var(--space-3) var(--space-4);
  border: 0; background: transparent; color: var(--ink-1); font: inherit; text-align: left; cursor: pointer;
}
.bh-ga-row:hover { background: var(--sunken); }
.bh-ga-row:focus-visible { box-shadow: none; outline: 2px solid var(--primary); outline-offset: -4px; }
.bh-ga-thumb {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px;
  border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--sunken); color: var(--ink-3);
}
.bh-ga-text { display: grid; gap: var(--space-1); flex: 1 1 auto; min-width: 0; justify-items: start; overflow-wrap: anywhere; }
.bh-ga-title { font-weight: var(--weight-bold); }
.bh-ga-chev { flex: none; color: var(--ink-3); }

/* S-06b: the banner with "Copy link", and its dismiss button on the right. */
.bh-ga-inapp { align-items: flex-start; padding-right: var(--space-2); }
.bh-ga-inapp .bh-banner-body { flex: 1 1 auto; justify-items: start; }
.bh-ga-inapp .bh-banner-body p { margin: 0; }
.bh-ga-inapp form { flex: none; margin: calc(var(--space-2) * -1) 0 0; }
/* css/guide.css */
/* The welcome guide (S21): B-03 and its /g/ variant, B-01's guide card, O-19's guide card and O-22. */

/* B-03 */
.bh-gd { gap: var(--space-4); }
.bh-gd-back { display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start; min-height: var(--target-min); font-weight: var(--weight-bold); text-decoration: none; }
.bh-gd-head { display: grid; gap: var(--space-1); }
.bh-gd-section, .bh-gd-card, .bh-gd-owner { display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.bh-gd-card > .bh-btn, .bh-gd-section > .bh-btn { justify-self: stretch; }
.bh-gd-title { display: flex; align-items: center; gap: var(--space-2); }
.bh-gd-title > .bh-icon { flex: none; color: var(--primary); }
.bh-gd-address { display: grid; gap: var(--space-2); }
.bh-gd-strong { font-weight: var(--weight-bold); }
.bh-gd-text { white-space: pre-line; }
.bh-gd-locked {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-control);
  background: var(--sunken); color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small);
}
.bh-gd-locked > .bh-icon { flex: none; margin-top: 2px; }

/* A code or a Wi-Fi value with its copy button (the design system's CopyField) */
.bh-gd-copy {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--card);
}
.bh-gd-copy-body { display: grid; min-width: 0; }
.bh-gd-value { font-family: var(--font-mono); font-size: var(--text-body); line-height: var(--leading-body); overflow-wrap: anywhere; }
.bh-gd-value--code { font-size: var(--text-code); line-height: var(--leading-code); font-weight: var(--weight-bold); }
.bh-gd-copy-btn { flex: none; }
.bh-gd-copy-btn.is-copied { color: var(--success-ink); }
.bh-gd-call { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* O-22: the secret fields' box, the field heads, the errors under a section */
.bh-gd-secret { display: grid; gap: var(--space-4); padding: var(--space-4); border: 2px solid var(--primary); border-radius: var(--radius-card); background: var(--card); }
.bh-gd-group { gap: var(--space-4); }
.bh-gd-code { font-family: var(--font-mono); font-size: var(--text-body); }
.bh-gd-optional { font-weight: var(--weight-regular); color: var(--ink-3); }
.bh-gd-field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-gd-error { display: grid; gap: var(--space-1); }
/* css/holding.css */
/* Holding page (S-01) and the legal pages */
.bh-holding { padding-top: var(--space-12); }

.bh-legal { max-width: 760px; }
.bh-legal-text { display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.bh-legal-text h1 { font-size: var(--text-h1); line-height: var(--leading-h1); }
.bh-legal-text h2 { margin-top: var(--space-4); font-size: var(--text-h2); line-height: var(--leading-h2); }
.bh-legal-text h3 { margin-top: var(--space-2); font-size: var(--text-h3); line-height: var(--leading-h3); }
.bh-legal-text ul, .bh-legal-text ol { display: grid; gap: var(--space-1); padding-left: var(--space-5); }
.bh-legal-text ul { list-style: disc; }
.bh-legal-text ol { list-style: decimal; }
.bh-legal-text blockquote { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--line); color: var(--ink-2); }
/* Tables wrap inside the column: a phone never scrolls sideways. */
.bh-legal-text table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-small); line-height: var(--leading-small); }
.bh-legal-text th, .bh-legal-text td { padding: var(--space-2); border: 1px solid var(--line); text-align: left; vertical-align: top; }
.bh-legal-text code { font-family: var(--font-mono); }
.bh-legal-text .bh-align-right { text-align: right; }
.bh-legal-text .bh-align-center { text-align: center; }
/* css/landing.css */
/* Landing (O-01): the pitch with the 10% example, then bands that alternate the page and card surfaces */
.bh-landing { display: grid; }
.bh-landing-inner, .bh-landing-hero { display: grid; gap: var(--space-6); width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--page-pad); }
.bh-landing-band { background: var(--card); border-block: 1px solid var(--line); }
.bh-landing-pitch { display: grid; gap: var(--space-4); align-content: start; }
.bh-landing-cta { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.bh-landing-cta > .bh-btn { width: 100%; }
.bh-strong { font-weight: var(--weight-bold); }

.bh-landing-fee { display: grid; gap: var(--space-3); }
.bh-landing-sum { display: grid; margin: 0; }
.bh-landing-sum > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
/* The label gives way, never the amount: a Georgian label is long enough to push the row past a 320 px screen. */
.bh-landing-sum dt { min-width: 0; overflow-wrap: anywhere; }
.bh-landing-sum dd { margin: 0; white-space: nowrap; }
.bh-landing-payout { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3) !important; border-radius: var(--radius-control); background: var(--primary-soft); font-weight: var(--weight-bold); }
.bh-landing-arrival { border-top-width: 2px !important; }

.bh-landing-grid { display: grid; gap: var(--space-6); }
.bh-landing-grid > li { display: grid; gap: var(--space-2); align-content: start; }
.bh-landing-thumb, .bh-landing-step {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-control);
  background: var(--primary-soft); color: var(--primary); font-weight: var(--weight-bold);
}
.bh-landing-step { border-radius: 50%; }

.bh-landing-faq { display: grid; }
.bh-landing-faq details { border-top: 1px solid var(--line); }
.bh-landing-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-3) 0;
  font-weight: var(--weight-bold); cursor: pointer; list-style: none;
}
.bh-landing-faq summary::-webkit-details-marker { display: none; }
.bh-landing-faq summary > .bh-icon { flex: none; transition: transform var(--dur-fade) var(--ease); }
.bh-landing-faq details[open] summary > .bh-icon { transform: rotate(180deg); }
.bh-landing-faq details > p { padding-bottom: var(--space-4); }

.bh-landing-end { gap: var(--space-6); }
.bh-landing-guest, .bh-landing-final { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border-radius: var(--radius-card); }
.bh-landing-guest { background: var(--sunken); }
.bh-landing-final { background: var(--primary); color: var(--on-primary); }
.bh-landing-final-btn { background: var(--card); border-color: var(--card); color: var(--primary); }
.bh-landing-final-btn:hover { background: var(--primary-soft); color: var(--primary-hover); }

@media (min-width: 768px) {
  .bh-landing-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); align-items: center; gap: var(--space-16); padding-block: var(--space-16); }
  .bh-landing-inner { padding-block: var(--space-16); }
  .bh-landing-cta > .bh-btn { width: auto; justify-self: start; }
  .bh-landing-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-10) var(--space-12); }
  .bh-landing-faq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; column-gap: var(--space-12); }
  .bh-landing-end { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
  .bh-landing-guest > .bh-btn, .bh-landing-final > .bh-btn { justify-self: start; }
}

/* The guest block under the hero (ADR-020 §4.6): where to look for a place, before the owner pitch goes on. */
.bh-landing-stay { display: grid; gap: var(--space-3); }
.bh-landing-stay-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
/* css/languages.css */
/* The language button and menu (S-07); the menu itself is the design system's .bh-menu */
.bh-lang { position: relative; }
.bh-lang-btn {
  display: inline-flex; align-items: center; gap: var(--space-1); min-width: var(--target-min); min-height: var(--target-min);
  padding: var(--space-2); border-radius: var(--radius-control); color: var(--ink-1);
  font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold);
}
.bh-lang-btn:hover { background: var(--sunken); }
@media (min-width: 1024px) {
  .bh-lang--wide .bh-lang-btn { width: 100%; gap: var(--space-3); padding: 0 var(--space-3); font-weight: var(--weight-regular); }
}

/* Money and times in tabular figures, so digits line up in columns (design system: bh-num). */
.bh-num { font-variant-numeric: tabular-nums lining-nums; }
/* css/members.css */
/* Members (S11): O-12 Members and payout recipient (the InvitationRow and RoleChip components), and O-13. */

/* O-12: the people list (InvitationRow README) */
.bh-mem-section { gap: var(--space-3); }
.bh-mem-list { display: grid; margin: 0; padding: 0 var(--space-4); list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-mem { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--line); min-width: 0; }
.bh-mem:first-child { border-top: 0; }
.bh-mem-avatar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--primary-soft); color: var(--primary); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold);
}
.bh-mem-avatar--invite { background: var(--sunken); color: var(--ink-2); }
.bh-mem-body { display: grid; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
.bh-mem-body > p { margin: 0; }
.bh-mem-name { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-mem-mail { overflow-wrap: anywhere; }
.bh-mem-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bh-mem-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.bh-mem-warn { display: flex; align-items: center; gap: var(--space-1); color: var(--warning-ink); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-mem-roles { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-mem-roles dt { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); }
.bh-mem-roles div:first-child dt { color: var(--primary); }
.bh-mem-roles dd { margin: var(--space-1) 0 0; }
.bh-mem-card { display: grid; gap: var(--space-3); padding: var(--space-4); }
.bh-mem-card > p { margin: 0; }
.bh-mem-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bh-mem-when { margin: var(--space-1) 0 0; padding-left: var(--space-5); }

/* The boards' bottom sheets, as <details> on a static page */
.bh-mem-manage > summary, .bh-mem-invite > summary { list-style: none; justify-self: start; }
.bh-mem-manage > summary::-webkit-details-marker, .bh-mem-invite > summary::-webkit-details-marker { display: none; }
.bh-mem-sheet { display: grid; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }
.bh-mem-sheet > * { margin: 0; }
.bh-mem-sheet .bh-btn--primary:not(.bh-btn--block) { justify-self: start; }
.bh-mem-split { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bh-mem-split > * { margin: 0; }
.bh-radio-card.is-off { cursor: not-allowed; background: var(--sunken); color: var(--ink-3); }
.bh-radio-card.is-off .bh-radio { cursor: not-allowed; background: var(--disabled-bg); }

/* "Remove from …" and "Leave this apartment": the design system's outlined danger button */
.bh-btn--danger-outline { background: var(--card); border-color: var(--danger-ink); color: var(--danger-ink); }
.bh-btn--danger-outline:hover { background: var(--danger-bg); color: var(--danger-ink); }
.bh-btn--danger-outline[aria-disabled="true"] { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-ink); }

/* O-13 */
.bh-inv { display: grid; gap: var(--space-5); width: 100%; max-width: var(--shell-content-max); margin: 0 auto; padding: var(--space-6) var(--page-pad) var(--space-10); }
.bh-inv > * { margin: 0; }
.bh-inv-apt { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bh-inv-apt > div { display: grid; min-width: 0; }
.bh-inv-apt p { margin: 0; overflow-wrap: anywhere; }
.bh-inv-thumb { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-card); background: var(--primary-soft); color: var(--primary); }
.bh-inv-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.bh-inv-facts dt { color: var(--ink-2); }
.bh-inv-facts dd { margin: 0; overflow-wrap: anywhere; }
.bh-inv-who { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); min-width: 0; }
.bh-inv-who > div { display: grid; min-width: 0; }
.bh-inv-who p { margin: 0; overflow-wrap: anywhere; }
.bh-inv-actions { display: grid; gap: var(--space-2); }
.bh-inv-actions > form { display: grid; }
.bh-inv-warn { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--warning-ink); border-radius: var(--radius-card); background: var(--card); }
.bh-inv-warn > * { margin: 0; }
.bh-inv-code { max-width: 12ch; letter-spacing: 0.2em; }
/* css/messages.css */
/* Messages (S43): B-09, B-10, O-31 and G-01's "Ask the owner". The thread, bubble, composer and masked-span rules are
   the design system's (bundle.css: MessageBubble, MaskedText), copied here. */
.bh-msgs { display: grid; gap: var(--space-4); min-width: 0; }
.bh-msgs p { margin: 0; }

/* Lists: a card of rows, each a link (B09-list, O31-list) */
.bh-msgs-list {
  display: grid; margin: 0; padding: 0; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
}
.bh-msgs-list > li + li { border-top: 1px solid var(--line); }
.bh-msgs-row {
  display: flex; align-items: flex-start; gap: var(--space-3); min-height: 72px; padding: var(--space-3) var(--space-4);
  color: var(--ink-1); text-decoration: none;
}
.bh-msgs-row:hover { background: var(--sunken); color: var(--ink-1); }
.bh-msgs-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
.bh-msgs-row-text { display: grid; gap: var(--space-1); flex: 1 1 auto; min-width: 0; justify-items: start; }
.bh-msgs-row-head { display: flex; justify-content: space-between; gap: var(--space-2); width: 100%; }
.bh-msgs-row-title { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-msgs-excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--ink-2);
}
.bh-msgs-thumb, .bh-msgs-avatar {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--sunken); color: var(--ink-3);
}
.bh-msgs-avatar { border-radius: var(--radius-pill); background: var(--primary-soft); border-color: transparent; color: var(--primary); font-weight: var(--weight-bold); }
.bh-msgs-group { display: grid; gap: var(--space-2); }
.bh-msgs-group-title { margin: 0; font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-msgs-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bh-msgs-filter > a { min-height: var(--target-min); padding: var(--space-2) var(--space-3); font-size: var(--text-small); text-decoration: none; }

/* Empty states (B09-empty, O31-empty) */
.bh-msgs-empty { display: grid; gap: var(--space-3); justify-items: start; }
.bh-msgs-badge {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill);
  background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line);
}

/* B-10's apartment card, O-31's head and the guest's booking */
.bh-msgs-apt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bh-msgs-apt-text { display: grid; gap: var(--space-1); flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.bh-msgs-apt-title { margin: 0; font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-bold); }
.bh-msgs-head { display: grid; gap: var(--space-1); justify-items: start; overflow-wrap: anywhere; }
.bh-msgs-head h1 { margin: 0; }
.bh-msgs-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-msgs-intro { display: grid; gap: var(--space-2); }
.bh-msgs-hint { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--ink-2); }
.bh-msgs-hint > .bh-icon { flex: none; margin-top: 2px; }
.bh-msgs-notice { display: flex; align-items: flex-start; gap: var(--space-3); }
.bh-msgs-notice > .bh-icon { flex: none; color: var(--ink-2); }
.bh-msgs-notice > div { display: grid; gap: var(--space-2); justify-items: start; }
.bh-msgs-notice h2 { margin: 0; }
.bh-msgs-options > summary { list-style: none; justify-self: start; }
.bh-msgs-options > summary::-webkit-details-marker { display: none; }
.bh-msgs-options[open] > summary { margin-bottom: var(--space-2); }
.bh-msgs-options > .bh-card { display: grid; gap: var(--space-3); justify-items: start; }
.bh-msgs-options h2 { margin: 0; }
.bh-msgs-ask { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

/* MessageBubble */
.bh-thread { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bh-msg { display: grid; gap: var(--space-1); max-width: min(80%, 480px); }
.bh-msg--mine { justify-self: end; justify-items: end; }
.bh-msg--theirs { justify-self: start; justify-items: start; }
.bh-msg-bubble { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); white-space: pre-wrap; overflow-wrap: anywhere; }
.bh-msg--mine .bh-msg-bubble { background: var(--primary-soft); }
.bh-msg--theirs .bh-msg-bubble { background: var(--card); border: 1px solid var(--line); }
.bh-msg-sender { color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold); }
.bh-msg-meta { display: flex; align-items: center; gap: var(--space-1); color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); font-variant-numeric: tabular-nums; }
.bh-msg-note { color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); text-align: right; }
.bh-msg--system {
  justify-self: center; display: flex; align-items: center; gap: var(--space-2); max-width: 100%;
  color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); text-align: center;
}
.bh-msg--system > .bh-icon { flex: none; }
.bh-msg-day { justify-self: center; color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); }

/* The composer */
.bh-composer { display: grid; gap: var(--space-3); justify-items: start; }
.bh-composer > .bh-field, .bh-composer > .bh-banner { width: 100%; }
.bh-msg-input { width: 100%; min-height: 96px; resize: vertical; }

/* MaskedText: contact details before a confirmed booking read "[shown after booking]" */
.bh-masked {
  padding: 0 var(--space-1); border: 1px dashed var(--ink-3); border-radius: var(--radius-inline); background: var(--sunken);
  color: var(--ink-2); font-size: var(--text-small); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* css/notifications.css */
/* O-23 Notifications and Telegram: the email card, the Telegram card in its four states, and the language line. */
.bh-notify-card h2, .bh-notify-language h2 { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-notify-card { display: grid; gap: var(--space-3); }
.bh-notify-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-notify-strong { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-notify-status { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); }
.bh-notify-status > .bh-icon { color: var(--primary); }
.bh-notify-steps { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: decimal; }
/* S31: from 768 px the link's QR code sits beside the steps (O-23-desktop-waiting); QrBlock shows none on phones here. */
.bh-notify-wait { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4) var(--space-8); }
.bh-notify-wait > .bh-notify-steps { flex: 1 1 240px; }
.bh-notify-center { justify-self: center; }
.bh-notify-sent { display: flex; align-items: flex-start; gap: var(--space-2); }
.bh-notify-sent > .bh-icon { margin-top: 2px; color: var(--success-ink); }
.bh-notify-unlink { justify-self: start; padding-left: 0; color: var(--danger-ink); }
.bh-notify-unlink:hover { background: transparent; color: var(--danger-hover); text-decoration: underline; }
.bh-notify-confirm { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--page); }
.bh-notify-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.bh-notify-language { display: grid; gap: var(--space-2); }
/* css/ops-health.css */
/* A-13's health (S35): the failing probes, the cards and the dead messages */
.bh-health { display: grid; gap: var(--space-3); min-width: 0; }
.bh-health-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.bh-health-head > * { margin: 0; }
.bh-health-alerts { display: grid; gap: var(--space-1); margin: 0; padding: 0 0 0 var(--space-4); color: var(--warning-ink); overflow-wrap: anywhere; }
.bh-health-cards { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bh-health-card { flex: 1 1 200px; display: grid; gap: var(--space-1); align-content: start; overflow-wrap: anywhere; }
.bh-health-card > p { margin: 0; }
.bh-health-card.is-failing { border-color: var(--warning-ink); }
.bh-health-ok, .bh-health-bad { display: flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-bold); }
.bh-health-ok { color: var(--success-ink); }
.bh-health-bad { color: var(--warning-ink); }
.bh-health-dead { display: grid; gap: var(--space-3); min-width: 0; }
.bh-health-h3 { margin: 0; font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-health-dead td .bh-meta { display: block; }
.bh-health-effects { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8); border-radius: var(--radius-card); background: var(--sunken); }
/* css/our-pages.css */
/* Our pages (S48): the Apartments page, the landing strip's entries, Help, and O-06's opt-out */

/* The Apartments page (SEO-1): a plain list by town. One column on phones, three entries a row from 768 px. */
.bh-listing-page { display: grid; gap: var(--space-8); align-content: start; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--page-pad) var(--space-12); }
.bh-listing-head { display: grid; gap: var(--space-2); }
.bh-listing-town-group { display: grid; gap: var(--space-4); }

/* An entry: the cover photo, the title and the town. The landing strip shows the same. */
.bh-listing { display: grid; gap: var(--space-6); }
.bh-listing-item { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.bh-listing-link { display: grid; gap: var(--space-2); min-width: 0; color: var(--ink-1); font-weight: var(--weight-bold); text-decoration: none; }
.bh-listing-link:hover .bh-listing-title { text-decoration: underline; }
.bh-listing-cover { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); background: var(--sunken); }
.bh-listing-cover--none { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.bh-listing-town { display: flex; align-items: center; gap: var(--space-1); }

@media (min-width: 768px) {
  .bh-listing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
}

/* Help: questions under two headings, in the reading column */
.bh-help { max-width: 720px; }
.bh-help-section { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.bh-help-section > h3 { margin-top: var(--space-3); }

/* O-06: the switch that keeps the apartment on the Apartments page, in a card of its own */
.bh-listing-switch { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }

/* A town page (ADR-020 §4.6): the trail above the heading, the cards' facts and price, and the prose below. */
.bh-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.bh-crumbs a { color: inherit; }
.bh-listing-town-link { color: inherit; text-decoration: none; }
.bh-listing-town-link:hover { text-decoration: underline; }
.bh-listing-meta { display: block; }
.bh-listing-price { display: block; font-weight: var(--weight-bold); }
.bh-hub-prose { display: grid; gap: var(--space-3); max-width: 70ch; }
.bh-hub-prose p { margin: 0; }
.bh-hub-prose h3 { margin: var(--space-2) 0 0; }

/* A guide (ADR-020 §4.7): running text with its tables, in the reading column. */
.bh-guide-text { display: grid; gap: var(--space-3); max-width: 70ch; }
.bh-guide-text p, .bh-guide-text ul, .bh-guide-text table { margin: 0; }
.bh-guide-text h2 { margin-top: var(--space-4); }
.bh-guide-text ul { padding-left: var(--space-5); }
.bh-guide-text table { width: 100%; border-collapse: collapse; font-size: var(--text-small, 0.9375rem); }
.bh-guide-text th, .bh-guide-text td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bh-guide-text th { font-weight: var(--weight-bold); }
.bh-hub-guides { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
/* css/owner-bookings.css */
/* 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; }
/* css/owner-calendar.css */
/* O-15, the owner's month calendar (S12): the design system's OwnerCalendarCell and SelectionBar, copied from its
   bundle.css as they are, and the panel on its BottomSheet (app.css). The month buttons and the legend are the guest
   picker's (picker.css). S20 adds the booking bars (bh-oweek-bars) over each week's 44 px lanes. */

.bh-ocal-month { display: grid; gap: var(--space-3); min-width: 0; }
/* "Calendar" heads the page from 1024 px, as the desktop board draws it; on phones only screen readers get it. */
.bh-ocal-page-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1024px) {
  .bh-ocal-page-title { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
}
.bh-ocal-heading { flex: 1 1 auto; min-width: 0; display: grid; justify-items: center; text-align: center; }
.bh-ocal-title { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-bold); }
/* The status row: a past day's notice (O15_Past) and the SaveStatus, with Today at the right */
.bh-ocal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bh-ocal-today { margin-left: auto; }
.bh-ocal-notice { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-ocal-empty-action { justify-self: start; }

/* The month: seven columns from Monday, one week per row */
.bh-ocal { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.bh-ocal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: var(--space-1) 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); text-align: center; }
.bh-oweek { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bh-oweek + .bh-oweek { border-top: 1px solid var(--line); }
.bh-ocell {
  -webkit-appearance: none; appearance: none;
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  min-width: 0; min-height: 64px; margin: 0; padding: var(--space-1) var(--space-1) 28px;
  border: 0; border-right: 1px solid var(--line);
  background-color: var(--card); color: var(--ink-1);
  font-family: inherit; text-align: left; font-variant-numeric: tabular-nums; cursor: pointer;
}
.bh-ocell:last-child { border-right: 0; }
.bh-ocell-top { display: flex; align-items: center; justify-content: space-between; gap: 2px; min-height: var(--leading-cal); }
.bh-ocell-day { width: fit-content; font-size: var(--text-cal); line-height: var(--leading-cal); color: var(--ink-2); }
.bh-ocell-min { display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 4px; border: 1px solid var(--ink-2); border-radius: var(--radius-pill); background: var(--card); color: var(--ink-1); font-size: var(--text-cal); line-height: 14px; }
.bh-ocell-price { font-size: var(--text-small); line-height: var(--leading-cal); font-weight: var(--weight-bold); }
/* Custom price: every price is bold, so a night with a custom price adds a 4 px primary dot under the price. It takes
   no height, so cell sizes don't change; the cell's name adds ", custom price". */
.bh-ocell.is-custom .bh-ocell-price { position: relative; align-self: flex-start; }
.bh-ocell.is-custom .bh-ocell-price::after { content: ""; position: absolute; left: 50%; top: calc(100% - 1px); width: 4px; height: 4px; margin-left: -2px; border-radius: var(--radius-pill); background: var(--primary); }
.bh-ocell-dot { display: inline-block; flex: none; width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--primary); }
.bh-ocell:hover { background-color: var(--sunken); }
.bh-ocell.is-today .bh-ocell-day { color: var(--ink-1); font-weight: var(--weight-bold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.bh-ocell.is-closed { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--border-input) 6px 7px); }
.bh-ocell.is-closed .bh-ocell-day { padding: 0 2px; border-radius: var(--radius-control); background: var(--card); }
.bh-ocell.is-closed .bh-ocell-price { visibility: hidden; }
.bh-ocell.is-selected { background-color: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.bh-ocell.is-past { background-color: var(--sunken); cursor: default; }
.bh-ocell.is-past .bh-ocell-day, .bh-ocell.is-past .bh-ocell-price { color: var(--ink-3); font-weight: var(--weight-regular); }
/* The first and last selected days: their number filled, as PickerDay's start and end. */
.bh-ocell.is-first .bh-ocell-day, .bh-ocell.is-last .bh-ocell-day { padding: 0 4px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-weight: var(--weight-bold); text-decoration: none; }
/* Inset focus ring (2 px gap, 2 px primary): the grid clips to its rounded corners. */
.bh-ocell:focus-visible { z-index: 2; box-shadow: none; outline: 2px solid var(--primary); outline-offset: -4px; }
.bh-ocell.is-selected:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); outline-offset: -6px; }
.bh-ocell--blank, .bh-ocell--blank:hover { background-color: var(--page); cursor: default; }
/* Phone and touch: an 88 px cell, a 44 px date area above a 44 px lane for S20's booking bars. */
@media (max-width: 1023.98px), (pointer: coarse) {
  .bh-ocell { min-height: 88px; padding-bottom: var(--target-min); }
}

/* The legend's samples */
.bh-ocal-key { flex: none; display: inline-grid; place-items: center; width: 34px; height: 20px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.bh-ocal-key--price { font-size: var(--text-small); font-weight: var(--weight-bold); }
.bh-ocal-key--today { font-size: var(--text-cal); font-weight: var(--weight-bold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.bh-ocal-key--closed, .bh-ocal-key--past { border: 1px solid var(--line); background-color: var(--sunken); }
.bh-ocal-key--closed { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--border-input) 6px 7px); }

/* SelectionBar: sticky above the tab bar, and at the bottom from 1024 px; focused cells never hide under it */
.bh-selbar {
  position: sticky; bottom: calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: 0 calc(var(--page-pad) * -1); padding: var(--space-3) var(--page-pad);
  background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow-overlay);
}
.bh-selbar-text { flex: 1 1 150px; min-width: 0; display: grid; }
.bh-selbar-dates { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.bh-selbar-meta { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-selbar-actions { display: flex; gap: var(--space-2); }
html:has(.bh-selbar) { scroll-padding-bottom: calc(var(--shell-tabbar-h) + 96px); }
@media (min-width: 1024px) {
  .bh-selbar { bottom: 0; margin: 0; padding-inline: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card) var(--radius-card) 0 0; }
  html:has(.bh-selbar) { scroll-padding-bottom: 96px; }
}

/* The panel (BottomSheet): its form fills the sheet, so the body scrolls between the head and the foot */
.bh-ocal-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bh-ocal-fields { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.bh-ocal-open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh-ocal-reset { display: grid; gap: var(--space-1); justify-items: start; }
/* S-08: while the dashboard is offline, js/reconnect.js turns Save off and this line says why. */
.bh-ocal-offline { display: none; flex: 1 1 100%; align-items: center; gap: var(--space-2); color: var(--warning-ink); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-offline .bh-ocal-offline { display: flex; }
/* css/owners.css */
/* A-08 owners with their fee rates, the owner's fee card and A08-rate-dialog */
.bh-fee-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.bh-owner-search { max-width: 480px; }
.bh-owner-link { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-owner-email { display: block; overflow-wrap: anywhere; }
.bh-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-fee { display: grid; gap: var(--space-3); max-width: 640px; }
.bh-fee-now { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; }
.bh-fee-now dt { color: var(--ink-2); }
.bh-fee-now dd { margin: 0; font-weight: var(--weight-bold); }

.bh-rate-input { display: flex; align-items: center; gap: var(--space-2); }
.bh-rate-input > .bh-input { flex: 0 1 160px; }
.bh-rate-unit { color: var(--ink-2); font-weight: var(--weight-bold); }
.bh-rate-rules { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8); border-radius: var(--radius-card); background: var(--sunken); list-style: disc; }
/* css/payment-links.css */
/* Payment links (S28): O-29's card on O-19, and C-05 on the payment page. */
.bh-pl-owner, .bh-pl-current, .bh-pl-form, .bh-pl-pay { display: grid; gap: var(--space-3); }
.bh-pl-pay { gap: var(--space-4); }
.bh-pl-owner > *, .bh-pl-current > *, .bh-pl-form > * { margin: 0; }
.bh-pl-form .bh-banner { margin: 0; }
.bh-pl-note { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--line); white-space: pre-line; overflow-wrap: anywhere; }
/* css/payments.css */
/* O-28, payments and booking mode: what apartments.css's form parts don't cover. */
.bh-pay-meta { margin: 0; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); overflow-wrap: anywhere; }
.bh-pay-meta strong { color: var(--ink-1); }

/* Online payment: the title, its state and the locked Switch (O28-not-verified: a dashed track that can't move). */
.bh-pay-head { display: flex; align-items: center; gap: var(--space-3); }
.bh-pay-head > h2 { flex: 1 1 auto; min-width: 0; margin: 0; }
.bh-pay-state { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-2); font-size: var(--text-small); font-weight: var(--weight-bold); }
.bh-pay-switch { position: relative; flex: none; width: 52px; height: var(--target-min); padding: 0; border: 0; background: transparent; cursor: not-allowed; }
.bh-pay-switch > span { position: absolute; left: 4px; top: 50%; width: 44px; height: 24px; margin-top: -12px; box-sizing: border-box; border: 1px dashed var(--ink-3); border-radius: var(--radius-pill); background: var(--sunken); }
.bh-pay-switch > span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--card); box-shadow: 0 0 0 1px var(--ink-3); }
.bh-pay-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }

/* The checklist that turns it on: a tick for what is done, an empty circle for the rest. */
.bh-pay-steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bh-pay-steps > li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink-3); }
.bh-pay-steps > li.is-done { color: var(--success-ink); }
.bh-pay-steps > li > span { display: grid; gap: var(--space-1); min-width: 0; color: var(--ink-1); }
.bh-pay-step-name { font-weight: var(--weight-bold); overflow-wrap: anywhere; }

/* The steppers' value is text ("30%", "7 days before"), so it gets room. */
.bh-pay-stepper { justify-self: start; }
.bh-pay-stepper > .bh-stepper-value { min-width: 9ch; text-align: center; }

/* The live split: label left, amount right; the fee is muted and the owner's two lines stand out. */
.bh-pay-split { display: grid; gap: var(--space-2); }
.bh-pay-split > p { margin: 0; }
.bh-pay-lines { width: 100%; border-collapse: collapse; }
.bh-pay-lines th { padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; font-weight: var(--weight-regular); }
.bh-pay-lines td { padding: var(--space-2) 0; text-align: right; white-space: nowrap; vertical-align: top; }
.bh-pay-lines tr + tr > * { border-top: 1px solid var(--line); }
.bh-pay-lines tr.is-fee > * { color: var(--ink-2); }
.bh-pay-lines tr.is-total > * { font-weight: var(--weight-bold); }

/* The rule as guests see it. */
.bh-pay-rule { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--sunken); }
.bh-pay-rule > p { margin: 0; }

.bh-pay-recipient { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
/* css/payouts.css */
/* Admin money (S26): A-04 payouts due, A-05 refunds to send, A-06 payment review, O-30, and the payout in O-19's
   money card (S20's MoneyCard, with requests.css's bh-o19-money). */

/* A-04 and A-05: one card per payout or refund. */
.bh-po-list { display: grid; gap: var(--space-4); min-width: 0; }
.bh-po-list > h2, .bh-po-list > p { margin: 0; }
.bh-po-card { display: grid; gap: var(--space-3); max-width: 760px; overflow-wrap: anywhere; }
.bh-po-card > * { margin: 0; }
.bh-po-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-po-head > h3 { margin: 0; }
.bh-po-lines { display: grid; gap: var(--space-2); margin: 0; }
.bh-po-lines > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.bh-po-lines dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.bh-po-lines > .is-total { padding-top: var(--space-2); border-top: 1px solid var(--line); font-weight: var(--weight-bold); }
.bh-po-iban { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bh-po-payments { display: grid; gap: var(--space-2); }
.bh-po-payments > p { margin: 0; }
.bh-po-payments ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bh-po-payments li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bh-po-blocks { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; color: var(--warning-ink); }
.bh-po-blocks li { display: flex; align-items: flex-start; gap: var(--space-2); }
.bh-po-blocks .bh-icon { flex: none; margin-top: 2px; }
.bh-po-pay { display: grid; gap: var(--space-3); justify-items: start; max-width: 420px; }
.bh-po-pay > .bh-field { width: 100%; }

/* A-06's item: the reasons as chips, and one block per decision. */
.bh-rv-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.bh-rv-option { display: grid; gap: var(--space-2); justify-items: start; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.bh-rv-option > p { margin: 0; }

/* O-30 */
.bh-mp-list { display: grid; gap: var(--space-3); min-width: 0; }
.bh-mp-list > h2, .bh-mp-list > p { margin: 0; }
.bh-mp-next, .bh-mp-empty, .bh-mp-group { display: grid; gap: var(--space-2); justify-items: start; overflow-wrap: anywhere; }
.bh-mp-next > *, .bh-mp-empty > *, .bh-mp-group > * { margin: 0; }
.bh-mp-rows { display: grid; gap: var(--space-3); width: 100%; margin: 0; padding: 0; list-style: none; }
.bh-mp-rows > li { display: grid; gap: var(--space-1); justify-items: start; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bh-mp-rows > li:last-child { padding-bottom: 0; border-bottom: 0; }
.bh-mp-row-head, .bh-mp-total { display: flex; justify-content: space-between; gap: var(--space-3); width: 100%; }
.bh-mp-total { padding-top: var(--space-2); border-top: 1px solid var(--line); }
.bh-mp-how { display: grid; gap: var(--space-2); }
.bh-mp-how > * { margin: 0; }

/* O-19: the payout, below the booking's own money in S20's money card. */
.bh-mp-payout { display: grid; gap: var(--space-2); justify-items: start; margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.bh-mp-payout > * { margin: 0; }
.bh-mp-payout > dl { width: 100%; }
/* css/photos.css */
/* Photos (S06): O-09 with the design system's PhotoTile, photo toolbar and UploadRow (bundle.css §22), its toast,
   and G-02's viewer (Gallery README) */
.bh-photos-page { display: grid; gap: var(--space-4); min-width: 0; }
.bh-photos-count { display: grid; gap: var(--space-2); }
.bh-photos-count-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-2); }
.bh-photos-count-row > p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.bh-photos-count-row .bh-save-slot { flex: none; }
.bh-photos-add { display: grid; gap: var(--space-2); }
.bh-photos-add.is-empty { justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); text-align: center; background: var(--card); border: 2px dashed var(--border-input); border-radius: var(--radius-card); }
.bh-photos-medal { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); }
.bh-photos-uploads { display: grid; gap: var(--space-4); }
.bh-photos-uploads:empty { display: none; }
.bh-photos-tips { display: grid; gap: var(--space-3); }
.bh-photos-tips ul { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-photos-refused { display: flex; align-items: center; gap: var(--space-2); color: var(--danger-ink); }
.bh-photos-dismiss { display: flex; justify-content: flex-end; padding-top: var(--space-1); border-top: 1px solid var(--line); }
.bh-photos-caption { display: grid; gap: var(--space-2); justify-items: start; }
.bh-photos-caption > .bh-input { width: 100%; }
.bh-progress.is-paused::-webkit-progress-value { background: var(--ink-3); }
.bh-progress.is-paused::-moz-progress-bar { background: var(--ink-3); }

/* The photo toolbar takes the tab bar's place on phones while a photo is selected (PhotoTile README). */
.bh-shell:has(.bh-photo-toolbar) .bh-tabbar { display: none; }
.bh-shell:has(.bh-photo-toolbar) .bh-main { padding-bottom: 0; }

.bh-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .bh-photo-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: var(--space-4); } }
.bh-photo-tile {
  -webkit-appearance: none; appearance: none;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  width: 100%; aspect-ratio: 1; min-height: var(--target-min); margin: 0; padding: 0;
  border: 0; border-radius: var(--radius-control); background: var(--sunken); color: var(--ink-3);
  font-family: inherit; overflow: hidden; cursor: pointer;
}
.bh-photo-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh-photo-num { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 24px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-inverse); color: var(--on-inverse); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.bh-photo-num--cover { top: auto; left: 0; right: 0; bottom: 0; height: 28px; border-radius: 0 0 var(--radius-control) var(--radius-control); }
.bh-photo-tick { position: absolute; right: var(--space-2); top: var(--space-2); z-index: 1; display: none; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 2px var(--card); }
.bh-photo-tile[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 4px solid var(--primary); border-radius: inherit; pointer-events: none; }
.bh-photo-tile[aria-pressed="true"] .bh-photo-tick { display: grid; }
.bh-photo-tile.is-processing { padding-top: var(--space-4); border: 1px dashed var(--border-input); color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold); }
.bh-photo-tile.is-processing:has(.bh-photo-num--cover) { padding: 0 0 28px; } /* clear of the cover strip */

.bh-photo-toolbar { position: sticky; bottom: 0; z-index: 3; display: grid; gap: var(--space-2); margin: 0 calc(var(--page-pad) * -1); padding: var(--space-2) var(--page-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); }
.bh-photo-toolbar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-small); line-height: var(--leading-small); }
/* 2 × 2: four in a row clip Georgian (გარეკანად დაყენება) at 360 px */
.bh-photo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.bh-photo-action {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 0; min-height: 48px; margin: 0; padding: var(--space-2);
  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-small); line-height: var(--leading-small); font-weight: var(--weight-bold); text-align: center; overflow-wrap: break-word; cursor: pointer;
}
.bh-photo-action:hover { background: var(--sunken); }
.bh-photo-action--delete { border-color: var(--danger-ink); color: var(--danger-ink); }
.bh-photo-action[aria-disabled="true"] { border-color: var(--disabled-bg); background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
@media (min-width: 1024px) {
  .bh-photo-toolbar { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); }
  .bh-photo-toolbar-head { display: contents; }
  .bh-photo-toolbar-head > p { flex: 1 1 200px; min-width: 0; }
  .bh-photo-toolbar-head > .bh-btn { order: 2; }
  .bh-photo-actions { order: 1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .bh-photo-action { min-height: var(--target-min); padding: var(--space-2) var(--space-4); }
  .bh-photo-toolbar > .bh-reason { order: 3; flex-basis: 100%; }
}

.bh-uploads { display: grid; margin: 0; padding: 0; list-style: none; }
.bh-upload { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.bh-upload.is-refused { align-items: flex-start; }
.bh-upload-thumb { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-control); background: var(--sunken); color: var(--ink-3); overflow: hidden; }
.bh-upload-body { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--space-1); }
.bh-upload-head { display: flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); }
.bh-upload-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-upload-status { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); font-variant-numeric: tabular-nums; }
.bh-upload.is-done .bh-upload-status { color: var(--success-ink); font-weight: var(--weight-bold); }
.bh-upload.is-failed .bh-upload-status { color: var(--danger-ink); font-weight: var(--weight-bold); }
.bh-upload-meta { color: var(--ink-3); font-size: var(--text-small); line-height: var(--leading-small); font-variant-numeric: tabular-nums; }
.bh-upload-why { color: var(--danger-ink); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-upload-fix { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-upload-card { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-1); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-upload-card.is-refused { border: 2px solid var(--danger-ink); padding: calc(var(--space-4) - 1px) calc(var(--space-4) - 1px) var(--space-1); }

/* The toast with Undo, above the tab bar */
.bh-toast-region { position: fixed; left: var(--page-pad); right: var(--page-pad); bottom: calc(var(--shell-tabbar-h) + var(--space-2) + env(safe-area-inset-bottom, 0px)); z-index: 20; display: grid; justify-items: center; pointer-events: none; }
.bh-toast { display: flex; align-items: center; gap: var(--space-3); width: fit-content; max-width: 480px; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-radius: var(--radius-card); background: var(--surface-inverse); color: var(--on-inverse); box-shadow: var(--shadow-overlay); pointer-events: auto; }
.bh-toast-action { background: transparent; border-color: var(--on-inverse); color: var(--on-inverse); }
.bh-toast-action:hover { background: var(--ink-2); color: var(--on-inverse); }
.bh-toast-action:focus-visible { box-shadow: var(--focus-ring-inverse); }
@media (min-width: 1024px) { .bh-toast-region { bottom: var(--space-6); } }

/* G-02's viewer: a full-screen dialog over the list, with Previous and Next in words (Gallery README) */
.bh-photos-list a { display: block; }
.bh-viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: var(--space-2) var(--space-2) var(--space-4); border: 0; background: var(--surface-inverse); color: var(--on-inverse); }
.bh-viewer[open] { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-3); }
.bh-viewer::backdrop { background: var(--surface-inverse); }
.bh-viewer-head { display: flex; align-items: center; justify-content: space-between; padding-left: var(--space-2); font-variant-numeric: tabular-nums; }
.bh-viewer-head .bh-icon-btn { color: var(--on-inverse); }
.bh-viewer-stage { display: grid; place-items: center; min-height: 0; }
.bh-viewer-stage > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bh-viewer-foot { display: flex; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-2); }
.bh-viewer-foot > .bh-btn { background: transparent; border-color: var(--on-inverse); color: var(--on-inverse); }
.bh-viewer-foot > .bh-btn[aria-disabled="true"] { border-color: var(--ink-2); color: var(--disabled-bg); }
.bh-viewer :focus-visible { box-shadow: var(--focus-ring-inverse); }
/* css/picker.css */
/* The guest picker (S13): G-03's sheet and its page without JavaScript, G-01's dates field and bottom bar, G-04 */

/* Day cells (PickerDay): 44 px at least, the date and its price; the states as the design system draws them */
.bh-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bh-cal th { padding-bottom: var(--space-1); color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-regular); text-align: center; }
.bh-cal td { padding: 2px 0; }
.bh-day {
  -webkit-appearance: none; appearance: none;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-width: var(--target-min); min-height: var(--target-min); margin: 0; padding: var(--space-1) 0;
  border: 0; border-radius: var(--radius-control); background-color: transparent; color: var(--ink-1);
  font-family: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.bh-day-num { font-size: var(--text-small); line-height: var(--leading-cal); font-weight: var(--weight-bold); }
.bh-day-price { font-size: var(--text-cal); line-height: var(--leading-cal); color: var(--ink-2); }
button.bh-day:hover { background-color: var(--sunken); }
.bh-day.is-today { box-shadow: inset 0 0 0 1px var(--ink-1); }
.bh-day.is-unavailable { cursor: default; background-image: repeating-linear-gradient(135deg, var(--hatch-unavailable) 0 3px, transparent 3px 7px); }
.bh-day.is-unavailable .bh-day-num { font-weight: var(--weight-regular); color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.bh-day.is-checkout-only { background-image: linear-gradient(to bottom right, var(--bh-day-ground, var(--card)) 0 50%, transparent 50% 100%), repeating-linear-gradient(135deg, var(--hatch-unavailable) 0 3px, transparent 3px 7px); }
.bh-day.is-checkout-only .bh-day-num, .bh-day.is-loading .bh-day-num { font-weight: var(--weight-regular); }
.bh-day.is-no-checkin .bh-day-num { font-weight: var(--weight-regular); text-decoration: underline dotted 2px; text-underline-offset: 3px; }
.bh-day.is-past { cursor: default; }
.bh-day.is-past .bh-day-num, .bh-day.is-loading .bh-day-num { font-weight: var(--weight-regular); color: var(--ink-3); }
.bh-day.is-unavailable:hover, .bh-day.is-past:hover { background-color: transparent; }
.bh-day.is-in-range { border-radius: 0; background-color: var(--primary-soft); background-image: none; }
.bh-day.is-in-range .bh-day-price { color: var(--primary); }
.bh-day.is-start, .bh-day.is-end, .bh-day.is-start:hover, .bh-day.is-end:hover { background-color: var(--primary); background-image: none; color: var(--on-primary); }
.bh-day.is-start .bh-day-price, .bh-day.is-end .bh-day-price { color: var(--on-primary); }
.bh-day.is-start .bh-day-num, .bh-day.is-end .bh-day-num { font-weight: var(--weight-bold); text-decoration: none; }
.bh-day:focus-visible { z-index: 1; outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.bh-day.is-today:focus-visible { box-shadow: inset 0 0 0 1px var(--ink-1), var(--focus-ring); }
.bh-day--mini { width: 32px; min-width: 32px; min-height: 32px; padding: 0; flex: none; cursor: default; }

/* Months: one on phones, two side by side from 768 px (CSS only); the month buttons move the first month by one */
.bh-picker-months { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
.bh-picker-months > .bh-month + .bh-month { display: none; }
.bh-month { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.bh-month-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--target-min); }
.bh-month-title { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); text-align: center; }
.bh-month-nav {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: var(--space-1);
  min-width: 72px; min-height: var(--target-min); padding: 0 var(--space-2); border: 1px solid var(--primary); border-radius: var(--radius-control);
  background: var(--card); color: var(--primary); font: inherit; font-size: var(--text-small); font-weight: var(--weight-bold); cursor: pointer;
}
.bh-month-nav--next { justify-content: flex-end; }
.bh-month-nav:hover { background: var(--primary-soft); }
.bh-month-nav[aria-disabled="true"] { border-color: var(--disabled-bg); background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
@media (min-width: 768px) {
  .bh-picker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-picker-months > .bh-month + .bh-month { display: grid; }
  .bh-picker-months > .bh-month:first-child .bh-month-nav--next,
  .bh-picker-months > .bh-month + .bh-month .bh-month-nav--prev { visibility: hidden; }
}

/* The legend: every pattern in words */
.bh-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2) var(--space-4); color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-legend li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bh-legend-click { display: none; }
@media (hover: hover) and (pointer: fine) {
  .bh-legend-tap { display: none; }
  .bh-legend-click { display: inline; }
}

/* G-03's sheet: full screen on phones, a centred dialog from 768 px */
.bh-picker { inset: 0; height: 100dvh; max-height: none; border-radius: 0; }
.bh-picker-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bh-picker .bh-sheet-head { justify-content: space-between; padding-block: var(--space-3); }
.bh-picker-titles { display: grid; min-width: 0; }
.bh-picker-meta { color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-picker .bh-sheet-body { gap: var(--space-6); }
.bh-picker-guests { display: grid; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.bh-picker-max { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--ink-1); }
.bh-picker-max[hidden] { display: none; }
.bh-picker-foot { display: grid; gap: var(--space-3); box-shadow: var(--shadow-overlay); }
.bh-picker-status { display: flex; gap: var(--space-2); align-items: flex-start; min-height: var(--leading-small); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-picker-status .bh-icon { flex: none; color: var(--info-ink); }
.bh-picker-status .bh-btn { margin-top: var(--space-2); }
.bh-picker-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.bh-picker-sum { display: grid; flex: 1 1 100px; min-width: 0; }
.bh-picker-row > .bh-btn { flex: none; white-space: nowrap; }
.bh-picker-sum > .bh-num { font-weight: var(--weight-bold); }
.bh-picker-row > .bh-btn--primary { min-width: 104px; }
.bh-picker-row > [hidden] { display: none; }
@media (min-width: 768px) {
  .bh-picker { inset: 0; width: min(784px, calc(100% - var(--space-12))); height: fit-content; max-height: calc(100dvh - var(--space-16)); border-radius: var(--radius-card); }
  .bh-picker .bh-sheet-body { padding-inline: var(--space-6); }
  .bh-picker-foot { padding-inline: var(--space-6); box-shadow: none; }
}

/* The stepper (Stepper): − and + at 44 px */
.bh-stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--target-min); }
.bh-stepper-text { display: grid; 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-3); }
.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: 2ch; text-align: center; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* G-01: the dates field, the notes and the phone's bottom bar (gone from 768 px, where the card sticks) */
.bh-stay { display: grid; gap: var(--space-4); scroll-margin-top: var(--space-4); }
.bh-stay-form { display: grid; gap: var(--space-3); }
.bh-datefield {
  -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0;
  border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--card); color: var(--ink-1);
  font: inherit; text-align: left; cursor: pointer;
}
.bh-datefield:hover { border-color: var(--ink-1); }
.bh-datefield-part { display: grid; min-width: 0; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bh-datefield-part + .bh-datefield-part { border-left: 1px solid var(--line); }
.bh-datefield-guests { grid-column: 1 / -1; border-bottom: 0; border-left: 0 !important; }
.bh-datefield-key { color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-datefield-value { font-weight: var(--weight-bold); }
.bh-stay-note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-card); background: var(--info-bg); color: var(--ink-1); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-stay-note > .bh-icon { flex: none; color: var(--info-ink); }
.bh-stay-note.is-warning { background: var(--warning-bg); }
.bh-stay-note.is-warning > .bh-icon { color: var(--warning-ink); }
.bh-stay-note .bh-btn { margin-left: var(--space-1); }
.bh-pickbar {
  position: fixed; inset: auto 0 0 0; z-index: 10; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--page-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-overlay);
}
.bh-pickbar-main { display: grid; flex: 1 1 auto; min-width: 0; }
.bh-pickbar .bh-picker-meta { color: var(--ink-2); }
html:has(.bh-pickbar) { scroll-padding-bottom: 96px; }
body:has(.bh-pickbar) { padding-bottom: 88px; }
@media (min-width: 768px) {
  .bh-pickbar { display: none; }
  body:has(.bh-pickbar) { padding-bottom: 0; }
}

/* G-04 (PriceBreakdown) */
.bh-g04 { display: grid; gap: var(--space-3); }
.bh-breakdown { display: grid; gap: var(--space-2); margin: 0; font-variant-numeric: tabular-nums; }
.bh-breakdown-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.bh-breakdown-row > dt { min-width: 0; overflow-wrap: anywhere; }
.bh-breakdown-row > dd { flex: none; margin: 0; text-align: right; white-space: nowrap; }
.bh-breakdown-row.is-sub, .bh-breakdown-row.is-strong { font-weight: var(--weight-bold); }
.bh-breakdown-row.is-discount > dd { color: var(--success-ink); }
.bh-breakdown-row.is-total { padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-breakdown-detail { display: block; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-regular); }
.bh-paysplit { padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--sunken); }

/* G-03 without JavaScript */
.bh-dates { --bh-day-ground: var(--page); display: grid; gap: var(--space-4); max-width: 784px; margin: 0 auto; padding: var(--space-2) var(--page-pad) var(--space-8); }
.bh-dates-back { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; min-height: var(--target-min); font-weight: var(--weight-bold); }
.bh-dates-form { display: grid; gap: var(--space-6); }
.bh-dates-guests { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-dates-guests.is-error { border: 2px solid var(--danger-ink); }
.bh-dates-guests > legend { padding: 0 var(--space-1); }
.bh-dates-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
/* css/pricing.css */
/* O-14, prices and stay rules: what apartments.css's form parts don't cover. */
.bh-optional { font-weight: var(--weight-regular); color: var(--ink-2); }
.bh-input-unit-row > .bh-unit { min-width: 0; overflow-wrap: anywhere; }

/* Long-stay levels: "[10] % off from [7] nights" on one line where it fits. */
.bh-level { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--space-2); }
.bh-level > legend { padding: 0; margin-bottom: var(--space-2); }
.bh-level-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.bh-input--short { width: 72px; flex: none; }

/* The sample quote: label left, amount right; the total and what the guest pays stand out. */
.bh-sample-stay { margin: 0; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-sample-lines { width: 100%; border-collapse: collapse; }
.bh-sample-lines th { padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; font-weight: var(--weight-regular); }
.bh-sample-lines td { padding: var(--space-2) 0; text-align: right; white-space: nowrap; vertical-align: top; }
.bh-sample-lines tr + tr > * { border-top: 1px solid var(--line); }
.bh-sample-lines tr:nth-last-child(-n + 2) > * { font-weight: var(--weight-bold); }
/* css/promo.css */
/* Promo codes (S14): C-01's field (G-04's states), O-17's list and its form. The form parts are apartments.css's. */

/* C-01: "Add a promo code" opens the field, without script (<details>) */
.bh-promo { margin-top: var(--space-3); }
.bh-promo-add {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); margin-left: calc(var(--space-2) * -1);
  padding: 0 var(--space-2); border-radius: var(--radius-control); color: var(--primary); font-weight: var(--weight-bold); text-decoration: underline;
}
.bh-promo-form { display: grid; gap: var(--space-2); }
.bh-promo-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bh-promo-row > .bh-input { flex: 1 1 140px; }
.bh-promo-input { font-family: var(--font-mono); text-transform: uppercase; }
.bh-promo-message { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-small); line-height: var(--leading-small); }
.bh-promo-message.is-ok { color: var(--success-ink); }
.bh-promo-message.is-info { color: var(--info-ink); }
.bh-promo-message.is-error { color: var(--danger-ink); }

/* O-17: the long-stay discounts and the codes, one card each */
.bh-promo-list { display: grid; gap: var(--space-3); }
.bh-promo-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); 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;
}
a.bh-promo-item:hover { border-color: var(--ink-2); color: var(--ink-1); }
.bh-promo-item-body { display: grid; gap: var(--space-1); min-width: 0; }
.bh-promo-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bh-promo-name { font-family: var(--font-mono); }

/* O-17's form */
.bh-promo-edit { display: grid; gap: var(--space-6); min-width: 0; }
.bh-promo-currencies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh-promo-choices { display: grid; gap: var(--space-2); }
.bh-promo-choice { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--target-min); cursor: pointer; }
.bh-promo-choice > input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
.bh-promo-choice-meta { display: block; }
.bh-promo-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.bh-promo-date { max-width: 240px; }
.bh-promo-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.bh-promo-stop { padding-top: var(--space-6); border-top: 1px solid var(--line); justify-items: start; }
/* css/public.css */
/* Guest pages of an apartment: G-01, its preview, and G-02 */

/* G-01: one column on phones in the owner's order; from 768 px the title comes first and the price card sticks beside
   the content. Rows have no gap, so the price card's span leaves no empty space when a section is missing. */
.bh-apt { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1200px; margin: 0 auto; padding-bottom: var(--space-12); }
.bh-apt > * { min-width: 0; margin-inline: var(--page-pad); }
.bh-apt > * + * { margin-top: var(--space-8); }
.bh-apt > .bh-apt-gallery { margin-inline: 0; }
.bh-apt > .bh-apt-head { margin-top: var(--space-4); }
.bh-apt > .bh-apt-facts { margin-top: var(--space-4); }

.bh-apt-gallery { position: relative; }
.bh-apt-cover { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sunken); }
.bh-apt-cover--none { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.bh-apt-all { position: absolute; right: var(--space-4); bottom: var(--space-4); }

.bh-apt-head { display: grid; gap: var(--space-2); }
.bh-apt-where { display: flex; align-items: center; gap: var(--space-1); }
/* auto-fit: two columns of a 320 px screen are 136 px, and a Georgian fact ("100 მ საბაგირომდე") is wider than that,
   so on the narrowest phones the list is one column. It is two from 390 px and four from 768 px (below). */
.bh-apt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2) var(--space-4); color: var(--ink-2); }
/* "anywhere" rather than "break-word": each line is a flex container, and only "anywhere" lets a flex item's minimum
   shrink below its longest word. A Georgian amenity is longer than half a 360 px screen, and would otherwise run
   through the column beside it. */
.bh-apt-facts > li, .bh-apt-amenities > li, .bh-apt-lines > li { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.bh-apt-facts .bh-icon, .bh-apt-amenities .bh-icon, .bh-apt-lines .bh-icon { flex: none; margin-top: 2px; color: var(--ink-2); }

.bh-apt-price { display: grid; gap: var(--space-3); }
.bh-apt-from { color: var(--ink-1); font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: var(--weight-bold); }

.bh-apt-host { display: grid; gap: var(--space-4); }
.bh-apt-host-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bh-apt-avatar {
  display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); font-weight: var(--weight-bold);
}
.bh-apt-lines { display: grid; gap: var(--space-3); }

.bh-apt-section { display: grid; gap: var(--space-3); }
.bh-apt-prose { display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.bh-apt-prose > p { white-space: pre-line; }
.bh-apt-amenities { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3) var(--space-4); }
.bh-apt-rules { display: grid; gap: var(--space-1); padding-left: var(--space-5); list-style: disc; overflow-wrap: anywhere; }

.bh-apt-map { height: 240px; }
[data-area-map][hidden], [data-map-failed][hidden] { display: none; }

.bh-apt-preview { position: sticky; top: 0; z-index: 5; align-items: center; border-radius: 0; padding-inline: var(--page-pad); }
.bh-apt-preview > .bh-banner-body { flex: 1 1 auto; }

@media (min-width: 768px) {
  .bh-apt { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); column-gap: var(--space-12); padding: var(--space-8) var(--page-pad) var(--space-16); }
  .bh-apt > * { grid-column: 1; margin-inline: 0; }
  .bh-apt > * + * { margin-top: var(--space-12); }
  .bh-apt > .bh-apt-head { grid-row: 1; grid-column: 1 / -1; margin-top: 0; }
  .bh-apt > .bh-apt-gallery { grid-row: 2; grid-column: 1 / -1; margin-top: var(--space-6); }
  .bh-apt > .bh-apt-facts { margin-top: var(--space-8); }
  .bh-apt > .bh-apt-price { grid-column: 2; grid-row: 3 / span 9; align-self: start; position: sticky; top: var(--space-6); margin-top: var(--space-8); padding: var(--space-6); }
  .bh-apt-cover { aspect-ratio: auto; height: 440px; border-radius: var(--radius-card); }
  .bh-apt-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bh-apt-amenities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-apt-map { height: 320px; }
}

/* G-02: the list of photos, one column on phones and three from 768 px */
.bh-photos { display: grid; gap: var(--space-4); max-width: 1200px; margin: 0 auto; padding-bottom: var(--space-8); }
.bh-photos-head { display: flex; align-items: center; gap: var(--space-1); min-height: 64px; padding: var(--space-2) var(--page-pad) var(--space-2) var(--space-1); border-bottom: 1px solid var(--line); }
.bh-photos-title { display: grid; min-width: 0; }
.bh-photos-list { display: grid; gap: var(--space-2); }
.bh-photos-list img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sunken); }
.bh-photos > p, .bh-photos-end { padding-inline: var(--page-pad); }
.bh-photos-end { display: grid; gap: var(--space-3); justify-items: stretch; }
.bh-photos-end > .bh-btn--tertiary { justify-self: center; }
@media (min-width: 768px) {
  .bh-photos { padding-inline: var(--page-pad); }
  .bh-photos-head { padding-inline: 0; }
  .bh-photos > p, .bh-photos-end { padding-inline: 0; }
  .bh-photos-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-photos-end { justify-items: start; }
  .bh-photos-end > .bh-btn--block { width: auto; }
}
/* css/reports.css */
/* Reports (S46): O-33 at /dashboard/reports and A-12 at /admin/report. Both are tables of numbers, so the whole
   stylesheet is one prefix (bh-rp-) and both pages share the month bar, the tables and the download line. The cards,
   banners and buttons are the design system's. */

/* The month bar: Previous, the month, Next. On a phone it wraps to two lines rather than squeezing the heading. */
.bh-rp-months { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bh-rp-month { flex: 1 1 auto; margin: 0; color: var(--ink-1); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); text-align: center; }
.bh-rp-nonext { flex: none; }

/* A month with nothing in it */
.bh-rp-empty { display: grid; gap: var(--space-3); justify-items: start; }
.bh-rp-empty > * { margin: 0; }
.bh-rp-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* One apartment (O-33) and the month's totals */
.bh-rp-card, .bh-rp-totals { display: grid; gap: var(--space-4); min-width: 0; }
.bh-rp-head { display: grid; gap: var(--space-1); }
.bh-rp-head > * { margin: 0; }

/* The big figures of a card: occupancy, and revenue for an Owner. A Manager's card has the one figure. */
.bh-rp-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin: 0; }
.bh-rp-figures > div { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-control); background: var(--sunken); }
.bh-rp-figures dt { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-rp-figures dd { margin: 0; font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-rp-figures dd.bh-small { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-regular); }

/* Paid out, the fee and the commissions: smaller than the figures, in a row of their own */
.bh-rp-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; }
.bh-rp-money > div { display: grid; gap: 2px; }
.bh-rp-money dt { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-rp-money dd { margin: 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; }

/* The tables: sources per apartment (O-33), currencies (O-33's totals) and the lines of the month (A-12). Numbers are
   right-aligned so a column of amounts reads down; the first column is the name. A wide table scrolls sideways. */
.bh-rp-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); line-height: var(--leading-small); }
.bh-rp-table caption { margin-bottom: var(--space-2); text-align: left; }
.bh-rp-table th, .bh-rp-table td { padding: var(--space-2); border-bottom: 1px solid var(--line); text-align: right; overflow-wrap: anywhere; }
.bh-rp-table th:first-child, .bh-rp-table td:first-child { text-align: left; }
.bh-rp-table thead th { color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold); }
.bh-rp-table tbody th, .bh-rp-table tfoot th { color: var(--ink-1); font-weight: var(--weight-regular); }
.bh-rp-table tfoot th, .bh-rp-table tfoot td { font-weight: var(--weight-bold); border-bottom: 0; }
.bh-rp-table tbody tr:last-child th, .bh-rp-table tbody tr:last-child td { border-bottom: 0; }
.bh-rp-table tfoot td, .bh-rp-table tfoot th { border-top: 1px solid var(--border-input); }

.bh-rp-download { margin: 0; }
.bh-rp-how { display: grid; gap: var(--space-2); color: var(--ink-2); }
.bh-rp-how > * { margin: 0; }
/* css/requests.css */
/* Requests (S19): O-19's request part and B-01's contact card. */
.bh-o19 { display: grid; gap: var(--space-4); }
.bh-o19 .bh-card { display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.bh-o19-head { justify-items: start; }
.bh-o19-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bh-o19-decline { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-control); background: var(--danger-bg); }
.bh-o19-money { display: grid; gap: var(--space-2); margin: 0; }
.bh-o19-money > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.bh-o19-money dd { margin: 0; text-align: end; }
.bh-o19-message { display: grid; gap: var(--space-1); margin: 0; }
.bh-o19-message blockquote { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--line); white-space: pre-line; }

/* The owner chip of a request with 4 hours or less left (ST-03): the design system's danger colours. */
.bh-chip--danger { border-color: transparent; background: var(--danger-bg); color: var(--danger-ink); font-size: var(--text-label); line-height: var(--leading-label); }

/* B-01's contact card (B01-contact-card). */
.bh-rq-contact { display: grid; gap: var(--space-2); justify-items: start; overflow-wrap: anywhere; }
.bh-rq-phone { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-rq-apps { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bh-rq-locked { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--ink-2); }
.bh-rq-locked > .bh-icon { flex: none; margin-top: 2px; }
/* css/shell.css */
/* Shell: the environment strip, the public header and footer, and the error pages (S-02, S-03). */

/* Environment strip (S-04): above every page outside Production, and above the reconnect scrim */
.bh-env {
  position: relative; z-index: 30; display: flex; align-items: stretch; justify-content: center; min-height: var(--shell-env-h);
  background: var(--surface-inverse); color: var(--on-inverse); text-align: center;
  font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold);
}
.bh-env::before, .bh-env::after { content: ""; flex: none; width: var(--space-5); background: repeating-linear-gradient(135deg, var(--warning-bg) 0 4px, transparent 4px 8px); }
.bh-env-text { flex: 1 1 auto; min-width: 0; padding: 5px var(--space-2); }

/* Public header */
.bh-pubhead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--shell-appbar-h);
  padding: 0 var(--space-2) 0 var(--page-pad); background: var(--page); border-bottom: 1px solid var(--line);
}
.bh-pubhead-actions { display: flex; align-items: center; gap: var(--space-1); }
/* The narrowest phones: "შესვლა" next to the language menu leaves the wordmark no room, and the button breaks the
   word across two lines. One step smaller gives it back. */
@media (max-width: 359px) {
  .bh-pubhead > .bh-wordmark { font-size: var(--text-h3); line-height: var(--leading-h3); }
  .bh-pubhead-actions .bh-btn { white-space: nowrap; }
  .bh-pubhead > .bh-wordmark .bh-mark { display: none; }
  /* The language menu hangs from the right edge of its button; at 220 px wide it would hang past the left edge of a
     320 px screen, so here it is as wide as its longest language and no wider. */
  .bh-pubhead .bh-menu { min-width: 0; }
}
@media (min-width: 768px) { .bh-pubhead { padding-inline: var(--page-pad); } }
@media (min-width: 1200px) { .bh-pubhead { padding-inline: max(var(--page-pad), calc((100% - 1200px) / 2)); } }

/* Public footer */
.bh-pubfoot {
  display: grid; gap: var(--space-4); padding: var(--space-8) var(--page-pad); background: var(--sunken); border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small);
}
.bh-pubfoot > .bh-wordmark { font-size: var(--text-h3); line-height: var(--leading-h3); }
/* auto-fit, not two fixed columns: "კონფიდენციალურობა" is 164 px, wider than half a 375 px screen, and two columns
   put it through its neighbour. 170 px is that link plus its own width's worth of room, so the narrow phones get one
   column and nothing breaks mid-word. "anywhere" rather than "break-word" is the safety net for a longer word in
   another language: only "anywhere" makes a flex item's minimum shrink, and each link is one. */
.bh-pubfoot-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); column-gap: var(--space-4); }
.bh-pubfoot-links a { display: flex; align-items: center; min-height: var(--target-min); overflow-wrap: anywhere; }
.bh-pubfoot-company { display: grid; gap: var(--space-1); }
.bh-pubfoot-copy { color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); }
@media (min-width: 1200px) { .bh-pubfoot-links { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: var(--space-8); } }

/* Not found (S-02) and error (S-03) */
.bh-sys { padding-top: var(--space-12); }
.bh-actions { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.bh-ref { display: grid; gap: var(--space-2); }
/* css/switches.css */
/* A-13 switches: the platform's switches in a card, the jobs in a table, and the confirmation's before and after */
.bh-switches { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-2); }
.bh-switches-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.bh-switch-list > li + li { border-top: 1px solid var(--line); }
/* A row of the list: the design system's Switch (app.css), wrapping its control under the text on a narrow screen */
.bh-switch-row { flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; }
.bh-switch-row > .bh-switch-text { gap: 2px; flex: 1 1 280px; }
.bh-switch-row .bh-meta, .bh-job-name + .bh-meta { overflow-wrap: anywhere; }
.bh-jobs { display: grid; gap: var(--space-3); }
/* position: relative so the scroller is the containing block for what it holds. Without it an absolutely positioned
   descendant — A-13's screen-reader-only "Actions" header, .bh-sr in the last th — belongs to an ancestor outside the
   scroller, so overflow-x never clips it: it sat at x ≈ 448 of a 489 px table and widened the page itself by 89 px in
   ka and 12 px in ru, which the sweep caught only when a dead outbox message made that table render (S37). */
.bh-table-scroll { position: relative; max-width: 100%; overflow-x: auto; }
.bh-jobs .bh-admin-table td { vertical-align: middle; }
.bh-job-switch { cursor: pointer; }
.bh-job-name { display: block; font-family: var(--font-mono); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }

/* The confirmation: the state now and after, then what the change does */
.bh-change { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--sunken); }
.bh-change > div { display: contents; }
.bh-change dt { color: var(--ink-2); }
.bh-change dd { margin: 0; font-weight: var(--weight-bold); }
.bh-change-effect { color: var(--ink-1); }
/* css/translations.css */
/* Translations (S07): O-07's LanguageTabs and translation states (owner-setup boards O-07-*), and G-01's label on a
   machine translation (guest-public G01_m_no_dates, G01_m_original). */

.bh-ltabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-ltab { min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-1) 2px; border: 0; border-radius: calc(var(--radius-card) - 2px); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); text-align: center; cursor: pointer; }
.bh-ltab[aria-selected="true"] { background: var(--card); color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line), inset 0 -3px 0 var(--primary); }
.bh-ltab:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
.bh-ltab .bh-chip { max-width: 100%; }
.bh-ltabs + [role="tabpanel"] { margin-top: var(--space-4); }

.bh-tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-tr-box { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-3); border-radius: var(--radius-card); background: var(--warning-bg); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-tr-box--error { background: var(--danger-bg); }
.bh-tr-box-title { font-weight: var(--weight-bold); color: var(--warning-ink); }
.bh-tr-box--error .bh-tr-box-title { color: var(--danger-ink); }
.bh-tr-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bh-tr-action { justify-self: start; }
.bh-tr-source { padding: var(--space-3); border: 1px dashed var(--border-input); border-radius: var(--radius-control); background: var(--sunken); font-size: var(--text-small); line-height: var(--leading-small); white-space: pre-line; overflow-wrap: anywhere; }

.bh-tr-label { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-1); font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-3); }
.bh-tr-label a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-1); text-decoration: underline; text-underline-offset: 2px; }
/* css/verification.css */
/* Owner verification (S23): O-27 and A-03's viewer. */

/* O-27 */
.bh-ver-intro, .bh-ver-state { display: grid; gap: var(--space-2); }
.bh-ver-intro > *, .bh-ver-state > * { margin: 0; }
.bh-ver-needs { display: grid; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.bh-ver-needs > li { display: flex; align-items: flex-start; gap: var(--space-2); }
.bh-ver-needs .bh-icon { flex: none; color: var(--primary); }
.bh-ver-form { gap: var(--space-6); }
.bh-ver-form > .bh-card { padding: var(--space-4); }
.bh-ver-file { max-width: 100%; min-height: var(--target-min); font: inherit; }
.bh-ver-check { padding-top: 0; border-top: 0; }
.bh-ver-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.bh-ver-facts dt { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-ver-facts dd { margin: 0 0 var(--space-2); }
.bh-ver-next { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.bh-ver-change > summary { list-style: none; justify-self: start; }
.bh-ver-change > summary::-webkit-details-marker { display: none; }
.bh-ver-change-body { display: grid; gap: var(--space-4); padding-top: var(--space-4); }
.bh-ver-change-body .bh-btn--primary { justify-self: start; }

/* A-03's viewer: the image fits the column; the page never scrolls sideways for it. */
.bh-ver-viewer { display: grid; gap: var(--space-2); justify-items: start; }
.bh-ver-viewer > p { margin: 0; }
.bh-ver-canvas { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--sunken); }
.bh-ver-canvas[hidden] { display: none; }

@media (min-width: 768px) {
  .bh-ver-facts { grid-template-columns: 200px minmax(0, 1fr); }
  .bh-ver-facts dd { margin: 0; }
}

/* O-28's online-payment switch once verified (payments.css draws the locked one): the design system's Switch track. */
.bh-pay-switch--live { cursor: pointer; }
.bh-pay-switch--live > span { border: 0; background: var(--border-input); transition: background-color var(--dur-fade) var(--ease); }
.bh-pay-switch--live > span::after { top: 3px; left: 3px; box-shadow: none; transition: transform var(--dur-fade) var(--ease); }
.bh-pay-switch--live[aria-checked="true"] > span { background: var(--primary); }
.bh-pay-switch--live[aria-checked="true"] > span::after { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) {
  .bh-pay-switch--live > span, .bh-pay-switch--live > span::after { transition: none; }
}

/* C-01's "Verified owner" in the stay card (DQ-32). */
.bh-co-verified { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--success-ink); font-weight: var(--weight-bold); }
/* css/welcome.css */
/* O-02, the first sign-in: the owner terms card, the draft's full text, and the Continue bar */
.bh-welcome { width: 100%; max-width: var(--shell-content-max); margin: 0 auto; }
.bh-welcome-form { display: grid; gap: var(--space-6); padding: var(--space-6) var(--page-pad) 0; }
.bh-welcome-head { display: grid; gap: var(--space-2); }
.bh-link-button {
  appearance: none; margin: 0; padding: 0; border: 0; background: none; color: var(--primary); font: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer;
}
.bh-link-button:hover { color: var(--primary-hover); text-decoration-thickness: 2px; }
.bh-terms { display: grid; gap: var(--space-3); }
.bh-terms.is-error { border: 2px solid var(--danger-ink); }
.bh-terms-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-terms-head h2 { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-chip--warning { border-color: transparent; background: var(--warning-bg); color: var(--warning-ink); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-terms-points { display: grid; gap: var(--space-1); padding-left: var(--space-5); list-style: disc; }
.bh-terms-full[open] > summary .bh-icon { transform: rotate(180deg); }
.bh-terms-text {
  display: grid; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line);
  font-size: var(--text-small); line-height: var(--leading-small); overflow-wrap: break-word;
}
.bh-terms-text :is(h3, h4, h5) { font-weight: var(--weight-bold); }
.bh-terms-text h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
.bh-terms-text h4 { margin-top: var(--space-3); font-size: var(--text-body); line-height: var(--leading-body); }
.bh-terms-text :is(ul, ol) { display: grid; gap: var(--space-1); padding-left: var(--space-5); }
.bh-terms-text ul { list-style: disc; }
.bh-terms-text ol { list-style: decimal; }
.bh-terms-text blockquote { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--warning-bg); }
.bh-terms-text hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--line); }
.bh-terms-text table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.bh-terms-text :is(th, td) { padding: var(--space-1); border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.bh-terms-text .bh-align-right { text-align: right; }
.bh-terms-text .bh-align-center { text-align: center; }
.bh-error { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--danger-ink); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-check { display: flex; gap: var(--space-3); align-items: flex-start; padding-top: var(--space-4); border-top: 1px solid var(--line); cursor: pointer; }
.bh-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
.bh-check-text { display: grid; gap: var(--space-1); }
.bh-actionbar {
  position: sticky; bottom: 0; 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);
}
@media (min-width: 1024px) {
  .bh-welcome-form { padding-top: var(--space-10); }
  .bh-actionbar { position: static; margin: 0; padding: 0 0 var(--space-12); border: 0; background: none; }
  .bh-actionbar .bh-btn { width: auto; }
}