/* Matrix & coverage, impact analysis, suspect relations and baseline states. */

/* Matrix: the table in a card on the left, coverage, legend and suspect relations on the right */
.trace-matrix-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: var(--scs-space-4);
  align-items: start;
  padding: var(--scs-space-4);
  min-width: 0;
}

.trace-matrix-main,
.trace-matrix-side {
  display: grid;
  gap: var(--scs-space-4);
  min-width: 0;
}

.trace-matrix-main .object-card > .status-note {
  margin: var(--scs-space-3) var(--scs-space-4) 0;
}

.object-card > .trace-matrix-scroll {
  max-height: calc(100vh - 300px);
  margin: 0;
  overflow: auto;
  border-radius: 0 0 var(--scs-radius-l) var(--scs-radius-l);
}

.trace-matrix {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--scs-text-s);
}

.trace-matrix th,
.trace-matrix td {
  border-right: 1px solid var(--scs-line-2);
  border-bottom: 1px solid var(--scs-line-2);
  background: var(--scs-surface);
}

.trace-matrix tr > :last-child {
  border-right: 0;
}

.trace-matrix tbody tr:last-child > * {
  border-bottom: 0;
}

.trace-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 6px;
  border-bottom-color: var(--scs-line);
  background: var(--scs-surface-2);
  color: var(--scs-ink-2);
  font-size: var(--scs-text-xs);
  font-weight: 600;
  vertical-align: bottom;
}

.trace-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 240px;
  max-width: 360px;
  padding: 7px 12px 7px var(--scs-space-4);
  overflow: hidden;
  font-weight: 400;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-matrix thead .trace-corner {
  left: 0;
  z-index: 3;
  padding-left: var(--scs-space-4);
  text-align: left;
}

.trace-id {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 6px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-s);
  background: var(--scs-surface-2);
  color: var(--scs-ink-2);
  font-family: var(--scs-font-mono);
  font-size: var(--scs-text-xs);
  vertical-align: 1px;
}

html:root .trace-matrix tbody th .object-link {
  color: var(--scs-ink);
}

html:root .trace-matrix tbody th .object-link:hover {
  color: var(--scs-accent);
}

.trace-matrix .trace-column {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  text-align: center;
}

html:root .trace-matrix .trace-column .object-link {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  color: var(--scs-ink-2);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.trace-matrix td {
  padding: 0;
  text-align: center;
}

html:root .trace-cell {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

html:root .trace-cell:not(.filled):not(:disabled):hover {
  background: var(--scs-accent-soft);
}

html:root .trace-cell:not(.filled):not(.derived):not(:disabled):hover::after {
  content: '+';
  color: var(--scs-accent);
  font-size: 15px;
  font-weight: 600;
}

html:root .trace-cell.filled:hover {
  background: var(--scs-accent-soft);
}

html:root .trace-cell:disabled {
  cursor: default;
}

.trace-cell sup {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  color: var(--scs-ink-3);
  font-size: 9px;
}

.trace-dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--scs-accent);
  border-radius: 50%;
  background: var(--scs-accent);
}

.trace-dot.derived {
  background: transparent;
}

.trace-dot.suspect,
.trace-cell.suspect .trace-dot {
  border-color: var(--scs-warn);
  background: var(--scs-warn);
  box-shadow: 0 0 0 3px var(--scs-warn-soft);
}

.trace-swatch {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  background: var(--scs-danger-soft);
}

.trace-matrix tr.gap:not(.derived-only) > td:not(.trace-row-coverage) {
  background: var(--scs-danger-soft);
}

.trace-matrix tr.gap:not(.derived-only) > td:not(.trace-row-coverage) + td:not(.trace-row-coverage) {
  border-left-color: transparent;
}

.trace-matrix tr.inactive th[scope='row'] .object-link {
  color: var(--scs-ink-3);
  text-decoration: line-through;
}

.trace-matrix tbody tr:hover > th,
.trace-matrix tbody tr:not(.gap):hover > td {
  background: var(--scs-surface-2);
}

.trace-matrix thead .trace-coverage-head {
  right: 0;
  z-index: 3;
  padding-left: 12px;
  text-align: left;
}

/* Coverage stays visible at the right edge while wide matrices scroll. */
.trace-matrix .trace-row-coverage,
.trace-matrix thead .trace-coverage-head {
  position: sticky;
  box-shadow: inset 1px 0 0 var(--scs-line);
}

.trace-matrix .trace-row-coverage {
  right: 0;
  z-index: 1;
  min-width: 150px;
  padding: 0 var(--scs-space-4) 0 12px;
  text-align: left;
  white-space: nowrap;
}

.trace-row-coverage > div {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}

.trace-row-bar {
  flex: 1;
  height: 6px;
  min-width: 60px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--scs-surface-3);
}

