/*
 * The visual canvas route (`Canvas\CanvasController`) — groundwork for the
 * drag-and-drop builder. This is a real page render, not admin chrome: it is
 * the only stylesheet this document loads besides the design-token sheet
 * (`banyan`), so it also carries the page-level defaults a Filament panel
 * would otherwise supply.
 *
 * The grid math mirrors `builder.css`'s `.bn-builder__grid` /
 * `.bn-builder__block` / `.bn-builder__areas` / `.bn-builder__area` exactly —
 * same 12-column track, same `--bn-block-span` custom property, same nested
 * area treatment — adapted for a full-width page rather than an admin panel
 * column. A block's own content styling (headings, rich text prose, …) is
 * deliberately not here: this file owns the layout skeleton only, and each
 * content type's display template brings its own presentational CSS (see
 * `demo/resources/css/canvas.css` for the demo's two block types).
 */

.bn-canvas-body {
    margin: 0;
    background-color: var(--bn-surface-2);
    color: var(--bn-text);
    font-family: var(--bn-font-sans);
    font-size: var(--bn-text-base);
    line-height: var(--bn-text-base-height);
}

.bn-canvas__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--bn-space-6);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--bn-space-8) var(--bn-space-6);
}

.bn-canvas__block {
    position: relative;
    grid-column: span var(--bn-block-span, 12) / span var(--bn-block-span, 12);
    min-width: 0;
    min-height: var(--bn-space-12, 3rem);
    padding: var(--bn-space-3);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-card);
    background-color: var(--bn-surface);
    box-sizing: border-box;
}

/* An explicit grip keeps text editing and block movement unambiguous. The
   button is emitted only in editor mode; the public page never gets editor
   controls. */
.bn-canvas__drag-handle {
    position: absolute;
    z-index: 1;
    top: var(--bn-space-2);
    inset-inline-end: var(--bn-space-2);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-input);
    background-color: color-mix(in srgb, var(--bn-surface) 92%, transparent);
    color: var(--bn-text-muted);
    cursor: grab;
}

.bn-canvas__drag-handle::before {
    content: '⋮⋮';
    font-size: var(--bn-text-base);
    line-height: 1;
    letter-spacing: -0.2em;
}

.bn-canvas__drag-handle:hover,
.bn-canvas__drag-handle:focus-visible {
    border-color: var(--bn-focus-ring);
    color: var(--bn-focus-ring);
}

.bn-canvas__drag-handle:focus-visible {
    outline: 2px solid var(--bn-focus-ring);
    outline-offset: 2px;
}

/* Governed presentation tokens emitted by LayoutStyle. */
.bn-canvas__block[data-style-surface='muted'] {
    background-color: var(--bn-surface-2);
}

.bn-canvas__block[data-style-surface='accent'] {
    background-color: color-mix(in srgb, var(--bn-primary) 8%, var(--bn-surface));
}

.bn-canvas__block[data-style-surface='dark'] {
    background-color: var(--bn-composed);
    color: var(--bn-primary-fg);
}

.bn-canvas__block[data-style-align='center'] > .bn-canvas__block-content {
    text-align: center;
}

.bn-canvas__block[data-style-align='end'] > .bn-canvas__block-content {
    text-align: end;
}

.bn-canvas__block[data-style-spacing='compact'] {
    padding: var(--bn-space-3);
}

.bn-canvas__block[data-style-spacing='spacious'] {
    padding: var(--bn-space-8);
}

.bn-canvas__block[data-style-visibility='hide'] {
    display: none;
}

.bn-canvas__block[data-style-motion='fade'] {
    animation: bn-canvas-fade 420ms ease both;
}

.bn-canvas__block[data-style-motion='rise'] {
    animation: bn-canvas-rise 420ms ease both;
}

.bn-canvas__block[data-style-motion='scale'] {
    animation: bn-canvas-scale 420ms ease both;
}

/* The inspector's colour and typography groups are still closed, design-token
   values. These selectors are the rendering half of those persisted handles;
   no user CSS or selector enters the layout document. */
.bn-canvas__block[data-style-colour='brand'] {
    color: var(--bn-primary);
}

.bn-canvas__block[data-style-colour='ink'] {
    color: var(--bn-composed);
}

.bn-canvas__block[data-style-typography='lead'] {
    font-size: var(--bn-text-lg);
    line-height: var(--bn-text-lg-height);
}

.bn-canvas__block[data-style-typography='display'] {
    font-size: var(--bn-text-2xl);
    line-height: var(--bn-text-2xl-height);
}

@media (min-width: 640px) and (max-width: 991px) {
    .bn-canvas__block[data-style-responsive-tablet-surface='muted'] {
        background-color: var(--bn-surface-2);
    }

    .bn-canvas__block[data-style-responsive-tablet-surface='accent'] {
        background-color: color-mix(in srgb, var(--bn-primary) 8%, var(--bn-surface));
    }

    .bn-canvas__block[data-style-responsive-tablet-surface='dark'] {
        background-color: var(--bn-composed);
    }

    .bn-canvas__block[data-style-responsive-tablet-align='start'] > .bn-canvas__block-content {
        text-align: start;
    }

    .bn-canvas__block[data-style-responsive-tablet-align='center'] > .bn-canvas__block-content {
        text-align: center;
    }

    .bn-canvas__block[data-style-responsive-tablet-align='end'] > .bn-canvas__block-content {
        text-align: end;
    }

    .bn-canvas__block[data-style-responsive-tablet-spacing='compact'] {
        padding: var(--bn-space-3);
    }

    .bn-canvas__block[data-style-responsive-tablet-spacing='comfortable'] {
        padding: var(--bn-space-5);
    }

    .bn-canvas__block[data-style-responsive-tablet-spacing='spacious'] {
        padding: var(--bn-space-8);
    }

    .bn-canvas__block[data-style-responsive-tablet-visibility='show'] {
        display: block;
    }

    .bn-canvas__block[data-style-responsive-tablet-visibility='hide'] {
        display: none;
    }

    .bn-canvas__block[data-style-responsive-tablet-motion='none'] {
        animation: none;
    }

    .bn-canvas__block[data-style-responsive-tablet-motion='fade'] {
        animation: bn-canvas-fade 420ms ease both;
    }

    .bn-canvas__block[data-style-responsive-tablet-motion='rise'] {
        animation: bn-canvas-rise 420ms ease both;
    }

    .bn-canvas__block[data-style-responsive-tablet-motion='scale'] {
        animation: bn-canvas-scale 420ms ease both;
    }

    .bn-canvas__block[data-style-responsive-tablet-colour='default'] {
        color: var(--bn-text);
    }

    .bn-canvas__block[data-style-responsive-tablet-colour='brand'] {
        color: var(--bn-primary);
    }

    .bn-canvas__block[data-style-responsive-tablet-colour='ink'] {
        color: var(--bn-composed);
    }

    .bn-canvas__block[data-style-responsive-tablet-typography='body'] {
        font-size: var(--bn-text-base);
        line-height: var(--bn-text-base-height);
    }

    .bn-canvas__block[data-style-responsive-tablet-typography='lead'] {
        font-size: var(--bn-text-lg);
        line-height: var(--bn-text-lg-height);
    }

    .bn-canvas__block[data-style-responsive-tablet-typography='display'] {
        font-size: var(--bn-text-2xl);
        line-height: var(--bn-text-2xl-height);
    }
}

@media (max-width: 639px) {
    .bn-canvas__block[data-style-responsive-mobile-surface='muted'] {
        background-color: var(--bn-surface-2);
    }

    .bn-canvas__block[data-style-responsive-mobile-surface='accent'] {
        background-color: color-mix(in srgb, var(--bn-primary) 8%, var(--bn-surface));
    }

    .bn-canvas__block[data-style-responsive-mobile-surface='dark'] {
        background-color: var(--bn-composed);
    }

    .bn-canvas__block[data-style-responsive-mobile-align='start'] > .bn-canvas__block-content {
        text-align: start;
    }

    .bn-canvas__block[data-style-responsive-mobile-align='center'] > .bn-canvas__block-content {
        text-align: center;
    }

    .bn-canvas__block[data-style-responsive-mobile-align='end'] > .bn-canvas__block-content {
        text-align: end;
    }

    .bn-canvas__block[data-style-responsive-mobile-spacing='compact'] {
        padding: var(--bn-space-3);
    }

    .bn-canvas__block[data-style-responsive-mobile-spacing='comfortable'] {
        padding: var(--bn-space-5);
    }

    .bn-canvas__block[data-style-responsive-mobile-spacing='spacious'] {
        padding: var(--bn-space-8);
    }

    .bn-canvas__block[data-style-responsive-mobile-visibility='show'] {
        display: block;
    }

    .bn-canvas__block[data-style-responsive-mobile-visibility='hide'] {
        display: none;
    }

    .bn-canvas__block[data-style-responsive-mobile-motion='none'] {
        animation: none;
    }

    .bn-canvas__block[data-style-responsive-mobile-motion='fade'] {
        animation: bn-canvas-fade 420ms ease both;
    }

    .bn-canvas__block[data-style-responsive-mobile-motion='rise'] {
        animation: bn-canvas-rise 420ms ease both;
    }

    .bn-canvas__block[data-style-responsive-mobile-motion='scale'] {
        animation: bn-canvas-scale 420ms ease both;
    }

    .bn-canvas__block[data-style-responsive-mobile-colour='default'] {
        color: var(--bn-text);
    }

    .bn-canvas__block[data-style-responsive-mobile-colour='brand'] {
        color: var(--bn-primary);
    }

    .bn-canvas__block[data-style-responsive-mobile-colour='ink'] {
        color: var(--bn-composed);
    }

    .bn-canvas__block[data-style-responsive-mobile-typography='body'] {
        font-size: var(--bn-text-base);
        line-height: var(--bn-text-base-height);
    }

    .bn-canvas__block[data-style-responsive-mobile-typography='lead'] {
        font-size: var(--bn-text-lg);
        line-height: var(--bn-text-lg-height);
    }

    .bn-canvas__block[data-style-responsive-mobile-typography='display'] {
        font-size: var(--bn-text-2xl);
        line-height: var(--bn-text-2xl-height);
    }
}

@keyframes bn-canvas-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bn-canvas-rise {
    from { opacity: 0; transform: translateY(var(--bn-space-2)); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bn-canvas-scale {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.bn-canvas__areas {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-4);
    margin-top: var(--bn-space-4);
}

.bn-canvas__area {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--bn-space-4);
}

.bn-canvas__empty {
    grid-column: 1 / -1;
    color: var(--bn-text-muted);
    text-align: center;
    padding: var(--bn-space-12) var(--bn-space-4);
}

/* ── Interactive state (the builder's Visual view) ────────────────────────
 *
 * The layout builder loads this page into an iframe and drives it from the
 * parent frame (`layout/builder.blade.php`), setting these attributes on the
 * blocks below. The rules live here, in the stylesheet the canvas page already
 * loads, rather than being injected as a `<style>` tag at runtime: they are
 * then declarative, sit beside the layout they decorate, and cannot be applied
 * a moment late on the first paint after a reload.
 *
 * Two attribute namespaces, deliberately kept apart. `data-block-*` is a
 * server-rendered *fact* about the block (its uuid, its span, whether a
 * template locked it); the bare `data-*` names here are live *interaction
 * state*, and they are the card builder's own — `data-dragged`, `data-drop`,
 * `data-drop-axis`, `data-dragging` all mean exactly what builder.css makes
 * them mean, so the two canvases speak one visual language rather than two.
 */

/*
 * The selected block: a strong, builder-style focus ring plus a type chip
 * so the canvas reads as an editing surface, not a live preview.
 */
.bn-canvas__block[data-selected='true'],
.bn-canvas__block[data-hover='true'] {
    position: relative;
}

.bn-canvas__block[data-selected='true'] {
    outline: 2px solid var(--bn-focus-ring);
    outline-offset: 2px;
    border-radius: var(--bn-radius-card);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--bn-focus-ring) 35%, transparent),
        var(--bn-elevation-card);
}

.bn-canvas__block[data-selected='true'][data-block-label]::before,
.bn-canvas__block[data-hover='true']:not([data-selected='true'])[data-block-label]::before {
    content: attr(data-block-label);
    position: absolute;
    z-index: 2;
    top: 0;
    inset-inline-start: 0;
    transform: translateY(calc(-100% - 2px));
    max-width: min(100%, 16rem);
    overflow: hidden;
    padding: 0.125rem 0.5rem;
    border-radius: var(--bn-radius-input) var(--bn-radius-input) 0 0;
    background-color: var(--bn-focus-ring);
    color: var(--bn-primary-fg);
    font-size: var(--bn-text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

.bn-canvas__block[data-hover='true']:not([data-selected='true'])[data-block-label]::before {
    background-color: color-mix(in srgb, var(--bn-focus-ring) 80%, transparent);
}

/*
 * The hovered block (SPEC-0075 §3.1): a quieter hint than selection — the
 * editor should be able to point without committing — drawn by the editor
 * runtime's delegated pointer tracking, not by per-block wiring.
 */
.bn-canvas__block[data-hover='true']:not([data-selected='true']) {
    outline: 1px solid color-mix(in srgb, var(--bn-focus-ring) 70%, transparent);
    outline-offset: 2px;
    border-radius: var(--bn-radius-card);
}

/*
 * The whole block is the drag source in this view — there is no chrome to hang
 * a grip on, so the grab cursor is the affordance. It covers the empty padding
 * that makes an unfilled block targetable too; nested blocks override it on
 * their own surface, and locked blocks never receive it (UX-0005 §9).
 *
 * Text fields override to a text cursor so click-to-edit reads as typing,
 * not as a drag handle.
 */
.bn-canvas__block:not([data-block-locked]) {
    cursor: grab;
}

.bn-canvas__block:not([data-block-locked])[data-dragged='true'] {
    cursor: grabbing;
}

.bn-canvas__block [data-banyan-editable] {
    cursor: text;
    border-radius: 2px;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.bn-canvas__block[data-selected='true'] [data-banyan-editable]:hover,
.bn-canvas__block [data-banyan-editable]:focus {
    background-color: color-mix(in srgb, var(--bn-focus-ring) 12%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--bn-focus-ring) 55%, transparent);
}

.bn-canvas__block [data-banyan-editable][contenteditable] {
    background-color: color-mix(in srgb, var(--bn-focus-ring) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bn-focus-ring) 45%, transparent);
    outline: none;
    caret-color: var(--bn-focus-ring);
}

/*
 * Empty nested areas: a drop target the editor can see before a drag starts.
 * Only while the frame runtime is live, so public/preview pages stay clean.
 */
html[data-banyan-editor-runtime] .bn-canvas__area:empty {
    min-height: 3.5rem;
    border: 1px dashed color-mix(in srgb, var(--bn-focus-ring) 45%, var(--bn-border-strong));
    border-radius: var(--bn-radius-card);
    background-color: color-mix(in srgb, var(--bn-focus-ring) 6%, transparent);
}

html[data-banyan-editor-runtime] .bn-canvas__area:empty::before {
    content: attr(data-area-alias);
    display: grid;
    place-items: center;
    min-height: 3.5rem;
    color: var(--bn-text-muted);
    font-size: var(--bn-text-xs, 0.75rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.85;
    pointer-events: none;
}

html[data-banyan-editor-runtime] .bn-canvas__area[data-drop='inside'],
html[data-banyan-editor-runtime] .bn-canvas__block[data-drop='inside'] {
    outline: 2px dashed var(--bn-focus-ring);
    outline-offset: 2px;
    background-color: color-mix(in srgb, var(--bn-focus-ring) 8%, transparent);
}

/*
 * A block held in a pointer drag — dashed, lifted and translucent, the same
 * treatment .bn-builder__block[data-dragged] gets. Shape and position, never
 * colour alone (UX-0005 §14), and the amber move role rather than the primary
 * ring so 'held' stays distinguishable from 'selected' above.
 */
.bn-canvas__block[data-dragged='true'] {
    opacity: 0.6;
    outline: 2px dashed var(--bn-focus-grabbed);
    outline-offset: 2px;
    box-shadow: var(--bn-elevation-dropdown);
}

/* Column guides are drawn only while a drag is live, so the page is not a cage. */
.bn-canvas__grid[data-dragging='true'],
.bn-canvas__area[data-dragging='true'] {
    background-image: repeating-linear-gradient(
        to right,
        var(--bn-border-strong) 0 1px,
        transparent 1px calc(100% / 12)
    );
}

/*
 * Where the drop will land: a line in the gap on the leading or trailing edge
 * of the block under the pointer — a position, not a tint, because a
 * highlighted block cannot say *which side* of itself the drop is going
 * (UX-0005 §14). Blocks narrower than the full 12 columns sit side by side, so
 * their line is vertical; a full-width block's is horizontal.
 */
.bn-canvas__block[data-drop] {
    position: relative;
}

.bn-canvas__block[data-drop]::after {
    content: '';
    position: absolute;
    background-color: var(--bn-focus-ring);
    border-radius: 999px;
    pointer-events: none;
}

.bn-canvas__block[data-drop-axis='block']::after {
    inset-inline: 0;
    height: 3px;
}

.bn-canvas__block[data-drop-axis='block'][data-drop='before']::after {
    top: calc(-1 * var(--bn-space-3));
}

.bn-canvas__block[data-drop-axis='block'][data-drop='after']::after {
    bottom: calc(-1 * var(--bn-space-3));
}

.bn-canvas__block[data-drop-axis='inline']::after {
    inset-block: 0;
    width: 3px;
}

.bn-canvas__block[data-drop-axis='inline'][data-drop='before']::after {
    inset-inline-start: calc(-1 * var(--bn-space-3));
}

.bn-canvas__block[data-drop-axis='inline'][data-drop='after']::after {
    inset-inline-end: calc(-1 * var(--bn-space-3));
}

/*
 * A palette component is a copy operation, distinct from moving an existing
 * block. Keep its marker in its own data namespace so the two gestures can
 * never visually overwrite one another while the iframe is receiving both
 * kinds of drag events.
 */
html[data-banyan-editor-runtime] .bn-canvas__block[data-component-drop] {
    position: relative;
}

html[data-banyan-editor-runtime] .bn-canvas__block[data-component-drop]::after {
    content: '';
    position: absolute;
    z-index: 3;
    background-color: var(--bn-focus-grabbed);
    border-radius: 999px;
    pointer-events: none;
}

html[data-banyan-editor-runtime] .bn-canvas__block[data-component-drop-axis='block']::after {
    inset-inline: 0;
    height: 4px;
}

html[data-banyan-editor-runtime] .bn-canvas__block[data-component-drop-axis='block'][data-component-drop='before']::after {
    top: calc(-1 * var(--bn-space-3));
}

html[data-banyan-editor-runtime] .bn-canvas__block[data-component-drop-axis='block'][data-component-drop='after']::after {
    bottom: calc(-1 * var(--bn-space-3));
}

html[data-banyan-editor-runtime] .bn-canvas__block[data-component-drop-axis='inline']::after {
    inset-block: 0;
    width: 4px;
}

html[data-banyan-editor-runtime] .bn-canvas__block[data-component-drop-axis='inline'][data-component-drop='before']::after {
    inset-inline-start: calc(-1 * var(--bn-space-3));
}

html[data-banyan-editor-runtime] .bn-canvas__block[data-component-drop-axis='inline'][data-component-drop='after']::after {
    inset-inline-end: calc(-1 * var(--bn-space-3));
}

html[data-banyan-editor-runtime] .bn-canvas__area[data-component-drop-zone],
html[data-banyan-editor-runtime] .bn-canvas__grid[data-component-drop-zone] {
    outline: 2px dashed var(--bn-focus-grabbed);
    outline-offset: 3px;
    background-color: color-mix(in srgb, var(--bn-focus-grabbed) 7%, transparent);
}

/*
 * A block whose content type has no registered display renderer
 * (BlockRendererRegistry::fallback()). Deliberately conspicuous — a dashed box
 * with a visible label — never a blank hole or a silent failure.
 */
.bn-canvas__fallback {
    border: 1px dashed var(--bn-border-strong);
    border-radius: var(--bn-radius-card);
    background-color: var(--bn-surface);
    padding: var(--bn-space-4);
}

.bn-canvas__fallback-text {
    margin: 0;
    color: var(--bn-text-muted);
    font-size: var(--bn-text-sm);
    line-height: var(--bn-text-sm-height);
}

/*
 * A declarative plugin's block (SPEC-0076 §2, DeclarativeBlockRenderer): the
 * one governed generic template every data-only block renders through — its
 * declared label plus an optional heading and body — using the same token
 * vocabulary as the fallback above.
 */
.bn-canvas__declarative {
    display: grid;
    gap: var(--bn-space-2);
    padding: var(--bn-space-4);
    border-radius: var(--bn-radius-card);
    background-color: var(--bn-surface);
}

.bn-canvas__declarative-label {
    margin: 0;
    color: var(--bn-text-muted);
    font-size: var(--bn-text-sm);
    line-height: var(--bn-text-sm-height);
}

.bn-canvas__declarative-heading {
    margin: 0;
    color: var(--bn-text);
    font-size: var(--bn-text-2xl);
    line-height: var(--bn-text-2xl-height);
}

.bn-canvas__declarative-body {
    margin: 0;
    color: var(--bn-text);
    font-size: var(--bn-text-base);
    line-height: var(--bn-text-base-height);
    white-space: pre-line;
}

/* A block the editor has applied optimistically and the server has not yet
   confirmed (SPEC-0075 section 5). Replaced by the real block on the answer. */
.bn-canvas__block--pending,
[data-banyan-pending-node] {
    opacity: 0.7;
}

.bn-canvas__block--pending {
    min-height: 3rem;
    padding: 0.75rem;
    border: 1px dashed currentcolor;
}

/* Other editors on the page (SPEC-0080 §10). A peer's selection is an outline
   whose line style differs per person and a text chip carries the name, so no
   meaning rests on hue alone. Chips are static: nothing pulses or animates. */
.bn-peer-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 30;
}

.bn-peer-chip {
    position: absolute;
    max-width: 22rem;
    padding: 2px 8px;
    overflow: hidden;
    border: 2px solid var(--bn-text);
    border-radius: 4px;
    background-color: var(--bn-surface);
    color: var(--bn-text);
    font: 600 12px/1.4 system-ui, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bn-peer-chip--lease {
    border-style: double;
    border-width: 4px;
}

[data-banyan-peer-colour='0'] { --bn-peer: var(--bn-primary); }
[data-banyan-peer-colour='1'] { --bn-peer: var(--bn-warning); }
[data-banyan-peer-colour='2'] { --bn-peer: var(--bn-success); }
[data-banyan-peer-colour='3'] { --bn-peer: var(--bn-danger); }
[data-banyan-peer-colour='4'] { --bn-peer: color-mix(in srgb, var(--bn-primary) 55%, var(--bn-danger)); }
[data-banyan-peer-colour='5'] { --bn-peer: color-mix(in srgb, var(--bn-primary) 55%, var(--bn-success)); }
[data-banyan-peer-colour='6'] { --bn-peer: color-mix(in srgb, var(--bn-warning) 55%, var(--bn-danger)); }
[data-banyan-peer-colour='7'] { --bn-peer: var(--bn-text-muted); }

[data-banyan-peer-colour] {
    outline: 3px var(--bn-peer-style, solid) var(--bn-peer, var(--bn-text));
    outline-offset: 4px;
}

[data-banyan-peer-style='dashed'] { --bn-peer-style: dashed; }
[data-banyan-peer-style='dotted'] { --bn-peer-style: dotted; }
[data-banyan-peer-style='double'] { --bn-peer-style: double; }

[data-banyan-peer-lease] {
    outline: 4px double var(--bn-text);
    outline-offset: 2px;
}