/* ============================================================================================
   Bdnd demo - the styles of the live samples.

   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
   shares); this file only draws what is Bdnd's own - the boxes, dustbins, boards and cards the
   examples drag around - and it is written against the kit's --bb-* names, so it follows the
   light/dark theme with no rules of its own for either.

   The colors an example sets inline (a dustbin's dark fill, its hover green, the chessboard, the
   nested targets' shades) are the example's own, ported from React DnD's: each is a state the
   example shows, they read on either theme, and the end-to-end suite asserts them.
   ============================================================================================ */

/* A row of sources or targets, wrapping under itself once the column is too narrow. */
.row-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* The line under a sample that says what it did: the knight's square, the list's order. */
.demo-caption {
    margin: 1rem 0 0;
    font-size: var(--fl-font-size-200);
    color: var(--bb-text-muted);
    overflow-wrap: anywhere;
}

.demo-result-title {
    margin: 1.5rem 0 .75rem;
}

/* What a sample did, line by line: the order a drop reached the nested targets, what a screen reader heard, the
   events of a drag. */
.nest-log,
.kanban-heard,
.events-log {
    max-width: 48rem;
    margin: 0;
    padding: .75rem 1rem .75rem 2.25rem;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* A draggable box: React DnD's dashed box, drawn as a Fluent card. */
.box {
    display: inline-block;
    max-width: 100%;
    padding: .5rem 1rem;
    background: var(--bb-surface);
    border: 1px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-card);
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    font-weight: var(--fl-weight-medium);
    cursor: move;
    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
}

.box:hover {
    border-color: var(--bb-primary);
}

.box small {
    color: var(--bb-text-soft);
}

/* A dustbin. The example paints its fill inline (dark at rest, green while a box hovers); the
   hairline keeps a dark bin's edge visible on the dark theme's surface, and the outline an
   accepting bin shows while a box is in the air is drawn inside its edge, so it reads on both. */
.dustbin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9rem;
    max-width: 100%;
    height: 9rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--bb-text) 16%, transparent);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-card);
    outline-offset: -7px;
    color: #FFFFFF;
    font-size: var(--fl-font-size-300);
    font-weight: var(--fl-weight-medium);
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

/* ---------- Chessboard (the tutorial) ---------- */

.chessboard {
    display: flex;
    flex-wrap: wrap;
    width: 320px;
    max-width: 100%;
    aspect-ratio: 1;
    border: 2px solid #333333;
    border-radius: var(--bb-radius-sm);
    overflow: hidden;
}

.chess-square {
    position: relative;
    width: 12.5%;
    height: 12.5%;
}

.chess-overlay {
    position: absolute;
    inset: 0;
    opacity: .5;
    pointer-events: none;
}

/* A chess piece is drawn on the board, not on the page: it keeps its dark ink in the dark theme,
   where the page's text color would put a white knight on a cream square. */
.knight {
    color: #1A1A1A;
    font-size: 2.2rem;
    line-height: 40px;
    cursor: grab;
    user-select: none;
}

/* The legend under the board: a swatch of each overlay colour, as translucent as the overlay itself. */
.chess-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.chess-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-inline-start: .5rem;
    border: 1px solid #999999;
    opacity: .5;
}

.chess-swatch:first-child {
    margin-inline-start: 0;
}

/* ---------- Drag around ---------- */

/* The board the boxes are positioned on: a recessed area, like the kit's .bb-stage. A box dropped
   near its edge is cut off there rather than drawn over the page around it; the point it was held
   by is always on the board (the board is the drop target), so it can be picked up again. */
.drag-around-container {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
}

.drag-around-box {
    position: absolute;
    padding: .5rem 1rem;
    background: var(--bb-surface);
    border: 1px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-card);
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    font-weight: var(--fl-weight-medium);
    white-space: nowrap;
    cursor: move;
}

/* The custom drag layer's preview. Its position is the example's (inline, from the layer's
   offsets); its look is the brand's, raised, so it reads as the thing in the hand. */
.drag-layer-preview {
    padding: .5rem 1rem;
    background: var(--bb-primary);
    border: 1px solid var(--bb-primary);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-raised);
    color: var(--bb-primary-text);
    font-size: var(--fl-font-size-200);
    font-weight: var(--fl-weight-semibold);
    white-space: nowrap;
}

