/**
 * OW Onboarding Tool v0.85.0
 * Resizable content navigation and restored semantic node hierarchy.
 */

/* --------------------------------------------------------------------------
   Desktop shell: individually resizable left navigation
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-editor {
  --cm-sidebar-width: 292px;
}

.cm-sidebar-resizer {
  display: none;
}

@media (min-width: 1121px) {
  body.content-editor-mode .cm-editor-body {
    grid-template-columns: var(--cm-sidebar-width) 8px minmax(0, 1fr) clamp(330px, 27vw, 430px) !important;
    transition: none !important;
  }

  body.content-editor-mode .cm-editor.inspector-collapsed .cm-editor-body {
    grid-template-columns: var(--cm-sidebar-width) 8px minmax(0, 1fr) !important;
  }

  body.content-editor-mode .cm-sidebar-resizer {
    position: relative;
    z-index: 12;
    width: 8px;
    min-width: 8px;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #f7f7f4;
    border: 0;
    border-right: 1px solid rgba(211, 211, 205, 0.72);
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    outline: 0;
  }

  body.content-editor-mode .cm-sidebar-resizer > span {
    width: 2px;
    margin-block: 12px;
    border-radius: 999px;
    background: #d7d7d1;
    opacity: 0;
    transform: scaleY(0.78);
    transition: opacity 140ms ease, background 140ms ease, transform 140ms ease;
  }

  body.content-editor-mode .cm-sidebar-resizer:hover > span,
  body.content-editor-mode .cm-sidebar-resizer:focus-visible > span,
  body.content-editor-mode .cm-editor.sidebar-resizing .cm-sidebar-resizer > span {
    opacity: 1;
    background: #292929;
    transform: scaleY(1);
  }

  body.content-editor-mode .cm-sidebar-resizer:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(41, 41, 41, 0.12);
  }
}

body.cm-sidebar-resizing,
body.cm-sidebar-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* The sidebar is its own responsive container. All inner cards adapt to the
   width selected by the user instead of forcing the canvas to overflow. */
body.content-editor-mode .cm-sidebar {
  container-name: cm-sidebar;
  container-type: inline-size;
  min-width: 0;
  max-width: 100%;
}

