@import '_content/ElectricBlazor.EbCodepen/ElectricBlazor.EbCodepen.xzck6bh3bx.bundle.scp.css';
@import '_content/ElectricBlazor.EbColorPicker/ElectricBlazor.EbColorPicker.g5eqjn1wnb.bundle.scp.css';
@import '_content/ElectricBlazor.EbCssDesigner/ElectricBlazor.EbCssDesigner.l6qann9kv7.bundle.scp.css';
@import '_content/ElectricBlazor.EbDialogs/ElectricBlazor.EbDialogs.n8w85uskp6.bundle.scp.css';
@import '_content/ElectricBlazor.EbDockDrawers/ElectricBlazor.EbDockDrawers.o6y8jzg7n7.bundle.scp.css';
@import '_content/ElectricBlazor.EbNumericInput/ElectricBlazor.EbNumericInput.tk3b7np24s.bundle.scp.css';
@import '_content/ElectricBlazor.EbPrimitives/ElectricBlazor.EbPrimitives.rs671qrq3u.bundle.scp.css';
@import '_content/ElectricBlazor.EbSave/ElectricBlazor.EbSave.pthx2xundv.bundle.scp.css';
@import '_content/ElectricBlazor.EbTabbedCards/ElectricBlazor.EbTabbedCards.039xxs849l.bundle.scp.css';
@import '_content/ElectricBlazor.EbTextEditor/ElectricBlazor.EbTextEditor.j886buopk1.bundle.scp.css';
@import '_content/ElectricBlazor.EbTile/ElectricBlazor.EbTile.2g4vdtqriw.bundle.scp.css';
@import '_content/ElectricBlazor.EbTour/ElectricBlazor.EbTour.6z5iwadini.bundle.scp.css';

/* /Components/SettingsDrawer.razor.rz.scp.css */
[b-ppt5zkgwx2] .settings-panel {
    padding: 0;
    overflow: hidden;
}

/* Fills the drawer: the panel above is a flex column, so the section takes the rest of the
   height and does its own scrolling rather than stopping at its content. */
.section[b-ppt5zkgwx2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem 1rem 1.5rem 1rem;
    overflow-y: auto;
}

/* The rule designer brings its own source view and scrolling, so it gets the room instead. */
/* The designer stretches to fill a tall drawer, but the section still scrolls: with plain
   overflow:hidden a short window clipped the designer instead, putting it out of reach. */
.section-css[b-ppt5zkgwx2] {
    gap: 0.5rem;
    overflow-y: auto;
}

.section-css > .field[b-ppt5zkgwx2],
.section-css > .hint[b-ppt5zkgwx2] {
    flex: none;
}

.section-css[b-ppt5zkgwx2]  .eb-css-rule-designer {
    display: flex;
    flex-direction: column;
    flex: none;
}

/* Both halves get a drag handle of their own rather than splitting one fixed height between them.
   The section scrolls, so making either taller costs nothing but a scroll, and neither has to be
   given up to make room for the other. */
.section-css[b-ppt5zkgwx2]  .eb-css-rule-designer-source {
    resize: vertical;
    height: 14rem;
    min-height: 5rem;
}

.section-css[b-ppt5zkgwx2]  .eb-css-rule-designer > .editor-panel {
    resize: vertical;
    overflow: auto;
    flex: none;
    height: 22rem;
    min-height: 8rem;
}

.history[b-ppt5zkgwx2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status[b-ppt5zkgwx2] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--eb-text-muted);
}

.section h3[b-ppt5zkgwx2] {
    margin: 0.5rem 0 0 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eb-text-muted);
}

.section h3:first-child[b-ppt5zkgwx2] {
    margin-top: 0;
}

.hint[b-ppt5zkgwx2] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--eb-text-muted);
}

.field[b-ppt5zkgwx2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.field > span[b-ppt5zkgwx2] {
    color: var(--eb-text);
}

.field input[type="text"][b-ppt5zkgwx2],
.field select[b-ppt5zkgwx2] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm, 4px);
    background: var(--eb-surface-raised);
    color: var(--eb-text);
    font: inherit;
}

.check[b-ppt5zkgwx2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.35;
}

.check input[b-ppt5zkgwx2] {
    margin-top: 0.2rem;
    flex: none;
}

.check small[b-ppt5zkgwx2] {
    display: block;
    color: var(--eb-text-muted);
    font-size: 0.75rem;
}