/* "Inside the area": the rectangle a box's corner is kept in (BdndXYCoord.Clamp). It leaves room on the right and
   at the bottom for the box itself, so a box whose corner is at its far corner is still on the board. */
.drag-around-area {
    position: absolute;
    inset: 1.5rem 12rem 4rem 1.5rem;
    border: 2px dashed var(--bb-primary);
    border-radius: var(--bb-radius);
    background: var(--bb-wash-primary);
    pointer-events: none;
}

/* "Snap to grid": the 40 px cells a box's corner snaps to (BdndXYCoord.SnapTo), laid from the board's corner. */
.drag-around-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--bb-border) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--bb-border) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* The second drag layer: the offsets of its state, live. */
.drag-around-offsets {
    max-width: 34rem;
    margin-top: 1.25rem;
}

@media (forced-colors: active) {
    .drag-around-area {
        border-color: Highlight;
    }
}

/* ---------- Sortable ---------- */

/* A card: the kit's card at rest, raised a step on hover. The margin (rather than a flex gap) is
   the gap between two cards, which the list - a drop target of its own - still takes a drop in. */
.sortable-card {
    margin-bottom: .5rem;
    padding: .625rem 1rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-card);
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    font-weight: var(--fl-weight-medium);
    cursor: move;
    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
}

.sortable-card:hover {
    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
    box-shadow: var(--fl-shadow-4);
}

/* The hundred-card list scrolls in a tray of its own. */
.sortable-scroll {
    max-height: 480px;
    overflow-y: auto;
    padding: .5rem;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    scrollbar-width: thin;
    scrollbar-color: var(--bit-clr-brd-sec) transparent;
}

/* ---------- Nesting ---------- */

.nest-box {
    padding: 1rem;
    border-radius: var(--bb-radius-lg);
    color: #FFFFFF;
    font-size: var(--fl-font-size-200);
    font-weight: var(--fl-weight-medium);
    text-align: center;
}

/* ---------- Handles ---------- */

/* The grip of the Handles page: the only part of its box a drag starts from. */
.handle {
    margin-inline-end: .625rem;
    color: var(--bb-text-soft);
    font-size: 1.0625rem;
    font-weight: var(--fl-weight-semibold);
    line-height: 1;
    user-select: none;
}

.handle:hover {
    color: var(--bb-primary);
}

/* The handle element itself, marked by Bdnd: a button to the keyboard, so its focus ring must show. */
[data-bit-bdnd-handle] {
    display: inline-flex;
    border-radius: var(--bb-radius-sm);
}

[data-bit-bdnd-handle]:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

/* ---------- Native drags ---------- */

/* The rich text a reader drags onto the target. */
.native-source {
    max-width: 18rem;
    padding: 1rem;
    border: 1px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius-lg);
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
}

.native-source > :last-child {
    margin-bottom: 0;
}

.native-drop-result {
    max-width: 42rem;
    margin-top: 1.5rem;
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    overflow-wrap: anywhere;
}

