@scope (demo-toggle-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --demo-toggle-radius:        var(--a-radius-lg);
    --demo-toggle-gap:           var(--a-space-3);
    --demo-toggle-stage-padding: var(--a-space-4);
    --demo-toggle-bar-px:        var(--a-space-3);
    --demo-toggle-bar-py:        var(--a-space-2);

    /* ── Colors ── */
    --demo-toggle-bg:            var(--a-canvas-1);
    --demo-toggle-border:        var(--a-border);
    --demo-toggle-bar-bg:        var(--a-bg-muted);
    --demo-toggle-bar-fg:        var(--a-fg);

    /* ── Typography ── */
    --demo-toggle-label-size:    var(--a-ui-size);
    --demo-toggle-label-weight:  var(--a-weight-medium, 500);

    /* ── Transition ── */
    --demo-toggle-duration:      var(--a-duration-fast);
    --demo-toggle-easing:        var(--a-easing);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;

    background: var(--demo-toggle-bg);
    border: 1px solid var(--demo-toggle-border);
    border-radius: var(--demo-toggle-radius);
    overflow: hidden;
    isolation: isolate;
  }

  /* -- Header bar -- */
  [slot="bar"] {
    width: 100%;
    padding: var(--demo-toggle-bar-py) var(--demo-toggle-bar-px);
    background: var(--demo-toggle-bar-bg);
    color: var(--demo-toggle-bar-fg);
    border-bottom: 1px solid var(--demo-toggle-border);
    justify-content: space-between;
  }

  [data-demo-toggle-label] {
    font-size: var(--demo-toggle-label-size);
    font-weight: var(--demo-toggle-label-weight);
    color: var(--demo-toggle-bar-fg);
    transition: color var(--demo-toggle-duration) var(--demo-toggle-easing);
  }

  /* -- Stage area (where the slotted content lives) -- */
  /* Slotted children are anything that isn't the [slot="bar"]. They sit in
     the second flex row; default mode shows only the active slot. */
  :scope [slot="on"],
  :scope [slot="off"] {
    box-sizing: border-box;
    width: 100%;
    padding: var(--demo-toggle-stage-padding);
  }

  :scope[data-state="on"]  [slot="off"] { display: none; }
  :scope[data-state="off"] [slot="on"]  { display: none; }

  /* Overlay mode — both slots stack on the same coordinates so toggling
     never reflows the surrounding layout. The inactive slot is
     visibility-hidden (still occupying space → still measurable for the
     active one). The stack is a 1-cell grid; both slots target row 1
     col 1 via grid-area. */
  :scope[data-mode="overlay"] {
    /* The bar is row 1; the stage cell is row 2. The cell's children all
       claim the same grid-area so they overlap. */
  }
  :scope[data-mode="overlay"] [slot="on"],
  :scope[data-mode="overlay"] [slot="off"] {
    display: block;
  }
  :scope[data-mode="overlay"] {
    /* Use a wrapper-less stack: rely on the parent flex column for the
       bar/stage stack and turn the stage region into a relative anchor
       via the second slot's positioning. */
    position: relative;
  }
  :scope[data-mode="overlay"] [slot="on"] {
    position: absolute;
    inset: 0;
    /* Bar height — the slot starts beneath the bar. We can't query the
       bar's height in CSS, so the stage region uses the larger of the
       two slot intrinsic heights (default flow), and the active
       slot positions on top via inset:0 starting after the bar. The
       enclosing :scope provides padding-top via the bar; the slot's
       own padding still applies. */
    top: auto;
    height: auto;
  }
  :scope[data-mode="overlay"][data-state="on"]  [slot="off"] {
    visibility: hidden;
  }
  :scope[data-mode="overlay"][data-state="off"] [slot="on"]  {
    visibility: hidden;
  }
  /* Reset display:none branches above for overlay — already handled by
     visibility:hidden, but the default-mode display:none rules above
     would otherwise fight overlay. Override here. */
  :scope[data-mode="overlay"][data-state="on"]  [slot="off"],
  :scope[data-mode="overlay"][data-state="off"] [slot="on"] {
    display: block;
  }

  /* State-themed bar — when on, lean accent; when off, leave neutral. */
  :scope[data-state="on"] {
    --demo-toggle-bar-bg: var(--a-accent-muted);
    --demo-toggle-bar-fg: var(--a-accent-strong);
  }
}
