/* Comparison setup, list and overview. The builder follows an 8px rhythm: 8px micro gaps, 16px
   field gaps and 24px section/card gaps. Rules stay scoped so shared controls keep one appearance. */

.comparisons-page {
    display: grid;
    gap: var(--space-6);
    min-width: 0;
}

.comparisons-page .comparison-page-header,
.comparison-benchmark-page .benchmark-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: 0;
}

.comparisons-page .comparison-page-header > div,
.comparison-benchmark-page .benchmark-header > div {
    max-width: 52rem;
}

/* No overflow clip: every corner-adjacent child is white on white, and clipping here cut the
   bottom of any row menu that opened downward near the card edge. */
.comparisons-page .comparison-list-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.comparisons-page .comparison-toolbar {
    align-items: center;
    gap: var(--space-4);
    min-height: 4.5rem;
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
    /* The card no longer clips its children, so the toolbar carries the top arcs itself. */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* The toggle anchors the right edge whether or not the search and facet render. */
.comparisons-page .comparison-toolbar .comparison-archived-toggle {
    margin-left: auto;
}

.comparisons-page .comparison-filter-count {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    white-space: nowrap;
}

.comparisons-page .comparison-toolbar h2 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

.comparisons-page .comparison-toolbar p {
    margin: var(--space-1) 0 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparisons-page .comparison-table-scroll {
    overflow-x: auto;
    /* A scrolling box clips its absolutely positioned descendants, and the obligations hint opens
       downward out of the header row. Measured on a one-row list: the panel lost its bottom 15% at
       every viewport. This is the height the panel needs below the header. Any list of two or more
       rows already exceeds it, so nothing gains whitespace that did not need it. */
    min-height: 9rem;
}

/* The six columns fit every supported width from 1100px up, so the scroll box — which would clip
   the kebab menu opening from the last row — stands down where it has nothing to scroll. */
@media (min-width: 1100px) {
    .comparisons-page .comparison-table-scroll {
        overflow: visible;
        min-height: 0;
    }
}

.comparisons-page .saved-comparisons-table td[data-label="Status"],
.comparisons-page .saved-comparisons-table td[data-label="Last run"] {
    white-space: nowrap;
}

/* One size for every secondary cell, so the table reads on two levels only: the name, and
   everything else. */
.comparisons-page .saved-comparisons-table td[data-label="Review activity"],
.comparisons-page .saved-comparisons-table td[data-label="Last run"],
.comparisons-page .saved-comparisons-table td[data-label="Differences"] .cell-zero {
    font-size: var(--text-caption1);
}

.comparisons-page .comparison-select-th,
.comparisons-page .comparison-select-cell {
    width: 34px;
    text-align: center;
}

.comparisons-page .comparison-select-cb {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--color-blue);
    cursor: pointer;
    vertical-align: middle;
}

/* Mirrors the assignments bulk bar, on tokens. */
.comparisons-page .comparison-bulk-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
}

.comparisons-page .comparison-bulk-count {
    color: var(--color-navy);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

.comparisons-page .comparison-bulk-clear {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-link);
    font-size: var(--text-caption1);
    text-decoration: underline;
    cursor: pointer;
}

.comparison-confirm .comparison-bulk-list {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-caption1);
    color: var(--color-navy);
}

.comparisons-page .comparison-menu-wrap {
    position: relative;
    display: inline-flex;
}

.comparisons-page .comparison-kebab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-service-grey);
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 1;
    cursor: pointer;
}

.comparisons-page .comparison-kebab:hover {
    background: var(--color-surface);
    color: var(--color-navy);
}

.comparisons-page .comparison-kebab:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.comparisons-page .comparison-kebab-menu {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 10rem;
    padding: var(--space-1);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.comparisons-page .comparison-kebab-menu[hidden] {
    display: none;
}

/* An archived row keeps Open, but demoted: it is a lookup, not live work. */
.comparisons-page .comparison-row-archived .comparison-open-action {
    border-color: transparent;
    color: var(--color-text-link);
}

.comparisons-page .comparison-kebab-menu button {
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-navy);
    font-family: var(--font-primary);
    font-size: var(--text-caption1);
    text-align: left;
    cursor: pointer;
}

.comparisons-page .comparison-kebab-menu button:hover {
    background: var(--color-surface);
}

.comparisons-page .comparison-kebab-menu button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.comparisons-page .saved-comparisons-table .comparison-action-heading,
.comparisons-page .saved-comparisons-table .comparison-action-cell {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.comparisons-page .comparison-open-action {
    min-width: 4.5rem;
}

.comparisons-page .comparison-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* btn-tertiary's --color-blue reads 4.37:1 at this size on a shaded row. Same reason as the
   review pill below: --color-text-link is the token for these backgrounds. */
.comparisons-page .comparison-row-actions .btn-tertiary {
    color: var(--color-text-link);
}

.comparisons-page .comparison-row-actions .btn-tertiary:hover {
    color: var(--color-text-link-hover);
}

.comparisons-page .comparison-archived-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
    white-space: nowrap;
}

/* A default checkbox renders around 14px, under the 24x24 floor in WCAG 2.5.8. */
.comparisons-page .comparison-archived-toggle input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--color-blue);
}

/* An archived row is still readable, so it is dimmed rather than greyed out of legibility. */
.comparisons-page .comparison-row-archived td {
    opacity: .72;
}

.comparisons-page .comparison-archived-pill {
    background: var(--color-white);
    border-style: dashed;
}

/* The counts that decide whether this row can be deleted or only archived. */
.comparisons-page .comparison-history-note {
    color: var(--color-service-grey);
    white-space: nowrap;
}

.comparisons-page .comparison-run-date {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparisons-page .comparison-action-error {
    margin: 0;
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-navy);
    font-size: var(--text-caption1);
}

/* Unscoped: the dialog renders as a sibling of .comparisons-page, not inside it. */
.comparison-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 310;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: var(--clv-color-overlay);
}

.comparison-confirm {
    width: min(480px, 100%);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.comparison-confirm h3 {
    margin: 0 0 var(--space-3);
    color: var(--color-navy);
    font-size: var(--text-title3);
}

.comparison-confirm p {
    margin: 0;
    color: var(--color-service-grey);
}

.comparison-confirm p + p {
    margin-top: var(--space-3);
}

.comparison-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.comparison-confirm-actions .btn {
    min-height: 44px;
}

.comparisons-page .comparison-builder,
.comparison-workspace .comparison-builder {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.comparisons-page .builder-heading,
.comparison-workspace .builder-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.comparison-benchmark-page .builder-eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The builder is a panel inside the page, not a second page, so its heading sits one step below
   the page title rather than competing with it. */
.comparisons-page .builder-heading h2,
.comparison-workspace .builder-heading h2 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

/* The sub-line inherits body size, which is larger and lighter than the heading above it. On a
   panel whose whole job is to pose one question, that inversion reads as though the answer text
   is the heading. */
.comparison-workspace .builder-heading p {
    margin: var(--space-1) 0 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    line-height: 1.5;
}

.comparisons-page .builder-close {
    flex: 0 0 auto;
}

/* One segmented control, not three cards. The pickers below each mode already describe what the
   mode does, so the label is all this control has to carry. */
.comparisons-page .comparison-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.comparisons-page .mode-card {
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-service-grey);
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.comparisons-page .mode-card:hover {
    color: var(--color-navy);
}

.comparisons-page .mode-card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.comparisons-page .mode-card.selected {
    background: var(--color-white);
    border-color: var(--color-blue);
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.comparisons-page .builder-section {
    display: grid;
    gap: var(--space-5);
    padding-top: var(--space-1);
}

.comparison-benchmark-page .benchmark-legend {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-full);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

/* The workspace root is included because the register now renders inside it as a tab as well as
   on its own route. Without it the register's filter labels fall back to inline and overlap
   their own controls. */
.comparisons-page .field,
.comparison-workspace .field,
.merge-workspace .field {
    display: grid;
    gap: var(--space-2);
}

.comparisons-page .field-label,
.comparison-workspace .field-label,
.merge-workspace .field-label {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

.comparisons-page .field input,
.comparisons-page .field select,
.comparisons-page .field textarea,
.comparison-workspace .field input,
.comparison-workspace .field select,
.comparison-workspace .field textarea,
.merge-workspace .field input,
.merge-workspace .field select,
.merge-workspace .field textarea {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    color: var(--color-text-primary);
    font: inherit;
}

.comparisons-page .field input:focus,
.comparisons-page .field select:focus,
.comparisons-page .field textarea:focus,
.merge-workspace .field input:focus,
.merge-workspace .field select:focus,
.merge-workspace .field textarea:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: var(--shadow-focus);
}

.comparisons-page .side-grid,
.comparison-workspace .side-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-6);
}

.comparisons-page .scope-picker,
.comparison-workspace .scope-picker {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-width: 0;
    margin: 0;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

/* The two what-next routes carry equal weight, so they take equal height with their actions on one
   baseline. Card size is read as importance before any word is, and a 483px route beside a 330px
   one reinstates by layout the default the panel deliberately does not have. The builder's own
   side-grid keeps align-items: start, where the two pickers are genuinely different lengths and
   stretching would pad one with empty well. Flex rather than grid only so margin-top: auto can
   push the action row down; for a stack of blocks with a gap the two render identically. */
.comparison-workspace .side-grid {
    align-items: stretch;
}

.comparison-workspace .scope-picker {
    display: flex;
    flex-direction: column;
}

.comparison-workspace .scope-picker .builder-summary {
    margin-top: auto;
}

/* A heading in normal flow, not a fieldset legend. A legend renders in the border notch, which on a
   filled card reads as text sitting on top of the border. */
.comparisons-page .picker-head,
.comparison-workspace .picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.comparisons-page .picker-title,
.comparison-workspace .picker-title {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

.comparisons-page .picker-filters {
    display: flex;
    gap: var(--space-2);
    min-width: 0;
}

.comparisons-page .picker-search {
    flex: 1 1 auto;
    min-width: 0;
}

.comparisons-page .picker-facet {
    flex: 0 1 11rem;
    min-width: 0;
}

.comparisons-page .picker-search,
.comparisons-page .picker-facet {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font: inherit;
}

.comparisons-page .picker-search:focus,
.comparisons-page .picker-facet:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: var(--shadow-focus);
}

.comparisons-page .comparison-name-field {
    max-width: 42rem;
}

.comparisons-page .role-sides {
    display: grid;
    gap: var(--space-5);
}

.comparisons-page .baseline-field {
    max-width: 28rem;
}

.comparisons-page .document-picker,
.comparisons-page .role-picker {
    min-width: 0;
}

.comparisons-page .picker-count {
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

.comparisons-page .document-options,
.comparison-workspace .document-options,
.comparisons-page .estate-options,
.comparisons-page .role-options {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-height: 0;
    padding-right: var(--space-1);
    overflow-y: auto;
}

/* Deliberately not widened to .comparison-workspace. The builder picks from the whole estate, so
   a reserved 13rem well stops the panel resizing as a search recuts a long list. The what-next
   card offers exactly two options, where the same well is 208px of box around 129px of content
   and a scroll region that can never scroll. */
.comparisons-page .document-options {
    min-height: 13rem;
    max-height: 25rem;
}

.comparisons-page .document-option,
.comparison-workspace .document-option,
.comparisons-page .estate-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.comparisons-page .document-option:hover,
.comparison-workspace .document-option:hover,
.comparisons-page .estate-option:hover {
    border-color: var(--color-blue);
}

.comparisons-page .document-option.selected,
.comparison-workspace .document-option.selected,
.comparisons-page .estate-option.selected {
    background: var(--color-info-tint);
    border-color: var(--color-blue);
}

.comparisons-page .document-option.unavailable,
.comparison-workspace .document-option.unavailable,
.comparisons-page .estate-option.unavailable,
.comparisons-page .estate-grain .unavailable {
    opacity: .55;
    cursor: not-allowed;
}

.comparisons-page .document-option input,
.comparison-workspace .document-option input,
.comparisons-page .estate-option input {
    width: 1.125rem;
    height: 1.125rem;
    margin: .125rem 0 0;
    accent-color: var(--color-blue);
}

.comparisons-page .document-option-body,
.comparison-workspace .document-option-body,
.comparisons-page .estate-option > span {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.comparisons-page .document-option-body strong,
.comparison-workspace .document-option-body strong,
.comparisons-page .estate-option strong {
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-size: var(--text-caption1);
}

.comparisons-page .document-option-body > span,
.comparison-workspace .document-option-body > span,
.comparisons-page .estate-option small {
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
    line-height: 1.4;
}

.comparisons-page .document-meta,
.comparison-workspace .document-meta {
    font-weight: var(--font-medium);
}

.comparisons-page .picker-empty,
.comparison-workspace .picker-empty {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    color: var(--color-service-grey);
    text-align: center;
}

/* Sized like .document-options: the unfiltered role catalogue is long, so this list is always
   scrolled rather than sometimes scrolled, and a floor stops it collapsing when a search narrows
   it to one or two matches. The ceiling is 24rem rather than 25rem so the fold cuts through a row
   instead of landing flush on one: at 25rem the ninth row ended 1.2px short of the edge and the
   list read as finished at nine roles. A visible sliver is the whole cue, so no count or caption
   has to say it. */
.comparisons-page .role-options {
    min-height: 13rem;
    max-height: 24rem;
}

.comparisons-page .role-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.comparisons-page .role-option:hover {
    border-color: var(--color-blue);
}

.comparisons-page .role-option.selected {
    background: var(--color-info-tint);
    border-color: var(--color-blue);
}

.comparisons-page .role-option:has(input:focus-visible) {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.comparisons-page .role-option input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--color-blue);
}

.comparisons-page .role-option-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.comparisons-page .role-option-body strong {
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-size: var(--text-caption1);
}

.comparisons-page .role-option-body small {
    flex: 0 0 auto;
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.comparisons-page .estate-grain {
    display: flex;
    gap: var(--space-2);
    min-width: 0;
}

.comparisons-page .estate-grain label {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    color: var(--color-service-grey);
    cursor: pointer;
}

.comparisons-page .estate-grain label:has(input:checked) {
    background: var(--color-info-tint);
    border-color: var(--color-blue);
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.comparisons-page .estate-grain label:has(input:focus-visible),
.comparisons-page .document-option:has(input:focus-visible),
.comparison-workspace .document-option:has(input:focus-visible),
.comparisons-page .estate-option:has(input:focus-visible) {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.comparisons-page .estate-grain input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.comparisons-page .comparator-picker .estate-options {
    max-height: 18rem;
}

.comparisons-page .builder-errors {
    padding: var(--space-4);
    background: var(--color-error-tint);
    border: 1px solid var(--color-error-tint-border);
    border-radius: var(--radius-md);
    color: var(--color-error);
}

.comparisons-page .builder-errors ul,
.comparison-workspace .builder-errors ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

/* An action row, not a banner. The filled band used to carry a restatement of the scope; with that
   removed it was a slab of navy holding one button. */
.comparisons-page .builder-summary,
.comparison-workspace .builder-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.comparisons-page .builder-summary strong,
.comparison-workspace .builder-summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-service-grey);
    font-size: var(--text-footnote);
    font-weight: var(--font-medium);
}

.comparisons-page .builder-submit,
.comparison-workspace .builder-submit {
    flex: 0 0 auto;
    /* The hint beside it disappears once the setup is valid, so the button anchors itself right
       rather than sliding across when it becomes the only child. */
    margin-left: auto;
}

.comparisons-page .comparison-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-6);
    color: var(--color-service-grey);
    text-align: center;
}

.comparisons-page .empty-state-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    background: var(--color-info-tint);
    border-radius: var(--radius-full);
    color: var(--color-blue);
    font-size: var(--text-title2);
}

.comparisons-page .comparison-empty-state h3 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

.comparisons-page .comparison-empty-state p {
    max-width: 38rem;
    margin: 0;
    font-size: var(--text-body);
}

.comparisons-page .comparison-name {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

/* Carried only by rows that behave differently from a plain comparison, so its presence is the
   signal. See PurposeLabel in Comparisons.razor. */
.comparisons-page .comparison-purpose {
    flex: 0 0 auto;
    padding: 0 var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-caption2);
    font-weight: var(--font-regular);
    white-space: nowrap;
}

.comparison-overview-page .comparison-row-link {
    color: var(--color-text-link);
    font-weight: var(--font-medium);
}

.comparison-overview-page .comparison-row-link:hover {
    color: var(--color-text-link-hover);
}

.comparisons-page .comparison-sides,
.comparisons-page .failure-note,
.comparison-overview-page .comparison-row-meta {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparisons-page .comparison-sides {
    margin-top: var(--space-1);
}

/* Sits under the name it belongs to, like the sides line, so the reason reads as part of the
   row rather than a tooltip. */
.comparisons-page .failure-note {
    margin-top: var(--space-1);
}

.comparisons-page .row-clickable,
.comparison-overview-page .row-clickable {
    cursor: pointer;
}

.comparisons-page .row-clickable:hover,
.comparison-overview-page .row-clickable:hover {
    background: var(--color-surface);
}

.comparisons-page .row-clickable:focus-visible,
.comparison-benchmark-page .row-clickable:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.comparisons-page .num,
.comparison-overview-page .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.comparisons-page .cell-zero,
.comparison-overview-page .cell-zero {
    color: var(--color-service-grey);
}

.comparisons-page .count-pill,
.comparison-overview-page .count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
    line-height: 1;
}

.comparisons-page .count-pill-warning,
.comparison-overview-page .count-pill-warning {
    background: var(--color-warning-tint);
    color: var(--color-warning);
}

/* --color-blue reads 4.22:1 on the tint over a shaded row, under the 4.5 floor. --color-text-link
   is the token specified for white, surface and ice-blue backgrounds and clears it at 4.83:1. */
.comparisons-page .count-pill-review {
    background: var(--color-info-tint);
    color: var(--color-text-link);
}

.comparisons-page .row-chevron,
.comparison-overview-page .row-chevron {
    width: 1%;
    color: var(--color-service-grey);
    font-size: var(--text-title3);
    text-align: right;
}

.comparison-overview-page .comparison-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.main-wrapper:has(.comparison-overview-page) > .breadcrumbs {
    display: none;
}

.comparison-overview-page .comparison-breadcrumb a {
    color: var(--color-text-link);
}

.comparison-overview-page .comparison-breadcrumb a:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

.comparison-overview-page .comparison-breadcrumb .current {
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.comparison-overview-page .comparison-breadcrumb .sep {
    color: var(--color-text-secondary);
}

.comparison-overview-page .cmp-error,
.comparison-workbench-page .cmp-error {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--color-error-tint);
    border: 1px solid var(--color-error-tint-border);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--text-subhead);
}

