/* tabs — auto-split from content-blocks.css */

/* ═══════════════════════════════════════════════════════════
   Tab Panels — E2-style Classic + Accent Stripe
   Default accent: crimson (--color-accent)
   Navy variant:   add class tab-panels--navy
   HTML structure:
     <div class="tab-panels [tab-panels--navy]">
       <div class="tab-bar">
         <div class="tab-label">Label</div>
         ...
       </div>
       <div class="tab-body">
         <div class="tab-panel">Content</div>
         ...
       </div>
     </div>
   ═══════════════════════════════════════════════════════════ */
.article-body .tab-panels {
  margin: 1.5rem 0;
}

.article-body .tab-bar {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-bottom-color: var(--color-neutral-200);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.article-body .tab-label {
  display: block;
  padding: 0.6875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border-top: 3px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid var(--color-neutral-200);
  border-left: 1px solid transparent;
  color: var(--color-text-muted);
  background: transparent;
  margin-bottom: -1px;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.article-body .tab-label:hover {
  color: var(--color-primary);
  background: rgba(255,255,255,0.6);
}

.article-body .tab-label.is-active {
  color: var(--color-primary);
  background: var(--color-surface);
  border-top-color: var(--color-accent);
  border-right-color: var(--color-neutral-200);
  border-bottom-color: var(--color-surface);
  border-left-color: var(--color-neutral-200);
}

.article-body .tab-panels--navy .tab-label.is-active {
  border-top-color: var(--color-primary);
}

.article-body .tab-bar .tab-label:first-child.is-active {
  border-left-color: transparent;
}

.article-body .tab-bar .tab-label:last-child.is-active {
  border-right-color: transparent;
}

.article-body .tab-body {
  border: 1px solid var(--color-neutral-200);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.article-body .tab-panel {
  padding: 1.25rem 1.5rem;
  font-size: 0.9375rem;
}

.article-body .tab-panels.is-initialized .tab-panel {
  display: none;
}

.article-body .tab-panels.is-initialized .tab-panel.is-active {
  display: block;
}