/* The dropped markup, raw. It wraps: a page's HTML is one long line more often than not. */
.native-drop-html {
    max-height: 18rem;
    margin: .5rem 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- Within an iframe ---------- */

.demo-iframe {
    display: block;
    width: 100%;
    height: 264px;
    border: 1px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
}

/* The page inside that iframe (App.razor marks it bdnd-framed): its sample and nothing else. The
   site's chrome is the parent page's, and drawn twice it would be a site inside a site. */
html.bdnd-framed,
html.bdnd-framed body,
html.bdnd-framed .bb-site-content {
    background: var(--bb-surface);
}

html.bdnd-framed .page {
    min-height: 0;
}

html.bdnd-framed .bb-skip-link,
html.bdnd-framed .bb-header,
html.bdnd-framed .bb-footer,
html.bdnd-framed .bb-docs-sidebar,
html.bdnd-framed .bb-docs-scrim,
html.bdnd-framed .bb-docs-topbar,
html.bdnd-framed .bb-docs-foot,
html.bdnd-framed .bb-pager,
html.bdnd-framed .bb-rail,
html.bdnd-framed .bb-intro,
html.bdnd-framed .bb-source {
    display: none;
}

html.bdnd-framed .bb-docs {
    display: block;
}

html.bdnd-framed main {
    padding: 1.25rem;
}

/* The parent's frame is the sample's frame; the sample itself need not draw another. */
html.bdnd-framed .bb-demo {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* ---------- The "View code" toggle: the kit's secondary button, with the caret and the code glyph in it. ---------- */

.demo-code__caret {
    font-size: .8em;
    color: var(--bb-text-soft);
}

.demo-code__glyph {
    font-family: var(--bb-mono);
    color: var(--bb-primary);
}

/* The panel follows the sample it shows the code of. The margin collapses into the sample frame's own
   bottom margin, and spaces the samples that draw no frame (the drag-around boards). */
.demo-code {
    margin-top: 1.25rem;
}

/* ---------- Code: SyntaxHighlighter's tokens on the kit's code surface ----------

   The highlighter tells more kinds apart than the kit's four (keyword, string, comment, parameter),
   so the extra ones get colours of their own here, light and dark, picked to hold their contrast on
   --bb-code-bg in both themes. */
:root {
    --demo-code-type: #8250DF;
    --demo-code-fn: #795E26;
    --demo-code-number: #CF222E;
    --demo-code-razor: #A21CAF;
}

:root[bit-theme="dark"] {
    --demo-code-type: #D2A8FF;
    --demo-code-fn: #DCDCAA;
    --demo-code-number: #FF7B72;
    --demo-code-razor: #F0ABFC;
}

.bb-code .tok-com { color: var(--bb-code-comment); font-style: italic; }
.bb-code .tok-pun { color: var(--bb-code-comment); }
.bb-code .tok-tag,
.bb-code .tok-key { color: var(--bb-code-keyword); }
.bb-code .tok-str { color: var(--bb-code-string); }
.bb-code .tok-attr { color: var(--bb-code-param); }
.bb-code .tok-type { color: var(--demo-code-type); }
.bb-code .tok-fn { color: var(--demo-code-fn); }
.bb-code .tok-num { color: var(--demo-code-number); }
.bb-code .tok-raz { color: var(--demo-code-razor); }

/* ---------- The landing page's hero: the live sample under its markup, inside the window frame. ---------- */

.home-hero-live {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1.25rem;
    background: var(--bb-surface);
    border-top: 1px solid var(--bb-border);
}

.home-hero-cards {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.home-hero-cards .box {
    display: block;
}

/* The bin: a recessed tray at rest, the brand's tint while a card is in the air (CanDrop), the
   success tint while one is over it (IsOver). */
.home-hero-bin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10rem;
    min-height: 8.5rem;
    padding: 1rem;
    background: var(--bb-bg);
    border: 1px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius-lg);
    color: var(--bb-text-muted);
    font-size: var(--fl-font-size-200);
    font-weight: var(--fl-weight-medium);
    text-align: center;
    transition: background var(--bb-motion-duration-short) var(--bb-motion-easing),
                border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
                color var(--bb-motion-duration-short) var(--bb-motion-easing);
}

.home-hero-bin.is-ready {
    background: var(--bb-primary-soft);
    border-color: var(--bb-primary);
    color: var(--bb-primary);
}

.home-hero-bin.is-over {
    background: var(--bb-success-soft);
    border-style: solid;
    border-color: var(--bb-success);
    color: var(--bb-success-text);
}

.home-hero-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0;
    color: var(--bb-text-muted);
    font-size: var(--fl-font-size-200);
}

