/* Identity marks in the element table (model_identity.js).
   6.6.x: the marks are small seals pinned to the corners of the system icon, so they never
   change the row height, never leave the cell and sit at the same spot in every row:
   link seal bottom right (same model element in other diagrams), ×n seal top right (same
   catalog entry repeated in this diagram). A ring in the cell colour cuts them out of the
   icon tile. Without an icon they stand inline in front of the system choice. */
.grid .icon-marked {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.grid .icon-marked > .identity-marks {
  position: absolute;
  inset: -5px -7px -5px auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0;
  pointer-events: none;
  z-index: 1;
}
/* 6.8: the document seal sits top left of the icon, apart from the link (bottom right) and ×n (top right) seals. */
.grid .icon-marked > .identity-marks-left {
  inset: -5px auto auto 1px;
}
.grid .identity-marks {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  margin-right: 4px;
}
.grid .identity-mark {
  --identity-ring: var(--scs-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border: 0;
  border-radius: 7px;
  background: var(--scs-surface-3);
  color: var(--scs-ink-2);
  box-shadow: 0 0 0 2px var(--identity-ring);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.grid tr:nth-child(even) .identity-mark {
  --identity-ring: var(--scs-surface-2);
}
.grid .identity-mark .scs-icon {
  width: 9px;
  height: 9px;
  stroke-width: 2.6;
}
.grid .identity-shared {
  padding: 0;
  background: var(--teal);
  color: #fff;
}
.grid .identity-shared:has(span) {
  padding: 0 4px 0 3px;
}
.grid .identity-mark:hover {
  filter: brightness(1.12);
}
.grid .identity-mark:focus-visible {
  outline: 2px solid var(--scs-focus);
  outline-offset: 2px;
}
.identity-diagrams {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.identity-diagrams button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  white-space: normal;
}
.identity-diagrams small {
  color: var(--scs-ink-3);
}

/* Document seal (model documents use the system or the interface). Teal stays reserved for
   "same model element"; documents are supporting information and read as quietly as ×n. */
.grid .identity-document {
  padding: 0;
  background: var(--scs-surface-3);
  color: var(--scs-ink-2);
}
.grid .identity-document:has(span) {
  padding: 0 4px 0 3px;
}
/* Connection table: the marks stand after the label text. */
.grid .connection-usage-marks {
  margin: 0 0 0 4px;
}