@property --panel-can-extend {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --panel-extended {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

#platform {
  --sidebar-width: 21em;
  --inspector-width: 25em;
  --panel-rail-width: 3em;
  --library-min-width: 42em;
  --sidebar-priority: 0;
  --inspector-priority: 1;
  --want-sidebar: 1;
  --want-inspector: 1;
  --can-extend-sidebar: 0;
  --can-extend-inspector: 0;
  --dock-sidebar: 0;
  --dock-inspector: 0;
  --canvas-width: calc(
    100vw - var(--sidebar-width) - var(--inspector-width) - 2 * var(--grid-gap)
  );
}

#platform:has(.panel-drawer[data-priority='sidebar']) {
  --sidebar-priority: 1;
  --inspector-priority: 0;
}

#platform:not(
  :has(
    #sidebar.open[data-full-height='true']
      > .workspace-panel-content:not(:empty)
  )
) {
  --want-sidebar: 0;
}

#platform:not(
  :has(
    #inspector.open[data-full-height='true']
      > .workspace-panel-content:not(:empty)
  )
) {
  --want-inspector: 0;
}

#platform:has(#sidebar .compact-tools) {
  --sidebar-width: 14em;
}

#platform:has(#inspector .compact-tools) {
  --inspector-width: 14em;
}

#platform:has(#sidebar .workflow-agent) {
  --sidebar-width: 27em;
}

#platform:has(#sidebar:not(.open)) {
  --sidebar-width: calc(var(--panel-rail-width) + var(--grid-gap));
}

#platform:has(#inspector:not(.open)) {
  --inspector-width: calc(var(--panel-rail-width) + var(--grid-gap));
}

#platform:not(:has(#sidebar > .workspace-panel-content:not(:empty))) {
  --sidebar-width: 0em;
}

#platform:not(:has(#inspector > .workspace-panel-content:not(:empty))) {
  --inspector-width: 0em;
}

/* Requested height and what fits are separate. Both panels may extend when
   the center alone fits the library; otherwise the last extended eligible
   panel wins. Collapsed, empty and manually shortened panels are ineligible.
   Unsupported browsers keep both panels above the full-width library. */
@supports (width: calc(sign(1em) * 1px)) {
  #platform {
    --fit-both: max(0, sign(var(--canvas-width) - var(--library-min-width)));
    --can-extend-sidebar: max(
      0,
      sign(
        var(--canvas-width) + var(--inspector-width) - var(--library-min-width)
      )
    );
    --can-extend-inspector: max(
      0,
      sign(
        var(--canvas-width) + var(--sidebar-width) - var(--library-min-width)
      )
    );
    --eligible-sidebar: calc(var(--want-sidebar) * var(--can-extend-sidebar));
    --eligible-inspector: calc(
      var(--want-inspector) * var(--can-extend-inspector)
    );
    --dock-sidebar: calc(
      var(--eligible-sidebar) *
        max(
          var(--fit-both),
          var(--sidebar-priority),
          1 - var(--eligible-inspector)
        )
    );
    --dock-inspector: calc(
      var(--eligible-inspector) *
        max(
          var(--fit-both),
          var(--inspector-priority),
          1 - var(--eligible-sidebar)
        )
    );
  }
}

#platform #sidebar {
  grid-row: 2 / span calc(1 + var(--dock-sidebar));
  --panel-can-extend: var(--can-extend-sidebar);
  --panel-extended: var(--dock-sidebar);
}

#platform #inspector {
  grid-row: 2 / span calc(1 + var(--dock-inspector));
  --panel-can-extend: var(--can-extend-inspector);
  --panel-extended: var(--dock-inspector);
}

.workspace-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  container-name: workspace-panel;
  padding: 0;
  background: var(--background-main);
  background: linear-gradient(
    -47deg,
    color-mix(in oklab, var(--background-main) 98%, black),
    color-mix(in oklab, var(--background-main) 98%, white)
  );
  border-radius: var(--grid-corners-radius);

  &:has(> .workspace-panel-content:empty) {
    display: none;
  }
}

.workspace-panel:has(> .workspace-panel-content:empty) + .panel-toggle {
  display: none;
}

.workspace-panel-content {
  container: panel / inline-size;
  flex: 1;
  padding: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: inherit;
}

