/* Tabs Component */

/* Show first tab by default before JS initializes.
   Once tabs.js adds data-tabs-initialized, this rule stops and
   JS manages active/shown classes for tab switching. */
[data-tabs]:not([data-tabs-initialized]) .reel-atl__content:first-child {
  display: flex;
  opacity: 1;
}

/* After JS init: if no tab has the active class yet (e.g. reel reset the
   state), still show the first tab as a fallback. */
[data-tabs][data-tabs-initialized] .reel-atl__content:first-child:not(.shown):not(.active) {
  display: flex;
  opacity: 1;
}

/* Once any sibling is explicitly active, hide the fallback first-child. */
[data-tabs][data-tabs-initialized] .reel-atl__content:has(~ .reel-atl__content.active):first-child:not(.active) {
  display: none;
  opacity: 0;
}

/* Warning message for minimum tabs (Canvas only) */
.tabs__warning {
  display: none;
  background: #fef3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  margin-top: 1rem;
}

.tabs__warning:not([hidden]) {
  display: block;
}