/* Layout only. No literal colour, font, image, border width, radius or
 * shadow here: everything of that kind is a --wb-* token set by a theme in
 * static/themes/ (PLAN.md S16). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  font-family: var(--wb-font-ui);
  font-size: var(--wb-font-size);
  color: var(--wb-ink);
  background-color: var(--wb-wallpaper-color);
  background-image: var(--wb-wallpaper-image);
  background-size: var(--wb-wallpaper-size);
}

.wb-page {
  min-height: 100vh;
}

.wb-header {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wb-tab-gap);
  padding: var(--wb-tab-gap);
}

.wb-logo {
  display: block;
  height: var(--wb-logo-height);
  aspect-ratio: 976 / 362;
  background: var(--wb-logo-image) no-repeat left center / contain;
}

/* tabs: a wrapping row, so labels are never cut off on a phone */
.wb-tabs {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: var(--wb-tab-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-tab {
  min-width: var(--wb-tab-size);
  height: var(--wb-tab-size);
  overflow: hidden;
  background: var(--wb-accent);
  color: var(--wb-accent-ink);
  border-radius: var(--wb-radius-tab);
  transition: height var(--wb-tab-time) var(--wb-tab-ease);
}

.wb-tab:hover,
.wb-tab:focus-within,
.wb-tab-active {
  height: var(--wb-tab-size-open);
}

.wb-tab > a,
.wb-tab-lang > .wb-tab-label {
  display: block;
  padding: 0 0.25em;
  color: inherit;
  text-decoration: none;
}

.wb-tab-label {
  display: block;
  font-size: min(var(--wb-font-size-tab), 8vw);
  line-height: var(--wb-tab-size);
  text-align: center;
}

.wb-tab:hover .wb-tab-label,
.wb-tab-active .wb-tab-label {
  text-shadow: var(--wb-tab-glow);
}

/* the caption wraps inside the label's width instead of widening the tab */
.wb-tab-caption {
  display: block;
  width: 0;
  min-width: 100%;
  padding-bottom: 0.4em;
  font-size: var(--wb-font-size-small);
  line-height: 1.2;
}

.wb-tab:focus-within {
  outline: var(--wb-border-width) solid var(--wb-ink);
}

/* language tab: one flag per locale */
.wb-flags {
  display: flex;
  padding-top: var(--wb-tab-gap);
  flex-flow: row wrap;
  justify-content: center;
  gap: var(--wb-tab-gap);
}

.wb-flag {
  display: block;
  color: inherit;
}

.wb-flag > img {
  display: block;
  width: 24px;
  height: auto;
}

.wb-flag[aria-current] > img {
  outline: var(--wb-border-width) solid var(--wb-accent-ink);
  outline-offset: 1px;
}

.wb-content {
  padding: 0 10px;
}

/* visually hidden but focusable (the file input behind its label) */
.wb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* upload area */
.wb-upload {
  margin-top: var(--wb-tab-gap);
}

.wb-drop {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  min-height: 290px;
  padding: 16px;
  text-align: center;
  border: var(--wb-frame-width) var(--wb-frame-style) var(--wb-ink);
  border-radius: var(--wb-radius-frame);
}

.wb-drop-over {
  border-style: var(--wb-frame-drag-style);
  border-color: var(--wb-accent);
  background: var(--wb-drop-fill);
}

.wb-drop-icon {
  width: 70px;
  height: 70px;
  background: var(--wb-icon-upload) center / contain no-repeat;
}

.wb-drop-text {
  margin: 12px 0 0;
  font-size: var(--wb-font-size-lead);
}

.wb-drop-or {
  margin: 8px 0;
  font-size: var(--wb-font-size-label);
}

.wb-button {
  display: block;
  max-width: 250px;
  padding: 7px 12px;
  font-size: var(--wb-font-size-button);
  text-align: center;
  color: var(--wb-accent-ink);
  background: var(--wb-accent);
  border-radius: var(--wb-radius-frame);
  cursor: pointer;
}

.wb-button:hover {
  background: var(--wb-accent-hover);
}

.wb-button:focus-within,
.wb-sr-only:focus + .wb-button {
  outline: var(--wb-border-width) solid var(--wb-ink);
  outline-offset: 2px;
}

.wb-upload-note,
.wb-upload-count {
  margin: 8px 0 0;
  text-align: left;
}

/* grid of cards */
.wb-cards {
  display: grid;
  grid-template-columns: repeat(var(--wb-card-columns), minmax(0, 1fr));
  gap: var(--wb-card-gap);
  margin: var(--wb-card-gap) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .wb-cards {
    grid-template-columns: repeat(var(--wb-card-columns-mid), minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .wb-cards {
    grid-template-columns: repeat(var(--wb-card-columns-wide), minmax(0, 1fr));
  }
}

.wb-card {
  display: flex;
  flex-flow: column nowrap;
  min-width: 0;
  text-align: left;
}

.wb-card-box {
  position: relative;
  aspect-ratio: 1;
  border: var(--wb-border-width) solid var(--wb-ink);
  box-shadow: var(--wb-shadow-card);
  background: var(--wb-card-ground);
}

.wb-card-selected > .wb-card-box {
  outline: var(--wb-select-width) solid var(--wb-select);
  box-shadow: var(--wb-shadow-select);
}

.wb-card-face {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: grab;
}

.wb-card-image {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: transform 0.2s;
}

/* the photo always fills the square; its crop slides along the long edge (EDITOR.md S2.5) */
.wb-card-image {
  object-fit: cover;
}

.wb-card-pan-x .wb-card-face {
  cursor: ew-resize;
  touch-action: pan-y;
}

.wb-card-pan-y .wb-card-face {
  cursor: ns-resize;
  touch-action: pan-x;
}

.wb-card-used .wb-card-face {
  cursor: default;
}

.wb-card-nopreview {
  display: block;
  padding: 4px;
  font-size: var(--wb-font-size-small);
}

/* the icons scale with the card: a quarter of its width, 18-26px */
.wb-card-box {
  container-type: inline-size;
  --wb-card-icon: clamp(18px, 24cqw, 26px);
}

/* round icon buttons down the right edge: remove, rotate, add */
.wb-round,
.wb-card-add {
  position: absolute;
  right: 2px;
  width: var(--wb-card-icon);
  height: var(--wb-card-icon);
  padding: 0;
  cursor: pointer;
}

.wb-round {
  border: var(--wb-border-width) outset var(--wb-button-round-border);
  border-radius: var(--wb-radius-round);
}

.wb-card-remove {
  top: 2px;
  background: var(--wb-icon-delete) center / 80% no-repeat, var(--wb-button-round-bg);
}

.wb-card-rotate {
  top: calc(var(--wb-card-icon) + 4px);
  background: var(--wb-icon-rotate) center / 80% no-repeat, var(--wb-button-round-bg);
}

.wb-round:hover {
  background-color: var(--wb-button-round-hover);
}

.wb-round:active {
  border-style: inset;
}

/* "add to node": a bold green plus, as big as the rotate arrow */
.wb-card-add {
  top: calc(2 * var(--wb-card-icon) + 6px);
  font-size: 0;
  background: linear-gradient(var(--wb-add-ink), var(--wb-add-ink)) center / 80% 26% no-repeat, linear-gradient(var(--wb-add-ink), var(--wb-add-ink)) center / 26% 80% no-repeat;
  border: 0;
  filter: drop-shadow(0 0 1px var(--wb-button-round-border)) drop-shadow(0 0 1px var(--wb-button-round-border));
}

.wb-card-add:hover {
  filter: drop-shadow(0 0 2px var(--wb-button-round-hover)) drop-shadow(0 0 1px var(--wb-ink));
}

/* a double arrow in the lower left corner says which way the crop can be moved;
   shown where there is no mouse cursor to say it (touch), see the media query */
.wb-card-pan {
  display: none;
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: calc(var(--wb-card-icon) * 1.3);
  height: calc(var(--wb-card-icon) * 0.7);
  pointer-events: none;
  background: var(--wb-pan-ink);
  filter: drop-shadow(0 0 1px var(--wb-ink)) drop-shadow(0 0 1px var(--wb-ink));
}

.wb-card-pan-icon-x {
  clip-path: polygon(0 50%, 28% 0, 28% 30%, 72% 30%, 72% 0, 100% 50%, 72% 100%, 72% 70%, 28% 70%, 28% 100%);
}

.wb-card-pan-icon-y {
  width: calc(var(--wb-card-icon) * 0.7);
  height: calc(var(--wb-card-icon) * 1.3);
  clip-path: polygon(50% 0, 100% 28%, 70% 28%, 70% 72%, 100% 72%, 50% 100%, 0 72%, 30% 72%, 30% 28%, 0 28%);
}

@media (pointer: coarse) {
  .wb-card-pan {
    display: block;
  }
}

[draggable='true'] {
  cursor: grab;
}

.wb-card-name,
.wb-card-size {
  overflow: hidden;
  font-size: var(--wb-font-size-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* upload progress and state */
.wb-card-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: var(--wb-ink-soft);
}

.wb-card-progress-bar {
  height: 100%;
  background: var(--wb-accent);
  transition: width 0.15s linear;
}

.wb-card-failed > .wb-card-box {
  outline: var(--wb-select-width) solid var(--wb-error-frame);
}

.wb-card-queued .wb-card-image,
.wb-card-uploading .wb-card-image,
.wb-card-processing .wb-card-image {
  opacity: 0.6;
}

.wb-card-status {
  font-size: var(--wb-font-size-small);
  overflow-wrap: anywhere;
}

.wb-card-retry {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 6px;
  font: inherit;
  font-size: var(--wb-font-size-small);
  color: var(--wb-accent-ink);
  background: var(--wb-accent);
  border: 0;
  cursor: pointer;
}

.wb-card-retry:hover {
  background: var(--wb-accent-hover);
}

/* "New node" tile: the last cell of the upload grid */
.wb-new-node {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: var(--wb-frame-width) var(--wb-frame-drag-style) var(--wb-ink);
  border-radius: var(--wb-radius-frame);
}

.wb-new-node:hover,
.wb-new-node-open {
  color: var(--wb-accent-ink);
  background: var(--wb-accent);
  border-style: var(--wb-frame-style);
}

.wb-new-node:focus-visible {
  outline: var(--wb-select-width) solid var(--wb-select);
  outline-offset: 2px;
}

.wb-new-node-plus {
  font-size: clamp(24px, 40cqw, 48px);
  line-height: 1;
}

.wb-new-node-label {
  font-size: clamp(10px, 12cqw, var(--wb-font-size-button));
  line-height: 1.1;
  text-align: center;
}

/* never taller than the photo cards beside it: the tile keeps the square box
   and its contents shrink with the card width */
.wb-card-new > .wb-card-box {
  height: auto;
  min-height: 0;
  padding: 4px;
  overflow: hidden;
}

/* node editor frame (EDITOR.md S2.2); colours and sizes are tokens (E44) */
.wb-editor {
  margin: calc(var(--wb-card-gap) * 2) 0;
  padding: 8px;
  text-align: left;
  border: var(--wb-frame-width) var(--wb-frame-style) var(--wb-ink);
  border-radius: var(--wb-radius-frame);
  background: var(--wb-card-ground);
}

.wb-editor-head {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.wb-editor-title {
  flex: 1;
  min-width: 0;
}

.wb-editor-title input {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  color: inherit;
  background: var(--wb-card-ground);
  border: var(--wb-border-width) solid var(--wb-ink);
  border-radius: var(--wb-radius-frame);
}

.wb-editor-close,
.wb-editor-button {
  font: inherit;
  color: var(--wb-accent-ink);
  background: var(--wb-accent);
  border: 0;
  border-radius: var(--wb-radius-frame);
  cursor: pointer;
}

.wb-editor-close {
  padding: 6px 12px;
}

.wb-editor-close:hover {
  background: var(--wb-accent-hover);
}

.wb-editor-button {
  min-width: var(--wb-editor-tool-size);
  min-height: var(--wb-editor-tool-size);
  padding: 4px;
}

.wb-editor-tool {
  position: relative;
}

.wb-editor-tool-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  background: currentcolor;
  -webkit-mask: var(--wb-icon-tool) center / contain no-repeat;
  mask: var(--wb-icon-tool) center / contain no-repeat;
}

.wb-editor-tool-select { --wb-icon-tool: var(--wb-icon-tool-select); }
.wb-editor-tool-pen { --wb-icon-tool: var(--wb-icon-tool-pen); }
.wb-editor-tool-shape { --wb-icon-tool: var(--wb-icon-tool-shape); }
.wb-editor-tool-clip { --wb-icon-tool: var(--wb-icon-tool-clip); }
.wb-editor-tool-unclip { --wb-icon-tool: var(--wb-icon-tool-unclip); }
.wb-editor-tool-text { --wb-icon-tool: var(--wb-icon-tool-text); }

.wb-editor-tool-key {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: var(--wb-font-size-small);
  opacity: 0.7;
}

/* the active tool */
.wb-editor-button[aria-pressed='true'] {
  outline: var(--wb-select-width) solid var(--wb-select);
  background: var(--wb-select-fill);
}

/* the cursor of the active tool, shown over the stage */
.wb-editor-cursor-select { cursor: default; }
.wb-editor-cursor-pen,
.wb-editor-cursor-shape { cursor: crosshair; }
.wb-editor-cursor-clip,
.wb-editor-cursor-unclip { cursor: pointer; }
.wb-editor-cursor-text { cursor: text; }

.wb-editor-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.wb-editor-body {
  display: grid;
  grid-template-columns: var(--wb-editor-tool-size) minmax(0, 1fr) var(--wb-editor-tool-size);
  gap: var(--wb-editor-gap);
  align-items: start;
  max-width: calc(90vmin + 2 * 44px + 16px);
  margin: 0 auto;
}

.wb-editor-tools,
.wb-editor-actions {
  display: flex;
  flex-flow: column nowrap;
  gap: 4px;
}

.wb-editor-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--wb-card-ground);
  border: var(--wb-border-width) solid var(--wb-ink);
  box-shadow: var(--wb-shadow-card);
}

.wb-editor-stage {
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.wb-node {
  width: 100%;
  height: 100%;
}

.wb-editor-stage svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wb-editor-stage-over {
  outline: var(--wb-select-width) solid var(--wb-select);
}

.wb-editor-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* the overlay only takes pointer events while a tool is active */
.wb-editor-interactive {
  pointer-events: auto;
}

.wb-editor-stage-hint {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
}

.wb-editor-pen-options {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.wb-editor-context {
  margin: 8px 0 0;
  min-height: 1.4em;
}

.wb-editor-pages {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

/* film-strip (E53): a row under the stage, a column beside it when wide */
.wb-editor-strip {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--wb-editor-gap);
  margin: var(--wb-editor-gap) 0 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}

.wb-editor-strip-item {
  flex: 0 0 auto;
  display: flex;
  flex-flow: column nowrap;
  gap: 4px;
  width: 88px;
}

.wb-editor-strip-pick {
  padding: 0;
  border: var(--wb-frame-width) var(--wb-frame-style) var(--wb-ink);
  background: none;
  cursor: grab;
}

.wb-editor-strip-selected .wb-editor-strip-pick {
  outline: 3px solid var(--wb-select);
}

.wb-editor-strip-drag {
  opacity: 0.4;
}

.wb-editor-strip-pick img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.wb-editor-strip-tools {
  display: flex;
  justify-content: space-between;
}

.wb-editor-strip-tools .wb-editor-chip {
  min-width: 0;
  padding: 2px 6px;
}

/* palette (E54): the target chip and two rows of four swatches */
.wb-editor-palette {
  display: flex;
  flex-flow: row wrap;
  gap: var(--wb-editor-gap);
  align-items: center;
  margin-top: var(--wb-editor-gap);
}

.wb-editor-swatches {
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 4px;
}

.wb-editor-swatch {
  width: 36px;
  height: 36px;
  padding: 0;
  border: var(--wb-frame-width) var(--wb-frame-style) var(--wb-ink);
  cursor: pointer;
}

.wb-editor-swatch[aria-pressed='true'] {
  outline: 3px solid var(--wb-select);
}

.wb-editor-popover-left {
  right: auto;
  left: 0;
}

@media (min-width: 700px) {
  .wb-editor-body {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    max-width: calc(90vmin + 2 * 56px + 16px);
  }
}

.wb-node-title {
  margin: 8px 0;
  font-size: var(--wb-font-size-lead);
}

.wb-node-view {
  aspect-ratio: 1;
  width: min(100%, 90vmin);
  margin: 0 auto;
  overflow: hidden;
  background: var(--wb-card-ground);
  border: var(--wb-border-width) solid var(--wb-ink);
  box-shadow: var(--wb-shadow-card);
}

/* selection overlay on the stage (E39) */
.wb-editor-outline {
  fill: none;
  stroke: var(--wb-editor-outline);
  stroke-width: var(--wb-editor-outline-width);
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.wb-editor-handle {
  fill: var(--wb-editor-handle-fill);
  stroke: var(--wb-editor-handle-stroke);
  stroke-width: var(--wb-editor-outline-width);
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* context bar and its controls (E42) */
.wb-editor-context-bar {
  display: flex;
  flex-flow: row wrap;
  gap: var(--wb-editor-gap);
  align-items: center;
  padding: 4px var(--wb-editor-gap);
  background: var(--wb-editor-context-bg);
  border-radius: var(--wb-radius-frame);
}

.wb-editor-group {
  display: inline-flex;
  gap: 2px;
}

.wb-editor-field {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.wb-editor-chip {
  min-height: 32px;
  padding: 2px 8px;
  font: inherit;
  color: var(--wb-accent-ink);
  background: var(--wb-accent);
  border: 0;
  border-radius: var(--wb-radius-button);
  cursor: pointer;
}

.wb-editor-chip[aria-pressed='true'] {
  outline: var(--wb-select-width) solid var(--wb-select);
}

.wb-editor-chip:disabled {
  opacity: 0.5;
  cursor: default;
}

/* properties popover (E41) */
.wb-editor-props {
  position: relative;
}

.wb-editor-popover {
  position: absolute;
  z-index: 2;
  top: 100%;
  right: 0;
  display: flex;
  flex-flow: column nowrap;
  gap: var(--wb-editor-gap);
  min-width: 14em;
  padding: var(--wb-editor-gap);
  background: var(--wb-editor-popover-bg);
  border: var(--wb-frame-width) var(--wb-frame-style) var(--wb-ink);
  border-radius: var(--wb-radius-frame);
  box-shadow: var(--wb-shadow-pop);
}

/* a stored draft was found (E43) */
.wb-editor-banner {
  display: flex;
  flex-flow: row wrap;
  gap: var(--wb-editor-gap);
  align-items: center;
  margin: 0 0 var(--wb-editor-gap);
  padding: 4px var(--wb-editor-gap);
  background: var(--wb-editor-banner-bg);
  border-radius: var(--wb-radius-frame);
}

/* the picture that follows a finger while a card is dragged by touch (E46) */
.wb-ghost {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  object-fit: cover;
  opacity: 0.85;
  pointer-events: none;
  border: var(--wb-border-width) solid var(--wb-ink);
  box-shadow: var(--wb-shadow-pop);
}

.wb-editor:focus {
  outline: none;
}

/* page strip (E55): thumbnails of the pages, the current one ringed */
.wb-editor-pages {
  align-items: flex-start;
  overflow-x: auto;
}

.wb-editor-page-list {
  display: flex;
  gap: var(--wb-editor-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-editor-page {
  flex: 0 0 auto;
  display: flex;
  flex-flow: column nowrap;
  gap: 4px;
  width: 80px;
}

.wb-editor-page-pick {
  position: relative;
  padding: 0;
  border: var(--wb-frame-width) var(--wb-frame-style) var(--wb-ink);
  background: var(--wb-card-ground);
  cursor: grab;
}

.wb-editor-page-current .wb-editor-page-pick {
  outline: 3px solid var(--wb-select);
}

.wb-editor-page-thumb {
  display: block;
  aspect-ratio: 1;
  pointer-events: none;
}

.wb-editor-page-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wb-editor-page-number {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 0 4px;
  background: var(--wb-editor-popover-bg);
  color: var(--wb-ink);
  font-size: 0.8em;
}

/* step scrubber (E56): play button, slider, count */
.wb-editor-scrubber {
  display: flex;
  gap: var(--wb-editor-gap);
  align-items: center;
  margin-top: var(--wb-editor-gap);
}

.wb-editor-scrubber input[type='range'] {
  flex: 1 1 auto;
  min-width: 0;
}

.wb-editor-scrub-count {
  min-width: 4em;
  text-align: right;
}

/* mode switch (E57) */
.wb-editor-modes {
  display: flex;
  gap: 4px;
  margin-top: var(--wb-editor-gap);
}

/* shape tool (E60): the first vertex is where a click closes the shape */
.wb-editor-handle-first {
  stroke-width: 3px;
}

.wb-editor-hint {
  font-size: var(--wb-font-size-small);
  opacity: 0.7;
}

/* vertex editing (E61): the selected corner */
.wb-editor-handle-selected {
  fill: var(--wb-select);
}

/* a failed save: the banner in the danger colour */
.wb-editor-banner-error {
  border-color: var(--wb-danger);
}

/* open a saved node by number (E66) */
.wb-open-node {
  display: flex;
  gap: var(--wb-editor-gap);
  align-items: center;
  margin: var(--wb-editor-gap) 0;
}

.wb-open-node input {
  width: 6em;
}

/* a read-only editor (E67): the locked parts do not react */
.wb-editor-frame[inert],
.wb-editor-title[inert],
.wb-editor-head-fields[inert] {
  opacity: 0.6;
}

.wb-editor-head-fields {
  display: contents;
}

/* saved nodes (E68): the same grid as the upload cards, read-only tiles */
.wb-saved-title {
  margin: 16px 0 0;
  font-size: var(--wb-font-size-lead);
}

.wb-saved-box {
  overflow: hidden;
}

.wb-saved-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  font-size: var(--wb-font-size-small);
}

.wb-saved-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wb-saved-name {
  overflow: hidden;
  font-size: var(--wb-font-size-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-saved-edit {
  align-self: flex-start;
}

/* texture role (E71): chosen in the editor, shown as a dimmed film-strip entry */
.wb-editor-strip-texture .wb-editor-strip-pick {
  opacity: 0.45;
}

/* keyboard use (E73): a visible focus everywhere in the editor, the cursor, the help list */
.wb-editor :focus-visible,
.wb-open-node :focus-visible,
.wb-saved :focus-visible {
  outline: 3px solid var(--wb-select);
  outline-offset: 2px;
}

.wb-editor-stage:focus-visible {
  outline-offset: -3px;
}

.wb-editor-candidate {
  stroke-dasharray: 8 6;
}

.wb-editor-keylist {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
  max-width: 26em;
}

.wb-editor-keylist dt {
  margin: 0;
}

.wb-editor-keylist dd {
  margin: 0;
}

.wb-editor-keylist kbd {
  padding: 0 4px;
  font: inherit;
  border: 1px solid var(--wb-ink);
  border-radius: 3px;
}

/* selection order: a small blue number in the upper left corner of a selected card */
.wb-card-order {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  min-width: 1.4em;
  padding: 0 4px;
  font-size: var(--wb-font-size-button);
  font-weight: bold;
  line-height: 1.4em;
  text-align: center;
  color: var(--wb-select);
  background: var(--wb-card-ground);
  border: 1px solid var(--wb-select);
  border-radius: var(--wb-radius-round);
  pointer-events: none;
}

/* "add N selected" replaces the close tile while photos are selected */
.wb-new-node-add,
.wb-new-node-add:hover {
  color: var(--wb-add-text);
  background: var(--wb-add-ink);
  border-style: var(--wb-frame-style);
}

.wb-new-node-arrow {
  width: clamp(24px, 36cqw, 48px);
  height: clamp(24px, 36cqw, 48px);
  background: currentColor;
  clip-path: polygon(35% 0, 65% 0, 65% 50%, 90% 50%, 50% 100%, 10% 50%, 35% 50%);
}

/* a photo the open node already uses: dimmed and shaded, nothing to do with it
   until it is taken out of the node again */
.wb-card-used .wb-card-image {
  filter: grayscale(0.7) brightness(0.8);
}

.wb-card-used .wb-card-face {
  cursor: default;
}

.wb-card-used .wb-card-add {
  visibility: hidden;
}

/* landscape windows (desktop): the editor is never taller than the window.
   The square stage is sized by the height that is left, and everything that
   is not the stage (film-strip, context bar, palette, modes, scrubber,
   pages) goes into a column beside it that scrolls on its own. */
@media (min-width: 800px) and (orientation: landscape) {
  .wb-editor {
    --wb-editor-chrome: 112px; /* editor frame, margins and the head row */
    max-height: calc(100dvh - 2 * var(--wb-card-gap));
    overflow: auto;
  }

  .wb-editor-work {
    display: flex;
    flex-flow: row nowrap;
    gap: calc(var(--wb-editor-gap) * 2);
    align-items: flex-start;
  }

  .wb-editor-work > .wb-editor-body {
    flex: 0 1 auto;
    width: calc(100dvh - var(--wb-editor-chrome) + 2 * 56px + 2 * var(--wb-editor-gap));
    max-width: 62%;
    margin: 0;
  }

  .wb-editor-side {
    flex: 1 1 260px;
    min-width: 0;
    max-height: calc(100dvh - var(--wb-editor-chrome));
    overflow: auto;
  }

  .wb-editor-side > :first-child {
    margin-top: 0;
  }
}

/* the key list opens under its button towards the left (the button sits at the
   right edge) and scrolls instead of leaving the window */
.wb-editor-keys .wb-editor-popover {
  right: 0;
  left: auto;
  width: min(26em, calc(100vw - 32px));
  max-height: calc(100dvh - 140px);
  overflow: auto;
}

@media (max-width: 700px) {
  .wb-editor-keys .wb-editor-popover {
    position: fixed;
    top: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    max-height: calc(100dvh - 32px);
  }
}