@media (max-width: 600px) {
    .home-hero-live {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-hero-bin {
        width: 100%;
        min-height: 6rem;
    }
}

/* A walkthrough step shown in two languages - Program.cs, then markup - as two blocks in the one grid cell. */
.home-code-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

/* ---------- Kanban board (keyboard and screen readers) ----------
   The columns follow a drag through the data-bit-bdnd-* attributes Bdnd puts on every drop target's host - no
   class is rendered from the collected state - and the dragged card through data-bit-bdnd-dragging. */
.kanban {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.kanban-column {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 12rem;
    padding: .75rem;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    transition: background-color var(--bb-motion-duration-short) var(--bb-motion-easing),
                border-color var(--bb-motion-duration-short) var(--bb-motion-easing);
}

.kanban-column[data-bit-bdnd-can-drop] {
    border-style: dashed;
    border-color: var(--bb-primary);
}

.kanban-column[data-bit-bdnd-over][data-bit-bdnd-can-drop] {
    background: var(--bb-wash-primary);
    border-style: solid;
}

.kanban-column__title {
    display: flex;
    justify-content: space-between;
    margin: 0 0 .25rem;
    font-size: var(--fl-font-size-300);
}

.kanban-column__title small {
    color: var(--bb-text-muted);
    font-weight: var(--fl-weight-regular);
}

.kanban-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-card);
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    cursor: move;
}

.kanban-card:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

.kanban-card[data-bit-bdnd-dragging] {
    opacity: .45;
}

.kanban-card__moves {
    display: flex;
    gap: .25rem;
}

.kanban-card__move {
    min-width: 1.75rem;
    padding: 0 .25rem;
    background: transparent;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    color: var(--bb-text);
    cursor: pointer;
}

.kanban-card__move:disabled {
    opacity: .35;
    cursor: default;
}

@media (forced-colors: active) {
    .kanban-column[data-bit-bdnd-over][data-bit-bdnd-can-drop] {
        outline: 3px solid Highlight;
    }

    .kanban-card[data-bit-bdnd-dragging] {
        outline: 2px dashed CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kanban-column {
        transition: none;
    }
}

@media (max-width: 600px) {
    .kanban {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Touch and pointer drags ----------
   The copy of the source a pointer drag moves with the pointer carries data-bit-bdnd-preview. Its position is an
   inline translate, so the tilt goes through the separate rotate property. */
.pointer-palette {
    margin-bottom: 1rem;
}

.pointer-box {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    touch-action: manipulation;
}

.pointer-box[data-bit-bdnd-dragging] {
    opacity: .4;
}

.pointer-box[data-bit-bdnd-preview] {
    rotate: 2deg;
    border-style: solid;
    border-color: var(--bb-primary);
    box-shadow: var(--fl-shadow-16);
}

.pointer-box__info {
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-pill);
    color: var(--bb-text-muted);
    font-size: var(--fl-font-size-100);
    cursor: help;
}

.pointer-tray {
    display: grid;
    gap: .5rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: .5rem;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
}

.pointer-slot {
    display: flex;
    justify-content: space-between;
    padding: .5rem .75rem;
    background: var(--bb-surface);
    border: 1px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius);
    font-size: var(--fl-font-size-200);
}

.pointer-slot__content {
    color: var(--bb-text-muted);
}

.pointer-slot[data-bit-bdnd-over] {
    background: var(--bb-wash-primary);
    border-style: solid;
    border-color: var(--bb-primary);
}

@media (forced-colors: active) {
    .pointer-slot[data-bit-bdnd-over] {
        outline: 3px solid Highlight;
    }
}

/* ---------- Sortable with drop indicators ----------
   The line that shows where a card will land is drawn from data-bit-bdnd-edge, which a drop target with Edges
   carries while a card is over it: above the card for "top", below it for "bottom", in the gap between cards. */
.indicator-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 40rem;
}

.indicator-list {
    min-height: 10rem;
    padding: .75rem;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
}

.indicator-list[data-bit-bdnd-over-shallow] {
    border-color: var(--bb-primary);
}

.indicator-list__title {
    margin: 0 0 .5rem;
    font-size: var(--fl-font-size-300);
}

.indicator-slot {
    position: relative;
    padding-bottom: .5rem;
}

.indicator-card {
    margin-bottom: 0;
}

.indicator-card[data-bit-bdnd-dragging] {
    opacity: .4;
}

.indicator-card:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

.indicator-slot[data-bit-bdnd-edge]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bb-primary);
    border-radius: 2px;
    pointer-events: none;
}

.indicator-slot[data-bit-bdnd-edge="top"]::after {
    top: -5px;
}

.indicator-slot[data-bit-bdnd-edge="bottom"]::after {
    bottom: 1px;
}

.indicator-empty {
    margin: 1rem 0 0;
    color: var(--bb-text-muted);
    font-size: var(--fl-font-size-200);
    text-align: center;
}

