/* Datasets (gridmap) — the schema-mapping popup, the datasets tab and the
   import tab's database pane. Additive only: every selector is gm- prefixed or
   an id from the dataset markup, every color and font is a main.css token.
   The few tokens gridmap needs that nodemapper has no equivalent for (node
   type hues in the schema editor, control heights) live on .gm-scope. */
.gm-scope {
  --gm-hue-rel: var(--text-2);
  --gm-node-c0: #5C9EFF; --gm-node-c1: #22C55E; --gm-node-c2: #F59E0B; --gm-node-c3: #EC4899;
  --gm-node-c4: #A78BFA; --gm-node-c5: #14B8A6; --gm-node-c6: #F97316; --gm-node-c7: #EAB308;
  --gm-h-control: 26px;
  --gm-h-control-sm: 22px;
  --gm-z-popup: 1000;
  --gm-z-modal: 1100;
  --gm-z-toast: 1200;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg);
}
.gm-scope[hidden], .gm-scope [hidden] { display: none !important; }

/* ---- primitives (gridmap's base.css, renamed and token-mapped) ---- */
.gm-label { font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.gm-panel-title { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--fg); margin: 0; }
.gm-muted { color: var(--muted); }
.gm-mono { font-family: var(--font-mono); }
.gm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); min-width: 14px; height: 14px; padding: 0 4px; border: 1px solid var(--border-2); border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; }

.gm-btn {
  height: var(--gm-h-control); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--border-2); border-radius: var(--r-ctl);
  color: var(--fg); font: inherit; font-size: 11px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.gm-btn:hover { background: var(--hover); border-color: var(--border-3); }
.gm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.gm-btn.sm { height: var(--gm-h-control-sm); padding: 0 8px; font-size: 10px; }
.gm-btn.primary { border-color: var(--accent); color: var(--accent); }
.gm-btn.primary:hover { background: var(--accent-dim); }
.gm-btn.danger { border-color: var(--danger); color: var(--danger); }
.gm-btn.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.gm-btn svg { width: 12px; height: 12px; }

.gm-icon-btn {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text-2); cursor: pointer; padding: 0; transition: background 120ms, color 120ms;
}
.gm-icon-btn:hover { background: var(--hover); color: var(--fg); }
.gm-icon-btn.active { color: var(--accent); background: var(--accent-dim); }
.gm-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.gm-icon-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.gm-input, .gm-select {
  height: var(--gm-h-control); width: 100%; padding: 0 8px;
  background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--r-ctl);
  color: var(--fg); font: inherit; font-size: 11px; outline: none; transition: border-color 120ms;
}
.gm-input::placeholder { color: var(--faint); }
.gm-input:hover, .gm-select:hover { border-color: var(--border-3); }
.gm-input:focus, .gm-select:focus { border-color: var(--border-3); box-shadow: 0 0 0 1px var(--border-3); }
.gm-input.sm, .gm-select.sm { height: var(--gm-h-control-sm); font-size: 10px; }
.gm-select {
  appearance: none; padding-right: 22px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.gm-select option { background: var(--panel-2); color: var(--fg); }
.gm-field { display: flex; flex-direction: column; gap: 4px; }

.gm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); cursor: pointer; }
.gm-check input { appearance: none; width: 12px; height: 12px; margin: 0; border: 1px solid var(--border-2); border-radius: 2px; background: var(--bg); display: grid; place-content: center; }
.gm-check input:checked { border-color: var(--accent); background: var(--accent); }
.gm-check input:checked::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid var(--bg); border-bottom: 1.5px solid var(--bg); transform: translateY(-1px) rotate(-45deg); }

.gm-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; }
.gm-status-dot.ok { background: var(--success); }
.gm-status-dot.err { background: var(--danger); }
.gm-status-dot.warn { background: var(--warn); }

.gm-empty { color: var(--muted); font-size: 11px; text-align: center; padding: 24px 16px; line-height: 1.45; }
.gm-empty strong { display: block; color: var(--text-2); font-weight: 500; margin-bottom: 4px; }
.gm-empty-tight { padding: 8px 0; text-align: left; }

.gm-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.gm-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.gm-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: middle; }
.gm-table tr:hover td { background: var(--panel-2); }