.kinds[b-ppt5zkgwx2] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm, 4px);
}

.kinds legend[b-ppt5zkgwx2] {
    padding: 0 0.35rem;
    font-size: 0.78rem;
    color: var(--eb-text-muted);
}

.row[b-ppt5zkgwx2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.row input[type="text"][b-ppt5zkgwx2] {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm, 4px);
    background: var(--eb-surface-raised);
    color: var(--eb-text);
    font: inherit;
}

.tile-list[b-ppt5zkgwx2] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.tile-list li[b-ppt5zkgwx2] {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm, 4px);
}

.tile-list small[b-ppt5zkgwx2] {
    color: var(--eb-text-muted);
    font-size: 0.75rem;
}

.tile-list li.row[b-ppt5zkgwx2] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tile-list li.row > span[b-ppt5zkgwx2] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

kbd[b-ppt5zkgwx2] {
    border: 1px solid var(--eb-border);
    border-radius: 3px;
    padding: 0 0.25rem;
    font-size: 0.85em;
}

.look-top[b-ppt5zkgwx2] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex: none;
}

.look-top .field[b-ppt5zkgwx2] {
    flex: 1;
    min-width: 0;
}

.tab-row[b-ppt5zkgwx2] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm, 4px);
    background: var(--eb-surface-raised);
}

.tab-row > span:nth-child(2)[b-ppt5zkgwx2] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-grip[b-ppt5zkgwx2] {
    cursor: grab;
    color: var(--eb-text-muted);
    letter-spacing: -0.25em;
    padding-right: 0.35rem;
    flex: none;
}

/* ---- The rule guide ---------------------------------------------------------------------------
   One row per rule in the board's stylesheet. Each is a button so it can be reached by keyboard:
   focus previews the same way hovering does, and pressing it pins the outline up. */
.rule-list[b-ppt5zkgwx2] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: none;
}

.rule-row[b-ppt5zkgwx2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    width: 100%;
    padding: 0.25rem 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--eb-radius-sm, 4px);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rule-row:hover[b-ppt5zkgwx2],
.rule-row:focus-visible[b-ppt5zkgwx2] {
    background: var(--eb-surface-sunken);
    border-color: var(--eb-border);
}

.rule-row code[b-ppt5zkgwx2] {
    font-size: 0.72rem;
    color: var(--eb-text);
    overflow-wrap: anywhere;
}

.rule-row small[b-ppt5zkgwx2] {
    font-size: 0.68rem;
    color: var(--eb-text-muted);
}

.rule-pinned[b-ppt5zkgwx2] {
    border-color: var(--eb-accent);
    background: var(--eb-accent-soft);
}

.rule-count[b-ppt5zkgwx2] {
    font-size: 0.66rem;
    font-style: normal;
    color: var(--eb-accent);
}
/* /Components/TileSettingsPanel.razor.rz.scp.css */
/* The panel is sized by EbFloatingBox's resize box, so the tabs fill it and the active section is
   what scrolls. A visible scrollbar, deliberately: this list is long and the panel is small. */
.ts[b-hdrfelwu9f] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ts-body[b-hdrfelwu9f] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.78rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    padding: 0.35rem 0.5rem 0.75rem 0;
}

.ts h3[b-hdrfelwu9f] {
    margin: 0.5rem 0 0.1rem 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eb-text-muted);
}

.ts h3:first-child[b-hdrfelwu9f] {
    margin-top: 0;
}

.ts-hint[b-hdrfelwu9f] {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--eb-text-muted);
}

.ts-field[b-hdrfelwu9f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.78rem;
    min-height: 1.55rem;
}

.ts-field > span:first-child[b-hdrfelwu9f] {
    flex: none;
    width: 6.2rem;
}

.ts-colour[b-hdrfelwu9f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.ts-colour input[type="color"][b-hdrfelwu9f] {
    flex: none;
    width: 1.6rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm, 4px);
    background: none;
    cursor: pointer;
}

.ts-input[b-hdrfelwu9f],
.ts-field select[b-hdrfelwu9f] {
    flex: 1;
    min-width: 0;
    padding: 0.12rem 0.3rem;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm, 4px);
    background: var(--eb-surface-raised);
    color: var(--eb-text);
    font: inherit;
    font-size: 0.78rem;
    height: 1.5rem;
    box-sizing: border-box;
}

