/* ================================== Visualize ==================================
   Styles for the Visualize workspace (components/visualization). Uses the QuantySight 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-muted); }
.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-secondary); }
.vf-group-title span { margin-left: auto; color: var(--text-muted); 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); }
/* found from the visual (a click on its field there): lit up, and it stays marked until another one is */
.vf-item.vf-found { border-color: var(--accent); background: var(--accent-soft); animation: vf-found 0.9s ease-out 2; }
@keyframes vf-found { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.vf-item:active { cursor: grabbing; }
.vf-grip { color: var(--text-muted); 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-muted); 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-secondary); 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-muted); font-size: 12px; text-align: center; }
.vf-help { padding: 8px 12px 10px; font-size: 11px; color: var(--text-muted); 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-muted); }
.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-secondary);
  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; }
/* the dashboard's filters that came along with Edit visual */
.viz-notice-filters { align-items: center; }
.viz-notice-filters > span { flex: 1; min-width: 0; }
.viz-notice-filters.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }
.viz-notice-filters.on .icon { color: var(--accent); margin-top: 0; }
.viz-notice-filters .btn { flex: none; white-space: nowrap; }
.viz-card { flex: 1; min-height: 0; position: relative; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card-grad); 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-secondary); 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-secondary)); 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-muted); }
/* a picture on the card: its own row above or below the text, at the left, in the middle or at the right */
.kpi-frame { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.kpi-frame[class*="kpi-img-bottom"] { flex-direction: column-reverse; }
.kpi-frame .viz-kpi { padding-top: 6px; padding-bottom: 6px; }
.kpi-img { flex: none; max-width: calc(100% - 20px); max-height: 60%; object-fit: contain; margin: 8px 10px; align-self: flex-start; user-select: none; }
.kpi-frame[class*="-center"] .kpi-img { align-self: center; }
.kpi-frame[class*="-right"] .kpi-img { align-self: flex-end; }
.kimg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kimg-thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-sunken); padding: 3px; }
.kimg-pos { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; }
.kimg-pos button { width: 26px; height: 20px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-sunken); position: relative; cursor: pointer; }
.kimg-pos button::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--text-muted); }
.kimg-pos button[data-kimg-pos^="top"]::after { top: 3px; }
.kimg-pos button[data-kimg-pos^="bottom"]::after { bottom: 3px; }
.kimg-pos button[data-kimg-pos$="left"]::after { left: 3px; }
.kimg-pos button[data-kimg-pos$="center"]::after { left: calc(50% - 3.5px); }
.kimg-pos button[data-kimg-pos$="right"]::after { right: 3px; }
.kimg-pos button:hover { border-color: var(--accent); }
.kimg-pos button.active { border-color: var(--accent); background: var(--bg-active); }
.kimg-pos button.active::after { background: var(--accent); }

/* 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: var(--grid-head); 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: var(--grid-head-hover); }
.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-secondary); 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-muted); font-style: italic; }
.viz-table td.bool { color: var(--warning); font-family: var(--mono); }

/* Matrix visual (pivot table): row headers stuck to the left, column headers to the top (their top is set per row) */
.viz-matrix { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; color: var(--text-secondary); }
.viz-matrix th, .viz-matrix td { padding: 5px 10px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.viz-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--grid-head); color: var(--text); font-weight: 600; text-align: right;
  border-bottom: 1px solid var(--border-strong); border-left: 1px solid var(--border); user-select: none; }