.comparison-overview-page .cmp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.comparison-workspace .cmp-callout {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--color-info-tint);
    border-left: var(--space-1) solid var(--color-blue);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-navy);
    font-size: var(--text-subhead);
    line-height: 1.5;
}

.comparison-overview-page .comparison-row-action {
    white-space: nowrap;
}

.comparison-overview-page .comparison-table-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

/* Baseline-to-many role benchmark. */

.comparison-benchmark-page {
    display: grid;
    gap: var(--space-6);
    min-width: 0;
}






.comparison-benchmark-page .benchmark-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.comparison-benchmark-page .benchmark-warning {
    padding: var(--space-4) var(--space-5);
    background: var(--color-warning-tint);
    border: 1px solid var(--color-warning-tint-border);
    border-radius: var(--radius-md);
    color: var(--color-warning);
}

.comparison-benchmark-page .benchmark-warning p {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
}

.comparison-benchmark-page .benchmark-overview > div {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.comparison-benchmark-page .benchmark-overview span {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-benchmark-page .benchmark-overview strong {
    overflow: hidden;
    color: var(--color-navy);
    font-size: var(--text-title3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comparison-benchmark-page .benchmark-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.comparison-benchmark-page .benchmark-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.comparison-benchmark-page .benchmark-card-heading h2 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

.comparison-benchmark-page .benchmark-card-heading p {
    margin: var(--space-1) 0 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-benchmark-page .benchmark-table-scroll {
    overflow-x: auto;
}

.comparison-benchmark-page .benchmark-table {
    min-width: 62rem;
}

.comparison-benchmark-page .benchmark-table td:first-child span {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.comparison-benchmark-page .benchmark-row-link {
    display: block;
    color: var(--color-text-link);
    font-weight: var(--font-medium);
}

.comparison-benchmark-page .benchmark-row-link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

.comparison-benchmark-page .benchmark-row-link:focus-visible {
    border-radius: var(--radius-sm);
    outline: none;
    box-shadow: var(--shadow-focus);
}

.comparison-benchmark-page .benchmark-failure {
    display: block;
    max-width: 18rem;
    margin-top: var(--space-1);
    color: var(--color-error);
    font-size: var(--text-caption1);
    white-space: normal;
}

.comparison-benchmark-page .benchmark-value.warning {
    display: inline-flex;
    justify-content: center;
    min-width: 1.75rem;
    padding: var(--space-1) var(--space-2);
    background: var(--color-warning-tint);
    border-radius: var(--radius-full);
    color: var(--color-warning);
    font-weight: var(--font-medium);
}

.comparison-benchmark-page .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.comparison-benchmark-page .row-clickable {
    cursor: pointer;
}

.comparison-benchmark-page .row-clickable:hover {
    background: var(--color-surface);
}

.comparison-benchmark-page .row-chevron {
    color: var(--color-service-grey);
    font-size: var(--text-title3);
    text-align: right;
}

.comparison-benchmark-page .benchmark-guidance {
    padding: var(--space-4);
    background: var(--color-info-tint);
    border-left: var(--space-1) solid var(--color-blue);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.comparison-benchmark-page .benchmark-guidance strong {
    color: var(--color-navy);
}

.comparison-benchmark-page .benchmark-guidance p {
    margin: var(--space-1) 0 0;
    color: var(--color-navy);
    font-size: var(--text-caption1);
    line-height: 1.5;
}

.comparison-benchmark-page .benchmark-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-10) var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-service-grey);
    text-align: center;
}

.comparison-benchmark-page .benchmark-empty h1,
.comparison-benchmark-page .benchmark-empty p {
    margin: 0;
}

@media (max-width: 56rem) {
    .comparisons-page .side-grid,
    .comparison-workspace .side-grid {
        grid-template-columns: 1fr;
    }

    .comparison-benchmark-page .benchmark-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comparisons-page .picker-filters {
        flex-wrap: wrap;
    }
}

@media (max-width: 40rem) {
    .comparisons-page .comparison-modes {
        grid-template-columns: minmax(0, 1fr);
    }

    .comparisons-page .mode-card {
        min-height: 2.75rem;
    }

    .comparisons-page .comparison-page-header,
    .comparison-benchmark-page .benchmark-header,
    .comparisons-page .builder-heading,
    .comparison-workspace .builder-heading,
    .comparisons-page .builder-summary,
    .comparison-workspace .builder-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .comparisons-page .comparison-builder,
    .comparison-workspace .comparison-builder {
        padding: var(--space-4);
    }

    .comparisons-page .builder-close,
    .comparisons-page .builder-submit,
    .comparison-workspace .builder-submit {
        width: 100%;
    }

    .comparison-benchmark-page .benchmark-overview {
        grid-template-columns: 1fr;
    }

    .comparison-benchmark-page .benchmark-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .comparison-benchmark-page .benchmark-table-scroll {
        padding: var(--space-3);
        overflow-x: visible;
    }

    .comparison-benchmark-page .benchmark-table,
    .comparison-benchmark-page .benchmark-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .comparison-benchmark-page .benchmark-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .comparison-benchmark-page .benchmark-table tbody {
        display: grid;
        gap: var(--space-3);
    }

    .comparison-benchmark-page .benchmark-table tbody tr,
    .comparison-benchmark-page .benchmark-table tbody tr:nth-child(even) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
        padding: var(--space-4);
        background: var(--color-white);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-md);
    }

    .comparison-benchmark-page .benchmark-table tbody td,
    .comparison-benchmark-page .benchmark-table tbody td.num {
        display: block;
        min-width: 0;
        padding: 0;
        text-align: left;
        white-space: normal;
    }

    .comparison-benchmark-page .benchmark-table tbody td::before {
        display: block;
        margin-bottom: var(--space-1);
        color: var(--color-service-grey);
        content: attr(data-label);
        font-family: var(--font-heading);
        font-size: var(--text-caption2);
        font-weight: var(--font-medium);
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .comparison-benchmark-page .benchmark-table tbody td:first-child,
    .comparison-benchmark-page .benchmark-action-cell {
        grid-column: 1 / -1;
    }

    .comparison-benchmark-page .benchmark-table tbody td:first-child::before,
    .comparison-benchmark-page .benchmark-action-cell::before {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    .comparison-benchmark-page .benchmark-open-action {
        width: 100%;
    }

    .comparisons-page .estate-grain,
    .comparisons-page .picker-head {
        flex-wrap: wrap;
    }

    .comparisons-page .comparison-table-scroll {
        min-height: 0;
        overflow-x: visible;
    }

    .comparisons-page .saved-comparisons-table,
    .comparisons-page .saved-comparisons-table tbody {
        display: block;
        width: 100%;
    }

    .comparisons-page .saved-comparisons-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .comparisons-page .saved-comparisons-table tbody {
        display: grid;
        gap: var(--space-3);
        padding: 0 var(--space-4) var(--space-4);
    }

    .comparisons-page .saved-comparisons-table tbody tr,
    .comparisons-page .saved-comparisons-table tbody tr:nth-child(even) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
        padding: var(--space-4);
        background: var(--color-white);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-md);
    }

    .comparisons-page .saved-comparisons-table tbody tr:hover {
        background: var(--color-white);
    }

    .comparisons-page .saved-comparisons-table tbody td,
    .comparisons-page .saved-comparisons-table tbody td.num,
    .comparisons-page .saved-comparisons-table .comparison-action-cell {
        display: block;
        min-width: 0;
        padding: 0;
        text-align: left;
        white-space: normal;
    }

    .comparisons-page .saved-comparisons-table tbody td::before {
        display: block;
        margin-bottom: var(--space-1);
        color: var(--color-service-grey);
        content: attr(data-label);
        font-family: var(--font-heading);
        font-size: var(--text-caption2);
        font-weight: var(--font-medium);
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .comparisons-page .saved-comparisons-table tbody td:first-child,
    .comparisons-page .saved-comparisons-table .comparison-action-cell {
        grid-column: 1 / -1;
    }

    .comparisons-page .saved-comparisons-table tbody td:first-child::before,
    .comparisons-page .saved-comparisons-table .comparison-action-cell::before {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    .comparisons-page .saved-comparisons-table .comparison-name {
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-wrap: anywhere;
    }

    .comparisons-page .saved-comparisons-table .comparison-open-action {
        width: 100%;
    }
}

/* Comparison workbench. Kept in this global sheet because obligation and evidence blocks are
   emitted from RenderFragments, which Blazor's scoped CSS selector rewriting cannot reach. */

.comparison-workbench-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    min-width: 0;
}

.main-wrapper:has(.comparison-workbench-page) > .breadcrumbs {
    display: none;
}

.comparison-workbench-page .comparison-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-workbench-page .comparison-breadcrumb a {
    color: var(--color-text-link);
}

.comparison-workbench-page .comparison-breadcrumb a:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

.comparison-workbench-page .comparison-breadcrumb .current {
    overflow: hidden;
    color: var(--color-navy);
    font-weight: var(--font-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comparison-workbench-page .comparison-breadcrumb .sep {
    color: var(--color-text-secondary);
}

.comparison-workbench-page .workbench-header {
    margin-bottom: 0;
}

.comparison-workbench-page .workbench-errors {
    margin: 0;
    padding-left: var(--space-5);
}

/* Widened to the duty view rather than forked: the chip itself is the global .filter-chip in
   components.css, and only this container's layout was ever page-scoped. Same move #668 made for
   .cmp-callout. */
.comparison-workbench-page .cmp-filter-chips,
.comparison-duty-view .cmp-filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.comparison-workbench-page .cmp-filter-chips .filter-chip,
.comparison-duty-view .cmp-filter-chips .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* The chips sit between the toolbar and the result line, so they take the same rhythm as the
   blocks either side of them. */
.comparison-duty-view .duty-filter-chips {
    margin: var(--space-3) 0 0;
}

.comparison-workbench-page .cmp-filter-count {
    font-variant-numeric: tabular-nums;
}

.comparison-workbench-page .cmp-bulkbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.comparison-workbench-page .cmp-bulk-count {
    color: var(--color-navy);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

.comparison-workbench-page .cmp-bulk-clear,
.comparison-workbench-page .cmp-reject-link {
    padding: 0;
    background: transparent;
    color: var(--color-text-link);
    font-size: var(--text-caption1);
    text-decoration: underline;
}

.comparison-workbench-page .cmp-bulk-clear:hover,
.comparison-workbench-page .cmp-reject-link:hover {
    color: var(--color-text-link-hover);
}

.comparison-workbench-page .cmp-bulk-confirm {
    margin-left: auto;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-success);
    color: var(--color-white);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

.comparison-workbench-page .cmp-bulk-confirm:disabled,
.comparison-workbench-page .cmp-reject-link:disabled,
.comparison-workbench-page .row-cta:disabled {
    cursor: default;
    opacity: .55;
}

.comparison-workbench-page .cmp-filter-empty {
    background: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.comparison-workbench-page .cmp-pair-list {
    width: 100%;
    min-width: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.comparison-workbench-page .cmp-list-header,
.comparison-workbench-page .cmp-pair-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 160px minmax(0, 1fr) 200px 40px;
    gap: var(--space-4);
    align-items: center;
}

@media (min-width: 1100px) {
    .comparison-workbench-page .cmp-pair-list.is-relation-empty .cmp-list-header,
    .comparison-workbench-page .cmp-pair-list.is-relation-empty .cmp-pair-row {
        grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) 200px 40px;
    }

    .comparison-workbench-page .cmp-pair-list.is-relation-empty .cmp-list-header > .cmp-centre,
    .comparison-workbench-page .cmp-pair-list.is-relation-empty .cmp-pair-row > .cmp-relation {
        display: none;
    }
}

.comparison-workbench-page .cmp-list-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--color-service-grey);
    font-family: var(--font-heading);
    font-size: var(--text-caption2);
    font-weight: var(--font-medium);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.comparison-workbench-page .cmp-pair {
    min-width: 0;
    border-bottom: 1px solid var(--color-border-light);
}

.comparison-workbench-page .cmp-pair:last-child {
    border-bottom: 0;
}

.comparison-workbench-page .cmp-pair-row {
    min-width: 0;
    padding: var(--space-3) var(--space-4);
}

.comparison-workbench-page .cmp-select,
.comparison-workbench-page .cmp-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-workbench-page .cmp-select input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--color-blue);
    cursor: pointer;
}

.comparison-workbench-page .cmp-select input:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.comparison-workbench-page .cmp-side,
.comparison-workbench-page .cmp-obligation-block {
    min-width: 0;
}

.comparison-workbench-page .cmp-side-eyebrow {
    display: none;
}

.comparison-workbench-page .cmp-obligation {
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
    line-height: 1.45;
}

.comparison-workbench-page .cmp-role-line {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-workbench-page .cmp-evidence,
.comparison-workbench-page .cmp-detail-evidence-link {
    margin-top: var(--space-1);
    padding: 0;
    background: transparent;
    color: var(--color-text-link);
    font-size: var(--text-caption1);
}

.comparison-workbench-page .cmp-evidence:hover,
.comparison-workbench-page .cmp-detail-evidence-link:hover {
    color: var(--color-text-link-hover);
}

.comparison-workbench-page .cmp-gap-placeholder {
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-service-grey);
    font-size: var(--text-subhead);
    text-align: center;
}

.comparison-workbench-page .cmp-centre {
    text-align: center;
}

.comparison-workbench-page .cmp-relation {
    min-width: 0;
}

.comparison-workbench-page .cmp-relation-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.comparison-workbench-page .cmp-relation-chip,
.comparison-workbench-page .cmp-conflict-chip,
.comparison-workbench-page .cmp-confidence-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
    line-height: 1.2;
    text-align: center;
}

.comparison-workbench-page .cmp-relation-chip {
    background: var(--color-surface);
    color: var(--color-navy);
}

.comparison-workbench-page .cmp-conflict-warning {
    background: var(--color-warning-tint);
    color: var(--color-warning);
}

.comparison-workbench-page .cmp-conflict-muted {
    background: var(--color-surface);
    color: var(--color-service-grey);
}

.comparison-workbench-page .cmp-confidence-moderate {
    background: var(--color-warning-tint);
    color: var(--color-warning);
}

.comparison-workbench-page .cmp-confidence-strong {
    background: var(--color-success-tint);
    color: var(--color-success);
}

.comparison-workbench-page .cmp-confidence-weak {
    background: var(--color-error-tint);
    color: var(--color-error);
}

.comparison-workbench-page .cmp-confidence-manual {
    background: var(--color-info-tint);
    color: var(--color-info);
}

.comparison-workbench-page .cmp-review-actions,
.comparison-workbench-page .cmp-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: var(--space-2);
}

.comparison-workbench-page .cmp-decision-label {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    line-height: 1.3;
}

.comparison-workbench-page .cmp-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.comparison-workbench-page .row-cta-primary {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.comparison-workbench-page .row-cta-primary:hover:not(:disabled) {
    background: var(--color-navy);
    border-color: var(--color-navy);
}

.comparison-workbench-page .cmp-expand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-service-grey);
    font-size: var(--text-title3);
    line-height: 1;
}