.trace-row-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--scs-accent);
}

.trace-row-bar.derived > span {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--scs-accent);
}

.trace-row-ratio {
  color: var(--scs-ink-2);
  font-variant-numeric: tabular-nums;
}

.trace-none {
  margin-left: auto;
  color: var(--scs-danger);
  font-weight: 600;
}

.trace-derived-note {
  color: var(--scs-warn);
}

.trace-row-note {
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
}

.trace-gap-badge {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--scs-danger-soft);
  color: var(--scs-danger);
  font-size: var(--scs-text-xs);
}

.trace-coverage-total {
  display: grid;
  gap: 2px;
}

.trace-coverage-total strong {
  color: var(--scs-accent);
  font-size: 28px;
  font-weight: 650;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.trace-coverage-total > span {
  color: var(--scs-ink-2);
  font-size: var(--scs-text-s);
}

.trace-coverage {
  height: 6px;
  border-radius: 3px;
  background: var(--scs-danger-soft);
  overflow: hidden;
}

.trace-coverage span {
  display: block;
  height: 100%;
  background: var(--scs-accent);
}

.trace-coverage-note {
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
}

.trace-legend {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
  font-size: var(--scs-text-s);
}

.trace-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trace-legend .trace-dot {
  margin: 0 2px;
}

/* 6.2: structure from the diagrams (square) and suggestions (dashed ring) next to relations. */
.trace-dot.structure {
  border-color: var(--scs-ink-3);
  border-radius: 2px;
  background: var(--scs-ink-3);
  transform: scale(0.8);
}

.trace-dot.suggested {
  border-style: dashed;
  border-color: var(--scs-accent);
  background: transparent;
}

html:root .trace-cell.suggested:not(:disabled):hover {
  background: var(--scs-accent-soft);
}

html:root .trace-cell.suggested:not(:disabled):hover .trace-dot {
  border-style: solid;
}

/* Column groups (PIF | DIF) and column heads with their IF-ID */
.trace-matrix thead .trace-group-row th {
  top: 0;
  padding: 6px;
  border-bottom-color: var(--scs-line-2);
  color: var(--scs-ink);
  font-size: var(--scs-text-xs);
  text-align: center;
}

.trace-matrix thead .trace-group-row + tr th {
  top: 29px;
}

.trace-matrix thead .trace-column-group {
  border-left: 2px solid var(--scs-line);
}

.trace-column-head {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.trace-column-head .trace-id {
  margin: 0;
}

.trace-row-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.trace-row-head .object-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trace-row-head .link-anchor {
  margin-left: auto;
  opacity: 0;
}

.trace-matrix tr:hover .trace-row-head .link-anchor,
.trace-column-head:hover .link-anchor,
.trace-matrix .link-anchor[aria-pressed='true'],
.trace-matrix .link-anchor:focus-visible {
  opacity: 1;
}

.trace-column-head .link-anchor {
  opacity: 0;
}

/* Coverage in column direction */
.trace-matrix tfoot th,
.trace-matrix tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 1;
  border-top: 1px solid var(--scs-line);
  background: var(--scs-surface-2);
  color: var(--scs-ink-2);
  font-size: var(--scs-text-xs);
}

.trace-matrix tfoot th {
  left: 0;
  z-index: 2;
  padding: 6px 12px 6px var(--scs-space-4);
  text-align: left;
}

.trace-matrix tfoot td.trace-column-gap {
  background: var(--scs-danger-soft);
  color: var(--scs-danger);
  font-weight: 600;
}

/* Assignment and pairs: ordinary tables in the same frame */
.trace-matrix.trace-assign td,
.trace-matrix.trace-pairs td {
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
}

.trace-matrix.trace-assign thead th,
.trace-matrix.trace-pairs thead th {
  text-align: left;
  padding-left: 12px;
}

.trace-matrix.trace-assign .object-link,
.trace-matrix.trace-pairs td .object-link {
  display: inline;
  white-space: normal;
}

.trace-assign-ideas .object-link {
  font-style: italic;
  opacity: 0.75;
}

.trace-matrix.trace-assign tr.gap > td:not(.trace-row-coverage) {
  background: var(--scs-danger-soft);
}

.trace-matrix.trace-pairs tr.suggestion td,
.trace-matrix.trace-pairs tr.derived td {
  color: var(--scs-ink-3);
}

/* Customize dialog */
.matrix-customize {
  display: grid;
  gap: var(--scs-space-3);
}

.matrix-axes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scs-space-3);
}

.matrix-axis-kind {
  display: grid;
  gap: 2px;
  padding: 4px 0;
}

.matrix-axis-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding-left: 24px;
  font-size: var(--scs-text-s);
}

.matrix-customize fieldset > label,
.matrix-roles label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.matrix-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
}

