@layer modules {
  /* The peek inspector: the screen or the flow's settings edited beside the graph, saving as they are typed. */
  .inspector { position: absolute; top: var(--gap); right: var(--gap); bottom: var(--gap); z-index: 9; display: flex; flex-direction: column; width: var(--inspector-width); max-width: calc(100% - 2 * var(--gap)); border: 1px solid var(--line); border-radius: var(--r-section); background: var(--bg); box-shadow: var(--shadow-float); transition: transform .24s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, display .24s allow-discrete; }
  /* Slides in from the right edge when opened, and back out when closed. */
  .inspector[hidden] { display: none; transform: translateX(calc(100% + var(--gap))); opacity: 0; }
  @starting-style { .inspector:not([hidden]) { transform: translateX(calc(100% + var(--gap))); opacity: 0; } }
  .workspace.has-inspector .workspace-phone, .workspace.has-inspector .island.is-top-right { right: calc(var(--inspector-width) + 2 * var(--gap)); }
  /* The panel floats over the canvas: the zoom island, the dock and the phone move over rather than hide behind it. */
  .workspace.has-inspector .dock { right: calc(var(--inspector-width) + 2 * var(--gap)); }
  .workspace.has-inspector.has-phone .dock { right: calc(var(--inspector-width) + var(--phone-width) + 3 * var(--gap)); }
  /* The Phone button and zoom controls reserve the same room as the dock, so neither panel ever lies on top of them. */
  .workspace.has-inspector .journey-float.is-bottom { right: calc(var(--inspector-width) + 2 * var(--gap)); }
  .workspace.has-inspector.has-phone .journey-float.is-bottom { right: calc(var(--inspector-width) + var(--phone-width) + 3 * var(--gap)); }
  /* With both panels open there is little canvas left: the zoom controls sit above the launchers rather than on them. */
  @media (max-width: 1419px) {
    .workspace.has-inspector.has-phone .journey-float.is-bottom { bottom: calc(var(--gap) + var(--bar) + 1.6rem); }
    .workspace.has-inspector.has-phone.has-dock .journey-float.is-bottom { bottom: calc(var(--dock-height) + 2 * var(--gap) + var(--bar) + 1.6rem); }
  }
  .workspace.is-resizing-inspector { cursor: ew-resize; user-select: none; }
  .inspector-panel { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: inherit; }
  .inspector .panel-head { position: sticky; top: 0; z-index: 2; padding: 1.3rem 4.4rem 1.1rem 1.8rem; }
  .inspector .panel-context { gap: .5rem; }
  .inspector .panel-title { font-size: 1.9rem; }
  .inspector .panel-body { padding: 0 1.8rem 1.8rem; }
  .inspector .panel-form { padding-top: 1.2rem; }
  .inspector .group { padding: 1.3rem 1.4rem 1.5rem; }
  .inspector .danger-zone { padding: 1.6rem 0 .4rem; }
  .inspector .panel-form:not(.is-renaming) > .check { display: none; }
  .inspector-close { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; }
  .inspector-state { margin-left: auto; font-size: 1.2rem; font-weight: 550; color: var(--ink-3); }
  .inspector-state[data-state="offline"] { color: var(--warning); }
  .inspector-state[data-state="failed"] { color: var(--error); cursor: help; }
  .inspector-problems { margin: 1.4rem 0 0; padding: .9rem 1.2rem; border: 1px solid var(--warning-line); border-radius: var(--r-control); background: var(--warning-soft); font-size: 1.35rem; }
  .inspector-problems[hidden] { display: none; }
  .inspector-problems-title { margin: 0; font-weight: 650; }
  .inspector-problems ul { margin: .3rem 0 0; padding-left: 2rem; color: var(--ink-2); }
  .inspector-handle { position: absolute; left: -.6rem; top: 1.4rem; bottom: 1.4rem; z-index: 4; width: 1.2rem; cursor: ew-resize; touch-action: none; }
  .inspector-handle::after { content: ""; position: absolute; left: .4rem; top: 50%; width: .4rem; height: 4.8rem; margin-top: -2.4rem; border-radius: 999px; background: var(--line-strong); opacity: 0; transition: opacity .15s; }
  .inspector:hover .inspector-handle::after, .inspector-handle:focus-visible::after { opacity: 1; }
  .inspector-handle:focus-visible { outline: none; }
  @media (max-width: 979px) {
    .inspector { top: calc(var(--gap) + 5.6rem); left: var(--gap); bottom: auto; width: auto; max-height: calc(100% - 6.8rem - 2 * var(--gap)); }
    .workspace.has-inspector .workspace-phone, .workspace.has-inspector .island.is-top-right, .workspace.has-inspector .journey-float.is-bottom { right: var(--gap); }
    .inspector-handle { display: none; }
  }
}