.comparison-workbench-page .cmp-expand-button:hover {
    background: var(--color-surface);
    color: var(--color-navy);
}

.comparison-workbench-page .cmp-expand-button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.comparison-workbench-page .cmp-detail-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
    gap: var(--space-5) var(--space-6);
    padding: var(--space-5) var(--space-6) var(--space-6) calc(32px + 2 * var(--space-4));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
}

.comparison-workbench-page .cmp-detail-panel[hidden] {
    display: none;
}

.comparison-workbench-page .cmp-decision-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.comparison-workbench-page .cmp-decision-fieldset legend,
.comparison-workbench-page .cmp-rationale-field label,
.comparison-workbench-page .cmp-rationale-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-navy);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

/* #489: the recorded rationale where the textarea would be, for a reader who cannot edit it. */
.comparison-workbench-page .cmp-rationale-recorded {
    margin: 0;
    color: var(--color-navy);
    font-size: var(--text-body);
}

.comparison-workbench-page .cmp-decision-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-2) var(--space-4);
}

.comparison-workbench-page .cmp-decision-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--text-subhead);
    cursor: pointer;
}

.comparison-workbench-page .cmp-decision-option input {
    margin: 0;
    accent-color: var(--color-blue);
}

.comparison-workbench-page .cmp-rationale-field {
    min-width: 0;
}

.comparison-workbench-page .cmp-rationale-field textarea {
    min-height: 7rem;
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text-primary);
    resize: vertical;
}

.comparison-workbench-page .cmp-rationale-field textarea:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: var(--shadow-focus);
}

.comparison-workbench-page .cmp-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    grid-column: 1 / -1;
}

.comparison-workbench-page .cmp-detail-evidence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.comparison-workbench-page .cmp-detail-evidence-link {
    margin-top: 0;
}

.comparison-workbench-page .cmp-match-rationale,
.comparison-workbench-page .cmp-provenance {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    line-height: 1.45;
}