.matrix-accept-list {
  max-height: 220px;
  overflow: auto;
  font-size: var(--scs-text-s);
}

@media (max-width: 640px) {
  .matrix-axes,
  .matrix-roles {
    grid-template-columns: 1fr;
  }
}

#trace-suspect-cards {
  display: grid;
  gap: var(--scs-space-3);
}

#trace-suspect-cards:empty {
  display: none;
}

.trace-suspect-card {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: var(--scs-space-3) var(--scs-space-4);
  border: 1px solid var(--scs-line);
  border-left: 3px solid var(--scs-warn);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
}

.trace-suspect-card p {
  margin: 0;
  color: var(--scs-ink-2);
  font-size: var(--scs-text-s);
}

html:root .trace-suspect-card button {
  min-height: 0;
  padding: 4px 12px;
  font-size: var(--scs-text-s);
}

.coverage-rules {
  display: grid;
  gap: var(--scs-space-2);
  margin: 0 0 var(--scs-space-3);
  padding: 0;
  list-style: none;
}

.coverage-rules li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--scs-space-3);
  padding: var(--scs-space-2) var(--scs-space-3);
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
}

.coverage-rules li div {
  display: grid;
}

.coverage-rules small {
  color: var(--scs-ink-3);
}

.coverage-rule-new {
  display: grid;
  gap: var(--scs-space-2);
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
}

.coverage-rule-new p {
  margin: 0;
  color: var(--scs-ink-2);
}

/* Suspect relations on object pages */
.trace-suspect td:first-child {
  box-shadow: inset 3px 0 0 var(--scs-warn);
}

.trace-suspect-badge,
.trace-suspect-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--scs-warn-soft);
  color: var(--scs-warn);
  font-size: var(--scs-text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.trace-suspect .object-row-actions {
  white-space: nowrap;
}

.object-row-actions [data-trace-confirm] {
  width: auto;
  margin-right: 4px;
  padding: 0 10px;
}

/* Baselines on object pages */
.object-baselines h4 {
  margin: var(--scs-space-3) 0 var(--scs-space-2);
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
  font-weight: 600;
}

.trace-baselines {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-baselines li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: baseline;
}

.trace-baselines small {
  grid-column: 2;
  color: var(--scs-ink-3);
}

.trace-baseline-state {
  grid-row: span 2;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: var(--scs-text-xs);
  font-weight: 600;
}

.trace-baseline-state.same {
  background: var(--scs-ok-soft);
  color: var(--scs-ok);
}

.trace-baseline-state.changed {
  background: var(--scs-warn-soft);
  color: var(--scs-warn);
}

.trace-baseline-state.absent {
  background: var(--scs-surface-3);
  color: var(--scs-ink-2);
}

/* Impact analysis */
.impact-page {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
  gap: var(--scs-space-4);
  align-items: start;
  padding: var(--scs-space-4);
}

.impact-summary,
.impact-chains-card {
  grid-column: 1 / -1;
}

.impact-summary > :not(header),
.impact-graph-card > :not(header),
.impact-list-card > :not(header) {
  margin: var(--scs-space-3) var(--scs-space-4);
}

.impact-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scs-space-2);
}

.impact-count {
  padding: 3px 10px;
  border: 1px solid var(--scs-line);
  border-radius: 999px;
  font-size: var(--scs-text-s);
}

.impact-count::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--kind-color, var(--scs-ink-3));
}

/* The counts are also the type filter (4.8): switched-off kinds stay as quiet chips. */
html:root .impact-counts {
  align-items: center;
}

html:root .impact-counts .chip-toggle.impact-count {
  gap: 6px;
  padding: 0 12px 0 10px;
}

.impact-counts .impact-count::before {
  content: none;
}

.impact-counts .impact-count svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--kind-color, var(--scs-ink-3));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html:root .impact-counts .impact-count.off {
  border-style: dashed;
  color: var(--scs-ink-3);
  font-weight: 400;
}

html:root .impact-counts .impact-count.off svg {
  stroke: var(--scs-ink-3);
}

.kind-requirement {
  --kind-color: var(--scs-kind-requirement);
}
.kind-system {
  --kind-color: var(--scs-kind-system);
}
.kind-function {
  --kind-color: var(--scs-kind-function);
}
.kind-interface {
  --kind-color: var(--scs-kind-interface);
}
.kind-element {
  --kind-color: var(--scs-kind-element);
}
.kind-diagram {
  --kind-color: var(--scs-kind-diagram);
}

.impact-graph {
  display: block;
  max-width: 100%;
  max-height: 620px;
  height: auto;
  margin: 0 auto;
}

.impact-ring {
  fill: none;
  stroke: var(--scs-line-2);
  stroke-dasharray: 4 6;
}

.impact-edge {
  stroke: var(--scs-ink-3);
  stroke-width: 1.4;
  opacity: 0.55;
}

