function-planner.css

body { font-family: Arial, Helvetica, sans-serif; }

div:where(.swal2-container) img:where(.swal2-image) { margin: 2em auto 0 !important; }

.func-planner {
    position: relative;
    --diagram-background-color: #f3f4f6;   /* gray-100 */
    --diagram-background-color-drag-over: #acccf0; /* 75%*diagram-background-color + 25%*button-color */

    --text-color: #111827;                 /* gray-900 */
    --placeholder-color: #6b7280;          /* gray-500 */
    --stroke-color: var(--text-color);
    --error-color: #b61f1f;
    --error-stroke-color: #dc2626;
    --warning-color: #f6af00;
    --warning-stroke-color: #f59e0b;
    --shadow-color: #9ca3af;               /* gray-400 */
    --selection-color: #0ea5e9;
    --selection-trans-color: rgba(14, 165, 233, 0.5);
    --temp-link-color: #309e70;
    --temp-port-color: #309e70;

    --bg-testable-color: #090;
    --bg-validation-color: #f60;
    --bg-input-color: #f90;
    --bg-output-color: #09f;
    --bg-indirect-color: #d1d5db;          /* gray-300 */
    --bg-none-color: #d1d5db;              /* gray-300 */

    --button-color: #007bff;
    --button-hover-color: #0056b3;
    --button-disabled-color: #d1d5db;
    --button-text-color: #f3f4f6;
    --button-text-hover-color: var(--button-text-color);
    --button-text-disabled-color: #6b7280;
    --button-icon-shadow: 2px 3px 1px rgba(20, 20, 20, .7);

    --tool-background-color: #eceef1;      /* gray-150 */
    --tooltip-background-color: var(--tool-background-color);
    --insp-vars-background-color: #d1d5db; /* gray-300 */
    --insp-var-background-color: #9ca3af;  /* gray-400 */
    --insp-var-ghost-color: #eceef1;       /* gray-150 */
    --insp-var-input-border-color: #555;

    --group-1-color: #377eb840;
    --group-2-color: #4daf4a40;
    --group-3-color: #984ea340;
    --group-4-color: #ff7f0040;
    --group-5-color: #f781bf40;

    --diagram-text-font: 14px 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; /* 0.875rem - using a rem unit messes up rendering */
    --diagram-bold-font: bold 14px 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    --diagram-title-font: 2.5rem InterVariable, sans-serif;

    color: var(--text-color);
}
.func-planner.dark-mode {
    --diagram-background-color: #1f2937;   /* gray-800 */
    --diagram-background-color-drag-over: #173e69; /* 75%*diagram-background-color + 25%*button-hover-color */

    --text-color: #e5e7eb;                 /* gray-200 */
    --placeholder-color: #b6bcc5;          /* gray-350 */
    --error-color: #dc2626;
    --warning-color: #ffd600;
    --shadow-color: #6b7280;               /* gray-500 */
    --temp-link-color: #61ca9e;
    --temp-port-color: #61ca9e;

    --bg-indirect-color: #374151;          /* gray-700 */
    --bg-none-color: #374151;              /* gray-700 */

    --button-color: #0056b3;
    --button-hover-color: #007bff;
    /* --button-text-color: #f3f4f6; */

    --tool-background-color: #374151;      /* gray-700 */
    --insp-vars-background-color: #4b5563; /* gray-600 */
    --insp-var-background-color: #6b7280;  /* gray-500 */
    --insp-var-ghost-color: #374151;       /* gray-700 */
}

.func-planner input, .func-planner textarea { box-sizing: border-box; }
.func-planner .diagram { position: relative; font-size: 1rem; width: 100%; height: 100%; overflow: hidden; background-color: var(--diagram-background-color); }
.func-planner .diagram.func-planner-drag-over { background-color: var(--diagram-background-color-drag-over) !important; }

