.style-match-window { position: fixed; z-index: 1050; background: var(--bs-body-bg, white); border: 1px solid #adb5bd; border-radius: .5rem; box-shadow: 0 .5rem 2rem #0004; resize: both; overflow: hidden; min-width: min(280px, calc(100vw - 16px)); min-height: min(240px, calc(100vh - 16px)); }
.style-match-window[hidden] { display: none !important; }
.style-match-window .modal-dialog { margin: 0; width: 100%; height: 100%; max-width: none; pointer-events: auto; }
.style-match-window .modal-content { height: 100%; max-height: none; border: 0; }
.style-match-window .modal-header { cursor: move; touch-action: none; flex-wrap: wrap; gap: .3rem; padding: .5rem; }
.style-match-window .modal-title { font-size: 1rem; overflow-wrap: anywhere; flex: 1; }
.style-match-window .modal-title span { display: block; font-size: .85em; }
.style-match-window .modal-body { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; padding: .5rem; }
.style-match-window .modal-body > p { margin-bottom: .4rem; }
.style-match-window .modal-footer { flex-shrink: 0; padding: .4rem; gap: .25rem; }
.style-match-window .modal-footer .btn { margin: 0; font-size: .875rem; }
/* Rows: source style | relation and status | template style. */
.style-match { display: flex; flex-direction: column; flex: 1; min-height: 0; container-type: inline-size; }
.style-match-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-bottom: .4rem; border-bottom: 1px solid #dee2e6; }
.style-match-filter { flex: 1 1 12rem; width: auto; min-width: 0; }
.style-match-status-filter { flex: 0 1 12rem; width: auto; min-width: 0; }
.style-match-summary { flex: 1 1 100%; color: #495057; }
.style-match-preview-note { flex: 1 1 100%; padding: .25rem .5rem; border-radius: .25rem; background: #e7f1ff; color: #084298; }
.style-match-preview-note[data-state=error] { background: #fff3cd; color: #664d03; }
.style-match-font-note { flex: 1 1 100%; padding: .25rem .5rem; border-radius: .25rem; background: #f8f9fa; color: #495057; }
.style-match-preview-note[hidden], .style-match-font-note[hidden], .style-match-section[hidden], .style-match-row[hidden], .style-match-no-results[hidden] { display: none !important; }
/* Master-detail: the rows and, beside them, the template catalogue of the active row. */
.style-match-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 1fr); gap: .5rem; padding-top: .4rem; }
.style-match-scroll { min-height: 7rem; overflow-y: auto; container-type: inline-size; }
.style-match-section + .style-match-section { margin-top: .75rem; }
.style-match-table { table-layout: fixed; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.style-match-table thead { position: sticky; top: 0; z-index: 3; background: var(--bs-body-bg, white); box-shadow: 0 1px 0 #ced4da; }
.style-match-table th { background: var(--bs-body-bg, white); font-size: .8rem; vertical-align: bottom; padding: .3rem .4rem; overflow-wrap: anywhere; }
.style-match-section__title { font-size: .95rem !important; text-align: left; border-bottom: 0 !important; }
.style-match-section__title .material-icons { font-size: 1.1rem; vertical-align: -.2rem; color: #6c757d; }
.style-match-columns th { color: #6c757d; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.style-match-table col.style-match-source, .style-match-table col.style-match-target { width: 43%; }
.style-match-table col.style-match-relation { width: 14%; }
.style-match-table .style-match-relation { text-align: center; }
.style-match-row td { vertical-align: top; padding: .45rem .4rem; overflow-wrap: anywhere; min-width: 0; border-bottom: 1px solid #e9ecef; }
.style-match-row td:first-child { border-left: 4px solid #adb5bd; }
.style-match-row { cursor: pointer; }
.style-match-row--active td { background: #eef4ff; }
.style-match-row--active td:last-child { box-shadow: inset -3px 0 0 var(--bs-primary, #0d6efd); }
.style-match-row[data-state=assigned] td:first-child { border-left-color: #198754; }
.style-match-row[data-state=changed] td:first-child { border-left-color: #fd7e14; }
.style-match-row[data-state=proposed] td:first-child { border-left-color: #6f42c1; }
.style-match-row[data-state=changed], .style-match-row[data-state=proposed] { background: #fffaf0; }
.style-match-name { display: flex; align-items: center; gap: .35rem; min-height: calc(1.5em + .5rem + 2px); font-weight: 600; font-size: .875rem; }
.style-match-name__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-match-count { font-weight: 500; border: 1px solid #ced4da; }
.style-match-relation { color: #6c757d; }
.style-match-relation .material-icons { display: block; margin: .3rem auto .25rem; font-size: 1.25rem; }
.style-match-state { white-space: normal; font-weight: 600; }
.style-match-state--unassigned { background: #e9ecef; color: #495057; }
.style-match-state--assigned { background: #d1e7dd; color: #0f5132; }
.style-match-state--changed { background: #ffe5d0; color: #833c00; }
.style-match-state--proposed { background: #e2d9f3; color: #432874; }
.style-match-path { display: block; color: #6c757d; font-size: .72rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Assigned template style: opens the catalogue for the row. */
.style-match-pick { display: block; width: 100%; padding: .25rem .35rem; text-align: left; background: var(--bs-body-bg, white); border: 1px solid #ced4da; border-radius: .25rem; color: inherit; }
.style-match-pick:hover, .style-match-row--active .style-match-pick { border-color: var(--bs-primary, #0d6efd); }
.style-match-pick__name { display: flex; align-items: center; gap: .25rem; font-size: .875rem; min-height: 1.5rem; }
.style-match-pick__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-match-pick__name .material-icons { font-size: 1.1rem; color: #6c757d; }
/* Same box on both sides so that source and template samples line up: one line of text in the style's
 * typography (capped size, no spacing) and its real values below. */
.style-match-sample { position: relative; contain: paint; overflow: hidden; background: #f4f5f6; border: 1px solid #ced4da; border-radius: .25rem; margin-top: .35rem; color: #222; }
.style-match-sample__text { height: 2.25rem; line-height: 2.25rem !important; padding: 0 .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-match-sample__meta { display: flex; align-items: center; gap: .3rem; height: 1.25rem; padding: 0 .4rem; border-top: 1px solid #e3e6e8; background: #fafbfb; color: #6c757d; font: .72rem/1.25rem var(--bs-body-font-family, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-match-sample--inverse { background: #495057; }
.style-match-swatch { flex-shrink: 0; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid #0003; }
.style-match-font-missing { flex-shrink: 0; font-size: .85rem !important; color: #b35c00; }
.style-match-sample--empty { display: flex; align-items: center; height: calc(3.5rem + 3px); background: repeating-linear-gradient(135deg, #f8f9fa 0 8px, #f1f3f5 8px 16px); border-style: dashed; color: #6c757d; font-size: .8rem; font-style: italic; }
.style-match-sample--empty .style-match-sample__text { height: auto; line-height: 1.3 !important; white-space: normal; }
/* Template catalogue. */
.style-match-catalog { display: flex; flex-direction: column; min-height: 0; border: 1px solid #dee2e6; border-radius: .25rem; background: var(--bs-body-bg, white); }
.style-match-catalog__head { display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem 0; font-size: .875rem; }
.style-match-catalog__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-match-catalog .style-match-catalog__back { display: none; }
.style-match-catalog__tools { display: flex; gap: .4rem; padding: .4rem .5rem; border-bottom: 1px solid #dee2e6; }
.style-match-catalog__search { flex: 1 1 8rem; min-width: 0; }
.style-match-catalog__sort { flex: 0 1 11rem; width: auto; min-width: 0; }
.style-match-options { flex: 1; min-height: 0; overflow-y: auto; }
.style-match-option { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .5rem; align-items: center; padding: .3rem .5rem; border-bottom: 1px solid #eee; cursor: pointer; }
.style-match-option .style-match-sample { margin: 0; }
.style-match-option .style-match-sample__text { height: 1.9rem; line-height: 1.9rem !important; }
.style-match-option__name { min-width: 0; font-size: .85rem; overflow-wrap: anywhere; }
.style-match-option__hint { color: #6c757d; font-size: .8rem; font-style: italic; }
.style-match-option[aria-selected=true] { background: #e7f1ff; }
.style-match-option[aria-selected=true] .style-match-option__label { font-weight: 700; }
.style-match-option:hover, .style-match-option.active { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: -2px; }
.style-match-group__toggle { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .3rem; width: 100%; padding: .3rem .4rem; border: 0; border-bottom: 1px solid #dee2e6; background: #f1f3f5; text-align: left; font-size: .8rem; font-weight: 600; color: #343a40; }
.style-match-group__toggle .material-icons { font-size: 1.1rem; color: #6c757d; }
.style-match-group__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-match-empty, .style-match-no-results { margin: .5rem; }
/* Narrow windows: the catalogue covers the rows while a style is being chosen. */
@container (max-width: 48rem) {
    .style-match-body { grid-template-columns: minmax(0, 1fr); }
    .style-match-catalog { position: absolute; inset: .4rem 0 0; z-index: 6; box-shadow: 0 .25rem 1rem #0003; }
    .style-match:not(.style-match--choosing) .style-match-catalog { display: none; }
    .style-match-catalog .style-match-catalog__back { display: inline-flex; }
    .style-match-option { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}
/* Narrow windows: each row becomes a card with its zones stacked. */
@container (max-width: 34rem) {
    .style-match-table, .style-match-table tbody, .style-match-table tr, .style-match-table td { display: block; width: auto !important; }
    .style-match-table thead { display: block; }
    .style-match-table thead tr:first-child { display: block; }
    .style-match-table thead th { display: block; }
    .style-match-columns, .style-match-table colgroup { display: none !important; }
    .style-match-row { border: 1px solid #dee2e6; border-left: 4px solid #adb5bd; border-radius: .25rem; margin-top: .5rem; }
    .style-match-row[data-state=assigned] { border-left-color: #198754; }
    .style-match-row[data-state=changed] { border-left-color: #fd7e14; }
    .style-match-row[data-state=proposed] { border-left-color: #6f42c1; }
    .style-match-row td, .style-match-row td:first-child { border: 0; }
    .style-match-row .style-match-relation { display: flex; align-items: center; gap: .4rem; padding-block: 0; text-align: left; }
    .style-match-relation .material-icons { margin: 0; transform: rotate(90deg); }
}
.page-toolbar--document .page-toolbar__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-toolbar--document .page-toolbar__actions > .btn, .page-toolbar--document .page-toolbar__actions > .dropdown > .btn, .page-toolbar--document .page-toolbar__actions > label { height: 2.25rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; margin-block: 0; }
.page-toolbar--document .page-toolbar__actions .material-icons { flex-shrink: 0; line-height: 1; }
.page-toolbar--document .page-toolbar__actions [hidden] { display: none !important; }