.impact-edge.structure {
  stroke-dasharray: 3 4;
  opacity: 0.4;
}

.impact-node {
  cursor: pointer;
  outline: none;
}

.impact-node circle {
  fill: var(--scs-surface);
  stroke: var(--kind-color);
  stroke-width: 2.5;
}

.impact-node.root circle {
  fill: var(--kind-color);
}

.impact-node .impact-icon {
  fill: none;
  stroke: var(--kind-color);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact-node.root .impact-icon {
  stroke: var(--scs-surface);
}

.impact-node text {
  fill: var(--scs-ink);
  font-size: 12px;
  paint-order: stroke;
  stroke: var(--scs-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.impact-node.root text {
  font-weight: 700;
}

.impact-legend {
  display: flex;
  gap: var(--scs-space-4);
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
}

.impact-legend span::before {
  content: '';
  display: inline-block;
  width: 22px;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 1.5px solid var(--scs-ink-3);
}

.impact-legend .structure::before {
  border-top-style: dashed;
}

/* Ring or tree, as a small segmented control in the graph card's header */
.impact-graph-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--scs-space-3);
}

.impact-layouts {
  display: inline-flex;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  overflow: hidden;
}

html:root .impact-layouts button {
  min-height: 26px;
  padding: 2px 12px;
  border: 0;
  border-radius: 0;
  background: var(--scs-surface);
  color: var(--scs-ink-2);
  font-size: var(--scs-text-s);
  box-shadow: none;
}

html:root .impact-layouts button + button {
  border-left: 1px solid var(--scs-line);
}

html:root .impact-layouts button[aria-pressed='true'] {
  background: var(--scs-accent-soft);
  color: var(--scs-ink);
  font-weight: 600;
}

/* The tree needs the whole width; the list follows below it. */
.impact-tree-card {
  grid-column: 1 / -1;
}

.impact-tree-scroll {
  max-height: 640px;
  overflow: auto;
}

.impact-tree {
  display: block;
}

.impact-tree .impact-edge {
  fill: none;
}

.impact-tree .impact-node text {
  font-size: 12px;
}

.impact-tree .impact-node circle {
  stroke-width: 2;
}

.impact-tree .impact-node .impact-icon {
  stroke-width: 2.4;
}

/* "Instanz von NTS" after an instance's name: always in the tree, on highlight in the ring. */
.impact-node .impact-instance,
.impact-instance-note {
  fill: var(--scs-ink-3);
  color: var(--scs-ink-3);
  font-weight: 400;
}

.impact-instance-note {
  font-size: 12px;
  white-space: nowrap;
}

.impact-graph .impact-node:not(.hl) .impact-instance {
  display: none;
}

.impact-tree .impact-node:hover text,
.impact-tree .impact-node:focus-visible text {
  text-decoration: underline;
}

/* Highlighting: the pointed-at object, its way back to the start object and its neighbours.
   :is() lifts these rules above the ring and tree defaults, so hovering works in both. */
.impact-node,
.impact-edge {
  transition:
    opacity 0.12s,
    stroke-width 0.12s;
}

.impact-graph .impact-edge.cross {
  opacity: 0.3;
}

:is(.impact-graph, .impact-tree) .impact-node:is(:hover, :focus-visible, .hl) circle {
  stroke-width: 4;
}

:is(.impact-graph, .impact-tree) .impact-node:focus-visible circle {
  stroke: var(--scs-focus);
}

:is(.impact-graph, .impact-tree) .impact-node.hl text {
  font-weight: 700;
}

.impact-label-hidden {
  display: none;
}

.highlighting .impact-node:is(.hl, .hl-path, .hl-near) .impact-label-hidden {
  display: inline;
}

:is(.impact-graph, .impact-tree).highlighting .impact-node:not(.hl, .hl-path, .hl-near) {
  opacity: 0.2;
}

:is(.impact-graph, .impact-tree).highlighting .impact-edge:not(.hl, .hl-path) {
  opacity: 0.08;
}

:is(.impact-graph, .impact-tree).highlighting .impact-edge.hl {
  opacity: 0.9;
  stroke: var(--scs-ink-2);
  stroke-width: 2;
}

:is(.impact-graph, .impact-tree).highlighting .impact-edge.hl-path {
  opacity: 1;
  stroke: var(--scs-accent);
  stroke-width: 2.6;
}

.highlighting .impact-ring {
  opacity: 0.4;
}

/* Search: matching objects stay strong, the rest steps back until something is highlighted. */
:is(.impact-graph, .impact-tree).searching:not(.highlighting) .impact-node:not(.match, .root) {
  opacity: 0.3;
}

:is(.impact-graph, .impact-tree).searching:not(.highlighting) .impact-edge {
  opacity: 0.15;
}

:is(.impact-graph, .impact-tree) .impact-node.match circle {
  stroke-width: 4;
}

.impact-table tr.hl > td {
  background: var(--scs-accent-soft);
}

.impact-legend {
  flex-wrap: wrap;
  align-items: center;
}

.impact-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.impact-kind:first-of-type {
  margin-left: auto;
}

.impact-legend .impact-kind::before {
  content: none;
}

.impact-kind svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--kind-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact-table td:is(:first-child, :last-child),
html:root .impact-table .object-link {
  overflow-wrap: anywhere;
  white-space: normal;
}

.impact-table td:nth-child(2) {
  white-space: nowrap;
}

.impact-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
}