.func-planner .function-name-editor {
    display: inline-block;
    position: absolute;
    z-index: 100;
    font: 14px 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    transform-origin: top left;
    color: var(--text-color);
    overflow: visible;
    padding: 6px;
    border: 2px solid var(--stroke-color);
    border-radius: 7px;
    box-shadow: 0px 0px 10px var(--stroke-color);
    input {
        font: inherit;
        margin: 0; padding: 0; inset: 0;
        position: absolute;
        width: 100%; left: 6px;
        border: none; outline: none;
        color: inherit; background-color: transparent; border-radius: inherit;
    }
    input::placeholder { color: var(--placeholder-color); opacity: 1; font-style: italic; }
    span.ghost { visibility: hidden; height: 0; white-space: pre; }
}
.func-planner .function-name-editor.error {
    border-color: var(--error-stroke-color);
    box-shadow: 0 0 10px var(--error-stroke-color);
}
.func-planner .function-name-editor.warning {
    border-color: var(--warning-stroke-color);
    box-shadow: 0 0 10px var(--warning-stroke-color);
}
.func-planner .function-name-editor::after {
    content: '()';
    position: relative;
    right: 0;
}
.func-planner .function-name-editor:has(input:placeholder-shown)::after {
    color: var(--placeholder-color); opacity: 1; font-style: italic;
}
.func-planner .func-planner-buttons, .func-planner .func-planner-info-box {
    position: absolute;
    z-index: 100;
    padding: 0.5em;
    border: 1px solid var(--stroke-color);
    border-radius: 0.5em;
    background-color: var(--tool-background-color);
    box-shadow: 0 0 0.5em var(--shadow-color);
    width: max-content;
}

.func-planner .func-planner-buttons {
    top: 2.25em; left: 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    button {
        display: block;
        background-color: var(--button-color);
        border: 3px outset var(--button-color);
        border-radius: 0.5em;
        color: var(--button-text-color);
        cursor: pointer;
        padding: 0.5em;
        text-align: left;
        height: 3em;
        line-height: 1em;
        white-space: nowrap;
    }
    button .func-planner-icon {
        width: 1.5em; height: 1.5em;
        vertical-align: middle;
        margin-right: 0.75em;
        display: inline-block;
        filter:
            drop-shadow(-1px -1px 0px var(--button-text-color))
            drop-shadow(1px -1px 0px var(--button-text-color))
            drop-shadow(-1px 1px 0px var(--button-text-color))
            drop-shadow(1px 1px 0px var(--button-text-color))
            drop-shadow(var(--button-icon-shadow));
    }
    button .func-planner-icon > svg {
        width: 1.5em; height: 1.5em;
        fill: var(--button-text-color);
    }
    button .func-planner-icon.no-outline { filter: drop-shadow(var(--button-icon-shadow)); }
    button:disabled { background-color: var(--button-disabled-color); border-color: var(--button-disabled-color); color: var(--button-text-disabled-color); cursor: not-allowed; }
    button:hover:not(:disabled) { color: var(--button-text-hover-color); background-color: var(--button-hover-color); border-color: var(--button-hover-color); border-style: inset; }
    button:disabled .func-planner-icon { filter: none; }
}
.func-planner .func-planner-buttons:not(:hover) button {
    width: 3em;
    span { display: none; }
}

.func-planner .func-planner-info-box {
    top: 0.75em; right: 0.75em;
    .value-hidden { display: none; }
    div { padding: 0.1em 0 ; }
    div.value-error { color: var(--error-color); }
    div.value-warn { color: var(--warning-color); }
    table { border-collapse: collapse; }
    td:first-child { font-weight: bold; padding-right: 0.25em; }
    td:nth-child(3), td:nth-child(4) { font-size: 0.8em; vertical-align: bottom; }
    tr.value-error td:nth-child(2) { color: var(--error-color); }
    tr:not(.value-error) :is(td:nth-child(3), td:nth-child(4)) { display: none; }
}
.func-planner .func-planner-info-box:has(.value-error:not(.value-hidden)) { border-color: var(--error-stroke-color); box-shadow: 0 0 10px var(--error-stroke-color); }
.func-planner .func-planner-info-box:has(.value-warn:not(.value-hidden)):not(:has(.value-error:not(.value-hidden))) { border-color: var(--warning-stroke-color); box-shadow: 0 0 10px var(--warning-stroke-color); }
.func-planner .func-planner-info-box:not(:has(table tr:not(.value-hidden))):not(:has(> div:not(.value-hidden))) { display: none; }