@media (forced-colors: active) {
    .indicator-slot[data-bit-bdnd-edge]::after {
        background: Highlight;
    }
}

@media (max-width: 600px) {
    .indicator-board {
        grid-template-columns: minmax(0, 1fr);
    }
}

.indicator-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* The labels' title with its right-to-left switch. */
.indicator-chips-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    margin: 1.5rem 0 .75rem;
}

.indicator-chips-bar .demo-result-title {
    margin: 0;
}

.indicator-chip-slot {
    position: relative;
}

.indicator-chip {
    display: inline-block;
    padding: .25rem .75rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-pill);
    font-size: var(--fl-font-size-200);
    cursor: move;
}

.indicator-chip[data-bit-bdnd-dragging] {
    opacity: .4;
}

.indicator-chip:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

.indicator-chip-slot[data-bit-bdnd-edge]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bb-primary);
    border-radius: 2px;
    pointer-events: none;
}

.indicator-chip-slot[data-bit-bdnd-edge="left"]::after {
    left: -7px;
}

.indicator-chip-slot[data-bit-bdnd-edge="right"]::after {
    right: -7px;
}

@media (forced-colors: active) {
    .indicator-chip-slot[data-bit-bdnd-edge]::after {
        background: Highlight;
    }
}

/* ---------- Sortable grid ----------
   Four columns at every width, so a row is always four tiles; the line is drawn in the gap left or right of a tile. */
.sortable-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    max-width: 32rem;
}

.grid-slot {
    position: relative;
}

.grid-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.5rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-lg);
    font-size: var(--fl-font-size-200);
    cursor: move;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-tile[data-bit-bdnd-dragging] {
    opacity: .4;
}

.grid-tile:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

.grid-slot[data-bit-bdnd-edge]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bb-primary);
    border-radius: 2px;
    pointer-events: none;
}

.grid-slot[data-bit-bdnd-edge="left"]::after {
    left: -.47rem;
}

.grid-slot[data-bit-bdnd-edge="right"]::after {
    right: -.47rem;
}

@media (forced-colors: active) {
    .grid-slot[data-bit-bdnd-edge]::after {
        background: Highlight;
    }
}

/* ---------- Virtualized list ----------
   Every row is exactly 44px tall (Virtualize's ItemSize): 40px of row and 4px of gap inside the slot. */
.virtual-list {
    height: 22rem;
    max-width: 28rem;
    overflow-y: auto;
    padding: 0 .5rem;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-bg);
}

.virtual-slot {
    position: relative;
    height: 44px;
    padding-top: 4px;
    box-sizing: border-box;
}

.virtual-row {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 1rem;
    box-sizing: border-box;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    font-size: var(--fl-font-size-200);
    cursor: move;
}

.virtual-row[data-bit-bdnd-dragging] {
    opacity: .4;
}

.virtual-row:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: -2px;
}

.virtual-slot[data-bit-bdnd-edge]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bb-primary);
    border-radius: 2px;
    pointer-events: none;
}

.virtual-slot[data-bit-bdnd-edge="top"]::after {
    top: 0;
}

.virtual-slot[data-bit-bdnd-edge="bottom"]::after {
    bottom: -3px;
}

@media (forced-colors: active) {
    .virtual-slot[data-bit-bdnd-edge]::after {
        background: Highlight;
    }
}

/* ---------- Handles: a field inside a draggable ---------- */
.handles-note {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.handles-note__field {
    font: inherit;
    cursor: text;
}

/* ---------- Page builder ---------- */
.builder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}

.builder-palette {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.builder-tool {
    padding: .5rem .75rem;
    background: var(--bb-surface);
    border: 1px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius);
    font-size: var(--fl-font-size-200);
    cursor: copy;
}

.builder-page {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 18rem;
    max-width: 100%;
    min-height: 12rem;
    padding: .75rem .75rem 2rem;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
}

.builder-page[data-bit-bdnd-over-shallow] {
    border-color: var(--bb-primary);
}

.builder-slot {
    position: relative;
}

.builder-slot[data-bit-bdnd-edge]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bb-primary);
    border-radius: 2px;
    pointer-events: none;
}

