.change-history {
    --history-bg: var(--issue-popup-control, var(--bs-body-bg, #fff));
    --history-text: var(--issue-popup-text, var(--bs-body-color, #17322f));
    --history-muted: var(--issue-popup-muted, var(--bs-secondary-color, #5a6b70));
    --history-border: var(--issue-popup-border, var(--bs-border-color, #d9e3e2));
    --history-accent: var(--issue-popup-accent, #087d70);
    color: var(--history-text);
    container-type: inline-size;
    font-size: .875rem;
    line-height: 1.5;
    min-width: 0;
    width: 100%;
}
.change-history-intro { align-items: start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.change-history-intro strong { font-size: 1.15rem; }
.change-history-intro p { color: var(--history-muted); font-size: .8125rem; margin: .2rem 0 0; }
.change-history-total { background: color-mix(in srgb, var(--history-accent) 9%, var(--history-bg)); border: 1px solid var(--history-border); border-radius: 2rem; flex-shrink: 0; font-size: .75rem; font-weight: 600; padding: .3rem .65rem; }
.change-history-tools { align-items: end; display: flex; flex-wrap: wrap; gap: .75rem; }
.change-history-tools label { display: flex; flex-direction: column; gap: .25rem; margin: 0; min-width: 0; }
.change-history-tools label > span { color: var(--history-muted); font-size: .75rem; font-weight: 600; }
.change-history-search { flex: 1 1 15rem; }
.change-history-tools input, .change-history-tools select { background: var(--history-bg); border: 1px solid var(--history-border); border-radius: .4rem; color: var(--history-text); font: inherit; min-height: 2.5rem; padding: .5rem .65rem; width: 100%; }
.change-history-tools select { min-width: 11rem; }
.change-history-results { color: var(--history-muted); font-size: .75rem; margin: .6rem 0 1rem; }
.change-history-day h3 { border-bottom: 1px solid var(--history-border); color: var(--history-muted); font-size: .8rem; font-weight: 600; margin: 1.25rem 0 .75rem; padding-bottom: .45rem; }
.change-history-who { align-items: baseline; display: flex; flex-wrap: wrap; gap: .65rem; padding: 0 0 .5rem; }
.change-history-who time { color: var(--history-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.change-history-who strong { font-size: .8125rem; overflow-wrap: anywhere; }
.change-history-events { list-style: none; margin: 0 0 1rem .95rem; padding: 0 0 0 1.4rem; border-left: 1px solid var(--history-border); }
.change-history-event { position: relative; margin: 0 0 .6rem; --event-color: #2274b1; }
.change-history-event.created { --event-color: #15764d; }
.change-history-event.deleted { --event-color: #bb4149; }
.change-history-event.linked, .change-history-event.unlinked { --event-color: #7855a6; }
.change-history-event.other { --event-color: #637580; }
.change-history-icon { align-items: center; background: var(--history-bg); border: 1px solid var(--history-border); border-radius: 50%; display: flex; height: 1.85rem; justify-content: center; left: -2.36rem; position: absolute; top: .65rem; width: 1.85rem; }
.change-history-icon img { height: 1.05rem; width: 1.05rem; }
.change-history-event article { background: var(--history-bg); border: 1px solid var(--history-border); border-left: 3px solid var(--event-color); border-radius: .5rem; padding: .75rem .85rem; min-width: 0; }
.change-history-event header { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .45rem; }
.change-history-event header strong { font-size: .8125rem; overflow-wrap: anywhere; }
.change-history-badge { background: color-mix(in srgb, var(--event-color) 10%, var(--history-bg)); color: var(--event-color); border-radius: .25rem; font-size: .6875rem; font-weight: 700; padding: .12rem .4rem; }
.change-history-field { font-size: .8125rem; font-weight: 600; margin-bottom: .45rem; }
.change-history-values { align-items: stretch; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) 1rem minmax(0, 1fr); }
.change-history-value { background: color-mix(in srgb, var(--history-muted) 6%, var(--history-bg)); border-radius: .3rem; padding: .5rem .65rem; min-width: 0; }
.change-history-value.after { background: color-mix(in srgb, var(--history-accent) 7%, var(--history-bg)); }
.change-history-value-label { color: var(--history-muted); display: block; font-size: .6875rem; font-weight: 600; margin-bottom: .2rem; }
.change-history-full-value, .change-history-preview { overflow-wrap: anywhere; white-space: pre-wrap; }
.change-history-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.change-history-arrow { align-self: center; color: var(--history-muted); }
.change-history-description { margin: 0; overflow-wrap: anywhere; }
.change-history-expand { color: var(--history-accent); display: block; font-size: .75rem; font-weight: 600; margin-top: .3rem; }
.change-history-value summary { cursor: pointer; }
.change-history-value details[open] summary .change-history-preview, .change-history-value details[open] .change-history-expand { display: none; }
.change-history-collapse { display: none; }
.change-history-value details[open] .change-history-collapse { color: var(--history-accent); display: inline; font-size: .75rem; font-weight: 600; }
.change-history-value details[open] summary { margin-bottom: .4rem; }
.change-history-empty { align-items: center; border: 1px dashed var(--history-border); border-radius: .6rem; display: flex; flex-direction: column; padding: 2.5rem 1rem; text-align: center; }
.change-history-empty img { height: 2rem; width: 2rem; margin-bottom: .75rem; }
.change-history-empty p { color: var(--history-muted); margin: .4rem 0 1rem; }
.change-history button { background: var(--history-bg); border: 1px solid var(--history-border); border-radius: .4rem; color: var(--history-accent); cursor: pointer; font: inherit; font-weight: 600; padding: .5rem .8rem; }
.change-history button:hover { background: color-mix(in srgb, var(--history-accent) 8%, var(--history-bg)); }
.change-history-more { display: block; margin: .75rem auto; }
.change-history :is(button, input, select, summary):focus-visible { outline: 2px solid var(--history-accent); outline-offset: 3px; }
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark, [data-bs-theme="dark"]) .change-history { --history-bg: var(--issue-popup-control, #17232d); --history-text: var(--issue-popup-text, #e8f4f1); --history-muted: var(--issue-popup-muted, #a4bab7); --history-border: var(--issue-popup-border, #31505b); --history-accent: #69d7c1; color-scheme: dark; }
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark, [data-bs-theme="dark"]) .change-history-event { --event-color: #82bffa; }
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark, [data-bs-theme="dark"]) .change-history-event.created { --event-color: #73dca5; }
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark, [data-bs-theme="dark"]) .change-history-event.deleted { --event-color: #ff9ca5; }
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark, [data-bs-theme="dark"]) .change-history-event:is(.linked, .unlinked) { --event-color: #c6adfa; }
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark, [data-bs-theme="dark"]) .change-history-event.other { --event-color: #b5c8d1; }
@container (max-width: 500px) {
    .change-history-intro { flex-wrap: wrap; gap: .5rem; }
    .change-history-tools > label { flex: 1 1 100%; }
    .change-history-values { grid-template-columns: minmax(0, 1fr); }
    .change-history-arrow { display: none; }
    .change-history-event article { padding: .65rem; }
    .change-history-events { padding-left: 1rem; }
    .change-history-icon { left: -1.96rem; }
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark, [data-bs-theme="dark"]) .change-history :is(.change-history-icon, .change-history-empty) img { filter: brightness(0) invert(1); opacity: .9; }