/* Baseline comparison: model and relations */
.version-model {
  display: grid;
  gap: var(--scs-space-3);
  margin: var(--scs-space-3) 0;
}

.version-model h4 {
  margin: 0;
}

.version-model caption {
  padding: 4px 0;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
  font-weight: 600;
  text-align: left;
}

.version-change {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: var(--scs-text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.version-change.added {
  background: var(--scs-ok-soft);
  color: var(--scs-ok);
}
.version-change.removed {
  background: var(--scs-danger-soft);
  color: var(--scs-danger);
}
.version-change.changed {
  background: var(--scs-warn-soft);
  color: var(--scs-warn);
}

.version-technical > summary {
  cursor: pointer;
  color: var(--scs-ink-2);
}

/* Narrower screens give the matrix the full width; coverage, legend and suspect relations line up above it. */
@media (max-width: 1599px) {
  .trace-matrix-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .trace-matrix-side {
    order: -1;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    align-items: start;
  }

  #trace-suspect-cards {
    align-content: start;
  }
}

@media (max-width: 900px) {
  .impact-page {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 6.0: hint for matrix columns beyond the visible width */
.trace-scroll-hint {
  margin: 0 0 var(--scs-space-2);
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
  text-align: right;
}
.trace-scroll-hint::after {
  content: ' →';
  color: var(--scs-accent);
}
.trace-scroll-hint.is-done {
  visibility: hidden;
}

.trace-matrix.trace-assign tbody th,
.trace-matrix.trace-pairs tbody th {
  vertical-align: top;
}

/* 6.5.1: the impact graph in its own window — toolbar on top, the graph fills the rest. */
.impact-graph-card > header .impact-window-open {
  margin-left: auto;
}

.impact-window {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--scs-surface);
}

.impact-window-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scs-space-2) var(--scs-space-3);
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--scs-line);
}

.impact-window-title {
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  min-width: 0;
}

.impact-window-title strong,
.impact-window-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impact-window-title small,
.impact-window-hits,
.impact-window-hint {
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
}

#impact-window-search {
  width: 200px;
}

.impact-window-zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  cursor: default;
}

.impact-window-zoom #impact-zoom-reset {
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}

.impact-window-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background:
    radial-gradient(circle, var(--scs-line) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--scs-surface);
}

.impact-window-stage.panning {
  cursor: grabbing;
}

.impact-window-stage #impact-window-graph,
.impact-window-stage .impact-tree-scroll {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
}

html:root .impact-window-stage svg.impact-window-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}

.impact-window-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--scs-ink-3);
}

.impact-window-zoom[hidden],
.impact-window-empty[hidden],
#impact-window-graph[hidden] {
  display: none;
}

/* The chosen object keeps a ring in the focus colour while others are pointed at. */
.impact-node.chosen circle {
  stroke: var(--scs-focus);
  stroke-width: 4;
}

.impact-window-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scs-space-2) var(--scs-space-4);
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--scs-line);
}