body.content-editor-mode .cm-sidebar > *,
body.content-editor-mode .cm-sidebar button,
body.content-editor-mode .cm-sidebar label,
body.content-editor-mode .cm-sidebar nav,
body.content-editor-mode .cm-sidebar section {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body.content-editor-mode .cm-site-card-top > div,
body.content-editor-mode .cm-sidebar-prompt-entry > span:nth-child(2),
body.content-editor-mode .cm-sidebar-cluster-main > span,
body.content-editor-mode .cm-sidebar-content-copy {
  min-width: 0;
}

body.content-editor-mode .cm-site-card-top strong,
body.content-editor-mode .cm-site-card > small,
body.content-editor-mode .cm-sidebar-cluster-main strong,
body.content-editor-mode .cm-sidebar-cluster-main small,
body.content-editor-mode .cm-sidebar-content-copy strong,
body.content-editor-mode .cm-sidebar-content-copy small,
body.content-editor-mode .cm-sidebar-prompt-entry strong,
body.content-editor-mode .cm-sidebar-prompt-entry small {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

body.content-editor-mode .cm-site-card-top strong,
body.content-editor-mode .cm-sidebar-cluster-main strong,
body.content-editor-mode .cm-sidebar-content-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.content-editor-mode .cm-sidebar-cluster-main small,
body.content-editor-mode .cm-sidebar-content-copy small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
}

body.content-editor-mode .cm-sidebar-content-item {
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: center;
}

.cm-sidebar-content-actions {
  min-width: 0;
  max-width: 92px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.cm-sidebar-content-actions > * {
  flex: 0 0 auto;
  margin: 0 !important;
}

.cm-sidebar-content-actions .cm-source-badge {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container cm-sidebar (max-width: 285px) {
  .cm-sidebar-content-actions .cm-source-badge {
    display: none;
  }

  .cm-sidebar-content-actions {
    max-width: 58px;
  }

  .cm-sidebar-content-copy small {
    -webkit-line-clamp: 1;
  }

  .cm-sidebar-cluster-children {
    padding-left: 26px;
  }
}

@container cm-sidebar (min-width: 380px) {
  .cm-site-stats.cm-site-stats-extended {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }

  .cm-site-stats.cm-site-stats-extended span {
    padding-inline: 10px;
    border-left: 1px solid rgba(211, 211, 205, 0.7);
  }

  .cm-site-stats.cm-site-stats-extended span:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .cm-sidebar-content-actions {
    max-width: 130px;
  }

  .cm-sidebar-content-actions .cm-source-badge {
    max-width: 96px;
  }
}

/* --------------------------------------------------------------------------
   Semantic node hierarchy + independent DE/EN status

   Content type remains the dominant visual language:
   - existing pages: solid white cards
   - planned content: cluster-tinted cards with a dashed border
   DE/EN completeness is shown by the slim status rail and the explicit pills.
   -------------------------------------------------------------------------- */
.cm-node-page.locale-complete,
.cm-node-opportunity.locale-complete,
.cmp-node-page.locale-complete,
.cmp-node-opportunity.locale-complete,
.owr-node.content.locale-complete,
.cm-sidebar-content-item.locale-complete,
.owr-sidebar-item.locale-complete {
  --cm-locale-accent: #47a568;
}

.cm-node-page.locale-incomplete,
.cm-node-opportunity.locale-incomplete,
.cmp-node-page.locale-incomplete,
.cmp-node-opportunity.locale-incomplete,
.owr-node.content.locale-incomplete,
.cm-sidebar-content-item.locale-incomplete,
.owr-sidebar-item.locale-incomplete {
  --cm-locale-accent: #cf5757;
}

/* Existing website / blog pages */
.cm-node-page.locale-complete,
.cm-node-page.locale-incomplete,
.cmp-node-page.locale-complete,
.cmp-node-page.locale-incomplete,
.owr-node.content.existing.locale-complete,
.owr-node.content.existing.locale-incomplete {
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--node-color, #3157d5) 20%, #d7d7d1) !important;
  background: #fff !important;
  box-shadow: inset 3px 0 0 var(--cm-locale-accent), 0 2px 5px rgba(41, 41, 41, 0.04), 0 12px 30px rgba(41, 41, 41, 0.06) !important;
}

/* Planned pages / content ideas */
.cm-node-opportunity.locale-complete,
.cm-node-opportunity.locale-incomplete,
.cmp-node-opportunity.locale-complete,
.cmp-node-opportunity.locale-incomplete,
.owr-node.content.planned.locale-complete,
.owr-node.content.planned.locale-incomplete {
  border-style: dashed !important;
  border-color: color-mix(in srgb, var(--node-color, #0f8a74) 42%, #d7d7d1) !important;
  background: color-mix(in srgb, var(--node-color, #0f8a74) 7%, #fff) !important;
  box-shadow: inset 3px 0 0 var(--cm-locale-accent), 0 2px 5px rgba(41, 41, 41, 0.035), 0 12px 30px rgba(41, 41, 41, 0.05) !important;
}

.cm-node-page.locale-complete:hover,
.cm-node-page.locale-incomplete:hover,
.cmp-node-page.locale-complete:hover,
.cmp-node-page.locale-incomplete:hover,
.owr-node.content.existing.locale-complete:hover,
.owr-node.content.existing.locale-incomplete:hover {
  border-color: color-mix(in srgb, var(--node-color, #3157d5) 48%, #bcbcb6) !important;
}

.cm-node-opportunity.locale-complete:hover,
.cm-node-opportunity.locale-incomplete:hover,
.cmp-node-opportunity.locale-complete:hover,
.cmp-node-opportunity.locale-incomplete:hover,
.owr-node.content.planned.locale-complete:hover,
.owr-node.content.planned.locale-incomplete:hover {
  border-color: color-mix(in srgb, var(--node-color, #0f8a74) 68%, #bcbcb6) !important;
}

.cm-node-page.locale-complete.selected,
.cm-node-page.locale-incomplete.selected,
.cm-node-opportunity.locale-complete.selected,
.cm-node-opportunity.locale-incomplete.selected,
.cmp-node-page.locale-complete.selected,
.cmp-node-page.locale-incomplete.selected,
.cmp-node-opportunity.locale-complete.selected,
.cmp-node-opportunity.locale-incomplete.selected,
.owr-node.content.locale-complete.selected,
.owr-node.content.locale-incomplete.selected {
  border-color: var(--node-color, #292929) !important;
  box-shadow: inset 3px 0 0 var(--cm-locale-accent), 0 0 0 3px color-mix(in srgb, var(--node-color, #292929) 14%, transparent), 0 18px 44px rgba(41, 41, 41, 0.13) !important;
}

/* Sidebar mirrors the same hierarchy instead of tinting every incomplete page red. */
body.content-editor-mode .cm-sidebar-content-item.existing.locale-complete,
body.content-editor-mode .cm-sidebar-content-item.existing.locale-incomplete,
.owr-sidebar-item.existing.locale-complete,
.owr-sidebar-item.existing.locale-incomplete {
  border-style: solid !important;
  border-color: rgba(211, 211, 205, 0.9) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: inset 3px 0 0 var(--cm-locale-accent);
}

body.content-editor-mode .cm-sidebar-content-item.planned.locale-complete,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-incomplete,
.owr-sidebar-item.planned.locale-complete,
.owr-sidebar-item.planned.locale-incomplete {
  border-style: dashed !important;
  border-color: color-mix(in srgb, var(--cluster-color, #0f8a74) 36%, #d7d7d1) !important;
  background: color-mix(in srgb, var(--cluster-color, #0f8a74) 6%, #fff) !important;
  box-shadow: inset 3px 0 0 var(--cm-locale-accent);
}

body.content-editor-mode .cm-sidebar-content-item.existing.locale-complete.active,
body.content-editor-mode .cm-sidebar-content-item.existing.locale-incomplete.active,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-complete.active,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-incomplete.active {
  color: #292929;
  border-color: var(--cluster-color, #292929) !important;
  background: #fff !important;
  box-shadow: inset 3px 0 0 var(--cm-locale-accent), 0 0 0 2px color-mix(in srgb, var(--cluster-color, #292929) 10%, transparent) !important;
}

.owr-sidebar-item.existing.locale-complete,
.owr-sidebar-item.existing.locale-incomplete,
.owr-sidebar-item.planned.locale-complete,
.owr-sidebar-item.planned.locale-incomplete {
  color: #333330;
}

.owr-sidebar-item.active.locale-complete,
.owr-sidebar-item.active.locale-incomplete {
  color: #fff;
  border-color: #111 !important;
  background: #111 !important;
  box-shadow: none !important;
}

/* The small DE/EN pills remain the explicit language signal. */
.cm-locale-badge.linked,
.cmp-locale-badge.linked,
.owr-locale-badge.linked {
  color: #17683a;
  border-color: #a8d8b8;
  background: #edf8f1;
}

.cm-locale-badge.missing,
.cmp-locale-badge.missing,
.owr-locale-badge.missing {
  color: #a52f2f;
  border-color: #efb6b6;
  background: #fff0f0;
}

/* Responsive toolbar after removing the duplicate global Prompt-Sets button. */
@media (max-width: 1240px) {
  body.content-editor-mode .cm-topbar-actions {
    gap: 6px;
  }
}

@media (max-width: 1120px) {
  body.content-editor-mode .cm-sidebar-resizer {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Final semantic colour pass

   Existing and planned content keep their own recognisable colours even when
   the DE/EN state is incomplete. Locale completeness is a separate corner
   indicator and remains visible through the explicit language pills.
   -------------------------------------------------------------------------- */
.cm-node-page.locale-complete,
.cm-node-page.locale-incomplete,
.cmp-node-page.locale-complete,
.cmp-node-page.locale-incomplete,
.owr-node.content.existing.locale-complete,
.owr-node.content.existing.locale-incomplete {
  --cm-content-type-accent: #3157d5;
  border-color: #b8c5ef !important;
  background: #f8faff !important;
  box-shadow: inset 3px 0 0 var(--cm-content-type-accent), 0 2px 5px rgba(41, 41, 41, 0.04), 0 12px 30px rgba(41, 41, 41, 0.06) !important;
}

.cm-node-opportunity.locale-complete,
.cm-node-opportunity.locale-incomplete,
.cmp-node-opportunity.locale-complete,
.cmp-node-opportunity.locale-incomplete,
.owr-node.content.planned.locale-complete,
.owr-node.content.planned.locale-incomplete {
  --cm-content-type-accent: #148653;
  border-color: #9bcfb0 !important;
  background: #f3faf6 !important;
  box-shadow: inset 3px 0 0 var(--cm-content-type-accent), 0 2px 5px rgba(41, 41, 41, 0.035), 0 12px 30px rgba(41, 41, 41, 0.05) !important;
}

.cm-node-page.locale-complete.selected,
.cm-node-page.locale-incomplete.selected,
.cm-node-opportunity.locale-complete.selected,
.cm-node-opportunity.locale-incomplete.selected,
.cmp-node-page.locale-complete.selected,
.cmp-node-page.locale-incomplete.selected,
.cmp-node-opportunity.locale-complete.selected,
.cmp-node-opportunity.locale-incomplete.selected,
.owr-node.content.locale-complete.selected,
.owr-node.content.locale-incomplete.selected {
  box-shadow: inset 3px 0 0 var(--cm-content-type-accent), 0 0 0 3px rgba(17, 17, 17, 0.12), 0 18px 44px rgba(41, 41, 41, 0.13) !important;
}

.cm-node-page.locale-complete::after,
.cm-node-page.locale-incomplete::after,
.cm-node-opportunity.locale-complete::after,
.cm-node-opportunity.locale-incomplete::after,
.cmp-node-page.locale-complete::after,
.cmp-node-page.locale-incomplete::after,
.cmp-node-opportunity.locale-complete::after,
.cmp-node-opportunity.locale-incomplete::after,
.owr-node.content.locale-complete::after,
.owr-node.content.locale-incomplete::after {
  content: '';
  position: absolute;
  z-index: 7;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(41, 41, 41, 0.18);
  pointer-events: none;
}

.cm-node-page.locale-complete::after,
.cm-node-opportunity.locale-complete::after,
.cmp-node-page.locale-complete::after,
.cmp-node-opportunity.locale-complete::after,
.owr-node.content.locale-complete::after {
  background: #47a568;
}

.cm-node-page.locale-incomplete::after,
.cm-node-opportunity.locale-incomplete::after,
.cmp-node-page.locale-incomplete::after,
.cmp-node-opportunity.locale-incomplete::after,
.owr-node.content.locale-incomplete::after {
  background: #cf5757;
}

body.content-editor-mode .cm-sidebar-content-item.existing.locale-complete,
body.content-editor-mode .cm-sidebar-content-item.existing.locale-incomplete,
.owr-sidebar-item.existing.locale-complete,
.owr-sidebar-item.existing.locale-incomplete {
  border-color: #c6d0ef !important;
  background: #f8faff !important;
  box-shadow: inset 3px 0 0 #3157d5 !important;
}

body.content-editor-mode .cm-sidebar-content-item.planned.locale-complete,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-incomplete,
.owr-sidebar-item.planned.locale-complete,
.owr-sidebar-item.planned.locale-incomplete {
  border-color: #a8d3b8 !important;
  background: #f3faf6 !important;
  box-shadow: inset 3px 0 0 #148653 !important;
}

body.content-editor-mode .cm-sidebar-content-item.existing.locale-complete.active,
body.content-editor-mode .cm-sidebar-content-item.existing.locale-incomplete.active,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-complete.active,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-incomplete.active {
  border-color: #292929 !important;
  background: #fff !important;
  box-shadow: inset 3px 0 0 var(--cm-content-type-accent, #292929), 0 0 0 2px rgba(41, 41, 41, 0.1) !important;
}

/* Status, role and action pills wrap as complete units. Their labels must not
   collapse into one-character columns when several pills share a node row. */
.cm-node-state,
.cmp-node-state,
.cm-node-role,
.cmp-node-role,
.cm-node-action,
.cmp-node-action {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: max-content;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: ellipsis;
}

.cm-node-state > span,
.cmp-node-state > span,
.cm-node-role,
.cmp-node-role,
.cm-node-action,
.cmp-node-action {
  white-space: nowrap !important;
}