/*
 * KNM.MailDesigner.Blazor — editor stylesheet (not scoped).
 * Link it after the KNM.RazorComponents anchor:
 *   <link rel="stylesheet" href="_content/KNM.MailDesigner.Blazor/knm-maildesigner.css" />
 * Every class starts with knm-md-. Colours come only from the --knm-md-* tokens below, each defaulting to the
 * host's --knm-* or Bootstrap variable: override them on .knm-md (or any parent) to re-theme the editor.
 * No brand colour is hard-coded: the accent is the host's primary colour.
 */

.knm-md {
    --knm-md-accent: var(--knm-primary, var(--bs-primary, #0d6efd));
    --knm-md-accent-soft: color-mix(in srgb, var(--knm-md-accent) 10%, transparent);
    --knm-md-accent-line: color-mix(in srgb, var(--knm-md-accent) 35%, transparent);
    --knm-md-on-accent: var(--knm-primary-contrast, #ffffff);
    --knm-md-ink: var(--bs-body-color, #1d2433);
    --knm-md-ink-2: var(--bs-secondary-color, #5b6475);
    --knm-md-line: var(--bs-border-color, #e3e6ec);
    --knm-md-line-strong: color-mix(in srgb, var(--knm-md-ink-2) 45%, var(--knm-md-line));
    --knm-md-surface: var(--bs-body-bg, #ffffff);
    --knm-md-chrome: var(--bs-tertiary-bg, #f7f8fa);
    --knm-md-stage: var(--bs-secondary-bg, #eceff3);
    /* The preview's sticky bar (Anteprima, Dati di esempio, Chiaro/Scuro): opaque, the message scrolls under it. */
    --knm-md-preview-bar-bg: var(--knm-md-stage);
    --knm-md-warn: var(--knm-warning-text, var(--bs-warning-text-emphasis, #b45309));
    --knm-md-danger: var(--knm-danger, var(--bs-danger, #dc3545));
    --knm-md-ok: var(--knm-success, var(--bs-success, #15803d));
    --knm-md-device: var(--bs-dark, #1f2430);
    --knm-md-device-2: color-mix(in srgb, var(--knm-md-device) 88%, #ffffff);
    /* Radii follow the host: the library's --knm-border-radius (itself --bs-border-radius), and the global layout below. */
    --knm-md-radius: var(--knm-border-radius, var(--bs-border-radius, 6px));
    --knm-md-control-radius: var(--knm-md-radius);
    --knm-md-hover: color-mix(in srgb, var(--knm-md-ink) 7%, transparent);
    --knm-md-on-media: #ffffff;
    --knm-md-paper: #ffffff;
    --knm-md-shade: 16 24 40;
    --knm-md-media-shade: 0 0 0;
    --knm-md-font: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --knm-md-font-mono: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    --knm-md-shadow: 0 1px 2px rgb(var(--knm-md-shade) / .06), 0 8px 24px rgb(var(--knm-md-shade) / .08);
    --knm-md-rail-width: 280px;
    --knm-md-inspector-width: 320px;

    container: knm-md / inline-size;
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr) 28px;
    height: 100%;
    min-height: 520px;
    width: 100%;
    overflow: hidden;
    position: relative;
    font: 13px/1.45 var(--knm-md-font);
    font-variant-numeric: tabular-nums;
    color: var(--knm-md-ink);
    background: var(--knm-md-chrome);
    border: 1px solid var(--knm-md-line);
    border-radius: var(--knm-md-radius);
}

/*
 * Dark host theme (data-bs-theme="dark" on the editor or any ancestor). The Bootstrap variables already switch;
 * these are the fallbacks for a host without them, and the tokens that have no Bootstrap counterpart.
 * --knm-md-paper, --knm-md-on-media and --knm-md-media-shade stay light: they sit on e-mail content, not on chrome.
 */
[data-bs-theme="dark"] .knm-md, .knm-md[data-bs-theme="dark"] {
    --knm-md-on-accent: var(--knm-primary-contrast, #ffffff);
    --knm-md-ink: var(--bs-body-color, #dee2e6);
    --knm-md-ink-2: var(--bs-secondary-color, #a3acb9);
    --knm-md-line: var(--bs-border-color, #3a414c);
    --knm-md-surface: var(--bs-body-bg, #1b1f26);
    --knm-md-chrome: var(--bs-tertiary-bg, #232830);
    --knm-md-stage: var(--bs-secondary-bg, #2b313a);
    --knm-md-warn: var(--knm-warning-text, var(--bs-warning-text-emphasis, #f5b453));
    --knm-md-device: #0b0d11;
    --knm-md-hover: color-mix(in srgb, var(--knm-md-ink) 10%, transparent);
    --knm-md-shade: 0 0 0;
}

.knm-md *, .knm-md *::before, .knm-md *::after { box-sizing: border-box; }

/*
 * Compact skin for the KNM.RazorComponents controls inside the editor only: the host's forms keep their size.
 * The package's own variables first, then the few Bootstrap values its controls read directly.
 */
.knm-md {
    --knm-input-padding-y: 4px;
    --knm-input-padding-x: 8px;
    --knm-form-label-font-size: 12px;
    --bs-body-font-size: 13px;
}
/*
 * Host layout. The root carries the host's global knm-layout-* class (WithGlobalLayout), so the RazorComponents controls
 * inside follow it on their own. These rules give the editor's own controls the shape the library gives its own in that
 * layout: plain inputs, "automatic" fields and the block search as a .form-control, buttons and segmented switches as a
 * .btn, the editor frame as a .card; and they round the panels in Rounded.
 * Written as :is(root.layout, .layout root) because the class may sit on the root or on any ancestor of the host.
 */
:is(.knm-md.knm-layout-rounded, .knm-layout-rounded .knm-md) { --knm-md-radius: 1rem; --knm-md-control-radius: 50rem; }
:is(.knm-md.knm-layout-bordered, .knm-layout-bordered .knm-md) :is(.knm-md-input:not(.knm-md-grid__cell), .knm-md-auto) { border-width: 2px; }
:is(.knm-md.knm-layout-borderless, .knm-layout-borderless .knm-md) :is(.knm-md-input:not(.knm-md-grid__cell), .knm-md-auto) {
    border: 0; border-bottom: 2px solid var(--knm-md-line); border-radius: 0;
}
:is(.knm-md.knm-layout-filled, .knm-layout-filled .knm-md) :is(.knm-md-input:not(.knm-md-grid__cell), .knm-md-auto) {
    background-color: var(--knm-filled-bg, var(--knm-md-chrome)); border: 0; border-bottom: 2px solid var(--knm-md-line);
    border-radius: .25rem .25rem 0 0;
}
:is(.knm-md.knm-layout-borderless, .knm-layout-borderless .knm-md, .knm-md.knm-layout-filled, .knm-layout-filled .knm-md) :is(.knm-md-input:not(.knm-md-grid__cell):focus) {
    border-bottom-color: var(--knm-md-accent); box-shadow: none;
}
:is(.knm-md.knm-layout-bordered, .knm-layout-bordered .knm-md) { border-width: 2px; }
:is(.knm-md.knm-layout-bordered, .knm-layout-bordered .knm-md) .knm-md-seg { border-width: 2px; }
:is(.knm-md.knm-layout-borderless, .knm-layout-borderless .knm-md) .knm-md-seg { border: 0; }
:is(.knm-md.knm-layout-filled, .knm-layout-filled .knm-md) .knm-md-seg {
    background-color: var(--knm-filled-bg, var(--knm-md-chrome)); border: 0; border-bottom: 2px solid transparent;
}

/*
 * The roots carry knm-fields-no-label-space (the library's compact field, no room for an inner label). Its compact height is
 * still the library's (about 38px at Medium, 31px at Small), while the editor's own inputs are 30px: a KNM field without a
 * label keeps 30px so both line up in the inspector rows, and takes from the layout only its shape.
 */
.knm-md .knm-field:not(.has-label) > .knm-field__box { --knm-field-h: 30px; }
/* Zero specificity: our own raw controls inherit the editor's font and colour, KNM components keep their own styles */
:where(.knm-md) :where(button, input, select) { font: inherit; color: inherit; }
/* Fields draw their own focus (KNM fields, .knm-md-input): the ring is for buttons, tiles and nodes only */
.knm-md :focus-visible:not(input, select, textarea, [contenteditable]) { outline: 2px solid var(--knm-md-accent); outline-offset: 2px; }
.knm-md-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.knm-md-grow { flex: 1 1 auto; }
.knm-md-spin { animation: knm-md-spin 1s linear infinite; }
@keyframes knm-md-spin { to { transform: rotate(360deg); } }

/* Buttons of the chrome */

.knm-md-icon-btn {
    border: 0; background: none; padding: 6px; border-radius: var(--knm-md-radius);
    color: var(--knm-md-ink-2); cursor: pointer; display: inline-grid; place-items: center; font-size: 16px; line-height: 1;
}
.knm-md-icon-btn:hover:not(:disabled) { background: var(--knm-md-chrome); color: var(--knm-md-ink); }
.knm-md-icon-btn:disabled { opacity: .4; cursor: default; }
.knm-md-icon-btn.is-on { background: var(--knm-md-accent-soft); color: var(--knm-md-accent); }
.knm-md-icon-btn--small { padding: 3px; font-size: 13px; }


.knm-md-seg { display: inline-flex; border: 1px solid var(--knm-md-line); border-radius: var(--knm-md-control-radius); overflow: hidden; background: var(--knm-md-surface); }
.knm-md-seg__item { border: 0; background: none; padding: 5px 10px; cursor: pointer; color: var(--knm-md-ink-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.knm-md-seg__item + .knm-md-seg__item { border-left: 1px solid var(--knm-md-line); }
.knm-md-seg__item:hover { color: var(--knm-md-ink); }
.knm-md-seg__item.is-on { background: var(--knm-md-accent-soft); color: var(--knm-md-accent); font-weight: 600; }
.knm-md-seg--small .knm-md-seg__item { padding: 3px 9px; min-width: 32px; justify-content: center; }
.knm-md-seg--small .knm-md-seg__item i { font-size: 14px; }

/* Top bar */

.knm-md-top {
    display: grid; grid-template-columns: var(--knm-md-rail-width) minmax(0, 1fr) auto; align-items: center;
    border-bottom: 1px solid var(--knm-md-line); background: var(--knm-md-surface); min-width: 0;
}
.knm-md-brand { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 100%; border-right: 1px solid var(--knm-md-line); min-width: 0; }
.knm-md-logo {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 5px; background: var(--knm-md-accent); color: var(--knm-md-on-accent);
    display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.knm-md-logo--image { background: none; object-fit: contain; }
.knm-md-docname { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1 1 auto; }
.knm-md-docname__input {
    border: 1px solid transparent; background: transparent; border-radius: var(--bs-border-radius-sm, 4px); padding: 2px 6px; margin-left: -7px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-weight: 700 !important; min-width: 0; width: 100%; text-overflow: ellipsis;
}
.knm-md-docname__input:hover { border-color: var(--knm-md-line); }
/* Focused, it reads as the host's own fields: Bootstrap's focus border and ring. */
.knm-md-docname__input:focus {
    border-color: var(--bs-focus-border-color, var(--knm-md-accent)); background: var(--bs-body-bg, var(--knm-md-surface)); outline: none;
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color, color-mix(in srgb, var(--knm-md-accent) 25%, transparent));
}
.knm-md-docname__field { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0; cursor: text; }
.knm-md-docname__pen { flex: 0 0 auto; font-size: 12px; color: var(--knm-md-ink-2); opacity: .7; }
.knm-md-docname__field:hover .knm-md-docname__pen, .knm-md-docname__input:focus + .knm-md-docname__pen { color: var(--knm-md-accent); opacity: 1; }
.knm-md-docname__state { font-size: 11px; color: var(--knm-md-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knm-md-top__center { display: flex; justify-content: center; gap: 6px; align-items: center; min-width: 0; }
.knm-md-top__center .knm-md-seg { margin-left: 8px; }
.knm-md-top__actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 14px; }
.knm-md-drawer-toggle { display: none; }

/* Work area */

.knm-md-work {
    display: grid; grid-template-columns: var(--knm-md-rail-width) minmax(0, 1fr) var(--knm-md-inspector-width);
    min-height: 0; position: relative;
}
.knm-md-rail, .knm-md-inspector-pane { background: var(--knm-md-surface); min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; }
.knm-md-rail { border-right: 1px solid var(--knm-md-line); }
.knm-md-inspector-pane { border-left: 1px solid var(--knm-md-line); }
.knm-md-scrim { display: none; }

.knm-md-note { color: var(--knm-md-ink-2); font-size: 12px; margin: 8px 14px 14px; }
.knm-md-note--tight { margin: 0; }

/* Left rail */

.knm-md-rail__inner.is-disabled { opacity: .45; }
.knm-md-tabs { display: flex; border-bottom: 1px solid var(--knm-md-line); padding: 0 8px; }
.knm-md-tabs__tab { border: 0; background: none; padding: 10px 10px 9px; color: var(--knm-md-ink-2); border-bottom: 2px solid transparent; cursor: pointer; }
.knm-md-tabs__tab:hover { color: var(--knm-md-ink); }
.knm-md-tabs__tab.is-on { color: var(--knm-md-ink); border-color: var(--knm-md-accent); font-weight: 600; }


.knm-md-group-tiles { padding: 4px 12px 14px; }
.knm-md-group-tiles h3 { font-size: 12px; font-weight: 600; color: var(--knm-md-ink-2); margin: 6px 2px 8px; }

.knm-md-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.knm-md-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px;
    border: 1px solid transparent; border-radius: var(--knm-md-radius); background: none; cursor: grab; color: var(--knm-md-ink);
}
.knm-md-tile:hover { border-color: var(--knm-md-line); background: var(--knm-md-chrome); }
.knm-md-tile i { font-size: 22px; color: var(--knm-md-ink-2); }
.knm-md-tile small { font-size: 11.5px; }

.knm-md-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.knm-md-lay {
    height: 34px; border: 1px solid var(--knm-md-line); border-radius: 4px; display: flex; gap: 3px; padding: 4px;
    cursor: grab; background: var(--knm-md-surface);
}
.knm-md-lay i { flex: 1 1 0; background: color-mix(in srgb, var(--knm-md-ink-2) 22%, var(--knm-md-surface)); border-radius: 2px; }
.knm-md-lay:hover { border-color: var(--knm-md-accent); }
.knm-md-lay.is-on { border-color: var(--knm-md-accent); background: var(--knm-md-accent-soft); }
.knm-md-lay.is-on i { background: var(--knm-md-accent-line); }
.knm-md-layouts--inspector .knm-md-lay { cursor: pointer; height: 30px; }
.knm-md-lay--mini { width: 38px; height: 20px; padding: 3px; gap: 2px; cursor: inherit; flex: 0 0 auto; }

/* Layers */

.knm-md-layers { padding: 8px 8px 16px; }
/* Rows, indentation, focus and selection come from KNMTreeView; a layer is only the content of its row. */
.knm-md-layer {
    display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: 0; background: none;
    border-radius: 4px; padding: 4px 6px; cursor: pointer; color: var(--knm-md-ink); min-width: 0;
}
.knm-md-layer i { color: var(--knm-md-ink-2); font-size: 14px; flex: 0 0 auto; }
.knm-md-layer span { white-space: nowrap; }
.knm-md-layer small { color: var(--knm-md-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.knm-md-layer:hover { background: var(--knm-md-chrome); }
.knm-md-layer.is-on { background: var(--knm-md-accent-soft); color: var(--knm-md-accent); font-weight: 600; }
.knm-md-layer.is-on i { color: var(--knm-md-accent); }
.knm-md-layer.is-hidden-device { opacity: .55; }
.knm-md-layers .knm-md-layer { padding: 0; background: none; cursor: inherit; border-radius: 0; }
.knm-md-layers .knm-md-layer.is-on { background: none; }

/* Stage */

.knm-md-stage { background: var(--knm-md-stage); overflow: auto; position: relative; min-width: 0; outline: none; container: knm-md-stage / size; }
/* The stage is focusable only to receive the keyboard shortcuts: no ring on mouse focus, a thin one from the keyboard */
.knm-md .knm-md-stage:focus { outline: none; }
.knm-md .knm-md-stage:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--knm-md-accent-line); }
.knm-md-canvas { padding: 20px 24px 40px; min-height: 100%; }

.knm-md-ruler {
    display: flex; justify-content: center; margin: 0 auto 10px; color: var(--knm-md-ink-2); font-size: 11px;
    position: relative; transition: width .35s ease; max-width: 100%;
}
.knm-md-ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--knm-md-line-strong); }
.knm-md-ruler span { background: var(--knm-md-stage); padding: 0 8px; position: relative; }

/*
 * Devices. Desktop is a mail client's reading pane: as wide as the stage allows, taller than short content, the
 * page colour filling it all around the centred content. Tablet and phone are frames with a screen of fixed size
 * (set inline from DeviceGeometry): status bar and inbox header stay put, the message scrolls inside.
 */
.knm-md-device { margin: 0 auto; transition: padding .35s ease, border-radius .35s ease; }
.knm-md-device--desktop { width: 100%; max-width: 1180px; border: 1px solid var(--knm-md-line); border-radius: 8px; overflow: hidden; box-shadow: var(--knm-md-shadow); background: var(--knm-md-surface); }
.knm-md-device--tablet { width: max-content; padding: 18px; border-radius: 26px; background: var(--knm-md-device-2); box-shadow: 0 18px 40px rgb(var(--knm-md-shade) / .2); }
.knm-md-device--mobile { width: max-content; padding: 14px 12px 22px; border-radius: 44px; background: var(--knm-md-device); box-shadow: 0 18px 40px rgb(var(--knm-md-shade) / .25); }

.knm-md-screen { display: flex; flex-direction: column; background: var(--knm-md-surface); }
.knm-md-device--tablet .knm-md-screen { border-radius: 12px; overflow: hidden; }
.knm-md-device--mobile .knm-md-screen { border-radius: 32px; overflow: hidden; }
.knm-md-device--desktop .knm-md-screen { min-height: max(520px, calc(100cqh - 96px)); }

/* The e-mail viewport: the page colour paints all of it, around and below the content, never the stage */
.knm-md-viewport { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* No side padding: a full-width row background reaches the edges of the pane; the rows keep the content width. */
.knm-md-device--desktop .knm-md-viewport { padding: 28px 0 40px; }
.knm-md-device--tablet .knm-md-viewport, .knm-md-device--mobile .knm-md-viewport { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
/* Room above the first row for the name tab and the toolbar of a selection, which sit outside the node. */
.knm-md-device--tablet .knm-md-viewport, .knm-md-device--mobile .knm-md-viewport { padding-top: 26px; }

/*
 * The sheet spans the viewport; each row sits in a band as wide as the pane and is itself as wide as the content
 * (--knm-md-w, set by the canvas): on the content colour, on the page colour (placement "page"), or inside a band
 * painted with its own background (full-width background), as the renderer lays them out.
 */
.knm-md-sheet { width: 100%; line-height: 1.5; font-size: 16px; flex: 0 0 auto; }
.knm-md-band > .knm-md-section, .knm-md-band > .knm-md-slotnode {
    width: var(--knm-md-w, 600px); max-width: 100%; margin-left: auto; margin-right: auto; transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) {
    .knm-md-ruler, .knm-md-device, .knm-md-band > .knm-md-section, .knm-md-band > .knm-md-slotnode, .knm-md-bc > .knm-bc__tree > .knm-bc__ins { transition: none; }
}

/* Inbox header: status bar on tablet and phone, a thinner header on the desktop pane */

.knm-md-inbox { flex: 0 0 auto; font-family: var(--knm-md-font); background: var(--knm-md-surface); border-bottom: 1px solid var(--knm-md-line); color: var(--knm-md-ink); }
.knm-md-inbox__status { display: flex; justify-content: space-between; padding: 8px 18px 4px; font-size: 11.5px; font-weight: 600; }
.knm-md-inbox__status i { font-size: 12px; }
.knm-md-inbox__head { padding: 6px 16px 10px; min-width: 0; }
.knm-md-device--desktop .knm-md-inbox__head { padding: 10px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.knm-md-inbox__from { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--knm-md-ink-2); }
.knm-md-inbox__from b { color: var(--knm-md-ink); }
.knm-md-inbox__avatar {
    width: 24px; height: 24px; border-radius: 50%; background: var(--knm-md-accent); color: var(--knm-md-on-accent);
    display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
.knm-md-inbox__subject { font-size: 14px; font-weight: 600; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knm-md-device--desktop .knm-md-inbox__subject { font-size: 15px; margin-top: 4px; }
.knm-md-inbox__subject.is-empty { color: var(--knm-md-ink-2); font-style: italic; font-weight: 400; }
.knm-md-inbox__pre { font-size: 12px; color: var(--knm-md-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Code view: the canvas is zoomed to its half of the stage (ratios emitted by the canvas per container width) */
.knm-md-split__canvas { container: knm-md-code / inline-size; }
.knm-md-canvas--zoomed { padding-left: 24px; padding-right: 24px; }
.knm-md-canvas--zoomed .knm-md-device--desktop .knm-md-screen { min-height: 520px; }

/* Sections, columns, blocks: the node frames of KNMBlockCanvas (KNM.RazorComponents), which owns selection, the node
   bar, the insert points and their catalogue, drag and drop and the keyboard. These rules draw its frames as the mail
   canvas has always looked; its own rules stay in charge of everything not restated here. */

.knm-md-bc {
    --knm-canvas-accent: var(--knm-md-accent);
    --knm-canvas-accent-soft: var(--knm-md-accent-soft);
    --knm-canvas-accent-line: var(--knm-md-accent-line);
    --knm-canvas-on-accent: var(--knm-md-on-accent);
    --knm-canvas-tag-bg: var(--knm-md-accent);
    --knm-canvas-ink: var(--knm-md-ink);
    --knm-canvas-muted: var(--knm-md-ink-2);
    --knm-canvas-line: var(--knm-md-line-strong);
    --knm-canvas-surface: var(--knm-md-surface);
    --knm-canvas-danger: var(--knm-md-danger);
    --knm-canvas-gap: 14px;
    /* The text colour is the e-mail's, set on the sheet, not the interface ink. */
    color: inherit;
}

/* Insert points between rows sit at the content width, on the content colour when the rows around them do. */
.knm-md-bc > .knm-bc__tree > :is(.knm-bc__ins, .knm-bc__gap) {
    width: var(--knm-md-w, 600px); max-width: 100%; margin-left: auto; margin-right: auto; transition: width .35s ease;
}
.knm-md-bc > .knm-bc__tree > .knm-bc__ins:not(.is-live):first-child:has(+ .is-content),
.knm-md-bc > .knm-bc__tree > .is-content + .knm-bc__ins:not(.is-live):has(+ .is-content),
.knm-md-bc > .knm-bc__tree > .is-content + .knm-bc__ins:not(.is-live):last-child { background-color: var(--knm-md-content-bg); }

.knm-md-section { position: relative; }
.knm-md-cols { display: flex; }
.knm-md-cols.is-stacked { flex-direction: column; }
.knm-md-col { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 40px; }
.knm-md-cols.is-stacked > .knm-md-col { flex-basis: auto; max-width: 100%; }
/* Stacked columns touch, as in the e-mail: a stacked row is a vertical list, whose insert points would otherwise take
   the full --knm-canvas-gap. The live insert point keeps its own height. */
.knm-md-cols.is-stacked { --knm-canvas-children-gap: 0px; }
/* The column's vertical alignment (justify-content on the frame) reaches its blocks through the canvas wrappers. */
.knm-md-col > .knm-bc__content, .knm-md-nodebox--column { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: inherit; min-height: 0; }
.knm-md-bc.knm-bc .knm-bc__node.knm-md-col.knm-bc__node--container:not(.is-selected):hover { outline: none; }
.knm-md-bc.knm-bc .knm-bc__node.knm-md-col.is-selected { outline: 1px dashed var(--knm-md-accent); outline-offset: -1px; }

.knm-md-block { cursor: default; }
.knm-md-block .knm-et__content { cursor: text; }
.knm-md-bc .knm-bc__node.knm-md-block:not(.is-selected):hover { outline-offset: 0; }
.knm-md-block.is-selected { z-index: 2; }
.knm-md-section.is-hidden-device, .knm-md-col.is-hidden-device, .knm-md-block.is-hidden-device { opacity: .38; background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--knm-md-ink-2) 12%, transparent) 6px 7px); }

/* Name tabs. A row shows its name while the pointer is anywhere on it; a block or a column only when selected. The tab
   of the selection sits OUTSIDE the node, on its top-left edge, and never covers the node's own content. */
.knm-md-bc .knm-bc__tag { font-family: var(--knm-md-font); }
.knm-md-bc .knm-bc__node.knm-md-section:not(.is-selected):hover > .knm-bc__tag { top: -19px; bottom: auto; font-size: 11px; line-height: 1.4; }
.knm-md-bc .knm-bc__node.knm-md-col.is-selected > .knm-bc__tag { font-weight: 500; }
/* While the text of a block is edited, its formatting toolbar floats where the tab and the node bar sit. */
.knm-md-block.is-editing > :is(.knm-bc__tag, .knm-bc__bar) { display: none; }

/* The node bar: up, down, duplicate, delete (confirmed in place) and the drag handle. */
.knm-md-bc .knm-bc__bar { padding: 0; border-color: var(--knm-md-line); box-shadow: 0 2px 6px rgb(var(--knm-md-shade) / .08); font: 12px/1.4 var(--knm-md-font); }
.knm-md-bc .knm-bc__bar :is(.knm-button--icon.btn-sm, .knm-bc__handle) { width: 26px; height: 21px; border-radius: 0; }
.knm-md-bc .knm-bc__bar :is(.knm-button--icon.btn-sm, .knm-bc__handle):hover { background: var(--knm-md-chrome); color: var(--knm-md-ink); }
/* The handle closes the bar (no «select container» on it: the inspector breadcrumb and the Left arrow key do that). */
.knm-md-bc .knm-bc__bar > .knm-bc__handle { order: 1; }
.knm-md-bc .knm-bc__node.knm-md-block > .knm-bc__bar { right: -2px; bottom: auto; top: -28px; }
.knm-md-bc .knm-bc__node.knm-md-section > .knm-bc__bar { right: 0; bottom: auto; top: -26px; }

/* The «+» catalogue */
.knm-md-bc .knm-bc__menu {
    min-width: 200px; border-color: var(--knm-md-line); border-radius: var(--knm-md-radius); gap: 1px;
    box-shadow: 0 8px 24px rgb(var(--knm-md-shade) / .16); font: 13px/1.45 var(--knm-md-font);
}

.knm-md-empty { display: grid; justify-items: center; gap: 4px; padding: 40px 24px 16px; text-align: center; color: var(--knm-md-ink-2); font-family: var(--knm-md-font); font-size: 13px; }
.knm-md-empty > i { font-size: 32px; }
.knm-md-empty strong { color: var(--knm-md-ink); font-size: 15px; }

/* Block approximations (the preview shows the real e-mail) */

.knm-md-view p { margin: 0 0 .75em; }
.knm-md-view p:last-child { margin-bottom: 0; }
.knm-md-view--heading { font-weight: 700; line-height: 1.25; }
.knm-md-view--h1 { font-size: 28px; }
.knm-md-view--h2 { font-size: 22px; }
.knm-md-view--h3 { font-size: 18px; }
.knm-md-button { display: inline-block; padding: 12px 24px; font-weight: 700; font-size: 16px; line-height: 20px; }
.knm-md-button--full { display: block; text-align: center; }
/* With an icon the label (a block-level text surface) sits beside it, as in the mail, not above or below. */
.knm-md-button--icon { display: inline-flex; align-items: center; }
.knm-md-button--icon.knm-md-button--full { display: flex; justify-content: center; }
.knm-md-button--icon > .knm-md-et { min-width: 0; }
.knm-md-view--image img { max-width: 100%; height: auto; display: inline-block; vertical-align: top; }
.knm-md-view--qr img { max-width: 100%; height: auto; display: inline-block; vertical-align: top; }
.knm-md-qr-placeholder { min-height: 120px; }
.knm-md-image-placeholder {
    display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 120px; border-radius: 4px;
    font: 13px var(--knm-md-font); color: var(--knm-md-ink-2);
    background: linear-gradient(135deg, color-mix(in srgb, var(--knm-md-accent) 8%, var(--knm-md-chrome)), color-mix(in srgb, var(--knm-md-accent) 18%, var(--knm-md-chrome)));
}
.knm-md-image-draft { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.knm-md-image-draft > img { display: block; max-width: 100%; height: auto; }
.knm-md-image-draft__note {
    position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: .3rem; padding: 2px 8px; border-radius: 999px;
    font: 12px/1.6 var(--knm-md-font); color: var(--knm-md-ink-2); background: color-mix(in srgb, var(--knm-md-chrome) 88%, transparent);
    border: 1px solid var(--knm-md-line);
}
.knm-md-rule { display: inline-block; vertical-align: middle; border-top: 1px solid var(--knm-md-line-strong); }
.knm-md-view--divider { line-height: 0; }
.knm-md-view--list ul, .knm-md-view--list ol { margin: 0; padding-left: 1.4em; }
.knm-md-video { position: relative; display: inline-block; max-width: 100%; }
.knm-md-video img { max-width: 100%; height: auto; display: block; }
.knm-md-video--fill { display: block; width: 100%; }
.knm-md-video .knm-md-image-placeholder { min-width: 240px; }
.knm-md-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 48px; color: var(--knm-md-on-media); opacity: .9; filter: drop-shadow(0 2px 6px rgb(var(--knm-md-media-shade) / .35)); }
.knm-md-view--generic { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--knm-md-line-strong); border-radius: 4px; font: 12px var(--knm-md-font); color: var(--knm-md-ink-2); }
.knm-md-view--unknown { padding: .75rem; color: var(--knm-md-ink-2); border: 1px dashed var(--knm-md-line); font: 12px var(--knm-md-font); }
.knm-md-link { text-decoration: underline; color: var(--knm-md-mail-link, var(--knm-md-accent)); }
.knm-md-chip {
    display: inline-block; font: 12px/1.5 var(--knm-md-font); background: var(--knm-md-accent-soft); color: var(--knm-md-accent);
    border: 1px solid var(--knm-md-accent-line); border-radius: 4px; padding: 0 5px; vertical-align: 1px;
}

.knm-md-view--menu .knm-md-menu__sep { opacity: .6; }
.knm-md-view--menu { color: var(--knm-md-mail-link, var(--knm-md-accent)); }
.knm-md-social {
    display: inline-grid; place-items: center; border-radius: 50%; vertical-align: middle;
    background: color-mix(in srgb, var(--knm-md-ink-2) 14%, transparent); color: var(--knm-md-ink);
}
.knm-md-view--table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.knm-md-view--table td { vertical-align: top; overflow-wrap: anywhere; }
.knm-md-view--table td.is-head { font-weight: 700; }
.knm-md-view--html { display: grid; gap: 4px; padding: 10px 12px; border: 1px dashed var(--knm-md-line-strong); border-radius: 4px; font: 12px var(--knm-md-font); color: var(--knm-md-ink-2); }
.knm-md-view--html code { font: 11.5px/1.4 var(--knm-md-font-mono); color: var(--knm-md-ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.knm-md-view--html__tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/*
 * Inline text (KNMEditableText): the text inherits font, size, colour and alignment from the block, with no chrome
 * of the component. Tokens look like the variable chips; the floating toolbar is ours.
 */
.knm-md-et { position: relative; min-width: 0; }
.knm-md .knm-md-et .knm-et { --knm-et-active-outline: none; --knm-et-hover-bg: transparent; --knm-et-placeholder-color: color-mix(in srgb, currentColor 45%, transparent); }
.knm-md .knm-md-et .knm-et, .knm-md .knm-md-et .knm-et__content { font: inherit; color: inherit; text-align: inherit; line-height: inherit; padding: 0; margin: 0; background: none; border: 0; min-height: 1em; }
.knm-md .knm-md-et .knm-et__content { outline: none; cursor: text; overflow-wrap: anywhere; }
.knm-md .knm-md-et .knm-et__content p, .knm-md .knm-md-et .knm-et__content div { margin: 0 0 .75em; }
.knm-md .knm-md-et .knm-et__content p:last-child, .knm-md .knm-md-et .knm-et__content div:last-child { margin-bottom: 0; }
.knm-md .knm-md-et .knm-et__content a { color: var(--knm-md-mail-link, var(--knm-md-accent)); text-decoration: underline; }
.knm-md-button .knm-md-et .knm-et__content a { color: inherit; }
.knm-md .knm-md-et [data-knm-token] {
    display: inline-block; font: 12px/1.5 var(--knm-md-font); font-weight: 400; font-style: normal; text-decoration: none;
    background: var(--knm-md-accent-soft); color: var(--knm-md-accent); border: 1px solid var(--knm-md-accent-line);
    border-radius: 4px; padding: 0 5px; vertical-align: 1px; white-space: nowrap; user-select: all;
}
.knm-md-block.is-selected .knm-md-et .knm-et--active .knm-et__content { cursor: text; }
/* A list: one paragraph per item, drawn as list items */
/* A list as the renderer writes it: a marker column (--knm-md-marker) with "•" or "n.", then the item, half a line
   (--knm-md-item-gap) between items; no indent before the marker. */
.knm-md .knm-md-et--list .knm-et__content { padding-left: 0; counter-reset: knm-md-li; }
.knm-md .knm-md-et--list .knm-et__content > p, .knm-md .knm-md-et--list .knm-et__content > div {
    display: block; position: relative; margin: 0 0 var(--knm-md-item-gap, 8px); padding-left: var(--knm-md-marker, 24px); counter-increment: knm-md-li;
}
.knm-md .knm-md-et--list .knm-et__content > p:last-child, .knm-md .knm-md-et--list .knm-et__content > div:last-child { margin-bottom: 0; }
.knm-md .knm-md-et--list .knm-et__content > p::before, .knm-md .knm-md-et--list .knm-et__content > div::before {
    content: "•"; position: absolute; left: 0; top: 0; width: var(--knm-md-marker, 24px);
}
.knm-md .knm-md-et--ol .knm-et__content > p::before, .knm-md .knm-md-et--ol .knm-et__content > div::before { content: counter(knm-md-li) "."; }

/* Floating format toolbar (rendered by the component in the top layer, with our buttons) */
.knm-et__toolbar.knm-md-fmt {
    /* The toolbar sits inside the sheet, which carries the e-mail's font and text colour: the chrome's are set back here,
       and the component's own --knm-et-* variables are mapped onto the editor tokens so it follows a dark host theme. */
    --knm-et-btn-color: var(--knm-md-ink);
    --knm-et-btn-hover-bg: var(--knm-md-hover);
    --knm-et-btn-active-bg: var(--knm-md-accent-soft);
    padding: 3px; border-radius: 7px; border: 1px solid var(--knm-md-line); background: var(--knm-md-surface); color: var(--knm-md-ink);
    box-shadow: 0 6px 20px rgb(var(--knm-md-shade) / .16); font: 12.5px/1.3 var(--knm-md-font);
    display: grid; gap: 2px; margin: 0;
}
.knm-md-fmt__row { display: flex; align-items: center; gap: 1px; }
.knm-md-fmt__sep { width: 1px; height: 18px; background: var(--knm-md-line); margin: 0 3px; }
.knm-md-fmt__vars { display: grid; gap: 1px; max-height: 220px; overflow-y: auto; border-top: 1px solid var(--knm-md-line); padding-top: 3px; }
.knm-md-fmt__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: none; padding: 4px 6px; border-radius: 5px; cursor: pointer; text-align: left; }
.knm-md-fmt__item:hover, .knm-md-fmt__item:focus-visible { background: var(--knm-md-hover); }
.knm-md-fmt .knm-md-chip { font-size: 12px; }

/* Link form under the text (replaces the package's link dialog: the editor opens no dialog) */
.knm-md-linkbar {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(340px, 100%); min-width: 260px;
    display: grid; gap: 8px; padding: 10px; font: 13px/1.4 var(--knm-md-font); color: var(--knm-md-ink); text-align: left;
    background: var(--knm-md-surface); border: 1px solid var(--knm-md-line); border-radius: 8px; box-shadow: 0 8px 24px rgb(var(--knm-md-shade) / .16);
}
.knm-md-linkbar__fields { display: grid; gap: 6px; }
.knm-md-linkbar__actions { display: flex; align-items: center; gap: 6px; }
.knm-md-linkbar__error { margin: 0; color: var(--knm-md-danger); font-size: 12px; }
/* The open link form floats over what follows its block: the insertion "+" below it (z-index 5, clickable even while
   invisible) and the next columns and rows, each its own stacking context (container queries). Every ancestor up to the
   row band is lifted, or the "+" of the column would take the click meant for "Applica". */
.knm-md-block:has(.knm-md-linkbar), .knm-md-col:has(.knm-md-linkbar), .knm-md-section:has(.knm-md-linkbar) { z-index: 30; }
.knm-md-band:has(.knm-md-linkbar) { position: relative; z-index: 30; }

/* Split view: canvas + generated code */

.knm-md-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; }
.knm-md-split__canvas { overflow-x: hidden; overflow-y: auto; min-height: 0; }
.knm-md-output { background: var(--knm-md-surface); display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.knm-md-output--code { border-left: 1px solid var(--knm-md-line); }
.knm-md-output__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--knm-md-line); }
.knm-md-output__head h2 { font-size: 13px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; }
.knm-md-output__head small { color: var(--knm-md-ink-2); font-size: 11px; }
.knm-md-output__tabs { padding: 8px 10px 0; font-size: 13px; }
.knm-md-output__tabs .nav-link { padding: 4px 10px; font-size: 12.5px; }
.knm-md-output__code { font-size: 12px; }
.knm-md-output--code .knm-md-output__code pre { max-height: calc(100cqh - 260px); }
.knm-md-output--export .knm-md-output__code pre { max-height: 360px; }
.knm-md-output__issues { padding: 8px 14px 14px; }

/* Test send, at the top of the export panel (only when the host offers it) */
.knm-md-sendtest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 14px 12px; border-bottom: 1px solid var(--knm-md-line); font: 13px/1.4 var(--knm-md-font); }
.knm-md-sendtest__title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; }
.knm-md-sendtest__label { font-size: 12px; color: var(--knm-md-ink-2); }
.knm-md-sendtest__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.knm-md-sendtest__row > select { flex: 0 1 140px; width: auto; }
.knm-md-sendtest__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.knm-md-sendtest__result { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.knm-md-sendtest__result i { margin-top: 2px; }
.knm-md-sendtest__result--ok { color: var(--knm-md-ok); }
.knm-md-sendtest__result--error { color: var(--knm-md-danger); }
.knm-md-sendtest .knm-md-hint { margin: 0; }
.knm-md-output__issues h3 { font-size: 12px; font-weight: 600; color: var(--knm-md-ink-2); margin: 6px 0; display: flex; align-items: center; gap: 6px; }
/* Pre-flight issues (KNMList): compact rows in the editor's type scale, the severity in the icon's colour. */
.knm-md-issues {
    --knm-list-item-gap: 8px; --knm-list-item-padding: 6px 8px; --knm-list-item-icon-size: 16px;
    --knm-list-item-primary-size: 13px; --knm-list-item-primary-weight: 400; --knm-list-item-primary-color: var(--knm-md-ink);
    --knm-list-item-secondary-size: 11px; --knm-list-item-secondary-color: var(--knm-md-ink-2); --knm-list-item-border: 0;
}
.knm-md-issues .knm-list-item { align-items: flex-start; border-radius: 4px; }
.knm-md-issues .knm-list-item-icon { width: 16px; margin-top: 1px; }
.knm-md-issue--warning .knm-list-item-icon { color: var(--knm-md-warn); }
.knm-md-issue--error .knm-list-item-icon { color: var(--knm-md-danger); }
.knm-md-issues__support { margin-top: 6px; }
.knm-md-issues__codes { --knm-list-item-padding: 4px 6px; --knm-list-item-primary-size: 11px; --knm-list-item-secondary-size: 11px; --knm-list-item-border: 0; }

.knm-md-searchbox { margin: 12px; }

/* Preview mode */

.knm-md-preview { padding: 0 24px 32px; min-height: 100%; }
.knm-md-preview__bar {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; margin: 0 -24px 18px; padding: 8px 24px;
    background: var(--knm-md-preview-bar-bg); border-bottom: 1px solid var(--knm-md-line); /* opaque: the message scrolls under it */
}
.knm-md-preview__title { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* One line under the bar saying what the Scuro / Invertito preview shows */
.knm-md-preview__caption {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; max-width: 760px; margin: -8px auto 14px; padding: 6px 10px;
    border-radius: var(--knm-md-radius); font-size: 12.5px; line-height: 1.45; color: var(--knm-md-ink-2);
    background: var(--knm-md-surface); border: 1px solid var(--knm-md-line);
}
.knm-md-preview__caption i { color: var(--knm-md-accent); position: relative; top: 1px; }
.knm-md-preview__caption span { flex: 1 1 280px; min-width: 0; }
.knm-md-preview__caption--warn { border-color: color-mix(in srgb, var(--knm-md-warn) 45%, var(--knm-md-line)); }
.knm-md-preview__caption--warn i { color: var(--knm-md-warn); }
.knm-md-linkbtn { border: 0; background: none; padding: 0; color: var(--knm-md-accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.knm-md-linkbtn:hover { filter: brightness(.9); }
.knm-md-preview__bar .knm-field, .knm-md-preview__bar .knm-toggle { margin: 0; }
.knm-md-preview__bar { flex-wrap: wrap; row-gap: 8px; }
.knm-md-preview__bar .knm-button { white-space: nowrap; }
/* The test recipient of the preview: one field per variable, as many per row as the stage allows */
.knm-md-recipient { margin: -8px 0 18px; padding: 12px 14px; border: 1px solid var(--knm-md-line); border-radius: var(--knm-md-radius); background: var(--knm-md-surface); display: flex; flex-direction: column; gap: 10px; }
.knm-md-recipient__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; }
.knm-md-recipient__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.knm-md-recipient__field > label { font-size: 12px; color: var(--knm-md-ink-2); }
.knm-md-recipient__field .knm-field { margin: 0; }
.knm-md-recipient__list { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.knm-md-recipient__listlabel { font-size: 12px; color: var(--knm-md-ink-2); }
.knm-md-recipient__tablewrap { max-width: 100%; overflow-x: auto; }
.knm-md-recipient__table { border-collapse: collapse; }
.knm-md-recipient__table th { font-size: 12px; font-weight: 500; color: var(--knm-md-ink-2); text-align: left; padding: 0 6px 4px 0; }
.knm-md-recipient__table td { padding: 0 6px 4px 0; vertical-align: middle; }
.knm-md-recipient__table .knm-md-input { min-width: 110px; }
.knm-md-recipient__num { font-size: 12px; color: var(--knm-md-ink-2); text-align: right; }
.knm-md-preview__frame { display: block; border: 0; background: var(--knm-md-surface); flex: 1 1 auto; min-height: 0; }
.knm-md-device--desktop .knm-md-preview__frame { width: 100%; height: max(520px, calc(100cqh - 180px)); }

/* Inspector */

.knm-md-crumbs { padding: 10px 14px; border-bottom: 1px solid var(--knm-md-line); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--knm-md-ink-2); font-size: 12px; }
.knm-md-crumbs button { border: 0; background: none; padding: 0; color: var(--knm-md-ink-2); cursor: pointer; }
.knm-md-crumbs button:hover { color: var(--knm-md-accent); text-decoration: underline; }
.knm-md-crumbs b { color: var(--knm-md-ink); font-weight: 600; }
.knm-md-ihead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px 4px; }
.knm-md-ihead i { font-size: 18px; color: var(--knm-md-accent); }
.knm-md-ihead h2 { font-size: 15px; font-weight: 600; margin: 0; }

.knm-md-group { border-bottom: 1px solid var(--knm-md-line); }
.knm-md-group__head { margin: 0; font-size: 13px; }
.knm-md-group__head button {
    width: 100%; border: 0; background: none; cursor: pointer; padding: 10px 14px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; color: var(--knm-md-ink);
}
.knm-md-group__head i { color: var(--knm-md-ink-2); transition: transform .15s; }
.knm-md-group.is-open .knm-md-group__head i { transform: rotate(180deg); }
.knm-md-rows { padding: 0 14px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* Short controls: one line, label in a fixed column (never wraps; the tooltip carries the full text) */
.knm-md-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 30px; }
.knm-md-row__label {
    color: var(--knm-md-ink-2); margin: 0; font-weight: 400; font-size: 13px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.knm-md-row__control { min-width: 0; display: flex; align-items: center; gap: 6px; }
.knm-md-row__control > * { min-width: 0; }
/* Long values: label above, full width */
.knm-md-stackrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-width: 0; }
.knm-md-row__hint { grid-column: 1 / -1; }
.knm-md-stackrow__hint, .knm-md-togglerow__hint, .knm-md-row__hint { font-size: 11.5px; line-height: 1.35; color: var(--knm-md-ink-2); }
.knm-md-togglerow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; min-width: 0; }
.knm-md-togglerow__label { font-size: 12px; color: var(--knm-md-ink); cursor: pointer; }
.knm-md-togglerow__hint { grid-column: 2; }
.knm-md-stackrow__label { color: var(--knm-md-ink-2); margin: 0; font-size: 13px; line-height: 1.3; font-weight: 400; }
.knm-md-devs { display: flex; gap: 18px; }
.knm-md-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--knm-md-ink-2); display: flex; gap: 6px; align-items: baseline; }
.knm-md-hint--error { color: var(--knm-md-danger); }
.knm-md-unit { color: var(--knm-md-ink-2); font-size: 12px; flex: 0 0 auto; }

/* Plain inputs of the panel, the same size as the compact RazorComponents controls */
.knm-md-input {
    display: block; width: 100%; min-width: 0; height: 30px; padding: 4px 8px; font-size: 13px; line-height: 20px;
    color: var(--knm-md-ink); background: var(--knm-md-surface); border: 1px solid var(--knm-md-line); border-radius: var(--knm-md-control-radius);
    outline: none; transition: border-color .12s, box-shadow .12s;
}
.knm-md-input::placeholder { color: color-mix(in srgb, var(--knm-md-ink-2) 70%, transparent); }
.knm-md-input:hover:not(:disabled) { border-color: var(--knm-md-line-strong); }
.knm-md-input:focus { border-color: var(--knm-md-accent); box-shadow: 0 0 0 3px var(--knm-md-accent-soft); }
.knm-md-input:disabled { background: var(--knm-md-chrome); color: var(--knm-md-ink-2); }
.knm-md-input.is-invalid { border-color: var(--knm-md-danger); }
.knm-md-input--select {
    appearance: none; padding-right: 26px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 13px) 13px, calc(100% - 9px) 13px; background-size: 4px 4px; background-repeat: no-repeat;
}
.knm-md-number { display: flex; align-items: center; gap: 6px; }
.knm-md-number > :first-child { flex: 0 0 96px; width: 96px; max-width: 96px; }
.knm-md-url { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }

/* RazorComponents controls at panel size */
.knm-md-inspector .knm-field, .knm-md-settings .knm-field, .knm-md-inspector .mb-3 { margin-bottom: 0; }
.knm-md-inspector .form-control, .knm-md-inspector .form-select,
.knm-md-preview__bar .form-control {
    font-size: 13px; padding: 4px 8px; min-height: 30px; height: 30px; line-height: 20px;
}
.knm-md-inspector .input-group-text { font-size: 12px; padding: 4px 8px; background: transparent; color: var(--knm-md-ink-2); border-color: var(--knm-md-line); }
.knm-md-inspector .form-label { font-size: 12px; margin-bottom: 2px; color: var(--knm-md-ink-2); }
.knm-md-inspector .knm-md-richtext { font-size: 13px; }

/* Colour: the picker's trigger fills the control; unset shows an automatic swatch */
.knm-md-colorfield { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.knm-md-colorfield .knm-md-picker-compact, .knm-md-colorfield .knm-colorpicker-compact { flex: 1 1 auto; min-width: 0; }
.knm-md-colorfield .knm-colorpicker-compact__trigger {
    width: 100%; min-height: 30px; height: 30px; padding: 3px 8px; gap: 8px; font-size: 13px; justify-content: flex-start;
    border-color: var(--knm-md-line); border-radius: var(--knm-md-control-radius);
}
.knm-md-colorfield .knm-colorpicker-compact__value { font-family: var(--knm-md-font); font-size: 13px; text-transform: lowercase; margin-right: auto; }
/* The picker's own swatch border is black at 15%, lost on a dark inspector next to a dark colour: same edge as ours. */
.knm-md-colorfield .knm-colorpicker-compact__swatch { width: 18px; height: 18px; border-radius: 4px; border-color: var(--knm-md-line-strong); }
.knm-md-auto {
    flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 30px; padding: 3px 8px; min-width: 0;
    border: 1px solid var(--knm-md-line); border-radius: var(--knm-md-control-radius); background: var(--knm-md-surface);
    color: var(--knm-md-ink-2); cursor: pointer; text-align: left;
}
.knm-md-auto:hover { border-color: var(--knm-md-line-strong); color: var(--knm-md-ink); }
.knm-md-auto__swatch {
    flex: 0 0 18px; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--knm-md-line-strong);
    background:
        linear-gradient(to top right, transparent calc(50% - 1px), var(--knm-md-danger) calc(50% - 1px), var(--knm-md-danger) calc(50% + 1px), transparent calc(50% + 1px)),
        repeating-conic-gradient(color-mix(in srgb, var(--knm-md-ink-2) 18%, transparent) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
}

.knm-md-clear {
    flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
    border: 1px solid transparent; border-radius: var(--knm-md-radius); background: none; cursor: pointer;
}
.knm-md-clear:hover { border-color: var(--knm-md-line); background: var(--knm-md-chrome); }
.knm-md-clear--slot { cursor: default; }
.knm-md-clear--slot:hover { border-color: transparent; background: none; }

/* Image: thumbnail tile (upload target), remove action, address */
.knm-md-image { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.knm-md-image__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.knm-md-image__drop { flex: 1 1 auto; min-width: 0; }
.knm-md-image__tile {
    flex: 0 0 60px; width: 60px; height: 60px; border-radius: 6px; overflow: hidden; display: grid; place-items: center;
    border: 1px solid var(--knm-md-line); background: var(--knm-md-chrome); color: var(--knm-md-ink-2); font-size: 22px;
}
.knm-md-image__tile.is-empty { border-style: dashed; background: repeating-conic-gradient(color-mix(in srgb, var(--knm-md-ink-2) 8%, transparent) 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.knm-md-image__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.knm-md-image__action { display: grid; gap: 1px; min-width: 0; text-align: left; font-size: 13px; }
.knm-md-image__action b { color: var(--knm-md-accent); font-weight: 600; }
.knm-md-image__action small { color: var(--knm-md-ink-2); font-size: 11.5px; }
.knm-md-image__remove { flex: 0 0 auto; }
/* The dropzone is reduced to the tile and its caption: the whole row is the click and drop target */
.knm-md .knm-dropzone.knm-md-dropzone {
    margin: 0; padding: 4px; min-height: 0; border: 1px solid transparent; border-radius: 8px; background: none; box-shadow: none;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; cursor: pointer;
}
.knm-md .knm-dropzone.knm-md-dropzone:hover, .knm-md .knm-dropzone.knm-md-dropzone[class*="drag"] { border-color: var(--knm-md-accent-line); background: var(--knm-md-accent-soft); }

/* Box-model spacing widget */
.knm-md-box { position: relative; height: 104px; border: 1px dashed var(--knm-md-line-strong); border-radius: 6px; background: var(--knm-md-chrome); }
.knm-md-box__inner {
    position: absolute; inset: 30px 60px; border: 1px solid var(--knm-md-line); background: var(--knm-md-surface); border-radius: 4px;
    display: grid; place-items: center; color: var(--knm-md-ink-2); font-size: 11px;
}
.knm-md-box input {
    position: absolute; width: 48px; text-align: center; border: 1px solid transparent; background: transparent; border-radius: 4px;
    padding: 2px; -moz-appearance: textfield; appearance: textfield;
}
.knm-md-box input::-webkit-outer-spin-button, .knm-md-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.knm-md-box input:hover, .knm-md-box input:focus { border-color: var(--knm-md-line); background: var(--knm-md-surface); outline: none; }
.knm-md-box__t { top: 4px; left: 50%; transform: translateX(-50%); }
.knm-md-box__b { bottom: 4px; left: 50%; transform: translateX(-50%); }
.knm-md-box__l { left: 6px; top: 50%; transform: translateY(-50%); }
.knm-md-box__r { right: 6px; top: 50%; transform: translateY(-50%); }

/* Menu and social items */
.knm-md-items { display: grid; gap: 8px; }
.knm-md-item { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--knm-md-line); border-radius: var(--knm-md-radius); background: var(--knm-md-surface); }
.knm-md-item__head, .knm-md-item__link { display: flex; align-items: center; gap: 6px; min-width: 0; }
.knm-md-item__head > .knm-md-input { flex: 1 1 auto; }
.knm-md-item__icon { font-size: 18px; color: var(--knm-md-ink-2); flex: 0 0 auto; }
.knm-md-item__tools { display: inline-flex; flex: 0 0 auto; }
.knm-md-item__var { flex: 0 0 40%; }
.knm-md-items__add { justify-self: start; }

/* Table grid */
.knm-md-grid { display: grid; gap: 8px; }
.knm-md-grid__scroll { overflow-x: auto; border: 1px solid var(--knm-md-line); border-radius: var(--knm-md-radius); }
.knm-md-grid__table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.knm-md-grid__table th, .knm-md-grid__table td { border: 1px solid var(--knm-md-line); padding: 0; font-weight: 400; }
.knm-md-grid__table thead th { background: var(--knm-md-chrome); padding: 2px 4px; }
.knm-md-grid__table tr.is-head td { background: color-mix(in srgb, var(--knm-md-accent) 6%, var(--knm-md-surface)); }
.knm-md-grid__table tr.is-head .knm-md-grid__cell { font-weight: 600; }
.knm-md-grid__corner { width: 44px; }
.knm-md-grid__colhead { display: flex; align-items: center; gap: 2px; }
.knm-md-grid__width.knm-md-input { width: 46px; height: 24px; padding: 2px 4px; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.knm-md-grid__rowtools { white-space: nowrap; background: var(--knm-md-chrome); }
.knm-md-grid__cell.knm-md-input { border: 0; border-radius: 0; height: 28px; min-width: 70px; box-shadow: none; background: transparent; }
.knm-md-grid__cell.knm-md-input:focus { box-shadow: inset 0 0 0 2px var(--knm-md-accent); }
.knm-md-grid__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Text properties of host blocks (KNMRichTextEditor in the panel) */
.knm-md-richtext [data-knm-var], .knm-md-richtext [data-knm-token] {
    display: inline-block; padding: 0 .4em; border-radius: 4px; color: var(--knm-md-accent); background: var(--knm-md-accent-soft);
}

/* Raw HTML */
.knm-md-code { display: grid; gap: 6px; font-size: 12px; }

/* Status bar */

.knm-md-status {
    display: flex; align-items: center; gap: 14px; padding: 0 14px; border-top: 1px solid var(--knm-md-line);
    background: var(--knm-md-surface); color: var(--knm-md-ink-2); font-size: 12px; min-width: 0; white-space: nowrap;
}
.knm-md-status__ok { color: var(--knm-md-ok); font-weight: 600; }
.knm-md-status__warn { color: var(--knm-md-warn); font-weight: 600; }
.knm-md-status__error { color: var(--knm-md-danger); font-weight: 600; }
.knm-md-status .knm-md-status__issue {
    display: block; min-width: 0; padding: 0 4px; color: var(--knm-md-ink-2); text-align: left; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px;
}
.knm-md-status .knm-md-status__issue:hover:not(:disabled) { color: var(--knm-md-accent); text-decoration: underline; }
.knm-md-meter { display: flex; align-items: center; gap: 8px; }
.knm-md-meter i { display: block; width: 120px; height: 5px; border-radius: 3px; background: var(--knm-md-line); overflow: hidden; }
.knm-md-meter b { display: block; height: 100%; background: var(--knm-md-ok); min-width: 2px; }
.knm-md-meter--warn b { background: var(--knm-md-warn); }
.knm-md-meter--over { color: var(--knm-md-danger); font-weight: 600; }
.knm-md-meter--over b { background: var(--knm-md-danger); }

/* Narrow containers (a modal, a split host): rail and inspector become drawers inside the editor */

@container knm-md (max-width: 1099px) {
    .knm-md-top { grid-template-columns: minmax(0, 1fr) auto auto; }
    .knm-md-brand { border-right: 0; padding-right: 6px; }
    /* The document name keeps room to be read: the logo gives way (the host page shows its own brand) and the device
       switch keeps its icons only. */
    .knm-md-brand .knm-md-logo { display: none; }
    .knm-md-docname { min-width: 9rem; }
    .knm-md-seg__item span { display: none; }
    .knm-md-drawer-toggle { display: inline-grid; }
    .knm-md-work { grid-template-columns: minmax(0, 1fr); }
    .knm-md-rail, .knm-md-inspector-pane {
        position: absolute; top: 0; bottom: 0; z-index: 30; width: min(var(--knm-md-inspector-width), 88%);
        box-shadow: 0 8px 32px rgb(var(--knm-md-shade) / .22); display: none;
    }
    .knm-md-rail { left: 0; width: min(var(--knm-md-rail-width), 88%); }
    .knm-md-inspector-pane { right: 0; }
    .knm-md-rail.is-open, .knm-md-inspector-pane.is-open { display: block; }
    .knm-md-scrim { display: block; position: absolute; inset: 0; z-index: 25; background: rgb(var(--knm-md-shade) / .18); }
    .knm-md-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
    .knm-md-output--code { border-left: 0; border-top: 1px solid var(--knm-md-line); }
}

@container knm-md (max-width: 760px) {
    .knm-md-seg__item span, .knm-md-top__actions .knm-button span { display: none; }
    .knm-md-top__actions { gap: 4px; padding: 0 8px; }
    .knm-md-status .knm-md-status__issue, .knm-md-meter i { display: none; }
}

/* ===================================================================================================================
 * Pass 3: placement, languages, plain text, preview theme, pre-flight, start screen, saved blocks, block manager.
 * Same tokens and density as the rest of the editor.
 * =================================================================================================================== */

.knm-md {
    --knm-md-warn-soft: color-mix(in srgb, var(--knm-md-warn) 12%, transparent);
    --knm-md-warn-line: color-mix(in srgb, var(--knm-md-warn) 45%, transparent);
}

/* Small shared pieces */
.knm-md-badge {
    display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 8px; white-space: nowrap;
    font: 500 11px/1.6 var(--knm-md-font); background: var(--knm-md-chrome); border: 1px solid var(--knm-md-line); color: var(--knm-md-ink-2);
}
.knm-md-badge--warn { background: var(--knm-md-warn-soft); border-color: var(--knm-md-warn-line); color: var(--knm-md-warn); }
.knm-md-badge--ok { background: color-mix(in srgb, var(--knm-md-ok) 10%, transparent); border-color: color-mix(in srgb, var(--knm-md-ok) 35%, transparent); color: var(--knm-md-ok); }
.knm-md-chip--muted { background: var(--knm-md-chrome); color: var(--knm-md-ink-2); border-color: var(--knm-md-line); }
.knm-md-hint--warn { color: var(--knm-md-warn); }
.knm-md-seg--full { display: flex; width: 100%; }
.knm-md-seg--full .knm-md-seg__item { flex: 1 1 0; justify-content: center; }

/* Popovers inside the editor (no dialog): a scrim catches the click that closes them */
.knm-md-popscrim { position: absolute; inset: 0; z-index: 40; }
.knm-md-top, .knm-md-status { position: relative; z-index: 45; }
.knm-md-pop {
    position: absolute; z-index: 50; background: var(--knm-md-surface); border: 1px solid var(--knm-md-line);
    border-radius: 8px; box-shadow: 0 12px 32px rgb(var(--knm-md-shade) / .18); padding: 6px; font: 13px/1.45 var(--knm-md-font);
    color: var(--knm-md-ink); white-space: normal; text-align: left;
}
.knm-md-pop__head { display: grid; gap: 2px; padding: 6px 8px 8px; border-bottom: 1px solid var(--knm-md-line); margin-bottom: 4px; }
.knm-md-pop__head small { color: var(--knm-md-ink-2); font-size: 12px; }
.knm-md-pop__head--row { display: flex; align-items: center; gap: 8px; }

/* Language switcher */
.knm-md-lang { position: relative; margin-left: 8px; }
.knm-md-lang__code { font-weight: 600; letter-spacing: .02em; }
.knm-md-lang__caret { font-size: 11px !important; color: var(--knm-md-ink-2); }
.knm-md-lang__pop { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 340px; max-width: 90cqw; }
.knm-md-lang__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.knm-md-lang__item { display: flex; align-items: center; gap: 4px; border-radius: 5px; padding-right: 4px; }
.knm-md-lang__item:hover { background: var(--knm-md-chrome); }
.knm-md-lang__item.is-current { background: var(--knm-md-accent-soft); }
.knm-md-lang__pick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 8px; cursor: pointer; text-align: left; }
.knm-md-lang__pick > i { color: var(--knm-md-accent); width: 14px; }
.knm-md-lang__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knm-md-lang__item.is-current .knm-md-lang__name { font-weight: 600; color: var(--knm-md-accent); }
.knm-md-lang__tools, .knm-md-lang__confirm { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.knm-md-lang__add { display: grid; gap: 5px; padding: 8px 8px 4px; border-top: 1px solid var(--knm-md-line); margin-top: 4px; }
.knm-md-lang__addrow { display: flex; align-items: center; gap: 6px; }
.knm-md-lang__addrow > .knm-field { flex: 1 1 auto; min-width: 0; margin: 0; }
.knm-md-lang__addrow > :last-child { flex: 0 0 auto; }

/* Translating: the inspector says it, untranslated fields and blocks are marked in amber */
.knm-md-translating {
    display: flex; gap: 8px; align-items: flex-start; margin: 8px 14px 4px; padding: 7px 10px; border-radius: var(--knm-md-radius);
    background: var(--knm-md-warn-soft); color: var(--knm-md-ink); font-size: 12px; line-height: 1.4;
}
.knm-md-translating i { color: var(--knm-md-warn); margin-top: 2px; }
/* Outdated translation of a block: the explanation on its own line, «Ancora valida» under it on the right */
.knm-md-outdated { margin: 4px 14px 8px; flex-wrap: wrap; align-items: flex-start; }
.knm-md-outdated .knm-md-grow { flex-basis: calc(100% - 20px); }
.knm-md-outdated__actions { display: flex; justify-content: flex-end; width: 100%; }
.knm-md-row__state { margin-right: 5px; color: var(--knm-md-ink-2); font-size: 12px; }
.knm-md-row__state--warn { color: var(--knm-md-warn); }
.knm-md-row.is-untranslated .knm-md-row__label, .knm-md-stackrow.is-untranslated > .knm-md-stackrow__label { color: var(--knm-md-warn); }
.knm-md-stackrow.is-untranslated .knm-md-input, .knm-md-row.is-untranslated .knm-md-input { border-color: var(--knm-md-warn-line); background: color-mix(in srgb, var(--knm-md-warn) 5%, var(--knm-md-surface)); }
.knm-md-stackrow__label .knm-md-badge { margin-left: 6px; }
.knm-md-block.is-untranslated:not(.is-selected) { outline: 1px dashed var(--knm-md-warn); outline-offset: 2px; }
.knm-md-block.is-untranslated .knm-et__content { color: color-mix(in srgb, currentColor 72%, transparent); }

/* Locked parts of a saved block: visible, not editable */
.knm-md-row.is-locked .knm-md-row__control, .knm-md-stackrow.is-locked > :not(label), .knm-md-togglerow.is-locked > :not(label) { pointer-events: none; opacity: .55; }
.knm-md-row.is-locked, .knm-md-stackrow.is-locked, .knm-md-togglerow.is-locked { cursor: not-allowed; }

/* What an unset background shows: the swatch shows that colour under the slash, a line says where it comes from */
.knm-md-row__note { grid-column: 2; margin-top: -6px; font-size: 11.5px; line-height: 1.35; color: var(--knm-md-ink-2); }
.knm-md-auto__swatch--backdrop {
    background:
        linear-gradient(to top right, transparent calc(50% - 1px), var(--knm-md-danger) calc(50% - 1px), var(--knm-md-danger) calc(50% + 1px), transparent calc(50% + 1px)),
        var(--knm-md-backdrop);
}
.knm-md-auto__swatch--var { background: var(--knm-md-backdrop, var(--knm-md-chrome)); }
.knm-md-auto small { margin-left: auto; color: var(--knm-md-ink-2); }
.knm-md-colorvar {
    flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 30px; padding: 3px 3px 3px 8px; min-width: 0;
    border: 1px solid var(--knm-md-line); border-radius: var(--knm-md-radius); background: var(--knm-md-surface);
}
.knm-md-colorvar .knm-md-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.knm-md-colorvar__sample { color: var(--knm-md-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.knm-md-placement { display: grid; gap: 6px; }

/* Canvas: rows on the page, full-width bands, the content slot of a layout, saved-block instances */
.knm-md-section.is-on-page:not(.is-selected):not(:hover) { outline: 1px dotted color-mix(in srgb, var(--knm-md-ink-2) 30%, transparent); outline-offset: -1px; }
.knm-md-contentslot {
    position: relative; display: grid; justify-items: center; gap: 4px; min-height: 120px; padding: 28px 16px; text-align: center;
    border: 2px dashed var(--knm-md-accent-line); color: var(--knm-md-ink-2); font: 13px/1.4 var(--knm-md-font); cursor: default;
    background-image: repeating-linear-gradient(135deg, transparent 0 10px, var(--knm-md-accent-soft) 10px 11px);
}
.knm-md-contentslot > i { font-size: 26px; color: var(--knm-md-accent); }
.knm-md-contentslot strong { color: var(--knm-md-ink); font-size: 14px; }
.knm-md-contentslot.is-selected { border-color: var(--knm-md-accent); }
/* The brand layout around a template: drawn from the composed document, locked (inert), muted, labelled once. */
.knm-md-layoutpart { position: relative; cursor: not-allowed; }
.knm-md-layoutpart__label {
    display: flex; align-items: center; gap: 4px; width: var(--knm-md-w, 600px); max-width: 100%; margin: 4px auto;
    font: 11px/1.4 var(--knm-md-font); color: var(--knm-md-ink-2); transition: width .35s ease;
}
.knm-md-layoutpart__label > i { color: var(--knm-md-accent); }
.knm-md-layoutpart__body { position: relative; opacity: .6; filter: saturate(.6); user-select: none; }
.knm-md-layoutpart__body .knm-md-section.is-locked { outline: 1px dashed var(--knm-md-line-strong); outline-offset: -1px; }
@media (prefers-reduced-motion: reduce) { .knm-md-layoutpart__label { transition: none; } }
.knm-md-linkbadge {
    position: absolute; right: 4px; top: 4px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    background: var(--knm-md-accent-soft); color: var(--knm-md-accent); border: 1px solid var(--knm-md-accent-line); font-size: 11px;
}
.knm-md-section > .knm-md-linkbadge { right: 6px; top: 6px; }
/* A node shown only to some recipients: a small «⑂ Solo se» pill on its bottom edge, clear of the text and the toolbar */
.knm-md-condbadge {
    position: absolute; right: 8px; bottom: 4px; z-index: 3; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px;
    border-radius: 999px; background: var(--knm-md-accent-soft); color: var(--knm-md-accent); border: 1px solid var(--knm-md-accent-line);
    font: 600 10px/16px var(--knm-md-font); pointer-events: auto; cursor: help;
}
/* A row or block repeated over a list: the list's name, top right (the condition badge sits bottom right). */
.knm-md-repeat-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.knm-md-repeatbadge {
    position: absolute; right: 8px; top: 4px; z-index: 3; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px;
    border-radius: 999px; background: var(--knm-md-accent-soft); color: var(--knm-md-accent); border: 1px solid var(--knm-md-accent-line);
    font: 600 10px/16px var(--knm-md-font); pointer-events: auto; cursor: help;
}
.knm-md-condbadge.is-empty { background: var(--knm-md-surface); color: var(--knm-md-warn); border-color: var(--knm-md-warn); }
.knm-md-nodebox--section > .knm-md-condbadge { bottom: 4px; }
.knm-md-visibility { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; }

/* Social links as the e-mail writes them: icons from the host, or underlined text links */
.knm-md-social-img { display: inline-block; vertical-align: middle; border: 0; }
.knm-md-social-link { display: inline-block; font-size: 14px; line-height: 1.5; color: var(--knm-md-mail-link, var(--knm-md-accent)); text-decoration: underline; }
.knm-md-social-item { display: inline-block; vertical-align: middle; }
/* An item without an accepted link: the e-mail leaves it out (social) or writes plain text (menu). Never drawn as final. */
.knm-md-item-pending { opacity: .45; outline: 1px dashed var(--knm-md-warn); outline-offset: 2px; border-radius: 2px; cursor: help; }

/* Preview theme */
.knm-md-preview__frame--inverted { filter: invert(1) hue-rotate(180deg); }

/* Status bar: the pre-flight summary opens its list above the bar */
.knm-md-status .knm-md-status__summary { gap: 10px; padding: 2px 6px; margin-left: -6px; font: inherit; color: inherit; }
.knm-md-status__summary > span { display: inline-flex; align-items: center; gap: 4px; }
.knm-md-status__info { color: var(--knm-md-ink-2); font-weight: 600; }
.knm-md-status__caret { font-size: 10px; color: var(--knm-md-ink-2); }
.knm-md-issuespop { bottom: calc(100% + 6px); left: 8px; width: min(480px, calc(100% - 16px)); white-space: normal; }
.knm-md-issuespop__list { max-height: 320px; overflow-y: auto; padding: 2px; }

/* Start screen: the gallery inside the stage */
.knm-md-start { padding: 28px 32px 40px; max-width: 1180px; margin: 0 auto; }
.knm-md-start__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.knm-md-start__head h2 { font-size: 18px; font-weight: 700; margin: 0 0 2px; }
.knm-md-start__head p { margin: 0; color: var(--knm-md-ink-2); }
.knm-md-start__grid { display: grid; grid-template-columns: repeat(auto-fill, 214px); gap: 16px; justify-content: start; }
.knm-md-card {
    display: grid; gap: 8px; padding: 8px; border: 1px solid var(--knm-md-line); border-radius: 8px; background: var(--knm-md-surface);
    cursor: pointer; text-align: left; color: var(--knm-md-ink); transition: border-color .12s, box-shadow .12s;
}
.knm-md-card:hover:not(:disabled), .knm-md-card:focus-visible { border-color: var(--knm-md-accent); box-shadow: 0 4px 14px rgb(var(--knm-md-shade) / .1); }
.knm-md-card:disabled { opacity: .6; cursor: progress; }
.knm-md-card__body { display: grid; gap: 1px; padding: 0 2px 2px; min-width: 0; }
.knm-md-card__body b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knm-md-card__body small { color: var(--knm-md-ink-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knm-md-card__blank {
    display: grid; place-items: center; border: 1px dashed var(--knm-md-line-strong); border-radius: 5px; color: var(--knm-md-ink-2); font-size: 28px;
    background: repeating-conic-gradient(color-mix(in srgb, var(--knm-md-ink-2) 5%, transparent) 0 25%, transparent 0 50%) 0 0 / 14px 14px;
}
.knm-md-card--blank:hover .knm-md-card__blank { color: var(--knm-md-accent); border-color: var(--knm-md-accent); }
.knm-md-thumb { position: relative; overflow: hidden; border-radius: 5px; border: 1px solid var(--knm-md-line); background: var(--knm-md-stage); display: block; }
.knm-md-thumb iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: var(--knm-md-paper); }
.knm-md-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.knm-md-thumb__wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--knm-md-ink-2); font-size: 18px; }

/* Plain text, block by block, in the code view */
.knm-md-plain { display: grid; gap: 10px; padding: 10px 12px 16px; align-content: start; }
.knm-md-plain__mode { display: grid; gap: 2px; padding: 4px 2px 6px; border-bottom: 1px solid var(--knm-md-line); }
.knm-md-plain__mode .knm-md-row { grid-template-columns: minmax(0, 1fr) auto; }
.knm-md-row__label--wide { white-space: normal; color: var(--knm-md-ink); font-weight: 600; }
.knm-md-row__control--end { justify-content: flex-end; }
.knm-md-ptb { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--knm-md-line); border-radius: var(--knm-md-radius); background: var(--knm-md-surface); }
.knm-md-ptb.is-selected { border-color: var(--knm-md-accent); box-shadow: 0 0 0 2px var(--knm-md-accent-soft); }
.knm-md-ptb.is-untranslated { border-color: var(--knm-md-warn-line); }
.knm-md-ptb.is-excluded .knm-md-ptb__title { opacity: .6; }
.knm-md-ptb__head { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.knm-md-ptb__head > i { color: var(--knm-md-ink-2); }
.knm-md-ptb__title { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; min-width: 0; color: var(--knm-md-ink); }
.knm-md-ptb__title i { color: var(--knm-md-ink-2); }
.knm-md-ptb__title small { color: var(--knm-md-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.knm-md-ptb__title:hover b { color: var(--knm-md-accent); }
.knm-md-ptb__exclude .knm-field, .knm-md-ptb__exclude .form-check { margin: 0; font-size: 12px; }
.knm-md-ptb__text { padding: 6px 8px; border-radius: 4px; background: var(--knm-md-chrome); font: 13px/1.55 var(--knm-md-font); color: var(--knm-md-ink); min-height: 30px; }
.knm-md-ptb__text:focus-within { box-shadow: inset 0 0 0 1px var(--knm-md-accent); background: var(--knm-md-surface); }
.knm-md .knm-md-et--plain .knm-et__content p, .knm-md .knm-md-et--plain .knm-et__content div { margin: 0 0 .9em; }
.knm-md-ptb__suggest { display: grid; gap: 6px; padding: 6px 8px; border-radius: 4px; background: var(--knm-md-warn-soft); }
.knm-md-ptb__suggest .knm-button { justify-self: start; }
.knm-md-ptb__preview { margin: 0; white-space: pre-wrap; font: 12px/1.45 var(--knm-md-font-mono); color: var(--knm-md-ink-2); max-height: 120px; overflow: auto; }

/* Saved blocks: rail tab, save form, instance banner */
.knm-md-tile--saved { position: relative; }
.knm-md-tile--saved small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knm-md-tile__tag { position: absolute; top: 3px; right: 3px; font-size: 9.5px; padding: 0 4px; border-radius: 4px; background: var(--knm-md-chrome); color: var(--knm-md-ink-2); }
.knm-md-saveblock { display: grid; gap: 8px; margin: 6px 14px 8px; padding: 10px; border: 1px solid var(--knm-md-accent-line); border-radius: var(--knm-md-radius); background: var(--knm-md-accent-soft); }
.knm-md-saveblock__actions { display: flex; gap: 6px; align-items: center; }
/* «Sposta in…»: the same inline box as «Salva come blocco», one button per destination container. */
.knm-md-moveto { display: grid; gap: 6px; justify-items: start; margin: 6px 14px 8px; padding: 10px; border: 1px solid var(--knm-md-accent-line); border-radius: var(--knm-md-radius); background: var(--knm-md-accent-soft); }
.knm-md-moveto > .knm-md-saveblock__actions { justify-self: stretch; }
.knm-md-linkinfo { display: grid; gap: 6px; margin: 6px 14px 8px; padding: 8px 10px; border-radius: var(--knm-md-radius); background: var(--knm-md-accent-soft); border: 1px solid var(--knm-md-accent-line); }
.knm-md-linkinfo__head { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--knm-md-accent); }
.knm-md-linkinfo .knm-button { justify-self: start; }

/* Block manager (standalone component) */
.knm-md.knm-md-manager { grid-template-rows: none; grid-template-columns: 280px minmax(0, 1fr); min-height: 560px; }
.knm-md-manager > .knm-md-note { grid-column: 1 / -1; }
.knm-md-manager__list { border-right: 1px solid var(--knm-md-line); background: var(--knm-md-surface); overflow-y: auto; min-height: 0; }
.knm-md-manager__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 14px; }
.knm-md-manager__head h2 { font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; }
.knm-md-manager__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.knm-md-manager__items .knm-md-layer small { margin-left: auto; }
.knm-md-manager__detail { background: var(--knm-md-chrome); min-width: 0; overflow-y: auto; min-height: 0; }
.knm-md-manager__detail > .knm-md-empty { padding-top: 80px; }
.knm-md-manager__bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--knm-md-surface); border-bottom: 1px solid var(--knm-md-line); flex-wrap: wrap; }
.knm-md-manager__bar > i { font-size: 18px; color: var(--knm-md-accent); }
.knm-md-manager__bar h2 { font-size: 15px; font-weight: 600; margin: 0; }
.knm-md-manager__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding: 16px; align-items: start; }
.knm-md-manager__form { display: grid; gap: 12px; background: var(--knm-md-surface); border: 1px solid var(--knm-md-line); border-radius: 8px; padding: 14px; }
.knm-md-manager__icons { display: flex; flex-wrap: wrap; gap: 2px; }
.knm-md-manager__sub { font-size: 13px; font-weight: 600; margin: 6px 0 0; }
.knm-md-manager__parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.knm-md-manager__preview { display: grid; gap: 6px; position: sticky; top: 16px; }
.knm-md-part { display: grid; gap: 4px; padding: 6px 8px; border: 1px solid var(--knm-md-line); border-radius: var(--knm-md-radius); background: var(--knm-md-surface); }
.knm-md-part.is-locked { border-color: var(--knm-md-accent-line); background: var(--knm-md-accent-soft); }
.knm-md-part__head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.knm-md-part__head > i { color: var(--knm-md-ink-2); }
.knm-md-part__head small { color: var(--knm-md-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.knm-md-part__head .knm-field, .knm-md-part__field .knm-field, .knm-md-part .form-check { margin: 0; font-size: 12px; }
.knm-md-part__field { display: flex; align-items: center; gap: 8px; padding-left: 20px; flex-wrap: wrap; }
.knm-md-part__label.knm-md-input { height: 26px; width: 200px; flex: 0 1 200px; font-size: 12px; }
@container knm-md (max-width: 900px) {
    .knm-md.knm-md-manager { grid-template-columns: minmax(0, 1fr); }
    .knm-md-manager__body { grid-template-columns: minmax(0, 1fr); }
    .knm-md-manager__list { border-right: 0; border-bottom: 1px solid var(--knm-md-line); max-height: 280px; }
}

/* Pass 3 polish */
.knm-md-ihead h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knm-md-ihead .knm-button { flex: 0 0 auto; }
.knm-md-ptb__foot { display: flex; align-items: center; justify-content: flex-end; }
.knm-md-ptb__foot .knm-checkbox, .knm-md-ptb__foot label { font-size: 12px; color: var(--knm-md-ink-2); }
.knm-md-preview__bar .knm-toggle label, .knm-md-preview__bar .knm-toggle span { white-space: nowrap; }

/* A document the editor refused (limits, unreadable): the reason replaces the work area, nothing is editable */
.knm-md-loadfail { grid-row: 2 / 4; display: grid; place-items: center; padding: 24px 16px; background: var(--knm-md-chrome); overflow: auto; }
.knm-md-loadfail__card {
    max-width: 520px; display: grid; gap: 10px; justify-items: start; padding: 22px 24px;
    border: 1px solid var(--knm-md-line); border-left: 3px solid var(--knm-md-danger); border-radius: var(--knm-md-radius); background: var(--knm-md-surface);
}
.knm-md-loadfail__icon { font-size: 26px; color: var(--knm-md-danger); }
.knm-md-loadfail__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--knm-md-ink); }
.knm-md-loadfail__body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--knm-md-ink-2); }
.knm-md-loadfail__detail { margin: 0; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.45; color: var(--knm-md-ink); }
.knm-md-loadfail__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--knm-md-ink-2); }
.knm-md-loadfail__detail code { justify-self: start; font-size: 11.5px; color: var(--knm-md-ink-2); }

/* A document setting decided by the brand layout: shown read-only, with a way to customise it for this template */
.knm-md-fromlayout {
    flex: 1 1 auto; display: flex; align-items: center; gap: 6px; height: 30px; padding: 3px 3px 3px 8px; min-width: 0;
    border: 1px dashed var(--knm-md-line-strong); border-radius: var(--knm-md-radius); background: var(--knm-md-chrome); color: var(--knm-md-ink);
}
.knm-md-fromlayout__value { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.knm-md-fromlayout .knm-md-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.knm-md-overridden { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; }
.knm-md-overridden > :first-child { flex: 1 1 auto; min-width: 0; }

/* Conditional text: a chip like a variable's, dashed and marked with a branch, in the canvas and in the text surface. */
.knm-md-chip--choice, .knm-md .knm-md-et [data-knm-choice] { border-style: dashed; }
.knm-md-chip--choice::before, .knm-md .knm-md-et [data-knm-choice]::before { content: "⑂ "; opacity: .7; }

/* One line with variable chips in a panel (subject, preheader, texts of a conditional text): the field grows, the
   «{} Variabile» button sits at its end, the list opens under it. */
.knm-md-line { position: relative; display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.knm-md-line__surface { flex: 1 1 auto; min-width: 0; }
/* A long subject wraps inside the field (the panel is narrow) instead of running past its border; it stays one line. */
.knm-md-line__surface .knm-et__content { white-space: normal; overflow-wrap: anywhere; }
.knm-md-line__var { flex: 0 0 auto; align-self: center; }
/* Two tools would squeeze the text in a side panel: the text takes the whole row and the tools go under it. */
.knm-md-line.has-tools { flex-wrap: wrap; }
.knm-md-line.has-tools .knm-md-line__surface { flex-basis: 100%; }
.knm-md-line [data-knm-token] {
    display: inline-block; font: 12px/1.5 var(--knm-md-font); background: var(--knm-md-accent-soft); color: var(--knm-md-accent);
    border: 1px solid var(--knm-md-accent-line); border-radius: 4px; padding: 0 5px; vertical-align: 1px; white-space: nowrap; user-select: all;
}
.knm-md-line [data-knm-choice] { border-style: dashed; }
.knm-md-line [data-knm-choice]::before { content: "⑂ "; opacity: .7; }
.knm-md-line__menu {
    position: absolute; z-index: 30; right: 0; top: calc(100% + 4px); display: grid; min-width: 180px; max-height: 260px; overflow: auto;
    padding: 4px; background: var(--knm-md-surface); border: 1px solid var(--knm-md-line); border-radius: 6px;
    box-shadow: 0 6px 18px rgb(0 0 0 / .12);
}
.knm-md-line__item { justify-content: flex-start; }

/* Conditional texts of the selected block, in the inspector. */
.knm-md-choices { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--knm-md-line); }
.knm-md-choices__title { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 12px var(--knm-md-font); color: var(--knm-md-ink-2); }
.knm-md-choices__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.knm-md-choices__row .knm-md-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.knm-md-choice { display: grid; gap: 8px; padding: 8px; border: 1px dashed var(--knm-md-accent-line); border-radius: 6px; background: var(--knm-md-accent-soft); }
.knm-md-choice__lang { display: grid; gap: 4px; justify-items: start; }
.knm-md-choice__case { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--knm-md-line); border-radius: 6px; background: var(--knm-md-surface); }
.knm-md-choice__casehead { display: flex; align-items: center; justify-content: space-between; font: 12px var(--knm-md-font); }
.knm-md-choice__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Taking a field's value from a variable: the menu button sits by the field (at the end of a stacked field's label). */
.knm-md-stackrow__label:has(.knm-md-bind) { display: flex; align-items: center; gap: 6px; }
.knm-md-stackrow__label .knm-md-bind { margin-left: auto; }