.impact-window-info {
  flex: 1 1 320px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impact-window-kind {
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.impact-window-actions {
  display: inline-flex;
  gap: var(--scs-space-2);
}

.impact-window-foot .impact-legend,
.impact-window-hint {
  flex-basis: 100%;
  margin: 0;
}

.impact-window-head .chip-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── 6.12: start object of the impact analysis ───────────────────────────────
   One chooser in two places: as the list of the "Objekt" field and as the empty page.
   It speaks the language of the shared model picker ("Aus dem Modell", model_picker.css):
   kind tiles in the kind colour, pill tabs with counts, rows with name, note and ID. */
.kind-chain {
  --kind-color: var(--scs-kind-diagram);
}
.kind-document {
  --kind-color: var(--scs-kind-requirement);
}
.kind-all,
.kind-recent {
  --kind-color: var(--scs-accent);
}

html:root .impact-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 340px;
  max-width: 34vw;
  min-width: 200px;
  height: var(--scs-control-h);
  padding: 0 8px 0 6px;
  border: 1px solid var(--scs-line-strong);
  border-radius: var(--scs-radius-s, 6px);
  background: var(--scs-surface);
  color: var(--scs-ink);
  font-size: var(--scs-text-s);
  font-weight: 500;
  text-align: left;
  box-shadow: none;
}
html:root .impact-trigger:hover {
  border-color: var(--scs-accent-line);
  background: var(--scs-surface);
}
html:root .impact-trigger[aria-expanded='true'] {
  border-color: var(--scs-focus);
  box-shadow: 0 0 0 2px var(--scs-accent-soft);
}
.impact-trigger .impact-pick-kind {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.impact-trigger-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.impact-trigger-empty {
  padding-left: 4px;
  color: var(--scs-ink-3);
  font-weight: 400;
}
.impact-trigger code,
.impact-pick code {
  flex: none;
  color: var(--scs-ink-3);
  font-family: var(--scs-font-mono, ui-monospace, monospace);
  font-size: 11px;
}
.impact-trigger-caret {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--scs-ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The picker itself */
.impact-picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--scs-surface);
}
.impact-pick-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 12px 8px;
  padding: 0 10px;
  border: 1px solid var(--scs-line-strong);
  border-radius: 8px;
  background: var(--scs-surface);
  color: var(--scs-ink-3);
}
.impact-pick-search:focus-within {
  border-color: var(--scs-focus);
  box-shadow: 0 0 0 2px var(--scs-accent-soft);
}
html:root .impact-pick-search input {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--scs-ink);
}
.impact-pick-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--scs-line);
}
html:root .impact-pick-kinds button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid var(--scs-line);
  border-radius: 999px;
  background: var(--scs-surface);
  color: var(--scs-ink-2);
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
}
.impact-pick-kinds button .scs-icon {
  color: var(--kind-color);
}
.impact-pick-kinds button b {
  color: var(--scs-ink-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html:root .impact-pick-kinds button:hover {
  border-color: color-mix(in srgb, var(--kind-color) 55%, var(--scs-line));
  background: var(--scs-surface);
}
html:root .impact-pick-kinds button.active {
  border-color: var(--kind-color);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--kind-color) 18%, var(--scs-surface)),
    var(--scs-surface)
  );
  color: var(--scs-ink);
  font-weight: 600;
}
.impact-pick-kinds button.none:not(.active) {
  opacity: 0.5;
}
.impact-pick-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 6px 6px;
  outline: none;
}
.impact-pick-group {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -6px;
  padding: 10px 14px 4px;
  background: var(--scs-surface);
  color: var(--scs-ink-2);
  font-size: 12px;
  font-weight: 600;
}
.impact-pick-group .scs-icon {
  color: var(--kind-color);
}
.impact-pick-group b {
  color: var(--scs-ink-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.impact-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--scs-ink);
  cursor: pointer;
}
.impact-pick[aria-selected='true'] {
  background: var(--scs-row-hover);
  box-shadow: inset 3px 0 0 var(--kind-color);
}
.impact-pick[data-current] .impact-pick-name {
  font-weight: 600;
}
.impact-pick-check {
  flex: none;
  color: var(--scs-accent);
  font-weight: 700;
}
.impact-pick-kind {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--kind-color) 14%, var(--scs-surface));
  color: var(--kind-color);
}
.impact-pick-kind .diagram-type-icon {
  margin: 0;
}
.impact-pick-kind svg {
  width: 15px;
  height: 15px;
}
.impact-pick-kind.has-image {
  background: var(--scs-paper);
  box-shadow: inset 0 0 0 1px var(--scs-line);
}
.impact-pick-kind img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.impact-pick-text {
  display: grid;
  flex: 1;
  min-width: 0;
}
.impact-pick-name,
.impact-pick-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.impact-pick-text small {
  color: var(--scs-ink-3);
  font-size: 11px;
}
.impact-pick mark {
  padding: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--scs-accent) 22%, transparent);
  color: inherit;
}
.impact-pick-free {
  flex: none;
  padding: 1px 7px;
  border: 1px dashed var(--scs-line-strong);
  border-radius: 999px;
  color: var(--scs-ink-3);
  font-size: 11px;
}
.impact-pick-more,
.impact-pick-empty {
  margin: 8px;
  color: var(--scs-ink-3);
  font-size: 12px;
}
.impact-pick-empty {
  display: grid;
  gap: 2px;
  padding: 18px 8px;
  text-align: center;
}
.impact-pick-empty strong {
  color: var(--scs-ink-2);
}
.impact-pick-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--scs-line);
  background: var(--scs-surface-2);
  color: var(--scs-ink-3);
  font-size: 11px;
}
.impact-pick-keys kbd {
  margin-right: 2px;
  padding: 1px 5px;
  font-size: 10px;
}

