/* ================================================================
   UI Framework — base stylesheet
   Dark design system matching GAMExp / config-editor aesthetic.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #13161c;
    --bg2:         #1a1d25;
    --bg3:         #222630;
    --border:      #2e3240;
    --accent:      #4a8fe8;
    --accent2:     #6ab6ff;
    --text:        #cdd6e8;
    --text-dim:    #7a84a0;
    --danger:      #e85555;
    --success:     #4acc7a;
    --warn:        #e8a245;
    --font:        'Segoe UI', system-ui, sans-serif;
    --mono:        'Consolas', 'Cascadia Code', monospace;
    --radius:      6px;
}

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.5;
}

/* ── App root ──────────────────────────────────────────────────── */

#app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Layout containers ─────────────────────────────────────────── */

.fw-layout-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}

.fw-layout-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ── Panel ─────────────────────────────────────────────────────── */

.fw-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}

/* ── CommandBar / toolbar ──────────────────────────────────────── */

.fw-cmd-bar {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    height: 40px;
    gap: 2px;
    flex-shrink: 0;
}

.fw-cmd-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: var(--radius);
    font-size: 12px;
    font-family: var(--font);
    font-weight: 500;
    white-space: nowrap;
    transition: background .1s, color .1s;
}
.fw-cmd-btn:hover    { background: rgba(255,255,255,.07); }
.fw-cmd-btn:active   { background: rgba(255,255,255,.12); }
.fw-cmd-btn:disabled { opacity: .4; cursor: default; }

.fw-cmd-separator {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
    border: none;
}

.fw-cmd-spacer { flex: 1; }

/* ── NavigationList ────────────────────────────────────────────── */