.viz-matrix thead th.mx-sortable, .viz-matrix .mx-corner { cursor: pointer; }
.viz-matrix thead th.mx-sortable:hover, .viz-matrix .mx-corner:hover { background: var(--grid-head-hover); }
.viz-matrix thead th[colspan]:not([colspan="1"]) { text-align: center; }
.viz-matrix .mx-corner { left: 0; z-index: 3; text-align: left; vertical-align: bottom; border-left: 0; border-right: 1px solid var(--border-strong); }
.viz-matrix .mx-sort { color: var(--accent); font-size: 0.75em; margin-left: 4px; }
.viz-matrix .mx-rh { position: sticky; left: 0; z-index: 1; background: var(--bg-panel); color: var(--text); font-weight: 500; text-align: left;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--border-strong); }
.viz-matrix td.num { text-align: right; font-family: var(--mono); font-size: 0.96em; color: var(--grid-text); }
.viz-matrix td.mx-tcol, .viz-matrix th.mx-tcol { font-weight: 700; }
.viz-matrix td.mx-tcol { border-left: 1px solid var(--border); }
.viz-matrix .mx-group > *, .viz-matrix .mx-group .mx-rh { font-weight: 700; }
.viz-matrix.mx-banded tr.mx-band > * { background-color: var(--grid-alt); }
.viz-matrix.mx-banded tr.mx-band > .mx-rh { background-color: var(--grid-alt); }
.viz-matrix tr.mx-total > * { font-weight: 700; color: var(--text); background: var(--grid-head); border-top: 1px solid var(--border-strong); position: sticky; bottom: 0; }
.viz-matrix tr.mx-total > .mx-rh { z-index: 2; }
.viz-matrix tbody tr:hover > * { background-color: var(--bg-hover); color: var(--text); }
.viz-matrix .mx-tog { width: 15px; height: 15px; margin-right: 6px; padding: 0; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--bg-sunken);
  color: var(--text-secondary); font: 600 11px/12px var(--mono); cursor: pointer; vertical-align: 1px; }
.viz-matrix .mx-tog:hover { color: var(--accent); border-color: var(--accent); }
.viz-matrix tr.mx-more td { text-align: center; color: var(--text-muted); font-style: italic; }

/* 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-muted); }
.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-muted); 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: var(--accent-text); 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-secondary); 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-secondary); }
.vz-req { color: var(--accent); font-style: normal; margin-left: 2px; }
.vz-count { font-weight: 500; color: var(--text-muted); 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-muted); 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-secondary); }
.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-muted); 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: var(--hover-veil); }
.vp-label .icon { width: 11px; height: 11px; color: var(--text-muted); flex: none; }
.vp-remove { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--text-muted); 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-secondary); }
.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-muted); }
.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-muted); font-family: inherit; border-style: dashed; }
.vfl-values:hover { border-color: var(--accent); }
.vfl-values .icon { color: var(--text-muted); 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-muted); text-decoration: line-through; }

/* Sort / format rows */
.vrow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.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-muted); }
.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-muted); }
.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-bound { position: relative; flex: 1; min-width: 0; display: flex; }
.g-bound .input { width: 100%; padding-right: 22px; -moz-appearance: textfield; appearance: textfield; }
.g-bound .input::-webkit-inner-spin-button, .g-bound .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.g-bound-pick { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-flex; padding: 3px; border: 0; border-radius: 4px; background: none; color: var(--text-muted); cursor: pointer; }
.g-bound-pick:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.g-bound-field { align-items: center; gap: 4px; height: 26px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated)); color: var(--text); font-size: 11.5px; cursor: pointer; }
.g-bound-field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g-to, .g-unit { font-size: 11px; color: var(--text-muted); }
.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-secondary); }
.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-muted); }
.ce-preview { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: var(--card-grad); }
.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: var(--danger-text); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.ce-msg.warn { color: var(--warning-text); 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-secondary); } .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: var(--c-select); background: rgba(79, 140, 255, 0.14); }
.ce-type.t-temporal { color: var(--c-join); background: rgba(167, 139, 250, 0.14); }
.ce-type.t-nominal { color: var(--c-top); background: rgba(34, 211, 238, 0.12); }
.ce-foot { margin-right: auto; font-size: 12px; color: var(--text-muted); }
.ce-foot code { font-size: 11.5px; }