.builder-slot[data-bit-bdnd-edge="top"]::after {
    top: -5px;
}

.builder-slot[data-bit-bdnd-edge="bottom"]::after {
    bottom: -5px;
}

@media (forced-colors: active) {
    .builder-slot[data-bit-bdnd-edge]::after {
        background: Highlight;
    }
}

.builder-block {
    padding: .75rem 1rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    font-size: var(--fl-font-size-200);
    cursor: move;
}

.builder-block--heading {
    font-weight: var(--fl-weight-semibold);
    font-size: var(--fl-font-size-300);
}

.builder-block[data-bit-bdnd-dragging] {
    opacity: .4;
}

.builder-tool:focus-visible,
.builder-block:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

.builder-empty {
    margin: auto;
    color: var(--bb-text-muted);
}

.builder-bin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 6rem;
    padding: .5rem;
    border: 2px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius-lg);
    color: var(--bb-text-muted);
    text-align: center;
}

.builder-bin[data-bit-bdnd-can-drop] {
    border-color: var(--bb-danger, #c62828);
    color: var(--bb-text);
}

/* ---------- Dragging several items ---------- */
.multi-board {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem;
}

.multi-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 16rem;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.multi-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.multi-card {
    flex: 1;
    padding: .625rem 1rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    font-size: var(--fl-font-size-200);
    cursor: move;
}

.multi-card--selected {
    border-color: var(--bb-primary);
    background: var(--bb-wash-primary);
}

.multi-card[data-bit-bdnd-dragging] {
    opacity: .4;
}

.multi-card:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

.multi-archive {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    min-height: 8rem;
    padding: 1rem;
    border: 2px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius-lg);
    color: var(--bb-text-muted);
    text-align: center;
}

.multi-archive[data-bit-bdnd-can-drop] {
    border-color: var(--bb-primary);
    color: var(--bb-text);
}

.multi-archive[data-bit-bdnd-over] {
    background: var(--bb-wash-primary);
}

/* The drag layer's badge next to the pointer: how many cards the drag carries. Fixed, because the layer's offsets are
   client coordinates; no pointer events, or it would be the drop target under the pointer. */
.multi-preview {
    position: fixed;
    z-index: 1000;
    padding: .25rem .75rem;
    background: var(--bb-primary);
    border-radius: var(--bb-radius-pill);
    box-shadow: var(--bb-shadow-raised);
    color: var(--bb-primary-text);
    font-size: var(--fl-font-size-200);
    font-weight: var(--fl-weight-semibold);
    white-space: nowrap;
    pointer-events: none;
}

/* ---------- Native drops: the images-only zone and the box dragged out of the page ---------- */
.native-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    min-height: 8rem;
    padding: 1rem;
    background: var(--bb-bg);
    border: 2px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius-lg);
    color: var(--bb-text-muted);
    font-size: var(--fl-font-size-200);
    text-align: center;
}

.native-zone[data-bit-bdnd-can-drop] {
    border-color: var(--bb-primary);
    background: var(--bb-wash-primary);
    color: var(--bb-text);
}

.native-out {
    margin-top: 1.5rem;
}

/* The text-only target with a field inside it, under the box dragged out of the page: a drop on the field is the
   field's, a drop around it the target's. */
.native-notes {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    width: 24rem;
    max-width: 100%;
    margin-top: 1.5rem;
}

.native-notes__field {
    width: 100%;
    resize: vertical;
}

.native-notes__last {
    overflow-wrap: anywhere;
}

/* ---------- Tree ----------
   Rows show the edge a dragged node is closest to (data-bit-bdnd-edge); the children lists, indented, grow while a
   node is dragged so there is room to drop into a node - also one with no children yet. */
.tree,
.tree-children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tree {
    max-width: 24rem;
}

.tree-children {
    margin-left: 1.25rem;
    border-left: 1px dashed transparent;
}

.tree-children[data-bit-bdnd-can-drop] {
    min-height: .75rem;
    padding-bottom: .625rem;
    border-left-color: var(--bb-border-strong);
}

.tree-children[data-bit-bdnd-over-shallow][data-bit-bdnd-can-drop] {
    border-left-color: var(--bb-primary);
    background: var(--bb-wash-primary);
}

