/* Result tools share a control rhythm in the workbench and its video editor frame. */
dialog:is(.zr-image-video, .zr-reference-dialog, .zw-image-editor, .zr-tool-frame),
#workbench > :is(.zve, .vo) {
  --tool-control-height: 40px;
  --tool-gutter: 22px;
  --tool-field-gap: 6px;
  --tool-label: #c7c8d2;
  --tool-value-size: 15px;
  font-size: var(--tool-value-size);
  line-height: 1.5;
}
dialog:is(.zr-image-video, .zr-reference-dialog, .zr-tool-frame) > header {
  flex: none;
  padding: 12px var(--tool-gutter);
  min-height: 54px;
  box-sizing: border-box;
}
dialog:is(.zr-image-video, .zr-reference-dialog, .zr-tool-frame, .zw-image-editor) > header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
dialog.zr-image-video > header button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
}
dialog.zr-image-video > header button:hover { background: #ffffff0d; }

/* Global form rules add margins to labels and block-layout to select. Reset them at the field. */
dialog:is(.zr-image-video, .zr-reference-dialog, .zw-image-editor) label,
#workbench > :is(.zve, .vo) label {
  margin: 0;
  gap: var(--tool-field-gap);
  color: var(--tool-label);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
dialog:is(.zr-image-video, .zr-reference-dialog, .zw-image-editor) label > :is(select, input, textarea),
#workbench > :is(.zve, .vo) label > :is(select, input, textarea) { margin: 0; }

/* Preserve the shared option list and its up/down state. One centered arrow occupies its own gutter. */
:root dialog:is(.zr-image-video, .zr-reference-dialog, .zw-image-editor) select:not([multiple]),
:root #workbench > :is(.zve, .vo) select:not([multiple]) {
  display: inline-block;
  appearance: none !important;
  box-sizing: border-box;
  height: var(--tool-control-height);
  min-height: var(--tool-control-height);
  padding: 0 36px 0 12px;
  margin: 0;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--tool-value-size);
  font-weight: 500;
  line-height: 1.4;
  background-image: var(--zw-select-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4.5 6.25 3.5 3.5 3.5-3.5' stroke='%23babcc9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
  background-position: right 11px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
}

/* Only the parameter area scrolls; the title, quote and action stay reachable on short screens. */
dialog.zr-image-video[open], dialog.zr-reference-dialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100dvh - 32px);
}
dialog.zr-image-video[open] { width: min(704px, calc(100% - 32px)); }
dialog.zr-image-video > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0;
  padding: 0;
  margin: 0;
}
dialog.zr-image-video .iv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 24px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px var(--tool-gutter) 20px;
}
dialog.zr-image-video .iv-frame {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: var(--tool-field-gap);
}
dialog.zr-image-video .iv-frame figcaption {
  color: var(--tool-label);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
dialog.zr-image-video .iv-frame img {
  display: block;
  width: 100%;
  height: clamp(170px, 28dvh, 242px);
  max-height: none;
  object-fit: contain;
  border-radius: 10px;
  background: #19191d;
}
dialog.zr-image-video fieldset {
  align-content: start;
  align-items: start;
  gap: 14px;
}
dialog.zr-image-video .iv-options {
  align-items: start;
  gap: 12px 14px;
}
dialog.zr-image-video details > summary {
  width: fit-content;
  max-width: 100%;
  padding-block: 2px;
  font-size: 14px;
  font-weight: 500;
}
dialog.zr-image-video details[open] > summary { margin-bottom: 10px; }
dialog.zr-image-video :is(textarea, input[type="number"]) {
  font: 400 var(--tool-value-size)/1.45 system-ui, sans-serif;
  padding: 8px 11px;
  border-radius: 8px;
}
dialog.zr-image-video input[type="number"] { min-height: var(--tool-control-height); }
dialog.zr-image-video footer, dialog.zr-reference-dialog footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px var(--tool-gutter);
  border-top: 1px solid #ffffff14;
}
dialog.zr-image-video footer p {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}
dialog.zr-image-video footer .iv-submit,
dialog.zr-reference-dialog footer .zr-button,
dialog.zw-image-editor footer .ie-primary {
  min-height: var(--tool-control-height);
  padding: 7px 16px;
  font-size: var(--tool-value-size);
  line-height: 1.4;
}
dialog.zr-reference-dialog[open] { width: min(540px, calc(100% - 32px)); }
dialog.zr-reference-dialog .zr-reference-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  gap: 14px;
  padding: 16px var(--tool-gutter);
}
dialog.zr-reference-dialog .zr-status:not(:empty) {
  padding: 0 var(--tool-gutter) 12px;
  font-size: 14px;
}
dialog.zr-reference-dialog footer .zr-reference-cancel {
  background: transparent;
  border-color: #ffffff30;
  color: #dedee5;
}
dialog.zw-image-editor[open] .ie-row { gap: 8px 14px; margin-block: 10px; }
dialog.zw-image-editor[open] .ie-row:empty { display: none; }
dialog.zw-image-editor[open] .ie-padding {
  box-sizing: border-box;
  height: 34px;
  padding: 4px 6px;
  font-size: var(--tool-value-size);
}
dialog.zw-image-editor[open] > footer {
  gap: 10px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ffffff14;
}
dialog.zw-image-editor[open] > textarea { font-size: var(--tool-value-size); line-height: 1.5; }
dialog.zw-image-editor[open] :is(.ie-hint, .ie-engine .ie-field-label),
#workbench > :is(.zve, .vo) :is(.zve-tip, .vo-instructions) { font-size: 14px; }
#workbench > :is(.zve, .vo) :is(textarea, input:not([type="range"], [type="file"])) {
  font-size: var(--tool-value-size);
}
dialog:is(.zr-image-video, .zr-reference-dialog, .zw-image-editor) .zw-native-picker-list[role="listbox"] [role="option"],
#workbench ~ .zw-native-picker-list[role="listbox"] [role="option"] {
  font-size: inherit;
  line-height: 1.4;
}

