/* Script Studio Blocks mode (scriptBlocks.js) — a Blockly-style visual builder. Rendered into a plain
   <div> by raw JS (not Blazor's own render tree), so this is a global stylesheet rather than a
   component-scoped one: Blazor's CSS isolation only stamps its scoping attribute onto elements it
   renders itself, and would silently fail to apply to nodes `document.createElement`d from JS. Reuses
   the site's own tokens (app.css) for colors/fonts so Blocks mode doesn't look like a bolted-on widget.

   Redesign: two regions now — .sbb-rail (workspace jump list) and .sbb-canvas (structural block cards,
   dotted-grid backdrop) — plus a modal dialog (.sbb-modal-*) for adding/editing a block's actual fields,
   which this module appends to document.body itself rather than mounting into anything Blazor renders.
   The sb-* prefixed rules below (fields, sockets, expression chips, add menus) are unchanged from the
   previous design — they're reused as-is by the modal's field editors. */

.sbb-rail,
.sbb-canvas {
    display: block;
}

/* ── Workspace rail ── */

.sbb-rail-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sbb-rail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 7px 8px;
    font-size: 12.5px;
    color: var(--text-body);
    cursor: pointer;
    text-align: left;
    transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

.sbb-rail-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sbb-rail-row-active {
    background: rgba(3, 177, 202, 0.1);
    border-color: rgba(3, 177, 202, 0.3);
    color: #ffffff;
}

.sbb-rail-row:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 1px;
}

.sbb-rail-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbb-rail-add {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Type tags — shared by the rail and every canvas card header. ── */

.sbb-tag {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 5px;
    padding: 2px 6px;
}

.sbb-tag-ask { background: rgba(3, 177, 202, 0.14); color: var(--cyan-soft); }
.sbb-tag-rem { background: rgba(232, 180, 106, 0.14); color: var(--warn); }
.sbb-tag-tmr { background: rgba(15, 163, 141, 0.16); color: var(--teal-soft); }
.sbb-tag-evt { background: rgba(232, 180, 106, 0.14); color: var(--warn); }
.sbb-tag-show { background: rgba(201, 91, 77, 0.14); color: var(--danger-soft); }
.sbb-tag-rule { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }

/* ── Canvas ── */

.sbb-canvas {
    background-color: var(--bg-page);
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px;
}

.sbb-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sbb-card {
    position: relative;
    background: var(--bg-code);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left-width: 3px;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

.sbb-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.sbb-card-ask { border-left-color: var(--accent-cyan); }
.sbb-card-rule { border-left-color: var(--text-secondary); }
.sbb-card-rem { border-left-color: var(--warn); }
.sbb-card-evt { border-left-color: var(--warn); }
.sbb-card-tmr { border-left-color: var(--accent-teal); }
.sbb-card-show { border-left-color: var(--danger-soft); }

.sbb-card-selected {
    background: #16192a;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 1px rgba(3, 177, 202, 0.4);
}

.sbb-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sbb-card-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
}

.sbb-card-subtitle {
    font-size: 12.5px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

/* ── Statement rows — compact, read-only-looking summaries; only structure (add/remove/reorder) lives
   here, per the redesign's "settings edit in the right panel" rule. ── */

.sbb-stmt-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sbb-stmt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    transition: background-color 140ms ease-out;
}

.sbb-stmt-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sbb-stmt-row:hover .sbb-stmt-order,
.sbb-stmt-row:focus-within .sbb-stmt-order {
    opacity: 1;
}

.sbb-stmt-row-selected {
    background: rgba(3, 177, 202, 0.12);
    outline: 1px solid rgba(3, 177, 202, 0.35);
}

.sbb-stmt-text {
    flex: 1;
    min-width: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-body);
    overflow-wrap: anywhere;
}

.sbb-stmt-order {
    flex: none;
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 140ms ease-out;
}

.sbb-stmt-order-btn {
    width: 18px;
    height: 18px;
    font-size: 9px;
}

.sbb-stmt-children {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 10px;
    border-left: 2px dashed rgba(255, 255, 255, 0.12);
}

/* ── Show card — one card, chips instead of one card per item. ── */

.sbb-show-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sbb-show-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--text-body);
    cursor: pointer;
    transition: border-color 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out;
}

.sbb-show-chip:hover {
    border-color: rgba(255, 255, 255, 0.24);
}

.sbb-show-chip-action {
    background: rgba(3, 177, 202, 0.1);
    border-color: rgba(3, 177, 202, 0.3);
    color: var(--cyan-soft);
}

.sbb-show-chip-active {
    border-color: var(--accent-cyan);
    color: #ffffff;
}

/* ── Modal editor — add/edit a block's fields. Independent of Blazor entirely: appended straight to
   document.body, same as .sb-exprpicker below. ── */

.sbb-modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(8, 8, 14, 0.66);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sbb-modal-dialog {
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

.sbb-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sbb-modal-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    color: var(--text-primary);
}