.fw-nav-list {
    list-style: none;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    padding: 6px 0;
    overflow-y: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.fw-nav-item {
    display: flex;
    align-items: center;
    padding: 7px 14px;
    cursor: pointer;
    border-radius: var(--radius);
    margin: 1px 6px;
    font-size: 12px;
    color: var(--text);
    user-select: none;
    transition: background .1s;
}
.fw-nav-item:hover  { background: rgba(255,255,255,.05); }
.fw-nav-item.active {
    background: rgba(74,143,232,.15);
    color: var(--accent2);
    border-left: 2px solid var(--accent);
    padding-left: 12px;
    font-weight: 600;
}

/* ── SplitPane ─────────────────────────────────────────────────── */

.fw-split-pane {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.fw-split-h { flex-direction: row; }
.fw-split-v { flex-direction: column; }

.fw-split-child {
    display: flex;
    flex-direction: column;
    overflow: auto;
    border-right: 1px solid var(--border);
}
.fw-split-child:last-child { border-right: none; flex: 1; }

/* Drag divider (inserted between panes when resizable=true) */
.fw-split-divider {
    flex: none;
    background: var(--border);
    transition: background 0.15s;
    z-index: 1;
}
.fw-split-divider:hover,
.fw-split-divider:active { background: var(--accent, #4a8fe8); }
.fw-split-divider--h {
    width: 4px;
    cursor: col-resize;
}
.fw-split-divider--v {
    height: 4px;
    cursor: row-resize;
}

/* ── Smart fields (@@path@@ rendered by SmartFieldParser) ──────── */

.fw-smart-field {
    display: inline;
}
.fw-smart-field[data-role="label"][data-object-type] {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
/* don't double-underline a mailto link that also has role=label */
a.fw-smart-field[data-role="label"][data-object-type] {
    text-decoration: none;
}
a.fw-smart-field[data-role="label"][data-object-type]:hover {
    color: var(--accent, #4a8fe8);
    text-decoration: underline;
}

/* ── Context menu ──────────────────────────────────────────────── */

.fw-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 160px;
    padding: 4px 0;
    background: var(--bg2, #252526);
    border: 1px solid var(--border, #3c3c3c);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
}

.fw-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: none;
    border: none;
    color: var(--text, #ccc);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.fw-context-menu-item:hover {
    background: var(--accent, #4a8fe8);
    color: #fff;
}

.fw-context-menu-item:active {
    background: var(--accent-dim, #2e6ac6);
}

/* ── DataGrid ──────────────────────────────────────────────────── */

.fw-data-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.fw-data-grid thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg2);
}

.fw-data-grid th {
    text-align: left;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.fw-data-grid td {
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--text);
}

.fw-data-grid tbody tr { transition: background .08s; }
.fw-data-grid tbody tr:hover { background: rgba(255,255,255,.04); cursor: pointer; }

.fw-data-grid .row-action-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent);
    cursor: pointer;
    padding: 2px 9px;
    font-size: 11px;
    margin-right: 4px;
    font-family: var(--font);
    transition: background .1s;
}
.fw-data-grid .row-action-btn:hover { background: rgba(74,143,232,.15); }

/* ── Text / inline ─────────────────────────────────────────────── */

.fw-text { display: inline; }

/* ── RichTextEditor ────────────────────────────────────────────── */

.fw-rich-text {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    padding: 12px 14px;
    resize: none;
    outline: none;
    line-height: 1.6;
    transition: border-color .12s;
}
.fw-rich-text:focus      { border-color: var(--accent); }
.fw-rich-text.readonly   { border: none; background: transparent; overflow-y: auto; padding: 14px 16px; }

/* ── HTML widget ───────────────────────────────────────────────── */

.fw-html { display: contents; }
.fw-template { display: contents; }

/* ── Notification ──────────────────────────────────────────────── */

.fw-notification {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 18px;
    border-radius: var(--radius);
    max-width: 340px;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    font-size: 12px;
}
.fw-notification-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.fw-notification-text { flex: 1 1 auto; }
.fw-notification-close {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    opacity: .7;
}
.fw-notification-close:hover  { opacity: 1; }
.fw-notification-close:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
    opacity: 1;
}
.fw-notification-close[hidden] { display: none; }
.fw-notification[data-notification-type="error"]   { border-color: var(--danger);  color: var(--danger);  }
.fw-notification[data-notification-type="success"] { border-color: var(--success); color: var(--success); }
.fw-notification[data-notification-type="warning"] { border-color: var(--warn);    color: var(--warn);    }

/* ── Form ──────────────────────────────────────────────────────── */

.fw-form { display: flex; flex-direction: column; gap: 8px; }

/* ── Placeholder (unimplemented / stub widgets) ────────────────── */

.fw-placeholder {
    padding: 10px 14px;
    color: var(--text-dim);
    font-style: italic;
    font-size: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    margin: 6px;
    background: rgba(255,255,255,.02);
}

/* ── Mount error (async lifecycle / child mount failures) ───────── */

.fw-mount-error {
    padding: 10px 14px;
    margin: 6px;
    border: 1px solid var(--danger, #c44);
    border-radius: var(--radius);
    background: rgba(200, 60, 60, .08);
    color: var(--text, #e8eaed);
    font-size: 12px;
}

.fw-mount-error-title {
    display: block;
    font-weight: 600;
    font-family: var(--mono);
    color: var(--danger, #e88);
    margin-bottom: 4px;
}

.fw-mount-error-msg {
    margin: 0;
    color: var(--text-dim);
    word-break: break-word;
}

/* ── Scrollbars (Webkit) ───────────────────────────────────────── */

::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #3e4560; }

/* ================================================================
   Form
   ================================================================ */

.fw-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Section (collapsible group) ───────────────────────────────── */

.fw-form-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
}

.fw-form-section-title {
    background: var(--bg2);
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    list-style: none;   /* hide <details> marker in some browsers */
}
.fw-form-section-title:hover { color: var(--text); }
.fw-form-section-title::-webkit-details-marker { display: none; }

.fw-form-section-body { padding: 4px 0 8px; }

/* ── Field row ─────────────────────────────────────────────────── */

.fw-field-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 8px;
    align-items: start;
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255,255,255,.03);
    min-width: 0;   /* prevent grid blowout */
}
.fw-field-row:last-child { border-bottom: none; }

/* `display: grid` above beats the UA's [hidden] rule, so a hidden row needs its own. */
.fw-field-row[hidden] {
    display: none !important;
}

.fw-field-label      { padding-top: 5px; }

.fw-field-label-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.fw-field-label-text {
    display: inline;
    font-size: 12px;
    color: var(--text);
}

.fw-field-key {
    display: inline-block;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    background: rgba(255,255,255,.04);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Field help icon + tooltip (schema field.help / HELP) */
.fw-field-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent, #4a8fe8) 55%, var(--border, #444));
    color: var(--accent, #4a8fe8);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
}

.fw-field-help[hidden] {
    display: none !important;
}

.fw-field-help::after {
    content: attr(data-help);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 40;
    min-width: 160px;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #1a1d24;
    color: #e8eaed;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}

.fw-field-help:hover::after,
.fw-field-help:focus::after,
.fw-field-help:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* Schema-level form help banner (schema.help / HELP) */
.fw-form-help {
    padding: 10px 14px;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-dim, #9aa0a6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: color-mix(in srgb, var(--bg2, #1e222b) 80%, transparent);
}

.fw-form-help[hidden] {
    display: none !important;
}

/* For simple primitive inputs: inline flex */
.fw-field-widget {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* Complex inputs (container / dictionary / record arrays) fill the cell */
.fw-field-widget > .fw-container-input,
.fw-field-widget > .fw-dict-input,
.fw-field-widget > .fw-array-obj-input {
    width: 100%;
    flex: 1 1 100%;
}

/* Multi-line editors fill the field cell (flex parent otherwise keeps default cols width) */
.fw-field-widget > .fw-html-input,
.fw-field-widget > .fw-json-input,
.fw-field-widget > .fw-json-textarea,
.fw-field-widget > textarea {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
}

/* ── Footer ────────────────────────────────────────────────────── */

.fw-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.fw-form-footer[hidden] { display: none; }

.fw-form-footer--dialog {
    justify-content: flex-end;
    padding: 12px 0 0;
    margin-top: 8px;
}

/* ── Buttons ───────────────────────────────────────────────────── */

.fw-btn,
.fw-btn-save,
.fw-btn-add-row,
.fw-btn-add-entry,
.fw-btn-row-move,
.fw-btn-del-row,
.fw-btn-override,
.fw-btn-remove-override,
.fw-btn-expression,
.fw-btn-del-entry {
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.fw-btn[hidden],
.fw-btn-save[hidden] { display: none; }

.fw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    padding: 5px 12px;
    font-size: 12px;
    font-family: var(--font);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.fw-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, .06);
    border-color: var(--accent);
    color: var(--accent2);
}
.fw-btn:active:not(:disabled) { background: rgba(255, 255, 255, .09); }
.fw-btn:disabled              { opacity: .45; cursor: not-allowed; }

.fw-btn-save {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background .12s;
}
.fw-btn-save:hover:not(:disabled) { background: var(--accent2); }
.fw-btn-save:disabled             { opacity: .45; cursor: default; }

.fw-save-status        { font-size: 12px; }
.fw-save-status.ok     { color: var(--success); }
.fw-save-status.error  { color: var(--danger); }
.fw-save-status.saving { color: var(--text-dim); }

.fw-blocking-refs-panel     { flex: 1 1 100%; margin-top: 4px; font-size: 12px; color: var(--danger); }
.fw-blocking-refs-title     { margin-bottom: 4px; font-weight: 600; }
.fw-blocking-refs-list      { margin: 0; padding-left: 1.2em; }
.fw-blocking-refs-list li   { margin: 2px 0; word-break: break-word; }

/* ── Input primitives ──────────────────────────────────────────── */

.fw-num-input,
.fw-text-input,
.fw-date-input,
.fw-datetime-input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 4px 8px;
    font-size: 12px;
    font-family: var(--font);
    width: 120px;
    outline: none;
    transition: border-color .12s;
}
.fw-datetime-input { width: 180px; }
.fw-num-input:focus,
.fw-text-input:focus,
.fw-date-input:focus,
.fw-datetime-input:focus { border-color: var(--accent); }

.fw-datetime-interval {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-end;
}
.fw-datetime-interval__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fw-datetime-interval__label {
    font-size: 10px;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* HTML / template editor — multi-line monospace textarea */
.fw-html-input {
    display: block;
    width: 100%;
    min-width: min(100%, 16rem);
    min-height: 6.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 6px 8px;
    font-size: 12px;
    font-family: var(--mono, monospace);
    line-height: 1.55;
    /* Preserve newlines; allow both axes (browser grip) */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    resize: both;
    outline: none;
    box-sizing: border-box;
    transition: border-color .12s;
}
.fw-html-input:focus { border-color: var(--accent); }

.fw-readonly-value {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
}

/* A field whose declaration states its value: drawn by its type, never edited. */
.fw-fixed-value {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
}

/* The field of a type no widget is registered for. */
.fw-type-error {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--danger);
    border: 1px dashed var(--danger);
    border-radius: 3px;
    padding: 2px 6px;
}

/* Toggle switch */
.fw-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    height: 22px;
}
.fw-toggle input[type="checkbox"] { width: 0; height: 0; opacity: 0; position: absolute; }
.fw-toggle-slider {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    transition: background .18s;
    flex-shrink: 0;
}
.fw-toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s;
}
.fw-toggle input:checked + .fw-toggle-slider         { background: var(--accent); }
.fw-toggle input:checked + .fw-toggle-slider::before { transform: translateX(16px); }

/* Nullable inputs */
.fw-nullable-input { display: flex; align-items: center; gap: 8px; }
.fw-null-label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
}

/* Array input */
.fw-array-input  { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.fw-array-list   { display: flex; flex-direction: column; gap: 3px; }
.fw-array-row    {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

/* Host for the per-row value widget; shrink so move/delete stay visible */
.fw-array-item-slot {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* String items stretch; plain numeric items stay compact */
.fw-array-item.fw-text-input { width: auto; flex: 1; min-width: 80px; }

.fw-array-item {
    width: 100px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Width×height pairs need natural width — never clamp to the 100px numeric rule */
.fw-array-item.fw-dimension-input,
.fw-dimension-input.fw-array-item,
.fw-array-item-slot > .fw-dimension-input {
    width: auto !important;
    max-width: none;
    flex: 0 0 auto;
}

.fw-btn-row-move,
.fw-btn-dup-row,
.fw-btn-del-row {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
    font-family: var(--font);
    transition: color .1s, border-color .1s;
}
.fw-btn-row-move:hover    { color: var(--text); }
.fw-btn-dup-row:hover     { color: var(--text); border-color: var(--accent); }
.fw-btn-del-row:hover     { color: var(--danger); border-color: var(--danger); }
.fw-btn-row-move:disabled { opacity: .3; cursor: default; }
.fw-btn-dup-row:disabled  { opacity: .3; cursor: default; }

.fw-btn-add-row {
    align-self: flex-start;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--font);
    margin-top: 2px;
    transition: border-color .12s, color .12s;
}
.fw-btn-add-row:hover { border-color: var(--accent); color: var(--accent); }

/* JSON textarea */
.fw-json-input    { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.fw-json-textarea {
    display: block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 6px 8px;
    font-family: var(--mono);
    font-size: 11px;
    width: 100%;
    min-width: min(100%, 16rem);
    min-height: 6.5rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    resize: both;
    outline: none;
    box-sizing: border-box;
    transition: border-color .12s;
}
.fw-json-textarea:focus { border-color: var(--accent); }
.fw-json-error          { font-size: 11px; color: var(--danger); }

/* ================================================================
   Layered field chrome — inherit / override per field
   ================================================================ */

.fw-btn-override {
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font);
    padding: 2px 10px;
    transition: background .12s, color .12s;
}
.fw-btn-override:hover { background: var(--accent); color: #fff; }

/* Second button of the layered readonly row: set this field here, as an expression. */
.fw-layered-readonly .fw-btn-expression { margin-left: 6px; }

/* Input + expression / override actions on one row: field, then the button. */
.fw-field-edit-chrome,
.fw-field-expr-chrome {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.fw-field-edit-chrome > .fw-ic-widget,
.fw-field-expr-chrome > [data-ref="body"] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Input-controller toolbar (edit mode) — sits to the right of the current input */
.fw-ic-toolbar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    padding-top: 2px;
}

.fw-ic-widget { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }

.fw-btn-remove-override {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font);
    padding: 2px 9px;
    transition: border-color .12s, color .12s, background .12s;
}
.fw-btn-remove-override:hover { border-color: var(--danger); color: var(--danger); }

/* ================================================================
   Add / remove entry buttons (ExpressionInput case rows)
   ================================================================ */

.fw-btn-add-entry {
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font);
    padding: 2px 9px;
    transition: border-color .12s, color .12s;
}
.fw-btn-add-entry:hover { border-color: var(--accent); color: var(--accent); }

.fw-btn-del-entry {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 7px;
    font-family: var(--font);
    transition: color .1s, border-color .1s;
}
.fw-btn-del-entry:hover { color: var(--danger); border-color: var(--danger); }

/* ================================================================
   ContainerInput — inline fixed-schema object editor
   ================================================================ */

.fw-container-input {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    box-sizing: border-box;
}

.fw-container-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px;
    align-items: start;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255,255,255,.03);
    background: var(--bg2);
}
.fw-container-row:last-child { border-bottom: none; }

.fw-container-label     { padding-top: 4px; }
.fw-container-label-text {
    display: block;
    font-size: 11px;
    color: var(--text);
}

.fw-container-input-wrap {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}

/* ================================================================
   DictionaryInput — dynamic key→value master/detail editor
   ================================================================ */

.fw-dict-input {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 160px;
    width: 100%;
    box-sizing: border-box;
}

/* Left: key list */
.fw-dict-keys {
    width: 210px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    background: var(--bg2);
    display: flex;
    flex-direction: column;
}

.fw-dict-key-filter-slot:not(:empty) {
    padding: 6px 8px 0;
}

.fw-dict-key-filter {
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
    padding: 4px 6px;
}

.fw-dict-key-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 1000px;
    overflow-y: auto;
}

.fw-dict-key-empty {
    padding: 8px 10px;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
}

.fw-dict-key-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
}
.fw-dict-key-item:hover   { background: rgba(255,255,255,.04); }
.fw-dict-key-item.active  { background: rgba(74,143,232,.15); }

