/* ---------------------------------------------------------------------------------------
            main
--------------------------------------------------------------------------------------- */
.viewport {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: var(--bg-2); */
}

.content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    z-index: 10;
}

/* full-screen, fixed; PolkaDots.svelte sets the dot image, size and position from the camera */
.polka-dots {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -10;
}

/* world origin (0, 0); the page translates and scales it around this corner, see src/lib/camera.ts */
.world {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    text-align: center;
    color: #333;
    font-family: Arial, sans-serif;
    z-index: 20;
}

.node {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    padding: 1em;
    background-color: var(--bg-transparent);
    color: var(--col);
    border: 1px solid var(--col-border);
    box-shadow: var(--box-shadow-small);
    border-radius: 0.6em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    user-select: none;
}

.node:hover {
    box-shadow: 0 2px 4px var(--col-transparent-1);
}

/* a node with a colour (GraphNode sets --node-col and --node-fill, see $lib/graph/color.ts):
   border in the colour itself, fill a dim version of it; defined before .node.selected so
   the orange selection border still shows on a coloured node */
.node.colored {
    border-color: var(--node-col);
    background-color: var(--node-fill);
}



/* ---------------------------------------------------------------------------------------
new
--------------------------------------------------------------------------------------- */
/* port columns on the node's left (inputs) and right (outputs) edge, centered vertically;
   several ports stack instead of overlapping */