/* Visual code: a visual's settings as JSON (code-editor.js) - the editor, and what can be set beside it */
.vc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.vc-left { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.vc-left .ce-editor { flex: 1; }
.vc-preview { flex: 1.15; min-height: 160px; }
.vc-preview[hidden], .vc-ref[hidden], .vc-nodata[hidden] { display: none; }
.vc-nodata { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center;
  font-size: 12.5px; color: var(--text-secondary); background: inherit; }
/* The chat under the visual */
.vc-chat { flex: 1; min-height: 150px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); overflow: hidden; }
.vc-chat-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.vc-chat-head b { color: var(--text); } .vc-chat-head .badge { margin-left: 0; } .vc-chat-head [data-chat-clear] { margin-left: auto; } .vc-chat-head [data-chat-clear][hidden] + .badge { margin-left: auto; }
.vc-chat-count { font-size: 11px; color: var(--text-muted); }
.vc-chat-head [data-chat-clear][hidden] { display: none; }
.vc-day { align-self: center; margin: 4px 0 2px; padding: 1px 8px; border-radius: 9px; font-size: 10.5px; color: var(--text-muted); background: color-mix(in srgb, var(--border) 60%, transparent); }
.vc-day.vc-now { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.vc-msgs { flex: 1; min-height: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.vc-msgs .ai-msg { padding: 7px 10px; }
.vc-intro { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.vc-intro b { color: var(--text); }
.vc-examples { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-examples button { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-size: 12px; }
.vc-examples button:hover { border-color: var(--accent); }
.vc-changed { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--success); font-family: var(--mono); }
.vc-changed .btn { margin-left: auto; font-family: var(--font); }
.vc-compose { display: flex; gap: 8px; align-items: flex-end; padding: 8px; border-top: 1px solid var(--border); }
.vc-compose .textarea { flex: 1; min-height: 40px; max-height: 120px; resize: none; font-size: 13px; }
.visual-code-modal .ce-cols { align-items: center; max-height: 34px; }
.vc-ref { flex: 1.15; min-height: 0; margin: 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sunken);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.visual-code-modal .ce-foot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@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-muted); }
.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-secondary);
  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-muted); }
.fmt-preview b { color: var(--text); font-weight: 500; }