/* Embedded video tools have their own document. These selectors also serve the same editor opened directly. */
#workbench > .zve .workspace-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
#workbench > :is(.zve, .vo) .pane { min-width: 0; }
#workbench > .zve form { gap: 14px; }
#workbench > .zve .zve-row { gap: 10px 14px; }
#workbench > :is(.zve, .vo) :is(h2, .history-head h2) { font-size: 18px; line-height: 1.4; }
#workbench > .zve > form.pane { max-width: 760px; margin-inline: auto; }
#workbench > .zve > form.pane > :is(button[type="submit"], audio) { max-width: 100%; }
#workbench > .zve > form.pane > button[type="submit"] { justify-self: end; min-height: var(--tool-control-height); padding-inline: 16px; }
@media (max-width: 800px) {
  #workbench > .zve .workspace-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  dialog:is(.zr-image-video, .zr-reference-dialog, .zw-image-editor, .zr-tool-frame),
  #workbench > :is(.zve, .vo) { --tool-value-size: 16px; --tool-gutter: 16px; }
  dialog.zr-image-video[open], dialog.zr-reference-dialog[open] {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }
  dialog.zr-image-video .iv-body { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 14px; }
  dialog.zr-image-video .iv-frame { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; }
  dialog.zr-image-video .iv-frame img { grid-row: 1; grid-column: 1; width: 64px; height: 68px; }
  dialog.zr-image-video .iv-frame figcaption { grid-column: 2; }
  dialog.zr-image-video .iv-options { column-gap: 10px; }
  dialog.zw-image-editor[open] > footer { flex-wrap: wrap; }
}
@media (pointer: coarse) {
  dialog:is(.zr-image-video, .zr-reference-dialog, .zw-image-editor, .zr-tool-frame),
  #workbench > :is(.zve, .vo) { --tool-control-height: 44px; }
  dialog:is(.zr-image-video, .zr-reference-dialog, .zr-tool-frame, .zw-image-editor) > header button {
    min-width: 44px;
    min-height: 44px;
  }
}
@media (forced-colors: active) {
  :root dialog:is(.zr-image-video, .zr-reference-dialog, .zw-image-editor) select:not([multiple]),
  :root #workbench > :is(.zve, .vo) select:not([multiple]) {
    appearance: auto !important;
    background-image: none;
  }
}