/* ==========================================================================
   Workflow Diagram Editor v3 – štýly
   Vrstvy: reset → tokens → base → layout → components → utilities.
   Komponenty používajú len sémantické tokeny; farby blokov a čiar diagramu
   (--cat-*, --edge*, --node-*) vkladá JS z konfigurácie, aby mali export
   aj obrazovka jediný zdroj.
   ========================================================================== */
@layer reset, tokens, base, layout, components, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    body, h1, h2, h3, p, ul, dl, dd, fieldset, legend, hr { margin: 0; padding: 0; }
    ul { list-style: none; }
    fieldset { border: 0; min-inline-size: 0; }
    hr { border: 0; }
    button, input, select, textarea { margin: 0; font: inherit; color: inherit; }
    button { padding: 0; border: 0; background: none; cursor: pointer; }
    button:disabled { cursor: not-allowed; }
    svg { display: block; }
}

@layer tokens {
    :root {
        color-scheme: light;

        /* — 1. primitíva — */
        --white: oklch(1 0 0);
        --slate-50: oklch(0.984 0.003 247.86);
        --slate-100: oklch(0.968 0.007 247.9);
        --slate-200: oklch(0.929 0.013 255.51);
        --slate-300: oklch(0.869 0.022 252.89);
        --slate-500: oklch(0.554 0.046 257.42);
        --slate-600: oklch(0.446 0.043 257.28);
        --slate-700: oklch(0.372 0.044 257.29);
        --slate-800: oklch(0.279 0.041 260.03);
        --slate-900: oklch(0.208 0.042 265.76);
        --blue-50: oklch(0.97 0.014 254.6);
        --blue-100: oklch(0.932 0.032 255.59);
        --blue-200: oklch(0.882 0.059 254.13);
        --blue-500: oklch(0.623 0.214 259.82);
        --blue-600: oklch(0.546 0.245 262.88);
        --blue-700: oklch(0.488 0.243 264.38);
        --blue-800: oklch(0.424 0.199 265.64);
        --blue-900: oklch(0.379 0.146 265.52);
        --indigo-50: oklch(0.962 0.018 272.31);
        --indigo-100: oklch(0.93 0.034 272.79);
        --indigo-200: oklch(0.87 0.065 274.04);
        --indigo-600: oklch(0.511 0.262 276.97);
        --indigo-700: oklch(0.457 0.24 277.02);
        --rose-50: oklch(0.969 0.015 12.42);
        --rose-100: oklch(0.941 0.03 12.58);
        --rose-200: oklch(0.892 0.058 10);
        --rose-600: oklch(0.586 0.253 17.59);
        --rose-700: oklch(0.514 0.222 16.94);
        --emerald-600: oklch(0.596 0.145 163.23);
        --emerald-700: oklch(0.508 0.118 165.61);
        --amber-600: oklch(0.666 0.179 58.32);

        /* — 2. sémantické — */
        --color-bg: var(--slate-50);
        --color-surface: var(--white);
        --color-surface-muted: var(--slate-100);
        --color-surface-sunken: var(--slate-50);
        --color-canvas: oklch(0.992 0.001 286);
        --color-grid-dot: var(--slate-300);
        --color-text: var(--slate-800);
        --color-text-secondary: var(--slate-700);
        --color-text-muted: var(--slate-600);
        --color-text-subtle: var(--slate-500);
        --color-border: var(--slate-200);
        --color-border-strong: var(--slate-300);
        --color-accent: var(--blue-600);
        --color-accent-hover: var(--blue-700);
        --color-accent-active: var(--blue-800);
        --color-accent-bright: var(--blue-500);
        --color-accent-soft: var(--blue-50);
        --color-accent-soft-hover: var(--blue-100);
        --color-accent-soft-border: var(--blue-200);
        --color-accent-text: var(--blue-700);
        --color-accent-text-strong: var(--blue-900);
        --color-on-accent: var(--white);
        --color-code: var(--indigo-700);
        --color-code-icon: var(--indigo-600);
        --color-code-soft: var(--indigo-50);
        --color-code-soft-hover: var(--indigo-100);
        --color-code-soft-border: var(--indigo-200);
        --color-danger: var(--rose-600);
        --color-danger-text: var(--rose-700);
        --color-danger-soft: var(--rose-50);
        --color-danger-soft-hover: var(--rose-100);
        --color-danger-soft-border: var(--rose-200);
        --color-success: var(--emerald-600);
        --color-success-text: var(--emerald-700);
        --color-warning: var(--amber-600);
        --color-inverse: var(--slate-900);
        --color-inverse-hover: var(--slate-800);
        --color-on-inverse: var(--slate-100);
        --color-focus: var(--blue-600);
        --color-backdrop: color-mix(in oklch, var(--slate-900) 50%, transparent);

        /* — typografia — */
        --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
        --text-2xs: 0.625rem;
        --text-xs: 0.6875rem;
        --text-sm: 0.75rem;
        --text-md: 0.875rem;
        --text-lg: 1rem;

        /* — rozostupy, rádiusy, tiene, pohyb — */
        --space-1: 0.25rem;
        --space-1h: 0.375rem;
        --space-2: 0.5rem;
        --space-2h: 0.625rem;
        --space-3: 0.75rem;
        --space-3h: 0.875rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --radius-sm: 0.25rem;
        --radius-md: 0.375rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --radius-full: 999px;
        --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
        --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
        --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
        --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
        --dur-fast: 120ms;
        --dur-base: 200ms;

        /* — 3. komponentové — */
        --header-h: 3rem;
        --control-h: 2.125rem;
        --inspector-w: 20rem;
        --grid-size: 20px;
        --node-shadow: 0 2px 6px -1px oklch(0.2 0.04 265 / 0.05), 0 1px 2px -1px oklch(0.2 0.04 265 / 0.03);
        --node-shadow-hover: 0 8px 18px -4px oklch(0.2 0.04 265 / 0.1), 0 2px 6px -1px oklch(0.2 0.04 265 / 0.05);
        --node-shadow-drag: 0 14px 28px -6px oklch(0.2 0.04 265 / 0.18), 0 4px 10px -2px oklch(0.2 0.04 265 / 0.08);
        --node-ring-selected: color-mix(in oklch, var(--blue-500) 45%, transparent);
    }
}