.tree-row {
    position: relative;
    padding: 2px 0;
}

.tree-label {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .5rem;
    border-radius: var(--bb-radius);
    font-size: var(--fl-font-size-200);
    cursor: move;
}

.tree-label:hover {
    background: var(--bb-surface-hover);
}

.tree-label:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 1px;
}

.tree-label[data-bit-bdnd-dragging] {
    opacity: .4;
}

.tree-label__icon {
    width: 1rem;
    color: var(--bb-text-muted);
    text-align: center;
}

.tree-row[data-bit-bdnd-edge]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--bb-primary);
    pointer-events: none;
}

.tree-row[data-bit-bdnd-edge="top"]::after {
    top: 0;
}

.tree-row[data-bit-bdnd-edge="bottom"]::after {
    bottom: 0;
}

.tree-nest-hint {
    padding: .125rem .5rem;
    color: var(--bb-primary);
    font-size: var(--fl-font-size-100);
}

@media (forced-colors: active) {
    .tree-row[data-bit-bdnd-edge]::after {
        background: Highlight;
    }
}

/* ---------- Drag events and undo ----------
   The trays follow a drag through the data-bit-bdnd-* attributes; a closed tray (Disabled) gets none of them. */
.events-trays {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.events-tray {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 9rem;
    padding: .75rem;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
}

.events-tray[data-bit-bdnd-can-drop] {
    border-style: dashed;
    border-color: var(--bb-primary);
}

.events-tray[data-bit-bdnd-over][data-bit-bdnd-can-drop] {
    background: var(--bb-wash-primary);
    border-style: solid;
}

.events-tray--closed {
    opacity: .6;
}

.events-tray__title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .25rem;
    font-size: var(--fl-font-size-300);
}

.events-chip {
    padding: .375rem .75rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius-pill);
    box-shadow: var(--bb-shadow-card);
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    cursor: move;
}

.events-chip[data-bit-bdnd-dragging] {
    opacity: .4;
}

.events-chip:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

.events-empty {
    margin: 0;
    color: var(--bb-text-muted);
    font-size: var(--fl-font-size-200);
}

@media (forced-colors: active) {
    .events-tray[data-bit-bdnd-over][data-bit-bdnd-can-drop] {
        outline: 3px solid Highlight;
    }
}

@media (max-width: 600px) {
    .events-trays {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Separate contexts ----------
   A bin shows a dashed outline while a drag of its own context could drop on it, and only then. */
.contexts-heading:first-child {
    margin-top: 0;
}

.contexts-boards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
}

.contexts-board,
.contexts-inner,
.contexts-shelf {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
}

.contexts-inner {
    background: var(--bb-surface);
    border-style: dashed;
}

.contexts-board h3,
.contexts-shelf h3,
.contexts-inner h4 {
    margin: 0;
    font-size: var(--fl-font-size-300);
}

.contexts-notes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 2rem;
}

.contexts-note {
    padding: .375rem .75rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-strong);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-card);
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    cursor: move;
}

.contexts-note[data-bit-bdnd-dragging] {
    opacity: .4;
}

.contexts-note:focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

.contexts-bin {
    padding: .75rem;
    border: 2px dashed var(--bb-border-strong);
    border-radius: var(--bb-radius);
    color: var(--bb-text-muted);
    font-size: var(--fl-font-size-200);
}

.contexts-bin[data-bit-bdnd-can-drop],
.contexts-shelf[data-bit-bdnd-can-drop] {
    border-color: var(--bb-primary);
    border-style: dashed;
    color: var(--bb-text);
}

.contexts-bin[data-bit-bdnd-over][data-bit-bdnd-can-drop],
.contexts-shelf[data-bit-bdnd-over][data-bit-bdnd-can-drop] {
    background: var(--bb-wash-primary);
}

.contexts-empty {
    color: var(--bb-text-muted);
    font-size: var(--fl-font-size-200);
}

@media (forced-colors: active) {
    .contexts-bin[data-bit-bdnd-over][data-bit-bdnd-can-drop],
    .contexts-shelf[data-bit-bdnd-over][data-bit-bdnd-can-drop] {
        outline: 3px solid Highlight;
    }
}