@layer components {
  /* Story Bible scoped tabs -- sits between drawer header and entity list */
  .story-bible-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  /* Tab bar */
  .story-bible-tabs__bar {
    border-block-end: var(--border);
    display: flex;
    gap: 0;
    margin-block-end: var(--block-space-quarter);
  }

  .story-bible-tabs__tab {
    --tab-color: var(--color-ink-muted);
    --tab-border: transparent;

    background: none;
    border: none;
    border-block-end: 2px solid var(--tab-border);
    color: var(--tab-color);
    cursor: pointer;
    flex: 1;
    font-size: var(--text-small);
    font-weight: 600;
    min-block-size: var(--touch-target-min);
    padding-block: var(--block-space-half);
    padding-inline: var(--inline-space);
    text-align: center;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }

  .story-bible-tabs__tab:hover {
    --tab-color: var(--color-ink);
  }

  .story-bible-tabs__tab[aria-selected="true"] {
    --tab-color: var(--color-link);
    --tab-border: var(--color-link);
  }

  .story-bible-tabs__tab:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Tab panels */
  .story-bible-tabs__panel[hidden] {
    display: none;
  }

  /* Chapter tab guidance message */
  .story-bible-tabs__guidance {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    line-height: var(--line-height);
    padding-block: var(--block-space);
    padding-inline: var(--inline-space);
    text-align: center;
  }

  .story-bible-tabs__guidance-icon {
    display: block;
    margin-block-end: var(--block-space-half);
    margin-inline: auto;
    stroke: var(--color-ink-muted);
  }
}