.ts-check[b-hdrfelwu9f] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.ts-check input[b-hdrfelwu9f] {
    margin-top: 0.25rem;
    flex: none;
}

.ts-check small[b-hdrfelwu9f] {
    display: block;
    color: var(--eb-text-muted);
    font-size: 0.75rem;
}

.ts-row[b-hdrfelwu9f] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
}

.ts-list[b-hdrfelwu9f] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ts-list li[b-hdrfelwu9f] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.ts-name[b-hdrfelwu9f] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}

/* A saved type carries a summary under its name, so this row stacks instead of eliding. */
.ts-type .ts-name[b-hdrfelwu9f] {
    display: flex;
    flex-direction: column;
    white-space: normal;
    line-height: 1.3;
}

.ts-type .ts-name small[b-hdrfelwu9f] {
    color: var(--eb-text-muted);
    font-size: 0.68rem;
}

.ts-swatch[b-hdrfelwu9f] {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--eb-radius-sm, 4px);
    border: 1px solid var(--eb-border);
    background: var(--eb-surface-raised);
}

/* EbFloatingBox draws no close control of its own; this one goes in its HeaderActions. */
.ts-close[b-hdrfelwu9f] {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--eb-radius-sm, 4px);
    background: none;
    color: var(--eb-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
}

.ts-close:hover[b-hdrfelwu9f] {
    border-color: var(--eb-border);
    color: var(--eb-text);
}

.ts-close:focus-visible[b-hdrfelwu9f] {
    outline: var(--eb-focus-ring, 2px solid var(--eb-accent));
    outline-offset: 1px;
}

/* The floating box is sized by the user; its card and tab strip have to fill it. */
[b-hdrfelwu9f] .tile-settings .eb-floating-box-card,
[b-hdrfelwu9f] .tile-settings .eb-card-body,
[b-hdrfelwu9f] .tile-settings .eb-tabs-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-hdrfelwu9f] .tile-settings .eb-tabs-panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* Suite buttons default to a comfortable size; inside this panel they sit next to 1.5rem fields. */
[b-hdrfelwu9f] .tile-settings .eb-button {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    min-height: 1.5rem;
}
/* /Components/TileTextBox.razor.rz.scp.css */
.tile-text[b-2i91h9yr7a] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    resize: none;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    font: inherit;
    line-height: 1.45;
    /* A pasted URL or a long unbroken run should not push the tile sideways. */
    overflow-wrap: anywhere;
}

.tile-text[b-2i91h9yr7a]::placeholder {
    color: var(--eb-text-muted);
}

/* --eb-focus-ring is a complete outline shorthand, not a colour: spelling it as
   `outline: 2px solid var(--eb-focus-ring)` produced an invalid declaration, and focused tiles
   showed no focus indicator at all. */
.tile-text:focus-visible[b-2i91h9yr7a] {
    outline: var(--eb-focus-ring, 2px solid var(--eb-accent));
    outline-offset: 2px;
}
/* /Components/TodoList.razor.rz.scp.css */
.todo[b-xx7h4ae9ev] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    min-height: 0;
}

[b-xx7h4ae9ev] .eb-sortable-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.todo-row[b-xx7h4ae9ev] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.35rem;
    border-radius: var(--eb-radius-sm, 4px);
}

.todo-row:hover[b-xx7h4ae9ev] {
    background: var(--eb-surface-sunken);
}

/* A finished line steps back rather than disappearing. */
.todo-done .todo-text[b-xx7h4ae9ev] {
    color: var(--eb-text-muted);
    text-decoration: line-through;
}

.todo-done[b-xx7h4ae9ev] {
    opacity: 0.6;
}

/* The only place a drag can start, so the rest of the row stays clickable. Out of the way until
   the row is hovered, since a to-do list should read as bullets and text. */
.todo-grip[b-xx7h4ae9ev] {
    flex: none;
    cursor: grab;
    color: var(--eb-text-muted);
    letter-spacing: -0.25em;
    padding-right: 0.2rem;
    opacity: 0;
    transition: opacity 120ms ease;
}

.todo-row:hover .todo-grip[b-xx7h4ae9ev],
.todo-row:focus-within .todo-grip[b-xx7h4ae9ev] {
    opacity: 1;
}

@media (hover: none) {
    .todo-grip[b-xx7h4ae9ev] {
        opacity: 1;
    }
}

.todo-check[b-xx7h4ae9ev] {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--eb-text-muted);
}

