/* The chart editor's helper popups (COMMAND-991, public/chart-fields; built without a design: POC): the ERD-then-table
   picker, the field editor and a unique key's editor, on the one popup shell (modal.js, size medium) as the record
   picker. On a phone at the bottom of the screen, from 900px in the middle. The picker opens over the field editor. */
.chart-popup-back {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.45);
}
.chart-popup-back:has(.chart-table-picker) { z-index: 31; }
@media (min-width: 900px) { .chart-popup-back { align-items: center; } }
.chart-popup { border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 25%); }
.chart-popup .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.chart-popup h2 { margin: 0; font-size: 1.05rem; }
.chart-popup .actions { display: flex; justify-content: flex-end; gap: 8px; }
.chart-pick-step { margin: 2px 0 0; }
.chart-pick-search { width: 100%; box-sizing: border-box; }
.chart-pick-results { margin-top: 8px; }
.chart-pick-list { list-style: none; margin: 0; padding: 0; }
.chart-pick-option {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .chart-pick-option:hover { background: var(--surface-2); } }
.chart-pick-option[aria-selected='true'] { background: var(--surface-2); }
.chart-pick-clear { color: var(--muted); font-style: italic; }
.chart-pick-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-pick-kind { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-pick-more { flex: none; color: var(--muted); }
.chart-pick-none { margin: 0; padding: 10px; }
.chart-pick-btn { width: 100%; justify-content: flex-start; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-field-ref .chart-pick-btn { margin-top: 2px; }

.chart-field-line { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.chart-field-line .input { width: 100%; box-sizing: border-box; }
.chart-field-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.chart-field-check .muted { flex-basis: 100%; padding-left: 26px; }
.chart-field-lookup { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 10px; }
.chart-field-lookup-to { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.chart-field-open {
  grid-column: 2 / span 3; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 6px; align-items: center;
  padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.chart-field-open > span { padding: 4px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .chart-field-row:hover .chart-field-open > span { text-decoration: underline dotted; } }

.chart-uniques { margin-top: 12px; }
.chart-unique-list { list-style: none; margin: 0 0 6px; padding: 0; }
.chart-unique { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.chart-unique-open { flex: 1 1 auto; text-align: left; }
.chart-unique-fields { list-style: none; margin: 0; padding: 0; }