/* Shared workbench surfaces. The exported scientific paper remains opaque. */
:is(body.figure-workspace-page, .fe-page) {
  --ws-glass: rgb(245 250 255 / 64%);
  --ws-chrome: rgb(248 251 255 / 78%);
  --ws-input: rgb(255 255 255 / 76%);
  --ws-edge: rgb(113 141 164 / 21%);
  --ws-highlight: rgb(255 255 255 / 90%);
  --ws-shadow: rgb(30 58 81 / 7%);
  --ws-solid: #f3f7fb;
  --ws-ink: #24384b;
  --ws-background: radial-gradient(ellipse at 2% 30%, #c8e1ed99, transparent 56%),
    radial-gradient(ellipse at 97% 83%, #ccd9ee99, transparent 58%), #e9eff5;
}
html[data-theme=dark] :is(body.figure-workspace-page, .fe-page) {
  --ws-glass: rgb(29 44 61 / 72%);
  --ws-chrome: rgb(33 49 67 / 86%);
  --ws-input: rgb(19 34 49 / 72%);
  --ws-edge: rgb(170 199 222 / 19%);
  --ws-highlight: rgb(206 228 248 / 11%);
  --ws-shadow: rgb(0 8 17 / 21%);
  --ws-solid: #213244;
  --ws-ink: #e5eef7;
  --ws-background: radial-gradient(ellipse at 2% 30%, #23475b80, transparent 56%),
    radial-gradient(ellipse at 97% 83%, #2c385480, transparent 58%), #192734;
}
body.figure-workspace-page,
.fe-page:is(.fe-maximized, :fullscreen),
.fe-page .fe-app {
  background: var(--ws-background);
}
body.figure-workspace-page {
  --wb-glass: var(--ws-glass);
  --wb-input: var(--ws-input);
  --wb-line: var(--ws-edge);
}
body.figure-workspace-page :is(.wb-projectbar, .wb-statusbar, .wb-data-pane, .wb-properties),
.fe-page :is(.fe-workspace-heading, .fe-toolbar, .fe-statusbar, .fe-layers, .fe-properties, .fe-bottom) {
  background: linear-gradient(130deg, var(--ws-highlight), transparent 75%), var(--ws-glass);
  background-blend-mode: soft-light, normal;
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  box-shadow: inset 0 1px 0 var(--ws-highlight), 0 6px 24px var(--ws-shadow);
  border-color: var(--ws-edge);
}
body.figure-workspace-page :is(.wb-projectbar, .wb-statusbar),
.fe-page :is(.fe-workspace-heading, .fe-toolbar, .fe-statusbar) {
  background-color: var(--ws-chrome);
}
.fe-page { --fe-line: var(--ws-edge); --fe-input: var(--ws-input); }
.fe-page .fe-app { border-color: var(--ws-edge); }
.fe-page .fe-workspace-heading { color: var(--ws-ink); position: relative; z-index: 12; }
.fe-page .fe-wordmark { color: var(--ws-ink); }
.fe-page .fe-workspace-identity > strong { border-color: var(--ws-edge); }
.fe-page .fe-workspace-heading p { color: var(--fe-muted); }
.fe-page .fe-workspace-actions :is(button, summary),
.fe-page .fe-workspace-heading #fe-fullscreen {
  color: var(--ws-ink);
  background: var(--ws-input);
  border-color: var(--ws-edge);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 var(--ws-highlight);
}
.fe-page .fe-workspace-actions #fe-tutorial { color: var(--fe-muted); }
.fe-page .fe-workspace-actions :is(button, summary):hover {
  background: color-mix(in srgb, var(--fe-accent) 9%, var(--ws-input));
  border-color: color-mix(in srgb, var(--fe-accent) 38%, var(--ws-edge));
  color: var(--ws-ink);
}
.fe-page :is(.fe-stage-panel, .fe-stage) { background-color: transparent; }
.fe-page :is(.fe-canvas-tools, .fe-navigation-hint, .fe-canvas-footer) {
  background: rgb(247 251 255 / 46%);
  border-color: var(--ws-edge);
}
html[data-theme=dark] .fe-page :is(.fe-canvas-tools, .fe-navigation-hint, .fe-canvas-footer) {
  background: rgb(23 39 56 / 45%);
}
.fe-page .fe-panel-title {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ws-chrome);
  border-radius: 6px;
}
.fe-page .fe-panel-collapse,
.fe-page .fe-panel-restore { display: none; }

/* Every toolbar menu uses the same glass surface in the browser top layer. */
:is(body.figure-workspace-page, .fe-page) .vp-floating-menu {
  box-sizing: border-box;
  position: fixed;
  inset: auto;
  margin: 0;
  max-width: calc(100vw - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  color: var(--ws-ink);
  background: linear-gradient(130deg, var(--ws-highlight), transparent 75%), var(--ws-glass);
  background-blend-mode: soft-light, normal;
  border: 1px solid var(--ws-edge);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  box-shadow: inset 0 1px 0 var(--ws-highlight), 0 14px 40px var(--ws-shadow);
}
:is(body.figure-workspace-page, .fe-page) .vp-floating-menu:not(:popover-open) { display: none; }
:is(body.figure-workspace-page, .fe-page) .vp-floating-menu:popover-open { display: grid; }
.fe-page #fe-add-elements > .vp-floating-menu { width: 290px; }

@media (min-width: 761px) {
  .fe-page .fe-workspace {
    --fe-left-width: 250px;
    --fe-right-width: 278px;
    grid-template-columns: var(--fe-left-width) minmax(0, 1fr) var(--fe-right-width);
  }
  .fe-page .fe-workspace.fe-hide-layers { --fe-left-width: 34px; }
  .fe-page .fe-workspace.fe-hide-properties { --fe-right-width: 34px; }
  .fe-page :is(.fe-layers, #fe-show-layers) { grid-column: 1; grid-row: 1; }
  .fe-page .fe-stage-panel { grid-column: 2; grid-row: 1; }
  .fe-page :is(.fe-properties, #fe-show-properties) { grid-column: 3; grid-row: 1; }
  .fe-page .fe-hide-layers .fe-layers,
  .fe-page .fe-hide-properties .fe-properties { display: none; }
  .fe-page .fe-panel-collapse {
    display: inline-flex;
    flex: 0 0 28px;
    width: 28px;
    min-height: 28px;
    padding: 4px;
    margin-left: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--fe-muted);
  }
  .fe-page .fe-panel-collapse:hover { background: var(--ws-input); color: var(--fe-accent); }
  .fe-panel-collapse svg, .fe-panel-restore svg { width: 16px; height: 16px; flex: none; }
  .fe-page .fe-panel-restore:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    min-height: 0;
    padding: 18px 4px;
    border: 0;
    border-radius: 0;
    color: var(--fe-accent);
    background: var(--ws-glass);
    box-shadow: inset 0 1px 0 var(--ws-highlight);
  }
  .fe-panel-restore > span { writing-mode: vertical-rl; letter-spacing: .14em; font-size: 12px; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .fe-page .fe-workspace { --fe-left-width: 220px; --fe-right-width: 250px; }
}
@media (prefers-reduced-transparency: reduce) {
  body.figure-workspace-page :is(.wb-projectbar, .wb-statusbar, .wb-data-pane, .wb-properties),
  .fe-page :is(.fe-workspace-heading, .fe-toolbar, .fe-statusbar, .fe-layers, .fe-properties, .fe-bottom),
  :is(body.figure-workspace-page, .fe-page) .vp-floating-menu {
    background: var(--ws-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}