{% extends "base.html" %}
{% block title %}Factcat — Events{% endblock %}
{% block extra_head %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <script src="/static/catalog.js"></script>
  <script src="/static/save.js"></script>
{% endblock %}
{% block extra_css %}
    main.workspace {
      display: block;
      flex: 1;
      min-height: 0;
    }
    form.workspace-form {
      display: grid;
      grid-template-columns: var(--fc-config-col, 22rem) 0 minmax(0, 1fr);
      height: 100%;
      min-height: 0;
    }
    form.workspace-form.config-collapsed { grid-template-columns: 0 0 minmax(0, 1fr); }
    form.workspace-form.config-collapsed .filters { display: none; }
    .filters { background: var(--fc-snow); padding: 1.25rem; border-right: 1px solid var(--fc-line); overflow-y: auto; min-height: 0; grid-column: 1; grid-row: 1; }
    .col-divider { grid-column: 2; grid-row: 1; }
    .results { grid-column: 3; grid-row: 1; }
    .col-divider {
      cursor: col-resize;
      position: relative;
      width: 9px;
      margin-left: -5px;
      z-index: 25;
      display: flex;
      align-items: center;
      justify-content: center;
      touch-action: none;
      min-height: 0;
    }
    .col-divider::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      transform: translateX(-50%);
      background: var(--fc-ochre);
      opacity: 0;
    }
    .col-divider:hover::before, .col-divider.dragging::before { opacity: 1; }
    form.workspace-form.config-collapsed .col-divider {
      cursor: default;
      width: 1.5rem;
      margin-left: 0;
      justify-content: flex-start;
    }
    form.workspace-form.config-collapsed .col-divider::before { display: none; }
    form.workspace-form.config-collapsed .col-toggle {
      width: 1.35rem;
      height: 3.5rem;
      border-left: 0;
      border-radius: 0 0.5rem 0.5rem 0;
      color: var(--fc-ink);
      border-color: var(--fc-slate);
      box-shadow: 0 1px 4px color-mix(in srgb, var(--fc-ink) 22%, transparent);
    }
    .col-flyout {
      position: absolute;
      left: calc(100% + 0.3rem);
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      padding: 0.25rem;
      background: var(--fc-snow);
      border: 1px solid var(--fc-line);
      border-radius: 0.4rem;
      box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--fc-ink) 18%, transparent);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.12s ease 0.18s;
      z-index: 30;
    }
    .col-divider:hover .col-flyout, .col-flyout:hover {
      opacity: 1;
      pointer-events: auto;
    }
    .col-divider.dragging .col-flyout { opacity: 0; pointer-events: none; }
    .col-flyout button {
      margin: 0;
      padding: 0.3rem;
      width: 1.7rem;
      height: 1.7rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--fc-snow);
      color: var(--fc-slate);
      border: 0;
      border-radius: 0.3rem;
      cursor: pointer;
    }
    .col-flyout button:hover { background: var(--fc-paper); color: var(--fc-ink); }
    .col-flyout button svg { width: 0.9rem; height: 0.9rem; display: block; }
    .col-toggle {
      margin: 0;
      padding: 0;
      position: relative;
      z-index: 1;
      width: 1.05rem;
      height: 2.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--fc-snow);
      color: var(--fc-slate);
      border: 1px solid var(--fc-line);
      border-radius: 0.5rem;
      cursor: pointer;
    }
    .col-toggle:hover { color: var(--fc-ink); border-color: var(--fc-ochre); }
    .col-toggle svg { width: 0.7rem; height: 0.7rem; display: block; }
    .col-toggle .chev-right { display: none; }
    form.config-collapsed .col-toggle .chev-left { display: none; }
    form.config-collapsed .col-toggle .chev-right { display: block; }
    .results-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.45rem 0.85rem;
      padding: 0.2rem 0.35rem 0.45rem;
    }
    .results-toolbar .toolbar-field {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      min-width: 0;
    }
    .results-toolbar .toolbar-field label {
      display: block;
      margin: 0;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--fc-slate);
    }
    .results-toolbar select,
    .results-toolbar input[type="number"],
    .results-toolbar input[type="date"] {
      width: auto;
      margin: 0;
      font-size: 0.8rem;
    }
    .results-toolbar #grain { min-width: 9.75rem; }
    .results-toolbar #range_choice { min-width: 11.5rem; }
    .results-toolbar .toolbar-extras {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.55rem 0.75rem;
      flex: 1 1 auto;
      min-width: 0;
      overflow-x: auto;
    }
    .toolbar-cluster {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.35rem;
      min-width: 0;
    }
    .toolbar-cluster label,
    .toolbar-cluster span {
      display: inline;
      margin: 0;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--fc-ink);
      white-space: nowrap;
    }
    .toolbar-cluster input[type="number"] { width: 4.25rem; }
    .toolbar-cluster input[type="date"] { width: 9.6rem; }
    .toolbar-cluster select { width: auto; }
    .toolbar-cluster input[type="checkbox"] { width: auto; margin: 0; }
    .results-toolbar #custom_kind { min-width: 8.25rem; }
    .results-toolbar #run-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0 auto;
      flex-wrap: wrap;
    }
    .results-toolbar #run-row button { margin: 0; }
    .results {
      display: block;
      padding: 0 0.5rem 0.5rem;
      min-height: 0;
      overflow-y: auto;
      background: var(--fc-paper);
    }
    .results-toolbar {
      position: sticky;
      top: 0;
      z-index: 20;
      background: var(--fc-paper);
      margin: 0 -0.5rem 0.5rem;
      padding: 0.55rem 0.5rem 0.45rem;
      border-bottom: 1px solid var(--fc-line);
    }
    .pane + .pane { margin-top: 0.5rem; }
    /* The divider's own height provides the chart-table gap; when a closed
       pane hides it, the next card supplies the same 0.5rem so every
       inter-card gap is identical in every collapse state. */
    .row-divider[hidden] + .pane { margin-top: 0.5rem; }
    .row-divider {
      height: 0.5rem;
      cursor: row-resize;
      touch-action: none;
      position: relative;
    }
    .row-divider::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2.5rem;
      height: 3px;
      border-radius: 2px;
      transform: translate(-50%, -50%);
      background: var(--fc-ochre);
      opacity: 0;
    }
    .row-divider:hover::after, .row-divider.dragging::after { opacity: 1; }
    .row-divider[hidden] { display: none; }
    .pane-chart:not(.closed) { height: var(--fc-chart-px, 55vh); min-height: 12rem; }
    .pane-table:not(.closed) .pane-body { max-height: 75vh; }
    .pane.closed .pane-body { display: none; }
    .pane-toggle {
      margin: 0 0 0 0.25rem;
      padding: 0.15rem;
      width: 1.5rem;
      height: 1.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      border-radius: 0.25rem;
      color: var(--fc-slate);
      cursor: pointer;
      flex: 0 0 auto;
    }
    .pane-toggle:hover { color: var(--fc-ink); background: var(--fc-paper); }
    .pane-toggle svg { width: 0.85rem; height: 0.85rem; display: block; transition: transform 0.15s ease; }
    .pane.closed .pane-toggle svg { transform: rotate(-90deg); }
    .pane-head h2 { cursor: pointer; }
    .pane {
      background: var(--fc-snow);
      border: 1px solid var(--fc-line);
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .pane h2 {
      margin: 0;
      padding: 0.45rem 0.75rem;
      border-bottom: 1px solid var(--fc-line);
      font-size: 0.7rem;
    }
    .pane-body { flex: 1 1 auto; overflow: auto; padding: 0.75rem; min-height: 0; }
    .pane-sql .pane-body { padding: 0; }
    .empty { color: var(--fc-slate); font-size: 0.85rem; margin: 0; }
    .empty.fail { color: var(--fc-alert); white-space: pre-wrap; }
    .chart-body { position: relative; }
    .chart-body canvas { width: 100% !important; height: 100% !important; }
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      color: var(--fc-slate);
      font-size: 0.9rem;
      text-align: center;
      margin: 0;
    }
    #chart-empty.fail #empty-copy { color: var(--fc-alert); white-space: pre-wrap; }
    .empty-state[hidden], canvas[hidden], .empty-state img[hidden] { display: none; }
    .empty-state img { width: 10rem; height: 10rem; object-fit: contain; margin-bottom: 0.75rem; }
    /* Dots hide via visibility so the centred copy never shifts as they cycle. */
    .run-dots span { visibility: hidden; }
    .run-dots span.on { visibility: visible; }
    @media (prefers-reduced-motion: reduce) {
      #waiting-cat { animation: none; }
      .pane-toggle svg { transition: none; }
    }
    #sql { margin: 0; min-height: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.78rem; }
    code.fc-sql {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 0.92em;
      font-weight: 650;
      background: var(--fc-ochre-wash);
      padding: 0.08em 0.28em;
      border-radius: 0.2rem;
    }
    html[data-vocab="sql"] .series-measure,
    html[data-vocab="sql"] .filter-op,
    html[data-vocab="sql"] #measure {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 0.78rem;
    }
    .summary { font-size: 0.75rem; color: var(--fc-slate); margin: 0 0 0.75rem; }
    .pane-head { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; padding-right: 0.5rem; }
    .pane-head .pane-actions { margin-left: auto; }
    .pane-head h2 { padding-left: 0; }
    .pane-head h2 { border-bottom: none; padding: 0.45rem 0.75rem; }
    .pane-actions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
    .pane-actions button, .pane-actions select { margin: 0; padding: 0.2rem 0.5rem; font-size: 0.7rem; width: auto; }
    .pane-actions label { margin: 0; font-weight: 400; display: flex; align-items: center; gap: 0.25rem; }
    .chart-title {
      flex: 1; min-width: 8rem; margin: 0; padding: 0.35rem 0.75rem;
      border: none; border-bottom: 1px solid var(--fc-line); font-size: 0.8rem;
      font-weight: 600; background: transparent;
    }
    #exact-wrap[hidden] { display: none !important; }
    #run-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
    #run-row button { margin-top: 0; }
    #run-estimate, #table-count { font-size: 0.8rem; color: var(--fc-slate); }
    #run-estimate-wrap { display: inline-flex; align-items: center; gap: 0.4rem; }
    #run-estimate-wrap[hidden] { display: none !important; }
    #run-estimate-bar[hidden] { display: none !important; }
    #run-estimate-bar {
      display: inline-block; width: 3.2rem; height: 0.45rem;
      background: var(--fc-line); border-radius: 2px; overflow: hidden; vertical-align: middle;
    }
    #run-estimate-fill { display: block; height: 100%; width: 0; background: var(--fc-ok); }
    #run-estimate-wrap.warn #run-estimate-fill { background: var(--fc-ochre); }
    #run-estimate-wrap.hot #run-estimate-fill, #run-estimate-wrap.over-cap #run-estimate-fill { background: var(--fc-alert); }
    #run-estimate-wrap.over-cap #run-estimate { color: var(--fc-alert); font-weight: 600; }
    /* Managed tables: cost, reason, next-run cost — in plain words.
       A child of the (wrapping) toolbar, NOT of #run-row: inside the run row
       its text width inflated the row's intrinsic size and wrapped the whole
       row under the date controls, moving Run. As the toolbar's last child
       with a 100% basis it takes its own line and moves nothing. */
    /* One short line after a run that indexed (or failed to): its own
       toolbar line, right-aligned under the chip and Run, capped so long
       text wraps from the right and never spans the toolbar. */
    #run-note { flex: 1 1 100%; display: flex; justify-content: flex-end; margin: 0; }
    #run-note > span { max-width: 32rem; text-align: right; font-size: 0.75rem; color: var(--fc-slate); }
    #run-note.ochre > span { color: var(--fc-ochre-deep); }
    #run-note[hidden] { display: none !important; }
    .format-pop { position: relative; font-size: 0.7rem; }
    .format-pop > summary {
      cursor: pointer; list-style: none; padding: 0.2rem 0.5rem;
      border: 1px solid var(--fc-line); border-radius: 0.2rem;
    }
    .format-pop > summary::-webkit-details-marker { display: none; }
    .format-pop[open] > .format-body {
      position: absolute; right: 0; top: calc(100% + 0.2rem); z-index: 8;
      background: var(--fc-snow); border: 1px solid var(--fc-line); padding: 0.65rem 0.75rem;
      min-width: 14rem; box-shadow: 0 4px 14px rgba(28, 25, 23, .08);
    }
    .format-body label {
      display: flex; justify-content: space-between; align-items: center;
      gap: 0.6rem; margin: 0.4rem 0; font-weight: 400; font-size: 0.7rem;
    }
    .format-body select { width: auto; font-size: 0.7rem; padding: 0.15rem 0.3rem; }
    .icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 1.75rem; height: 1.75rem; padding: 0; margin: 0;
      background: var(--fc-snow); border: 1px solid var(--fc-line); border-radius: 0.25rem;
      cursor: pointer; color: var(--fc-slate);
    }
    .icon-btn svg { width: 0.95rem; height: 0.95rem; display: block; }
    .icon-btn:hover { color: var(--fc-ink); border-color: var(--fc-ochre); }
    .icon-btn.copied { color: var(--fc-ok); border-color: var(--fc-ok); }
    .format-pop > summary.icon-btn { list-style: none; }
    .format-pop > summary.icon-btn::-webkit-details-marker { display: none; }
    .format-pop[hidden] { display: none !important; }
    /* One geometry for every icon control in a pane head. Outranks both
       ".pane-actions button" (hits copy buttons) and ".format-pop > summary"
       (hits download/format summaries), which disagree with .icon-btn. */
    .pane-actions button.icon-btn,
    .pane-actions .format-pop > summary.icon-btn {
      box-sizing: border-box;
      width: 1.75rem;
      height: 1.75rem;
      padding: 0;
      border-radius: 0.25rem;
    }
    /* The global `details` rule adds margin-top: 0.75rem; inside a centred
       flex row that rides the popover 6px below its neighbours. */
    .pane-actions details { margin: 0; }
    /* Export chrome is always visible; no content = disabled, never hidden. */
    .icon-btn:disabled { color: var(--fc-slate); }
    .icon-btn:disabled:hover { color: var(--fc-slate); border-color: var(--fc-line); }
    .format-pop.disabled > summary {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
    }
    .format-pop[open] > .export-body {
      position: absolute; right: 0; top: calc(100% + 0.2rem); z-index: 8;
      background: var(--fc-snow); border: 1px solid var(--fc-line); padding: 0.25rem;
      min-width: 11rem; box-shadow: 0 4px 14px rgba(28, 25, 23, .08);
      display: flex; flex-direction: column; gap: 0.1rem;
    }
    .export-body button {
      margin: 0; padding: 0.35rem 0.6rem; width: 100%;
      background: none; border: 0; border-radius: 0.25rem;
      color: var(--fc-ink); font-size: 0.72rem; text-align: left; cursor: pointer;
    }
    .export-body button:hover { background: var(--fc-paper); }
    .pane-limit {
      display: flex; align-items: center; gap: 0.3rem; margin: 0;
      font-size: 0.7rem; font-weight: 400; color: var(--fc-slate);
    }
    .pane-limit input { width: 3.5rem; padding: 0.15rem 0.3rem; font-size: 0.7rem; }
    #cap-override {
      display: flex; align-items: center; gap: 0.35rem;
      font-size: 0.75rem; color: var(--fc-alert);
    }
    #cap-override[hidden] { display: none !important; }
    #result-table { table-layout: fixed; width: 100%; }
    #result-table th {
      position: relative; cursor: pointer; user-select: none; min-width: 4rem;
      border-right: 1px solid var(--fc-line); padding-right: 0.9rem;
    }
    #result-table th .sort {
      font-size: 0.65rem; color: var(--fc-slate); margin-left: 0.25rem;
    }
    #result-table th.sorted .sort { color: var(--fc-ink); }
    #result-table th .grip {
      position: absolute; right: 0; top: 0; width: 8px; height: 100%;
      cursor: col-resize;
      background: linear-gradient(to right, transparent 2px, var(--fc-slate) 2px, var(--fc-slate) 3px, transparent 3px);
    }
    #result-table th .grip:hover {
      background: var(--fc-ochre);
    }
    .range-row { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.35rem; }
    .range-row[hidden],
    .toolbar-cluster[hidden],
    #range-include[hidden], #custom-range[hidden],
    #custom-absolute[hidden], #custom-relative[hidden],
    #range_n_unit_select[hidden], #rel_unit_select[hidden],
    #range_n_unit[hidden], #rel_unit_label[hidden] { display: none !important; }
    .range-row input[type="number"] { width: 4.5rem; }
    #breakdown-extra[hidden] { display: none !important; }
    #breakdown-extra .range-row { margin-top: 0.5rem; }
    .fc-plus {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.65rem;
      height: 1.65rem;
      margin: 0;
      padding: 0;
      background: var(--fc-snow);
      color: var(--fc-ochre-deep);
      border: 1px solid var(--fc-line);
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 1px 0 rgba(28, 25, 23, 0.06);
    }
    .fc-plus:hover {
      border-color: var(--fc-ochre);
      color: var(--fc-ink);
      background: var(--fc-paper);
    }
    .fc-plus svg { width: 0.82rem; height: 0.82rem; display: block; }
    .fc-plus-row {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0.3rem 0 0.05rem;
    }
    .event-group-members .fc-plus-row { margin: 0.2rem 0; }
    .fc-or {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      margin: 0.1rem 0.4rem;
      color: var(--fc-slate);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      user-select: none;
    }
    .fc-or::before, .fc-or::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--fc-line);
    }
    #add-breakdown-row[hidden], #add-event-row[hidden], .fc-plus-row[hidden] { display: none !important; }
    .breakdown-slot-head { margin: 0.65rem 0 0.2rem; }
    .breakdown-slot-head label { margin: 0; }
    .breakdown-slot-row,
    .series-bd-slot:not(:first-child) .series-bd-row {
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }
    .breakdown-slot-row select,
    .series-bd-slot:not(:first-child) .series-bd-row select {
      flex: 1;
      min-width: 0;
      width: auto;
      margin: 0;
    }
    .breakdown-slot-row .linkish,
    .series-bd-slot:not(:first-child) .series-bd-row .linkish {
      margin: 0;
      flex: 0 0 auto;
    }
    /* Same card surface as .event-card (border/background/padding values
       reused verbatim); nested series slots take the .event-group-members
       .event-card snow background, the shipped card-in-card treatment. */
    #breakdown-chart .breakdown-slot, .series-bd-slot {
      border: 1px solid var(--fc-line); background: var(--fc-paper);
      padding: 0.5rem 0.55rem 0.4rem; margin: 0 0 0.5rem;
      min-width: 0;
    }
    /* The toggle row above sits flush (0px) otherwise — invisible before
       the cards drew a border there. Same 0.5rem rhythm as the seams. */
    #breakdown-chart .breakdown-slot[data-slot="0"] { margin-top: 0.5rem; }
    .series-bd-slot { background: var(--fc-snow); margin: 0 0 0.35rem; }
    .bd-value-controls { margin-top: 0.3rem; }
    .bd-value-controls[hidden], .bd-fill-wrap[hidden],
    .bd-fill-expr-wrap[hidden], .bd-value-pair[hidden],
    #bd-null-nudge[hidden] { display: none !important; }
    .bd-value-row {
      display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: flex-start;
    }
    .bd-value-pair {
      display: flex; flex-direction: column; flex: 1 1 9rem; min-width: 7rem;
    }
    /* Two-class chains so these beat .series-bd label (0,1,1, later in the
       file); descendant (not >) so the SQL-expression label inside
       .bd-fill-expr-wrap is owned here too. */
    .bd-value-controls .bd-value-pair label,
    .bd-value-controls .bd-fill-wrap label,
    .bd-value-controls .bd-fill-expr-wrap label {
      margin: 0; font-size: 0.7rem; font-weight: 600;
    }
    .bd-value-pair select { width: auto; font-size: 0.75rem; margin: 0; }
    .bd-fill-wrap { margin-top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
    .bd-fill-wrap select, .bd-fill-wrap input {
      /* min-width 0 lets flex shrink the select below its widest option
         (long event names) so a 256px column never scrolls sideways. */
      width: auto; flex: 1 1 8rem; min-width: 0; font-size: 0.75rem; margin: 0;
    }
    /* Column flex so the label and input stretch to the wrap's width; the
       input opts back out of the row rule above (flex-basis would become
       HEIGHT in a column context) and takes the full line. */
    .bd-fill-expr-wrap { flex: 1 1 100%; display: flex; flex-direction: column; }
    /* Two-class chain: beats .bd-fill-wrap input on specificity, not
       source order — the same convention as the label chains above. */
    .bd-fill-wrap .bd-fill-expr-wrap input { flex: 0 0 auto; width: 100%; }
    #bd-null-nudge { margin-top: 0.35rem; }
    #bd-null-nudge .linkish { margin-left: 0; }
    .series-bd .remove-breakdown { margin-left: 0.4rem; }
    #of-wrap[hidden] { display: none !important; }
    /* Section panels (non-collapsing; heads are static — no pane classes,
       whose head click listener and margins must not reach this column). */
    .cfg-section {
      border: 1px solid var(--fc-line); background: var(--fc-snow);
      margin: 0 0 .75rem;
    }
    .cfg-section-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: .75rem; padding: .4rem .55rem;
      border-bottom: 1px solid var(--fc-line);
      font-size: .7rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: .04em; color: var(--fc-ink-soft);
    }
    .cfg-section-head .linkish { text-transform: none; letter-spacing: 0; }
    /* The head must not re-case folded SQL against the user's sql_case
       preference. */
    .cfg-section-head code.fc-sql { text-transform: none; letter-spacing: 0; }
    .cfg-section-body { padding: .5rem .55rem .45rem; min-width: 0; }
    .cfg-section-body > .row:first-child { margin-top: 0; }
    /* Seams: adjacent vertical margins COLLAPSE (the larger wins, they do
       not add). Exact hidden (the first-run default): section bottom
       .75rem meets the next section = 12px. Exact shown: .75rem meets
       #exact-wrap's .75rem on both sides = 12px above and below. The
       inner .row's global margin-top is zeroed so it cannot collapse
       through and silently become the seam's owner. */
    #exact-wrap { margin: .75rem 0; }
    #exact-wrap .row { margin-top: 0; }
    .cfg-section-title { min-width: 0; }
    .cfg-section-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex: 0 0 auto;
    }
    .cfg-section-actions .linkish { margin-left: 0; }
    .refresh-split {
      display: inline-flex;
      align-items: center;
    }
    .refresh-split .refresh-more {
      margin-left: 0.35rem;
      padding-left: 0.35rem;
      border-left: 1px solid var(--fc-line);
      text-decoration: none;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }
    .refresh-split .refresh-more svg {
      width: 0.7rem;
      height: 0.7rem;
      display: block;
    }
    .refresh-split .refresh-more[aria-expanded="true"] svg { transform: rotate(180deg); }
    #find-event[hidden], #find-event-panel[hidden],
    #event-names-snapshot[hidden], #event-names-status[hidden],
    #event-names-fallback[hidden] {
      display: none !important;
    }
    #event-names-fallback { margin: 0 0 0.35rem; }
    #find-event-panel {
      margin: 0 0 0.45rem auto;
      padding: 0.15rem 0 0.25rem;
      width: max-content;
      max-width: 100%;
      text-align: left;
    }
    .find-event-opt {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0.25rem 0;
      border: 0;
      background: none;
      color: var(--fc-ochre-deep);
      font-size: 0.75rem;
      text-align: left;
      cursor: pointer;
    }
    .find-event-opt:hover { text-decoration: underline; }
    .find-event-opt .hint { margin: 0.1rem 0 0; }
    .catalog-status {
      font-weight: 400;
      color: var(--fc-slate);
      font-size: 0.7rem;
      margin: 0 0 0.35rem;
    }
    #event-names-snapshot { margin: 0 0 0.35rem; }
    .fc-plus-labeled {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      width: 100%;
      margin: 0.35rem 0 0;
      padding: 0;
      background: none;
      border: none;
      color: var(--fc-ochre-deep);
      font: inherit;
      font-size: 0.75rem;
      font-weight: 500;
      cursor: pointer;
    }
    .fc-plus-labeled .fc-plus {
      cursor: inherit;
      box-shadow: none;
    }
    .fc-plus-labeled:hover { color: var(--fc-ink); }
    .fc-plus-labeled:hover .fc-plus {
      border-color: var(--fc-ochre);
      color: var(--fc-ink);
      background: var(--fc-paper);
    }
    .event-card, .event-group {
      border: 1px solid var(--fc-line); background: var(--fc-paper);
      padding: 0.5rem 0.55rem 0.4rem; margin: 0 0 0.5rem;
    }
    .event-group { padding-bottom: 0.5rem; }
    .event-card-head, .event-group-head {
      display: flex; align-items: center; gap: 0.35rem;
    }
    .event-card-head .event-card-name { flex: 1; margin: 0; min-width: 0; }
    .event-card-head .series-measure,
    .event-group-head .series-measure {
      flex: 0 1 11rem; width: auto; min-width: 7rem; margin: 0; font-size: 0.8rem;
    }
    .event-group-title { font-size: 0.75rem; font-weight: 600; color: var(--fc-slate); flex: 0 0 auto; }
    .event-card-filters {
      margin: 0.2rem 0 0;
    }
    .event-card-filters:has(.filter-line) {
      margin-left: 0.15rem;
      padding-left: 0.55rem;
      border-left: 2px solid var(--fc-line);
    }
    .filter-line {
      display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
      margin-top: 0.3rem;
    }
    .filter-line select, .filter-line input {
      width: auto; flex: 1 1 5.5rem; font-size: 0.75rem; margin: 0;
    }
    .filter-line .filter-json[hidden], .filter-line .filter-expr[hidden],
    .filter-line .filter-op[hidden], .filter-line .filter-value[hidden],
    .filter-line .filter-value-to[hidden], .filter-line .filter-value-time[hidden],
    .filter-line .filter-value-to-time[hidden], .filter-line .filter-case[hidden],
    .filter-line .filter-pills[hidden], .filter-line .filter-part[hidden],
    .filter-line .filter-enum[hidden],
    .filter-line .filter-period[hidden], .filter-line .filter-period-to[hidden] {
      display: none !important;
    }
    .filter-period, .filter-period-to {
      display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
    }
    .filter-week-n, .filter-week-n-to { width: 4.2rem; flex: 0 0 4.2rem; }
    .filter-quarter-q, .filter-quarter-q-to { width: auto; flex: 0 0 auto; }
    .filter-part { flex: 0 1 8.5rem; min-width: 7rem; }
    .filter-pills {
      display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center;
      flex: 1 1 12rem; min-width: 8rem;
      border: 1px solid var(--fc-line); background: var(--fc-snow);
      padding: 0.15rem 0.3rem; min-height: 1.75rem;
    }
    .filter-pill {
      display: inline-flex; align-items: center; gap: 0.15rem;
      max-width: 12rem; padding: 0.05rem 0.15rem 0.05rem 0.4rem;
      background: var(--fc-paper); border: 1px solid var(--fc-line);
      font-size: 0.7rem; line-height: 1.2;
    }
    .filter-pill > span {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .filter-pill button {
      background: none; border: none; padding: 0 0.15rem; margin: 0;
      cursor: pointer; color: var(--fc-slate); font-size: 0.85rem; line-height: 1;
    }
    .filter-pill button:hover { color: var(--fc-ink); }
    .filter-line .filter-pills-input {
      flex: 1 1 5rem; min-width: 5rem; width: auto; margin: 0; padding: 0.15rem 0;
      border: none; background: transparent; font-size: 0.75rem;
    }
    .filter-line .filter-pills-input:focus { outline: none; }
    .filter-case {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-size: 0.7rem; font-weight: 400; margin: 0; flex: 0 0 auto;
    }
    .filter-case input { width: auto; margin: 0; flex: none; }
    .filter-line input[type="date"], .filter-line input[type="time"],
    .filter-line input[type="number"] { flex: 0 1 8rem; }
    .event-group-members .event-card {
      background: var(--fc-snow); margin: 0;
    }
    .card-actions { margin-top: 0.35rem; }
    .add-card-filter { margin: 0.2rem 0 0 0; }
    .series-bd { margin-top: 0.45rem; }
    .series-bd[hidden], #breakdown-chart[hidden] { display: none !important; }
    .series-bd label { font-size: 0.75rem; font-weight: 400; }
    #chart-measure-template[hidden] { display: none !important; }
    .series-of { margin: 0.35rem 0 0; }
    .series-of[hidden] { display: none !important; }
    .series-of-json[hidden], .series-of-expr[hidden] { display: none !important; }
    .series-bd-json[hidden], .series-bd-expr[hidden] { display: none !important; }
    #event_value-wrap[hidden] { display: none !important; }
    #top_n { width: 4.5rem; }
    .incomplete-note { font-size: 0.75rem; color: var(--fc-slate); margin: 0.35rem 0 0; }
    .stale-note {
      font-size: 0.75rem; color: var(--fc-ochre-deep); margin: 0 0 0.5rem;
    }
    .stale-note[hidden] { display: none !important; }
    #result-table tr.incomplete td { color: var(--fc-slate); font-style: italic; }
    #custom-snap-hint { margin: 0.35rem 0 0; }
    .event-card-filters .add-card-filter { margin: 0.2rem 0 0 0; }
{% endblock %}
{% block body %}
<main class="workspace">
  <form id="f" class="workspace-form{% if config.layout_config_collapsed %} config-collapsed{% endif %}"{% if config.layout_config_px %} style="--fc-config-col: {{ config.layout_config_px }}px"{% endif %}>
  <div class="filters">
    <h1>Events</h1>
    {% if not mapping_ready %}
    <div id="needs-setup" class="callout">
      <p>Map a table on <a href="/setup">Setup</a> before Events can run.</p>
    </div>
    {% endif %}
    <p class="summary"{% if not mapping_ready %} hidden{% endif %}>
      {{ config.table }}
      · {{ config.entity_label or "User" }}
      ({{ config.entity }})
      · {{ config.event_time }}
    </p>

    <input type="hidden" name="kind" id="kind" value="{{ config.kind or 'bigquery' }}">
    <input type="hidden" name="project" id="project" value="{{ config.project }}">
    <input type="hidden" name="data_project" id="data_project" value="{{ config.data_project }}">
    <input type="hidden" name="location" id="location" value="{{ config.location }}">
    <input type="hidden" name="credentials" id="credentials" value="{{ config.credentials }}">
    <input type="hidden" name="account" id="account" value="{{ config.account }}">
    <input type="hidden" name="user" id="user" value="{{ config.user }}">
    <input type="hidden" name="warehouse" id="warehouse" value="{{ config.warehouse }}">
    <input type="hidden" name="database" id="database" value="{{ config.database }}">
    <input type="hidden" name="schema" id="schema" value="{{ config.schema }}">
    <input type="hidden" name="role" id="role" value="{{ config.role }}">
    <input type="hidden" name="private_key_path" id="private_key_path" value="{{ config.private_key_path }}">
    <input type="hidden" name="snowflake_auth" id="snowflake_auth" value="{{ config.snowflake_auth or 'key_pair' }}">
    <input type="hidden" name="table" id="table" value="{{ config.table }}">
    <input type="hidden" name="dataset" id="dataset" value="{{ config.dataset }}">
    <input type="hidden" name="table_name" id="table_name" value="{{ config.table_name }}">
    <input type="hidden" name="entity" id="entity" value="{{ config.entity }}">
    <input type="hidden" name="entity_label" id="entity_label" value="{{ config.entity_label }}">
    <input type="hidden" name="entity_label_plural" id="entity_label_plural" value="{{ config.entity_label_plural or 'Users' }}">
    <input type="hidden" name="event_time" id="event_time" value="{{ config.event_time }}">
    <input type="hidden" name="event_column" id="event_column" value="{{ config.event_column }}">
    <!-- The report builder's own calendar, from Preferences: these change the
         SQL, so they ride every request rather than being read from the
         project file. -->
    <input type="hidden" name="week_start" id="week_start" value="{{ prefs.week_start or 'monday' }}">
    <input type="hidden" name="reporting_timezone" id="reporting_timezone" value="{{ prefs.reporting_timezone or 'UTC' }}">
    <input type="hidden" name="event_time_tz" id="event_time_tz" value="{{ config.event_time_tz or 'utc' }}">
    <input type="hidden" name="event_time_epoch" id="event_time_epoch" value="{{ config.event_time_epoch or '' }}">
    <input type="hidden" name="thousand_sep" id="thousand_sep" value="{{ prefs.thousand_sep or 'comma' }}">
    <input type="hidden" name="decimal_sep" id="decimal_sep" value="{{ prefs.decimal_sep or 'period' }}">
    <input type="hidden" name="bytes_cap_gb" id="bytes_cap_gb" value="{{ config.bytes_cap_gb if config.bytes_cap_gb is not none else 10 }}">
    <input type="hidden" name="query_row_limit" id="query_row_limit" value="{{ config.query_row_limit or 1000000 }}">
    <input type="hidden" name="write_project" id="write_project" value="{{ config.write_project or '' }}">
    <input type="hidden" name="write_dataset" id="write_dataset" value="{{ config.write_dataset or '' }}">
    <input type="hidden" name="write_schema" id="write_schema" value="{{ config.write_schema or '' }}">
    <input type="hidden" name="write_database" id="write_database" value="{{ config.write_database or '' }}">

    <section class="cfg-section" id="events-band">
      <div class="cfg-section-head">
        <span class="cfg-section-title">Event series <span id="event_value-loading" class="loading" hidden aria-label="Loading"></span></span>
        <span id="event_value" hidden></span>
        <input type="hidden" name="catalog_lookback_days" id="catalog_lookback_days" value="{{ config.catalog_lookback_days if config.catalog_lookback_days is not none else 90 }}">
        <span class="cfg-section-actions">
        <span class="refresh-split">
          <button type="button" id="refresh-events" class="linkish">Refresh event names</button>
          <button type="button" class="linkish refresh-more" id="find-event" hidden aria-haspopup="true" aria-expanded="false" aria-label="Look further back for event names">
            <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2.5 4.5L6 8l3.5-3.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
        </span>
        </span>
      </div>
      <div class="cfg-section-body">
      <p id="event-names-status" class="catalog-status" hidden></p>
      <p id="event-names-snapshot" class="hint" hidden>This list is a snapshot. Refresh rebuilds it.</p>
      <p id="event-names-fallback" class="hint" hidden>Could not use the event-name snapshot in the write destination — ran a lookback scan instead. Check permissions on fc_event_names.</p>
      <div id="find-event-panel" hidden>
        <div id="find-event-options"></div>
      </div>
      <div id="event-cards"></div>
      <div id="add-event-row">
        <button type="button" id="add-event" class="fc-plus-labeled" title="Add series" aria-label="Add series">
          <span class="fc-plus" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
          </span>
          Add series
        </button>
      </div>
      </div>
    </section>

    <div id="chart-measure-template" hidden>
    <label for="measure">Measure</label>
    <select name="measure" id="measure">
      <optgroup label="Event">
        <option value="total" title="Count of event rows in the bucket" {% if config.measure == "total" %}selected{% endif %}>{{ filter_ui.chrome.volume | sql_plain }}</option>
        <option value="uniques" title="Count distinct of the mapped entity id" {% if (config.on != "property") and (config.measure == "uniques" or not config.measure) %}selected{% endif %}>{% if filter_ui.vocab == "sql" %}{{ filter_ui.chrome.unique | sql_plain }}{% else %}{{ filter_ui.chrome.unique.replace("{plural}", config.entity_label_plural or "Users") }}{% endif %}</option>
        <option value="average" title="Volume divided by unique entities" {% if config.on != "property" and config.measure == "average" %}selected{% endif %}>{% if filter_ui.vocab == "sql" %}{{ filter_ui.chrome.average_per | sql_plain }}{% else %}{{ filter_ui.chrome.average_per.replace("{singular}", config.entity_label or "User") }}{% endif %}</option>
      </optgroup>
      <optgroup label="Property value">
        <option value="sum" title="Sum of a numeric column" {% if config.measure == "sum" %}selected{% endif %}>{{ filter_ui.chrome.property_sum | sql_plain }}</option>
        <option value="property_average" title="Average of a numeric column" {% if config.on == "property" and config.measure == "average" %}selected{% endif %}>{{ filter_ui.chrome.property_average | sql_plain }}</option>
        <option value="median" title="Median of a numeric column" {% if config.measure == "median" %}selected{% endif %}>{{ filter_ui.chrome.property_median | sql_plain }}</option>
        <option value="distinct" title="Mean distinct values of a column per entity" {% if config.measure == "distinct" %}selected{% endif %}>{% if filter_ui.vocab == "sql" %}{{ filter_ui.chrome.property_distinct | sql_plain }}{% else %}{{ filter_ui.chrome.property_distinct.replace("{singular}", config.entity_label or "User") }}{% endif %}</option>
      </optgroup>
    </select>
    <input type="hidden" name="on" id="on" value="{{ config.on or 'events' }}">
    <div id="of-wrap" {% if config.on != "property" %}hidden{% endif %}>
      <label for="of_column">{{ filter_ui.chrome.of | sql_chrome }} <span id="of_column-loading" class="loading" hidden aria-label="Loading"></span>
        <button type="button" id="refresh-of" class="linkish">Refresh list</button>
      </label>
      <select name="of_column" id="of_column"></select>
      <div id="of-json-wrap" hidden>
        <label for="of_json_key">JSON key</label>
        <input id="of_json_key" name="of_json_key" autocomplete="off" value="{{ config.of_json_key }}" placeholder="plan">
        <span class="hint">Dotted path in this JSON column (plan or user.plan).</span>
      </div>
      <div id="of-expr-wrap" hidden>
        <label for="of_expr">{{ filter_ui.chrome.sql_expr | sql_chrome }}</label>
        <input id="of_expr" name="of_expr" autocomplete="off" value="{{ config.of_expr }}" placeholder="revenue">
        <span class="hint">Fills of=. Sum / Average / Median need a number. Distinct also allows STRING.</span>
      </div>
      <span class="hint" id="of-hint">Unused event types leave this column null. Pick the event that carries it (for example purchase for revenue).</span>
    </div>
    </div>
    <div id="exact-wrap">
      <div class="row">
        <input name="exact" type="checkbox" id="exact" {% if config.exact %}checked{% endif %} style="width:auto">
        <label for="exact" id="exact-label" style="margin:0">Exact unique counts</label>
      </div>
      <span class="hint" id="exact-hint">Same bytes scanned; more CPU. Off is HyperLogLog (faster).</span>
    </div>

    <section class="cfg-section" id="breakdown-band">
    <div class="cfg-section-head">
      <span class="cfg-section-title">{{ filter_ui.chrome.bd_section | sql_chrome }} <span id="breakdown_column-loading" class="loading" hidden aria-label="Loading"></span></span>
      <span class="cfg-section-actions">
        <button type="button" id="refresh-columns" class="linkish">Refresh list</button>
      </span>
    </div>
    <div class="cfg-section-body">
    <div class="row">
      <input name="breakdown_by_series" type="checkbox" id="breakdown_by_series" {% if config.breakdown_by_series %}checked{% endif %} style="width:auto">
      <label for="breakdown_by_series" style="margin:0">{{ filter_ui.chrome.breakdown_each | sql_chrome }}</label>
    </div>
    <div id="breakdown-chart">
    <div class="breakdown-slot" data-slot="0">
    <div class="breakdown-slot-head">
      <label for="breakdown_column">{{ filter_ui.chrome.breakdown | sql_chrome }}</label>
    </div>
    <select name="breakdown_column" id="breakdown_column"></select>
    <div id="breakdown-json-wrap" hidden>
      <label for="breakdown_json_key">JSON key</label>
      <input id="breakdown_json_key" name="breakdown_json_key" autocomplete="off" value="{{ config.breakdown_json_key }}" placeholder="plan">
      <span class="hint">Dotted path in this JSON column (plan or user.plan).</span>
    </div>
    <div id="breakdown-expr-wrap" hidden>
      <label for="breakdown_expr">{{ filter_ui.chrome.sql_expr | sql_chrome }}</label>
      <input id="breakdown_expr" name="breakdown_expr" autocomplete="off" value="{{ config.breakdown_expr }}" placeholder="country">
      <span class="hint">Fills the spec expression. Does not replace it with a property store.</span>
    </div>
    </div>
    <div id="breakdown-more"></div>
    <div class="fc-plus-row" id="add-breakdown-row">
      <button type="button" id="add-breakdown" class="fc-plus" title="{{ filter_ui.chrome.add_breakdown | sql_plain }}" aria-label="{{ filter_ui.chrome.add_breakdown | sql_plain }}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
      </button>
    </div>
    </div>
    <div id="breakdown-extra" hidden>
      <span class="hint" id="breakdown-hint">Top N keeps the biggest groups and folds the rest into (other). (null) stays its own group.</span>
      <div class="range-row">
        <label for="top_n" style="margin:0">Top N</label>
        <input id="top_n" name="top_n" type="number" min="1" max="1000" value="{{ config.top_n or 8 }}">
        <input name="include_other" type="checkbox" id="include_other" {% if config.include_other or config.include_other is not false %}checked{% endif %} style="width:auto">
        <label for="include_other" style="margin:0">Show (other)</label>
      </div>
      <div id="bd-null-nudge" hidden>
        <span class="hint" id="bd-null-nudge-copy"></span>
        <button type="button" class="linkish" id="bd-null-nudge-fix">Use last known at the event</button>
      </div>
    </div>
    </div>
    </section>
    <p id="error"></p>
  </div>
  <div id="col-divider" class="col-divider" role="separator" aria-orientation="vertical" aria-label="Resize the query panel">
    <button type="button" id="config-toggle" class="col-toggle" aria-expanded="{{ 'false' if config.layout_config_collapsed else 'true' }}" aria-label="{{ 'Expand the query panel' if config.layout_config_collapsed else 'Collapse the query panel' }}">
      <svg class="chev-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
      <svg class="chev-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
    </button>
    <div class="col-flyout" role="group" aria-label="Query panel width">
      <button type="button" id="config-collapse" title="Collapse" aria-label="Collapse the query panel">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>
      </button>
      <button type="button" id="config-default" title="Default width" aria-label="Default query panel width">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="7" height="16" rx="1"/><rect x="13" y="4" width="8" height="16" rx="1"/></svg>
      </button>
      <button type="button" id="config-wide" title="Wide" aria-label="Wide query panel">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
      </button>
    </div>
  </div>
  <div class="results"{% if config.layout_chart_px %} style="--fc-chart-px: {{ config.layout_chart_px }}px"{% endif %}>
    <div class="results-toolbar">
      <div class="toolbar-field">
        <label for="grain">Time grain</label>
        <select name="grain" id="grain">
          <option value="day" {% if config.grain == "day" or not config.grain %}selected{% endif %}>Day</option>
          <option value="week" {% if config.grain == "week" %}selected{% endif %}>Week</option>
          <option value="month" {% if config.grain == "month" %}selected{% endif %}>Month</option>
          <option value="hour" {% if config.grain == "hour" %}selected{% endif %}>Hour</option>
          <option value="day_of_week" {% if config.grain == "day_of_week" %}selected{% endif %}>Day of week</option>
          <option value="hour_of_day" {% if config.grain == "hour_of_day" %}selected{% endif %}>Hour of day</option>
        </select>
      </div>
      <div class="toolbar-field">
        <label for="range_choice">Date range</label>
        <select id="range_choice"></select>
      </div>
      <input type="hidden" name="range_mode" id="range_mode" value="{{ config.range_mode or 'last' }}">
      <input type="hidden" name="range_unit" id="range_unit" value="{{ config.range_unit or 'day' }}">
      <div class="toolbar-extras">
        <div id="range-last" class="toolbar-cluster" hidden>
          <span>Last</span>
          <input id="range_n" name="range_n" type="number" min="1" max="3650" value="{{ config.range_n or 30 }}">
          <select id="range_n_unit_select" aria-label="Last-N unit" hidden>
            <option value="day">days</option>
            <option value="week">weeks</option>
            <option value="month">months</option>
            <option value="quarter">quarters</option>
            <option value="year">years</option>
          </select>
          <span id="range_n_unit">{% if config.grain == "week" %}weeks{% elif config.grain == "month" %}months{% else %}days{% endif %}</span>
        </div>
        <div id="range-include" class="toolbar-cluster" hidden>
          <input name="include_current" type="checkbox" id="include_current" {% if config.include_current %}checked{% endif %}>
          <label for="include_current" id="include_current_label">Include today</label>
        </div>
        <div id="custom-range" class="toolbar-cluster" hidden>
          <select id="custom_kind" name="custom_kind" aria-label="Custom range kind">
            <option value="absolute" {% if config.custom_kind != "relative" %}selected{% endif %}>Specific dates</option>
            <option value="relative" {% if config.custom_kind == "relative" %}selected{% endif %}>Relative</option>
          </select>
          <div id="custom-absolute" class="toolbar-cluster">
            <label for="start_date">From</label>
            <input id="start_date" name="start_date" type="date" value="{{ config.start_date }}">
            <label for="end_date">to</label>
            <input id="end_date" name="end_date" type="date" value="{{ config.end_date }}">
            <span id="custom-snap-hint" hidden></span>
          </div>
          <div id="custom-relative" class="toolbar-cluster" hidden title="0 is this period">
            <label for="rel_start_n">From</label>
            <input id="rel_start_n" name="rel_start_n" type="number" min="0" max="3650" value="{{ config.rel_start_n or 12 }}">
            <span>to</span>
            <input id="rel_end_n" name="rel_end_n" type="number" min="0" max="3650" value="{{ config.rel_end_n if config.rel_end_n is not none else 0 }}">
            <select id="rel_unit_select" aria-label="Relative unit" hidden>
              <option value="day">days ago</option>
              <option value="week">weeks ago</option>
              <option value="month">months ago</option>
              <option value="quarter">quarters ago</option>
              <option value="year">years ago</option>
            </select>
            <span id="rel_unit_label">days ago</span>
          </div>
        </div>
      </div>
      <div id="run-row">
        <span id="run-estimate-wrap" hidden>
          <span id="run-estimate-bar" aria-hidden="true"><span id="run-estimate-fill"></span></span>
          <span id="run-estimate"></span>
        </span>
        <div id="cap-override" hidden>
          <input name="override_cap" type="checkbox" id="override_cap" style="width:auto">
          <label for="override_cap" style="margin:0">Override cap</label>
        </div>
        <button type="submit" id="run"{% if not mapping_ready %} disabled{% endif %}>Run</button>
      </div>
      <p id="run-note" hidden><span></span></p>
    </div>
    <section class="pane pane-chart{% if not config.pane_chart_open %} closed{% endif %}">
      <div class="pane-head">
        <button type="button" class="pane-toggle" data-pane="chart" aria-expanded="{{ 'true' if config.pane_chart_open else 'false' }}" aria-controls="chart-pane-body" title="{{ 'Collapse chart' if config.pane_chart_open else 'Expand chart' }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <input id="chart-title" class="chart-title" name="chart_title" value="{{ config.chart_title }}" placeholder="Chart title" spellcheck="false">
        <button type="button" id="reset-title" class="icon-btn" title="Reset title" aria-label="Reset title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 12a9 9 0 0 1 15.36-6.36L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15.36 6.36L3 16"/><path d="M3 21v-5h5"/></svg>
        </button>
        <input type="hidden" id="chart_title_locked" value="{{ 'true' if config.chart_title_locked else 'false' }}">
        <span class="pane-actions">
          <select id="chart_type" name="chart_type" title="Auto: bar for 1–2 points, otherwise line">
            <option value="auto" {% if config.chart_type == "auto" or not config.chart_type %}selected{% endif %}>Auto</option>
            <option value="line" {% if config.chart_type == "line" %}selected{% endif %}>Line</option>
            <option value="area" {% if config.chart_type == "area" %}selected{% endif %}>Area</option>
            <option value="bar" {% if config.chart_type == "bar" %}selected{% endif %}>Bar</option>
          </select>
          <details class="format-pop" id="format-pop">
            <summary class="icon-btn" title="Format chart" aria-label="Format chart">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M2 14h4M10 8h4M18 16h4"/></svg>
            </summary>
            <div class="format-body">
              <label>Values
                <select id="chart_value_format" name="chart_value_format">
                  <option value="auto" {% if config.chart_value_format == "auto" or not config.chart_value_format %}selected{% endif %}>Auto</option>
                  <option value="int" {% if config.chart_value_format == "int" %}selected{% endif %}>Integer</option>
                  <option value="dp1" {% if config.chart_value_format == "dp1" %}selected{% endif %}>1 decimal</option>
                  <option value="dp2" {% if config.chart_value_format == "dp2" %}selected{% endif %}>2 decimals</option>
                  <option value="compact" {% if config.chart_value_format == "compact" %}selected{% endif %}>Compact (1.2k)</option>
                  <option value="sci" {% if config.chart_value_format == "sci" %}selected{% endif %}>Scientific</option>
                </select>
              </label>
              <label>Data labels <input id="chart_labels" name="chart_labels" type="checkbox" {% if config.chart_labels %}checked{% endif %} style="width:auto"></label>
              <label>Grid
                <select id="chart_grid" name="chart_grid">
                  <option value="off" {% if config.chart_grid == "off" %}selected{% endif %}>Off</option>
                  <option value="major" {% if config.chart_grid == "major" or not config.chart_grid %}selected{% endif %}>Major</option>
                  <option value="minor" {% if config.chart_grid == "minor" %}selected{% endif %}>Major and minor</option>
                </select>
              </label>
            </div>
          </details>
          <button type="button" id="copy-chart" class="icon-btn" disabled title="Copy chart" aria-label="Copy chart">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
          </button>
          <details class="format-pop disabled" id="chart-export">
            <summary class="icon-btn" title="Download chart" aria-label="Download chart">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 3v12"/><path d="m8 11 4 4 4-4"/><path d="M4 19h16"/></svg>
            </summary>
            <div class="export-body">
              <button type="button" data-chart-export="png">PNG</button>
              <button type="button" data-chart-export="png2x">PNG 2×</button>
              <button type="button" data-chart-export="png2xt">PNG 2× transparent</button>
            </div>
          </details>
        </span>
      </div>
      <div class="pane-body chart-body" id="chart-pane-body">
        <p id="chart-stale" class="stale-note" hidden></p>
        <div id="chart-empty" class="empty-state">
          <img id="waiting-cat" src="/static/waiting.jpg" width="160" height="160" alt="">
          <p id="empty-copy">{% if mapping_ready %}No rows yet. The cat is waiting.{% else %}Map a table on Setup before Events can run.{% endif %}</p>
        </div>
        <canvas id="chart" hidden></canvas>
        <p id="incomplete-note" class="incomplete-note" hidden></p>
      </div>
    </section>
    <div id="row-divider" class="row-divider" role="separator" aria-orientation="horizontal" aria-label="Resize the chart"{% if not config.pane_chart_open or not config.pane_table_open %} hidden{% endif %}></div>
    <section class="pane pane-table{% if not config.pane_table_open %} closed{% endif %}">
      <div class="pane-head">
        <button type="button" class="pane-toggle" data-pane="table" aria-expanded="{{ 'true' if config.pane_table_open else 'false' }}" aria-controls="table-pane-body" title="{{ 'Collapse table' if config.pane_table_open else 'Expand table' }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <h2>Table</h2>
        <span id="table-count"></span>
        <span class="pane-actions">
          <button type="button" id="copy-table" class="icon-btn" disabled title="Copy table" aria-label="Copy table">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
          </button>
          <details class="format-pop disabled" id="table-export">
            <summary class="icon-btn" title="Download table" aria-label="Download table">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 3v12"/><path d="m8 11 4 4 4-4"/><path d="M4 19h16"/></svg>
            </summary>
            <div class="export-body">
              <button type="button" data-table-export="csv">CSV</button>
              <button type="button" data-table-export="tsv">TSV — pastes into Sheets and Excel</button>
              <button type="button" data-table-export="md">Markdown table</button>
              <button type="button" data-table-export="json">JSON</button>
            </div>
          </details>
        </span>
      </div>
      <div class="pane-body" id="table-pane-body">
        <p id="table-stale" class="stale-note" hidden></p>
        <p class="empty" id="table-empty">Run to fill the table.</p>
        <p id="limit-note" class="incomplete-note" hidden></p>
        <table id="result-table" hidden>
          <thead>
            <tr>
              <th data-key="bucket">Day <span class="grip" data-col="0"></span></th>
              <th data-key="series" id="th-series" hidden>{{ filter_ui.chrome.breakdown_th | sql_chrome }} <span class="grip" data-col="1"></span></th>
              <th data-key="value">Volume <span class="grip" data-col="2"></span></th>
            </tr>
          </thead>
          <tbody id="rows"></tbody>
        </table>
      </div>
    </section>
    <section class="pane pane-sql{% if not config.pane_sql_open %} closed{% endif %}">
      <div class="pane-head">
        <button type="button" class="pane-toggle" data-pane="sql" aria-expanded="{{ 'true' if config.pane_sql_open else 'false' }}" aria-controls="sql-pane-body" title="{{ 'Collapse SQL' if config.pane_sql_open else 'Expand SQL' }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <h2>SQL</h2>
        <span class="pane-actions">
          <button type="button" id="copy-sql" class="icon-btn" disabled title="Copy SQL" aria-label="Copy SQL">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
          </button>
          <details class="format-pop disabled" id="sql-export">
            <summary class="icon-btn" title="Download SQL" aria-label="Download SQL">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 3v12"/><path d="m8 11 4 4 4-4"/><path d="M4 19h16"/></svg>
            </summary>
            <div class="export-body">
              <button type="button" data-sql-export="sql">SQL file (.sql)</button>
              <button type="button" data-sql-export="md">Markdown (.md)</button>
            </div>
          </details>
        </span>
      </div>
      <div class="pane-body" id="sql-pane-body">
        <pre id="sql" class="empty">SQL updates as you change the form.</pre>
      </div>
    </section>
  </div>
  </form>
</main>
<script>
const saved = {
  event_value: {{ config.event_value|tojson }},
  event_values: {{ (config.event_values or [])|tojson }},
  filters: {{ (config.filters or [])|tojson }},
  of_column: {{ (config.of_column or "")|tojson }},
  of_expr: {{ (config.of_expr or "")|tojson }},
  of_json_key: {{ (config.of_json_key or "")|tojson }},
  breakdown_column: {{ (config.breakdown_column or "")|tojson }},
  breakdown_expr: {{ (config.breakdown_expr or "")|tojson }},
  breakdown_json_key: {{ (config.breakdown_json_key or "")|tojson }},
  breakdowns: {{ (config.breakdowns or [])|tojson }},
  grain: {{ (config.grain or "day")|tojson }},
  range_mode: {{ (config.range_mode or "last")|tojson }},
  range_n: {{ (config.range_n or 30)|tojson }},
  range_unit: {{ (config.range_unit or "day")|tojson }},
  include_current: {{ (config.include_current or false)|tojson }},
  exclude_current: {{ (config.exclude_current or false)|tojson }},
  custom_kind: {{ (config.custom_kind or "absolute")|tojson }},
};
const GRAIN_DEFAULTS = {
  day: { choice: "last:30:day", n: 30, unit: "day", includeCurrent: true },
  week: { choice: "last:8:week", n: 8, unit: "week", includeCurrent: false },
  month: { choice: "last:6:month", n: 6, unit: "month", includeCurrent: false },
  hour: { choice: "last:30:day", n: 30, unit: "day", includeCurrent: true },
  day_of_week: { choice: "last:8:week", n: 8, unit: "week", includeCurrent: false },
  hour_of_day: { choice: "last:14:day", n: 14, unit: "day", includeCurrent: true },
};
const CYCLIC_RANGE_PRESETS = [
  { group: "Last" },
  { value: "last:7:day", label: "Last 7 days" },
  { value: "last:14:day", label: "Last 14 days" },
  { value: "last:30:day", label: "Last 30 days" },
  { value: "last:90:day", label: "Last 90 days" },
  { value: "last:8:week", label: "Last 8 weeks" },
  { value: "last:12:week", label: "Last 12 weeks" },
  { value: "last:3:month", label: "Last 3 months" },
  { value: "last:6:month", label: "Last 6 months" },
  { value: "last:12:month", label: "Last 12 months" },
  { value: "last:3:quarter", label: "Last 3 quarters" },
  { value: "last:4:quarter", label: "Last 4 quarters" },
  { value: "last:n", label: "Last N…" },
  { group: "This" },
  { value: "this:day", label: "Today" },
  { value: "this:week", label: "This week" },
  { value: "this:month", label: "This month" },
  { value: "this:quarter", label: "This quarter" },
  { value: "this:year", label: "This year" },
  { group: "Previous" },
  { value: "previous:day", label: "Yesterday" },
  { value: "previous:week", label: "Last week" },
  { value: "previous:month", label: "Last month" },
  { value: "previous:quarter", label: "Last quarter" },
  { value: "previous:year", label: "Last year" },
  { group: "" },
  { value: "custom", label: "Custom" },
];
const RANGE_PRESETS = {
  day: [
    { value: "last:7:day", label: "Last 7 days" },
    { value: "last:14:day", label: "Last 14 days" },
    { value: "last:30:day", label: "Last 30 days" },
    { value: "last:90:day", label: "Last 90 days" },
    { value: "last:n", label: "Last N days…" },
    { value: "this:day", label: "Today" },
    { value: "this:week", label: "This week" },
    { value: "this:month", label: "This month" },
    { value: "previous:day", label: "Yesterday" },
    { value: "previous:week", label: "Last week" },
    { value: "previous:month", label: "Last month" },
    { value: "custom", label: "Custom" },
  ],
  hour: [
    { value: "last:24:hour", label: "Last 24 hours" },
    { value: "last:7:day", label: "Last 7 days" },
    { value: "last:14:day", label: "Last 14 days" },
    { value: "last:30:day", label: "Last 30 days" },
    { value: "last:90:day", label: "Last 90 days" },
    { value: "last:n", label: "Last N days…" },
    { value: "this:day", label: "Today" },
    { value: "this:week", label: "This week" },
    { value: "this:month", label: "This month" },
    { value: "previous:day", label: "Yesterday" },
    { value: "previous:week", label: "Last week" },
    { value: "previous:month", label: "Last month" },
    { value: "custom", label: "Custom" },
  ],
  week: [
    { value: "last:4:week", label: "Last 4 weeks" },
    { value: "last:8:week", label: "Last 8 weeks" },
    { value: "last:12:week", label: "Last 12 weeks" },
    { value: "last:n", label: "Last N weeks…" },
    { value: "this:week", label: "This week" },
    { value: "previous:week", label: "Last week" },
    { value: "custom", label: "Custom" },
  ],
  month: [
    { value: "last:3:month", label: "Last 3 months" },
    { value: "last:6:month", label: "Last 6 months" },
    { value: "last:12:month", label: "Last 12 months" },
    { value: "last:n", label: "Last N months…" },
    { value: "this:month", label: "This month" },
    { value: "previous:month", label: "Last month" },
    { value: "custom", label: "Custom" },
  ],
  day_of_week: CYCLIC_RANGE_PRESETS,
  hour_of_day: CYCLIC_RANGE_PRESETS,
};
const RANGE_UNITS = ["day", "week", "month", "quarter", "year"];
const UNIT_LABEL = {
  day: "days", week: "weeks", month: "months", hour: "hours",
  quarter: "quarters", year: "years",
};
const GRAIN_NOUN = {
  day: "today",
  week: "this week",
  month: "this month",
  hour: "today",
  day_of_week: "this week",
  hour_of_day: "today",
};
const INCLUDE_LABEL = {
  hour: "Include current hour",
  day: "Include today",
  week: "Include this week",
  month: "Include this month",
  quarter: "Include this quarter",
  year: "Include this year",
};
const GRAIN_RANK = { day: 0, week: 1, month: 2, quarter: 3, year: 4 };
const GRAIN_HEADERS = {
  day: "Day",
  week: "Week",
  month: "Month",
  hour: "Hour",
  day_of_week: "Day of week",
  hour_of_day: "Hour of day",
};
const rangeByGrain = {
  day: Object.assign({}, GRAIN_DEFAULTS.day),
  week: Object.assign({}, GRAIN_DEFAULTS.week),
  month: Object.assign({}, GRAIN_DEFAULTS.month),
  hour: Object.assign({}, GRAIN_DEFAULTS.hour),
  day_of_week: Object.assign({}, GRAIN_DEFAULTS.day_of_week),
  hour_of_day: Object.assign({}, GRAIN_DEFAULTS.hour_of_day),
};
const form = document.getElementById("f");
const projectEl = document.getElementById("project");
const dataProjectEl = document.getElementById("data_project");
const tableEl = document.getElementById("table");
const locationEl = document.getElementById("location");
const eventTimeEl = document.getElementById("event_time");
const eventColumnEl = document.getElementById("event_column");
const credentialsEl = document.getElementById("credentials");
const eventCardsEl = document.getElementById("event-cards");
const grainEl = document.getElementById("grain");
const rangeChoiceEl = document.getElementById("range_choice");
const rangeModeEl = document.getElementById("range_mode");
const rangeNEl = document.getElementById("range_n");
const rangeUnitEl = document.getElementById("range_unit");
const includeCurrentEl = document.getElementById("include_current");
const includeCurrentLabel = document.getElementById("include_current_label");
const rangeLastEl = document.getElementById("range-last");
const rangeIncludeEl = document.getElementById("range-include");
const customRangeEl = document.getElementById("custom-range");
const customKindEl = document.getElementById("custom_kind");
const customAbsoluteEl = document.getElementById("custom-absolute");
const customRelativeEl = document.getElementById("custom-relative");
const customSnapHint = document.getElementById("custom-snap-hint");
const rangeNUnitSelect = document.getElementById("range_n_unit_select");
const rangeNUnitSpan = document.getElementById("range_n_unit");
const relUnitSelect = document.getElementById("rel_unit_select");
const relUnitLabel = document.getElementById("rel_unit_label");
const startDateEl = document.getElementById("start_date");
const endDateEl = document.getElementById("end_date");
const titleEl = document.getElementById("chart-title");
const titleLockedEl = document.getElementById("chart_title_locked");
const cachedEventNames = {{ config.event_names|tojson }};
const cachedColumns = {{ config.columns|tojson }};
let eventNameCacheMeta = {{ (config.event_name_cache or {})|tojson }};
let chart;
let tableRows = [];
let lastRun = null;
let sortKey = "";
let sortDir = 1;
function setError(text) {
  document.getElementById("error").textContent = text || "";
}
function shortError(msg) {
  let text = String(msg || "").replace(/\r\n/g, "\n").trim();
  if (!text) return "Query failed. See SQL below.";
  const dump = /-----Query Job SQL Follows-----|(?:^|\n)\s*(?:\d+\s*:)?\s*(?:SELECT|WITH)\b|SELECT\s+\*\s+FROM/i;
  const hit = text.match(dump);
  if (hit && hit.index != null) {
    text = text.slice(0, hit.index).trim() || "Query failed. See SQL below.";
  }
  if (/googleapis\.com/i.test(text) && text.includes(": ")) {
    text = text.slice(text.indexOf(": ") + 2).trim();
  }
  if (/^\s*(?:\d+\s*:)?\s*(?:SELECT|WITH)\b/i.test(text) || /SELECT\s+\*\s+FROM/i.test(text)) {
    return "Query failed. See SQL below.";
  }
  const lines = [];
  for (const ln of text.split("\n")) {
    const stripped = ln.trim();
    if (!stripped) continue;
    if (/^(location|job id|job_id):/i.test(stripped)) break;
    lines.push(stripped);
    if (lines.length >= 6) break;
  }
  return lines.join("\n") || "Query failed. See SQL below.";
}
let eventNameCache = Array.isArray(cachedEventNames) ? cachedEventNames.slice() : [];
const SERIES_CAP = 8;
const BREAKDOWN_SLOT_CAP = 3;
function savedEventNames() {
  const listed = Array.isArray(saved.event_values)
    ? saved.event_values.filter(Boolean)
    : [];
  if (listed.length) return listed;
  return saved.event_value ? [saved.event_value] : [];
}
function fillEventNameSelect(sel, selected) {
  const keep = selected || sel.value || "";
  const ranked = [...eventNameCache].sort((a, b) => String(a).localeCompare(String(b)));
  sel.innerHTML = "";
  const blank = document.createElement("option");
  blank.value = "";
  blank.textContent = "Pick an event";
  sel.appendChild(blank);
  ranked.forEach((name) => {
    const opt = document.createElement("option");
    opt.value = name;
    opt.textContent = name;
    sel.appendChild(opt);
  });
  if (keep) ensureOption(sel, keep);
  sel.value = keep;
}
function topSeriesCount() {
  return eventCardsEl.querySelectorAll(":scope > .event-series").length;
}
function eventPicked(card) {
  if (!eventColumnEl.value) return true;
  const sel = card.querySelector(".event-card-name");
  return !!(sel && (sel.value || "").trim());
}
function syncCombinePlus(card) {
  const row = card.querySelector(":scope > .fc-plus-row");
  if (!row) return;
  row.hidden = !eventPicked(card);
}
function syncSeriesChrome() {
  const n = topSeriesCount();
  document.querySelectorAll("#event-cards > .event-series").forEach((host) => {
    const btn = host.querySelector(
      ":scope > .event-card-head > .event-card-remove, :scope > .event-group-head > .event-group-remove"
    );
    if (btn) btn.hidden = n < 2;
    if (host.classList.contains("event-card")) syncCombinePlus(host);
  });
  const add = document.getElementById("add-event-row");
  if (add) add.hidden = n >= SERIES_CAP;
}
function fillSelect(sel, items, selected, blankLabel) {
  const cur = selected || sel.value;
  sel.innerHTML = "";
  if (!items.length && !blankLabel) {
    sel.hidden = true;
    return;
  }
  const ranked = [...items].sort((a, b) => {
    const ka = String(typeof a === "string" ? a : a.value).toLowerCase();
    const kb = String(typeof b === "string" ? b : b.value).toLowerCase();
    if (ka < kb) return -1;
    if (ka > kb) return 1;
    return 0;
  });
  if (blankLabel) {
    const blank = document.createElement("option");
    blank.value = "";
    blank.textContent = blankLabel;
    sel.appendChild(blank);
  }
  for (const item of ranked) {
    const opt = document.createElement("option");
    if (typeof item === "string") {
      opt.value = item;
      opt.textContent = item;
    } else {
      opt.value = item.value;
      opt.textContent = item.label;
    }
    sel.appendChild(opt);
  }
  if (cur && [...sel.options].some((o) => o.value === cur)) sel.value = cur;
  else if (!blankLabel && sel.options.length) sel.selectedIndex = 0;
  sel.hidden = false;
}

const CUSTOM_BREAKDOWN = "__expr__";
const CUSTOM_OF = "__expr__";
const PROPERTY_OF_TYPES = new Set({{ property_of_types|tojson }});
const DISTINCT_OF_TYPES = new Set({{ distinct_of_types|tojson }});
const JSON_TYPES = new Set({{ json_types|tojson }});
const CAPABILITIES = new Set({{ capabilities|tojson }});
const MAPPING_READY = {{ mapping_ready|tojson }};
const SUPPORTS_JSON_VALUE = {{ supports_json_value|tojson }};
const breakdownColumnEl = document.getElementById("breakdown_column");
const ofColumnEl = document.getElementById("of_column");
const ofWrapEl = document.getElementById("of-wrap");
const onEl = document.getElementById("on");
let columnCache = Array.isArray(cachedColumns) ? cachedColumns : [];
function isPropertyMeasureValue(v) {
  return v === "sum" || v === "property_average" || v === "median" || v === "distinct";
}
function isPropertyMeasure() {
  return isPropertyMeasureValue(form.measure.value);
}
function ofAllowedTypesFor(measure) {
  const base = measure === "distinct" ? DISTINCT_OF_TYPES : PROPERTY_OF_TYPES;
  if (!SUPPORTS_JSON_VALUE) return base;
  return new Set([...base, ...JSON_TYPES]);
}
function ofAllowedTypes() {
  return ofAllowedTypesFor(form.measure.value);
}
function columnType(name) {
  const hit = (columnCache || []).find((c) => (c.name || c) === name);
  return String((hit && hit.type) || "").toUpperCase();
}
function isJsonColumn(name) {
  return SUPPORTS_JSON_VALUE && JSON_TYPES.has(columnType(name));
}
function syncBreakdownUi() {
  const col = breakdownColumnEl.value;
  const json = col && col !== CUSTOM_BREAKDOWN && (
    isJsonColumn(col) || !!(saved.breakdown_json_key && col === saved.breakdown_column)
  );
  document.getElementById("breakdown-expr-wrap").hidden = col !== CUSTOM_BREAKDOWN;
  document.getElementById("breakdown-json-wrap").hidden = !json;
  const zero = document.querySelector('#breakdown-chart .breakdown-slot[data-slot="0"]');
  if (zero) syncValueControls(zero);
  if (typeof hideNullNudge === "function") hideNullNudge();
  syncBreakdownMode();
  if (typeof syncExact === "function") syncExact();
}
function syncOfUi() {
  const property = isPropertyMeasure();
  ofWrapEl.hidden = !property;
  onEl.value = property ? "property" : "events";
  if (!property) {
    document.getElementById("of-expr-wrap").hidden = true;
    document.getElementById("of-json-wrap").hidden = true;
    return;
  }
  fillOfSelect(columnCache);
  const col = ofColumnEl.value;
  const json = col && col !== CUSTOM_OF && (
    isJsonColumn(col) || !!(saved.of_json_key && col === saved.of_column)
  );
  document.getElementById("of-expr-wrap").hidden = col !== CUSTOM_OF;
  document.getElementById("of-json-wrap").hidden = !json;
}
function ensureOption(sel, value) {
  if (!value) return;
  if (![...sel.options].some((o) => o.value === value)) {
    const opt = document.createElement("option");
    opt.value = value;
    opt.textContent = value;
    sel.appendChild(opt);
  }
  sel.value = value;
  sel.hidden = false;
}
function paintOfSelect(sel, current, measure) {
  const allowed = ofAllowedTypesFor(measure || "sum");
  const skip = new Set([form.entity.value, form.event_time.value, eventColumnEl.value].filter(Boolean));
  const cols = (columnCache || [])
    .filter((c) => {
      const name = c.name || c;
      const typ = String(c.type || "").toUpperCase();
      if (!name || skip.has(name)) return false;
      if (c.type && !allowed.has(typ)) return false;
      return true;
    })
    .map((c) => (typeof c === "string" ? c : { value: c.name, label: c.type ? c.name + " (" + c.type + ")" : c.name }));
  const cur = current || "";
  fillSelect(sel, cols, cur === CUSTOM_OF ? "" : cur, "(none)");
  const custom = document.createElement("option");
  custom.value = CUSTOM_OF;
  custom.textContent = t("sql_expr_ellipsis");
  sel.appendChild(custom);
  if (cur && cur !== CUSTOM_OF) ensureOption(sel, cur);
  if (cur === CUSTOM_OF) sel.value = CUSTOM_OF;
  sel.hidden = false;
}
function fillOfSelect(columns) {
  const cur = saved.of_expr ? CUSTOM_OF : (saved.of_column || ofColumnEl.value || "");
  paintOfSelect(ofColumnEl, cur, form.measure.value);
  document.querySelectorAll(".series-of-column").forEach((sel) => {
    const host = sel.closest(".event-card, .event-group");
    const measure = host && seriesMeasureSelect(host);
    paintOfSelect(sel, sel.value, measure ? measure.value : "sum");
  });
}
function breakdownColumnOptions() {
  const skip = new Set([form.entity.value, form.event_time.value, eventColumnEl.value].filter(Boolean));
  return (columnCache || [])
    .filter((c) => {
      const name = c.name || c;
      return name && !skip.has(name);
    })
    .map((c) => (typeof c === "string" ? c : { value: c.name, label: c.type ? c.name + " (" + c.type + ")" : c.name }));
}
function paintBreakdownSelect(sel, current) {
  const cols = breakdownColumnOptions();
  const cur = current || "";
  fillSelect(sel, cols, cur === CUSTOM_BREAKDOWN ? "" : cur, "(none)");
  const custom = document.createElement("option");
  custom.value = CUSTOM_BREAKDOWN;
  custom.textContent = t("sql_expr_ellipsis");
  sel.appendChild(custom);
  if (cur && cur !== CUSTOM_BREAKDOWN) ensureOption(sel, cur);
  if (cur === CUSTOM_BREAKDOWN) sel.value = CUSTOM_BREAKDOWN;
}
function fillBreakdownSelect(columns) {
  const slots = savedBreakdownSlots();
  const first = slots[0] || {};
  const cur = first.breakdown_expr ? CUSTOM_BREAKDOWN : (first.breakdown_column || breakdownColumnEl.value || "");
  paintBreakdownSelect(breakdownColumnEl, cur);
  breakdownColumnEl.hidden = false;
  if (first.breakdown_json_key) document.getElementById("breakdown_json_key").value = first.breakdown_json_key;
  if (first.breakdown_expr) document.getElementById("breakdown_expr").value = first.breakdown_expr;
  const more = document.getElementById("breakdown-more");
  more.innerHTML = "";
  slots.slice(1, BREAKDOWN_SLOT_CAP).forEach((slot) => addChartBreakdownSlot(slot));
  const zero = chartSlotZeroEl();
  if (zero) {
    attachValueControls(zero, first, () => { syncBreakdownUi(); scheduleEstimate(); });
  }
  syncAddBreakdownBtn();
}
function savedBreakdownSlots() {
  const listed = Array.isArray(saved.breakdowns) ? saved.breakdowns : [];
  const filled = listed.filter((s) => s && (s.breakdown_column || s.column || s.breakdown_expr || s.expr));
  if (filled.length) return filled.map(normalizeBreakdownSlot);
  if (saved.breakdown_column || saved.breakdown_expr) {
    return [normalizeBreakdownSlot({
      breakdown_column: saved.breakdown_column,
      breakdown_expr: saved.breakdown_expr,
      breakdown_json_key: saved.breakdown_json_key,
    })];
  }
  return [];
}
function normalizeBreakdownSlot(s) {
  const src = s || {};
  return {
    breakdown_column: src.breakdown_column || src.column || "",
    breakdown_expr: src.breakdown_expr || src.expr || "",
    breakdown_json_key: src.breakdown_json_key || src.json_key || "",
    value_at: VALUE_ATS.includes(src.value_at) ? src.value_at : "event",
    if_missing: src.if_missing === "fill" ? "fill" : "null",
    fill_from_event: src.fill_from_event || "",
    fill_from_expr: src.fill_from_expr || "",
  };
}
const VALUE_ATS = ["event", "range_start", "range_end", "first_record", "latest_record"];
const FILL_FROM_TITLE = "Which events may supply the value. (any event): every event in the table where the value is set — including events not charted here. The event's own value still wins when it has one.";
function entityWord() {
  const el = document.getElementById("entity_label");
  return ((el && el.value) || "").trim().toLowerCase() || "entity";
}
function valueAtTitle(v) {
  const w = entityWord();
  const cost = " Reads this column's full history — the estimate shows the cost.";
  if (v === "event") return "The value stamped on each event row. Events without one group as (null).";
  if (v === "range_start") return "One group per " + w + ": the value as it stood at the start of the date range — the most recent one recorded at or before it." + cost;
  if (v === "range_end") return "One group per " + w + ": the value as it stood at the end of the date range. Never reads past the range." + cost;
  if (v === "first_record") return "One group per " + w + ": the first value ever recorded, even before this date range." + cost;
  return "One group per " + w + ": the most recent value ever recorded — including after this date range. Can change as new data arrives." + cost;
}
function ifMissingFillTitle() {
  const w = entityWord();
  return "No value by then? Each event uses the most recent earlier value from this " + w
    + "'s history; at range boundaries " + (w === "entity" ? "an" : "a") + " " + w
    + " with none takes its first recorded value — possibly after the range.";
}
function valueControlsHtml() {
  return (
    '<div class="bd-value-controls" hidden>'
    + '<div class="bd-value-row">'
    + '<div class="bd-value-pair">'
    + "<label>" + tHtml("bd_value_at") + "</label>"
    + '<select class="bd-value-at"></select>'
    + "</div>"
    + '<div class="bd-value-pair">'
    + "<label>" + tHtml("bd_if_missing") + "</label>"
    + '<select class="bd-if-missing"></select>'
    + "</div>"
    + "</div>"
    + '<div class="bd-fill-wrap" hidden>'
    + "<label>" + tHtml("bd_fill_from") + "</label>"
    + '<select class="bd-fill-event"></select>'
    + '<div class="bd-fill-expr-wrap" hidden><label>' + tHtml("sql_expr") + "</label>"
    + '<input class="bd-fill-expr" autocomplete="off" placeholder="event_name = \'signup\'"></div>'
    + "</div>"
    + "</div>"
  );
}
let bdControlSeq = 0;
function wireValueControlIds(block) {
  bdControlSeq += 1;
  ["bd-value-at", "bd-if-missing", "bd-fill-event", "bd-fill-expr"].forEach((cls) => {
    const ctl = block.querySelector("." + cls);
    if (!ctl) return;
    ctl.id = "bdc-" + bdControlSeq + "-" + cls;
    const lab = ctl.previousElementSibling;
    if (lab && lab.tagName === "LABEL") lab.htmlFor = ctl.id;
  });
}
function paintValueAtSelect(sel, current) {
  sel.innerHTML = "";
  [
    ["event", t("bd_at_event")],
    ["range_start", t("bd_at_range_start")],
    ["range_end", t("bd_at_range_end")],
    ["first_record", t("bd_at_first")],
    ["latest_record", t("bd_at_latest")],
  ].forEach(([v, label]) => {
    const o = document.createElement("option");
    o.value = v;
    o.textContent = label;
    o.title = valueAtTitle(v);
    sel.appendChild(o);
  });
  sel.value = VALUE_ATS.includes(current) ? current : "event";
}
function paintIfMissingSelect(sel, current) {
  sel.innerHTML = "";
  [["null", t("bd_missing_null"), ""], ["fill", t("bd_missing_fill"), ifMissingFillTitle()]]
    .forEach(([v, label, title]) => {
      const o = document.createElement("option");
      o.value = v;
      o.textContent = label;
      if (title) o.title = title;
      sel.appendChild(o);
    });
  sel.value = current === "fill" ? "fill" : "null";
}
const FILL_CHARTED = "__charted__";
const FILL_SERIES = "__series__";
const FILL_CHARTED_TITLE = "Rows with any event name charted here may supply the value; series filters do not narrow it. The event's own value still wins.";
const FILL_SERIES_TITLE = "Rows with this series' event name(s) may supply the value. The event's own value still wins.";
function paintFillEventSelect(sel, current) {
  const cur = current !== undefined ? current : sel.value;
  sel.innerHTML = "";
  const add = (parent, value, label, title) => {
    const o = document.createElement("option");
    o.value = value;
    o.textContent = label;
    if (title) o.title = title;
    parent.appendChild(o);
  };
  add(sel, "", t("bd_fill_any"), FILL_FROM_TITLE);
  // Sentinels the backend interprets: series → that card's event names,
  // charted → every charted name (a chart-wide "__series__" falls back
  // to charted server-side).
  if (sel.closest(".series-bd")) add(sel, FILL_SERIES, t("bd_fill_series"), FILL_SERIES_TITLE);
  add(sel, FILL_CHARTED, t("bd_fill_charted"), FILL_CHARTED_TITLE);
  // Literal names sit in a group so meta options read as meta; the sql
  // vocab labels the group with the LIVE mapped column — a generic guess
  // would lie when the column is e.g. `type`, so a blank mapping falls
  // back to the plain-vocab group label instead. The group is only
  // created when it will hold at least one option — an empty header
  // must not render.
  let group = null;
  const named = (parent, name) => {
    if (!group) {
      group = document.createElement("optgroup");
      const mapped = (eventColumnEl.value || "").trim();
      group.label = FILTER_UI.vocab === "sql" && mapped ? mapped : t("bd_fill_group");
      parent.appendChild(group);
    }
    add(group, name, name);
  };
  [...eventNameCache].sort((a, b) => String(a).localeCompare(String(b))).forEach((name) => {
    named(sel, name);
  });
  // A stale series sentinel restored onto a chart-wide slot would render
  // its raw value; coerce it to charted, matching the backend's
  // degradation. A stale saved NAME joins the group, never the tail —
  // BEFORE the SQL sentinel, so the group cannot land after it when the
  // cache is empty.
  const fixed =
    cur === FILL_SERIES && !sel.closest(".series-bd") ? FILL_CHARTED : cur;
  if (
    fixed && fixed !== CUSTOM_BREAKDOWN && fixed !== FILL_CHARTED
    && fixed !== FILL_SERIES
    && ![...sel.options].some((o) => o.value === fixed)
  ) {
    named(sel, fixed);
  }
  add(sel, CUSTOM_BREAKDOWN, t("sql_expr_ellipsis"));
  sel.value = fixed || "";
}
function slotColumnValue(slotEl) {
  const sel = slotEl.querySelector(".bd-column, .series-bd-column") || breakdownColumnEl;
  return sel.value;
}
function attachValueControls(slotEl, init, onChange) {
  if (slotEl.querySelector(".bd-value-controls")) return;
  const holder = document.createElement("div");
  holder.innerHTML = valueControlsHtml();
  const block = holder.firstElementChild;
  slotEl.appendChild(block);
  wireValueControlIds(block);
  const data = normalizeBreakdownSlot(init);
  paintValueAtSelect(block.querySelector(".bd-value-at"), data.value_at);
  paintIfMissingSelect(block.querySelector(".bd-if-missing"), data.if_missing);
  paintFillEventSelect(
    block.querySelector(".bd-fill-event"),
    data.fill_from_expr ? CUSTOM_BREAKDOWN : data.fill_from_event
  );
  block.querySelector(".bd-fill-expr").value = data.fill_from_expr || "";
  ["bd-value-at", "bd-if-missing", "bd-fill-event"].forEach((cls) => {
    block.querySelector("." + cls).addEventListener("change", () => {
      syncValueControls(slotEl);
      hideNullNudge();
      onChange();
    });
  });
  block.querySelector(".bd-fill-expr").addEventListener("input", onChange);
  syncValueControls(slotEl);
}
function syncValueControls(slotEl) {
  const block = slotEl.querySelector(":scope > .bd-value-controls");
  if (!block) return;
  block.hidden = !slotColumnValue(slotEl);
  const atSel = block.querySelector(".bd-value-at");
  const missSel = block.querySelector(".bd-if-missing");
  // The ever anchors already search all history, so If missing has no
  // job there: hide the pair rather than explain a disabled control.
  // disabled stays set so readValueControls keeps reporting "null".
  const ever = atSel.value === "first_record" || atSel.value === "latest_record";
  missSel.disabled = ever;
  const missPair = missSel.closest(".bd-value-pair");
  if (missPair) missPair.hidden = ever;
  const fillWrap = block.querySelector(".bd-fill-wrap");
  fillWrap.hidden = atSel.value === "event" && missSel.value !== "fill";
  const fillSel = block.querySelector(".bd-fill-event");
  block.querySelector(".bd-fill-expr-wrap").hidden = fillSel.value !== CUSTOM_BREAKDOWN;
}
function readValueControls(slotEl) {
  const block = slotEl.querySelector(":scope > .bd-value-controls");
  if (!block) {
    return { value_at: "event", if_missing: "null", fill_from_event: "", fill_from_expr: "" };
  }
  const at = block.querySelector(".bd-value-at").value;
  const missSel = block.querySelector(".bd-if-missing");
  const fillSel = block.querySelector(".bd-fill-event");
  const exprOn = fillSel.value === CUSTOM_BREAKDOWN;
  return {
    value_at: VALUE_ATS.includes(at) ? at : "event",
    if_missing: missSel.disabled ? "null" : (missSel.value === "fill" ? "fill" : "null"),
    fill_from_event: exprOn ? "" : fillSel.value,
    fill_from_expr: exprOn ? (block.querySelector(".bd-fill-expr").value || "").trim() : "",
  };
}
function repaintFillEventSelects() {
  document.querySelectorAll(".bd-value-controls .bd-fill-event").forEach((sel) => {
    paintFillEventSelect(sel, sel.value);
  });
}
function hideNullNudge() {
  const el = document.getElementById("bd-null-nudge");
  if (el) el.hidden = true;
}
function chartSlotCount() {
  return 1 + document.querySelectorAll("#breakdown-more .breakdown-slot").length;
}
function syncAddBreakdownBtn() {
  const row = document.getElementById("add-breakdown-row");
  if (row) row.hidden = chartSlotCount() >= BREAKDOWN_SLOT_CAP;
}
function addChartBreakdownSlot(init) {
  if (chartSlotCount() >= BREAKDOWN_SLOT_CAP) return;
  const data = normalizeBreakdownSlot(init);
  const wrap = document.createElement("div");
  wrap.className = "breakdown-slot";
  wrap.innerHTML = (
    '<div class="breakdown-slot-row">'
    + '<select class="bd-column" aria-label="' + t("breakdown") + '"></select>'
    + '<button type="button" class="linkish remove-breakdown">Remove</button>'
    + "</div>"
    + '<div class="bd-json-wrap" hidden><label>JSON key</label>'
    + '<input class="bd-json" autocomplete="off" placeholder="plan" aria-label="JSON key"></div>'
    + '<div class="bd-expr-wrap" hidden><label>' + tHtml("sql_expr") + "</label>"
    + '<input class="bd-expr" autocomplete="off" placeholder="country" aria-label="Breakdown SQL"></div>'
  );
  document.getElementById("breakdown-more").appendChild(wrap);
  const sel = wrap.querySelector(".bd-column");
  const want = data.breakdown_expr ? CUSTOM_BREAKDOWN : data.breakdown_column;
  paintBreakdownSelect(sel, want);
  wrap.querySelector(".bd-json").value = data.breakdown_json_key || "";
  wrap.querySelector(".bd-expr").value = data.breakdown_expr || "";
  sel.addEventListener("change", () => { syncExtraSlot(wrap); syncBreakdownUi(); scheduleEstimate(); });
  wrap.querySelector(".remove-breakdown").addEventListener("click", () => {
    wrap.remove();
    syncAddBreakdownBtn();
    syncBreakdownUi();
    scheduleEstimate();
    syncStaleNotes();
  });
  attachValueControls(wrap, data, () => { syncBreakdownUi(); scheduleEstimate(); });
  syncExtraSlot(wrap);
  syncAddBreakdownBtn();
}
function syncExtraSlot(wrap) {
  const col = wrap.querySelector(".bd-column").value;
  const json = col && col !== CUSTOM_BREAKDOWN && (
    isJsonColumn(col) || !!(wrap.querySelector(".bd-json").value && col)
  );
  wrap.querySelector(".bd-json-wrap").hidden = !json;
  wrap.querySelector(".bd-expr-wrap").hidden = col !== CUSTOM_BREAKDOWN;
  syncValueControls(wrap);
}
function breakdownJsonIncomplete() {
  if (!document.getElementById("breakdown-json-wrap").hidden
    && !(document.getElementById("breakdown_json_key").value || "").trim()) return true;
  for (const wrap of document.querySelectorAll("#breakdown-more .bd-json-wrap")) {
    if (!wrap.hidden && !(wrap.querySelector(".bd-json").value || "").trim()) return true;
  }
  return false;
}
function slotFromEls(colEl, jsonWrap, jsonEl, exprEl, slotEl) {
  const col = colEl.value;
  const exprOn = col === CUSTOM_BREAKDOWN;
  return Object.assign({
    breakdown_column: exprOn ? "" : col,
    breakdown_json_key: exprOn || jsonWrap.hidden ? "" : (jsonEl.value || "").trim(),
    breakdown_expr: exprOn ? (exprEl.value || "").trim() : "",
  }, slotEl ? readValueControls(slotEl) : {});
}
function chartSlotZeroEl() {
  return document.querySelector('#breakdown-chart .breakdown-slot[data-slot="0"]');
}
function chartBreakdownSlotPairs() {
  const pairs = [];
  const zero = chartSlotZeroEl();
  pairs.push([zero, slotFromEls(
    breakdownColumnEl,
    document.getElementById("breakdown-json-wrap"),
    document.getElementById("breakdown_json_key"),
    document.getElementById("breakdown_expr"),
    zero
  )]);
  document.querySelectorAll("#breakdown-more .breakdown-slot").forEach((el) => {
    pairs.push([el, slotFromEls(
      el.querySelector(".bd-column"),
      el.querySelector(".bd-json-wrap"),
      el.querySelector(".bd-json"),
      el.querySelector(".bd-expr"),
      el
    )]);
  });
  return pairs.filter(([, s]) => s.breakdown_column || s.breakdown_expr);
}
function chartBreakdownSlots() {
  return chartBreakdownSlotPairs().map(([, s]) => s);
}
let nudgeSlotEl = null;
function syncNullNudge(rows) {
  const el = document.getElementById("bd-null-nudge");
  if (!el) return;
  el.hidden = true;
  nudgeSlotEl = null;
  if (breakdownBySeries()) return;
  if (!Array.isArray(rows) || !rows.length) return;
  // The 80% share is only meaningful for additive measures; summing
  // Median / Average / Distinct-per-entity values is not a share of
  // anything. Fallback matches syncExact's source for the same fact.
  const measure = (collectSeries()[0] || {}).measure
    || (form.measure ? form.measure.value : "uniques");
  if (measure !== "total" && measure !== "uniques") return;
  for (const [slotEl, s] of chartBreakdownSlotPairs()) {
    if (!slotEl || !s.breakdown_column || s.breakdown_expr || s.breakdown_json_key) continue;
    if (s.value_at !== "event" || s.if_missing !== "null") continue;
    const key = s.breakdown_column;
    if (!(key in (rows[0] || {}))) continue;
    let total = 0;
    let nul = 0;
    rows.forEach((row) => {
      const v = Math.abs(Number(row.value) || 0);
      total += v;
      if (row[key] == null || row[key] === "") nul += v;
    });
    if (total > 0 && nul / total >= 0.8) {
      document.getElementById("bd-null-nudge-copy").textContent =
        key + " is (null) on most of these events — its value is stamped elsewhere.";
      nudgeSlotEl = slotEl;
      el.hidden = false;
      return;
    }
  }
}
function paintColumns(columns) {
  columnCache = columns || [];
  fillBreakdownSelect(columnCache);
  fillOfSelect(columnCache);
  document.querySelectorAll(".series-bd-slot").forEach((slot) => {
    const sel = slot.querySelector(".series-bd-column");
    paintBreakdownSelect(sel, sel.value);
    syncSeriesBdSlot(slot);
  });
  document.querySelectorAll("#breakdown-more .breakdown-slot").forEach((wrap) => {
    paintBreakdownSelect(wrap.querySelector(".bd-column"), wrap.querySelector(".bd-column").value);
    syncExtraSlot(wrap);
  });
  syncBreakdownUi();
  syncOfUi();
  syncBreakdownMode();
  document.querySelectorAll(".filter-line").forEach(syncFilterLine);
}
const CUSTOM_FILTER = "__expr__";
const FILTER_UI = {{ filter_ui|tojson }};
function sqlPlain(s) {
  return String(s || "").replace(/`/g, "");
}
function t(key) {
  const chrome = FILTER_UI.chrome || {};
  return sqlPlain(chrome[key] || key);
}
function tHtml(key) {
  const mapped = (FILTER_UI.chrome_html || {})[key];
  if (mapped) return mapped;
  return String((FILTER_UI.chrome || {})[key] || key).replace(/`([^`]+)`/g, '<code class="fc-sql">$1</code>');
}
const PLUS_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>';
function plusBtn(aria, cls) {
  const extra = cls ? " " + cls : "";
  return '<button type="button" class="fc-plus' + extra + '" title="' + aria + '" aria-label="' + aria + '">' + PLUS_ICON + "</button>";
}
function plusRowHtml(aria, cls) {
  return '<div class="fc-plus-row">' + plusBtn(aria, cls) + "</div>";
}
function thousandChar() {
  const v = FILTER_UI.thousand_sep || "comma";
  if (v === "none") return "";
  if (v === "space") return " ";
  if (v === "period") return ".";
  return ",";
}
function decimalChar() {
  return (FILTER_UI.decimal_sep || "period") === "comma" ? "," : ".";
}
function canonNumber(token) {
  let raw = String(token || "").trim();
  if (!raw) return raw;
  if (/^-?[0-9]+(?:\.[0-9]+)?$/.test(raw)) return raw;
  const thou = thousandChar();
  const dec = decimalChar();
  if (thou) raw = raw.split(thou).join("");
  if (dec !== ".") raw = raw.split(dec).join(".");
  return raw;
}
function displayNumberToken(token) {
  const raw = String(token || "").trim();
  if (!raw) return raw;
  const canon = /^-?[0-9]+(?:\.[0-9]+)?$/.test(raw) ? raw : canonNumber(raw);
  if (!/^-?[0-9]+(?:\.[0-9]+)?$/.test(canon)) return raw;
  return applySeps(canon);
}
let filterListSeq = 0;
function filterFamilyOf(type, json) {
  if (json) return "string";
  const fam = FILTER_UI.type_family[String(type || "").toUpperCase()];
  if (fam) return fam;
  return type ? "other" : "string";
}
function filterOpKind(op) {
  return (FILTER_UI.ops[op] || {}).value || "one";
}
function defaultCaseSensitive(op) {
  return (FILTER_UI.exact_string_ops || []).indexOf(op) !== -1;
}
function orderedWeekdays() {
  const names = (FILTER_UI.weekdays || []).slice();
  if (!names.length) return names;
  const sun = (document.getElementById("week_start") || {}).value === "sunday";
  if (!sun) return names;
  const sunday = names[names.length - 1];
  return [sunday].concat(names.slice(0, -1));
}
function fillDateParts(sel, family, current) {
  const parts = (FILTER_UI.date_parts || []).filter((p) => !p.hour || family === "timestamp");
  const keep = parts.some((p) => p.id === current) ? current : "";
  sel.innerHTML = "";
  let groupEl = null;
  let groupName = null;
  parts.forEach((p) => {
    const opt = document.createElement("option");
    opt.value = p.id;
    opt.textContent = !p.id ? (family === "date" ? "The date" : "The timestamp") : p.label;
    const g = p.group || "";
    if (g) {
      if (groupName !== g) {
        groupName = g;
        groupEl = document.createElement("optgroup");
        groupEl.label = g;
        sel.appendChild(groupEl);
      }
      groupEl.appendChild(opt);
    } else {
      sel.appendChild(opt);
      groupEl = null;
      groupName = null;
    }
  });
  sel.value = keep;
  return keep;
}
function matchDisplayName(names, current) {
  const raw = String(current || "").trim();
  if (!raw) return names[0] || "";
  const exact = names.find((n) => n.toLowerCase() === raw.toLowerCase());
  if (exact) return exact;
  const pre = names.find((n) =>
    n.toLowerCase().startsWith(raw.toLowerCase()) || raw.toLowerCase().startsWith(n.toLowerCase())
  );
  return pre || names[0] || "";
}
function fillEnumSelect(sel, names, current) {
  const keep = matchDisplayName(names, current);
  sel.innerHTML = "";
  names.forEach((name) => {
    const opt = document.createElement("option");
    opt.value = name;
    opt.textContent = name;
    sel.appendChild(opt);
  });
  sel.value = keep;
  return keep;
}
function pad2(n) {
  return String(n).padStart(2, "0");
}
function isoDateUTC(d) {
  return d.getUTCFullYear() + "-" + pad2(d.getUTCMonth() + 1) + "-" + pad2(d.getUTCDate());
}
function weekStartsSunday() {
  return (document.getElementById("week_start") || {}).value === "sunday";
}
function dateFromYearWeek(year, week) {
  year = Number(year);
  week = Number(week);
  if (!year || !week) return "";
  if (!weekStartsSunday()) {
    const jan4 = new Date(Date.UTC(year, 0, 4));
    const dow = jan4.getUTCDay() || 7;
    const monday = new Date(jan4);
    monday.setUTCDate(jan4.getUTCDate() - (dow - 1) + (week - 1) * 7);
    return isoDateUTC(monday);
  }
  const jan1 = new Date(Date.UTC(year, 0, 1));
  const start = new Date(jan1);
  start.setUTCDate(1 - jan1.getUTCDay() + (week - 1) * 7);
  return isoDateUTC(start);
}
function yearWeekFromIso(iso) {
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso || "");
  if (!m) return { year: "", week: "" };
  const d = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3]));
  if (!weekStartsSunday()) {
    const tmp = new Date(d);
    tmp.setUTCDate(tmp.getUTCDate() + 4 - (tmp.getUTCDay() || 7));
    const yearStart = new Date(Date.UTC(tmp.getUTCFullYear(), 0, 1));
    const week = Math.ceil((((tmp - yearStart) / 86400000) + 1) / 7);
    return { year: String(tmp.getUTCFullYear()), week: String(week) };
  }
  const year = d.getUTCFullYear();
  const jan1 = new Date(Date.UTC(year, 0, 1));
  const start = new Date(jan1);
  start.setUTCDate(1 - jan1.getUTCDay());
  const week = Math.floor((d - start) / 86400000 / 7) + 1;
  return { year: String(year), week: String(week) };
}
function isoFromQuarter(year, q) {
  year = String(year || "").trim();
  q = Number(q);
  if (!year || !q) return "";
  return year + "-" + pad2((q - 1) * 3 + 1) + "-01";
}
function quarterFromIso(iso) {
  const m = /^(\d{4})-(\d{2})/.exec(iso || "");
  if (!m) return { year: "", q: "1" };
  return { year: m[1], q: String(Math.floor((Number(m[2]) - 1) / 3) + 1) };
}
function fillQuarterSelect(sel) {
  if (!sel || sel.options.length) return;
  [1, 2, 3, 4].forEach((q) => {
    const opt = document.createElement("option");
    opt.value = String(q);
    opt.textContent = "Q" + q;
    sel.appendChild(opt);
  });
}
function seedPeriodInputs(row, iso, isoTo) {
  if (iso && /^\d{4}-\d{2}/.test(iso)) {
    row.querySelector(".filter-month").value = iso.slice(0, 7);
    const w = yearWeekFromIso(iso.length === 7 ? iso + "-01" : iso);
    row.querySelector(".filter-week-year").value = w.year;
    row.querySelector(".filter-week-n").value = w.week;
    const q = quarterFromIso(iso);
    row.querySelector(".filter-quarter-year").value = q.year;
    row.querySelector(".filter-quarter-q").value = q.q;
  }
  if (isoTo && /^\d{4}-\d{2}/.test(isoTo)) {
    row.querySelector(".filter-month-to").value = isoTo.slice(0, 7);
    const w = yearWeekFromIso(isoTo.length === 7 ? isoTo + "-01" : isoTo);
    row.querySelector(".filter-week-year-to").value = w.year;
    row.querySelector(".filter-week-n-to").value = w.week;
    const q = quarterFromIso(isoTo);
    row.querySelector(".filter-quarter-year-to").value = q.year;
    row.querySelector(".filter-quarter-q-to").value = q.q;
  }
}
function periodValueIso(row, to) {
  const partId = row.querySelector(".filter-part").value;
  const meta = (FILTER_UI.date_parts || []).find((p) => p.id === partId);
  const picker = meta && meta.picker;
  const s = to ? "-to" : "";
  if (picker === "month") {
    const m = (row.querySelector(to ? ".filter-month-to" : ".filter-month").value || "").trim();
    return m ? m + "-01" : "";
  }
  if (picker === "week") {
    return dateFromYearWeek(
      row.querySelector(to ? ".filter-week-year-to" : ".filter-week-year").value,
      row.querySelector(to ? ".filter-week-n-to" : ".filter-week-n").value
    );
  }
  if (picker === "quarter") {
    return isoFromQuarter(
      row.querySelector(to ? ".filter-quarter-year-to" : ".filter-quarter-year").value,
      row.querySelector(to ? ".filter-quarter-q-to" : ".filter-quarter-q").value
    );
  }
  return "";
}
function fillFilterOps(sel, family, current) {
  const ids = FILTER_UI.families[family] || FILTER_UI.families.other;
  const keep = ids.indexOf(current) !== -1 ? current : ids[0];
  sel.innerHTML = "";
  ids.forEach((id) => {
    const opt = document.createElement("option");
    opt.value = id;
    const numericLabel = family === "numeric" && FILTER_UI.numeric_op_labels
      && FILTER_UI.numeric_op_labels[id];
    opt.textContent = numericLabel || (FILTER_UI.ops[id] && FILTER_UI.ops[id].label) || id;
    sel.appendChild(opt);
  });
  sel.value = keep;
  return keep;
}
function splitFilterTokens(raw) {
  return String(raw || "").replace(/\n/g, ",").split(",").map((s) => s.trim()).filter(Boolean);
}
function pillValues(row) {
  const pills = [...row.querySelectorAll(".filter-pill")].map((el) => el.dataset.value || "");
  const draft = splitFilterTokens((row.querySelector(".filter-pills-input") || {}).value || "");
  const seen = new Set();
  const out = [];
  pills.concat(draft).forEach((tok) => {
    if (!tok || seen.has(tok)) return;
    seen.add(tok);
    out.push(tok);
  });
  return out;
}
function addFilterPill(row, token) {
  const raw = String(token || "").trim();
  if (!raw) return;
  const numeric = row.dataset.family === "numeric";
  const stored = numeric ? canonNumber(raw) : raw;
  const shown = numeric ? displayNumberToken(stored) : raw;
  const host = row.querySelector(".filter-pills");
  const input = row.querySelector(".filter-pills-input");
  if ([...host.querySelectorAll(".filter-pill")].some((el) => el.dataset.value === stored)) return;
  const pill = document.createElement("span");
  pill.className = "filter-pill";
  pill.dataset.value = stored;
  const label = document.createElement("span");
  label.textContent = shown;
  label.title = shown;
  const btn = document.createElement("button");
  btn.type = "button";
  btn.setAttribute("aria-label", "Remove " + shown);
  btn.textContent = "×";
  btn.addEventListener("click", () => {
    pill.remove();
    scheduleEstimate();
    syncStaleNotes();
  });
  pill.appendChild(label);
  pill.appendChild(btn);
  host.insertBefore(pill, input);
}
function addPillsFromText(row, raw) {
  splitFilterTokens(raw).forEach((tok) => addFilterPill(row, tok));
}
function bindFilterPills(row) {
  const input = row.querySelector(".filter-pills-input");
  function commit() {
    addPillsFromText(row, input.value);
    input.value = "";
  }
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      commit();
      scheduleEstimate();
      return;
    }
    if (e.key === "Backspace" && !input.value) {
      const last = row.querySelector(".filter-pill:last-of-type");
      if (last) {
        last.remove();
        scheduleEstimate();
      }
    }
  });
  input.addEventListener("paste", (e) => {
    const text = (e.clipboardData && e.clipboardData.getData("text")) || "";
    if (!splitFilterTokens(text).length || (splitFilterTokens(text).length === 1 && !/[,\n]/.test(text))) return;
    e.preventDefault();
    addPillsFromText(row, text);
    scheduleEstimate();
  });
  input.addEventListener("blur", () => {
    if (!(input.value || "").trim()) return;
    commit();
    scheduleEstimate();
  });
}
function filterColumnOptions() {
  const skip = new Set([form.entity.value, eventColumnEl.value].filter(Boolean));
  return (columnCache || [])
    .filter((c) => {
      const name = c.name || c;
      return name && !skip.has(name);
    })
    .map((c) => (typeof c === "string" ? { value: c, label: c, type: "" } : {
      value: c.name,
      label: c.type ? c.name + " (" + c.type + ")" : c.name,
      type: String(c.type || "").toUpperCase(),
    }));
}
function syncFilterLine(row) {
  const colSel = row.querySelector(".filter-column");
  const cur = colSel.value;
  const cols = filterColumnOptions();
  fillSelect(
    colSel,
    cols,
    cur === CUSTOM_FILTER ? "" : cur,
    cur ? "" : "Choose a filter\u2026"
  );
  if (![...colSel.options].some((o) => o.value === CUSTOM_FILTER)) {
    const custom = document.createElement("option");
    custom.value = CUSTOM_FILTER;
    custom.textContent = t("sql_expr_ellipsis");
    colSel.appendChild(custom);
  }
  if (cur && cur !== CUSTOM_FILTER) ensureOption(colSel, cur);
  if (cur === CUSTOM_FILTER) colSel.value = CUSTOM_FILTER;
  cols.forEach((c) => {
    const opt = [...colSel.options].find((o) => o.value === c.value);
    if (opt) opt.dataset.type = c.type || "";
  });
  const json = cur && cur !== CUSTOM_FILTER && (
    isJsonColumn(cur) || !!(row.querySelector(".filter-json").value && cur)
  );
  const expr = cur === CUSTOM_FILTER;
  const opt = colSel.selectedOptions[0];
  const type = (opt && opt.dataset.type) || "";
  const eventTime = cur && cur === (form.event_time && form.event_time.value);
  let family = expr ? "string" : filterFamilyOf(type, json);
  if (!expr && eventTime && !json) family = "timestamp";
  const partSel = row.querySelector(".filter-part");
  const showPart = !expr && (family === "date" || family === "timestamp");
  partSel.hidden = !showPart;
  if (showPart) {
    const partId = fillDateParts(partSel, family, partSel.value);
    const meta = (FILTER_UI.date_parts || []).find((p) => p.id === partId);
    if (meta && meta.family) family = meta.family;
  }
  const opSel = row.querySelector(".filter-op");
  const op = fillFilterOps(opSel, family, opSel.value);
  const kind = filterOpKind(op);
  const none = kind === "none";
  const list = kind === "list";
  const two = kind === "two";
  const partMetaEarly = showPart
    ? (FILTER_UI.date_parts || []).find((p) => p.id === partSel.value)
    : null;
  const picker = (partMetaEarly && partMetaEarly.picker) || "";
  const periodPicker = picker === "week" || picker === "month" || picker === "quarter";
  const ts = !expr && !none && family === "timestamp";
  const dateFam = !expr && !none && (family === "date" || family === "timestamp") && !periodPicker;
  const timeFam = !expr && !none && family === "time";
  const numFam = !expr && !none && !list && family === "numeric";
  const enumNames = family === "weekday" ? orderedWeekdays()
    : (family === "monthname" ? (FILTER_UI.months || [])
    : (family === "hourname" ? (FILTER_UI.hours || []) : []));
  const showEnum = !expr && !none && kind === "one" && enumNames.length;
  const caseful = !expr && !none && family === "string"
    && op !== "is_empty" && op !== "is_not_empty";
  row.dataset.family = family;
  row.querySelector(".filter-json").hidden = !json;
  row.querySelector(".filter-expr").hidden = !expr;
  row.querySelector(".filter-op").hidden = expr;
  const val = row.querySelector(".filter-value");
  const pills = row.querySelector(".filter-pills");
  const enumSel = row.querySelector(".filter-enum");
  val.hidden = expr || none || list || showEnum || periodPicker;
  pills.hidden = expr || none || !list;
  enumSel.hidden = !showEnum;
  if (showEnum) fillEnumSelect(enumSel, enumNames, enumSel.value || val.value);
  const listEl = row.querySelector(".filter-enum-list");
  if (listEl) {
    listEl.innerHTML = "";
    enumNames.forEach((name) => {
      const opt = document.createElement("option");
      opt.value = name;
      listEl.appendChild(opt);
    });
  }
  if (list && !pills.querySelector(".filter-pill") && (val.value || "").trim()) {
    addPillsFromText(row, val.value);
    val.value = "";
  }
  const partMeta = showPart
    ? (FILTER_UI.date_parts || []).find((p) => p.id === partSel.value)
    : null;
  function bindNumberInput(el, placeholder) {
    const commaDec = (FILTER_UI.decimal_sep || "period") === "comma";
    el.type = commaDec ? "text" : "number";
    el.dataset.numeric = "1";
    const extract = !!(partMeta && partMeta.extract);
    const integerCol = (FILTER_UI.integer_types || []).indexOf(type) !== -1;
    const integer = extract || integerCol;
    if (commaDec) {
      el.removeAttribute("step");
    } else {
      el.step = integer ? "1" : "any";
    }
    if (partMeta && partMeta.min != null) el.min = String(partMeta.min);
    else el.removeAttribute("min");
    if (partMeta && partMeta.max != null) el.max = String(partMeta.max);
    else el.removeAttribute("max");
    el.placeholder = placeholder || (partMeta && partMeta.extract === "YEAR" ? "2026" : "Value");
  }
  if (!val.hidden) {
    if (numFam) bindNumberInput(val, partMeta && partMeta.extract === "YEAR" ? "2026" : "Value");
    else if (dateFam) {
      val.type = "date"; val.removeAttribute("min"); val.removeAttribute("max"); val.removeAttribute("step"); val.removeAttribute("data-numeric"); val.placeholder = "";
    } else if (timeFam) {
      val.type = "time"; val.step = "1"; val.removeAttribute("min"); val.removeAttribute("max"); val.removeAttribute("data-numeric"); val.placeholder = "";
    } else {
      val.type = "text"; val.removeAttribute("min"); val.removeAttribute("max"); val.removeAttribute("step"); val.removeAttribute("data-numeric"); val.placeholder = "Value";
    }
  }
  row.querySelector(".filter-value-time").hidden = !ts;
  if (ts) row.querySelector(".filter-value-time").step = picker === "hour" ? "3600" : "1";
  const valTo = row.querySelector(".filter-value-to");
  valTo.hidden = !two || periodPicker;
  ["month", "week", "quarter"].forEach((name) => {
    row.querySelector(".filter-period-" + name).hidden = expr || none || picker !== name;
    row.querySelector(".filter-period-" + name + "-to").hidden = expr || none || !two || picker !== name;
  });
  if (two) {
    if (numFam) bindNumberInput(valTo, "And");
    else if (dateFam) { valTo.type = "date"; valTo.placeholder = ""; }
    else if (timeFam) { valTo.type = "time"; valTo.step = "1"; valTo.placeholder = ""; }
    else { valTo.type = "text"; valTo.removeAttribute("data-numeric"); valTo.placeholder = "And"; }
  }
  row.querySelector(".filter-value-to-time").hidden = !(ts && two);
  row.querySelector(".filter-case").hidden = !caseful;
}
function readFilterLine(row) {
  const col = row.querySelector(".filter-column").value;
  const exprOn = col === CUSTOM_FILTER;
  const opt = row.querySelector(".filter-column").selectedOptions[0];
  const caseWrap = row.querySelector(".filter-case");
  const caseBox = row.querySelector(".filter-case-sensitive");
  const numeric = row.dataset.family === "numeric";
  function maybeCanon(raw) {
    return numeric ? canonNumber(raw) : raw;
  }
  const list = filterOpKind(row.querySelector(".filter-op").value || "is") === "list";
  const pills = list ? pillValues(row).map(maybeCanon) : [];
  const one = !row.querySelector(".filter-enum").hidden
    ? (row.querySelector(".filter-enum").value || "")
    : (periodValueIso(row, false) || maybeCanon(row.querySelector(".filter-value").value || ""));
  return {
    column: exprOn ? "" : col,
    json_key: exprOn || row.querySelector(".filter-json").hidden
      ? ""
      : (row.querySelector(".filter-json").value || "").trim(),
    op: row.querySelector(".filter-op").value || "is",
    date_part: row.querySelector(".filter-part").hidden
      ? ""
      : (row.querySelector(".filter-part").value || ""),
    value: list ? pills.join("\n") : one,
    values: pills,
    value_to: periodValueIso(row, true) || maybeCanon(row.querySelector(".filter-value-to").value || ""),
    value_time: row.querySelector(".filter-value-time").value || "",
    value_to_time: row.querySelector(".filter-value-to-time").value || "",
    expr: exprOn ? (row.querySelector(".filter-expr").value || "").trim() : "",
    type: (opt && opt.dataset.type) || "",
    case_sensitive: !!(caseWrap && !caseWrap.hidden && caseBox && caseBox.checked),
  };
}
function addFilterLine(host, init) {
  const data = init || {};
  const row = document.createElement("div");
  row.className = "filter-line";
  row.innerHTML = (
    '<select class="filter-column" aria-label="' + t("filter_column") + '"></select>'
    + '<input class="filter-json" placeholder="JSON key" autocomplete="off" aria-label="JSON key">'
    + '<select class="filter-part" aria-label="Date part" hidden></select>'
    + '<select class="filter-op" aria-label="' + t("filter_op") + '"></select>'
    + '<select class="filter-enum" aria-label="Filter value" hidden></select>'
    + '<input class="filter-value" placeholder="Value" autocomplete="off" aria-label="Filter value">'
    + '<div class="filter-pills" hidden><input class="filter-pills-input" placeholder="Add a value" autocomplete="off" aria-label="Add filter value"></div>'
    + '<datalist class="filter-enum-list"></datalist>'
    + '<div class="filter-period filter-period-month" hidden><input class="filter-month" type="month" aria-label="Month"></div>'
    + '<div class="filter-period filter-period-week" hidden>'
    + '<input class="filter-week-year" type="number" min="1000" max="9999" placeholder="Year" aria-label="Week year">'
    + '<input class="filter-week-n" type="number" min="1" max="53" placeholder="Week" aria-label="Week number">'
    + "</div>"
    + '<div class="filter-period filter-period-quarter" hidden>'
    + '<input class="filter-quarter-year" type="number" min="1000" max="9999" placeholder="Year" aria-label="Quarter year">'
    + '<select class="filter-quarter-q" aria-label="Quarter"></select>'
    + "</div>"
    + '<input class="filter-value-time" type="time" step="3600" aria-label="Time">'
    + '<input class="filter-value-to" placeholder="And" autocomplete="off" aria-label="Filter value to">'
    + '<div class="filter-period-to filter-period-month-to" hidden><input class="filter-month-to" type="month" aria-label="Month to"></div>'
    + '<div class="filter-period-to filter-period-week-to" hidden>'
    + '<input class="filter-week-year-to" type="number" min="1000" max="9999" placeholder="Year" aria-label="Week year to">'
    + '<input class="filter-week-n-to" type="number" min="1" max="53" placeholder="Week" aria-label="Week number to">'
    + "</div>"
    + '<div class="filter-period-to filter-period-quarter-to" hidden>'
    + '<input class="filter-quarter-year-to" type="number" min="1000" max="9999" placeholder="Year" aria-label="Quarter year to">'
    + '<select class="filter-quarter-q-to" aria-label="Quarter to"></select>'
    + "</div>"
    + '<input class="filter-value-to-time" type="time" step="3600" aria-label="End time">'
    + '<label class="filter-case"><input type="checkbox" class="filter-case-sensitive"> Case sensitive</label>'
    + '<input class="filter-expr" placeholder="SQL boolean" autocomplete="off" aria-label="' + t("filter_sql") + '">'
    + '<button type="button" class="linkish filter-remove">Remove</button>'
  );
  const opSel = row.querySelector(".filter-op");
  fillQuarterSelect(row.querySelector(".filter-quarter-q"));
  fillQuarterSelect(row.querySelector(".filter-quarter-q-to"));
  row.querySelector(".filter-json").value = data.json_key || "";
  row.querySelector(".filter-expr").value = data.expr || "";
  const caseBox = row.querySelector(".filter-case-sensitive");
  if (data.case_sensitive === true || data.case_sensitive === false) {
    caseBox.checked = !!data.case_sensitive;
  } else {
    caseBox.checked = defaultCaseSensitive(data.op || "is");
  }
  const addBtn = host.querySelector(":scope > .add-card-filter");
  if (addBtn) host.insertBefore(row, addBtn);
  else host.appendChild(row);
  filterListSeq += 1;
  const listId = "filter-enum-list-" + filterListSeq;
  row.querySelector(".filter-enum-list").id = listId;
  row.querySelector(".filter-pills-input").setAttribute("list", listId);
  const colSel = row.querySelector(".filter-column");
  const partSel = row.querySelector(".filter-part");
  const enumSel = row.querySelector(".filter-enum");
  const want = data.expr ? CUSTOM_FILTER : (data.column || "");
  function applyValues() {
    const numeric = row.dataset.family === "numeric";
    const show = (v) => (numeric ? displayNumberToken(v || "") : (v || ""));
    row.querySelector(".filter-value").value = show(data.value);
    row.querySelector(".filter-value-to").value = show(data.value_to);
    row.querySelector(".filter-value-time").value = data.value_time || "";
    row.querySelector(".filter-value-to-time").value = data.value_to_time || "";
    if (data.value && enumSel.options.length) {
      enumSel.value = matchDisplayName([...enumSel.options].map((o) => o.value), data.value);
    }
    seedPeriodInputs(row, data.value || "", data.value_to || "");
  }
  syncFilterLine(row);
  if (want) {
    if (want !== CUSTOM_FILTER) ensureOption(colSel, want);
    colSel.value = want;
    syncFilterLine(row);
  }
  if (data.date_part) {
    partSel.value = data.date_part;
    syncFilterLine(row);
  }
  if (data.op) {
    ensureOption(opSel, data.op);
    opSel.value = data.op;
    syncFilterLine(row);
  }
  applyValues();
  addPillsFromText(row, Array.isArray(data.values) && data.values.length
    ? data.values.join("\n")
    : (filterOpKind(data.op || "is") === "list" ? (data.value || "") : ""));
  bindFilterPills(row);
  colSel.addEventListener("change", () => { syncFilterLine(row); scheduleEstimate(); });
  partSel.addEventListener("change", () => { syncFilterLine(row); scheduleEstimate(); });
  enumSel.addEventListener("change", () => { scheduleEstimate(); });
  opSel.addEventListener("change", () => {
    const op = opSel.value;
    if ((FILTER_UI.like_ops || []).indexOf(op) !== -1) caseBox.checked = false;
    else if ((FILTER_UI.exact_string_ops || []).indexOf(op) !== -1) caseBox.checked = true;
    syncFilterLine(row);
    scheduleEstimate();
  });
  ["filter-value", "filter-value-to", "filter-value-time", "filter-value-to-time",
    "filter-json", "filter-expr", "filter-month", "filter-month-to",
    "filter-week-year", "filter-week-n", "filter-week-year-to", "filter-week-n-to",
    "filter-quarter-year", "filter-quarter-q", "filter-quarter-year-to", "filter-quarter-q-to"
    ].forEach((cls) => {
    row.querySelector("." + cls).addEventListener("change", () => {
      syncFilterLine(row);
      scheduleEstimate();
    });
  });
  caseBox.addEventListener("change", () => { scheduleEstimate(); });
  row.querySelector(".filter-remove").addEventListener("click", () => {
    row.remove();
    scheduleEstimate();
    syncStaleNotes();
  });
}
function breakdownBySeries() {
  return document.getElementById("breakdown_by_series").checked;
}
function syncSeriesBdSlot(slot) {
  const sel = slot.querySelector(".series-bd-column");
  const col = sel.value;
  const json = col && col !== CUSTOM_BREAKDOWN && (
    isJsonColumn(col) || !!(slot.querySelector(".series-bd-json").value && col)
  );
  slot.querySelector(".series-bd-json").hidden = !json;
  slot.querySelector(".series-bd-expr").hidden = col !== CUSTOM_BREAKDOWN;
  syncValueControls(slot);
}
function readSeriesBdSlot(slot) {
  const col = slot.querySelector(".series-bd-column").value;
  const exprOn = col === CUSTOM_BREAKDOWN;
  return Object.assign({
    breakdown_column: exprOn ? "" : col,
    breakdown_json_key: exprOn || slot.querySelector(".series-bd-json").hidden
      ? ""
      : (slot.querySelector(".series-bd-json").value || "").trim(),
    breakdown_expr: exprOn ? (slot.querySelector(".series-bd-expr").value || "").trim() : "",
  }, readValueControls(slot));
}
function readSeriesBd(host) {
  const wrap = host.querySelector(":scope > .series-bd");
  if (!wrap) return {};
  const slots = [...wrap.querySelectorAll(".series-bd-slot")].map(readSeriesBdSlot)
    .filter((s) => s.breakdown_column || s.breakdown_expr);
  const first = slots[0] || {};
  return {
    breakdown_column: first.breakdown_column || "",
    breakdown_json_key: first.breakdown_json_key || "",
    breakdown_expr: first.breakdown_expr || "",
    breakdowns: slots,
  };
}
function applyMeasureLabels(sel) {
  const w = (document.getElementById("entity_label").value || "").trim() || "User";
  const p = (document.getElementById("entity_label_plural").value || "").trim() || (w + "s");
  const sql = FILTER_UI.vocab === "sql";
  for (const o of sel.options) {
    if (o.value === "total") { o.textContent = t("volume"); o.title = "Count of event rows in the bucket"; }
    else if (o.value === "uniques") {
      o.textContent = sql ? t("unique") : t("unique").replace("{plural}", p);
      o.title = "Count distinct of the mapped entity id (" + p + ")";
    }
    else if (o.value === "average") {
      o.textContent = sql ? t("average_per") : t("average_per").replace("{singular}", w);
      o.title = "Volume divided by unique " + p.toLowerCase();
    }
    else if (o.value === "sum") { o.textContent = t("property_sum"); o.title = "Sum of a numeric column"; }
    else if (o.value === "property_average") { o.textContent = t("property_average"); o.title = "Average of a numeric column"; }
    else if (o.value === "median") { o.textContent = t("property_median"); o.title = "Median of a numeric column"; }
    else if (o.value === "distinct") {
      o.textContent = sql ? t("property_distinct") : t("property_distinct").replace("{singular}", w);
      o.title = "Mean distinct values of a column per " + w.toLowerCase();
    }
  }
}
function seriesMeasureSelect(host) {
  if (!host) return null;
  return host.querySelector(":scope > .event-card-head > .series-measure, :scope > .event-group-head > .series-measure, :scope > .series-measure");
}
function formMeasureValue(unit) {
  const src = unit || {};
  let measure = src.measure || "uniques";
  if ((src.on || "") === "property" && measure === "average") return "property_average";
  return measure;
}
function savedMeasureFields() {
  return {
    measure: formMeasureValue(saved),
    on: saved.on || "",
    of_column: saved.of_column || "",
    of_json_key: saved.of_json_key || "",
    of_expr: saved.of_expr || "",
  };
}
function withMeasure(unit) {
  const u = Object.assign({}, unit || {});
  if (!u.measure) Object.assign(u, savedMeasureFields(), u);
  u.measure = formMeasureValue(u);
  return u;
}
function syncSeriesMeasure(host) {
  const sel = seriesMeasureSelect(host);
  const ofWrap = host.querySelector(":scope > .series-of");
  if (!sel || !ofWrap) return;
  const prop = isPropertyMeasureValue(sel.value);
  ofWrap.hidden = !prop;
  if (!prop) return;
  const colSel = ofWrap.querySelector(".series-of-column");
  paintOfSelect(colSel, colSel.value, sel.value);
  const col = colSel.value;
  const json = col && col !== CUSTOM_OF && (
    isJsonColumn(col) || !!(ofWrap.querySelector(".series-of-json").value && col)
  );
  ofWrap.querySelector(".series-of-json").hidden = !json;
  ofWrap.querySelector(".series-of-expr").hidden = col !== CUSTOM_OF;
}
function readSeriesMeasure(host) {
  const sel = seriesMeasureSelect(host);
  const ofWrap = host.querySelector(":scope > .series-of");
  if (!sel) return {};
  const col = ofWrap ? ofWrap.querySelector(".series-of-column").value : "";
  const exprOn = col === CUSTOM_OF;
  const prop = isPropertyMeasureValue(sel.value);
  return {
    measure: sel.value,
    on: prop ? "property" : "events",
    of_column: !prop || exprOn ? "" : col,
    of_json_key: !prop || exprOn || !ofWrap || ofWrap.querySelector(".series-of-json").hidden
      ? ""
      : (ofWrap.querySelector(".series-of-json").value || "").trim(),
    of_expr: !prop || !exprOn || !ofWrap ? "" : (ofWrap.querySelector(".series-of-expr").value || "").trim(),
  };
}
function attachSeriesMeasure(host, data) {
  const init = data || {};
  const sel = document.getElementById("measure").cloneNode(true);
  sel.removeAttribute("id");
  sel.removeAttribute("name");
  sel.className = "series-measure";
  sel.setAttribute("aria-label", "Measure");
  applyMeasureLabels(sel);
  sel.value = formMeasureValue(init);
  const ofWrap = document.createElement("div");
  ofWrap.className = "series-of";
  ofWrap.innerHTML = (
    "<label>" + tHtml("of") + "</label>"
    + '<select class="series-of-column" aria-label="' + t("of") + '"></select>'
    + '<input class="series-of-json" placeholder="JSON key" autocomplete="off" aria-label="Of JSON key">'
    + '<input class="series-of-expr" placeholder="' + t("sql_expr") + '" autocomplete="off" aria-label="Of SQL">'
  );
  const head = host.querySelector(".event-card-head, .event-group-head");
  const before = head.querySelector(".event-card-remove, .event-group-split");
  if (before) head.insertBefore(sel, before);
  else head.appendChild(sel);
  head.after(ofWrap);
  paintOfSelect(
    ofWrap.querySelector(".series-of-column"),
    init.of_expr ? CUSTOM_OF : (init.of_column || ""),
    sel.value
  );
  ofWrap.querySelector(".series-of-json").value = init.of_json_key || "";
  ofWrap.querySelector(".series-of-expr").value = init.of_expr || "";
  sel.addEventListener("change", () => { syncSeriesMeasure(host); syncExact(); scheduleEstimate(); });
  ofWrap.querySelector(".series-of-column").addEventListener("change", () => {
    syncSeriesMeasure(host); scheduleEstimate();
  });
  syncSeriesMeasure(host);
}
function seriesBdSlotCount(wrap) {
  return wrap.querySelectorAll(".series-bd-slot").length;
}
function addSeriesBdSlot(wrap, init) {
  if (seriesBdSlotCount(wrap) >= BREAKDOWN_SLOT_CAP) return;
  const data = normalizeBreakdownSlot(init);
  const slot = document.createElement("div");
  slot.className = "series-bd-slot";
  const extra = seriesBdSlotCount(wrap) > 0;
  slot.innerHTML = (
    (extra ? "" : "<label>" + tHtml("breakdown") + "</label>")
    + '<div class="series-bd-row">'
    + '<select class="series-bd-column" aria-label="' + t("breakdown") + '"></select>'
    + (extra ? '<button type="button" class="linkish remove-breakdown">Remove</button>' : "")
    + "</div>"
    + '<input class="series-bd-json" placeholder="JSON key" autocomplete="off" aria-label="JSON key">'
    + '<input class="series-bd-expr" placeholder="' + t("sql_expr") + '" autocomplete="off" aria-label="Breakdown SQL">'
  );
  const list = wrap.querySelector(".series-bd-list") || wrap;
  list.appendChild(slot);
  const sel = slot.querySelector(".series-bd-column");
  const want = data.breakdown_expr ? CUSTOM_BREAKDOWN : (data.breakdown_column || "");
  paintBreakdownSelect(sel, want);
  slot.querySelector(".series-bd-json").value = data.breakdown_json_key || "";
  slot.querySelector(".series-bd-expr").value = data.breakdown_expr || "";
  sel.addEventListener("change", () => { syncSeriesBdSlot(slot); syncBreakdownMode(); scheduleEstimate(); });
  const remove = slot.querySelector(".remove-breakdown");
  if (remove) {
    remove.addEventListener("click", () => {
      slot.remove();
      syncSeriesBdAdd(wrap);
      syncBreakdownMode();
      scheduleEstimate();
      syncStaleNotes();
    });
  }
  attachValueControls(slot, data, () => { syncBreakdownMode(); scheduleEstimate(); });
  syncSeriesBdSlot(slot);
  syncSeriesBdAdd(wrap);
}
function syncSeriesBdAdd(wrap) {
  const row = wrap.querySelector(":scope > .fc-plus-row");
  if (row) row.hidden = seriesBdSlotCount(wrap) >= BREAKDOWN_SLOT_CAP;
}
function attachSeriesBd(host, init) {
  const data = init || {};
  const wrap = document.createElement("div");
  wrap.className = "series-bd";
  wrap.innerHTML = '<div class="series-bd-list"></div>' + plusRowHtml(t("add_breakdown"), "add-series-bd");
  host.appendChild(wrap);
  const slots = Array.isArray(data.breakdowns) && data.breakdowns.length
    ? data.breakdowns.map(normalizeBreakdownSlot)
    : (data.breakdown_column || data.breakdown_expr ? [normalizeBreakdownSlot(data)] : [{}]);
  slots.slice(0, BREAKDOWN_SLOT_CAP).forEach((slot) => addSeriesBdSlot(wrap, slot));
  if (!seriesBdSlotCount(wrap)) addSeriesBdSlot(wrap, {});
  wrap.querySelector(".add-series-bd").addEventListener("click", () => {
    addSeriesBdSlot(wrap, {});
    scheduleEstimate();
    syncStaleNotes();
  });
  syncSeriesBdAdd(wrap);
  return wrap;
}
function copyBreakdownToSeries() {
  const src = chartBreakdownSlots();
  document.querySelectorAll("#event-cards > .event-series").forEach((host) => {
    const wrap = host.querySelector(":scope > .series-bd");
    if (!wrap) return;
    wrap.querySelector(".series-bd-list").innerHTML = "";
    (src.length ? src : [{}]).forEach((slot) => addSeriesBdSlot(wrap, slot));
  });
}
function anySeriesHasBreakdown() {
  return collectSeries().some((u) =>
    (u.breakdown_column || u.breakdown_expr)
    || (Array.isArray(u.breakdowns) && u.breakdowns.some((s) => s && (s.breakdown_column || s.breakdown_expr)))
  );
}
function syncBreakdownMode() {
  const per = breakdownBySeries();
  document.getElementById("breakdown-chart").hidden = per;
  document.querySelectorAll("#event-cards > .event-series > .series-bd").forEach((el) => {
    el.hidden = !per;
  });
  document.querySelectorAll(".event-group-members .series-bd").forEach((el) => { el.hidden = true; });
  const filled = per ? anySeriesHasBreakdown() : chartBreakdownSlots().length;
  document.getElementById("breakdown-extra").hidden = !filled;
  if (typeof syncExact === "function") syncExact();
}
function readCard(card) {
  return {
    event: (card.querySelector(".event-card-name").value || "").trim(),
    filters: [...card.querySelectorAll(".filter-line")].map(readFilterLine),
  };
}
function addEventCard(init, parent, before) {
  const data = init || {};
  const nested = !!(parent && parent !== eventCardsEl);
  const card = document.createElement("section");
  card.className = "event-card";
  card.innerHTML = (
    '<div class="event-card-head">'
    + '<select class="event-card-name" aria-label="Event"></select>'
    + '<button type="button" class="linkish event-card-remove">Remove</button>'
    + "</div>"
    + '<div class="event-card-filters">'
    + '<button type="button" class="linkish add-card-filter">' + tHtml("add_filter") + "</button>"
    + "</div>"
  );
  const host = parent || eventCardsEl;
  if (!nested) card.classList.add("event-series");
  if (before) host.insertBefore(card, before);
  else host.appendChild(card);
  const nameSel = card.querySelector(".event-card-name");
  fillEventNameSelect(nameSel, data.event || "");
  nameSel.hidden = !eventColumnEl.value;
  const filtersEl = card.querySelector(".event-card-filters");
  (data.filters || []).forEach((f) => addFilterLine(filtersEl, f));
  if (!nested) {
    attachSeriesMeasure(card, data);
    const combineRow = document.createElement("div");
    combineRow.className = "fc-plus-row";
    combineRow.innerHTML = plusBtn(t("combine"), "event-card-combine");
    card.appendChild(combineRow);
    combineRow.querySelector(".event-card-combine").addEventListener("click", () => combineCard(card));
    attachSeriesBd(card, data);
    nameSel.addEventListener("change", () => {
      syncCombinePlus(card);
      scheduleEstimate();
      syncStaleNotes();
    });
    syncCombinePlus(card);
  }
  card.querySelector(".add-card-filter").addEventListener("click", () => {
    addFilterLine(filtersEl);
    scheduleEstimate();
  });
  card.querySelector(".event-card-remove").addEventListener("click", () => {
    const nest = card.parentElement;
    const root = nest === eventCardsEl;
    card.remove();
    if (root && !topSeriesCount()) addEventCard({});
    else if (!root && nest && nest.classList.contains("event-group-members")
      && nest.querySelectorAll(":scope > .event-card").length < 2) {
      splitGroup(nest.parentElement);
    } else if (!root && nest && nest.classList.contains("event-group-members")) {
      syncGroupJoins(nest.parentElement);
    }
    scheduleEstimate();
    syncStaleNotes();
    syncBreakdownMode();
    syncSeriesChrome();
  });
  syncBreakdownMode();
  syncSeriesChrome();
  return card;
}
function syncGroupJoins(group) {
  const nest = group.querySelector(".event-group-members");
  if (!nest) return;
  nest.querySelectorAll(":scope > .fc-plus-row, :scope > .fc-or").forEach((el) => el.remove());
  const cards = [...nest.querySelectorAll(":scope > .event-card")];
  cards.forEach((card, i) => {
    if (i < cards.length - 1) {
      const or = document.createElement("div");
      or.className = "fc-or";
      or.innerHTML = tHtml("event_or");
      card.after(or);
    }
  });
  const last = cards[cards.length - 1];
  if (!last) return;
  const row = document.createElement("div");
  row.className = "fc-plus-row";
  row.innerHTML = plusBtn(t("add_group_event"), "add-group-event");
  last.after(row);
  row.querySelector(".add-group-event").addEventListener("click", () => {
    addEventCard({}, nest);
    syncGroupJoins(group);
    scheduleEstimate();
  });
}
function addAnyOf(members, bd, before) {
  const group = document.createElement("section");
  group.className = "event-group event-series";
  group.innerHTML = (
    '<div class="event-group-head">'
    + '<span class="event-group-title">' + tHtml("any_of") + "</span>"
    + '<button type="button" class="linkish event-group-split">Split</button>'
    + '<button type="button" class="linkish event-group-remove">Remove</button>'
    + "</div>"
    + '<div class="event-group-members"></div>'
  );
  if (before) eventCardsEl.insertBefore(group, before);
  else eventCardsEl.appendChild(group);
  const nest = group.querySelector(".event-group-members");
  const seed = members && members.length ? members : [{}, {}];
  seed.forEach((m) => addEventCard(m, nest));
  if (FILTER_UI.vocab === "sql") group.querySelector(".event-group-title").hidden = true;
  attachSeriesMeasure(group, bd || {});
  attachSeriesBd(group, bd || {});
  syncGroupJoins(group);
  group.querySelector(".event-group-split").addEventListener("click", () => splitGroup(group));
  group.querySelector(".event-group-remove").addEventListener("click", () => {
    group.remove();
    if (!topSeriesCount()) addEventCard({});
    scheduleEstimate();
    syncStaleNotes();
    syncBreakdownMode();
    syncSeriesChrome();
  });
  syncBreakdownMode();
  syncSeriesChrome();
  return group;
}
function combineCard(card) {
  const data = readCard(card);
  Object.assign(data, readSeriesBd(card), readSeriesMeasure(card));
  addAnyOf([data, {}], Object.assign({}, readSeriesBd(card), readSeriesMeasure(card)), card);
  card.remove();
  scheduleEstimate();
  syncStaleNotes();
  syncBreakdownMode();
  syncSeriesChrome();
}
function splitGroup(group) {
  if (!group || !group.classList.contains("event-group")) return;
  const extra = Object.assign({}, readSeriesBd(group), readSeriesMeasure(group));
  const members = [...group.querySelectorAll(":scope > .event-group-members > .event-card")].map((c) => {
    return Object.assign(readCard(c), extra);
  });
  members.reverse().forEach((m) => addEventCard(m, eventCardsEl, group));
  group.remove();
  if (!topSeriesCount()) addEventCard({});
  scheduleEstimate();
  syncStaleNotes();
  syncBreakdownMode();
  syncSeriesChrome();
}
function collectSeries() {
  const units = [];
  [...eventCardsEl.children].forEach((node) => {
    if (node.classList.contains("event-group")) {
      const members = [...node.querySelectorAll(":scope > .event-group-members > .event-card")].map(readCard);
      units.push(Object.assign({ kind: "any_of", members }, readSeriesBd(node), readSeriesMeasure(node)));
    } else if (node.classList.contains("event-card")) {
      units.push(Object.assign(readCard(node), readSeriesBd(node), readSeriesMeasure(node)));
    }
  });
  return units;
}
function seriesIncomplete() {
  for (const unit of collectSeries()) {
    const cards = unit.kind === "any_of" ? (unit.members || []) : [unit];
    for (const card of cards) {
      if (eventColumnEl.value && !card.event) return "Pick an event.";
      for (const row of card.filters || []) {
        if (row.expr) continue;
        if (!row.column) continue;
        if ((isJsonColumn(row.column) || row.json_key) && !row.json_key) return "Enter a JSON key.";
        const kind = filterOpKind(row.op);
        if (kind === "none") continue;
        if (kind === "two" && (!(row.value || "").trim() || !(row.value_to || "").trim())) {
          return "Enter a filter value.";
        }
        if (kind === "list") {
          if (!(row.values || []).length && !(row.value || "").trim()) return "Enter a filter value.";
          continue;
        }
        if (!(row.value || "").trim()) return "Enter a filter value.";
      }
    }
    if (isPropertyMeasureValue(unit.measure) && !((unit.of_expr || "").trim() || (unit.of_column || "").trim())) {
      return "Pick a column.";
    }
    if (isPropertyMeasureValue(unit.measure) && unit.of_column && (isJsonColumn(unit.of_column) || unit.of_json_key) && !unit.of_json_key) {
      return "Enter a JSON key.";
    }
    const bdSlots = Array.isArray(unit.breakdowns) && unit.breakdowns.length
      ? unit.breakdowns
      : [unit];
    if (breakdownBySeries()) {
      for (const slot of bdSlots) {
        if (slot.breakdown_column
          && (isJsonColumn(slot.breakdown_column) || slot.breakdown_json_key)
          && !slot.breakdown_json_key) return "Enter a JSON key.";
      }
    }
  }
  return "";
}
function seedSeries() {
  const listed = Array.isArray(saved.series) ? saved.series : [];
  if (listed.length) {
    listed.forEach((unit) => {
      if (unit && (unit.kind === "any_of" || unit.members || unit.any_of)) {
        addAnyOf(unit.members || unit.any_of || [], withMeasure(unit));
      } else addEventCard(withMeasure(unit || {}));
    });
    return;
  }
  const names = savedEventNames();
  const filters = Array.isArray(saved.filters) ? saved.filters : [];
  const measure = savedMeasureFields();
  if (names.length > 1) {
    addAnyOf(names.map((n) => ({ event: n, filters })), measure);
    return;
  }
  addEventCard(Object.assign({ event: names[0] || "", filters }, measure));
}
document.getElementById("add-event").addEventListener("click", () => {
  if (topSeriesCount() >= SERIES_CAP) return;
  const last = eventCardsEl.querySelector(":scope > .event-series:last-child");
  addEventCard(last ? readSeriesMeasure(last) : {});
  if (breakdownBySeries()) copyBreakdownToSeries();
  scheduleEstimate();
  syncStaleNotes();
  syncSeriesChrome();
});
seedSeries();
document.getElementById("breakdown_by_series").addEventListener("change", () => {
  if (breakdownBySeries()) copyBreakdownToSeries();
  syncBreakdownMode();
  scheduleEstimate();
  syncStaleNotes();
});
breakdownColumnEl.addEventListener("change", syncBreakdownUi);
document.getElementById("add-breakdown").addEventListener("click", () => {
  addChartBreakdownSlot({});
  syncBreakdownUi();
  scheduleEstimate();
  syncStaleNotes();
});
document.getElementById("bd-null-nudge-fix").addEventListener("click", () => {
  if (!nudgeSlotEl || !document.contains(nudgeSlotEl)) { hideNullNudge(); return; }
  const miss = nudgeSlotEl.querySelector(".bd-value-controls .bd-if-missing");
  if (miss && !miss.disabled) {
    // Programmatic value set fires no change event: sync everything the
    // change handler would have, stale-results banner included.
    miss.value = "fill";
    syncValueControls(nudgeSlotEl);
    scheduleEstimate();
    syncStaleNotes();
  }
  hideNullNudge();
});
ofColumnEl.addEventListener("change", syncOfUi);
function authBody() {
  return {
    project: projectEl.value.trim(),
    data_project: dataProjectEl.value.trim(),
    credentials: credentialsEl.value.trim(),
  };
}
function writeDestReady() {
  const kind = document.getElementById("kind").value || "bigquery";
  if (kind === "snowflake") {
    return !!(
      document.getElementById("write_database").value.trim() &&
      document.getElementById("write_schema").value.trim()
    );
  }
  return !!(
    document.getElementById("write_project").value.trim() &&
    document.getElementById("write_dataset").value.trim()
  );
}
function catalogLookbackDays() {
  const raw = document.getElementById("catalog_lookback_days").value;
  if (raw === "" || raw == null) return 90;
  const n = Number(raw);
  return Number.isFinite(n) && n >= 0 ? n : 90;
}
const LOOKBACK_CHOICES = [
  { days: 30, label: "Look back 1 month" },
  { days: 90, label: "Look back 3 months" },
  { days: 180, label: "Look back 6 months" },
  { days: 365, label: "Look back 12 months" },
  { days: 0, label: "All time", hint: "Scans the whole events table" },
];
function syncFindEvent() {
  const trigger = document.getElementById("find-event");
  const panel = document.getElementById("find-event-panel");
  const host = document.getElementById("find-event-options");
  if (!trigger || !panel || !host) return;
  const n = catalogLookbackDays();
  const show = !writeDestReady() && n !== 0;
  trigger.hidden = !show;
  if (!show) {
    panel.hidden = true;
    trigger.setAttribute("aria-expanded", "false");
    syncRefreshHint();
    return;
  }
  const minDays = n * 2;
  host.innerHTML = "";
  LOOKBACK_CHOICES.forEach((choice) => {
    if (choice.days !== 0 && choice.days < minDays) return;
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "find-event-opt";
    btn.textContent = choice.label;
    if (choice.hint) {
      const hint = document.createElement("span");
      hint.className = "hint";
      hint.textContent = choice.hint;
      btn.appendChild(hint);
    }
    btn.addEventListener("click", () => {
      document.getElementById("catalog_lookback_days").value = String(choice.days);
      panel.hidden = true;
      trigger.setAttribute("aria-expanded", "false");
      syncFindEvent();
      eventNameList.refresh();
    });
    host.appendChild(btn);
  });
  syncRefreshHint();
}
function syncSnapshotHint() {
  const el = document.getElementById("event-names-snapshot");
  if (el) el.hidden = !writeDestReady() || eventNameCacheMeta.kind !== "table";
}
function syncRefreshHint() {
  const btn = document.getElementById("refresh-events");
  if (!btn) return;
  let title;
  if (writeDestReady()) {
    title = eventNameCacheMeta.kind === "table"
      ? "Rebuild the snapshot of event names in the warehouse."
      : "Reload event names from the Factcat-managed cache.";
  } else {
    const n = catalogLookbackDays();
    title = !n
      ? "Reload event names from all time."
      : "Reload event names seen in the last " + n + " day" + (n === 1 ? "" : "s")
        + ". Use the arrow to look further back.";
  }
  btn.title = title;
  btn.setAttribute("aria-label", title);
}
const eventNameList = bindCachedList({
  items: cachedEventNames || [],
  paint: (items) => {
    eventNameCache = items || [];
    document.querySelectorAll(".event-card-name").forEach((sel) => fillEventNameSelect(sel, sel.value));
    repaintFillEventSelects();
    syncSeriesChrome();
  },
  loadingFor: [document.getElementById("event_value")],
  statusFor: document.getElementById("event-names-status"),
  statusText: (user) => {
    if (writeDestReady()) {
      if (user && eventNameCacheMeta.kind === "table") {
        return "Rebuilding the event-name snapshot…";
      }
      if (!eventNameCacheMeta.kind) return "Creating event-name cache…";
      return "Loading event names from the cache…";
    }
    const n = catalogLookbackDays();
    if (!n) return "Loading event names from all time…";
    if (n === 1) return "Loading event names seen in the last day…";
    return "Loading event names seen in the last " + n + " days…";
  },
  refreshButtons: [document.getElementById("refresh-events")],
  loadIfEmpty: true,
  async load(opts) {
    if (!eventColumnEl.value || !tableEl.value) return null;
    const kind = document.getElementById("kind").value || "bigquery";
    if (kind !== "snowflake" && !locationEl.value) return null;
    const user = !!(opts && opts.user);
    const data = await post("/api/event_values", {
      ...authBody(),
      kind,
      table: tableEl.value,
      location: locationEl.value,
      event_column: eventColumnEl.value,
      event_time: eventTimeEl.value,
      catalog: true,
      catalog_lookback_days: catalogLookbackDays(),
      rebuild: user && eventNameCacheMeta.kind === "table",
      event_name_cache: eventNameCacheMeta,
      write_project: document.getElementById("write_project").value,
      write_dataset: document.getElementById("write_dataset").value,
      write_schema: document.getElementById("write_schema").value,
      write_database: document.getElementById("write_database").value,
      account: document.getElementById("account").value,
      user: document.getElementById("user").value,
      warehouse: document.getElementById("warehouse").value,
      database: document.getElementById("database").value,
      schema: document.getElementById("schema").value,
      role: document.getElementById("role").value,
      private_key_path: document.getElementById("private_key_path").value,
      snowflake_auth: document.getElementById("snowflake_auth").value,
      reporting_timezone: document.getElementById("reporting_timezone").value,
      event_time_tz: document.getElementById("event_time_tz").value,
      event_time_epoch: document.getElementById("event_time_epoch").value,
    });
    if (!data.ok) {
      setError(data.error || "Could not refresh events");
      return null;
    }
    document.getElementById("catalog_lookback_days").value = String(catalogLookbackDays());
    if (data.kind) {
      eventNameCacheMeta = {
        v: 1,
        table: tableEl.value,
        event_column: eventColumnEl.value,
        kind: data.kind,
      };
    }
    // A lookback fallback keeps the stored fingerprint (the server does
    // too): a degraded load must not zero the cache state.
    document.getElementById("event-names-fallback").hidden = !data.fallback;
    syncFindEvent();
    syncSnapshotHint();
    syncRefreshHint();
    return data.values || [];
  },
});
syncFindEvent();
syncSnapshotHint();
document.getElementById("find-event").addEventListener("click", () => {
  const panel = document.getElementById("find-event-panel");
  const trigger = document.getElementById("find-event");
  if (!panel || trigger.hidden) return;
  const open = panel.hidden;
  panel.hidden = !open;
  trigger.setAttribute("aria-expanded", open ? "true" : "false");
});
document.getElementById("refresh-events").addEventListener("click", () => {
  const panel = document.getElementById("find-event-panel");
  const trigger = document.getElementById("find-event");
  if (panel) panel.hidden = true;
  if (trigger) trigger.setAttribute("aria-expanded", "false");
});
bindCachedList({
  items: columnCache,
  paint: paintColumns,
  loadingFor: [breakdownColumnEl, ofColumnEl],
  refreshButtons: [
    document.getElementById("refresh-columns"),
    document.getElementById("refresh-of"),
  ],
  loadIfEmpty: true,
  async load() {
    const data = await post("/api/columns", {
      project: projectEl.value.trim(),
      data_project: dataProjectEl.value.trim(),
      credentials: credentialsEl.value.trim(),
      dataset: document.getElementById("dataset").value,
      table_name: document.getElementById("table_name").value,
    });
    if (!data.ok) {
      setError(data.error || "Could not refresh columns");
      return null;
    }
    return data.columns || [];
  },
});
function currentGrain() {
  return grainEl.value || "day";
}
function fillRangeOptions(grain, selected) {
  rangeChoiceEl.innerHTML = "";
  let group = null;
  for (const item of RANGE_PRESETS[grain] || RANGE_PRESETS.day) {
    if (item.group != null) {
      if (!item.group) {
        group = null;
        continue;
      }
      group = document.createElement("optgroup");
      group.label = item.group;
      rangeChoiceEl.appendChild(group);
      continue;
    }
    const opt = document.createElement("option");
    opt.value = item.value;
    opt.textContent = item.label;
    (group || rangeChoiceEl).appendChild(opt);
  }
  if (selected && [...rangeChoiceEl.options].some((o) => o.value === selected)) {
    rangeChoiceEl.value = selected;
  }
}
function rangeWindowUnit(grain) {
  if (grain === "hour" || grain === "hour_of_day") return "day";
  if (grain === "day_of_week") return "week";
  return grain;
}
function isCyclicGrain(grain) {
  return grain === "day_of_week" || grain === "hour_of_day";
}
function canPickRangeUnit(grain) {
  return isCyclicGrain(grain);
}
function includeDefaultForUnit(unit) {
  return unit === "day" || unit === "hour";
}
function includeLabelForUnit(unit) {
  return INCLUDE_LABEL[unit] || "Include today";
}
function calendarUnit(unit, fallback) {
  return RANGE_UNITS.includes(unit) ? unit : fallback;
}
function presetsFor(grain) {
  return (RANGE_PRESETS[grain] || RANGE_PRESETS.day).filter((p) => p.value);
}
function choiceFromSaved(grain) {
  const defs = GRAIN_DEFAULTS[grain] || GRAIN_DEFAULTS.day;
  const mode = saved.range_mode || "last";
  const n = String(saved.range_n || defs.n);
  const unit = saved.range_unit || rangeWindowUnit(grain);
  const presets = presetsFor(grain);
  if (mode === "custom") return "custom";
  if (mode === "this" || mode === "previous") {
    const v = mode + ":" + unit;
    if (presets.some((p) => p.value === v)) return v;
    return defs.choice;
  }
  if (mode === "last") {
    const named = "last:" + n + ":" + unit;
    if (presets.some((p) => p.value === named)) return named;
    return "last:n";
  }
  return defs.choice;
}
function saveRangeForGrain(grain) {
  rangeByGrain[grain] = {
    choice: rangeChoiceEl.value || GRAIN_DEFAULTS[grain].choice,
    n: Number(rangeNEl.value) || GRAIN_DEFAULTS[grain].n,
    unit: rangeUnitEl.value || rangeWindowUnit(grain),
    includeCurrent: includeCurrentEl.checked,
  };
}
function setLastNUnitVisible(showSelect, unit) {
  rangeNUnitSelect.hidden = !showSelect;
  rangeNUnitSpan.hidden = showSelect;
  if (showSelect) {
    rangeNUnitSelect.value = unit;
  } else {
    rangeNUnitSpan.textContent = UNIT_LABEL[unit] || "days";
  }
}
function applyRangeChoice() {
  const grain = currentGrain();
  const defs = GRAIN_DEFAULTS[grain] || GRAIN_DEFAULTS.day;
  const windowUnit = rangeWindowUnit(grain);
  const choice = rangeChoiceEl.value || defs.choice;
  const lastN = choice === "last:n";
  const lastNamed = choice.startsWith("last:") && choice !== "last:n";
  const custom = choice === "custom";
  const pickUnit = canPickRangeUnit(grain);
  customRangeEl.hidden = !custom;
  rangeLastEl.hidden = !lastN;
  if (custom) {
    rangeModeEl.value = "custom";
    if (pickUnit) {
      rangeUnitEl.value = calendarUnit(rangeUnitEl.value, windowUnit);
    } else {
      rangeUnitEl.value = windowUnit;
    }
    rangeIncludeEl.hidden = true;
    setLastNUnitVisible(false, rangeUnitEl.value);
    syncCustomKind();
    snapCustomDates();
    saveRangeForGrain(grain);
    return;
  }
  if (lastN) {
    rangeModeEl.value = "last";
    const stored = rangeByGrain[grain] || {};
    const unit = pickUnit
      ? calendarUnit(stored.unit || rangeUnitEl.value, windowUnit)
      : windowUnit;
    rangeUnitEl.value = unit;
    setLastNUnitVisible(pickUnit, unit);
    includeCurrentLabel.textContent = includeLabelForUnit(unit);
    rangeIncludeEl.hidden = false;
    includeCurrentEl.checked = stored.includeCurrent;
    saveRangeForGrain(grain);
    return;
  }
  const parts = choice.split(":");
  if (parts[0] === "last") {
    rangeModeEl.value = "last";
    rangeNEl.value = parts[1];
    rangeUnitEl.value = parts[2] || windowUnit;
    setLastNUnitVisible(false, rangeUnitEl.value);
    includeCurrentLabel.textContent = includeLabelForUnit(rangeUnitEl.value);
    rangeIncludeEl.hidden = false;
    includeCurrentEl.checked = rangeByGrain[grain].includeCurrent;
    saveRangeForGrain(grain);
    return;
  }
  rangeModeEl.value = parts[0];
  rangeUnitEl.value = parts[1] || windowUnit;
  rangeIncludeEl.hidden = true;
  setLastNUnitVisible(false, rangeUnitEl.value);
  saveRangeForGrain(grain);
}
function isoDate(d) {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return y + "-" + m + "-" + day;
}
function parseIsoDate(value) {
  if (!value) return null;
  const p = value.split("-").map(Number);
  if (p.length !== 3 || p.some((n) => Number.isNaN(n))) return null;
  return new Date(p[0], p[1] - 1, p[2]);
}
function grainStart(d, grain) {
  const x = new Date(d.getFullYear(), d.getMonth(), d.getDate());
  const snap = (grain === "week" || grain === "month") ? grain : "day";
  if (snap === "day") return x;
  if (snap === "month") return new Date(x.getFullYear(), x.getMonth(), 1);
  const want = document.getElementById("week_start").value === "sunday" ? 0 : 1;
  const delta = (x.getDay() - want + 7) % 7;
  x.setDate(x.getDate() - delta);
  return x;
}
function grainEndInclusive(d, grain) {
  const start = grainStart(d, grain);
  const snap = (grain === "week" || grain === "month") ? grain : "day";
  if (snap === "day") return start;
  if (snap === "week") return new Date(start.getFullYear(), start.getMonth(), start.getDate() + 6);
  return new Date(start.getFullYear(), start.getMonth() + 1, 0);
}
function syncCustomKind() {
  const rel = customKindEl.value === "relative";
  customAbsoluteEl.hidden = rel;
  customRelativeEl.hidden = !rel;
  const grain = currentGrain();
  const windowUnit = rangeWindowUnit(grain);
  const pick = canPickRangeUnit(grain);
  const unit = pick
    ? calendarUnit(rangeUnitEl.value, windowUnit)
    : windowUnit;
  rangeUnitEl.value = unit;
  relUnitSelect.hidden = !pick;
  relUnitLabel.hidden = pick;
  if (pick) {
    relUnitSelect.value = unit;
  } else {
    relUnitLabel.textContent = (UNIT_LABEL[unit] || "days") + " ago";
  }
  const noun = GRAIN_NOUN[grain] || "this period";
  customRelativeEl.title = "0 = " + (pick ? (UNIT_LABEL[unit] ? "this " + unit : noun) : noun) + ".";
}
function snapCustomDates() {
  if (customKindEl.value === "relative") return;
  const grain = currentGrain();
  const start = parseIsoDate(startDateEl.value);
  const end = parseIsoDate(endDateEl.value);
  if (!start || !end) {
    customSnapHint.hidden = true;
    return;
  }
  const snappedStart = grainStart(start, grain);
  const snappedEnd = grainEndInclusive(end, grain);
  const s = isoDate(snappedStart);
  const e = isoDate(snappedEnd);
  startDateEl.value = s;
  endDateEl.value = e;
  if (grain === "day" || grain === "hour" || isCyclicGrain(grain)) {
    customSnapHint.hidden = true;
    return;
  }
  customSnapHint.hidden = false;
  customSnapHint.textContent = "Snapped to " + grain + "s " + s + " – " + e + ".";
}
function seedRangeChoice() {
  const grain = currentGrain();
  const unit = saved.range_unit || "day";
  const mode = saved.range_mode || "last";
  const windowUnit = rangeWindowUnit(grain);
  const coarserThis = (mode === "this" || mode === "previous")
    && (GRAIN_RANK[unit] || 0) >= (GRAIN_RANK[windowUnit] || 0);
  const cyclicSaved = isCyclicGrain(grain) && RANGE_UNITS.includes(unit);
  if (mode === "custom" || unit === grain || unit === windowUnit || coarserThis || cyclicSaved) {
    rangeByGrain[grain] = {
      choice: choiceFromSaved(grain),
      n: Number(saved.range_n) || GRAIN_DEFAULTS[grain].n,
      unit: unit,
      includeCurrent: (grain === "day" || grain === "hour" || grain === "hour_of_day")
        ? !!(saved.include_current || !saved.exclude_current)
        : !!saved.include_current,
    };
  }
  const state = rangeByGrain[grain];
  fillRangeOptions(grain, state.choice);
  rangeNEl.value = state.n;
  if (state.unit) rangeUnitEl.value = state.unit;
  includeCurrentEl.checked = state.includeCurrent;
  applyRangeChoice();
}
let activeGrain = currentGrain();
function onRangeChoiceChange() {
  const grain = currentGrain();
  const choice = rangeChoiceEl.value || "";
  const parts = choice.split(":");
  if (parts[0] === "last") {
    const unit = parts[2] || (choice === "last:n"
      ? calendarUnit(rangeByGrain[grain].unit || rangeUnitEl.value, rangeWindowUnit(grain))
      : rangeWindowUnit(grain));
    const prevUnit = rangeByGrain[grain].unit || rangeUnitEl.value;
    if (unit !== prevUnit) {
      includeCurrentEl.checked = includeDefaultForUnit(unit);
      rangeByGrain[grain].includeCurrent = includeCurrentEl.checked;
    }
    if (parts[2]) rangeByGrain[grain].unit = parts[2];
  }
  applyRangeChoice();
}
rangeChoiceEl.addEventListener("change", onRangeChoiceChange);
includeCurrentEl.addEventListener("change", () => saveRangeForGrain(currentGrain()));
rangeNEl.addEventListener("change", () => saveRangeForGrain(currentGrain()));
rangeNUnitSelect.addEventListener("change", () => {
  rangeUnitEl.value = rangeNUnitSelect.value;
  includeCurrentLabel.textContent = includeLabelForUnit(rangeUnitEl.value);
  includeCurrentEl.checked = includeDefaultForUnit(rangeUnitEl.value);
  saveRangeForGrain(currentGrain());
});
relUnitSelect.addEventListener("change", () => {
  rangeUnitEl.value = relUnitSelect.value;
  syncCustomKind();
  saveRangeForGrain(currentGrain());
});
startDateEl.addEventListener("change", snapCustomDates);
endDateEl.addEventListener("change", snapCustomDates);
customKindEl.addEventListener("change", () => { syncCustomKind(); snapCustomDates(); saveRangeForGrain(currentGrain()); });
grainEl.addEventListener("change", () => {
  saveRangeForGrain(activeGrain);
  activeGrain = currentGrain();
  const state = rangeByGrain[activeGrain];
  fillRangeOptions(activeGrain, state.choice);
  rangeNEl.value = state.n;
  if (state.unit) rangeUnitEl.value = state.unit;
  includeCurrentEl.checked = state.includeCurrent;
  applyRangeChoice();
});
seedRangeChoice();
activeGrain = currentGrain();