.comparison-workbench-page .cmp-provenance {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

/* Hidden wherever the column-header row (which hosts the desktop select-all) is visible. */
.comparison-workbench-page .cmp-selectall-compact {
    display: none;
}

@media (max-width: 1099px) {
    .comparison-workbench-page .cmp-pair-list {
        display: grid;
        gap: var(--space-3);
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .comparison-workbench-page .cmp-list-header {
        display: none;
    }

    /* Card mode drops the header row, so this keeps select-all reachable on tablets. */
    .comparison-workbench-page .cmp-selectall-compact {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-bottom: var(--space-3);
        color: var(--color-service-grey);
        font-size: var(--text-subhead);
    }

    .comparison-workbench-page .cmp-pair {
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
    }

    .comparison-workbench-page .cmp-pair:last-child {
        border-bottom: 1px solid var(--color-border);
    }

    .comparison-workbench-page .cmp-pair-row {
        grid-template-columns: 32px minmax(0, 1fr) 40px;
        grid-template-areas:
            "left left left"
            "relation relation relation"
            "right right right"
            "select review chevron";
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .comparison-workbench-page .cmp-pair-list.is-relation-empty .cmp-pair-row {
        grid-template-areas:
            "left left left"
            "right right right"
            "select review chevron";
    }

    .comparison-workbench-page .cmp-pair-list.is-relation-empty .cmp-relation {
        display: none;
    }

    .comparison-workbench-page .cmp-left {
        grid-area: left;
    }

    .comparison-workbench-page .cmp-relation {
        grid-area: relation;
        padding: var(--space-1) 0;
        border-top: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
    }

    .comparison-workbench-page .cmp-right {
        grid-area: right;
    }

    .comparison-workbench-page .cmp-select {
        grid-area: select;
        justify-content: flex-start;
    }

    .comparison-workbench-page .cmp-review-actions {
        grid-area: review;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .comparison-workbench-page .cmp-status {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .comparison-workbench-page .cmp-chevron {
        grid-area: chevron;
        justify-content: flex-end;
    }

    .comparison-workbench-page .cmp-side-eyebrow {
        display: block;
        margin-bottom: var(--space-1);
        color: var(--color-service-grey);
        font-family: var(--font-heading);
        font-size: var(--text-caption2);
        font-weight: var(--font-medium);
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .comparison-workbench-page .cmp-detail-panel {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }
}

@media (max-width: 52rem) {
    .comparison-workbench-page .cmp-detail-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .comparison-workbench-page .cmp-review-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Feature 077 — progressive comparison hierarchy. */
.comparison-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    min-width: 0;
    /* Matches the wide data-content cap the shell gives this route (layout.css). */
    max-width: 128rem;
    margin: 0 auto;
}

/* The shared heading rule inherits a 1.6 body line-height, which gives a 36px title a 58px box.
   The workspace pays that twice over on a laptop screen, where every pixel above the table is a
   row the reviewer cannot see. */
.comparison-workspace .hierarchy-title-row h1 {
    line-height: 1.2;
}

/* The tab strip sits in the workspace grid, so its own bottom margin doubles the gap that grid
   already provides and pushes the table header down for nothing. */
.comparison-workspace > .tabs {
    margin-bottom: 0;
}

.comparison-workspace .builder-errors {
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-tint);
    border: 1px solid var(--color-error-tint-border);
    border-radius: var(--radius-md);
    color: var(--color-error);
}

.hierarchy-header,
.hierarchy-title-row,
.hierarchy-actions,
.mapping-review-bar,
.evidence-status-line {
    display: flex;
    align-items: center;
}

.hierarchy-header {
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
}

.hierarchy-heading {
    min-width: 0;
}

.comparison-back {
    display: inline-flex;
    align-items: center;
    /* 24px pointer-target floor; the text alone measures 19px tall. */
    min-height: 24px;
    margin-bottom: var(--space-2);
    color: var(--color-text-link);
    font-size: var(--text-caption1);
    text-decoration: none;
}

.comparison-back:hover {
    color: var(--color-text-link-hover);
}

.hierarchy-title-row {
    gap: var(--space-3);
}

.hierarchy-title-row h1 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-title1);
    font-weight: var(--font-medium);
    letter-spacing: -.02em;
}

.hierarchy-actions {
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.comparison-run-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--color-info-tint);
    border: 1px solid var(--color-info-tint-border);
    border-radius: var(--radius-lg);
}

.comparison-run-state strong {
    color: var(--color-navy);
    font-family: var(--font-heading);
}

.comparison-run-state p {
    margin: var(--space-1) 0 0;
    color: var(--color-navy);
}

.comparison-run-scope {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.comparison-run-scope-side {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.comparison-run-scope-side > span,
.comparison-run-scope-side small,
.comparison-run-scope-divider {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-run-scope-side strong {
    color: var(--color-navy);
}

.run-progress {
    display: grid;
    gap: var(--space-2);
    min-width: 15rem;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.run-progress progress {
    width: 100%;
    height: .5rem;
    accent-color: var(--color-blue);
}

.bulk-review-card,
.hierarchy-summary,
.document-pair-list,
.section-outline {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.bulk-review-card {
    padding: var(--space-5);
}

.bulk-review-card .section-heading {
    margin-bottom: var(--space-4);
}

.bulk-review-card h2,
.hierarchy-panel-heading h2,
.section-role-list h3,
.evidence-rationale h3 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-weight: var(--font-medium);
}

.bulk-review-card h2,
.hierarchy-panel-heading h2 {
    font-size: var(--text-subhead);
}

.bulk-review-card p {
    margin: var(--space-1) 0 0;
    color: var(--color-service-grey);
}

.bulk-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.bulk-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bulk-role-row:hover {
    border-color: var(--color-blue);
}

.bulk-role-row > span:first-child {
    display: grid;
    gap: var(--space-1);
}

.bulk-role-row strong {
    color: var(--color-navy);
}

.bulk-role-row small {
    color: var(--color-service-grey);
}

.bulk-role-counts {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.hierarchy-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

.hierarchy-metric {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border-right: 1px solid var(--color-border-light);
}

.hierarchy-metric:last-child {
    border-right: 0;
}

.hierarchy-metric span {
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.hierarchy-metric strong {
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

.hierarchy-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 21rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
    min-width: 0;
}

.document-pair-list,
.section-outline {
    min-width: 0;
    overflow: hidden;
}

.document-pair-list {
    position: sticky;
    top: var(--space-4);
}

.hierarchy-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.panel-heading-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.panel-count {
    display: grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    background: var(--color-surface);
    border-radius: var(--radius-full);
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.section-role-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.section-role-heading h3 {
    margin-bottom: 0;
}

.outline-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    cursor: pointer;
}

.outline-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-blue);
}

.document-pair-card {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    background: var(--color-white);
    border: 0;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.document-pair-card:last-child {
    border-bottom: 0;
}

.document-pair-card:hover {
    background: var(--color-surface);
}

.document-pair-card.is-selected {
    background: var(--color-info-tint);
    box-shadow: inset .25rem 0 0 var(--color-blue);
}

.pair-documents {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.pair-documents > span:not(.pair-arrow) {
    overflow-wrap: anywhere;
}

.pair-arrow {
    color: var(--color-service-grey);
}

.pair-card-meta,
.pair-card-findings {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.pair-card-findings span {
    padding-right: var(--space-2);
    border-right: 1px solid var(--color-border);
}

.pair-card-findings span:last-child {
    padding-right: 0;
    border-right: 0;
}

.mapping-state {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-caption2);
    font-weight: var(--font-medium);
}

.mapping-state.is-aligned {
    background: var(--color-success-tint);
    color: var(--color-success);
}

.mapping-state.is-changed {
    background: var(--color-warning-tint);
    color: var(--color-warning);
}

.mapping-state.is-unresolved {
    background: var(--color-info-tint);
    color: var(--color-info);
}

.mapping-state.is-unmatched {
    background: var(--color-error-tint);
    color: var(--color-error);
}

.comparison-list-default {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    line-height: 1.4;
}

.comparison-list-default strong {
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.hierarchy-placeholder {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-5);
    color: var(--color-service-grey);
    text-align: center;
}

.hierarchy-placeholder h3,
.hierarchy-placeholder p {
    margin: 0;
}

.hierarchy-placeholder h3 {
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

.section-rows {
    display: grid;
}

.section-row {
    border-bottom: 1px solid var(--color-border-light);
}

.section-row:last-child {
    border-bottom: 0;
}

.section-row.is-changed {
    box-shadow: inset .2rem 0 0 var(--color-warning);
}

.section-row.is-unmatched {
    box-shadow: inset .2rem 0 0 var(--color-error);
}

.section-disclosure {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border: 0;
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.section-disclosure:hover,
.section-disclosure[aria-expanded="true"] {
    background: var(--color-surface);
}

.disclosure-chevron {
    color: var(--color-text-secondary);
    font-size: var(--text-subhead);
}

.section-pair-headings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
}

.section-pair-headings > span:not([aria-hidden]) {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.section-pair-headings strong {
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.section-pair-headings small,
.section-row-state {
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.section-row-state {
    display: grid;
    justify-items: end;
    gap: var(--space-1);
}

.section-detail {
    padding: var(--space-4);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
}

.mapping-review-bar {
    justify-content: flex-end;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.document-mapping-review {
    margin-bottom: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.mapping-review-bar > div:first-child {
    display: grid;
    gap: var(--space-1);
    margin-right: auto;
}

.mapping-review-bar > div:first-child span {
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.btn-quiet,
.text-button {
    background: transparent;
    border: 0;
    color: var(--color-text-link);
    font: inherit;
    cursor: pointer;
}

.btn-quiet {
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
}

.btn-quiet:hover,
.text-button:hover {
    color: var(--color-text-link-hover);
}

.source-unavailable {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-info-tint);
    border-left: .2rem solid var(--color-blue);
    color: var(--color-navy);
}

.source-unavailable strong {
    color: var(--color-navy);
}

.prose-diff {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.diff-column-heading {
    padding: var(--space-2) var(--space-3);
    background: var(--color-navy);
    color: var(--color-white);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

.diff-column-heading:first-child,
.diff-paragraph:nth-of-type(odd) {
    border-right: 1px solid var(--color-border-light);
}

.diff-paragraph {
    margin: 0;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    line-height: 1.6;
}

.diff-added {
    background: var(--color-success-tint);
    color: var(--color-success);
}

.diff-removed {
    background: var(--color-error-tint);
    color: var(--color-error);
    text-decoration: line-through;
}

.section-role-list {
    margin-top: var(--space-4);
}

.section-role-list h3,
.evidence-rationale h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-caption1);
}

.role-mapping-row {
    padding: var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.role-mapping-row + .role-mapping-row {
    margin-top: var(--space-2);
}

.role-mapping-labels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-3);
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.role-mapping-labels > span:not([aria-hidden]) {
    display: grid;
    gap: var(--space-1);
}

.role-mapping-labels small {
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
    font-weight: var(--font-regular);
}

.role-mapping-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.assignment-link-list {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.assignment-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--text-caption1);
    text-align: left;
    cursor: pointer;
}

.assignment-link:hover {
    border-color: var(--color-blue);
}

.assignment-link > span:first-child,
.assignment-link > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.assignment-link-left {
    grid-column: 1;
}

.assignment-link-right {
    grid-column: 3;
}

.assignment-link > .mapping-state {
    grid-column: 2;
    justify-self: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.evidence-scrim {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: color-mix(in srgb, var(--color-dark-bg) 42%, transparent);
}

.comparison-evidence-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1100;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    width: min(46rem, 78vw);
    padding: var(--space-5);
    overflow-y: auto;
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.mapping-editor {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: 1110;
    display: grid;
    gap: var(--space-4);
    width: min(40rem, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-8));
    padding: var(--space-5);
    overflow-y: auto;
    transform: translate(-50%, -50%);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.mapping-editor > header,
.mapping-editor > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.mapping-editor h2 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-title2);
    font-weight: var(--font-medium);
}

.mapping-editor > p {
    margin: 0;
    color: var(--color-service-grey);
    line-height: 1.5;
}

.mapping-editor-sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.mapping-editor .field {
    display: grid;
    gap: var(--space-2);
}

.mapping-editor .field-label {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

.mapping-editor select,
.mapping-editor textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font: inherit;
}

.mapping-editor select:focus,
.mapping-editor textarea:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: var(--shadow-focus);
}

.mapping-editor > footer {
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.comparison-evidence-panel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.comparison-evidence-panel h2 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-title2);
    font-weight: var(--font-medium);
}

.panel-close {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-navy);
    font: inherit;
    font-size: var(--text-title2);
    cursor: pointer;
}

.evidence-status-line {
    gap: var(--space-2);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.evidence-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    align-content: start;
}

.evidence-side {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.evidence-side strong {
    color: var(--color-navy);
}

.evidence-side blockquote {
    margin: 0;
    color: var(--color-text-primary);
    line-height: 1.55;
}

.evidence-side a {
    color: var(--color-text-link);
    font-size: var(--text-caption1);
}

.evidence-side a:hover {
    color: var(--color-text-link-hover);
}

.evidence-rationale {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

.evidence-decision {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

.evidence-decision .field {
    display: grid;
    gap: var(--space-1);
}

.evidence-decision select,
.evidence-decision textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font: inherit;
}

.prose-diff ins,
.prose-diff del {
    text-decoration-thickness: .1em;
}

.evidence-rationale p {
    margin: 0;
    color: var(--color-service-grey);
}

.comparison-evidence-panel > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    position: sticky;
    bottom: 0;
    padding-top: var(--space-3);
    background: var(--color-white);
    border-top: 1px solid var(--color-border-light);
}

.comparison-workspace button:focus-visible,
.comparison-workspace a:focus-visible,
.mapping-editor button:focus-visible,
.mapping-editor select:focus-visible,
.mapping-editor textarea:focus-visible,
.comparison-evidence-panel button:focus-visible,
.comparison-evidence-panel a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.mapping-editor:focus-visible,
.comparison-evidence-panel:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-lg);
}

@media (max-width: 75rem) {
    .hierarchy-grid {
        grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
    }

    .bulk-role-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hierarchy-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hierarchy-metric:nth-child(2) {
        border-right: 0;
    }

    .hierarchy-metric:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border-light);
    }
}

@media (max-width: 64rem) {
    .hierarchy-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .hierarchy-actions {
        justify-content: flex-start;
    }

    .hierarchy-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .document-pair-list {
        position: static;
    }

    .document-pair-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-pair-list .hierarchy-panel-heading {
        grid-column: 1 / -1;
    }

    .document-pair-card {
        border-right: 1px solid var(--color-border-light);
    }

    .document-pair-card:only-of-type {
        grid-column: 1 / -1;
        border-right: 0;
    }

    .comparison-evidence-panel {
        width: min(42rem, 88vw);
    }

    .mapping-editor-sides {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 48rem) {
    .document-pair-list,
    .hierarchy-summary,
    .evidence-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .comparison-run-state,
    .comparison-run-scope,
    .mapping-review-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .comparison-run-scope {
        grid-template-columns: minmax(0, 1fr);
    }

    .run-progress {
        width: 100%;
        min-width: 0;
    }

    .hierarchy-metric {
        border-right: 0;
        border-bottom: 1px solid var(--color-border-light);
    }

    .section-disclosure {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .section-row-state {
        grid-column: 2;
        justify-items: start;
    }

    .section-pair-headings,
    .role-mapping-labels,
    .assignment-link {
        grid-template-columns: minmax(0, 1fr);
    }

    .assignment-link-left,
    .assignment-link-right,
    .assignment-link > .mapping-state {
        grid-column: 1;
    }

    .prose-diff {
        grid-template-columns: minmax(0, 1fr);
    }

    .comparison-evidence-panel {
        width: 100vw;
    }
}

/* Feature 080 — document merge workspace. Reuses the comparison shell (hierarchy-header,
   prose-diff, data-table) and adds only the queue, the coverage strip and the decision control. */

.merge-workspace {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
}

.merge-sides {
    margin: var(--space-1) 0 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.merge-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.merge-progress {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.merge-progress progress {
    flex: 1;
    height: 6px;
}

.merge-progress .summary-label {
    flex: 0 0 auto;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

.merge-buckets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.merge-bucket {
    display: flex;
    flex-direction: column;
    min-width: 8rem;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.merge-bucket strong {
    font-family: var(--font-heading);
    font-size: var(--text-subhead);
}

.merge-bucket span {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.merge-covered-split {
    margin: 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.merge-excluded {
    font-size: var(--text-caption1);
}

.merge-excluded summary {
    cursor: pointer;
    color: var(--color-service-grey);
}

.merge-excluded ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

.merge-body {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.merge-queue-pane,
.merge-detail-pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.merge-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.merge-search input {
    width: 100%;
}

.merge-filter-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-caption1);
}

.merge-queue {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 60vh;
    overflow-y: auto;
}

.merge-queue-item {
    display: flex;
    flex-direction: column;
    /* Explicit because the UA stylesheet centres a button's flex children, which centres the heading
       and the chip row instead of stacking them against the left edge. */
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    text-align: left;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.merge-queue-item:hover,
.merge-queue-item.selected {
    background: var(--color-surface);
    border-color: var(--color-teal);
}

.merge-queue-heading {
    font-weight: var(--font-medium);
}

.merge-queue-marks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.merge-chip {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-caption2);
    line-height: 1.6;
    white-space: nowrap;
}

.merge-chip-conflict {
    background: color-mix(in srgb, var(--color-error) 14%, transparent);
    color: var(--color-error);
}

.merge-chip-new {
    background: color-mix(in srgb, var(--color-teal) 16%, transparent);
    color: var(--color-deep-teal, var(--color-navy));
}

.merge-chip-partial {
    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
    color: var(--color-navy);
}

.merge-chip-covered {
    background: color-mix(in srgb, var(--color-success) 16%, transparent);
    color: var(--color-navy);
}

.merge-chip-warn {
    background: color-mix(in srgb, var(--color-warning) 22%, transparent);
    color: var(--color-navy);
}

.merge-chip-done {
    background: var(--color-surface);
    color: var(--color-service-grey);
}

.merge-chip-neutral {
    background: var(--color-surface);
    color: var(--color-service-grey);
}

.merge-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.merge-detail-header h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-subhead);
}

.merge-heading-path {
    margin: var(--space-1) 0 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.merge-inconsistency {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);
    font-size: var(--text-caption1);
}

.merge-evidence,
.merge-incumbents,
.merge-links,
.merge-decision {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.merge-incumbents h3,
.merge-links h3,
.merge-decision h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-body);
}

/* #489: what the read-only reader sees where the radio group would be. The disposition carries the
   weight because it is the decision; the rationale is supporting detail. */
.merge-decision-recorded {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--font-medium);
}

.merge-decision-recorded-why {
    margin: 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.merge-incumbent summary {
    cursor: pointer;
    font-weight: var(--font-medium);
}

.merge-incumbent-doc {
    margin-left: var(--space-2);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    font-weight: 400;
}

.merge-links-note {
    margin: 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.merge-quote {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.merge-stale {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
}

.merge-stale p {
    margin: 0;
    font-size: var(--text-caption1);
}

.merge-disposition-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.merge-disposition-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.merge-disposition-option.selected {
    background: var(--color-surface);
    border-color: var(--color-teal);
}

.merge-warning {
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);
    font-size: var(--text-caption1);
}

.merge-history summary {
    cursor: pointer;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.merge-history ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    font-size: var(--text-caption1);
}

/* The obligations table needs four readable columns of quoted text. Two panes side by side leave it
   about 420px at 1280, where every quote wraps to one word per line. 1512 is the 14" MBP default and
   every 13" scaling falls under it, so the split only survives above that. */
@media (max-width: 1512px) {
    .merge-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .merge-queue {
        max-height: 22rem;
    }
}

.merge-links-scroll {
    overflow-x: auto;
}

.merge-links-scroll .data-table {
    min-width: 46rem;
}

.register-section {
    display: grid;
    gap: var(--space-3);
}

.register-table-region {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.register-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-caption1);
}

@media (max-width: 48rem) {
    .register-table-merge {
        min-width: 68rem;
    }

    .register-table-obligations {
        min-width: 52rem;
    }
}

.register-table th,
.register-table td {
    text-align: left;
    vertical-align: top;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-control-border);
}

.register-table th {
    color: var(--color-service-grey);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

/* The finding column carries verbatim quoted duty text and is the reason anyone opens this page,
   so it takes the slack rather than the identifier columns. */
.register-table td:nth-child(2) {
    width: 45%;
}

.register-heading {
    display: block;
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
}

.register-kind,
.register-evidence,
.register-rationale,
.register-when {
    display: block;
    color: var(--color-service-grey);
}

/* A left edge rather than a filled row: the severity has to survive both a monochrome print and a
   reader who cannot distinguish the two tints. */
.register-row-severe td:first-child {
    box-shadow: inset 3px 0 0 var(--color-error);
}

.register-row-open td:first-child {
    box-shadow: inset 3px 0 0 var(--color-warning);
}

/* Feature 086: the alignment outcome control. The Outcome column is the last column of the
   register; the chooser is one row of chips, and the two slow paths open the expansion row below
   rather than a form inside the cell, so the column widths never move (research D12). Tokens only. */
.outcome-column {
    width: 1%;
    white-space: nowrap;
}

.outcome-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    /* The cell holds a reviewer's free-text note, which is unbounded. Without a width it wraps to one
       word per line in a nowrap column and drags the row to several hundred pixels while the Finding
       beside it is two lines. */
    min-width: 14rem;
    max-width: 18rem;
    white-space: normal;
}

.outcome-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.outcome-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--text-caption2);
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
}

.outcome-choices .outcome-chip:hover {
    border-color: var(--color-teal);
}

/* The three chooser buttons stay visually neutral until one is chosen, so the fast path (Aligned)
   is not weighted against the two slow paths. Hover is the only affordance they carry. */
.outcome-chip-accepted,
.outcome-chip-change {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

/* Recorded chips read as state, not as buttons, so they carry the tint and drop the border. The
   chooser buttons stay neutral until chosen so three equal options do not bias the reviewer. */
.outcome-chip-aligned {
    background: color-mix(in srgb, var(--color-success) 16%, transparent);
    color: var(--color-navy);
    border-color: transparent;
}

.outcome-chip-accepteddifference {
    background: color-mix(in srgb, var(--color-teal) 16%, transparent);
    color: var(--color-deep-teal, var(--color-navy));
    border-color: transparent;
}

.outcome-chip-changeneeded {
    background: color-mix(in srgb, var(--color-warning) 20%, transparent);
    color: var(--color-navy);
    border-color: transparent;
}

.outcome-chip-pending {
    background: var(--color-surface);
    color: var(--color-service-grey);
    border-color: transparent;
}

.outcome-recorded {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
}

/* A column flex stretches its children, so without this the recorded chip spans the whole cell and
   reads as a banner rather than the same chip the chooser offered. */
.outcome-recorded > .outcome-chip {
    align-self: flex-start;
}

.outcome-target {
    color: var(--color-text-primary);
    font-size: var(--text-caption2);
}

.outcome-meta,
.outcome-note-shown,
.outcome-lock {
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
    white-space: normal;
}

/* Keep recorded rows compact while leaving the complete reviewer note available through the native
   keyboard-operable disclosure immediately below the preview. */
.outcome-note-shown {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.outcome-note-disclosure {
    width: 100%;
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.outcome-note-disclosure summary {
    cursor: pointer;
}

.outcome-note-disclosure summary:focus-visible {
    border-radius: var(--radius-sm);
    outline: none;
    box-shadow: var(--shadow-focus);
}

.outcome-note-action {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-link);
    text-decoration: underline;
}

.outcome-note-action-expanded,
.outcome-note-disclosure[open] .outcome-note-action-collapsed,
.outcome-note-disclosure[open] .outcome-note-shown {
    display: none;
}

.outcome-note-disclosure[open] .outcome-note-action-expanded {
    display: block;
}

.outcome-note-full {
    margin: var(--space-2) 0 0;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
    white-space: pre-wrap;
}

.outcome-lock {
    color: var(--color-navy);
}

.outcome-change-link {
    align-self: flex-start;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-link);
    font-size: var(--text-caption2);
    cursor: pointer;
    text-decoration: underline;
}

.outcome-expansion-row td {
    background: var(--color-surface);
}

.outcome-expansion {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 42rem;
}

.outcome-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border: 0;
    padding: 0;
    margin: 0;
}

.outcome-field legend {
    padding: 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.outcome-radio {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 24px;
    font-size: var(--text-caption1);
}

.outcome-note {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--color-text-primary);
    background: var(--color-canvas, var(--color-surface));
    resize: vertical;
}

.outcome-picker {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--color-text-primary);
    background: var(--color-canvas, var(--color-surface));
}

.outcome-picker-empty {
    color: var(--color-error);
    font-size: var(--text-caption2);
}

/* Its own line, not inline in a sentence, so 2.5.8's inline exemption does not apply and it needs the
   24px target. The caption type alone leaves it at 18. */
.outcome-lock-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--color-text-link);
    font-size: var(--text-caption2);
    text-decoration: underline;
}

.outcome-error {
    margin: 0;
    color: var(--color-error);
    font-size: var(--text-caption2);
}

.outcome-expansion-actions {
    display: flex;
    gap: var(--space-2);
}

.outcome-disabled-note,
.register-unattributed {
    margin: 0 0 var(--space-3);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.register-print .register-table {
    font-size: var(--text-caption2);
}

@media print {
    .register-page .register-table-region {
        max-width: none;
        overflow: visible;
    }

    /* Repeat the header on every sheet and never split a finding across a page break: a register
       row torn in half is unusable as evidence. */
    .register-page .register-table thead {
        display: table-header-group;
    }

    .register-page .register-table tr {
        break-inside: avoid;
    }
}

.register-truncated {
    margin: 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

/* Keep the hint body absolute so opening it does not reflow surrounding tables. */
.obligation-hint {
    position: relative;
    display: inline-flex;
}

.obligation-hint-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 24px, the WCAG 2.5.8 AA floor. It was 20px, which is under it, and the narrow bound in the
       viewport matrix is a tablet. */
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-full);
    font-size: var(--text-caption2);
    cursor: pointer;
}

.obligation-hint-toggle:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.obligation-hint-toggle:hover {
    border-color: var(--color-blue);
}

.obligation-hint-body {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: max-content;
    max-width: 22rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    color: var(--color-text-primary);
    font-size: var(--text-caption1);
    font-weight: var(--font-regular);
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    /* One call site is a table header cell, which is uppercased and letter-spaced. Inheriting that
       turned two sentences of explanation into a wall of tracked capitals. The panel sets its own
       typography rather than taking whatever the element it hangs off happens to use. */
    text-transform: none;
    letter-spacing: normal;
}

/* Feature 080 US2: AI briefing surfaces on the merge workspace. */

.merge-briefing {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.merge-briefing-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.merge-briefing-state p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
}

.merge-briefing progress {
    width: 100%;
    height: 6px;
}

.merge-briefing-spend {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
}

.merge-briefing-error {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-error-tint);
    border: 1px solid var(--color-error-tint-border);
    border-radius: var(--radius-sm);
    color: var(--color-error);
    font-size: var(--text-caption1);
}

/* Quieter than btn-secondary on purpose. Stopping a run and refreshing stale briefs are recoveries
   from a state the reviewer did not ask for, so neither should compete with the primary action. */
.merge-quiet-button {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-link);
    font-family: var(--font-primary);
    font-size: var(--text-caption1);
    cursor: pointer;
}

.merge-quiet-button:hover:not(:disabled) {
    background: var(--color-surface);
}

.merge-quiet-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.merge-executive {
    padding: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.merge-executive > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-medium);
    cursor: pointer;
}

.merge-executive-section {
    margin-top: var(--space-4);
}

.merge-executive-section h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

.merge-executive-section ul {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-caption1);
}

