/* ── Accordion v1.0 (MPR DS) ── */
    /* Variants: separated (default) · flush.
       Sizes: sm / md (default) / lg.
       Modes: single (one open at a time) · multiple (independent).
       States via CSS classes: is-expanded, is-hover, is-focus, is-disabled.
       Keyboard nav + toggle handled by initAccordion() JS in _scripts.html. */

    /* ── Container ── */
    .acc {
      display: flex;
      flex-direction: column;
      width: 100%;
      font-family: var(--font-family-base);
    }

    /* ── Item ── */
    .acc-item {
      border-bottom: var(--divider-thickness) solid var(--divider-color);
    }
    .acc-item:last-child { border-bottom: none; }

    /* ── Header (button) ── */
    .acc-header {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      width: 100%;
      padding: var(--space-3) var(--space-4);
      min-height: var(--tab-bar-height-md);
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: var(--font-family-base);
      font-size: var(--tab-font-size-md);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-heading);
      text-align: left;
      border-radius: var(--radius-md);
      transition:
        background var(--motion-duration-fast) var(--motion-easing-standard),
        color      var(--motion-duration-fast) var(--motion-easing-standard);
    }

    /* ── Header text group (title + subtitle) ── */
    .acc-header-text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .acc-title {
      line-height: 1.4;
    }

    .acc-subtitle {
      font-size: var(--tab-font-size-sm);
      font-weight: 400;
      color: var(--color-text-subtle);
      line-height: 1.4;
    }

    /* ── Trailing meta ── */
    .acc-meta {
      flex-shrink: 0;
      font-size: var(--tab-font-size-sm);
      font-weight: 400;
      color: var(--color-text-subtle);
    }

    /* ── Chevron icon ── */
    .acc-chevron {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--icon-md);
      height: var(--icon-md);
      color: var(--color-text-subtle);
      transition: transform var(--motion-duration-normal) var(--motion-easing-standard);
    }
    .acc-chevron i {
      font-size: var(--icon-sm);
      display: block;
      line-height: 1;
    }

    /* ── States ── */

    /* Hover */
    .acc-header:hover:not([aria-disabled="true"]),
    .acc-header.is-hover {
      background: var(--color-state-hover);
    }

    /* Focus */
    .acc-header:focus-visible,
    .acc-header.is-focus {
      outline: var(--focus-ring-width) solid var(--color-border-focus);
      outline-offset: calc(-1 * var(--focus-ring-width));
    }

    /* Expanded */
    .acc-item.is-expanded .acc-header {
      color: var(--color-text-heading);
    }
    .acc-item.is-expanded .acc-chevron {
      transform: rotate(180deg);
      color: var(--color-text-default);
    }

    /* Disabled */
    .acc-item.is-disabled .acc-header {
      opacity: var(--opacity-disabled);
      cursor: not-allowed;
      pointer-events: none;
    }

    /* ── Content panel — CSS grid height animation ── */
    .acc-panel-wrap {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows var(--motion-duration-normal) var(--motion-easing-standard);
    }
    .acc-item.is-expanded .acc-panel-wrap {
      grid-template-rows: 1fr;
    }
    .acc-panel {
      overflow: hidden;
    }
    .acc-panel-content {
      padding: var(--space-2) var(--space-4) var(--space-4);
      color: var(--color-text-default);
      font-size: var(--tab-font-size-md);
      font-weight: 400;
      line-height: 1.6;
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      .acc-chevron,
      .acc-header,
      .acc-panel-wrap { transition: none; }
    }

    /* ── Flush variant — no dividers ── */
    .acc--flush .acc-item {
      border-bottom: none;
    }

    /* ── Size: sm ── */
    .acc--sm .acc-header {
      padding: var(--space-2) var(--space-3);
      min-height: var(--tab-bar-height-sm);
      font-size: var(--tab-font-size-sm);
    }
    .acc--sm .acc-subtitle { font-size: 12px; }
    .acc--sm .acc-meta { font-size: 12px; }
    .acc--sm .acc-chevron { width: var(--icon-sm); height: var(--icon-sm); }
    .acc--sm .acc-chevron i { font-size: var(--icon-xs); }
    .acc--sm .acc-panel-content {
      padding: var(--space-2) var(--space-3) var(--space-3);
      font-size: var(--tab-font-size-sm);
    }

    /* ── Size: lg ── */
    .acc--lg .acc-header {
      padding: var(--space-4) var(--space-5);
      min-height: var(--tab-bar-height-lg);
      font-size: var(--tab-font-size-lg);
    }
    .acc--lg .acc-subtitle { font-size: var(--tab-font-size-sm); }
    .acc--lg .acc-meta { font-size: var(--tab-font-size-sm); }
    .acc--lg .acc-chevron { width: var(--icon-lg); height: var(--icon-lg); }
    .acc--lg .acc-chevron i { font-size: var(--icon-md); }
    .acc--lg .acc-panel-content {
      padding: var(--space-3) var(--space-5) var(--space-5);
      font-size: var(--tab-font-size-md);
    }

    /* ── Showcase helpers ── */
    .acc-demo-col { display: flex; flex-direction: column; gap: var(--space-6); }
    .acc-demo-label {
      font-size: 11px;
      font-weight: var(--font-weight-semibold);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-text-subtle);
      margin-bottom: var(--space-1);
    }
    .acc-states-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: var(--space-5) var(--space-6);
    }
    .acc-state-item { display: flex; flex-direction: column; gap: var(--space-2); }
    .acc-state-label {
      font-size: 11px;
      font-weight: var(--font-weight-semibold);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-text-subtle);
    }
    .acc-sizes-col { display: flex; flex-direction: column; gap: var(--space-6); }