@layer base {
    /* Aplikácia vypĺňa presne okno a nikdy sa neposúva ako stránka: html aj body orezávajú
       (overflow na <html> zároveň zabráni, aby sa orezanie z <body> prenieslo na okno). */
    html {
        block-size: 100%;
        overflow: clip;
    }
    body {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        block-size: 100dvh;
        overflow: clip;
        font-family: var(--font-ui);
        font-size: var(--text-md);
        line-height: 1.5;
        color: var(--color-text);
        background: var(--color-bg);
        /* Safari stále vyžaduje prefix; rozhranie editora sa nemá označovať ťahaním */
        -webkit-user-select: none;
        user-select: none;
    }
    input, textarea, select {
        -webkit-user-select: text;
        user-select: text;
    }
    :focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px;
    }
    kbd {
        padding: 0.0625rem var(--space-1h);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
    }
    ::-webkit-scrollbar { inline-size: 6px; block-size: 6px; }
    ::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--color-border-strong); }
}

@layer layout {
    .app-header {
        position: relative;
        z-index: 30;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-1h) var(--space-2);
        min-block-size: var(--header-h);
        padding: var(--space-1) var(--space-3);
        border-block-end: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: var(--shadow-xs);
    }
    .app-header__group {
        display: flex;
        align-items: center;
        gap: var(--space-1h);

        /* keď sa lišta na úzkej obrazovke zalomí, pravá skupina ostane vpravo */
        &:last-child { margin-inline-start: auto; }
    }
    .workspace {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: minmax(0, 1fr);       /* dlhý panel sa posúva vnútri, nenaťahuje stránku */
        min-block-size: 0;
    }
    .stage {
        position: relative;
        min-inline-size: 0;
        overflow: clip;
    }
    .inspector {
        z-index: 20;
        display: flex;
        flex-direction: column;
        inline-size: var(--inspector-w);
        min-block-size: 0;
        border-inline-start: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    /* Na úzkej obrazovke panel neuberá plátnu miesto – vysúva sa ponad neho. */
    @media (width < 48rem) {
        .inspector {
            position: absolute;
            inset-block: 0;
            inset-inline-end: 0;
            max-inline-size: calc(100% - 2.5rem);
            box-shadow: var(--shadow-xl);
        }
    }
}

