@scope (pane-ui) {
  /* Tokens — :where() for zero specificity so consumers can override */
  :where(:scope) {
    --pane-bg-default:              var(--a-bg);
    --pane-border-default:          var(--a-border-subtle);
    --pane-radius-default:          var(--a-radius-lg);
    /* Component-intrinsic measurement; no --a-space-* equivalent */
    --pane-bar-height-default:      var(--a-chrome-pane-header-height);
    --pane-header-px-default:       var(--a-space-3);
    --pane-header-py-default:       var(--a-space-2);
    --pane-header-fg-default:       var(--a-fg);
    --pane-header-size-default:     var(--a-ui-size);
    --pane-header-weight-default:   var(--a-weight-medium);
    --pane-section-px-default:      var(--a-space-3);
    --pane-section-py-default:      var(--a-space-2);
    --pane-section-header-fg-default: var(--a-fg-muted);
    --pane-section-header-size-default: var(--a-ui-tiny);
    --pane-footer-px-default:       var(--a-space-3);
    --pane-footer-py-default:       var(--a-space-2);
    --pane-col-gap-default:         var(--a-space-3);
    /* Component-intrinsic measurement; no --a-space-* equivalent */
    --pane-resize-width-default:    4px;
    --pane-resize-fg-default:       var(--a-border);
    --pane-resize-fg-hover-default: var(--a-fg-muted);

    /* ── Spacing ── */
    --pane-gap-sm-default:          var(--a-space-2);
    --pane-gap-xs-default:          var(--a-space-1);

    /* ── Header interaction ── */
    --pane-header-bg-hover-default: var(--a-bg-subtle);
    --pane-chevron-fg-default:      var(--a-fg-muted);

    /* ── Section header ── */
    --pane-section-header-weight-default: var(--a-weight-medium);

    /* ── Resize active ── */
    --pane-resize-fg-active-default: var(--a-fg-subtle);

    /* ── Transitions ── */
    --pane-duration-default:        var(--a-duration-fast);
    --pane-easing-default:          var(--a-easing);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--pane-bg, var(--pane-bg-default));
    border: 1px solid var(--pane-border, var(--pane-border-default));
    /*border-radius: var(--pane-radius, var(--pane-radius-default));*/
    overflow: hidden;
  }

  /* During an active drag-resize: kill all transitions so pointer-driven
     width updates track 1:1 instead of interpolating through a consumer-
     declared width transition (e.g. editor-shell's collapse animation).
     Mirrors the admin-sidebar pattern. */
  :scope[data-resizing] {
    user-select: none;
    transition: none;
  }

  /* Side-aware border treatment.
     `leading`  — pane sits at the leading edge of a horizontal row, so
                  the only visual separator it needs is on its trailing
                  edge (right in LTR).
     `trailing` — mirror: only a leading-edge border (left in LTR).
     Default (no side attr) keeps the full 4-sided border. */
  :scope[side="leading"],
  :scope[side="trailing"] {
    border: none;
  }
  :scope[side="leading"] {
    border-inline-end: 1px solid var(--pane-border, var(--pane-border-default));
  }
  :scope[side="trailing"] {
    border-inline-start: 1px solid var(--pane-border, var(--pane-border-default));
  }

  /* ── Pane header ── */
  & > header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--pane-gap-sm, var(--pane-gap-sm-default));
    height: var(--pane-bar-height, var(--pane-bar-height-default));
    padding: 0 var(--pane-header-px, var(--pane-header-px-default));
    font-size: var(--pane-header-size, var(--pane-header-size-default));
    font-weight: var(--pane-header-weight, var(--pane-header-weight-default));
    color: var(--pane-header-fg, var(--pane-header-fg-default));
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 -1px 0 var(--pane-border, var(--pane-border-default));
    transition: background var(--pane-duration, var(--pane-duration-default)) var(--pane-easing, var(--pane-easing-default));
  }

  & > header:hover {
    background: var(--pane-header-bg-hover, var(--pane-header-bg-hover-default));
  }

  & > header:focus-visible {
    outline: none;
    box-shadow: var(--a-focus-ring) inset;
  }

  /* Collapse indicator — stamped by JS as icon-ui */
  & > header > [slot="chevron"] {
    --a-icon-size: var(--a-caret-size);
    flex-shrink: 0;
    margin-inline-start: auto;
    color: var(--pane-chevron-fg, var(--pane-chevron-fg-default));
    transition: transform var(--pane-duration, var(--pane-duration-default)) var(--pane-easing, var(--pane-easing-default));
    transform: rotate(90deg);
  }

  :scope[collapsed] > header > [slot="chevron"] {
    transform: rotate(0deg);
  }

  /* ── Sections ── */
  & > section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    padding: var(--pane-section-py, var(--pane-section-py-default)) var(--pane-section-px, var(--pane-section-px-default));
  }

  & > section::-webkit-scrollbar {
    display: none;
  }

  /* Section header — section's padding is the single source of horizontal inset;
     content inside the section must not add its own padding. */
  & > section > header {
    font-size: var(--pane-section-header-size, var(--pane-section-header-size-default));
    color: var(--pane-section-header-fg, var(--pane-section-header-fg-default));
    padding-bottom: var(--pane-col-gap, var(--pane-col-gap-default));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--pane-section-header-weight, var(--pane-section-header-weight-default));
  }

  /* Defensive: a data-col directly under a section inherits the section's inset;
     adding its own padding would compound and misalign with the section header. */
  & > section > [data-col] {
    padding: 0;
  }

  /* Section divider between sections */
  & > section + section {
    border-top: 1px solid var(--pane-border, var(--pane-border-default));
  }

  /* Column layout */
  [data-col] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pane-col-gap, var(--pane-col-gap-default));
  }

  /* ── Footer ── */
  & > footer {
    min-height: var(--pane-bar-height, var(--pane-bar-height-default));
    display: flex;
    align-items: center;
    padding: var(--pane-footer-py, var(--pane-footer-py-default)) var(--pane-footer-px, var(--pane-footer-px-default));
    border-top: 1px solid var(--pane-border, var(--pane-border-default));
  }

  /* ── Collapsed state ── */
  :scope[collapsed] > section,
  :scope[collapsed] > footer {
    display: none;
  }

  :scope[collapsed] > header {
    box-shadow: none;
  }

  /* ── Resize handle ──
     Default (no side) positions the grabber on the right edge. When
     `side="trailing"` is set, flip the grabber to the left edge so it
     sits on the pane's "inner" side (where it meets the sibling
     content/pane in a horizontal row). `inset-inline-*` lets the rules
     stay LTR/RTL-safe. */
  [slot="resize"] {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    width: var(--pane-resize-width, var(--pane-resize-width-default));
    cursor: col-resize;
    background: transparent;
    transition: background var(--pane-duration, var(--pane-duration-default)) var(--pane-easing, var(--pane-easing-default));
    touch-action: none;
    z-index: 1;
  }

  :scope[side="trailing"] > [slot="resize"] {
    inset-inline-end: auto;
    inset-inline-start: 0;
  }

  [slot="resize"]:hover {
    background: var(--pane-resize-fg-hover, var(--pane-resize-fg-hover-default));
  }

  :scope[data-resizing] [slot="resize"] {
    background: var(--pane-resize-fg-active, var(--pane-resize-fg-active-default));
  }
}