.func-planner .func-planner-fab {
    position: absolute;
    cursor: pointer;
    z-index: 100;
    font-size: 1.5em; margin: 0;
    svg { color: var(--text-color); fill: var(--text-color); }
}
/* Immediate FAB tips (to the right) — avoid native title delay */
.func-planner .func-planner-fab[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 0.45em);
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    padding: 0.2em 0.5em;
    border-radius: 0.35em;
    border: 1px solid var(--stroke-color);
    background: var(--tooltip-background-color);
    color: var(--text-color);
    font-size: 0.55em;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
}
.func-planner .func-planner-fab[data-tip]:hover::after,
.func-planner .func-planner-fab[data-tip]:focus-visible::after,
.func-planner .func-planner-fab[data-tip]:has(:focus-visible)::after {
    opacity: 1;
    visibility: visible;
}
/* Raise above instructions panel (z-index 1000) while tip is shown */
.func-planner .func-planner-fab[data-tip]:hover,
.func-planner .func-planner-fab[data-tip]:focus-visible,
.func-planner .func-planner-fab[data-tip]:has(:focus-visible) {
    z-index: 1100;
}
.func-planner label.theme-toggle {
    bottom: 10px; left: 10px;
}
.func-planner .func-planner-settings-button {
    bottom: calc(15px + 1.5rem); left: 9px;
    svg { width: 1.125em; height: 1.125em; }
}
.func-planner .func-planner-instructions-button {
    bottom: 10px; left: calc(15px + 1.5rem);
    z-index: 100;
    svg { width: 0.85em; height: 0.85em; border: 1px solid var(--text-color); border-radius: 50%; }
}
.func-planner .func-planner-instructions-button:hover + .func-planner-instructions,
.func-planner .func-planner-instructions:hover { display: block; }
.func-planner .func-planner-instructions {
    display: none;
    bottom: 15px; left: calc(15px + 1.5rem);
    position: absolute;
    z-index: 1000;
    background-color: var(--tool-background-color);
    padding: 1em;
    border: 1px solid var(--stroke-color);
    border-radius: 0.5em;
    box-shadow: 0 0 0.5em var(--shadow-color);
    max-width: 450px; max-height: 300px;
    overflow: auto;
    h2 { font-size: 1.18em; margin: 0; border-bottom: 2px solid var(--text-color); margin: 0; }
    .stroke-error, .stroke-warning {
        display: inline-block;
        outline: 2px solid transparent;
        border-radius: 5px;
        padding: 0.1em 0.25em;
    }
    .stroke-error { outline-color: var(--error-color); }
    .stroke-warning { outline-color: var(--warning-color); }

    ul { padding-left: 1em; margin: 0; }
    .bg-testable, .bg-validation, .bg-input, .bg-output, .bg-indirect, .bg-none {
        display: inline-block;
        border: 2px solid var(--stroke-color);
        border-radius: 5px;
        padding: 0.1em 0.25em;
        margin-top: 0.1em;
    }
    .bg-testable { background: var(--bg-testable-color); }
    .bg-validation { background: var(--bg-validation-color); }
    .bg-input { background: var(--bg-input-color); }
    .bg-output { background: var(--bg-output-color); }
    .bg-indirect { background: var(--bg-indirect-color); }
    .bg-none { background: var(--bg-none-color); }
}

.func-planner ul.problems {
    padding-left: 1.3em;
    padding-top: 0.3em;
    margin: 0;
    list-style: none;
    max-width: 17em;
}
.func-planner .tooltip-content ul.problems {
    padding-top: 0.6em;
    padding-bottom: 0.2em;
}
.func-planner ul.problems li {
    padding: 0.1em 0.3em;
    border: 1px solid var(--text-color);
    border-radius: 0.3em;
}
.func-planner ul.problems li:before {
    position: relative;
    display: inline-block;
    width: 0;
    left: -1.6em;
    /* text-shadow is an alternative for
    -webkit-text-stroke: 1.2px var(--text-color);
    paint-order: stroke fill;
    since that doesn't work for emojis in some browsers
    */
    text-shadow:
        1px 1px 0 var(--text-color),
        -1px -1px 0 var(--text-color),
        -1px 1px 0 var(--text-color),
        1px -1px 0 var(--text-color),
        1px 0 0 var(--text-color),
        -1px 0 0 var(--text-color),
        0 1px 0 var(--text-color),
        0 -1px 0 var(--text-color)
        ;
}
.func-planner ul.problems li.error { background-color: var(--error-stroke-color); }
.func-planner ul.problems li.error:before { content: "❗"; }
.func-planner ul.problems li.warning { background-color: var(--warning-stroke-color); }
.func-planner ul.problems li.warning:before { content: "⚠️"; }