.workspace-panel:not(.open) > .workspace-panel-content {
  display: none;
}

.panel-rail-open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: inherit;
}

.workspace-panel.open > .panel-rail-open {
  display: none;
}

.panel-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.175em 0.5em;
  border: 1px solid var(--border-main-color);
  border-radius: var(--inner-border-radius);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: 0 1px 2px #00000045;

  .icon {
    font-size: 0.7em;
    line-height: 1;
    transition: transform var(--spd-insp) ease;

    &.left {
      transform: rotate(180deg);
    }

    &.up {
      transform: rotate(-90deg);
    }

    &.down {
      transform: rotate(90deg);
    }
  }
}

.panel-toggle,
.panel-height-toggle {
  opacity: 0;
  transition:
    opacity var(--spd-insp) ease,
    translate var(--spd-insp) ease;
}

.panel-height-footer {
  display: none;
  flex-shrink: 0;
  height: 1em;
  position: relative;
}

.panel-height-toggle {
  position: absolute;
  bottom: calc(-0.5 * var(--grid-gap));
  left: 50%;
  transform: translateX(-50%);
  translate: 0 100%;
  z-index: 11;

  &::before {
    content: '';
    position: absolute;
    inset: 0 -1em;
  }
}

.panel-height-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  &.above {
    display: none;
  }
}

.panel-height-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.panel-height-footer:hover .panel-height-toggle,
.panel-height-toggle:focus-visible,
.panel-height-toggle:hover {
  opacity: 0.85;
  translate: 0 0;
}

.panel-height-toggle:hover {
  opacity: 1;
}

@container workspace-panel style(--panel-can-extend: 1) {
  .panel-height-footer {
    display: block;
  }
}

@container workspace-panel style(--panel-extended: 1) {
  .panel-height-toggle {
    bottom: 0;
  }

  .panel-height-action {
    &.extend {
      display: none;
    }

    &.above {
      display: flex;
    }
  }
}

.workspace-panel:not(.open) > .panel-height-footer {
  display: none;
}

.panel-drawer {
  display: contents;
}

.panel-drawer-header,
.panel-drawer-toggle,
.panel-backdrop {
  display: none;
}

.panel-toggle {
  position: relative;
  grid-area: canvas;
  align-self: center;
  justify-self: start;
  z-index: 10;
  padding: 0.5em 0.175em;
  translate: -100% 0;

  &::before {
    content: '';
    position: absolute;
    inset: -0.35em -0.65em;
  }
}

:where(#inspector) + .panel-toggle {
  justify-self: end;
  translate: 100% 0;
}

#platform.library-as-page .panel-toggle,
#platform:has(#library.expanded) .panel-toggle,
#platform.library-as-page .panel-height-footer,
#platform:has(#library.expanded) .panel-height-footer {
  display: none;
}

.workspace-panel:hover + .panel-toggle,
.workspace-panel:focus-within + .panel-toggle,
.panel-toggle:focus-visible,
.panel-toggle:hover {
  opacity: 0.85;
  translate: 0 0;
}

.panel-toggle:hover {
  opacity: 1;
}

@media (hover: none) {
  .panel-toggle,
  .panel-height-toggle {
    opacity: 0.6;
    translate: 0 0;
  }
}

.workspace-panel [hidden] {
  display: none;
}

.panel-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.panel-body {
  padding: 0;
}

.panel-padding {
  padding: var(--panel-padding);
}

.panel-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.panel-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 0.25em;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--border-main-color);

  button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.55em 0.75em;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    font-size: 1em;
    .panel-tab-label {
      font-size: 0.8em;
    }
  }

  .material-symbols-outlined {
    font-size: 1.25em;
  }

  button:hover {
    color: var(--text-primary);
    background: rgb(0 0 0 / 6%);
  }

  .current,
  .current:hover {
    border-bottom-color: var(--power-primary-color);
    color: var(--text-primary);

    .material-symbols-outlined {
      color: var(--power-primary-color);
    }
  }

  &.icons-only button {
    min-width: 2.75em;
    padding: 0.55em 0.75em;
  }

  &.icons-only .panel-tab-label {
    display: none;
  }
}

.panel-tabs.single {
  display: none;
}