.fw-dict-key-label {
    font-size: 12px;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-dict-add-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-top: 1px solid var(--border);
}

.fw-dict-new-key-slot {
    flex: 1;
    min-width: 0;
    display: flex;
}

.fw-dict-new-key,
.fw-dict-new-key-slot .fw-text-input,
.fw-dict-new-key-slot .fw-source-input,
.fw-dict-new-key-slot .fw-selector-input {
    width: 100%;
    min-width: 0;
    flex: 1;
    box-sizing: border-box;
    font-size: 11px;
    padding: 3px 6px;
}

.fw-dict-new-key-slot .fw-selector-input {
    padding: 0;
}

.fw-dict-new-key-slot .fw-selector-search {
    font-size: 11px;
    padding: 3px 6px;
}

.fw-dict-new-key-slot .fw-selector-list {
    max-height: 120px;
}

.fw-dimension-input {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fw-dimension-slot .fw-integer-input,
.fw-dimension-slot .fw-text-input {
    width: 56px;
    font-size: 11px;
    padding: 2px 4px;
}

.fw-dimension-sep {
    font-size: 11px;
    color: var(--text-dim);
}

/* Right: value panel */
.fw-dict-value-panel {
    flex: 1;
    padding: 10px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fw-dict-key-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.fw-dict-key-heading {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: .04em;
    text-transform: uppercase;
    min-width: 0;
}

.fw-dict-key-heading-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.fw-dict-placeholder {
    font-size: 12px;
    color: var(--text-dim);
    align-self: center;
    text-align: center;
    margin-top: 40px;
    display: block;
}

/* Input error flash */
.fw-input-error { border-color: var(--danger) !important; }

.fw-field-error-msg {
    color: var(--danger);
    font-size: 0.85em;
    margin-top: 4px;
}

.fw-form-layout-root [data-position-for-field] {
    min-height: 1.5rem;
}

/* ================================================================
   ArrayObjectInput — ordered list of structured items (master/detail)
   ================================================================ */

.fw-array-obj-input {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 180px;
    width: 100%;
    box-sizing: border-box;
}

/* Left: items list */
.fw-array-obj-list {
    width: 160px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    background: var(--bg2);
    display: flex;
    flex-direction: column;
}

.fw-array-obj-items {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
}

.fw-array-obj-item {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
}
.fw-array-obj-item:hover  { background: rgba(255,255,255,.04); }
.fw-array-obj-item.active { background: rgba(74,143,232,.15); }

.fw-array-obj-item-label {
    font-size: 12px;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right: item editor — reuses .fw-dict-value-panel styles */
.fw-array-obj-editor {
    flex: 1;
    padding: 10px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ================================================================
   Form <select> comboboxes (EnumInput, SourceBackedInput, …)
   ================================================================ */

.fw-enum-input,
.fw-select-input,
.fw-source-input,
.fw-rel-input,
.fw-form select,
.fw-container-input select,
.fw-field-widget select {
    background-color: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    padding: 4px 28px 4px 8px;
    min-width: 120px;
    max-width: 100%;
    width: 100%;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a84a0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    transition: border-color .12s;
}

.fw-enum-input:focus,
.fw-select-input:focus,
.fw-source-input:focus,
.fw-rel-input:focus,
.fw-form select:focus,
.fw-container-input select:focus,
.fw-field-widget select:focus {
    border-color: var(--accent);
}

.fw-enum-input:disabled,
.fw-select-input:disabled,
.fw-source-input:disabled,
.fw-rel-input:disabled,
.fw-form select:disabled,
.fw-container-input select:disabled,
.fw-field-widget select:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------
   A control that is shown but not editable here.

   A layered field the coordinate does not set draws its own control
   disabled, so the value reads in the shape its type has rather than
   as text. Without this it reads as an ordinary control and the only
   way to find out is to click it.
   ---------------------------------------------------------------- */
.fw-form input:disabled,
.fw-form textarea:disabled,
.fw-field-widget input:disabled,
.fw-field-widget textarea:disabled {
    opacity: .5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, .02);
}

/* The toggle hides its checkbox and draws the slider, so the state is the
   slider's to show. */
.fw-toggle input:disabled + .fw-toggle-slider {
    opacity: .45;
    cursor: not-allowed;
}

.fw-enum-input option,
.fw-select-input option,
.fw-source-input option,
.fw-rel-input option,
.fw-form select option,
.fw-container-input select option,
.fw-field-widget select option {
    background: var(--bg2);
    color: var(--text);
}

/* ================================================================
   MultipleSelectorInput / SelectorInput
   ================================================================ */

.fw-multi-select {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.fw-multi-select-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.fw-multi-select-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.fw-multi-select-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 6px 2px 8px;
    border-radius: 999px;
    background: var(--bg2);
    border: 1px solid var(--border);
    font-size: 12px;
    line-height: 1.4;
}

.fw-multi-select-chip-ghost {
    border-style: dashed;
    color: var(--text-muted);
}

.fw-multi-select-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-multi-select-chip-remove {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

.fw-multi-select-chip-remove:hover {
    color: var(--text);
}

.fw-multi-select-search,
.fw-selector-search {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    padding: 6px 8px;
    width: 100%;
    box-sizing: border-box;
}

.fw-multi-select-search:focus,
.fw-selector-search:focus {
    outline: none;
    border-color: var(--accent);
}

.fw-multi-select-list,
.fw-selector-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    padding: 4px;
}

.fw-multi-select-option,
.fw-selector-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    padding: 6px 8px;
    cursor: pointer;
}

.fw-multi-select-option:hover,
.fw-selector-option:hover {
    background: var(--bg3, rgba(255, 255, 255, 0.04));
}

.fw-multi-select-option.is-selected,
.fw-selector-option.is-selected {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.fw-multi-select-option.is-ghost,
.fw-selector-option.is-ghost {
    color: var(--text-muted);
    font-style: italic;
}

.fw-multi-select-option-label,
.fw-selector-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-multi-select-option-meta,
.fw-selector-option-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.fw-multi-select-list-empty,
.fw-selector-list-empty {
    padding: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.fw-selector-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.fw-multi-select-status,
.fw-selector-status {
    font-size: 12px;
    color: var(--text-muted);
}

.fw-selector-ghost {
    color: var(--text-muted);
}

/* ================================================================
   PSPLayeredForm + LayeredField — override-layer-aware form
   ================================================================ */

.fw-psp-layered-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Fragment-level __ref__ picker */
.fw-psp-ref-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.fw-psp-ref-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.fw-psp-ref-input {
    flex: 1 1 160px;
    min-width: 120px;
    max-width: 280px;
    font-size: 12px;
    font-family: var(--font-mono, monospace);
    padding: 3px 7px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}
.fw-psp-ref-input:focus { outline: none; border-color: var(--accent); }

/* Source-layer badges */
.fw-layered-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.fw-layered-badge--base {
    color: var(--text-dim);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
}
.fw-layered-badge--ancestor {
    color: #7cb8e8;
    background: rgba(124,184,232,.10);
    border: 1px solid rgba(124,184,232,.30);
}
.fw-layered-badge--ref {
    color: #b48ead;
    background: rgba(180,142,173,.10);
    border: 1px solid rgba(180,142,173,.30);
}
.fw-layered-badge--override {
    color: var(--accent, #7aa2f7);
    background: rgba(122,162,247,.10);
    border: 1px solid rgba(122,162,247,.30);
}

/* Expression mode input */
.fw-layered-expr-input {
    width: 100%;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--radius);
    border: 1px solid var(--warn, #e8a245);
    background: rgba(232,162,69,.06);
    color: var(--text);
    box-sizing: border-box;
}
.fw-layered-expr-input:focus { outline: none; border-color: var(--warn, #e8a245); }

.fw-btn-expression {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font);
    padding: 2px 9px;
    transition: border-color .12s, color .12s, background .12s;
}
.fw-btn-expression:hover { border-color: var(--warn); color: var(--warn); }
.fw-btn-expression.active {
    border-color: var(--warn);
    color: var(--warn);
    background: rgba(232,162,69,.12);
}

.fw-btn-expression-action {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font);
    padding: 2px 9px;
    transition: border-color .12s, color .12s, background .12s;
}
.fw-btn-expression-action:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.fw-expr-case-choice {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
}
.fw-expr-case-choice-lead {
    margin: 0;
    font-size: 13px;
    color: var(--text);
}
.fw-expr-case-choice-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fw-expr-case-choice-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.fw-expr-case-choice-key {
    margin-left: 24px;
    padding: 6px 8px;
    font-size: 13px;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--text);
}
.fw-expr-case-choice-key:disabled {
    opacity: 0.45;
}
.fw-expr-case-choice-error {
    margin: 0;
    font-size: 12px;
    color: var(--danger);
}

.fw-dup-key {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
}
.fw-dup-key-lead {
    margin: 0;
    font-size: 13px;
    color: var(--text);
}
.fw-dup-key-input {
    padding: 6px 8px;
    font-size: 13px;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--text);
}
.fw-dup-key-error {
    margin: 0;
    font-size: 12px;
    color: var(--danger);
}


/* ----------------------------------------------------------------
   ExpressionEditor
   ---------------------------------------------------------------- */


.fw-expression-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 2px solid var(--accent);
    padding-left: 12px;
}
.fw-ee-branches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fw-ee-branches-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
}
.fw-ee-branches-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    background: rgba(255, 255, 255, .01);
}
.fw-ee-entries {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fw-ee-row {
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    gap: 8px;
    align-items: start;
}
.fw-ee-case-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    padding-top: 6px;
}
.fw-ee-right {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.fw-ee-right > :first-child {
    flex: 1;
}
.fw-ee-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.fw-ee-meta-row {
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    gap: 8px;
    align-items: start;
}
.fw-ee-meta-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    padding-top: 6px;
}
.fw-ee-meta-input {
    width: 100%;
    max-width: 160px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 5px 10px;
    font-family: var(--mono);
    font-size: 12px;
}
.fw-ee-meta-input:focus {
    border-color: var(--accent);
    outline: none;
}
.fw-ee-meta-value {
    min-width: 0;
}
.fw-ee-expr-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fw-ee-label {
    font-size: 11px;
    color: var(--text-dim);
    flex-shrink: 0;
}
.fw-ee-expr-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 5px 10px;
    font-family: var(--mono);
    font-size: 12px;
}
.fw-ee-expr-input:focus { border-color: var(--accent); outline: none; }