.todo-check svg[b-xx7h4ae9ev] {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.todo-ring[b-xx7h4ae9ev] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: stroke 180ms ease, fill 180ms ease;
}

/* The tick is drawn on by animating its dash offset from hidden to nothing. */
.todo-tick[b-xx7h4ae9ev] {
    fill: none;
    stroke: var(--eb-success-soft, #fff);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 260ms ease-out 60ms;
}

.todo-check-on[b-xx7h4ae9ev] {
    color: var(--eb-success, #16a34a);
}

.todo-check-on .todo-ring[b-xx7h4ae9ev] {
    fill: var(--eb-success, #16a34a);
}

.todo-check-on .todo-tick[b-xx7h4ae9ev] {
    stroke: var(--eb-text-inverse, #fff);
    stroke-dashoffset: 0;
}

.todo-check:focus-visible[b-xx7h4ae9ev] {
    outline: var(--eb-focus-ring, 2px solid var(--eb-accent));
    outline-offset: 2px;
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .todo-ring[b-xx7h4ae9ev],
    .todo-tick[b-xx7h4ae9ev] {
        transition: none;
    }
}

.todo-text[b-xx7h4ae9ev] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    cursor: text;
}

.todo-input[b-xx7h4ae9ev] {
    flex: 1;
    min-width: 0;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm, 4px);
    background: var(--eb-surface-raised);
    color: var(--eb-text);
    font: inherit;
}

.todo-actions[b-xx7h4ae9ev] {
    display: flex;
    gap: 0.15rem;
    flex: none;
    opacity: 0;
    transition: opacity 120ms ease;
}

.todo-row:hover .todo-actions[b-xx7h4ae9ev],
.todo-row:focus-within .todo-actions[b-xx7h4ae9ev] {
    opacity: 1;
}

@media (hover: none) {
    .todo-actions[b-xx7h4ae9ev] {
        opacity: 1;
    }
}

.todo-btn[b-xx7h4ae9ev] {
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--eb-radius-sm, 4px);
    background: none;
    color: var(--eb-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
}

.todo-btn:hover[b-xx7h4ae9ev] {
    border-color: var(--eb-border);
    color: var(--eb-text);
}

.todo-btn-danger:hover[b-xx7h4ae9ev] {
    color: var(--eb-danger);
}

.todo-btn:focus-visible[b-xx7h4ae9ev] {
    outline: var(--eb-focus-ring, 2px solid var(--eb-accent));
    outline-offset: 1px;
}

.todo-empty[b-xx7h4ae9ev] {
    margin: 0;
    padding: 0.5rem 0.35rem;
    color: var(--eb-text-muted);
    font-size: 0.85rem;
}

.todo-add[b-xx7h4ae9ev] {
    display: flex;
    gap: 0.35rem;
    flex: none;
    align-items: center;
}

.todo-btn-add[b-xx7h4ae9ev] {
    font-size: 1.05rem;
    border-color: var(--eb-border);
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-quxjomzq56] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.app-error[b-quxjomzq56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    padding: 2rem;
    text-align: center;
    color: var(--eb-text);
}

.app-error h1[b-quxjomzq56] {
    margin: 0;
    font-size: 1.15rem;
}

.app-error p[b-quxjomzq56] {
    margin: 0;
    max-width: 44ch;
    line-height: 1.5;
    color: var(--eb-text-muted);
}

.app-error-actions[b-quxjomzq56] {
    display: flex;
    gap: 0.5rem;
}
/* /Pages/Dashboard.razor.rz.scp.css */
.tile-surface[b-56njyfbh0e] {
    width: 100%;
    height: 100%;
}

/* Fitted boards are sized to the window exactly, so they must never scroll. A free board can be
   any size at all, and until it could scroll, everything past the window edge was unreachable. */
.tile-surface.fit[b-56njyfbh0e] {
    overflow: hidden;
}

.tile-surface.free[b-56njyfbh0e] {
    overflow: auto;
}

/* EbTileGrid's wrapper is display:flex, which lets the grid shrink below the width it declared
   for itself. Tiles are positioned absolutely against that grid, so a shrunk grid leaves them
   outside the scroll area and out of reach. Blocking the wrapper keeps the grid its real size. */
.tile-surface[b-56njyfbh0e]  .eb-tile-grid-wrapper {
    display: block;
}

/* A tile's body asks for the full height of the card; without this the title bar is what gives
   way, and every tile silently loses its header. */
.tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-card-header {
    flex: none;
}

/* One line, clipped. A long title otherwise wraps to three rows and eats the tile's body. */
.tile-title[b-56njyfbh0e] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* EbTabbedCard's own wrappers are not flex containers, so a tab's text box had nothing to
   stretch against and collapsed to a couple of lines whatever the tile's size. */
.tile-surface[b-56njyfbh0e]  .tab-host .eb-tabs-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.tile-surface[b-56njyfbh0e]  .tab-host .eb-tabs-panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* While a droppable tile is being dragged, every tabbed tile that could take it is outlined, and
   whichever one would take it on release is outlined brightly. board.js adds these classes off the
   grid's drag preview; see startDropWatch for why this is not done from Blazor.

   !important because this has to beat every resting appearance at once: the chrome settings quieten
   an unstyled tile's border from a much more specific selector, and a styled tile paints its own
   border from the generated stylesheet. For the moment a tile is a drop target, that is the only
   thing about it worth seeing - so it wins outright rather than by out-counting each of them. */
.tile-surface[b-56njyfbh0e]  .eb-tile-tile.drop-candidate .eb-card {
    border-color: color-mix(in srgb, var(--eb-accent) 50%, var(--eb-border)) !important;
    border-style: dashed !important;
}

.tile-surface[b-56njyfbh0e]  .eb-tile-tile.drop-target .eb-card {
    border-color: var(--eb-accent) !important;
    border-style: solid !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-accent) 35%, transparent) !important;
}

