@charset "UTF-8";

:root {
    --wire-color-lightness: 50%;
    --wire-color-chroma: 0.25;
    --wire-high-factor: 1.25;
    --wire-low-factor: 0.55;
    --wire-null-factor: 0.4;
    --wire-null-alpha: 0.75;
    --wire-high-alpha: 0.75;

    /* base colors */
    --wire-colorD: oklch(var(--wire-color-lightness) 0 0); /* disconnected */
    --wire-colorT: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 105); /* manual toggle */
    --wire-colorE1: oklch(80% 0.5 45); /* conflict/error */
    --wire-colorE2: oklch(50% 0.5 90); /* conflict/error */
    --wire-color0: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 180);
    --wire-color1: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 145);
    --wire-color2: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 115);
    --wire-color3: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 90 );
    --wire-color4: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 50 );
    --wire-color5: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 350);
    --wire-color6: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 320);
    --wire-color7: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 290);
    --wire-color8: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 260);
    --wire-color9: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 215);

    /* high state */
    --wire-colorD-high: oklch(from var(--wire-colorD) calc(l * var(--wire-high-factor) * 0.8) c h);
    --wire-colorT-high: oklch(from var(--wire-colorT) calc(l * var(--wire-high-factor) * 1.3) c h);
    --wire-color0-high: oklch(from var(--wire-color0) calc(l * var(--wire-high-factor)) c h);
    --wire-color1-high: oklch(from var(--wire-color1) calc(l * var(--wire-high-factor)) c h);
    --wire-color2-high: oklch(from var(--wire-color2) calc(l * var(--wire-high-factor)) c h);
    --wire-color3-high: oklch(from var(--wire-color3) calc(l * var(--wire-high-factor)) c h);
    --wire-color4-high: oklch(from var(--wire-color4) calc(l * var(--wire-high-factor)) c h);
    --wire-color5-high: oklch(from var(--wire-color5) calc(l * var(--wire-high-factor)) c h);
    --wire-color6-high: oklch(from var(--wire-color6) calc(l * var(--wire-high-factor)) c h);
    --wire-color7-high: oklch(from var(--wire-color7) calc(l * var(--wire-high-factor)) c h);
    --wire-color8-high: oklch(from var(--wire-color8) calc(l * var(--wire-high-factor)) c h);
    --wire-color9-high: oklch(from var(--wire-color9) calc(l * var(--wire-high-factor)) c h);

    /* high state glow effect */
    --wire-colorD-high-alpha: oklch(from var(--wire-colorD) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-colorT-high-alpha: oklch(from var(--wire-colorT) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-colorE1-alpha: oklch(from var(--wire-colorE1) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-colorE2-alpha: oklch(from var(--wire-colorE2) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color0-high-alpha: oklch(from var(--wire-color0) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color1-high-alpha: oklch(from var(--wire-color1) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color2-high-alpha: oklch(from var(--wire-color2) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color3-high-alpha: oklch(from var(--wire-color3) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color4-high-alpha: oklch(from var(--wire-color4) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color5-high-alpha: oklch(from var(--wire-color5) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color6-high-alpha: oklch(from var(--wire-color6) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color7-high-alpha: oklch(from var(--wire-color7) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color8-high-alpha: oklch(from var(--wire-color8) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color9-high-alpha: oklch(from var(--wire-color9) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));

    /* low state */
    --wire-colorD-low: oklch(from var(--wire-colorD) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-colorT-low: oklch(from var(--wire-colorT) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color0-low: oklch(from var(--wire-color0) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color1-low: oklch(from var(--wire-color1) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color2-low: oklch(from var(--wire-color2) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color3-low: oklch(from var(--wire-color3) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color4-low: oklch(from var(--wire-color4) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color5-low: oklch(from var(--wire-color5) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color6-low: oklch(from var(--wire-color6) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color7-low: oklch(from var(--wire-color7) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color8-low: oklch(from var(--wire-color8) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color9-low: oklch(from var(--wire-color9) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);

    /* null state (high impedance) */
    --wire-colorD-null: oklch(from var(--wire-colorD) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-colorT-null: oklch(from var(--wire-colorT) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color0-null: oklch(from var(--wire-color0) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color1-null: oklch(from var(--wire-color1) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color2-null: oklch(from var(--wire-color2) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color3-null: oklch(from var(--wire-color3) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color4-null: oklch(from var(--wire-color4) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color5-null: oklch(from var(--wire-color5) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color6-null: oklch(from var(--wire-color6) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color7-null: oklch(from var(--wire-color7) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color8-null: oklch(from var(--wire-color8) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color9-null: oklch(from var(--wire-color9) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));

    --main-bg-color: #000;
    --grid-bg-color: #111;
    --overlay-bg-color: #00000088;
    --overlay-border-color: #4444448a;
    --header-bg-color: #1a1a1a;
    --header-border-color: #222;
    --button-hover-factor: 1.2;
    --button-bg-color: #999;
    --button-border-color: #666;
    --button-bg-hover-color: oklch(from var(--button-bg-color) calc(l * var(--button-hover-factor)) c h);
    --button-border-hover-color: oklch(from var(--button-border-color) calc(l * var(--button-hover-factor)) c h);
    --text-color: #fff;
    --muted-text-color: #bbb;
    --disabled-text-color: #777;
    --inverted-text-color: #000;
    --error-text-color: #f00;
    --warning-text-color: #f80;
    --selection-hue: 200deg;
    --selection-brightness: 0.8;
    --font-size-normal: 1em;
    --font-size-small: 0.8em;
    --font-size-large: 1.4em;
    --font-size-double: 2em;
    --component-rotate-duration: 0.15s;
    --component-color-transition-duration: 0.15s;
    --component-delete-duration: 0.25s;
    --component-body-color: #444;
    --component-border-color: #222;
    --component-body-hover-color: #555;
    --component-border-hover-color: #333;
    --component-preview-color: #444;
    --component-port-body-color: #444;
    --component-port-border-color: #6d6d6d;
}

/*
 * Flex layout
 */
html, body {
    height: 100%;
    margin: 0;
}
body.dragging * {
    cursor: grabbing !important;
}
#flex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#header {
    flex: 0 1 auto;
    padding: 5px;
    background-color: var(--header-bg-color);
    border-bottom: 1px solid var(--header-border-color);
    white-space: nowrap;
}
#content {
    flex: 1 1 auto;
}

/*
 * General UI/layout
 */
html {
    background-color: var(--main-bg-color);
    color: var(--text-color);
    font-family: Roboto, sans-serif;
    font-size: 14px;
    user-select: none;
}
#header h1 {
    display: inline-block;
    font-variant: small-caps;
    text-decoration: underline;
    text-decoration-color: white;
    margin-top: 0;
    margin-bottom: 5px;
    margin-left: 10px;
    transform: skew(-15deg, 0deg);
    transition: text-shadow 1s, transform 1s, color 1s, text-decoration-color 1s;
    text-shadow:
        2px 2px 4px rgba(255, 0, 0, 0.822),
        -4px -4px 8px rgba(0, 174, 255, 0.747),
        4px 4px 8px rgba(247, 0, 255, 0.801);
}
#header h1[data-c="1"] {
    text-shadow:
        rgba(0, 255, 13, 0.76) -2px -2px 10px,
        rgba(255, 72, 0, 0.712) 2px 2px 10px;
}
#header h1[data-c="2"] {
    text-shadow:
        -1px -1px 0 hsla(0, 0%, 75%, 0.7),
        -2px -2px 0 hsla(0, 0%, 70%, 0.6),
        -3px -3px 0 hsla(0, 0%, 65%, 0.5),
        -4px -4px 0 hsla(0, 0%, 60%, 0.4),
        -5px -5px 0 hsla(0, 0%, 55%, 0.3),
        -5px -5px 20px rgba(127,127,255,1.0),
        0px 0px 15px rgba(127,127,255,0.6),
        -5px -5px 3px rgba(127,127,255,0.9);
}
#header h1[data-c="3"] {
    color: rgba(255, 255, 255, 0.75);
    transform: skew(15deg, 0deg);
    text-shadow:
        0 -2px 4px #FFF,
        0 -4px 10px rgb(118, 250, 243),
        0 0px 20px #2ac3ff,
        0 8px 40px rgb(0, 89, 255);
}
#header h1[data-c="4"] {
    color: rgba(127, 127, 184, 0.75);
    text-shadow:
        1px 1px 3px #ddf,
        -5px -5px 10px #00f;
    transform: none;
    text-decoration-color: rgba(0, 0, 255, 0.63);
}
#header h1[data-c="5"] {
    color: rgba(255, 255, 255, 0.75);
    text-shadow:
        0 -1px 4px #FFF,
        0 -2px 10px #ff0,
        0 -10px 20px #ff8000,
        0 -18px 40px #F00;
}
#toolbar {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}
#toolbar .example-button {
    background: radial-gradient(circle, rgb(187 187 187) 1%, rgb(201 113 130) 100%);
    opacity: 1;
    transition: opacity 0.5s;
}
#toolbar .example-button.example-button-fade {
    opacity: 0;
}
.error {
    color: var(--error-text-color);
}
.warning {
    color: var(--warning-text-color);
}

/*
 * Focus hint, see main.js.
 */
#focus-hint {
    pointer-events: none;
    display: none;
    position: absolute;
    z-index: 99;
    top: 75px;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    padding: 10px;
    text-align: center;
    font-size: var(--font-size-large);
    border: 3px solid rgba(255, 0, 0, 0.3);
    background: rgba(128, 0, 0, 0.3);
    opacity: 0.0;
    border-radius: 10px;
    transition: opacity 0.5s;
}
body.no-focus #focus-hint, body.focus-changing #focus-hint {
    display: block;
}
body.no-focus #focus-hint:has(+div.grid:hover) {
    opacity: 0.65;
}

/*
 * Status
 */
.app-status {
    z-index: 20;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px;
    background-color: var(--overlay-bg-color);
    border: 1px solid var(--overlay-border-color);
    border-radius: 3px;
    opacity: 1;
    transition: opacity 0.5s;
}
.app-status.app-status-faded {
    opacity: 0;
}
.app-status i {
    color: var(--muted-text-color);
    font-weight: bold;
}
.app-status i::before {
    content: '»';
    font-weight: normal;
    vertical-align: text-bottom;
}
.app-status i::after {
    content: '«';
    font-weight: normal;
    vertical-align: text-bottom;
}
.app-status u {
    text-decoration: none;
    color: var(--muted-text-color);
    opacity: 0.5;
}

/*
 * Dialog window
 */
.dialog-blackout {
    z-index: 256;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--overlay-bg-color);
    overflow: hidden;
}
.dialog-container {
    z-index: 257;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    background-color: var(--component-body-color);
    border: 2px solid var(--component-border-color);
}
.dialog-container .dialog-title {
    border: 2px solid var(--button-border-color);
    background-color: var(--button-bg-color);
    padding: 4px;
    color: black;
    font-weight: bold;
}
.dialog-container .dialog-content {
    padding: 10px;
}
.dialog-container .dialog-row-label {
    padding: 0 10px 0 0;
    line-height: 2;
}
.dialog-container.info-dialog .dialog-row-label, .dialog-container.confirm-dialog .dialog-row-label {
    line-height: 1.2;
    color: #ddd;
    max-width: none;
}
.dialog-row-label.dialog-row-full {
    padding: 0;
    line-height: 1.2;
    color: #ddd;
    max-width: 400px;
}
.dialog-row-label.dialog-row-separator {
    padding: 10px 0 0 0;
    line-height: 1.2;
    color: #ddd;
    max-width: 400px;
}
.dialog-container .dialog-row-mask {
    text-align: right;
}
.dialog-container .dialog-row-mask input, .dialog-container .dialog-row-mask select {
    outline: 1px solid var(--component-border-color);
    background-color: var(--component-body-color);
    border: none;
    box-sizing: border-box;
    width: 200px;
    padding: 4px;
    color: var(--text-color);
    border-radius: 2px;
    font-size: var(--font-size-normal);
}
.dialog-container .dialog-row-mask input.dialog-error, .dialog-container .dialog-row-mask select.dialog-error {
    outline-color: var(--error-text-color);
}
.dialog-container .dialog-row-mask input::selection {
    background: var(--button-bg-color);
    color: black;
}
.dialog-container .dialog-row-mask select {
    appearance: base-select;
}
.dialog-container .dialog-row-mask select option {
    color: var(--text-color);
    padding-left: 0;
    margin-left: 0;
}
.dialog-container .dialog-button-row {
    margin-top: 10px;
    text-align: right;
}
.dialog-container .dialog-button {
    display: inline-block;
    padding: 4px;
    margin-left: 4px;
    min-width: 80px;
    text-align: center;
}
.dialog-container .dialog-cancel, .dialog-container .dialog-confirm {
    text-shadow: 1px 1px 2px #555;
    border: 2px solid var(--button-border-color);
    background-color: var(--button-bg-color);
    color: var(--inverted-text-color);
    transition: border-color var(--component-color-transition-duration), background-color var(--component-color-transition-duration);
}
.dialog-container .dialog-cancel:hover, .dialog-container .dialog-confirm:hover {
    border-color: var(--button-border-hover-color);
    background-color: var(--button-bg-hover-color);
}

/*
 * Circuit edit dialog preview
 */
.circuit-preview {
    z-index: 257;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
}
div.circuit-preview > div.grid {
    background-image: none !important;
    background-color: transparent !important;
}
div.circuit-preview > div.grid > div.grid-info {
    display: none;
}

/*
 * Toolbar UI element
 */
.toolbar > .toolbar-button {
    display: inline-block;
    cursor: default;
    transition: border-color var(--component-color-transition-duration);
    border-radius: 4px;
    color: var(--text-color);;
    text-align: center;
    box-sizing: border-box;
    margin: 2px;
    text-shadow: 1px 1px 2px black;
    min-width: 50px;
    line-height: 2;
    padding: 0 5px;
}
/* Component button */
.toolbar > .toolbar-component-button {
    cursor: grab;
    background-color: var(--component-body-color);
    border: 2px solid var(--component-border-color);
}
.toolbar > .toolbar-component-button:hover {
    background-color: var(--component-body-hover-color);
    border-color: var(--component-border-hover-color);
}
/* Action button */
.toolbar > .toolbar-action-button {
    text-shadow: 1px 1px 2px #555;
    border: 2px solid var(--button-border-color);
    background-color: var(--button-bg-color);
    color: var(--inverted-text-color);
}
.toolbar > .toolbar-action-button:hover {
    border-color: var(--button-border-hover-color);
    background-color: var(--button-bg-hover-color);
}
/* Toggle button */
.toolbar > .toolbar-toggle-button {
    border: 2px solid var(--button-border-color);
    text-shadow: 1px 1px 2px #555;
    background-color: var(--button-bg-color);
    color: var(--inverted-text-color);
}
.toolbar > .toolbar-toggle-button:hover, .toolbar > .toolbar-toggle-button.toolbar-menu-button.toolbar-toggle-button-on {
    border-color: var(--button-border-hover-color);
    background-color: var(--button-bg-hover-color);
}
.toolbar > .toolbar-toggle-button-on {
    text-shadow: 1px 1px 2px #222;
}
.toolbar > .toolbar-toggle-button-on:before {
    content: '☑ ';
}
.toolbar > .toolbar-toggle-button-off {
    background-color: var(--button-bg-color);
}
.toolbar > .toolbar-toggle-button-off:before {
    content: '☐ ';
}
/* Menu button */
.toolbar > .toolbar-menu-button.toolbar-menu-root {
    padding: 0 10px;
    text-shadow: 1px 1px 2px #555;
}
.toolbar > .toolbar-menu-button .toolbar-menu-button-disabled {
    color: var(--disabled-text-color);
}
.toolbar > .toolbar-toggle-button-on.toolbar-menu-button:before {
    content: '';
}
.toolbar > .toolbar-toggle-button-off.toolbar-menu-button:before {
    content: '';
}
.toolbar > .toolbar-menu-button > .toolbar-menu-container.toolbar-menu-root {
    position: absolute;
    z-index: 255;
    margin-top: 1px;
    margin-left: -12px; /* compensate paddings on buttons and inner toolbar */
    border: 2px solid var(--button-border-color);
    background-color: var(--button-bg-color);
    border-radius: 0 0 3px 3px;
    min-width: 150px;
}
.toolbar > .toolbar-menu-button > .toolbar-menu-container.toolbar-menu-root > .toolbar {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    position: relative;
    scrollbar-color: var(--button-border-color) var(--button-bg-color);
    scrollbar-width: thin;
}
.toolbar > .toolbar-menu-button > .toolbar-menu-container > .toolbar > .toolbar-button {
    margin: 0;
    border: none;
    border-radius: 0;
}
.toolbar > .toolbar-toggle-button-off > .toolbar-menu-container {
    display: none;
}
.toolbar > .toolbar-toggle-button-on > .toolbar-menu-container {
    display: block;
}
.toolbar > .toolbar-toggle-button-on > .toolbar-menu-container > .toolbar > .toolbar-button {
    display: block;
    text-align: left;
}
.toolbar > .toolbar-menu-button > .toolbar-menu-container > .toolbar > .toolbar-separator {
    margin: 1px 0;
    border: 1px solid var(--button-border-color);
    border-radius: 0;
}
.toolbar .toolbar-button-label {
    display: inline-block;
}
/* Menu categories */
.toolbar > .toolbar-button.toolbar-menu-category {
    padding: 0;
}
.toolbar-menu-category.toolbar-menu-button > .toolbar-button-label {
    display: block;
    padding: 0 5px;
}
.toolbar-menu-category.toolbar-menu-button > .toolbar-button-label:after {
    content: '▼';
    width: 25px;
    text-align: right;
    float: right;
}
.toolbar-menu-category.toolbar-menu-button.toolbar-toggle-button-on > .toolbar-button-label:after {
    content: '▲';
}
.toolbar > .toolbar-menu-button > .toolbar-menu-container.toolbar-menu-category {
    background-color: var(--button-bg-color);
}
/* Circuit select/place */
.toolbar > .toolbar-menu-button > .toolbar-menu-container > .toolbar > .toolbar-circuit-select {
    margin-right: 30px;
}
.toolbar > .toolbar-menu-button > .toolbar-menu-container > .toolbar > .toolbar-circuit-place {
    border: 2px solid var(--button-border-color);
    border-radius: 3px;
    font-size: var(--font-size-large);
    line-height: 1.2;
    margin: 0;
    min-width: 30px;
    width: 30px;
    position: absolute;
    right: 0;
}
/* Use italic tag as quotes */
.toolbar > .toolbar-button i::before {
    content: '»';
    font-weight: normal;
}
.toolbar > .toolbar-button i::after {
    content: '«';
    font-weight: normal;
}

/*
 * Grid
 */
.grid {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, #888 1px, var(--grid-bg-color) 1px);
}
.grid[data-zoom] {
    --zoom-factor: attr(data-zoom type(<number>));
}
.grid.grid-zoom-below-100 {
    background-image: radial-gradient(circle, #333 1px, var(--grid-bg-color) 1px);
}
.grid.grid-zoom-50 {
    background-image: radial-gradient(circle, #222 1px, var(--grid-bg-color) 1px);
}
.grid.grid-zoom-100 {
    background-image: radial-gradient(circle, #444 1px, var(--grid-bg-color) 1px);
}
.grid.grid-zoom-175 {
    background-image: radial-gradient(circle, #aaa 1px, var(--grid-bg-color) 1px);
}
.grid-info {
    z-index: 20;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    margin: 10px;
    background-color: var(--overlay-bg-color);
    pointer-events: none;
    text-align: right;
    min-width: 140px;
}
.grid-info .info-section {
    opacity: 0.6;
    font-size: var(--font-size-normal);
    font-weight: bold;
}
.grid-info .info-details + .info-section {
    margin-top: 8px;
}
.grid-info .info-title {
    opacity: 0.3;
    font-size: var(--font-size-double);
    font-weight: bold;
}
.grid-info .info-details {
    opacity: 0.3;
    font-size: var(--font-size-normal);
    font-weight: bold;
}
.grid-selection {
    position: absolute;
    z-index: 19;
    border: 1px dotted white;
    background-color: transparent;
    display: block;
    pointer-events: none;
}
.grid-selection.hidden {
    display: none;
}
.grid-selection.grid-selection-trim {
    border-color: #ff8c00;
    background-color: rgba(255, 140, 0, 0.08);
}
.wire-trim-overlay {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    background-color: #ff6600;
    opacity: 0.8;
}

/*
 * Base component and text
 */
.component, .text {
    z-index: 11;
    position: absolute;
    background-color: transparent;
    cursor: default;
    box-sizing: border-box;
    opacity: 1;
}
.component {
    pointer-events: none;
}
.component.selected, .text.selected {
    outline: 1px dotted white;
    outline-offset: -3px;
    border-radius: 6px;
    filter: grayscale(100%) sepia(100%) hue-rotate(var(--selection-hue)) brightness(var(--selection-brightness));
}
.text > .inner {
    padding: 5px;
    display: inline-block;
}
.text.size-small > .inner {
    font-size: calc(var(--zoom-factor) / 100 * 12px);
}
.text.size-medium > .inner {
    font-size: calc(var(--zoom-factor) / 100 * 16px);
}
.text.size-large > .inner {
    font-size: calc(var(--zoom-factor) / 100 * 24px);
}
.text.text-rotate-animation {
    transition: transform var(--component-rotate-duration);
    transform: rotate(90deg);
}
.text[data-text-rotation="1"] > .inner {
    transform: rotate(90deg);
}
.text[data-text-rotation="2"] > .inner {
    transform: rotate(180deg);
}
.text[data-text-rotation="3"] > .inner {
    transform: rotate(270deg);
}
.component-drop-preview {
    z-index: 9;
    position: absolute;
    border-radius: 8px;
    outline: 2px solid var(--component-preview-color);
    outline-offset: -4px;
}
.text-drop-preview {
    z-index: 9;
    position: absolute;
    border-radius: 8px;
    outline: 1px dashed var(--muted-text-color);
    outline-offset: -4px;
}
.component-rotate-animation {
    transition: transform var(--component-rotate-duration);
    transform: rotate(90deg);
}
.component-delete-animation {
    transition: opacity var(--component-delete-duration);
    opacity: 0;
}
.component .component-inner {
    pointer-events: all;
    z-index: 12;
    position: absolute;
    background-color: var(--component-body-color);
    border: 1px solid var(--component-border-color);
    transition: border-color var(--component-rotate-duration);
    border-radius: 3px;
    color: var(--muted-text-color);
    text-align: center;
    box-sizing: border-box;
    margin: 5px; /* fixme: needs to match component, should just be set there */
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    overflow: hidden;
    text-shadow: 1px 1px 2px black;
    font-size: var(--font-size-small);
}
.component .component-inner:hover, .component:has(.component-port:hover) .component-inner {
    background-color: var(--component-body-hover-color);
    border-color: var(--component-border-hover-color);
    color: var(--text-color);
}
.grid-zoom-below-65 .component-inner span {
    display: none;
}
.component-port {
    pointer-events: all;
    z-index: 14;
    position: absolute;
    background-color: var(--component-port-border-color);
    border-radius: 3px;
    font-size: var(--font-size-small);
    text-align: center;
    color: var(--muted-text-color);
    border: 1px solid var(--component-port-body-color);
    box-sizing: border-box;
    transition: background-color var(--component-color-transition-duration);
}
.grid-zoom-below-100 .component-port {
    border-radius: 0;
}
.grid-zoom-below-85 .component-port span {
    display: none;
}
.component-port:hover {
    transition: filter var(--component-color-transition-duration), color var(--component-color-transition-duration);
    color: var(--text-color);
    filter: brightness(1.75) saturate(0.5);
}
.component-port[data-net-state="null"] { background-color: var(--wire-colorD-null); }
.component-port[data-net-state="0"] { background-color: var(--wire-colorD-low); }
.component-port[data-net-state="1"] { background-color: var(--wire-colorD-high); box-shadow: 1px 1px 3px var(--wire-colorD-high-alpha), -1px -1px 3px var(--wire-colorD-high-alpha); }
.component-port-label {
    pointer-events: none;
    z-index: 13;
    position: absolute;
    white-space: nowrap;
    background-color: var(--overlay-bg-color);
    border: 1px solid var(--overlay-border-color);
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--muted-text-color);
    opacity: 0;
    transition: opacity var(--component-color-transition-duration);
}
.grid-zoom-below-125 .component-port-label {
    display: none;
}
.component:hover {
    z-index: 12; /* required for labels to pop over other components */
}
.component:hover .component-port-label {
    opacity: 1;
}

/*
 * Tunnel
 */
.component.tunnel[data-component-rotation="1"] .component-inner, .component.tunnel[data-component-rotation="3"] .component-inner {
    margin: 13px 5px;
    height: calc(100% - 26px);
}
.component.tunnel[data-component-rotation="0"] .component-inner, .component.tunnel[data-component-rotation="2"] .component-inner {
    margin: 5px 13px;
    width: calc(100% - 26px);
}


/*
 * Custom component
 */
.component.custom.simulated .component-inner {
    cursor: zoom-in;
}

/*
 * Port (the port-component, not a port on a component)
 */
.component > .port-name {
    pointer-events: none;
    z-index: 13;
    position: absolute;
    white-space: nowrap;
    background-color: var(--overlay-bg-color);
    box-sizing: border-box;
    color: var(--muted-text-color);
    font-weight: bold;
}
.grid-zoom-below-85 .component > .port-name  {
    display: none !important;
}
.component.status-outline[data-net-state] > .component-inner {
    outline: 4px solid transparent;
    outline-offset: -4px;
}
.component.status-outline[data-net-state="-1"] > .component-inner:has(+div[data-net-color]) {
    outline-color: var(--wire-colorE1);
    box-shadow: 1px 1px 3px var(--wire-colorE2-alpha), -1px -1px 3px var(--wire-colorE2-alpha);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="0"]) {
    outline-color: var(--wire-color0-high);
    box-shadow: 1px 1px 3px var(--wire-color0-high-alpha), -1px -1px 3px var(--wire-color0-high-alpha);
}
.component.status-outline[data-net-state="0"] > .component-inner:has(+div[data-net-color="1"]) {
    outline-color: var(--wire-color1-low);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="1"]) {
    outline-color: var(--wire-color1-high);
    box-shadow: 1px 1px 3px var(--wire-color1-high-alpha), -1px -1px 3px var(--wire-color1-high-alpha);
}
.component.status-outline[data-net-state="0"] > .component-inner:has(+div[data-net-color="2"]) {
    outline-color: var(--wire-color2-low);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="2"]) {
    outline-color: var(--wire-color2-high);
    box-shadow: 1px 1px 3px var(--wire-color2-high-alpha), -1px -1px 3px var(--wire-color2-high-alpha);
}
.component.status-outline[data-net-state="0"] > .component-inner:has(+div[data-net-color="3"]) {
    outline-color: var(--wire-color3-low);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="3"]) {
    outline-color: var(--wire-color3-high);
    box-shadow: 1px 1px 3px var(--wire-color3-high-alpha), -1px -1px 3px var(--wire-color3-high-alpha);
}
.component.status-outline[data-net-state="0"] > .component-inner:has(+div[data-net-color="4"]) {
    outline-color: var(--wire-color4-low);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="4"]) {
    outline-color: var(--wire-color4-high);
    box-shadow: 1px 1px 3px var(--wire-color4-high-alpha), -1px -1px 3px var(--wire-color4-high-alpha);
}
.component.status-outline[data-net-state="0"] > .component-inner:has(+div[data-net-color="5"]) {
    outline-color: var(--wire-color5-low);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="5"]) {
    outline-color: var(--wire-color5-high);
    box-shadow: 1px 1px 3px var(--wire-color5-high-alpha), -1px -1px 3px var(--wire-color5-high-alpha);
}
.component.status-outline[data-net-state="0"] > .component-inner:has(+div[data-net-color="6"]) {
    outline-color: var(--wire-color6-low);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="6"]) {
    outline-color: var(--wire-color6-high);
    box-shadow: 1px 1px 3px var(--wire-color6-high-alpha), -1px -1px 3px var(--wire-color6-high-alpha);
}
.component.status-outline[data-net-state="0"] > .component-inner:has(+div[data-net-color="7"]) {
    outline-color: var(--wire-color7-low);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="7"]) {
    outline-color: var(--wire-color7-high);
    box-shadow: 1px 1px 3px var(--wire-color7-high-alpha), -1px -1px 3px var(--wire-color7-high-alpha);
}
.component.status-outline[data-net-state="0"] > .component-inner:has(+div[data-net-color="8"]) {
    outline-color: var(--wire-color8-low);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="8"]) {
    outline-color: var(--wire-color8-high);
    box-shadow: 1px 1px 3px var(--wire-color8-high-alpha), -1px -1px 3px var(--wire-color8-high-alpha);
}
.component.status-outline[data-net-state="0"] > .component-inner:has(+div[data-net-color="9"]) {
    outline-color: var(--wire-color9-low);
}
.component.status-outline[data-net-state="1"] > .component-inner:has(+div[data-net-color="9"]) {
    outline-color: var(--wire-color9-high);
    box-shadow: 1px 1px 3px var(--wire-color9-high-alpha), -1px -1px 3px var(--wire-color9-high-alpha);
}
/* toggle state */
.component.port > .component-inner > span:before {
    content: '';
    width: 14px;
    height: 14px;
    background-color: var(--disabled-text-color);
    border-radius: 8px;
    display: inline-block;
    vertical-align: middle;
    margin: 3px 5px 5px 3px;
}
.grid-zoom-below-85 .component.port > .component-inner > span:before  {
    display: none;
}
.component.port[data-port-state="0"] > .component-inner > span:before {
    background-color: var(--wire-colorT-low);
}
.component.port[data-port-state="1"] > .component-inner > span:before {
    background-color: var(--wire-colorT-high);
    box-shadow: 2px 2px 4px var(--wire-colorT-high-alpha), -2px -2px 4px var(--wire-colorT-high-alpha);
}

/*
 * Gates
 */
.component.gate > .component-inner {
    border-radius: calc(var(--zoom-factor) / 100 * 30px);
}
.component.gate[data-component-rotation="0"] > .component-inner {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
.component.gate[data-component-rotation="1"] > .component-inner {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.component.gate[data-component-rotation="2"] > .component-inner {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.component.gate[data-component-rotation="3"] > .component-inner {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/*
 * Wire
 */
.wire {
    z-index: 10;
    position: absolute;
    box-sizing: border-box;
    background-color: var(--wire-colorD);
}
.wire:hover:not(.wire-building) {
    filter: brightness(1.75) saturate(0.5);
}
.wire.selected {
    outline: 1px dotted white;
    filter: grayscale(100%) sepia(100%) hue-rotate(var(--selection-hue)) brightness(var(--selection-brightness));
}
/* extends clickable area around wires */
.wire::after {
    content: '';
    position: absolute;
    inset-block: -4px;
    inset-inline: -4px;
}
.grid-zoom-above-100 .wire::after {
    inset-block: -8px;
    inset-inline: -8px;
}
.wire-delete-animation {
    transition: opacity var(--component-delete-duration);
    opacity: 0;
}
/* debugging */
.wirebuilder-debug {
    pointer-events: none;
    z-index: 11;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid grey;
    border-top-color: red;
    border-bottom-color: green;
    border-left-color: orange;
    border-right-color: turquoise;
    opacity: 0.5;
}
.wirebuilder-debug span {
    pointer-events: none;
    z-index: 11;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 40px;
    margin-left: -150px;
    margin-top: -20px;
    text-align: center;
}
.debug-point {
    pointer-events: none;
    z-index: 11;
    display: block;
    position: absolute;
}
.debug-point0::after {
    content: '0';
}
.debug-point1::after {
    content: '1';
}
.debug-point2::after {
    content: '2';
}

/*
 * Net colors
 */
/* wire/port colors when not simulating */
div[data-net-color="0"][data-net-state=""] { background-color: var(--wire-color0); }
div[data-net-color="1"][data-net-state=""] { background-color: var(--wire-color1); }
div[data-net-color="2"][data-net-state=""] { background-color: var(--wire-color2); }
div[data-net-color="3"][data-net-state=""] { background-color: var(--wire-color3); }
div[data-net-color="4"][data-net-state=""] { background-color: var(--wire-color4); }
div[data-net-color="5"][data-net-state=""] { background-color: var(--wire-color5); }
div[data-net-color="6"][data-net-state=""] { background-color: var(--wire-color6); }
div[data-net-color="7"][data-net-state=""] { background-color: var(--wire-color7); }
div[data-net-color="8"][data-net-state=""] { background-color: var(--wire-color8); }
div[data-net-color="9"][data-net-state=""] { background-color: var(--wire-color9); }
/* wire/port colors conflict */
div[data-net-color][data-net-state="-1"] {
    box-shadow: 1px 1px 3px var(--wire-colorE1-high-alpha), -1px -1px 3px var(--wire-colorE1-high-alpha);
    background: repeating-linear-gradient(
        -45deg,
        var(--wire-colorE1),
        var(--wire-colorE1) 5px,
        var(--wire-colorE2) 5px,
        var(--wire-colorE2) 10px
    );
}
/* wire/port colors null */
div[data-net-color="0"][data-net-state="null"] { background-color: var(--wire-color0-null); }
div[data-net-color="1"][data-net-state="null"] { background-color: var(--wire-color1-null); }
div[data-net-color="2"][data-net-state="null"] { background-color: var(--wire-color2-null); }
div[data-net-color="3"][data-net-state="null"] { background-color: var(--wire-color3-null); }
div[data-net-color="4"][data-net-state="null"] { background-color: var(--wire-color4-null); }
div[data-net-color="5"][data-net-state="null"] { background-color: var(--wire-color5-null); }
div[data-net-color="6"][data-net-state="null"] { background-color: var(--wire-color6-null); }
div[data-net-color="7"][data-net-state="null"] { background-color: var(--wire-color7-null); }
div[data-net-color="8"][data-net-state="null"] { background-color: var(--wire-color8-null); }
div[data-net-color="9"][data-net-state="null"] { background-color: var(--wire-color9-null); }
/* wire/port colors low */
div[data-net-color="0"][data-net-state="0"] { background-color: var(--wire-color0-low); }
div[data-net-color="1"][data-net-state="0"] { background-color: var(--wire-color1-low); }
div[data-net-color="2"][data-net-state="0"] { background-color: var(--wire-color2-low); }
div[data-net-color="3"][data-net-state="0"] { background-color: var(--wire-color3-low); }
div[data-net-color="4"][data-net-state="0"] { background-color: var(--wire-color4-low); }
div[data-net-color="5"][data-net-state="0"] { background-color: var(--wire-color5-low); }
div[data-net-color="6"][data-net-state="0"] { background-color: var(--wire-color6-low); }
div[data-net-color="7"][data-net-state="0"] { background-color: var(--wire-color7-low); }
div[data-net-color="8"][data-net-state="0"] { background-color: var(--wire-color8-low); }
div[data-net-color="9"][data-net-state="0"] { background-color: var(--wire-color9-low); }
/* wire/port colors high */
div[data-net-color="0"][data-net-state="1"] { background-color: var(--wire-color0-high); box-shadow: 1px 1px 3px var(--wire-color0-high-alpha), -1px -1px 3px var(--wire-color0-high-alpha); }
div[data-net-color="1"][data-net-state="1"] { background-color: var(--wire-color1-high); box-shadow: 1px 1px 3px var(--wire-color1-high-alpha), -1px -1px 3px var(--wire-color1-high-alpha); }
div[data-net-color="2"][data-net-state="1"] { background-color: var(--wire-color2-high); box-shadow: 1px 1px 3px var(--wire-color2-high-alpha), -1px -1px 3px var(--wire-color2-high-alpha); }
div[data-net-color="3"][data-net-state="1"] { background-color: var(--wire-color3-high); box-shadow: 1px 1px 3px var(--wire-color3-high-alpha), -1px -1px 3px var(--wire-color3-high-alpha); }
div[data-net-color="4"][data-net-state="1"] { background-color: var(--wire-color4-high); box-shadow: 1px 1px 3px var(--wire-color4-high-alpha), -1px -1px 3px var(--wire-color4-high-alpha); }
div[data-net-color="5"][data-net-state="1"] { background-color: var(--wire-color5-high); box-shadow: 1px 1px 3px var(--wire-color5-high-alpha), -1px -1px 3px var(--wire-color5-high-alpha); }
div[data-net-color="6"][data-net-state="1"] { background-color: var(--wire-color6-high); box-shadow: 1px 1px 3px var(--wire-color6-high-alpha), -1px -1px 3px var(--wire-color6-high-alpha); }
div[data-net-color="7"][data-net-state="1"] { background-color: var(--wire-color7-high); box-shadow: 1px 1px 3px var(--wire-color7-high-alpha), -1px -1px 3px var(--wire-color7-high-alpha); }
div[data-net-color="8"][data-net-state="1"] { background-color: var(--wire-color8-high); box-shadow: 1px 1px 3px var(--wire-color8-high-alpha), -1px -1px 3px var(--wire-color8-high-alpha); }
div[data-net-color="9"][data-net-state="1"] { background-color: var(--wire-color9-high); box-shadow: 1px 1px 3px var(--wire-color9-high-alpha), -1px -1px 3px var(--wire-color9-high-alpha); }
/* colors indicated by text */
span[data-net-color="0"] { color: var(--wire-color0-high); }
span[data-net-color="1"] { color: var(--wire-color1-high); }
span[data-net-color="2"] { color: var(--wire-color2-high); }
span[data-net-color="3"] { color: var(--wire-color3-high); }
span[data-net-color="4"] { color: var(--wire-color4-high); }
span[data-net-color="5"] { color: var(--wire-color5-high); }
span[data-net-color="6"] { color: var(--wire-color6-high); }
span[data-net-color="7"] { color: var(--wire-color7-high); }
span[data-net-color="8"] { color: var(--wire-color8-high); }
span[data-net-color="9"] { color: var(--wire-color9-high); }