/* DEC-149: the chart data-binding editor and bound chart (chart_binding_ui.jsx). Tokens only (C9). */
.cb-ed { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cb-ed-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ad-text-muted); }
.cb-ed-head strong { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ad-text-muted); }
.cb-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--ad-border); background: var(--ad-surface-inset); min-width: 0; }
.cb-card-h { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 132px) minmax(0, 96px) auto; gap: 6px; align-items: center; }
.cb-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.cb-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12px; }
.cb-row > label, .cb-row > .cb-l { padding-top: 6px; font-size: 11px; font-weight: 700; color: var(--ad-text-muted); }
.cb-c { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; align-items: center; }
.cb-in, .cb-sel {
  box-sizing: border-box; min-width: 0; height: 28px; font: inherit; font-size: 12.5px; padding: 0 8px; border-radius: var(--ad-radius-input, 8px);
  border: 1px solid var(--ad-border-strong); background: var(--ad-surface); color: var(--ad-text);
}
.cb-in { flex: 1 1 120px; }
.cb-sel { flex: 0 1 auto; max-width: 100%; cursor: pointer; font-weight: 600; }
.cb-in:focus-visible, .cb-sel:focus-visible, .cb-pick-item:focus-visible, .cb-src-btn:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 1px; }
.cb-ta { box-sizing: border-box; width: 100%; min-height: 60px; font: inherit; font-size: 12px; padding: 6px 8px; border-radius: var(--ad-radius-input, 8px); border: 1px solid var(--ad-border-strong); background: var(--ad-surface); color: var(--ad-text); }
.cb-src-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; box-sizing: border-box; text-align: left; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--ad-border-strong); background: var(--ad-surface); color: var(--ad-text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.cb-tech { font-size: 10.5px; font-weight: 500; color: var(--ad-text-muted); font-family: var(--ad-font-mono, monospace); overflow-wrap: anywhere; }
.cb-pick { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; border: 1px solid var(--ad-border-strong); background: var(--ad-surface); }
.cb-pick-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.cb-pick-group { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ad-text-muted); padding: 6px 4px 2px; }
.cb-pick-item { display: flex; flex-direction: column; gap: 1px; width: 100%; box-sizing: border-box; text-align: left; padding: 5px 8px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--ad-text); font: inherit; font-size: 12.5px; cursor: pointer; }
.cb-pick-item:hover { background: var(--ad-surface-inset); }
.cb-pick-item small { font-size: 10.5px; color: var(--ad-text-muted); }
.cb-hint { font-size: 11.5px; line-height: 1.4; padding: 5px 9px; border-radius: 8px; background: var(--ad-info-bg); color: var(--ad-info-fg); }
.cb-warn { font-size: 11.5px; line-height: 1.4; padding: 5px 9px; border-radius: 8px; background: var(--ad-warn-bg); color: var(--ad-warn-fg); }
.cb-line { font-size: 11px; line-height: 1.4; color: var(--ad-text-muted); overflow-wrap: anywhere; }
.cb-ok { font-size: 11px; color: var(--ad-success-fg, var(--ad-text-muted)); }
.cb-chart { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; width: 100%; }
.cb-chart-canvas { position: relative; flex: 1 1 auto; min-height: 120px; }
.cb-chart-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; padding: 8px; color: var(--ad-text-muted); }
.cb-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ad-text-muted); }
.cb-notes li[data-cb-status="denied"] { color: var(--ad-warn-fg); }
@media (max-width: 480px) {
  .cb-card-h { grid-template-columns: auto minmax(0, 1fr); }
  .cb-card-h > :nth-child(n+3) { grid-column: 1 / -1; }
  .cb-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cb-row > label, .cb-row > .cb-l { padding-top: 0; }
}