/* modals + toasts (gridmap's confirm / prompt) */
.gm-modal-backdrop { position: fixed; inset: 0; z-index: var(--gm-z-modal, 1100); background: rgb(0 0 0 / .6); display: flex; align-items: center; justify-content: center; }
.gm-modal { width: 420px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--border-3); border-radius: 10px; }
.gm-modal-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.gm-modal-body { padding: 16px; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.gm-modal-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.gm-toasts { position: fixed; right: 16px; bottom: 16px; z-index: var(--gm-z-toast, 1200); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.gm-toast {
  pointer-events: auto; min-width: 220px; max-width: 380px; padding: 8px 12px;
  background: var(--panel-2); border: 1px solid var(--border-2); border-left: 2px solid var(--muted); border-radius: var(--r-ctl);
  font-size: 11px; color: var(--fg); animation: gm-toast-in 160ms cubic-bezier(0.2, 0, 0, 1);
}
.gm-toast.ok { border-left-color: var(--success); }
.gm-toast.err { border-left-color: var(--danger); }
.gm-toast.warn { border-left-color: var(--warn); }
.gm-toast.info { border-left-color: var(--accent); }
@keyframes gm-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- import tab → database pane ---- */
.proc-pane .import-src-tabs { margin: 12px 12px 0; }
.import-pane[hidden] { display: none !important; }
.gm-database-form { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.gm-dropzone {
  padding: 16px 12px; border: 1px dashed var(--border-2); border-radius: var(--r-ctl);
  text-align: center; color: var(--muted); font-size: 11px; cursor: pointer; transition: border-color 120ms, background 120ms;
}
.gm-dropzone:hover { border-color: var(--border-3); color: var(--text-2); }
.gm-dropzone.over { border-color: var(--accent); background: var(--accent-dim); color: var(--fg); }
.gm-dropzone .gm-mono { display: block; margin-top: 4px; font-size: 10px; color: var(--faint); }

/* ---- datasets tab (left sidebar) ---- */
#datasets-panel { display: flex; flex-direction: column; min-height: 0; padding: 12px; gap: 10px; }
#datasets-panel[hidden] { display: none !important; }
#datasets-panel .stree-bar { padding: 0; }
.gm-list { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.gm-row { padding: 8px 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; cursor: default; }
.gm-row:hover { background: var(--panel-2); }
.gm-row.selected { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
.gm-row-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gm-row-title { font-size: 11px; color: var(--fg); font-weight: 500; flex: 1; min-width: 0; }
.gm-row-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.gm-row-nodes { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-row-node { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-2); }
.gm-view { border: 1px solid var(--border); border-radius: var(--r-ctl); margin-bottom: 8px; overflow: hidden; }
.gm-view-head { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; cursor: pointer; background: var(--panel); }
.gm-view-head:hover { background: var(--panel-2); }
.gm-view-marker { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--border-3); flex: none; }
.gm-view.active .gm-view-marker { background: var(--accent); border-color: var(--accent); }
.gm-view-name { flex: 1; min-width: 0; font-size: 11px; font-weight: 500; color: var(--text-2); }
.gm-view.active .gm-view-name { color: var(--fg-bright); }
.gm-view-actions { display: none; gap: 2px; }
.gm-view-head:hover .gm-view-actions { display: inline-flex; }
.gm-view-body { background: var(--bg); }
.gm-view.active .gm-view-body { background: var(--panel); box-shadow: inset 2px 0 0 var(--accent); }
.gm-view.drop .gm-view-body, .gm-view.drop .gm-view-head { background: var(--accent-dim); }
.gm-view-empty { padding: 8px 10px; font-size: 10px; color: var(--faint); }
.gm-view-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--border); }
.gm-map-row { cursor: pointer; }
.gm-map-row.dragging { opacity: 0.4; }
.gm-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.gm-row-foot .gm-row-nodes { flex: 1; min-width: 0; }
.gm-move { width: 92px; flex: none; height: 18px; font-size: 9px; padding: 0 14px 0 4px; background-position: calc(100% - 7px) 50%, calc(100% - 3px) 50%; opacity: 0; transition: opacity 120ms; }
.gm-map-row:hover .gm-move, .gm-move:focus { opacity: 1; }

/* ---- the popup ---- */
#gm-mapper {
  position: fixed; inset: 0; z-index: var(--gm-z-popup, 1000);
  display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .65);
}
.gm-mapper-window {
  width: min(1380px, calc(100vw - 48px)); height: min(860px, calc(100vh - 48px));
  display: grid; grid-template-rows: 42px 1fr;
  background: var(--bg); border: 1px solid var(--border-3); border-radius: 10px; overflow: hidden;
}
.gm-mapper-head { display: flex; align-items: center; gap: 16px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.gm-mapper-titles { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.gm-mapper-kicker { font-family: var(--font-serif); font-size: 16px; color: var(--fg-bright); white-space: nowrap; }
.gm-mapper-file { font-size: 12px; font-weight: 500; color: var(--fg); }
.gm-mapper-meta { font-size: 10px; color: var(--muted); }
.gm-mapper-body { display: grid; grid-template-columns: 56px minmax(0, 1fr) 440px; min-height: 0; }

.gm-mapper-rail { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 4px; border-right: 1px solid var(--border); background: var(--bg); }
.gm-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 46px; background: transparent; border: 1px solid transparent; border-radius: var(--r-ctl);
  color: var(--text-2); cursor: pointer; padding: 0; font-family: var(--font-ui); transition: background 90ms, color 90ms;
}
.gm-tool:hover { background: var(--hover); color: var(--fg); border-color: var(--border); }
.gm-tool:disabled { opacity: 0.35; cursor: not-allowed; }
.gm-tool .t { font-size: 9px; letter-spacing: 0.02em; white-space: nowrap; }
.gm-tool svg { width: 14px; height: 14px; }
#gm-tool-add, #gm-tool-accept { color: var(--accent); }
#gm-tool-add:hover, #gm-tool-accept:hover { background: var(--accent-dim); }
.gm-rail-sep { height: 1px; background: var(--border); margin: 6px 4px; }

.gm-canvas-wrap { position: relative; min-width: 0; min-height: 0; background: var(--canvas); overflow: hidden; }
.gm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.gm-canvas:active { cursor: grabbing; }
.gm-canvas.connecting { cursor: crosshair; }
.gm-canvas-toolbar { position: absolute; z-index: 5; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: var(--r-ctl); }
.gm-canvas-hud { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.gm-canvas-hud .has-issues { color: var(--warn); }
.gm-canvas-hint { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gm-canvas-hint .card { width: 340px; padding: 16px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-ctl); color: var(--muted); font-size: 11px; line-height: 1.45; }
.gm-canvas-hint h2 { font-family: var(--font-serif); font-weight: 400; font-size: 16px; color: var(--fg); margin: 0 0 6px; }
.gm-canvas-hint p { margin: 0; }
.gm-canvas-hint b { color: var(--fg); font-weight: 500; }

.gm-mapper-panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: 1px solid var(--border); }
.gm-inspector-head { height: 32px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--border); }
.gm-inspector-head .kind { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.gm-inspector-body { flex: 1; min-height: 0; overflow-y: auto; }
.gm-inspector-section { padding: 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }

/* ---- schema graph (SVG) ---- */
.gm-node { cursor: grab; }
.gm-node.dragging { cursor: grabbing; }
.gm-node-body { stroke-width: 1.5; transition: stroke-width 90ms; }
.gm-node-ring { fill: transparent; stroke: transparent; stroke-width: 9; cursor: crosshair; }
.gm-node:hover .gm-node-ring { stroke: var(--node-color); stroke-opacity: 0.22; }
.gm-node.gm-node-source .gm-node-ring { cursor: grab; }
.gm-node.gm-node-source:hover .gm-node-ring { stroke: transparent; }
.gm-node.connecting .gm-node-ring, .gm-node.drop-target .gm-node-ring { stroke: var(--node-color); stroke-opacity: 0.45; }
.gm-node.drop-target .gm-node-body { stroke-width: 3; }
.gm-node.selected .gm-node-body { stroke-width: 2.5; }
.gm-node-label { font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; fill: var(--fg-bright); text-anchor: middle; pointer-events: none; }
.gm-node-sub { font-family: var(--font-mono); font-size: 8.5px; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.gm-node-badge circle { fill: var(--warn); stroke: var(--canvas); stroke-width: 1.5; }
.gm-node-badge text { font-family: var(--font-mono); font-size: 9px; font-weight: 700; fill: var(--bg); text-anchor: middle; pointer-events: none; }
.gm-node.invalid .gm-node-body { stroke-dasharray: 3 3; }
.gm-node.gm-node-source .gm-node-body { stroke-dasharray: 5 3; }
.gm-node[data-color="0"], .gm-node-dot[data-color="0"], .gm-swatch[data-color="0"] { --node-color: var(--gm-node-c0); }
.gm-node[data-color="1"], .gm-node-dot[data-color="1"], .gm-swatch[data-color="1"] { --node-color: var(--gm-node-c1); }
.gm-node[data-color="2"], .gm-node-dot[data-color="2"], .gm-swatch[data-color="2"] { --node-color: var(--gm-node-c2); }
.gm-node[data-color="3"], .gm-node-dot[data-color="3"], .gm-swatch[data-color="3"] { --node-color: var(--gm-node-c3); }
.gm-node[data-color="4"], .gm-node-dot[data-color="4"], .gm-swatch[data-color="4"] { --node-color: var(--gm-node-c4); }
.gm-node[data-color="5"], .gm-node-dot[data-color="5"], .gm-swatch[data-color="5"] { --node-color: var(--gm-node-c5); }
.gm-node[data-color="6"], .gm-node-dot[data-color="6"], .gm-swatch[data-color="6"] { --node-color: var(--gm-node-c6); }
.gm-node[data-color="7"], .gm-node-dot[data-color="7"], .gm-swatch[data-color="7"] { --node-color: var(--gm-node-c7); }
.gm-node-dot[data-color="-1"] { --node-color: var(--muted); }
.gm-node.unlabelled .gm-node-body { --node-color: var(--muted); }
.gm-node.unlabelled .gm-node-label { fill: var(--text-2); font-style: italic; }
.gm-node .gm-node-body { stroke: var(--node-color); fill: color-mix(in srgb, var(--node-color) 14%, var(--panel-2)); }
.gm-node.selected .gm-node-body { fill: color-mix(in srgb, var(--node-color) 26%, var(--panel-2)); }

.gm-rel { cursor: pointer; }
.gm-rel-hit { fill: none; stroke: transparent; stroke-width: 14; }
.gm-rel-line { fill: none; stroke: var(--gm-hue-rel); stroke-width: 1.25; }
.gm-rel:hover .gm-rel-line { stroke: var(--fg); }
.gm-rel.selected .gm-rel-line { stroke: var(--accent); stroke-width: 1.75; }
.gm-rel.invalid .gm-rel-line { stroke-dasharray: 4 3; stroke: var(--warn); }
.gm-rel-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-2); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.gm-rel-label-bg { fill: var(--canvas); stroke: var(--border); stroke-width: 1; }
.gm-rel:hover .gm-rel-label, .gm-rel.selected .gm-rel-label { fill: var(--fg-bright); }
.gm-rel.selected .gm-rel-label-bg { stroke: var(--accent); }
.gm-rel.invalid .gm-rel-label-bg { stroke: var(--warn); }
.gm-rel.auto .gm-rel-label { font-style: italic; fill: var(--muted); }
.gm-rel.gm-rel-source { cursor: default; }
.gm-rel.gm-rel-source .gm-rel-line { stroke-dasharray: 4 4; stroke: var(--muted); }
.gm-rel.gm-rel-source:hover .gm-rel-line { stroke: var(--muted); }
.gm-rel.gm-rel-source .gm-rel-hit { pointer-events: none; }
.gm-templink { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
#gm-arrow path { fill: var(--gm-hue-rel); }

/* ---- inspector components ---- */
.gm-node-head { display: flex; align-items: center; gap: 8px; }
.gm-node-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--node-color, var(--muted)); display: inline-block; }
.gm-source-title { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.gm-source-name { font-size: 13px; font-weight: 500; color: var(--fg-bright); }
.gm-label-input { font-size: 13px; font-weight: 500; height: 30px; }
.gm-swatches { display: flex; gap: 6px; }
.gm-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid transparent; cursor: pointer; padding: 0; background: var(--node-color); opacity: 0.5; }
.gm-swatch:hover { opacity: 0.85; }
.gm-swatch.active { opacity: 1; border-color: var(--fg-bright); }
.gm-mode { font-size: 10px; line-height: 1.45; }
.gm-mode b { color: var(--text-2); font-weight: 500; }
.gm-mode .gm-mono { color: var(--text-2); }
.gm-issues { display: flex; flex-direction: column; gap: 4px; }
.gm-issue { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--warn); }
.gm-issue svg { width: 10px; height: 10px; flex: none; }
.gm-direction { display: flex; align-items: center; gap: 6px; }
.gm-endpoint { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg); padding: 0 8px; height: var(--gm-h-control); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2); }
.gm-endpoint .gm-mono { font-size: 10px; margin-left: auto; }
.gm-add-prop { display: flex; gap: 6px; }
.gm-add-prop .gm-select { flex: 1; }