/* In the toolbar: a list that opens under the field */
.impact-picker-popup {
  position: fixed;
  inset: auto;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--scs-line-strong);
  border-radius: 12px;
  background: var(--scs-surface);
  box-shadow: var(--scs-shadow-pop);
  color: var(--scs-ink);
}
.impact-picker-popup .impact-picker {
  flex: 1 1 auto;
}
.impact-picker-popup .impact-pick-list {
  flex: 1 1 auto;
}

/* On the empty page: the chooser is the page */
.impact-start {
  display: flex;
  flex-direction: column;
  gap: var(--scs-space-4, 16px);
  width: min(860px, 100%);
  height: 100%;
  min-height: 420px;
  margin: 0 auto;
  padding: 28px 20px 20px;
  box-sizing: border-box;
}
.impact-start header h2 {
  margin: 0 0 4px;
  color: var(--scs-ink);
  font-size: 20px;
}
.impact-start header p {
  max-width: 64ch;
  margin: 0;
  color: var(--scs-ink-3);
  font-size: 13px;
  line-height: 1.6;
}
.impact-picker.is-inline {
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-l, 12px);
  box-shadow: var(--scs-shadow-1);
}
.impact-picker.is-inline .impact-pick-search {
  margin: 14px 14px 10px;
}
html:root .impact-picker.is-inline .impact-pick-search input {
  min-height: 42px;
  font-size: 15px;
}
.impact-picker.is-inline .impact-pick-kinds {
  padding: 0 14px 12px;
}
html:root .impact-pick-search input:is(:focus, :focus-visible, :hover) {
  border: 0;
  outline: none;
  box-shadow: none;
}

/* 6.12 IFs zuordnen: one row per interface of the realized chain, chips for assigned and suggested ones */
.ifa-table {
  width: 100%;
  border-collapse: collapse;
}

.ifa-table th,
.ifa-table td {
  padding: var(--scs-space-2) var(--scs-space-3);
  border-bottom: 1px solid var(--scs-line);
  text-align: left;
  vertical-align: top;
}

.ifa-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--scs-surface-2);
  font-weight: 600;
}

.ifa-table tbody tr:hover {
  background: var(--scs-row-hover);
}

.ifa-table tr.open > td:first-child {
  box-shadow: inset 3px 0 0 var(--scs-warn);
}

.ifa-table tr.done > td:first-child {
  box-shadow: inset 3px 0 0 var(--scs-ok);
}

.ifa-table td:nth-child(1) {
  width: 26%;
}

.ifa-table td.ifa-ends {
  width: 20%;
}

.ifa-table td:nth-child(3) {
  width: 22%;
}

.ifa-accept-list {
  max-height: 50vh;
  overflow: auto;
}

.ifa-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--scs-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ifa-name strong {
  font-family: var(--scs-font-mono);
  font-size: var(--scs-text-s);
}

.ifa-name:hover strong,
.ifa-name:focus-visible strong {
  color: var(--scs-accent);
  text-decoration: underline;
}

.ifa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scs-space-1);
}

.ifa-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--scs-space-1);
  min-height: 26px;
  padding: 2px var(--scs-space-2);
  border: 1px solid var(--scs-line-strong);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  color: var(--scs-ink);
  font: inherit;
  font-size: var(--scs-text-s);
}

.ifa-chip.assigned {
  border-color: var(--scs-ok-line);
  background: var(--scs-ok-soft);
}

.ifa-chip.assigned small {
  color: var(--scs-ink-2);
}

.ifa-chip.suggestion {
  border-style: dashed;
  cursor: pointer;
}

.ifa-chip.suggestion strong {
  font-family: var(--scs-font-mono);
}

.ifa-chip.suggestion em {
  font-style: normal;
  font-size: var(--scs-text-xs);
  color: var(--scs-ink-2);
}

.ifa-chip.suggestion.both {
  border-color: var(--scs-accent);
  background: var(--scs-accent-soft);
}

.ifa-chip.suggestion.reverse,
.ifa-chip.suggestion.one {
  border-color: var(--scs-line-strong);
}

.ifa-chip.suggestion:hover:not(:disabled),
.ifa-chip.suggestion:focus-visible {
  border-style: solid;
  border-color: var(--scs-accent);
}

.ifa-plus {
  color: var(--scs-accent);
  font-weight: 700;
}

.ifa-remove {
  min-width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--scs-ink-2);
  cursor: pointer;
}

.ifa-remove:hover:not(:disabled),
.ifa-remove:focus-visible {
  background: var(--scs-danger-soft);
  color: var(--scs-danger-ink);
}

.ifa-swatch {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 12px;
  border: 1px dashed var(--scs-line-strong);
  border-radius: var(--scs-radius-s);
}

.ifa-swatch.both {
  border-color: var(--scs-accent);
  background: var(--scs-accent-soft);
}

.ifa-unused {
  display: grid;
  gap: var(--scs-space-2);
  max-height: 360px;
  margin: 0;
  padding: var(--scs-space-3) var(--scs-space-4);
  overflow: auto;
  list-style: none;
}

