.homerunner-spaces-container {
  width: 100%;
}

.homerunner-spaces-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(var(--spaces-columns-sm, 1), minmax(0, 1fr));
}

@media (min-width: 640px) {
  .homerunner-spaces-grid {
    grid-template-columns: repeat(var(--spaces-columns-md, 2), minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .homerunner-spaces-grid {
    grid-template-columns: repeat(var(--spaces-columns-lg, 3), minmax(0, 1fr));
  }
}

.homerunner-spaces-card {
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  padding: 16px 18px;
}

.homerunner-spaces-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
}

.homerunner-spaces-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.15em;
  line-height: 1;
}

.homerunner-spaces-total {
  font-weight: 400;
  opacity: 0.6;
}

.homerunner-spaces-bed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.homerunner-spaces-bed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
}

.homerunner-spaces-bed-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1em;
  line-height: 1;
  flex: 0 0 auto;
}

.homerunner-spaces-bed-count {
  font-weight: 600;
  min-width: 1.2em;
}

.homerunner-spaces-empty {
  margin: 0;
  opacity: 0.7;
}

/* Bedroom showcase photo/details (dashboard#1420 PR B, toolkit
   bedroom-showcase parity). No color literals: text inherits the widget's
   own resolved color, and the lightbox overlay is a fixed dark scrim
   (a photo viewer, intentionally theme-independent, same convention as
   most lightbox implementations) rather than something needing the
   light/dark dual-emit treatment. */
.homerunner-spaces-photo-trigger {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: none;
}

.homerunner-spaces-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homerunner-spaces-photo-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

.homerunner-spaces-details {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.homerunner-spaces-details ul,
.homerunner-spaces-details ol {
  margin: 0;
  padding-left: 1.25em;
}

.homerunner-spaces-details p {
  margin: 0 0 0.5em;
}

.homerunner-spaces-details p:last-child {
  margin-bottom: 0;
}

.homerunner-spaces-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  /* Entrance fade, driven by useModalPresence's `visible` (one frame after
     mount). No exit animation: the overlay unmounts as soon as it closes. */
  opacity: 0;
  transition: opacity 150ms ease;
}

.homerunner-spaces-lightbox.is-open {
  opacity: 1;
}

.homerunner-spaces-lightbox-img {
  max-width: min(90vw, 1200px);
  max-height: 85vh;
  object-fit: contain;
}

.homerunner-spaces-lightbox-close,
.homerunner-spaces-lightbox-nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homerunner-spaces-lightbox-close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  font-size: 1.125rem;
}

.homerunner-spaces-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
}

.homerunner-spaces-lightbox-prev {
  left: 16px;
}

.homerunner-spaces-lightbox-next {
  right: 16px;
}

.homerunner-spaces-lightbox-count {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.875rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
}

/* Dark surface (#1567). Appended, never branched — every rule above is
   byte-identical to what light shipped (#909, docs/theme-first-paint.md).
 *
 * The room card had no surface of its own. `widget.tsx` cancels the
 * common.css host paint (`:root, :host { background-color: transparent
 * !important }`), which every content widget is required to do
 * (test/widgets/host-background-contract.test.tsx), so the host is
 * transparent and the card's text sat on whatever the customer's page
 * painted. With a dark-scheme feed that is a dark canvas, and the text — which
 * inherits the UA default black, spaces.css never set a colour — came out
 * black on near-black: measured rgb(0, 0, 0) on rgb(26, 26, 26) in the
 * dashboard preview, about 1.1:1.
 *
 * Background and foreground are pinned TOGETHER on the card, the way
 * reviews.css does it. Pinning `color` alone is the trap: it would make a
 * dark-scheme card near-white text on a LIGHT customer page, i.e. the same bug
 * mirrored. A card that owns both is legible whatever sits behind it. */
:where(:host([data-hr-theme="dark"])) .homerunner-spaces-card {
  background-color: var(--card);
  color: var(--card-foreground);
}

@media (prefers-color-scheme: dark) {
  :where(:host([data-hr-scheme="auto"]:not([data-hr-theme]))) .homerunner-spaces-card {
    background-color: var(--card);
    color: var(--card-foreground);
  }
}

/* Section header + empty state (#1569). WidgetSection.tsx documents that the
 * matching `.hr-widget-section-*` rules live in each widget's own CSS
 * (components/WidgetSection.tsx:40-41); spaces shipped none, so with
 * `section.show: true` the heading had no flex row and no divider — in
 * LIGHT too, not only dark (widgets/amenities/amenities.css:161-188 is the
 * pattern every other content widget uses). The empty-state message
 * (.homerunner-spaces-empty, above) had the same black-on-dark gap the room
 * card had before #1567/#1568.
 *
 * Structure only (flex row, divider geometry, the responsive override) is
 * new to this file, so porting it unconditionally changes nothing that
 * shipped — #909's byte-identical guarantee is about EXISTING lines, and
 * there are none here yet.
 *
 * Colour does NOT follow amenities.css's/specs.css's unconditional
 * `color: var(--foreground)` on the title, though. Neither the title/line
 * nor the empty-state message sits on a surface of its own — same as the
 * room card before #1567 — so an unscoped colour here repeats the exact
 * trap #1568's first attempt was rejected for: invisible the moment the
 * widget's OWN theme setting doesn't match the customer page behind it.
 * Colour is dark-appended only, under both dual-emit prefixes, same as the
 * card. The empty state gets the identical `--card`/`--card-foreground`
 * pairing the card uses, for the same reason. The line needs its OWN colour
 * rule, not just the title's — it is the title's SIBLING, not its
 * descendant, so it cannot inherit a colour set only on the title. */
.hr-widget-section {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
}

.hr-widget-section-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.hr-widget-section-line {
  flex: 1;
  height: 1px;
  background-color: currentColor;
  opacity: 0.18;
  display: block;
}

@media (max-width: 640px) {
  .hr-widget-section-title { font-size: 1.25rem; }
  .hr-widget-section { gap: 1rem; margin-bottom: 1.5rem; }
}

:where(:host([data-hr-theme="dark"])) .hr-widget-section-title {
  color: var(--foreground);
}

:where(:host([data-hr-theme="dark"])) .hr-widget-section-line {
  color: var(--foreground);
}

:where(:host([data-hr-theme="dark"])) .homerunner-spaces-empty {
  background-color: var(--card);
  color: var(--card-foreground);
}

@media (prefers-color-scheme: dark) {
  :where(:host([data-hr-scheme="auto"]:not([data-hr-theme]))) .hr-widget-section-title {
    color: var(--foreground);
  }

  :where(:host([data-hr-scheme="auto"]:not([data-hr-theme]))) .hr-widget-section-line {
    color: var(--foreground);
  }

  :where(:host([data-hr-scheme="auto"]:not([data-hr-theme]))) .homerunner-spaces-empty {
    background-color: var(--card);
    color: var(--card-foreground);
  }
}