/*
 * Shared UI components added on top of style.css.
 * Kept in a separate, cache-busted file so additions reach clients without a
 * hard refresh (style.css itself is loaded through {% compress %}).
 */

.button.green {
    --btn-bg: var(--primary-green);
    --btn-color: var(--primary-color-inverse);
    /* The global `.green` text utility is declared later in this file; keep the
       button label white with the class-specific rule. */
    color: rgb(var(--btn-color));
}

.button.green:hover {
    color: rgb(var(--btn-color));
    background: rgb(25, 176, 132);
}

/* AUDIT DIFF (old -> new chips) — reusable across audit history surfaces */

.audit-diff {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
    vertical-align: middle;
}

.audit-diff .tag {
    display: inline-block;
    max-width: 28em;
    overflow-wrap: anywhere;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    font-family: monospace;
    font-size: 0.85em;
    line-height: 1.6;
}

.audit-diff .arrow-right {
    --arrow-size: 4px;
    flex: 0 0 auto;
    margin: 0 0.1em;
}

.audit-diff-list {
    margin: 0.4em 0 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.audit-diff-list > li {
    overflow-wrap: anywhere;
}

.history-action .audit-diff-list {
    white-space: normal;
}

/* Base tint tokens used by .tag.*.light / .button.*.light were referenced
   but never defined; provide them so soft chips are readable. */
:root {
    --primary-color-light: var(--primary-color), 0.1;
    --secondary-color-light: var(--secondary-color), 0.1;
    --tertiary-color-light: var(--tertiary-color), 0.1;
}