/**
 * OW Onboarding Tool v0.86.0
 * Professional content-node hierarchy and verified DE/EN pairing.
 *
 * Design goals:
 * - content type remains instantly recognisable,
 * - language status is explicit but secondary,
 * - source, role, workflow status and priority follow one visual system,
 * - icons keep a fixed geometry at every card size,
 * - long titles and descriptions never push tags outside their node.
 */

/* --------------------------------------------------------------------------
   Content nodes: calm, information-led card system
   -------------------------------------------------------------------------- */
.cm-node-page,
.cm-node-opportunity,
.cmp-node-page,
.cmp-node-opportunity {
  width: 306px;
  min-height: 168px;
  padding: 13px 14px 12px;
  border-radius: 15px;
  overflow: visible;
  box-sizing: border-box;
}

.cm-node-page,
.cmp-node-page,
.owr-node.content.existing {
  --cm-card-accent: #3157d5;
  --cm-card-soft: #f7f9ff;
  --cm-card-border: #bdc8ea;
  border-style: solid !important;
  border-color: var(--cm-card-border) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--cm-card-soft) 100%) !important;
  box-shadow: inset 3px 0 0 var(--cm-card-accent), 0 2px 5px rgba(35, 43, 72, .035), 0 12px 30px rgba(35, 43, 72, .065) !important;
}

.cm-node-opportunity,
.cmp-node-opportunity,
.owr-node.content.planned {
  --cm-card-accent: #168653;
  --cm-card-soft: #f5fbf7;
  --cm-card-border: #9dceb0;
  border-style: dashed !important;
  border-color: var(--cm-card-border) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--cm-card-soft) 100%) !important;
  box-shadow: inset 3px 0 0 var(--cm-card-accent), 0 2px 5px rgba(26, 91, 59, .03), 0 12px 30px rgba(26, 91, 59, .055) !important;
}

.cm-node-page:hover,
.cmp-node-page:hover,
.owr-node.content.existing:hover {
  border-color: #8799d3 !important;
}

.cm-node-opportunity:hover,
.cmp-node-opportunity:hover,
.owr-node.content.planned:hover {
  border-color: #65ae83 !important;
}

.cm-node-page.selected,
.cm-node-opportunity.selected,
.cmp-node-page.selected,
.cmp-node-opportunity.selected,
.owr-node.content.selected {
  border-color: #292929 !important;
  box-shadow: inset 3px 0 0 var(--cm-card-accent), 0 0 0 3px rgba(17, 17, 17, .10), 0 18px 44px rgba(35, 35, 35, .13) !important;
}

/* Locale completeness is already explicit in the DE / EN pills. The old
   corner light duplicated this information and visually competed with actions. */
.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: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
   Header: compact type marker + language status
   -------------------------------------------------------------------------- */
.cm-content-head,
.cmp-content-head,
.owr-content-head {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cm-content-type,
.cmp-content-type,
.owr-content-type {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4d5568;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .015em;
  white-space: nowrap;
}

.cm-content-type-icon,
.cmp-content-type-icon,
.owr-content-type-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d9dde8;
  border-radius: 8px;
  background: #f4f6fb;
  color: #3157d5;
  box-sizing: border-box;
}

.cm-content-type-icon svg,
.cmp-content-type-icon svg,
.owr-content-type-icon svg {
  display: block;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  min-height: 12px;
  flex: 0 0 12px;
  overflow: visible;
}

.cm-content-type.planned,
.cmp-content-type.planned,
.owr-content-type.planned {
  color: #39705a;
}

.cm-content-type.planned .cm-content-type-icon,
.cmp-content-type.planned .cmp-content-type-icon,
.owr-content-type.planned .owr-content-type-icon {
  color: #168653;
  border-color: #bfddca;
  background: #edf8f1;
}

.cm-content-type.reference,
.cmp-content-type.reference,
.owr-content-type.reference {
  color: #5d626b;
}

.cm-content-type.reference .cm-content-type-icon,
.cmp-content-type.reference .cmp-content-type-icon,
.owr-content-type.reference .owr-content-type-icon {
  color: #62666e;
  border-color: #d9dadd;
  background: #f4f4f5;
}

.cm-content-head > .cm-locale-badges.map,
.cmp-content-head > .cmp-locale-badges.map,
.owr-content-head > .owr-locale-badges.map {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
}

.cm-content-head .cm-locale-badge,
.cmp-content-head .cmp-locale-badge,
.owr-content-head .owr-locale-badge {
  min-width: 31px;
  min-height: 19px;
  padding: 0 6px;
  font-size: 8px !important;
  letter-spacing: .035em;
}

/* --------------------------------------------------------------------------
   Classification row: all tags use the same quiet system
   -------------------------------------------------------------------------- */
