/* Bed & Bath Widget Styles */
.homerunner-specs-container {
  font-family: inherit;
  line-height: 1.6;
  color: inherit;
}

.specs-widget {
  /* Main widget container */
}

.icomoon-icon {}

/* Loading skeleton */
.homerunner-specs-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block;

  background-color: var(--base-color);
  width: 100%;
  border-radius: 0.25rem;
  display: inline-flex;
  line-height: 1;
  position: relative;
  user-select: none;
  overflow: hidden;
}

.homerunner-specs-skeleton::after {
  content: ' ';
  display: var(--pseudo-element-display);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(
    90deg,
    var(--base-color) 0%,
    var(--highlight-color) 50%,
    var(--base-color) 100%
  );
  transform: translateX(-100%);
  animation-name: homerunner-specs-skeleton-slide;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes homerunner-specs-skeleton-slide {
  100% {
    transform: translateX(100%);
  }
}

/* Dark mode skeleton */
.dark .homerunner-specs-skeleton {
  --base-color: #374151;
  --highlight-color: #4b5563;
}

/* Dark mode skeleton — CSS first-paint path (#900). Sibling rules to the
   `.dark` rule above (append-only): the runtime marker fires post-hydration
   and for explicit-dark hosts, while the `@media` auto rule paints dark AT
   PARSE for a server-stamped `data-hr-scheme="auto"` widget on a dark OS,
   before any JS adds the `.dark` class. Both conditions of the auto selector
   live inside `:host(...)` so the `:not` matches the host. Same declaration
   values as the `.dark` rule. */
:host([data-hr-theme="dark"]) .homerunner-specs-skeleton {
  --base-color: #374151;
  --highlight-color: #4b5563;
}

@media (prefers-color-scheme: dark) {
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .homerunner-specs-skeleton {
    --base-color: #374151;
    --highlight-color: #4b5563;
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion) {
  .homerunner-specs-skeleton {
    --pseudo-element-display: none;
  }
}

/* Error state styles */
.homerunner-specs-error {
  text-align: center;
  padding: 2rem;
  color: #dc2626;
}

.homerunner-specs-error-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.homerunner-specs-error-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.homerunner-specs-error-message {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  /* #1002 item 4 flagged this as dead — that reasoning only covered
     SpecsList.tsx's LOADED state, which sets column count via an inline
     `gridTemplateColumns` style and never renders this class. It's live for
     the LOADING state: SpecsSkeleton.tsx renders
     `<div className="specs-widget"><div className="grid grid-cols-3 ...">`
     directly, and common.css's Tailwind @source widgets glob compiles that
     usage into the shipped Tailwind utility — confirmed at the DOM level in
     test/widgets/specs-skeleton-grid-1002.test.tsx. Collapses the 3-column
     loading skeleton to one column at this breakpoint; do not remove without
     re-checking SpecsSkeleton.tsx first. */
  .specs-widget .grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .specs-widget .border-r {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .specs-widget .border-r:last-child {
    border-bottom: none;
  }
}

/* ----------------------------------------------------------------------------
 * Section heading (shared across content widgets)
 * Bold title on the left + horizontal divider line filling remaining width.
 * -------------------------------------------------------------------------- */

.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;
  color: var(--foreground);
  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; }
}