.merge-executive-empty,
.merge-executive-foot {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
}

.merge-executive-foot {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.merge-stale-note {
    margin: var(--space-2) 0 0;
    color: var(--color-warning);
    font-size: var(--text-caption1);
}

.merge-brief {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-info-tint);
    border: 1px solid var(--color-info-tint-border);
    border-radius: var(--radius-md);
}

.merge-stale-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-warning-tint);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);
}

.merge-stale-banner p {
    margin: var(--space-1) 0 0;
    font-size: var(--text-caption1);
}

.merge-brief-headline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.merge-brief-classification {
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
}

.merge-brief-claims {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-caption1);
}

.merge-brief-abstention,
.merge-brief-missing {
    margin: 0;
    font-size: var(--text-caption1);
}

.merge-brief-missing {
    padding: var(--space-3) var(--space-4);
    background: var(--color-draft-tint);
    border: 1px solid var(--color-draft-tint-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
}

.merge-brief-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-info-tint-border);
    color: var(--color-text-secondary);
    font-size: var(--text-caption2);
}

.merge-brief-history {
    font-size: var(--text-caption1);
}

.merge-brief-history summary {
    cursor: pointer;
    color: var(--color-text-link);
}

.merge-brief-history ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    color: var(--color-text-secondary);
}

.merge-citations {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-left: var(--space-2);
}

/* 24px minimum target per WCAG 2.5.8, which a caption-sized inline chip does not reach on its own.
   The boundary is --color-control-border, not --color-border. This is a control, and the rule
   token resolves to 1.51:1 on white, under the 3:1 WCAG 1.4.11 asks of a control boundary; at rest
   the chip read as a static tag. For the comparison band that is fatal rather than cosmetic — the
   claim beside it is only a filter if a reviewer can see the chip is pressable. Hover now moves
   the fill rather than the border, so the two states stay distinguishable. This repairs the
   shipped merge briefing band too, which uses the same class and carried the same defect. */
.merge-citation {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-full);
    color: var(--color-text-link);
    font-family: var(--font-primary);
    font-size: var(--text-caption2);
    text-decoration: none;
    cursor: pointer;
}

