.merge-advance-notice { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border-inline-start: var(--space-xs) solid var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); box-shadow: var(--shadow-sm); } .merge-advance-notice__content { color: var(--text); line-height: 1.4; } .merge-advance-notice__actions { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; } .merge-advance-notice__dismiss { border: 0; background: none; color: var(--text-muted); padding: var(--space-xs); border-radius: var(--radius-sm); line-height: 0; cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } .merge-advance-notice__dismiss:hover { color: var(--text); background: color-mix(in srgb, var(--color-warning) 18%, transparent); } .merge-advance-notice__dismiss:focus-visible { outline: none; box-shadow: var(--focus-ring-strong); } .merge-advance-notice__error { color: var(--color-error); } .merge-advance-notice__hint { color: var(--text-muted); } .merge-advance-notice__push { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--border-width-thin) solid color-mix(in srgb, var(--color-warning) 25%, transparent); } .merge-advance-notice__push-heading { margin: 0; color: var(--text); } .merge-advance-notice__push-actions { display: flex; align-items: center; gap: var(--space-xs); } .merge-advance-notice__push-advanced summary { cursor: pointer; color: var(--text-muted); } .merge-advance-notice__push-advanced label { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-2xs); } .merge-advance-notice__push-error { color: var(--color-error); } .merge-advance-notice__push-error pre { margin: var(--space-2xs) 0; padding: var(--space-2xs); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); font-family: var(--font-mono); white-space: pre-wrap; } @media (max-width: 768px) { .merge-advance-notice { flex-direction: column; align-items: stretch; } .merge-advance-notice__actions { justify-content: flex-start; } .merge-advance-notice__push-actions { flex-direction: column; align-items: flex-start; } }