function formatHourLabel(h) {
  const list = FILTER_UI.hours || [];
  if (list[h] != null) return list[h];
  return String(h);
}
function formatWeekdayLabel(i) {
  const names = FILTER_UI.weekdays || [];
  return names[i] || String(i);
}
function bucketLabel(raw) {
  const grain = (typeof resultGrain === "function" && resultGrain()) || currentGrain();
  const s = String(raw ?? "");
  if (grain === "hour_of_day") {
    const n = parseInt(s, 10);
    return Number.isFinite(n) ? formatHourLabel(n) : s;
  }
  if (grain === "day_of_week") {
    const n = parseInt(s, 10);
    return Number.isFinite(n) ? formatWeekdayLabel(n) : s;
  }
  if (grain === "hour") {
    const hm = s.match(/^(\d{4}-\d{2}-\d{2})[ T](\d{2})/);
    if (hm) return hm[1] + " " + formatHourLabel(parseInt(hm[2], 10));
  }
  const m = s.match(/^(\d{4}-\d{2}-\d{2})/);
  return m ? m[1] : s;
}
function relabelMeasures() {
  applyMeasureLabels(form.measure);
  document.querySelectorAll(".series-measure").forEach((sel) => {
    const v = sel.value;
    applyMeasureLabels(sel);
    sel.value = v;
  });
}
function syncExact() {
  const series = (typeof collectSeries === "function") ? collectSeries() : [];
  const measures = series.length ? series.map((u) => u.measure) : [form.measure.value];
  const v = measures.find((m) => m === "uniques" || m === "average" || m === "median" || m === "distinct")
    || form.measure.value;
  const hasBreakdown = (typeof anySeriesHasBreakdown === "function" && anySeriesHasBreakdown())
    || !!(breakdownColumnEl && breakdownColumnEl.value);
  const ndv = v === "uniques" || v === "average" || v === "distinct";
  const median = v === "median";
  document.getElementById("exact-wrap").hidden = !(ndv || median || hasBreakdown);
  const label = document.getElementById("exact-label");
  const hint = document.getElementById("exact-hint");
  const cpu = CAPABILITIES.has("bytes_processed")
    ? "Same bytes scanned; more CPU. "
    : "More CPU. ";
  if (median && hasBreakdown) {
    label.textContent = "Exact median and series labels";
    hint.textContent = cpu + "Off is approx quantiles and approx top-K.";
  } else if (median) {
    label.textContent = "Exact median";
    hint.textContent = cpu + "Off is approx quantiles.";
  } else if (v === "distinct" && hasBreakdown) {
    label.textContent = "Exact distinct counts and series labels";
    hint.textContent = cpu + "Off is HyperLogLog and approx top-K.";
  } else if (v === "distinct") {
    label.textContent = "Exact distinct counts";
    hint.textContent = cpu + "Off is HyperLogLog (faster).";
  } else if (ndv && hasBreakdown) {
    label.textContent = "Exact unique counts and series labels";
    const denom = v === "average" ? "Denominator is unique entities. " : "";
    hint.textContent = denom + cpu + "Off is HyperLogLog and approx top-K.";
  } else if (ndv) {
    label.textContent = "Exact unique counts";
    hint.textContent = (v === "average" ? "Denominator is unique entities. " : cpu)
      + "Off is HyperLogLog (faster).";
  } else {
    label.textContent = "Exact series labels";
    hint.textContent = cpu + "Off picks series with approx top-K; measures on those series stay exact.";
  }
}
relabelMeasures();
syncExact();
syncOfUi();
syncTableHeaders();

