/* ═══════════════════════════════════════════════════
   STUDIO — SHELL SECTIONS

   Shared layout for collapsible sidebar sections used by any
   /maker/ or /studio/ tab. Previously duplicated in
   character-viewer.css (.tab-character scope) and chat-bubble.css
   (.tab-chat-bubble scope); consolidated here as the third tab
   (Chat) adopting the pattern made the duplication painful.

   Usage:
     <div class="cv-shell-section">                    — always open
     <div class="cv-shell-section is-collapsible">     — header click toggles
     <div class="cv-shell-section is-collapsible is-collapsed">  — start closed

   Each section contains:
     <div class="cv-shell-section-header">Title</div>
     ...arbitrary content (fields, buttons, etc.)...

   Per-tab tweaks (e.g. tab-specific spacing inside section content)
   should layer on top via more-specific selectors in the feature
   stylesheet — these base rules cover the common chrome only.
   ═══════════════════════════════════════════════════ */

.maker .cv-shell-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.maker .cv-shell-section + .cv-shell-section {
  margin-top: var(--sp-1);
}
.maker .cv-shell-section[hidden] {
  display: none;
}

.maker .cv-shell-section-header {
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--text-mid);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.maker .cv-shell-section-header::before {
  content: '';
  width: 2px;
  height: 11px;
  background: var(--accent);
  border-radius: var(--r);
  flex-shrink: 0;
}

/* Collapsible variant — header is clickable, chevron rotates,
   children hide. Header keeps its accent left-bar and bottom rule
   when collapsed (the rule reads as a divider). Hover state nudges
   the chevron + tints the header so the row clearly affords click. */
.maker .cv-shell-section.is-collapsible .cv-shell-section-header {
  cursor: pointer;
  user-select: none;
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  margin: 0 -6px;
  border-radius: var(--r);
  transition: background 0.12s, color 0.12s;
}
.maker .cv-shell-section.is-collapsible .cv-shell-section-header:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}
.maker .cv-shell-section.is-collapsible .cv-shell-section-header:hover::after {
  color: var(--text);
}
.maker .cv-shell-section.is-collapsible .cv-shell-section-header::after {
  content: '▾';
  margin-left: auto;
  font-size: var(--fs-1);
  color: var(--text-dim);
  transition: transform 0.18s ease, color 0.12s;
}
.maker .cv-shell-section.is-collapsible.is-collapsed .cv-shell-section-header::after {
  transform: rotate(-90deg);
}
.maker .cv-shell-section.is-collapsible.is-collapsed > :not(.cv-shell-section-header) {
  /* !important guarantees the collapse beats per-section ID-scoped
     display rules (e.g. an ID selector with display:flex would
     otherwise win on specificity and leak content past the header). */
  display: none !important;
}
.maker .cv-shell-section.is-collapsible.is-collapsed .cv-shell-section-header {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── View-only banner (library-model L2) — shared by Characters + Scenes ── */
.maker .sf2-view-banner {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--accent) 12%, var(--chrome-hi));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  font-size: var(--fs-3); color: var(--text);
  position: relative; z-index: 12;
}
.maker .sf2-view-banner-text { flex: 1 1 auto; display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.maker .sf2-view-banner-btn { flex: 0 0 auto; }
/* The app's sidebar .btn default is width:100% — cap it inside the banner. */
.maker .sf2-view-banner .btn { width: auto; padding: var(--sp-1) var(--sp-6); white-space: nowrap; }