@layer components {
    /* ---------- ikony ---------- */
    .icon {
        flex: none;
        inline-size: 1rem;
        block-size: 1rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .icon--sm { inline-size: 0.875rem; block-size: 0.875rem; stroke-width: 2.2; }
    .icon--xs { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 2.2; }
    .icon--lg { inline-size: 1.25rem; block-size: 1.25rem; }

    /* ---------- značka ---------- */
    .brand {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding-inline-end: var(--space-1);
    }
    .brand__logo {
        display: grid;
        place-items: center;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        border-radius: var(--radius-lg);
        background: var(--color-accent);
        color: var(--color-on-accent);
        box-shadow: var(--shadow-xs);
    }
    .brand__name {
        font-size: var(--text-md);
        font-weight: 700;
        letter-spacing: -0.025em;
    }
    .divider {
        inline-size: 1px;
        block-size: 1.25rem;
        margin-inline: var(--space-1);
        background: var(--color-border);
    }

    /* ---------- tlačidlá ---------- */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1h);
        min-block-size: var(--control-h);
        padding-inline: var(--space-2h);
        border: 1px solid transparent;
        border-radius: var(--radius-lg);
        font-size: var(--text-sm);
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);

        &:disabled { opacity: 0.4; }
    }
    .btn--icon {
        inline-size: var(--control-h);
        padding-inline: 0;
    }
    .btn--block {
        inline-size: 100%;
        padding-block: var(--space-2);
        white-space: normal;
    }
    .btn--primary {
        background: var(--color-accent);
        color: var(--color-on-accent);
        box-shadow: var(--shadow-xs);

        &:active { background: var(--color-accent-active); }
    }
    .btn--soft {
        border-color: var(--color-border);
        background: var(--color-surface-muted);
        color: var(--color-text-secondary);
    }
    .btn--code {
        border-color: var(--color-code-soft-border);
        background: var(--color-code-soft);
        color: var(--color-code);
    }
    .btn--outline {
        border-color: var(--color-border-strong);
        background: var(--color-surface);
        color: var(--color-text-secondary);
    }
    .btn--dark {
        background: var(--color-inverse-hover);
        color: var(--color-on-accent);
    }
    .btn--neutral {
        background: var(--color-surface-muted);
        color: var(--color-text-secondary);
    }
    .btn--accent-soft {
        border-color: var(--color-accent-soft-border);
        background: var(--color-accent-soft);
        color: var(--color-accent-text);
    }
    .btn--danger-soft {
        border-color: var(--color-danger-soft-border);
        background: var(--color-danger-soft);
        color: var(--color-danger-text);
    }
    @media (hover: hover) {
        .btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
        .btn--soft:hover:not(:disabled),
        .btn--neutral:hover:not(:disabled) { background: var(--color-border); }
        .btn--code:hover:not(:disabled) { background: var(--color-code-soft-hover); }
        .btn--outline:hover:not(:disabled) { background: var(--color-surface-muted); }
        .btn--dark:hover:not(:disabled) { background: var(--color-inverse); }
        .btn--accent-soft:hover:not(:disabled) { background: var(--color-accent-soft-hover); }
        .btn--danger-soft:hover:not(:disabled) { background: var(--color-danger-soft-hover); }
    }

    /* ---------- výber demo diagramu ---------- */
    .preset {
        position: relative;
        display: flex;
        color: var(--color-text-secondary);
    }
    .preset__icon,
    .preset__chevron {
        position: absolute;
        inset-block-start: 50%;
        translate: 0 -50%;
        pointer-events: none;
    }
    .preset__icon {
        inset-inline-start: var(--space-2h);
        color: var(--color-accent);
    }
    .preset__chevron {
        inset-inline-end: var(--space-2);
        color: var(--color-text-subtle);
        transition: rotate var(--dur-base);
    }
    .preset__select {
        appearance: none;
        min-block-size: var(--control-h);
        max-inline-size: 13rem;
        /* miesto na ikonu vľavo a šípku vpravo */
        padding-block: 0;
        padding-inline: calc(var(--space-2h) + 1rem + var(--space-1h)) calc(var(--space-2) + 0.75rem + var(--space-1h));
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface-muted);
        font-size: var(--text-sm);
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
        transition: background-color var(--dur-fast), border-color var(--dur-fast);
    }
    @media (hover: hover) {
        .preset__select:hover { background: var(--color-border); }
    }

    /* Prispôsobiteľný <select> – „Limited availability" (2026). Bez podpory ostáva vyššie
       naštýlované pole so systémovým zoznamom; s podporou má vlastný vzhľad aj zoznam. */
    @supports (appearance: base-select) {
        .preset__select,
        .preset__select::picker(select) { appearance: base-select; }
        .preset__select {
            align-items: center;

            &::picker-icon { display: none; }             /* šípku kreslí .preset__chevron */
            &:open {
                border-color: var(--color-accent-soft-border);
                background: var(--color-accent-soft);
                color: var(--color-accent-text-strong);
            }
            & selectedcontent {
                overflow: hidden;
                text-overflow: ellipsis;

                & .preset-option__meta,
                & .preset-option__desc { display: none; }
            }
        }
        .preset:has(.preset__select:open) .preset__chevron { rotate: 180deg; }
        .preset__select::picker(select) {
            inline-size: min(19rem, 100vw - 1rem);
            margin-block-start: 0.375rem;
            padding: var(--space-1h);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            background: var(--color-surface);
            color: var(--color-text-secondary);
            box-shadow: var(--shadow-xl);
            opacity: 1;
            translate: 0 0;
            transition: opacity var(--dur-fast), translate var(--dur-fast);

            @starting-style {
                opacity: 0;
                translate: 0 -0.25rem;
            }
        }
        .preset-option {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0 var(--space-2);
            align-items: baseline;
            padding: var(--space-2) var(--space-2h);
            border-radius: var(--radius-lg);
            font-size: var(--text-sm);
            white-space: normal;
            cursor: pointer;

            &::checkmark { display: none; }               /* zvolenú možnosť odlišuje podfarbenie */
            &:checked {
                background: var(--color-accent-soft);
                color: var(--color-accent-text-strong);
            }
            &:focus-visible { outline-offset: -2px; }
            &:disabled {
                font-style: italic;
                color: var(--color-text-subtle);
                cursor: default;
            }
        }
        .preset-option__name { font-weight: 600; }
        .preset-option__meta {
            font-size: var(--text-xs);
            font-weight: 600;
            color: var(--color-text-subtle);
        }
        .preset-option__desc {
            grid-column: 1 / -1;
            font-size: var(--text-xs);
            font-weight: 400;
            color: var(--color-text-muted);
        }
        @media (hover: hover) {
            .preset-option:hover:not(:checked, :disabled) { background: var(--color-surface-muted); }
        }
    }

    /* ---------- skupina ikonových tlačidiel ---------- */
    .btn-group {
        display: flex;
        align-items: center;
        padding: 0.125rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface-muted);
    }
    .btn-group__btn {
        display: grid;
        place-items: center;
        inline-size: 2rem;
        block-size: 1.875rem;
        border-radius: var(--radius-md);
        color: var(--color-text-muted);
        transition: background-color var(--dur-fast), color var(--dur-fast);

        &:disabled { opacity: 0.35; }
        &[aria-pressed="true"] {
            background: var(--color-accent);
            color: var(--color-on-accent);
        }
    }
    .btn-group__btn--label {
        inline-size: auto;
        min-inline-size: 2.75rem;
        padding-inline: var(--space-1h);
        font-size: var(--text-xs);
        font-weight: 700;
        color: var(--color-text-secondary);
    }
    @media (hover: hover) {
        .btn-group__btn:hover:not(:disabled, [aria-pressed="true"]) {
            background: var(--color-surface);
            color: var(--color-inverse);
        }
        .btn-group__btn--label:hover { color: var(--color-accent); }
    }

    /* ---------- súhrn projektu v lište ---------- */
    .stats {
        display: flex;
        align-items: center;
        padding: 0.125rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface-muted);
        font-size: var(--text-sm);
    }
    .stats__item {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-2h);
        font-weight: 700;
        color: var(--color-text-secondary);
    }
    .stats__symbol {
        font-weight: 600;
        color: var(--color-text-muted);
    }
    .stats__sep {
        inline-size: 1px;
        block-size: 0.875rem;
        background: var(--color-border);
    }
    .stats__critical {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-2h);
        border-radius: var(--radius-md);
        font-weight: 700;
        color: var(--color-danger-text);
        transition: background-color var(--dur-fast), color var(--dur-fast);

        &[aria-pressed="true"] {
            background: var(--color-danger);
            color: var(--color-on-accent);
            box-shadow: var(--shadow-xs);
        }
    }
    @media (hover: hover) {
        .stats__critical:hover:not([aria-pressed="true"]) { background: var(--color-surface); }
    }

    /* ---------- rozbaľovacie menu (popover) ---------- */
    #btn-menu { anchor-name: --menu-anchor; }
    .menu {
        /* Popover API – Baseline „Newly available" (2025); bez podpory ho JS prepína cez [hidden]. */
        position: fixed;
        inset: auto;
        inset-block-start: calc(var(--header-h) + 0.125rem);
        inset-inline-end: calc(var(--space-3) + var(--control-h) + var(--space-1h));
        inline-size: 14rem;
        margin: 0;
        padding: var(--space-1h) 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        background: var(--color-surface);
        color: var(--color-text-secondary);
        box-shadow: var(--shadow-xl);
        font-size: var(--text-sm);
        z-index: 50;
    }
    /* Anchor positioning – Baseline „Newly available" (2026); vyššie je záložná pevná poloha. */
    @supports (anchor-name: --a) {
        .menu {
            position-anchor: --menu-anchor;
            inset-block-start: calc(anchor(bottom) + 0.375rem);
            inset-inline-end: anchor(right);
            position-try-fallbacks: flip-inline;      /* pri ľavom okraji sa menu otvorí doprava */
        }
    }
    .menu__heading {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-text-subtle);
    }
    .menu__sep {
        margin-block: var(--space-1);
        border-block-start: 1px solid var(--color-surface-muted);
    }
    .menu__item {
        display: flex;
        align-items: center;
        gap: var(--space-2h);
        inline-size: 100%;
        padding: var(--space-2) var(--space-3);
        font-weight: 500;
        text-align: start;

        &:focus-visible { outline-offset: -2px; }
        & .icon { color: var(--menu-icon, var(--color-text-subtle)); }
    }
    .menu__item--code { --menu-icon: var(--color-code-icon); }
    .menu__item--image { --menu-icon: var(--color-success); }
    .menu__item--file { --menu-icon: var(--color-accent); }
    .menu__item--open { --menu-icon: var(--color-warning); }
    .menu__item--danger {
        --menu-icon: currentColor;
        font-weight: 600;
        color: var(--color-danger-text);
    }
    @media (hover: hover) {
        .menu__item:hover { background: var(--color-surface-sunken); }
        .menu__item--danger:hover { background: var(--color-danger-soft); }
    }

    /* ---------- plátno ---------- */
    .canvas {
        position: absolute;
        inset: 0;
        overflow: clip;
        background-color: var(--color-canvas);
        background-image: radial-gradient(var(--color-grid-dot) 1.25px, transparent 1.25px);
        background-position: var(--cam-x, 0px) var(--cam-y, 0px);
        /* --grid-step riedi bodky pri veľkom oddialení, aby z mriežky nevznikol šum */
        background-size: calc(var(--grid-size) * var(--grid-step, 1) * var(--cam-scale, 1)) calc(var(--grid-size) * var(--grid-step, 1) * var(--cam-scale, 1));
        cursor: grab;
        touch-action: none;

        &:focus-visible { outline-offset: -2px; }
        &.is-panning { cursor: grabbing; }
        &.is-connecting { cursor: crosshair; }
    }
    .world {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 4000px;
        block-size: 4000px;
        transform-origin: 0 0;
        transform: translate(var(--cam-x, 0px), var(--cam-y, 0px)) scale(var(--cam-scale, 1));
        pointer-events: none;
    }
    .edges,
    .nodes {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        block-size: 100%;
        pointer-events: none;
    }
    .edges {
        z-index: 1;
        overflow: visible;
    }
    .nodes { z-index: 2; }

    /* ---------- blok ---------- */
    .wf-node {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        block-size: var(--node-h, 58px);
        padding-inline: var(--node-pad-x, 22px);
        border: var(--node-border, 1.6px) solid var(--cat-stroke, var(--color-border-strong));
        border-radius: var(--node-radius, 16px);
        background: var(--cat-fill, var(--color-surface-muted));
        color: var(--cat-text, var(--color-text));
        box-shadow: var(--node-shadow);
        font-size: var(--node-font-size, 15px);
        font-weight: var(--node-font-weight, 600);
        letter-spacing: var(--node-letter-spacing, -0.15px);
        white-space: nowrap;
        cursor: grab;
        pointer-events: auto;
        touch-action: none;
        transition: box-shadow var(--dur-fast), opacity var(--dur-base);

        &.is-selected {
            z-index: 30;
            outline: 3px solid var(--node-ring-selected);
            outline-offset: 2px;
        }
        &:focus-visible {
            z-index: 31;
            outline: 3px solid var(--color-focus);
            outline-offset: 2px;
        }
        &.is-critical {
            z-index: 25;
            box-shadow: 0 0 0 3px var(--node-critical-ring), 0 10px 22px -4px color-mix(in oklch, var(--node-critical-ring) 35%, transparent);
        }
        &.is-dimmed {
            opacity: 0.32;
            filter: grayscale(35%);
        }
        &.is-connect-source,
        &.is-drop-target {
            outline: 3px solid var(--color-accent);
            outline-offset: 2px;
        }
        &.is-drop-invalid {
            outline: 3px dashed var(--color-danger);
            outline-offset: 2px;
        }
        &.is-dragging {
            z-index: 50;
            box-shadow: var(--node-shadow-drag);
            cursor: grabbing;
        }
    }
    @media (hover: hover) {
        .wf-node:hover:not(.is-critical, .is-dragging) { box-shadow: var(--node-shadow-hover); }
    }
    .canvas.is-connecting .wf-node { cursor: crosshair; }

    /* Porty na ťahanie prepojení (vstup hore, výstup dole) */
    .port {
        position: absolute;
        inset-inline-start: 50%;
        z-index: 40;
        inline-size: 13px;
        block-size: 13px;
        border: 2px solid var(--color-text-subtle);
        border-radius: 50%;
        background: var(--color-surface);
        translate: -50% 0;
        scale: 0.85;
        opacity: 0;
        cursor: crosshair;
        pointer-events: none;           /* neviditeľný port nesmie zachytávať ťahanie bloku */
        transition: opacity var(--dur-fast), scale var(--dur-fast), background-color var(--dur-fast);

        /* väčšia plocha na trafenie */
        &::before {
            content: "";
            position: absolute;
            inset: -6px;
        }
    }
    @media (pointer: coarse) {
        .port::before { inset: -12px; }
    }
    .port--in { inset-block-start: -7px; }
    .port--out { inset-block-end: -7px; }
    .wf-node.is-selected .port,
    .canvas.is-connecting .port {
        opacity: 1;
        scale: 1;
        pointer-events: auto;
    }
    @media (hover: hover) {
        .wf-node:hover .port {
            opacity: 1;
            scale: 1;
            pointer-events: auto;
        }
        .wf-node .port:hover {
            border-color: var(--color-accent-hover);
            background: var(--color-accent-bright);
            scale: 1.25;
        }
    }

    /* ---------- prepojenia (SVG) ---------- */
    .edge { cursor: pointer; }
    .edge__hit {
        fill: none;
        stroke: transparent;
        stroke-width: 16px;
        pointer-events: stroke;
    }
    .edge__line {
        fill: none;
        stroke: var(--edge, gray);
        stroke-width: 1.55px;
        stroke-linecap: round;
        stroke-linejoin: round;
        marker-end: url("#arrow-default");
        pointer-events: none;
        transition: stroke var(--dur-fast), stroke-width var(--dur-fast), opacity var(--dur-base);
    }
    @media (hover: hover) {
        .edge:hover .edge__line {
            stroke: var(--color-accent-bright);
            stroke-width: 2.3px;
            marker-end: url("#arrow-hover");
        }
    }
    .edge.is-selected .edge__line {
        stroke: var(--color-accent);
        stroke-width: 2.6px;
        stroke-dasharray: 5 3;
        marker-end: url("#arrow-selected");
    }
    .edge.is-critical .edge__line {
        stroke: var(--edge-critical, crimson);
        stroke-width: 2.6px;
        marker-end: url("#arrow-critical");
    }
    .edge.is-dimmed { opacity: 0.22; }
    .edges__temp {
        fill: none;
        stroke: var(--color-accent-bright);
        stroke-width: 2px;
        stroke-dasharray: 5 4;
        marker-end: url("#arrow-selected");
    }
    .arrow path {
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .arrow--default path { stroke: var(--edge, gray); }
    .arrow--hover path { stroke: var(--color-accent-bright); stroke-width: 2; }
    .arrow--selected path { stroke: var(--color-accent); stroke-width: 2; }
    .arrow--critical path { stroke: var(--edge-critical, crimson); stroke-width: 2; }

    /* ---------- legenda a banner na plátne ---------- */
    .legend {
        position: absolute;
        inset-block-end: var(--space-4);
        inset-inline-start: var(--space-4);
        z-index: 20;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1) var(--space-3);
        max-inline-size: calc(100% - 2 * var(--space-4));
        padding: var(--space-2h) var(--space-3h);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        background: color-mix(in oklch, var(--color-surface) 95%, transparent);
        box-shadow: var(--shadow-sm);
        font-size: var(--text-sm);
        font-weight: 500;
    }
    .legend__title {
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-text-subtle);
    }
    .legend__item {
        display: flex;
        align-items: center;
        gap: var(--space-1h);
        color: var(--cat-text);
    }
    .legend__swatch {
        inline-size: 0.875rem;
        block-size: 0.875rem;
        border: 1px solid var(--cat-stroke);
        border-radius: var(--radius-sm);
        background: var(--cat-fill);
    }
    .legend__items { display: contents; }
    .legend__settings {
        display: grid;
        place-items: center;
        inline-size: 1.5rem;
        block-size: 1.5rem;
        margin-block: -0.25rem;
        margin-inline: calc(-1 * var(--space-1));
        border-radius: var(--radius-md);
        color: var(--color-text-subtle);
        transition: background-color var(--dur-fast), color var(--dur-fast);
    }
    @media (hover: hover) {
        .legend__settings:hover {
            background: var(--color-surface-muted);
            color: var(--color-text);
        }
    }
    .banner {
        position: absolute;
        inset-block-start: var(--space-4);
        inset-inline-start: 50%;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: var(--space-2h);
        max-inline-size: calc(100% - 2 * var(--space-4));
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-2xl);
        background: var(--color-accent);
        color: var(--color-on-accent);
        box-shadow: var(--shadow-lg);
        font-size: var(--text-sm);
        font-weight: 600;
        translate: -50% 0;
    }
    .banner__dot {
        flex: none;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 50%;
        background: currentColor;
        animation: pulse 1.2s ease-in-out infinite;
    }
    .banner__cancel {
        flex: none;
        padding: 0.125rem var(--space-2);
        border-radius: var(--radius-full);
        background: var(--color-accent-hover);
        font-size: var(--text-xs);

        &:focus-visible { outline-color: var(--color-on-accent); }
    }
    @keyframes pulse {
        50% { opacity: 0.35; scale: 0.7; }
    }

    /* ---------- bočný panel ---------- */
    .inspector__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        padding: var(--space-3h) var(--space-4);
        border-block-end: 1px solid var(--color-border);
    }
    .inspector__title {
        font-size: var(--text-sm);
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-text-subtle);
    }
    .badge {
        padding: 0.125rem var(--space-2h);
        border-radius: var(--radius-full);
        background: var(--color-surface-muted);
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        font-weight: 600;
        white-space: nowrap;

        &[data-tone="node"] {
            background: var(--color-accent-soft-hover);
            color: var(--color-accent-text);
            font-weight: 700;
        }
        &[data-tone="edge"] {
            background: var(--color-code-soft-hover);
            color: var(--color-code);
            font-weight: 700;
        }
    }
    .inspector__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: var(--space-4);
        min-block-size: 0;
        padding: var(--space-4);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border-strong) transparent;
    }
    .inspector__body--overview {
        justify-content: space-between;
        padding: var(--space-5);
    }
    .inspector__section {
        display: grid;
        gap: var(--space-2);
        padding-block-start: var(--space-3);
        border-block-start: 1px solid var(--color-border);
    }
    .inspector__foot {
        padding-block-start: var(--space-4);
        border-block-start: 1px solid var(--color-surface-muted);
        font-size: var(--text-xs);
        text-align: center;
        color: var(--color-text-subtle);
    }
    .stack {
        display: grid;
        gap: var(--space-4);
    }

    /* ---------- formulárové prvky ---------- */
    .field-row {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--space-2h);
    }
    .field {
        display: grid;
        gap: var(--space-1);
        min-inline-size: 0;
    }
    .field__label {
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-text-muted);
    }
    .input,
    .select {
        inline-size: 100%;
        min-inline-size: 0;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        font-size: var(--text-md);
        font-weight: 500;

        &:focus-visible {
            border-color: var(--color-accent);
            outline-offset: 0;
        }
    }
    .input--strong { font-weight: 600; }
    .select {
        padding-block: var(--space-1h);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }
    .input-affix { position: relative; }
    .input-affix__suffix {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: var(--space-3);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text-subtle);
        translate: 0 -50%;
        pointer-events: none;
    }
    .input-affix .input { padding-inline-end: 2.75rem; }

    /* výber kategórie – natívne rádiá prekryté farebnou plochou */
    .cat-options {
        display: grid;
        gap: var(--space-1h);
    }
    .cat-option {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--cat-stroke);
        border-radius: var(--radius-lg);
        background: var(--cat-fill);
        color: var(--cat-text);
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;

        & input {
            position: absolute;
            inset: 0;
            inline-size: 100%;
            block-size: 100%;
            opacity: 0;
            cursor: pointer;
        }
        &:has(input:checked) { box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 3px var(--color-accent); }
        &:has(input:focus-visible) {
            outline: 2px solid var(--color-focus);
            outline-offset: 4px;
        }
    }
    .cat-option__dot {
        display: grid;
        place-items: center;
        inline-size: 0.875rem;
        block-size: 0.875rem;
        border-radius: 50%;
        background: var(--cat-stroke);
    }
    .cat-option:has(input:checked) .cat-option__dot::after {
        content: "";
        inline-size: 0.375rem;
        block-size: 0.375rem;
        border-radius: 50%;
        background: var(--color-surface);
    }

    /* harmonogram bloku */
    .schedule {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-1h);
    }
    .schedule__cell {
        padding: var(--space-1h) var(--space-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface-sunken);
    }
    .schedule__cell dt {
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-subtle);
    }
    .schedule__cell dd {
        font-size: var(--text-md);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .schedule__note {
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-text-muted);

        &[data-critical="true"] { color: var(--color-danger-text); }
    }

    /* zoznam prepojení bloku */
    .link-list {
        display: grid;
        gap: var(--space-1h);
    }
    .link-list__empty {
        padding-block: var(--space-1);
        font-size: var(--text-sm);
        font-style: italic;
        color: var(--color-text-subtle);
    }
    .link-item {
        display: flex;
        align-items: center;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface-sunken);
        font-size: var(--text-sm);
    }
    .link-item__go {
        flex: 1;
        min-inline-size: 0;
        padding: var(--space-1h) var(--space-2h);
        border-radius: var(--radius-lg);
        overflow: hidden;
        font-weight: 500;
        text-align: start;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--color-text-secondary);
    }
    .link-item__remove {
        flex: none;
        display: grid;
        place-items: center;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        border-radius: var(--radius-md);
        color: var(--color-text-subtle);
    }
    @media (hover: hover) {
        .link-item__go:hover { color: var(--color-accent-text); }
        .link-item__remove:hover { color: var(--color-danger); }
    }
    .quick-connect {
        display: flex;
        gap: var(--space-1h);
    }

    /* karty v prehľade */
    .help {
        padding: var(--space-3h);
        border: 1px solid var(--color-accent-soft-hover);
        border-radius: var(--radius-xl);
        background: var(--color-accent-soft);
        font-size: var(--text-sm);
        line-height: 1.6;
        color: var(--color-accent-text-strong);
    }
    .help__title,
    .card__title {
        margin-block-end: var(--space-1h);
        font-size: var(--text-sm);
        font-weight: 700;
    }
    .help__list {
        display: grid;
        gap: var(--space-1h);

        & li {
            padding-inline-start: var(--space-3);
            text-indent: calc(-1 * var(--space-3));
        }
        & li::before { content: "• "; }
    }
    .card {
        padding: var(--space-3h);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
    }
    .card__title { color: var(--color-text-secondary); }
    .breakdown {
        display: grid;
        gap: var(--space-1h);
        font-size: var(--text-sm);
    }
    .breakdown__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-md);
        background: var(--cat-fill);
        color: var(--cat-text);
        font-weight: 600;
    }
    .breakdown__days { font-weight: 700; }
    .edge-card {
        padding: var(--space-3h);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        background: var(--color-surface-sunken);
        text-align: center;
    }
    .edge-card__kicker {
        margin-block-end: var(--space-1);
        font-size: var(--text-sm);
        color: var(--color-text-subtle);
    }
    .edge-card__label {
        font-size: var(--text-md);
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    /* ---------- dialóg s Mermaid kódom ---------- */
    .dialog {
        inline-size: min(42rem, 100vw - 2rem);
        max-block-size: calc(100dvh - 2rem);
        padding: 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-2xl);
        background: var(--color-surface);
        color: var(--color-text);
        box-shadow: var(--shadow-2xl);
        overflow: hidden;

        opacity: 1;
        translate: 0 0;
        transition: opacity var(--dur-base), translate var(--dur-base);

        &[open] {
            display: flex;
            flex-direction: column;

            @starting-style {
                opacity: 0;
                translate: 0 0.5rem;
            }
        }
        &::backdrop {
            background: var(--color-backdrop);
            backdrop-filter: blur(4px);
        }
    }
    .dialog__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        border-block-end: 1px solid var(--color-border);
    }
    .dialog__title {
        font-size: var(--text-lg);
        font-weight: 700;
    }
    .dialog__lead {
        font-size: var(--text-sm);
        color: var(--color-text-subtle);
    }
    .dialog__close {
        flex: none;
        padding: var(--space-1h);
        border-radius: var(--radius-lg);
        color: var(--color-text-subtle);
    }
    @media (hover: hover) {
        .dialog__close:hover { color: var(--color-text-secondary); }
    }
    .dialog__body {
        display: grid;
        gap: var(--space-2);
        min-block-size: 0;
        padding: var(--space-5);
        overflow-y: auto;
    }
    .code-area {
        inline-size: 100%;
        padding: var(--space-3h);
        border: 1px solid var(--color-inverse-hover);
        border-radius: var(--radius-xl);
        background: var(--color-inverse);
        color: var(--color-on-inverse);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        line-height: 1.625;
        resize: vertical;
        tab-size: 4;
    }
    .dialog__feedback {
        min-block-size: 1.2em;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-success-text);

        &[data-tone="error"] { color: var(--color-danger-text); }
    }
    .dialog__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        padding: var(--space-3h) var(--space-5);
        border-block-start: 1px solid var(--color-border);
        background: var(--color-surface-sunken);
    }
    .dialog__foot .btn { padding-inline: var(--space-4); }

    /* ---------- nastavenia diagramu: kategórie ---------- */
    .dialog--settings { inline-size: min(36rem, 100vw - 2rem); }
    .dialog__body:has(.cat-editor) { gap: var(--space-3); }
    .dialog__hint {
        flex: 1 1 12rem;
        font-size: var(--text-sm);
        color: var(--color-text-subtle);
    }
    .cat-editor {
        display: grid;
        gap: var(--space-2);
    }
    .cat-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-3);
    }
    /* pole s názvom je zároveň ukážkou: vyzerá ako blok danej kategórie */
    .cat-row__name {
        flex: 1 1 11rem;
        border-color: var(--cat-stroke);
        background: var(--cat-fill);
        color: var(--cat-text);
        font-weight: 600;
    }
    .cat-row__colors {
        display: flex;
        gap: var(--space-1h);
    }
    .swatch {
        position: relative;
        inline-size: 1.5rem;
        block-size: 1.5rem;
        border: var(--node-border, 1.6px) solid var(--cat-stroke);
        border-radius: 50%;
        background: var(--cat-fill);
        cursor: pointer;

        & input {
            position: absolute;
            inset: 0;
            inline-size: 100%;
            block-size: 100%;
            opacity: 0;
            cursor: pointer;
        }
        &:has(input:checked) { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent); }
        &:has(input:focus-visible) {
            outline: 2px solid var(--color-focus);
            outline-offset: 5px;
        }
    }
    .cat-row__count {
        min-inline-size: 4.5rem;
        font-size: var(--text-xs);
        font-weight: 600;
        text-align: end;
        color: var(--color-text-subtle);
    }
    .cat-row__remove {
        display: grid;
        place-items: center;
        inline-size: 2rem;
        block-size: 2rem;
        border-radius: var(--radius-lg);
        color: var(--color-text-subtle);
        transition: background-color var(--dur-fast), color var(--dur-fast);

        &:disabled { opacity: 0.35; }
    }
    @media (hover: hover) {
        .cat-row__remove:hover:not(:disabled) {
            background: var(--color-danger-soft);
            color: var(--color-danger-text);
        }
    }
    .cat-editor__add { justify-self: start; }

    /* ---------- potvrdzovací dialóg ---------- */
    .dialog--confirm { inline-size: min(27rem, 100vw - 2rem); }
    .confirm {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-3h);
        min-block-size: 0;
        padding: var(--space-5);
        overflow-y: auto;
    }
    .confirm__icon {
        display: grid;
        place-items: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        border-radius: var(--radius-xl);
        background: var(--color-accent-soft);
        color: var(--color-accent);
    }
    .confirm__body {
        display: grid;
        gap: var(--space-2);
        align-content: start;
    }
    .confirm__lead { color: var(--color-text-muted); }
    .confirm__facts {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1h);
    }
    .confirm__fact {
        padding: 0.125rem var(--space-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        background: var(--color-surface-muted);
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-text-secondary);
    }
    .confirm__note {
        margin-block-start: var(--space-1);
        padding-block-start: var(--space-3);
        border-block-start: 1px solid var(--color-border);
        font-size: var(--text-sm);
        color: var(--color-text-muted);
    }
    .dialog--confirm .dialog__foot { justify-content: flex-end; }

    /* ---------- toast ---------- */
    .toast {
        position: fixed;
        inset-block-end: var(--space-5);
        inset-inline-start: 50%;
        z-index: 60;
        max-inline-size: calc(100vw - 2rem);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-xl);
        background: var(--color-inverse);
        color: var(--color-on-accent);
        box-shadow: var(--shadow-lg);
        font-size: var(--text-sm);
        font-weight: 500;
        text-align: center;
        translate: -50% 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-base);

        &.is-visible { opacity: 1; }
    }

    /* ---------- odkazy na preskočenie ---------- */
    .skip-link {
        position: fixed;
        inset-block-start: var(--space-2);
        inset-inline-start: var(--space-2);
        z-index: 100;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-lg);
        background: var(--color-inverse);
        color: var(--color-on-accent);
        font-size: var(--text-sm);
        font-weight: 600;
        translate: 0 -200%;

        &:focus-visible {
            translate: 0 0;
            outline-color: var(--color-on-accent);
            outline-offset: -4px;
        }
    }

    /* ---------- úzke obrazovky ---------- */
    @media (width < 40rem) {
        .btn__label,
        .btn-group--zoom,
        .brand__name { display: none; }

        /* z výberu dema ostane ikona so šípkou: pole je široké presne ako jeho odsadenia, text sa oreže */
        .preset__select {
            box-sizing: content-box;
            inline-size: 0;
            min-inline-size: 0;
            padding-inline: calc(var(--space-2) + 1rem) calc(var(--space-1h) + 0.75rem + var(--space-1));
            text-overflow: clip;
        }
        .preset__icon { inset-inline-start: var(--space-2); }
        .preset__chevron { inset-inline-end: var(--space-1h); }

        /* nastavenia kategórií: názov na prvom riadku, farby a kôš na druhom (počet blokov je v popise koša) */
        .cat-row__count { display: none; }
        .cat-row__remove { margin-inline-start: auto; }
    }
    @media (width < 48rem) {
        .stats__item--count,
        .stats__sep--count { display: none; }
    }
}

@layer utilities {
    [hidden] { display: none; }
    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
}