/* The tabs are what the tile is being dropped into, so they come forward with it. */
.tile-surface[b-56njyfbh0e]  .eb-tile-tile.drop-target .eb-card-header {
    opacity: 1 !important;
    color: var(--eb-text) !important;
}

/* The tile currently being edited in the settings drawer. */
.tile-surface[b-56njyfbh0e]  .eb-tile-tile.tile-selected .eb-card {
    outline: 2px solid var(--eb-accent);
    outline-offset: 2px;
}

/* ---- Chrome ---------------------------------------------------------------------------------
   Three resting states, chosen on the Grid tab. The seeded stylesheet on the Look tab describes
   how a tile looks once revealed; these rules only decide how much of that survives at rest, so
   editing the seed still shows through on hover.

   Only under (hover: hover): on a touch screen there is no pointer to bring the chrome back, so
   these never apply there and tiles stay fully drawn. */

.tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-card,
.tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-card-header,
.tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-card-footer,
.tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-tile-resize-handle {
    transition:
        opacity 140ms ease,
        background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-card,
    .tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-card-header,
    .tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-card-footer,
    .tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-tile-resize-handle {
        transition: none;
    }
}

@media (hover: hover) {
    /* Quieter at rest, but the body keeps its own colour: only the frame, the shadow and the
       title step back. A tile carrying a style of its own is left alone entirely - softening a
       border somebody chose on purpose just makes it look wrong. */
    .tile-surface.chrome-hover[b-56njyfbh0e]  .eb-tile-tile:not(.tile-styled):not(:hover):not(:focus-within) .eb-card {
        border-color: color-mix(in srgb, var(--eb-border) 60%, transparent);
        box-shadow: none;
    }

    .tile-surface.chrome-hover[b-56njyfbh0e]  .eb-tile-tile:not(:hover):not(:focus-within) .eb-card-header {
        border-bottom-color: transparent;
        color: var(--eb-text-muted);
    }

    .tile-surface.chrome-hover[b-56njyfbh0e]  .eb-tile-tile:not(:hover):not(:focus-within) .eb-card-footer {
        opacity: 0.6;
    }

    .tile-surface.chrome-hover[b-56njyfbh0e]  .eb-tile-tile:not(:hover):not(:focus-within) .eb-tile-resize-handle {
        opacity: 0;
    }

    /* Nothing but content until the pointer arrives. */
    .tile-surface.chrome-never[b-56njyfbh0e]  .eb-tile-tile:not(:hover):not(:focus-within) .eb-card {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .tile-surface.chrome-never[b-56njyfbh0e]  .eb-tile-tile:not(:hover):not(:focus-within) .eb-card-header,
    .tile-surface.chrome-never[b-56njyfbh0e]  .eb-tile-tile:not(:hover):not(:focus-within) .eb-card-footer,
    .tile-surface.chrome-never[b-56njyfbh0e]  .eb-tile-tile:not(:hover):not(:focus-within) .eb-tile-resize-handle {
        opacity: 0;
    }
}

@media (hover: hover) {
    /* The chrome settings quieten the header because it is decoration. A tab strip is not - you
       have to be able to see which tab you are looking at - so it keeps its colour and stays put
       while the title, the border and the handles step back around it. */
    .tile-surface.chrome-hover[b-56njyfbh0e]  .eb-tile-tile:not(:hover):not(:focus-within) .tile-tabs,
    .tile-surface.chrome-never[b-56njyfbh0e]  .eb-tile-tile:not(:hover):not(:focus-within) .eb-card-header:has(.tile-tabs) {
        color: var(--eb-text);
        opacity: 1;
    }
}

/* ---- Tile content --------------------------------------------------------------------------- */

.tab-host[b-56njyfbh0e] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ---- Accordion tiles ------------------------------------------------------------------------
   An accordion fills its tile the way a tabbed tile does: the closed title bars stack at their
   own height and whichever section is open takes everything left over, so a section behaves like
   the tile it was before it was filed in. With several allowed open they share the space. */

.tile-surface[b-56njyfbh0e]  .tab-host .eb-accordion {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.tile-surface[b-56njyfbh0e]  .tab-host .eb-accordion-item {
    flex: none;
}

.tile-surface[b-56njyfbh0e]  .tab-host .eb-accordion-item:has([aria-expanded="true"]) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Enough to be worth opening even when a stack of closed bars has taken most of the tile;
       the accordion scrolls rather than squeezing it to nothing. */
    min-height: min(10rem, 100%);
}

.accordion-panel[b-56njyfbh0e] {
    flex: 1 1 auto;
    min-height: 0;
}

.tab-empty[b-56njyfbh0e] {
    margin: auto;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--eb-border);
    border-radius: var(--eb-radius-sm, 4px);
    color: var(--eb-text-muted);
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.5;
}