.merge-citation:hover:not(:disabled) {
    background: var(--color-surface);
}

/* A muted ground and grey text rather than a blanket opacity, the same treatment .duty-triage-tile
   takes and for the same reason: the chip carries a count that is part of the sentence beside it,
   so fading the whole control would fade the number a reviewer is still reading. Only the
   invitation to press is withdrawn. No merge-workspace chip is disabled today, so this adds a
   state to the shared class rather than changing how that band renders. */
.merge-citation:disabled {
    cursor: default;
    background: var(--color-surface);
    border-color: var(--color-border-light);
    color: var(--color-service-grey);
}

/* The citation is a jump link, so the landing point has to announce itself; otherwise a reviewer
   arrives at a table of near-identical rows with no idea which one they were sent to. Driven by
   component state rather than :target, which does not update under Blazor's pushState navigation. */
.merge-workspace .evidence-focused {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* ── Comparison Assignments tab ────────────────────────────────────────────
   The comparison lens uses the same fixed-column table and expandable-row idiom as Assignments. */

.comparison-assignments-view {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.comparison-assignment-cap-note {
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
}

.comparison-assignment-toolbar {
    flex-wrap: wrap;
    padding: var(--space-3) 0 0;
    border-bottom: 0;
    row-gap: var(--space-2);
}

.comparison-assignment-toolbar .search-field {
    flex: 1 1 220px;
    max-width: 360px;
}

.comparison-assignment-search {
    min-height: 44px;
}

.comparison-assignment-filter {
    display: inline-flex;
    min-width: 11rem;
}

.comparison-assignment-filter .filter-select {
    width: 100%;
}

.comparison-assignment-status-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.comparison-filter-count {
    /* The chip is a flex container, so the space in "Covered 3" is collapsed away by the layout
       and the count has to carry its own separation. */
    margin-left: var(--space-1);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.comparison-assignment-status-filters .filter-chip.active .comparison-filter-count {
    color: var(--color-white);
    opacity: .8;
}

.comparison-assignment-filter-summary {
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
}

.comparison-assignment-table-region {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.comparison-assignment-table {
    min-width: 58rem;
    table-layout: fixed;
}

.comparison-assignment-table tbody td {
    vertical-align: top;
}

.comparison-assignment-table tbody tr:not(.comparison-assignment-detail-row) {
    cursor: pointer;
}

.comparison-assignment-table tbody tr:not(.comparison-assignment-detail-row):hover,
.comparison-assignment-table tbody tr.comparison-assignment-row-open {
    background: var(--color-surface);
}

.comparison-assignment-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-service-grey);
    cursor: pointer;
}

.comparison-assignment-text-cell {
    min-width: 0;
}

.comparison-assignment-source-trigger {
    display: flex;
    /* Explicit, because the app's shared button rule centres flex children. Without this a short
       quote sits in the middle of the column while a long one fills it, and the column reads as
       ragged rather than as a list. */
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.comparison-assignment-source-trigger:hover .comparison-assignment-quote {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.comparison-assignment-quote {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.comparison-assignment-source-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: .15rem;
    color: var(--color-text-secondary);
}

.comparison-assignment-source-reference {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    overflow-wrap: anywhere;
}

.comparison-assignment-role-cell {
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.comparison-assignment-coverage-cell {
    vertical-align: top;
}

/* Flex on the wrapper, never on the cell: a td set to display:flex drops out of the table
   layout and takes the following cell with it. */
.comparison-assignment-cell-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-1);
}

.comparison-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 1.5rem;
    padding: 0 var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--color-navy);
    font-size: var(--text-caption2);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.comparison-status-dot {
    width: .45rem;
    height: .45rem;
    border-radius: var(--radius-full);
    background: currentColor;
}

.comparison-status.status-covered {
    background: var(--color-success-tint);
    border-color: var(--color-success-tint-border);
}

.comparison-status.status-partly {
    background: var(--color-warning-tint);
    border-color: var(--color-warning-tint-border);
}

.comparison-status.status-notcovered {
    background: var(--color-error-tint);
    border-color: var(--color-error-tint-border);
    color: var(--color-error);
}

.comparison-status.status-notcompared {
    background: var(--color-draft-tint);
    border-color: var(--color-draft-tint-border);
    color: var(--color-service-grey);
}

.comparison-status-reason,
.comparison-role-flag,
.comparison-reviewed {
    display: block;
    flex-basis: 100%;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    line-height: 1.35;
}

.comparison-role-flag {
    color: var(--color-warning);
    font-weight: var(--font-medium);
}

.comparison-reviewed::before {
    content: "✓ ";
}

.comparison-document-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
}

.comparison-document-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    max-width: 100%;
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
    line-height: 1.25;
}

.comparison-document-chip > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.comparison-document-count {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-weight: var(--font-medium);
}

.comparison-no-document {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-assignment-detail-row td {
    background: var(--color-surface);
}

.comparison-assignment-detail-row .expandable-content.open {
    max-height: 4000px;
}

.comparison-assignment-detail {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6) var(--space-5);
}

/* ── Comparison Sections and Roles views ──────────────────────────────────
   Both projections use the same dense table and expandable-row idiom as the Assignments tab. */

.comparison-sections-view,
.comparison-roles-view {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.comparison-sections-toolbar,
.comparison-roles-toolbar {
    flex-wrap: wrap;
    padding: var(--space-3) 0 0;
    border-bottom: 0;
    row-gap: var(--space-2);
}

.comparison-sections-toolbar .search-field,
.comparison-roles-toolbar .search-field {
    flex: 1 1 220px;
    max-width: 360px;
}

.comparison-section-filter {
    display: inline-flex;
    min-width: 11rem;
}

.comparison-section-filter .filter-select {
    width: 100%;
}

.comparison-section-search,
.comparison-role-search {
    min-height: 44px;
}

.comparison-section-table-region,
.comparison-role-table-region {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.comparison-section-table,
.comparison-role-table {
    table-layout: fixed;
}

.comparison-section-table {
    min-width: 60rem;
}

.comparison-role-table {
    min-width: 60rem;
}

.comparison-section-table tbody td,
.comparison-role-table tbody td {
    vertical-align: top;
}

.comparison-section-row {
    cursor: pointer;
}

.comparison-section-row:hover,
.comparison-section-row-open {
    background: var(--color-surface);
}

.comparison-section-document-heading th {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-service-grey);
    font-family: var(--font-heading);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
    letter-spacing: .04em;
    text-align: left;
}

.comparison-section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-service-grey);
    cursor: pointer;
}

.comparison-section-cell,
.comparison-section-page,
.comparison-section-covered-in,
.comparison-role-name-cell,
.comparison-role-counterpart-cell {
    min-width: 0;
    overflow-wrap: anywhere;
}

.comparison-section-cell {
    display: grid;
    gap: var(--space-1);
}

.comparison-section-cell strong,
.comparison-role-name-cell strong {
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.comparison-section-path,
.comparison-role-master,
.comparison-role-duties-cell {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-section-heading-missing,
.comparison-section-detail-path {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-section-detail-path {
    margin: 0;
}

.comparison-section-path,
.comparison-role-master {
    display: block;
}

.comparison-section-page,
.comparison-role-duties-cell {
    font-variant-numeric: tabular-nums;
}

.comparison-section-duties,
.comparison-role-duties-cell {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    font-variant-numeric: tabular-nums;
}

.comparison-section-detail-row td {
    background: var(--color-surface);
}

.comparison-section-detail-row .expandable-content.open {
    max-height: 2000px;
}

.comparison-section-detail {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6) var(--space-5);
}

.comparison-section-answers {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-2) var(--space-5);
}

.comparison-section-answers .detail-label {
    padding-top: 2px;
}

.comparison-section-answers .detail-value {
    line-height: 1.5;
}

.comparison-section-duties-pointer {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    line-height: 1.5;
}

.comparison-section-duties-pointer strong {
    margin-right: var(--space-2);
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.comparison-section-match-group {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.comparison-section-match-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-navy);
}

.comparison-section-match-heading span,
.comparison-section-match-page {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-section-match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-light);
}

.comparison-section-match-path {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
}

.comparison-section-match .comparison-section-path {
    grid-column: 1 / -1;
}

.comparison-section-match-page {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
}

.comparison-role-name-cell {
    display: grid;
    gap: var(--space-1);
}

.comparison-role-counterpart {
    color: var(--color-navy);
}

.comparison-role-counterpart + .comparison-role-counterpart {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-light);
}

