.document-workspace__bar--commands {
  gap: var(--arhix-space-gap);
}

.document-workspace__command-mode {
  display: flex;
  min-width: 0;
  flex: none;
  align-items: center;
  gap: var(--arhix-space-gap);
}

.document-workspace__command-mode[hidden] {
  display: none;
}

[data-ui-surface="shell"] [data-document-workspace-mode="inspector"]
  > button > svg {
  width: var(--arhix-icon-size);
  height: var(--arhix-icon-size);
}

.document-workspace__font,
.document-workspace__size {
  width: var(--arhix-inspector-content-width);
  flex: none;
}

.document-workspace__leading {
  width: var(--arhix-inspector-half-field-width);
  flex: none;
}

.document-workspace__background {
  width: var(--arhix-control-width-compact);
  flex: none;
}

.document-workspace__background > .inspector-panel__field {
  width: 100%;
  margin: 0;
  padding: var(--arhix-space-micro);
  justify-content: center;
}

.document-workspace__background .inspector-graphic-preview {
  display: grid;
  width: 100%;
  height: var(--arhix-preview-height);
  place-items: center;
  cursor: pointer;
}

.document-workspace__background-glyph {
  color: var(--arhix-ink);
  font-size: var(--arhix-font-size-body);
  line-height: 1;
}

.document-workspace__command-mode
  :is(.document-workspace__font, .document-workspace__size, .document-workspace__leading)
  > .inspector-panel__field {
  width: 100%;
  margin: 0;
}

.document-workspace__size .inspector-panel__field-select-left {
  flex: 1 1 auto;
  gap: 0;
}

.document-workspace__size .inspector-graphic-preview {
  cursor: pointer;
}

.document-workspace__emphasis,
.document-workspace__lists {
  display: flex;
  flex: none;
  gap: var(--arhix-space-micro);
}

.document-workspace__emphasis > .inspector-panel__visibility-button,
.document-workspace__lists > .inspector-panel__visibility-button {
  margin: 0;
}

.document-workspace__emphasis > .inspector-panel__visibility-button:nth-child(1) > span {
  font-weight: 600;
}

.document-workspace__emphasis > .inspector-panel__visibility-button:nth-child(2) > span {
  font-style: italic;
}

.document-workspace__emphasis > .inspector-panel__visibility-button:nth-child(3) > span {
  text-decoration: underline;
  text-underline-offset: var(--arhix-space-pill);
}

[data-ui-surface="shell"] .document-workspace__command-mode
  > .inspector-panel__scope {
  width: calc(2 * var(--arhix-inspector-half-field-width));
  height: var(--arhix-control-height);
  flex: none;
  gap: var(--arhix-space-micro);
  margin: 0;
}

[data-ui-surface="shell"] .document-workspace__command-mode
  > .inspector-panel__scope > button {
  width: var(--arhix-control-width-compact);
  height: var(--arhix-pill-height);
  flex: none;
}

.document-workspace__formatting-marks {
  flex: none;
  font-family: "Arhix Formatting Marks", Arial, sans-serif;
  margin: 0;
}

.document-workspace__layout-fields {
  gap: var(--arhix-space-gap);
}

[data-ui-surface="shell"] .document-workspace__layout-field {
  width: var(--arhix-inspector-half-field-width);
  margin: 0;
  flex: none;
}

[data-ui-surface="shell"] .document-workspace__layout-field[data-active="true"] {
  box-shadow: inset 0 0 0 1px var(--arhix-accent);
}

.document-workspace__layout-field > input {
  text-align: right;
}

.text-story-formatting-marks {
  display: none;
  fill: var(--arhix-ink-muted);
  font-family: "Arhix Formatting Marks", Arial, sans-serif;
  pointer-events: none;
}

.document-workspace[data-formatting-marks-visible="true"]
  .text-story-formatting-marks {
  display: block;
}

.document-workspace__viewport {
  background: var(--arhix-workspace-backdrop);
  overflow-anchor: none;
}

.document-workspace__pages {
  display: flex;
  min-width: 100%;
  width: max-content;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: var(--arhix-space-section);
  padding: calc(2 * var(--arhix-space-section)) var(--arhix-space-edge);
}

.document-workspace__page {
  position: relative;
  flex: none;
  overflow: hidden;
  box-sizing: border-box;
  border: var(--arhix-border-hairline) solid var(--arhix-paper-frame);
  background: var(--arhix-paper);
}

.document-workspace__page-scene {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.document-workspace__layout-guides {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.document-workspace__layout-guide {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  pointer-events: auto;
}

.document-workspace__layout-guide::after {
  position: absolute;
  background: var(--arhix-ink-ghost);
  content: "";
}

.document-workspace__layout-guide[aria-pressed="true"]::after {
  background: var(--arhix-accent);
}

.document-workspace__layout-guide--top,
.document-workspace__layout-guide--bottom {
  right: 0;
  left: 0;
  height: 12px;
  transform: translateY(-6px);
}

.document-workspace__layout-guide--top {
  top: var(--document-margin-top);
}

.document-workspace__layout-guide--bottom {
  bottom: var(--document-margin-bottom);
  transform: translateY(6px);
}

.document-workspace__layout-guide--top::after,
.document-workspace__layout-guide--bottom::after {
  top: calc(50% - var(--arhix-border-hairline) / 2);
  right: 0;
  left: 0;
  height: var(--arhix-border-hairline);
}

.document-workspace__layout-guide--left,
.document-workspace__layout-guide--right,
.document-workspace__layout-guide--paragraph {
  top: 0;
  bottom: 0;
  width: 12px;
  transform: translateX(-6px);
}

.document-workspace__layout-guide--left {
  left: var(--document-margin-left);
}

.document-workspace__layout-guide--right {
  right: var(--document-margin-right);
  transform: translateX(6px);
}

.document-workspace__layout-guide--paragraph {
  top: var(--document-margin-top);
  bottom: auto;
  left: var(--document-paragraph-indent);
  height: var(--document-paragraph-guide-height);
}

.document-workspace__layout-guide--left::after,
.document-workspace__layout-guide--right::after,
.document-workspace__layout-guide--paragraph::after {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--arhix-border-hairline) / 2);
  width: var(--arhix-border-hairline);
}

.document-workspace__text-frame-hit-target {
  fill: transparent;
  pointer-events: all;
  stroke: transparent;
}