.tab-panel[b-56njyfbh0e] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    min-height: 0;
}

/* ---- Board-level empty state ---------------------------------------------------------------- */

.board-empty[b-56njyfbh0e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    color: var(--eb-text-muted);
    text-align: center;
}

.board-empty h1[b-56njyfbh0e] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--eb-text);
}

.board-empty p[b-56njyfbh0e] {
    margin: 0;
    max-width: 36ch;
    line-height: 1.5;
}

/* The drawer no longer covers the board: the surface narrows while it is open, the observer sees
   the new width, and the cells re-fit to what is actually visible. */
.tile-surface.drawer-open[b-56njyfbh0e] {
    width: calc(100% - 440px);
}

.tile-rich[b-56njyfbh0e] {
    height: 100%;
    min-height: 0;
    overflow: auto;
}

/* ---- Per-tile style ---------------------------------------------------------------------------
   Border width is the one part of a card's frame EbCard does not tokenise, so the tile settings
   panel drives it through a variable of ours. */
.tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-card {
    border-width: var(--tile-border-width, 1px);
}

.tile-surface[b-56njyfbh0e]  .eb-tile-tile .eb-tile-content {
    font-size: var(--tile-font-size, inherit);
}

/* ---- The title bar --------------------------------------------------------------------------- */

.tile-head[b-56njyfbh0e] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
}

.tile-title[b-56njyfbh0e] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* With tabs in the bar the title is a label beside them, not the thing that fills it. */
.tile-head.has-tabs .tile-title[b-56njyfbh0e] {
    flex: 0 1 auto;
    max-width: 40%;
}

.tile-tabs[b-56njyfbh0e] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tile-tabs[b-56njyfbh0e]::-webkit-scrollbar {
    display: none;
}

