/*
    Visual query designer. Layout only: every colour, radius, spacing and font comes from a semantic
    Flare token, so the designer takes on whatever theme the host applies without knowing any of them.
*/

.flare-qb {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-6);
    color: var(--flare-color-on-surface);
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);

    /*
       One width per kind of field, shared by every row in every section. Kept here rather than
       spread through the rules below so the whole set can be read, and retuned, in one place.

       Sized for the names a real schema carries rather than for the demo's short ones: a field
       picker holds "alias.somethingDescriptive" and a relation picker a key like
       "request_apiKey", and a box that fits the example but not the real thing is a box that
       will be wrong in use. The list that opens is not bound by these - it takes the width its
       own values need.
    */
    --_col-target: 16rem;
    --_col-relation: 14rem;
    --_col-value: 12rem;
    --_col-op: 10rem;
    --_col-alias: 10rem;
    --_col-unit: 9rem;
}

.flare-qb__section {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-4);
    padding: var(--flare-spacing-6);
    background: var(--flare-color-surface-container-low);
    border: 1px solid var(--flare-color-outline-variant);
    border-radius: var(--flare-shape-medium);
}

.flare-qb__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--flare-spacing-4);
}

.flare-qb__heading {
    margin: 0;
    font-family: var(--flare-typescale-title-small-font);
    font-size: var(--flare-typescale-title-small-size);
    font-weight: var(--flare-typescale-title-small-weight);
    color: var(--flare-color-on-surface-variant);
}

/* Rows wrap rather than scroll: a designer is often placed in a narrow panel, and a wrapped row
   stays usable where a horizontally scrolled one does not. */
.flare-qb__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flare-spacing-4);
}

/*
   Cells never grow. Left to grow they divided the leftover width between however many of them a
   given row happened to have, so a row of three handed each a third and a row of five a fifth, and
   the trailing one swallowed whatever was left: the same dropdown came out 132px under Columns and
   381px two cells later. A field of one kind is now the same width wherever it appears, which is
   what makes the designer read as columns rather than as rows of assorted boxes.

   Shrinking stays allowed as a safety valve. Rows wrap before it ever applies, so it only matters
   when a single cell is wider than the panel it is in.
*/
.flare-qb__cell {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

/*
   The control fills its cell. Without this a cell was the width declared below while the select or
   field inside it stayed as narrow as whatever it happened to be showing, so a picker holding
   "Requests" and one holding "r.timestamp" were visibly different boxes and the column widths
   below changed nothing but the gaps between them.
*/
.flare-qb__cell > * {
    flex: 1 1 auto;
    min-width: 0;
}

.flare-qb__cell--target {
    flex-basis: var(--_col-target);
}

.flare-qb__cell--relation {
    flex-basis: var(--_col-relation);
}

.flare-qb__cell--value {
    flex-basis: var(--_col-value);
}

/* Operators, aggregates, join kinds, periods and sort directions are all short closed lists, and
   they line up down the designer when they share a width. */
.flare-qb__cell--op {
    flex-basis: var(--_col-op);
}

.flare-qb__cell--alias {
    flex-basis: var(--_col-alias);
}

.flare-qb__cell--unit {
    flex-basis: var(--_col-unit);
}

/* A checkbox is as wide as its label; giving it a column of its own would only add a gap. */
.flare-qb__cell--flag,
.flare-qb__cell--relative {
    flex: 0 0 auto;
}

/* The condition tree indents each nesting level so the shape of the logic is visible at a glance. */
.flare-qb__group {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-3);
    padding: var(--flare-spacing-4);
    border: 1px solid var(--flare-color-outline-variant);
    border-radius: var(--flare-shape-small);
    background: var(--flare-color-surface);
}

.flare-qb__group .flare-qb__group {
    margin-inline-start: var(--flare-spacing-6);
    background: var(--flare-color-surface-container);
}

.flare-qb__group-head {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-3);
}

.flare-qb__group-body {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-3);
}

.flare-qb__connector {
    padding: var(--flare-spacing-2) var(--flare-spacing-4);
    border: 1px solid var(--flare-color-outline);
    border-radius: var(--flare-shape-full);
    background: var(--flare-color-surface-container-high);
    color: var(--flare-color-primary);
    font: inherit;
    font-weight: var(--flare-typescale-label-large-weight);
    cursor: pointer;
    transition: background var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-qb__connector:hover {
    background: var(--flare-color-surface-container-highest);
}

.flare-qb__connector:focus-visible {
    outline: var(--flare-state-focus-ring-width) solid var(--flare-color-primary);
    outline-offset: var(--flare-state-focus-ring-offset);
}

.flare-qb__problems {
    margin: 0;
    padding-inline-start: var(--flare-spacing-6);
    color: var(--flare-color-error);
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-2);
}

.flare-qb__problems code {
    color: var(--flare-color-on-surface-variant);
}

.flare-qb__ok {
    margin: 0;
    color: var(--flare-color-on-surface-variant);
}

.flare-qe__problems {
    margin: var(--flare-spacing-8) 0 0;
    padding-inline-start: var(--flare-spacing-20);
    color: var(--flare-color-error);
    font-size: var(--flare-typescale-body-small-size);
}