[data-donna-ihf-detail] {
  background: #f7f6f2;
}

/* The theme's outer main has a 60vh minimum height. On tall screens the
   loader article can end before that height, so paint the remaining area with
   the same cream instead of exposing the body background. */
main#main-content:has([data-donna-ihf-detail]) {
  background: #f7f6f2;
}

/* Keep Kestrel mounted and fetching at its normal width, but keep its
   loading spinner and branding out of sight until real content is ready. */
[data-donna-ihf-detail]:not([data-donna-ihf-detail-state="ready"]):not([data-donna-ihf-detail-state="failed"]) .ihf-container {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.donna-ihf-detail-loader {
  display: grid;
  min-height: clamp(320px, 55vh, 520px);
  place-items: center;
  padding: 32px 16px;
  color: #35606a;
  text-align: center;
}

[data-donna-ihf-detail-state="ready"] .donna-ihf-detail-loader,
[data-donna-ihf-detail-state="failed"] .donna-ihf-detail-loader {
  display: none;
}

.donna-ihf-detail-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  max-width: 360px;
}

.donna-ihf-detail-loader svg {
  display: block;
  width: 96px;
  height: 80px;
}

.donna-ihf-house-part,
.donna-ihf-house-windows {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.donna-ihf-house-part {
  opacity: .48;
  animation: donna-ihf-house-highlight 2s ease-in-out infinite;
}

.donna-ihf-house-left { animation-delay: .5s; }
.donna-ihf-house-right { animation-delay: 1s; }
.donna-ihf-house-door { animation-delay: 1.5s; }
.donna-ihf-house-windows { opacity: .65; stroke-width: 2; }

@keyframes donna-ihf-house-highlight {
  0%, 14%, 48%, 100% { opacity: .48; }
  24%, 38% { opacity: 1; }
}

.donna-ihf-detail-loader p {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.donna-ihf-detail-stalled-text,
[data-donna-ihf-detail-state="stalled"] .donna-ihf-detail-loader svg,
[data-donna-ihf-detail-state="stalled"] .donna-ihf-detail-loading-text {
  display: none;
}

[data-donna-ihf-detail-state="stalled"] .donna-ihf-detail-stalled-text {
  display: block;
}

@media (max-width: 639px) {
  .donna-ihf-detail-loader {
    min-height: min(50vh, 360px);
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .donna-ihf-house-part {
    opacity: 1;
    animation: none;
  }
}