/* Conditional-styling builder — the colour rules a saved view paints its grid by.
   Markup: shared/components/_styling_builder.html. Behaviour:
   shared/js/styling-builder.js.

   The rule card and the colour token live here. The tokens and the pickers are
   components/filter-builder.css, because a clause IS that control, and two
   stylesheets for one control would drift. */

/* One rule: a card read top to bottom — its conditions, then, set apart along the
   bottom edge, what it paints. */
.global-styling-builder-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-smd);
}

.global-styling-builder-rule {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
}

.global-styling-builder-rule__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-xs) 0 var(--spacing-sm);
}

.global-styling-builder-rule__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.global-styling-builder-rule__remove {
    padding: var(--spacing-2xs) var(--spacing-xs);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.global-styling-builder-rule__remove:hover {
    color: var(--color-error);
    background: var(--color-error-subtle);
}

.global-styling-builder-rule__remove:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.global-styling-builder-rule__when {
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
}

/* One clause to a line. The line is the box every picker inside it hangs from, so
   a picker opened off the last token still lands inside the drawer. */
.global-styling-builder-line {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.global-styling-builder-line .global-filter-builder-anchor {
    position: static;
}

.global-styling-builder-line .global-filter-builder-picker,
.global-styling-builder-line .global-filter-builder-picker--narrow {
    width: 100%;
}

.global-styling-builder-line .global-filter-builder-token {
    text-align: left;
}

/* "When", "and", "Paint" — one column wide, so the clauses line up under each
   other. */
.global-styling-builder-line__lead {
    flex: 0 0 var(--spacing-2xl);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* The result: along the bottom of the card, on the card's quieter ground. */
.global-styling-builder-rule__result {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-surface-subtle);
    border-top: 1px solid var(--color-border);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* The colour token wears the fill the cell will wear, so the rule shows its own
   answer rather than naming it. The four slots are the platform's and nothing else
   (Nick's rule, 2026-09-02) — the same pairs object-grid.css paints a cell with. */
.global-styling-builder-token--tone {
    font-weight: var(--font-weight-medium);
    background: var(--styling-tone-bg);
    color: var(--styling-tone-text);
    border: 1px solid transparent;
}

.global-styling-builder-token--tone:hover {
    /* Filter tokens light up on hover; this one already carries a fill, so it
       draws its own edge instead of trading the fill for the hover grey. */
    background: var(--styling-tone-bg);
    border-color: var(--styling-tone-text);
}

/* A dot in the pick list, where the option's own row has to stay readable. */
.global-styling-builder-swatch::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: var(--spacing-xs);
    vertical-align: -1px;
    background: var(--styling-tone-text);
    border-radius: var(--radius-pill);
}

.is-tone-success {
    --styling-tone-bg: var(--color-success-bg);
    --styling-tone-text: var(--color-success-text);
}

.is-tone-warning {
    --styling-tone-bg: var(--color-warning-bg);
    --styling-tone-text: var(--color-warning-text);
}

.is-tone-danger {
    --styling-tone-bg: var(--color-error-subtle);
    --styling-tone-text: var(--color-error-text);
}

.is-tone-info {
    --styling-tone-bg: var(--status-info-bg);
    --styling-tone-text: var(--color-info);
}

/* A further condition's own small delete, at the end of its line. */
.global-styling-builder-condition__remove {
    margin-left: auto;
    padding: 0 var(--spacing-2xs);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.global-styling-builder-condition__remove:hover {
    color: var(--color-error);
    background: var(--color-error-subtle);
}

.global-styling-builder-condition__remove:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}