.cm-content-taxonomy,
.cmp-content-taxonomy,
.owr-content-taxonomy {
  min-width: 0;
  min-height: 19px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.cm-content-tag,
.cmp-content-tag,
.owr-content-role,
.cm-source-badge.node,
.cmp-source-badge.node,
.owr-source-badge.node {
  min-width: 0;
  max-width: 100%;
  min-height: 18px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e2e5;
  border-radius: 999px;
  background: #f5f5f6;
  color: #666a73;
  font-size: 8px !important;
  line-height: 1;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.cm-content-tag.role-primary,
.cmp-content-tag.role-primary {
  color: #294b86;
  border-color: #cbd7ee;
  background: #eef3fc;
}

.cm-content-tag.role-commercial-primary,
.cmp-content-tag.role-commercial-primary {
  color: #72530e;
  border-color: #ead9aa;
  background: #fbf6e7;
}

.cm-content-tag.role-evidence,
.cmp-content-tag.role-evidence {
  color: #67476f;
  border-color: #dfcee4;
  background: #f6f0f8;
}

.cm-content-tag.role-documentation,
.cm-content-tag.role-legal,
.cmp-content-tag.role-documentation,
.cmp-content-tag.role-legal {
  color: #575b63;
  border-color: #d9dade;
  background: #f2f2f3;
}

.cm-source-badge.node,
.cmp-source-badge.node,
.owr-source-badge.node {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
}

.cm-source-badge.node.blog,
.cmp-source-badge.node.blog,
.owr-source-badge.node.blog {
  color: #87501c;
  border-color: #edd3b1;
  background: #fff7ed;
}

.cm-source-badge.node.docs,
.cmp-source-badge.node.docs,
.owr-source-badge.node.docs {
  color: #285c84;
  border-color: #c8dced;
  background: #f0f7fd;
}

.cm-source-badge.node.trust,
.cmp-source-badge.node.trust,
.owr-source-badge.node.trust {
  color: #2f6741;
  border-color: #c7dfcf;
  background: #f0f8f3;
}

/* --------------------------------------------------------------------------
   Text hierarchy
   -------------------------------------------------------------------------- */
.cm-node-page h3,
.cm-node-opportunity h3,
.cmp-node-page h3,
.cmp-node-opportunity h3 {
  min-width: 0;
  margin: 9px 0 5px !important;
  color: #292929 !important;
  font-size: 13px !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  letter-spacing: -.015em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.cm-node-page p,
.cm-node-opportunity p,
.cmp-node-page p,
.cmp-node-opportunity p {
  min-width: 0;
  margin: 0 !important;
  color: #6c6d72 !important;
  font-size: 9.5px !important;
  line-height: 1.45 !important;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.cm-content-footer,
.cmp-content-footer {
  min-width: 0;
  width: 100%;
  margin-top: 10px !important;
  padding-top: 8px;
  border-top: 1px solid rgba(41, 41, 41, .085);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap !important;
  gap: 8px;
}

.cm-content-format,
.cmp-content-format {
  min-width: 0;
  flex: 1 1 auto;
  color: #85868b !important;
  font-size: 8.5px !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-content-footer-meta,
.cmp-content-footer-meta {
  min-width: 0;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.cm-content-action,
.cm-content-status,
.cmp-content-action,
.cm-content-priority,
.cmp-content-priority {
  min-width: 0;
  color: #777980 !important;
  font-size: 8px !important;
  line-height: 1.15;
  white-space: nowrap;
}

.cm-content-priority,
.cmp-content-priority {
  padding-left: 6px;
  border-left: 1px solid #d9dade;
  color: #55575e !important;
  font-weight: 700;
}

.cm-content-action.action-expand,
.cm-content-action.action-rebuild,
.cm-content-action.action-optimize {
  color: #8c6414 !important;
}

.cm-content-action.action-remove {
  color: #a63d3d !important;
}

/* Old page/opportunity top rows are no longer rendered; keep them harmless in
   legacy data snapshots and avoid oversized SVGs if one still appears. */
.cm-node-page .cm-node-state svg,
.cm-node-opportunity .cm-node-state svg,
.cmp-node-page .cmp-node-state svg,
.cmp-node-opportunity .cmp-node-state svg {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
}

/* --------------------------------------------------------------------------
   Review mode: same hierarchy, reduced density
   -------------------------------------------------------------------------- */
.owr-node.content {
  width: 306px !important;
  min-height: 168px;
  height: auto !important;
  padding: 13px 14px 12px;
  border-radius: 15px;
  overflow: visible;
}

.owr-node.content > .owr-content-head,
.owr-node.content > .owr-content-taxonomy {
  display: flex;
}

.owr-node.content > strong {
  min-width: 0;
  margin-top: 9px;
  color: #292929;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 650;
  text-transform: none;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.owr-node.content > small {
  min-width: 0;
  margin-top: 6px;
  color: #74757a;
  font-size: 8.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
}

.owr-content-head .owr-locale-badges.map {
  position: static !important;
  inset: auto !important;
}

.owr-content-taxonomy {
  margin-top: 8px;
}

.owr-content-role {
  text-transform: none !important;
  letter-spacing: .01em !important;
}

/* --------------------------------------------------------------------------
   Sidebar icons: fixed geometry for existing and planned content
   -------------------------------------------------------------------------- */
.cm-sidebar-content-icon,
.owr-item-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  box-sizing: border-box;
}

.cm-sidebar-content-icon svg,
.owr-item-icon svg {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px;
}

.cm-sidebar-content-item.existing .cm-sidebar-content-icon,
.owr-sidebar-item.existing .owr-item-icon {
  color: #3157d5;
  border: 1px solid #d2daf2;
  background: #eef2fd;
}

.cm-sidebar-content-item.planned .cm-sidebar-content-icon,
.owr-sidebar-item.planned .owr-item-icon {
  color: #168653;
  border: 1px solid #c4e0ce;
  background: #edf8f1;
}

/* --------------------------------------------------------------------------
   Zoom levels: progressively simplify without changing the card hierarchy
   -------------------------------------------------------------------------- */
.cm-world.cm-zoom-medium .cm-node-page p,
.cm-world.cm-zoom-medium .cm-node-opportunity p,
.cmp-world.cm-zoom-medium .cmp-node-page p,
.cmp-world.cm-zoom-medium .cmp-node-opportunity p {
  -webkit-line-clamp: 2;
}

.cm-world.cm-zoom-far .cm-content-taxonomy,
.cm-world.cm-zoom-far .cm-node-page p,
.cm-world.cm-zoom-far .cm-node-opportunity p,
.cm-world.cm-zoom-far .cm-content-footer,
.cmp-world.cm-zoom-far .cmp-content-taxonomy,
.cmp-world.cm-zoom-far .cmp-node-page p,
.cmp-world.cm-zoom-far .cmp-node-opportunity p,
.cmp-world.cm-zoom-far .cmp-content-footer {
  display: none !important;
}

.cm-world.cm-zoom-far .cm-node-page,
.cm-world.cm-zoom-far .cm-node-opportunity,
.cmp-world.cm-zoom-far .cmp-node-page,
.cmp-world.cm-zoom-far .cmp-node-opportunity {
  min-height: 82px;
  padding: 10px 11px;
}

.cm-world.cm-zoom-far .cm-node-page h3,
.cm-world.cm-zoom-far .cm-node-opportunity h3,
.cmp-world.cm-zoom-far .cmp-node-page h3,
.cmp-world.cm-zoom-far .cmp-node-opportunity h3 {
  margin-top: 7px !important;
  -webkit-line-clamp: 2;
}

/* --------------------------------------------------------------------------
   Responsive card internals
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  .cm-node-page,
  .cm-node-opportunity,
  .cmp-node-page,
  .cmp-node-opportunity,
  .owr-node.content {
    width: 292px !important;
  }
}

@media (max-width: 820px) {
  .cm-node-page,
  .cm-node-opportunity,
  .cmp-node-page,
  .cmp-node-opportunity,
  .owr-node.content {
    width: 278px !important;
    min-height: 160px;
    padding: 12px 13px 11px;
  }

  .cm-content-head,
  .cmp-content-head,
  .owr-content-head {
    gap: 7px;
  }

  .cm-content-type,
  .cmp-content-type,
  .owr-content-type {
    gap: 5px;
    font-size: 8px;
  }

  .cm-content-type-icon,
  .cmp-content-type-icon,
  .owr-content-type-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    border-radius: 7px;
  }

  .cm-node-page h3,
  .cm-node-opportunity h3,
  .cmp-node-page h3,
  .cmp-node-opportunity h3 {
    font-size: 12px !important;
  }

  .cm-node-page p,
  .cm-node-opportunity p,
  .cmp-node-page p,
  .cmp-node-opportunity p {
    font-size: 9px !important;
  }

  .cm-content-taxonomy,
  .cmp-content-taxonomy,
  .owr-content-taxonomy {
    gap: 4px;
  }
}

/* Review base styles target every span inside a node. These stronger selectors
   preserve the intended flex layout and prevent uppercase/letter-spacing from
   leaking into the new content header. */
.owr-node .owr-content-head,
.owr-node .owr-content-taxonomy {
  width: 100%;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.owr-node .owr-content-head { display: flex; }
.owr-node .owr-content-taxonomy { display: flex; }

.owr-node .owr-content-type {
  display: inline-flex;
  color: #4d5568;
  text-transform: none;
  letter-spacing: .015em;
}

.owr-node .owr-content-type.planned { color: #39705a; }
.owr-node .owr-content-type.reference { color: #5d626b; }
.owr-node .owr-content-type > span:last-child {
  display: inline;
  color: inherit;
  font: inherit;
  text-transform: none;
  letter-spacing: inherit;
}

.owr-node .owr-content-type-icon {
  display: inline-grid;
  color: inherit;
}

.owr-node .owr-content-taxonomy .owr-source-badge,
.owr-node .owr-content-taxonomy .owr-content-role {
  display: inline-flex;
  color: #666a73;
  text-transform: none;
}