/* Office mockup pages: the review strip and the stage. Docs chrome (ds- classes), not part of the
   system. The page itself is a maximized qaction window (X-01) holding the editor (X-13). */
html:has(> body.ds-office),
body.ds-office {
  height: 100%;
}

/* office.html tiles: an outline focus ring (shown at once, unlike the transitioned card shadow). */
.ds-office-tile:focus-visible {
  outline: 2px solid var(--qf-office-focus);
  outline-offset: 2px;
}
body.ds-office {
  margin: 0;
  overflow: hidden;
  background: var(--qf-surface-sunken);
}
.ds-office-stage {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.ds-office-review {
  display: flex;
  align-items: center;
  gap: var(--qf-space-2);
  flex: none;
  min-height: 2.25rem;
  padding: 0 var(--qf-space-3);
  border-bottom: 1px solid var(--qf-border);
  background: var(--qf-surface);
  color: var(--qf-ink-secondary);
  font-size: var(--qf-text-xs);
  overflow-x: auto;
}
.ds-office-review__name {
  color: var(--qf-ink);
  font-family: var(--qf-font-family-mono);
  font-weight: var(--qf-weight-medium);
  white-space: nowrap;
}
.ds-office-review__spacer {
  flex: 1;
}
.ds-office-review label {
  display: inline-flex;
  align-items: center;
  gap: var(--qf-space-1);
  white-space: nowrap;
}
.ds-office-review select {
  height: 1.75rem;
  border: 1px solid var(--qf-border-strong);
  border-radius: var(--qf-radius-sm);
  background: var(--qf-surface);
  color: var(--qf-ink);
  font-size: var(--qf-text-xs);
}
.ds-office-review .qf-button {
  white-space: nowrap;
}
.ds-office-frame {
  display: flex;
  flex: 1;
  min-height: 0;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 0.5rem, color-mix(in srgb, var(--qf-border) 40%, transparent) 0.5rem 1rem),
    var(--qf-surface-sunken);
}
.ds-office-frame > .qf-overlay,
.ds-office-frame > .qf-overlay[data-window][data-state] {
  position: relative;
  inset: auto;
  width: var(--ds-office-width, 100%);
  max-width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  resize: horizontal;
  overflow: hidden;
}
.ds-office-frame > .qf-overlay > .qf-overlay__body {
  display: flex;
  flex-direction: column;
  border-radius: 0;
}
.ds-office-frame > .qf-overlay > .qf-overlay__header {
  border-radius: 0;
  cursor: default;
}
.ds-office-frame .qf-office {
  flex: 1;
  min-height: 0;
}

/* Hosted in a qaction window (an iframe): the host draws the title bar, unless it handed the chrome
   to the editor (?chrome=editor); no review strip either way. */
[data-office-hosted] .ds-office-review,
[data-office-hosted]:not([data-office-chrome='editor']) .ds-office-frame > .qf-overlay > .qf-overlay__header,
[data-office-bare] .ds-office-review {
  display: none;
}
[data-office-hosted] .ds-office-frame {
  background: none;
}
/* The iframe's viewport is the window, so a window 768-1199px wide would take the touch root size;
   a hosted editor keeps the desktop size there, as QEditor's shell pins it. */
:root[data-office-hosted] {
  --qf-root-size-touch: var(--qf-root-size);
}

/* Review aid: an emulation of forced colors for owners without Windows High Contrast. The a11y
   gate runs the real thing (Playwright forcedColors: 'active'). */
html[data-ds-forced] .ds-office-frame * {
  background-color: Canvas !important;
  background-image: none !important;
  color: CanvasText !important;
  border-color: CanvasText !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-ds-forced] .ds-office-frame :is([aria-pressed='true'], [aria-selected='true'], [aria-checked='true']) {
  outline: 2px solid var(--ds-fc-highlight) !important;
  outline-offset: -2px;
}
html[data-ds-forced] .ds-office-frame :is(button, a[href], [role='tab'], [role='option'], input):focus-visible {
  outline: 2px solid var(--ds-fc-highlight) !important;
}
html[data-ds-forced] .ds-office-frame .qf-text-mark[data-kind='selection'] {
  background-color: var(--ds-fc-highlight) !important;
  color: var(--ds-fc-highlight-text) !important;
}
html[data-ds-forced] .ds-office-frame :disabled {
  color: GrayText !important;
}
/* Only the frame emulates forced colours; the review strip keeps the page theme, so its own
   ink stays on its own surface. */
html[data-ds-forced] .ds-office-frame {
  color-scheme: dark;
  --qf-surface: Canvas;
  /* The Highlight pair of a dark high-contrast theme (Night sky): the keyword itself resolves to a
     translucent blue here (1.9:1 on the dark Canvas), which no real high-contrast theme would pick. */
  --ds-fc-highlight: #1aebff;
  --ds-fc-highlight-text: #000;
}