/* Compact workspace chrome inspired by the reference; document typography stays independent. */
:root:not(.dark-mode) .workspace {
  --color-canvas-soft: #f8f8f9;
  --color-surface-soft: #f3f3f5;
  --color-surface-muted: #eeedf9;
  --color-ink: #303137;
  --color-ink-secondary: #505158;
  --color-ink-muted: #777880;
  --color-hairline: #eaeaec;
  --color-hairline-strong: #ddddE2;
  --color-focus-ring: rgb(99 91 231 / 30%);
}
.workspace { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.workspace .editor-toolbar { min-height: 56px; padding: 0 20px 0 0; gap: 16px; background: var(--color-canvas); backdrop-filter: none; }
.workspace .editor-toolbar > .brand-block { display: flex; flex-direction: row; align-items: center; gap: 24px; }
.workspace .brand-row { width: 260px; align-self: stretch; padding: 0 20px; border-right: 1px solid var(--color-hairline); background: var(--color-canvas-soft); }
.workspace .app-wordmark { font-size: 18px; letter-spacing: -.6px; }
.workspace .app-wordmark::before { content: 'e'; display: inline-grid; place-items: center; width: 27px; height: 27px; margin-right: 10px; border-radius: 7px; background: #635be7; color: white; font-size: 19px; font-weight: 400; }
.workspace .domain-version-row { align-items: center; }
.workspace .domain-toolbar { margin: 0; }
.workspace .domain-select { min-height: 32px; font-size: 13px; border-radius: 6px; padding: 5px 8px; }
.workspace .version-toolbar { display: flex; align-items: center; gap: 8px; }
.workspace .version-select { width: 120px; min-width: 90px; }
.workspace .brand-block > #api-message { position: absolute; right: 20px; top: 58px; margin: 0; font-size: 11px; pointer-events: none; }
.workspace .toolbar-options { gap: 10px; }
.workspace .toolbar-options > #toolbar-logout-button {
  order: 100;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin-left: 2px;
  border-color: var(--color-hairline-strong);
  color: var(--color-ink-muted);
  background: transparent;
}
.workspace .toolbar-options > #toolbar-logout-button:hover {
  color: #c93441;
  border-color: color-mix(in srgb, #c93441 45%, var(--color-hairline));
  background: color-mix(in srgb, #c93441 8%, transparent);
}
.workspace .toolbar-pdf-export-button { color: var(--color-ink-muted); background: transparent; }
.workspace .toolbar-pdf-export-button:hover { color: #5869fc; border-color: color-mix(in srgb, #5869fc 40%, var(--color-hairline)); }
.workspace .toolbar-options > #site-publish-button { order: 5; width: auto; min-height: 34px; padding: 7px 13px; border-radius: 7px; font-size: 13px; gap: 7px; }
.workspace .toolbar-options .user-menu-button-description,
.workspace .workspace-sidebar-footer .user-menu-button-description { display: none; }
.workspace .user-menu-button-title { font-size: 13px; font-weight: 400; }
.workspace .tree-panel { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 0; gap: 0; overflow: hidden; }
.workspace .workspace-super-menu {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px; border-right: 1px solid var(--color-hairline); background: var(--color-canvas-soft);
}
.workspace .workspace-super-menu-button {
  width: 40px; height: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 9px; padding: 0; color: var(--color-ink-muted); background: transparent;
}
.workspace .workspace-super-menu-button:hover { color: var(--color-ink); background: var(--color-surface-muted); }
.workspace .workspace-super-menu-button.is-selected {
  border-color: color-mix(in srgb, #5869fc 35%, var(--color-hairline));
  color: #5869fc; background: color-mix(in srgb, #5869fc 12%, var(--color-canvas));
}
.workspace .workspace-super-menu-button:focus-visible { outline: 2px solid #5869fc; outline-offset: 2px; }
.workspace .workspace-super-menu-button svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.workspace .workspace-super-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.workspace .workspace-menu-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 12px; overflow-x: hidden; overflow-y: auto; }
.workspace .workspace-super-group-hidden { display: none !important; }
.workspace .tree-panel > .domain-toolbar .domain-select { width: 100%; min-width: 0; }
.workspace .tree-panel > .domain-toolbar .domain-toolbar-controls { width: 100%; }
.workspace .tree-panel > .domain-toolbar .domain-select-label { font-size: 11px; }
.workspace .workspace-search-slot > button { display: flex; justify-content: flex-start; width: 100%; gap: 9px; height: 33px; border: 1px solid var(--color-hairline-strong); border-radius: 6px; padding: 0 10px; color: var(--color-ink-muted); background: var(--color-canvas); box-shadow: 0 1px 2px rgb(0 0 0 / 4%); font-size: 13px; font-weight: 400; }
.workspace .workspace-documents > summary { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 9px 8px; border-radius: 6px; list-style: none; }
.workspace .workspace-documents > summary::-webkit-details-marker { display: none; }
.workspace .workspace-documents > summary::after { content: '›'; margin-left: auto; font-size: 16px; }
.workspace .workspace-documents[open] > summary::after { transform: rotate(90deg); }
.workspace .workspace-documents > summary:hover { background: var(--color-surface-soft); }
.workspace .workspace-primary-entry {
  display: flex; align-items: center; width: 100%; min-height: 39px; gap: 9px; margin: 0;
  border: 0; border-radius: 6px; padding: 9px 8px; color: var(--color-ink-secondary);
  background: transparent; box-shadow: none; text-align: left; font-size: 13px; font-weight: 400;
}
.workspace .workspace-primary-entry:hover,
.workspace .workspace-primary-entry[aria-current="page"] { background: var(--color-surface-soft); }
.workspace .workspace-primary-entry > svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--color-ink-muted); }
.workspace .workspace-primary-entry .user-menu-button-copy { min-width: 0; }
.workspace .workspace-primary-entry .user-menu-button-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace .workspace-primary-entry .user-menu-button-description { display: none; }
.workspace .tree-panel-header { padding: 4px 8px; margin: 0; }
.workspace .tree-panel h2 { font-size: 11px; font-weight: 400; color: var(--color-ink-muted); }
.workspace .tree-title { font-size: 13px; }
.workspace .tree-row.active .tree-title { font-weight: 400; }
.workspace .workspace-navigation { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--color-hairline); padding-top: 9px; }
.workspace .workspace-navigation > button,
.workspace .workspace-sidebar-footer button { display: flex; justify-content: flex-start; align-items: center; width: 100%; min-height: 35px; border: 0; border-radius: 6px; padding: 8px; gap: 9px; background: transparent; color: var(--color-ink-secondary); text-align: left; font-size: 13px; font-weight: 400; box-shadow: none; }
.workspace .workspace-navigation > button:hover,
.workspace .workspace-sidebar-footer button:hover { background: var(--color-surface-soft); }
.workspace .workspace-sidebar-footer { margin-top: auto; padding-top: 16px; }
.workspace .workspace-navigation img,
.workspace .workspace-sidebar-footer svg,
.workspace .workspace-sidebar-footer img,
.workspace .workspace-search-slot img,
.workspace .workspace-documents > summary img,
.workspace .toolbar-options svg { width: 16px; height: 16px; flex-shrink: 0; }
.workspace .workspace-sidebar-footer svg,
.workspace .toolbar-options svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.workspace .workspace-navigation > .hidden,
.workspace .workspace-sidebar-footer .hidden,
.workspace .toolbar-options > .hidden { display: none; }
.workspace .page-editor-overlay { box-shadow: 0 2px 8px rgb(0 0 0 / 3%); font-weight: 400; border-radius: 7px; }
.workspace .page-editor-overlay button { font-weight: 400; }
.workspace #editorjs { font-size: 16px; }
.workspace .published-version-status { font-size: 11px; }
:root:not(.dark-mode) .workspace .published-version-status { color: #438d97; }
@media (min-width: 901px) {
  .workspace .brand-row { min-height: 56px; }
}
@media (max-width: 900px) {
  .workspace .editor-toolbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .workspace .editor-toolbar > .brand-block { gap: 12px; flex: 1; }
  .workspace .brand-row { width: auto; padding: 0; border: 0; background: transparent; }
  .workspace .app-wordmark { width: 121px; }
  .workspace .app-wordmark::before { display: none; }
  .workspace .version-toolbar > label { display: none; }
  .workspace .version-select { width: 90px; }
  .workspace .toolbar-options { margin-left: auto; }
  .workspace .tree-panel { display: none; }
  .workspace .pages-toggle:checked ~ .editor-layout .tree-panel { display: grid; }
  .workspace .workspace-sidebar-footer { margin-top: 16px; }
}
.workspace .workspace-navigation svg,
.workspace .workspace-documents > summary svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.workspace .workspace-documents > summary { color: var(--color-ink-secondary); font-weight: 400; }
.workspace .workspace-documents > summary svg { color: var(--color-ink-muted); }
@media (min-width: 1181px) {
  .workspace .brand-row { width: var(--workspace-sidebar-width, 267px); }
}
@media (max-width: 900px) {
  .workspace .editor-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .workspace .editor-toolbar > .brand-block { display: contents; }
  .workspace .brand-row { grid-column: 1; grid-row: 1; }
  .workspace .toolbar-options { grid-column: 2; grid-row: 1; }
  .workspace .domain-version-row { grid-column: 1 / -1; grid-row: 2; }
  .workspace .version-toolbar .domain-toolbar-controls { flex-wrap: nowrap; }
  .workspace .tree-panel { top: var(--workspace-toolbar-height, 96px); max-height: calc(100dvh - var(--workspace-toolbar-height, 96px)); }
  .workspace .pages-toggle:checked ~ .page-editor-overlay { visibility: hidden; }
  .workspace .brand-block > #api-message { display: none; }
}

/* Domain identity belongs to the header, beside the actual editQ wordmark. */
.workspace .app-wordmark::before { content: none; display: none; }
.workspace .brand-row { gap: 12px; min-width: 0; }
.workspace .workspace-domain { flex: 1; min-width: 0; }
.workspace .workspace-domain > .domain-select-label { display: none; }
.workspace .workspace-domain .domain-toolbar-controls { position: relative; flex-wrap: nowrap; }
.workspace .workspace-domain .domain-select {
  appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; max-width: 100%;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: inherit; padding: 6px 23px 6px 0; font-size: 13px; text-overflow: ellipsis;
}
.workspace .workspace-domain .domain-select:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.workspace .workspace-domain svg { position: absolute; right: 1px; width: 14px; height: 16px; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; color: var(--color-ink-muted); }

/* Section panels participate in the layout instead of covering the workspace. */
.workspace .editor-layout > .workspace-view {
  display: none; position: relative; inset: auto; grid-column: 3 / -1; grid-row: 1;
  width: 100%; max-width: none; height: 100%; max-height: none; min-width: 0; min-height: 0;
  margin: 0; padding: 24px 28px; border: 0; border-radius: 0; box-shadow: none;
  background: var(--color-canvas); color: var(--color-ink); overflow: auto;
  z-index: auto; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.workspace .editor-layout > .workspace-view-active { display: block; }
.workspace .editor-layout > .workspace-view.hidden { display: none; }
.workspace .workspace-view > .form-users-dialog,
.workspace .workspace-view > .user-menu-shell {
  position: relative; inset: auto; transform: none; width: 100%; max-width: none;
  height: auto; max-height: none; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.workspace .workspace-view > .site-users-dialog { height: 100%; overflow: hidden; }
.workspace .workspace-view > .qhse-dialog { height: 100%; overflow: hidden; }
.workspace .workspace-view .user-menu-header { padding: 0 0 20px; }
.workspace .workspace-view .user-menu-grid { padding: 20px 0; }
.workspace.workspace-section-open .editor-panel,
.workspace.workspace-section-open .chat-resize-handle,
.workspace.workspace-section-open .editor-side-panel,
.workspace.workspace-section-open > .page-editor-overlay { display: none; }
.workspace [aria-current="page"] { background: var(--color-surface-muted); color: var(--color-ink); }
.workspace .workspace-navigation > [aria-current="page"],
.workspace .workspace-sidebar-footer [aria-current="page"] { background: var(--color-surface-muted); }
@media (max-width: 1180px) {
  .workspace .editor-layout > .workspace-view { grid-column: 2 / -1; height: auto; min-height: calc(100dvh - var(--workspace-toolbar-height, 56px)); }
  .workspace .workspace-view > .qhse-dialog { height: calc(100dvh - var(--workspace-toolbar-height, 56px) - 48px); }
}
@media (max-width: 900px) {
  .workspace .brand-row { flex-wrap: nowrap; }
  .workspace .workspace-domain { max-width: 150px; }
  .workspace .editor-toolbar { grid-template-columns: minmax(0, 1fr); }
  .workspace .brand-row { grid-column: 1; grid-row: 1; }
  .workspace .domain-version-row { grid-column: 1; grid-row: 2; padding-right: 0; min-height: 34px; }
  .workspace .toolbar-options { grid-column: 1; grid-row: 3; width: 100%; justify-content: flex-end; justify-self: stretch; }
  .workspace .editor-layout > .workspace-view { grid-column: 1 / -1; padding: 18px 16px; }
  .workspace .workspace-view > .qhse-dialog { height: calc(100dvh - var(--workspace-toolbar-height, 96px) - 36px); }
  .workspace.workspace-section-open .editor-layout { padding-bottom: 0; }
}

/* Shared navigation groups and section headers. */
.workspace .workspace-navigation-group { border-top: 1px solid var(--color-hairline); padding-top: 6px; }
.workspace .workspace-navigation-group > summary { display: flex; align-items: center; justify-content: space-between; padding: 8px; color: var(--color-ink-muted); font-size: 11px; font-weight: 400; cursor: pointer; list-style: none; }
.workspace .workspace-navigation-group > summary::-webkit-details-marker { display: none; }
.workspace .workspace-navigation-group > summary::after { content: '›'; font-size: 15px; }
.workspace .workspace-navigation-group[open] > summary::after { transform: rotate(90deg); }
.workspace .workspace-navigation-group .workspace-navigation { border: 0; padding: 0; }
.workspace .workspace-navigation .user-menu-button-description { display: none; }
.workspace .workspace-navigation svg { width: 16px; height: 16px; }
.workspace .workspace-navigation .user-menu-button-copy { min-width: 0; }
.workspace .workspace-navigation .user-menu-button-title { line-height: 1.4; }
.workspace .workspace-view { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; }
.workspace .editor-layout > .workspace-view { padding: 24px 28px; }
.workspace .workspace-view .workspace-section-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex: 0 0 auto; padding: 0 0 20px; margin: 0 0 24px;
  border: 0; border-bottom: 1px solid var(--color-hairline);
}
.workspace .workspace-view .workspace-section-heading { flex: 1; min-width: 0; }
.workspace .workspace-view .workspace-section-header h2 { margin: 0; padding: 0; font: 600 22px/1.3 Arial, Helvetica, sans-serif; color: var(--color-ink); }
.workspace .workspace-view .workspace-section-description { display: block; margin: 8px 0 0; padding: 0; max-width: 850px; color: var(--color-ink-muted); font: 400 13px/1.6 Arial, Helvetica, sans-serif; }
.workspace .workspace-view .workspace-section-header > button { flex: 0 0 auto; min-height: 32px; margin: 0; border: 1px solid var(--color-hairline); border-radius: 6px; padding: 6px 9px; background: transparent; color: var(--color-ink-muted); box-shadow: none; font: 400 13px/1.4 Arial, Helvetica, sans-serif; }
.workspace .workspace-view .workspace-section-header > button svg,
.workspace .workspace-view .workspace-section-header > button img { width: 16px; height: 16px; }
.workspace .workspace-view .user-menu-kicker { display: none; }
.workspace .workspace-view .user-menu-section:not(.user-menu-account) { display: none; }
.workspace .workspace-view .user-menu-grid { grid-template-columns: minmax(0, 1fr); padding: 0; }
.workspace .workspace-view .user-menu-header > div { flex: 1; min-width: 0; }
.workspace .workspace-view .form-users-dialog { font-size: 13px; }
.workspace .workspace-view :is(input, select, textarea, button) { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.workspace #api-message {
  position: fixed; top: 5px; left: 5px; right: auto; z-index: 940;
  display: block; width: 7px; height: 7px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: #d24646; color: transparent;
  overflow: hidden; pointer-events: auto;
}
.workspace #api-message[data-status="ready"] { background: #28a56a; }
.workspace #api-message[data-status="loading"] { background: #92959a; }
@media (max-width: 900px) {
  .workspace .editor-layout > .workspace-view { padding: 18px 16px; }
  .workspace .workspace-view .workspace-section-header { gap: 12px; padding-bottom: 16px; margin-bottom: 20px; }
  .workspace .workspace-view .workspace-section-header h2 { font-size: 20px; }
}
/* Every section scrolls inside the same viewport, including tablet-sized screens. */
.workspace.workspace-section-open { height: 100dvh; min-height: 0; overflow: hidden; }
.workspace.workspace-section-open .editor-layout { min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
.workspace.workspace-section-open .editor-layout > .workspace-view { height: 100%; min-height: 0; }
.workspace.workspace-section-open .workspace-view > .qhse-dialog { height: 100%; }
/* Anchor tooltip geometry to its control, never to the document viewport. */
.workspace [data-tooltip] { position: relative; }
.workspace [data-tooltip]::before,
.workspace [data-tooltip]::after { display: none; }
.workspace [data-tooltip]:hover::before,
.workspace [data-tooltip]:hover::after,
.workspace [data-tooltip]:focus-visible::before,
.workspace [data-tooltip]:focus-visible::after { display: block; }
.workspace .workspace-navigation-drawer > button {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 35px;
  gap: 9px; padding: 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--color-ink-secondary); text-align: left; font-size: 13px; font-weight: 400; box-shadow: none;
}
.workspace .workspace-navigation-drawer > button::after { content: '›'; margin-left: auto; font-size: 15px; }
.workspace .workspace-navigation-drawer > button[aria-expanded="true"]::after { transform: rotate(90deg); }
.workspace .workspace-navigation-drawer > button:hover { background: var(--color-surface-soft); }
.workspace .workspace-navigation-choices { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 6px 15px; padding: 0 0 0 14px; border-left: 1px solid var(--color-hairline); }
.workspace .workspace-navigation-choices > button { min-height: 32px; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--color-ink-secondary); text-align: left; font-size: 12px; font-weight: 400; line-height: 1.45; box-shadow: none; }
.workspace .workspace-navigation-choices > button:hover { background: var(--color-surface-soft); }
.workspace .workspace-navigation-choices > button[aria-current="step"],
.workspace .workspace-navigation-drawer > button[aria-current="page"] { background: var(--color-surface-muted); }
.workspace .workspace-navigation-choices.hidden,
.workspace .workspace-navigation-choices > button.hidden,
.workspace .workspace-navigation-drawer > button.hidden { display: none; }
.workspace .workspace-navigation-drawer:has(> button.hidden) { display: none; }
.workspace .workspace-nav-counts { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.workspace .workspace-nav-count { display: inline-flex; justify-content: center; align-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--color-surface-muted); color: var(--color-ink-muted); font: 400 11px/1 Arial, sans-serif; }
.workspace .workspace-nav-count.needs-validation { color: #fff; background: #c93441; }
@media (max-width: 900px) {
  .workspace .pages-toggle:checked ~ .editor-layout .tree-panel { z-index: 910; }
}
.workspace .toolbar-options > #site-publish-button {
  display: inline-flex;
  align-items: center;
  background: #19c37d;
  border-color: #19c37d;
  color: #fff;
}
.workspace .toolbar-options > #site-publish-button:hover:not(:disabled) {
  background: #16ad6f;
  border-color: #16ad6f;
}
.workspace #site-publish-button .user-menu-button-title { color: #fff; }
.workspace #site-publish-button > svg { color: #fff; stroke: #fff; fill: none; }
.workspace .toolbar-options > #site-publish-button.hidden { display: none; }
@media (max-width: 900px) {
  .workspace .chat-panel.tour-chat-visible { top: auto; height: 55dvh; background: var(--color-canvas); pointer-events: auto; }
  .workspace .chat-panel.tour-chat-visible .chat-header,
  .workspace .chat-panel.tour-chat-visible .chat-log { display: flex; }
}

.workspace .toolbar-options > #toolbar-tour-button { order: 4; flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; color: var(--color-ink-muted); border: 0; background: transparent; box-shadow: none; border-radius: 7px; }
.workspace #toolbar-tour-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }