/**
 * Document Designer — editor styling. (rev 2)
 *
 * Colours resolve through Filament's own palette variables so a panel theme
 * carries through. The chrome (buttons, inputs, tabs) is Filament's own Blade
 * components and is not styled here; what is styled is the page and what sits
 * on it, plus the frame around it: a toolbar, the stage, and one side panel
 * with three tabs that folds to a strip.
 *
 * The page is laid out in points: the scaled surface uses 1px = 1pt and is
 * scaled by --z, and every piece of editing chrome divides by --z so it stays
 * the same size on screen at any zoom.
 */

.fi-dd {
    --fi-dd-surface: var(--gray-100, #f3f4f6);
    --fi-dd-dot: var(--gray-300, #d1d5db);
    --fi-dd-panel: #ffffff;
    --fi-dd-panel-soft: var(--gray-50, #f9fafb);
    --fi-dd-border: var(--gray-200, #e5e7eb);
    --fi-dd-text: var(--gray-950, #030712);
    --fi-dd-muted: var(--gray-500, #6b7280);
    --fi-dd-select: var(--primary-600, #2563eb);
    --fi-dd-select-soft: color-mix(in srgb, var(--primary-500, #3b82f6) 14%, transparent);
    --fi-dd-fixed: var(--warning-600, #d97706);
    --fi-dd-fixed-soft: color-mix(in srgb, var(--warning-500, #f59e0b) 14%, transparent);
    --fi-dd-paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 14px 32px rgba(0, 0, 0, 0.10);
    /* What sits on the page — badges, outlines, bands, guides — keeps the light palette in dark mode too: the paper is white either way. */
    --fi-dd-paper-select: var(--primary-600, #2563eb);
    --fi-dd-paper-select-soft: color-mix(in srgb, var(--primary-500, #3b82f6) 14%, transparent);
    --fi-dd-paper-fixed: var(--warning-600, #d97706);
    --fi-dd-paper-fixed-soft: color-mix(in srgb, var(--warning-500, #f59e0b) 14%, transparent);
    --fi-dd-paper-muted: var(--gray-500, #6b7280);
    --fi-dd-paper-text: var(--gray-950, #030712);

    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: min(82vh, 980px);
    min-height: 560px;
    overflow: hidden;
    border: 1px solid var(--fi-dd-border);
    border-radius: 0.75rem;
    background-color: var(--fi-dd-panel);
    color: var(--fi-dd-text);
    font-size: 0.8125rem;
}

:where(.dark) .fi-dd {
    --fi-dd-surface: var(--gray-900, #111827);
    --fi-dd-dot: var(--gray-700, #374151);
    --fi-dd-panel: var(--gray-800, #1f2937);
    --fi-dd-panel-soft: var(--gray-900, #111827);
    --fi-dd-border: var(--gray-700, #374151);
    --fi-dd-text: var(--gray-50, #f9fafb);
    --fi-dd-muted: var(--gray-400, #9ca3af);
    --fi-dd-select: var(--primary-400, #60a5fa);
    --fi-dd-fixed: var(--warning-400, #fbbf24);
    --fi-dd-paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.45);
}

.fi-dd [x-cloak] {
    display: none !important;
}

/* ── Frame ────────────────────────────────────────────────────────────────── */

.fi-dd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--fi-dd-border);
}

.fi-dd-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fi-dd-toolbar-spacer {
    flex: 1;
}

.fi-dd-toolbar-label {
    color: var(--fi-dd-muted);
    font-size: 0.75rem;
}

.fi-dd-toolbar-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--fi-dd-border);
}

/* Never a scrollbar under a row of buttons: the items shrink to fit instead. */
.fi-dd-tabs.fi-tabs {
    padding: 0.125rem;
    overflow: hidden;
}

.fi-dd-tabs .fi-tabs-item {
    padding-block: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* A segmented control: Filament's tabs, sized for a row of buttons. An icon-only item is square. */
.fi-dd-seg .fi-tabs-item {
    padding-inline: 0.5rem;
    font-size: 0.75rem;
}

.fi-dd-seg .fi-tabs-item > .fi-icon {
    width: 1rem;
    height: 1rem;
}

.fi-dd-seg .fi-tabs-item-label:empty {
    display: none;
}

.fi-dd-seg-fill {
    flex: 1 1 100%;
}

.fi-dd-seg-fill .fi-tabs-item {
    flex: 1;
}

.fi-dd-caps {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.fi-dd-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.fi-dd-zoom {
    min-width: 3rem;
    padding: 0.25rem 0.125rem;
    color: var(--fi-dd-text);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.fi-dd-wide {
    width: 100%;
    justify-content: center;
}

.fi-dd-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.fi-dd-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    min-height: 0;
    flex: 1;
}

.fi-dd-body-closed {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
}

/* The side panel: a tab strip over whichever of Add, Design or Preview is showing. */
.fi-dd-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border-inline-start: 1px solid var(--fi-dd-border);
    background: var(--fi-dd-panel);
}

.fi-dd-side-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--fi-dd-border);
}

.fi-dd-side-tabs {
    flex: 1;
    min-width: 0;
}

.fi-dd-side-tabs .fi-tabs-item {
    flex: 1 1 0;
    min-width: 0;
    gap: 0.375rem;
    padding-inline: 0.375rem;
    font-size: 0.8125rem;
}

.fi-dd-side-tabs .fi-tabs-item > .fi-icon {
    width: 1rem;
    height: 1rem;
}

.fi-dd-side-tabs .fi-tabs-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-dd-side-title {
    flex: 1;
    padding-inline-start: 0.375rem;
}

.fi-dd-side-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Folded: the same three, as icons down a strip, the one showing marked. */
.fi-dd-side-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.25rem;
}

/* Filament's icon button pulls its margins in to sit beside text; stacked, that had the buttons overlapping. */
.fi-dd-side-strip .fi-icon-btn {
    margin: 0;
}

.fi-dd-side-strip-divider {
    width: 1.25rem;
    height: 1px;
    margin-block: 0.25rem;
    background: var(--fi-dd-border);
}

.fi-dd-side-strip .fi-dd-strip-active {
    background: var(--fi-dd-select-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fi-dd-select) 45%, transparent);
}

.fi-dd-panel {
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem;
    border-bottom: 1px solid var(--fi-dd-border);
}

.fi-dd-panel:last-child {
    border-bottom: 0;
}

.fi-dd-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.fi-dd-panel-title {
    margin: 0;
    color: var(--fi-dd-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fi-dd-note {
    margin: 0;
    color: var(--fi-dd-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.fi-dd-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
}

.fi-dd-add-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
}

.fi-dd-add-list {
    display: grid;
    gap: 0.375rem;
}

.fi-dd-add-grid .fi-btn,
.fi-dd-add-list .fi-btn {
    justify-content: flex-start;
}

.fi-dd-fixed-list {
    display: grid;
    gap: 0.375rem;
}

.fi-dd-fixed-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px dashed color-mix(in srgb, var(--fi-dd-fixed) 50%, transparent);
    border-radius: 0.5rem;
    background: var(--fi-dd-fixed-soft);
    color: var(--fi-dd-text);
    text-align: left;
    cursor: pointer;
}

/* A setting the design hasn't taken for its own reads as the workspace's. */
.fi-dd-field-following .fi-dd-label {
    color: var(--fi-dd-muted);
}

/* A row in the page panel's list: the rows' own colour, its summary at the end. */
.fi-dd-row-item {
    border-color: color-mix(in srgb, var(--fi-dd-select) 45%, transparent);
    background: color-mix(in srgb, var(--fi-dd-select) 5%, transparent);
}

.fi-dd-row-item .fi-dd-icon {
    color: var(--fi-dd-select);
}

.fi-dd-row-item > span:not(.fi-dd-note) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-dd-row-item .fi-dd-note {
    margin-inline-start: auto;
    white-space: nowrap;
}

.fi-dd-fixed-item .fi-dd-icon,
.fi-dd-fixed-note .fi-dd-icon {
    color: var(--fi-dd-fixed);
}

/* A block left off the design: plain, with a plus, until it is added back. */
.fi-dd-fixed-item-off {
    border-style: dashed;
    border-color: var(--fi-dd-border);
    background: transparent;
    color: var(--fi-dd-muted);
}

.fi-dd-fixed-item-off .fi-dd-icon {
    color: var(--fi-dd-muted);
}

.fi-dd-fixed-optional {
    margin-inline-start: auto;
    font-size: 0.6875rem;
    color: var(--fi-dd-muted);
}

.fi-dd-token-groups {
    display: grid;
    gap: 0.625rem;
}

.fi-dd-token-group {
    display: grid;
    gap: 0.125rem;
}

.fi-dd-token-group h5 {
    margin: 0.25rem 0 0.125rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.fi-dd-token-source {
    color: var(--fi-dd-muted);
    font-weight: 400;
}

.fi-dd-token-source::before {
    content: '· ';
}

.fi-dd-token-item {
    display: grid;
    gap: 0.0625rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.fi-dd-token-item:hover {
    background: var(--fi-dd-select-soft);
}

.fi-dd-token-item code {
    color: var(--fi-dd-select);
    font-size: 0.7rem;
    font-weight: 500;
}

.fi-dd-token-item span {
    overflow: hidden;
    color: var(--fi-dd-muted);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Stage ────────────────────────────────────────────────────────────────── */

.fi-dd-stage {
    position: relative;
    min-height: 0;
    overflow: auto;
    background-color: var(--fi-dd-surface);
    background-image: radial-gradient(var(--fi-dd-dot) 1px, transparent 1px);
    background-size: 18px 18px;
}

/* Sized by the script to the scaled page, so the padding must sit outside that width, or the page lands 28px right of centre. */
.fi-dd-sheet {
    position: relative;
    box-sizing: content-box;
    width: max-content;
    margin-inline: auto;
    padding: 28px;
}

.fi-dd-scaled {
    position: relative;
    transform-origin: 0 0;
}

.fi-dd-page {
    position: absolute;
    left: 0;
    background: #ffffff;
    box-shadow: var(--fi-dd-paper-shadow);
}

.fi-dd-page-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

.fi-dd-page-label {
    position: absolute;
    left: 0;
    color: var(--fi-dd-muted);
    font-size: calc(11px / var(--z, 1));
    font-weight: 500;
    transform: translateY(calc(-20px / var(--z, 1)));
    white-space: nowrap;
}

/* The margins: a neutral dashed frame on every page, which content keeps inside. */
.fi-dd-margins {
    position: absolute;
    border: calc(1px / var(--z, 1)) dashed color-mix(in srgb, var(--fi-dd-paper-muted) 55%, transparent);
    pointer-events: none;
}

/* A row: a band across the margins that the elements in it belong to. */
.fi-dd-row {
    position: absolute;
    border: calc(1px / var(--z, 1)) dashed color-mix(in srgb, var(--fi-dd-paper-select) 35%, transparent);
    border-radius: calc(3px / var(--z, 1));
    pointer-events: none;
}

.fi-dd-row-selected {
    border-style: solid;
    border-color: var(--fi-dd-paper-select);
    background: color-mix(in srgb, var(--fi-dd-paper-select) 4%, transparent);
}

.fi-dd-row-target {
    border-style: solid;
    background: color-mix(in srgb, var(--fi-dd-paper-select) 9%, transparent);
}

.fi-dd-row-empty {
    background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--fi-dd-paper-select) 5%, transparent) 8px 16px);
}

.fi-dd-row-tab {
    position: absolute;
    right: 100%;
    top: calc(-1px / var(--z, 1));
    display: inline-flex;
    align-items: center;
    gap: calc(4px / var(--z, 1));
    max-width: calc(140px / var(--z, 1));
    margin-right: calc(6px / var(--z, 1));
    padding: calc(2px / var(--z, 1)) calc(7px / var(--z, 1));
    border: calc(1px / var(--z, 1)) solid color-mix(in srgb, var(--fi-dd-paper-select) 45%, transparent);
    border-radius: calc(6px / var(--z, 1));
    background: #ffffff;
    color: var(--fi-dd-paper-select);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: calc(10.5px / var(--z, 1));
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    pointer-events: auto;
}

.fi-dd-row-selected .fi-dd-row-tab {
    background: var(--fi-dd-paper-select);
    color: #ffffff;
}

.fi-dd-row-tab svg {
    width: calc(11px / var(--z, 1));
    height: calc(11px / var(--z, 1));
    flex: none;
}

.fi-dd-row-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--fi-dd-paper-muted);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: calc(11px / var(--z, 1));
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
}

/* The next row: a pill under the last one, centred between the margins. */
.fi-dd-add-row {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: calc(3px / var(--z, 1));
    padding: calc(3px / var(--z, 1)) calc(9px / var(--z, 1)) calc(3px / var(--z, 1)) calc(6px / var(--z, 1));
    border: calc(1px / var(--z, 1)) dashed color-mix(in srgb, var(--fi-dd-paper-select) 55%, transparent);
    border-radius: calc(999px / var(--z, 1));
    background: #ffffff;
    color: var(--fi-dd-paper-select);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: calc(10.5px / var(--z, 1));
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transform: translateX(-50%);
    cursor: pointer;
}

.fi-dd-add-row:hover,
.fi-dd-add-row:focus-visible {
    border-style: solid;
    background: var(--fi-dd-paper-select);
    color: #ffffff;
    outline: none;
}

.fi-dd-add-row svg {
    width: calc(11px / var(--z, 1));
    height: calc(11px / var(--z, 1));
    flex: none;
}

.fi-dd-el {
    position: absolute;
    cursor: grab;
}

/* Outlines sit on the element's own edge, so a box on the margin reads as on it rather than just past it. */
.fi-dd-el:hover {
    outline: calc(1px / var(--z, 1)) dashed color-mix(in srgb, var(--fi-dd-paper-select) 60%, transparent);
    outline-offset: calc(-0.5px / var(--z, 1));
}

/* The selected element's outline is the chrome's, drawn over every element; the element itself only changes its cursor. */
.fi-dd-el-selected,
.fi-dd-el-selected:hover {
    outline: none;
    cursor: move;
}

.fi-dd-el-fixed:hover {
    outline-color: color-mix(in srgb, var(--fi-dd-paper-fixed) 70%, transparent);
}

.fi-dd-el-editing {
    cursor: text;
}

.fi-dd-el-hidden {
    opacity: 0.35;
}

.fi-dd-readonly .fi-dd-el {
    cursor: default;
}

.fi-dd-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    outline: none;
}

.fi-dd-token {
    padding: 0 0.2em;
    border-radius: 0.2em;
    background: var(--fi-dd-paper-select-soft);
    color: var(--fi-dd-paper-select);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82em;
    font-weight: 500;
}

.fi-dd-token-unknown {
    background: color-mix(in srgb, var(--danger-500, #ef4444) 16%, transparent);
    color: var(--danger-600, #dc2626);
}

.fi-dd-box,
.fi-dd-line {
    width: 100%;
    height: 100%;
}

/* A body of written text: a slice of it per page, cut between its lines; measured whole off a hidden copy. */
.fi-dd-prose-clip {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fi-dd-prose {
    overflow-wrap: anywhere;
}

/* A token in running text is a badge in the text's own type, as the editor draws it. */
.fi-dd-prose .fi-dd-token {
    padding: 0.05em 0.4em;
    border-radius: 0.3em;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    white-space: nowrap;
}

.fi-dd-prose-measure {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}

.fi-dd-prose p {
    margin: 0 0 0.75em;
}

.fi-dd-prose strong,
.fi-dd-prose b {
    font-weight: 700;
}

.fi-dd-prose h1,
.fi-dd-prose h2,
.fi-dd-prose h3 {
    margin: 1em 0 0.4em;
    font-weight: 700;
    line-height: 1.3;
}

.fi-dd-prose h1 { font-size: 1.6em; }
.fi-dd-prose h2 { font-size: 1.35em; }
.fi-dd-prose h3 { font-size: 1.15em; }

.fi-dd-prose ul,
.fi-dd-prose ol {
    margin: 0 0 0.75em;
    padding-left: 1.5em;
}

.fi-dd-prose ul { list-style: disc; }
.fi-dd-prose ol { list-style: decimal; }

.fi-dd-prose li {
    margin-bottom: 0.25em;
}

.fi-dd-prose blockquote {
    margin: 0 0 0.75em;
    padding-left: 0.75em;
    border-left: 2px solid currentColor;
}

/* As the rich editor draws a table: ruled, fixed columns, its heading row filled and bold. */
.fi-dd-prose table {
    width: 100%;
    margin: 0 0 0.75em;
    border-collapse: collapse;
    table-layout: fixed;
}

.fi-dd-prose td,
.fi-dd-prose th {
    padding: 0.6em 0.75em;
    border: 1px solid #d1d5db;
    text-align: left;
    vertical-align: top;
}

.fi-dd-prose th {
    background: #f3f4f6;
    font-weight: 700;
}

.fi-dd-prose td > :last-child,
.fi-dd-prose th > :last-child {
    margin-bottom: 0;
}

/* A stand-in for the logo, see-through so a letterhead's own art shows under it. */
.fi-dd-image {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    width: 100%;
    height: 100%;
    border: 1px dashed var(--gray-400, #9ca3af);
    color: var(--gray-500, #6b7280);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 9px;
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0 6px, rgba(0, 0, 0, 0.06) 6px 12px);
}

.fi-dd-image-icon {
    width: 14px;
    height: 14px;
}

.fi-dd-table,
.fi-dd-rows {
    display: grid;
}

.fi-dd-table-head,
.fi-dd-table-row {
    display: grid;
    align-items: start;
    column-gap: 8px;
}

/* A cell wraps rather than overflows; its row grows with it, and the layout measures the row. */
.fi-dd-table-head > span,
.fi-dd-table-row > span {
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fi-dd-rows-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.fi-dd-rows-secondary {
    display: block;
    font-weight: 400;
}

/* Full screen: the frame over the whole viewport — above the sidebar (30), under any modal (40) — and the page behind it held still. */
.fi-dd-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 35;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
}

.fi-dd-locked,
.fi-dd-locked body {
    overflow: hidden;
}

/* Scrolling the stage or the panel stops at their own ends: it never runs on into the page under them. */
.fi-dd-stage,
.fi-dd-side-body {
    overscroll-behavior: contain;
}

/* Editing chrome: sized against the zoom so it reads the same at any scale. */

.fi-dd-tag {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px / var(--z, 1));
    display: inline-flex;
    align-items: center;
    gap: calc(4px / var(--z, 1));
    padding: calc(2px / var(--z, 1)) calc(7px / var(--z, 1));
    border-radius: calc(6px / var(--z, 1));
    background: var(--fi-dd-paper-select);
    color: #ffffff;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: calc(10.5px / var(--z, 1));
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
}

.fi-dd-chrome-fixed .fi-dd-tag {
    background: var(--fi-dd-paper-fixed);
}

.fi-dd-tag-icon {
    width: calc(11px / var(--z, 1));
    height: calc(11px / var(--z, 1));
}

.fi-dd-handle {
    position: absolute;
    width: calc(9px / var(--z, 1));
    height: calc(9px / var(--z, 1));
    border: calc(1.5px / var(--z, 1)) solid var(--fi-dd-paper-select);
    border-radius: 2px;
    background: #ffffff;
}

.fi-dd-chrome-fixed .fi-dd-handle {
    border-color: var(--fi-dd-paper-fixed);
}

.fi-dd-handle-e {
    right: calc(-7px / var(--z, 1));
    top: calc(50% - 4.5px / var(--z, 1));
    cursor: ew-resize;
}

.fi-dd-handle-se {
    right: calc(-7px / var(--z, 1));
    bottom: calc(-7px / var(--z, 1));
    cursor: nwse-resize;
}

.fi-dd-handle-s {
    left: calc(50% - 4.5px / var(--z, 1));
    bottom: calc(-7px / var(--z, 1));
    cursor: ns-resize;
}

/* The selection's chrome — its outline, tag and handles — in a layer over every element, so a handle on an edge shared with a neighbour is never behind it. */
.fi-dd-chrome {
    position: absolute;
    z-index: 1000;
    outline: calc(1.5px / var(--z, 1)) solid var(--fi-dd-paper-select);
    outline-offset: calc(-0.75px / var(--z, 1));
    pointer-events: none;
    /* Its own layer while it moves: the browser was leaving the outline's old pixels behind on the scaled surface — a hairline's especially. */
    will-change: transform;
}

.fi-dd-chrome-fixed {
    outline-color: var(--fi-dd-paper-fixed);
}

.fi-dd-chrome .fi-dd-handle {
    pointer-events: auto;
}

.fi-dd-continued {
    position: absolute;
    left: 0;
    top: calc(-16px / var(--z, 1));
    color: var(--fi-dd-paper-fixed);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: calc(10px / var(--z, 1));
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
}

.fi-dd-guide {
    position: absolute;
    background: var(--fi-dd-paper-select);
    pointer-events: none;
    z-index: 5;
}

.fi-dd-guide-v {
    width: calc(1px / var(--z, 1));
}

.fi-dd-guide-h {
    height: calc(1px / var(--z, 1));
}

/* ── Inspector ────────────────────────────────────────────────────────────── */

.fi-dd-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0;
}

.fi-dd-facts dt {
    color: var(--fi-dd-muted);
}

.fi-dd-facts dd {
    margin: 0;
    text-align: right;
    font-weight: 500;
}

.fi-dd-hint {
    display: grid;
    gap: 0.375rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--fi-dd-panel-soft);
    color: var(--fi-dd-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.fi-dd-hint strong {
    color: var(--fi-dd-text);
    font-weight: 500;
}

.fi-dd-insp-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.fi-dd-insp-name {
    flex: 1;
    min-width: 0;
}

.fi-dd-insp-name .fi-input {
    font-weight: 600;
}

.fi-dd-insp-kind {
    margin: 0.25rem 0 0;
    color: var(--fi-dd-muted);
    font-size: 0.75rem;
}

.fi-dd-insp-actions {
    display: flex;
    gap: 0.25rem;
}

/* A disabled action reads as unavailable, not as a red bin at seventy percent. */
.fi-dd .fi-icon-btn.fi-color[disabled],
.fi-dd .fi-icon-btn.fi-color.fi-disabled {
    color: var(--fi-dd-muted);
    opacity: 0.55;
}

.fi-dd-fixed-note {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--fi-dd-fixed-soft);
    font-size: 0.75rem;
    line-height: 1.4;
}

.fi-dd-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.fi-dd-field {
    display: grid;
    gap: 0.3rem;
    flex: 1 1 100%;
    min-width: 0;
}

.fi-dd-field-half {
    flex: 1 1 calc(50% - 0.3125rem);
}

.fi-dd-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    width: 100%;
}

.fi-dd-label {
    color: var(--fi-dd-muted);
    font-size: 0.75rem;
}

.fi-dd-field .fi-input-wrp .fi-input {
    font-variant-numeric: tabular-nums;
}

/* Filament styles `input.fi-input` only, so the textarea takes the same padding and colours by hand. */
.fi-dd-textarea {
    display: block;
    width: 100%;
    min-height: 5rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--fi-dd-text);
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
}

.fi-dd-textarea:focus {
    outline: none;
    box-shadow: none;
}

.fi-dd-range {
    width: 100%;
    accent-color: var(--fi-dd-select);
}

.fi-dd-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.fi-dd-swatch {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid var(--fi-dd-border);
    border-radius: 50%;
    cursor: pointer;
}

.fi-dd-swatch-active {
    box-shadow: 0 0 0 2px var(--fi-dd-panel), 0 0 0 4px var(--fi-dd-select);
}

.fi-dd-swatch-none {
    background: linear-gradient(135deg, transparent 45%, var(--danger-500, #ef4444) 46% 54%, transparent 55%), #ffffff;
}

.fi-dd-color {
    width: 1.75rem;
    height: 1.625rem;
    padding: 0;
    border: 1px solid var(--fi-dd-border);
    border-radius: 0.4rem;
    background: none;
    cursor: pointer;
}

.fi-dd-columns {
    display: grid;
    gap: 0.375rem;
}

.fi-dd-column-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: 0.375rem;
}

/* The order is dragged by this handle; the row keeps its room for the width. */
.fi-dd-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.5rem;
    margin-inline-start: -0.25rem;
    border-radius: 0.375rem;
    color: var(--fi-dd-muted);
    cursor: grab;
    touch-action: none;
}

.fi-dd-grip:hover,
.fi-dd-grip:focus-visible {
    color: var(--fi-dd-text);
    background: color-mix(in srgb, var(--fi-dd-select) 12%, transparent);
    outline: none;
}

.fi-dd-grip svg {
    width: 1rem;
    height: 1rem;
}

.fi-dd-column-dragging {
    opacity: 0.45;
}

/* A short number: Filament's input padding would leave no room for the digits beside the suffix. */
.fi-dd-column-row .fi-input {
    min-width: 0;
}

.fi-dd-column-row input[type="number"] {
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.125rem;
}

/* The switch and the label, full width: the sample value is on the page already. */
.fi-dd-rowlabel-row {
    grid-template-columns: auto minmax(0, 1fr);
}

/* ── Toast ────────────────────────────────────────────────────────────────── */

.fi-dd-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 40;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--gray-950, #030712);
    color: #ffffff;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transform: translateX(-50%);
}

/* ── Narrow screens: the panel moves under the stage, its strip lying flat ── */

@media (max-width: 1100px) {
    .fi-dd-body,
    .fi-dd-body-closed {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .fi-dd-side {
        max-height: 26rem;
        border-inline-start: 0;
        border-top: 1px solid var(--fi-dd-border);
    }

    .fi-dd-side-strip {
        flex-direction: row;
        padding: 0.25rem 0.5rem;
    }

    .fi-dd-side-strip-divider {
        width: 1px;
        height: 1.25rem;
        margin-block: 0;
    }
}

@media (max-width: 900px) {
    .fi-dd {
        height: auto;
        min-height: 0;
    }

    .fi-dd-stage {
        height: 60vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-dd * {
        transition: none !important;
    }
}