.fw-ee-case-bar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.fw-ee-case-tab {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fw-ee-case-tab.active {
    background: var(--bg);
    border-bottom-color: var(--bg);
    color: var(--accent);
    font-weight: 600;
}
.fw-ee-case-tab:hover { color: var(--text); }
.fw-ee-case-del {
    font-size: 13px;
    color: var(--danger);
    cursor: pointer;
    opacity: 0.5;
}
.fw-ee-case-del:hover { opacity: 1; }

.fw-ee-case-area {
    border: 1px solid var(--border);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    padding: 10px;
    background: rgba(255,255,255,.01);
}
.fw-btn-expr-action {
    background: transparent;
    border: 1px solid #3a3f55;
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 9px;
    font-size: 11px;
}
.fw-btn-expr-action:hover { border-color: var(--accent); color: var(--accent); }

.fw-expression-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.fw-expression-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 5px 10px;
    font-family: var(--mono);
    font-size: 12px;
}
.fw-expression-input:focus { border-color: var(--accent); outline: none; }

.fw-expr-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    color: var(--text-dim);
    font-size: 13px;
}
.fw-expr-panel-loading[hidden] {
    display: none !important;
}
.fw-expr-panel-context-loading {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
}
.fw-expr-panel-host {
    min-height: 360px;
}
.fw-expr-panel-error {
    color: var(--danger);
    font-size: 13px;
    padding: 16px 0;
}
.fw-expr-panel-error[hidden] {
    display: none !important;
}
.fw-expr-panel-ready {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 420px;
    position: relative;
    isolation: isolate;
}
.fw-expr-panel-ready[hidden] {
    display: none !important;
}
.fw-expr-source-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
    position: relative;
    z-index: 4;
}
.fw-expr-source-input {
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--mono);
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--text);
}
.fw-expr-source-input:focus {
    border-color: var(--accent);
    outline: none;
}
.fw-expr-autocomplete-host {
    position: relative;
}
.fw-expr-path-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    max-height: 220px;
    overflow: auto;
    margin-top: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.fw-expr-path-suggest--modal {
    z-index: 10050;
}
.fw-expr-path-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
}
.fw-expr-path-suggest-item:hover,
.fw-expr-path-suggest-item:focus {
    background: var(--bg2);
}
.fw-expr-panel-parse-warn {
    color: var(--warning, #b45309);
    font-size: 12px;
    margin: 0;
}
.fw-expr-panel-workspace {
    flex: 1 1 auto;
    height: 400px;
    min-height: 400px;
    position: relative;
    z-index: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg2);
    overflow: hidden;
}
.fw-expr-panel-workspace .injectionDiv {
    height: 100% !important;
    min-height: 400px;
}