.ifa-unused li {
  display: grid;
  gap: 2px;
}

.ifa-unused small {
  color: var(--scs-ink-2);
}

.ifa-hint {
  padding: var(--scs-space-2) var(--scs-space-3);
  border-radius: var(--scs-radius-m);
  background: var(--scs-warn-soft);
}

.chip-select.ifa-pair select,
html:root #app .table-toolbar .chip-select.ifa-pair select {
  max-width: min(560px, 48vw);
}

/* 6.13: an interface shows what it is and where it runs. The route – system icon, name, arrow,
   system icon, name – is the same in the table, the side list and the choice list. */
.ifa-head {
  display: grid;
  justify-items: start;
  gap: 4px;
}

html:root .ifa-name {
  background: transparent;
}

.ifa-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
}

.ifa-type {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--scs-accent-line);
  border-radius: var(--scs-radius-s);
  background: var(--scs-surface);
  color: var(--scs-accent);
  font-size: var(--scs-text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ifa-desc {
  display: -webkit-box;
  flex-basis: 100%;
  overflow: hidden;
  color: var(--scs-ink-2);
  font-size: var(--scs-text-s);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ifa-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  color: var(--scs-ink-2);
  font-size: var(--scs-text-s);
  line-height: 1.3;
}

.ifa-route + .ifa-route {
  margin-top: 4px;
}

.ifa-end {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.ifa-end > span:last-child {
  color: var(--scs-ink);
}

.ifa-icon {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 1px;
  border-radius: 4px;
  background: var(--scs-paper);
  object-fit: contain;
}

.ifa-icon.blank {
  border: 1px dashed var(--scs-line-strong);
  background: transparent;
}

.ifa-arrow {
  color: var(--scs-ink-3);
}

.ifa-chip .ifa-type {
  height: 16px;
  padding: 0 4px;
}

.ifa-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 4px 2px var(--scs-space-2);
  border: 1px solid var(--scs-line-strong);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface-2);
  color: var(--scs-ink-2);
  font: inherit;
  font-size: var(--scs-text-s);
  cursor: pointer;
}

.ifa-more::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0 4px 3px 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.ifa-more:hover:not(:disabled),
.ifa-more:focus-visible,
.ifa-more[aria-expanded='true'] {
  border-color: var(--scs-accent);
  color: var(--scs-ink);
}

.ifa-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--scs-surface-3);
  color: var(--scs-ink-2);
  font-size: var(--scs-text-xs);
  font-weight: 600;
  text-align: center;
}

.ifa-unused-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ifa-unused .ifa-route {
  font-size: var(--scs-text-xs);
}

.ifa-unused .ifa-icon {
  width: 16px;
  height: 16px;
}

/* The choice list behind "Weitere wählen …" */
.ifa-picker {
  position: fixed;
  inset: auto;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--scs-line-strong);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  color: var(--scs-ink);
  box-shadow: var(--scs-shadow-pop);
  font-size: var(--scs-text-s);
}

.ifa-picker:not(:popover-open) {
  display: none;
}

.ifa-picker-head {
  flex: none;
  padding: 10px 12px 0;
  overflow: hidden;
  color: var(--scs-ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ifa-picker-head strong {
  color: var(--scs-ink);
  font-family: var(--scs-font-mono);
}

.ifa-picker-head strong + span {
  color: var(--scs-ink);
}

html:root .ifa-picker-search {
  flex: none;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 8px 12px 6px;
}

.ifa-picker-list {
  flex: 1 1 auto;
  padding: 0 0 6px;
  overflow: auto;
  overscroll-behavior: contain;
}

.ifa-group {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 4px;
  border-top: 1px solid var(--scs-line);
  background: var(--scs-surface);
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
  font-weight: 600;
}

.ifa-group:first-child {
  border-top: 0;
}

.ifa-group[hidden],
.ifa-option[hidden] {
  display: none;
}

.ifa-option {
  display: grid;
  gap: 4px;
  padding: 8px 12px 8px 15px;
  border-left: 3px solid transparent;
  cursor: pointer;
}

.ifa-option + .ifa-option {
  border-top: 1px solid var(--scs-line);
}

.ifa-option.active {
  border-left-color: var(--scs-accent);
  background: var(--scs-row-hover);
}

.ifa-option-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ifa-option-top strong {
  flex: none;
  font-family: var(--scs-font-mono);
}

.ifa-option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ifa-option-desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ifa-picker-empty {
  margin: 4px 12px 12px;
  color: var(--scs-ink-3);
}

@media (prefers-reduced-motion: no-preference) {
  .ifa-picker:popover-open {
    animation: ifa-picker-in 120ms ease-out;
  }
}

@keyframes ifa-picker-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}