.sbb-modal-close {
    flex: none;
}

.sbb-modal-body {
    display: flex;
    flex-direction: column;
}

.sbb-inspector-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sbb-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbb-modal-spacer {
    flex: 1;
}

/* ── Add menus (shared by rail's "+ Add", canvas cards' "+ Statement"/"+ Add to appearance"). Real
   <button> elements below (created via document.createElement, outside Blazor's render tree entirely)
   are given the same hover-transition timing and :focus-visible ring the rest of the app's MudButton
   instances get natively, so Blocks mode doesn't feel visually inconsistent with the rest of the
   dashboard even though it can't literally be MudButton. ── */

.sb-addmenu {
    position: relative;
    display: inline-block;
}

.sb-addbtn {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cyan-soft);
    cursor: pointer;
    transition: border-color 200ms ease-out, background-color 200ms ease-out;
}

.sb-addbtn:hover {
    border-color: var(--accent-cyan);
    background: rgba(3, 177, 202, 0.08);
}

.sb-addbtn:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

.sb-addmenu-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-code);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-addmenu-list.hidden {
    display: none;
}

.sb-addmenu-item {
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text-body);
    cursor: pointer;
    width: 100%;
    transition: background-color 200ms ease-out, color 200ms ease-out;
}

.sb-addmenu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.sb-addmenu-item:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: -2px;
}

.sb-iconbtn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    width: 22px;
    height: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 200ms ease-out, border-color 200ms ease-out;
}

.sb-iconbtn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.sb-iconbtn:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

.sb-delete {
    margin-left: auto;
    color: var(--danger-soft);
    border-color: rgba(201, 91, 77, 0.35);
}

.sb-delete:hover {
    border-color: var(--danger-soft);
}

/* ── Fields (inspector's own field editors) ── */

.sb-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.sb-field-label {
    color: var(--text-muted);
}

.sb-input {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: inherit;
}

.sb-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.sb-input-narrow {
    max-width: 110px;
}

select.sb-input {
    cursor: pointer;
}

.sb-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.sb-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sb-toggle-track {
    width: 32px;
    height: 18px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.16);
    position: relative;
    transition: background 120ms ease-out;
}

.sb-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 120ms ease-out;
}

.sb-toggle input:checked + .sb-toggle-track {
    background: var(--brand-gradient);
}

.sb-toggle input:checked + .sb-toggle-track::after {
    transform: translateX(14px);
}

.sb-toggle input:focus-visible + .sb-toggle-track {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

.sb-checkline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.sb-namefield {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sb-inline-warning {
    font-size: 11px;
    color: var(--warn);
    line-height: 1.3;
}

.sb-empty-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.sb-branch-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 2px;
}

.sb-stmtlist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-option-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ── Expression sockets/chips — the typed puzzle-piece value side of the language, used only in the
   inspector now. ── */

.sb-socket {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-socket-label {
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 6px;
    white-space: nowrap;
}

.sb-socket-empty {
    background: transparent;
    border: 1.5px dashed rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 200ms ease-out, color 200ms ease-out;
}

.sb-socket-empty:hover {
    border-color: var(--accent-cyan);
    color: var(--cyan-soft);
}

.sb-socket-empty:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

.sb-socket-missing > .sb-socket-empty {
    border-color: rgba(232, 180, 106, 0.5);
    color: var(--warn);
}

.sb-exprchip {
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
    border: 1px solid transparent;
}

.sb-chip-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-chip-label {
    font-size: 12px;
    font-weight: 600;
}

.sb-exprchip .sb-iconbtn {
    width: 18px;
    height: 18px;
    font-size: 9px;
}

/* Value-type colors — a value chip's background communicates what it produces, independent of the
   structural block category colors above. */
.sb-exprtype-number { background: rgba(3, 177, 202, 0.14); border-color: rgba(3, 177, 202, 0.35); }
.sb-exprtype-duration { background: rgba(232, 147, 90, 0.14); border-color: rgba(232, 147, 90, 0.35); }
.sb-exprtype-text { background: rgba(214, 111, 160, 0.14); border-color: rgba(214, 111, 160, 0.35); }
.sb-exprtype-toggle { background: rgba(136, 152, 170, 0.14); border-color: rgba(136, 152, 170, 0.35); }
.sb-exprtype-condition { background: rgba(139, 127, 214, 0.14); border-color: rgba(139, 127, 214, 0.35); }
.sb-exprtype-any { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }

.sb-exprchip-mismatch {
    border-color: var(--danger-soft) !important;
}

.sb-exprpicker {
    position: absolute;
    z-index: 100;
    background: var(--bg-code);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
    max-height: 340px;
    overflow-y: auto;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-exprpicker-group {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 6px 8px 2px;
}

.sb-exprpicker-item {
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 13px;
    color: var(--text-body);
    cursor: pointer;
    width: 100%;
    transition: background-color 200ms ease-out, color 200ms ease-out;
}

.sb-exprpicker-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.sb-exprpicker-item:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: -2px;
}