/* Class diagram members, relationships and connection controls. */
.visibility{display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; border: 0px; border-radius: 4px; padding: 0px; background: transparent; color: var(--muted);}
.visibility{font-family: "Google Sans Code", monospace; font-size: 16px;}
.visibility:hover{background: var(--surface); color: var(--muted);}
.methods-divider{height: 1px; background: var(--border); margin: 8px 0px;}
.method-row{margin-bottom: 5px;}
.method-row .member-row{margin-bottom: 0px;}
.parameters-row{display: flex; align-items: center; gap: 5px; color: var(--subtle); padding: 0px 5px;}
.parameters-row span{font-size: 11px; font-family: "Google Sans Code", monospace;}
.parameters-row input{width: 100%; height: 20px; padding: 2px 0px; font-family: "Google Sans Code", monospace; font-size: 11px; color: var(--muted); border: 0px; background: transparent;}
.member-add-button.method-add-button{border-color: var(--accent-border); color: var(--accent);}
.member-add-button.method-add-button:hover{background: var(--accent-soft); border-color: var(--accent-border);}
.node-section{padding: 8px 0px;}
.node-section > .node-member{padding: 0px 15px;}
.node-section > .empty-member{padding: 6px 15px;}
.node-section + .node-section{border-top: 1px solid var(--border);}
.node-member .sign{font-size: 13px; width: 10px; flex-shrink: 0; color: var(--subtle);}
.node-member .sign.public{color: var(--accent);}
.node-member .param{color: var(--muted); font-size: 11px;}
.port{position: absolute; right: -5px; top: calc(50% - 4px); width: 9px; height: 9px; background: var(--surface-raised); border: 2px solid var(--class-color); border-radius: 50%; opacity: 0; cursor: crosshair; z-index: 2; padding: 0px;}
.node:hover .port,.node.selected .port{opacity: 1;}
.relation-multiplicity{font: 10px "Google Sans", sans-serif; fill: var(--muted); paint-order: stroke; stroke: var(--canvas); stroke-width: 4;}
.relationship-note{font-size: 11px; color: var(--muted); background: var(--surface); border-radius: 6px; line-height: 1.7; padding: 10px 12px;}
@media (max-width: 760px){
.parameters-row input{font-size: 10px;}
}
.member-add-button.method-add-button{color: var(--accent); border-color: var(--accent-border);}
.member-add-button.method-add-button:hover{background: var(--accent-soft); border-color: var(--accent);}
.class-connection-preview{fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5, 4; pointer-events: none;}
.class-relation.active .relation-line{stroke: var(--accent); stroke-width: 2;}
.class-relation.active:not(.class-inheritance) .relation-line{stroke-dasharray: 7, 4;}
#class-connection-menu{position: fixed; z-index: 50; width: 360px; max-width: calc(-16px + 100vw); max-height: calc(100dvh - 16px); overflow: auto; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 30px rgb(var(--shadow) / .15);}
.class-connection-endpoints{display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border);}
.class-connection-endpoint{flex: 1 1 0%; min-width: 0px; padding: 8px; background: var(--surface); border-radius: 5px; font-size: 12px; color: var(--muted);}
.class-connection-endpoint span{display: flex; align-items: center; gap: 6px; margin-bottom: 5px;}
.class-connection-endpoint i{width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;}
.connection-class-name{display: block; color: var(--ink); font-size: 12px; font-weight: 500; overflow-wrap: anywhere;}
.class-connection-fields{padding: 0px 14px;}
.class-connection-fields .dialog-field{margin: 10px 0px;}
.class-connection-fields .dialog-field input,.class-connection-fields .dialog-field select{padding: 7px;}
.class-connection-actions{display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface);}
.class-connection-actions [data-delete-connection]{margin-left: auto;}
.class-multiplicity{display: flex; gap: 7px;}
.class-multiplicity button{padding: 5px 10px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; color: var(--muted);}
.class-multiplicity button[aria-pressed="true"]{background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border);}
.node.connection-target{outline: 2px solid var(--class-color); outline-offset: 3px;}
.port:focus-visible{opacity: 1;}