.node .inputs,
.node .outputs {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.node .inputs {
    left: -6px;
}

.node .outputs {
    right: -6px;
}

/* top-to-bottom graphs: inputs along the top edge, outputs along the bottom edge */
.world.top-to-bottom .node .inputs,
.world.top-to-bottom .node .outputs {
    left: 0;
    right: 0;
    width: auto;
    height: 10px;
    flex-direction: row;
    justify-content: center;
}

.world.top-to-bottom .node .inputs {
    top: -6px;
    bottom: auto;
}

.world.top-to-bottom .node .outputs {
    top: auto;
    bottom: -6px;
}

.node-input,
.node-output {
    width: 10px;
    height: 10px;
    background-color: var(--col);
    border-radius: 15%;
    cursor: crosshair;
}

.node-input:hover,
.node-output:hover {
    background-color: var(--col-selected);
}

/* keyboard key caps (Kbd.svelte, and any <kbd> on the site) */
kbd {
    display: inline-block;
    min-width: 1.2em;
    padding: 0.05em 0.4em;
    font-family: inherit;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-transform: none;
    color: var(--col);
    background: var(--bg);
    border: 1px solid var(--col-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    vertical-align: middle;
}

/* selection: Blender-like orange */
:root {
    --col-selected: #ffa033;
    /* links: the text colour mixed into the background (looks like 60 % opacity, but solid,
       so an arrowhead covers its line instead of letting it show through) */
    --col-link: color-mix(in srgb, var(--col) 60%, var(--bg));
}

/* the theme's text colour may carry a little transparency (dark: #ebf4f1ee): force the link
   colour fully opaque where the browser can (relative colour syntax) */
@supports (color: rgb(from red r g b / 1)) {
    :root {
        --col-link: rgb(from color-mix(in srgb, var(--col) 60%, var(--bg)) r g b / 1);
    }
}

.node.selected {
    border-color: var(--col-selected);
    box-shadow: 0 0 0 1px var(--col-selected), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* group (node type "group"): a frame behind other nodes, its name in a gap of the top edge
   (fieldset + legend). The node box itself is invisible and lets the mouse through; only the
   name takes it (select, drag, double-click to rename). Fixed size for now. */
.node.group,
.node.group.selected,
.node.group:hover {
    width: 20em;
    height: 12em;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    pointer-events: none;
}

.group-frame {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    border: 2px solid var(--col-link);
    border-radius: 4px;
}

.group-title {
    color: var(--col-link); /* the name takes the frame's colour (below: coloured, selected) */
    margin: 0 auto; /* centred on the top edge */
    padding: 0 0.6em;
    font-size: 1.2em;
    white-space: nowrap;
    max-width: calc(100% - 2em);
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
    cursor: move;
}

.group-title .node-title {
    cursor: inherit;
}

.node.group.colored .group-frame {
    border-color: var(--node-col);
    background: color-mix(in srgb, var(--node-col) 6%, transparent);
}

.node.group.colored .group-title {
    color: var(--node-col);
}

.node.group.selected .group-frame {
    border-color: var(--col-selected);
}

.node.group.selected .group-title {
    color: var(--col-selected);
}

/* a group's resize handle: a small corner mark at the bottom right, the only part besides the
   name that takes the mouse */
.group-resize {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    pointer-events: auto;
    cursor: nwse-resize;
    border-right: 3px solid var(--col-link);
    border-bottom: 3px solid var(--col-link);
    border-radius: 0 0 4px 0;
    opacity: 0.6;
}

.group-resize:hover,
.node.group.selected .group-resize {
    opacity: 1;
}

.node.group.colored .group-resize {
    border-color: var(--node-col);
}

.node.group.selected .group-resize {
    border-color: var(--col-selected);
}

.node-title {
    cursor: text;
}

/* node shapes (content `shape`, see NODE_SHAPES in $lib/graph/node-types.ts): a circle node is
   round with its name in the middle, its ports on the left and right (top / bottom in
   top-to-bottom graphs); a circle group has a round frame (groups.ts makes its rect a square) */
.node.shape-circle:not(.group) {
    /* as wide as the name plus a little padding (not the square's 10em and 1em padding),
       at least 3.5em, at most 9em (longer names wrap); as tall as wide */
    width: max-content;
    min-width: 3.5em;
    max-width: 9em;
    height: auto;
    aspect-ratio: 1;
    padding: 0.5em;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
}

.node.group.shape-circle .group-frame {
    border-radius: 50%;
}

/* UML class (node type "uml-class"): class name on top, then the attributes and the methods
   compartments, each a list of member lines (GraphNode, parsed by $lib/graph/uml.ts) */
.node.uml {
    width: auto;
    min-width: 10em;
    max-width: 28em;
    padding: 0;
    text-align: left;
    border-radius: 3px; /* UML classes are drawn as rectangles: barely rounded */
}

.node.uml .node-title,
.node.uml .node-title-input {
    padding: 0.6em 1em;
    text-align: center;
    font-weight: 600;
}

.uml-compartment {
    list-style: none;
    margin: 0;
    padding: 0.35em 0.9em;
    min-height: 0.8em; /* an empty compartment still shows as a band */
    border-top: 1px solid var(--col-border);
    font-family: monospace;
    font-size: 0.85em;
}

.node.uml.colored .uml-compartment {
    border-top-color: var(--node-col);
}

.uml-line {
    white-space: pre;
    line-height: 1.5;
}

/* syntax highlighting of member lines */
.uml-visibility { color: #d6409f; font-weight: 600; }
.uml-modifier { color: #8e4ec6; }
.uml-type { color: #2a9fd6; }
.uml-default { color: #46a758; }
.uml-param { font-style: italic; }
.uml-punct { opacity: 0.6; }

/* format check: a line that doesn't follow the notation (its error is the tooltip) */
.uml-line.invalid {
    text-decoration: underline wavy #d9534f;
    text-decoration-skip-ink: none;
    text-underline-offset: 3px;
}

.node-title-input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    text-align: center;
    color: var(--col);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--col-selected);
    outline: none;
}

/* links: SVG at the world origin, drawn in the world layer's coordinates */
.links-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: visible;
    pointer-events: none;
}

.link {
    fill: none;
    stroke: var(--col-link);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.link.selected {
    stroke: var(--col-selected);
}

.link-preview {
    stroke-dasharray: 6 4;
}

/* invisible wide stroke so a thin link is easy to click */
.link-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 12px;
    vector-effect: non-scaling-stroke;
    pointer-events: stroke;
    cursor: pointer;
}

/* arrowheads (SVG markers on .link paths) and mid-link direction chevrons */
.link-arrow {
    fill: var(--col-link);
}

.link-arrow.selected {
    fill: var(--col-selected);
}

.link-chevrons path {
    fill: none;
    stroke: var(--col-link);
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.link-chevrons.selected path {
    stroke: var(--col-selected);
}

/* link name in the middle of the link; the stroke in the background colour keeps it
   readable where it crosses other lines */
.link-label {
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-anchor: middle;
    dominant-baseline: middle;
    fill: var(--col);
    stroke: var(--bg);
    stroke-width: 4px;
    paint-order: stroke;
    pointer-events: none;
    user-select: none;
}

.link-label.selected {
    fill: var(--col-selected);
}

.link-name-input {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 10em;
    font: 11px Arial, sans-serif;
    text-align: center;
    color: var(--col);
    background: var(--bg);
    border: 1px solid var(--col-selected);
    border-radius: 3px;
    outline: none;
    z-index: 30;
}

/* grab area on a selected link's corner (manhattan) or lane (links going around their nodes) */
.link-bend {
    fill: none;
    stroke: var(--col-selected);
    stroke-opacity: 0.25;
    stroke-width: 10px;
    vector-effect: non-scaling-stroke;
    pointer-events: stroke;
    cursor: ns-resize;
}

.link-bend.vertical {
    cursor: ew-resize;
}

.content-wrapper.linking {
    cursor: crosshair;
}

.connections {
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 300;
}

/* Styling for the dot */
.indicator-io {
    width: 10px;
    height: 10px;
    background-color: var(--col-transparent-1);
    border-radius: 50%;
    position: absolute;
}

.add-input {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);    
}

.add-output {
    top: 50%;
    right: -5px;
    transform: translateY(-50%);    
}



/* 
.hover-dot:nth-child(2) {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
} 

.hover-dot:nth-child(3) {
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
} 

.hover-dot:nth-child(4) {
    left: 50%;
    top: -5px;
    transform: translateX(-50%);
} 
.hover-dot:nth-child(5) {
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
} 

.node:hover .hover-dot {
    display: block;
} */