.comparison-structure-triage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.comparison-role-empty {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.comparison-sections-view button:focus-visible,
.comparison-sections-view input:focus-visible,
.comparison-sections-view select:focus-visible,
.comparison-roles-view button:focus-visible,
.comparison-roles-view input:focus-visible,
.comparison-roles-view select:focus-visible,
.comparison-roles-view a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

@media (max-width: 52rem) {
    .comparison-section-filter {
        width: 100%;
    }

    .comparison-section-detail,
    .comparison-section-match {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

.comparison-assignment-answers {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-2) var(--space-5);
}

.comparison-assignment-answers .detail-label {
    padding-top: 2px;
}

.comparison-assignment-answers .detail-value {
    line-height: 1.5;
}

.comparison-empty-evidence {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-footnote);
    line-height: 1.5;
}

.comparison-evidence-block {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.comparison-evidence-heading,
.comparison-counterpart-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.comparison-evidence-heading strong {
    color: var(--color-text-primary);
    font-size: var(--text-footnote);
    font-weight: var(--font-medium);
}

.comparison-evidence-heading > span {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-counterpart {
    display: grid;
    gap: var(--space-2);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border-light);
}

.comparison-counterpart-heading > span {
    color: var(--color-text-primary);
    font-size: var(--text-footnote);
    line-height: 1.45;
}

.comparison-counterpart-source {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: .4rem;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.comparison-counterpart-source:hover {
    color: var(--color-navy);
}

.comparison-counterpart-source svg {
    width: 1rem;
    height: 1rem;
}

.comparison-counterpart-quote,
.comparison-counterpart blockquote {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: var(--text-footnote);
    line-height: 1.5;
}

.comparison-match-provenance,
.comparison-stale-note {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-role-callout {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-warning-tint);
    border: 1px solid var(--color-warning-tint-border);
    border-radius: var(--radius-sm);
    color: var(--color-navy);
    font-size: var(--text-caption1);
}

.comparison-stale-note {
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
}

.comparison-assignments-view button:focus-visible,
.comparison-assignments-view input:focus-visible,
.comparison-assignments-view select:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

@media (max-width: 48rem) {
    .comparison-assignment-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .comparison-assignment-toolbar .search-field,
    .comparison-assignment-filter {
        max-width: none;
        width: 100%;
    }

    .comparison-assignment-answers {
        grid-template-columns: minmax(0, 1fr);
    }

    .comparison-assignment-detail {
        padding-inline: var(--space-4);
    }
}

/* Feature 098. One document collection, with explicit focus and comparator roles. */
.comparisons-page .document-collection-picker {
    max-width: 72rem;
}

.comparisons-page .picker-description {
    margin: var(--space-1) 0 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparisons-page .unified-document-options {
    max-height: 30rem;
}

.comparisons-page .document-collection-option {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    cursor: default;
}

.comparisons-page .document-collection-option.focus-selected {
    background: var(--color-info-tint);
    border-color: var(--color-blue);
    box-shadow: inset 3px 0 0 var(--color-blue);
}

.comparisons-page .document-collection-option.comparator-selected:not(.focus-selected) {
    background: color-mix(in srgb, var(--color-teal) 9%, var(--color-white));
    border-color: var(--color-teal);
    box-shadow: inset 3px 0 0 var(--color-teal);
}

.comparisons-page .document-role-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.comparisons-page .document-role-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
    cursor: pointer;
}

.comparisons-page .focus-choice {
    order: 1;
}

.comparisons-page .comparator-choice {
    order: 2;
}

.comparisons-page .document-role-choice:has(input:checked) {
    border-color: var(--color-blue);
    color: var(--color-navy);
}

.comparisons-page .document-role-choice:has(input:focus-visible) {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.comparisons-page .document-role-choice.unavailable {
    opacity: .5;
    cursor: not-allowed;
}

.comparisons-page .document-role-choice input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--color-blue);
}

.comparisons-page .document-selection-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.comparisons-page .document-selection-summary > div {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.comparisons-page .document-selection-summary > div > span {
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.comparisons-page .document-selection-summary strong {
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-size: var(--text-caption1);
}

.comparisons-page .document-builder-summary {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 calc(var(--space-6) * -1) calc(var(--space-6) * -1);
    padding: var(--space-4) var(--space-6);
    background: color-mix(in srgb, var(--color-white) 96%, transparent);
    box-shadow: 0 -1px 0 var(--color-border), 0 -8px 24px rgb(0 0 0 / 6%);
    backdrop-filter: blur(8px);
}

.comparisons-page .document-builder-inline-scope {
    display: none;
}

/* Feature 098. Differences is the review workspace; Structure and Audit are supporting views. */
.comparison-role-scope-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-role-scope-summary strong {
    color: var(--color-navy);
}

.comparison-structure-view {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.comparison-secondary-loading {
    display: grid;
    gap: var(--space-2);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-differences {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.comparison-differences-loading {
    display: grid;
    gap: var(--space-3);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-differences-error,
.comparison-differences-empty {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.comparison-differences-error h2,
.comparison-differences-empty h3 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
}

.comparison-differences-error p,
.comparison-differences-empty p {
    max-width: 52rem;
    margin: 0;
    color: var(--color-service-grey);
}

.comparison-differences-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
}

.comparison-differences-header > div:first-child {
    max-width: 52rem;
}

.comparison-view-kicker {
    margin: 0 0 var(--space-1);
    color: var(--color-blue);
    font-size: var(--text-caption2);
    font-weight: var(--font-medium);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.comparison-differences-header h2 {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-title2);
    font-weight: var(--font-medium);
}

.comparison-differences-header p:not(.comparison-view-kicker) {
    margin: var(--space-2) 0 0;
    color: var(--color-service-grey);
}

.comparison-export-menu {
    position: relative;
    flex: 0 0 auto;
}

.comparison-export-menu > summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    cursor: pointer;
    list-style: none;
}

.comparison-export-menu > summary::-webkit-details-marker {
    display: none;
}

.comparison-export-menu > summary::after {
    content: "▾";
    margin-left: var(--space-2);
    font-size: var(--text-caption2);
}

.comparison-export-actions {
    position: absolute;
    z-index: 4;
    top: calc(100% + var(--space-2));
    right: 0;
    display: grid;
    gap: var(--space-1);
    min-width: 18rem;
    padding: var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.comparison-export-actions .text-button {
    justify-content: flex-start;
    min-height: 2.75rem;
    padding-inline: var(--space-3);
    text-align: left;
}

.comparison-difference-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.comparison-difference-metrics > div {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border-right: 1px solid var(--color-border-light);
}

.comparison-difference-metrics > div:last-child {
    border-right: 0;
}

.comparison-difference-metrics strong {
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

.comparison-difference-metrics span {
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.comparison-differences-disclosure {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-differences-disclosure a {
    color: var(--color-text-link);
}

.comparison-difference-filters {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) minmax(16rem, 3fr) auto;
    align-items: end;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.comparison-difference-filters label {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.comparison-difference-search {
    min-width: 0;
}

.comparison-filter-panel {
    min-width: 0;
}

.comparison-filter-panel > summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    color: var(--color-navy);
    font-weight: var(--font-medium);
    cursor: pointer;
}

.comparison-filter-panel-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.comparison-group-toggle {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: var(--space-2) !important;
    min-height: 2.75rem;
    color: var(--color-navy);
    font-size: var(--text-caption1);
    cursor: pointer;
}

.comparison-group-toggle input {
    width: 1.125rem;
    min-height: 1.125rem;
    margin: 0;
    accent-color: var(--color-blue);
}

.comparison-filter-status {
    min-height: 1.25rem;
    margin: calc(var(--space-3) * -1) 0 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-differences-error-inline {
    margin: 0;
    padding: var(--space-3);
    background: var(--color-warning-tint);
    border: 1px solid var(--color-warning-tint-border);
    border-radius: var(--radius-md);
}

.comparison-difference-filters input,
.comparison-difference-filters select,
.alignment-outcome-form textarea,
.alignment-receiving-picker select {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font: inherit;
}

.comparison-difference-filters .comparison-group-toggle input {
    width: 1.125rem;
    min-height: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.comparison-difference-filters input:focus,
.comparison-difference-filters select:focus,
.alignment-outcome-form textarea:focus,
.alignment-receiving-picker select:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: var(--shadow-focus);
}

.comparison-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.comparison-filter-result {
    margin-right: var(--space-1);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.comparison-active-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    background: var(--color-info-tint);
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-full);
    color: var(--color-navy);
    font: inherit;
    font-size: var(--text-caption2);
    cursor: pointer;
}

.comparison-preview-warning {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-warning-tint);
    border: 1px solid var(--color-warning-tint-border);
    border-radius: var(--radius-md);
    color: var(--color-navy);
}

.comparison-preview-warning span {
    font-size: var(--text-caption1);
}

/* The notice gained a route out of the state it reports. A grid item stretches by default, which
   turns that link into a full-width bar reading as a control rather than a link. The two text rows
   are unaffected: left-aligned text renders identically stretched or start-aligned. */
.comparison-workspace .comparison-preview-warning,
.comparison-workspace .cmp-callout {
    justify-items: start;
}

/* The callout carried one sentence and needed no internal structure. Stating what a reviewer cannot
   do takes a claim and its consequence, which is two rows. */
.comparison-workspace .cmp-callout {
    display: grid;
    gap: var(--space-1);
}

.comparison-workspace .cmp-callout span {
    font-size: var(--text-caption1);
}

/* The runner's own exception text. It is evidence rather than prose, so it sits under the derived
   sentence at the supporting size instead of competing with it. */
.comparison-workspace .comparison-run-state-reason {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    overflow-wrap: anywhere;
}

/* .reg-skeleton is a 12px bar sized for a compact regulatory row. Here it stands in for text at
   four sizes, so it takes the height of the text it replaces and sits on that text's own baseline.
   A fixed 12px bar inside a title-sized count shortened the tile and the whole strip moved when the
   rows arrived, which is the jump the skeleton exists to prevent. */
.comparison-duty-skeleton .reg-skeleton {
    display: inline-block;
    height: 1em;
    vertical-align: middle;
}

/* A duty cell holds two or three lines of quoted text, so its placeholder is a stack, not a bar. */
.comparison-duty-skeleton .duty-col-side .reg-skeleton {
    display: block;
}

.comparison-duty-skeleton .duty-col-side .reg-skeleton + .reg-skeleton {
    margin-top: var(--space-2);
}

.comparison-difference-list {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.comparison-difference-group {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.comparison-difference-group-header {
    display: grid;
    gap: var(--space-3);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.comparison-difference-group-header > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.comparison-difference-group-header .comparison-view-kicker {
    margin: 0;
}

.comparison-difference-group-header > .comparison-difference-end {
    padding-block: var(--space-4);
}

.comparison-difference-group-header.comparator-only-heading > div:first-child {
    border-bottom: 0;
}

.focus-group .grouped-focus-child {
    margin-left: var(--space-5);
    border-top-left-radius: var(--radius-sm);
}

.comparison-difference-card {
    display: grid;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.comparison-difference-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, auto) minmax(0, 1fr);
    min-width: 0;
}

.comparison-difference-pair-child {
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
}

.comparison-difference-end {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-5);
}

.comparison-difference-end.comparator {
    background: color-mix(in srgb, var(--color-surface) 55%, var(--color-white));
}

.comparison-difference-end-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--color-blue);
    font-size: var(--text-caption2);
    font-weight: var(--font-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.comparison-version-warning {
    color: var(--color-warning-text, var(--color-service-grey));
    font-weight: var(--font-medium);
    letter-spacing: 0;
    text-transform: none;
}

.comparison-document-label {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-navy);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
}

.comparison-difference-end blockquote {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
    font-size: var(--text-body);
    line-height: 1.55;
}

.comparison-assignment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.comparison-missing-end {
    margin: 0;
    padding: var(--space-5) 0;
    color: var(--color-service-grey);
    font-style: italic;
}

.comparison-difference-relation {
    display: grid;
    place-content: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-2);
    background: var(--color-surface);
    border-inline: 1px solid var(--color-border-light);
    color: var(--color-navy);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
    text-align: center;
}

.comparison-difference-relation small {
    color: var(--color-service-grey);
    font-weight: var(--font-regular);
}

.comparison-difference-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.comparison-finding-summary,
.comparison-outcome-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.comparison-finding-label {
    color: var(--color-service-grey);
}

.comparison-outcome-summary strong {
    color: var(--color-navy);
}

.comparison-finding-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    color: var(--color-navy);
    font-size: var(--text-caption2);
    font-weight: var(--font-medium);
}

.comparison-finding-chip.finding-conflict,
.comparison-finding-chip.finding-changed {
    background: var(--color-warning-tint);
}

.comparison-finding-chip.finding-focusonly,
.comparison-finding-chip.finding-comparatoronly {
    background: var(--color-info-tint);
}

.comparison-finding-chip.finding-candidate {
    background: var(--color-surface);
}

.comparison-finding-chip.finding-equivalent {
    background: var(--color-success-tint);
}

.comparison-difference-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
}

.comparison-evidence-details {
    min-width: min(100%, 28rem);
}

.comparison-evidence-details summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--color-text-link);
    font-size: var(--text-caption1);
    font-weight: var(--font-medium);
    cursor: pointer;
}

.comparison-evidence-details dl {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

.comparison-evidence-details dl > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-3);
}

.comparison-evidence-details dt {
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.comparison-evidence-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
    font-size: var(--text-caption1);
}

.comparison-outcome-history {
    padding: 0 var(--space-5) var(--space-4);
}

.comparison-outcome-history ol {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding-left: var(--space-5);
}

.comparison-outcome-history li span,
.comparison-outcome-history li p {
    display: block;
    margin: var(--space-1) 0 0;
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
}

.alignment-outcome-editor {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
}

.alignment-outcome-editor > .outcome-recorded {
    max-width: 42rem;
}

.alignment-outcome-open {
    justify-self: start;
}

.alignment-outcome-empty {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.alignment-outcome-form {
    display: grid;
    gap: var(--space-4);
    max-width: 52rem;
}

.alignment-outcome-form:focus {
    outline: none;
}

.alignment-outcome-form:focus-visible {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-focus);
}

.alignment-outcome-note {
    display: grid;
    gap: var(--space-1);
}

.alignment-outcome-note textarea {
    resize: vertical;
}

.alignment-outcome-options,
.alignment-outcome-targets {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.alignment-outcome-options legend,
.alignment-outcome-targets legend {
    margin-bottom: var(--space-1);
    color: var(--color-navy);
    font-weight: var(--font-medium);
}

.alignment-outcome-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.alignment-outcome-option:has(input:checked) {
    background: var(--color-info-tint);
    border-color: var(--color-blue);
}

.alignment-outcome-option:has(input:focus-visible),
.alignment-outcome-targets .outcome-radio:has(input:focus-visible) {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.alignment-outcome-option input {
    width: 1.125rem;
    height: 1.125rem;
    margin: .125rem 0 0;
    accent-color: var(--color-blue);
}

.alignment-outcome-option span {
    display: grid;
    gap: var(--space-1);
}

.alignment-outcome-option small {
    color: var(--color-service-grey);
}

.alignment-outcome-targets .outcome-radio {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
}

.alignment-outcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.alignment-outcome-cancel {
    min-height: 2.75rem;
}

.outcome-field-error {
    margin-top: calc(var(--space-2) * -1);
}

@media (max-width: 75rem) {
    .comparison-difference-filters {
        grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 1fr);
    }

    .comparison-group-toggle {
        grid-column: 1 / -1;
    }

    .comparison-difference-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comparison-difference-metrics > div:nth-child(2) {
        border-right: 0;
    }

    .comparison-difference-metrics > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border-light);
    }
}

@media (max-width: 48rem) {
    .comparison-workspace > .tabs {
        width: 100%;
    }

    .comparison-workspace > .tabs .tab-btn {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: var(--space-2);
    }

    .comparisons-page .document-collection-option {
        grid-template-columns: minmax(0, 1fr);
    }

    .comparisons-page .document-role-controls {
        justify-content: stretch;
    }

    .comparisons-page .document-role-choice {
        flex: 1 1 9rem;
        justify-content: center;
        min-height: 2.75rem;
    }

    .comparisons-page .document-selection-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .comparisons-page .document-selection-summary > .picker-count {
        justify-self: start;
        order: 3;
    }

    .comparisons-page .document-builder-summary {
        margin-inline: calc(var(--space-4) * -1);
        margin-bottom: calc(var(--space-4) * -1);
        padding-inline: var(--space-4);
    }

    .comparisons-page .unified-document-options {
        max-height: 18rem;
    }

    .comparisons-page .document-builder-inline-scope {
        display: grid;
        gap: var(--space-1);
        min-width: 0;
        color: var(--color-service-grey);
        font-size: var(--text-caption2);
    }

    .comparisons-page .document-builder-inline-scope span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comparison-difference-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .comparison-difference-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comparison-difference-metrics > div {
        padding: var(--space-3);
        border-right: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
    }

    .comparison-difference-metrics > div:nth-child(2n) {
        border-right: 0;
    }

    .comparison-difference-metrics > div:nth-child(n + 3) {
        border-bottom: 0;
    }

    .comparison-difference-metrics > div:last-child {
        border-bottom: 0;
    }

    .comparison-difference-metrics span {
        display: none;
    }

    .comparison-differences-header,
    .comparison-difference-card-header,
    .comparison-difference-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .comparison-export-menu,
    .comparison-export-menu > summary {
        width: 100%;
    }

    .comparison-export-menu > summary {
        justify-content: center;
    }

    .comparison-export-actions {
        position: static;
        width: 100%;
        margin-top: var(--space-2);
    }

    .comparison-filter-panel-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .focus-group .grouped-focus-child {
        margin-left: 0;
    }

    .comparison-difference-pair {
        display: flex;
        flex-direction: column;
    }

    .comparison-difference-end.focus {
        order: 1;
    }

    .comparison-difference-end.comparator {
        order: 2;
    }

    .comparison-difference-relation {
        order: 3;
        place-content: start;
        padding: var(--space-3) var(--space-4);
        border: 0;
        border-top: 1px solid var(--color-border-light);
        text-align: left;
    }

    .comparison-difference-card-header,
    .comparison-difference-actions,
    .alignment-outcome-editor,
    .comparison-difference-end {
        padding-inline: var(--space-4);
    }

    .comparison-finding-summary,
    .comparison-outcome-summary {
        justify-content: space-between;
        min-height: 2.75rem;
    }

    .comparison-source-action,
    .comparison-active-filter,
    .comparison-difference-actions .text-button,
    .comparison-evidence-details summary,
    .comparison-filter-panel > summary,
    .comparison-export-menu > summary,
    .alignment-outcome-open,
    .outcome-change-link,
    .alignment-outcome-actions .btn,
    .alignment-outcome-actions .text-button,
    .comparisons-page .mode-card,
    .comparisons-page .btn {
        min-height: 2.75rem;
    }

    .comparison-evidence-details dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }
}

/* ============================================================================
   Slice B: the duty-grain result (r3 deck frames 2B, 3, 5, 6).
   One amber mark for word differences, both sides; red stays reserved for a
   failed run. Content columns flex; the fixed columns hold short content only.
   ============================================================================ */

/* The card is white against the page surface, not surface-on-surface: at one value of grey it read
   as part of the background rather than as the thing the whole screen is about. */
.comparison-result-scope {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.comparison-result-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
}

/* The axis is the whole point of the card: two documents side by side with nothing between them
   are two documents, not a comparison. */
.comparison-result-axis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-4);
    background: var(--color-surface);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.comparison-result-side {
    min-width: 0;
    padding: var(--space-4) var(--space-5);
}

