/* ================================== Visualize ==================================
   Styles for the Visualize workspace (components/visualization). Uses the QueryX design tokens from styles.css. */

/* The Visualize pane replaces the builder/editor panes when the workspace is in "visualize" mode. */
.viz-pane { display: none; background: var(--bg-app); }
.workspace-panes[data-mode="visualize"] .builder-pane,
.workspace-panes[data-mode="visualize"] .editor-pane,
.workspace-panes[data-mode="visualize"] > .resizer { display: none; }
.workspace-panes[data-mode="visualize"] .viz-pane { display: flex; flex: 1; }

.viz { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--viz-left, 230px) 5px minmax(0, 1fr) 5px var(--viz-right, 300px); }
.viz[hidden], .viz-empty[hidden] { display: none; }
.viz-empty { flex: 1; display: flex; align-items: center; justify-content: center; }
.viz-resizer { cursor: col-resize; position: relative; }
.viz-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; right: 2px; background: var(--border); }
.viz-resizer:hover::after { background: var(--accent); left: 1px; right: 1px; }

/* Panels */
.viz-fields, .viz-config { min-height: 0; overflow: auto; background: var(--bg-panel); display: flex; flex-direction: column; }
.vpanel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.vpanel-count { font-weight: 600; letter-spacing: 0; }
.vpanel-search { padding: 0 10px 8px; }
.vpanel-search .search-box { height: 28px; }

