/**
 * OW Onboarding Tool v0.104.0
 * Eindeutige Team-Absender, einklappbare Review-Details und kontrastreichere
 * Mindmap-Karten bei mittlerem und weitem Zoom.
 */

/* --------------------------------------------------------------------------
   Review: organische Neuanordnung ausschließlich im Editor anbieten
   -------------------------------------------------------------------------- */
body.content-review-mode .owr-arrange-button,
body.content-review-mode [data-review-action="rearrange"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Review: rechte Detailspalte ohne Veränderung der Kartenanordnung einklappen
   -------------------------------------------------------------------------- */
body.content-review-mode .owr-detail-toggle {
  display: none;
}

@media (min-width: 931px) {
  body.content-review-mode .owr-body {
    transition: grid-template-columns .24s cubic-bezier(.22, 1, .36, 1);
  }

  body.content-review-mode .owr-detail {
    transition: opacity .16s ease, visibility 0s linear 0s;
  }

  body.content-review-mode .owr-app.detail-collapsed .owr-detail {
    min-width: 0 !important;
    width: 0 !important;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, visibility 0s linear .12s;
  }

  body.content-review-mode .owr-detail-toggle {
    position: absolute;
    z-index: 26;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(191, 194, 188, .92);
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    padding: 0 11px;
    color: #484b46;
    font: inherit;
    font-size: 10px;
    font-weight: 720;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(36, 39, 35, .09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: width .2s cubic-bezier(.22, 1, .36, 1), border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
  }

  body.content-review-mode .owr-detail-toggle:hover,
  body.content-review-mode .owr-detail-toggle:focus-visible {
    width: 116px;
    border-color: #a7aba4;
    background: #fff;
    color: #222521;
    box-shadow: 0 9px 24px rgba(36, 39, 35, .13);
    outline: none;
  }

  body.content-review-mode .owr-detail-toggle svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
  }

  body.content-review-mode .owr-detail-toggle span {
    opacity: 0;
    transform: translateX(3px);
    transition: opacity .14s ease, transform .18s ease;
  }

  body.content-review-mode .owr-detail-toggle:hover span,
  body.content-review-mode .owr-detail-toggle:focus-visible span {
    opacity: 1;
    transform: translateX(0);
  }

  body.content-review-mode .owr-app.detail-collapsed .owr-detail-toggle {
    border-color: #242722;
    background: #242722;
    color: #fff;
    -webkit-text-fill-color: #fff;
  }

  body.content-review-mode .owr-app.detail-collapsed .owr-detail-toggle svg {
    transform: rotate(180deg);
  }
}

/* Die bereits etablierten Sidebar-Breiten bleiben erhalten; nur die rechte
   Spalte wird auf null gesetzt. So springt die manuelle Karte nicht. */
@media (min-width: 1280px) {
  body.content-review-mode .owr-app.detail-collapsed .owr-body {
    grid-template-columns: clamp(390px, 27vw, 440px) minmax(0, 1fr) 0 !important;
  }
}

@media (min-width: 1181px) and (max-width: 1279px) {
  body.content-review-mode .owr-app.detail-collapsed .owr-body {
    grid-template-columns: 340px minmax(0, 1fr) 0 !important;
  }
}

@media (min-width: 931px) and (max-width: 1180px) {
  body.content-review-mode .owr-app.detail-collapsed .owr-body {
    grid-template-columns: 260px minmax(0, 1fr) 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Mindmap: weniger Weiß, klarere Kartentypen und stabile Konturen beim Zoom
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-stage,
body.content-review-mode .owr-stage {
  background-color: #e9ece7;
  background-image: radial-gradient(circle at center, #c1c7be 1px, transparent 1px);
}

/* Die beiden häufigsten Inhaltstypen erhalten bewusst mehr Grundtönung.
   Sonderstatus wie „In Diskussion“ oder „Verwerfen“ überschreiben diese
   Variablen weiterhin mit ihren eigenen Farben. */
body.content-editor-mode .cm-node-page.status-existing,
body.content-review-mode .cm-node-page.status-existing {
  --cm-card-soft: #e8efff;
  --cm-card-border: #8fa4df;
}

body.content-editor-mode .cm-node-opportunity.status-planned,
body.content-review-mode .cm-node-opportunity.status-planned {
  --cm-card-soft: #e3f3e9;
  --cm-card-border: #7fb894;
}

/* Vorhandene Seiten bleiben blau. Statusklassen aus v0.93 dürfen weiterhin
   ihre eigenen Akzent-, Hintergrund- und Rahmenvariablen liefern. */
body.content-editor-mode .cm-node-page,
body.content-review-mode .cm-node-page {
  border-color: var(--cm-card-border, #91a5e1) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cm-card-soft, #eaf0ff) 42%, #ffffff) 0%, var(--cm-card-soft, #eaf0ff) 100%) !important;
  box-shadow: inset 4px 0 0 var(--cm-card-accent, #3157d5), 0 3px 7px rgba(35, 39, 34, .06), 0 14px 32px rgba(35, 39, 34, .09) !important;
}

/* Geplante Inhalte bleiben grün; Kandidaten und Diskussionen behalten ihren
   jeweiligen Statusakzent. */
body.content-editor-mode .cm-node-opportunity,
body.content-review-mode .cm-node-opportunity {
  border-color: var(--cm-card-border, #83bc98) !important;
  border-style: dashed !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cm-card-soft, #e5f4ea) 42%, #ffffff) 0%, var(--cm-card-soft, #e5f4ea) 100%) !important;
  box-shadow: inset 4px 0 0 var(--cm-card-accent, #168653), 0 3px 7px rgba(35, 39, 34, .055), 0 14px 32px rgba(35, 39, 34, .08) !important;
}

body.content-editor-mode .cm-node-cluster,
body.content-review-mode .cm-node-cluster {
  border-color: color-mix(in srgb, var(--node-color, #3157d5) 54%, #bfc3bc) !important;
  background: linear-gradient(180deg, #fbfcff 0%, color-mix(in srgb, var(--node-color, #3157d5) 18%, #ffffff) 100%) !important;
  box-shadow: inset 4px 0 0 var(--node-color, #3157d5), 0 3px 7px rgba(35, 39, 34, .055), 0 14px 30px rgba(35, 39, 34, .085) !important;
}

body.content-editor-mode .cm-links path,
body.content-review-mode .owr-links path {
  opacity: .86;
  stroke-width: 1.9px;
}

body.content-editor-mode .cm-world.cm-zoom-medium .cm-node-page,
body.content-editor-mode .cm-world.cm-zoom-medium .cm-node-opportunity,
body.content-editor-mode .cm-world.cm-zoom-medium .cm-node-cluster,
body.content-review-mode .cm-world.cm-zoom-medium .cm-node-page,
body.content-review-mode .cm-world.cm-zoom-medium .cm-node-opportunity,
body.content-review-mode .cm-world.cm-zoom-medium .cm-node-cluster {
  border-width: 2px !important;
}

/* Die Kontur bleibt auf dem Bildschirm ungefähr einen Pixel breit, selbst wenn
   die gesamte Map auf 8–20 Prozent verkleinert wird. */
body.content-editor-mode .cm-world.cm-zoom-far .cm-node-page,
body.content-review-mode .cm-world.cm-zoom-far .cm-node-page {
  --ow-far-border: clamp(4px, calc(.9px * var(--cm-screen-scale-inverse, 1)), 12px);
  background: #dfe8ff !important;
  border-width: var(--ow-far-border) !important;
  border-color: #607bc9 !important;
  box-shadow: inset var(--ow-far-border) 0 0 var(--cm-card-accent, #3157d5), 0 0 0 var(--ow-far-border) rgba(83, 107, 180, .19), 0 18px 42px rgba(35, 39, 34, .14) !important;
}

body.content-editor-mode .cm-world.cm-zoom-far .cm-node-opportunity,
body.content-review-mode .cm-world.cm-zoom-far .cm-node-opportunity {
  --ow-far-border: clamp(4px, calc(.9px * var(--cm-screen-scale-inverse, 1)), 12px);
  background: #dcefe3 !important;
  border-width: var(--ow-far-border) !important;
  border-color: #459563 !important;
  box-shadow: inset var(--ow-far-border) 0 0 var(--cm-card-accent, #168653), 0 0 0 var(--ow-far-border) rgba(51, 137, 84, .17), 0 18px 42px rgba(35, 39, 34, .13) !important;
}

body.content-editor-mode .cm-world.cm-zoom-far .cm-node-cluster,
body.content-review-mode .cm-world.cm-zoom-far .cm-node-cluster {
  --ow-far-border: clamp(4px, calc(.9px * var(--cm-screen-scale-inverse, 1)), 12px);
  background: color-mix(in srgb, var(--node-color, #3157d5) 22%, #ffffff) !important;
  border-width: var(--ow-far-border) !important;
  border-color: color-mix(in srgb, var(--node-color, #3157d5) 78%, #ffffff) !important;
  box-shadow: inset var(--ow-far-border) 0 0 var(--node-color, #3157d5), 0 0 0 var(--ow-far-border) color-mix(in srgb, var(--node-color, #3157d5) 17%, transparent), 0 18px 42px rgba(35, 39, 34, .13) !important;
}

body.content-editor-mode .cm-world.cm-zoom-far .cm-node h3,
body.content-review-mode .cm-world.cm-zoom-far .cm-node h3 {
  color: #1e211d !important;
  font-weight: 720 !important;
}

body.content-editor-mode .cm-world.cm-zoom-far .cm-links path,
body.content-review-mode .cm-world.cm-zoom-far .owr-links path {
  opacity: .96 !important;
  stroke-width: 2.5px !important;
}

body.content-editor-mode .cm-world.cm-zoom-far .cm-link.planned,
body.content-review-mode .cm-world.cm-zoom-far .cm-link.planned {
  opacity: .82 !important;
}

/* Auswahl bleibt trotz der stärkeren Grundkontur eindeutig. */
body.content-editor-mode .cm-node-page.selected,
body.content-review-mode .cm-node-page.selected,
body.content-editor-mode .cm-node-opportunity.selected,
body.content-review-mode .cm-node-opportunity.selected {
  border-color: #222521 !important;
  box-shadow: inset 4px 0 0 var(--cm-card-accent, #3157d5), 0 0 0 3px rgba(24, 27, 23, .16), 0 20px 46px rgba(35, 39, 34, .17) !important;
}

body.content-editor-mode .cm-node-cluster.selected,
body.content-review-mode .cm-node-cluster.selected {
  border-color: #222521 !important;
  box-shadow: inset 4px 0 0 var(--node-color, #3157d5), 0 0 0 3px rgba(24, 27, 23, .16), 0 20px 46px rgba(35, 39, 34, .17) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.content-review-mode .owr-body,
  body.content-review-mode .owr-detail,
  body.content-review-mode .owr-detail-toggle,
  body.content-review-mode .owr-detail-toggle svg,
  body.content-review-mode .owr-detail-toggle span {
    transition: none !important;
  }
}