/* Blockly — match framework dark theme inside expression editor */
.fw-expr-panel-workspace .blocklySvg,
.fw-expr-panel-workspace .blocklyMainBackground {
    background-color: var(--bg2) !important;
}
.fw-expr-panel-workspace .blocklyToolboxDiv,
.fw-expr-panel-workspace .blocklyFlyoutBackground {
    background-color: var(--bg) !important;
    fill: var(--bg) !important;
}
.fw-expr-panel-workspace .blocklyTreeRow {
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
}
.fw-expr-panel-workspace .blocklyTreeRow:not(.blocklyTreeSelected):hover {
    background-color: rgba(255, 255, 255, .06);
}
.fw-expr-panel-workspace .blocklyTreeSelected {
    background-color: rgba(74, 143, 232, .18) !important;
}
.fw-expr-panel-workspace .blocklyTreeLabel {
    font-family: var(--font) !important;
    font-size: 12px !important;
}
.fw-expr-panel-workspace .blocklyText,
.fw-expr-panel-workspace .blocklyEditableText,
.fw-expr-panel-workspace .blocklyNonEditableText,
.fw-expr-panel-workspace .blocklyDropdownText {
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.fw-expr-panel-workspace .blocklyScrollbarBackground {
    fill: transparent;
}
.fw-expr-panel-workspace .blocklyZoom > image {
    opacity: .75;
}
.fw-expr-panel-workspace .blocklyFlyout .blocklyBlockCanvas > .blocklyDraggable + .blocklyDraggable {
    margin-top: 4px;
}
.fw-expr-panel-workspace .blocklyBlockCanvas[data-type="expr_function"] .blocklyPath,
.fw-expr-panel-workspace g[data-id*="expr_function"] .blocklyPath {
    stroke-width: 1.5px;
}
.fw-expressible-input {
    display: block;
    min-width: 0;
    width: 100%;
}
.fw-modal-overlay .blocklyDropDownDiv,
.fw-modal-overlay .blocklyWidgetDiv,
.fw-modal-overlay .blocklyTooltipDiv {
    z-index: 10040;
    font-family: var(--font);
    font-size: 12px;
}
.fw-modal-overlay .blocklyDropDownDiv {
    background-color: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.fw-modal-overlay .blocklyDropDownContent {
    color: var(--text);
}
.fw-modal-overlay .blocklyMenuItem {
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
}
.fw-modal-overlay .blocklyMenuItemHighlight {
    background-color: rgba(74, 143, 232, .2);
}
.fw-modal-overlay .blocklyWidgetDiv .blocklyHtmlInput {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    padding: 2px 6px;
}
.fw-modal-overlay .blocklyTooltipDiv {
    background-color: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 11px;
    padding: 4px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* ----------------------------------------------------------------
   Modal (shared)
   ---------------------------------------------------------------- */

.fw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 24px;
}
.fw-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(960px, 92vw);
    max-height: 90vh;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.fw-modal-expression {
    width: min(1100px, 96vw);
}
.fw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.fw-modal-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.fw-modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
}
.fw-modal-close:hover { color: var(--text); }
.fw-modal-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
    min-height: 200px;
}
.fw-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.fw-modal-footer[hidden] { display: none; }
.fw-modal-footer > .fw-form-footer {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    justify-content: flex-end;
}
.fw-btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
}
.fw-btn-secondary:hover { border-color: var(--text-dim); color: var(--text); }
.fw-btn-primary {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
}
.fw-btn-primary:hover { filter: brightness(1.08); }