.tile-tab[b-56njyfbh0e] {
    flex: none;
    max-width: 12rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--eb-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.tile-tab:hover[b-56njyfbh0e] {
    color: var(--eb-text);
    border-color: var(--eb-border);
}

.tile-tab-on[b-56njyfbh0e] {
    background: var(--eb-accent-soft, var(--eb-surface-raised));
    border-color: var(--eb-border);
    color: var(--eb-text);
    font-weight: 600;
}

.tile-tab:focus-visible[b-56njyfbh0e] {
    outline: var(--eb-focus-ring, 2px solid var(--eb-accent));
    outline-offset: 1px;
}

.tile-pin[b-56njyfbh0e] {
    flex: none;
    font-size: 0.8em;
    opacity: 0.7;
}

.tile-gear[b-56njyfbh0e] {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--eb-radius-sm, 4px);
    background: none;
    color: var(--eb-text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}

.tile-surface[b-56njyfbh0e]  .eb-tile-tile:hover .tile-gear,
.tile-surface[b-56njyfbh0e]  .eb-tile-tile:focus-within .tile-gear {
    opacity: 1;
}

@media (hover: none) {
    .tile-gear[b-56njyfbh0e] {
        opacity: 1;
    }
}

.tile-gear:hover[b-56njyfbh0e] {
    color: var(--eb-text);
    border-color: var(--eb-border);
}

.tile-gear:focus-visible[b-56njyfbh0e] {
    opacity: 1;
    outline: var(--eb-focus-ring, 2px solid var(--eb-accent));
    outline-offset: 1px;
}

/* ---- Locked tiles ------------------------------------------------------------------------------
   The title bar is EbTile's drag handle, so taking pointer events off it is what actually pins the
   tile; the controls inside it are handed them back. Keyboard move and resize are swallowed in
   shortcuts.js, which sees the key before EbTile does. */
.tile-surface[b-56njyfbh0e]  .eb-tile-tile.tile-locked .eb-card-header {
    pointer-events: none;
    cursor: default;
}

.tile-surface[b-56njyfbh0e]  .eb-tile-tile.tile-locked .eb-card-header button {
    pointer-events: auto;
}

.tile-surface[b-56njyfbh0e]  .eb-tile-tile.tile-locked .eb-tile-resize-handle {
    display: none;
}

/* ---- The drop preview --------------------------------------------------------------------------
   Drawn as an inset shadow rather than a border. The grid animates the preview's width and height,
   and a real border on a box whose size is mid-transition renders at fractional widths, which is
   what made its edges look broken up. An inset shadow paints inside the box and stays even. */
.tile-surface[b-56njyfbh0e]  .eb-tile-cell-highlight {
    border-color: transparent;
    box-shadow: inset 0 0 0 2px var(--eb-tile-highlight-border, var(--eb-accent));
}

/* ---- The board-wide editing switch ------------------------------------------------------------ */

.edit-toggle[b-56njyfbh0e] {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--eb-border);
    border-radius: 999px;
    background: var(--eb-surface-raised);
    color: var(--eb-text-muted);
    box-shadow: var(--eb-shadow-1);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease;
}

.edit-toggle:hover[b-56njyfbh0e],
.edit-toggle:focus-visible[b-56njyfbh0e] {
    opacity: 1;
    color: var(--eb-text);
}

.edit-toggle:focus-visible[b-56njyfbh0e] {
    outline: var(--eb-focus-ring, 2px solid var(--eb-accent));
    outline-offset: 2px;
}

/* Pinned is a state worth seeing without hovering for it. */
.edit-toggle.edit-off[b-56njyfbh0e] {
    opacity: 1;
    color: var(--eb-warning, var(--eb-text));
    border-color: var(--eb-warning, var(--eb-border));
}

@media (prefers-reduced-motion: reduce) {
    .tile-gear[b-56njyfbh0e],
    .edit-toggle[b-56njyfbh0e] {
        transition: none;
    }
}

/* A CodePen tile is its result and nothing else; the playground opens in its own window. */
.tile-codepen[b-56njyfbh0e] {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

.pen-close[b-56njyfbh0e] {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--eb-radius-sm, 4px);
    background: none;
    color: var(--eb-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
}

.pen-close:hover[b-56njyfbh0e] {
    border-color: var(--eb-border);
    color: var(--eb-text);
}

.pen-close:focus-visible[b-56njyfbh0e] {
    outline: var(--eb-focus-ring, 2px solid var(--eb-accent));
    outline-offset: 1px;
}

/* The wrapper that keeps the arrow keys away from EbTile's move-and-resize handler. */
.tile-body[b-56njyfbh0e] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* A tile can be movable and still refuse to be resized, so the handles go on their own class
   rather than riding along with the pin. */
.tile-surface[b-56njyfbh0e]  .eb-tile-tile.tile-nosize .eb-tile-resize-handle {
    display: none;
}

/* Rich text with its content locked is rendered rather than edited, so it needs the padding and
   scrolling the editor was providing. */
.tile-rich-read[b-56njyfbh0e] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.35rem 0.5rem;
}