function ofTitlePart() {
  const u = collectSeries()[0] || {};
  if (!isPropertyMeasureValue(u.measure)) return "";
  if ((u.of_expr || "").trim()) return u.of_expr.trim();
  const col = (u.of_column || "").trim();
  if (!col) return "";
  const key = (u.of_json_key || "").trim();
  return key ? col + "." + key : col;
}
function measureTitle() {
  const host = eventCardsEl.querySelector(":scope > .event-series");
  const sel = seriesMeasureSelect(host) || form.measure;
  const label = (sel.selectedOptions[0] && sel.selectedOptions[0].textContent) || "Events";
  const of = ofTitlePart();
  if (!of) return label;
  if (sel.value === "distinct" && FILTER_UI.vocab !== "sql") {
    return label.replace(/^Distinct per /, "Distinct " + of + " per ");
  }
  if (sel.value === "distinct" && FILTER_UI.vocab === "sql") {
    return label.replace("(DISTINCT x)", "(DISTINCT " + of + ")");
  }
  return label + " " + of;
}
function defaultTitle() {
  const ev = collectSeries().map((u) => {
    if (u.kind === "any_of") return (u.members || []).map((m) => m.event).filter(Boolean).join(" or ");
    return u.event;
  }).filter(Boolean).join(" · ");
  const names = (typeof chartBreakdownSlots === "function" ? chartBreakdownSlots() : []).map((s) => {
    if (s.breakdown_expr) return "expression";
    if (s.breakdown_json_key) return s.breakdown_column + "." + s.breakdown_json_key;
    return s.breakdown_column;
  }).filter(Boolean);
  const by = names.length ? "by " + names.join(" · ") : "";
  const range = (rangeChoiceEl.selectedOptions[0] && rangeChoiceEl.selectedOptions[0].textContent) || "";
  return [measureTitle(), ev, by, range].filter(Boolean).join(" · ");
}
titleEl.addEventListener("input", () => { titleLockedEl.value = "true"; });
document.getElementById("reset-title").addEventListener("click", () => {
  titleLockedEl.value = "false";
  titleEl.value = defaultTitle();
});