/* ── Chart widgets (LineChart, BarChart, PieChart) ─────────────────────────── */

.fw-chart {
    display: flex;
    flex-direction: column;
    background: var(--panel, var(--bg2));
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    overflow: hidden;
    min-width: 0;
    margin-bottom: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.fw-layout-col > .fw-chart {
    margin-bottom: 0;
}

.fw-box .fw-box__content > .fw-chart:last-child,
.fw-box .fw-box__content > .fw-layout-col:last-child {
    margin-bottom: 0;
}

.fw-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-width: 0;
}

.fw-chart-header[hidden] {
    display: none;
}

.fw-chart-title {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #e7ecf3);
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-chart-header-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.fw-chart-header-controls .fw-chart-breakdown {
    order: 1;
}

.fw-chart-header-controls .fw-chart-value-mode {
    order: 2;
}

.fw-chart-header-controls .fw-chart-filters {
    order: 3;
}

.fw-chart-header-controls .fw-chart-auto-refresh {
    order: 4;
}

.fw-chart-header-controls .fw-chart-actions {
    order: 5;
}

.fw-chart-header-controls .fw-chart-breakdown,
.fw-chart-header-controls .fw-chart-auto-refresh,
.fw-chart-header-controls .fw-chart-actions,
.fw-chart-header-controls .fw-chart-filters {
    background: transparent;
    border: none;
    padding: 0;
}

.fw-chart-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fw-chart-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.fw-chart-action-btn:hover:not(:disabled) {
    border-color: var(--accent, #4a8fe8);
    color: var(--text);
}

.fw-chart-action-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.fw-chart-action-btn.is-active {
    border-color: var(--accent, #4a8fe8);
    color: var(--text);
}

.fw-chart-x-limit-count {
    min-width: 40px;
    padding: 0 2px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.fw-chart:fullscreen {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

.fw-chart.fw-chart--fullscreen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    border-radius: 0;
    z-index: 10000;
}

.fw-chart:fullscreen .fw-chart-area,
.fw-chart.fw-chart--fullscreen .fw-chart-area {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow: auto;
}

body.fw-chart-fullscreen-active {
    overflow: hidden;
}

.fw-chart-area {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.fw-chart-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: color-mix(in srgb, var(--bg2) 82%, transparent);
    color: var(--text-dim);
    font-size: 12px;
    pointer-events: none;
}

.fw-chart-loading[hidden] {
    display: none;
}

.fw-chart-loading-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border);
    border-top-color: var(--accent, #4e79a7);
    border-radius: 50%;
    animation: fw-chart-spin .75s linear infinite;
}

@keyframes fw-chart-spin {
    to { transform: rotate(360deg); }
}

.fw-chart-empty {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    pointer-events: none;
}

.fw-chart-empty[hidden] {
    display: none;
}

.fw-chart-error {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 20px;
    color: var(--danger, #c44);
    font-size: 12px;
    text-align: center;
    pointer-events: none;
    background: color-mix(in srgb, var(--bg2) 70%, transparent);
}

.fw-chart-error[hidden] {
    display: none;
}

.fw-chart-error-title {
    font-weight: 600;
    color: var(--danger, #c44);
}

.fw-chart-error-detail {
    max-width: 36em;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.35;
    word-break: break-word;
}

.fw-datagrid-error {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--danger, #c44) 35%, var(--border));
    border-radius: 6px;
    background: color-mix(in srgb, var(--danger, #c44) 8%, var(--bg2, var(--bg)));
    color: var(--danger, #c44);
    font-size: 12px;
}

.fw-datagrid-error__title {
    font-weight: 600;
}

.fw-datagrid-error__detail {
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.35;
    word-break: break-word;
}

.fw-chart-value-mode {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 2px;
    background: color-mix(in srgb, var(--bg2) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.fw-chart-value-mode[hidden] {
    display: none;
}

.fw-chart-value-mode-btn {
    padding: 2px 8px;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
}

.fw-chart-value-mode-btn.is-active {
    background: var(--bg1);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--border);
}

.fw-chart-breakdown,
.fw-chart-auto-refresh {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--bg2) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 11px;
}

.fw-chart-breakdown-label,
.fw-chart-auto-refresh-label {
    color: var(--text-dim);
    white-space: nowrap;
}

.fw-chart-breakdown-select,
.fw-chart-auto-refresh-select {
    min-width: 0;
    max-width: 180px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg1);
    color: var(--text);
    font: inherit;
}

.fw-chart-filters {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
    pointer-events: auto;
}

.fw-chart-header-controls .fw-chart-filters {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    justify-content: flex-end;
    max-width: min(520px, 55vw);
}

.fw-chart-filter-bubble {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 6px 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg2) 92%, transparent);
    color: var(--text);
    font: inherit;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
}

.fw-chart-filter-bubble.fw-chart-filter-eq {
    border-color: color-mix(in srgb, #59a14f 55%, var(--border));
    background: color-mix(in srgb, #59a14f 18%, var(--bg2));
}

.fw-chart-filter-bubble.fw-chart-filter-neq {
    border-color: color-mix(in srgb, #e15759 55%, var(--border));
    background: color-mix(in srgb, #e15759 18%, var(--bg2));
}

.fw-chart-filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fw-chart-filter-remove {
    flex-shrink: 0;
    padding: 0 2px;
    font-size: 14px;
    line-height: 1;
    opacity: 0.75;
}

.fw-chart-filter-remove:hover {
    opacity: 1;
}

.fw-chart-area svg {
    display: block;
    width: 100%;
}

/* ── Axes ──────────────────────────────────────────────────────────────────── */

.fw-chart .chart-axis text,
.fw-chart .chart-axis-label,
.fw-chart .chart-legend-text {
    fill: var(--text-dim, #8b9bb4);
    font-size: 11px;
    font-family: var(--font, "IBM Plex Sans", system-ui, sans-serif);
}

.fw-chart .chart-axis .domain,
.fw-chart .chart-axis line {
    stroke: var(--border, #2d3a4f);
}

/* ── Grid ──────────────────────────────────────────────────────────────────── */

.fw-chart .chart-grid .domain { display: none; }

.fw-chart .chart-grid line {
    /* Chart.js explorer grid: solid muted lines */
    stroke: var(--border, #2d3a4f);
    stroke-dasharray: none;
    opacity: .5;
}

/* ── Line chart ─────────────────────────────────────────────────────────────── */

.fw-chart .chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fw-chart .chart-area,
.fw-chart .chart-line {
    pointer-events: none;
}

.fw-chart .chart-area { opacity: .15; }

.fw-chart .chart-dot  { opacity: .9; }

.fw-chart .chart-hits {
    pointer-events: all;
}

.fw-chart .chart-dot-selected {
    stroke: var(--text, #333);
    stroke-width: 1.5px;
}

.fw-chart .chart-dot-hit,
.fw-chart .chart-point-hit { pointer-events: all; }

.fw-chart .chart-series-faded {
    opacity: 0.28;
}

.fw-chart .chart-series-highlighted .chart-line {
    stroke-width: 3;
}

/* Stacked bar segments stay fully opaque unless explicitly dimmed by filter */
.fw-chart .chart-series-stacked:not(.chart-series-faded) {
    opacity: 1;
}

.fw-chart .chart-legend-item {
    cursor: pointer;
}

.fw-chart .chart-legend-item-active .chart-legend-text {
    font-weight: 600;
    fill: var(--text, #333);
}

.fw-chart .chart-legend-item-faded {
    opacity: 0.45;
}

.fw-chart .chart-legend-item-hidden {
    opacity: 0.4;
}

.fw-chart .chart-legend-item-hidden .chart-legend-text {
    text-decoration: line-through;
}

.fw-chart .chart-legend-item-static {
    cursor: default;
}

.fw-chart .chart-legend-bottom .chart-legend-text,
.fw-chart .chart-legend-right .chart-legend-text {
    dominant-baseline: middle;
}

.fw-chart-tooltip {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-elevated, #fff);
    color: #3c4043;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    white-space: normal;
    max-width: 280px;
}

.fw-chart-tooltip strong {
    color: #1a1d24;
    font-weight: 600;
}

/* ── Single metric (KPI card) ───────────────────────────────────────────────── */

.fw-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
    padding: 14px 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.fw-metric-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.fw-metric-value {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.fw-metric-delta {
    font-size: 12px;
    font-weight: 500;
}

.fw-metric-delta--up   { color: var(--success); }
.fw-metric-delta--down { color: var(--danger); }
.fw-metric-delta--flat { color: var(--text-dim); }

.fw-metric-subtitle {
    font-size: 11px;
    color: var(--text-dim);
}

/* ── Box (collapsible container — shares chart shell chrome) ───────────────── */

.fw-box {
    width: 100%;
    margin-top: 12px;
    margin-right: 12px;
}

.fw-box--collapsed .fw-chart-header {
    border-bottom: none;
}

.fw-box .fw-chart-area {
    flex: 0 1 auto;
    overflow: visible;
    padding: 12px 14px;
}

.fw-box .fw-box__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.fw-box .fw-chart-header-controls .fw-box__icon-btn,
.fw-box .fw-chart-header-controls .fw-box__toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.fw-box .fw-chart-header-controls .fw-box__icon-btn:hover,
.fw-box .fw-chart-header-controls .fw-box__toggle-btn:hover {
    border-color: var(--accent, #4a8fe8);
    color: var(--text);
}

/* ── Bar chart (explorer Chart.js-style solid stacks) ──────────────────────── */

.fw-chart .chart-bar {
    transition: filter .12s ease, opacity .12s ease;
    cursor: crosshair;
    /* Crisp solid blocks like Chart.js canvas bars */
    shape-rendering: crispEdges;
    stroke: none;
}

.fw-chart .chart-bar:hover {
    filter: brightness(1.08);
}

/* Stacked segments share one solid column — no inter-segment stroke */
.fw-chart .chart-series-stacked .chart-bar {
    stroke: none;
}

.fw-chart .chart-series-stacked .chart-area {
    cursor: crosshair;
}

/* ── Pie / donut chart ──────────────────────────────────────────────────────── */

.fw-chart .chart-arc {
    transition: opacity .1s;
    cursor: default;
}

.fw-chart .chart-arc:hover { opacity: .82; }

.fw-chart .chart-pie-label {
    fill: #fff;
    font-size: 11px;
    font-family: var(--font);
    pointer-events: none;
}

.fw-chart .chart-ridgeline-label {
    fill: var(--text-dim);
    font-size: 10px;
    font-family: var(--font);
}

.fw-chart .chart-ridgeline-area {
    transition: fill-opacity .12s, stroke-width .12s;
}

.fw-chart .chart-ridgeline-hit {
    fill: transparent;
    cursor: crosshair;
}
/* ── Detached datasource jobs overlay ───────────────────────────────────── */

.fw-detached-overlay {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10050;
    min-width: 240px;
    max-width: 360px;
    max-height: 40vh;
    overflow: auto;
    background: #1a1d24;
    color: #e8eaed;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    font-size: 12px;
    padding: 10px 12px;
}

.fw-detached-overlay[hidden] {
    display: none !important;
}

.fw-detached-overlay__header {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9aa0a6;
    margin-bottom: 8px;
}

.fw-detached-overlay__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fw-detached-overlay__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 6px;
    background: #2a2f3a;
    color: inherit;
    padding: 8px 10px;
    cursor: pointer;
}

.fw-detached-overlay__item:hover {
    background: #343a48;
}

.fw-detached-overlay__item--ready {
    box-shadow: inset 3px 0 0 #3dd68c;
}

.fw-detached-overlay__item--error {
    box-shadow: inset 3px 0 0 #e85555;
}

.fw-detached-overlay__item--loading {
    box-shadow: inset 3px 0 0 #4a8fe8;
}

.fw-detached-overlay__status {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #3dd68c;
}

.fw-detached-overlay__item--error .fw-detached-overlay__status {
    color: #e85555;
}

.fw-detached-overlay__spinner {
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #4a8fe8;
    border-radius: 50%;
    animation: fw-detached-spin 0.7s linear infinite;
    color: transparent !important;
}

@keyframes fw-detached-spin {
    to { transform: rotate(360deg); }
}

.fw-detached-overlay__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fw-detached-overlay__location {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fw-detached-overlay__title {
    color: #9aa0a6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fw-detached-overlay__dismiss {
    flex: 0 0 auto;
    opacity: 0.55;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}

.fw-detached-overlay__dismiss:hover {
    opacity: 1;
}

/* Declared-datasource loading on getNodeForDatasource() (default: widget root). */
.fw-ds-loading {
    position: relative;
    min-height: 1.5em;
}
.fw-ds-loading > :not(.fw-ds-loading__status) {
    visibility: hidden;
}
.fw-ds-loading::after {
    content: 'Loading…';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
}

/* ---------------------------------------------------------------------------
 * fw-table — the grid `widget/cssGridTable.js` paints.
 *
 * Structure only: how the rows and cells lay out, which is what the widget
 * itself decides. Everything visible — colour, border, type — is a skin and is
 * the project's, which is why nothing below sets one. The widget used to emit
 * `pspui-publishers-*` and then `pspui-table__*`, so a framework grid drawn in
 * any project but the portal had no stylesheet at all.
 * --------------------------------------------------------------------------- */
.fw-table__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fw-table__row {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: min-content;
}

.fw-table__cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fw-table__cell--actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}