/* "Aus dem Modell" (web/model_picker.js): the shared picker for model objects, used by mind
   maps and model documents. The host places the panel; this file gives it its look. */
.scs-model-picker {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--scs-accent-line);
  border-radius: 14px;
  background: var(--scs-surface);
  box-shadow: var(--scs-shadow-pop);
  overflow: hidden;
}
.scs-model-picker > header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, var(--scs-accent-soft), var(--scs-surface) 80%);
}
.scs-model-picker > header div {
  display: grid;
  flex: 1;
  min-width: 0;
}
.scs-model-picker > header small {
  color: var(--scs-accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.scs-model-picker > header strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scs-model-picker .mm-picker-close {
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 30px;
  padding: 0;
}
.scs-model-picker .mm-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 8px;
  padding: 0 10px;
  border: 1px solid var(--scs-line-strong);
  border-radius: 8px;
  background: var(--scs-surface);
  color: var(--muted);
}
.scs-model-picker .mm-picker-search:focus-within {
  border-color: var(--scs-focus);
  box-shadow: 0 0 0 2px var(--scs-accent-soft);
}
.scs-model-picker .mm-picker-search input {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.scs-model-picker {
  --mm-kind: var(--scs-accent);
}
.scs-model-picker .mm-kind-system {
  --mm-kind: var(--scs-kind-system);
}
.scs-model-picker .mm-kind-function {
  --mm-kind: var(--scs-kind-function);
}
.scs-model-picker .mm-kind-requirement {
  --mm-kind: var(--scs-kind-requirement);
}
.scs-model-picker .mm-kind-interface {
  --mm-kind: var(--scs-kind-interface);
}
.scs-model-picker .mm-kind-element {
  --mm-kind: var(--scs-kind-element);
}
.scs-model-picker .mm-picker-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--line);
}
.scs-model-picker .mm-picker-types button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--scs-surface);
  box-shadow: none;
  font-size: 12px;
}
.scs-model-picker .mm-picker-types button .scs-icon {
  color: var(--mm-kind);
}
.scs-model-picker .mm-picker-types button b {
  color: var(--muted);
  font-weight: 600;
}
.scs-model-picker .mm-picker-types button.active {
  border-color: var(--mm-kind);
  background: linear-gradient(135deg, color-mix(in srgb, var(--mm-kind) 18%, var(--scs-surface)), var(--scs-surface));
  color: var(--scs-ink);
  font-weight: 600;
}
.scs-model-picker .mm-picker-list {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 8px;
  overflow: auto;
}
.scs-model-picker .mm-pick-row {
  display: grid;
  grid-template-columns: 18px 24px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--scs-ink);
  text-align: left;
}
.scs-model-picker .mm-pick-row:hover:not(:disabled),
.scs-model-picker .mm-pick-row.active {
  background: var(--scs-row-hover);
}
.scs-model-picker .mm-pick-row.chosen {
  border-color: color-mix(in srgb, var(--mm-kind) 45%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mm-kind) 14%, var(--scs-surface)), var(--scs-surface));
}
.scs-model-picker .mm-pick-row:disabled {
  opacity: 0.55;
  cursor: default;
}
.scs-model-picker .mm-pick-check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--scs-line-strong);
  border-radius: 4px;
  color: var(--scs-accent-ink);
}
.scs-model-picker .mm-pick-row.chosen .mm-pick-check {
  border-color: var(--mm-kind);
  background: var(--mm-kind);
}
.scs-model-picker .mm-pick-row:disabled .mm-pick-check {
  border-color: transparent;
  color: var(--muted);
}
.scs-model-picker .mm-pick-kind {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--mm-kind) 14%, var(--scs-surface));
  color: var(--mm-kind);
}
.scs-model-picker .mm-pick-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 6.8.3: the diagrams of an effect chain, under its name. */
.scs-model-picker .mm-pick-text {
  display: grid;
  min-width: 0;
}
.scs-model-picker .mm-pick-where {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scs-model-picker .mm-pick-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}
.scs-model-picker .mm-picker-list > small,
.scs-model-picker .mm-pick-empty {
  padding: 8px;
  color: var(--muted);
}
.scs-model-picker > footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--scs-surface-2);
}
.scs-model-picker .mm-picker-count {
  flex: 1;
  color: var(--muted);
  font-size: 12px;
}
.scs-model-picker .mm-picker-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.scs-model-picker .mm-picker-group[hidden] {
  display: none;
}
.scs-model-picker .mm-picker-search input:is(:focus, :focus-visible, :hover) {
  border: 0;
  outline: none;
  box-shadow: none;
}