/* Fields */
.vf-list { flex: 1; overflow: auto; padding: 0 6px 8px; }
.vf-group { margin-bottom: 8px; }
.vf-group-title { display: flex; align-items: center; gap: 6px; padding: 6px 6px 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.vf-group-title span { margin-left: auto; color: var(--text-dim); font-weight: 500; }
.vf-item { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px; border-radius: 7px; cursor: grab;
  border: 1px solid transparent; font-size: 12.5px; color: var(--text); }
.vf-item:hover { background: var(--bg-hover); border-color: var(--border); }
.vf-item:active { cursor: grabbing; }
.vf-grip { color: var(--text-dim); opacity: 0; display: flex; }
.vf-item:hover .vf-grip { opacity: 1; }
.vf-type { width: 26px; height: 18px; border-radius: 4px; display: inline-grid; place-items: center; flex: none;
  font: 700 9.5px var(--mono); letter-spacing: -0.02em; }
.vf-type .icon { width: 12px; height: 12px; }
.vf-type.t-text { color: #22d3ee; background: rgba(34, 211, 238, 0.12); }
.vf-type.t-numeric { color: #4f8cff; background: rgba(79, 140, 255, 0.14); font-size: 12px; }
.vf-type.t-date { color: #a78bfa; background: rgba(167, 139, 250, 0.14); }
.vf-type.t-rowcount { color: #34d399; background: rgba(52, 211, 153, 0.14); font-size: 13px; font-weight: 700; }
.vf-type.t-boolean { color: #34d399; background: rgba(52, 211, 153, 0.13); }
.vf-type.t-other { color: var(--text-dim); background: var(--bg-hover); }
.vf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-warn { color: var(--warning); display: flex; }
.vf-used { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.vf-add { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; color: var(--text-muted); opacity: 0; flex: none; }
.vf-item:hover .vf-add, .vf-add:focus-visible { opacity: 1; }
.vf-add:hover { background: var(--accent-soft); color: var(--accent); }
.vf-empty { padding: 16px 8px; color: var(--text-dim); font-size: 12px; text-align: center; }
.vf-help { padding: 8px 12px 10px; font-size: 11px; color: var(--text-dim); border-top: 1px solid var(--border); }
.viz-fields.drop-remove { box-shadow: inset 0 0 0 2px var(--danger); }
.viz-fields.drop-remove .vf-help::before { content: "Drop to remove from the visual · "; color: var(--danger); }

/* Main area */
.viz-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px 12px; gap: 8px; }
.viz-toolbar { display: flex; align-items: center; gap: 4px; min-height: 40px; }
.vtb-title { min-width: 0; }
.vtb-title h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.vtb-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11.5px; color: var(--text-dim); }
.vtb-sub .select { height: 22px; font-size: 11.5px; }
.viz-notices { display: flex; flex-direction: column; gap: 4px; }
.viz-notices:empty { display: none; }
.viz-notice { display: flex; align-items: flex-start; gap: 6px; padding: 5px 10px; border-radius: 7px; font-size: 12px; color: var(--text-muted);
  background: color-mix(in srgb, var(--warning) 8%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent); }
.viz-notice .icon { color: var(--warning); margin-top: 2px; flex: none; }
.viz-card { flex: 1; min-height: 0; position: relative; border-radius: 12px; border: 1px solid var(--border);
  background: linear-gradient(180deg, #151923, #12151c); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset; overflow: hidden; }
.viz-canvas { position: absolute; inset: 0; }
/* z-index 0: keeps the chart tooltip (z 9999999) inside the chart, below menus and popovers */
.viz-chart { position: absolute; inset: 10px 8px 6px; z-index: 0; }
.viz-chart[hidden], .viz-html[hidden] { display: none; }
.viz-html { position: absolute; inset: 0; display: flex; overflow: hidden; }

/* Empty / error states */
.viz-state { margin: auto; max-width: 440px; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.viz-state-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 6px; color: var(--accent);
  background: linear-gradient(145deg, rgba(79, 140, 255, 0.16), rgba(167, 139, 250, 0.12)); border: 1px solid rgba(79, 140, 255, 0.25); }
.viz-state-icon .icon { width: 26px; height: 26px; }
.viz-state.error .viz-state-icon { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.viz-state h3 { margin: 0; font-size: 15px; color: var(--text); font-weight: 600; }
.viz-state p { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
.viz-state-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* KPI */
.viz-kpi { margin: auto; text-align: center; padding: 28px 40px; }
.kpi-label { font-size: var(--kpi-label-px, calc(13px * var(--kpi-label-scale, 1))); font-weight: 600; color: var(--kpi-label-color, var(--text-muted)); letter-spacing: 0.01em; }
.kpi-value { font-size: var(--kpi-value-px, calc(clamp(40px, 7vw, 76px) * var(--kpi-scale, 1))); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 6px 0 8px;
  background: linear-gradient(120deg, #22d3ee, #4f8cff 45%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-sub { font-size: var(--kpi-sub-px, 12px); color: var(--text-dim); }

/* Table visual */
.viz-table-wrap { flex: 1; overflow: auto; }
.viz-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
.viz-table th { position: sticky; top: 0; z-index: 1; background: #161a22; text-align: left; font-weight: 600; color: var(--text); padding: 8px 12px;
  border-bottom: 1px solid var(--border-strong); white-space: nowrap; cursor: pointer; user-select: none; }
.viz-table th:hover { background: #1c212b; }
.viz-table th .icon { width: 11px; height: 11px; color: var(--accent); margin-left: 4px; vertical-align: -1px; }
.viz-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; max-width: 360px;
  overflow: hidden; text-overflow: ellipsis; }
.viz-table tr:hover td { background: var(--bg-hover); color: var(--text); }
.viz-table .num { text-align: right; font-family: var(--mono); font-size: 12px; }
.viz-table td.null { color: var(--text-dim); font-style: italic; }
.viz-table td.bool { color: var(--warning); font-family: var(--mono); }

/* Config sections */
.vsection { border-bottom: 1px solid var(--border); }
.vsection-head { width: 100%; display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.vsection-head:hover { color: var(--text); }
.vsection-head .icon { transition: transform 0.15s; }
.vsection.collapsed .vsection-head .icon { transform: rotate(-90deg); }
.vsection.collapsed .vsection-body { display: none; }
.vsection-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.vsection-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 10.5px; display: grid; place-items: center; letter-spacing: 0; }
.vsection-badge:empty { display: none; }
.vsection-note { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* Visual type picker */
.vt-rec { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 8px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.07), rgba(167, 139, 250, 0.08)); border: 1px solid rgba(79, 140, 255, 0.18); }
.vt-rec-label { width: 100%; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #8fb4ff; margin-bottom: 2px; }
.vt-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 6px; border-radius: 6px; font-size: 12px;
  color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border-strong); }
.vt-chip:hover, .vt-chip.active { border-color: var(--accent); background: var(--accent-soft); }
.vt-chip .vt-svg { width: 16px; height: 16px; color: var(--accent); }
.vt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.vt-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 5px; border-radius: 8px;
  color: var(--text-muted); border: 1px solid transparent; }
.vt-btn:hover { background: var(--bg-hover); color: var(--text); }
.vt-btn.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); }
.vt-btn .vt-svg { width: 22px; height: 22px; }
.vt-btn.active .vt-svg { color: var(--accent); }
.vt-name { font-size: 10px; line-height: 1.15; text-align: center; }
.vt-star { position: absolute; top: 4px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 6px #22d3ee; }

/* Drop zones + field pills */
.viz-zone { border-radius: 9px; padding: 7px; background: var(--bg-sunken); border: 1px dashed var(--border-strong); transition: border-color 0.12s, background 0.12s; }
.viz-zone.needs { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
.vz-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.vz-req { color: var(--accent); font-style: normal; margin-left: 2px; }
.vz-count { font-weight: 500; color: var(--text-dim); font-size: 11px; }
.vz-items { display: flex; flex-direction: column; gap: 4px; }
.vz-drop { padding: 6px 8px; border-radius: 6px; font-size: 11.5px; color: var(--text-dim); text-align: center; border: 1px dashed transparent; }
.viz-dragging .viz-zone { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-sunken)); }
.viz-dragging .vz-drop { border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text-muted); }
.viz-zone.drag-over { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-sunken)); }
.viz-zone.drop-end .vz-drop { border-color: var(--accent); color: var(--accent); }
.viz-pill { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px; border-radius: 14px; cursor: grab; position: relative;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); }
.viz-pill.measure { border-color: rgba(79, 140, 255, 0.45); background: linear-gradient(90deg, rgba(79, 140, 255, 0.16), rgba(167, 139, 250, 0.10)); }
.viz-pill.dimension { border-color: rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.08); }
.viz-pill.missing { opacity: 0.5; border-style: dashed; }
.viz-pill.drop-before::before { content: ""; position: absolute; left: 6px; right: 6px; top: -4px; height: 2px; border-radius: 2px; background: var(--accent); }
.vp-grip { color: var(--text-dim); display: flex; }
.vp-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; font: 500 12px var(--mono); color: var(--text); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 22px; border-radius: 5px; padding: 0 4px; }
.vp-label:not([disabled]):hover { background: rgba(255, 255, 255, 0.06); }
.vp-label .icon { width: 11px; height: 11px; color: var(--text-dim); flex: none; }
.vp-remove { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--text-dim); flex: none; }
.vp-remove:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }

/* Filters */
.vfl-list { display: flex; flex-direction: column; gap: 6px; border-radius: 9px; }
[data-body="filters"].drag-over .vfl-list { outline: 2px solid var(--accent); outline-offset: 2px; }
.viz-dragging [data-body="filters"] .vz-drop { border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text-muted); }
.viz-filter { padding: 7px; border-radius: 8px; background: var(--bg-sunken); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.viz-filter.incomplete { border-style: dashed; }
.vfl-top { display: flex; align-items: center; gap: 6px; }
.vfl-field { font: 600 12px var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.vfl-top .select { flex: 1; min-width: 0; height: 24px; font-size: 11.5px; }
.vfl-range { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.vfl-range .input { flex: 1; min-width: 0; }
[data-body="filters"] > .btn { align-self: flex-start; }
.vfl-values { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 26px; padding: 3px 8px; border-radius: 6px; text-align: left;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); font: 12px var(--mono); color: var(--text); }
.vfl-values span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vfl-values.empty { color: var(--text-dim); font-family: inherit; border-style: dashed; }
.vfl-values:hover { border-color: var(--accent); }
.vfl-values .icon { color: var(--text-dim); flex: none; }
.vfl-pickrow { display: flex; gap: 4px; align-items: center; }
.vfl-pickrow .input { flex: 1; min-width: 0; }
.colfilter-item.picked { background: var(--accent-soft); }
.colfilter-item.stale .cf-value, .colfilter-item.stale .cf-count { color: var(--text-dim); text-decoration: line-through; }

/* Sort / format rows */
.vrow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.vrow > label:first-child:not(.check) { width: 72px; flex: none; }
.vrow .select, .vrow .input { flex: 1; min-width: 0; }
.vrow .narrow { flex: 0 0 72px; }
.vrow .check { font-size: 12px; }

/* Gauge format */
.g-head { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
.g-head:first-child { margin-top: 0; }
.g-color { flex: none; width: 30px; height: 24px; padding: 1px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elevated); cursor: pointer; }
.g-from-field { flex: 1; min-width: 0; padding: 3px 8px; border-radius: 5px; background: var(--bg-elevated); border: 1px dashed var(--border-strong);
  color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-hint { font-size: 11px; color: var(--text-dim); }
.g-checks { flex-wrap: wrap; gap: 4px 12px; }
.g-rules { display: flex; flex-direction: column; gap: 5px; }
.g-rule { display: flex; align-items: center; gap: 4px; }
.g-rule .input { flex: 1; min-width: 0; width: 0; }
.g-to, .g-unit { font-size: 11px; color: var(--text-dim); }
.vseg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; flex: none; }
.vseg button { width: 26px; height: 24px; display: grid; place-items: center; color: var(--text-muted); }
.vseg button.active { background: var(--accent-soft); color: var(--accent); }
.vseg[aria-disabled="true"] { opacity: 0.55; }

/* Full screen: the chart takes over the window */
body.viz-fullscreen .viz-pane { position: fixed; inset: 0; z-index: 900; display: flex; }
body.viz-fullscreen .viz { display: flex; }
body.viz-fullscreen .viz-main { flex: 1; }
body.viz-fullscreen .viz-fields, body.viz-fullscreen .viz-config, body.viz-fullscreen .viz-resizer { display: none; }
body.viz-fullscreen .viz-main { padding: 14px 18px 18px; }

@media (max-width: 1100px) {
  .viz { grid-template-columns: 190px 5px minmax(0, 1fr) 5px 250px; }
  .vt-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Custom visual (Vega / Vega-Lite) */
.viz-vega { position: absolute; inset: 10px 8px 6px; z-index: 0; }
.viz-vega .vega-embed { width: 100%; height: 100%; display: block; }
.viz-vega .vega-embed canvas, .viz-vega .vega-embed svg { display: block; }
.dtile .viz-vega { inset: 4px 8px 8px; }

/* Custom visual editor */
.custom-editor-modal { height: min(900px, calc(100vh - 40px)); }
.custom-editor-modal .modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.ce-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ce-link { font-size: 12px; color: var(--accent); }
.ce-grid { flex: 1; min-height: 320px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ce-editor { position: relative; min-height: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ce-textarea { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; font-family: var(--mono); font-size: 13px; border: 0; }
.ce-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ce-preview-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.ce-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
.ce-preview { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: linear-gradient(180deg, #151923, #12151c); }
.ce-msg { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45; max-height: 90px; overflow: auto; }
.ce-msg[hidden] { display: none; }
.ce-msg.error { color: #ffb4ae; background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.ce-msg.warn { color: #f3c878; background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.ce-msg .icon { flex: none; margin-top: 1px; }
.ce-dataset { display: flex; flex-direction: column; gap: 6px; }
.ce-ds-title { font-size: 12px; color: var(--text-muted); } .ce-ds-title b { color: var(--text); font-family: var(--mono); }
.ce-cols { display: flex; flex-wrap: wrap; gap: 6px; max-height: 70px; overflow: auto; }
.ce-col { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 12px; font-family: var(--mono); }
.ce-col:hover { border-color: var(--accent); }
.ce-type { font-family: var(--font); font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.ce-type.t-quantitative { color: #4f8cff; background: rgba(79, 140, 255, 0.14); }
.ce-type.t-temporal { color: #a78bfa; background: rgba(167, 139, 250, 0.14); }
.ce-type.t-nominal { color: #22d3ee; background: rgba(34, 211, 238, 0.12); }
.ce-foot { margin-right: auto; font-size: 12px; color: var(--text-dim); }
.ce-foot code { font-size: 11.5px; }
@media (max-width: 900px) { .ce-grid { grid-template-columns: 1fr; } }

/* Narrow toolbar: the less-used actions keep only their icons (tooltips name them) so the title stays readable. */
.viz-toolbar { container-type: inline-size; container-name: viztb; }
@container viztb (max-width: 940px) { .viz-toolbar [data-secondary] .btn-label { display: none; } }
@container viztb (max-width: 780px) { .viz-toolbar .btn:not([data-act='save-tile']) .btn-label { display: none; } .viz-toolbar .btn { padding: 0 7px; } }

/* Dynamic text (chart type "text") */
.viz-text { margin: auto; padding: 8px 14px; width: 100%; color: var(--text); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere;
  font-size: clamp(14px, 18cqmin, 40px); }
.viz-text-s { font-size: clamp(11px, 9cqmin, 16px); font-weight: 500; }
.viz-text-m { font-size: clamp(13px, 13cqmin, 24px); }
.viz-text-xl { font-size: clamp(18px, 26cqmin, 64px); }
.viz-text-left { text-align: left; } .viz-text-center { text-align: center; } .viz-text-right { text-align: right; }
.viz-text-hint { font-size: 12.5px; font-weight: 400; color: var(--text-dim); }
.vrow.vrow-col { flex-direction: column; align-items: stretch; gap: 6px; }
.vrow.vrow-col textarea { width: 100%; resize: vertical; font-family: inherit; }

/* Undo / redo of visual edits */
.vtb-undo { display: inline-flex; gap: 2px; }
.vtb-undo .icon-btn[disabled] { opacity: 0.35; cursor: default; }

/* KPI card formatting (Format › Text) */
.viz-kpi.kpi-solid .kpi-value { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--kpi-color); }
.viz-kpi.kpi-light .kpi-value { font-weight: 400; }
.viz-kpi.kpi-label-light .kpi-label { font-weight: 400; }
.viz-kpi.kpi-align-left { text-align: left; margin-left: 0; }
.viz-kpi.kpi-align-right { text-align: right; margin-right: 0; }

/* Format panel: sizes in px, custom format examples / preview */
.vrow .input.px { width: 62px; flex: none; }
.fmt-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fmt-chip { font-size: 11px; padding: 2px 7px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted);
  font-family: var(--font-mono, monospace); }
.fmt-chip:hover { border-color: var(--accent); color: var(--text); }
.fmt-preview { font-size: 11.5px; color: var(--text-dim); }
.fmt-preview b { color: var(--text); font-weight: 500; }