function payload() {
  applyRangeChoice();
  const d = Object.fromEntries(new FormData(form).entries());
  d.exact = document.getElementById("exact").checked;
  d.range_unit = rangeUnitEl.value;
  d.include_current = includeCurrentEl.checked;
  d.exclude_current = !d.include_current;
  d.chart_labels = document.getElementById("chart_labels").checked;
  d.chart_title_locked = titleLockedEl.value === "true";
  d.chart_title = titleLockedEl.value === "true" ? titleEl.value : defaultTitle();
  d.override_cap = document.getElementById("override_cap").checked;
  d.query_row_limit_run = String(effectiveRowLimit());
  d.include_other = document.getElementById("include_other").checked;
  d.breakdown_by_series = breakdownBySeries();
  d.series = collectSeries();
  const first = d.series[0] || {};
  d.measure = first.measure || "uniques";
  d.on = first.on || (isPropertyMeasureValue(d.measure) ? "property" : "events");
  d.of_column = first.of_column || "";
  d.of_expr = first.of_expr || "";
  d.of_json_key = first.of_json_key || "";
  const names = d.series.flatMap((u) => u.kind === "any_of" ? (u.members || []).map((m) => m.event) : [u.event]).filter(Boolean);
  d.event_values = names;
  d.event_value = names[0] || "";
  d.filters = [];
  const slots = chartBreakdownSlots();
  d.breakdowns = slots;
  const slot0 = slots[0] || {};
  d.breakdown_column = slot0.breakdown_column || "";
  d.breakdown_json_key = slot0.breakdown_json_key || "";
  d.breakdown_expr = slot0.breakdown_expr || "";
  return d;
}
function formatBytes(n) {
  if (n == null || n === "") return "";
  const units = ["B", "KB", "MB", "GB", "TB"];
  let x = Number(n);
  let i = 0;
  while (x >= 1024 && i < units.length - 1) {
    x /= 1024;
    i += 1;
  }
  const digits = x >= 10 || i === 0 ? 0 : 1;
  return "~" + x.toFixed(digits) + "\u00a0" + units[i];
}
let estimateGen = 0;
// True from the moment an estimate is sent until it settles. The cap
// override is offered while it is true: until the answer lands we do not
// know the query is under the cap, and an owner who knows it is not should
// be able to pre-authorise instead of waiting for a refusal round trip.
let estimatePending = false;
function setEstimatePending(on) {
  if (estimatePending === !!on) return;
  estimatePending = !!on;
  syncCostGate();
}
let estimateTimer = 0;
function estimateKey(body) {
  return [
    body.table, JSON.stringify(body.series || []), JSON.stringify(body.event_values || []),
    body.breakdown_by_series,
    body.event_value, body.grain, body.range_mode, body.range_n,
    body.range_unit, body.include_current, body.measure, body.custom_kind,
    body.start_date, body.end_date, body.rel_start_n, body.rel_end_n,
    body.bytes_cap_gb,
    body.on, body.of_column, body.of_expr, body.of_json_key,
    body.breakdown_column, body.breakdown_expr, body.breakdown_json_key,
    JSON.stringify(body.breakdowns || []),
    body.top_n, body.include_other,
  ].join("\0");
}
let lastEstimateKey = "";
// The one fact "this exact query is known to be over the cap", keyed by the
// same fingerprint the estimate uses. Written by an over-cap estimate and by a
// cap-rejected run; null means no known condition, never "unknown".
let capBlock = null;
// The last dry run's bytes, keyed by the same fingerprint. Bytes are
// cap-independent, so this outlives any change to the cap.
let lastEstimate = null;
let runInFlight = false;
// An exact figure, so it drops formatBytes' "~". Forcing GB here printed a
// 50 MB cap as "0 GB"; unit choice has one owner and it is formatBytes.
function bytesLabel(n) {
  return formatBytes(n).replace("~", "");
}
function capBlocked() {
  if (!CAPABILITIES.has("scan_cap") || !capBlock) return false;
  if (document.getElementById("override_cap").checked) return false;
  return capBlock.key === estimateKey(payload());
}
// Sole writer of #run.disabled and #cap-override.hidden. The run handler sets
// runInFlight rather than the button, so its finally cannot re-enable a Run
// the cap is still blocking.
function syncCostGate() {
  const blocked = capBlocked();
  document.getElementById("cap-override").hidden =
    !CAPABILITIES.has("scan_cap")
    || (!blocked
        && !estimatePending
        && !document.getElementById("override_cap").checked);
  document.getElementById("run").disabled =
    !MAPPING_READY || runInFlight || blocked;
}
// The bar needs a denominator, not necessarily a ceiling. With the cap off we
// gauge against the Setup cap so the warn/hot ladder keeps escalating - dropping
// the ceiling and the warning together left a plain grey byte count as the only
// signal on the largest queries, which is when the cue matters most.
function setupCapBytes() {
  const gb = parseFloat(document.getElementById("bytes_cap_gb").value);
  return gb > 0 ? Math.floor(gb * 1024 * 1024 * 1024) : null;   // 0 = unlimited
}
function estimateGauge(cap) {
  return cap != null ? cap : setupCapBytes();   // no ceiling still has a scale
}
function paintEstimate(bytes, cap, overCap) {
  const wrap = document.getElementById("run-estimate-wrap");
  const el = document.getElementById("run-estimate");
  const bar = document.getElementById("run-estimate-bar");
  const fill = document.getElementById("run-estimate-fill");
  const uncapped = cap == null;
  const gauge = estimateGauge(cap);
  wrap.hidden = false;
  bar.hidden = gauge == null;
  const frac = gauge ? bytes / gauge : 0;
  fill.style.width = gauge ? Math.min(100, Math.max(2, frac * 100)) + "%" : "0";
  wrap.classList.toggle("over-cap", !!overCap);
  wrap.classList.toggle("hot", !overCap && !!gauge && frac >= 0.25);
  wrap.classList.toggle("warn", !overCap && !!gauge && frac >= 0.05 && frac < 0.25);
  el.textContent = formatBytes(bytes)
    + (overCap && !uncapped ? " / " + bytesLabel(cap) + " cap" : "")
    + (uncapped ? " · cap off" : "");
  el.title = overCap
    ? "Over the job scan cap. Tick Override cap to run it anyway."
    : (uncapped
        ? ("Estimated bytes scanned (free dry run). Cap off while Override cap is "
           + "ticked" + (gauge ? "; the bar is against your " + bytesLabel(gauge) + " Setup cap." : "."))
        : "Estimated bytes scanned (free dry run). Cap " + bytesLabel(cap) + ".");
}
async function runEstimate() {
  const wrap = document.getElementById("run-estimate-wrap");
  const el = document.getElementById("run-estimate");
  const fill = document.getElementById("run-estimate-fill");
  if (!CAPABILITIES.has("dry_run")) {
    wrap.hidden = true;
    syncCostGate();
    return;
  }
  const gen = ++estimateGen;
  const body = payload();
  const key = estimateKey(body);
  if (!body.table || !body.entity || !body.event_time) {
    wrap.hidden = true;
    return;
  }
  if (seriesIncomplete()) {
    wrap.hidden = true;
    return;
  }
  if (key === lastEstimateKey && el.textContent && el.textContent !== "Estimating…") return;
  wrap.hidden = false;
  el.textContent = "Estimating…";
  wrap.classList.remove("over-cap", "warn", "hot");
  document.getElementById("run-estimate-bar").hidden = false;
  fill.style.width = "0";
  setEstimatePending(true);
  try {
    const data = await post("/api/estimate", body);
    if (gen !== estimateGen) return;
    setEstimatePending(false);
    if (!data.ok || data.bytes == null) {
      wrap.hidden = true;
      return;
    }
    lastEstimateKey = key;
    lastEstimate = {key: key, bytes: data.bytes};
    paintEstimate(data.bytes, data.cap, !!data.over_cap);
    // One short line before the run, in the same right-aligned slot the
    // post-run line uses; the labels feed the running copy as well.
    setRunNote(data.managed_note || "", false);
    managedBuildLabels = Array.isArray(data.managed_build) ? data.managed_build : [];
    // The server's verdict wins where it has one: only it saw the warehouse.
    // An uncapped estimate carries no verdict about the capped query, so it
    // must not retire one - that cleared the block and flickered the controls.
    if (data.over_cap) {
      capBlock = {key: key, bytes: data.bytes, cap: data.cap};
    } else if (data.cap != null && (!capBlock || capBlock.key === key)) {
      capBlock = null;
    }
    syncCostGate();
  } catch (err) {
    if (gen !== estimateGen) return;
    wrap.hidden = true;
  } finally {
    // Only the newest attempt may retire the flag: an older one settling
    // late must not clear a pending answer, and a thrown request must not
    // leave the override on screen for ever.
    if (gen === estimateGen) setEstimatePending(false);
  }
}
function setExportEnabled(copyId, popId, on) {
  document.getElementById(copyId).disabled = !on;
  const pop = document.getElementById(popId);
  pop.classList.toggle("disabled", !on);
  if (!on) pop.removeAttribute("open");
}
function showSql(text) {
  const sqlEl = document.getElementById("sql");
  if (!text) {
    sqlEl.textContent = "SQL updates as you change the form.";
    sqlEl.classList.add("empty");
    setExportEnabled("copy-sql", "sql-export", false);
    return;
  }
  sqlEl.textContent = text;
  sqlEl.classList.remove("empty");
  setExportEnabled("copy-sql", "sql-export", true);
}
let sqlGen = 0;
async function compileSql() {
  const gen = ++sqlGen;
  const body = payload();
  if (!body.table || !body.entity || !body.event_time) {
    showSql("");
    return;
  }
  if (seriesIncomplete()) {
    showSql("");
    return;
  }
  if (!document.getElementById("breakdown-json-wrap").hidden && !(body.breakdown_json_key || "").trim()) {
    showSql("");
    return;
  }
  try {
    const data = await post("/api/sql", body);
    if (gen !== sqlGen) return;
    if (data.ok && data.sql) showSql(data.sql);
    else showSql("");
  } catch (err) {
    if (gen !== sqlGen) return;
  }
}
function scheduleEstimate() {
  clearTimeout(estimateTimer);
  estimateTimer = setTimeout(() => {
    syncCostGate();
    compileSql();
    runEstimate();
  }, 400);
}
form.addEventListener("change", (e) => {
  syncStaleNotes();
  if (e.target && e.target.id === "exact") {
    compileSql();
    return;
  }
  // Has its own listener, and toggling it cannot change the bytes scanned.
  if (e.target && e.target.id === "override_cap") return;
  scheduleEstimate();
});
form.addEventListener("input", (e) => {
  syncStaleNotes();
  if (e.target && e.target.id === "exact") {
    compileSql();
    return;
  }
  scheduleEstimate();
});
// Toggling the override changes the ceiling, not the bytes the query scans, so
// there is nothing new to ask the warehouse: re-derive the verdict from the
// estimate already in hand. Only fall back to a dry run when we have none.
function reverdictFromLastEstimate() {
  if (!lastEstimate) return false;
  const key = estimateKey(payload());
  if (lastEstimate.key !== key) return false;
  const cap = document.getElementById("override_cap").checked ? null : setupCapBytes();
  const overCap = cap != null && lastEstimate.bytes > cap;
  paintEstimate(lastEstimate.bytes, cap, overCap);
  capBlock = overCap ? {key: key, bytes: lastEstimate.bytes, cap: cap} : null;
  return true;
}
document.getElementById("override_cap").addEventListener("change", () => {
  if (!reverdictFromLastEstimate()) scheduleEstimate();
  syncCostGate();
});
function csvCell(value) {
  const s = String(value ?? "");
  if (/[",\n]/.test(s)) return '"' + s.replace(/"/g, '""') + '"';
  return s;
}
function resultKey(body) {
  return [
    body.table, JSON.stringify(body.series || []), JSON.stringify(body.event_values || []),
    body.breakdown_by_series,
    body.event_value, body.grain, body.range_mode, body.range_n,
    body.range_unit, body.include_current, body.measure, body.custom_kind,
    body.start_date, body.end_date, body.rel_start_n, body.rel_end_n,
    body.on, body.of_column, body.of_expr, body.of_json_key,
    body.breakdown_column, body.breakdown_expr, body.breakdown_json_key,
    JSON.stringify(body.breakdowns || []),
    body.top_n, body.include_other,
    body.exact ? "1" : "0",
  ].join("\0");
}
function draftGrainHeader() {
  return GRAIN_HEADERS[currentGrain()] || "Day";
}
function draftValueHeader() {
  const units = collectSeries();
  const measures = [...new Set(units.map((u) => u.measure || "uniques"))];
  if (measures.length !== 1) return "Value";
  const host = eventCardsEl.querySelector(":scope > .event-series");
  const sel = seriesMeasureSelect(host);
  return (sel && sel.selectedOptions[0] && sel.selectedOptions[0].textContent) || "Value";
}
function draftSeriesHeader() {
  const col = (form.breakdown_column && form.breakdown_column.value) || "";
  if (!col || col === CUSTOM_BREAKDOWN) return t("breakdown_th");
  const key = (document.getElementById("breakdown_json_key").value || "").trim();
  return key ? col + "." + key : col;
}
function grainHeader() {
  return (lastRun && lastRun.grainHeader) || draftGrainHeader();
}
function valueHeader() {
  return (lastRun && lastRun.valueHeader) || draftValueHeader();
}
function seriesHeader() {
  return (lastRun && lastRun.seriesHeader) || draftSeriesHeader();
}
function resultGrain() {
  return (lastRun && lastRun.grain) || currentGrain();
}
function formDrifted() {
  if (!lastRun) return false;
  return resultKey(payload()) !== lastRun.key;
}
function syncStaleNotes() {
  const stale = formDrifted();
  const copy = "Showing the last run. Run again to apply form changes.";
  ["chart-stale", "table-stale"].forEach((id) => {
    const el = document.getElementById(id);
    el.hidden = !stale;
    el.textContent = stale ? copy : "";
  });
}
function snapshotLastRun(body) {
  lastRun = {
    key: resultKey(body),
    grain: currentGrain(),
    grainHeader: draftGrainHeader(),
    valueHeader: draftValueHeader(),
    seriesHeader: draftSeriesHeader(),
  };
  syncStaleNotes();
}
function clearLastRun() {
  lastRun = null;
  syncStaleNotes();
}
function tableDimKeys() {
  if (!tableRows.length) return [];
  const keys = tableRows[0].dimKeys || [];
  if (!keys.length) return [];
  const sig = keys.join("\0");
  if (!tableRows.every((r) => (r.dimKeys || []).join("\0") === sig)) return [];
  return keys;
}
function tableUsesSeriesCol() {
  return !tableDimKeys().length && tableRows.some((r) => r.series);
}
function hasSeries() {
  return tableUsesSeriesCol() || tableDimKeys().length > 0;
}
function bindTh(th) {
  th.addEventListener("click", (e) => {
    if (e.target.classList.contains("grip")) return;
    const key = th.getAttribute("data-key");
    if (sortKey === key) sortDir = -sortDir;
    else { sortKey = key; sortDir = 1; }
    renderTable();
  });
  const grip = th.querySelector(".grip");
  if (!grip) return;
  grip.addEventListener("mousedown", (e) => {
    e.preventDefault();
    e.stopPropagation();
    const startX = e.clientX;
    const startW = th.getBoundingClientRect().width;
    function move(ev) {
      th.style.width = Math.max(48, startW + (ev.clientX - startX)) + "px";
    }
    function up() {
      document.removeEventListener("mousemove", move);
      document.removeEventListener("mouseup", up);
    }
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", up);
  });
}
function ensureDimHeaders(keys) {
  const tr = document.querySelector("#result-table thead tr");
  tr.querySelectorAll("th.dim-col").forEach((th) => th.remove());
  const valueTh = tr.querySelector('th[data-key="value"]');
  const seriesTh = document.getElementById("th-series");
  if (!keys.length) {
    if (seriesTh) seriesTh.hidden = !tableUsesSeriesCol();
    return;
  }
  if (seriesTh) seriesTh.hidden = true;
  keys.forEach((key, i) => {
    const th = document.createElement("th");
    th.className = "dim-col";
    th.setAttribute("data-key", "dim:" + key);
    const grip = document.createElement("span");
    grip.className = "grip";
    grip.setAttribute("data-col", String(i + 1));
    th.appendChild(grip);
    tr.insertBefore(th, valueTh);
    bindTh(th);
  });
}
function headerLabel(key) {
  if (key === "bucket") return grainHeader();
  if (key === "series") return seriesHeader();
  if (key === "value") return valueHeader();
  if (key && key.startsWith("dim:")) return key.slice(4);
  return key;
}
function syncTableHeaders() {
  ensureDimHeaders(tableDimKeys());
  const seriesTh = document.getElementById("th-series");
  if (seriesTh && !tableDimKeys().length) seriesTh.hidden = !tableUsesSeriesCol();
  document.querySelectorAll("#result-table th[data-key]").forEach((th) => {
    if (th.hidden) return;
    const grip = th.querySelector(".grip");
    [...th.childNodes].forEach((n) => {
      if (n !== grip) n.remove();
    });
    const key = th.getAttribute("data-key");
    const label = headerLabel(key);
    const mark = document.createElement("span");
    mark.className = "sort";
    mark.textContent = sortKey === key ? (sortDir === 1 ? " ▲" : " ▼") : "";
    th.classList.toggle("sorted", sortKey === key);
    th.insertBefore(document.createTextNode(label + (grip ? " " : "")), grip);
    th.insertBefore(mark, grip);
  });
}
function displayBucket(row) {
  if (!row.incomplete) return row.bucket;
  return row.bucket + " · incomplete";
}
function setupRowLimit() {
  const n = Number(document.getElementById("query_row_limit").value);
  if (!Number.isFinite(n) || n < 1) return 1000000;
  return Math.floor(n);
}
let runRowLimit = 0;
let raiseLimitOnce = false;
function effectiveRowLimit() {
  return runRowLimit || setupRowLimit();
}
function rankedTableRows() {
  if (!sortKey) return tableRows;
  const grain = resultGrain();
  return [...tableRows].sort((a, b) => {
    let av;
    let bv;
    if (sortKey === "bucket" && (grain === "day_of_week" || grain === "hour_of_day")) {
      av = a.bucketRaw;
      bv = b.bucketRaw;
    } else {
      av = rowSortValue(a, sortKey);
      bv = rowSortValue(b, sortKey);
    }
    const an = Number(av);
    const bn = Number(bv);
    let cmp;
    if (av !== "" && bv !== "" && !Number.isNaN(an) && !Number.isNaN(bn)) cmp = an - bn;
    else cmp = String(av ?? "").localeCompare(String(bv ?? ""), undefined, { numeric: true });
    return cmp * sortDir;
  });
}
function renderTable() {
  syncTableHeaders();
  const tbody = document.getElementById("rows");
  tbody.innerHTML = "";
  const ranked = rankedTableRows();
  const dims = tableDimKeys();
  for (const row of ranked) {
    const tr = document.createElement("tr");
    if (row.incomplete) tr.className = "incomplete";
    const tdBucket = document.createElement("td");
    const tdValue = document.createElement("td");
    tdBucket.textContent = displayBucket(row);
    tdValue.textContent = formatValue(row.value);
    const extra = [];
    if (dims.length) {
      dims.forEach((k) => {
        const td = document.createElement("td");
        const v = row.dims ? row.dims[k] : "";
        td.textContent = v == null || v === "" ? "(null)" : String(v);
        extra.push(td);
      });
    } else if (tableUsesSeriesCol()) {
      const tdSeries = document.createElement("td");
      tdSeries.textContent = row.series;
      extra.push(tdSeries);
    }
    tr.append(tdBucket, ...extra, tdValue);
    tbody.appendChild(tr);
  }
}
function rowSortValue(row, key) {
  if (key && key.startsWith("dim:")) return row.dims ? row.dims[key.slice(4)] : "";
  return row[key];
}
function tableHeaderRow() {
  const dims = tableDimKeys();
  if (dims.length) return [grainHeader(), ...dims, valueHeader(), "incomplete"];
  if (tableUsesSeriesCol()) return [grainHeader(), seriesHeader(), valueHeader(), "incomplete"];
  return [grainHeader(), valueHeader(), "incomplete"];
}
function tableErrorText() {
  const el = document.getElementById("table-empty");
  if (!el || el.hidden || !el.classList.contains("fail")) return "";
  return (el.textContent || "").trim();
}
function setTableActions(mode) {
  const copyBtn = document.getElementById("copy-table");
  const exportPop = document.getElementById("table-export");
  const exportBtn = exportPop.querySelector("summary");
  setExportEnabled("copy-table", "table-export", true);
  if (mode === "error") {
    copyBtn.title = "Copy error";
    copyBtn.setAttribute("aria-label", "Copy error");
    exportBtn.title = "Download error";
    exportBtn.setAttribute("aria-label", "Download error");
    return;
  }
  copyBtn.title = "Copy table";
  copyBtn.setAttribute("aria-label", "Copy table");
  exportBtn.title = "Download table";
  exportBtn.setAttribute("aria-label", "Download table");
}
function downloadBlob(text, filename, type) {
  const blob = new Blob([text.endsWith("\n") ? text : text + "\n"], { type });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  a.click();
  URL.revokeObjectURL(a.href);
}
function exportSlug() {
  const raw = (titleEl.value || "").trim().toLowerCase();
  const slug = raw
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "")
    .slice(0, 64)
    .replace(/-+$/, "");
  return slug || "factcat-events";
}
function tsvCell(value) {
  return String(value ?? "").replace(/[\t\n\r]+/g, " ");
}
function mdCell(value) {
  return String(value ?? "").replace(/\|/g, "\\|").replace(/[\n\r]+/g, " ");
}
function rawTableCells(row) {
  return hasSeries()
    ? [row.bucket, row.series, row.value, row.incomplete ? "true" : "false"]
    : [row.bucket, row.value, row.incomplete ? "true" : "false"];
}
function exportTable(kind) {
  const err = tableErrorText();
  if (err) {
    downloadBlob(err, "factcat-error.txt", "text/plain");
    return;
  }
  const slug = exportSlug();
  if (kind === "csv" || kind === "tsv") {
    const sep = kind === "csv" ? "," : "\t";
    const cell = kind === "csv" ? csvCell : tsvCell;
    const lines = [tableHeaderRow().map(cell).join(sep)];
    for (const row of rankedTableRows()) lines.push(rawTableCells(row).map(cell).join(sep));
    downloadBlob(
      lines.join("\n"),
      slug + "." + kind,
      kind === "csv" ? "text/csv" : "text/tab-separated-values"
    );
    return;
  }
  if (kind === "json") {
    const rows = rankedTableRows().map((row) => {
      const item = { bucket: row.bucket, value: row.value, incomplete: !!row.incomplete };
      if (hasSeries()) item.series = row.series;
      return item;
    });
    downloadBlob(JSON.stringify(rows, null, 2), slug + ".json", "application/json");
    return;
  }
  // Markdown is the human-facing export: display buckets and formatted values.
  const head = hasSeries()
    ? [grainHeader(), seriesHeader(), valueHeader()]
    : [grainHeader(), valueHeader()];
  const md = [
    "| " + head.map(mdCell).join(" | ") + " |",
    "| " + head.map(() => "---").join(" | ") + " |",
  ];
  for (const row of rankedTableRows()) {
    const cells = hasSeries()
      ? [displayBucket(row), row.series, formatValue(row.value)]
      : [displayBucket(row), formatValue(row.value)];
    md.push("| " + cells.map(mdCell).join(" | ") + " |");
  }
  downloadBlob(md.join("\n"), slug + ".md", "text/markdown");
}
document.querySelectorAll("#result-table th[data-key]").forEach((th) => {
  th.addEventListener("click", (e) => {
    if (e.target.classList.contains("grip")) return;
    const key = th.getAttribute("data-key");
    if (sortKey === key) sortDir = -sortDir;
    else { sortKey = key; sortDir = 1; }
    renderTable();
  });
});
document.querySelectorAll("#result-table .grip").forEach((grip) => {
  grip.addEventListener("mousedown", (e) => {
    e.preventDefault();
    e.stopPropagation();
    const th = grip.parentElement;
    const startX = e.clientX;
    const startW = th.getBoundingClientRect().width;
    function move(ev) {
      th.style.width = Math.max(48, startW + (ev.clientX - startX)) + "px";
    }
    function up() {
      document.removeEventListener("mousemove", move);
      document.removeEventListener("mouseup", up);
    }
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", up);
  });
});
document.querySelectorAll("[data-table-export]").forEach((btn) => {
  btn.addEventListener("click", () => {
    exportTable(btn.getAttribute("data-table-export"));
    btn.closest("details").removeAttribute("open");
  });
});
document.getElementById("copy-table").addEventListener("click", async () => {
  const err = tableErrorText();
  if (err) {
    await navigator.clipboard.writeText(err);
    flashCopied(document.getElementById("copy-table"));
    return;
  }
  const lines = [hasSeries()
    ? grainHeader() + "\t" + seriesHeader() + "\t" + valueHeader()
    : grainHeader() + "\t" + valueHeader()];
  for (const row of rankedTableRows()) {
    lines.push(hasSeries()
      ? displayBucket(row) + "\t" + row.series + "\t" + formatValue(row.value)
      : displayBucket(row) + "\t" + formatValue(row.value));
  }
  await navigator.clipboard.writeText(lines.join("\n") + "\n");
  flashCopied(document.getElementById("copy-table"));
});
function flashCopied(btn) {
  btn.classList.add("copied");
  const prev = btn.getAttribute("title") || "";
  btn.setAttribute("title", "Copied");
  setTimeout(() => {
    btn.classList.remove("copied");
    if (prev) btn.setAttribute("title", prev);
  }, 1200);
}
document.getElementById("copy-sql").addEventListener("click", async () => {
  const text = document.getElementById("sql").textContent || "";
  if (!text || document.getElementById("sql").classList.contains("empty")) return;
  await navigator.clipboard.writeText(text);
  flashCopied(document.getElementById("copy-sql"));
});
function exportSqlFile(kind) {
  const el = document.getElementById("sql");
  const text = (el.textContent || "").replace(/\n$/, "");
  if (!text || el.classList.contains("empty")) return;
  const slug = exportSlug();
  if (kind === "md") {
    const title = (titleEl.value || "").trim() || "Factcat events query";
    downloadBlob(
      "## " + title + "\n\n```sql\n" + text + "\n```",
      slug + ".md",
      "text/markdown"
    );
    return;
  }
  downloadBlob(text, slug + ".sql", "application/sql");
}
document.querySelectorAll("[data-sql-export]").forEach((btn) => {
  btn.addEventListener("click", () => {
    exportSqlFile(btn.getAttribute("data-sql-export"));
    btn.closest("details").removeAttribute("open");
  });
});
function applySeps(raw) {
  const text = String(raw);
  const m = text.match(/^([+-]?)(\d+)(?:\.(\d+))?(.*)$/);
  if (!m) return text;
  const thou = thousandChar();
  const dec = decimalChar();
  let intp = m[2];
  if (thou) intp = intp.replace(/\B(?=(\d{3})+(?!\d))/g, thou);
  return m[1] + intp + (m[3] != null ? dec + m[3] : "") + (m[4] || "");
}
function formatValue(v) {
  const n = Number(v);
  if (v === "" || v == null || Number.isNaN(n)) return String(v ?? "");
  const kind = document.getElementById("chart_value_format").value || "auto";
  let raw;
  if (kind === "int") raw = String(Math.round(n));
  else if (kind === "dp1") raw = n.toFixed(1);
  else if (kind === "dp2") raw = n.toFixed(2);
  else if (kind === "sci") raw = n.toExponential(2);
  else if (kind === "compact") {
    const abs = Math.abs(n);
    const units = [[1e12, "T"], [1e9, "B"], [1e6, "M"], [1e3, "k"]];
    raw = String(Math.round(n));
    for (let i = 0; i < units.length; i++) {
      if (abs >= units[i][0]) {
        raw = (n / units[i][0]).toFixed(1) + units[i][1];
        break;
      }
    }
  } else if (Number.isInteger(n) || Math.abs(n - Math.round(n)) < 1e-9) {
    raw = String(Math.round(n));
  } else {
    raw = n.toFixed(2);
  }
  return applySeps(raw);
}
function seriesFromRow(row) {
  const skip = new Set(["bucket", "value", "incomplete"]);
  const keys = Object.keys(row).filter((k) => !skip.has(k));
  if (!keys.length) return "";
  const v = row[keys[0]];
  if (v == null || v === "") return "(null)";
  return String(v);
}
function cssToken(name, fallback) {
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
}
function chartFurniture() {
  return {
    ink: cssToken("--fc-ink", "#1C1917"),
    paper: cssToken("--fc-paper", "#F4EFE6"),
    snow: cssToken("--fc-snow", "#FFFCF7"),
    line: cssToken("--fc-line", "#E6DCCF"),
  };
}
const SERIES_COLORS = [
  "#C4841D",
  "#0072B2",
  "#CC79A7",
  "#009E73",
  "#56B4E9",
  "#D55E00",
  "#6B4C9A",
  "#7A9A35",
  "#44AA99",
  "#A63D55",
  "#5C6B73",
  "#EE8866",
  "#3B8C4A",
  "#5A6AB5",
  "#8F4E8B",
  "#2E8B99",
  "#C7614A",
  "#7B6B9E",
  "#B36A2A",
  "#3D6F8A",
];
const MUTED = "#8A8178";
function seriesNames() {
  const names = [];
  const seen = new Set();
  for (const row of tableRows) {
    const s = row.series || "";
    if (!seen.has(s)) { seen.add(s); names.push(s); }
  }
  return names;
}
function effectiveChartType(n) {
  const chosen = document.getElementById("chart_type").value || "auto";
  if (chosen !== "auto") return chosen;
  if (isCyclicGrain(resultGrain())) return "bar";
  return n <= 2 ? "bar" : "line";
}
const CAT = {
  wait: "/static/waiting.jpg",
  blink: "/static/waiting-blink.jpg",
  glanceMid: "/static/waiting-glance-mid.jpg",
  glance: "/static/waiting-glance.jpg",
  sniff: "/static/empty-sniff.jpg",
  fail: "/static/unimpressed.jpg",
  run: [
    "/static/settled.jpg",
    "/static/running-reach.jpg",
    "/static/running-mid.jpg",
    "/static/running-almost.jpg",
    "/static/running-contact.jpg",
  ],
};
let catKind = "";
let catGen = 0;
let catTimer = 0;
function catReduceMotion() {
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}
function prefetchCat() {
  [CAT.wait, CAT.blink, CAT.glanceMid, CAT.glance, CAT.sniff, CAT.fail].concat(CAT.run).forEach((src) => {
    const im = new Image();
    im.src = src;
  });
}
function stopCatMotion() {
  catGen += 1;
  if (catTimer) {
    clearTimeout(catTimer);
    catTimer = 0;
  }
}
function setCatSrc(src) {
  const img = document.getElementById("waiting-cat");
  if (img && img.getAttribute("src") !== src) img.setAttribute("src", src);
}
function catLater(gen, ms, fn) {
  catTimer = setTimeout(() => {
    if (gen !== catGen) return;
    fn();
  }, ms);
}
function idleGap() {
  return 8000 + Math.floor(Math.random() * 4000);
}
function playIdleBeat(glance) {
  const gen = catGen;
  if (catReduceMotion()) {
    setCatSrc(CAT.wait);
    return;
  }
  if (glance) {
    setCatSrc(CAT.glanceMid);
    catLater(gen, 160, () => {
      setCatSrc(CAT.glance);
      catLater(gen, 520, () => {
        setCatSrc(CAT.glanceMid);
        catLater(gen, 160, () => {
          setCatSrc(CAT.wait);
          catLater(gen, idleGap(), () => playIdleBeat(Math.random() < 0.45));
        });
      });
    });
  } else {
    setCatSrc(CAT.blink);
    catLater(gen, 180, () => {
      setCatSrc(CAT.wait);
      catLater(gen, idleGap(), () => playIdleBeat(Math.random() < 0.45));
    });
  }
}
function startIdleCat() {
  stopCatMotion();
  setCatSrc(CAT.wait);
  if (catReduceMotion()) return;
  const gen = catGen;
  catLater(gen, idleGap(), () => playIdleBeat(Math.random() < 0.45));
}
function buildRunDots() {
  const dots = document.createElement("span");
  dots.className = "run-dots";
  dots.setAttribute("aria-hidden", "true");
  for (let i = 0; i < 3; i += 1) {
    const d = document.createElement("span");
    d.textContent = ".";
    dots.appendChild(d);
  }
  return dots;
}
function stepRunDots(gen, n) {
  const dots = document.querySelectorAll("#empty-copy .run-dots span");
  dots.forEach((d, i) => d.classList.toggle("on", i < n));
  catLater(gen, 550, () => stepRunDots(gen, n >= 3 ? 1 : n + 1));
}
// Managed tables: what the next run would prepare (from the
// estimate) and the line under the run row. Business register only:
// cost, reason, next-run cost; never the mechanism.
let managedBuildLabels = [];
// Server copy marks column labels with backticks (the house SQL-chrome
// convention); render them as code.fc-sql, never as literal backticks.
function appendMarked(el, text) {
  String(text || "").split(/(`[^`]+`)/g).forEach((part) => {
    if (part.startsWith("`") && part.endsWith("`") && part.length > 2) {
      const code = document.createElement("code");
      code.className = "fc-sql";
      code.textContent = part.slice(1, -1);
      el.appendChild(code);
    } else if (part) {
      el.appendChild(document.createTextNode(part));
    }
  });
}
function setRunNote(text, ochre) {
  const el = document.getElementById("run-note");
  if (!el) return;
  const box = el.firstElementChild;
  box.textContent = "";
  appendMarked(box, text || "");
  el.classList.toggle("ochre", !!ochre && !!text);
  el.hidden = !text;
}
function runningPrefix() {
  // Same backtick convention as the note; setRunningCopy renders it.
  if (!managedBuildLabels.length) return "";
  const names = managedBuildLabels.map((l) => "`" + l + "`").join(", ");
  return "Indexing " + names + "\u2026 then r";
}
function setRunningCopy(copy) {
  const prefix = runningPrefix();
  if (!catReduceMotion()) {
    copy.textContent = "";
    appendMarked(copy, prefix ? prefix + "unning…" : "Running…");
    return;
  }
  // Reduced motion: the cat freezes, so the dots carry liveness instead.
  if (copy.querySelector(".run-dots")) return;
  copy.textContent = "";
  appendMarked(copy, prefix ? prefix + "unning" : "Running");
  copy.appendChild(buildRunDots());
}
let runBtnTimer = 0;
function startRunButtonDots() {
  const btn = document.getElementById("run");
  btn.textContent = "Running";
  btn.appendChild(buildRunDots());
  let n = 1;
  const step = () => {
    btn.querySelectorAll(".run-dots span").forEach((d, i) => d.classList.toggle("on", i < n));
    n = n >= 3 ? 1 : n + 1;
    runBtnTimer = setTimeout(step, 550);
  };
  step();
}
function stopRunButtonDots() {
  clearTimeout(runBtnTimer);
  runBtnTimer = 0;
}
function cancelEstimate() {
  clearTimeout(estimateTimer);
  estimateGen += 1;
  setEstimatePending(false);
  const el = document.getElementById("run-estimate");
  if (el.textContent === "Estimating…") {
    document.getElementById("run-estimate-wrap").hidden = true;
    el.textContent = "";
  }
}
function startRunCat() {
  stopCatMotion();
  const gen = catGen;
  const frames = CAT.run;
  let i = 0;
  let dir = 1;
  setCatSrc(frames[0]);
  if (catReduceMotion()) {
    stepRunDots(gen, 1);
    return;
  }
  function step() {
    if (gen !== catGen) return;
    i += dir;
    if (i >= frames.length - 1) dir = -1;
    if (i <= 0) dir = 1;
    setCatSrc(frames[i]);
    catTimer = setTimeout(step, 280);
  }
  catTimer = setTimeout(step, 280);
}
function chartPaneClosed() {
  const pane = document.querySelector(".pane-chart");
  return !!pane && pane.classList.contains("closed");
}
// The reason a run failed, shown under the fail cat. Null means no failure
// stands, which is why starting a run and finishing one both clear it.
let failCopy = null;
function setChartEmpty(kind) {
  const empty = document.getElementById("chart-empty");
  const img = document.getElementById("waiting-cat");
  const copy = document.getElementById("empty-copy");
  if (kind === "none") {
    empty.hidden = true;
    stopCatMotion();
    catKind = "none";
    return;
  }
  empty.hidden = false;
  empty.classList.toggle("fail", kind === "fail");
  img.hidden = false;
  if (kind === "running") setRunningCopy(copy);
  else if (kind === "fail") copy.textContent = failCopy || "Query failed.";
  else if (kind === "empty") copy.textContent = "Nothing to `cat`.";
  else if (document.getElementById("needs-setup")) copy.textContent = "Map a table on Setup before Events can run.";
  else copy.textContent = "No rows yet. The cat is waiting.";
  if (kind === catKind) return;
  catKind = kind;
  if (kind === "running") startRunCat();
  else if (kind === "fail") {
    stopCatMotion();
    setCatSrc(CAT.fail);
  } else if (kind === "empty") {
    stopCatMotion();
    setCatSrc(CAT.sniff);
  } else {
    startIdleCat();
  }
}
function drawChart() {
  const ctx = document.getElementById("chart");
  const copyBtn = document.getElementById("copy-chart");
  const pngBtn = document.getElementById("chart-export");
  if (!tableRows.length) {
    if (catKind !== "fail" && catKind !== "running") setChartEmpty("wait");
    ctx.hidden = true;
    setExportEnabled("copy-chart", "chart-export", false);
    if (chart) { chart.destroy(); chart = null; }
    return;
  }
  setChartEmpty("none");
  ctx.hidden = false;
  setExportEnabled("copy-chart", "chart-export", true);
  const shown = tableRows;
  const names = seriesNames();
  const multi = names.length > 1 || (names.length === 1 && names[0] !== "");
  const labels = [];
  const seenBucket = new Set();
  for (const r of shown) {
    if (!seenBucket.has(r.bucket)) { seenBucket.add(r.bucket); labels.push(r.bucket); }
  }
  const showLabels = document.getElementById("chart_labels").checked;
  const kind = effectiveChartType(labels.length);
  const isBar = kind === "bar";
  const isArea = kind === "area";
  const type = isBar ? "bar" : "line";
  const measureLabel = titleEl.value || valueHeader();
  const note = document.getElementById("incomplete-note");
  const grain = resultGrain();
  const through = grain === "hour" ? "through this hour" : "through today";
  note.hidden = true;
  note.textContent = "";
  if (labels.length <= 2 && (document.getElementById("chart_type").value || "auto") === "auto") {
    note.hidden = false;
    note.textContent = grain === "day"
      ? "Few points at this grain."
      : "Few points at this grain — switch Time grain to Day and run again to see days inside the range.";
  }
  if (chart) chart.destroy();
  if (!window.Chart) return;
  const furn = chartFurniture();
  const gridMode = document.getElementById("chart_grid").value || "major";
  const datasets = names.map((name, i) => {
    const color = name === "(other)" ? MUTED : SERIES_COLORS[i % SERIES_COLORS.length];
    const byBucket = {};
    for (const r of shown) {
      if ((r.series || "") === name) byBucket[r.bucket] = r;
    }
    const data = labels.map((b) => (byBucket[b] ? byBucket[b].value : null));
    const pointColors = labels.map((b) => (byBucket[b] && byBucket[b].incomplete ? MUTED : color));
    return {
      label: name || measureLabel,
      fcIncomplete: labels.map((b) => !!(byBucket[b] && byBucket[b].incomplete)),
      data,
      tension: 0.1,
      fill: isArea ? "origin" : false,
      backgroundColor: isBar ? pointColors : (isArea ? color + "47" : "transparent"),
      borderColor: color,
      pointBackgroundColor: pointColors,
      segment: !isBar ? {
        borderDash: (seg) => {
          const row = byBucket[labels[seg.p1DataIndex]];
          return row && row.incomplete ? [5, 4] : undefined;
        },
      } : undefined,
    };
  });
  chart = new Chart(ctx, {
    type,
    data: { labels, datasets },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          ticks: { maxRotation: 0, autoSkip: true, color: furn.ink },
          border: { color: furn.line },
          grid: {
            display: gridMode !== "off",
            color: (c) => (gridMode === "minor" && c.index % 2 ? furn.paper : furn.line),
          },
        },
        y: {
          beginAtZero: true,
          ticks: {
            color: furn.ink,
            callback: (v) => formatValue(v),
            count: gridMode === "minor" ? 9 : 6,
          },
          border: { color: furn.line },
          grid: {
            display: gridMode !== "off",
            color: (c) => (gridMode === "minor" && c.index % 2 ? furn.paper : furn.line),
          },
        },
      },
      plugins: {
        legend: { display: multi, labels: { color: furn.ink } },
        filler: { propagate: false },
        tooltip: {
          enabled: true,
          backgroundColor: furn.snow,
          titleColor: furn.ink,
          bodyColor: furn.ink,
          borderColor: furn.line,
          borderWidth: 1,
          callbacks: {
            label: (ctx) => (multi ? ctx.dataset.label + ": " : "") + formatValue(ctx.parsed.y)
              + (ctx.dataset.fcIncomplete && ctx.dataset.fcIncomplete[ctx.dataIndex]
                ? " — partial, " + through
                : ""),
          },
        },
      },
    },
    plugins: [{
      id: "fcLabels",
      afterDatasetsDraw(c) {
        if (!showLabels) return;
        const { ctx: g } = c;
        const meta = c.getDatasetMeta(0);
        g.save();
        g.fillStyle = furn.ink;
        g.font = "11px ui-sans-serif, system-ui, sans-serif";
        g.textAlign = "center";
        meta.data.forEach((el, i) => {
          const v = c.data.datasets[0].data[i];
          if (v == null) return;
          g.fillText(formatValue(v), el.x, el.y - 8);
        });
        g.restore();
      },
    }],
  });
}
document.addEventListener("click", (e) => {
  document.querySelectorAll("details.format-pop[open]").forEach((pop) => {
    if (!pop.contains(e.target)) pop.removeAttribute("open");
  });
});
document.getElementById("chart_type").addEventListener("change", drawChart);
["chart_labels", "chart_value_format", "chart_grid"].forEach((id) => {
  document.getElementById(id).addEventListener("change", () => {
    if (tableRows.length) {
      drawChart();
      renderTable();
    }
  });
});
function chartExportCanvas(scale, transparent) {
  const src = chart.canvas;
  const cssW = src.clientWidth || src.width;
  const cssH = src.clientHeight || src.height;
  const off = document.createElement("canvas");
  off.width = Math.round(cssW * scale);
  off.height = Math.round(cssH * scale);
  const g = off.getContext("2d");
  if (!transparent) {
    g.fillStyle = getComputedStyle(document.querySelector(".pane-chart")).backgroundColor;
    g.fillRect(0, 0, off.width, off.height);
  }
  g.drawImage(src, 0, 0, off.width, off.height);
  return off;
}
document.querySelectorAll("[data-chart-export]").forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.closest("details").removeAttribute("open");
    if (!chart) return;
    const kind = btn.getAttribute("data-chart-export");
    const scale = kind === "png" ? 1 : 2;
    const off = chartExportCanvas(scale, kind === "png2xt");
    const a = document.createElement("a");
    a.href = off.toDataURL("image/png");
    a.download = exportSlug() + ".png";
    a.click();
  });
});
document.getElementById("copy-chart").addEventListener("click", async () => {
  if (!chart) return;
  // Copy with the pane background painted: a transparent PNG pastes as
  // unreadable ink-on-nothing in dark theme.
  const off = chartExportCanvas(2, false);
  const blob = await new Promise((resolve) => off.toBlob(resolve, "image/png"));
  try {
    await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
    flashCopied(document.getElementById("copy-chart"));
  } catch (err) {
    setError("Could not copy image. Use the download menu instead.");
  }
});
function showLimitNote(truncated, limit) {
  const el = document.getElementById("limit-note");
  el.innerHTML = "";
  if (!truncated) {
    el.hidden = true;
    return;
  }
  el.hidden = false;
  el.appendChild(document.createTextNode(
    "Results truncated at " + Number(limit).toLocaleString() +
    " rows (most recent). The grain may be too fine, the range too long, or a group has too many values. "
  ));
  const next = limit * 2;
  if (Number.isFinite(next) && next > limit) {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "linkish";
    btn.textContent = "Load more (" + next.toLocaleString() + ")";
    btn.addEventListener("click", () => {
      raiseLimitOnce = true;
      runRowLimit = next;
      document.getElementById("run").click();
    });
    el.appendChild(btn);
  }
}
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  setError("");
  if (!raiseLimitOnce) runRowLimit = 0;
  raiseLimitOnce = false;
  const body = payload();
  if (!body.table || !body.entity || !body.event_time) {
    setError("Mapping is incomplete. Open Setup.");
    return;
  }
  const seriesErr = seriesIncomplete();
  if (seriesErr) {
    setError(seriesErr);
    return;
  }
  if (!breakdownBySeries() && !document.getElementById("breakdown-json-wrap").hidden && !(body.breakdown_json_key || "").trim()) {
    setError("Enter a JSON key.");
    return;
  }
  cancelEstimate();
  const runBtn = document.getElementById("run");
  const tableCount = document.getElementById("table-count");
  const hadChart = !!chart || tableRows.length;
  runInFlight = true;
  failCopy = null;
  syncCostGate();
  startRunButtonDots();
  if (!hadChart) setChartEmpty("running");
  try {
    const res = await fetch("/api/run", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(body),
    });
    const data = await res.json();
    if (data.sql) showSql(data.sql);
    if (!data.ok) {
      let msg = shortError(data.error || res.statusText || "Query failed.");
      if (data.over_cap) {
        // The warehouse rejected it on the cap. It reported the figures; show
        // those and the way past them rather than a raw rejection string.
        capBlock = {key: estimateKey(body), bytes: data.bytes, cap: data.cap};
        const ours = !document.getElementById("override_cap").checked;
        if (data.bytes != null) {
          paintEstimate(data.bytes, data.cap, true);
          msg = "Query failed: " + bytesLabel(data.bytes)
            + (data.cap != null && ours ? " (over the " + bytesLabel(data.cap) + " cap)." : " (over the byte limit).");
        } else {
          msg = "Query failed: over the byte limit.";
        }
        // Our cap is already off, so the limit that rejected this is theirs.
        if (!ours) msg += " Factcat's cap is off — this is your BigQuery project's own limit.";
      }
      failCopy = msg;
      const tableEmpty = document.getElementById("table-empty");
      tableEmpty.hidden = false;
      tableEmpty.classList.add("fail");
      tableEmpty.textContent = "No rows.";
      document.getElementById("result-table").hidden = true;
      setTableActions("error");
      tableRows = [];
      clearLastRun();
      if (chart) {
        chart.destroy();
        chart = null;
      }
      document.getElementById("chart").hidden = true;
      setChartEmpty("fail");
      // Never let a collapsed chart pane swallow the only explanation.
      setError(chartPaneClosed() ? msg : "");
      setExportEnabled("copy-chart", "chart-export", false);
      showLimitNote(false, 0);
      tableCount.textContent = "";
      return;
    }
    capBlock = null;
    failCopy = null;
    managedBuildLabels = [];
    if (data.managed_failed) {
      setRunNote(data.managed_failed, true);
    } else if (data.managed_note) {
      setRunNote(data.managed_note, false);
    } else {
      setRunNote("", false);
    }
    if (titleLockedEl.value !== "true") titleEl.value = body.chart_title || defaultTitle();
    const tableEmpty = document.getElementById("table-empty");
    tableEmpty.hidden = true;
    tableEmpty.classList.remove("fail");
    tableEmpty.textContent = "Run to fill the table.";
    document.getElementById("result-table").hidden = false;
    setTableActions("table");
    snapshotLastRun(body);
    tableRows = (data.rows || []).map((row) => {
      const dims = {};
      Object.keys(row).forEach((k) => {
        if (k !== "bucket" && k !== "value" && k !== "incomplete" && k !== "series") dims[k] = row[k];
      });
      return {
        bucket: bucketLabel(row.bucket),
        bucketRaw: row.bucket,
        value: row.value,
        series: seriesFromRow(row),
        dims,
        dimKeys: Object.keys(dims),
        incomplete: !!row.incomplete,
      };
    });
    sortKey = "";
    sortDir = 1;
    renderTable();
    drawChart();
    syncNullNudge(data.rows || []);
    showLimitNote(!!data.truncated, data.limit || effectiveRowLimit());
    tableCount.textContent = tableRows.length + " row" + (tableRows.length === 1 ? "" : "s");
  } finally {
    stopRunButtonDots();
    runInFlight = false;
    syncCostGate();
    runBtn.textContent = "Run";
    if (!tableRows.length && catKind === "running") {
      setChartEmpty("empty");
    }
  }
});
// --- Layout: collapsible panes, draggable dividers. Persisted via /api/save.
const layoutForm = document.getElementById("f");
const resultsEl = document.querySelector(".results");
const CONFIG_COL_MIN = 256;
function configColMax() {
  return Math.max(CONFIG_COL_MIN, Math.min(640, Math.round(window.innerWidth * 0.5)));
}
function saveLayout(patch) {
  post("/api/save", patch);
}
function setConfigCollapsed(collapsed, persist) {
  layoutForm.classList.toggle("config-collapsed", collapsed);
  const btn = document.getElementById("config-toggle");
  btn.setAttribute("aria-expanded", collapsed ? "false" : "true");
  btn.setAttribute("aria-label", collapsed ? "Expand the query panel" : "Collapse the query panel");
  if (persist) saveLayout({ layout_config_collapsed: collapsed });
}
document.getElementById("config-toggle").addEventListener("click", () => {
  setConfigCollapsed(!layoutForm.classList.contains("config-collapsed"), true);
});
function bindDivider(el, opts) {
  el.addEventListener("pointerdown", (e) => {
    if (e.button !== 0 || (e.target && e.target.closest(".col-flyout"))) return;
    e.preventDefault();
    const startX = e.clientX;
    const startY = e.clientY;
    let moved = false;
    try { el.setPointerCapture(e.pointerId); } catch (err) { /* synthetic pointers */ }
    const move = (ev) => {
      if (!moved && Math.abs(ev.clientX - startX) < 4 && Math.abs(ev.clientY - startY) < 4) return;
      if (!moved) {
        moved = true;
        el.classList.add("dragging");
      }
      opts.drag(ev);
    };
    const up = () => {
      el.classList.remove("dragging");
      el.removeEventListener("pointermove", move);
      el.removeEventListener("pointerup", up);
      el.removeEventListener("pointercancel", up);
      opts.end(moved);
      if (moved) {
        // A drag that started on the toggle must not fire its click.
        el.addEventListener("click", (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
        }, { capture: true, once: true });
      }
    };
    el.addEventListener("pointermove", move);
    el.addEventListener("pointerup", up);
    el.addEventListener("pointercancel", up);
  });
  el.addEventListener("dblclick", (e) => {
    if (e.target && e.target.closest("button")) return;
    opts.reset();
  });
}
let configColPx = 0;
const CONFIG_COL_WIDE = 560;
function setConfigWidth(px, persist) {
  setConfigCollapsed(false, false);
  configColPx = px;
  if (px) layoutForm.style.setProperty("--fc-config-col", px + "px");
  else layoutForm.style.removeProperty("--fc-config-col");
  if (persist) saveLayout({ layout_config_px: px, layout_config_collapsed: false });
}
bindDivider(document.getElementById("col-divider"), {
  drag: (e) => {
    if (layoutForm.classList.contains("config-collapsed")) setConfigCollapsed(false, false);
    const left = layoutForm.getBoundingClientRect().left;
    configColPx = Math.round(Math.min(configColMax(), Math.max(CONFIG_COL_MIN, e.clientX - left)));
    layoutForm.style.setProperty("--fc-config-col", configColPx + "px");
  },
  end: (moved) => {
    if (moved) saveLayout({ layout_config_px: configColPx, layout_config_collapsed: false });
  },
  reset: () => setConfigWidth(0, true),
});
document.getElementById("config-collapse").addEventListener("click", () => setConfigCollapsed(true, true));
document.getElementById("config-default").addEventListener("click", () => setConfigWidth(0, true));
document.getElementById("config-wide").addEventListener("click", () => {
  setConfigWidth(Math.min(configColMax(), CONFIG_COL_WIDE), true);
});
let chartHeightPx = 0;
bindDivider(document.getElementById("row-divider"), {
  drag: (e) => {
    const top = document.querySelector(".pane-chart").getBoundingClientRect().top;
    const max = Math.max(128, window.innerHeight - 220);
    chartHeightPx = Math.round(Math.min(max, Math.max(128, e.clientY - top)));
    resultsEl.style.setProperty("--fc-chart-px", chartHeightPx + "px");
  },
  end: (moved) => {
    if (moved && chartHeightPx) saveLayout({ layout_chart_px: chartHeightPx });
  },
  reset: () => {
    chartHeightPx = 0;
    resultsEl.style.removeProperty("--fc-chart-px");
    saveLayout({ layout_chart_px: 0 });
  },
});
function paneFor(name) {
  return document.querySelector(".pane-" + name);
}
function syncRowDivider() {
  document.getElementById("row-divider").hidden =
    paneFor("chart").classList.contains("closed") || paneFor("table").classList.contains("closed");
}
function setPaneOpen(name, open, persist) {
  const pane = paneFor(name);
  pane.classList.toggle("closed", !open);
  const btn = pane.querySelector(".pane-toggle");
  const label = name === "sql" ? "SQL" : name;
  btn.setAttribute("aria-expanded", open ? "true" : "false");
  btn.title = (open ? "Collapse " : "Expand ") + label;
  syncRowDivider();
  if (name === "chart" && open) {
    requestAnimationFrame(() => {
      if (chart) chart.resize();
    });
  }
  if (persist) saveLayout({ ["pane_" + name + "_open"]: open });
}
document.querySelectorAll(".pane-toggle").forEach((btn) => {
  btn.addEventListener("click", () => {
    const name = btn.getAttribute("data-pane");
    setPaneOpen(name, paneFor(name).classList.contains("closed"), true);
  });
});
document.querySelectorAll(".pane-head").forEach((head) => {
  head.addEventListener("click", (e) => {
    if (e.target.closest("button, input, select, details, a, label")) return;
    const btn = head.querySelector(".pane-toggle");
    if (btn) btn.click();
  });
});
scheduleEstimate();
prefetchCat();
if (!tableRows.length) {
  if (catKind !== "fail" && catKind !== "running") setChartEmpty("wait");
}
</script>
{% endblock %}