.gm-grid-wrap { display: flex; flex-direction: column; gap: 4px; }
.gm-grid-wrap > table { display: block; overflow-x: auto; }
.gm-grid { border-collapse: separate; border-spacing: 0; font-size: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.gm-grid th, .gm-grid td { padding: 4px 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; vertical-align: middle; }
.gm-grid th:last-child, .gm-grid td:last-child { border-right: 0; }
.gm-grid tbody tr:last-child td { border-bottom: 0; }
.gm-grid thead th { background: var(--panel-2); color: var(--text-2); font-weight: 500; }
.gm-grid-add th { padding: 2px 6px; background: var(--bg); text-align: center; }
.gm-grid-add .gm-icon-btn { margin: 0 auto; }
.gm-grid-col { font-family: var(--font-mono); color: var(--fg); margin-right: 4px; }
.gm-grid th .type { font-family: var(--font-mono); color: var(--muted); }
.gm-grid th .type.number, .gm-type-tag.number { color: var(--accent); }
.gm-grid th .type.date, .gm-type-tag.date { color: var(--warn); }
.gm-grid th .type.boolean, .gm-type-tag.boolean { color: var(--success); }
.gm-grid td { font-family: var(--font-mono); color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.gm-grid th.mapped, .gm-grid td.mapped { background: var(--accent-dim); }
.gm-grid th.mapped .gm-grid-col { color: var(--fg-bright); }
.gm-grid td.mapped { color: var(--text-2); }
.gm-grid-foot { font-size: 10px; font-family: var(--font-mono); }

.gm-props th:first-child, .gm-props td:first-child { padding-left: 0; }
.gm-props th, .gm-props td { padding: 4px 6px; }
.gm-props th.c, .gm-props td.c { text-align: center; width: 28px; padding-left: 0; padding-right: 0; }
.gm-props td:last-child { padding-right: 0; }
.gm-props .gm-colname { display: inline-block; max-width: 78px; vertical-align: bottom; color: var(--text-2); }
.gm-type-tag { font-family: var(--font-mono); font-size: 9px; margin-left: 4px; color: var(--muted); }
.gm-prop-name { display: flex; gap: 4px; }
.gm-prop-name .gm-input.sm { flex: 1; min-width: 56px; height: 22px; }
.gm-prop-type { width: 58px; flex: none; height: 22px; padding-right: 16px; background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%; font-size: 9px; }
.gm-prop-role { width: 104px; height: 22px; padding-right: 16px; background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%; font-size: 9px; font-family: var(--font-mono); }
.gm-prop-role:has(option:checked:not([value=""])) { color: var(--accent); border-color: var(--border-3); }
.gm-combo { flex: 1; min-width: 0; display: flex; }
.gm-combo .gm-input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gm-label-pick { width: 26px; flex: none; height: 30px; padding: 0; color: transparent; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; background-color: var(--panel-2); background-position: calc(100% - 15px) 50%, calc(100% - 11px) 50%; }
.gm-label-pick option { color: var(--fg); }
.gm-props tr.is-key td { background: var(--panel-2); }
.gm-props tr.is-key .gm-colname { color: var(--fg-bright); }
.gm-props .gm-check input:checked { background: var(--warn); border-color: var(--warn); }
.gm-fields td:first-child { width: 34%; }
.gm-fields td:nth-child(3) { width: 108px; }
.gm-prop-wrap { display: flex; flex-direction: column; gap: 8px; }

.gm-list-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-rel-chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); color: var(--text-2); font: inherit; font-size: 10px; cursor: pointer; }
.gm-rel-chip:hover { border-color: var(--border-3); color: var(--fg); }