.workspace-panel:not(.open) > .panel-tabs {
  width: var(--panel-rail-width);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden auto;
  background: transparent;
  border: 0;

  button {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 3em;
    padding: 0.6em 0;
    margin: 0;
    border: 0;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      inset: auto 0.65em 0;
      height: 1px;
      background: var(--border-main-color);
    }
  }

  .panel-tab-label {
    display: none;
  }
}

#inspector:not(.open) > .panel-tabs {
  align-self: end;
}

.workspace-panel:not(.open):has(> .panel-tabs.single) {
  background: transparent;

  > .panel-tabs.single {
    box-sizing: border-box;
    padding: 0.25em;

    button {
      min-height: 2.4em;
      /* border: 1px solid var(--border-main-color); */
      border-radius: var(--grid-corners-radius);
      background: var(--background-main);
      color: var(--text-primary);
      aspect-ratio: 1;
    }
  }
}

@media (width > 48em) {
  .workspace-panel:not(.open):has(> .panel-tabs.single) {
    pointer-events: none;

    > .panel-tabs,
    > .panel-rail-open {
      pointer-events: auto;
    }

    > .panel-rail-open {
      width: 0.8em;
      margin-inline: calc(-1 * var(--grid-gap));
    }

    + .panel-toggle {
      grid-column: 1 / -1;
    }
  }

  #inspector:not(.open):has(> .panel-tabs.single) > .panel-rail-open {
    left: auto;
  }

  #platform:has(#sidebar:not(.open) > .panel-tabs.single):has(.flow-container)
    #page-wrapper {
    grid-column: sidebar / canvas;
  }
}

@media (max-width: 48em) {
  #platform {
    --dock-sidebar: 0;
    --dock-inspector: 0;
    font-size: 0.875rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'header' 'canvas' 'library';
  }

  #platform #library {
    grid-column: 1;
    grid-row: 3;
    margin-inline: var(--grid-gap);
  }

  .panel-drawer {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: var(--header-height) 0 0;
    z-index: 3000;
    background: var(--background-main);
    box-shadow: 0.5em 0 2em rgb(0 0 0 / 25%);
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform var(--spd-insp) ease,
      visibility 0s var(--spd-insp);

    &.open {
      transform: translateX(0);
      visibility: visible;
      transition-delay: 0s;
    }

    .workspace-panel {
      grid-area: auto;
      flex: 1;
      min-height: 0;
      border-radius: 0;
    }

    #platform & .workspace-panel {
      margin: 0;
    }

    .workspace-panel:not([data-active='true']),
    .panel-toggle,
    .panel-height-footer {
      display: none;
    }

    .workspace-panel > .panel-rail-open {
      display: none;
    }
  }

  .panel-drawer-header {
    display: flex;
    flex-shrink: 0;
    min-height: 3em;
    padding-inline-start: 3em;
    border-bottom: 1px solid var(--border-main-color);

    .panel-tabs {
      flex: 1;
      border-bottom: 0;
    }
  }

  .panel-drawer:not(.open) {
    interactivity: inert;
  }

  #platform:has(.panel-drawer.open)
    > :not(.panel-drawer, .panel-drawer-toggle, .panel-backdrop) {
    interactivity: inert;
  }

  .panel-drawer-label {
    display: flex;
    align-items: center;
    padding-inline: var(--panel-padding);
    font-weight: 600;
  }

  .panel-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(var(--header-height) + 0.25em);
    left: 0.25em;
    z-index: 3100;
    width: 2.5em;
    height: 2.5em;
    border-radius: var(--inner-border-radius);
    background: var(--background-main);
    color: var(--text-primary);
    box-shadow: 0 0.15em 0.5em rgb(0 0 0 / 20%);

    &::before {
      content: '';
      position: absolute;
      inset: -0.25em;
    }

    .material-symbols-outlined {
      font-size: 1.3em;
    }
  }

  .panel-backdrop.open {
    display: block;
    position: absolute;
    inset: var(--header-height) 0 0;
    z-index: 2900;
    background: rgb(0 0 0 / 30%);
    cursor: default;
  }
}

@media (prefers-reduced-motion: reduce) {
  #platform,
  .panel-drawer,
  .panel-toggle,
  .panel-height-toggle {
    transition: none;
  }
}