.func-planner .tooltip-container {
    position: absolute;
    z-index: 120;
    .tooltip-content {
        background-color: var(--tooltip-background-color);
        border: 1px solid var(--stroke-color);
        border-radius: 0.5em;
        padding: 0.5em;
        box-shadow: 0 0 0.5em var(--shadow-color);
        font-size: 0.9em;
        max-width: 400px;
        margin: 10px;
        /* pointer-events: none; */
        code {
            font-size: 1.2em;
            font-weight: bold;
            white-space: pre;
            display: block;
            max-width: 100%;
            overflow-x: auto;
        }
    }
}

.func-planner .inspector-resizer {
    position: absolute;
    top: 0; bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 105;
    background-color: var(--button-color);
    box-shadow: 0 0 1em var(--shadow-color);
}
.func-planner .inspector {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    z-index: 110;
    overflow-y: auto;
    background-color: var(--tool-background-color);
    padding: 1em;

    h2 { font-size: 1.4em; margin: 0; border-bottom: 2px solid var(--text-color); margin: 0; }
    h3 { font-size: 1.1em; margin-bottom: 0; }

    input.func-name { font-family: inherit; font-size: 1em; border: 1px solid transparent; font-weight: bold; field-sizing: content; width: auto; max-width: calc(100% - 1em); text-overflow: ellipsis; }
    h2:has(input.func-name)::before, h2:has(input.func-name)::after { font-size: 1em; }
    /* h2:has(input.func-name)::before { content: 'def '; color:#C586C0; } */
    h2:has(input.func-name)::after { content: '()'; color:#bbbbbb; }
    h2:has(input.func-name) {
        field-sizing: content;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-weight: normal;
        text-wrap: nowrap;
    }

    .func-docstring {
        border: 1px solid var(--insp-var-input-border-color);
        background-color: var(--tool-background-color);
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 0.9em;
    }
    .func-docstring::before,
    .func-docstring::after {
        content: '"""';
        display: block;
        color: #6A9955;
        line-height: 0.6;
        padding-top: 0.4em;
    }
    .func-docstring textarea,
    .func-docstring textarea.warning,
    .func-docstring textarea.error,
    .func-docstring textarea:read-only {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none !important;
        border-radius: 0;
        background: transparent !important;
        font-family: inherit;
        font-size: inherit;
        outline: none;
    }
    .func-docstring:has(textarea.warning) {
        border-color: var(--warning-color);
        background-color: rgb(from var(--warning-color) r g b / 0.2);
    }
    .func-docstring:has(textarea.error) {
        border-color: var(--error-color);
        background-color: rgb(from var(--error-color) r g b / 0.2);
    }
    .func-docstring:has(textarea:read-only) {
        border-color: transparent;
        background-color: transparent;
    }

    textarea { width: 100%; min-height: 3.75em; resize: vertical; }
    input:read-only, textarea:read-only, select:disabled { background-color: transparent; border: 1px solid transparent; }
    input[type="checkbox"]:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        accent-color: var(--button-text-disabled-color);
        filter: grayscale(1);
    }
    label:has(> input[type="checkbox"]:disabled) {
        color: var(--placeholder-color);
        cursor: not-allowed;
    }

    /*:invalid, :user-invalid { background-color: rgb(from var(--error-color) r g b / 0.2) !important; border: 1px solid var(--error-color) !important; }*/
    input, textarea, select { border: 1px solid var(--insp-var-input-border-color); background-color: var(--tool-background-color); color: var(--text-color); }
    label input + p, label select + p { font-size: 0.8em; margin-top: 0; }
    textarea { field-sizing: content; text-overflow: ellipsis; }
    input::placeholder, textarea::placeholder, select:has(option[value=""]:checked) { color: var(--placeholder-color); opacity: 1; font-style: italic; }
    input.warning, textarea.warning, select.warning { background-color: rgb(from var(--warning-color) r g b / 0.2); border: 1px solid var(--warning-color) !important; accent-color: var(--warning-color); }
    input.error, textarea.error, select.error { background-color: rgb(from var(--error-color) r g b / 0.2); border: 1px solid var(--error-color) !important; accent-color: var(--error-color); }
    select.func-io, select.func-owner { field-sizing: content; text-overflow: ellipsis; }
    .func-code-box textarea { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.9em; white-space: pre; tab-size: 4; }
    .func-code-box textarea::placeholder { color: #aaa; }
    .func-code-box label {
        font-weight: bold; display: block; margin-bottom: 0.25em; margin-top: 1em; font-size: 1.1em;
    }
    /* Title spans only — do not inherit bold/size into nested textareas (e.g. test documentation). */
    label:has(> textarea),
    label:has(> .func-docstring) {
        display: block; margin-bottom: 0.25em; margin-top: 1em;
        > span { width: auto; font-weight: bold; font-size: 1.1em; }
    }

    label:has(.func-testable:not(:checked)) ~ .func-code-box:has(.func-testCode) { display: none !important; }
    /* Showing test code when testable is gated by PlanConfig showTestCodeFor (JS), not forced here. */

    /* Remote field-editing presence — absolute overlays only (no layout shift). */
    .field-editors-wrap {
        position: relative;
        display: block;
        width: 100%;
    }
    .field-editors-host {
        position: relative;
    }
    /* Labels with help text: keep absolute children from expanding the label box oddly. */
    label.field-editors-host {
        position: relative;
    }
    .field-editors {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        line-height: 0;
        cursor: default;
    }
    .field-editors--overlay {
        position: absolute;
        z-index: 2;
        /* left/top set in JS to straddle the control's top-right corner */
    }
    .field-editor-dot {
        display: inline-block;
        border-radius: 50%;
        box-sizing: border-box;
        border: 1px solid color-mix(in srgb, var(--stroke-color) 60%, transparent);
        flex: 0 0 auto;
    }

    /* Add and Remove Buttons */
    .func-button {
        margin: 0; padding: 0;
        box-sizing: border-box;
        cursor: pointer;
        width: 1.25em; height: 1.25em;
        font-weight: bold;
        z-index: 110;
    }
    .func-button svg { width: 0.75em; height: 0.75em; display: block; margin: 0.2em auto 0.15em auto; }
    .func-button-remove { color: red; }
    .func-button-add { color: green; }
    .func-button-disabled { display: none; }

    /* Module-level options */
    div:has(> .func-authors) { display: block; display: flex; align-items: top; gap: 0.25em; margin-top: 1em; }
    #func-authors-label { font-weight: bold; display: inline-block; width: 2em; margin: 0; }
    .func-authors {
        width: calc(100% - 2.5em);
        display: flex; flex-direction: column; gap: 0.25em;
        .func-authors-list {
            display: flex; flex-direction: column; gap: 0.5em;
            .func-author-row {
                display: flex; gap: 0em; align-items: center;
                input { flex: 1 1 auto; min-width: 0; }
            }
        }
    }
    .func-authors-read-only .func-button { display: none; }
    .func-authors.func-authors-claimable {
        .func-author-row:nth-child(5n+1) input { background-color: var(--group-1-color); }
        .func-author-row:nth-child(5n+2) input { background-color: var(--group-2-color); }
        .func-author-row:nth-child(5n+3) input { background-color: var(--group-3-color); }
        .func-author-row:nth-child(5n+4) input { background-color: var(--group-4-color); }
        .func-author-row:nth-child(5n+5) input { background-color: var(--group-5-color); }
    }

    /* Function params/returns */
    .func-var { margin: 0.75em 0; padding: 0.5em; padding-left: 0.6em; border: 1px solid var(--stroke-color); border-radius: 0.5em; background-color: var(--insp-var-background-color); position: relative; box-shadow: 0 0 0.5em var(--shadow-color); }
    .func-var-name {
        @supports not (field-sizing: content) { width: 12em; } /* fallback for Firefox and Safari */
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    }
    .func-var-type { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;; }
    .func-var-desc { width: 100%; display: inline-block; }
    .func-vars {
        position: relative;
        width: calc(100% - 1em);
        margin: 1.5em 0 0 0;
        padding: 0.5em;
        border: 1px solid var(--stroke-color);
        border-radius: 0.5em;
        background-color: var(--insp-vars-background-color);
        h3 { font-size: 1.1em; margin: 0; display: inline-block; padding-right: 0.75em; }
        input, select { margin: 0.1em 0; max-width: 100%; field-sizing: content; text-overflow: ellipsis; }
        .sortable-ghost { background-color: var(--insp-var-ghost-color); opacity: 0.8; }
        .sortable-drag { background-color: var(--insp-var-ghost-color); opacity: 0.6; }

        .func-var-type-holder { white-space: nowrap; display: inline-block; max-width: 100%; }
        .func-var-type-edit {
            display: none;
            margin: 0.1em 0 0.1em 0.2em;
            width: 1.575em; height: 1.575em;
            padding: 0;
            border: 1px solid var(--insp-var-input-border-color);
            background-color: var(--tool-background-color);
            color: var(--text-color);
            text-align: center;
            vertical-align: bottom;
        }
        .func-var-type:has(option[value*=" "]:checked):not(:disabled),
        .func-var-type:has(option[data-custom-type]:checked):not(:disabled) { max-width: calc(100% - 1.575em - 0.2em); }
        .func-var-type:has(option[value*=" "]:checked):not(:disabled) + .func-var-type-edit,
        .func-var-type:has(option[data-custom-type]:checked):not(:disabled) + .func-var-type-edit { display: inline-block; }

        .func-vars-list { min-height: 0; }

        .func-vars-add {
            display: block;
            width: 100%;
            margin: 0.35em 0 0 0;
            padding: 0.4em 0.75em;
            box-sizing: border-box;
            cursor: pointer;
            border: 1px solid var(--stroke-color);
            border-radius: 0.4em;
            background-color: var(--insp-vars-background-color);
            color: var(--text-color);
            font: inherit;
            font-weight: 600;
            text-align: center;
        }
        .func-vars-add:hover { background-color: var(--insp-var-background-color); }
        .func-vars-add.func-button-disabled { display: none; }

        /* Remove + insert buttons on var cards */
        .func-button {
            position: absolute; top: -0.625em;
            border: 1px solid var(--stroke-color);
            border-radius: 50%;
            background-color: var(--insp-vars-background-color);
        }
        .func-button-remove { right: 0.75em; z-index: 116; }
        .func-var-insert {
            left: 0;
            right: 0;
            top: -1.2em;
            width: auto;
            height: 1.5em;
            z-index: 115;
            transform: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            border-radius: 0;
            opacity: 0;
        }
        .func-var-insert svg {
            box-sizing: content-box;
            width: 0.75em;
            height: 0.75em;
            margin: 0;
            padding: 0.2em;
            border: 1px solid var(--stroke-color);
            border-radius: 50%;
            background-color: var(--insp-vars-background-color);
        }
        .func-var-insert:hover {
            opacity: 1;
        }
        .sortable-drag .func-button,
        .sortable-ghost .func-var-insert { display: none; }

        /* Drag Handle */
        .func-var:not(.func-var-readonly) .func-var-drag-handle {
            position: absolute;
            top: 0.8em; bottom: 0.8em;
            left: 0; width: 0.6em;
            cursor: ns-resize;
            z-index: 120;
        }
        .func-var:not(.func-var-readonly):hover .func-var-drag-handle { background: url("images/drag-dots.svg") center/0.8em no-repeat; }
    }
    .func-vars.func-vars-readonly { min-height: 3em; }
    .func-vars.func-vars-readonly .func-var-insert { display: none; }

    label { display: block; }
    label:first-of-type { margin-top: 1em; }
    label span { font-weight: bold; display: inline-block; width: 5em; }
}
.func-planner.dark-mode .inspector {
    .func-button-remove { color: #ff8888; }
    .func-button-add { color: #66aa66; }
}

.func-planner .inspector .is-main {
    .func-docstring:has(.func-desc) { display: none; }
    .func-params { display: none; }
    .func-returns { display: none; }
}

/* Type Editor Styles */
.func-planner-type-builder.type-editor {
    text-align: left !important;
    font-size: 0.9rem;
    font-weight: normal;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.func-planner-type-current {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.7em;
    padding-bottom: 0.7em;
}
.type-editor {
    .type-container { display: inline-block; margin: 5px 0; }
    select, .custom-type-input { margin: 0 2px; padding: 2px; }
    button { cursor: pointer; }
    button:disabled { color: gray; cursor: not-allowed; opacity: 0.5; }
    select:first-child { margin-left: 0; }
    select:has(option[value=""]:checked) { color: var(--placeholder-color); font-style: italic; }
    .custom-type-input { font-family: inherit; }
    .mode-select { margin: 0 5px; }
    .connector { margin: 0 2px; }
    .indented-nested { display: block; margin-left: 30px; }
    .nested-leader-container, .dict-label { display: inline-block; margin: 6px 5px 5px 0; vertical-align: top; }
    .dict-label { line-height: 24px; }
    .dict-connector { display: block; margin-left: 30px; }
    .mode-warning { display: block; font-size: 0.8rem; color: #a46600; max-width: 12em; }
    .add-type-btn { color: green; }
    .remove-type-btn { color: red; }
}



/* Python syntax highlighting colors for dark theme from VS Code Dark Modern */
.code-box {
  display: block;
  background: #1f1f1f;
  padding: 0.5em;
  white-space: pre;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  overflow: auto;
  color: white;
  ::selection { background: #667B8F; }
}
.code-box .token { margin: 0 !important; text-shadow: none !important; color: inherit !important; }
.code-box .token.comment { color: #6A9955 !important; }
.code-box .token.operator { color: #D4D4D4 !important; }
.code-box .token.operator.keyword { color: #569CD6 !important; }  /* the word-operators and, or, not, is */
.code-box .token.punctuation { color: #CCCCCC !important; }  /* square brackets, parentheses, etc. - should actually take into account nesting */
.code-box .token.number { color: #B5CEA8 !important; }
.code-box .token.keyword { color: #C586C0 !important; }
.code-box .token.boolean { color: #569CD6 !important; }
.code-box .token.string { color: #CE9178 !important; }
.code-box .token.variable { color: #9CDCFE !important; }
.code-box .token.constant { color: #4FC1FF !important; }
.code-box .token.function, .code-box .token.builtin, .code-box .token.function-call { color: #DCDCAA !important; }
.code-box .token.class-name, .code-box .token.type { color: #4EC9B0 !important; }
.code-box::selection, .code-box .token::selection { background: #667B8F !important; }
/* Global read-only host (staff TA / course ended): block inspector edits */
.func-planner.func-planner--readonly .inspector input,
.func-planner.func-planner--readonly .inspector textarea,
.func-planner.func-planner--readonly .inspector select,
.func-planner.func-planner--readonly .inspector button:not(.inspector-resize) {
    pointer-events: none;
    opacity: 0.85;
}
.func-planner.func-planner--readonly .inspector input[type="checkbox"] {
    opacity: 0.45;
    cursor: not-allowed;
    accent-color: var(--button-text-disabled-color);
    filter: grayscale(1);
}
.func-planner.func-planner--readonly .inspector label:has(> input[type="checkbox"]) {
    color: var(--placeholder-color);
    cursor: not-allowed;
}

/* Extra host-app FABs — same absolute FAB treatment as settings/theme */
.func-planner .func-planner-extra-fab {
    /* slightly inset vs settings (9px) so smaller FA glyphs share the same visual center */
    left: 11px;
    z-index: 150;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-color);
}
.func-planner .func-planner-extra-fab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.func-planner .func-planner-extra-fab svg {
    /* FA solid glyphs fill their viewBox more than settings/theme SVGs */
    width: 0.95em;
    height: 0.95em;
    fill: currentColor;
    color: inherit;
    display: block;
}

/* SweetAlert2 Python import file fields */
.func-planner-python-import-file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0.65rem 0 0;
    text-align: left;
    font-size: 0.95rem;
}