/* A 3px keyline per side, in the two brand colours the rest of the app already uses for left and
   right. It is what makes "left" and "right" readable at a glance without a second legend. */
.comparison-result-side-left { border-left: 3px solid var(--color-navy); }

.comparison-result-side-right { border-left: 3px solid var(--color-blue); }

.comparison-result-keyline {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-service-grey);
    font-size: var(--text-caption2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.comparison-result-doc { display: flex; flex-direction: column; gap: 2px; }

.comparison-result-doc + .comparison-result-doc { margin-top: var(--space-3); }

.comparison-result-ref { font-weight: var(--font-semibold); color: var(--color-navy); }

.comparison-result-title { color: var(--color-navy); }

.comparison-result-meta,
.comparison-result-run-meta { color: var(--color-service-grey); font-size: var(--text-caption1); }

/* Run provenance is a footer inside the card, not a third column beside the documents: it is about
   the comparison, not about either side. */
.comparison-result-run {
    margin: 0;
    padding: var(--space-2) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface);
}

.comparison-duty-view { display: block; }

/* The triage strip: four pressable tiles, one per facet bucket the projection already emits. It is
   a filter, not a stat band — the count is the reason a reviewer presses one, and the pressed tile
   governs the table below. */
.duty-triage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Sections has a fourth status the Result strip does not: Not compared, which the projection can
   return and which must keep its own tile or the four counts stop summing to the searched set. At
   three columns the fourth tile wrapped to a row of its own and cost 102px, putting the first
   section below the fold of an 834px screen. */
.comparison-structure-triage { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The ledger has the same four-tile problem, and its fourth label, "Awaiting a document change",
   is the longest in either strip, so it gets the extra room rather than truncating alone. */
.register-triage { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); }

.register-no-score { color: var(--color-service-grey); }

.duty-triage-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-left-color: var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-base), border-color var(--duration-base);
}

.duty-triage-tile:hover:not(:disabled) { background: var(--color-surface); }

/* A muted ground rather than a blanket opacity. Fading the whole tile faded the word that names
   the count, and a class coming back empty is a result the reviewer needs to read, not dismiss. */
.duty-triage-tile:disabled {
    cursor: default;
    background: var(--color-surface);
    border-color: var(--color-border-light);
    border-left-color: var(--color-border-light);
}

/* The count keeps full strength and the words step back. A zero is the finding here, so fading
   the number would weaken the one claim the tile exists to make. */
.duty-triage-tile:disabled .duty-triage-label { color: var(--color-service-grey); }

.duty-triage-tile:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Severity is carried by the left keyline only. A tinted ground on all four would put the whole
   strip at one value again, which is the problem this replaces. */
.duty-triage-severe { border-left-color: var(--color-warning); }

.duty-triage-conflict { border-left-color: var(--color-error); }

.duty-triage-tile.pressed {
    background: var(--clv-color-ice-blue);
    border-color: var(--color-navy);
    border-left-color: var(--color-navy);
}

.duty-triage-count {
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-title3);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.duty-triage-label {
    color: var(--color-navy);
    font-size: var(--text-subhead);
    font-weight: var(--font-medium);
}

/* One line, always. A wrapping sub-line on the longest tile set the height of all four, and the
   strip is the thing standing between the reviewer and the table. Full text on the title. */
.duty-triage-sub {
    max-width: 100%;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The result reuses the saved-comparisons card: toolbar, then table, in one white surface.
   The card does not clip, so the export menu can open past its edge. */
.comparison-result-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* The empty state carries its own card chrome for the standalone case; inside the result card it
   would draw a second border around itself. */
.comparison-result-card .comparison-differences-empty {
    border: 0;
    border-top: 1px solid var(--color-border-light);
    border-radius: 0;
}

/* A select takes its longest option as its intrinsic width, so a long role name stretched one
   facet to twice its neighbours and past a 390px viewport. The three facets share one basis. */
.duty-toolbar .filter-select { flex: 1 1 180px; min-width: 0; max-width: 240px; }

/* One 44px control row: the shared search input is 36px and every select is 44px, which read as
   two different toolbars stacked on one line. */
.duty-toolbar .search-field input { height: 44px; }

.duty-toolbar {
    align-items: center;
    gap: var(--space-3);
    min-height: 4.5rem;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Frame 3 at 2560: the search stops growing; spare width belongs to the duty columns. */
.duty-search { flex: 1 1 260px; max-width: 360px; }

.duty-export { margin-left: auto; position: relative; }

.duty-export-note {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
    margin: 0 0 var(--space-2);
    max-width: 300px;
}

.duty-result-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    padding: 0 var(--space-5) var(--space-3);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.duty-table-scroll { border-top: 1px solid var(--color-border-light); }

.duty-table {
    /* Fixed layout splits the growth equally between the two duty columns; auto layout hands the
       longer document most of the width and the two sides stop reading as peers. */
    table-layout: fixed;
    border-collapse: collapse;
}

/* The shared .data-table gives the header and cell chrome; the duty view sets only the parts a
   two-document diff needs: top-aligned cells and its own column widths. */
.duty-table th { vertical-align: top; }

/* This sits inside a th, so it is on the Deep Teal product header, not on a light surface.
   --color-service-grey is #416581 and measures 1.74:1 there. Inverse at 0.78 gives about 7:1 and
   still reads as secondary to the white column title above it. */
.duty-col-sub {
    display: block;
    margin-top: 2px;
    font-weight: var(--font-regular);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-inverse);
    opacity: .78;
}

.duty-table td { vertical-align: top; }

/* Short fixed content; the two duty columns take all growth. */
.duty-col-side { width: auto; min-width: 220px; }
.duty-col-toggle { width: 36px; }
.duty-col-kind { width: 152px; }
/* Wide enough for the score plus its one-line qualifier; 96px stacked "judge found no
   relationship" four words deep. */
.duty-col-match { width: 132px; }

.duty-table td.duty-col-toggle,
.duty-table th.duty-col-toggle { padding-left: 10px; padding-right: 2px; }

.duty-row-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    border: 0;
    background: transparent;
    color: var(--color-service-grey);
    cursor: pointer;
}

.duty-chevron { transition: transform var(--duration-base); }

.duty-table .duty-group-row td {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 0;
}

.duty-group-toggle {
    display: flex;
    align-items: center;
    /* The app's base button rule centres its content; a full-width header must start at the left. */
    justify-content: flex-start;
    gap: var(--space-2);
    width: 100%;
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    background: transparent;
    color: var(--color-service-grey);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.duty-group-toggle:hover { background: var(--rp-row-hover); }
.duty-group-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.duty-group-label { font-weight: var(--font-semibold); color: var(--color-navy); }

.duty-group-note {
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

.duty-kind-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-caption1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-navy);
    /* Long document references must wrap INSIDE the fixed column; nowrap printed the badge over
       the duty text on every one-sided row. */
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* Amber is the strongest colour on a normal row (deck frame 3). */
.duty-kind-rolediffers,
.duty-kind-requirementdiffers,
.duty-kind-onlyleft,
.duty-kind-onlyright {
    background: var(--color-warning-tint);
    border-color: transparent;
    color: var(--color-warning);
}

/* A ruled-out candidate is a different fact from an absence, and inside the Unmatched class it is
   the only fact the column is drawn to carry. Info tint, not the amber the absences use, so the
   one row that differs does not read as one more of the many. */
.duty-kind-unmatched {
    background: var(--color-info-tint);
    border-color: var(--color-info-tint-border);
    color: var(--color-info);
}

.duty-section-ref,
.duty-prov { color: var(--color-service-grey); font-size: var(--text-caption1); }

.duty-text { margin: 0 0 var(--space-1); color: var(--color-navy); }

.duty-text-unmatched { color: var(--color-service-grey); }

.duty-prov-lead { color: var(--color-service-grey); }

.duty-role { font-weight: var(--font-semibold); }

.duty-mark {
    background: var(--color-warning-tint);
    color: inherit;
    border-radius: 2px;
}

.duty-absent { color: var(--color-service-grey); font-style: italic; font-size: var(--text-caption1); }

.duty-score { font-weight: var(--font-semibold); color: var(--color-navy); }

.duty-score-sub {
    display: block;
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

/* No zebra: a two-document diff already carries the marked words and the kind badge, and an
   alternating band competes with both. */
.duty-row td { background: var(--color-white); }
.duty-row:hover td { background: var(--rp-row-hover); }

.duty-row-open td { border-bottom: 0; }

.duty-detail-row td { border-bottom: 1px solid var(--color-border-light); }

/* The shared .expandable-inner is a two-column grid, which would park the whole detail in the
   left half; the detail lays out its own blocks. Its 900px cap also cuts the alternatives table. */
.duty-expand-wrap { display: block; }
.duty-detail-row .expandable-content.open { max-height: 2000px; }

.duty-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.duty-detail-block h5 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-caption1);
    font-weight: var(--font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-service-grey);
}

.duty-detail-block dl { margin: 0 0 var(--space-2); display: grid; gap: var(--space-1); }

.duty-detail-block dl > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: var(--space-2);
    font-size: var(--text-caption1);
}

.duty-detail-block dt { color: var(--color-service-grey); }
.duty-detail-block dd { margin: 0; color: var(--color-navy); }

.duty-alternatives-heading {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--text-caption1);
    font-weight: var(--font-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-service-grey);
}

.duty-alternatives {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
}

.duty-alternatives td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.duty-alternatives tr:last-child td { border-bottom: 0; }

.duty-alt-score { width: 64px; }
.duty-alt-action { width: 140px; text-align: right; }
.duty-alt-text { display: block; color: var(--color-navy); }

.duty-swap-note { margin-top: var(--space-3); color: var(--color-service-grey); font-size: var(--text-caption1); }

.duty-detail-exit { margin-left: auto; }

/* The ledger link sits inside a sentence, so colour alone is not enough to find it. */
.duty-detail-exit a { text-decoration: underline; }

.duty-legend {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin: 0;
    padding: var(--space-3) var(--space-5);
    color: var(--color-service-grey);
    font-size: var(--text-caption1);
}

/* Below the tablet bound the scope pair has no width for an axis between its two halves, so it
   stacks and the keylines carry left and right on their own. The three tiles are NOT stacked with
   it: one column would run the strip to roughly 300px of chrome above the table, which is the cost
   this design has already been trimmed twice to avoid. They hold their row and the sub-line
   truncates, which it is built to do. */
@media (max-width: 1099px) {
    .comparison-result-pair { grid-template-columns: minmax(0, 1fr); }
    .comparison-result-axis {
        flex-direction: row;
        padding: var(--space-2) var(--space-5);
    }
    .duty-triage { gap: var(--space-2); }
    .comparison-structure-triage,
    .register-triage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .duty-triage-tile { padding: var(--space-3); }
}

/* On a short screen the block above the table is what decides whether any duty is on the first
   screen at all. Trimming padding is the honest lever: it costs breathing room, not information,
   where collapsing the scope card would hide the pinned versions this surface exists to prove. */
@media (max-height: 900px) {
    .comparison-result-side { padding: var(--space-3) var(--space-5); }
    .comparison-result-run { padding: var(--space-1) var(--space-5); }
    .comparison-result-axis { padding: var(--space-3); }
    .duty-triage-tile { padding: var(--space-2) var(--space-4); }
    .duty-toolbar { min-height: 0; padding: var(--space-3) var(--space-5); }
}