/* Calculated fields */
.vf-type.t-calc { color: var(--c-where); background: rgba(240, 180, 41, 0.15); font-size: 10.5px; font-weight: 700; font-style: italic; letter-spacing: 0; cursor: pointer; }
.vf-type.t-calc.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.vf-item.vf-calc .vf-name { font-style: italic; }
.vf-new-calc { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; border: 1px dashed var(--border-strong, var(--border)); background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.vf-new-calc b { color: var(--c-where); font-style: italic; } .vf-new-calc:hover { color: var(--text); border-color: #f0b429; border-style: solid; background: rgba(240, 180, 41, 0.08); }
.vpanel-head .vpanel-count { margin-left: 6px; }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; }
.calc-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.calc-formula textarea { resize: vertical; min-height: 150px; line-height: 1.55; font-size: 13px; tab-size: 2; }
.calc-status { display: flex; align-items: flex-start; gap: 8px; min-height: 34px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; border: 1px solid var(--border); background: var(--bg-app); }
.calc-status .icon { flex: none; margin-top: 1px; } .calc-status span { min-width: 0; overflow-wrap: anywhere; }
.calc-status.ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); } .calc-status.ok .icon { color: var(--success); }
.calc-status.warn { border-color: color-mix(in srgb, var(--warning) 50%, transparent); } .calc-status.warn .icon { color: var(--warning); }
.calc-status.bad { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--text); } .calc-status.bad .icon { color: var(--danger); }
.calc-examples { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.calc-chip { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font: inherit; font-size: 11.5px; cursor: pointer; }
.calc-chip:hover { color: var(--text); border-color: var(--accent); }
.calc-rule { display: flex; gap: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .calc-rule .icon { flex: none; margin-top: 3px; } .calc-rule b { color: var(--text); font-weight: 600; }
.calc-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.calc-tabs { display: flex; } .calc-tabs button { flex: 1; }
.calc-search { height: 30px; }
.calc-list { flex: 1; min-height: 220px; max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.calc-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.calc-item:hover { background: var(--bg-hover); } .calc-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-group { padding: 8px 6px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.calc-help { min-height: 54px; padding: 8px 10px; border-radius: 8px; background: var(--bg-app); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 3px; }
.calc-help b { color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 760px) { .calc-grid { grid-template-columns: 1fr; } }

/* Field properties */
.vf-props { color: var(--accent); font-size: 16px; line-height: 1; flex: none; }
.fp-about { display: flex; align-items: center; gap: 10px; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.fp-about small { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.fp-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 10px; }
.fp-row > label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.fp-seg { display: flex; } .fp-seg button { flex: 1; }
.fp-note { margin: -4px 0 10px 132px; font-size: 12px; color: var(--warning, #f0b429); min-height: 0; } .fp-note:empty { display: none; }
.fp-format { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 10px 132px; } .fp-format[hidden], .fp-inline[hidden] { display: none; }
.fp-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; } .fp-inline > span { color: var(--text-secondary); } .fp-wide { flex: 1 1 100%; } .fp-wide input { flex: 1; }
.fp-preview { display: flex; align-items: baseline; gap: 10px; margin-left: 132px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-app); font-size: 12.5px; }
.fp-preview span { color: var(--text-secondary); } .fp-preview b { font-size: 15px; } .fp-preview small { color: var(--text-muted); }

/* Choosing a field for a zone with a click */
.vz-head { gap: 6px; } .vz-head .vz-label { margin-right: auto; }
.vz-pick { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; flex: none;
  transition: color .15s, border-color .15s, background .15s; }
.vz-pick:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
button.vz-drop { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; background: transparent; font: inherit; font-size: 11.5px; cursor: pointer; line-height: 1.35;
  transition: color .15s, border-color .15s, background .15s; }
button.vz-drop:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
button.vz-drop .icon { flex: none; }
.popover-vzpick { padding: 0; }
.vz-picker { display: flex; flex-direction: column; max-height: min(420px, calc(100vh - 40px)); }
.vz-picker-search { margin: 8px; height: 30px; flex: none; }
.vz-picker-list { overflow: auto; padding: 0 4px 4px; min-height: 40px; }
.vz-picker-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.vz-picker-item:hover, .vz-picker-item.focus { background: var(--bg-hover); } .vz-picker-item.taken { color: var(--text-secondary); } .vz-picker-item > svg { margin-left: auto; color: var(--accent); flex: none; }
.vz-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-picker-group { padding: 8px 6px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.vz-picker-foot { padding: 7px 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); flex: none; } .vz-picker-foot:empty { display: none; }

/* A text style's controls (a field's properties; each text of a gauge) */
.ts { display: flex; flex-direction: column; gap: 7px; }
.ts-row { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.ts-f { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.ts-f > span { flex: none; } .ts-f > i { font-style: normal; color: var(--text-muted); font-size: 11px; }
.ts-f .select { width: auto; min-width: 0; flex: 0 1 auto; } .ts-f .ts-px { width: 62px; flex: none; } .ts-f .ts-fix { width: 78px; flex: none; }
.ts-clear[hidden] { display: none; } .ts-hint { font-size: 11px; color: var(--text-muted); }
.g-text { border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--bg-app) 60%, transparent); }
.g-text > summary { display: flex; align-items: baseline; gap: 8px; padding: 6px 9px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); list-style: none; }
.g-text > summary::-webkit-details-marker { display: none; }
.g-text > summary::before { content: '▸'; color: var(--text-muted); font-size: 10px; transition: transform .15s; }
.g-text[open] > summary::before { transform: rotate(90deg); }
.g-text > summary small { margin-left: auto; font-weight: 400; color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%; }
.g-text > summary:hover { color: var(--accent); }
.g-text > .ts { padding: 2px 9px 9px; } .g-text > .vsection-note { padding: 0 9px 8px; }
.fp-head { margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 700; }
.fp-head small { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.field-props .ts { margin: 0 0 12px 132px; } .field-props .ts-f .ts-fix { width: 96px; }

/* Parameters (lib/viz/params.js): the Fields list, the dialog, and the control strip above a visual / on a tile */
.vf-type.t-param { color: var(--c-group); background: rgba(244, 114, 182, 0.15); font-size: 10.5px; }
.vf-item.vf-param { cursor: default; }
.vf-pval { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.vf-group-title .vf-new-param { width: 20px; height: 20px; margin-left: 2px; border: 1px dashed var(--border-strong, var(--border)); border-radius: 5px; display: grid; place-items: center; background: transparent; color: var(--text-secondary); cursor: pointer; }
.vf-group-title .vf-new-param:hover { color: #f472b6; border-color: #f472b6; border-style: solid; background: rgba(244, 114, 182, 0.08); }
.vf-param-empty { padding: 2px 8px 8px; color: var(--text-muted); font-size: 11.5px; line-height: 1.4; }
.param-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-panel, var(--bg-elev)); font-size: 12px; }
.param-controls[hidden] { display: none; }
.pc-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.pc-name { flex: none; color: var(--text-secondary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.pc-name::before { content: 'P'; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 5px; border-radius: 4px; font: 700 9px var(--mono); color: #f472b6; background: rgba(244, 114, 182, 0.15); vertical-align: 1px; }
.pc-name.pc-off { opacity: .6; font-style: italic; }
.pc-input { height: 26px; min-width: 0; padding-top: 0; padding-bottom: 0; font-size: 12px; }
select.pc-input { max-width: 220px; } input[type="text"].pc-input { width: 150px; } input[type="date"].pc-input { width: 140px; }
.pc-num { width: 88px; font-variant-numeric: tabular-nums; }
.pc-range { width: 130px; accent-color: var(--accent); }
.pc-bool { cursor: pointer; } .pc-bool input { position: absolute; opacity: 0; pointer-events: none; }
.pc-switch { width: 30px; height: 17px; border-radius: 9px; background: var(--border-strong, var(--border)); position: relative; transition: background .15s; flex: none; }
.pc-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pc-bool input:checked + .pc-switch { background: var(--accent); } .pc-bool input:checked + .pc-switch::after { transform: translateX(13px); }
.pc-bool input:focus-visible + .pc-switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-val { color: var(--text); min-width: 32px; }
.dtile-params.param-controls { flex: none; margin: 0 8px 4px; padding: 4px 8px; border-radius: 7px; background: transparent; }
.param-editor .modal-body { display: flex; flex-direction: column; gap: 10px; }
.pe-intro { display: flex; gap: 7px; margin: 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; } .pe-intro .icon { flex: none; margin-top: 2px; }
.pe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pe-row.pe-range { grid-template-columns: 1fr 1fr 110px; } .pe-row[hidden] { display: none; }
.pe-hint { color: var(--text-muted); font-size: 12px; font-family: var(--mono); overflow-wrap: anywhere; }
.pe-allow button[hidden] { display: none; }
.pe-from { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); } .pe-from select { flex: 1; min-width: 0; }
.pe-show { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.kpi-sub-help { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.kpi-sub-help code { font-family: var(--mono); font-size: 10.5px; color: var(--text-secondary); }
/* Fields as a tree: one branch per query (the visual's own, then the related queries it reads) - fields-panel.js */
.vf-query { margin-bottom: 6px; }
.vf-query-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 6px; border: 0; border-radius: 7px; background: var(--bg-sunken); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.vf-query-head:hover { background: var(--bg-hover); }
.vf-query-head > .icon:first-child { transition: transform .12s; color: var(--text-muted); }
.vf-query.collapsed .vf-query-head > .icon:first-child { transform: rotate(-90deg); }
.vf-query-head small { color: var(--text-muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.vf-query-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vf-query-head span { color: var(--text-muted); font-size: 11px; }
.vf-query:not(.is-primary) .vf-query-head { box-shadow: inset 2px 0 0 var(--accent); }
.vf-query-body { padding: 2px 0 0 8px; margin-left: 9px; border-left: 1px solid var(--border); }
.vf-query.collapsed .vf-query-body { display: none; }
.vf-query-body .vf-group { margin-bottom: 4px; }
.vf-query-body .vf-empty { padding: 8px; text-align: left; }
/* Data sources: which of the dashboard's queries this visual reads */
.vf-sources { padding: 0 10px 8px; }
.vf-sources:empty { display: none; }
.vf-src-head { display: flex; align-items: center; gap: 4px; padding: 2px 2px 4px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.vf-src-head span { flex: 1; }
.vf-src-btn { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border: 1px dashed var(--border-strong, var(--border)); border-radius: 6px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.vf-src-btn:hover { color: var(--text); border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.vf-src-list { max-height: 118px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sunken); padding: 3px; }
.vf-src { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 6px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.vf-src:hover { background: var(--bg-hover); }
.vf-src input { accent-color: var(--accent); flex: none; margin: 0; }
.vf-src-q { flex: none; min-width: 22px; padding: 0 4px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.vf-query-head small { padding: 0 4px; border-radius: 4px; background: var(--accent-soft); color: var(--accent) !important; line-height: 16px; }
.vf-src-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-src.is-primary { cursor: default; } .vf-src.is-primary .vf-src-name { font-weight: 600; }
.vf-src small { color: var(--text-muted); font-size: 10.5px; white-space: nowrap; }
.vf-src-warn { color: var(--warning); display: flex; }
.vf-src-spin { width: 10px; height: 10px; border-width: 1.5px; flex: none; }
.vf-src-add { width: 100%; justify-content: center; margin-top: 5px; padding: 4px 7px; }
.vf-src-hint { padding: 5px 2px 0; font-size: 11px; line-height: 1.4; color: var(--text-muted); }

/* Light theme: the field-type marks in colours that read on white */
:root[data-theme="light"] .vf-type.t-text { color: var(--c-top); }
:root[data-theme="light"] .vf-type.t-numeric { color: var(--c-select); }
:root[data-theme="light"] .vf-type.t-date { color: var(--c-join); }
:root[data-theme="light"] .vf-type.t-rowcount, :root[data-theme="light"] .vf-type.t-boolean { color: var(--c-order); }
:root[data-theme="light"] .vt-rec-label { color: var(--accent); }

/* HTML visual (html-visual/): the sandboxed frame, its editor and the Build visual summary ------------------------------ */
.viz-htmlv { position: absolute; inset: 0; display: flex; }
.viz-htmlv-frame { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
body.dash-moving .viz-htmlv-frame, body.dash-resizing .viz-htmlv-frame { pointer-events: none; }
.html-editor-modal { height: min(940px, calc(100vh - 32px)); }
.hv-bar .segmented button { min-width: 64px; }
.hv-grid { grid-template-columns: minmax(0, 0.52fr) 8px minmax(0, 0.48fr); }
.hv-left { position: relative; min-height: 0; display: flex; flex-direction: column; }
.hv-left .hv-code { flex: 1; }
.hv-left .hv-code[hidden], .hv-panel[hidden] { display: none; }
.hv-panel { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; }
.hv-sec { display: flex; flex-direction: column; gap: 6px; }
.hv-sec + .hv-sec { border-top: 1px solid var(--border); padding-top: 12px; }
.hv-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--text); }
.hv-sec-head > span:not(.hv-hint) { font-weight: 500; color: var(--text-muted); font-size: 11px; }
.hv-sec-head b { font-family: var(--mono); color: var(--accent-text); }
.hv-hint { font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
.hv-hint-block { display: block; line-height: 1.45; }
.hv-row { display: grid; grid-template-columns: minmax(96px, 0.8fr) minmax(150px, 1.7fr) 112px 96px var(--hv-q, 0px) 78px; gap: 6px; align-items: center;
  padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; }
.hv-row:hover { background: var(--bg-hover); }
.hv-row-open { border-color: color-mix(in srgb, var(--warning) 35%, transparent); background: var(--warning-soft); }
.hv-alias { font-family: var(--mono); font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-pick { justify-content: flex-start; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hv-pick .icon:last-child { margin-left: auto; flex: none; }
.hv-unbound { color: var(--text-muted); font-weight: 400; }
.hv-src { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 16px; padding: 0 4px; border-radius: 4px; font-size: 10px; font-weight: 700;
  color: var(--c-top); background: rgba(34, 211, 238, 0.12); flex: none; }
.hv-src-calculation { color: var(--c-join); background: rgba(167, 139, 250, 0.16); font-style: italic; }
.hv-src-measure { color: var(--c-select); background: rgba(79, 140, 255, 0.14); }
.hv-panel.hv-multi { --hv-q: 124px; }
.hv-q { width: 100%; min-width: 0; }
.hv-row > span:empty { min-width: 0; }
.hv-ds [data-ds-sort] { min-width: 110px; }
.hv-val { font-family: var(--mono); font-size: 12px; color: var(--success-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.hv-val.bad { color: var(--warning-text); }
.hv-inline { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; color: var(--text-secondary); font-size: 11.5px; }
.hv-num { width: 70px; }
.hv-empty { color: var(--text-muted); font-size: 12px; padding: 6px 2px; }
.hv-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 4px 0; padding: 2px 4px 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-family: var(--mono); font-size: 11.5px; color: var(--text-secondary); }
.hv-ref { width: 100%; border-collapse: collapse; font-size: 12px; }
.hv-ref td { border-top: 1px solid var(--border); padding: 6px 6px; vertical-align: top; color: var(--text-secondary); line-height: 1.45; }
.hv-ref td:first-child { width: 46%; }
.hv-ref code { font-size: 11px; color: var(--code-text); word-break: break-word; }
.hv-ref tr.hv-dim td { opacity: 0.6; }
.hv-preview { background: var(--bg-app); }
.hv-preview-note { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-muted); }
.hv-msgs { display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow: auto; }
.hv-msg { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.4; padding: 5px 8px; border-radius: 6px; }
.hv-msg.warn { color: var(--warning-text); background: var(--warning-soft); }
.hv-msg.error { color: var(--danger-text); background: var(--danger-soft); }
.hv-msg.ok { color: var(--success-text); background: var(--success-soft); }
.hv-msg .icon { flex: none; margin-top: 1px; }
.hv-picker { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.hv-picker-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; }
.hv-picker-group { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 8px 6px 3px; }
.hv-picker-item { display: flex; align-items: center; gap: 8px; text-align: left; padding: 5px 6px; border-radius: 5px; font-size: 12.5px; color: var(--text); }
.hv-picker-item:hover { background: var(--bg-hover); }
.hv-picker-item[hidden] { display: none; }
.hv-picker-clear { align-self: flex-start; font-size: 12px; padding: 2px 6px; }
.hv-picker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; font-size: 12px; }
.hv-picker-foot .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.hv-sum { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 6px; }
.hv-sum-btn { align-self: flex-start; margin-bottom: 6px; }
.hv-sum-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-top: 6px; }
.hv-sum-head span { color: var(--text-muted); font-weight: 500; }
.hv-sum-row { display: flex; gap: 8px; align-items: baseline; font-size: 12px; padding: 2px 4px; border-radius: 4px; }
.hv-sum-row code { font-size: 11.5px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hv-sum-row span { color: var(--text-muted); margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-sum-row.open span { color: var(--warning-text); }
.hv-sum-empty { font-size: 12px; color: var(--text-muted); }
/* the editor's preview: the design at its real size, scaled (preview-scale.js); the stage scrolls both ways; a splitter */
.hv-grid { column-gap: 2px; }
.hv-grid.hv-only > .hv-left, .hv-grid.hv-only > .hv-split { display: none; }
.hv-split { cursor: col-resize; position: relative; touch-action: none; }
.hv-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; border-radius: 2px; background: var(--border); transition: background .12s; }
.hv-split:hover::after, .hv-grid.hv-dragging .hv-split::after { background: var(--accent); }
.hv-grid.hv-dragging, .hv-grid.hv-dragging * { user-select: none; }
.hv-grid.hv-dragging .viz-htmlv-frame { pointer-events: none; }
.hv-side { min-width: 0; }
.hv-pv-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.hv-pv-head .ce-label { margin-right: auto; }
.hv-pv-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hv-pv-tools .select.input-sm { width: auto; }
.hv-pv-size { max-width: 190px; }
.hv-pv-custom { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); font-size: 12px; }
.hv-pv-custom[hidden] { display: none; }
.hv-pv-zoom { display: inline-flex; align-items: center; gap: 2px; }
.hv-pv-zoom .btn-xs { min-width: 22px; justify-content: center; font-size: 14px; }
.hv-pv-pct { min-width: 36px; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.hv-preview .hv-stage { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.hv-sizer { position: relative; margin: 0 auto; flex: none; }
.hv-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hv-pan-layer { position: absolute; inset: 0; display: none; cursor: grab; z-index: 2; touch-action: none; }
.hv-stage.hv-panning .hv-pan-layer { display: block; }
.hv-stage.hv-grabbing .hv-pan-layer { cursor: grabbing; }
@media (max-width: 1100px) { .hv-row { grid-template-columns: 1fr 1.4fr 1fr 1fr; } .hv-row > span:empty { display: none; } }

/* HTML editor: the part picked in the preview (Select) and "Suggest with AI" */
.hv-focus { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px; padding: 8px 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.hv-sec.hv-focus .hv-sec-head { color: var(--accent-text); }
.hv-focus-label { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-sec-head .icon-btn[data-focus-clear] { margin-left: auto; }
.hv-ai { gap: 5px; }
.hv-ai .hv-ai-n { font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.hv-ai-modal .hv-ai-body { display: flex; flex-direction: column; gap: 10px; max-height: 64vh; overflow: auto; padding-right: 4px; }
.hv-ai-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 12px; color: var(--text-secondary); text-align: center; }
.hv-ai-wait small { color: var(--text-muted); }
.hv-ai-wait.bad { color: var(--danger, #e5484d); }
.hv-ai-intro { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-secondary); }
.hv-ai-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.hv-ai-item.bad { border-color: color-mix(in srgb, var(--danger, #e5484d) 45%, var(--border)); }
.hv-ai-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.hv-ai-head code { font-family: var(--mono); color: var(--accent-text); }
.hv-ai-tag, .hv-ai-conf { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3, rgba(127,127,127,.14)); color: var(--text-secondary); }
.hv-ai-conf.high { color: var(--success, #30a46c); } .hv-ai-conf.low { color: var(--warning, #f5a524); }
.hv-ai-ctx { font-size: 11.5px; color: var(--text-muted); }
.hv-ai-use { font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.hv-ai-calc { display: grid; grid-template-columns: minmax(140px, 0.6fr) auto minmax(260px, 2fr) 120px; gap: 6px; align-items: start; }
.hv-ai-calc span { padding-top: 6px; color: var(--text-muted); }
.hv-ai-calc textarea { resize: vertical; min-height: 34px; font-family: var(--mono); font-size: 12px; }
.hv-ai-why { font-size: 12px; color: var(--text-secondary); }
.hv-ai-check { font-size: 11.5px; display: flex; gap: 6px; align-items: center; }
.hv-ai-check.ok { color: var(--success, #30a46c); } .hv-ai-check.bad { color: var(--danger, #e5484d); }

/* HTML editor: filters, parameters and values as designed */
.hv-ctl { display: grid; grid-template-columns: minmax(120px, 0.9fr) minmax(110px, 1fr) minmax(180px, 1.4fr) auto auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 8px; font-size: 12px; }
.hv-ctl:hover { background: var(--surface-3, rgba(127,127,127,.08)); }
.hv-ctl-open { border: 1px dashed color-mix(in srgb, var(--warning, #f5a524) 55%, transparent); }
.hv-ctl-kind { display: flex; align-items: center; gap: 5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-ctl-what { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-ctl-ok { color: var(--success, #30a46c); font-size: 11px; white-space: nowrap; }
.hv-ctl-warn { color: var(--warning, #f5a524); font-size: 11px; white-space: nowrap; }
.hv-ctl-param { min-width: 0; }
.hv-ctl-static { grid-template-columns: 90px minmax(0, 1fr) auto; }
.hv-ctl-val { font-family: var(--mono); font-weight: 600; color: var(--accent-text); }
.hv-ctl-calc { grid-template-columns: minmax(120px, 0.8fr) minmax(0, 2fr) auto auto auto; }
.hv-calc-f { font-family: var(--mono); font-size: 11.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-focus-more { margin-top: -4px; }
@media (max-width: 1100px) { .hv-ctl { grid-template-columns: 1fr 1fr; } }
.hv-jumps { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; background: var(--surface, var(--bg)); }
.hv-jump { border: 1px solid var(--border); background: var(--surface-2, transparent); color: var(--text-secondary); border-radius: 999px; padding: 2px 10px; font-size: 11.5px; cursor: pointer; }
.hv-jump b { color: var(--text); margin-left: 3px; }
.hv-jump.warn { border-color: color-mix(in srgb, var(--warning, #f5a524) 55%, var(--border)); }
.hv-jump.warn b { color: var(--warning, #f5a524); }
.hv-jump:hover { border-color: var(--accent); }