/* Origin marks (4.13.x): duplicated and derived diagrams, same quiet badge shape as the 5.0 labels. */
html:root {
  --scs-origin-derived: #0e7280;
  --scs-origin-duplicated: #6b7785;
}
html[data-theme='dark'] {
  --scs-origin-derived: #4fb8c4;
  --scs-origin-duplicated: #a3afbc;
}

html:root .scs-origin {
  --origin-c: var(--scs-origin-duplicated);
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 7px 0 6px;
  border: 1px solid color-mix(in srgb, var(--origin-c) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--origin-c) 12%, var(--scs-surface, #fff));
  color: var(--origin-c);
  font: 600 var(--scs-text-xs, 11px) / 18px var(--scs-font, system-ui);
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
}
html:root .scs-origin[data-origin='derived'] {
  --origin-c: var(--scs-origin-derived);
}
html:root .scs-origin .scs-icon {
  flex: none;
}

/* Navigation: icon only, in the colour of the menu text. */
html:root .scs-origin.is-compact {
  min-height: 0;
  margin-left: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.75;
}

/* Editor heading: beside the diagram ID. */
html:root #view-title-id .scs-origin {
  margin-left: 6px;
}
/* Cards: on the line of the diagram ID. */
html:root .diagram-card-main > .scs-origin-row {
  margin-top: -6px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Dashboard list: after the diagram title. */
html:root .dashboard-diagram-open > .scs-origin {
  margin-left: 8px;
}
/* Pro editor header */
html:root .pro-editor-head strong + .scs-origin {
  margin-left: -4px;
}

/* 5.3: conversion of a block diagram into a data flow diagram. */
.dfd-convert-table{width:100%;border-collapse:collapse;font-size:13px}
.dfd-convert-table th{text-align:left;font-weight:600;padding:4px 8px;border-bottom:1px solid var(--scs-line-strong)}
.dfd-convert-table td{padding:3px 8px;border-bottom:1px solid var(--scs-line);vertical-align:middle}
.dfd-convert-table td:nth-child(2){color:var(--scs-ink-2)}
.dfd-convert-table select{width:100%;min-width:150px;padding:3px 6px;font-size:13px}

/* 5.4.2: coupling symbol instead of the coupling toast. Sits at the bottom right
   of the editor, on the hint line when it is shown, and explains itself on hover. */
.editor-pane{position:relative}
.editor-pane:has(.coupling-status.active) .grid-footer{padding-right:44px}
.coupling-status{position:absolute;right:8px;bottom:4px;z-index:5;width:26px;height:26px;padding:3px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--teal,#147f8c);display:inline-flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .4s,background .15s}
.coupling-status[hidden]{display:none}
.coupling-status:hover,.coupling-status:focus-visible,.coupling-status.pinned{opacity:1;background:var(--scs-surface,#fff);border-color:var(--scs-line,#d5dee5)}
.coupling-status svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.coupling-status .coupling-arrows{transform-origin:12px 12px}
.coupling-status.spinning .coupling-arrows{animation:coupling-turn .7s linear 2}
@keyframes coupling-turn{to{transform:rotate(360deg)}}
.coupling-status-tip{position:absolute;right:0;bottom:calc(100% + 6px);width:max-content;max-width:min(340px,70vw);padding:8px 10px;border:1px solid var(--scs-line,#d5dee5);border-radius:8px;background:var(--scs-surface,#fff);color:var(--scs-ink,#17384f);box-shadow:0 6px 18px #0b1e2c22;font-size:12px;line-height:1.4;text-align:left;white-space:normal;display:none;flex-direction:column;gap:3px;pointer-events:none}
.coupling-status-tip strong{font-weight:600}
.coupling-status-tip span{color:var(--scs-ink-3,#5d7385)}
.coupling-status:hover .coupling-status-tip,.coupling-status:focus-visible .coupling-status-tip,.coupling-status.pinned .coupling-status-tip{display:flex}
html[data-theme=dark] .coupling-status{color:#6fc6cf}
html[data-theme=dark] .coupling-status-tip,html[data-theme=dark] .coupling-status:is(:hover,:focus-visible,.pinned){background:#203546;border-color:#3a5366;color:#d6e3ec}
html[data-theme=dark] .coupling-status-tip span{color:#9fb6c7}
/* 6.13: quiet mark for connections turned to "Quelle → Ziel" when the diagram opened (connection_direction.js). */
.editor-pane:has(.direction-status.active) .grid-footer{padding-right:44px}
.editor-pane:has(.coupling-status.active):has(.direction-status.active) .grid-footer{padding-right:74px}
.editor-pane:has(.coupling-status.active) .direction-status{right:38px}
.direction-status.pulse .direction-arrows{animation:direction-swap .5s ease-in-out 2}
@keyframes direction-swap{50%{transform:scaleX(-1)}}
.direction-status .direction-arrows{transform-origin:12px 12px}
@media (prefers-reduced-motion:reduce){.direction-status.pulse .direction-arrows{animation:none}}
@media (prefers-reduced-motion:reduce){.coupling-status.spinning .coupling-arrows{animation:none}.coupling-status.spinning{opacity:1}}